Jump to content

MediaWiki:TemplatesLight.css

From Taerel Worldbuilding Wiki

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* All CSS here will be loaded for users of the MinervaNeue skin */

/* box-sizing fix so padding doesn't mess up widths — edited by cauz */
*, *::before, *::after {
  box-sizing: border-box;
}

/* -- light mode colours, all in one place -- */
:root {
  --taerel-light-mode-bg-primary:              #dae1e8;
  --taerel-light-mode-bg-primary-transparent:  rgba(218, 225, 232, 0.8);
  --taerel-light-mode-bg-secondary:            #f7fafc;
  --taerel-light-mode-bg-tertiary:             #ebf2fa;
  --taerel-light-mode-bg-header-footer:        #c3e0fa;
  --taerel-light-mode-border-color:            #4ea9e6;
  --taerel-light-mode-text-primary:            #000000;
  --taerel-light-mode-text-secondary:          #003f75;
  --taerel-light-mode-link-color:              #003f75;
  --taerel-light-mode-visited-link-color:      #010a5c;
}

/* -- infobox -- */
/* added width: 100% and fallback values on var() — edited by cauz */
.infobox {
  border: 1px solid var(--taerel-light-mode-border-color, #4ea9e6);
  background-color: var(--taerel-light-mode-bg-tertiary, #ebf2fa);
  color: var(--taerel-light-mode-text-primary, #000);
}

.infobox-header {
  background-color: var(--taerel-light-mode-bg-header-footer, #c3e0fa); /* fallback added — edited by cauz */
  border: 1px solid var(--taerel-light-mode-border-color, #4ea9e6);
}

/* -- article copyright -- */
.article-copyright {
  border: 1px solid var(--taerel-light-mode-border-color, #4ea9e6); /* fallback added — edited by cauz */
  background-color: var(--taerel-light-mode-bg-tertiary, #ebf2fa);
  color: var(--taerel-light-mode-text-primary, #000);
}

/* -- compass (desktop only, inside .NeartoDesktop) -- */
.NeartoDesktop .compass-container {
  border: 1px solid var(--taerel-light-mode-border-color, #4ea9e6); /* fallback added — edited by cauz */
  background-color: var(--taerel-light-mode-bg-tertiary, #ebf2fa);
  color: var(--taerel-light-mode-text-primary, #000);
}

.NeartoDesktop .compass-header {
  background: var(--taerel-light-mode-bg-header-footer, #c3e0fa); /* fallback added — edited by cauz */
  border: 1px solid var(--taerel-light-mode-border-color, #4ea9e6);
}

/* old selectors were huge nth-child chains, swapped for a simple class
   just add class="compass-arrow" to the arrow imgs in HTML — edited by cauz */
.compass-arrow {
  filter: invert(1);
}

/* -- footer -- */
#footer-poweredbyico {
  filter: invert(0);
}

/* -- mobile box -- */
.mobile-box {
  border: 1px solid var(--taerel-light-mode-border-color, #4ea9e6); /* fallback added — edited by cauz */
  background-color: var(--taerel-light-mode-bg-tertiary, #ebf2fa);
  color: var(--taerel-light-mode-text-primary, #000);
}

.mobile-header {
  background: var(--taerel-light-mode-bg-header-footer, #c3e0fa); /* fallback added — edited by cauz */
  border: 1px solid var(--taerel-light-mode-border-color, #4ea9e6);
}

/* -- main page columns -- */
#mp-upper {
  color: var(--taerel-light-mode-text-primary, #000); /* fallback added — edited by cauz */
}

#mp-left,
#mp-right {
  border: 1px solid var(--taerel-light-mode-border-color, #4ea9e6); /* fallback added — edited by cauz */
  background-color: var(--taerel-light-mode-bg-tertiary, #ebf2fa);
  color: var(--taerel-light-mode-text-primary, #000);
}

#mp-left  { width: 50%; }
#mp-right { width: 49%; }

#mp-left  .mp-h2,
#mp-right .mp-h2 {
  background: var(--taerel-light-mode-bg-header-footer, #c3e0fa); /* fallback added — edited by cauz */
  border: 1px solid var(--taerel-light-mode-border-color, #4ea9e6);
}

.taerel-history-title-container {
  border: 1px solid var(--taerel-light-mode-border-color);
  background-color: var(--taerel-light-mode-bg-tertiary, #ebf2fa);
  color: var(--taerel-light-mode-text-primary, #000);
}

.taerel-history-title {
  background: var(--taerel-light-mode-bg-header-footer, #c3e0fa); /* fallback added — edited by cauz */
  border: 1px solid var(--taerel-light-mode-border-color, #4ea9e6);
}

/* ========================= DESKTOP TABLE ========================= */

.taerel-history-table td:last-child {
border-bottom: 1px solid var(--taerel-light-mode-border-color) !important;
}

.taerel-history-table th {
  border: 1px solid var(--taerel-light-mode-border-color); 
  background-color: var(--taerel-light-mode-bg-header-footer);
}
.taerel-history-table td {
  border: 1px solid var(--taerel-light-mode-border-color);
  background-color: var(--taerel-light-mode-bg-tertiary);
} 
.taerel-history-table th,
.taerel-history-table td {
  border-bottom: none; 
}

.taerel-history-table td:last-child {
border-bottom: 1px solid var(--taerel-light-mode-border-color) !important;
}

#mw-content-text > div.mw-content-ltr.mw-parser-output > div.taerel-history-wrapper > div.mw-collapsible.mw-made-collapsible > table > tbody > tr:nth-child(16) > td:nth-child(2) {
border-bottom: 1px solid var(--taerel-light-mode-border-color);
}

#mw-content-text > div.mw-content-ltr.mw-parser-output > div.taerel-history-wrapper > div.mw-collapsible.mw-made-collapsible > table > tbody > tr:nth-child(16) > td:nth-child(1) {
border-bottom: 1px solid var(--taerel-light-mode-border-color);
}


/* ========================= MOBILE ========================= */
@media screen and (max-width: 900px) {

.taerel-history-table td:first-child {
  background-color: var(--taerel-light-mode-bg-header-footer);
 }

.taerel-history-table td:not(:first-child) {
  background-color: var(--taerel-light-mode-bg-tertiary);
  }