Skip to content

Instantly share code, notes, and snippets.

@elmarcoh

elmarcoh/rambox_whatsapp_dark.css

Last active February 1, 2020 00:42
Show Gist options
  • Save elmarcoh/dd3d3cb67d17b19735ca7cd9aa7f0571 to your computer and use it in GitHub Desktop.
Save elmarcoh/dd3d3cb67d17b19735ca7cd9aa7f0571 to your computer and use it in GitHub Desktop.
Download ZIP
Rambox custom code for Whatsapp dark mode (paste under "Custom Script" in rambox), stolen from https://userstyles.org/styles/142096/dark-whatsapp-theme-by-mew
Raw
rambox_whatsapp_dark.css
function applycss(css){
var head = document.getElementsByTagName('head')[0];
var s = document.createElement('style');
s.setAttribute('type', 'text/css');
s.appendChild(document.createTextNode(css));
head.appendChild(s);
}
applycss(`
/**
* Everything you need to know is below:
* Source: https://github.com/vednoc/onyx
* Discord: https://discord.gg/NpT8PzA
* License: MIT
*/
:root {
--dark: #272C35;
--darker: #1F232A;
--light: #D1D1D1;
--lighter: #E9E9E9;
--accent: #7289DA;
--icon: #E1E1E1;
--shadow: rgba(0,0,0,0.10);
--mred: #A3525B;
--mgreen: #70A352;
--mblue: #527AA3;
--hover-delay: 0.8s;
--image: url(https://media.discordapp.net/attachments/310799529161129984/417408747812552715/zilesanamin.jpg);
--emojiOpacity: 0.75;
--ui-font: \'font_name\', \'Segoe UI\', \'Helvetica Neue\', \'Helvetica\', \'Lucida Grande\', \'Arial\', \'Ubuntu\', \'Cantarell\', \'Fira Sans\', sans-serif;
--version: \"WhatsApp by Mew v1.6.2\";
--message: \"Updated on 18th of November. Addressing GH issues and pull requests. \";
--changes: \"See the changelog at: https://github.com/vednoc/onyx/releases\";
}
/* Body reset. */
body {
font-family: var(--ui-font);
background: none;
background-color: var(--dark); }
/* Scrollbar track. */
*::-webkit-scrollbar-track {
background-color: var(--shadow); }
/* Scrollbar thumb. */
*::-webkit-scrollbar-thumb {
background-color: var(--accent); }
* {
scrollbar-width: thin;
scrollbar-color: var(--accent) var(--shadow); }
/* 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. */
::placeholder { color: var(--lighter) !important; }
::-moz-placeholder { color: var(--lighter) !important; }
::-webkit-input-placeholder { color: var(--lighter) !important; }
/* Progress. */
progress[value]::-webkit-progress-bar {
background: var(--darker); }
/* Value. */
progress[value]::-webkit-progress-value {
background: var(--accent); }
progress {
background: var(--darker); }
::-moz-progress-bar {
background: var(--accent) !important; }
/* App wrapper. */
#app .app {
background: none;
background-color: var(--dark); }
/* Log-in page. */
.landing-wrapper::before {
opacity: 0.6;
background-color: var(--accent) !important; }
.landing-window {
border-radius: 4px !important;
border: 1px solid var(--shadow);
box-shadow: 0 8px 32px 0 var(--shadow) !important;
background-color: var(--darker) !important; }
.landing-main + div {
background-color: var(--darker) !important; }
.landing-main + div img:not(:hover) {
opacity: 0.3; }
/* Text color. */
.landing-main * {
color: var(--light); }
/* Reload QR code. */
._1MOym {
background-color: var(--darker) !important; }
._3PxOr rect {
fill: var(--dark) !important; }
/* Fix QR code. */
.landing-wrapper div[data-ref] {
border-radius: 0;
filter: contrast(150%) !important;
outline: 4px solid white !important; }
/* Loader. */
#startup svg > circle {
stroke: var(--lighter) !important; }
/* Logo colors. */
span._3PxOr svg path:nth-child(1) {
fill: var(--dark) !important; }
/* Landing page. */
.app .iFKgT {
border: none;
background-color: var(--dark) !important; }
/* Image. */
.app .iFKgT [data-asset-intro-image] {
max-width: 200px;
max-height: 200px;
border-radius: 50%;
filter: opacity(0.75);
transition: opacity 1s ease !important; }
/* Text color. */
.app .iFKgT * {
color: var(--light); }
/* Accent bar. */
.app .iFKgT::after {
border-top-color: var(--accent) !important; }
/* Hide the text. */
.iFKgT ._3mkas { font-size: 0px; }
/** Theme note. */
.app .iFKgT ._3mkas::before {
display: block;
margin-bottom: -20px;
font-size: 16px;
content: var(--message) var(--changes) !important;
}
/** Theme info. */
.app .iFKgT ._3mkas::after {
display: block;
margin-top: 10px;
padding-top: 10px;
font-size: 16px;
content: var(--version) !important;
border-top: 1px solid var(--darker);
}
/* Left drawer. */
#app .app #side {
background-color: var(--darker); }
/* Chat list. */
#side > header {
background-color: var(--darker) !important; }
/* Enable notifications. */
#side ._2GB6m {
background-color: var(--accent) !important; }
/* Low battery. */
#side ._2t3oV {
background-color: var(--mred) !important; }
/* Phone not connected. */
#side ._1puWZ {
background-color: var(--mred) !important; }
/* Text color. */
#side ._2GB6m *,
#side ._1puWZ * {
color: var(--lighter); }
/* Global -> Search. */
._2HS9r {
border-bottom: 0px solid var(--dark);
background-color: var(--darker) !important;
background-color: transparent !important; }
/* Label background. */
.ZP8RM label, .ZP8RM._19OGD {
border: 0px solid var(--dark);
background-color: var(--dark) !important; }
/* Input element. */
.ZP8RM ._183ES,
.ZP8RM label input {
color: var(--light);
background-color: transparent; }
.ZP8RM::after,
.ZP8RM > div::after {
border-color: var(--darker) !important;
background-color: var(--dark) !important; }
/* New group and group info buttons. */
._1w-mX, ._70TS5, ._11p3Q, .r7sRK, ._8-yzK {
/* box-shadow: 0 0 8px -1px var(--shadow) !important; */
color: var(--accent) !important;
background-color: transparent !important; }
/* Hide borders. */
._2DxRd, ._39cGk {
border-color: var(--shadow) !important; }
/* Input text color. */
._44uDJ {
color: var(--light) !important; }
/* Search results. */
#side ._1AKfk {
color: var(--accent);
background-color: var(--dark); }
/* Matching results. */
#side .matched-text {
color: var(--accent) !important; }
/* Contacts wrapper. */
#pane-side, ._11GZy ._2UaNq {
background-color: transparent !important; }
/* Contacts. */
._2UaNq, ._11GZy ._26JG5 {
transition: 200ms ease-in-out;
background-color: transparent !important; }
/* On event. */
._2UaNq._3mMX1, ._2UaNq:hover {
background-color: var(--dark) !important; }
/* Text color. */
._2UaNq *:not(#z) {
color: var(--light) !important; }
/* Borders. */
._2UaNq::after, ._2WP9Q {
border-color: transparent !important; }
/* Avatar wrapper background. */
._3RWII {
box-shadow: 0 0 8px -1px var(--shadow) !important;
background-color: transparent !important; }
/* New message indicator. */
#side .P6z4j {
color: white !important;
background-color: var(--accent) !important; }
/* Settings. */
._11GZy, ._1KDYa {
background-color: var(--darker) !important; }
/* Header color. */
._11GZy header, ._1KDYa header {
min-height: 50px;
height: auto;
background-color: var(--darker) !important; }
/* Send contacts. #42 */
.WOXAS,
._1v8mQ {
background-color: transparent !important; }
/* Footer. */
._21bWq, ._22oFl {
background-color: var(--accent) !important; }
/* Reset header height. */
._11GZy header > div:first-child {
padding: 12px 0 !important;
height: auto; }
/* Reset header title in left/right drawers. */
._11GZy ._1xGbt {
margin-top: 2px !important;
font-size: 16px; }
/* Transparent sections. */
._11GZy ._1CRb5, ._1KDYa ._2LSbZ {
box-shadow: none !important;
background-color: transparent !important; }
/* Highlighted sections. */
._11GZy ._3hhmj ._1CkkN {
background-color: var(--darker) !important; }
/* Change profile picture. */
._11GZy .WX_XW, ._11GZy ._2Lbqu, ._1JS2G {
background-color: rgba(0,0,0,0.5) !important; }
/* Text color. */
._11GZy * {
color: var(--light); }
/* Input element. */
._5UNoc ._3hnO5 { border-color: var(--accent) !important; }
/* Wrapper background. */
._3979j { background-color: transparent !important }
/* Take a new profile picture. */
._2HyTU, ._22aOT {
background-color: var(--darker) !important; }
/* Confirm button. */
._2HyTU ._1g8sv, ._22aOT ._1g8sv {
box-shadow: 0 2px 4px 0 var(--shadow) !important;
background-color: var(--accent) !important; }
/* Zoom in/out. */
._1DKwn {
box-shadow: 0 2px 4px 0 var(--shadow) !important;
background-color: var(--dark) !important; }
/* Option/select elements. */
select {
color: var(--light);
border-color: var(--accent); }
select option { background-color: var(--dark); }
/* Archived chat image. */
._2fq0t ._2Lev2 {
background-color: var(--dark) !important; }
/* Body. */
._2fq0t ._2sNbV ._1CkkN,
._2fq0t ._2sNbV ._2EXPL {
background-color: transparent; }
/* On event. TODO: Fixed, but it might still overlap somewhere. */
.k1feT ._2sNbV > ._1CkkN:hover,
._2fq0t ._2sNbV ._1CkkN:hover {
background-color: var(--dark); }
/* 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; }
/** Context/dropdown menu. */
._2hHc6 {
background-color: var(--darker) !important;
box-shadow: 0 4px 16px 0 var(--shadow) !important; }
._2hHc6 li:hover, ._2hHc6 li:hover div {
color: var(--accent) !important;
background-color: var(--dark) !important; }
._2hHc6 div, ._1ArIP div {
color: var(--light); }
/* Middle drawer. */
#main {
background-color: var(--dark); }
/* Fix parent-element. #43 */
._1ays2 {
display: flex !important;
flex-direction: column !important; }
/* Doodle background. TODO: Plans for the future. */
#app [data-asset-chat-background=\"true\"] {
filter: invert(100%) opacity(0.45) !important; }
/* Main -> Group description. */
._3jzsh {
background-color: var(--darker) !important; }
/* Text colors. */
._3jzsh ._3GIEC, ._3jzsh ._6xQdq {
color: var(--lighter) !important; }
/* Jump to present button. */
._3KRbU {
box-shadow: 0 4px 8px 2px var(--shadow) !important;
background-color: var(--darker) !important; }
/* Number of messages. */
._3KRbU > span > span {
background-color: var(--accent) !important; }
/* Header. */
#main header {
border: none;
background-color: var(--dark); }
/* Text color. */
#main header ._1WBXd * {
color: var(--light); }
/* Header text color. #22 */
#main > header > div span[title] {
color: var(--light); }
/* Header separator. */
#main > header::after {
border-bottom-color: var(--darker);
background-color: transparent; }
/* Footer. */
#main footer {
border-top: 1px solid var(--darker);
background-color: var(--darker); }
/* Input wrapper. */
#main footer > div {
color: var(--light);
border: none;
/* border-bottom: 2px solid var(--dark); */
background-color: var(--dark); }
/* Input element. */
#main footer > div:nth-child(1) > div:nth-child(2) {
border: none !important;
color: var(--light);
background-color: var(--darker) !important; }
/* Unknown contact. */
._2Pown {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--dark) !important;
box-shadow: 0 -1px 0 0 inset var(--darker) !important; }
/* Buttons. */
._2ZZub {
color: var(--lighter) !important;
background-color: var(--darker) !important; }
._2ZZub:hover {
color: var(--light) !important;
box-shadow: 0 2px 4px 0 var(--shadow) !important; }
/* Shared contact button colors. */
.Ir_Ne {
color: var(--accent) !important; }
/* Shared contact text. */
.AVd_p {
color: var(--lighter) !important; }
/* View contact. */
._1VwzF {
background-color: transparent !important; }
/* Hide \'Type a message\' once focused. */
._3FeAD.focused div[style] {
color: transparent !important; }
/* Placeholder text color. */
._3FeAD div[style] {
transition: color 0.15s ease;
color: var(--lighter) !important; }
/* Right drawer. */
/* .app ._3HZor ._2fq0t {
background-color: var(--darker); } */
/* Border-color. */
.app ._3HZor {
border-left-color: transparent !important; }
/* Header. */
.app ._3HZor header {
background-color: var(--darker); }
/* Fix header text vertical position. */
.app ._3HZor ._1pYs5 {
margin-top: 4px !important; }
/* Text color. */
.app ._3HZor header div {
color: var(--light); }
/* Mute/starred messages. */
._3_-Si + ._3_-Si ._2x2XP {
border-color: var(--darker) !important; }
/* Group info sections. */
.app ._3HZor ._26JG5, .app ._3HZor ._2UaNq {
/*box-shadow: 0 1px 3px shadow /**/
box-shadow: none;
background-color: transparent; }
.app ._3HZor ._26JG5:hover {
background-color: var(--dark) !important; }
/* Fix borders. */
.app ._3HZor ._27Ie2,
.app ._3HZor ._26JG5::before {
border-color: transparent !important; }
/* User\'s name. */
.app ._3HZor span {
color: var(--light); }
.app ._3HZor ._23Un5 {
color: var(--mred); }
/** Username colors in group chat. */
.app [class*=\"color-\"] span {
color: inherit !important; }
/* Group options. */
.app ._3HZor ._1CRb5 ._2EXPL,
.app ._3HZor ._1CRb5 ._1CkkN {
transition: 200ms ease-in-out;
background-color: transparent; }
/* On event. */
.app ._3HZor ._1CRb5 ._2EXPL._3xj48:hover,
.app ._3HZor ._1CRb5 ._1CkkN:hover {
background-color: var(--dark); }
/* Text color. */
.app ._3HZor ._1CRb5 ._2EXPL * {
color: var(--light); }
/* Admin color. */
.app ._3HZor .FPZFa {
border-color: var(--accent); }
/* Search messages. TODO: Apply this to all search elements. */
.a5vst, .a5vst .ZP8RM._19OGD /*, ._3HZor ._1iMEz._3sdhb*/ {
background-color: var(--darker) !important; }
/* Input wrapper. */
.a5vst label {
border: 0px solid var(--dark) !important;
background-color: var(--dark) !important; }
.a5vst .ZP8RM::after {
border: none !important;
background-color: var(--dark) !important; }
.a5vst label input {
background-color: transparent !important; }
/* Search messages body. */
.YAPQk {
background-color: var(--darker) !important; }
/* Matching results. */
._3HZor .matched-text {
color: var(--accent) !important; }
/* On event. */
.YAPQk ._1f1zm > ._3j7s9,
.YAPQk ._3j7s9:hover {
background-color: var(--dark) !important; }
/* Search messages. */
#pane-side ._2EXPL {
background-color: transparent !important; }
/* Starred messages. */
._1WMT2 .tail:not(.PJFFv) {
background-color: var(--dark) !important; }
/* Borders. */
._1WMT2::before, ._1WMT2::after {
display: none !important; }
/* Selected message. */
._1WMT2._2V_Wj,
._1WMT2._2nA3s,
._1WMT2:hover {
transition: 200ms ease-in-out !important;
background-color: var(--dark) !important; }
/* Remove tails. */
._1WMT2 .tail-container {
display: none !important; }
/* Date text color. */
._1WMT2 ._2V2qB {
color: var(--lighter) !important; }
/* Message info. */
#app .app > div:nth-child(2) ._2rGVQ {
background-color: var(--dark) !important; }
/* Doodle image. */
#app .app > div:nth-child(2) [data-asset-chat-background=\"true\"] {
filter: invert(100%) opacity(0.8) !important; }
/* Read by. */
#app .app > div:nth-child(2) ._2AJf5,
#app .app > div:nth-child(2) ._19xqi {
box-shadow: none !important;
background-color: transparent !important; }
/* Read by text color. */
#app .app > div:nth-child(2) ._2AJf5 span {
color: var(--accent) !important; }
/* Forwarded message info. #44 */
._1NZZN, ._3XHR- {
border-color: var(--dark) !important;
background-color: transparent !important;
box-shadow: none !important; }
._1w7vp {
color: var(--light) !important; }
/* Media/docs/links section. */
._27U_m, .yrOIH {
border-bottom: 1px solid var(--dark);
background-color: var(--darker) !important; }
/* Active indicator. */
._27U_m::before {
background-color: var(--accent) !important; }
/* Text color. */
._26Nvu,
._27U_m .Y1iVg {
color: var(--lighter) !important; }
/* Selected links. */
._27U_m .Y1iVg._3caqI {
color: var(--light) !important; }
/* Selected image. */
._2Ji5m {
border-color: var(--darker) !important; }
/** Media viewer. */
._1iNsf, ._2KgjI {
background-color: transparent !important; }
/* Pseudo-element background. */
._1iNsf::before, ._2KgjI::before {
content: \"\"; position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color: var(--dark);
opacity: 0.8; z-index: -1; }
/* Chevron/preloader background. */
._3yth3 {
box-shadow: 0 2px 4px -1px var(--shadow) !important;
background-color: var(--darker) !important; }
/* Header. */
._1iNsf > div:first-child,
._2KgjI > div:first-child {
box-shadow: 0 1px 0 0 var(--darker);
background-color: var(--dark) !important; }
/* Inner element. */
._1iNsf > div:first-child > div > div,
._2KgjI > div:first-child > div > div {
background-color: transparent !important; }
/* Text color. */
._1iNsf > div:first-child > div > div *,
._2KgjI > div:first-child > div > div * {
color: var(--light); }
/* Footer. */
._2n0jo {
border-color: var(--darker) !important;
background-color: var(--dark) !important; }
/* Selected image. */
._2AP3i .cJP5q {
border: none !important;
transform: scale(1) !important;
outline: 3px solid var(--accent) !important }
._2AP3i ._1LdNS:hover:not(.cJP5q):not(#spec) {
outline: 3px solid var(--accent) !important; }
/* Highlight message bubbles. #29 */
div.message-in.velocity-animating > div > div,
div.message-out.velocity-animating > div > div {
background-color: var(--accent) !important }
.velocity-animating > .tail > .tail-container {
border-top-color: var(--accent) !important }
/* Bubble colors. #49 #54 */
.message-in > div:not(.a81-s) > div,
.message-out > div:not(.a81-s) > div {
background-color: var(--darker) !important; }
._2v02G {
color: var(--lighter) !important; }
/* Message text color. */
.message-in .selectable-text,
.message-out .selectable-text,
.quoted-mention,
._1upWv,
._3ZVco {
color: var(--light) !important; }
/* Voice messages. */
::-moz-range-thumb { background-color: var(--accent) !important }
::-moz-range-track { background-color: var(--lighter) !important }
._7sUPO { background-color: var(--accent) !important }
._1FWQp { color: var(--light) !important }
/* Use accent color for links. #20 */
a[href].selectable-text {
color: var(--accent) !important; }
/* Forwarded message. */
._15aTv {
color: var(--lighter) !important; }
/* Show more. */
._1Jc9f { color: var(--accent) !important }
/* Deleted message. */
._3uHCS { color: var(--lighter) !important }
span[class][data-icon=\"recalled-out\"] svg path { fill: red !important }
/* Phone numbers of users that aren\'t your contacts. */
#main ._1F9Ap {
color: var(--lighter) !important; }
/* Mentions. */
.matched-mention, .matched-mention .at-symbol {
color: var(--accent) !important; }
/* Message meta text color. */
[class*=\"message-\"] div > div:last-child span {
color: var(--light); }
/* Image/gif/video meta wrapper. */
.KYpDv ._1DZAH {
bottom: 8px;
padding: 2px 5px;
border-radius: 4px;
background-color: var(--shadow); }
/* Text color. */
.KYpDv ._1DZAH ._3EFt_ {
margin-top: 0px;
color: var(--lighter); }
/* Message options for images. */
._3EQsG._1eJVc {
background: none !important; }
/* Smooth transition. */
.message span:last-child div {
transition: 50ms ease-in-out !important; }
/* Typing... */
span._2ZAIy {
color: var(--accent) !important; }
/* System messages. */
.a7otO {
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. */
.a7otO * {
text-shadow: none !important;
color: var(--lighter) !important; }
/* New message. */
#main ._3Xx0y {
border: none !important;
background-color: var(--darker) !important; }
/* X unread messages. */
#main ._3Xx0y span {
box-shadow: 0 0 8px 0 var(--shadow) !important;
color: var(--light) !important;
background-color: var(--dark) !important; }
/* Loader. */
._2sOZc {
box-shadow: 0 2px 4px -1px var(--shadow) !important;
background-color: var(--darker) !important; }
/* Document embeds. */
._3a29n, ._1mrMQ {
background-color: var(--dark) !important; }
/* Embeds description */
.HNuTV {
background-color: var(--dark) !important; }
/* Link embeds. */
._3qblR, ._1SsXF {
box-shadow: 0 0 0 1px var(--dark) !important;
background-color: var(--dark) !important; }
/* Thumbnail. */
._3_nIn {
background-color: var(--darker) !important; }
/* Reply section. (= */
footer ._1ebw2 {
box-shadow: 0 0px 8px 0 var(--darker) !important;
background-color: var(--darker) !important; }
/* Fix margins. */
footer ._1ebw2 > div:first-child {
margin: 0 0 5px 10px !important;
background-color: transparent !important; }
/* Reply content. */
footer ._1ebw2 > div:first-child > div {
background-color: var(--dark) !important; }
/* Close button. */
footer ._1ebw2 > div:last-child {
position: relative;
margin: 0 8px 5px 8px !important;
background-color: transparent !important; }
/* Make the button larger. */
footer ._1ebw2 > div:last-child > div svg {
padding: 18px;
border-radius: 6px;
background-color: var(--dark); }
/* Mention group members. */
._2j-wI, .XSeqj {
color: var(--light);
border-left: none !important;
background-color: var(--darker) !important; }
/* Wrapper. */
._2j-wI .XSeqj {
transition: 300ms ease-in-out !important;
background-color: transparent !important; }
/* Active. */
._2j-wI .XSeqj._1Yz8K,
._2j-wI .XSeqj:hover {
background-color: var(--accent) !important; }
/* Select messages. */
#main ._2AqZl {
background-color: var(--shadow); }
/* Hover over messages. */
#main .qTFAl {
transition: 0.15s ease !important; }
/* Selected message. */
#main .qTFAl:hover, #main .qTFAl._3Z2tD {
background-color: var(--shadow) !important; }
/* Selected icon. */
._15wNI {
border-color: var(--accent) !important;
background-color: var(--accent) !important; }
/* Checkmark. */
._15wNI ._1ygtt {
border-bottom-color: var(--light);
border-right-color: var(--light); }
/* Footer/control/options. */
#main ._1hhkM {
background-color: var(--darker); }
/*
Fixes message content/timestamp overlapping.
Apparently they forgot to add nl-specific styles. XD
*/
html[lang=nl] .EopGb { width: 56px }
html[lang=nl] ._2COY9 { width: 92px }
/* Bubble tails -- experimental. */
.tail .tail-container {
width: 0px !important;
height: 10px !important;
z-index: 0 !important;
border-top: 12px solid var(--darker);
background: none !important; }
.message-in > .tail > .tail-container {
left: -10px !important; top: 0px;
border-left: 10px solid transparent;
border-radius: 5px 0 0 0; }
.message-out > .tail > .tail-container {
right: -10px !important; top: 0px;
border-right: 10px solid transparent;
border-radius: 0 5px 0 0; }
/* Disable tails everywhere. */
/* Tails are enabled. */
/* Disable tails everywhere except in chat. */
.starred-msg-wrapper .tail-container,
.message-gallery .tail-container,
.MS-DH .tail-container {
display: none !important; }
/* Rounded corners. */
.message-gallery.tail-override-left,
.MS-DH .tail-override-left {
border-radius: 7.5px !important; }
/** Stickers. */
._1rK-b {
background: none !important; }
/* Sender. */
._3Mf7Z {
background-color: var(--darker) !important; }
/* Time/status. */
._3qAvH {
background-color: var(--darker) !important; }
._3qAvH * {
color: var(--light) !important; }
/* Message options. */
._15CAo {
background: linear-gradient(90deg, transparent, var(--darker) 40%) !important;
}
/* Reset sticker menu background. */
.a81-s > div + span > div { background: none !important }
/* Context menu buttons. */
[data-js-context-icon=\'true\'] {
background-image: none !important;
background: none !important; }
[data-js-context-icon=\'true\'] + div { background: var(--darker) !important }
/* Emoji/gif/stickers menu. */
.QChXd, ._20KNO, .RxbUw, ._2PpWQ > div {
background-color: var(--dark) !important; }
/* Temporary fix for emoji container. */
#main footer > div:nth-child(2) > div {
border: 0; }
/* Nib. */
.iqJMX {
background-color: var(--dark) !important; }
/* Emoji tabs. */
._2avTY {
background: var(--darker) !important; }
/* Tab indicator. */
._2avTY .Orl3a,
._1Wbpa {
background-color: var(--accent) !important; }
/* Active button. */
._1oNFt.-XQxp path {
fill: var(--accent) !important; }
/* Search emojis. */
._2Qm0c, ._2Qm0c label {
box-shadow: none !important;
background-color: var(--dark) !important; }
/* Text color. */
._2Qm0c input {
color: var(--light) !important; }
/* Gif preloader background. */
._2x9yi {
/* border: 2px dashed ; */
background-color: var(--darker) !important; }
/* Preview. */
._1drQ- {
background-color: var(--dark) !important; }
/* Header. */
._1drQ- header {
background-color: var(--accent) !important; }
/* Text color. */
._1drQ- header *, ._1drQ- .media-body * {
color: var(--lighter) !important; }
/* Footer. */
._1drQ- .media-collection {
background-color: var(--darker); }
/* Button. */
._1drQ- .media-collection .btn-fill, ._1drQ- ._3hV1n {
color: var(--lighter);
background-color: var(--accent) !important; }
/* Emoji-wanna-be-round. */
.emojik {
opacity: var(--emojiOpacity);
transition: transform 200ms cubic-bezier(0.59, 0.57, 0.39, 1.04); }
/* Selected emoji. */
.emojik:focus, .emojik:hover, .emojik.selected {
box-shadow: none !important;
opacity: 1;
transform: scale(1.15); }
/* Emoji quick selection. */
._2mlOb {
border: 0 !important;
border-bottom: 1px solid var(--darker) !important;
background-color: var(--darker) !important; }
/* Emoji race color popup. */
._1gFYk {
background-color: var(--dark) !important; }
/* Separator. */
._1gFYk ul li:first-child {
border-right: 1px solid var(--darker) !important; }
/* Emoji menu triangle. */
._1gFYk .iqJMX {
background-color: var(--dark) !important; }
/* Quick replies. #56 */
._1omcu._2saG0, ._2saG0 {
background-color: var(--darker) !important; }
/* Android emojis. */
.emojik.wa.b0 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/0.webp\")}
.emojik.wa.b1 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/1.webp\")}
.emojik.wa.b2 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/2.webp\")}
.emojik.wa.b3 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/3.webp\")}
.emojik.wa.b4 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/4.webp\")}
.emojik.wa.b5 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/5.webp\")}
.emojik.wa.b6 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/6.webp\")}
.emojik.wa.b7 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/7.webp\")}
.emojik.wa.b8 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/8.webp\")}
.emojik.wa.b9 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/9.webp\")}
.emojik.wa.b10 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/10.webp\")}
.emojik.wa.b11 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/11.webp\")}
.emojik.wa.b12 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/12.webp\")}
.emojik.wa.b13 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/13.webp\")}
.emojik.wa.b14 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/14.webp\")}
.emojik.wa.b15 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/15.webp\")}
.emojik.wa.b16 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/16.webp\")}
.emojik.wa.b17 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/17.webp\")}
.emojik.wa.b18 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/18.webp\")}
.emojik.wa.b19 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/19.webp\")}
.emojik.wa.b20 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/20.webp\")}
.emojik.wa.b21 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/21.webp\")}
.emojik.wa.b22 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/22.webp\")}
.emojik.wa.b23 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/23.webp\")}
.emojik.wa.b24 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/24.webp\")}
.emojik.wa.b25 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/25.webp\")}
.emojik.wa.b26 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/26.webp\")}
.emojik.wa.b27 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/27.webp\")}
.emojik.wa.b28 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/28.webp\")}
.emojik.wa.b29 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/29.webp\")}
.emojik.wa.b30 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/30.webp\")}
.emojik.wa.b31 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/31.webp\")}
.emojik.wa.b32 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/32.webp\")}
.emojik.wa.b33 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/33.webp\")}
.emojik.wa.b34 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/34.webp\")}
.emojik.wa.b35 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/35.webp\")}
.emojik.wa.b36 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/36.webp\")}
.emojik.wa.b37 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/37.webp\")}
.emojik.wa.b38 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/38.webp\")}
.emojik.wa.b39 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/39.webp\")}
.emojik.wa.b40 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/40.webp\")}
.emojik.wa.b41 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/41.webp\")}
.emojik.wa.b42 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/42.webp\")}
.emojik.wa.b43 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/43.webp\")}
.emojik.wa.b44 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/44.webp\")}
.emojik.wa.b45 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/45.webp\")}
.emojik.wa.b46 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/46.webp\")}
.emojik.wa.b47 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/47.webp\")}
.emojik.wa.b48 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/48.webp\")}
.emojik.wa.b49 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/49.webp\")}
.emojik.wa.b50 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/50.webp\")}
.emojik.wa.b51 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/51.webp\")}
.emojik.wa.b52 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/52.webp\")}
.emojik.wa.b53 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/53.webp\")}
.emojik.wa.b54 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/54.webp\")}
.emojik.wa.b55 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/55.webp\")}
.emojik.wa.b56 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/56.webp\")}
.emojik.wa.b57 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/57.webp\")}
.emojik.wa.b58 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/58.webp\")}
.emojik.wa.b59 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/59.webp\")}
.emojik.wa.b60 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/60.webp\")}
.emojik.wa.b61 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/61.webp\")}
.emojik.wa.b62 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/62.webp\")}
.emojik.wa.b63 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/63.webp\")}
.emojik.wa.b64 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/64.webp\")}
.emojik.wa.b65 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/65.webp\")}
.emojik.wa.b66 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/66.webp\")}
.emojik.wa.b67 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/67.webp\")}
.emojik.wa.b68 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/68.webp\")}
.emojik.wa.b69 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/69.webp\")}
.emojik.wa.b70 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/70.webp\")}
.emojik.wa.b71 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/71.webp\")}
.emojik.wa.b72 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/72.webp\")}
.emojik.wa.b73 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/73.webp\")}
.emojik.wa.b74 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/74.webp\")}
.emojik.wa.b75 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/75.webp\")}
.emojik.wa.b76 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/76.webp\")}
.emojik.wa.b77 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/77.webp\")}
.emojik.wa.b78 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/78.webp\")}
.emojik.wa.b79 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/79.webp\")}
.emojik.wa.b80 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/80.webp\")}
.emojik.wa.b81 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/81.webp\")}
.emojik.wa.b82 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/82.webp\")}
.emojik.wa.b83 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/83.webp\")}
.emojik.wa.b84 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/84.webp\")}
.emojik.wa.b85 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/85.webp\")}
.emojik.wa.b86 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/86.webp\")}
.emojik.wa.b87 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/87.webp\")}
.emojik.wa.b88 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/88.webp\")}
.emojik.wa.b89 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/89.webp\")}
.emojik.wa.b90 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/90.webp\")}
.emojik.wa.b91 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/91.webp\")}
.emojik.wa.b92 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/92.webp\")}
.emojik.wa.b93 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/93.webp\")}
.emojik.wa.b94 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/94.webp\")}
.emojik.wa.b95 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/95.webp\")}
.emojik.wa.b96 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/96.webp\")}
.emojik.wa.b97 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/97.webp\")}
.emojik.wa.b98 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/98.webp\")}
.emojik.wa.b99 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/99.webp\")}
.emojik.wa.b100 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/100.webp\")}
.emojik.wa.b101 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/a/101.webp\")}
/* iOS emojis. */
.emojik.apple.b0 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/0.webp\")}
.emojik.apple.b1 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/1.webp\")}
.emojik.apple.b2 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/2.webp\")}
.emojik.apple.b3 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/3.webp\")}
.emojik.apple.b4 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/4.webp\")}
.emojik.apple.b5 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/5.webp\")}
.emojik.apple.b6 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/6.webp\")}
.emojik.apple.b7 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/7.webp\")}
.emojik.apple.b8 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/8.webp\")}
.emojik.apple.b9 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/9.webp\")}
.emojik.apple.b10 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/10.webp\")}
.emojik.apple.b11 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/11.webp\")}
.emojik.apple.b12 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/12.webp\")}
.emojik.apple.b13 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/13.webp\")}
.emojik.apple.b14 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/14.webp\")}
.emojik.apple.b15 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/15.webp\")}
.emojik.apple.b16 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/16.webp\")}
.emojik.apple.b17 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/17.webp\")}
.emojik.apple.b18 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/18.webp\")}
.emojik.apple.b19 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/19.webp\")}
.emojik.apple.b20 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/20.webp\")}
.emojik.apple.b21 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/21.webp\")}
.emojik.apple.b22 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/22.webp\")}
.emojik.apple.b23 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/23.webp\")}
.emojik.apple.b24 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/24.webp\")}
.emojik.apple.b25 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/25.webp\")}
.emojik.apple.b26 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/26.webp\")}
.emojik.apple.b27 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/27.webp\")}
.emojik.apple.b28 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/28.webp\")}
.emojik.apple.b29 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/29.webp\")}
.emojik.apple.b30 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/30.webp\")}
.emojik.apple.b31 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/31.webp\")}
.emojik.apple.b32 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/32.webp\")}
.emojik.apple.b33 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/33.webp\")}
.emojik.apple.b34 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/34.webp\")}
.emojik.apple.b35 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/35.webp\")}
.emojik.apple.b36 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/36.webp\")}
.emojik.apple.b37 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/37.webp\")}
.emojik.apple.b38 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/38.webp\")}
.emojik.apple.b39 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/39.webp\")}
.emojik.apple.b40 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/40.webp\")}
.emojik.apple.b41 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/41.webp\")}
.emojik.apple.b42 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/42.webp\")}
.emojik.apple.b43 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/43.webp\")}
.emojik.apple.b44 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/44.webp\")}
.emojik.apple.b45 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/45.webp\")}
.emojik.apple.b46 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/46.webp\")}
.emojik.apple.b47 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/47.webp\")}
.emojik.apple.b48 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/48.webp\")}
.emojik.apple.b49 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/49.webp\")}
.emojik.apple.b50 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/50.webp\")}
.emojik.apple.b51 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/51.webp\")}
.emojik.apple.b52 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/52.webp\")}
.emojik.apple.b53 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/53.webp\")}
.emojik.apple.b54 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/54.webp\")}
.emojik.apple.b55 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/55.webp\")}
.emojik.apple.b56 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/56.webp\")}
.emojik.apple.b57 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/57.webp\")}
.emojik.apple.b58 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/58.webp\")}
.emojik.apple.b59 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/59.webp\")}
.emojik.apple.b60 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/60.webp\")}
.emojik.apple.b61 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/61.webp\")}
.emojik.apple.b62 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/62.webp\")}
.emojik.apple.b63 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/63.webp\")}
.emojik.apple.b64 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/64.webp\")}
.emojik.apple.b65 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/65.webp\")}
.emojik.apple.b66 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/66.webp\")}
.emojik.apple.b67 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/67.webp\")}
.emojik.apple.b68 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/68.webp\")}
.emojik.apple.b69 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/69.webp\")}
.emojik.apple.b70 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/70.webp\")}
.emojik.apple.b71 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/71.webp\")}
.emojik.apple.b72 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/72.webp\")}
.emojik.apple.b73 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/73.webp\")}
.emojik.apple.b74 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/74.webp\")}
.emojik.apple.b75 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/75.webp\")}
.emojik.apple.b76 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/76.webp\")}
.emojik.apple.b77 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/77.webp\")}
.emojik.apple.b78 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/78.webp\")}
.emojik.apple.b79 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/79.webp\")}
.emojik.apple.b80 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/80.webp\")}
.emojik.apple.b81 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/81.webp\")}
.emojik.apple.b82 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/82.webp\")}
.emojik.apple.b83 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/83.webp\")}
.emojik.apple.b84 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/84.webp\")}
.emojik.apple.b85 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/85.webp\")}
.emojik.apple.b86 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/86.webp\")}
.emojik.apple.b87 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/87.webp\")}
.emojik.apple.b88 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/88.webp\")}
.emojik.apple.b89 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/89.webp\")}
.emojik.apple.b90 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/90.webp\")}
.emojik.apple.b91 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/91.webp\")}
.emojik.apple.b92 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/92.webp\")}
.emojik.apple.b93 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/93.webp\")}
.emojik.apple.b94 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/94.webp\")}
.emojik.apple.b95 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/95.webp\")}
.emojik.apple.b96 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/96.webp\")}
.emojik.apple.b97 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/97.webp\")}
.emojik.apple.b98 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/98.webp\")}
.emojik.apple.b99 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/99.webp\")}
.emojik.apple.b100 {background-image: url(\"https://raw.githubusercontent.com/vednoc/wae/dev/i/100.webp\")}
/* Backdrop. */
._3Fq9Y, #startup, #initial_startup {
background-color: var(--dark) !important; }
/* Modal. */
._3Fq9Y ._3RiLE,
._3gUiM ._2dA13 ._1CnF3,
._2dA13 ._18wuJ, ._2dA13 .IuYNx {
box-shadow: 0 0 0 1px var(--darker), 0 8px 16px 0px var(--shadow) !important;
background-color: var(--darker) !important; }
/* Selected contact. */
._3gUiM ._2EXPL._1f1zm,
._3gUiM ._2EXPL:hover,
._2EXPL._3ntaf:hover {
background-color: var(--dark) !important; }
/* Text color. */
._3Fq9Y ._3RiLE *,
._3gUiM ._1CnF3 * {
color: var(--light); }
/* Header/footer. */
.XOIaT {
background-color: var(--dark) !important; }
/* Empty element below search bar. */
._2fq0t span._3fOoY {
display: none !important; }
/* Accent buttons. */
._3PQ7V {
color: var(--lighter) !important;
background-color: var(--accent) !important; }
._3PQ7V:hover {
opacity: 0.8; }
/* Link buttons. */
._23_1v:hover {
box-shadow: none !important;
color: var(--accent) !important;
background-color: transparent !important; }
/* Muted checkbox color. */
._1VD7W {
border-color: var(--accent);
background-color: var(--accent); }
/* Buttons. */
.PNlAR:hover, ._1WZqU:hover {
background-color: var(--dark) !important; }
/* Drop items. (-: */
.drag-drop, ._2n-96 {
background-color: var(--dark) !important; }
/* Footer. */
.NeQRT {
background-color: var(--darker) !important; }
/* Border. */
._2n-96 ._3L-be {
border: 5px dashed var(--accent) !important;
color: var(--light) !important; }
/* Add file icon. */
.GpvML, ._1ypOz, ._3fktq, ._1g8sv {
background-color: var(--dark) !important;
box-shadow: 0 2px 4px var(--shadow) !important; }
/* Border. */
._1gcLL::after {
background-color: var(--accent) !important; }
/* Accent border. */
.CzI8E, ._31WRs ._1DTd4, ._2Fvnm ._3ogpF {
border-bottom-color: var(--accent) !important; }
/* Text color. */
._7HWvs, .A_Kh_ {
color: var(--light) !important; }
/** Status area! */
.app-wrapper-web ._2dLx9 {
background-color: transparent !important; }
/* Pseudo-element background. */
.app-wrapper-web ._2dLx9::before {
content: \"\"; position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color: var(--dark);
opacity: 0.8; z-index: -1; }
/* Status icon. */
span[data-icon*=\"status-v3\"] > svg > path:first-child {
opacity: 0.55 !important; }
/* Left hand side. */
._2dLx9 .IMn_C { background-color: var(--darker) !important; }
/* Text color. */
.IMn_C span { color: var(--light) !important; }
.qlhJH hr { color: var(--dark) !important; }
/* Right hand side. */
._2dLx9 ._3MBzN { background-color: var(--dark) !important; }
/* Text color. */
._2dLx9 ._3MBzN div { color: var(--lighter) !important; }
/* Reply to status. */
.QRsOy { background-color: var(--dark) !important; }
/* Input bar. */
._3FeAD._2nW8k { background-color: var(--dark) !important; }
/* Remove weird iframes. */
object { display: none !important; }
/* Global icon color. */
span[data-icon^=\"business-\"] > svg path,
span:not([data-icon=\"image\"]) > svg > path {
transition: 200ms ease;
fill: var(--icon) !important; }
/* On event. */
span:not([data-icon=\"image\"]):hover > svg > path {
/* fill: var(--accent) !important; */
opacity: 0.3 !important; }
/* Upload files. */
.azEEh { color:var(--light) !important; }
._2sn3C { background-color: var(--darker) !important; }
.Ijb1Q::after { box-shadow: 0 4px 8px 2px var(--shadow) !important; }
/* Default profile picture background. */
span[data-icon^=\"default-\"] svg > path:first-child {
fill: var(--dark) !important; }
span[data-icon^=\"default-\"] svg path:last-child {
opacity: 0.7;
fill: var(--icon) !important; }
/* Sent message. */
span[data-icon=\"msg-dblcheck\"] svg path,
span[data-icon=\"status-dblcheck\"] svg path,
span[data-icon=\"msg-check\"] svg path,
span[data-icon=\"status-check\"] svg path {
fill: var(--light) !important;
opacity: 0.5 !important; }
/* Sent AND seen message. */
span[data-icon=\"msg-dblcheck-ack\"] svg path,
span[data-icon=\"status-dblcheck-ack\"] svg path,
span[data-icon=\"msg-dblcheck-ack-light\"] svg path,
span[data-icon=\"status-v3-unread\"] > svg > path:last-child {
fill: var(--accent) !important;
opacity: 1 !important; }
/* Misc icons fix. */
span[data-icon^=\"chevron-\"] svg path,
span[data-icon=\"x-viewer\"] svg path,
span[data-icon=\"download\"] svg path,
span[data-icon=\"forward\"] svg path,
span[data-icon=\"star-btn\"] svg path,
span[data-icon=\"audio-file\"] svg path:last-child,
span[data-icon=\"new-group\"] svg path,
span[data-icon=\"add-user-light\"] svg path,
span[data-icon=\"link\"] svg path {
fill: var(--icon) !important; }
/* Audio message icons. #55 */
span[data-icon^=\"ptt-\"] svg path:first-child {
fill: var(--dark) !important; }
span[data-icon^=\"ptt-\"] svg path:last-child {
fill: var(--accent) !important; }
span[data-icon=\"ptt-out-gray\"] svg path:last-child {
fill: var(--icon) !important; }
/* Logo. */
._3CSsZ > svg > path:first-child {
fill: var(--accent) !important; }
span[data-icon=\"logo\"] svg path:nth-child(1) {
fill: white !important; }
span[data-icon=\"alert-phone\"] svg path:first-child,
span[data-icon=\"logo\"] svg path:nth-child(1n+2),
span[data-icon=\"whatsapp-logo\"] svg path:first-child {
fill: var(--darker) !important; }
/* GIF icon opacity. */
span[data-icon=\"emoji-gifs\"] svg path {
fill: var(--icon) !important;
fill-opacity: 1 !important; }
/* Be cautious icons. */
span[data-icon=\"exit\"] svg path,
span[data-icon=\"thumbs-down\"] svg path,
span[data-icon=\"delete-danger\"] svg path {
fill: var(--mred) !important; }
/* Audio message. */
span[data-icon=\"audio-file\"] svg path {
fill: rgba(255, 173, 31, 0.8) !important; }
/* Audio length bar. */
._22cMG.fS1bA .nDKsM {
background-color: var(--accent) !important; }
/* Slider thumb. */
input[type=range]::-webkit-slider-thumb {
cursor: pointer;
background: var(--accent) !important; }
/* Audio length. */
._3HwRC, ._1lxsr {
color: var(--light) !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 {
display: none !important;
}
}
@media screen and (min-width: 1441px) {
/* Animation. */
html[dir=ltr] ._3dqpi {
/* display: none !important; */
animation: _104Un 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.38); }
/* App wrapper. */
#app .app {
border-radius: 8px;
box-shadow: 0 4px 24px -2px var(--shadow); }
/* Fullscreen. */
/* Fullscreen is disabled. */
/* App background. */
#app > div::after {
top: 0px; right: 0px;
bottom: 0px; left: 0px;
height: auto; width: auto;
background-color: var(--dark) !important;
background-image: var(--image) !important;
background-repeat: no-repeat;
background-size: cover;
background-position: center; }
}
/* \"Privacy mode.\" */
/* Blurred contacts are disabled. */
/* Blurred images are disabled. */
/* Compact mode. */
/* Reset min app height/width reset. */
@media screen and (max-height: 500px) { #app > div > .app { min-height: auto; }}
@media screen and (max-width: 648px) { #app > div > .app { min-width: auto; }}
/* Custom compact mode. */
@media screen and (max-width:720px) {
/* .app > div div:hover { box-shadow: 0 0 0 2px inset crimson !important; } /**/
/* Fix header width hiding icons. */
#side > header { min-width: 240px; }
/* Hide notifications. */
#side > header + span { display: none }
/* Search bar width. */
.ZP8RM:not(._19OGD) label { padding: 0px; }
/* ? Reset panes. */
.three > div:nth-child(3),
.three > div:nth-child(2) > div:nth-child(1),
.two > div:nth-child(2) > div:nth-child(1),
.two > div:nth-child(3) {
flex: 0 0 75px !important; }
/* Settings/Starred/Etc. */
.two > div:nth-child(2) > div._3kF8H {
transition: 0.3s ease-in-out !important;
flex: 0 0 75px !important; }
.two > div:nth-child(2) > div._3kF8H:hover {
flex: 0 0 30% !important; }
/* Upload preview. */
.two > div:nth-child(2) > div._2rI9W {
flex: 0 0 calc(100% - 75px) !important; }
/* Don\'t expand contacts if there are 3 panes. */
.three > div:nth-child(3):hover {
flex: 0 0 75px !important; }
/* Expand contacts. */
.two > div:nth-child(3) {
min-width: 1px !important;
transition: 0.3s ease-in-out !important;
transition-delay: 0.2s !important; }
.two > div:nth-child(3):hover {
min-width: 400px !important;
transition-delay: var(--hover-delay) !important;
flex: 0 0 30% !important; }
/* Pane -> Chat. */
.three ._2rI9W { flex: 1 1 auto !important; }
/* Pane -> Info. */
.three ._1C9rS {
max-width: 400px;
width: calc(100% - 76px); }
/* ? Hack for positioning unread counter. */
._2UaNq .xD91K {
z-index: 199 !important;
display: flex !important;
flex-direction: row-reverse !important; }
/* ? Unread counter. */
._2UaNq .xD91K ._1ZMSM .P6z4j {
z-index: 999 !important;
line-height: 23px !important;
margin: 7px 00px 0px -60px !important;
transition: 0.15s ease !important;
box-shadow: 0 0 0 3px var(--darker) !important; }
/* On event. */
#side ._2UaNq._3mMX1 .xD91K .P6z4j, #side ._2UaNq:hover .xD91K .P6z4j {
/* color: var(--accent) !important;
background-color: var(--darker) !important; */
box-shadow: 0 0 0 3px var(--dark) !important; }
/* Reset text position. */
._2UaNq .xD91K span[dir] { margin-left: 10px; }
/* Remove icons we don\'t need. */
#side ._1ZMSM > span:not(.P6z4j) { display: none !important }
/* Remove overflow for unread messages counter. */
#side ._0LqQ {
margin-left: -10px !important;
overflow: unset !important }
/* Message dropdown thing; fixes ticks jumping left and right. */
#side ._0LqQ > span:last-child:not(._17TaE) { display: none !important }
/* ? Hack for positioning message status. */
._3VIru {
z-index: 101;
position: absolute;
margin: 5px 0 0 -20px;
border-radius: 50%;
transition: 0.15s ease !important;
background-color: var(--dark);
box-shadow: 0 0 0 3px var(--darker); }
/* Make SVG smaller. */
._3VIru > span > svg {
padding: 2px;
height: 14px !important;
width: 14px !important; }
/* Background on event. */
._2UaNq:hover ._3VIru, ._2UaNq._3mMX1 ._3VIru {
background-color: var(--darker);
box-shadow: 0 0 0 3px var(--dark) !important; }
}
/* Custom CSS rules. */
/**
* Userstyles.org limitations prevent this;
* Install UserCSS version from GitHub to use it.
*/
#side .ZP8RM { background-color: var(--dark); }
`);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment