User:Dorsal Axe/timeless.css

/*==================================================
  VARIABLES
==================================================*/
@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@100..900&display=swap');

:root {
	/* Global values for border radius */
	--base-radius: 8px;

    /* Global images */
    --footer-left-image: url(https://www.mariowiki.com/images/6/67/PMTTYD_NS_Audience_Artwork_3.png?20240310143122);
    --footer-center-image: url(https://www.mariowiki.com/images/e/e2/PMTTYDNS_Audience_Artwork_1.png?20240310142941);
	--footer-right-image: url(https://www.mariowiki.com/images/a/a7/PMTTYDNS_Audience_Artwork_2.png?20240310143030);
	--list-icon: url(https://www.mariowiki.com/images/0/0d/Artwork_-_SUPER_STAR_%28Simple%29.svg?20160716222743);

	/* Global backgrounds */
	--content-background: repeating-linear-gradient(-45deg, hsl(0 0% 100%), hsl(0 0% 100%) 6px, hsl(0 0% 98.04%) 0, hsl(0 0% 98.04%) 12px);
	--menu-background: repeating-linear-gradient(-45deg, hsl(0 1.05% 18.63%), hsl(0 1.05% 18.63%) 6px, hsl(0 1.2% 16.27%) 0, hsl(0 1.2% 16.27%) 12px);
	--thumb-background: hsl(0 0% 90%);
	
	/* Primary/Secondary/Tertiary colors */
	--th-color-primary: var(--th-mario-primary);
	--th-color-secondary: var(--th-mario-secondary);
	--th-color-tertiary: var(--th-mario-tertiary);

    /* Text colors */
    --text-black: hsl(0, 0%, 0%);
    --text-white: hsl(0, 0%, 100%);
	
	/* Test colors */
	--test-red-hs: 0 100%;
	--test-red-hsl: hsl(0 100% 50%);
	--test-red-hsla: hsla(0, 100%, 50%, 50);
	--test-green-hs: 100 100%;
	--test-green-hsl: hsl(100 100% 50%);
	--test-green-hsla: hsla(100, 100%, 50%, 50);
	--test-blue-hs: 250 100%;
	--test-blue-hsl: hsl(250 100% 50%);
	--test-blue-hsla: hsla(250, 100%, 50%, 50);
	
	/* N/A color HSL */
	--not-applicable: hsl(0 0% 90%); 

	/* Table cell color HSL */
	--cell-background: hsl(0 0% 100%);
	
		/* Template Alpha values */  
	--opacity-full: 100%;
	--opacity-high: 80%;
	--opacity-mid: 60%;
	--opacity-low: 40%;
	
	/* Template Lightness values */
	--lightness-full: 100%;
	--lightness-primary: 70%;
	--lightness-secondary: 85%;
	--lightness-tertiary: 90%;
	--lightness-shadow: 40%;
	--lightness-text: 20%;
	
	--lightness-boilerplate: 96%;
	--lightness-boilerplate-border: 75%;
	
	/* Skin theme colors */
	--th-mario-primary: hsl(1, 98%, 41%);
	--th-mario-secondary: hsl(1, 99%, 27%);
	--th-mario-tertiary: hsl(354, 96%, 52%);
	--th-luigi-primary: hsl(137, 90%, 33%);
	--th-luigi-secondary: hsl(137, 90%, 27%);
	--th-luigi-tertiary: hsl(137, 91%, 48%);
	--th-peach-primary: hsl(333, 75%, 66%);
	--th-peach-secondary: hsl(333, 75%, 55%);
	--th-peach-tertiary: hsl(333, 75%, 60%);;
	
	/* Font variables */
	--font-main: "Catamaran",sans-serif;
    --font-base: 13;
    --font-bold: 800;
    --font-big: 900;
    --font-regular: 500;
	
/*==================================================
  GLOBAL
==================================================*/

body {
	font-family: var(--font-main);
	font-weight: var(--font-regular);
	line-height: 1.6em;
}

#mw-content {
	background: none;
    border: none;
    padding: 1.25em 1.75em;
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.02);
    padding: 1em 2em 3em;
    background-image: var(--content-background);
}

#mw-content-container {
    font-size: 0.96em;
}

#personal .dropdown h3,#mw-page-header-links li.selected,#mw-site-navigation .sidebar-chunk h3,#mw-related-navigation .sidebar-chunk h3,#mw-content h1::after,#mw-content h2::after,#mw-content h1,#mw-content h2,#mw-content h1.firstHeading {
    border-color: var(--th-color-primary);
}

/* Top bar */
#mw-header-container, #mw-header-nav-hack, .mobile h2.list-header, body {
    background: var(--th-color-primary);
}

.color-left, .color-middle, .color-right, .suggestions .suggestions-result-current {
    background: var(--th-color-secondary);
}

