MediaWiki:Citizen.css: Difference between revisions

MediaWiki interface page
 
No edit summary
Tag: Reverted
Line 120: Line 120:
}
}


/* FONT OVERRIDES
/*
[ These selectors are used to replace some font elements.
* Star Citizen Wiki
============================================================================================ */
* This stylesheet only contains site-wide styles.
/*p {font-family: var(--font-family-alternate);}*/
* For template styles, check the specific template documentation.
*/


 
/* Adjust primary color */
/* JAVASCRIPT MODS
:root {
[ These selectors are required for JavaScript modifications to function.
--color-primary__h: 205;
============================================================================================ */
 
/* Discord icon in header with hover effect */
.mw-ui-icon-discord::before {
background-image: url(/images/site/interface/discord.svg);
    background-image: linear-gradient(transparent,transparent),url(/images/site/interface/discord.svg);
}
@media (hover: hover){
.citizen-discord:hover .citizen-discord__button .citizen-ui-icon::before {
  transform: rotate3d(0,0,1,360deg);
      transition: all .25s
}
}
 
#citizen-discord__buttonCheckbox > span:nth-child(1) {
  visibility: hidden;
}
.citizen-header__buttonCheckbox {
    cursor: pointer;
}
 
/* Completely hide old <img> tag*/
a.citizen-header__button > img:nth-child(1) {
    display: none;
}
 
 
/* TEMPLATE MODS
[ These selectors adjust templates based heavily on the Citizen skin.
============================================================================================ */
/* Transition effect for prevblogs and prevupdate */
.mw-parser-output #home-card-prevblogs .wikitable tr > td:last-child,
.mw-parser-output #home-card-prevupdate .wikitable tr > td:last-child {
  transition: var(--transition-menu);
  transition-property: opacity,transform;
  opacity: 0;
}
.mw-parser-output #home-card-prevblogs .wikitable tr > td:first-child:hover ~ td,
.mw-parser-output #home-card-prevupdate .wikitable tr > td:first-child:hover ~ td {
  transform: translateY(-16px);
  opacity: 1;
}
 
/* Do not transform date widget */
.mw-parser-output #home-card-prevupdate .wikitable tr > td:first-child:hover ~ td.prevupdate-date {
  transform: translateY(0);
}
 
/* Homepage previous blogs widget - truncates titles */
#home-card-prevblogs .wikitable a {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
 
@media (max-width: 500px) {
  #home-card-prevblogs h3.home-card__header a {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  }
 
  #home-card-prevblogs h3.home-card__header a::after {
    display: none;
}
}


.mw-parser-output #home-card-prevblogs .wikitable {
/* Adjust contrast since we changed primary color */
  max-height: 14.68rem;
:root.skin-citizen-dark {
  overflow: hidden scroll !important;
--color-primary__l: 56%;
}
#home-card-prevblogs .wikitable a {
  -webkit-line-clamp: 3 !important;
}
/* Remove hover on small size (glitched anyway due to overflow) */
  .mw-parser-output #home-card-prevblogs .wikitable tr > td:first-child:hover ~ td {
    display: none;
  }
}
}


/* Cheesy fix. Not worth keeping - Resizes prevupdate to be larger when above 500px*/
/* Align icon opacity with skin default */
@media (min-width: 500px) {
.mw-logo-icon {
  #home-card-prevupdate {
opacity: var( --opacity-icon-base );
  height: 24.6rem;
  }
}
}


/* SIDEBAR MODS
/*
[ These selectors modify sidebar elements of the Citizen theme.
* Menu
============================================================================================ */
* Rich format menu to have more hierarchy
 
