Difference between revisions of "User:Maxcodes/vector.css"

Explain xkcd: It's 'cause you're dumb.
Jump to: navigation, search
(notice bg)
(TOC)
 
(39 intermediate revisions by the same user not shown)
Line 7: Line 7:
 
   color: var(--ctp-text);
 
   color: var(--ctp-text);
 
   caret-color: var(--ctp-rosewater);
 
   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);
 
}
 
}
  
Line 25: Line 43:
 
}
 
}
  
.pBody {
+
/*.pBody {
 +
  background-color: var(--ctp-mantle);
 +
}*/
 +
 
 +
pre,
 +
pre > code,
 +
.mw-code,
 +
.mw-code code {
 
   background-color: var(--ctp-mantle);
 
   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_tpl {
   background-color: var(--ctp-surface-2) !important;
+
  --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) 15%
 +
  ) !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);
 +
}
 +
 
 +
.toc, .toctile {
 +
  background-color: var(--ctp-mantle) !important;
 +
}
 +
 
 +
@media (prefers-color-scheme: dark) {
 +
  #p-logo {
 +
    filter: invert(100%);
 +
  }
 
}
 
}

Latest revision as of 13:58, 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) 15%
  ) !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);
}

.toc, .toctile {
  background-color: var(--ctp-mantle) !important;
}

@media (prefers-color-scheme: dark) {
  #p-logo {
    filter: invert(100%);
  }
}