Skip to content

Brick Hill: Optimum by kaiokeno

Details

Authorkaiokeno

LicenseNo License

Categorybrick-hill

Created

Updated

Size6.2 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

At the moment, it makes Brick Hill's dark mode better and actually dark... There are different dark tones you can choose from in Stylus' settings.

Previews/thumbnail coming soon.

Todo/planned updates:
https://github.com/users/Kaiokeno/projects/1

Notes

Stylus addon/extension is required, click "Get Stylus" next to install theme. Uninstall "Stylish" if you have that addon.

Settings are on the Stylus addon, click on it, then click on the cog wheel next to the theme.

Source code

/* ==UserStyle==
@name           Brick Hill: Optimum
@version        1.0.0
@preprocessor   stylus

@namespace      Kaiokeno
@homepageURL    https://userstyles.world/user/kaiokeno
@supportURL     https://github.com/Kaiokeno/CSS/issues


@var select    DMTone   "Dark Mode Tone:" ["15%", "35%*", "50%", "Amoled"]
==/UserStyle== */
@-moz-document domain("brick-hill.com") {
     
    /* Dark Mode */
    if DMTone == "15%" {html.theme-dark body, .theme-dark .painter[data-v-be6572ec], html.theme-dark .modal .modal-content {background-color: #1a1a1a;}}
    if DMTone == "35%" {html.theme-dark body, .theme-dark .painter[data-v-be6572ec], html.theme-dark .modal .modal-content {background-color: #131313;}}
    if DMTone == "50%" {html.theme-dark body, .theme-dark .painter[data-v-be6572ec], html.theme-dark .modal .modal-content {background-color: #0b0b0b;}}
    if DMTone == "Amoled" {html.theme-dark body, .theme-dark .painter[data-v-be6572ec], html.theme-dark .modal .modal-content {background-color: #000;}}
                
                

    html.theme-dark .dropdown-content li * {
        background-color: #202020; color: #fff;
    }
    html.theme-dark .dropdown-content li *:hover {
        background-color: #252525;
    }
    html.theme-dark .dropdown-arrow, html.theme-dark .dropdown-content.logout-dropdown .dropdown-arrow {
        border-bottom-color: #202020;
    }
    
    html.theme-dark .modal .modal-content {
        width: 32%;
    }
     
    html.theme-dark nav div.primary,
    html.theme-dark div.tab, html.theme-dark .tabs .tab,
    html.theme-dark select option, html.theme-dark .dropdown-content,
    html.theme-dark .avatar-buttons .button-hint[data-v-55aa1d57], 
    html.theme-dark .dropdown,
    html.theme-dark .read-more-desc,
    html.theme-dark .slider-button, html.theme-dark .toggle-user-desc:not(.open)::after, 
    html.theme-dark button.tab-button.transparent,
    html.theme-dark div.col-1-2.weight600.forum-options.admin-forum-options button, html.theme-dark div.admin-forum-options form button {
        background-color: transparent !important;
    }
    html.theme-dark form input.upload-input {
        background-color: transparent !important;
        border: none !important;
    }

    html.theme-dark nav div.secondary, html.theme-dark div.info, html.theme-dark footer,
    html.theme-dark .card .content,
    html.theme-dark input, html.theme-dark textarea,
    html.theme-dark [class*="button"]:not([class*="buttons"]):not([class*="slider-button"]):not([class*="tab-button transparent"]):not([class*="button-hint"]):not([class*="tab-button w600 transparent"]), 
    html.theme-dark button, html.theme-dark .modal .cancel-button,
    html.theme-dark .tabs .tab-body, html.theme-dark .tabs .tab.active, 
    html.theme-dark select,
    html.theme-dark .crate-types .active, html.theme-dark .crate-types li:hover, 
    html.theme-dark .profile-card.crate img, html.theme-dark .trade-serial, html.theme-dark .friend-card:hover,
    html.theme-dark .trade-picker, html.theme-dark .trade-picker .trade:hover, html.theme-dark .trade.selected, html.theme-dark .item-card-container,
    html.theme-dark .forum-tag,
    html.theme-dark .membership-buttons .membership-button .membership-average.gray, html.theme-dark [class*="membership-header"], html.theme-dark .bucks-grad[data-v-0f845e92] {
        background: #ffffff08 !important;
    }
    html.theme-dark .forum-tag::after {
        border-right-color: #ffffff08
    }
 
    html.theme-dark .card .top:not(.absolute) {
        background-color: #00000059;
    }

    html.theme-dark [class*="hover"]:hover, html.theme-dark div.profile-card:hover, html.theme-dark .card .footer {
        background-color: #ffffff05;
    }

    html.theme-dark div.m0.thread-card.viewed {
        background-color: #0000001a;
    }
    
    html.theme-dark hr .line, .theme-dark .new-theme hr .line,
    html.theme-dark input, html.theme-dark textarea, .theme-dark .new-theme textarea,
    html.theme-dark .select, html.theme-dark select,
    html.theme-dark .trade-serial, html.theme-dark .profile-card.crate img {
        border: 0.5px solid #ffffff12 !important;
    } 
    html.theme-dark .item-card-image, html.theme-dark .trade-picker hr,
    .theme-dark .play-content-box[data-v-7c95a0f6] {
        border-color: #ffffff12;
        border-bottom-width: 0.5px;
    }
    html.theme-dark .painter .paint-container[data-v-be6572ec],
    html.theme-dark .crate-types {
        border-color: #ffffff12;
        border-right-width: 0.5px;
    }
    html.theme-dark hr, html.theme-dark .line {
        border-bottom: none;
    }
    html.theme-dark .tabs .tab-body, html.theme-dark .tabs .tab.active, html.theme-dark div.tab, html.theme-dark .tabs .tab,
    html.theme-dark .input-group, html.theme-dark .input-group .input-button, html.theme-dark .new-theme button.clear, html.theme-dark .modal .cancel-button, .theme-dark .new-theme .button.clear, .membership-buttons,
    html.theme-dark .bottom-data {
        border: none;
    }
    
    html.theme-dark button.no-click {
        border-color: #ffffff73;
    }
    html.theme-dark .modal .cancel-button {
        border: none;
        color: #fff;
    }
    
    html.theme-dark .dropdown {
        background-color: #fff;
    }
    
    html.theme-dark .slider-button {
        color: #fff;
    }
    
    html.theme-dark a.darker-grey-text.read-more-desc, html.theme-dark .toggle-user-desc:not(.open)::after {
        width: 150%;
        color: transparent;
    }
    
    
    /* Fixes / Clean ups */
    input, textarea {
        resize: vertical;
    }
    
    button.no-click, button[disabled] {
        cursor: not-allowed;
        opacity: 50%;
    }
    
    .modal .close:hover {
        color: red;
    }
    
    [class*="col-1-2 weight600 forum-options admin-forum-options"] {
        padding-top: 15px;
        width: 70% !important;
        float: left !important;
    }
    [class*="col-1-2  weight600 dark-grey-text forum-options"] {
        float: right;
        padding-top: 15px;
        width: 250px;
    }
}

Reviews

No reviews yet.