*/
/* New background-image based logo with hover effect */
.mw-logo.citizen-header__button {
    background-image: url(/images/site/logo/prismlogo.png);
    background-size: 95%;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0px 2px 3px #0000002e)
}
.mw-logo.citizen-header__button:hover {
    background-image: url(/images/site/logo/prismlogo_ani.png);
    filter: drop-shadow(0px 2px 3px #0000002e);
    transition: all 0.15s;
    transform: scale(1.1);
}
.mw-logo.citizen-header__button:active {
    background-image: url(/images/site/logo/prismlogo_ani.png);
    filter: drop-shadow(0px 2px 3px #0000002e);
    transition: all 0.15s;
    transform: scale(0.9);
}
.citizen-header {
  background-color: var(--color-surface-1);
}
 
.mw-echo-notifications-badge.mw-echo-notification-badge-nojs.oo-ui-icon-bell.mw-echo-notifications-badge-all-read {
  transition: all 0.1s;
}
 
/* Underline on sidebar titles */
.citizen-menu__heading {
    text-decoration: underline;
}
 
/* MediaWiki:Sidebar Icons */
/* These icons must have a matching class pair in Citizen.js */
.mw-ui-icon-news::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/newspaper-solid.svg);}
 
 
.mw-ui-icon-about::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/comment-question.svg);}
.mw-ui-icon-shop::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/shopping-cart.svg);}
.mw-ui-icon-map::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/map.svg);}
.mw-ui-icon-vote::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/check-to-slot-solid.svg);}
.mw-ui-icon-commands::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/code-solid.svg);}
.mw-ui-icon-plugins::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/puzzle-piece-solid.svg);}
 
.mw-ui-icon-rules::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/clipboard-list-solid.svg);}
.mw-ui-icon-faq::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/clipboard-question-solid.svg);}
.mw-ui-icon-staff::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/user-shield-solid.svg);}
.mw-ui-icon-forums::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/comments-solid.svg);}
.mw-ui-icon-punishments::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/gavel-solid.svg);}
 
.mw-ui-icon-start::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/street-view-solid.svg);}
.mw-ui-icon-gem::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/guarani-sign-solid.svg);}
.mw-ui-icon-level::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/arrow-up-right-dots-solid.svg);}
.mw-ui-icon-swords::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/swords.svg);}
.mw-ui-icon-shop2::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/store-solid.svg);}
.mw-ui-icon-claim::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/shield-halved-solid.svg);}
 
 
/* Adds bottom row to menu */
.mw-portlet-External {
.mw-portlet-External {
margin-top: var( --space-md );
margin-top: var( --space-md );
Line 289: Line 152:
grid-column: 1 / -1;
grid-column: 1 / -1;
white-space: nowrap;
white-space: nowrap;
    position: sticky;
    bottom: -0.55rem;
    background: var(--color-surface-1);
}
@media only screen and (max-width: 553px) {
  .mw-portlet-External {
    padding-bottom: 0.56rem;
  }
}
/* Stop weird scrolling behavior */
.mw-portlet-External {
  margin-bottom: -2rem;
  padding-bottom: 0.5rem;
}
}


Line 308: Line 157:
display: none;
display: none;
}
}
.mw-portlet-External ul {
.mw-portlet-External ul {
display: flex;
display: flex;
overflow: auto;
overflow: auto;
}
}
.mw-portlet-External .mw-list-item a {
.mw-portlet-External .mw-list-item a {
gap: 0;
gap: 0;
}
/* Small size external full width */
@media only screen and (max-width: 553px) {
.citizen-drawer__menu {
  display: initial;
}
#p-navigation, #p-Prism_Party, #p-Community, #p-Tutorials  {
  width: 60%;
  margin: 0 auto var(--space-sm) auto;
}
.mw-portlet-External {
  margin-bottom: -2.5rem;
}
}
}


Line 361: Line 198:
}
}


