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)