GrapheneOS.org ~ Lights Off by circuit

/* ==UserStyle==
@name         GrapheneOS.org ~ Lights Off
@version      20240312.23.30
@namespace    https://userstyles.world/user/circuit
@description  Dark theme for GrapheneOS.org
@homepage     https://userstyles.world/user/circuit
@author       circuit
@license      MIT-0
==/UserStyle== */

@-moz-document url-prefix("https://grapheneos.org/") {
html {
    height: -webkit-fill-available
}

#site-menu ul,body {
    display: flex;
    margin: 0;
    padding: 0
}

body,h4 {
    letter-spacing: .009375rem
}

body {
    flex-direction: column;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    font-family: Roboto,sans-serif;
    line-height: 1.5;
    background-color: #121212;
    overflow-y: scroll
}

#site-menu ul li a,a {
    color: #1565c0;
    text-decoration: none
}

a:visited {
    color: #6a1b9a
}

a:hover {
    text-decoration: underline
}

body,h1 a,h1 a:visited,h2 a,h2 a:visited,h3 a,h3 a:visited,h4 a,h4 a:visited,h5 a,h5 a:visited,h6 a,h6 a:visited {
    color: rgb(255 255 255 / 87%)
}

h1,h2,h3 {
    font-size: 2.25rem;
    line-height: 2.75rem;
    letter-spacing: 0
}

h2,h3 {
    font-size: 1.5rem;
    line-height: 2rem
}

h3 {
    font-size: 1.375rem;
    line-height: 1.75rem
}

h4 {
    font-size: 1rem;
    line-height: 1.5rem
}

code,h5,pre {
    font-size: .875rem;
    line-height: 1.25rem;
    letter-spacing: .00625rem
}

h6 {
    font-size: .6875rem;
    line-height: 1rem;
    letter-spacing: .03125rem
}

code,pre {
    background-color: #e0e2ec;
    color: #44474e;
    font-family: "Roboto Mono",monospace;
    letter-spacing: .015625rem
}

pre {
    border-radius: 12px;
    border: 1px solid #74777f;
    overflow-x: auto;
    padding: .875rem
}

code {
    border-radius: 8px;
    padding: .25rem
}

var {
    color: #ba1a1a
}

#site-menu ul {
    flex-wrap: nowrap;
    overflow-x: auto
}

#site-menu {
    background-color: #212121;
    white-space: nowrap
}

#site-menu ul li {
    list-style-type: none;
    display: flex
}

#site-menu ul li:hover {
    background-color: #424242
}

#site-menu ul li a {
    color: #fff;
    display: flex;
    padding: 1em;
    align-items: center
}

#site-menu ul li a:visited {
    color: #fff
}

#site-menu ul li[aria-current] a {
    color: #64b5f6
}

#site-menu img {
    height: 1.8rem;
    width: 1.8rem;
    filter: invert(100);
    vertical-align: middle;
    margin-right: .5rem
}

#site-menu ul li[aria-current] img {
    filter: invert(60%) sepia(24%) saturate(997%) hue-rotate(168deg) brightness(107%) contrast(93%)
}

main {
    margin-left: auto;
    margin-right: auto;
    padding: 1em;
    max-width: 832px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word
}

button,input,select,textarea {
    font-family: inherit
}

.button,.button:visited,button {
    color: #fff;
    font-size: .9em;
    font-weight: 700;
    letter-spacing: .0892857143em;
    background-color: #0053a3;
    border-radius: 20px;
    border: 0;
    height: 40px;
    padding: .5rem 1.5rem
}

.button:hover,button:hover {
    background-color: #1863ad;
    cursor: pointer
}

.button:focus,button:focus {
    background-color: #2f73b4;
    box-shadow: 0 2px 4px -1px rgba(0 0 0/20%),0 4px 5px 0 rgba(0 0 0/14%),0 1px 10px 0 rgba(0 0 0/12%)
}

button:disabled {
    background-color: rgb(26 27 30/12%);
    color: rgb(26 27 30/38%);
    cursor: not-allowed
}

