MediaWiki:Citizen.css

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


/* Imports
============================================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Kreon:wght@300&family=Quicksand:wght@500&family=Rokkitt&family=Varela+Round&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-serif: 'Kreon', serif;
  --font-family-monospace: 'Rokkitt', monospace;
}
/* Color replacements */
:root {
  --background-color-overlay: rgba(255,255,255,0.80);
}


/* JAVASCRIPT MODS
[ These selectors are required for JavaScript modifications to function.
============================================================================================ */

/* Discord icon in header eith 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 
 }
}
/* Completely hide old <img> tag*/
a.citizen-header__button > img:nth-child(1) {
    display: none;
}


/* SIDEBAR MODS
[ These selectors modify sidebar elements of the Citizen theme.
============================================================================================ */

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

/* Animated bell - Should be updated to use an animation property and different tilt image*/
.mw-echo-notifications-badge.mw-echo-notification-badge-nojs.oo-ui-icon-bell.mw-echo-notifications-badge-all-read:hover {
  transform: rotate(-15deg);
  transform-origin: center 22%;
  /*image-rendering: pixelated;*/
  background-image: url(/images/site/interface/bell_left.svg);
  transition: transform 250ms cubic-bezier(0.215,0.61,0.355,1),opacity 100ms ease;
}
.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-label {
    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-specialpage::before {background-image: linear-gradient(transparent,transparent),url(images/site/interface/chart-simple-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);} 



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



/* FIXES
[ These selectors "fix" buggy or unusable elements.
============================================================================================ */

/* Make TemplateData editor popup above all else on page */
.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-active {
  z-index: 999;
}