113 lines
2.2 KiB
CSS
113 lines
2.2 KiB
CSS
/* Custom color scheme override */
|
|
:root {
|
|
/* Light theme */
|
|
--color-background: #F8FDDD;
|
|
--color-background-secondary: #f0e8cc;
|
|
--color-background-header: #F8FDDD;
|
|
--color-text: #3D2200;
|
|
--color-text-secondary: #5a3a0a;
|
|
--color-border: #e6d4b3;
|
|
|
|
/* Dark theme (inverted for good contrast) */
|
|
--color-background-dark: #2d1d00;
|
|
--color-background-secondary-dark: #4a3700;
|
|
--color-text-dark: #F8FDDD;
|
|
--color-text-secondary-dark: #e6d4b3;
|
|
--color-border-dark: #664b00;
|
|
|
|
/* Accents */
|
|
--color-accent: #FF851B;
|
|
--color-accent-hover: #e67315;
|
|
}
|
|
|
|
/* Light theme overrides */
|
|
.light {
|
|
background-color: var(--color-background);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.light .content-inner {
|
|
background-color: var(--color-background);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.light h1, .light h2, .light h3, .light h4, .light h5, .light h6 {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.light a {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.light a:hover {
|
|
color: var(--color-accent-hover);
|
|
}
|
|
|
|
.light .border {
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
/* Dark theme overrides */
|
|
.dark {
|
|
background-color: var(--color-background-dark);
|
|
color: var(--color-text-dark);
|
|
}
|
|
|
|
.dark .content-inner {
|
|
background-color: var(--color-background-dark);
|
|
color: var(--color-text-dark);
|
|
}
|
|
|
|
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
|
|
color: var(--color-text-dark);
|
|
}
|
|
|
|
.dark a {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.dark a:hover {
|
|
color: var(--color-accent-hover);
|
|
}
|
|
|
|
.dark .border {
|
|
border-color: var(--color-border-dark);
|
|
}
|
|
|
|
/* Personal theme overrides (if active) */
|
|
body {
|
|
background-color: var(--color-background, #F8FDDD);
|
|
color: var(--color-text, #3D2200);
|
|
}
|
|
|
|
header {
|
|
border-bottom-color: var(--color-border, #e6d4b3);
|
|
}
|
|
|
|
nav a {
|
|
color: var(--color-text-secondary, #5a3a0a);
|
|
}
|
|
|
|
nav a:hover, nav a.active {
|
|
color: var(--color-text, #3D2200);
|
|
}
|
|
|
|
nav a.active::after {
|
|
background-color: var(--color-text, #3D2200);
|
|
}
|
|
|
|
footer {
|
|
border-top-color: var(--color-border, #e6d4b3);
|
|
color: var(--color-text-secondary, #5a3a0a);
|
|
}
|
|
|
|
/* Buttons and interactive elements */
|
|
button, .button {
|
|
background-color: var(--color-accent);
|
|
color: white;
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
button:hover, .button:hover {
|
|
background-color: var(--color-accent-hover);
|
|
} |