Skip to content

nLab Full Redesign by BinaryQuantumSoul

Screenshot of nLab Full Redesign

Details

AuthorBinaryQuantumSoul

LicenseNo License

Categoryncatlab

Created

Updated

Size6.2 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Complete mobile-friendly dark redesign of nLab.

nCatLab, nLab

Notes

Handles mobile, links, blockquotes, images and svgs, codeblocks, propositions, etc.

Source code

/* ==UserStyle==
@name           nCatLab Dark Redesign
@namespace      github.com/openstyles/stylus
@version        1.1.3
@description    Prettified dark nlab
@author         QuantumSoul
==/UserStyle== */
@-moz-document url-prefix("https://ncatlab.org") {
    :root {
        --text-color: #e8e6e3;
        --background-color: #181a1b;
        --background-highlight: #2b2f31;
    }

    #Content {
        max-width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }
    #revision body > * {
        margin-top: 0;
        margin-bottom: 0;
    }
    #revision body > *:not(h2, h3, h4, h5, h6):not(:has(h2, h3, h4, h5, h6)):not(:has(+ ul, + ol, + div, + blockquote)) {
        margin-bottom: 2em;
    }
    .un_theorem,
    .num_theorem,
    .un_lemma,
    .num_lemma,
    .un_prop,
    .num_prop,
    .un_cor,
    .num_cor,
    .un_def,
    .num_def,
    .un_defn,
    .num_defn,
    .num_example,
    .un_note,
    .num_note,
    .un_remark,
    .num_remark,
    .un_corollary {
        padding-left: 0.5em;
        border-left: var(--text-color) 1px dashed;
    }
    .un_theorem,
    .num_theorem,
    .un_lemma,
    .num_lemma,
    .un_prop,
    .num_prop,
    .un_cor,
    .num_cor,
    .un_def,
    .num_def,
    .un_defn,
    .num_defn,
    .un_example,
    .num_example,
    .un_note,
    .num_note,
    .un_remark,
    .num_remark {
        margin-left: 0;
    }
    span.theorem_label {
        margin-left: 0;
    }

    body {
        background-color: var(--background-color);
        color: var(--text-color);
        font-family: system-ui, "Public Sans", "helvetica", Sans !important;
    }

    a {
        text-decoration: none !important;
        color: rgb(188, 86, 255);
    }
    a:hover {
        color: rgb(246, 137, 248);
    }
    a.existingWikiWord,
    .maruku_toc li a,
    .newWikiWord a {
        color: rgb(119, 248, 119);
    }
    a:hover.existingWikiWord,
    .maruku_toc li a:hover,
    .newWikiWord a:hover {
        color: rgb(113, 216, 231);
    }
    a[href^="https://"],
    a[href^="http://"],
    a[href$=".pdf"] {
        color: rgb(124, 154, 231) !important;
    }
    a[href^="https://"]:hover,
    a[href^="http://"]:hover,
    a[href^="http://"]:hover {
        color: rgb(181, 194, 226) !important;
    }
    .newWikiWord {
        color: var(--text-color);
        background-color: var(--background-highlight);
    }
    .newWikiWord a:hover {
        background-color: var(--background-color);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .rightHandSide h2 {
        color: rgb(142, 162, 141);
        font-family: unset !important;
        margin-bottom: 0.5em !important;
    }
    h2 {
        border-bottom: rgb(142, 162, 141) 1px solid;
    }
    h1#pageName {
        color: rgb(119, 248, 119);
        text-transform: capitalize;
        margin-top: 1.25em;
    }
    h1#pageName > span.webName {
        color: white;
        text-transform: initial;
    }
    hr {
        display: none;
    }
    input[type="text"]#searchField {
        color: var(--text-color);
        background-color: transparent;
        border-radius: 15px;
    }


    div.info,
    div.standout,
    :target {
        color: var(--text-color);
        background-color: initial;
    }
    div.info {
        margin-top: -20px;
        font-style: italic;
        font-weight: normal;
    }
    div.standout {
        border-color: var(--text-color);
        border-width: 1px;
        border-radius: 15px;
    }
    blockquote {
        padding: 0 0 0 0.5em;
        margin: 0 0 0 2em;
        font-style: italic;
        border-left: var(--text-color) 1px solid;
    }
    pre {
        background-color: var(--background-highlight);
        border-radius: 15px;
    }
    div.query {
        background-color: rgb(10, 95, 10);
        border-color: rgb(35, 222, 61);
        margin-top: 0.5em !important;
        border-radius: 15px;
    }


    .float_right_image {
        overflow-x: auto;
        border: var(--text-color) 1px solid;
        margin: 0 0 2em 2em !important;
        padding: 1em;
    }
    .float_right_image img {
        padding: 0;
        margin: 0;
    }
    #revision body *:has(> img), #revision body *:has(> figure), #revision body *:has(> math) {
        overflow-x: auto;
        overflow-y: hidden;
    }
    img {
        filter: invert(1);
        mix-blend-mode: screen;
    }
    #revision svg {
        filter: invert(1);
        mix-blend-mode: screen;
        transform: scale(1.25);
        transform-origin: center;
        margin: 60px auto;
    }

    table {
        --border: 1px solid var(--text-color);
        border-radius: 15px;
        border-spacing: 0;
        border-collapse: initial;
        border: var(--border);
        overflow: hidden;
    }
    th,
    td,
    tr {
        border: none;
    }
    tr:not(:last-child) > td,
    thead > tr > th {
        border-bottom: var(--border);
    }
    th:not(:last-child),
    td:not(:last-child) {
        border-right: var(--border);
    }

    @media only screen and (max-width: 900px) {
        h1#pageName {
            margin-top: 110px;
        }
        #Content {
            max-width: 100%;
            margin: 0;
        }
        .navigation:not(.navfoot) {
            top: 60px;
            display: flex;
            width: -moz-available;
        }
        .navigation:not(.navfoot) > a {
            flex-basis: 0;
            flex-grow: 1;
            margin: 0;
            align-content: center;
            text-align: center;
            font-size: 1rem
        }
        .navigation.navfoot {
            display: flex;
            flex-wrap: wrap;
        }
        #navigationSearchForm {
            position: absolute;
            right: 10px;
            top: -40px;
        }
        .float_right_image {
            border:none;
            margin: 0;
            padding: 0;
        }
        div.rightHandSide {
            display: none;
        }
    }
}

Reviews

No reviews yet.