Skip to content

SpigotMC NewDark by janmm14

Screenshot of SpigotMC NewDark

Details

Authorjanmm14

LicenseGPL v3

Categoryspigotmc.org

Created

Updated

Size40 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

A new dark mode theme for spigotmc.org
Adds a couple customization options.

Notes

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           SpigotMC NewDark
@namespace      github.com/Janmm14/spigotmc-newdark
@version        1.2.8
@description    SpigotMC.org NewDark mode userstyle. https://userstyles.world/style/4051/spigotmc-newdark
@preprocessor   less
@author         Janmm14
@var range dim "Dim spigotmc orange" [1, 0.4, 1, 0.025]
@var checkbox black_header "Black header background" 1
@var checkbox no_header "Remove the header" 1
@var checkbox nomargin "Less margin on spigotmc home news feed and wiki pages" 1
@var checkbox icode_dark "Should inline code [icode] have dark background" 1
@var number codeblockrightmargin "Right margin of code blocks (+1)" [141, 1, 1000, 1, 'px']
==/UserStyle== */

@-moz-document url-prefix("https://spigotmc.org"), url-prefix("https://www.spigotmc.org") {
    html {
        background: black;
        &:before {
            content: @dim;
            display: none;
        }
    }

    body {
        background: black;
        color: #d3d3d3;
    }
    
    a[href]:hover {
        color: #ccc;
    }
    .spigot_headerReadAboutWrapper a:hover {
        color: #efb61c;
    }
    .primaryContent a, .ugc a:link, .ugc a:visited {
        color: #efb61c;
    }
    #AccountMenu ul.links a:hover, .articleItem a:hover {
        color: #efb61c;
    }

    #navigation {
        .navTabs {
            .navTab.selected {
                .navLink {
                    background-color: #1b1e22;

                    &::after, &::before {
                        bottom: -4px;
                        background: transparent;
                        border-bottom: 4px solid #1b1e22;
                    }

                    &::before {
                        border-radius: 0 0 100% 0;
                        border-right: 4px solid #1b1e22;
                    }

                    &::after {
                        border-radius: 0 0 0 100%;
                        border-left: 4px solid #1b1e22;
                    }
                }
            }
        }
    }
    .navTabs {
        .navTab.selected {
            .tabLinks {
                background: #1b1e22;
                border-color: #30353b;

                a {
                    color: #ddd;
                    text-shadow: 0 1px #555;
                }
            }
        }
    }
    #userBar .navTabs {
        & when (@black_header = 1)  {
            background: black;
            border-bottom: 0 none;
            padding-bottom: 3px;
        }
    }
    #userBar .navTabs .navLink, #userBar .navTabs .SplitCtrl {
        color: #ddd;
    }
    .Menu {
        border-width: 1px;
        border-left-color: #444;
        border-right-color: #444;
        border-bottom-color: #444;
        border-radius: 0 0 10px 10px;
        &.tabMenu {
            border-left-color: #efb61c;
            border-right-color: #efb61c;
            border-bottom-color: #efb61c;
        }
        .primaryContent {
            background: rgba(38, 38, 38, 0.9);
            border-color: #262626;
        }
        .secondaryContent {
            background: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid transparent;
        }
    }
    .textCtrl {
        background-color: black;
        color: #bfbfbf;
        border-color: #444;
    }
    #QuickSearch .primaryControls .uix_icon {
        color: #efb61c;
        background: #444;
        text-shadow: 0 1px rgba(239, 182, 28,.25);
    }
    #QuickSearch .primaryControls:focus-within {
        .uix_icon {
            line-height: 32px;
            border: 1px solid #efb61c;
            border-right-color: transparent;
        }
    }
    #QuickSearch .formPopup .secondaryControls {
        background: rgba(17, 17, 17, .95);
        background-clip: padding-box;
        border-color: #333;
        box-shadow: 4px 4px 10px -2px rgba(0,0,0,.9);
        color: #d3d3d3;
    }
    #QuickSearch .button:not(.primary) {
        background-color: #333;
        color: #eee;
    }
    .navTabs .navTab.PopupClosed .navLink {
        color: #eee;
    }
    .sidebar .section .primaryContent h3, .sidebar .section .secondaryContent h3, .profilePage .mast .section.infoBlock h3, .breadcrumb, a.callToAction span, .xenOverlay .heading {
        box-shadow: inset 0 1px rgba(255,255,255,.4),inset 0 -1px rgba(0,0,0,.2);
        color: #eee;
    }
    .breadcrumb .crust a.crumb {
        color: #eee;
    }
    .sidebar .section .primaryContent h3, .sidebar .section .secondaryContent h3, .profilePage .mast .section.infoBlock h3, .breadcrumb, a.callToAction span, .xenOverlay .heading {
        filter: brightness(@dim);
    }
    .breadcrumb, .uix_breadCrumb_toggleList li.toggleList_item {
        filter: brightness(@dim);
    }
    #navigation .navTabs {
        & when (@black_header = 0)  {
            filter: brightness(@dim);
        }
        & when (@black_header = 1)  {
            background: transparent;
            box-shadow: none;
        }
    }

    & when (@no_header = 1) {
            #navigation .navTabs {
                > .pageWidth {
                    padding-left: 0px;
                    padding-right: 10px;
                    ul li.articles.PopupClosed:hover a.navLink {
                        background: -moz-radial-gradient(circle at 20%, rgba(255, 255, 255, 0.22) 0%, #00000000 35%);
                        background: -webkit-radial-gradient(circle at 20%, rgba(255, 255, 255, 0.22) 0%, #00000000 35%);
                        background: radial-gradient(circle at 20%, rgba(255, 255, 255, 0.22) 0%, #00000000 35%);
                        &::before {
                            filter: brightness(1.1);
                        }
                    }
                    ul li.articles a.navLink {
                        padding-left: 0px;
                        display: flex;

                        &::before {
                            background-image: url("//static.spigotmc.org/img/spigot.png");
                            background-size: 50px;
                            background-repeat: no-repeat;
                            background-position-x: 5px;
                            background-position-y: 5px;
                            content: "";
                            display: inline-block;
                            height: 40px;
                            width: 55px;
                            position: static;
                            border: 0 none;
                            border-radius: 0;
                        }
                    }
                }
            }
        @media(max-width: 800px) {
            #navigation .navTabs {
                > .pageWidth {
                    padding-left: 16px;
                    padding-right: 16px;
                    ul li.articles a.navLink {
                        background-image: none;
                        background-size: 50px;
                        background-repeat: no-repeat;
                        background-position-y: 0;

                        &::before {
                            content: none;
                            display: none;
                            height: 0px;
                            width: 0px;
                            border-radius: 0;
                        }
                    }
                }
            }
            #navigation .pageContent .navTabs ul.navLeft li.navTab--navPanelTrigger {
                &:hover a.navLink {
                    background: -moz-radial-gradient(circle at 20%, rgba(255, 255, 255, 0.22) 0%, #00000000 35%);
                    background: -webkit-radial-gradient(circle at 20%, rgba(255, 255, 255, 0.22) 0%, #00000000 35%);
                    background: radial-gradient(circle at 20%, rgba(255, 255, 255, 0.22) 0%, #00000000 35%);
                    i.uix_icon-menu {
                        filter: brightness(1.1);
                        }
                }
                a.navLink {
                    padding-left: 0px;
                    &:hover {
                        background: -moz-radial-gradient(circle at 20%, rgba(255, 255, 255, 0.22) 0%, #00000000 35%);
                        background: -webkit-radial-gradient(circle at 20%, rgba(255, 255, 255, 0.22) 0%, #00000000 35%);
                        background: radial-gradient(circle at 20%, rgba(255, 255, 255, 0.22) 0%, #00000000 35%);
                    }
                }
                i.uix_icon-menu {
                    padding-left:50px;
                    background-image: url("//static.spigotmc.org/img/spigot.png");
                    background-size: 50px;
                    background-repeat: no-repeat;
                    background-position-y: 5px;
                    background-origin: border-box;
                    
                    
                }
            }
        }
        @media(min-width: 1200px) {
            #header #userBar .navTabs {
                box-shadow: none;
            }
            #header #userBar {
                display: block;
                position: absolute;
                width: 100%;
                .pagewidth {
                    position: absolute;
                }
                .navTab {
                    padding-top: 6px;
                    padding-bottom: 5px;
                }
                .navRight {
                    position: relative;
                    margin-left: auto;
                    margin-right: 0;
                    z-index: 999;
                }
            }
        }
    }
    #logoBlock {
        & when (@no_header = 1) {
            display: none;
        }
    }
    #logoBlock .pageContent {
        & when (@black_header = 1)  {
            background: transparent;
        }
        ...

Reviews

No reviews yet.