匿名岛-Catppuccin by tiamed

/* ==UserStyle==
@name         匿名岛-Catppuccin
@version      20231008.15.00
@namespace    userstyles.world/user/tiamed
@description  x岛匿名版 Catppuccin夜间主题
@author       tiamed
@license      No License
==/UserStyle== */

@-moz-document domain("www.nmbxd.com"), domain("www.nmbxd1.com") {
    :root, :root::selection {
        /* Give H, S, L values */

        /* rainbow 🌈 */
        --_rosewater: 10, 56%, 91%;
        --_flamingo: 0, 59%, 88%;
        --_mauve: 279, 70%, 83%;
        --_pink: 316, 72%, 86%;
        --_maroon: 349, 60%, 77%;
        --_red: 342, 79%, 75%;
        --_peach: 024, 88%, 78%;
        --_yellow: 041, 88%, 84%;
        --_green: 128, 58%, 79%;
        --_green_darken: 128, 58%, 76%;
        --_green_darkest: 128, 58%, 72%;
        --_teal: 171, 53%, 81%;
        --_blue: 207, 93%, 79%;
        --_blue_darken: 213, 84%, 78%;
        --_sky: 189, 71%, 73%;
        --_lavender: 238, 100%, 89%;

        /* black & white ☯️ */
        --_black0: 254, 25%, 10%;
        --_black1: 249, 23%, 12%;
        --_black2: 240, 21%, 15%;
        --_black3: 249, 18%, 22%;
        --_black4: 254, 12%, 36%;
        --_gray0: 247, 8%, 46%;
        --_gray1: 274, 11%, 59%;
        --_gray2: 285, 10%, 75%;
        --_white: 220, 38%, 89%;
    }

    :root, :root::selection {
        --rosewater: hsl(var(--_rosewater));
        --flamingo: hsl(var(--_flamingo));
        --mauve: hsl(var(--_mauve));
        --pink: hsl(var(--_pink));
        --maroon: hsl(var(--_maroon));
        --red: hsl(var(--_red));
        --peach: hsl(var(--_peach));
        --yellow: hsl(var(--_yellow));
        --green: hsl(var(--_green));
        --green_darken: hsl(var(--_green_darken));
        --teal: hsl(var(--_teal));
        --blue: hsl(var(--_blue));
        --blue_darken: hsl(var(--_blue_darken));
        --sky: hsl(var(--_sky));
        --lavender: hsl(var(--_lavender));

        --black0: hsl(var(--_black0));
        --black1: hsl(var(--_black1));
        --black2: hsl(var(--_black2));
        --black3: hsl(var(--_black3));
        --black4: hsl(var(--_black4));
        --gray0: hsl(var(--_gray0));
        --gray1: hsl(var(--_gray1));
        --gray2: hsl(var(--_gray2));
        --white: hsl(var(--_white));
    }
    
    /* scrollbar */
    
    ::-webkit-scrollbar {
      width: 10px;
    }

    ::-webkit-scrollbar-track {
      background: var(--black3); 
    }

    ::-webkit-scrollbar-thumb {
      background: var(--gray0); 
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--gray1); 
    }
    
    
    /* seperator */
    hr {
        border-top: 1px solid var(--gray0);
    }

    /* main background */
    html, body {
        color: var(--white);
        background: var(--black1);
    }
    
    /* system message */
    .system-message {
        color: var(--white);
        background: var(--black1);
    }
    
    /* selection */
    ::selection {
        color: var(--black0);
        background: var(--peach);
    }

    /* side bar */
    #h-menu, #h-bottom-nav {
        background: var(--black0);
    }

    /* menu active */
    #h-menu #h-menu-content .h-active {
        background: var(--black3);
    }

    /* form */
    #h-post-form .h-post-form-title {
        background: var(--black3);
    }

    textarea, input, select {
        background: var(--black2);
        color: var(--white);
        border: 1px solid var(--lavender);
    }

    textarea:focus-visible, input:focus-visible {
        border: 1px solid var(--pink);
        outline: none;
    }
    
    /* hidden text */
    .h-hidden-text {
        color: var(--mauve);
        background: var(--mauve);
    }
    
    .h-hidden-text:hover {
        color: var(--white);
    }

    /* thread layout */
    .h-threads-item .h-threads-content {
        margin: 6px;
    }

    .h-threads-item-reply-main {
        padding: 6px;
        border-radius: 4px;
    }

    .h-threads-item .h-threads-content {
        line-height: 1.6;
    }

    .h-threads-item .h-threads-item-replies .h-threads-item-reply {
        margin-bottom: 6px;
    }


    /* thread background */
    .h-threads-item .h-threads-item-replies .h-threads-item-reply .h-threads-item-reply-main {
        background: var(--black3);
    }

    /* thread info */
    .h-threads-item .h-threads-info .h-threads-info-title {
        color: var(--gray0);
    }

    .h-threads-item .h-threads-info .h-threads-info-email {
        color: var(--gray1);
    }

    .h-threads-item .h-threads-info spam {
        color: var(--sky)!important;
    }

    .h-threads-content > font {
        color: var(--flamingo)!important;
        cursor: pointer;
    }
    
    .h-threads-item .h-threads-tips {
        color: var(--gray0);
    }

    /* quote */
    #h-ref-view .h-threads-item-ref {
        background: var(--black4);
        border: none;
    }

    /* title */
    #h-menu #h-menu-content .h-nav-parent-header, #h-menu #h-menu-content .h-nav-header {
        color: var(--lavender);
    }

    #h-content h2.h-title {
        color: var(--rosewater);
    }

    /* link */
    #h-menu #h-menu-content .h-nav-item a,
    .system-message .jump a,
    .uk-nav-side ul a,
    .uk-link, a {
        color: var(--blue_darken);
    }

    /* link hover */
    .uk-link:hover, a:hover,
    .uk-nav-side ul a:hover{
        color: var(--blue);
    }

    /* link focus */
    .uk-nav-side>li>a:focus, .uk-nav-side>li>a:hover {
        text-shadow: none;
        box-shadow: none;
    }

    /* highlight color */
    .uk-text-danger {
        color: var(--peach)!important;
    }

    /* main color */
    .uk-text-primary {
        color: var(--yellow)!important;
    }


    /* button */
    .uk-button-primary, #h-tool .h-tool-btn {
        color: var(--white);
        background-color: var(--black3);
    }

    .uk-button-primary:focus, .uk-button-primary:hover {
        background-color: var(--black4);
    }
    
    /* pagination button */
    .h-pagination {
        user-select: none;
    }
    
    .h-pagination li a, .h-pagination li span {
        color: var(--white);
        background-color: var(--black3);
        text-shadow: none;
        border-radius: 4px;
    }
    
    .uk-pagination>li>a:focus, .uk-pagination>li>a:hover {
        color: var(--white);
        background-color: var(--black4);
    }
    
    .h-pagination li.uk-active a, .h-pagination li.uk-active span {
        color: var(--black4);
        background-color: var(--gray2);
    }
    
    .uk-pagination>.uk-disabled>span {
        color: var(--black4);
        background-color: var(--gray1);
        text-shadow: none;
        cursor: not-allowed;
    }

    /* image action button */
    .uk-button-link,
    .h-threads-item .h-threads-img-box .h-threads-img-tool .h-threads-img-tool-btn i {
        color: var(--lavender);
    }

    .uk-button-link:focus, .uk-button-link:hover {
        color: var(--pink);
    }


    /* hide dots before reply */
    .h-threads-item-reply-icon {
        display: none!important;
    }

    /* hide 404 image */
    img[src='https://image.nmb.fastmirror.org/image/2015-11-10/5640c3ffe84d0.gif'] {
        display: none;
    }

    /* override inline colors */
    [color='red'],
    [color='#CC0000'],
    [style*='color:#cc0000'],
    [style*='color: #cc0000'],
    [style*='color:red'],
    [style*='color: red'] {
        color: var(--red)!important;
    }
    [style*='color:#444'] {
        color: var(--yellow)!important;
    }
    
    /* fix font issues */
    @font-face {
        font-family: Emoji;
        src: local("Apple Color Emoji"),
           local("Segoe UI Emoji"),
           local("Segoe UI Symbol"),
           local("Noto Color Emoji");
        unicode-range: U+1F000-1F644, U+203C-3299;
    }
    
    html, select, textarea, input {
        font-family: system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif, YuGothic, Yu Gothic, Emoji;
    }
}