MediaWiki:Theme-light.css: Difference between revisions

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,300..700;1,300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

:root {
    
    --main-font: 'Rubik';
    --header-font: 'Rubik';
    --title-font: 'Lora';
    
    /* COLORS */
	--background-color: rgb(227, 227, 227);
	--content-color: rgba(255, 250, 242);
	--text-color: rgb(61, 44, 35, 1);
	--link-color: #8346a0;
    --link-hover-color: #5e188a;
    --link-new-color: #ff3874;
    --text-stroke-color: #fff;
    
    --search-bg-color: rgba(255, 250, 242);;
    --border-color: #be7e32;
    
	--header-color: rgb(104 71 53);
	--header-text-color: rgb(255, 255, 255);
    
    --sidebar-header-color: #6f4229;
    --sidebar-header-text: #fff;
    
    --gradient-start: rgb(225, 225, 225);
    --gradient-end: rgb(111, 111, 111);
    --banner-color: #743f95;
    
	--footer-color: #201a16;
    --footer-text-color:#977b50;
    --footer-link-color:#a88e67;
    --footer-link-hover-color:#d9b299;
    
    --cdx-button-color: #bea48b;
    --cdx-button-hover: #f5dfca;
    
    --button-color: rgba(104, 83, 68, 1);
	--button-text-color: rgb(255, 255, 255);
}

	:root.skin-theme-clientpref-day:has(> body.ns-3000),
    :root.skin-theme-clientpref-day:has(> body.ns-3001) {

     --header-font: 'Instrument Serif';
        
    /* COLORS */
	--background-color: rgb(55, 55, 55);
	--content-color: rgba(246, 246, 246);
	--text-color: rgb(0, 0, 0);
	--link-color: #7d7d7d;
    --link-hover-color: #bfbfbf;
    --link-new-color: #ff3838;
    --text-stroke-color: #000;
    
    --search-bg-color: rgba(255, 250, 242);;
    --border-color: #b0b0b0;
    
	--header-color: rgb(0 0 0);
	--header-text-color: rgb(255, 255, 255);
    
    --sidebar-header-color: #4c4c4c;
    --sidebar-header-text: #fff;
    
    --gradient-start: rgb(34, 33, 33);
    --gradient-end: rgb(36, 36, 36);
    --banner-color: #4c4c4c;
    
	--footer-color: #000;
    --footer-text-color:#d6d6d6;
    --footer-link-color:#969696;
    --footer-link-hover-color:#969696;
    
    --cdx-button-color: #c9c9c9;
    --cdx-button-hover: #fff;
    
    --button-color: rgba(76, 76, 76);
	--button-text-color: rgb(255, 255, 255);
        
        
    .mw-wiki-title {
        font-family: 'Instrument Serif' !important;
        letter-spacing: 0.1rem;
        font-style:italic;
    }    
    
 .mw-first-heading {
        font-family: 'Instrument Serif' !important;
        font-style:italic;
        text-transform: uppercase;
        color: #fff;
     paint-order: stroke fill;
     -webkit-text-stroke: 8px #000;
     letter-spacing: 0.2rem;
     text-align: center;
     background: linear-gradient(180deg, var(--text-color) 0%, rgba(0, 0, 0, .45) 75%);
    mask-image:linear-gradient(to right,transparent,black 15% 85%, transparent);
     padding: 0.3em;
    }
    
#mw-site-navigation {
    & .sidebar-chunk {
        clip-path:none;
        h3 {
            clip-path:none;
            padding:0.5em;
            text-align:center;
            background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .45) 75%);
            mask-image:linear-gradient(to right,transparent,black 15% 85%, transparent);
            paint-order: stroke fill;
     -webkit-text-stroke: 3px var(--text-stroke-color);
        }
    }
}