☰

Sleazy Fork is available in English.

Gruvbox Theme Reader for chyoa.com

Makes chyoa easier to read

/* ==UserStyle==
@name           Gruvbox Theme Reader for chyoa.com
@description    Makes chyoa easier to read
@version        1.1.0
@author         sllypper
@namespace      https://greasyfork.org/users/55535-sllypper
@preprocessor   stylus
==/UserStyle== */

@-moz-document url-prefix('https://chyoa.com/')
    
    // colors
    
    dark0_hard = #1d2021
    dark0 = #282828
    dark0_soft = #32302f
    dark1 = #3c3836
    dark2 = #504945
    dark3 = #665c54
    dark4 = #7c6f64

    light0_hard = #f9f5d7
    light0 = #fbf1c7
    light0_soft = #f2e5bc
    light1 = #ebdbb2
    light2 = #d5c4a1
    light3 = #bdae93
    light4 = #a89984
    
    gbgray = #928374

    bright_red = #fb4934
    bright_green = #b8bb26
    bright_yellow = #fabd2f
    bright_blue = #83a598
    bright_purple = #d3869b
    bright_aqua = #8ec07c
    bright_orange = #fe8019

    neutral_red = #cc241d
    neutral_green = #98971a
    neutral_yellow = #d79921
    neutral_blue = #458588
    neutral_purple = #b16286
    neutral_aqua = #689d6a
    neutral_orange = #d65d0e

    faded_red = #9d0006
    faded_green = #79740e
    faded_yellow = #b57614
    faded_blue = #076678
    faded_purple = #8f3f71
    faded_aqua = #427b58
    faded_orange = #af3a03
    
    // mixins
    
    bgDark(n = 0%)
        background-color mix(light0_hard, dark0_hard, n) !important
    fgLight(n = 0%)
        color mix(dark1, light1, n) !important
    borderLight()
        border-color light2
    
    selectDark()
        *::selection
            background dark2 !important
            color light1 !important
    color(n)
        color n !important
    bg(n)
        background-color n !important
        
    fgHoverable(x, y)
        color(x)
        &:hover
            color(y)
    
    bodyBg()
        bg(dark0_hard)
    bodyFg()
        color(light1)
        
    // styling
        
    body
        bodyBg()
        bodyFg()
        selectDark()
        borderLight()
    
    header#masthead
        @extend body
    
    // logo styling
        
    // drop-shadow mixin for logo
    sds(c)
        drop-shadow(0px 0px 2px c)
        // alternative:
        // drop-shadow(-1px -1px 0px c)
        
    a.brand-wordmark
        filter sds(dark2) sds(dark3) sds(dark4) sds(gbgray) sds(light4) sds(light3) sds(light2) sds(light1)
    
    .sidebar, .sidebar-content-wrapper
        borderLight()
        box-shadow: -1px 0 0 0 light1;
        @extend body
        .story-heading
            h1,h2,h3,h4,h5,h6
                bodyFg()
    .dropdown-menu
        bgDark()
        borderLight()
    .dropdown-header
        fgLight()
    .dropdown-item.unread
        bgDark(3%)
        
    // links

    lcolor = lighten(neutral_blue, 35%)
    visited = darken(lcolor, 45%)
        
    a, .btn-link
        fgHoverable(lcolor, visited)
        &:visited
            color visited
    .chapter-options .btn-link.like
        fgHoverable(light4, dark4)
    .chapter-options .btn-link.like.active,
    .chapter-options .btn-link.like.active i
        color(bright_blue)
    
    /**
     * Map page styling
     */
        
    .story-map-chapter
        border 1px solid dark2 !important
        display: block;
        padding-right: unset;
        min-width: unset;
        height: 22px;
        line-height: 22px;
        width: min-content;
        
        .title-wrapper
            width: auto
            padding-right: 10px;
            max-width 540px

            .btn-link.collapsable i
                vertical-align: 2.55px;
        
        .controls-wrapper
            position initial
            padding-right 18px
            display inline-block
            width: min-content;
        // a
        //     color(#fff)
        
        &:not(.updated)
            bg(dark0_hard)
        
            .btn-link,
            .title-wrapper,
            .controls-wrapper
                color(light0)
            .btn-link,
            .controls-wrapper
                bg(dark1)

            &.unread
                border 1px solid dark3 !important
                bg(light3)

                .btn-link,
                .title-wrapper,
                .controls-wrapper
                    color(dark1)
                .btn-link,
                .controls-wrapper
                    bg(light2)

                .title-wrapper a
                    fgHoverable(faded_blue, darken(faded_blue,40%))
                    &:visited
                        color darken(faded_blue,40%)
            &.current
                bg(neutral_green)
                .btn-link,
                .controls-wrapper
                    bg(darken(neutral_green, 20%))
    .story-map-chapter.updated
        bg(#286faf);
        a
            color(#fff);
    .legend-item.unread::before
        background light2
            
        
    /**/

    .section-sidebar .pairs-columns,
    .section-sidebar .pairs-justified
        fgLight(50%)
    .story-stats,
    .section-sidebar p
        fgLight()
    .nav-tabs a
        fgHoverable(fgLight(), fgLight(30%))
        // fgLight()
        // &:focus,
        // &hover
        //     fgLight()
    h1,
    .sidebar .media-heading a
        color(light0)
    .media-heading
        color(light1)
    header#masthead .nav-links > .auth > .dropdown > .btn,
    h2,h3,h4,h5,h6,
    .timestamp, .tags,
    .chapter-header .meta,
    .story-header .meta
        color(light4)