MediaWiki:Timeless.css

/* All CSS here will be loaded for users of the Timeless skin */

@import url('https://tools-static.wmflabs.org/fontcdn/css?family=Barlow:400,600&display=swap');

/********** * GLOBAL * **********/

html { --font-family-sans: 'Barlow', 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Lato', 'Liberation Sans', 'Noto Sans', 'Helvetica Neue', 'Helvetica', sans-serif; --font-family-serif: 'Linux Libertine', 'Times New Roman', 'Liberation Serif', 'Nimbus Roman', 'Noto Serif', 'Times', serif; --font-family-mono: 'Menlo', 'Consolas', 'Monaco', 'Noto Mono', 'Nimbus Mono L', monospace;

--border-radius: 1em;

--color-2xko-lime: #cdf565; --color-2xko-red: #f8696b; --color-2xko-blue: #5a9bc8; --color-2xko-teal: #68e9c4; --color-2xko-purple: #bf80fa;

--color-2xko-lime-dark: color-mix(in lch, var(--color-2xko-lime), black 40%); --color-2xko-red-dark: color-mix(in lch, var(--color-2xko-red), black 40%); --color-2xko-blue-dark: color-mix(in lch, var(--color-2xko-blue), black 40%); --color-2xko-teal-dark: color-mix(in lch, var(--color-2xko-teal), black 40%); --color-2xko-purple-dark: color-mix(in lch, var(--color-2xko-purple), black 40%);

--color-surface-1: #f9f9f9; --color-surface-2: #e7e6e3; --color-surface-3: #dbd9d6; --color-surface-4: #2b2a29; --color-surface-5: #111111; --color-text-1: #f9f9f9; --color-text-2: #8a8887; --color-text-3: #2b2a29; --color-accent-1: #d1363a; --color-link: var(--color-2xko-blue); --color-link-hover: var(--color-2xko-blue-dark); --color-link-visited: var(--color-2xko-blue); --color-link-visited-hover: var(--color-2xko-blue-dark); --color-link-new: var(--color-2xko-red); --color-link-new-hover: var(--color-2xko-red-dark); }

body { font-size: 1rem; }

.mw-body :is(h1, h2, h3, h4, h5, h6, dt, .toctitle h2),
 * is(#mw-site-navigation, #mw-related-navigation) .sidebar-chunk h3 {

font-weight: bold; }

/* Font family - sans-serif */ input, .mw-editfont-sans-serif, body, .mw-editsection, .skin-timeless .sans-serif, .mw-body :is(h1, h2, h3, h4, h5, h6, dt, .toctitle h2),
 * 1) siteSub,
 * 2) personal h2,
 * 3) p-variants-desktop h3,
 * is(#mw-site-navigation, #mw-related-navigation) h2 {

font-family: var(--font-family-sans); }

/* Font family - serif */ .mw-editfont-serif, .skin-timeless .serif { font-family: var(--font-family-serif); }

/* Font family - monospace */ code, tt, kbd, pre, samp, .mw-editfont-monospace, .screenplay, .skin-timeless .monospace { font-family: var(--font-family-mono); font-size: 0.8125em; }

/* Line height */ textarea, body, .mw-body :is(h1, h2, h3, h4, h5, h6, dt), .toc, .catlinks li,
 * is(#mw-site-navigation, #mw-related-navigation)

.sidebar-inner, .dropdown, p, html .thumbcaption { line-height: 1.5; }
 * 1) personal .dropdown,
 * 2) p-variants-desktop :is(h3, .dropdown),

