146 lines
3.5 KiB
SCSS
146 lines
3.5 KiB
SCSS
@use './variables.scss' as vars;
|
|
|
|
// Reset and base styles
|
|
:root {
|
|
// Global transition for theme switching
|
|
--theme-transition-duration: 0.3s;
|
|
--theme-transition-timing: ease;
|
|
font-family: vars.$font-family;
|
|
line-height: vars.$line-height;
|
|
font-weight: vars.$font-weight-normal;
|
|
|
|
font-synthesis: none;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
// Default dark theme
|
|
:root, .dark-mode {
|
|
color-scheme: dark;
|
|
color: vars.$text-color-dark;
|
|
background-color: vars.$bg-color-dark;
|
|
|
|
// CSS variables for theming
|
|
--primary-color: #{vars.$primary-color};
|
|
--primary-hover-color: #{vars.$primary-hover-color};
|
|
--text-color: #{vars.$text-color-dark};
|
|
--text-color-secondary: #bbb;
|
|
--text-color-tertiary: #999;
|
|
--bg-color: #{vars.$bg-color-dark};
|
|
--sidebar-bg: #1e1e1e;
|
|
--sidebar-border: #333;
|
|
--card-bg: #2a2a2a;
|
|
--card-bg-secondary: #222;
|
|
--card-border: #444;
|
|
--primary-color-light: rgba(52, 152, 219, 0.2);
|
|
}
|
|
|
|
a {
|
|
font-weight: vars.$font-weight-medium;
|
|
color: vars.$primary-color;
|
|
text-decoration: inherit;
|
|
|
|
&:hover {
|
|
color: vars.$primary-hover-color;
|
|
}
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-width: 320px;
|
|
min-height: 100vh;
|
|
transition: background-color var(--theme-transition-duration) var(--theme-transition-timing),
|
|
color var(--theme-transition-duration) var(--theme-transition-timing);
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.5em;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
button {
|
|
border-radius: 8px;
|
|
border: 1px solid transparent;
|
|
padding: 0.6em 1.2em;
|
|
font-size: 1em;
|
|
font-weight: vars.$font-weight-medium;
|
|
font-family: inherit;
|
|
background-color: vars.$button-bg-dark;
|
|
cursor: pointer;
|
|
transition: border-color 0.25s;
|
|
|
|
&:hover {
|
|
border-color: vars.$primary-color;
|
|
}
|
|
}
|
|
|
|
#app {
|
|
max-width: vars.$max-content-width;
|
|
margin: 0 auto;
|
|
padding: 1rem;
|
|
}
|
|
|
|
// Light mode theme
|
|
.light-mode {
|
|
color-scheme: light;
|
|
color: vars.$text-color-light;
|
|
background-color: vars.$bg-color-light;
|
|
|
|
// Update CSS variables for light mode
|
|
--primary-color: #{vars.$primary-color};
|
|
--primary-hover-color: #{vars.$primary-hover-color};
|
|
--text-color: #{vars.$text-color-light};
|
|
--text-color-secondary: #555;
|
|
--text-color-tertiary: #777;
|
|
--bg-color: #{vars.$bg-color-light};
|
|
--sidebar-bg: #fff;
|
|
--sidebar-border: #eee;
|
|
--card-bg: #fff;
|
|
--card-bg-secondary: #f9f9f9;
|
|
--card-border: #ddd;
|
|
--primary-color-light: rgba(52, 152, 219, 0.1);
|
|
|
|
button {
|
|
background-color: vars.$button-bg-light;
|
|
}
|
|
}
|
|
|
|
// // System preference override
|
|
// @media (prefers-color-scheme: light) {
|
|
// :root:not(.dark-mode):not(.light-mode) {
|
|
// color: vars.$text-color-light;
|
|
// background-color: vars.$bg-color-light;
|
|
|
|
// // Update CSS variables for light mode
|
|
// --primary-color: #{vars.$primary-color};
|
|
// --primary-hover-color: #{vars.$primary-hover-color};
|
|
// --text-color: #{vars.$text-color-light};
|
|
// --text-color-secondary: #555;
|
|
// --text-color-tertiary: #777;
|
|
// --bg-color: #{vars.$bg-color-light};
|
|
// --sidebar-bg: #fff;
|
|
// --sidebar-border: #eee;
|
|
// --card-bg: #fff;
|
|
// --card-bg-secondary: #f9f9f9;
|
|
// --card-border: #ddd;
|
|
// --primary-color-light: rgba(52, 152, 219, 0.1);
|
|
// }
|
|
|
|
// :root:not(.dark-mode):not(.light-mode) button {
|
|
// background-color: vars.$button-bg-light;
|
|
// }
|
|
// }
|
|
.breadcrumb {
|
|
border-bottom-color: var(--card-border);
|
|
|
|
li {
|
|
&:not(:last-child)::after {
|
|
color: var(--text-color-tertiary);
|
|
}
|
|
|
|
&.active {
|
|
color: var(--text-color);
|
|
}
|
|
}
|
|
} |