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

/* Imports
============================================================================================ */
/* latin-ext */
@font-face {
  font-family: 'Kreon';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/resources/assets/fonts/t5t9IRIUKY-TFF_LW5lnMR3v2DnvPNiWcz8el2c.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kreon';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/resources/assets/fonts/t5t9IRIUKY-TFF_LW5lnMR3v2DnvPNiWfT8e.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/resources/assets/fonts/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkM0o58i-wi40.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/resources/assets/fonts/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkM0o58a-wg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Rokkitt';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/resources/assets/fonts/qFdb35qfgYFjGy5hukqqhw5XeRgdi1ryd6DCGb-3vA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Rokkitt';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/resources/assets/fonts/qFdb35qfgYFjGy5hukqqhw5XeRgdi1ryd6DMGb8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/resources/assets/fonts/w8gdH283Tvk__Lua32TysjIfqcuPP9g.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/resources/assets/fonts/w8gdH283Tvk__Lua32TysjIfp8uP.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* minecraft */
@font-face {
    font-family: 'Minecraft';
    src: url('/resources/assets/fonts/Minecraft.woff2') format('woff2'),
        url('/resources/assets/fonts/Minecraft.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* prismparty */
@font-face {
    font-family: 'PrismParty';
    src: url('/resources/assets/fonts/PrismParty-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* ROOT VARIABLES
[ These are variables explicitly supported by the theme.
[ https://github.com/StarCitizenTools/mediawiki-skins-Citizen/wiki/Customizing-Citizen-styles 
============================================================================================ */

/* Font replacements */
:root {
  --font-family-base: 'Quicksand', sans-serif;
  --font-family-alternate: 'Varela Round', monospace;
  --font-family-serif: 'Kreon', serif;
}

/* Color replacements */
:root.skin-citizen-light {
    --color-surface-0: #f2f4f7;
    --color-surface-1: #f3f6fa;
    --color-surface-2: #eaeef4;
    --color-surface-3: #e3e7ed;
    --color-surface-4: #c3c7cf;
    --color-surface-5: #eaeef5;
    /*--color-base: #f2f4f7;
    --color-base--emphasized: #f2f4f7;
    --color-base--subtle: #f2f4f7;*/
    --prism-blue-0: #7bc1f8;
    --prism-blue-1: #59a2eb;
    --prism-blue-2: #2e79d6;
    --prism-lime-1: #c0ee6f;
    --background-color-warning: #f0e7d3;
}
:root.skin-citizen-dark, :root.skin-citizen-auto {
    /*--color-surface-0: #f2f4f7;
    --color-surface-1: #f3f6fa;
    --color-surface-2: #eff2f6;
    --color-surface-3: #e3e7ed;
    --color-surface-4: #c3c7cf;*/
    --color-surface-5: #181c21;
    /*--color-base: #f2f4f7;
    --color-base--emphasized: #f2f4f7;
    --color-base--subtle: #f2f4f7;*/
    --prism-blue-0: #7bc1f8;
    --prism-blue-1: #59a2eb;
    --prism-blue-2: #2e79d6;
    --prism-lime-1: #4b6124;
    --background-color-warning: #333025;
}

/* Discord icon in header with hover effect */
.disc-icon {
  background-image: url(/resources/assets/discord.svg);
  background-repeat: no-repeat;
  background-position: center;
  opacity: var(--opacity-icon-base);
  width: 40px;
  height: 40px;
}
.disc-icon:hover {
  transform: rotate3d(0,0,1,360deg);
  transition: all .25s;
}
.skin-citizen-dark .disc-icon {
  filter: var(--filter-invert);
}
#citizen-discord__buttonCheckbox > span:nth-child(1) {
  visibility: hidden;
}
 .citizen-header__buttonCheckbox {
    cursor: pointer;
}

.citizen-ui-icon.mw-ui-icon-discord {
  background-image: url(/resources/assets/discord.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.6;
}

.skin-citizen-dark .citizen-ui-icon.mw-ui-icon-discord, .skin-citizen-auto .citizen-ui-icon.mw-ui-icon-discord {
	filter: invert( 1 );
}

.skin-citizen-dark .citizen-drawer__menu [id^="n-sidebar-icon-"] a:before, 
.skin-citizen-auto .citizen-drawer__menu [id^="n-sidebar-icon-"] a:before {
	filter: invert( 1 );
}

/* Bottom menu icons */
#n-sidebar-icon-discord a:before {background-image: url('/resources/assets/discord.svg')}