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 );
}
/* Bottom menu icons */
#n-sidebar-icon-discord a:before {background-image: url('/resources/assets/discord.svg')}