.button,.button:active,.button:hover,.button:visited {
    text-decoration: none;
    padding-top: .75rem;
    padding-bottom: .75rem;
    line-height: 2.5rem
}

.coin-address,footer img {
    display: block
}

.coin-address img {
    image-rendering: pixelated;
    width: 180px;
    height: 180px;
    border-radius: 16px
}

footer img {
    width: 60px;
    height: auto
}

.break p,.coin-address,footer {
    text-align: center
}

.coin-address,footer,footer img {
    margin-left: auto;
    margin-right: auto
}

footer {
    margin-top: auto;
    padding: 1em;
    max-width: 100vw;
    overflow-wrap: break-word
}

footer a,footer a:visited {
    color: #616161
}

#social {
    line-height: 2;
    margin-top: 2em;
    padding: 0;
    list-style-type: none;
    max-inline-size: 60ch
}

#social li {
    display: inline-block;
    padding: 0 .5em
}

#beta-channel ul,#stable-channel ul {
    margin: 0;
    padding: 0;
    list-style-type: none
}

.error-text {
    color: #b00020
}

table {
    border-collapse: collapse;
    width: 100%
}

td {
    border: 1px solid #ddd;
    padding: .5rem
}

main.normalize {
    max-width: 100%;
    margin: 0;
    padding: 0
}

.content {
    max-width: 832px;
    margin: auto;
    padding: 3.5rem 1rem
}

.hero {
    display: flex;
    align-items: center;
    flex-flow: row nowrap;
    justify-content: space-between
}

.hero h1 {
    margin: 0;
    line-height: 1
}

.device-img {
    margin: 0 0 0 2rem;
    position: relative
}

.phone-logo-img {
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.surface {
    background-color: #212121;
    width: 100%
}

.start {
    margin-top: 0
}

.end {
    margin-bottom: 0
}

.break p {
    line-height: 1rem;
    margin: 0
}

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("Roboto"),local("Roboto-Regular"),url(/fonts/roboto-v30-regular-latin.woff2)format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: Roboto;
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: local("Roboto Italic"),local("Roboto-Italic"),url(/fonts/roboto-v30-regular-italic-latin.woff2)format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local("Roboto Bold"),local("Roboto-Bold"),url(/fonts/roboto-v30-bold-latin.woff2)format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: "Roboto Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("Roboto Mono"),local("RobotoMono-Regular"),url(/fonts/robotomono-v23-regular-latin.woff2)format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: "Roboto Mono";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local("Roboto Mono Bold"),local("RobotoMono-Bold"),url(/fonts/robotomono-v23-bold-latin.woff2)format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@media only screen and (max-width: 735px) {
    .hero {
        flex-flow:column nowrap;
        text-align: center
    }

    .device-img {
        margin: 3.5rem 0 0
    }
}

@media (prefers-color-scheme: dark) {
    body {
        background:#121212
    }

    a {
        color: #90caf9
    }

    a:visited {
        color: #ce93d8
    }

    body,h1 a,h1 a:visited,h2 a,h2 a:visited,h3 a,h3 a:visited,h4 a,h4 a:visited,h5 a,h5 a:visited,h6 a,h6 a:visited {
        color: rgba(255 255 255/87%)
    }

    .button,.button:visited,button {
        color: #000;
        background-color: #95c4ff
    }

    .button:hover,button:hover {
        background-color: #89b4ea
    }

    .button:focus,button:focus {
        background-color: #7ca3d4
    }

    button:disabled {
        background-color: rgb(227 226 230/12%);
        color: rgb(227 226 230/38%)
    }

    code,pre {
        background-color: #44474e;
        color: #c4c6cf
    }

    pre {
        border-color: #8e9099
    }

    footer a,footer a:visited {
        color: #9f9f9f
    }

    footer img {
        filter: invert(87%)
    }

    .error-text {
        color: #cf6679
    }

    td {
        border-color: #222
    }

    .phone-img {
        filter: brightness(.87)
    }

    .phone-logo-img {
        filter: invert(87%)
    }

    .surface {
        background-color: #212121
    }

    var {
        color: #ffb4ab
    }
}

}