Dark-Discord by vednoc
Imported and mirrored from https://gitlab.com/vednoc/dark-discord/raw/master/discord.user.styl
Details
Authorvednoc
LicenseMIT
Created
Updated
Categorydiscord.com
Statistics
Learn how we calculate statistics in the FAQ.
Total views796
Total installs5318
Weekly installs77
Description
Dark and light, very customizable theme for Discord.
Notes
After you install this userstyle, you can configure it from configuration menu in Stylus’ popout menu by clicking on the icon on your toolbar.
There are over 30 customizable options, including colors, so you can customize Discord in a way that it's unique to you.
History
Daily snapshots of style statistics.
Source code
/* ==UserStyle==
@name Dark-Discord
@namespace gitlab.com/vednoc/dark-discord
@description Dark and light, very customizable theme for Discord.
@author vednoc <vednoc@pm.me> (https://github.com/vednoc)
@homepageURL https://gitlab.com/vednoc/dark-discord
@supportURL https://gitlab.com/vednoc/dark-discord/issues
@updateURL https://userstyles.world/api/style/15.user.css
@version 0.63.0
@license MIT
@preprocessor stylus
@var checkbox cg_debug 'Color generator debug' 0
@var select cg_theme 'Base color-scheme toggle' {
'Custom colors *': 'custom',
'Dark blue (old) ': 'old',
'Dark gray (new) ': 'new',
}
@var color cg_bg 'Base background color' #1f232a
@var color cg_fg 'Base foreground color' #eeeeee
@var color cg_ac 'Base accent color ' #7289da
@var range _bg_a 'Adjust background color tones' [0, -25, 25, 0.1, '%']
@var range _fg_a 'Adjust foreground color tones' [0, -25, 25, 0.1, '%']
@var range _ac_a 'Adjust accent color tones ' [0, 0, 25, 1, '%']
@var range _sc_a 'Adjust syntax color tones ' [0, 0, 25, 1, '%']
@var range e_size 'Emotes: Reduce emote size' [32, 24, 64, 8, 'px']
@var checkbox e_reaction 'Emotes: Larger reaction emotes' 1
@var checkbox chat_short 'Shorter chat mode' 0
@var text chat_short_w 'Shorter chat width' 800px
@var checkbox guild_avatar 'Move user menu to guilds bar' 0
@var checkbox sb_short 'Smaller sidebar mode' 1
@var text sb_short_s 'Smaller sidebar mode size' 64px
@var text sb_short_w 'Smaller sidebar mode breakpoint' 940px
@var text sb_short_d 'Smaller sidebar mode hover delay' 1000ms
@var checkbox g_minimize 'Minimize guild area width' 1
@var text g_minimize_w 'Minimize guild area breakpoint' 700px
@var checkbox g_icons 'Small guild icons' 0
@var text g_icons_s 'Small guild icon size' 32px
@var select compact 'Compact mode' {
'Hide guilds ': 'guilds',
'Hide sidebar ': 'sidebar',
'Hide both *': 'both',
}
@var text compact_w 'Compact mode breakpoint' 540px
@var range avatar_size 'Avatar size in info menus' [80, 80, 128, 16, 'px']
@var checkbox avatar_c_m 'Enable avatar context menu in profiles' 1
@var checkbox code_lines 'Enable code line numbers' 1
@var checkbox hide_dl_btn 'Hide "Download Apps" button' 1
@var text f_ui 'UI font' ''font_name''
@var text f_code 'Monospace font' ''font_name''
@var text b_radius 'Border radius for menus' 4px
@var color _red 'Base red color ' #f07178
@var color _orange 'Base orange color ' #f78c6c
@var color _yellow 'Base yellow color ' #ffcb6b
@var color _green 'Base green color ' #aede62
@var color _cyan 'Base cyan color ' #89ddff
@var color _blue 'Base blue color ' #82aaff
@var color _magenta 'Base magenta color ' #9a91ea
@var color _violet 'Base violet color ' #c792ea
@var color _gray 'Gray color ' #bbbbbb
@var color _white 'White color ' #ffffff
@var color _sh 'Shadow color ' #00000025
==/UserStyle== */
// Class mixin.
// TODO: Add examples.
a(args, prefix = '', attr = 'class', i = '') {
lst ?= ''
dbg ?= args
len ?= length(args)
u = unquote
// Check arguments.
if args[0] == 0 {
error('Must provide valid arguments. Length of arguments is: ' + len)
}
// Process.
for v, k in args {
content: s('%s --- %s', k, v)
// Iterate over arguments.
if k {
// { '--%s' % k }: 'argument: ' + args[k]
if k == length(args) - 1 {
lst += s('[%s*=%s]', u(attr), v)
} else {
lst += s('[%s*=%s], ', u(attr), v)
}
} else {
// { '--%s' % k }: 'argument: ' + args[k]
if k == length(args) - 1 {
lst += s('[%s*=%s]', u(attr), v)
} else {
lst += s('[%s*=%s], ', u(attr), v)
}
}
}
// Combine.
list = (i != '') ? s('%s%s', u(i), u(lst)) : lst
dbg = list
// Generate.
{ list } {
{ block }
}
}
// Old class mixin.
/// Use it instead of: [class*='foo_bar']
w(prefix, args, attr = class, sel = '*=', i = ' ') {
r = unquote
list = ''
selectors = (prefix == '>' || prefix == '~' || prefix == '+')
prefix = (selectors) ? s('%s ', r(prefix)) : (prefix == '') ? '' : prefix
inline_cases = (prefix == '/' || prefix == '../' || prefix == '~/' || prefix == '')
inline = ((selectors || inline_cases) && length(args) == 1) ? '' : i
attr = (attr == 0) ? 'class' : (attr == '_') ? '' : attr
sel = (sel == 0) ? '*=' : (sel == '_') ? '' : sel
// dbg_{ attr }: s('%s ::: %s ::: %s ::: %s', prefix, attr, inline, args)
for item, index in args {
// dbg: '' + item + ' :::::: ' + index
if index {
if (inline == '0') {
list += s(' [%s%s%s]', r(attr), r(sel), item)
} else if (inline == ' ') {
list += s('%s%s[%s%s%s],', r(inline), r(prefix), r(attr), r(sel), item)
} else {
list += s('[%s%s%s]', r(attr), r(sel), item)
}
} else {
if (inline == '0') {
list += s('%s[%s%s%s]', r(prefix), r(attr), r(sel), item)
} else if (inline != '') {
list += s('%s%s[%s%s%s],', r(inline), r(prefix), r(attr), r(sel), item)
} else {
list += s('%s[%s%s%s]', r(prefix), r(attr), r(sel), item)
}
}
}
list = replace(',$', '', list)
// dbg_list: '' + list
{ list } {
{ block }
}
}
// Colors mixin.
/// All colors: `c: fg bd bg`
/// Only border-color: `c: 0 bd`
c(x, y = 0, z = 0, xi = 1, yi = 1, zi = 1) {
if x != 0 && x != '_' { color: xi is 0 ? x : x i }
if y != 0 && y != '_' { border-color: yi is 0 ? y : y i }
if z != 0 && z != '_' { background-color: zi is 0 ? z : z i }
}
// SVG colors.
v(x, y = 0, xi = 1, yi = 1) {
if x != 0 && x != '_' { fill: xi is 0 ? x : x i }
if y != 0 && y != '_' { stroke: yi is 0 ? y : y i }
}
// Pseudo-element builder.
P(a, _z = 0, _c = '', _p = absolute) {
z-index: _z
content: _c
position: _p
if a[0] is a 'call' or a[0] is a 'unit' { top: a[0] }
if a[1] is a 'call' or a[1] is a 'unit' { right: a[1] }
if a[2] is a 'call' or a[2] is a 'unit' { bottom: a[2] }
if a[3] is a 'call' or a[3] is a 'unit' { left: a[3] }
}
// Raw RGB mixin.
/// Convert RGBA (if t = 1) or HEX to raw rrr-ggg-bbb format.
to_rgb(input, t = 0) {
if (t) {
unquote(substr(join(',', slice(split(',', s('%s', input)), 0, -1)), 5))
} else {
unquote(slice(s('%s', rgba(input, 0)), 5, -3))
}
}
// Raw RGBA mixin.
/// Combine `*-rgb` vars and alpha value.
to_rgba(input, alpha) {
unquote(s('rgba(var(--%s-rgb), %s)', unquote(input), alpha))
}
// Border radius mixin.
r() { border-radius: arguments }
// Box-shadow mixin.
b() { box-shadow: arguments }
/// Remove old browser prefixes.
vendors = official
/// Feat -> Base color-scheme toggle. #32
if (cg_theme == 'custom') {
BG = cg_bg
FG = cg_fg
AC = cg_ac
} else if (cg_theme == 'old') {
BG = #1f232a
FG = #eeeeee
AC = #7289da
} else if (cg_theme == 'new') {
BG = #292929
FG = #e6e6e6
AC = #d47d3f
}
/// Helpers.
t = transparent
i = !important
BA = _bg_a
FA = _fg_a
AA = _ac_a
SA = _sc_a
//w = W // TODO: Developer only.
// Color generator.
/// NOTE: Fix the scope to avoid conflicts.
/{
g = global
/// Generator rules.
if (dark(BG)) {
a1 = (AA + 15); a2 = (AA + 30); a3 = (AA + 45); a4 = (AA + 65); a5 = (AA + 75)
s1 = (SA + 15); s2 = (SA + 30); s3 = (SA + 45); s4 = (SA + 65); s5 = (SA + 75)
b1 = (BA + 10); b2 = (BA - 05); b3 = (BA - 10); b4 = (BA - 15); b5 = (BA - 20)
f1 = (FA - 10); f2 = (FA + 10); f3 = (FA + 20); f4 = (FA + 30); f5 = (FA + 40)
} else {
a1 = (AA + 15); a2 = (AA + 30); a3 = (AA + 45); a4 = (AA + 65); a5 = (AA + 75)
s1 = (SA + 15); s2 = (SA + 30); s3 = (SA + 45); s4 = (SA + 65); s5 = (SA + 75)
b1 = (BA - 10); b2 = (BA + 08); b3 = (BA + 16); b4 = (BA + 24); b5 = (BA + 32)
f1 = (FA - 05); f2 = (FA - 10); f3 = (FA - 15); f4 = (FA - 20); f5 = (FA - 30)
}
/// Generate tones for base colors.
C = {
bg: {
'0': darken(BG, b1)
'1': darken(BG, 0%)
'2': darken(BG, b2)
'3': darken(BG, b3)
'4': darken(BG, b4)
'5': darken(BG, b5)
},
fg: {
'0': darken(FG, f1)
'1': darken(FG, 0%)
'2': darken(FG, f2)
'3': darken(FG, f3)
'4': darken(FG, f4)
'5': darken(FG, f5)
},
ac: {
'0': mix(darken(BG, 0%), AC, 0%)
'1': mix(darken(BG, 40%), AC, a1)
'2': mix(darken(BG, 40%), AC, a2)
'3': mix(darken(BG, 40%), AC, a3)
'4': mix(darken(BG, 65%), AC, a4)
'5': mix(darken(BG, 50%), AC, a5)
},
b1: {
'0': spin(_red, 0deg - 0%)
'1': spin(_red, 15deg - s1)
'2': spin(_red, 30deg - s2)
'3': mix(darken(BG, 20%), _red, s3)
'4': mix(darken(BG, 40%), _red, s4)
'5': mix(darken(BG, 40%), _red, s5)
},
b2: {
'0': spin(_orange, 0deg - 0%)
'1': spin(_orange, 15deg - s1)
'2': spin(_orange, 30deg - s2)
'3': mix(darken(BG, 20%), _orange, s3)
'4': mix(darken(BG, 40%), _orange, s4)
'5': mix(darken(BG, 40%), _orange, s5)
},
b3: {
'0': spin(_yellow, 0deg - 0%)
'1': spin(_yellow, 15deg - s1)
'2': spin(_yellow, 30deg - s2)
'3': mix(darken(BG, 20%), _yellow, s3)
'4': mix(darken(BG, 40%), _yellow, s4)
'5': mix(darken(BG, 40%), _yellow, s5)
},
b4: {
'0': spin(_green, 0deg - 0%)
'1': spin(_green, 15deg - s1)
'2': spin(_green, 30deg - s2)
'3': mix(darken(BG, 20%), _green, s3)
'4': mix(darken(BG, 40%), _green, s4)
'5': mix(darken(BG, 40%), _green, s5)
},
b5: {
'0': spin(_cyan, 0deg - 0%)
'1': spin(_cyan, 15deg - s1)
'2': spin(_cyan, 30deg - s2)
'3': mix(darken(BG, 20%), _cyan, s3)
'4': mix(darken(BG, 40%), _cyan, s4)
'5': mix(darken(BG, 40%), _cyan, s5)
},
b6: {
'0': spin(_blue, 0deg - 0%)
'1': spin(_blue, 15deg - s1)
'2': spin(_blue, 30deg - s2)
'3': mix(darken(BG, 20%), _blue, s3)
'4': mix(darken(BG, 40%), _blue, s4)
'5': mix(darken(BG, 40%), _blue, s5)
},
b7: {
'0': spin(_magenta, 0deg - 0%)
'1': spin(_magenta, 15deg - s1)
'2': spin(_magenta, 30deg - s2)
'3': mix(darken(BG, 20%), _magenta, s3)
'4': mix(darken(BG, 40%), _magenta, s4)
'5': mix(darken(BG, 40%), _magenta, s5)
},
b8: {
'0': spin(_violet, 0deg - 0%)
'1': spin(_violet, 15deg - s1)
'2': spin(_violet, 30deg - s2)
'3': mix(darken(BG, 20%), _violet, s3)
'4': mix(darken(BG, 40%), _violet, s4)
'5': mix(darken(BG, 40%), _violet, s5)
}
}
/// Generate Stylus-lang variables.
define('bg-' + key, val, g) for key, val in C.bg
define('fg-' + key, val, g) for key, val in C.fg
define('ac-' + key, val, g) for key, val in C.ac
define('b1-' + key, val, g) for key, val in C.b1
define('b2-' + key, val, g) for key, val in C.b2
define('b3-' + key, val, g) for key, val in C.b3
define('b4-' + key, val, g) for key, val in C.b4
define('b5-' + key, val, g) for key, val in C.b5
define('b6-' + key, val, g) for key, val in C.b6
define('b7-' + key, val, g) for key, val in C.b7
define('b8-' + key, val, g) for key, val in C.b8
/// Generate Stylus-lang helpers for CSS variables.
define('bg' + key, s('var(--bg-%s)', unquote(key)), g) for key, val in C.bg
define('fg' + key, s('var(--fg-%s)', unquote(key)), g) for key, val in C.fg
define('ac' + key, s('var(--ac-%s)', unquote(key)), g) for key, val in C.ac
define('b1' + key, s('var(--b1-%s)', unquote(key)), g) for key, val in C.b1
define('b2' + key, s('var(--b2-%s)', unquote(key)), g) for key, val in C.b2
define('b3' + key, s('var(--b3-%s)', unquote(key)), g) for key, val in C.b3
define('b4' + key, s('var(--b4-%s)', unquote(key)), g) for key, val in C.b4
define('b5' + key, s('var(--b5-%s)', unquote(key)), g) for key, val in C.b5
define('b6' + key, s('var(--b6-%s)', unquote(key)), g) for key, val in C.b6
define('b7' + key, s('var(--b7-%s)', unquote(key)), g) for key, val in C.b7
define('b8' + key, s('var(--b8-%s)', unquote(key)), g) for key, val in C.b8
}
@-moz-document regexp('https?://discord(app)?.com/(app|channels|discovery|library|store|gui.*|log.*)(/.*)?') {
/// Show debug.
if (cg_debug) {
:root {
content: 'a mixin'
+a('x', i: '/') {
--divider: _;
--debug: dbg
--len: len
}
+a(x y z) {
--divider: _;
--debug: dbg
--len: len
}
+a(1 2 3) {
--divider: _;
--debug: dbg
--len: len
}
}
:root {
&::before {
content: \
' ⭐ BG: ' + luminosity(BG) + \
' ⭐ FG: ' + luminosity(FG) + \
' 🌟 bg1: ' + bg-1 + \
' 🌟 fg1: ' + fg-1 + \
' 🌟 ac1: ' + ac-1 i
P(0 0 0 0)
text-align: center
line-height: 2em
height: 2em
c: fg1 0 bg3
}
body > div[id] {
margin-top: calc(2em + 0px)
max-height: calc(100vh - 2em)
b: 0 -1px bg5
}
}
}
// Use stylus-lang variables with CSS variables.
shadow = var(--shadow)
sh = var(--shadow)
bsh = var(--bshadow)
white = var(--white)
outer = 0 0 0 1px bg5
inner = inset outer
rc = var(--radius)
:root, .theme-dark {
/// Userstyle info.
--note: 'Dark-Discord v0.63.0'
/// Native variables.
--header-primary: fg1 //#ffffff
--header-secondary: fg4 //#b9bbbe
--text-normal: fg1 //#dcddde
--text-muted: fg5 //#72767d
--text-link: ac0 //#00b0f4
--channels-default: fg4 //#8e9297
--interactive-normal: fg2 //#b9bbbe
--interactive-hover: fg1 //#dcddde
--interactive-active: fg0 //#ffffff
--interactive-muted: fg5 //#4f545c
--background-primary: bg1 //#36393f
--background-secondary: bg2 //#2f3136
--background-secondary-alt: bg3 //#292b2f
--background-tertiary: bg4 //#202225
--background-accent: bg5 //#4f545c
--background-mobile-primary: bg1 //#36393f
--background-mobile-secondary: bg2 //#2f3136
--background-floating: bg0 //#18191c
--background-modifier-hover: bg3 //rgba(79,84,92,0.16)
--background-modifier-active: bg4 //rgba(79,84,92,0.24)
--background-modifier-selected: bg5 //rgba(79,84,92,0.32)
--background-modifier-accent: bg3 //hsla(0,0%,100%,0.06)
--background-mentioned: mix(ac-5, bg-1, 40) //rgba(250,166,26,0.05)
--background-mentioned-hover: mix(ac-4, bg-1) //rgba(250,166,26,0.08)
--background-message-hover: bg0 //rgba(4,4,5,0.07)
/// Scrollbars.
--scrollbar-thin-thumb: bg5 //#202225
--scrollbar-thin-track: transparent
--scrollbar-auto-thumb: bg5 //#202225
--scrollbar-auto-track: bg1 //#2e3338
--scrollbar-auto-scrollbar-color-thumb: bg5 //#202225
--scrollbar-auto-scrollbar-color-track: bg1 //#2f3136
/// Shadows.
--elevation-stroke: inner //0 0 0 1px rgba(4,4,5,0.15)
--elevation-low: 0 1px bg5 // ...0 2px 0 rgba(4,4,5,0.05)
// --elevation-medium: 0 4px 4px rgba(0,0,0,0.16)
--elevation-high: 0 8px 16px 2px sh //0 8px 16px rgba(0,0,0,0.24)
/// Various backgrounds.
--radio-group-dot-foreground: ac1 //#8ea1e1
--channeltextarea-background: bg3 //#40444b
--activity-card-background: bg0 //#202225
--textbox-markdown-syntax: fg4 //#8e9297
--deprecated-card-bg: bg3 //#20222599
--deprecated-card-editable-bg: bg2 //#2022254d
--deprecated-store-bg: bg1 //#36393f
/// Settings -> My account -> Edit settings.
--deprecated-text-input-bg: bg3 //#0000001a
--deprecated-text-input-border: bg4 //#0000004d
--deprecated-text-input-border-hover: bg5 //#040405
--deprecated-text-input-border-disabled: bg0 //#202225
--deprecated-text-input-prefix: ac1 //#dcddde
/// Modals -> Quickswitcher -> Fix input colors.
--deprecated-quickswitcher-input-background: bg4 //#72767d
--deprecated-quickswitcher-input-placeholder: fg2 //#ffffff4d
/// Reduce emoji size.
--e-size: e_size
/// Generate color variables.
for _v in (bg fg ac b1 b2 b3 b4 b5 b6 b7 b8) {
for _i in 0..5 {
key = s('--%s-%s', _v, _i)
/// Escape `\` for `*-0` vars.
val = _v + \- + _i
/// Generate CSS variables.
{ key }: val i
{ key + '-rgb' }: to_rgb(val)
}
}
/// Various theme variables.
--shadow : _sh
--bshadow : 0 8px 16px var(--shadow)
--white : _white
--t : transparent i
--radius : b_radius
--f-mono : f_code, Consolas, Liberation Mono, Menlo, Courier, monospace
--f-ui : f_ui, Whitney, Helvetica Neue, Helvetica, Arial, sans-serif
--avatar-s: avatar_size
}
// Base styles.
body {
c: 0 0 bg0
/// Global -> Browser defaults.
::selection { c: bg5 0 fg1 }
::-moz-selection { c: bg5 0 fg1 }
/// Global -> Text placeholders.
+w('', 'emptyPlaceholder') {
&, ../ ::placeholder { c: fg2 }
}
/// Chat -> Placeholders in member list.
+w('', 'GroupsPlaceholder' 'placeholderAvatar-' 'placeholderUsername-') {
--background-primary: bg3
}
/// Feat -> Custom UI font.
&, button, input, select, textarea, ::placeholder {
font-family: var(--f-ui) i
}
/// Shortcuts.
+w('', 'keybindShortcut') {
span {
c: fg1 bg4 bg2
b: inset 0 -4px 0 bg5 i
svg g { v: fg4 }
}
}
/// App -> Core.
+w('', 'appMount-') {
c: 0 0 t
/// Skeleton/Crashed page.
+w('>', 'errorPage-') { c: 0 0 bg1 }
/// 'No channel' page.
+w('', 'noChannel-') {
c: 0 0 bg1
h4 { c: fg1 }
h4 + div { c: fg4 }
}
/// Notice alert.
+w('', 'notice-') {
r: 0px
+w('&', 'Brand-') { c: 0 0 ac3 }
+w('&', 'Default-') { c: 0 0 b33 }
+w('&', 'height36-') { c: 0 0 bg3 }
+w('&', 'Neutral-') {
c: fg1 0 bg4
+w('', 'button-') {
c: fg1 bg5 bg4
&:hover { c: 0 0 bg5 }
}
}
}
}
/// Status colors.
svg {
rect[fill^='hsl(38'] { v: b20 }
rect[fill^='hsl(139'] { v: b40 }
rect[fill^='hsl(214'] { v: fg5 }
rect[fill^='hsl(359'] { v: b10 }
/// User status menu.
[mask*='status-offline'] > div { c: 0 0 fg5 }
[mask*='status-online'] > div { c: 0 0 b40 }
[mask*='status-idle'] > div { c: 0 0 b20 }
[mask*='status-dnd'] > div { c: 0 0 b10 }
}
/// Badges.
+w('', 'numberBadge-') {
/// Global -> 'NEW' alerts.
/.badge-_BgAUQ,
/// Inbox -> Unreads.
/.wrapper-232cHJ,
/// Unread messages.
&[style *= 'nd-color: rgb(240\, 71\, 71)'],
&[style *= 'nd-color: rgb(237\, 66\, 69)'],
/// Quickswitcher -> Unread messages.
/[class *= 'quickswitcher-'] [class *= 'badge'],
/// Guilds -> New messages.
/[class *= 'mention-'][class *= 'bar'],
/// Guilds -> Settings -> New settings.
/[class *= 'gearWithBadge-'] > div:last-child,
/// Chat -> Pinned messages.
/[class *= 'iconBadge-'] {
c: white 0 ac0
}
}
/// Buttons.
[role = 'button'] {
&[style *= 'b(67\, 181\, 129'] { c: white 0 b42 }
}
/// Feat -> Line numbers for code blocks.
if (code_lines) {
pre code {
c: fg1
position: relative
padding-left: 3em i
/// -> Generate a range of numbers.
n = ''
for num in 1..128 {
n += s('%s ', num)
if (num == 128) {
n += s('%s', num)
}
}
/// -> Use a psuedo-element as line numbers.
&::before {
width: 2ch
overflow-y: hidden
P(0.5em 0 0.5em 0px, 0, n)
padding: 0 0.5em 0 1.5em
white-space: pre-line
text-align: right
c: fg5
}
}
}
/// Global -> Tooltips.
+a(tooltipBlack-, i: '/') {
border: 1px solid bg5
c: fg1 0 bg3
b: 0 4px 8px shadow i
+w('', 'Pointer-') { border-top-color: bg5 i }
}
/// Fix 'Server Boosting' and similar tooltips.
+a(subscribeTooltipWrapper-, i: '/') {
c: 0 0 ac3
&::after { border-bottom-color: ac3 i }
}
/// Guilds -> Voice -> Activity popout.
+w('', 'container-3JTnYm') {
border: 1px solid bg5 i
r: rc
}
/// Chat -> Inline mentions.
+w('', 'mention interactive', i: '') {
transition: 0.2s ease-in-out
/// Hover/active states.
&:hover, &.popout-open { c: white 0 ac1 }
+w('/', 'mentioned-' 'mention', i: 0) { &:not(#z) { c: ac0 0 t }}
/// Search -> Highlighted matches.
/.highlight { c: 0 0 ac4 }
}
/// Global -> Bot tags.
+a(botTagInvert-, i: '/') { c: white 0 ac0 }
/// Global -> Context menus.
+w('', 'contextMenu-') {
border: 1px solid bg5 i
}
/// Global -> Login page.
+w('', 'authBox-') {
border: 1px solid bg5 i
b: var(--elevation-high) i
r: rc i
c: fg5
}
}
// Global -> Switches/Checkboxes.
+w('', 'switch-') {
&:not([class*='themeClear-']) {
c: 0 0 bg4
&::after { c: 0 0 fg1 }
/// Enabled.
+w('&', 'Checked-') {
c: 0 0 ac1
&::after { c: 0 0 white }
}
}
+a(checkbox-, i: '/') {
/// Squared.
+w('&', 'box-') {
c: 0 bg5
/// 'Mark as spoiler' checkbox.
&[style*='r-color: rgb(114\, 137\, 218)'] {
c: 0 ac1
svg path { v: ac1 }
}
/// In bars or standalone.
&[style*='d-color: rgb(114\, 137\, 218)'] {
c: white ac1 ac1
svg path { v: white }
}
}
/// Rounded.
+w('&', 'round-') {
&[style *= '67\, 181\, 129'] { c: 0 b41 b41 }
}
}
}
// Global -> Sliders.
+w('', 'control-') {
[style*="d-color: rgb(67\, 181\, 129"] { c: 0 0 b43 }
[style*="d-color: rgb(114\, 118\, 125"] { c: 0 0 bg5 }
rect[fill='white'] { v: bg0 }
+w('', 'slider-') {}
}
// Global -> Dropdown menus.
+w('', 'select-') {
+w('', '-control') {
c: red bg4 bg2
&:hover, &:focus-within { c: 0 bg5 }
}
+w('', '-menu') {
c: red bg5 bg2
+w('', '-option') { &:hover { c: 0 0 bg3 }}
.css-1ba14n5-option { c: 0 0 bg4 }
}
}
// Guilds.
+w('', 'wrapper-' 'guilds-', i: '') {
/// Use theme colors.
+w('', 'scroller-') {
c: 0 0 bg3
b: inset -1px 0 bg5 i
/// Feat -> Hide 'Download Apps' button.
if hide_dl_btn {
+w('>', 'listItem-') {
&:nth-last-child(-1n+3) { display: none i }
}
}
}
/// Home item.
+w('', 'listItem-' 'wrapper') {
+w('', 'childWrapper-') { c: fg3 }
+w('&', 'selected-') {
+w('', 'childWrapper-') { c: white 0 ac2 }
}
}
/// Feat -> Minimize guild area width.
if (g_minimize) {
@media screen and (max-width: g_minimize_w) {
transition: 0.3s cubic-bezier(0, 0, 0.2, 1)
max-width: 10px
/// Expand hover region.
overflow: unset i
> * { z-index: 9 i }
&::after {
P(0 -15px 0 0, 8)
// opacity: 0.5
// c: 0 0 ac1
}
/// Expand guilds area on hover.
&:hover {
max-width: (g_icons_s + 20px)
transition-delay: 0.6s
}
}
}
/// Feat -> Smaller guild icons.
if (g_icons) {
$size = g_icons_s
width: ($size + 20px)
/// Mentions bar.
+w('', 'nreadMentions' 'bar', i: '') { width: $size }
/// Dividers.
+w('', 'Separator-') {
width: $size
c: 0 0 bg5
}
/// DM icons.
div[style*='height: 56px'] {
margin-bottom: 8px
height: $size i
}
/// Icons.
+w('', 'listItem-') {
padding-left: 10px
justify-content: flex-start
/// Unread indicators.
+w('>', 'pill-') {
height: $size
/// Guild placeholder icon.
+ div > [draggable = 'false'] svg {
width: $size i
height: $size i
div { c: 0 0 bg5 }
}
}
/// 1: Home icon.
/// 2: Guild icons.
+w('', 'listItemWrapper-' 'blobContainer-') {
+w('>', 'wrapper-') { width: $size; height: $size }
+w('', 'svg-') { width: $size; height: $size }
+w('', 'Badge-') {
r: 50% i
b: 0 0 0 3px bg3
}
}
/// Folder icons.
> [draggable] {
--background-primary: bg5 // Folder placeholders.
+w('>', 'wrapper-') { &, ../ { width: $size; height: $size i }}
svg { width: $size; height: $size }
+w('', 'Badge-') {
r: 50% i
b: 0 0 0 3px bg3
}
}
/// Expanded folders.
+a(expandedFolderBackground-, i: '/') {
width: $size
left: 10px i
r: 16px i
/// Add borders to expanded folders.
&:not([class*='collapsed']) { b: 0 0 0 2px bg4 }
/// Reset list height.
~ [style*='height'] {
height: unset i
padding-bottom: 1px
}
}
}
}
/// Feat -> Compact mode.
if (compact == 'guilds' || compact == 'both') {
@media screen and (max-width: compact_w) {
display: none i
+w('+', 'base-') { left: 0px i }
}
}
}
// Sidebar.
/// NOTE: Excludes user settings.
:not([class*='Region']) {
+w('>', 'sidebar-') {
border-right: 1px solid bg5 i
/// User status menu.
+w('', 'panels-') {
border-top: 1px solid bg5 i
/// Popouts -> Status menu.
+a(menu-, i: '/') { border: 1px solid bg5 i }
}
/// Main/friends area.
+w('+', 'container-') {
c: 0 0 bg1
/// Header.
+w('>', 'container-') {
c: 0 0 bg2
b: 0 1px bg5
}
/// 'Now playing' sidebar.
+w('', 'nowPlaying') { b: inset 1px 0 bg5 i }
}
/// Guild notifications.
+w('', 'bar-') {
c: fg1 0 bg3
b: inner, bsh i
+w('&', 'mention-') {
c: white 0 ac1
b: bsh i
}
}
/// Feat -> Small sidebar mode.
if (sb_short) {
@media screen and (max-width: sb_short_w) {
transition: 0.3s cubic-bezier(0, 0, 0.2, 1)
max-width: sb_short_s
/// Center user icon.
+w('', 'panels-' 'container-', i: 0) {
padding: 0 16px i
}
/// Expand on hover.
&:hover {
max-width: 240px
transition-delay: sb_short_d i
}
/// Remove extra stuff for channels.
+w('', 'wrapper-' 'content-') {
margin: 0
r: 0px
+w('', 'icon-' 'iconItem-') { display: none i }
}
/// Reset whitespace for category name.
+w('', 'containerDefault-' 'clickable-', i: 0) {
padding-left: 8px i
h2 { c: fg2 }
}
/// More compact bars.
+w('', 'unread-' 'bar-', i: '') {
margin: -8px -9px 0
padding: 8px
r: 0px
span { font-size: 10px i }
}
}
}
/// Feat -> Compact mode.
if (compact == 'sidebar' || compact == 'both') {
@media screen and (max-width: compact_w) {
display: none i
}
}
/// App -> Server discovery.
+w('+', 'pageWrapper-') {
c: 0 0 bg1
}
}
}
// Settings.
+w('', 'SidebarView-') {
+w('', 'sidebarRegion-') {
/// -> Add userstyle version.
nav > div:first-child::before {
padding: 16px 0
margin-bottom: 16px
content: '🌚 ' var(--note)
text-transform: initial
font-weight: 500
font-size: 16px
display: block
b: 0 1px bg5
c: fg1
}
}
/// 'ESC' button.
+w('', 'closeButton-') {
c: 0 bg5
&:hover { c: 0 0 bg3 }
svg path { v: fg2 }
+w('+', 'keybind-') { c: fg2 }
}
/// My account.
+w('', 'viewBody-') { c: fg1 }
/// Remove bordes from 'my account' menu.
+w('', 'menu-') { border: none i }
/// -> Add border to content area.
+w('', 'contentRegion-') {
border-left: 1px solid bg5 i
}
/// 'Subscriptions' colors.
[style^='color: rgb(114\, 137\, 218);'] {
c: ac1
&:hover { c: 0 0 ac4 }
../ [style*='-color: rgb(114\, 137\, 218)'] {
c: white ac1 ac1
}
}
/// 'Log Out' colors.
[style^='color: rgb(240\, 71\, 71);'] {
c: b10
&:hover { c: 0 0 b15 }
}
}
// Startup.
+w('', 'ready-') {
+w('+', 'text-') {
/// Tip color.
+w('', 'tipTitle-') { c: ac1 }
/// Add theme version to loading screen.
+w('>', 'contentBase-') {
padding-top: 2rem i
font-style: italic i
c: fg3
/// Theme version.
&:before {
content: var(--note) i
text-transform: initial
}
}
}
}
// Friends -> Active now.
+w('', 'nowPlaying' 'outer-', i: 0) {
/// Hover state.
&:hover {
c: 0 bg4 bg3
+w('', 'inset-') { > section { c: 0 0 bg2 }}
}
/// Active state.
+w('&', ' active-') {
c: 0 bg5 bg4
+w('', 'inset-') { > section { c: 0 0 bg3 }}
}
}
// Modals.
+w('', 'modal-') {
/// Backdrop.
+a(backdrop, i: '/') {
c: 0 0 bg1
opacity: 0.8 i
}
/// Global -> User info.
+w('>', 'inner-' 'root-', i: 0) {
border: 1px solid bg5
r: rc
b: var(--elevation-high) i
/// Header.
+w('>', 'topSection') {
z-index: 1 i
position: relative
border-bottom: 1px solid bg5 i
c: 0 0 bg3
/// Account info.
+w('', 'username-') { c: fg1 }
+w('', 'discriminator-') { c: fg2 }
/// Status colors.
+w('>', 'headerFill-') { c: 0 0 bg4 }
/// Activities.
+w('', 'activity-') {
> * { c: fg0 }
+w('', 'Normal-' 'Name-' 'details-', 0) { c: fg0 } /// TODO: Fix this.
+w('', 'content-') { c: fg2 }
}
}
/// Buttons.
+w('', 'button') {
transition: 0.2s ease
&:not([class*='ActionsProfile-']) { c: white ac1 ac1 }
&:hover { opacity: 0.8 i }
> div { c: white }
}
/// Slider bar.
+w('', 'timeBar') {
+w('', 'bar-') { c: 0 0 fg5 }
+w('', 'barInner-', i: 0) { c: 0 0 fg0 }
}
+w('', 'bar-') { + div > div[style] { c: fg0 }}
/// States.
+w('>', 'Xbox') {
c: 0 0 b75
+w('', 'headerFill-') { c: 0 0 b74 }
+w('', 'colorBrand-') { c: 0 0 b70 }
}
+w('>', 'Playing') {
c: 0 0 b55
+w('', 'headerFill-') { c: 0 0 b54 }
+w('', 'colorBrand-') { c: 0 0 b50 }
}
+w('>', 'Spotify') {
c: 0 0 b45
+w('', 'headerFill-') { c: 0 0 b44 }
+w('', 'colorGreen-') { c: 0 0 b41 }
}
+w('>', 'Streaming') {
c: 0 0 b65
+w('', 'headerFill-') { c: 0 0 b64 }
+w('', 'colorBrand-') { c: 0 0 b60 }
}
/// Tabs.
+w('', 'tabBarContainer-') {
c: 0 bg5 bg2
[style*=': rgb(255'] { c: 0 ac1 }
[style*='255\, 0.1'] { c: 0 bg5 }
[style*='255\, 0.4'] { c: fg4 }
/// Items.
+w('', 'item-') {
c: fg4
&:hover { c: 0 bg4 }
+w('&', 'selected-') { c: fg1 ac1 }
&[style*='-color: rgb(255'] { c: fg1 ac1 }
}
}
}
/// Global -> Upload.
+a(uploadModal-, i: '/') {
border: 1px solid bg5 i
b: var(--elevation-high) i
c: 0 0 bg1
r: rc
/// -> Preview.
+w('', 'icon-') {
+w('&', 'image-') {
c: 0 0 bg3
b: inner, bsh i
}
+w('&', 'unknown-' 'code-' 'video-' 'document-') {
filter: invert(0.8) hue-rotate(180deg)
}
}
/// -> Textarea.
+w('', 'textAreaUpload-' 'scrollableContainer-', 0) {
border: 1px solid bg5 i
r: rc
}
/// -> Footer.
+w('', 'footer-') {
border-top: 1px solid bg5 i
c: 0 0 bg2
b: none i
r: 0px 0px rc rc
}
}
/// Global -> Quickswitcher.
+a(quickswitcher-, i: '/') {
&:not([class*='channel']) {
border: 1px solid bg5
b: var(--elevation-high) i
r: rc
}
/// -> Protip.
+w('', 'protip-') {
> h3 { c: b40 }
> div {
transition: opacity 0.2s ease i
../:hover > div { opacity: 1 i }
}
}
}
/// Global -> Keyboard combos.
+a(keyboardShortcutsModal, i: '/') {
border: 1px solid bg5 i
c: 0 0 bg1
r: rc
h1 {
c: fg1 0 bg3
margin-bottom: 0
+ div { c: fg3 bg5 bg3 }
}
+w('', 'Description') { c: fg3 }
+w('', 'ddrArrows-') { filter: invert(0.8) hue-rotate(180deg) }
}
/// Guilds -> Folder settings / Channel info / Gift a Nitro.
+a(root-1gCeng, i: '/') {
--background-floating: bg1
border: 1px solid bg5 i
b: var(--elevation-high) i
c: 0 0 bg1
/// 'Delete message'.
+w('', 'colorStandard-') {
+w('+', 'message-') {
c: 0 0 bg2
b: inner
r: rc
/// Fix mentions.
.mention { c: ac0 0 bg3 }
}
}
/// Footer.
+w('', 'footer-') {
b: inset 0 1px 0 bg5
c: 0 0 bg2
}
}
/// Inbox -> Fix borders.
+a(recentMentionsPopout-, i: '/') {
border: 1px solid bg5 i
b: var(--elevation-high) i
/// Header.
+w('>', 'header-') {
c: 0 0 bg3
b: inset 0 -1px bg5 i
}
}
/// Change avatar -> Zoom in/out slider.
+a(slider-, i: '/') {
+w('', 'bar-') { c: 0 0 bg4 }
+w('', 'Fill-') { c: 0 0 ac1 }
+w('', 'grabber-') { c: 0 fg1 fg1 }
+w('', 'markDash-') { c: 0 0 bg4 }
+w('', 'markValue-') { c: fg3 }
+w('', 'defaultValue-' 'Value-') { c: ac1 }
}
}
// Buttons.
+w('', 'button-') {
+w('&', 'lookLink-') {
c: fg3
transition: 0.2s ease
&:hover {
c: fg0
--g: 0deg, t, t 1px, currentColor 0, currentColor 2px, t 0
+w('>', 'contents-') { background: linear-gradient(var(--g)) i }
}
+w('&', 'colorBrand-') { c: ac1 }
}
+w('&', 'lookFilled-') {
transition: 0.2s ease
&:hover { opacity: 0.8 }
+w('&', 'colorRed-') { c: white 0 b13 }
+w('&', 'colorBrand-') { c: white 0 ac2 }
+w('&', 'colorGreen-') { c: white 0 b43 }
+w('&', 'colorPrimary-') { c: fg1 0 bg4 }
+w('&', 'colorGrey-') { c: fg1 0 bg4 }
+w('', 'contents-') { text-shadow: 1px 1px 0 #0005 }
}
+w('&', 'lookOutlined-') {
+w('&', 'colorRed-') { c: b10 b13 }
+w('&', 'colorGreen-') { c: b40 b43 }
+w('&', 'colorBrand-') { c: ac1 ac1 }
+w('&', 'colorWhite-') { c: fg1 fg1 }
}
+w('&', 'lookBlank-') {
/// Chat -> Emoji picker tab.
+w('&', 'colorBrand-') { c: fg5 }
+w('&', 'colorBrand-' 'Active-', i: '') { c: fg1 0 bg1 }
}
/// Inlined.
+a(item-, i: '/') {
&[style*='d-color: rgb(67\, 181\, 129'] { c: white 0 ac3 }
&[style*='d-color: rgba(67\, 181\, 129\, 0.2'] { c: ac1 0 ac4 }
}
}
// Popouts -> User popout.
+w('', 'userPopout-') {
--background-floating: bg1
border: 1px solid bg5 i
b: var(--elevation-high) i
c: 0 0 bg1
/// Header.
+w('>', 'header') {
/// Username.
+w('', 'headerTag') {
c: fg3
+w('', 'username-') { c: fg0 }
}
/// Status.
+w('', 'customStatus-') { c: fg0 }
/// Activities.
+w('', 'activity-') {
> * { c: fg0 }
+w('', 'Normal-' 'Name-' 'details-') { c: fg0 }
+w('', 'content-') { c: fg2 }
}
/// Slider bar.
+w('', 'timeBar') {
+w('', 'bar-') { c: 0 0 fg5 }
+w('', 'barInner-', i: 0) { c: 0 0 fg0 }
}
+w('', 'bar-') { + div > div[style] { c: fg0 }}
/// Status colors.
+w('&', 'Xbox') {
c: 0 0 b75
+w('>', 'activity-') { c: 0 0 b74 }
}
+w('&', 'Playing') {
c: 0 0 b55
+w('>', 'activity-') { c: 0 0 b54 }
}
+w('&', 'Spotify') {
c: 0 0 b45
+w('>', 'activity-') { c: 0 0 b44 }
}
+w('&', 'Streaming') {
c: 0 0 b65
+w('>', 'activity-') { c: 0 0 b64 }
}
}
/// Body.
+w('', 'body-') {
c: fg1 0 t
+w('', 'bodyTitle-') { c: fg3 }
}
/// Footer.
+w('', 'footer-') {
c: 0 bg5 t
input { c: fg1 bg5 bg2 }
+w('', 'protip-') {
c: fg
[style] { c: b40 }
}
}
}
// Popouts -> Search menu.
#search-results {
/// Exclude results.
&:not([role='list']) {
c: 0 0 bg0
b: inner, bsh i
}
/// Header.
+w('>', 'queryContainer-') {
c: fg1 bg2 t
strong { c: ac }
}
/// Items.
+w('', 'header-' 'answer-') { c: fg4 }
+w('', 'anchor-' 'displayUsername-') { c: fg5 }
+w('', 'filter-' 'nonText-' 'displayedNick-') { c: fg1 }
+w('', 'anchorUnderline') { c: ac0 }
+w('', 'option-') { c: fg3 }
+w('', 'selected-') { c: 0 0 bg3 }
+w('', 'option-') { &::after { background: none i }}
/// Search field.
+a(searchFilter-, i: '/') { c: fg0 0 bg1 }
+a(searchAnswer-, i: '/') { c: fg0 0 bg1 }
/// Results.
+w('', 'channelSeparator-') { c: 0 0 bg2 }
+w('', 'embedAuthorName-') { c: fg1 }
+w('', 'embedTitle-') { c: ac1 }
code.inline { c: fg1 }
/// Fix width for videos. @upstream
@supports(scrollbar-width: thin) {
+w('', 'cozy-') {
margin-left: 0px
padding-left: 16px
/// Reduce size of avatars.
+w('', 'avatar-') {
top: 2px
left: 0px
width: 16px
height: @width
position: relative
+ h2 { margin: -20px 0 4px 24px }
}
/// Reset the embed.
+w('>', 'container-') {
+w('', 'embedFull-') {
width: 100% i
max-width: 100% i
> div > div[style] { width: 100% i }
}
}
}
}
}
// Popouts -> Attach menu.
+w('', 'attachPopout-') {
border: 1px solid bg5
/// Spotify invite.
+a(modal-yWgWj-, i: '/') {
border: 1px solid bg5 i
c: 0 0 bg1
b: var(--elevation-high) i
/// Footer.
+w('', 'footer-') {
border-top: 1px solid bg5
c: 0 0 bg2
}
/// Invite.
+w('', 'header-') { c: fg4 }
+w('', 'subHeader-') { c: fg5 }
+w('', 'name-' 'textLink-' 'Status-') { c: fg1 }
+w('', 'preview-') { c: 0 bg5 bg3 }
}
}
// Chat -> Base.
+w('', 'chat-') {
/// -> Header.
+w('>', 'title-') {
c: 0 0 bg2
/// -> Gradient.
+a(children-, i: '/') {
&::after { background: linear-gradient(90deg, t 0, bg2) i }
}
}
/// -> Chat area.
+w('', 'content-') {
c: 0 0 t
--background-message-hover: to_rgba('bg-3', 0.3)
/// -> 'New messagges' bar.
+w('', 'isUnread-' 'divider-', i: '') {
c: 0 ac1
svg path { v: ac1 ac1 }
+w('', 'content-') { c: ac1 }
+w('', 'unreadPill-') { c: white 0 ac1 }
}
/// -> Dividers.
+w('', 'divider-' 'content-', i: 0) {
c: 0 0 var(--background-primary)
}
/// -> 'Has more' bar.
+w('', 'hasMore-') {
c: ac1 bg5 bg2
transition: 0.2s ease
&:hover { opacity: 0.6 }
}
/// -> Welcome -> Border color.
+w('', 'base-19D3Qq') { c: 0 bg5 }
/// -> Guild invites.
+w('', 'userSelectNone-') {
+w('&', 'cursorDefault-') {
margin-top: 1rem
r: rc
c: 0 0 bg2
b: inner
}
}
/// -> Embedded links/media.
+w('', 'embedWrapper-') {
&:not([class*='imageZoom-']) {
r: rc
/// Exclude embeds with custom border colors.
&:not([style*='border-color']) { c: 0 bg5 }
/// Remove double borders from some elements.
&:not([class*='Audio']) { b: inner }
}
}
/// -> Mentioned.
+w('', 'mentioned-') {
r: (chat_short) ? 4px i : 0px i
--text-muted: var(--fg-3)
/// Bar color.
&::before {
c: 0 0 ac1
/// Tweaks for short chat mode.
if (chat_short) {
width: 4px
r: 4px 0px 0px 4px
}
}
/// Reaction colors.
+w('', 'reactionMe-') { c: 0 0 #ffffff20 }
}
/// -> Spoilers.
+w('', 'spoilerText-') {
r: 8px
c: 0 0 bg3
&[data-slate-object] { c: 0 0 bg5 }
+w('&', 'hidden-') { &:hover { c: 0 0 bg4 }}
}
/// -> Attachments.
+w('', 'attachment-') {
b: none i
/// Invert document/text/code/zip icons.
if (dark(BG)) {
/[src *= '/assets/985ea67d2edab4424'],
/[src *= '/assets/9f358f46647358641'],
/[src *= '/assets/481aa700fab464f23'],
/[src *= '/assets/73d212e3701483c36'] {
filter: invert(0.8) hue-rotate(180deg)
}
}
}
/// -> Reactions.
+w('', 'reactionMe-') {
c: 0 t ac4
+w('', 'Count-') {
font-weight: bold
c: ac0
}
}
}
/// -> 'Jump to present' bar.
+w('', 'jumpToPresentBar-') {
> button {
c: fg3
transition: 0.2s ease
../:hover button { c: fg1 }
}
}
/// Textarea.
+w('', 'channelTextArea-') {
r: rc i
/// Input borders.
> div {
&:nth-of-type(1) {
border: 1px solid bg5
r: rc
/// Reset reply state.
+w('&', 'container-') { r: rc rc 0 0 }
}
&:nth-of-type(2) {
/// Reset reply state.
+w('&', 'hasReply-') {
border: 1px solid bg5
border-top: none
r: 0 0 rc rc
}
}
}
/// Fix mention button colors.
+w('/', 'mentionButton-' 'colorBrand-', i: '') {
c: ac0
}
/// Fix emoji button padding.
+w('', 'emojiButton-') { padding-right: 10px i }
/// Edit message footer.
+w('+', 'operations-') {
c: fg3
a { c: ac2 }
}
/// Markdown preview -> Mentions.
/.mention { c: ac0 0 ac5 }
/// Markdown preview -> Inline code.
+a(inlineCode-, i: '/') { font-family: var(--f-mono) i }
}
+w('', 'cooldownWrapper-') { c: fg3 }
+w('', 'newMessagesBar-') {
c: 0 0 bg5
b: bsh i
> button { c: fg1 }
}
/// Message context menu.
+w(' ', 'buttonContainer-' 'buttons-' 'wrapper-', i: 0) {
c: 0 0 bg2
b: outer, bsh i
/// Menu items.
+a(item-, i: '/') {
+w('&', 'colorDefault-') {
+w('&', 'focused-') { c: ac0 0 ac5 }
}
/// 'Delete Message' link.
+w('&', 'colorDanger-') {
&, [class *= 'hint'] { c: b10 }
+w('&', 'focused-') { c: b10 0 b15 }
}
/// 'Invite people' link.
+w('&', 'colorBrand-') {
&, [class *= 'hint'] { c: b60 }
+w('&', 'focused-') { c: b60 0 b65 }
}
}
}
/// -> Guild members.
+a(members-, i: '/') {
b: inset 1px 0 bg5 i
+w('', 'clickable-') {
&:hover [class *= 'layout-'] { c: 0 0 bg3 }
}
+w('', 'selected-') { c: 0 0 bg4 }
}
/// -> Search results.
+w('', 'ResultsWrap-') {
b: inset 1px 0 bg5 i
/// Header.
+w('', 'searchHeader-') {
border: 1px solid bg5
border-right: none
c: 0 0 bg3
}
/// Pagination.
+w('', 'pageControl-') {
+w('', 'activeButton-') { c: white 0 ac1 }
}
}
/// -> Hovered message.
+w('', 'message-') {
r: rc
}
/// Chat -> Bot tag colors.
+a(botTagRegular-, i: '/') { c: white 0 ac1 }
}
// Chat -> Markup.
+w('', 'markup-') {
/// -> Reset code font and border color.
code {
c: 0 bg5
&.inline {
padding: 0.125em 0.2em
b: inner, bsh i
}
}
/// Syntax highlighting.
/.hljs {
r: rc i
&-comment, &-quote { c: fg3 }
&-built_in, &-deletion { c: b10 }
&-addition, &-keyword, &-selector-tag { c: b40 }
&-name, &-section, &-title, &-selector-class, &-selector-id { c: b60 }
&-doctag, &-literal, &-meta &-meta-string, &-number, &-regexp, &-string { c: b50 }
&-attr, &-attribute, &-type, &-class &-title, &-template-variable, &-variable { c: b20 }
}
/// Feat -> Code font.
+w('', 'Code-' 'codeBlockText-' 'codeLine-', i: '+') {
../ code, /& { font-family: var(--f-mono) i }
}
}
// Chat -> Autocomplete. @obsolete
+w('', 'autocomplete-' 'autocomplete', i: '') {
c: 0 0 bg2
r: rc i
+w('', 'Title-') {
c: fg5
> strong { c: ac1 }
}
+w('', 'content-') { c: fg1 }
+w('', 'description') { c: fg4 }
+w('', 'divider-') { c: 0 0 bg5 }
+w('', 'Selected-' 'selected-') { c: 0 0 bg3 }
}
// Feat -> Shorter messages.
if (chat_short) {
chat_width = chat_short_w
+w('', 'messagesWrapper-') {
/// -> Messages.
+w('', 'scroller-') {
padding-left: 12px
> div {
width: 100%
max-width: chat_width
margin-left: auto
margin-right: auto
box-sizing: border-box
}
}
/// -> Bars.
+w('>', 'barBase-') {
margin-left: auto
margin-right: auto
max-width: chat_width
}
/// -> Textarea.
+ form div {
+w('&', 'channelTextArea-') {
/// Textarea in DMs/Guilds/Annoncements.
&, ../[aria-expanded], ../[class *= 'wrapper-'] {
max-width: chat_width
margin-right: auto
margin-left: auto
}
}
+w('&', 'typing-') {
max-width: chat_width
margin-right: auto
margin-left: auto
}
}
/// Fix 'Messages failed to load' alert.
+a(messagesErrorBar-, i: '/') {
c: 0 0 b15
+w('>', 'Button') { c: b10 }
}
}
}
// Emojis.
.emoji {
/// Feat -> Reduce emote size.
&.jumboable {
width: var(--e-size)
min-height: @width
height: @width
}
/// Feat -> Larger reaction emotes.
if (e_reaction) {
/[class*='reactions-'] {
margin-top: 0.25rem
.emoji {
height: 1.5rem
width: @height
}
/// Whitespace for emote menu.
+w('', 'reactionBtn-' 'focusable-', i: '') { margin-left: 0.25rem }
}
}
/// Drawers -> Emoji picker.
+a(drawerSizingWrapper-, i: '/') {
/// -> Wrapper.
+w('>', 'contentWrapper') {
border: 1px solid bg5
b: var(--elevation-high) i
r: rc
/// Fix background for emoji category text.
+w('', 'categorySection-' 'header-') { c: 0 0 bg2 }
}
/// Chat -> Reacting to messages.
+a(emojiPicker-, i: '/') {
box-shadow: 0 0 0 1px bg5
/// Fix background for emoji category text.
+w('', 'categorySection-' 'header-') { c: 0 0 bg2 }
}
/// -> Rounded corners.
+w('', 'categoryList-') {
r: 0px 0px 0px rc
}
}
/// -> Fix hardcoded preload images.
+a(imageLoading-, i: '/') {
background-image: none i
c: t 0 bg3
r: 38%
}
}
/// Feat -> Avatar size in info popout/modal.
if (avatar_size > 80) {
/// Modal.
+w('', 'modal-' 'header-', i: 0) {
div[style*='width: 80px'] {
width: var(--avatar-s) i
height: var(--avatar-s) i
}
/// Fix width.
svg[width='92'] {
width: calc(var(--avatar-s) + 12px) i
}
}
}
/// Feat -> Enable avatar context menu in profiles.
if (avatar_c_m) {
+w('', 'avatar-') {
img { text-indent: unset }
* { pointer-events: unset }
}
}
/// @upstream
@supports(scrollbar-width: thin) {
/// Fix audio/video volume bar position.
+w('', 'audioVolumeWrapper-') { transform: translate(26px, -4px) i }
+w('', 'videoVolumeWrapper') { transform: translate(-2px, -12px) i }
/// Search -> Fix media width.
+w('', 'embedMedia-') { [data-fullscreen] { width: 100% i }}
}
/// Feat -> Move user menu to guilds bar.
if guild_avatar {
+w('', 'guilds-') {
// max-height: calc(100vh - 72px)
padding-bottom: 144px
}
+w('', 'sidebar-') {
/// The magic that makes this feature work.
&, /[class*='guilds'] + div { overflow: unset i }
/// Attach panel to guilds bar.
+w('', 'panels') {
+w('>', 'container-') {
--size: (g_icons) ? (g_icons_s + 20px) : 72px
padding: 8px 0
z-index: 111
height: 128px
width: calc(var(--size))
left: calc(-1 * var(--size))
bottom: 0px
overflow: hidden
position: absolute
flex-direction: column-reverse
b: inset -1px 0 bg5
c: 0 0 bg3
/// Adjust buttons.
+w('>', 'horizontal-') { flex-direction: column i }
}
}
/// Remove status.
+w('', 'subtext-') { display: none }
+w('', 'nameTag-') { display: none }
/// Center elements.
+w('', 'avatarWrapper-') {
margin-right: 0px
margin-top: 4px
}
}
}
}