More actions
No edit summary |
(only select header) |
||
| Line 43: | Line 43: | ||
transition: all .25s | transition: all .25s | ||
} | } | ||
} | |||
/* Completely hide old <img> tag*/ | |||
a.citizen-header__button > img:nth-child(1) { | |||
display: none; | |||
} | } | ||
Revision as of 09:35, 22 January 2023
/* 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);
}
/* POSITION ADJUSTMENTS
[ These selectors move elements on the page around.
============================================================================================ */