/* Headings */
h1, h2, h3, h4, h5 {
    font-family: 'Catamaran';
    font-weight: var(--font-bold);
}

#mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk {
    /* border: 3px solid var(--th-color-primary); */
    border-radius: 8px;
    background-image: var(--menu-background);
}

#mw-content-container .sidebar-inner h3 {
    background-color: var(--th-color-primary);
    color: var(--text-white);
    padding: 7px 10px !important;
    margin: .5em 0 1em;
    text-align: center !important;
    font-size: 1.3em;
    font-weight: var(--font-big);
    border: 2px solid white;
    border-radius: 6px;
}

#mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk {
    padding: 10px; 
}

.mw-portlet-body {
	padding: 1em;
}

#mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk {
        border: none;
}

#mw-site-navigation .sidebar-chunk ul, #mw-site-navigation .sidebar-chunk li, #personal .dropdown ul, #personal .dropdown li, #mw-related-navigation .sidebar-chunk ul, #mw-related-navigation .sidebar-chunk li {
    list-style: var(--list-icon);
    list-style-position: inside;
}

@media screen and (min-width: 851px) and (max-width: 1099px) {
    #mw-site-navigation h2, #mw-related-navigation h2 {
        color: #fff;
        font-family: 'Catamaran';
        font-weight: bold;
    }
}

@media screen and (min-width: 851px) and (max-width: 1099px) {
    #mw-site-navigation .sidebar-inner {
    	width: 170px;
	}
}

@media screen and (min-width: 851px) {
    #mw-wrapper .dropdown-active .pokey, #mw-wrapper .dropdown-active .dropdown, #mw-wrapper .dropdown-active .sidebar-inner {
        width: 170px;
    }
}

#personal h2 span {
    display: inline-block;
    line-height: inherit;
    word-wrap: break-word;
    font-family: 'Catamaran';
    font-weight: bold;
}

#mw-wrapper .dropdown-active .pokey, #mw-wrapper .dropdown-active .dropdown, #mw-wrapper .dropdown-active .sidebar-inner {
    border: 3px solid var(--th-color-primary);
    border-radius: 8px;
    padding: 0;
}

#personal-inner h3 {
        background-color: var(--th-color-primary);
        color: var(--text-white);
        padding: 7px 10px !important;
        margin: .5em 0 1em;
        text-align: center !important;
        font-size: 1.3em;
        font-weight: var(--font-big);
    }

/* Category link bar */
.catlinks {
    background: var(--content-background);
    margin: 0 !important;
    padding-left: 30px !important;
}

/* Footer */
#mw-footer-container {
    background-image: var(--footer-left-image), var(--footer-center-image), var(--footer-right-image);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: left center, center, right center;
    background-size: contain, contain, contain;
    height: 200px;
}

#mw-content-container {
	border-color: var(--th-color-secondary);
}

@media screen and (max-width: 1420px) {
	#mw-footer-container {
    background-image: var(--footer-center-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 200px;
	}
}

/* Image thumbnail */
.thumbinner {
    /* background-image: repeating-linear-gradient(-45deg, hsl(0 1.05% 18.63%), hsl(0 1.05% 18.63%) 6px, hsl(0 1.2% 16.27%) 0, hsl(0 1.2% 16.27%) 12px); */
    background-image: var(--thumb-background);
    border-radius: 8px;
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.02);
    padding: 0.8em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2px;
    overflow: hidden;
}

.thumbinner .thumbimage, .thumbborder {
    border: none;
    border-radius: 6px;
}

/* div.magnify a {
    filter: invert(1);
} */

/* Gallery thumbnail */
.mw-body li.gallerybox div.thumb {
    background-image: var(--thumb-background);
    border-radius: 8px;
    border: none;
    padding: 1.25em 1.75em;
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.02);
    padding: 0;
}

/* TOC */
ul#filetoc, .toc, .toccolours, .mw-warning {
    background-image: var(--thumb-background);
    border: none;
    border-radius: 8px;
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.02);
    padding: 1.25em 1.75em;
    margin-top: 1em;
    margin-bottom: 1em;
    min-width: 15em;
    font-size: 100%;
}

span.toctext {
    color: black;
}

label.toctogglelabel {
    color: hsl(0 0% 20%);
}

.tocnumber {
    color: hsl(0 0% 20%);
}

/*==================================================
  FONTS
==================================================*/
/* Catamaran font */
@font-face {
  font-family: 'Catamaran';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/catamaran/v19/o-0IIpQoyXQa2RxT7-5r8zRAW_0.woff2) format('woff2');
  unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC;
}
/* latin-ext */
@font-face {
  font-family: 'Catamaran';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/catamaran/v19/o-0IIpQoyXQa2RxT7-5r6zRAW_0.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Catamaran';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/catamaran/v19/o-0IIpQoyXQa2RxT7-5r5TRA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}