User:Elstgav/common.css

/** * Custom Wikipedia Styles * * To install, you must have a user account setup with Wikipedia.org. Then: * 1. Go to Preferences > Appearance * 2. Click on “Shared CSS […] for all skins:” > “Custom CSS” * 3. Click on “Edit source” * 4. Paste this code into the editor * 5. Click “Publish changes” (don’t worry about error warnings) * * @see https://en.wikipedia.org/wiki/Wikipedia:Customisation#Personal_CSS */

/* Options -- */


 * root {

--font-family:                     Avenir Next, Avenir;

--font-size-body:                  18px; --font-size-body--breakpoint-lg:   21px; --font-size-body--breakpoint-xl:   23px;

--font-size-sm:                    14px; --font-size-xs:                    12px;

--line-height:                     1.57; --paragraph-spacing:               1em;

--link-hover-color:                rgb(6, 69, 173); --link-underline-thickness:        from-font;

--content-max-width:               800px; --content-max-width--breakpoint-lg: 900px; --content-max-width--breakpoint-xl: 1000px; }

/* Responsive Adjustments --- */

@media (min-width: 1200px) { :root { --font-size-body: var(--font-size-body--breakpoint-lg); --content-max-width: var(--content-max-width--breakpoint-lg); } }

@media (min-width: 1400px) { :root { --font-size-body: var(--font-size-body--breakpoint-xl); --content-max-width: var(--content-max-width--breakpoint-xl); } }

/* Base Typography -- */

body { --debug: 'default';

font-family: var(--font-family); font-size: var(--font-size-body); }

.mw-body-content { font-family: serif; font-size: var(--font-size-body); line-height: var(--line-height); }

.firstHeading, .mw-body-content { max-width: var(--content-max-width); margin: auto; }

color: inherit; }
 * 1) mw-content-text .reference a {

font-family: var(--font-family); font-size: var(--font-size-xs); margin-bottom: var(--paragraph-spacing); }
 * 1) mw-content-text .metadata {

margin-top:   var(--paragraph-spacing); margin-bottom: var(--paragraph-spacing); }
 * 1) mw-content-text p {

font-size: var(--font-size-sm) !important; }
 * 1) mw-content-text .toc,
 * 2) mw-content-text table,
 * 3) mw-content-text .thumbcaption,
 * 4) mw-content-text .reflist,
 * 5) mw-content-text cite.citation,
 * 6) mw-content-text pre {

/* Thin Link Underlines - */

a, .mw-underline-always a, .toctoggle a, .collapseButton a { text-decoration: none; }

color: inherit; text-decoration: underline; text-decoration-thickness: var(--link-underline-thickness); }
 * 1) mw-content-text a:not([class]):not([href^="#cite_"]):not([href^="/w/index.php"]):not([href^="#L-"]),
 * 2) mw-content-text a.mw-redirect,
 * 3) mw-content-text a .toctext {

/* Link Hover */ --debug: 'link hover';
 * 1) mw-content-text a:not([class]):not([href^="#cite_"]):not([href^="/w/index.php"]):hover,
 * 2) mw-content-text a.mw-redirect:hover,
 * 3) mw-content-text a .toctext:hover {

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

/* Overrides */

/* Disable underline on TOC numbers, re-apply on link text */ .toc a         { text-decoration: none !important; } .toc a .toctext { text-decoration: underline !important; }

/* Debugging */

/*

position: relative; }
 * 1) mw-content-text a:not([class]):not([href^="#cite_"]):not([href^="/w/index.php"]),
 * 2) mw-content-text a.mw-redirect,
 * 3) mw-content-text a .toctext {

all: initial;
 * 1) mw-content-text a:not([class]):not([href^="#cite_"]):not([href^="/w/index.php"])::after,
 * 2) mw-content-text a.mw-redirect::after,
 * 3) mw-content-text a .toctext::after {

display: block; content: var(--debug);

position: absolute;

right: -2em; top: 0;

padding: .1em .2em; border: 1px solid rgba(0,0,0,.5);

background: white; font-size: 8px; font-family: sans-serif; line-height: 1;

z-index: 1000; }