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;
|
||||
}
|
||||
}
|
||||
|
||||
4
static/settings.svg
Normal file
4
static/settings.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 829 B |
10
static/theme-dark.css
Normal file
10
static/theme-dark.css
Normal file
@@ -0,0 +1,10 @@
|
||||
:root {
|
||||
--bg-main: #121212;
|
||||
--bg-card: #1e1e1e;
|
||||
--border: #333333;
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #a0a0a0;
|
||||
--text-muted: #d1d1d1;
|
||||
--accent: #e2e2e2;
|
||||
--accent-glow: rgba(255,255,255,0.1);
|
||||
}
|
||||
10
static/theme-light.css
Normal file
10
static/theme-light.css
Normal file
@@ -0,0 +1,10 @@
|
||||
:root {
|
||||
--bg-main: #ffffff;
|
||||
--bg-card: #f8f9fa;
|
||||
--border: #e0e0e0;
|
||||
--text-primary: #1a1a1a;
|
||||
--text-secondary: #5f6368;
|
||||
--text-muted: #757575;
|
||||
--accent: #202124;
|
||||
--accent-glow: rgba(0,0,0,0.05);
|
||||
}
|
||||
Reference in New Issue
Block a user