/* Rounded borders */ .dropdown,
 * 1) simpleSearch,
 * 2) searchInput,
 * 1) mw-content,
 * is(#mw-site-navigation, #mw-related-navigation) .sidebar-chunk,
 * is(#mw-site-navigation, #mw-related-navigation) .sidebar-inner,

border-color: transparent; border-radius: var(--border-radius); }
 * 1) toc {

/* Remove title borders */
 * is(#mw-site-navigation, #mw-related-navigation) .sidebar-chunk h3,

.mw-body .mw-parser-output :is(h1, h2)::after, .mw-body .toctitle { border: 0; }

/********** * COLORS * **********/

body { background-color: var(--color-surface-4); color: var(--color-text-3); }

a { color: var(--color-link); }

a:hover { color: var(--color-link-hover); }

a:visited { color: var(--color-link-visited); }

a:visited:hover { color: var(--color-link-visited-hover); }

a.new, .new a { color: var(--color-link-new); }

a.new:hover, .new a:hover { color: var(--color-link-new-hover); }

a.new:visited, .new a:visited { color: var(--color-link-new); }

a.new:visited:hover, .new a:visited:hover { color: var(--color-link-new-hover); }

.mw-parser-output a.extiw, .mw-parser-output a.extiw:active, .mw-parser-output a.external { color: var(--color-link); }

.mw-parser-output a.extiw:hover, .mw-parser-output a.extiw:active:hover, .mw-parser-output a.external:hover { color: var(--color-link-hover); }

.mw-parser-output a.extiw:visited, .mw-parser-output a.extiw:active:visited, .mw-parser-output a.external:visited { color: var(--color-link-visited); }

.mw-parser-output a.extiw:visited:hover, .mw-parser-output a.extiw:active:visited:hover, .mw-parser-output a.external:visited:hover { color: var(--color-link-visited-hover); }

.tools-inline li:hover { border-bottom-color: var(--color-link-hover); }

.tools-inline li.selected { border-bottom-color: var(--color-link); }

background-color: var(--color-surface-5); color: var(--color-text-1); }
 * 1) mw-header-container {

.mw-body h1.firstHeading { border-color: currentcolor; }


 * is(#mw-site-navigation, #mw-related-navigation) h2,
 * is(#mw-site-navigation, #mw-related-navigation) h2 span,

filter: invert; }
 * 1) searchButton,
 * 2) mw-searchButton,
 * 3) mw-header-container :is([class*='oo-ui-icon']),
 * 4) personal h2,
 * 5) personal h2 span {

background-color: var(--color-surface-4); border: 0; }
 * 1) simpleSearch {

color: inherit; }
 * 1) searchInput {

color: var(--color-text-3); }
 * 1) personal .dropdown {

background-color: var(--color-surface-3); }
 * 1) mw-content-container {

background-color: var(--color-surface-2); }
 * 1) mw-content {

background-color: var(--color-surface-4); color: var(--color-text-2); }
 * 1) mw-footer-container {

color: inherit; text-decoration: underline; }
 * 1) mw-footer-container a {

@media screen and (max-width: 850px) { #mw-content-block { background-color: var(--color-surface-2); } }

@media screen and (min-width: 851px) and (max-width: 1099px) { #mw-content-block { background-color: var(--color-surface-3); } }

background-color: var(--color-surface-1); }
 * 1) toc {

@media screen and (min-width: 1100px) { :is(#mw-site-navigation, #mw-related-navigation) .sidebar-chunk { background-color: var(--color-surface-1); } }

background-color: var(--color-surface-5); }
 * 1) mw-header-nav-hack {


 * is(#mw-site-navigation, #mw-related-navigation) h2 {

color: var(--color-text-1); }

/********** * HEADER * **********/

display: none; }
 * 1) mw-header-hack {

display: none; }
 * 1) mw-header-nav-hack :is(.color-middle-container, .color-left, .color-right) {

@media screen and (min-width: 851px) and (max-width: 1099px) { #mw-header-nav-hack { top: 3em; height: 3em; } }

/*********** * CONTENT * ***********/

border: 0; }
 * 1) mw-content-container {

@media screen and (min-width: 851px) and (max-width: 1099px) { #mw-content { margin-top: 1.125em; } }

@media screen and (min-width: 851px) { #firstHeading { font-size: 2.3em; }

#bodyContent { font-size: 1.125em; } }

@media screen and (min-width: 1340px) { #mw-content-block { display: block; }

#mw-content-wrapper { pointer-events: none; }

#mw-content { pointer-events: auto; }

#mw-site-navigation, #mw-related-navigation { padding-left: 0; padding-right: 1em; width: 14em; }

#mw-site-navigation { overflow: hidden; }

#mw-related-navigation > div.sidebar-chunk:first-child { margin-top: 0; }

#mw-content-wrapper { float: right; margin-left: -14em; width: 100%; }

#mw-content, #content-bottom-stuff { margin-left: 14em; }

.ts-inner, .color-middle-container { max-width: 99em; padding: 0 1em; } }

/******** * LOGO * ********/

.mw-wiki-title > img { display: block; width: auto; height: 1.2em; }

.mw-wiki-logo { display: none; }

min-width: 13rem; height: 2.25rem; background-image: url('https://cdn.wikimg.net/en/projectlwiki/images/6/6f/Logo.svg?20220422'); background-repeat: no-repeat; background-size: contain; background-position: center left; }
 * 1) p-logo-text a.long {

padding: 0; color: transparent; font-size: 0; }
 * 1) p-logo-text a.long {

@media screen and (max-width: 500px) { #p-logo-text { position: absolute; }

#p-logo-text a.long { min-width: 2.25rem; background-image: url('https://cdn.wikimg.net/en/projectlwiki/images/9/94/Logomark.svg?20220422'); } }

@media screen and (max-width: 850px) { #personal-extra { right: 7.0625em; } }

@media screen and (min-width: 851px) { #mw-header-container { position: sticky; }

#mw-content-container { margin-top: 0; padding-top: 1em; } }

@media screen and (min-width: 851px) and (max-width: 1099px) { #p-logo-text { margin-right: 1rem; } }

@media screen and (min-width: 1100px) { #p-logo + .sidebar-chunk { margin-top: 0; } }

/*************** * CHANGE LIST * ***************/

.mw-changeslist-legend dt { clear: left; font-family: var(--font-family-mono) !important; }

.mw-changeslist-legend dt, .mw-changeslist-legend dd { float: left; }

/********** * FOOTER * **********/

box-shadow: none; border: 0; }
 * 1) mw-footer-container {