E-Ink ready by baerbeisser

/* ==UserCSS==
@name           E-Ink ready
@namespace      https://example.edu/
@description    Doing my best to make the web nice and usable on E-Ink.
@version        1.2
@author         Beerbeisser
@match          <all-urls>
==/UserCSS== */

/*
* disable css animations
* look in about:config too!
***************************/

* { opacity: initial; }

/* must be 1ms instead of 0ms or some "webpages" break */
*,:before,:after {
    animation-delay: 1ms !important;
    -moz-animation-delay: 1ms !important;
    animation-duration: 1ms !important;
    -moz-animation-duration: 1ms !important;
	animation-iteration-count: 1 !important;
	-moz-animation-iteration-count: 1 !important;
    transition: transform 1ms ease-out !important;
    -moz-transition: transform 1ms ease-out !important;
	transition-property: none !important;
	-moz-transition-property: none !important;
	transition-duration: 1ms !important;
	-moz-transition-duration: 1ms !important;
}
.loader, .wheel {
    background: none !important;
    cursor: wait !important;
    animation: initial !important;;
}
.loader:after, .wheel:after {
    content: "Loading..." !important;
    font-weight: bold !important;
}

/* touchscreen-workaround. Links are made selectable with a:link excluded */
a:any-link {/*
    padding: 0.5rem !important;
    margin: -0.5rem !important;
    border-color: transparent !important;*/
    user-select: none;
}
a:visited,
a:hover,
a:active {
    user-select: none !important;
}

@media (prefers-color-scheme: light) {
    :root {
        --text: black;
        --text-color: var(--text);
        --text-shadow: grey;
        --link-color: black;
        --link-select: lightgrey;
        --link-visited: grey;
        --bg-color: rgba(250,250,250,1);
        --border-color: black;
        --border-shadow: none;
        --button-bg: transparent;
        --button-color: var(--link-color);
        --button-border: var(--border-color);
        --code-bg: rgb(235,235,235) !important;
        --filter: grayscale(100%);
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        --text: white;
        --text-color: var(--text);
        --text-shadow: none;
        --link-color: lightgrey;
        --link-select: grey;
        --link-visited: grey;
        --bg-color: #1f1f1f;
        --border-color: #bbb;
        --border-shadow: none;
        --button-bg: black;
        --button-color: white;
        --button-border: var(--border-color);
        --code-bg: rgb(235,235,235) !important;
        --filter: invert(0%) saturate(100%) hue-rotate(314deg) brightness(100%) contrast(100%);       
    }
}
:root {
    --boxShadow: none;
    
    /* overwrites */
    --bg_color: var(--bg-color);
    --bg_panel: var(--bg-color);
    --bgColor-default: var(--table-bg);
    --color-canvas-default: var(--table-bg);
    --box--backgroundColor: var(--bg-color);
    --theme-page_background: var(--bg-color);
    --theme-area_background_reset: var(--bg-color);
}

/* un-cutting edges, because e-ink */
html *,* {
    border-radius: 0px !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    box-shadow: var(--box-shadow) !important;/*
    border-color: var(--border-color) !important;*/
}

/*
* background, text color stuff
******************************/
html {
    background: none;
    background-image: none;
    background-color: var(--bg-color) !important;
}
/* before/after not with parent containing something image... i think */
span:not([class*="image"i]) >:before,
span:not([class*="image"i]) >:after {
    background: var(--bg-color) !important;
    background-color: var(--bg-color) !important;
}

a, .btn, nav,
header, footer, main, content,
div:not([class*="btn"i])/*
 */:not([class="L3Ezfd"])/* yeah, no clue why Google paints their anwers with background-color...
 */:not([class="YTDezd"])/*
 */:not([class*="button"i])/*
 */:not([class*="switch"i])/*
 */:not([class*="slider"i])/*
 */:not([class*="check"i])/*
 */:not([class*="knob"i]) {
    background: none;
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}
[role="menu"],
[aria-modal="true"],
[class*="sidebar"],
[class*="background"i],
main, [id*="main"i],[class*="main"i]
{
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
}
figcaption {
    background-color: var(--button-bg) !important;
    color: var(--text-color);
}

