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 @@
background: none !important;
background-color: var(--dark) !important; }
/* Scrollbar track. */
*::-webkit-scrollbar-track {
background-color: var(--shadow) !important; }
/* Scrollbar thumb. */
*::-webkit-scrollbar-thumb {
border-radius: 3px !important;
background-color: var(--shadow) !important; }
/* Scrollbar thumb. */
*::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,0.2) !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[value]::-webkit-progress-bar {
background: var(--darker) !important; }
/* Value. */
progress[value]::-webkit-progress-value {
background: var(--accent) !important; }
/* Value. */
progress[value]::-webkit-progress-value {
background: var(--accent) !important; }
/* App wrapper. */
#app .app {
background: none !important;
background-color: var(--darker) !important; }
background-color: var(--dark) !important; }
/* Accent background. */
.app-wrapper::after {
......@@ -58,6 +66,9 @@
/* Fix QR code. */
._2NbD3 .XSdna {
border: 3px solid white !important; }
/* Tutorial. */
._2NbD3 > div:last-child {
background-color: var(--darker) !important; }
/* Disable background. */
._2U_Zc:before {
......@@ -107,8 +118,6 @@
/* Left drawer. */
#app .app #side {
/* TODO borders. */
border-right: 2px solid var(--darker) !important;
background-color: var(--darker) !important; }
/* Chat list. */
......@@ -128,19 +137,19 @@
border-bottom: 0px solid var(--dark) !important;
background-color: var(--darker) !important;
background-color: transparent !important; }
/* Label background. */
/* Label background. */
#side ._3CPl4 .gQzdc label,
.gQzdc._3sdhb,
._2dA13 ._15JHr .gQzdc {
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 {
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; }
/* New group and group info buttons. */
._2EXPL .dIyEr ._1jJLh,
......@@ -148,13 +157,13 @@
box-shadow: 0 0 8px -1px var(--shadow) !important;
background-color: var(--dark) !important; }
/* Search results. */
#side ._1AKfk {
color: var(--accent) !important;
background-color: var(--dark) !important; }
/* Matching results. */
#side .matched-text {
color: var(--accent) !important; }
/* Search results. */
#side ._1AKfk {
color: var(--accent) !important;
background-color: var(--dark) !important; }
/* Matching results. */
#side .matched-text {
color: var(--accent) !important; }
/* Contacts wrapper. */
#side ._1NrpZ, ._2fq0t ._1lIXT {
......@@ -199,14 +208,19 @@
box-shadow: none !important;
background-color: transparent !important; }
/* Highlighted sections. */
._2fq0t ._3hhmj ._1CkkN {
._2fq0t ._3hhmj ._1CkkN,
._3UUn3 {
background-color: var(--dark) !important; }
/* Change profile picture. */
._2fq0t .WX_XW {
._2fq0t .WX_XW,
._2fq0t ._2Lbqu {
background-color: rgba(0,0,0,0.5) !important; }
/* Text color. */
._2fq0t * {
color: var(--light) !important; }
/* Zoom in/out. */
._2LALH {
background-color: var(--dark) !important; }
/* Option/select elements. */
.uyEaY select {
......@@ -240,8 +254,9 @@
background-color: transparent !important; }
/* Header. */
._2fq0t ._1AKfk {
background-color: var(--dark) !important; }
background-color: var(--darker) !important; }
/* On event. */
.k1feT ._2fq0t ._2EXPL._1f1zm,
.k1feT ._2fq0t ._2EXPL:hover {
background-color: var(--dark) !important; }
/* Search element */
......@@ -273,7 +288,11 @@
/* Jump to present button. */
._298R6 {
box-shadow: 0 4px 8px 2px var(--shadow) !important;
background-color: var(--darker) !important; }
/* Number of messages. */
._298R6 .OUeyt {
background-color: var(--accent) !important; }
/* Header. */
._1Iexl #main header {
......@@ -288,6 +307,7 @@
background-color: var(--darker) !important; }
/* Input wrapper. */
#main footer > div {
color: var(--light) !important;
border: none !important;
/* border-bottom: 2px solid var(--dark) !important; */
background-color: var(--dark) !important; }
......@@ -300,6 +320,26 @@
._30ie- {
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. */
._3F6QL._2WovP.focused ._39LWd {
color: transparent !important; }
......@@ -379,13 +419,14 @@
._2yeJ5 .matched-text {
color: var(--accent) !important; }
/* On event. */
.YAPQk ._1f1zm > ._3j7s9,
.YAPQk ._3j7s9:hover {
background-color: var(--dark) !important; }
/* Starred messages. */
._2yeJ5 .ZwkQK, .ZwkQK {
background-color: var(--darker) !important; }
background-color: var(--dark) !important; }
/* On event. */
.starred-msg-wrapper, .MS-DH {
transition: 200ms ease-in-out !important; }
......@@ -408,13 +449,19 @@
/* Media/docs/links section. */
._2yeJ5 ._3b2Cf {
background-color: var(--darker) !important; }
/* Active indicator. */
._2yeJ5 ._3b2Cf:before {
background-color: var(--accent) !important; }
/* Selected links. */
.D6ZWG {
background-color: var(--accent) !important; }
/* Active indicator. */
._2yeJ5 ._3b2Cf:before {
background-color: var(--accent) !important; }
/* Selected image. */
._2Ry6_ ._2mlDB {
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. */
#app ._1zcz2, ._3_R6X {
......@@ -434,7 +481,8 @@
background-color: transparent !important; }
/* Text color. */
#app ._1zcz2 ._2EXPL ._3j7s9 *,
._3_R6X ._1XwnX * {
._3_R6X ._12oAB,
._1XwnX * {
color: var(--light) !important; }
/* Footer. */
......@@ -462,6 +510,10 @@
._1upWv {
color: var(--light) !important; }
/* Forwarded message. */
._15aTv {
color: var(--lighter) !important; }
/* Mentions. */
.message-in .matched-mention,
.message-out .matched-mention,
......@@ -520,12 +572,12 @@
/* Document embeds. */
._1vKRe {
border-color: var(--darker) !important; }
/* Embed background. */
._2CORf ._12xX7 {
background-color: var(--dark) !important; }
/* Embed text color. */
._2CORf ._12xX7 * {
color: var(--light) !important; }
/* Embed background. */
._12xX7 {
background-color: var(--dark) !important; }
/* Embed text color. */
._12xX7 * {
color: var(--light) !important; }
/* Link embeds. */
._1sGGp._2nFG1, ._2lwig._2nFG1 {
......@@ -537,33 +589,42 @@
._2DNgV._2Cju4, .jZ4tp._2Cju4 {
background: none !important; }
/* Reply. (= */
footer ._3kAJH {
box-shadow: 0 0px 4px 0 var(--darker) !important;
background-color: var(--darker) !important; }
/* Reply wrapper. */
footer ._3kAJH ._1VeYA,
footer ._3kAJH ._1KD7C {
padding-bottom: 5px !important;
margin: 0 50px !important; }
/* Reply content. */
footer ._3kAJH ._3PmkG,
._1rWJz._8k43T {
background-color: var(--dark) !important; }
/* Empty container. */
footer ._1qYlt._1vWM8 {
background-color: var(--dark) !important; }
/* Close button. */
footer ._2t-jH,
footer ._28ZV1 {
padding: 0 !important;
margin-left: 5px !important;
border-radius: 5px !important;
transition: 150ms ease-in-out !important;
background-color: var(--dark) !important; }
/* On event. */
footer ._2t-jH:hover {
background-color: var(--darker) !important; }
/* Reply section. (= */
footer .rstyJ {
box-shadow: 0 0px 8px 0 var(--darker) !important;
background-color: var(--darker) !important; }
/* Fix margins. */
footer .rstyJ > div:first-child {
margin: 0 0 5px 10px !important;
background-color: transparent !important; }
/* Reply content. */
footer .rstyJ > div:first-child > div {
background-color: var(--dark) !important; }
/* Close button. */
footer .rstyJ > div:last-child {
position: relative !important;
margin: 0 8px 5px 8px !important;
background-color: transparent !important; }
/* Make the button larger. */
footer .rstyJ > div:last-child > div svg {
padding: 18px !important;
border-radius: 6px !important;
background-color: var(--dark) !important; }
/* Mention group members. */
.Uukb4 {
color: var(--light) !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. */
......@@ -597,18 +658,18 @@
/* Bubble tails -- experimental. */
.tail .tail-container {
width: 0px !important;
height: 12px !important;
height: 10px !important;
z-index: 0 !important;
border-top: 12px solid var(--darker) !important;
background: none !important; }
.tail.message-in .tail-container {
left: -12px !important; top: 0px;
border-left: 12px solid transparent !important;
border-radius: 6px 0 0 0 !important; }
left: -10px !important; top: 0px;
border-left: 10px solid transparent !important;
border-radius: 5px 0 0 0 !important; }
.tail.message-out .tail-container {
right: -12px !important; top: 0px;
border-right: 12px solid transparent !important;
border-radius: 0 6px 0 0 !important; }
right: -10px !important; top: 0px;
border-right: 10px solid transparent !important;
border-radius: 0 5px 0 0 !important; }
/* Disable tails everywhere. */
/* Enabled. */
......@@ -623,12 +684,28 @@
.MS-DH .tail-override-left {
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. */
#main footer > div:nth-child(2) > div {
border: 0 !important; }
/* Emoji/gif background. */
._1UbeR, ._2HBs4 {
/* Emoji/gif/stickers background. */
._1UbeR, ._2HBs4, ._3Jgri, ._3Jgri > ._2z7kg {
background-color: var(--dark) !important; }
/* Emoji menu. */
......@@ -638,19 +715,28 @@
background-color: var(--dark) !important; }
/* Emoji tabs. */
._3ZkhL ._2ByZq,
.YbzIC {
._3ZkhL ._1qUma,
._1qUma {
background: var(--darker) !important; }
/* Tab indicator. */
/* Tab indicator. */
._2NQtS,
.YbzIC .YGHyX {
background-color: var(--accent) !important; }
.YbzIC .YGHyX,
._1Wbpa {
background-color: var(--accent) !important; }
/* Active button. */
._1x_c3.bRYFY path {
fill: var(--accent) !important; }
/* Search emojis. */
._3ZkhL label,
._2rR_l {
._2rR_l,
._2vjPO {
background-color: var(--dark) !important; }
/* Text color. */
._3ZkhL label input {
._3ZkhL label input,
._2vjPO input,
.GclUX,
._3Ztfl {
color: var(--light) !important; }
/* Gif preloader background. */
......@@ -700,7 +786,7 @@
border-right: 2px solid var(--accent) !important; }
/* Emoji menu triangle. */
._1v2rQ {
background-color: var(--darker) !important; }
background-color: var(--dark) !important; }
......@@ -724,20 +810,22 @@
._2dA13 header,
._2dA13 .iHLo1 {
background-color: var(--darker) !important; }
/* Buttons. */
._2Lbqu {
background-color: var(--dark) !important; }
/* Empty element below search bar. */
._2fq0t span._3fOoY {
display: none !important; }
/* Buttons. */
.PNlAR, ._3hV1n, ._2Gki6 {
.PNlAR, ._3hV1n, ._2Gki6, ._13iu_ {
color: var(--lighter) !important;
background-color: var(--accent) !important; }
/* Muted checkbox color. */
._1VD7W {
border-color: var(--accent) !important;
background-color: var(--accent) !important; }
/* Muted checkbox color. */
._1VD7W {
border-color: var(--accent) !important;
background-color: var(--accent) !important; }
/* Buttons. */
.PNlAR:hover, ._1WZqU:hover {
background-color: var(--dark) !important; }
/* Drop items. (-: */
.drag-drop, ._2n-96 {
......@@ -821,8 +909,10 @@
/* Remove ONLY borders. */
._1CkkN ._10xEB, ._14oqx .DcItJ,
html[dir] ._2EXPL:after, ._3j7s9,
._1fkhx, .chat-body, ._3hhmj {
._1fkhx, .chat-body, ._3hhmj, ._2nmDZ {
border: none !important; }
/* Some random iframe? */
object { display: none !important; }
......@@ -835,13 +925,19 @@
/* fill: var(--accent) !important; */
opacity: 0.3 !important; }
/* Upload files. */
.GK4Lv::after {
box-shadow: 0 1px 2px var(--shadow), 0 4px 8px var(--shadow) !important; }
/* Default profile picture background. */
span[data-icon="default-user"] svg > path:first-child,
span[data-icon="default-group"] svg > path:first-child {
span[data-icon="default-group"] svg > path:first-child,
span[data-icon="default-broadcast"] svg > path:first-child {
fill: var(--dark) !important; }
span[data-icon="default-user"] svg > g > path:last-child,
span[data-icon="default-group"] svg > path:last-child {
span[data-icon="default-group"] svg > path:last-child,
span[data-icon="default-broadcast"] svg > path:last-child {
opacity: 0.7 !important;
fill: var(--icon) !important; }
......@@ -900,7 +996,7 @@
span[data-icon="exit"] svg path,
span[data-icon="thumbs-down"] svg path,
span[data-icon="delete-danger"] svg path {
fill: crimson !important; }
fill: var(--mred) !important; }
/* Audio message. */
span[data-icon="audio-file"] svg path {
......@@ -913,6 +1009,10 @@
cursor: pointer !important;
background: var(--accent) !important; }
/* Rounded buttons. */
span svg > path[fill="#00BFA5"] {
fill: var(--accent) !important; }
/* Disable background image on small resolutions. */
@media screen and (max-width: 1441px) {
._1FKgS::after {
......@@ -928,7 +1028,8 @@
/* App wrapper. */
#app .app {
box-shadow: 0 0 0 1px var(--darker), 0 0 8px 0px var(--shadow) !important; }
border-radius: 5px !important;
box-shadow: 0 4px 24px -2px var(--shadow) !important; }
/* Fullscreen. */
/* Disabled. */
......@@ -954,11 +1055,6 @@
._3dqpi {
min-height: auto !important; }
}
@media screen and (max-width: 720px) {
/* Width overflow fix. */
._3dqpi {
min-width: 100% !important; }
}
@media screen and (max-width:720px) {
/* .app > div { box-shadow: inset 0 0 0 4px var(--accent) !important; } */
......@@ -972,10 +1068,15 @@
transition: 250ms ease-in-out !important;
flex: 0 0 075px !important; }
/* Chat section. */
._1Iexl {
flex: 0 0 65% !important; }
/* On hover or active sub-menus. */
.app.two > .k1feT:hover,
.MZIyP .k1feT {
transition-delay: 1s !important;
/* TODO: Adjust panel width. */
flex: 0 0 30% !important; }
/* Info flexbox. */
......@@ -989,12 +1090,12 @@
flex: 0 0 calc(100% - 75px) !important; }
/* Search contacts. */
.two .k1feT:not(:hover) ._2MSJr {
.two .k1feT:not(:hover) ._2MSJr {
padding: 0 !important;
margin-left: 14px !important; }
/* On hover. */
.two .k1feT:hover ._2MSJr {
.two .k1feT:hover ._2MSJr {
transition-delay: 1s !important; }
/* Attach icons to avatars. */
......@@ -1009,5 +1110,17 @@
.two .k1feT .ZR5SB {
display: none !important; }
}
@media screen and (max-width: 720px) {
/* Width overflow fix. */
._3dqpi {
min-width: 100% !important; }
/* On hover or active sub-menus. */
.app.two > .k1feT:hover,
.MZIyP .k1feT {
transition-delay: 1s !important;
flex: 0 0 40% !important; }
}
/* Custom CSS rules. */
\ No newline at end of file
/* Custom CSS rules. */
#test::after { content: "paste all your custom css here!" !important; }
......@@ -18,26 +18,34 @@
background: none;
background-color: var(--dark); }
/* Scrollbar track. */
*::-webkit-scrollbar-track {
background-color: var(--shadow); }
/* Scrollbar thumb. */
*::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: var(--shadow); }
/* Scrollbar thumb. */
*::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,0.2); }
/* 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[value]::-webkit-progress-bar {
background: var(--darker); }