Toggle menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Citizen.css: Difference between revisions

MediaWiki interface page
No edit summary
(discord icon animation)
Line 32: Line 32:
background-image: url(/images/site/interface/discord.svg);
background-image: url(/images/site/interface/discord.svg);
     background-image: linear-gradient(transparent,transparent),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
}
}
}



Revision as of 21:26, 21 January 2023

/* CSS DIRECTORY
[	1. Imports
[	2. Root Variables
[	3. Javascript Mods
[	4. Template Mods
[	5. 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 
============================================================================================ */
: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.
============================================================================================ */
.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 
 }
}



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