User:Maxcodes/vector.css

/*
Variables defined in url(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, h2, h3, h4, h5, h6 {
  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);
  color: var(--ctp-text);
}

.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);

  img[alt="warning!!.png"],
  img[alt="File:warning!!.png"] {
    /*credit: https://codepen.io/sosuke/pen/Pjoqqp*/
    --latte-filter: invert(15%) sepia(53%) saturate(7097%) hue-rotate(339deg) brightness(88%) contrast(98%);
    --macchiato-filter: invert(63%) sepia(28%) saturate(743%) hue-rotate(303deg) brightness(95%) contrast(95%);
    
    filter:
      brightness(0) saturate(100%)
      var(--filter)
      !important;

    --filter: var(--latte-filter);
    @media (prefers-color-scheme: dark) {
      --filter: var(--macchiato-filter);
    }
  }
}

.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%);
  }
}