MediaWiki:Citizen.css

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 Citizen skin */

/** 
 * Background images
 Keeping this for futhure ref: https://tolkiengateway.net/wiki/Main_Page
 Also have to move content to make space for images if needed

 @media screen {
    -- Hero image
    .citizen-page-container:before {
        background-image: url();
        background-position: 70% center;
    }

    -- Site header image
    .citizen-header:before {
        background-image: url(/w/images/2/28/Citizen_header_image.webp);
    }

    -- One Ring Inscription
    .citizen-body-container::after {
        background-image: url(/w/images/b/bf/One_Ring_Inscription_single_line_vertical.svg);
    }
}*/
/** 
 * MLP Wiki theme
 */
 
:root {
    --color-surface-0: var(--mlp-color-surface-0) !important;
    --color-surface-1: var(--mlp-color-surface-1) !important;
    --color-surface-2: var(--mlp-color-surface-2) !important;
    --color-surface-3: var(--mlp-color-surface-3) !important;
    --color-surface-4: var(--mlp-color-surface-4) !important;
    --color-base--emphasized: var(--mlp-color-emphasized) !important;
    --color-base--subtle: var(--mlp-color-subtle) !important;
    --color-primary__h: 84.55;
    --color-primary__s: 69%;
    --color-primary__l: 28%;
    --color-primary: var(--mlp-color-progressive) !important;
    --color-primary--hover: var(--mlp-color-progressive--hover) !important;
    --color-primary--active: var(--mlp-color-progressive--active) !important;
    --color-inverted-primary: var(--mlp-color-inverted-progressive);
    --color-link: #612777;
    --color-link--hover: #90679f;
    --color-link--active: #815c8f;
}

/* Light theme */
:root.skin-theme-clientpref-day {
--mlp-color-surface-0: #fff;
    --mlp-color-surface-1: #fff;	
}
/* Dark theme */
:root.skin-theme-clientpref-night {
    --mlp-border-color-subtle: rgba(255, 255, 255, 0.02);
    --mlp-border-color-interactive: rgba(255, 255, 255, 0.08);
    --mlp-color-base: #e4ddcf;
    --mlp-color-emphasized: #fbf8f1;
    --mlp-color-subtle: #e3d2b0;
    --mlp-color-inverted-progressive: #000;
    --mlp-color-surface-0: #1a1a1f;
    --mlp-color-surface-1: #1f1f24;
    --mlp-color-surface-2: #23232e;
    --mlp-color-surface-3: #282833;
    --mlp-color-surface-4: #2c2c3c;
    --mlp-color-surface-5: #313142;
    --mlp-color-progressive: #f1c45e;
    --mlp-color-progressive--hover: #ffd16b;
    --mlp-color-progressive--active: #e4b750;
    --mlp-opacity-pattern: 0.05;
    --color-link: #D0A3E1;
    --color-link--hover: #d9b5e7;
    --color-link--active: #D0A3E1;

    --color-primary__h: 41.6;
    --color-primary__s: 84%;
    --color-primary__l: 65.7%;
    --pink: #d96ba2;
}

/* Auto theme */
@media screen and (prefers-color-scheme: dark) {
    :root.skin-theme-clientpref-os {
        --mlp-border-color-subtle: rgba(255, 255, 255, 0.02);
        --mlp-border-color-interactive: rgba(255, 255, 255, 0.08);
        --mlp-color-base: #e4ddcf;
        --mlp-color-emphasized: #fbf8f1;
        --mlp-color-subtle: #e3d2b0;
        --mlp-color-inverted-progressive: #000;
        --mlp-color-surface-0: #1a1a1f;
        --mlp-color-surface-1: #1f1f24;
        --mlp-color-surface-2: #23232e;
        --mlp-color-surface-3: #282833;
        --mlp-color-surface-4: #2c2c3c;
        --mlp-color-surface-5: #313142;
        --mlp-color-progressive: #f1c45e;
        --mlp-color-progressive--hover: #ffd16b;
        --mlp-color-progressive--active: #e4b750;
        --mlp-opacity-pattern: 0.05;
        --color-link: #D0A3E1;
        --color-link--hover: #d9b5e7;
        --color-link--active: #D0A3E1;
        --color-primary__h: 41.6;
        --color-primary__s: 84%;
        --color-primary__l: 65.7%;
        --pink: #d96ba2;
    }
}