*:not(a)
{
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* text stuff */
a:not(a:any-link),
p, strong, pre, .text-white,
h1,h2,h3,h4,h5,h6 { color: var(--text-color) !important; }
:any-link {
    color: var(--link-color) !important;
    text-decoration: underline !important;
}
:active {color: var(--link-selected) !important;}
:visited {color: var(--link-visited) !important;}

div ~ a,
div:has(span) 
{
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}


/* code blocks and inline code */
pre,
code,
pre div,
pre:has(code),
[class^="code-"],
[class$="-code"],
pre > code
{
    background-color: var(--code-bg) !important;
    /*color: var(--text-color) !important;*/
}

.mw-body code,
.mw-body tt
{ background-color: var(--overlay-dark) !important; }

section > pre,
pre:has(code),
pre:has(samp),
#content pre:not([class*="CodeMirror"])
{ border-left: 0.4rem solid var(--text-shadow) !important; }

/* icons */
nav svg, .item > svg,
[class*="navbar"i] svg {
    filter: contrast(0%) saturate(100%) !important;
    min-height: 1.5rem !important;
    min-width: 1.5rem !important;
}

/* buttons with background-image */
svg, svg > path {
    filter: var(--svg-filter) !important;
}
/* logos *
[class*="logo"i],[id*="logo"i],*/
span[class*="vector"],
nav svg, .item > svg, [class*="navbar"i] svg, aside svg,
.tree_mode_off, #mw-sidebar-button::before, #p-personal-label::before {
    filter: var(--svg-filter) !important;
}

/*input, form,*/
section div {border-color: var(--border-color) !important; }

section {border-bottom: 1px solid var(--border-color); }
section:has(a > textarea) {display: none !important;}

/*
* SITE-FIXES
************/
/* userstles.world */
[data-color-scheme="light"] .btn.primary {
    color: var(--button-text) !important;
}

/*
* EXPERIMENTAL
**************/

/* zebra tables, lol */
main tr:nth-child(2n),
main nav li:nth-child(2n) {
    background-color: var(--overlay-dark) !important;
    color: var(--text-color) !important;
}

/* adding border to (wannabe) buttons */
div ~ a,
nav svg,
.menuitem,
[role="menu"],
button, button > span,
[role="button"],/*
a:has(svg), a:has(span),
[class*="button" i], TODO: needs better definition */
figcaption::before,
textarea:not([name="q"]),
input:not([class*="search"i]),
[class$="-btn"i],
[class^="btn-"i],
form:has(button),
[id*="button"i]:has(svg),
*[class*="button"i]:has([class*="button"i]) /* .button with .button */
{
    border: 1px solid var(--border-color) !important;
    background-color: var(--button-bg) !important;
    color: var(--text-color) !important;
    min-height: 2rem !important;
    min-width: 2rem !important;
}
button,
div[class$="-btn"i],
div[class^="btn-"i],
[id*="button"i]:has(svg),
*[class*="button"i]:has([class*="button"i]) {
    margin: 0 1px !important;
}
nav {
    border-bottom: 1px solid var(--border-color) !important;
}

/* eliminating some nested borders */
a > span,
span > span,
div > button,
button > span,
button > svg,
[class*="button"] > svg,
[class*="input"i] > input,
div[class^="dropdown"i] >[class^="dropdown"i],
[class*="button"i]:has([class*="button"i] >[class*="button"i]) {
    border: none !important;
}

/* giving icons in buttons some space */
[id*="button"i] >svg,
[class*="button"i] >svg
{ margin: 0 0.5rem !important; }

input >* { margin-left: 0.5rem !important; }
a span {padding-right: 0.5rem !important;}
.AppHeader-search-control {padding-right: 1px;}
#AppHeader-commandPalette-button {
    min-width: 1rem !important;
    min-height: 1rem !important;
}


/* making images visible  */
span >a, span >a >img, svg {
    filter: var(--filter) !important;
}


/* don't know anymore, just leave it */
main .row
{
    background: none;
    background-image: none;
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}