User:Dorsal Axe/timeless.css
From the Super Mario Wiki, the Mario encyclopedia
Jump to navigationJump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@100..900&display=swap');
/*==================================================
VARIABLES
==================================================*/
:root {
/* Global values for border radius */
--base-radius: 8px;
--short-radius: 6px;
/* 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%);
/* Core theme properties */
--th-logo: var(--th-mario-logo);
--main-background: var(--th-mario-background), var(--th-mario-gradient);
--th-color-primary: var(--th-mario-primary);
--th-color-secondary: var(--th-mario-secondary);
--th-color-tertiary: var(--th-mario-tertiary);
--th-color-border: var(--border-color);
/* 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 */
--border-color: hsl(0, 0%, 100%);
--th-mario-primary: hsl(1, 98%, 41%);
--th-mario-secondary: hsl(212, 100%, 37%);
--th-mario-tertiary: hsl(354, 96%, 52%);
--th-mario-border: hsl(1, 99%, 27%);
--th-mario-gradient: linear-gradient(0deg, hsl(302, 100%, 37%), hsl(201, 100%, 57%));
--th-luigi-primary: hsl(137, 90%, 33%);
--th-luigi-secondary: hsl(214, 41%, 39%);
--th-luigi-tertiary: hsl(137, 91%, 48%);
--th-luigi-border: hsl(137, 90%, 27%);
--th-luigi-gradient: linear-gradient(223deg, #3d61ad, hsl(185, 100%, 37%));
--th-peach-primary: hsl(333, 75%, 66%);
--th-peach-secondary: hsl(52, 100%, 50%);
--th-peach-tertiary: hsl(333, 75%, 60%);
--th-peach-border: hsl(333, 75%, 55%);
--th-peach-gradient: linear-gradient(0deg, #ffffe6, #d0effb);
--th-bowser-primary: hsl(0, 0%, 0%);
--th-bowser-secondary: hsl(109, 100%, 29%);
--th-bowser-tertiary: hsl(354, 100%, 50%);
--th-bowser-border: hsl(109, 100%, 29%);
--th-bowser-gradient: linear-gradient(0deg, #ff4d5e, #ff944d);
--th-toad-primary: hsl(221, 74%, 35%);
--th-toad-secondary: hsl(0, 81%, 53%);
--th-toad-tertiary: hsl(354, 100%, 50%);
--th-toad-border: hsl(109, 100%, 29%);
--th-toad-gradient: linear-gradient(0deg, #ffe428, #ffe428);
--th-daisy-primary: hsl(32, 92%, 49%);
--th-daisy-secondary: hsl(53, 100%, 65%);
--th-daisy-tertiary: hsl(32, 92%, 40%);
--th-daisy-border: hsl(32, 92%, 55%);
--th-daisy-gradient: linear-gradient(0deg, #62c0ab, #62c0ab);
/* Skin theme logos */
--th-mario-logo: url(https://imgur.com/Xtu63KP.png);
--th-luigi-logo: url(https://imgur.com/BjYVpJQ.png);
--th-peach-logo: url(https://imgur.com/K6pDWVB.png);
--th-bowser-logo: url(https://imgur.com/Xtu63KP.png);
/* Skin theme backgrounds */
--th-mario-background: url(https://imgur.com/kk77Jt9.png);
/* --th-luigi-background: url(); */
--th-peach-background: url(https://imgur.com/2CKBu3X.png);
/* --th-bowser-background: url(); */
/* Font variables */
--font-main: Catamaran, sans-serif;
--font-base: 13;
--font-bold: 800;
--font-big: 900;
--font-regular: 500;
/*==================================================
GLOBAL
==================================================*/
null {
}
/* Logo */
@media screen and (min-width: 851px) {
.mw-wiki-logo.timeless-logo {
background-image: var(--th-logo);
background-repeat: no-repeat;
background-position: center;
}
}
.mw-wiki-logo.timeless-logo img {
width: 135px;
height: auto;
margin: 0.75em 0 0.5em;
filter: opacity(0);
}
/* Content */
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;
}
#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-secondary);
}
/* 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 */
@media screen and (min-width: 851px) {
#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);
background-image: url(https://imgur.com/gQyoCg4.png);
background-position: center;
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 var(--th-color-border);
border-radius: 6px;
}
@media screen and (min-width: 851px) and (max-width: 1099px) {
#mw-site-navigation .sidebar-inner {
background: var(--menu-background);
border: none;
padding: 10px;
width: 170px;
}
}
#mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk {
padding: 10px;
}
.mw-portlet-body {
padding: 0 1em 0 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;
}
@media screen and (max-width: 850px) {
#mw-wrapper .dropdown-active .pokey, #mw-wrapper .dropdown-active .dropdown, #mw-wrapper .dropdown-active .sidebar-inner {
background: var(--menu-background);
border-radius: 8px;
padding: 0;
}
}
#personal-inner h3 {
background-color: var(--th-color-primary);
border: 2px solid var(--th-color-border);
border-radius: 8px;
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);
}
.mw-portlet#p-personal {
padding: 10px;
background: var(--menu-background);
border: none;
border-radius: 8px;
}
#personal-inner {
border: none;
}
/* 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;
border-radius: 8px;
}
@media (min-width: 1100px) {
#catlinks {
margin: 0 !important;
}
}
#content-bottom-stuff {
border-bottom-left-radius: 8px !important;
border-bottom-right-radius: 8px !important;
}
/* Footer */
#mw-footer-container {
background-image: var(--footer-left-image), var(--footer-right-image), var(--footer-center-image);
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: left center, right center, center;
background-size: contain, contain, contain;
height: 200px;
}
#mw-content-container {
border-color: var(--th-color-secondary);
}
@media screen and (max-width: 1320px) {
#mw-footer-container {
background-image: var(--footer-center-image);
background-repeat: no-repeat;
background-position: bottom;
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: none;
border-radius: 8px;
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.02);
padding: 0.4em;
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: 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%);
}
/* Recent Changes */
.mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, .mw-changeslist-legend, .mw-body .mw-search-profile-tabs, .mw-body fieldset#mw-searchoptions, .mw_metadata, .wikitable, .mw-datatable {
background: #f8f9fa;
border: solid #eaecf0;
border-radius: 8px;
}
/* Buttons */
form:not(.oo-ui-layout) button, form:not(.oo-ui-layout) input[type='submit'] {
background-color: var(--th-color-primary);
border: solid 1px var(--th-color-secondary);
color: white;
border-radius: var(--short-radius);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
color: #fff;
background-color: var(--th-color-primary);
border-color: var(--th-color-secondary);
border-radius: var(--short-radius);
}
form:not(.oo-ui-layout) button:not(:disabled):hover, form:not(.oo-ui-layout) input[type='submit']:not(:disabled):hover, form:not(.oo-ui-layout) button:not(:disabled):active {
background-color: var(--th-color-tertiary);
color: white;
}
/* Search */
#simpleSearch {
max-width: 647px;
margin: 0 auto;
border-radius: 8px;
}
#searchInput {
border-radius: 8px;
}
/* Pop-up message boxes */
.mw-notification-visible {
background: var(--menu-background);
border-radius: var(--base-radius);
}
.oo-ui-messageWidget.oo-ui-flaggedElement-success:not(.oo-ui-messageWidget-block) {
color: white;
}
.oo-ui-image-success.oo-ui-icon-check, .mw-ui-icon-check-success:before {
filter: brightness(100);
}
.oo-ui-window-content {
background: var(--menu-background);
border-radius: var(--base-radius);
}
.oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame {
border: none;
border-radius: var(--base-radius);
}
.oo-ui-messageDialog-message {
color: white;
}
.oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget:first-child > .oo-ui-buttonElement-button {
border-radius: 0 0 0 2px;
background: var(--menu-background);
color: white;
}
.oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget:last-child > .oo-ui-buttonElement-button {
border-radius: 0 0 2px 0;
background: var(--menu-background);
color: white;
}
/*==================================================
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;
}
/*==================================================
TABLES
==================================================*/
.wikitable {
border-radius: 8px;
}
.wikitable > tr > th,.wikitable > tr > td,.wikitable > * > tr > th,.wikitable > * > tr > td {
}
