Verified Commit 38c48499 authored by Felix Eckhofer's avatar Felix Eckhofer 🤹🏼

Update onyx

parent 135fc863
:root {
--dark: rgb(39, 44, 53) !important;
--darker: rgb(31, 35, 42) !important;
--light: rgb(209, 209, 209) !important;
--lighter: rgb(233, 233, 233) !important;
--accent: rgb(114, 137, 218) !important;
--icon: rgb(225, 225, 225) !important;
--shadow: rgba(0, 0, 0, .12) !important;
--mred: rgb(163, 82, 91) !important;
--mgreen: rgb(112, 163, 82) !important;
--mblue: rgb(82, 122, 163) !important;
--image: url(https://media.discordapp.net/attachments/310799529161129984/417408747812552715/zilesanamin.jpg) !important;
--emojiOpacity: 0.75 !important;
}
/* Body reset. */
body {
background: none !important;
background-color: var(--dark) !important; }
/* Scrollbar track. */
*::-webkit-scrollbar-track {
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; }
/* App wrapper. */
#app .app {
background: none !important;
background-color: var(--dark) !important; }
/* Accent background. */
.app-wrapper::after {
background: none !important; }
/* Log-in page. */
._2NbD3 {
border: 1px solid var(--shadow) !important;
box-shadow: 0 8px 32px 0 var(--shadow) !important;
background-color: var(--darker) !important; }
/* Text color. */
._2NbD3 * {
color: var(--light) !important; }
/* Reload QR code. */
.HnNfm {
background-color: var(--darker) !important; }
/* 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 {
display: none !important; }
/* Icon color. */
span[class="_3CSsZ"] > svg > rect {
fill: var(--dark) !important; }
/* Landing page. */
.app ._1Iexl ._3qlW9 {
/* box-shadow: 1px -3px 2px 0 var(--shadow) inset !important; */
border: none !important;
background-color: var(--dark) !important; }
/* Status update. */
/* .app ._3q4NP ._3qlW9::before {
content: 'Rewrite is done! A few old and a few new features coming up. Let me know if something is still broken. ^-^' !important;
left: 0 !important;
top: 0 !important;
bottom: 6px !important;
right: 0 !important;
position: absolute !important;
z-index: 98 !important;
width: 90% !important;
margin: 0 5% !important;
padding-top: 40vh !important;
text-align: center !important;
font-size: 20px !important;
color: var(--light) !important;
background: var(--dark) !important; } /**/
/* Image. */
.app ._1Iexl ._3qlW9 ._3BqNZ ._2Uo0Z {
max-width: 200px !important;
max-height: 200px !important;
border-radius: 50% !important;
filter: opacity(0.75) !important;
transition: opacity 1s ease !important; }
/* Text color. */
.app ._1Iexl ._3qlW9 ._2MnNk * {
color: var(--light) !important; }
/* Accent bar. */
.app ._1Iexl ._3qlW9:after {
border-top-color: var(--accent) !important; }
/* Left drawer. */
#app .app #side {
background-color: var(--darker) !important; }
/* Chat list. */
#side > header {
background-color: var(--darker) !important; }
/* Notifications && more!! */
#side ._3YewW {
box-shadow: inset 0 0 4px 0 var(--shadow) !important;
background-color: var(--accent) !important; }
/* Text color. */
#side ._3YewW .l2BEH * {
color: var(--lighter) !important; }
/* Search or start new chat. */
#side ._3CPl4 {
border-bottom: 0px solid var(--dark) !important;
background-color: var(--darker) !important;
background-color: transparent !important; }
/* 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 {
background-color: var(--dark) !important; }
/* New group and group info buttons. */
._2EXPL .dIyEr ._1jJLh,
._2EXPL .dIyEr ._1WliW {
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; }
/* Contacts wrapper. */
#side ._1NrpZ, ._2fq0t ._1lIXT {
background-color: transparent !important; }
/* Contacts. */
#side ._1NrpZ ._2EXPL, ._2fq0t ._66JgU {
transition: 200ms ease-in-out !important;
background-color: transparent !important; }
/* On event. */
#side ._1NrpZ ._2EXPL._1f1zm,
#side ._1NrpZ ._2EXPL:hover {
background-color: var(--dark) !important; }
/* Text color. */
#side ._1NrpZ [class*="_3j7s9"] * {
color: var(--light) !important; }
/* Avatar wrapper background. */
._1WliW {
box-shadow: 0 0 8px -1px var(--shadow) !important;
background-color: transparent !important; }
/* New message indicator. */
#side .OUeyt {
color: var(--lighter) !important;
background-color: var(--darker) !important;
box-shadow: inset 0 0 0 2px var(--accent) !important; }
/* Settings. */
._2fq0t {
background-color: var(--darker) !important; }
/* Header color. */
._2fq0t header {
min-height: 50px !important;
height: auto !important;
background-color: var(--darker) !important; }
/* Reset header height. */
._2fq0t header > div:first-child {
padding: 12px 0 !important;
height: auto !important; }
/* Transparent sections. */
._2fq0t ._1CRb5 {
box-shadow: none !important;
background-color: transparent !important; }
/* Highlighted sections. */
._2fq0t ._3hhmj ._1CkkN,
._3UUn3 {
background-color: var(--dark) !important; }
/* Change profile picture. */
._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 {
border-color: var(--accent) !important; }
.uyEaY select option {
background-color: var(--dark) !important; }
/* Archived chat image. */
._2fq0t ._2Lev2 {
background-color: var(--dark) !important; }
/* Body. */
._2fq0t ._2sNbV ._1CkkN,
._2fq0t ._2sNbV ._2EXPL {
background-color: transparent !important; }
/* On event. TODO: Fixed, but it might still overlap somewhere. */
.k1feT ._2sNbV > ._1CkkN:hover,
._2fq0t ._2sNbV ._1CkkN:hover {
background-color: var(--dark) !important; }
/* New chat section. */
._2fq0t .gQzdc label {
border: none !important;
background-color: var(--dark) !important; }
/* Input element. */
._2fq0t .gQzdc label input {
background-color: transparent !important; }
/* New group. */
._2fq0t ._39pS- {
background-color: transparent !important; }
/* Header. */
._2fq0t ._1AKfk {
background-color: var(--darker) !important; }
/* On event. */
.k1feT ._2fq0t ._2EXPL._1f1zm,
.k1feT ._2fq0t ._2EXPL:hover {
background-color: var(--dark) !important; }
/* Search element */
._66JgU ._3_3Rs {
border-bottom: none !important; }
._66JgU ._3_3Rs input, ._66JgU ._3_3Rs ::placeholder {
color: var(--lighter) !important; }
/* Dropdown menu. */
._2uLFU, ._1ArIP {
box-shadow: 0 2px 8px 0 var(--shadow), 0 2px 16px 0 var(--shadow) !important;
background-color: var(--darker) !important; }
/* On event. */
._2uLFU li:hover, ._2ULFU li._28zBA {
background-color: var(--dark) !important; }
/* Text color. */
._2uLFU div, _1ArIP div {
color: var(--light) !important; }
/* Middle drawer. */
.app ._1Iexl ._1GX8_ {
background-color: var(--dark) !important; }
/* Doodle background. TODO: Plans for the future. */
.app .YUoyu {
filter: invert(100%) opacity(0.45) !important; }
/* 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 {
border: none !important;
background-color: var(--dark) !important; }
/* Text color. */
._1Iexl #main header ._1WBXd * {
color: var(--light) !important; }
/* Footer. */
._1Iexl #main footer {
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; }
/* Input element. */
#main footer > div:nth-child(1) > div:nth-child(2) {
border: none !important;
color: var(--light) !important;
background-color: var(--darker) !important; }
/* Voice message duration. */
._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; }
/* On event smoothness. */
.pluggable-input.pluggable-input-compose > div:first-child {
transition: 150ms ease-in-out !important; }
/* Right drawer. */
.app ._2yeJ5 ._2fq0t {
background-color: var(--darker) !important; }
/* Border-color. */
.app ._2yeJ5 {
border-left-color: transparent !important; }
/* Header. */
.app ._2yeJ5 ._2fq0t header {
background-color: var(--darker) !important; }
/* Text color. */
.app ._2yeJ5 ._2fq0t header div {
color: var(--light) !important; }
/* Group info sections. */
.app ._2yeJ5 ._2fq0t ._1CRb5 {
/*box-shadow: 0 1px 3px shadow /**/
box-shadow: none !important;
background-color: transparent !important; }
/* Group name. */
.app ._2yeJ5 ._1CRb5 ._1DTd4, .media-body .CzI8E {
margin-bottom: 10px !important;
color: var(--light) !important;
border-bottom: 2px solid var(--accent) !important; }
/* User's name. */
.app ._2yeJ5 .copyable-text {
color: var(--light) !important; }
/* Accent color text. */
.app ._2yeJ5 ._1CRb5 ._1sYdX {
font-weight: 400 !important;
color: var(--accent) !important; }
/* Mute/Starred Messages. */
.app ._2yeJ5 ._1CRb5 ._3LL06 {
color: var(--light) !important; }
/* Group options. */
.app ._2yeJ5 ._1CRb5 ._2EXPL,
.app ._2yeJ5 ._1CRb5 ._1CkkN {
transition: 200ms ease-in-out !important;
background-color: transparent !important; }
/* On event. */
.app ._2yeJ5 ._1CRb5 ._2EXPL._3xj48:hover,
.app ._2yeJ5 ._1CRb5 ._1CkkN:hover {
background-color: var(--dark) !important; }
/* Text color. */
.app ._2yeJ5 ._1CRb5 ._2EXPL * {
color: var(--light) !important; }
/* Admin color. */
.app ._2yeJ5 ._1CRb5 ._2e8Mu {
border: 2px solid var(--accent) !important; }
/* Search messages. TODO: Apply this to all search elements. */
._2yeJ5 ._1iMEz, ._1iopp /*, ._2yeJ5 ._1iMEz._3sdhb*/ {
background-color: var(--darker) !important; }
/* Input wrapper. */
._1iMEz label {
border: 0px solid var(--dark) !important;
background-color: var(--dark) !important; }
._1iMEz ._3sdhb label {
background-color: transparent !important; }
/* Input element. */
._1iMEz label input {
background-color: transparent !important; }
/* Search messages body. */
.YAPQk {
background-color: var(--darker) !important; }
/* Matching results. */
._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(--dark) !important; }
/* On event. */
.starred-msg-wrapper, .MS-DH {
transition: 200ms ease-in-out !important; }
/* On event. */
.MS-DH._2-mCk, .MS-DH._1baOM, .MS-DH.ZuHmv {
background-color: var(--dark) !important; }
/* Message info. */
._3FAwT {
background-color: var(--dark) !important; }
/* Doodle image. */
._3FAwT .pane-chat-tile {
filter: invert(100%) opacity(0.8) !important; }
/* Read by. */
._2yeJ5 ._2sNbV ._2HDl5 ._2wP_Y > div {
background-color: var(--dark) !important; }
/* Media/docs/links section. */
._2yeJ5 ._3b2Cf {
background-color: var(--darker) !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 {
background-color: rgba(0,0,0,0.85) !important; }
/* Chevron background. */
._2-IeP {
background-color: var(--darker) !important; }
/* Preloader. */
._3dGYA {
background-color: var(--darker) !important; }
/* Header. */
#app ._1zcz2 ._2YdsD, ._3_R6X ._1XwnX {
background-color: var(--dark) !important; }
/* Inner element. */
#app ._1zcz2 ._2EXPL {
background-color: transparent !important; }
/* Text color. */
#app ._1zcz2 ._2EXPL ._3j7s9 *,
._3_R6X ._12oAB,
._1XwnX * {
color: var(--light) !important; }
/* Footer. */
._3Qh77 {
border: none !important;
background-color: var(--darker) !important; }
/* Selected image. */
._3Qh77 ._1xQmx {
transform: scale(1) !important;
border: 3px solid var(--accent) }
html[dir=ltr] .UPNDG:hover:not(._1xQmx) {
border: 0px solid var(--accent) !important;
outline: 3px solid var(--accent) !important; }
/* Message bubbles. */
.message-in, .message-out, .message {
background-color: var(--darker) !important; }
/* Message text color. */
.message-in .selectable-text,
.message-out .selectable-text,
.quoted-mention,
._1upWv {
color: var(--light) !important; }
/* Forwarded message. */
._15aTv {
color: var(--lighter) !important; }
/* Mentions. */
.message-in .matched-mention,
.message-out .matched-mention,
.message-out .matched-mention .at-symbol {
color: var(--accent) !important; }
/* Message meta text color. */
[class*="message-"] ._2f-RV *, [class*="message-"] ._2f-RV *,
[class*="message-"] ._1_Gu6 *, [class*="message-"] ._27K_5 *,
[class*="message-"] ._1DZAH *, [class*="message-"] ._3cMIj * {
color: var(--light) !important; }
/* Image/gif/video meta wrapper. */
.KYpDv ._1DZAH {
bottom: 8px !important;
padding: 2px 5px !important;
border-radius: 4px !important;
background-color: var(--shadow) !important; }
/* Text color. */
.KYpDv ._1DZAH ._3EFt_ {
margin-top: 0px !important;
color: var(--lighter) !important; }
/* Message options. */
._1i1U7 {
/*transition: 200ms ease-in-out !important;/**/
background: linear-gradient(to right, transparent 0%, var(--darker) 40%) !important; }
/* Smooth transition. */
.message span:last-child div {
transition: 50ms ease-in-out !important; }
/* Typing... */
.vdXUe {
color: var(--accent) !important; }
/* System messages. */
.Zq3Mc {
box-shadow: 0 2px 8px 0px var(--shadow) !important;
border-bottom: 3px solid var(--shadow) !important;
background-color: var(--darker) !important; }
/* Text color and shadows. */
.Zq3Mc * {
text-shadow: none !important;
color: var(--lighter) !important; }
/* New message. */
#main ._1mq8g {
border: none !important;
background-color: transparent !important; }
/* X unread messages. */
#main ._1mq8g .L89LI {
box-shadow: 0 0 8px 0 var(--shadow) !important;
color: var(--light) !important;
background-color: var(--darker) !important; }
/* Document embeds. */
._1vKRe {
border-color: var(--darker) !important; }
/* Embed background. */
._12xX7 {
background-color: var(--dark) !important; }
/* Embed text color. */
._12xX7 * {
color: var(--light) !important; }
/* Link embeds. */
._1sGGp._2nFG1, ._2lwig._2nFG1 {
background-color: var(--dark) !important; }
/* Text color. */
._1sGGp._2nFG1 *, ._2lwig._2nFG1 * {
color: var(--light) !important; }
/* Link options. */
._2DNgV._2Cju4, .jZ4tp._2Cju4 {
background: none !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; }