Learn C++ Darkmode by lushinextdoor

/* ==UserStyle==
@name           www.learncpp.com - 03/10/2022, 10:51:40 pm
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */
@-moz-document domain("www.learncpp.com") {

    body {
        color: #e0dede;
        background-color: #2f2f2f;
    }

    #site-header-main {
        box-shadow: 0 0 3px rgb(0 0 0/.2);
        background: #1c1c1c;
        background: linear-gradient(180deg, #29324d 0%, #383c5a 80%, #454263 100%);
    }
    #site-description {
        color: #fff;
    }

    #primary {
        background-color: #2f2f2f;
    }

    .lp-staticslider::before,
    .lp-dynamic-slider .item > a::before,
    #header-image-main::before {
        background-color: #000;
    }



    #access > div > ul > li,
    #access > div > ul > li > a,
    .septera-over-menu .header-fixed#site-header-main #access > div > ul > li:not([class*="current"]),
    .septera-over-menu .header-fixed#site-header-main #access > div > ul > li:not([class*="current"]) > a,
    .septera-over-menu .header-fixed#site-header-main #sheader.socials a::before,
    #sheader.socials a::before,
    #mobile-menu {
        color: #bdbdbd;
    }

    body:not(.septera-landing-page) .main,
    #lp-posts,
    #lp-page,
    .searchform {
        background-color: #363637;
    }

    #secondary {
        background-color: #2f2f2f;
    }

    .entry-content h1,
    .entry-content h2,
    .entry-content h3,
    .entry-content h4,
    .lp-text-content h1,
    .lp-text-content h2,
    .lp-text-content h3,
    .lp-text-content h4,
    .entry-title {
        color: #cbdbff;
    }

    .entry-meta span,
    .entry-meta a,
    .entry-utility span,
    .entry-utility a,
    .entry-meta time,
    #breadcrumbs-nav,
    .footermenu ul li span.sep {
        color: #80899f;
    }

    /*
        ================== CODE EXMAPLE COLOURS ====================
    */
    code[class*="language-"],
    pre[class*="language-"] {
        background: #fff;
        color: #d3d3d3;
    }

    .token.directive.keyword {
        color: #b5b54f;
    }

    .token.keyword {
        color: #5796ff;
    }

    .token.function {
        color: #b7812c;
    }

    .token.comment {
        color: #02a21e;
    }

    .token.keyword.keyword-break,
    .token.keyword.keyword-case,
    .token.keyword.keyword-catch,
    .token.keyword.keyword-continue,
    .token.keyword.keyword-do,
    .token.keyword.keyword-else,
    .token.keyword.keyword-for,
    .token.keyword.keyword-goto,
    .token.keyword.keyword-if,
    .token.keyword.keyword-return,
    .token.keyword.keyword-switch,
    .token.keyword.keyword-throw,
    .token.keyword.keyword-try,
    .token.keyword.keyword-while {
        color: #c02afb;
    }

    .token.punctuation {
        color: #d3d3d3;
    }


    /*
        ================== BOX COLOURS ====================
    */
    .cpp-lightyellowbackground {
        background-color: #554801;
        border: 2px solid #978e1c;
        box-shadow: 0 2px #2d2900;
    }

    .cpp-lightgreenbackground {
        background-color: #080;
        border: 2px solid #002f00;
        box-shadow: 0 2px #003900;
    }

    .cpp-lightgraybackground {
        background-color: #272728;
        border: 2px solid #222;
        box-shadow: 0 2px #000;
    }

    .cpp-lightredbackground {
        background-color: #b90000;
        border: 2px solid #840000;
        box-shadow: 0 2px #570000;
    }

    #main pre[class*="language-"] {
        padding: 16px;
        background-color: #0f0f0f;
        background-image: linear-gradient(transparent 50%, rgba(150, 150, 150, 0.1) 50%);
        background-size: 32px 32px;
        background-attachment: local;
    }

    .cpp-lightbluebackground {
        background-color: #203471f5;
        border: 2px solid #0c236b;
        box-shadow: 0 2px #1e3988;
    }

    :not(pre) > code {
        background-color: #282727;
        padding: 1px 4px;
        border-radius: 4px;
        box-shadow: 0 1px #000;
    }

    pre,
    .page-link > span,
    .comment-author,
    .commentlist .comment-body,
    .commentlist .pingback {
        border-color: #000;
    }

    /* 
        ==================== COMMENT SECTION =======================
    */
    #wpdcom .wpd-form .wpdiscuz-textarea-wrap.wpd-txt .quicktags-toolbar .ed_button {
        opacity: .8;
        box-shadow: none;
        background: #3e4146;
        color: #dbd5d5;
        font-size: 13px;
        padding: 1px 12px;
        margin: 2px 1px;
        display: inline-block;
        border-radius: 0;
        line-height: 20px;
    }

    input[type]:hover,
    textarea:hover,
    select:hover,
    input[type]:focus,
    textarea:focus,
    select:focus {
        background: #2b2b2b;
    }



    #comments {
        max-width: 1100px;
        margin: 50px auto;
        color: #e3e3e3;
        font-style: normal;
    }

    #wpdcom .wpd-comment-text {
        color: #e3e3e3;
    }


    #wpdcom .wpd-blog-guest .wpd-comment-author,
    #wpdcom .wpd-blog-guest .wpd-comment-author a {
        color: #ffbebe;
    }

    #wpdcom.wpd-layout-2 .wpd-comment.wpd-reply .wpd-comment-wrap {
        margin: 0 0 5px;
        background-color: #2b2b2b;
        border-left: 3px solid #f99999;
        padding: 10px 15px 0 17px;
    }

    #wpdcom .wpd-comment .wpd-reply-to a {
        text-decoration: none;
        opacity: .8;
        color: #0a9fff;
    }

    #wpdcom .wpd-comment-header {
        font-size: 13px;
        color: #bfbfbf;
    }

    #wpdcom .wpd-form .wpdiscuz-textarea-wrap textarea {
        height: 54px;
        border-radius: 5px;
        border: 1px solid #515151;
        width: 100%;
        padding: 10px 15px;
        font-size: 14px;
        box-shadow: inset 1px 1px 8px rgba(0, 0, 0, .1);
        font-family: inherit;
        outline: none;
        -webkit-transition: .18s ease-out;
        -moz-transition: .18s ease-out;
        -o-transition: .18s ease-out;
        transition: .18s ease-out;
        resize: none;
    }

    #wpdcom .wpd-form-row .wpdiscuz-item {
        width: 100%;
        vertical-align: baseline;
        padding: 1px 0 7px;
        position: relative;
        background-color: #2f2f2f;
    }

    #wpdcom .wpd-form-row .wpd-field {
        width: 100%;
        line-height: 20px;
        color: #e1e1e1;
        display: inline-block;
        float: none;
        clear: both;
        margin: 0;
        box-sizing: border-box;
        padding-top: 2%;
        padding-bottom: 2%;
        font-size: 14px;
        border-radius: 3px;
        border-color: #6e6e6e;
        vertical-align: baseline;
        background-color: #373737;
    }

    #wpdcom .wpd-form-row .wpdiscuz-item input[type="text"],
    #wpdcom .wpd-form-row .wpdiscuz-item input[type="email"],
    #wpdcom .wpd-form-row .wpdiscuz-item input[type="url"],
    #wpdcom .wpd-form-row .wpdiscuz-item input[type="color"],
    #wpdcom .wpd-form-row .wpdiscuz-item input[type="date"],
    #wpdcom .wpd-form-row .wpdiscuz-item input[type="datetime"],
    #wpdcom .wpd-form-row .wpdiscuz-item input[type="datetime-local"],
    #wpdcom .wpd-form-row .wpdiscuz-item input[type="month"],
    #wpdcom .wpd-form-row .wpdiscuz-item input[type="number"],
    #wpdcom .wpd-form-row .wpdiscuz-item input[type="time"],
    #wpdcom textarea,
    #wpdcom select {
        border: #6e6e6e;
        color: #777;
    }



    /*
        ================== HOME SCREEN COLORS ====================
    */
    .changetable-widget-row {
        background-color: #444343;
    }

    .lessontable-header-title {
        color: #bddaf5;
    }

    .lessontable-row:nth-child(2n+1),
    .changetable-row:nth-child(2n+1) {
        background-color: #3e3e3e;
    }

    .lessontable-row,
    .chaptertable-row,
    .changetable-row {
        background-color: #3e3e3e;
    }

    a:link,
    a:visited {
        color: #c0d1f1;
    }

    .lessontable,
    .changetable {
        border-radius: 8px;
        padding: 0 11px 9px;
        box-shadow: 0 2px 12px rgba(255, 255, 255, 0.2);
        max-width: 800px;
        margin-bottom: 12px;
    }

    .lessontable-row-title a:visited,
    .chaptertable-row-title {
        color: #c4c3c4;
    }


    .lessontable-row:hover {
        background-color: #333 !important;
    }

    #colophon,
    #footer {
        background-color: #313339;
        color: #2d3140;
    }


    /* Insert code here... */
}