/* Bottom menu icons */
#n-sidebar-icon-discord a:before {
#n-sidebar-icon-discord a:before {background-image: url('/images/site/interface/discord.svg')}
background-image: url( https://media.starcitizen.tools/7/77/Discord_-_Simple_Icons.svg )
#n-sidebar-icon-email a:before {background-image: url('/images/site/interface/email.svg')}
 
#n-sidebar-icon-shop a:before {background-image: url('images/site/interface/store-solid.svg')}
#n-sidebar-icon-vote a:before {background-image: url('images/site/interface/check-to-slot-solid.svg')}
 
#n-sidebar-icon-tumblr a:before {background-image: url('/images/site/interface/tumblr.svg')}
#n-sidebar-icon-youtube a:before {background-image: url('/images/site/interface/youtube.svg')}
 
/* Redundant alert/breaks sidebar*/
.mw-echo-alert {
  display: none;
}
 
/* HEADER/FOOTER MODS
[ These selectors modify header elements of the Citizen theme, normal and sticky.
============================================================================================ */
 
/* Backdrop filter on sticky header */
.citizen-body-header--sticky .mw-body-header::before {
  backdrop-filter: blur(16px);
  border-radius: 0 0 var(--border-radius--large) var(--border-radius--large);
}
/* Margin to move down the list */
.citizen-footer ul {
  margin-top: 1rem;
}
.page-Home .mw-body-footer {
  display: none;
}
 
/* FIXES
[ These selectors "fix" buggy or unusable elements.
============================================================================================ */
 
/* Fix prevblogs side overflow bug */
#home-card-prevblogs .citizen-overflow--right, #home-card-prevupdate .citizen-overflow--right {
  -webkit-mask-image: initial;
  mask-image: initial;
}
 
/* Make TemplateData editor popup above all else on page */
.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-active {
  z-index: 999;
}
 
/* Missing category colors */
.catlinks li > a.new:hover {
  color: #fff;
}
 
/* Fixes forum search bar in FireFox*/
#mw-wikiforum-searchbox-border {
  display: inline-flex;
}
}


/* Visual Editor template show more button fix */
#n-sidebar-icon-twitter a:before {
.skin-citizen .ve-ui-expandableContent-toggle {
background-image: url( https://media.starcitizen.tools/6/6a/Twitter_-_Simple_Icons.svg )
  background-color: var(--color-surface-1);
}
}


/* Make inactive vote more readable */
#n-sidebar-icon-mastodon a:before {
.ajaxpoll .ajaxpoll-answer-vote div {
background-image: url( https://media.starcitizen.tools/d/de/Mastodon_-_Simple_Icons.svg )
  background: var(--border-color-base);
}
.ajaxpoll .ajaxpoll-our-vote div {
  background: var(--background-color-primary--active);
}
.page-Home .ajaxpoll {
  margin: 0 -1.5rem -2rem -1.5rem;
}
}


/* Overflow visible on preview elements */
#n-sidebar-icon-threads a:before {
#home-card-prevblogs .citizen-table-wrapper,
background-image: url( https://media.starcitizen.tools/9/9b/Threads_-_Simple_Icons.svg )
#home-card-prevupdate .citizen-table-wrapper {
    overflow-x: visible;
}
 
/* Darkmode for structured discussions */
.flow-topic-titlebar {
  background-color: var(--color-surface-3);
  border-radius: var(--border-radius--medium);
  box-shadow: 0 3px 6px rgba(0,0,0,0.04),0 3px 6px rgba(0,0,0,0.0575);
}
}


.flow-post .flow-post-content {
#n-sidebar-icon-patreon a:before {
  word-break: break-word;
background-image: url( https://media.starcitizen.tools/e/e9/Patreon_-_Simple_Icons.svg )
  color: var(--color-base);
}
}


div > .flow-menu ul {
#n-sidebar-icon-kofi a:before {
  border: none;
background-image: url( https://media.starcitizen.tools/4/48/Kofi_-_Simple_Icons.svg )
  background-color: var(--color-surface-1);
  box-shadow: var(--box-shadow-dialog);
  border-radius: var(--border-radius--medium);
}
}


.flow-post .flow-author .mw-usertoollinks {
#n-sidebar-icon-github a:before {
  opacity: 0;
background-image: url( https://media.starcitizen.tools/8/85/Github_-_Simple_Icons.svg )
  transition: opacity 0.25s ease;
  color: var(--color-base);
}
}


div.mw-gallery-slideshow-img-container a.image {
#n-sidebar-icon-reddit a:before {
  height: auto;
background-image: url( https://media.starcitizen.tools/e/e8/Reddit_-_Simple_Icons.svg )
  max-width: 100%;
}
}


/*Source editor drop down selections*/
/*
.wikiEditor-ui-toolbar .group .tool-select .menu .options .option:hover {
* Footer icons
  background-color: var(--background-color-primary--hover);
* We use custom footer icons so we need to fine tune it
*/
#footer-icons a {
opacity: var( --opacity-icon-base );
transition: opacity 250ms ease;
}
}


