MediaWiki:Citizen.css

/* CSS DIRECTORY
[	1. Imports
[	2. Root Variables
[	3. Javascript Mods
[	4. Template Mods
[	5. Interface Adjustments
[	6. Position Adjustments
============================================================================================*/


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



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



/* INTERFACE MODS
[ These selectors modify 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(-11deg);
  transform-origin: center 17%;
  image-rendering: crisp-edges;
  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: transform 250ms cubic-bezier(0.215,0.61,0.355,1),opacity 100ms ease;
}


/* POSITION ADJUSTMENTS
[ These selectors move elements on the page around.
============================================================================================ */