Files
docs/src/styles/style.css
T
naomi ddaeb72638
Node.js CI / CI (push) Successful in 1m40s
Security Scan and Upload / Security & DefectDojo Upload (push) Successful in 1m46s
feat: new theme
2026-01-29 17:35:10 -08:00

146 lines
3.2 KiB
CSS

:root {
/* Witch color palette */
--witch-purple: #2B1B3D;
--witch-plum: #44275A;
--witch-rose: #A8577E;
--witch-mauve: #D4A5C7;
--witch-lavender: #E8D5E8;
--witch-black: #0A0009;
--witch-silver: #C0C0C0;
--witch-moon: #F5F5F5;
--witch-shadow: rgba(10, 0, 9, 0.7);
/* Light theme uses lighter colors for background, darker for text */
--primary-color: var(--witch-purple);
--background-color: var(--witch-lavender)DC;
--sl-color-text-accent: var(--witch-purple);
/* Additional Starlight overrides */
--sl-color-gray-1: var(--witch-moon);
--sl-color-gray-2: var(--witch-lavender);
--sl-color-gray-3: var(--witch-mauve);
--sl-color-gray-4: var(--witch-rose);
--sl-color-gray-5: var(--witch-plum);
--sl-color-gray-6: var(--witch-purple);
}
html[data-theme="dark"] {
/* Dark theme uses darker colors for background, lighter for text */
--primary-color: var(--witch-lavender);
--background-color: var(--witch-purple)ee;
--sl-color-text-accent: var(--witch-lavender);
/* Additional Starlight overrides for dark theme */
--sl-color-gray-1: var(--witch-purple);
--sl-color-gray-2: var(--witch-plum);
--sl-color-gray-3: var(--witch-rose);
--sl-color-gray-4: var(--witch-mauve);
--sl-color-gray-5: var(--witch-lavender);
--sl-color-gray-6: var(--witch-moon);
}
.main-frame::before {
background: url(https://cdn.nhcarrigan.com/background.png);
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
z-index: -1;
content: "";
position: fixed;
top: 0;
left: 0;
bottom: 0;
opacity: 1;
pointer-events: none;
}
.main-pane {
margin: auto;
background-color: var(--background-color);
color: var(--primary-color);
}
.sidebar-pane,
.right-sidebar-panel {
background-color: var(--background-color);
color: var(--primary-color);
}
h1,
h2,
h3,
h4,
h5,
h6,
a {
color: var(--primary-color) !important;
}
a[aria-current="page"] {
color: var(--background-color) !important;
background-color: var(--witch-rose) !important;
}
header {
color: var(--primary-color) !important;
background-color: var(--background-color) !important;
}
.large {
color: var(--primary-color) !important;
}
.right-sidebar-panel :where(a) {
color: var(--primary-color) !important;
}
.right-sidebar-panel :where(a):hover {
color: var(--witch-moon) !important;
background-color: var(--witch-rose) !important;
}
footer > div > a,
footer > div > a:visited,
footer > div > p {
color: var(--primary-color) !important;
}
starlight-theme-select, starlight-theme-select > label {
color: var(--primary-color) !important;
}
.social-icons::after {
display: none;
}
.sidebar-content {
color: var(--primary-color) !important;
}
.link-title {
color: var(--primary-color) !important;
}
.pagination-links > a:hover {
color: var(--witch-moon) !important;
background-color: var(--witch-plum) !important;
}
.pagination-links > a:hover > span > .link-title {
color: var(--witch-moon) !important;
background-color: var(--witch-plum) !important;
}
#extra-footer-content {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
}
#tree-nation-offset-website {
display: inline;
margin: 0 !important;
}