/* Source editor upload form */
#footer-icons a:hover {
.wikiEditor-toolbar-dialog .ui-dialog-buttonpane {
opacity: var( --opacity-icon-base--hover );
  border-top: none !important;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  background: inherit !important;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
  background: inherit !important;
}
.mw-upload-bookletLayout-filePreview {
  background-color: var(--color-surface-2--hover);
}
 
 
/* FORUMS
[ These selectors restyle the forums interface
============================================================================================ */
/* Main display */
 
table.mw-wikiforum-frame {
  padding: 15px 15px 0 15px;
  background: var(--color-surface-1);
  border-radius: 8px;
  border: none;
  box-shadow: 0 3px 6px rgba(0,0,0,0.04),0 3px 6px rgba(0,0,0,0.0575);
}
}


td.mw-wikiforum-innerframe, th.mw-wikiforum-title, th.mw-wikiforum-admin, th.mw-wikiforum-value, th.mw-wikiforum-lastpost {
#footer-icons a:active {
  border-bottom: unset;
opacity: var( --opacity-icon-base--active );
  border-top: unset;
  border: unset;
}
/* Forum title radius background */
tr.mw-wikiforum-title {
  background: none;
}
table.mw-wikiforum-title tbody tr.mw-wikiforum-title th.mw-wikiforum-title {
  background: var(--color-surface-2);
  border-top-left-radius: var(--border-radius--large);
  border-bottom-left-radius: var(--border-radius--large);
}
table.mw-wikiforum-title tbody tr.mw-wikiforum-title th.mw-wikiforum-admin, table.mw-wikiforum-title tbody tr.mw-wikiforum-title th.mw-wikiforum-value, table.mw-wikiforum-title tbody tr.mw-wikiforum-title th.mw-wikiforum-value {
  background: var(--color-surface-2);
}
table.mw-wikiforum-title tbody tr.mw-wikiforum-title th.mw-wikiforum-lastpost {
  background: var(--color-surface-2);
  border-top-right-radius: var(--border-radius--large);
  border-bottom-right-radius: var(--border-radius--large);
}
}


td.mw-wikiforum-title, td.mw-wikiforum-admin, td.mw-wikiforum-value, td.mw-wikiforum-lastpost {
/* More space between icons */
  border-bottom: 1px solid var(--border-color-base);
#footer-icons ul,
}
#footer-icons li {
table.mw-wikiforum-title tbody tr.mw-wikiforum-marked:last-child td.mw-wikiforum-title, table.mw-wikiforum-title tbody tr.mw-wikiforum-marked:last-child td.mw-wikiforum-admin, table.mw-wikiforum-title tbody tr.mw-wikiforum-marked:last-child td.mw-wikiforum-value, table.mw-wikiforum-title tbody tr.mw-wikiforum-marked:last-child td.mw-wikiforum-lastpost {
gap: var( --space-md );
  border-bottom: none;
}
}


/* Icons from icons8.com*/
/* Divide footer links into two columns */
p.mw-wikiforum-valuetitle a img, td.mw-wikiforum-rightside img, p.mw-wikiforum-issue img, tr.mw-wikiforum-marked td.mw-wikiforum-admin a img, div#mw-wikiforum-searchbox-border img#mw-wikiforum-searchbox-picture, th.mw-wikiforum-title a img, td.mw-wikiforum-title p.mw-wikiforum-thread img {
#footer-places {
  width: 1.3rem;
column-count: 2;
}
/* Locked thread icon*/
table.mw-wikiforum-frame:nth-child(3) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1) > img:nth-child(1) {
  width: 1.5rem;
}
/* Social Icon */
td.mw-wikiforum-thread-main div.wikiforum-avatar-image img.mw-socialprofile-avatar {
  width: 5.5rem;
  border-radius: 8px;
}
/* main thread edits */
td.mw-wikiforum-thread-main {
  padding: unset;
  border: unset;
  background: unset;
}
table.mw-wikiforum-posted {
  color: var(--color-base--subtle);
  font-family: var(--font-family-base)
  font-size: 0.6rem;
  border-top: 1px solid var(--border-color-base);
  margin-bottom: unset;
}
th.mw-wikiforum-thread-top {
  font-weight: normal;
  background: var(--color-surface-2);
  border-radius: var(--border-radius--medium);
  border: 1px solid var(--border-color-base);
  margin-bottom: 15px;
  display: block;
}
tr.mw-wikiforum-sticky {
  background: unset;
}
tr.mw-wikiforum-normal {
  background: none;
}
td.mw-wikiforum-thread-main, td.mw-wikiforum-thread-sub {
  word-break: unset;
}
}


