fix: own the dark palette in theme.css — stop relying on common.css :root
common.css ships the neutral Remarkbox light palette for all themes. The chaostheory dark palette and dark re-skins (.alert-*, section.well, .focused, etc.) now live here in theme.css, which loads after common.css and overrides :root for chaostheory pages only.
This commit is contained in:
parent
fed3eea3ab
commit
37c496fb55
1 changed files with 120 additions and 0 deletions
|
|
@ -1,5 +1,50 @@
|
|||
@import "/static/theme/chaostheory/css/pygments-native.css";
|
||||
|
||||
/* Chaostheory palette — overrides the neutral defaults in /static/css/common.css.
|
||||
common.css ships the Remarkbox light palette; this theme is dark, so we
|
||||
redefine the :root custom properties here (theme.css loads after common.css). */
|
||||
:root {
|
||||
--color: #dddddd;
|
||||
--color-muted: #aaaaaa;
|
||||
|
||||
--color-code: #eeeeee;
|
||||
|
||||
--background: #1c4e63;
|
||||
--background-faint: #184254;
|
||||
|
||||
--primary: #6dcff6; /* Chaostheory ice blue */
|
||||
--primary-hover: #9de3fb;
|
||||
--primary-inverse: #111111;
|
||||
|
||||
--border: #336173;
|
||||
--border-faint: #2a5468;
|
||||
|
||||
--color-mod: #6dcff6;
|
||||
|
||||
--line-height: 1.6;
|
||||
}
|
||||
|
||||
:root.dark-mode {
|
||||
--color: #dddddd;
|
||||
--color-muted: #999999;
|
||||
|
||||
--color-code: #eeeeee;
|
||||
|
||||
--background: #111111;
|
||||
--background-faint: #0a0a0a;
|
||||
|
||||
--primary: #6dcff6;
|
||||
--primary-hover: #9de3fb;
|
||||
--primary-inverse: #111111;
|
||||
|
||||
--border: #1c4e63;
|
||||
--border-faint: #184254;
|
||||
|
||||
--color-mod: #6dcff6;
|
||||
|
||||
--line-height: 1.6;
|
||||
}
|
||||
|
||||
/* universal box model — prevents padding/border from causing overflow */
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
|
|
@ -795,3 +840,78 @@ figcaption {
|
|||
border-bottom: 2px solid #184254;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
/*********************
|
||||
common.css overrides — rules in /static/css/common.css use hardcoded
|
||||
light-palette colors (not vars), so re-skin them for dark here.
|
||||
*********************/
|
||||
|
||||
/* Bootstrap-style flash alerts (flash-alerts.j2 emits .alert-* classes) */
|
||||
.alert-danger,
|
||||
.alert-error {
|
||||
color: #ffaaaa;
|
||||
background-color: #4a1a1a;
|
||||
border-color: #7a2020;
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
color: #ffe08a;
|
||||
background-color: #3a2e00;
|
||||
border-color: #6a5200;
|
||||
}
|
||||
|
||||
.alert-info,
|
||||
.alert-notice {
|
||||
color: #6dcff6;
|
||||
background-color: #184254;
|
||||
border-color: #336173;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
color: #aaffbb;
|
||||
background-color: #0e3020;
|
||||
border-color: #1a5c30;
|
||||
}
|
||||
|
||||
/* node focus flash */
|
||||
.focused {
|
||||
background-color: rgba(109, 207, 246, 0.15);
|
||||
}
|
||||
@keyframes fade {
|
||||
from { background-color: rgba(109, 207, 246, 0.15); }
|
||||
to { background-color: rgba(109, 207, 246, 0); }
|
||||
}
|
||||
|
||||
/* cards / wells (join-or-log-in, new-card, payment-card, well) */
|
||||
section.new-card,
|
||||
section.payment-card,
|
||||
section.join-or-log-in,
|
||||
section.well {
|
||||
background-color: var(--background-faint);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* namespace switcher dropdown */
|
||||
.my-namespaces-div {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* help "?" circle */
|
||||
.question-mark-circle:hover:before,
|
||||
.question-mark-circle:before {
|
||||
color: var(--color-muted);
|
||||
background: var(--background-faint);
|
||||
border-color: var(--border);
|
||||
}
|
||||
.question-mark-circle:hover:before {
|
||||
color: var(--primary-inverse);
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
/* load-more link */
|
||||
.load-more,
|
||||
.load-more:visited {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue