Difference between revisions of "User:Maxcodes/vector.css"
(fixed color mix) |
(made the notice background colors reusable.) |
||
| Line 63: | Line 63: | ||
} | } | ||
| − | . | + | .notice_tpl { |
| − | + | --notice-color: var(--ctp-surface-0); /*override me! (with an accent color)*/ | |
| − | |||
| − | |||
| − | |||
background-color: color-mix( | background-color: color-mix( | ||
in srgb-linear, | in srgb-linear, | ||
var(--ctp-mantle), | var(--ctp-mantle), | ||
| − | var(-- | + | var(--notice-color) 20% |
) !important; | ) !important; | ||
| − | border-left-color: var(--ctp-red) | + | border-left-color: var(--notice-color) !important; |
| + | } | ||
| + | |||
| + | .notice { | ||
| + | --notice-color: var(--ctp-lavender); | ||
| + | } | ||
| + | |||
| + | .notice2 { | ||
| + | --notice-color: var(--ctp-red); | ||
} | } | ||
.notice-incomplete { | .notice-incomplete { | ||
| − | + | --notice-color: var(--ctp-blue); | |
} | } | ||
.notice-incomplete-transcript { | .notice-incomplete-transcript { | ||
| − | + | --notice-color: var(--ctp-green); | |
} | } | ||
Revision as of 13:38, 23 February 2026
/*
Variables defined in User:Maxcodes/common.css
*/
:root {
background-color: var(--ctp-base);
color: var(--ctp-text);
caret-color: var(--ctp-rosewater);
}
body,
#content, #footer {
background-color: var(--ctp-base);
color: var(--ctp-text);
}
#mw-head, #mw-panel {
background-color: var(--ctp-mantle);
}
/*#mw-panel {
background-color: var(--ctp-crust);
}*/
#siteSub {
color: var(--ctp-subtext-0);
}
a, a:any-link {
color: var(--ctp-blue);
}
h1 {
color: var(--ctp-text);
}
.dangerousLink {
color: var(--ctp-yellow);
}
.error {
color: var(--ctp-red);
}
/*.pBody {
background-color: var(--ctp-mantle);
}*/
pre,
pre > code,
.mw-code,
.mw-code code {
background-color: var(--ctp-mantle);
color: var(--ctp-text);
}
code {
background-color: var(--ctp-crust);
}
.comic-content {
background-color: var(--ctp-base) !important;
}
.notice_tpl {
--notice-color: var(--ctp-surface-0); /*override me! (with an accent color)*/
background-color: color-mix(
in srgb-linear,
var(--ctp-mantle),
var(--notice-color) 20%
) !important;
border-left-color: var(--notice-color) !important;
}
.notice {
--notice-color: var(--ctp-lavender);
}
.notice2 {
--notice-color: var(--ctp-red);
}
.notice-incomplete {
--notice-color: var(--ctp-blue);
}
.notice-incomplete-transcript {
--notice-color: var(--ctp-green);
}
@media (prefers-color-scheme: dark) {
#p-logo {
filter: invert(100%);
}
}
