Styling improvements

This commit is contained in:
2026-06-17 15:47:42 +02:00
parent 45e5c657c7
commit a1d95f1ba2
3 changed files with 17 additions and 23 deletions
+4 -2
View File
@@ -9,7 +9,8 @@
--rundbgbackgroundcolor: #a0a0a0; --rundbgbackgroundcolor: #a0a0a0;
--sidebar-font: #fffefe; --sidebar-font: #fffefe;
--color: #ffffff; --color: #ffffff;
--color-container: #f0f0f0;
--color-text: #000000;
} }
[data-theme='dark'] { [data-theme='dark'] {
@@ -23,5 +24,6 @@
--rundbgbackgroundcolor: #505050; --rundbgbackgroundcolor: #505050;
--sidebar-font: #000000; --sidebar-font: #000000;
--color: #000000; --color: #000000;
--color-container: #1a1a1a;
--color-text: #ffffff;
} }
+13 -7
View File
@@ -19,7 +19,7 @@
text-decoration: none; text-decoration: none;
display: block; display: block;
padding: 8px 12px; padding: 8px 12px;
border-radius: $border-radius; border-radius: var(--border-radius);
transition: background 0.2s ease-in-out; transition: background 0.2s ease-in-out;
&:hover { background: rgba(255,255,255,0.1); } &:hover { background: rgba(255,255,255,0.1); }
} }
@@ -29,7 +29,7 @@
.submenu { .submenu {
margin-left: 8px; margin-left: 8px;
background: rgba(255,255,255,0.05); background: rgba(255,255,255,0.05);
border-radius: $border-radius; border-radius: var(--border-radius);
padding: 6px; padding: 6px;
li { padding: 4px 0; } li { padding: 4px 0; }
} }
@@ -49,6 +49,7 @@
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
text-align: left; text-align: left;
margin-top: var(--spacing-sm);
} }
.sidebar-header { .sidebar-header {
@@ -56,7 +57,7 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
margin-bottom: $spacing-md; margin-bottom: var(--spacing-md);
.home { .home {
flex-grow: 1; flex-grow: 1;
@@ -72,7 +73,7 @@
display: none; display: none;
background: transparent; background: transparent;
border: none; border: none;
color: #fff; color: var(--sidebar-font);
cursor: pointer; cursor: pointer;
padding: 8px; padding: 8px;
border-radius: 50%; border-radius: 50%;
@@ -88,7 +89,7 @@
svg { svg {
width: 20px; width: 20px;
height: 20px; height: 20px;
stroke: #fff; stroke: var(--sidebar-font);
} }
@media (max-width: 768px) { @media (max-width: 768px) {
@@ -116,7 +117,7 @@
position: fixed; position: fixed;
top: 1rem; top: 1rem;
left: 1rem; left: 1rem;
z-index: 998; z-index: 999;
width: 48px; width: 48px;
height: 48px; height: 48px;
border-radius: 50%; border-radius: 50%;
@@ -141,6 +142,11 @@
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
background-color: var(--color-bg); background-color: var(--color-bg);
color: var(--color-container);
svg {
stroke: var(--color-container);
}
} }
&:active { &:active {
@@ -172,4 +178,4 @@
pointer-events: auto; pointer-events: auto;
} }
} }
} }
-14
View File
@@ -8,20 +8,6 @@
@use "components/home"; @use "components/home";
@use "components/icon"; @use "components/icon";
:root {
--color-bg: #ffffff;
--color-container: #ffffff;
--color-text: #111827;
}
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #121212;
--color-container: #333333;
--color-text: #e2e2e2;
}
}
body { body {
background: var(--color-bg); background: var(--color-bg);
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;