Styling improvements
This commit is contained in:
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user