Skip to content

MySQL docu - dark by s-light

Details

Authors-light

LicenseNo License

Categorydev.mysql.com

Created

Updated

Size3.4 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

simple dark-style for mysql.com doc

Notes

Userstyle doesn't have notes.

Source code

/* ==UserStyle==
@name           mysql docu - dark
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    MySQL docu dark
@author         Stefan Krüger (s-light)
==/UserStyle== */
@-moz-document url-prefix("https://dev.mysql.com/doc/") {
    body {
        background-color: hsl(30, 90%, 5%);
        color: hsl(1, 100%, 100%);
    }

    .page-wrapper {
        max-width: 2000px;
        background: transparent;
        box-shadow: -2px 0 5px 0 hsla(0, 0%, 93%, .5), 2px 0 5px 0 hsla(0, 0%, 93%, .5);
    }

    #page {
        /*font-size: 90%;
        font-weight: 400;
        line-height: 1.6;*/
        background: transparent;
        color: hsl(40, 90%, 50%);
    }

    footer.collapsed #footer-bottom {
        background-color: transparent;
    }

    #docs-sidebar,
    #docs-sidebar-toc {
        width: 400px;
        background-color: hsla(40, 100%, 50%, .05);
    }

    .has-toc {
        border-left: 1px solid #e9eaeb;
        margin-left: 400px;
    }

    #l1-nav li {
        background-color: hsla(40, 100%, 50%, .2);
    }

    #l1-nav a,
    #l1-nav a:visited {
        color: hsl(40, 90%, 50%);
    }

    .docs-sidebar-header,
    a.docs-sidebar-section {
        background-color: transparent;
    }

    #docs-sidebar-search-box {
        background-color: transparent;
    }

    #docs-sidebar-search-box #q,
    .docs-sidebar-search-btn {
        background-color: transparent;
    }

    div#docs-main h1,
    div#docs-main h2,
    div#docs-main h3,
    div#docs-main h4,
    div#docs-main h5,
    div#docs-main h6 {
        color: hsl(40, 100%, 50%) !important;
    }


    div.caution,
    div.important,
    div.note,
    div.tip,
    div.warning {
        background-color: hsla(40, 100%, 50%, .1);
    }

    div.chapter code,
    div.section code {
        color: hsl(160, 100%, 50%);
        font-weight: 400;
        font-size: 95%;
    }
    
    span.emphasis em {
        color: hsl(180, 100%, 50%);
    }

    a:link {
        color: hsl(198, 100%, 60%);
    }

    /*code[class*="language-"] ::selection, 
    code[class*="language-"]::selection, 
    pre[class*="language-"] ::selection, 
    pre[class*="language-"]::selection,*/
    :not(pre) > code[class*="language-"],
    pre[class*="language-"] {
        background: hsla(40, 92%, 80%, .5);
        background: transparent;
    }

    code[class*="language-"],
    div.chapter code[class*="language-"],
    div.section code[class*="language-"],
    pre[class*="language-"] {
        color: hsl(0, 0%, 100%);
        text-shadow: 0 1px #000;
    }

    code[class*="language-"] ::selection,
    code[class*="language-"]::selection,
    pre[class*="language-"] ::selection,
    pre[class*="language-"]::selection {
        background: hsla(40, 100%, 50%, .2);
        text-shadow: 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;
    }


    pre[class*="language-sql"] em.replaceable,
    pre[class*="language-sql"] em.replaceable .datatype,
    pre[class*="language-sql"] em.replaceable .keyword {
        color: hsl(45, 100%, 91%);
    }

    .token.atrule,
    .token.attr-value,
    .token.command,
    .token.coord,
    .token.keyword {
        color: hsl(200, 100%, 50%);
    }

    .token.boolean,
    .token.constant,
    .token.deleted,
    .token.number,
    .token.property,
    .token.symbol,
    .token.tag {
        color: hsl(330, 100%, 50%);
    }
}

Reviews

No reviews yet.