/* ==UserStyle==
@name Dark-Stylus
@version 0.1.0
@author vednoc
@description Dark theme for Stylus, the extension.
@namespace gitlab.com/vednoc/dark-stylus
@homepageURL https://gitlab.com/vednoc/dark-stylus
@supportURL https://gitlab.com/vednoc/dark-stylus/issues
@updateURL https://gitlab.com/vednoc/dark-stylus/raw/master/stylus.user.styl
@preprocessor stylus
@var text b_radius 'Custom border radius' 3px
@var color dark 'Color: Primary bg ' #292929
@var color darken 'Color: Highlight bg ' #333333
@var color darker 'Color: Secondary bg ' #424242
@var color light 'Color: Primary fg ' #e6e6e6
@var color lighter 'Color: Secondary fg ' #bababa
@var color accent 'Color: Accent ' #bf692b
@var color yellow 'Color: Yellow ' #f0c674
@var color orange 'Color: Orange ' #d98245
@var color red 'Color: Red ' #a54242
@var color magenta 'Color: Magenta ' #b294bb
@var color violet 'Color: Violet ' #85678f
@var color blue 'Color: Blue ' #54738c
@var color cyan 'Color: Cyan ' #5e8d87
@var color green 'Color: Green ' #7b823a
@var color white 'Color: White ' #ffffff
@var color shadow 'Color: Shadow ' #00000025
==/UserStyle== */
@-moz-document regexp('^(moz|chrome)-extension://.*$')
:root
--dark dark
--darken darken
--darker darker
--light light
--lighter lighter
--accent accent
--shadow shadow
--yellow yellow
--orange orange
--red red
--magenta magenta
--violet violet
--blue blue
--cyan cyan
--green green
--white white
--t transparent
--radius b_radius
scrollbar-color var(--darker) var(--dark)
i = !important
bg = var(--dark)
hl = var(--darken)
bd = var(--darker)
fg = var(--light)
cm = var(--lighter)
ac = var(--accent)
sh = var(--shadow)
yellow = var(--yellow)
orange = var(--orange)
red = var(--red)
magenta = var(--magenta)
violet = var(--violet)
blue = var(--blue)
cyan = var(--cyan)
green = var(--green)
white = var(--white)
t = var(--t)
r = var(--radius)
btn = calc(var(--radius) / 2)
// Colors mixin.
c(x, y = 0, z = 0, xi = 1, yi = 1, zi = 1)
if x is a 'call' or x is a 'rgba'
color: xi is 0 ? x : x i
if y is a 'call' or y is a 'rgba'
border-color: yi is 0 ? y : y i
if z is a 'call' or z is a 'rgba'
background-color: zi is 0 ? z : z i
// Border radius mixin.
radius()
border-radius arguments
body
c cm 0 bg
svg
fill cm i
a
transition 0.15s ease
c fg
&:hover
c ac
input[type="checkbox"]:not(.slider)
transition 0.15s ease
c 0 cm
&:hover
c 0 cm cm
&.checked, &:checked
c 0 cm
+ .svg-icon.checked
fill ac i
&.disabled, &:disabled
opacity 0.5
c 0 cm
+ .svg-icon.checked
opacity 0.5
fill cm i
+ span
c cm
select
radius r
transition 0.15s ease
c fg bd bg
box-shadow inset 0 2px 4px sh
+ .svg-icon
fill fg i
option
c fg 0 bg
input:not(.slider), button
border 1px solid
transition 0.15s ease
background none
radius r
c cm bd bg
box-shadow inset 0 2px 4px sh
&:focus
c fg 0 bd
/// UserCSS -> Reset header's height.
.has-warnings #header
min-height unset
max-height 40px
// Dropdowns.
.dropdown
.dropdown-content
radius r
c cm 0 bg
box-shadow 0 4px 8px 0 sh, 0 0 0 1px bd i
a:first-child
radius r r 0 0
a:last-child
radius 0 0 r r
a:hover
c fg 0 bd
.newUI
.entry
&.odd
c 0 0 hl
.style-name
&-link, &:hover .style-name-link
c fg
&:hover::before
background linear-gradient(90deg, bd -100%, t)
&.disabled h2::after
c cm 0 bd
/// UserCSS badges.
&.usercss .style-name-link::after
c 0 0 ac
#header
c cm bd bg
box-shadow 0 0 16px sh
h1, summary
c fg
@media (min-width: 850px)
border-right-style solid
@media (max-width: 850px)
border-bottom-style solid
transition 0.15s ease
max-height 40px
&:hover
max-height 300px
#stylus-popup
.entry
/// Striped colors.
&:nth-child(even)
c 0 0 t
background linear-gradient(90deg, bd -100%, t)
/// Style position.
&:nth-child(-n + 10):before, &:nth-child(11):before
c cm
&:hover
background linear-gradient(90deg, bd, t)
.style-name::before
z-index -1
transition 0.15s ease
background none
// UserCSS warnings.
.warnings
padding 0.5rem
border 1px dashed
c 0 red bg
// TODO: Custom setting.
@media (max-width: 850px)
max-height 30vh i
// UserCSS popup.
#message-box
c 0 0 t
/// Backdrop.
&::before
content ''
top 0
left 0
right 0
bottom 0
z-index -1
position absolute
c 0 0 bd
opacity 0.8
/// Wrapper element.
> div
radius r
c 0 0 t
box-shadow 0 0 0 1px bd, 0 2px 8px -1px sh
/// Header.
&-title
radius r r 0 0
padding 0.75rem 2.5rem
c 0 0 hl
box-shadow inset 0 -1px bd
/// Logo.
&::before
padding 0 1rem 1rem 0
margin-left 0.5rem
background-size cover
/// Body.
&-contents
c 0 0 bg
.config-body label
c 0 bd
&:last-child
padding-bottom 0.75em
/// On/off switches.
.onoffswitch
> span
c 0 0 bd
box-shadow inset 0 2px 4px sh
&::before
transition 0.15s ease
c 0 0 bg
box-shadow inset 0 0 8px -4px ac, 0 2px 4px -1px sh
> input:checked + span::before
c 0 0 ac
box-shadow inset 0 0 4px 2px sh
.config-color
.color-swatch
border none
radius r
box-shadow 0 0 0 1px bd
/// Whitespace around reset icon.
.config-reset-icon
padding 0.15rem 0.25rem
margin-left 0.25rem
/// Footer.
&-buttons
c cm 0 hl
radius 0 0 r r
box-shadow inset 0 1px bd
button
padding 0.4rem
radius btn
transition 0.15s ease
background-image none
c cm bd bg
&:hover
c fg 0 bd
// CodeMirror -> Wrapper.
.CodeMirror
c fg 0 bg
/// Gutters.
&-gutters
c fg bd t
/// Line numbers.
&-linenumber
opacity 0.6
c cm
/// Focused editor.
&-focused
outline ac auto 1px
/// Cursor.
&-cursor
c 0 fg
/// Highlighted selection.
&-selected
c 0 0 bd
r = 4px
/// Rounded corners.
&:nth-child(1) { radius: r r 0 0 }
&:nth-child(2) { radius: 0 0 r r }
&:nth-child(3) { radius: r 0 r 0 }
&:first-child:last-child { radius: r i }
/// Fix for selection body.
&:nth-child(1)[style *= 'left: 4px']
+ [style *= 'left: 4px'] + [style *= 'left: 4px']
radius: 0 0 r 0
/// The entire line selected.
&:nth-child(2)[style *= 'width: 0px'] + div
radius: 0 0 9px 9px i
/// Single selected line.
&:nth-child(1)[style *= 'left: 4px']
&:nth-last-child(2)[style *= 'left: 4px']
radius: r i
/// Highlighted line.
&-activeline-background
c 0 0 hl
/// Applies to.
.applies-to
c 0 bd hl
// CodeMirror -> Syntax highlighting.
.cm
&-comment
c cm
&-keyword
c red
&-variable-2, &-def
c fg
&-tag, &-builtin
c orange
&-string
c green
&-variable-3, &-type, &-property
c yellow
&-number, &-atom
c magenta
&-string, &-qualifier
c green
// Fix page colors for UserCSS source-files.
@-moz-document regexp('^file://.*\.user\.(css|styl|stylus|less)$')
:root
--dark dark
--lighter lighter
body
color var(--lighter)
background-color var(--dark)