feat: begin adding settings menu, move theme to settings
This commit is contained in:
frosty
232
static/main.css
232
static/main.css
@@ -25,12 +25,19 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
height:100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color:var(--bg-main);
|
||||
background-image:radial-gradient(circle at top right, var(--bg-card) 0%, var(--bg-main) 100%);
|
||||
background-attachment:fixed;
|
||||
color:var(--text-primary);
|
||||
font-family:system-ui,-apple-system,sans-serif;
|
||||
margin:0;
|
||||
padding:0;
|
||||
min-height:100%;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
@@ -44,13 +51,12 @@ img[src=""] {
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
background: radial-gradient(circle at top right, var(--bg-card) 0%, var(--bg-main) 100%);
|
||||
}
|
||||
|
||||
.view-home .container {
|
||||
width: 100%;
|
||||
max-width: 580px;
|
||||
margin: 0 auto;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -100,11 +106,56 @@ img[src=""] {
|
||||
background:var(--bg-card);
|
||||
color:var(--text-primary);
|
||||
border-color:var(--border);
|
||||
text-decoration:none;
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
padding:10px 24px;
|
||||
border-radius:8px;
|
||||
font-weight:600;
|
||||
font-size:0.9rem;
|
||||
cursor:pointer;
|
||||
transition:all 0.2s;
|
||||
border:1px solid var(--border);
|
||||
}
|
||||
.view-home .btn-secondary:hover {
|
||||
background:var(--border);
|
||||
border-color:var(--text-secondary);
|
||||
}
|
||||
.home-settings-btn {
|
||||
position:fixed;
|
||||
top:27px;
|
||||
right:60px;
|
||||
width:24px;
|
||||
height:24px;
|
||||
background-color:var(--text-primary);
|
||||
-webkit-mask-image:url('/static/settings.svg');
|
||||
mask-image:url('/static/settings.svg');
|
||||
mask-size:contain;
|
||||
mask-repeat:no-repeat;
|
||||
mask-position:center;
|
||||
text-decoration:none;
|
||||
}
|
||||
.nav-settings-icon {
|
||||
width:24px;
|
||||
height:24px;
|
||||
flex-shrink:0;
|
||||
margin-left:auto;
|
||||
margin-top:3px;
|
||||
background-color:var(--text-secondary);
|
||||
-webkit-mask-image:url('/static/settings.svg');
|
||||
mask-image:url('/static/settings.svg');
|
||||
mask-size:100% 100%;
|
||||
transition:background-color 0.2s;
|
||||
text-decoration:none;
|
||||
}
|
||||
.nav-settings-icon:hover,
|
||||
.nav-settings-icon.active {
|
||||
background-color:var(--text-primary);
|
||||
}
|
||||
.nav-settings-link {
|
||||
display:none;
|
||||
margin-left:auto;
|
||||
}
|
||||
header {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
@@ -112,6 +163,7 @@ header {
|
||||
padding:15px 60px;
|
||||
border-bottom:1px solid var(--border);
|
||||
background:var(--bg-main);
|
||||
width:100%;
|
||||
}
|
||||
.search-form {
|
||||
flex-grow:1;
|
||||
@@ -145,11 +197,11 @@ h1 span {
|
||||
padding:0 60px;
|
||||
border-bottom:1px solid var(--border);
|
||||
background:var(--bg-main);
|
||||
width:100%;
|
||||
}
|
||||
.nav-container {
|
||||
display:flex;
|
||||
gap:30px;
|
||||
max-width:1200px;
|
||||
}
|
||||
.nav-tabs a {
|
||||
padding:14px 0;
|
||||
@@ -168,6 +220,9 @@ h1 span {
|
||||
color:var(--accent);
|
||||
border-bottom-color:var(--accent);
|
||||
}
|
||||
.nav-right {
|
||||
margin-left:auto;
|
||||
}
|
||||
.image-results-container {
|
||||
padding:30px 60px;
|
||||
}
|
||||
@@ -473,19 +528,23 @@ h1 span {
|
||||
|
||||
|
||||
@media (max-width:1200px) {
|
||||
body {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
.content-layout {
|
||||
grid-template-columns:1fr;
|
||||
padding:20px 30px;
|
||||
gap:20px;
|
||||
}
|
||||
header {
|
||||
gap:20px;
|
||||
}
|
||||
.results-container,.infobox-sidebar {
|
||||
grid-column:1;
|
||||
max-width:100%;
|
||||
}
|
||||
.settings-layout {
|
||||
padding:20px 30px;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
}
|
||||
.infobox-sidebar {
|
||||
order:-1;
|
||||
}
|
||||
@@ -498,9 +557,11 @@ h1 span {
|
||||
}
|
||||
|
||||
@media (max-width:768px) {
|
||||
body {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
.nav-settings-icon {
|
||||
display:none;
|
||||
}
|
||||
.nav-settings-link {
|
||||
display:inline;
|
||||
}
|
||||
header {
|
||||
flex-direction:column;
|
||||
@@ -532,7 +593,7 @@ h1 span {
|
||||
font-size:0.95rem;
|
||||
}
|
||||
.content-layout {
|
||||
padding:16px;
|
||||
padding:16px 16px 16px 40px;
|
||||
gap:16px;
|
||||
}
|
||||
.result {
|
||||
@@ -591,7 +652,6 @@ h1 span {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transform: translateY(-5vh);
|
||||
padding:20px 16px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
@@ -621,6 +681,12 @@ h1 span {
|
||||
}
|
||||
|
||||
@media (max-width:600px) {
|
||||
.content-layout {
|
||||
padding:16px 16px 16px 28px;
|
||||
}
|
||||
.settings-layout {
|
||||
padding:12px 0;
|
||||
}
|
||||
header {
|
||||
padding:12px 12px;
|
||||
}
|
||||
@@ -657,3 +723,145 @@ h1 span {
|
||||
font-size:0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-layout {
|
||||
padding:30px 60px 30px 260px;
|
||||
}
|
||||
|
||||
.settings-container {
|
||||
max-width:700px;
|
||||
}
|
||||
|
||||
.settings-title {
|
||||
font-size:1.8rem;
|
||||
font-weight:700;
|
||||
margin:0 0 32px 0;
|
||||
letter-spacing:-0.5px;
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
background:var(--bg-card);
|
||||
border:1px solid var(--border);
|
||||
border-radius:12px;
|
||||
padding:24px;
|
||||
margin-bottom:32px;
|
||||
}
|
||||
|
||||
.settings-section-title {
|
||||
font-size:1.1rem;
|
||||
font-weight:700;
|
||||
margin:0 0 4px 0;
|
||||
}
|
||||
|
||||
.settings-section-desc {
|
||||
color:var(--text-secondary);
|
||||
font-size:0.9rem;
|
||||
margin:0 0 20px 0;
|
||||
line-height:1.4;
|
||||
}
|
||||
|
||||
.settings-field {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
padding:10px 0;
|
||||
}
|
||||
|
||||
.settings-field + .settings-field {
|
||||
border-top:1px solid var(--border);
|
||||
}
|
||||
|
||||
.settings-label {
|
||||
font-size:0.95rem;
|
||||
color:var(--text-primary);
|
||||
}
|
||||
|
||||
.settings-select {
|
||||
padding:8px 12px;
|
||||
border-radius:8px;
|
||||
border:1px solid var(--border);
|
||||
background:var(--bg-main);
|
||||
color:var(--text-primary);
|
||||
font-size:0.9rem;
|
||||
outline:none;
|
||||
cursor:pointer;
|
||||
transition:border-color 0.2s;
|
||||
}
|
||||
|
||||
.settings-select:focus {
|
||||
border-color:var(--accent);
|
||||
}
|
||||
|
||||
.settings-actions {
|
||||
display:flex;
|
||||
gap:12px;
|
||||
margin-top:8px;
|
||||
padding-bottom:40px;
|
||||
justify-content:flex-start;
|
||||
}
|
||||
|
||||
.settings-actions .btn-primary {
|
||||
background:var(--accent);
|
||||
color:var(--bg-main);
|
||||
border:1px solid transparent;
|
||||
padding:10px 24px;
|
||||
border-radius:8px;
|
||||
font-weight:600;
|
||||
font-size:0.9rem;
|
||||
cursor:pointer;
|
||||
transition:all 0.2s;
|
||||
touch-action:manipulation;
|
||||
}
|
||||
|
||||
.settings-actions .btn-primary:hover {
|
||||
filter:brightness(1.1);
|
||||
transform:translateY(-1px);
|
||||
}
|
||||
|
||||
.settings-actions .btn-secondary {
|
||||
background:var(--bg-card);
|
||||
color:var(--text-primary);
|
||||
border:1px solid var(--border);
|
||||
padding:10px 24px;
|
||||
border-radius:8px;
|
||||
font-weight:600;
|
||||
font-size:0.9rem;
|
||||
cursor:pointer;
|
||||
transition:all 0.2s;
|
||||
touch-action:manipulation;
|
||||
}
|
||||
|
||||
.settings-actions .btn-secondary:hover {
|
||||
background:var(--border);
|
||||
border-color:var(--text-secondary);
|
||||
}
|
||||
|
||||
@media (max-width:768px) {
|
||||
.settings-layout {
|
||||
padding:12px;
|
||||
display:block;
|
||||
}
|
||||
.settings-container {
|
||||
max-width:100%;
|
||||
}
|
||||
.settings-title {
|
||||
font-size:1.4rem;
|
||||
margin-bottom:24px;
|
||||
}
|
||||
.settings-section {
|
||||
padding:16px;
|
||||
}
|
||||
.settings-field {
|
||||
flex-direction:column;
|
||||
align-items:stretch;
|
||||
gap:8px;
|
||||
}
|
||||
.settings-actions {
|
||||
flex-direction:column;
|
||||
}
|
||||
.settings-actions .btn-primary,
|
||||
.settings-actions .btn-secondary {
|
||||
width:100%;
|
||||
text-align:center;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user