MediaWiki:Citizen.css

/* * Star Citizen Wiki * This stylesheet only contains site-wide styles. * For template styles, check the specific template documentation.

/* Adjust primary color */
 * root {

--color-primary__h: 215; }

/* Adjust contrast since we changed primary color */
 * root.skin-citizen-dark {

--color-primary__l: 56%; --color-surface-0: #061223; }

/* Align icon opacity with skin default */ .mw-logo-icon { opacity: var( --opacity-icon-base ); }

/* * Menu * Rich format menu to have more hierarchy .mw-portlet-External { margin-top: var( --space-md ); padding-top: var( --space-sm ); border-top: 1px solid var( --border-color-base ); font-size: 0.8125rem; grid-column: 1 / -1; white-space: nowrap; }

.mw-portlet-External .citizen-menu__heading { display: none; }

.mw-portlet-External ul { display: flex; overflow: auto; }

.mw-portlet-External .mw-list-item a { gap: 0; }

/* Label */ .citizen-drawer__menu [id^="n-sidebar-label-"] a { pointer-events: none; margin-left: var( --space-xs ); padding-left: var( --space-md ); padding-right: var( --space-xs ); border-left: 1px solid var( --border-color-base ); border-radius: 0; letter-spacing: 0.05em; font-weight: var( --font-weight-normal ); color: var( --color-base--subtle ) !important; }

/* Icons */ .citizen-drawer__menu [id^="n-sidebar-icon-"] a { font-size: 0; }

.citizen-drawer__menu [id^="n-sidebar-icon-"] a:before { display: block; content: ""; width: var( --size-icon ); height: var( --size-icon ); background: transparent center/contain no-repeat; opacity: var( --opacity-icon-base ); }

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

background-image: url( https://media.starcitizen.tools/7/77/Discord_-_Simple_Icons.svg ) }
 * 1) n-sidebar-icon-discord a:before {

background-image: url( https://media.starcitizen.tools/6/6a/Twitter_-_Simple_Icons.svg ) }
 * 1) n-sidebar-icon-twitter a:before {

background-image: url( https://media.starcitizen.tools/d/de/Mastodon_-_Simple_Icons.svg ) }
 * 1) n-sidebar-icon-mastodon a:before {

background-image: url( https://media.starcitizen.tools/9/9b/Threads_-_Simple_Icons.svg ) }
 * 1) n-sidebar-icon-threads a:before {

background-image: url( https://media.starcitizen.tools/e/e9/Patreon_-_Simple_Icons.svg ) }
 * 1) n-sidebar-icon-patreon a:before {

background-image: url( https://media.starcitizen.tools/4/48/Kofi_-_Simple_Icons.svg ) }
 * 1) n-sidebar-icon-kofi a:before {

background-image: url( https://media.starcitizen.tools/8/85/Github_-_Simple_Icons.svg ) }
 * 1) n-sidebar-icon-github a:before {

background-image: url( https://media.starcitizen.tools/e/e8/Reddit_-_Simple_Icons.svg ) }
 * 1) n-sidebar-icon-reddit a:before {

/* * Footer icons * We use custom footer icons so we need to fine tune it	opacity: var( --opacity-icon-base ); transition: opacity 250ms ease; }
 * 1) footer-icons a {
 * 1) footer-icons a {

opacity: var( --opacity-icon-base--hover ); }
 * 1) footer-icons a:hover {

opacity: var( --opacity-icon-base--active ); }
 * 1) footer-icons a:active {

/* More space between icons */ gap: var( --space-md ); }
 * 1) footer-icons ul,
 * 2) footer-icons li {

/* Divide footer links into two columns */ column-count: 2; }
 * 1) footer-places {

/* Fix misalignment in Safari and Firefox when using two columns */ display: initial; }
 * 1) footer-places ul {

/* Darken the footer icon in light mode */ .skin-citizen-light #footer-icons a { filter: invert( 1 ) hue-rotate( 180deg ); }

/* Lighten the icon in dark mode */ .skin-citizen-dark .mw-logo-icon { filter: invert( 1 ) hue-rotate( 180deg ); }

/* Hide main page header */ .page-Star_Citizen_Wiki .mw-body-header { display: none; }

/* * Very important checkmark * Blue checkmark near wordmark .mw-logo-wordmark { display: flex; align-items: center; gap: var( --space-sm ); }

.mw-logo-wordmark:after { content: ""; width: 1em; height: 1em; display: block; background-image: url( https://media.starcitizen.tools/5/5f/SCW-Verified.svg ); }

.box { display: inline-block; border: 1px solid var(--color-surface-4); border-radius: 10px 10px 0 0; background-color: var(--color-surface-3); width: 100% }

.box .box-header h4,.box .box-header h5 { line-height: normal; font-size: 1.1rem }

.box .box-header { display: block; clear: both; margin: 0; border-top: 2px solid var(--color-surface-4); border-bottom: 2px solid var(--color-surface-4); border-radius: 10px 10px 0 0; background-color: var(--color-surface-4); padding: 8px 20px; overflow: hidden }

.box .box-header h4,.box .box-header h5 { display: inline-block; float: left }

.box .box-header h5 { margin: 0; padding-left: 5px; text-transform: none; letter-spacing: normal; font-weight: normal }

.box .box-header p { display: inline-block; float: right; margin: 1px 0 0 0; padding: 0; font-size: .85rem }

.right .box .box-content { display: block; clear: both; background-color: #fff; padding: 8px 20px }

.left .box-content { margin: 0; padding-top: 10px; padding-bottom: 10px }

.left .box-content>* { margin-left: 20px }

.left .box-content ul { list-style: none; list-style-position: outside; margin: 0 }

.left .box-content ul li { margin: 0 }

.box .empty { margin-top: 20px }