/* Black theme */
:root.skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1 {
    --mlp-color-surface-0: #000;
    --mlp-color-surface-1: #111;
    --mlp-color-surface-2: #222;
    --mlp-color-surface-3: #333;
    --mlp-color-surface-4: #444;
    --mlp-color-surface-5: #555;
    --delta-hover-state: 6%;
    --shadow-strength: 0.04;
    --pink: #d96ba2;
    --color-link: #D0A3E1;
    --color-link--hover: #d9b5e7;
    --color-link--active: #D0A3E1;
}

@media screen and (prefers-color-scheme: dark) {
    :root.skin-theme-clientpref-os.citizen-feature-pure-black-clientpref-1 {
        --mlp-color-surface-0: #000;
        --mlp-color-surface-1: #111;
        --mlp-color-surface-2: #222;
        --mlp-color-surface-3: #333;
        --mlp-color-surface-4: #444;
        --mlp-color-surface-5: #555;
        --delta-hover-state: 6%;
        --shadow-strength: 0.04;
        --pink: #d96ba2;
        --color-link: #D0A3E1;
        --color-link--hover: #d9b5e7;
        --color-link--active: #D0A3E1;
    }
    
    .skin-theme-clientpref-os .disc-icon {
		filter: invert(1);
	}

    .skin-theme-clientpref-os .mw-body {
	background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(https://mlp-game-wiki.no/images/8/85/Wbackground-dark.png);
    background-size: contain;
}
}

/* Do not invert edit button icon in dark mode because of contrast */
.skin-theme-clientpref-night #ca-edit .citizen-ui-icon::before,
.skin-theme-clientpref-night #ca-ve-edit .citizen-ui-icon::before {
    filter: none;
}

 .skin-theme-clientpref-night .disc-icon {
  filter: invert(1);
}
    .skin-theme-clientpref-night .mw-body {
	background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(https://mlp-game-wiki.no/images/8/85/Wbackground-dark.png);
    background-size: contain;
}

/*.skin-theme-clientpref-day .mw-body {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://mlp-game-wiki.no/images/9/90/Wbackground-light.png);
    background-size: contain;
}*/

h1, h2, h3, h4, h5, h6, .mw-logo-wordmark {
    font-family: 'CelestiaRedux', sans-serif;
    font-weight: normal;
}

/* Adjusting massive gap (especially on phone) */
h1 {margin: 0 0 0.7em 0;}

/* Scroll horizontally in tables instead of hiding them */
.dataTables_wrapper {
	overflow: scroll;
}

.infobox {
  --transform-image-hover: none;
}

/* Have the turnarounds appear in infobox */
.infobox figure[typeof~='mw:File'] > a:first-child {
    display: block;
}

/* Make overflow elements inside tabs scrollable */
.tabs-container {
	overflow: auto;
}

/* Discord icon in header */
.disc-icon {
  background-image: url(https://mlp-game-wiki.no/Discord.svg);
  background-repeat: no-repeat;
  background-position: center;
  width: 40px;
  height: 40px;
}
.disc-icon:hover {
  transform: rotate3d(0,0,1,360deg);
  transition: all .25s;
}

#citizen-discord__buttonCheckbox > span:nth-child(1) {
  visibility: hidden;
}
 .citizen-header__buttonCheckbox {
    cursor: pointer;
}

/* Responsive */
@media screen and (max-width: 800px) {
.citizen-drawer__card {
	max-height: 75vh;
}
.home-header__search {width:90%;}
}

.citizen-footer {margin-top: 0;}
.CodeMirror pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like {background: var(--mlp-color-surface-3);}

/* Style cargo table to look likr article-table (this is skin specific, the rest can be found in Common.css */
.pinkcargo > table.cargoTable tr:first-of-type th:last-child, .pinkcargo > table.cargoTable tr:first-of-type th:first-child {
    border-radius: 0;
}

.pinkcargo > table.cargoTable.noMerge tr:nth-child(odd), .pinkcargo > table.cargoTable.noMerge tr:nth-child(even) {
    background: none;
}

.pinkcargo > table.cargoTable {
    font-size: medium;
}