td.mw-wikiforum-thread-sub {
/* Fix misalignment in Safari and Firefox when using two columns */
  padding: 0px 10px;
#footer-places ul {
  border: 1px solid var(--border-color-base);
display: initial;
  background: var(--color-surface-2);
  border-radius: var(--border-radius--small);
}
}


#mw-wikiforum-searchbox-border {
/* Darken the footer icon in light mode */
  border: 1px solid var(--border-color-base);
.skin-citizen-light #footer-icons a {
  background: var(--color-surface-2);
filter: invert( 1 ) hue-rotate( 180deg );
  border-radius: var(--border-radius--small);
}
}


/* OVERRIDES
/* Lighten the icon in dark mode */
[ These selectors restyle the system interface
.skin-citizen-dark .mw-logo-icon {
============================================================================================ */
filter: invert( 1 ) hue-rotate( 180deg );
/* Some overrides were placed in skins/Citizen/resources/variables.less */
 
/* Verified twitter */
.mw-logo-wordmark::after {
  content: "";
  width: 1em;
  height: 1em;
  display: inline-block;
  background-image: url(https://media.starcitizen.tools/5/5f/SCW-Verified.svg);
  position: relative;
  top: 0.4rem;
  left: 0.4rem;
}
}


/* PAGE STYLES
/* Hide main page header */
[ These selectors restyle specific pages
.page-Star_Citizen_Wiki .mw-body-header {
============================================================================================ */
display: none;
.page-Ranks .table-rankname {
  font-size: 1.25rem;
  color: var(--color-base);
}
.page-Ranks .table-price {
  font-style: italic;
  color: var(--color-base--subtle);
}
.page-Ranks td:nth-child(1) {
  width: 10rem;
  font-weight: bold;
  border-right: 1px solid var(--border-color-base);
  text-align: start;
}
.page-Ranks th {
  text-align: center !important;
}
.page-Ranks td {
  text-align: center;
  height: 2rem;
}
 
 
.home-card.rank-card.rank__Pebble {
  background: linear-gradient(to top, var(--color-surface-1), transparent 200%), url('/hosted/images/shop/pebble.png');
}
.home-card.rank-card.rank__Quartz {
  background: linear-gradient(to top, var(--color-surface-1), transparent 200%), url('/hosted/images/shop/quarts.png');
}
.home-card.rank-card.rank__Amethyst {
  background: linear-gradient(to top, var(--color-surface-1), transparent 200%), url('/hosted/images/shop/amthsyt.png');
}
.home-card.rank-card.rank__Sapphire {
  background: linear-gradient(to top, var(--color-surface-1), transparent 200%), url('/hosted/images/shop/sapsipaihgi.png');
}
.home-card.rank-card.rank__Emerald {
  background: linear-gradient(to top, var(--color-surface-1), transparent 200%), url('/hosted/images/shop/memeradl.png');
}
.home-card.rank-card.rank__Topaz {
  background: linear-gradient(to top, var(--color-surface-1), transparent 200%), url('/hosted/images/shop/topoaqs.png');
}
.home-card.rank-card.rank__Iridium {
  background: linear-gradient(to top, var(--color-surface-1), transparent 200%), url('/hosted/images/shop/iridujm.png');
}
.home-card.rank-card.rank__Prism {
  background: linear-gradient(to top, var(--color-surface-1), transparent 200%), url('/hosted/images/shop/prism.png');
}
.home-card.rank-card.rank__Staff {
  background: linear-gradient(to top, var(--color-surface-1), transparent 200%), url('/hosted/images/shop/staff.png');
}
 
tr.infobox-image.rank__Pebble {
  background: linear-gradient(to top, var(--color-surface-2), transparent 200%), url('/hosted/images/shop/pebble.png');
}
tr.infobox-image.rank__Quartz {
  background: linear-gradient(to top, var(--color-surface-2), transparent 200%), url('/hosted/images/shop/quarts.png');
}
tr.infobox-image.rank__Amethyst {
  background: linear-gradient(to top, var(--color-surface-2), transparent 200%), url('/hosted/images/shop/amthsyt.png');
}
tr.infobox-image.rank__Sapphire {
  background: linear-gradient(to top, var(--color-surface-2), transparent 200%), url('/hosted/images/shop/sapsipaihgi.png');
}
tr.infobox-image.rank__Emerald {
  background: linear-gradient(to top, var(--color-surface-2), transparent 200%), url('/hosted/images/shop/memeradl.png');
}
tr.infobox-image.rank__Topaz {
  background: linear-gradient(to top, var(--color-surface-2), transparent 200%), url('/hosted/images/shop/topoaqs.png');
}
tr.infobox-image.rank__Iridium {
  background: linear-gradient(to top, var(--color-surface-2), transparent 200%), url('/hosted/images/shop/iridujm.png');
}
tr.infobox-image.rank__Prism {
  background: linear-gradient(to top, var(--color-surface-2), transparent 200%), url('/hosted/images/shop/prism.png');
}
tr.infobox-image.rank__Staff {
  background: linear-gradient(to top, var(--color-surface-2), transparent 200%), url('/hosted/images/shop/staff.png');
}
 
/* 'Invalid 'property from: Template:Scrollbox/styles.css */
.mw-parser-output .scrollbox__container::before {
  box-shadow: inset 8px 0 12px -4px var(--color-surface-0), inset -8px 0 6px -4px var(--color-surface-0);
}
 
/* Template:SymbolicIcon */
.skin-citizen-dark .infobox-player__commenticon div.infobox-player__commenticon-inner a img {
  filter: invert(1);
}
}


/* Template:Icon */
/*
.icon-minecraft, .icon-minecraft-sm {
* Very important checkmark
background-image: url('/hosted/images/items/icons-minecraft.webp');
* Blue checkmark near wordmark
*/
.mw-logo-wordmark {
    display: flex;
    align-items: center;
    gap: var( --space-sm );
}
}


.page-Guide_Getting_Started .card-button a.external.text {
.mw-logo-wordmark:after {
color: white;
content: "";
    width: 1em;
    height: 1em;
    display: block;
    background-image: url( https://media.starcitizen.tools/5/5f/SCW-Verified.svg );
}
}

Revision as of 22:40, 15 February 2024

/* CSS DIRECTORY
[	1. Imports
[	2. Root Variables
[	3. Javascript Mods
[	4. Template Mods
[	5. Sidebar Adjustments
[	6. Header/Footer Adjustments
[	7. Fixes
[	8. Forums
[   9. Overrides
============================================================================================*/


/* Imports
============================================================================================ */
/* latin-ext */
@font-face {
  font-family: 'Kreon';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/hosted/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(/hosted/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(/hosted/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(/hosted/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(/hosted/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(/hosted/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(/hosted/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(/hosted/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('/hosted/fonts/Minecraft.woff2') format('woff2'),
        url('/hosted/fonts/Minecraft.woff') format('woff');
    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 {
  --background-color-overlay: rgba(255,255,255,0.80);
  --color-surface-0: hsl(180, 11.1%, 98.2%);
  --color-surface-2: hsl(0, 0%, 96.5%);
  --background-color-warning: #fbf6e9;
}
:root.skin-citizen-dark {
  --background-color-overlay: hsla(var(--color-primary__h) 20% 10% / 85%);
  --background-color-warning: #323028;
}

/*
 * 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: 205;
}

/* Adjust contrast since we changed primary color */
:root.skin-citizen-dark {
	--color-primary__l: 56%;
}

/* 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 );
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 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 );
}
Retrieved from "https://www.woopmc.com/index.php?title=MediaWiki:Citizen.css&oldid=14"
Last modified
This page was last edited on 15 February 2024, at 22:40.