User:Dorsal Axe/timeless.css: Difference between revisions
From the Super Mario Wiki, the Mario encyclopedia
Jump to navigationJump to search
Dorsal Axe (talk | contribs) No edit summary |
Dorsal Axe (talk | contribs) No edit summary |
||
| Line 296: | Line 296: | ||
/* TOC */ | /* TOC */ | ||
ul#filetoc, .toc, .toccolours, .mw-warning { | ul#filetoc, .toc, .toccolours, .mw-warning { | ||
background | background: var(--thumb-background); | ||
border: none; | border: none; | ||
border-radius: 8px; | border-radius: 8px; | ||
Revision as of 11:02, May 31, 2024
/*==================================================
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(220, 17%, 93%);
/* Theme properties */
--main-background: var(--th-mario-background);
--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%);
/* Skin theme backgrounds */
--th-mario-background: url(https://mario.wiki.gallery/images/timeless-bg.webp);
--th-luigi-background: url(https://mario.wiki.gallery/images/timeless-bg.webp);
--th-peach-background: url(https://mario.wiki.gallery/images/timeless-bg.webp);
/* 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 {
background: var(--main-background);
font-size: 0.98em;
}
#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);
}
/* Menus */
#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);
}
/* Menu links */
.mw-portlet-body a {
color: hsl(0 0% 100%);
}
.mw-portlet-body a:hover {
color: hsl(0 0% 70%);
}
.mw-portlet-body a:visited {
color: hsl(0 0% 70%);
}
.mw-portlet-body a:visited:hover {
color: hsl(0 0% 50%);
}
/* Category link bar */
.catlinks {
background: var(--content-background);
margin: 0 !important;
padding-left: 30px !important;
}
@media (min-width: 1100px) {
#catlinks {
margin: 0 !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: 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: 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;
}
