Verified Commit 135fc863 authored by Felix Eckhofer's avatar Felix Eckhofer 🤹🏼

Update onyx

From https://github.com/vednoc/onyx using stylus addon
parent 874bae62
...@@ -18,26 +18,34 @@ ...@@ -18,26 +18,34 @@
background: none !important; background: none !important;
background-color: var(--dark) !important; } background-color: var(--dark) !important; }
/* Scrollbar track. */ /* Scrollbar track. */
*::-webkit-scrollbar-track { *::-webkit-scrollbar-track {
background-color: var(--shadow) !important; } background-color: var(--shadow) !important; }
/* Scrollbar thumb. */ /* Scrollbar thumb. */
*::-webkit-scrollbar-thumb { *::-webkit-scrollbar-thumb {
border-radius: 3px !important; background-color: rgba(0,0,0,0.2) !important; }
background-color: var(--shadow) !important; } /* Highlight selection. */
::selection {
color: var(--light) !important;
background-color: var(--accent) !important; }
::-moz-selection {
color: var(--light) !important;
background-color: var(--accent) !important; }
/* Input placeholders. */
::-webkit-input-placeholder {
color: var(--lighter) !important; }
/* Progress. */ /* Progress. */
progress[value]::-webkit-progress-bar { progress[value]::-webkit-progress-bar {
background: var(--darker) !important; } background: var(--darker) !important; }
/* Value. */ /* Value. */
progress[value]::-webkit-progress-value { progress[value]::-webkit-progress-value {
background: var(--accent) !important; } background: var(--accent) !important; }
/* App wrapper. */ /* App wrapper. */
#app .app { #app .app {
background: none !important; background: none !important;
background-color: var(--darker) !important; } background-color: var(--dark) !important; }
/* Accent background. */ /* Accent background. */
.app-wrapper::after { .app-wrapper::after {
...@@ -58,6 +66,9 @@ ...@@ -58,6 +66,9 @@
/* Fix QR code. */ /* Fix QR code. */
._2NbD3 .XSdna { ._2NbD3 .XSdna {
border: 3px solid white !important; } border: 3px solid white !important; }
/* Tutorial. */
._2NbD3 > div:last-child {
background-color: var(--darker) !important; }
/* Disable background. */ /* Disable background. */
._2U_Zc:before { ._2U_Zc:before {
...@@ -107,8 +118,6 @@ ...@@ -107,8 +118,6 @@
/* Left drawer. */ /* Left drawer. */
#app .app #side { #app .app #side {
/* TODO borders. */
border-right: 2px solid var(--darker) !important;
background-color: var(--darker) !important; } background-color: var(--darker) !important; }
/* Chat list. */ /* Chat list. */
...@@ -128,19 +137,19 @@ ...@@ -128,19 +137,19 @@
border-bottom: 0px solid var(--dark) !important; border-bottom: 0px solid var(--dark) !important;
background-color: var(--darker) !important; background-color: var(--darker) !important;
background-color: transparent !important; } background-color: transparent !important; }
/* Label background. */ /* Label background. */
#side ._3CPl4 .gQzdc label, #side ._3CPl4 .gQzdc label,
.gQzdc._3sdhb, .gQzdc._3sdhb,
._2dA13 ._15JHr .gQzdc { ._2dA13 ._15JHr .gQzdc {
border: 0px solid var(--dark) !important; border: 0px solid var(--dark) !important;
background-color: var(--dark) !important; }
/* Input element. */
#side ._3CPl4 .gQzdc label input {
color: var(--light) !important;
background-color: transparent !important; }
/* Active. */
#side ._3CPl4 .gQzdc._3sdhb {
background-color: var(--dark) !important; } background-color: var(--dark) !important; }
/* Input element. */
#side ._3CPl4 .gQzdc label input {
color: var(--light) !important;
background-color: transparent !important; }
/* Active. */
#side ._3CPl4 .gQzdc._3sdhb {
background-color: var(--dark) !important; }
/* New group and group info buttons. */ /* New group and group info buttons. */
._2EXPL .dIyEr ._1jJLh, ._2EXPL .dIyEr ._1jJLh,
...@@ -148,13 +157,13 @@ ...@@ -148,13 +157,13 @@
box-shadow: 0 0 8px -1px var(--shadow) !important; box-shadow: 0 0 8px -1px var(--shadow) !important;
background-color: var(--dark) !important; } background-color: var(--dark) !important; }
/* Search results. */ /* Search results. */
#side ._1AKfk { #side ._1AKfk {
color: var(--accent) !important; color: var(--accent) !important;
background-color: var(--dark) !important; } background-color: var(--dark) !important; }
/* Matching results. */ /* Matching results. */
#side .matched-text { #side .matched-text {
color: var(--accent) !important; } color: var(--accent) !important; }
/* Contacts wrapper. */ /* Contacts wrapper. */
#side ._1NrpZ, ._2fq0t ._1lIXT { #side ._1NrpZ, ._2fq0t ._1lIXT {
...@@ -199,14 +208,19 @@ ...@@ -199,14 +208,19 @@
box-shadow: none !important; box-shadow: none !important;
background-color: transparent !important; } background-color: transparent !important; }
/* Highlighted sections. */ /* Highlighted sections. */
._2fq0t ._3hhmj ._1CkkN { ._2fq0t ._3hhmj ._1CkkN,
._3UUn3 {
background-color: var(--dark) !important; } background-color: var(--dark) !important; }
/* Change profile picture. */ /* Change profile picture. */
._2fq0t .WX_XW { ._2fq0t .WX_XW,
._2fq0t ._2Lbqu {
background-color: rgba(0,0,0,0.5) !important; } background-color: rgba(0,0,0,0.5) !important; }
/* Text color. */ /* Text color. */
._2fq0t * { ._2fq0t * {
color: var(--light) !important; } color: var(--light) !important; }
/* Zoom in/out. */
._2LALH {
background-color: var(--dark) !important; }
/* Option/select elements. */ /* Option/select elements. */
.uyEaY select { .uyEaY select {
...@@ -240,8 +254,9 @@ ...@@ -240,8 +254,9 @@
background-color: transparent !important; } background-color: transparent !important; }
/* Header. */ /* Header. */
._2fq0t ._1AKfk { ._2fq0t ._1AKfk {
background-color: var(--dark) !important; } background-color: var(--darker) !important; }
/* On event. */ /* On event. */
.k1feT ._2fq0t ._2EXPL._1f1zm,
.k1feT ._2fq0t ._2EXPL:hover { .k1feT ._2fq0t ._2EXPL:hover {
background-color: var(--dark) !important; } background-color: var(--dark) !important; }
/* Search element */ /* Search element */
...@@ -273,7 +288,11 @@ ...@@ -273,7 +288,11 @@
/* Jump to present button. */ /* Jump to present button. */
._298R6 { ._298R6 {
box-shadow: 0 4px 8px 2px var(--shadow) !important;
background-color: var(--darker) !important; } background-color: var(--darker) !important; }
/* Number of messages. */
._298R6 .OUeyt {
background-color: var(--accent) !important; }
/* Header. */ /* Header. */
._1Iexl #main header { ._1Iexl #main header {
...@@ -288,6 +307,7 @@ ...@@ -288,6 +307,7 @@
background-color: var(--darker) !important; } background-color: var(--darker) !important; }
/* Input wrapper. */ /* Input wrapper. */
#main footer > div { #main footer > div {
color: var(--light) !important;
border: none !important; border: none !important;
/* border-bottom: 2px solid var(--dark) !important; */ /* border-bottom: 2px solid var(--dark) !important; */
background-color: var(--dark) !important; } background-color: var(--dark) !important; }
...@@ -300,6 +320,26 @@ ...@@ -300,6 +320,26 @@
._30ie- { ._30ie- {
color: var(--light) !important; } color: var(--light) !important; }
/* Unknown contact. */
.TYhk9 {
border-color: var(--darker) !important;
background-color: var(--dark) !important;
box-shadow: 0 0px 8px 2px var(--shadow) !important; }
/* Buttons. */
.TYhk9 ._1sB6s {
color: var(--light) !important;
background-color: var(--darker) !important; }
/* Shared contact button colors. */
.b332w {
color: var(--accent) !important; }
/* Shared contact text. */
.AVd_p {
color: var(--lighter) !important; }
/* View contact. */
._36ApL {
background-color: transparent !important; }
/* Hide 'Type a message' once focused. */ /* Hide 'Type a message' once focused. */
._3F6QL._2WovP.focused ._39LWd { ._3F6QL._2WovP.focused ._39LWd {
color: transparent !important; } color: transparent !important; }
...@@ -379,13 +419,14 @@ ...@@ -379,13 +419,14 @@
._2yeJ5 .matched-text { ._2yeJ5 .matched-text {
color: var(--accent) !important; } color: var(--accent) !important; }
/* On event. */ /* On event. */
.YAPQk ._1f1zm > ._3j7s9,
.YAPQk ._3j7s9:hover { .YAPQk ._3j7s9:hover {
background-color: var(--dark) !important; } background-color: var(--dark) !important; }
/* Starred messages. */ /* Starred messages. */
._2yeJ5 .ZwkQK, .ZwkQK { ._2yeJ5 .ZwkQK, .ZwkQK {
background-color: var(--darker) !important; } background-color: var(--dark) !important; }
/* On event. */ /* On event. */
.starred-msg-wrapper, .MS-DH { .starred-msg-wrapper, .MS-DH {
transition: 200ms ease-in-out !important; } transition: 200ms ease-in-out !important; }
...@@ -408,13 +449,19 @@ ...@@ -408,13 +449,19 @@
/* Media/docs/links section. */ /* Media/docs/links section. */
._2yeJ5 ._3b2Cf { ._2yeJ5 ._3b2Cf {
background-color: var(--darker) !important; } background-color: var(--darker) !important; }
/* Active indicator. */ /* Active indicator. */
._2yeJ5 ._3b2Cf:before { ._2yeJ5 ._3b2Cf:before {
background-color: var(--accent) !important; } background-color: var(--accent) !important; }
/* Selected links. */ /* Selected image. */
.D6ZWG { ._2Ry6_ ._2mlDB {
background-color: var(--accent) !important; } border-color: var(--accent) !important; }
/* Selected links. */
.D6ZWG {
background-color: var(--darker) !important; }
/* Text color. */
.D6ZWG ._1S4i5,
._2Mvo8.fyJXn {
color: var(--lighter) !important; }
/* Media viewer. */ /* Media viewer. */
#app ._1zcz2, ._3_R6X { #app ._1zcz2, ._3_R6X {
...@@ -434,7 +481,8 @@ ...@@ -434,7 +481,8 @@
background-color: transparent !important; } background-color: transparent !important; }
/* Text color. */ /* Text color. */
#app ._1zcz2 ._2EXPL ._3j7s9 *, #app ._1zcz2 ._2EXPL ._3j7s9 *,
._3_R6X ._1XwnX * { ._3_R6X ._12oAB,
._1XwnX * {
color: var(--light) !important; } color: var(--light) !important; }
/* Footer. */ /* Footer. */
...@@ -462,6 +510,10 @@ ...@@ -462,6 +510,10 @@
._1upWv { ._1upWv {
color: var(--light) !important; } color: var(--light) !important; }
/* Forwarded message. */
._15aTv {
color: var(--lighter) !important; }
/* Mentions. */ /* Mentions. */
.message-in .matched-mention, .message-in .matched-mention,
.message-out .matched-mention, .message-out .matched-mention,
...@@ -520,12 +572,12 @@ ...@@ -520,12 +572,12 @@
/* Document embeds. */ /* Document embeds. */
._1vKRe { ._1vKRe {
border-color: var(--darker) !important; } border-color: var(--darker) !important; }
/* Embed background. */ /* Embed background. */
._2CORf ._12xX7 { ._12xX7 {
background-color: var(--dark) !important; } background-color: var(--dark) !important; }
/* Embed text color. */ /* Embed text color. */
._2CORf ._12xX7 * { ._12xX7 * {
color: var(--light) !important; } color: var(--light) !important; }
/* Link embeds. */ /* Link embeds. */
._1sGGp._2nFG1, ._2lwig._2nFG1 { ._1sGGp._2nFG1, ._2lwig._2nFG1 {
...@@ -537,33 +589,42 @@ ...@@ -537,33 +589,42 @@
._2DNgV._2Cju4, .jZ4tp._2Cju4 { ._2DNgV._2Cju4, .jZ4tp._2Cju4 {
background: none !important; } background: none !important; }
/* Reply. (= */
footer ._3kAJH { /* Reply section. (= */
box-shadow: 0 0px 4px 0 var(--darker) !important; footer .rstyJ {
background-color: var(--darker) !important; } box-shadow: 0 0px 8px 0 var(--darker) !important;
/* Reply wrapper. */ background-color: var(--darker) !important; }
footer ._3kAJH ._1VeYA, /* Fix margins. */
footer ._3kAJH ._1KD7C { footer .rstyJ > div:first-child {
padding-bottom: 5px !important; margin: 0 0 5px 10px !important;
margin: 0 50px !important; } background-color: transparent !important; }
/* Reply content. */ /* Reply content. */
footer ._3kAJH ._3PmkG, footer .rstyJ > div:first-child > div {
._1rWJz._8k43T { background-color: var(--dark) !important; }
background-color: var(--dark) !important; } /* Close button. */
/* Empty container. */ footer .rstyJ > div:last-child {
footer ._1qYlt._1vWM8 { position: relative !important;
background-color: var(--dark) !important; } margin: 0 8px 5px 8px !important;
/* Close button. */ background-color: transparent !important; }
footer ._2t-jH, /* Make the button larger. */
footer ._28ZV1 { footer .rstyJ > div:last-child > div svg {
padding: 0 !important; padding: 18px !important;
margin-left: 5px !important; border-radius: 6px !important;
border-radius: 5px !important; background-color: var(--dark) !important; }
transition: 150ms ease-in-out !important;
background-color: var(--dark) !important; } /* Mention group members. */
/* On event. */ .Uukb4 {
footer ._2t-jH:hover { color: var(--light) !important;
background-color: var(--darker) !important; } border-left: none !important;
background-color: var(--dark) !important; }
/* Wrapper. */
.Uukb4 ._3v_lq {
transition: 300ms ease-in-out !important;
background-color: transparent !important; }
/* Active. */
.Uukb4 .j5Hcb._3v_lq,
.Uukb4 ._3v_lq:hover {
background-color: var(--darker) !important; }
/* Select messages. */ /* Select messages. */
...@@ -597,18 +658,18 @@ ...@@ -597,18 +658,18 @@
/* Bubble tails -- experimental. */ /* Bubble tails -- experimental. */
.tail .tail-container { .tail .tail-container {
width: 0px !important; width: 0px !important;
height: 12px !important; height: 10px !important;
z-index: 0 !important; z-index: 0 !important;
border-top: 12px solid var(--darker) !important; border-top: 12px solid var(--darker) !important;
background: none !important; } background: none !important; }
.tail.message-in .tail-container { .tail.message-in .tail-container {
left: -12px !important; top: 0px; left: -10px !important; top: 0px;
border-left: 12px solid transparent !important; border-left: 10px solid transparent !important;
border-radius: 6px 0 0 0 !important; } border-radius: 5px 0 0 0 !important; }
.tail.message-out .tail-container { .tail.message-out .tail-container {
right: -12px !important; top: 0px; right: -10px !important; top: 0px;
border-right: 12px solid transparent !important; border-right: 10px solid transparent !important;
border-radius: 0 6px 0 0 !important; } border-radius: 0 5px 0 0 !important; }
/* Disable tails everywhere. */ /* Disable tails everywhere. */
/* Enabled. */ /* Enabled. */
...@@ -623,12 +684,28 @@ ...@@ -623,12 +684,28 @@
.MS-DH .tail-override-left { .MS-DH .tail-override-left {
border-radius: 7.5px !important; } border-radius: 7.5px !important; }
/** Stickers. */
._1rK-b {
background: none !important; }
/* Sender. */
._3JaNE ._2R8MP {
background-color: var(--darker) !important; }
/* Time/status. */
._3JaNE ._2Ll5c {
background-color: var(--darker) !important; }
/* Reset message menu. */
._1qhoQ {
top: 0 !important;
right: 0 !important;
background: none !important; }
/* Icon background. */
.YiYMT { background-color: transparent !important; }
/* Temporary fix for emoji container. */ /* Temporary fix for emoji container. */
#main footer > div:nth-child(2) > div { #main footer > div:nth-child(2) > div {
border: 0 !important; } border: 0 !important; }
/* Emoji/gif background. */ /* Emoji/gif/stickers background. */
._1UbeR, ._2HBs4 { ._1UbeR, ._2HBs4, ._3Jgri, ._3Jgri > ._2z7kg {
background-color: var(--dark) !important; } background-color: var(--dark) !important; }
/* Emoji menu. */ /* Emoji menu. */
...@@ -638,19 +715,28 @@ ...@@ -638,19 +715,28 @@
background-color: var(--dark) !important; } background-color: var(--dark) !important; }
/* Emoji tabs. */ /* Emoji tabs. */
._3ZkhL ._2ByZq, ._3ZkhL ._2ByZq,
.YbzIC { ._3ZkhL ._1qUma,
._1qUma {
background: var(--darker) !important; } background: var(--darker) !important; }
/* Tab indicator. */ /* Tab indicator. */
._2NQtS, ._2NQtS,
.YbzIC .YGHyX { .YbzIC .YGHyX,
background-color: var(--accent) !important; } ._1Wbpa {
background-color: var(--accent) !important; }
/* Active button. */
._1x_c3.bRYFY path {
fill: var(--accent) !important; }
/* Search emojis. */ /* Search emojis. */
._3ZkhL label, ._3ZkhL label,
._2rR_l { ._2rR_l,
._2vjPO {
background-color: var(--dark) !important; } background-color: var(--dark) !important; }
/* Text color. */ /* Text color. */
._3ZkhL label input { ._3ZkhL label input,
._2vjPO input,
.GclUX,
._3Ztfl {
color: var(--light) !important; } color: var(--light) !important; }
/* Gif preloader background. */ /* Gif preloader background. */
...@@ -700,7 +786,7 @@ ...@@ -700,7 +786,7 @@
border-right: 2px solid var(--accent) !important; } border-right: 2px solid var(--accent) !important; }
/* Emoji menu triangle. */ /* Emoji menu triangle. */
._1v2rQ { ._1v2rQ {
background-color: var(--darker) !important; } background-color: var(--dark) !important; }
...@@ -724,20 +810,22 @@ ...@@ -724,20 +810,22 @@
._2dA13 header, ._2dA13 header,
._2dA13 .iHLo1 { ._2dA13 .iHLo1 {
background-color: var(--darker) !important; } background-color: var(--darker) !important; }
/* Buttons. */ /* Empty element below search bar. */
._2Lbqu { ._2fq0t span._3fOoY {
background-color: var(--dark) !important; } display: none !important; }
/* Buttons. */ /* Buttons. */
.PNlAR, ._3hV1n, ._2Gki6 { .PNlAR, ._3hV1n, ._2Gki6, ._13iu_ {
color: var(--lighter) !important; color: var(--lighter) !important;
background-color: var(--accent) !important; } background-color: var(--accent) !important; }
/* Muted checkbox color. */ /* Muted checkbox color. */
._1VD7W { ._1VD7W {
border-color: var(--accent) !important; border-color: var(--accent) !important;
background-color: var(--accent) !important; } background-color: var(--accent) !important; }
/* Buttons. */
.PNlAR:hover, ._1WZqU:hover {
background-color: var(--dark) !important; }
/* Drop items. (-: */ /* Drop items. (-: */
.drag-drop, ._2n-96 { .drag-drop, ._2n-96 {
...@@ -821,8 +909,10 @@ ...@@ -821,8 +909,10 @@
/* Remove ONLY borders. */ /* Remove ONLY borders. */
._1CkkN ._10xEB, ._14oqx .DcItJ, ._1CkkN ._10xEB, ._14oqx .DcItJ,
html[dir] ._2EXPL:after, ._3j7s9, html[dir] ._2EXPL:after, ._3j7s9,
._1fkhx, .chat-body, ._3hhmj { ._1fkhx, .chat-body, ._3hhmj, ._2nmDZ {
border: none !important; } border: none !important; }
/* Some random iframe? */
object { display: none !important; }
...@@ -835,13 +925,19 @@ ...@@ -835,13 +925,19 @@
/* fill: var(--accent) !important; */ /* fill: var(--accent) !important; */
opacity: 0.3 !important; } opacity: 0.3 !important; }