Last active
July 10, 2024 22:17
-
-
Save eRQee/6199bbccd220d70047aa821ca72d7840 to your computer and use it in GitHub Desktop.
Rambox Custom Code for Whatsapp Dark Theme - Styles by Vednoc :: https://github.com/vednoc/dark-whatsapp
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(` | |
:root:not(#z), | |
.dark:not(#z) { | |
--version: 'Dark-WhatsApp Lite 3.3.0 — November 1st, 2020'; | |
--message: 'The v3 is here! 🎉 I wrote a blog post about it here: https://vednoc.me/blog/next-gen-of-dark-whatsapp \A\AI started working on an alternative to USo, currently in very early stages: https://userstyles.world 👀 \A\ARead more about v3, as always, in the project changelog:'; | |
--changes: '\A https://github.com/vednoc/dark-whatsapp\A\A\AP.S. CSS can not add links, only fake/pseudo text.'; | |
--ui-font: 'font_name', Segoe UI, Helvetica Neue, Helvetica, Lucida Grande, Arial, Ubuntu, Cantarell, Fira Sans, sans-serif; | |
--r-menus: 4px; | |
--r-inputs: 24px; | |
--r-avatars: 50%; | |
--c-m-hover: 0.6s; | |
--c-m-delay: 1.2s; | |
--blur-in: 0.4s; | |
--blur-out: 0.2s; | |
--app-width: 1396px; | |
--emoji-o: 0.8; | |
--bg-image: url("https://raw.githubusercontent.com/vednoc/dark-whatsapp/master/images/bg-blur-high.jpg"); | |
--bg-opacity: 0.4; | |
--bg-blur: 0px; | |
--bg-blur-s: calc(-2 * var(--bg-blur)); | |
--bg-hue: 320deg; | |
--bg-invert: 0; | |
--bg-size: cover; | |
--bg-pos: center; | |
--bg-rep: no-repeat; | |
--chat-image: url("https://web.whatsapp.com/img/bg-chat-tile_9e8a2898faedb7db9bf5638405cf81ae.png"); | |
--chat-bg-o: 0.15; | |
--chat-bg-i: 0.6; | |
--chat-bg-s: initial; | |
--chat-bg-p: top left; | |
--chat-bg-r: repeat; | |
--msg-in-0: var(--bg-4); | |
--msg-in-0-rgb: var(--bg-4-rgb); | |
--msg-in-1: var(--bg-3); | |
--msg-in-1-rgb: var(--bg-3-rgb); | |
--msg-out-0: var(--ac-4); | |
--msg-out-0-rgb: var(--ac-4-rgb); | |
--msg-out-1: var(--ac-5); | |
--msg-out-1-rgb: var(--ac-5-rgb); | |
--msg-ack: var(--ac-0); | |
--msg-ack-rgb: var(--ac-0-rgb); | |
--gray-30: var(--bg-5); | |
--gray-30-rgb: var(--bg-5-rgb); | |
--gray-700: var(--fg-4); | |
--gray-700-rgb: var(--fg-4-rgb); | |
--pale-blue-green: var(--b6-4); | |
--pale-blue-green-rgb: var(--b6-4-rgb); | |
--pale-green: var(--b4-4); | |
--pale-green-rgb: var(--b4-4-rgb); | |
--pale-yellow: var(--b3-4); | |
--pale-yellow-rgb: var(--b3-4-rgb); | |
--teal: var(--ac-0); | |
--teal-rgb: var(--ac-0-rgb); | |
--teal-light: var(--ac-1); | |
--teal-light-rgb: var(--ac-1-rgb); | |
--teal-lighter: var(--ac-2); | |
--teal-lighter-rgb: var(--ac-2); | |
--green-deep: var(--ac-3); | |
--green-deep-rgb: var(--ac-3-rgb); | |
--active-tab-marker: var(--ac-0); | |
--active-tab-marker-rgb: var(--ac-0-rgb); | |
--app-background-stripe: var(--bg-1); | |
--app-background-stripe-rgb: var(--bg-1-rgb); | |
--app-background: var(--bg-0); | |
--app-background-rgb: var(--bg-0-rgb); | |
--app-background-deeper: var(--bg-0); | |
--app-background-deeper-rgb: var(--bg-0-rgb); | |
--attach-media-drop-border: var(--fg-3); | |
--attach-media-drop-border-rgb: var(--fg-3-rgb); | |
--attach-media-drop-overlay: var(--bg-2); | |
--attach-media-drop-overlay-rgb: var(--bg-2-rgb); | |
--audio-progress-incoming: var(--b4-0); | |
--audio-progress-incoming-rgb: var(--b4-0-rgb); | |
--audio-progress-outgoing: var(--ac-2); | |
--audio-progress-outgoing-rgb: var(--ac-2-rgb); | |
--audio-progress-played-incoming: var(--b6-0); | |
--audio-progress-played-incoming-rgb: var(--b6-0-rgb); | |
--audio-progress-played-outgoing: var(--b6-0); | |
--audio-progress-played-outgoing-rgb: var(--b6-0-rgb); | |
--audio-track-incoming: var(--fg-4); | |
--audio-track-incoming-rgb: var(--fg-4-rgb); | |
--audio-track-outgoing: var(--fg-4); | |
--audio-track-outgoing-rgb: var(--fg-4-rgb); | |
--avatar-background: var(--bg-1); | |
--avatar-background-rgb: var(--bg-1-rgb); | |
--avatar-border: var(--bg-3); | |
--avatar-border-rgb: var(--bg-3-rgb); | |
--avatar-placeholder-background: var(--bg-5); | |
--avatar-placeholder-background-rgb: var(--bg-5-rgb); | |
--avatar-placeholder-primary: var(--fg-3); | |
--avatar-placeholder-primary-rgb: var(--fg-3-rgb); | |
--background-default: var(--bg-2); | |
--background-default-rgb: var(--bg-2-rgb); | |
--background-default-active: var(--bg-4); | |
--background-default-active-rgb: var(--bg-4-rgb); | |
--background-default-hover: var(--bg-3); | |
--background-default-hover-rgb: var(--bg-3-rgb); | |
--border-bubble: var(--shadow); | |
--border-bubble-rgb: var(--shadow-rgb); | |
--border-default: var(--bg-3); | |
--border-default-rgb: var(--bg-3-rgb); | |
--border-list: var(--bg-3); | |
--border-list-rgb: var(--bg-3-rgb); | |
--border-panel: var(--bg-5); | |
--border-panel-rgb: var(--bg-5-rgb); | |
--border-strong: var(--bg-5); | |
--border-strong-rgb: var(--bg-5-rgb); | |
--border-stronger: var(--bg-5); | |
--border-stronger-rgb: var(--fg-5-rgb); | |
--bubble-meta: var(--fg-3); | |
--bubble-meta-rgb: var(--fg-3-rgb); | |
--bubble-meta-icon: var(--fg-3); | |
--bubble-meta-icon-rgb: var(--fg-3-rgb); | |
--butterbar-battery-background: var(--b1-4); | |
--butterbar-battery-background-rgb: var(--b1-4-rgb); | |
--butterbar-battery-icon: var(--b1-0); | |
--butterbar-battery-icon-rgb: var(--b1-0-rgb); | |
--butterbar-battery-primary: var(--fg-0); | |
--butterbar-battery-primary-rgb: var(--fg-0-rgb); | |
--butterbar-battery-secondary: var(--fg-4); | |
--butterbar-battery-secondary-rgb: var(--fg-4-rgb); | |
--butterbar-connection-background: var(--b3-4); | |
--butterbar-connection-background-rgb: var(--b3-4-rgb); | |
--butterbar-connection-primary: var(--fg-0); | |
--butterbar-connection-primary-rgb: var(--fg-0-rgb); | |
--butterbar-connection-secondary: var(--fg-4); | |
--butterbar-connection-secondary-rgb: var(--fg-4-rgb); | |
--butterbar-default-background: var(--b6-4); | |
--butterbar-default-background-rgb: var(--b6-4); | |
--butterbar-icon: var(--b3-0); | |
--butterbar-icon-rgb: var(--b3-0-rgb); | |
--butterbar-notification-icon: var(--b6-0); | |
--butterbar-notification-icon-rgb: var(--b6-0-rgb); | |
--butterbar-primary: var(--fg-0); | |
--butterbar-primary-rgb: var(--fg-0-rgb); | |
--butterbar-secondary: var(--fg-4); | |
--butterbar-secondary-rgb: var(--fg-4-rgb); | |
--butterbar-update-background: var(--b4-4); | |
--butterbar-update-background-rgb: var(--b4-4-rgb); | |
--butterbar-update-icon: var(--b4-0); | |
--butterbar-update-icon-rgb: var(--b4-0-rgb); | |
--button-alternative: var(--ac-1); | |
--button-alternative-rgb: var(--ac-1-rgb); | |
--button-alternative-background: var(--bg-3); | |
--button-alternative-background-rgb: var(--bg-3-rgb); | |
--button-background-disabled: var(--bg-2); | |
--button-background-disabled-rgb: var(--bg-2-rgb); | |
--button-bubble: var(--ac-0); | |
--button-bubble-rgb: var(--ac-0-rgb); | |
--button-plain-background: var(--bg-4); | |
--button-plain-background-rgb: var(--bg-4-rgb); | |
--button-primary: var(--white); | |
--button-primary-rgb: var(--white-rgb); | |
--button-primary-background: var(--ac-0); | |
--button-primary-background-rgb: var(--ac-0-rgb); | |
--button-primary-background-hover: var(--ac-3); | |
--button-primary-background-hover-rgb: var(--ac-3-rgb); | |
--button-round-background: var(--ac-0); | |
--button-round-background-rgb: var(--ac-0-rgb); | |
--button-secondary: var(--ac-0); | |
--button-secondary-rgb: var(--ac-0-rgb); | |
--button-secondary-background: transparent; | |
--button-secondary-background-rgb: 0, 0, 0; | |
--button-secondary-background-hover: rgba(241,241,242,0.051); | |
--button-secondary-background-hover-rgb: var(--fg-3-rgb); | |
--button-secondary-hover: var(--ac-0); | |
--button-secondary-hover-rgb: var(--ac-0-rgb); | |
--chat-marker: var(--fg-3); | |
--chat-marker-rgb: var(--fg-3-rgb); | |
--chat-marker-admin: var(--ac-0); | |
--chat-marker-admin-rgb: var(--ac-0-rgb); | |
--chat-marker-admin-border: var(--ac-0); | |
--chat-marker-admin-border-rgb: var(--ac-0-rgb); | |
--chat-marker-border: var(--fg-3); | |
--chat-marker-border-rgb: var(--fg-3-rgb); | |
--chatlist-icon: var(--fg-5); | |
--chatlist-icon-rgb: var(--fg-5-rgb); | |
--checkbox-background: var(--ac-0); | |
--checkbox-background-rgb: var(--ac-0-rgb); | |
--checkbox-mark: var(--white); | |
--checkbox-mark-rgb: var(--white-rgb); | |
--compose-background: var(--bg-1); | |
--compose-background-rgb: var(--bg-1-rgb); | |
--compose-background-focused: var(--bg-0); | |
--compose-background-focused-rgb: var(--bg-0-rgb); | |
--compose-border: var(--bg-5); | |
--compose-border-rgb: var(--bg-5-rgb); | |
--compose-border-focused: var(--bg-5); | |
--compose-border-focused-rgb: var(--bg-5-rgb); | |
--compose-panel-background: var(--bg-3); | |
--compose-panel-background-rgb: var(--bg-3-rgb); | |
--compose-input-background-focused: var(--bg-0); | |
--compose-input-background-focused-rgb: var(--bg-0-rgb); | |
--compose-input-background: var(--bg-1); | |
--compose-input-background-rgb: var(--bg-1-rgb); | |
--compose-input-border: var(--bg-5); | |
--compose-input-border-rgb: var(--bg-5-rgb); | |
--compose-input-border-focused: var(--bg-5); | |
--compose-input-border-focused-rgb: var(--bg-5-rgb); | |
--compose-panel-background: var(--bg-3); | |
--compose-panel-background-rgb: var(--bg-3-rgb); | |
--compose-panel-background-hover: var(--bg-4); | |
--compose-panel-background-hover-rgb: var(--ac-4-rgb); | |
--compose-primary: var(--fg-1); | |
--compose-primary-rgb: var(--fg-1-rgb); | |
--conversation-panel-background: var(--bg-1); | |
--conversation-panel-background-rgb: var(--bg-1-rgb); | |
--conversation-panel-border: var(--bg-5); | |
--conversation-panel-border-rgb: var(--fg-3-rgb); | |
--danger: var(--b1-0); | |
--danger-rgb: var(--b1-0-rgb); | |
--drawer-background: var(--bg-1); | |
--drawer-background-rgb: var(--bg-1-rgb); | |
--drawer-background-deep: var(--bg-0); | |
--drawer-background-deep-rgb: var(--bg-0-rgb); | |
--drawer-gallery-background: var(--bg-1); | |
--drawer-gallery-background-rgb: var(--bg-1-rgb); | |
--drawer-gallery-background-active: var(--bg-0); | |
--drawer-gallery-background-active-rgb: var(--bg-0-rgb); | |
--drawer-gallery-background-hover: var(--bg-0); | |
--drawer-gallery-background-hover-rgb: var(--bg-0-rgb); | |
--drawer-header-title: var(--fg-1); | |
--drawer-header-title-rgb: var(--fg-1-rgb); | |
--drawer-section-background: var(--bg-2); | |
--drawer-section-background-rgb: var(--bg-2-rgb); | |
--dropdown-background: var(--bg-2); | |
--dropdown-background-rgb: var(--bg-2-rgb); | |
--dropdown-background-hover: var(--bg-3); | |
--dropdown-background-hover-rgb: var(--bg-3-rgb); | |
--empty-state-background: var(--bg-3); | |
--empty-state-background-rgb: var(--bg-3-rgb); | |
--empty-state-icon: var(--fg-4); | |
--empty-state-icon-rgb: var(--fg-4-rgb); | |
--focus: var(--ac-3); | |
--focus-rgb: var(--ac-3-rgb); | |
--focus-animation: var(--ac-3); | |
--focus-animation-rgb: var(--ac-3-rgb); | |
--focus-animation-deeper: var(--ac-3); | |
--focus-animation-deeper-rgb: var(--ac-3-rgb); | |
--focus-lighter: var(--ac-3); | |
--focus-lighter-rgb: var(--ac-3-rgb); | |
--highlight: var(--ac-0); | |
--highlight-rgb: var(--ac-0-rgb); | |
--icon: var(--fg-3); | |
--icon-rgb: var(--fg-3-rgb); | |
--icon-ack: var(--msg-ack); | |
--icon-ack-rgb: var(--msg-ack-rgb); | |
--icon-disabled: var(--fg-5); | |
--icon-disabled-rgb: var(--fg-5-rgb); | |
--icon-fixed: var(--fg-3); | |
--icon-fixed-rgb: var(--fg-3-rgb); | |
--icon-lighter: var(--fg-5); | |
--icon-lighter-rgb: var(--fg-0-rgb); | |
--icon-search-back: var(--ac-2); | |
--icon-search-back-rgb: var(--ac-2-rgb); | |
--icon-strong: var(--fg-1); | |
--icon-strong-rgb: var(--fg-1-rgb); | |
--incoming-background: var(--msg-in-0); | |
--incoming-background-rgb: var(--msg-in-0-rgb); | |
--incoming-background-deeper: var(--msg-in-1); | |
--incoming-background-deeper-rgb: var(--msg-in-1-rgb); | |
--incoming-background-highlight: #ccc; | |
--incoming-background-highlight-rgb: 204, 204, 204; | |
--incoming-primary: var(--fg-3); | |
--incoming-primary-rgb: var(--fg-3-rgb); | |
--input-border-active: var(--ac-0); | |
--input-border-active-rgb: var(--ac-0-rgb); | |
--input-placeholder: var(--fg-4); | |
--input-placeholder-rgb: var(--fg-4); | |
--intro-background: var(--bg-1); | |
--intro-background-rgb: var(--bg-1-rgb); | |
--intro-border: var(--ac-3); | |
--intro-border-rgb: var(--ac-3-rgb); | |
--intro-logo: var(--fg-3); | |
--intro-logo-rgb: var(--fg-3-rgb); | |
--intro-secondary: var(--fg-3); | |
--intro-secondary-rgb: var(--fg-3-rgb); | |
--inverse: var(--fg-0); | |
--inverse-rgb: var(--fg-0-rgb); | |
--labels-icon: rgba(241,241,242,0.4); | |
--labels-icon-rgb: var(--fg-3-rgb); | |
--link: var(--ac-0); | |
--link-rgb: var(--ac-0-rgb); | |
--live-location-footer-background: var(--bg-2); | |
--live-location-footer-background-rgb: var(--bg-2-rgb); | |
--live-location-glow: rgba(var(--ac-1-rgb), 0.5); | |
--live-location-glow-rgb: var(--ac-1-rgb); | |
--live-location-glow-stale: rgba(var(--red-rgb), 0.5); | |
--live-location-glow-stale-rgb: var(--b1-0-rgb); | |
--location-cluster-background: var(--bg-1); | |
--location-cluster-background-rgb: var(--bg-1-rgb); | |
--media-editor-control: #1c313f; | |
--media-editor-control-rgb: 28, 49, 63; | |
--media-viewer-background: rgba(var(--bg-1-rgb), 0.8); | |
--media-viewer-background-rgb: var(--bg-1-rgb); | |
--media-viewer-button-background: var(--bg-3); | |
--media-viewer-button-background-rgb: var(--bg-3-rgb); | |
--media-viewer-button-icon: #f1f1f2; | |
--media-viewer-button-icon-rgb: var(--fg-3-rgb); | |
--menu-tabs-list-active: var(--ac-0); | |
--menu-tabs-list-active-rgb: var(--ac-0-rgb); | |
--message-background-deep: var(--bg-0); | |
--message-background-deep-rgb: var(--bg-0-rgb); | |
--message-placeholder-icon: var(--fg-3); | |
--message-placeholder-icon-rgb: var(--fg-3-rgb); | |
--message-primary: var(--fg-1); | |
--message-primary-rgb: var(--fg-1-rgb); | |
--message-selection-highlight: rgba(var(--ac-0-rgb), 0.1); | |
--message-selection-highlight-rgb: var(--ac-0-rgb); | |
--modal-backdrop: rgba(var(--bg-1-rgb), 0.7); | |
--modal-backdrop-rgb: var(--bg-0-rgb); | |
--modal-backdrop-solid: var(--bg-0); | |
--modal-backdrop-solid-rgb: var(--bg-0-rgb); | |
--modal-background: var(--bg-2); | |
--modal-background-rgb: var(--bg-2-rgb); | |
--notification-biz-background: var(--b5-5); | |
--notification-biz-background-rgb: var(--b5-5-rgb); | |
--notification-biz-text: var(--b5-0); | |
--notification-biz-text-rgb: var(--b5-0-rgb); | |
--notification-e2e-background: var(--b3-5); | |
--notification-e2e-background-rgb: var(--b3-5-rgb); | |
--notification-e2e-icon: var(--b3-1); | |
--notification-e2e-icon-rgb: var(--b3-1-rgb); | |
--notification-e2e-text: var(--b3-0); | |
--notification-e2e-text-rgb: var(--b3-0-rgb); | |
--notification-text: var(--fg-3); | |
--notification-text-rgb: var(--fg-3-rgb); | |
--outgoing-background: var(--msg-out-0); | |
--outgoing-background-rgb: var(--msg-out-0-rgb); | |
--outgoing-background-deeper: var(--msg-out-1); | |
--outgoing-background-deeper-rgb: var(--msg-out-1-rgb); | |
--outgoing-background-highlight: #ccc; | |
--outgoing-background-highlight-rgb: 204, 204, 204; | |
--overlay: var(--bg-0); | |
--overlay-rgb: var(--bg-0-rgb); | |
--panel-background: var(--bg-3); | |
--panel-background-rgb: var(--bg-3-rgb); | |
--panel-background-active: #1a262d; | |
--panel-background-active-rgb: 26, 38, 45; | |
--panel-background-colored: var(--bg-3); | |
--panel-background-colored-rgb: var(--bg-3-rgb); | |
--panel-background-colored-deeper: var(--bg-3); | |
--panel-background-colored-deeper-rgb: var(--bg-3-rgb); | |
--panel-background-deep: var(--bg-2); | |
--panel-background-deep-rgb: var(--bg-2-rgb); | |
--panel-background-deeper: var(--bg-3); | |
--panel-background-deeper-rgb: var(--bg-3-rgb); | |
--panel-background-hover: var(--bg-4); | |
--panel-background-hover-rgb: var(--bg-4-rgb); | |
--panel-background-lighter: var(--bg-3); | |
--panel-background-lighter-rgb: var(--bg-3-rgb); | |
--panel-header-background: var(--bg-3); | |
--panel-header-background-rgb: var(--bg-3-rgb); | |
--panel-header-icon: var(--fg-3); | |
--panel-header-icon-rgb: var(--fg-3-rgb); | |
--panel-input-background: var(--bg-2); | |
--panel-input-background-rgb: var(--bg-2-rgb); | |
--panel-primary: var(--fg-3); | |
--panel-primary-rgb: var(--fg-3-rgb); | |
--payment-amount: #00a593; | |
--payment-amount-rgb: 0, 164.8, 146.90743; | |
--payment-status-failed: #ef697a; | |
--payment-status-failed-rgb: 239, 105, 122; | |
--payment-status-processing: var(--fg-1); | |
--payment-status-processing-rgb: var(--fg-3-rgb); | |
--payment-status-success: #40cf6c; | |
--payment-status-success-rgb: 64, 207, 108; | |
--payment-status-waiting: var(--fg-1); | |
--payment-status-waiting-rgb: var(--fg-3-rgb); | |
--photopicker-overlay-background: rgba(var(--bg-3-rgb), 0.8); | |
--photopicker-overlay-background-rgb: var(--bg-3-rgb); | |
--picker-background: var(--bg-2); | |
--picker-background-rgb: var(--bg-2-rgb); | |
--popup-panel-background: var(--bg-2); | |
--popup-panel-background-rgb: var(--bg-2-rgb); | |
--primary: var(--fg-2); | |
--primary-rgb: var(--fg-2-rgb); | |
--primary-strong: var(--fg-1); | |
--primary-strong-rgb: var(--fg-1-rgb); | |
--primary-stronger: var(--fg-0); | |
--primary-stronger-rgb: var(--fg-0-rgb); | |
--primary-strongest: var(--fg-0); | |
--primary-strongest-rgb: var(--fg-0-rgb); | |
--primary-title: var(--fg-2); | |
--primary-title-rgb: var(--fg-2-rgb); | |
--product-image-button-background: var(--bg-4); | |
--product-image-button-background-rgb: var(--bg-4-rgb); | |
--product-thumb-background: var(--bg-3); | |
--product-thumb-background-rgb: var(--bg-3-rgb); | |
--product-thumb-background-deeper: var(--bg-2); | |
--product-thumb-background-deeper-rgb: var(--bg-2-rgb); | |
--progress-background: var(--bg-2); | |
--progress-background-rgb: var(--bg-2-rgb); | |
--progress-primary: var(--ac-0); | |
--progress-primary-rgb: var(--ac-0); | |
--ptt-blue: var(--b6-0); | |
--ptt-blue-rgb: var(--b6-0-rgb); | |
--ptt-button-cancel: var(--b1-0); | |
--ptt-button-cancel-rgb: var(--b1-0-rgb); | |
--ptt-button-send: var(--b4-0); | |
--ptt-button-send-rgb: var(--b4-0-rgb); | |
--ptt-gray: var(--fg-4); | |
--ptt-gray-rgb: var(--fg-4-rgb); | |
--ptt-green: var(--b4-0); | |
--ptt-green-rgb: var(--b4-rgb); | |
--ptt-message-blue: var(--b6-0); | |
--ptt-message-blue-rgb: var(--b6-0-rgb); | |
--quick-action-button: rgba(var(--fg-3-rgb), 0.5); | |
--quick-action-button-rgb: var(--fg-3-rgb); | |
--quick-action-button-background: var(--bg-4); | |
--quick-action-button-background-rgb: var(--bg-4-rgb); | |
--rich-text-panel-background: var(--bg-3); | |
--rich-text-panel-background-rgb: var(--bg-3-rgb); | |
--search-container-background: var(--bg-2); | |
--search-container-background-rgb: var(--bg-2-rgb); | |
--search-input-background: var(--bg-3); | |
--search-input-background-rgb: var(--bg-3-rgb); | |
--secondary: var(--fg-3); | |
--secondary-rgb: var(--fg-3-rgb); | |
--secondary-light: var(--fg-2); | |
--secondary-light-rgb: var(--fg-2-rgb); | |
--secondary-lighter: var(--fg-3); | |
--secondary-lighter-rgb: var(--fg-3-rgb); | |
--secondary-stronger: var(--fg-3); | |
--secondary-stronger-rgb: var(--fg-3-rgb); | |
--shadow: var(--sh); | |
--shadow-rgb: var(--sh-rgb); | |
--shadow-light: var(--sh); | |
--shadow-light-rgb: var(--sh-rgb); | |
--spinner-default: var(--fg-3); | |
--spinner-default-rgb: var(--fg-3-rgb); | |
--spinner-highlight: var(--ac-0); | |
--spinner-highlight-rgb: var(--ac-0-rgb); | |
--spinner-incoming: var(--fg-5); | |
--spinner-incoming-rgb: var(--fg-5-rgb); | |
--spinner-outgoing: var(--ac-5); | |
--spinner-outgoing-rgb: var(--ac-5-rgb); | |
--startup-background: var(--bg-0); | |
--startup-background-rgb: var(--bg-0-rgb); | |
--startup-icon: var(--fg-3); | |
--startup-icon-rgb: var(--fg-3-rgb); | |
--status-background: var(--bg-1); | |
--status-background-rgb: var(--bg-1-rgb); | |
--status-background-hover: var(--bg-2); | |
--status-background-hover-rgb: var(--bg-2-rgb); | |
--status-primary: var(--fg-1); | |
--status-primary-rgb: var(--fg-1-rgb); | |
--status-secondary: var(--fg-4); | |
--status-secondary-rgb: var(--fg-4-rgb); | |
--status-secondary-stronger: var(--fg-5); | |
--status-secondary-stronger-rgb: var(--fg-5-rgb); | |
--success: var(--ac-0); | |
--success-rgb: var(--ac-0-rgb); | |
--suspicious-background: rgba(239,105,122,0.8); | |
--suspicious-background-rgb: 239, 105, 122; | |
--system-message-background: var(--b6-4); | |
--system-message-background-rgb: var(--b6-4-rgb); | |
--system-message-text: rgba(var(--fg-1-rgb), 0.87); | |
--system-message-text-rgb: var(--fg-1-rgb); | |
--teal-hover: #00b7a1; | |
--teal-hover-rgb: 0, 183, 161; | |
--teal-pale: #5fc8bc; | |
--teal-pale-rgb: 95, 200, 188; | |
--thumb-border-active: var(--bg-2); | |
--thumb-border-active-rgb: var(--bg-2-rgb); | |
--thumb-border-active-new-media-editor: var(--fg-4); | |
--thumb-border-active-new-media-editor-rgb: var(--fg-4-rgb); | |
--thumb-border-viewer-active: var(--fg-3); | |
--thumb-border-viewer-active-rgb: var(--fg-3-rgb); | |
--toast-background: rgba(var(--bg-3-rgb), 0.96); | |
--toast-background-rgb: var(--bg-3-rgb); | |
--tooltip-background: rgba(var(--bg-4-rgb), 0.85); | |
--tooltip-background-rgb: var(--bg-4); | |
--typing: var(--ac-0); | |
--typing-rgb: var(--ac-0-rgb); | |
--unread-background: var(--bg-3); | |
--unread-background-rgb: var(--bg-3-rgb); | |
--unread-bar-background: rgba(var(--bg-0-rgb), 0.7); | |
--unread-bar-background-rgb: var(--bg-0-rgb); | |
--unread-marker-background: var(--ac-0); | |
--unread-marker-background-rgb: var(--ac-0-rgb); | |
--unread-marker-text: var(--white); | |
--unread-marker-text-rgb: var(--white-rgb); | |
--video-player-background: #000; | |
--video-player-background-rgb: 0, 0, 0; | |
--video-primary: #fff; | |
--video-primary-rgb: 255, 255, 255; | |
--voip-accept-background: #70db91; | |
--voip-accept-background-rgb: 112, 219, 145; | |
--voip-background: #262626; | |
--voip-background-rgb: 38, 38, 38; | |
--voip-background-deep: #000; | |
--voip-background-deep-rgb: 0, 0, 0; | |
--voip-primary: #fff; | |
--voip-primary-rgb: 255, 255, 255; | |
--voip-reject-background: #e54b40; | |
--voip-reject-background-rgb: 229, 75, 64; | |
--wallpaper-background: var(--bg-1); | |
--wallpaper-background-rgb: var(--bg-1-rgb); | |
--wallpaper-thumb-border-active: var(--bg-5); | |
--wallpaper-thumb-border-active-rgb: var(--bg-5-rgb); | |
--wallpaper-thumb-border-hover: var(--bg-4); | |
--wallpaper-thumb-border-hover-rgb: var(--bg-4-rgb); | |
--win32-title-primary: var(--fg-1); | |
--win32-title-primary-rgb: var(--fg-1-rgb); | |
--bg-0: #1c2026; | |
--bg-0-rgb: 28,32,38; | |
--bg-1: #1f232a; | |
--bg-1-rgb: 31,35,42; | |
--bg-2: #282d37; | |
--bg-2-rgb: 40,45,55; | |
--bg-3: #323843; | |
--bg-3-rgb: 50,56,67; | |
--bg-4: #3b4250; | |
--bg-4-rgb: 59,66,80; | |
--bg-5: #444d5c; | |
--bg-5-rgb: 68,77,92; | |
--fg-0: #f0f0f0; | |
--fg-0-rgb: 240,240,240; | |
--fg-1: #eee; | |
--fg-1-rgb: 238,238,238; | |
--fg-2: #d6d6d6; | |
--fg-2-rgb: 214,214,214; | |
--fg-3: #bebebe; | |
--fg-3-rgb: 190,190,190; | |
--fg-4: #a7a7a7; | |
--fg-4-rgb: 167,167,167; | |
--fg-5: #8f8f8f; | |
--fg-5-rgb: 143,143,143; | |
--ac-0: #7289da; | |
--ac-0-rgb: 114,137,218; | |
--ac-1: #6377bd; | |
--ac-1-rgb: 99,119,189; | |
--ac-2: #5566a0; | |
--ac-2-rgb: 85,102,160; | |
--ac-3: #475483; | |
--ac-3-rgb: 71,84,131; | |
--ac-4: #2f3756; | |
--ac-4-rgb: 47,55,86; | |
--ac-5: #282f46; | |
--ac-5-rgb: 40,47,70; | |
--b1-0: #f07178; | |
--b1-0-rgb: 240,113,120; | |
--b1-1: #f08571; | |
--b1-1-rgb: 240,133,113; | |
--b1-2: #f09671; | |
--b1-2-rgb: 240,150,113; | |
--b1-3: #8f4a51; | |
--b1-3-rgb: 143,74,81; | |
--b1-4: #60353a; | |
--b1-4-rgb: 96,53,58; | |
--b1-5: #4a2c30; | |
--b1-5-rgb: 74,44,48; | |
--b2-0: #f78c6c; | |
--b2-0-rgb: 247,140,108; | |
--b2-1: #f7aa6c; | |
--b2-1-rgb: 247,170,108; | |
--b2-2: #f7bd6c; | |
--b2-2-rgb: 247,189,108; | |
--b2-3: #93594a; | |
--b2-3-rgb: 147,89,74; | |
--b2-4: #623e36; | |
--b2-4-rgb: 98,62,54; | |
--b2-5: #4c322d; | |
--b2-5-rgb: 76,50,45; | |
--b3-0: #ffcb6b; | |
--b3-0-rgb: 255,203,107; | |
--b3-1: #ffea6b; | |
--b3-1-rgb: 255,234,107; | |
--b3-2: #ffff6b; | |
--b3-2-rgb: 255,255,107; | |
--b3-3: #977c4a; | |
--b3-3-rgb: 151,124,74; | |
--b3-4: #655435; | |
--b3-4-rgb: 101,84,53; | |
--b3-5: #4e422d; | |
--b3-5-rgb: 78,66,45; | |
--b4-0: #c3e88d; | |
--b4-0-rgb: 195,232,141; | |
--b4-1: #b0e88d; | |
--b4-1-rgb: 176,232,141; | |
--b4-2: #a3e88d; | |
--b4-2-rgb: 163,232,141; | |
--b4-3: #768c5c; | |
--b4-3-rgb: 118,140,92; | |
--b4-4: #505e41; | |
--b4-4-rgb: 80,94,65; | |
--b4-5: #3f4936; | |
--b4-5-rgb: 63,73,54; | |
--b5-0: #89ddff; | |
--b5-0-rgb: 137,221,255; | |
--b5-1: #89c4ff; | |
--b5-1-rgb: 137,196,255; | |
--b5-2: #89b4ff; | |
--b5-2-rgb: 137,180,255; | |
--b5-3: #56869b; | |
--b5-3-rgb: 86,134,155; | |
--b5-4: #3c5b69; | |
--b5-4-rgb: 60,91,105; | |
--b5-5: #304752; | |
--b5-5-rgb: 48,71,82; | |
--b6-0: #82aaff; | |
--b6-0-rgb: 130,170,255; | |
--b6-1: #828fff; | |
--b6-1-rgb: 130,143,255; | |
--b6-2: #8682ff; | |
--b6-2-rgb: 134,130,255; | |
--b6-3: #526a9b; | |
--b6-3-rgb: 82,106,155; | |
--b6-4: #394969; | |
--b6-4-rgb: 57,73,105; | |
--b6-5: #2e3a52; | |
--b6-5-rgb: 46,58,82; | |
--b7-0: #c792ea; | |
--b7-0-rgb: 199,146,234; | |
--b7-1: #da92ea; | |
--b7-1-rgb: 218,146,234; | |
--b7-2: #e692ea; | |
--b7-2-rgb: 230,146,234; | |
--b7-3: #785c90; | |
--b7-3-rgb: 120,92,144; | |
--b7-4: #514062; | |
--b7-4-rgb: 81,64,98; | |
--b7-5: #40344d; | |
--b7-5-rgb: 64,52,77; | |
--b8-0: #9a91ea; | |
--b8-0-rgb: 154,145,234; | |
--b8-1: #ad91ea; | |
--b8-1-rgb: 173,145,234; | |
--b8-2: #b991ea; | |
--b8-2-rgb: 185,145,234; | |
--b8-3: #5f5c90; | |
--b8-3-rgb: 95,92,144; | |
--b8-4: #424062; | |
--b8-4-rgb: 66,64,98; | |
--b8-5: #34344d; | |
--b8-5-rgb: 52,52,77; | |
--white: #fff; | |
--white-rgb: 255,255,255; | |
--sh: rgba(0,0,0,0.145); | |
--sh-rgb: 0,0,0; | |
--t: transparent; | |
--bshadow: 0 4px 8px 2px var(--shadow); | |
--intro-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='256' width='256'><g stroke='\%237289da'><path d='M128.4901 30.8659a95.4375 95.4375 0 00-95.4375 95.4375 95.4375 95.4375 0 0014.168 50.0332L35.6698 221.276l44.7989-12.498a95.4375 95.4375 0 0048.0214 12.9629 95.4375 95.4375 0 0095.4375-95.4375 95.4375 95.4375 0 00-95.4375-95.4375z' fill='\%23282d37' fill-rule='evenodd' stroke-width='18' stroke-linecap='square'/><path d='M97.8104 79.8463c-4.9671.0406-13.5028 2.0796-17.7812 14.8946-6.8318 20.4631 12.5737 43.3028 27.2438 57.4735 14.7975 14.2938 43.1559 26.507 58.0098 21.08 20.5566-8.9065 15.2475-22.9479 15.2475-22.9479l-22.9727-11.0878s-2.062-1.206-3.4146.5737c-1.0042 1.3213-9.4409 11.3755-9.4409 11.3755s-1.449 1.668-3.827.7402c-5.7574-2.2462-14.2018-7.4856-18.5314-10.7795-6.8875-5.2399-12.957-13.0846-16.9473-19.668-1.2556-2.5597.6953-4.709.6953-4.709s6.0303-8.2629 7.0176-9.5566c1.0068-1.3194.2539-3.3633.2539-3.3633l-10.539-23.2285s-2.0334-.8212-5.0138-.7969z' fill='\%237289da' stroke-linejoin='round'/></g></svg>"); | |
} | |
@keyframes aBorder { | |
40% { | |
opacity: 0; | |
} | |
80% { | |
opacity: 1; | |
} | |
} | |
@keyframes aPulse { | |
0% { | |
transform: scale(0.9); | |
} | |
50% { | |
transform: scale(1); | |
} | |
100% { | |
transform: scale(0.9); | |
} | |
} | |
@keyframes aKiss { | |
0% { | |
transform: scale(0.7); | |
} | |
50% { | |
transform: scale(0.8); | |
} | |
80% { | |
transform: scale(1) rotate(-30deg); | |
} | |
100% { | |
transform: scale(0.7); | |
} | |
} | |
html > body { | |
background-image: none !important; | |
color: var(--fg-0) !important; | |
background-color: var(--bg-0) !important; | |
} | |
html > body option { | |
color: var(--fg-1) !important; | |
background-color: var(--bg-3) !important; | |
} | |
html > body, | |
html > body button, | |
html > body input { | |
font-family: var(--ui-font); | |
} | |
html > body ._11dpe { | |
color: var(--fg-1) !important; | |
border: 1px solid var(--bg-5) !important; | |
} | |
html > body ._11dpe button:nth-child(2) { | |
color: var(--ac-1) !important; | |
} | |
html > body ._11dpe button:nth-child(3) { | |
color: var(--fg-4) !important; | |
} | |
html > body [data-asset-intro-image-dark], | |
html > body [data-asset-intro-image-light] { | |
max-width: 240px; | |
max-height: 240px; | |
background-image: var(--intro-image); | |
transition: opacity 0.6s ease; | |
border-radius: 0 !important; | |
} | |
html > body [data-asset-intro-image-dark] + div h1, | |
html > body [data-asset-intro-image-light] + div h1 { | |
color: var(--fg-0) !important; | |
} | |
html > body [data-asset-intro-image-dark] + div h1 + div[class], | |
html > body [data-asset-intro-image-light] + div h1 + div[class] { | |
font-size: 0 !important; | |
color: var(--fg-1) !important; | |
} | |
html > body [data-asset-intro-image-dark] + div h1 + div[class]::before, | |
html > body [data-asset-intro-image-light] + div h1 + div[class]::before { | |
display: block; | |
font-size: 16px; | |
margin-bottom: -16px; | |
white-space: pre-wrap; | |
content: var(--message) var(--changes); | |
} | |
html > body [data-asset-intro-image-dark] + div h1 + div[class]::after, | |
html > body [data-asset-intro-image-light] + div h1 + div[class]::after { | |
display: block; | |
font-size: 16px; | |
margin-top: 16px; | |
padding-top: 24px; | |
margin-bottom: -16px; | |
content: var(--version); | |
border-top: 1px solid var(--bg-4) !important; | |
} | |
._3lqL6 { | |
position: relative; | |
--blue-light: var(--ac-3); | |
--inverse: var(--ac-3); | |
} | |
._3lqL6::before { | |
content: ''; | |
filter: invert(var(--chat-bg-i)) opacity(var(--chat-bg-o)); | |
background: var(--chat-image) !important; | |
position: absolute; | |
height: 100%; | |
width: 100%; | |
} | |
._3lqL6:first-child:not(._1rIeG) { | |
border: 4px solid var(--bg-2) !important; | |
} | |
._3lqL6:first-child, | |
._3lqL6:first-child::after { | |
width: calc(3 * 82px + 30px) !important; | |
} | |
._3lqL6:first-child span { | |
font-size: 0 !important; | |
} | |
._3lqL6:first-child span::before { | |
content: 'Use this with Dark-WhatsApp'; | |
font-size: 16px !important; | |
} | |
[style *= 'rgb(222, 227, 233)'], | |
[style *= 'rgb(217, 218, 222)'], | |
[style *= 'rgb(192, 193, 196)'] { | |
background-color: var(--bg-2) !important; | |
} | |
@supports (scrollbar-width: thin) { | |
* { | |
scrollbar-color: var(--ac-2) var(--shadow) !important; | |
} | |
} | |
*::-webkit-scrollbar-thumb { | |
background-color: var(--ac-2) !important; | |
} | |
*::-webkit-scrollbar-track { | |
background-color: var(--shadow) !important; | |
} | |
[id *= 'startup'] { | |
background-color: var(--bg-0) !important; | |
} | |
progress { | |
background-color: var(--bg-2) !important; | |
} | |
progress[value]::-moz-progress-bar { | |
background-color: var(--ac-0) !important; | |
} | |
::-moz-progress-bar { | |
background-color: var(--bg-4) !important; | |
} | |
::-webkit-progress-bar { | |
background-color: var(--bg-4) !important; | |
} | |
::-webkit-progress-value { | |
background-color: var(--ac-0) !important; | |
} | |
._1BjNO[style], | |
._1S7ke { | |
background-color: var(--bg-5) !important; | |
} | |
._1BjNO[style], | |
._1BjNO[style] > img, | |
._18cLH, | |
._3_Hvt, | |
._2H1bg, | |
._1S7ke, | |
._2SNSv { | |
border-radius: var(--r-avatars) !important; | |
} | |
.Ao0On { | |
background-color: var(--bg-5) !important; | |
} | |
._1g1ui > ._1ByLM { | |
margin-left: unset !important; | |
} | |
.emojik { | |
transition: transform 0.15s ease !important; | |
} | |
.emojik:not(:hover):not(:focus):not(.selected) { | |
filter: opacity(var(--emoji-o)); | |
} | |
.emojik:hover:not(.selected):not(:focus) { | |
transform: scale(1.2); | |
box-shadow: none !important; | |
opacity: 1 !important; | |
} | |
.emojik.selected, | |
.emojik:focus { | |
box-shadow: 0 0 0 1px var(--bg-3), 0 0 0 3px var(--ac-0) !important; | |
} | |
.overlay ._2ouPw, | |
.overlay ._21ltg, | |
.overlay > .KeLEe { | |
border-bottom: 1px solid var(--bg-5) !important; | |
background-color: var(--bg-3) !important; | |
} | |
.overlay ._1kEVs { | |
background-color: transparent !important; | |
} | |
.overlay [data-animate-modal-popup] { | |
border: 1px solid var(--bg-5); | |
border-radius: var(--r-menus) !important; | |
} | |
.overlay [data-animate-modal-popup] .copyable-area > header { | |
border-bottom: 1px solid var(--bg-5); | |
} | |
.overlay [data-animate-modal-popup] .copyable-area > span [style *= 'translateY']:not([tabindex]), | |
.overlay [data-animate-modal-popup] .copyable-area ._30pU5 { | |
border-top: 1px solid var(--bg-5); | |
} | |
.overlay header + div[tabindex] + div div[style] { | |
--background-default: var(--bg-1); | |
--background-default-hover: var(--bg-2); | |
} | |
._1KWct { | |
border-color: var(--bg-5) !important; | |
background-color: var(--bg-3) !important; | |
} | |
[data-animate-status-v3-modal-background = 'true'] { | |
background-color: var(--modal-backdrop) !important; | |
} | |
[data-animate-status-v3-modal-background = 'true'] > div { | |
background-color: var(--bg-1) !important; | |
} | |
[data-animate-status-v3-modal-background = 'true'] > div > div:nth-child(1) { | |
background-color: var(--bg-2) !important; | |
border-right: 1px solid var(--bg-5); | |
border-radius: var(--r-menus) 0 0 var(--r-menus) !important; | |
} | |
@media (min-width: 1441px) { | |
[data-animate-status-v3-modal-background = 'true'] > div { | |
border: 1px solid var(--bg-5) !important; | |
border-radius: var(--r-menus) !important; | |
} | |
} | |
._2yhFa { | |
margin: auto; | |
padding: 5px 8px 8px; | |
min-width: 150px; | |
border-radius: var(--r-inputs); | |
background-color: rgba(var(--bg-1-rgb), 0.5); | |
} | |
[data-icon = 'status-v3-unread'] [fill = '#009588'] { | |
fill: var(--ac-0) !important; | |
} | |
.overlay._3Os9f { | |
background-color: var(--modal-backdrop) !important; | |
} | |
.overlay._3Os9f [data-animate-modal-popup] { | |
padding: 16px !important; | |
background-color: var(--bg-1) !important; | |
--white-rgb: var(--fg-2-rgb); | |
} | |
.overlay._3Os9f [data-animate-modal-popup] [data-icon = 'back'] path { | |
fill: var(--fg-1) !important; | |
} | |
.landing-wrapper::before { | |
content: unset !important; | |
} | |
.landing-header { | |
position: relative; | |
} | |
.landing-header path[fill ^= '#FFF'] { | |
fill: var(--ac-0); | |
} | |
.landing-header path[fill ^= '#00E'] { | |
fill: var(--bg-1); | |
} | |
.landing-header div { | |
text-transform: unset; | |
color: var(--fg-1) !important; | |
} | |
.landing-header::after { | |
font-size: 14px; | |
font-weight: 500; | |
position: absolute; | |
content: var(--version); | |
} | |
html[dir = 'RTL'] .landing-header::after { | |
left: 0; | |
} | |
html[dir = 'LTR'] .landing-header::after { | |
right: 0; | |
} | |
.landing-window:not(#z) { | |
border-radius: 4px; | |
background-color: var(--bg-1) !important; | |
box-shadow: 0 0 1px var(--bg-5); | |
} | |
.landing-main a[href] { | |
color: var(--ac-0) !important; | |
} | |
.landing-main label, | |
.landing-main ._2yUXW { | |
color: var(--fg-3) !important; | |
} | |
.landing-main .landing-title { | |
color: var(--fg-1) !important; | |
} | |
.landing-main rect[fill ^= '#f2f'], | |
.landing-main rect[fill ^= '#F2F'] { | |
fill: var(--bg-5); | |
} | |
.landing-main path[fill ^= '#818'] { | |
fill: var(--ac-0); | |
} | |
.landing-main div[data-ref] { | |
border-radius: 0 !important; | |
filter: contrast(150%); | |
outline: 4px solid #fff; | |
box-shadow: 0 0 0 4px #fff; | |
} | |
.landing-main div[data-ref] [role='button'] { | |
color: #fff !important; | |
background-color: var(--ac-0) !important; | |
} | |
.landing-main div[data-ref]._2BIlf { | |
outline: 4px solid var(--ac-0); | |
box-shadow: 0 0 0 4px var(--ac-0); | |
} | |
.landing-main + ._3pdvT { | |
background-color: transparent !important; | |
} | |
.landing-main + ._3pdvT img { | |
opacity: 0.3; | |
} | |
.landing-main + ._3pdvT [style *= 'opacity: 1'] { | |
background-color: transparent !important; | |
} | |
.landing-main ._3ybl8 { | |
color: #fff !important; | |
background-color: var(--ac-0) !important; | |
box-shadow: bsh; | |
} | |
.landing-main ._3ybl8::before { | |
border-bottom-color: var(--ac-0) !important; | |
} | |
#app > div::after { | |
top: var(--bg-blur-s); | |
right: var(--bg-blur-s); | |
bottom: var(--bg-blur-s); | |
left: var(--bg-blur-s); | |
height: unset; | |
width: unset; | |
filter: blur(var(--bg-blur)) opacity(var(--bg-opacity)) invert(var(--bg-invert)) hue-rotate(var(--bg-hue)); | |
background-position: var(--bg-pos) !important; | |
background-image: var(--bg-image) !important; | |
background-repeat: var(--bg-rep) !important; | |
background-size: var(--bg-size) !important; | |
background-color: transparent !important; | |
} | |
@media screen and (min-width: 1441px) { | |
#app > div::after { | |
content: '' !important; | |
} | |
} | |
div div:first-child > .aGjYp::before, | |
span div:first-child > .aGjYp::before { | |
content: none; | |
} | |
#app > div ._3xpD_ { | |
border-radius: var(--r-inputs) !important; | |
} | |
#app > div > span > div[style ^= 'transform-origin:'][tabindex], | |
#app > div ._2s_eZ[style ^= 'transform-origin:'][tabindex] { | |
border: 1px solid var(--bg-4); | |
border-radius: var(--r-menus) !important; | |
} | |
#app > div > span > ._3f317 { | |
border: 1px solid var(--bg-5) !important; | |
} | |
#app > div > span > ._3f317 > [data-animate-dropdown-nib] { | |
border-bottom: 1px solid var(--bg-5); | |
border-right: 1px solid var(--bg-5); | |
border-radius: 0 0 4px 0; | |
bottom: -8px !important; | |
} | |
#app > div > [tabindex] { | |
background-color: var(--bg-1) !important; | |
} | |
@media (min-width: 1441px) { | |
#app > div > [tabindex], | |
[data-animate-status-v3-modal-background] > div:first-child { | |
width: calc(100% - 38px) !important; | |
max-width: var(--app-width) !important; | |
border-radius: var(--r-menus) !important; | |
border: 1px solid var(--bg-5) !important; | |
box-shadow: 0 2px 6px sh !important; | |
} | |
} | |
#app > div > [tabindex]::after { | |
content: unset !important; | |
} | |
#app > div > [tabindex] .gQzdc, | |
#app > div > [tabindex] ._3qx7_ { | |
border-bottom: 1px solid var(--bg-5) !important; | |
} | |
#app > div > [tabindex] .gQzdc::after, | |
#app > div > [tabindex] ._3qx7_::after { | |
display: none !important; | |
} | |
._1yO24 { | |
animation: none !important; | |
} | |
#app > div > [tabindex] #side > header { | |
border-bottom: 1px solid var(--bg-5) !important; | |
} | |
#app > div > [tabindex] #side > header + span > div { | |
border-bottom: 1px solid var(--bg-5) !important; | |
} | |
#app > div > [tabindex] #side > header + span > div [data-icon = 'x'] svg path { | |
fill: var(--fg-5); | |
} | |
#app > div > [tabindex] ._14VS3 > ._1V8rX { | |
border-left: 1px solid var(--bg-5) !important; | |
} | |
#app > div > [tabindex] ._14VS3 > ._1V8rX .copyable-area > header { | |
border-bottom: 1px solid var(--bg-5) !important; | |
} | |
._2Bps4 { | |
box-shadow: 0 0 0 1px var(--bg-4) !important; | |
} | |
.dark .three ._2vJ01, | |
.dark .three ._2-aNW { | |
border-right: none !important; | |
} | |
#app > div > [tabindex] > div:nth-child(2) > div:nth-child(1) > span[class] * [role][aria-selected='false'] > div { | |
background-color: var(--bg-1) !important; | |
} | |
#app > div > [tabindex] > div:nth-child(2) > div:nth-child(1) > span[class] * [role][aria-selected='false'] > div:hover { | |
background-color: var(--bg-2) !important; | |
} | |
#app > div > [tabindex] > div:nth-child(2) > div:nth-child(1) .copyable-text ~ div[role='button'] { | |
--background-default: var(--bg-1); | |
--background-default-hover: var(--bg-2); | |
} | |
#app > div > [tabindex] > div:nth-child(2) > div:nth-child(1) header + div > span > div > div, | |
#app > div > [tabindex] > div:nth-child(2) > div:nth-child(3) header + div > span > div > div { | |
--drawer-gallery-background-hover: var(--bg-2); | |
--border-panel: var(--b1-1); | |
} | |
#app > div > [tabindex] > div:nth-child(2) > div:nth-child(1) header + div > span > div > div::before, | |
#app > div > [tabindex] > div:nth-child(2) > div:nth-child(3) header + div > span > div > div::before { | |
background-color: var(--bg-3) !important; | |
} | |
#app > div > [tabindex] > div:nth-child(2) > div:nth-child(1) header + div > span > div > div::after, | |
#app > div > [tabindex] > div:nth-child(2) > div:nth-child(3) header + div > span > div > div::after { | |
background-color: transparent !important; | |
} | |
#app > div > [tabindex] > div:nth-child(2) > div:nth-child(3) header + div > div:first-child.HsWVk, | |
#app > div > [tabindex] > div:nth-child(2) > div:nth-child(3) header + div > div[role='button'] { | |
--background-default: var(--bg-1); | |
--background-default-hover: var(--bg-2); | |
} | |
span[class][data-icon = 'checkbox-round-checked'] [fill = '#00BFA5'] { | |
fill: var(--ac-0); | |
} | |
span[class][data-icon = 'checkbox-round-checked'] [fill = '#FFF'] { | |
fill: #fff; | |
} | |
span[class][data-icon] path[fill = '#FFBC00'] { | |
fill: var(--bg-3) !important; | |
} | |
span[class][data-icon = 'down-context'] { | |
color: var(--fg-0) !important; | |
} | |
#side > header button:not([data-animate-menu-icons-item]) [data-icon], | |
#main > div + header button:not([data-animate-menu-icons-item]) [data-icon], | |
#main > footer > .copyable-area button:not([data-animate-menu-icons-item]) [data-icon], | |
#main > footer + span:not([class]) > div button:not([data-animate-menu-icons-item]) [data-icon], | |
.overlay > div:first-child button:not([data-animate-menu-icons-item]) [data-icon], | |
.copyable-area > header button:not([data-animate-menu-icons-item]) [data-icon], | |
#side > header [role = 'button'] [data-icon], | |
#main > div + header [role = 'button'] [data-icon], | |
#main > footer > .copyable-area [role = 'button'] [data-icon], | |
#main > footer + span:not([class]) > div [role = 'button'] [data-icon], | |
.overlay > div:first-child [role = 'button'] [data-icon], | |
.copyable-area > header [role = 'button'] [data-icon] { | |
transition: fill-opacity 0.3s ease !important; | |
} | |
#side > header button:not([data-animate-menu-icons-item]):not(._3QjfB):hover [data-icon], | |
#main > div + header button:not([data-animate-menu-icons-item]):not(._3QjfB):hover [data-icon], | |
#main > footer > .copyable-area button:not([data-animate-menu-icons-item]):not(._3QjfB):hover [data-icon], | |
#main > footer + span:not([class]) > div button:not([data-animate-menu-icons-item]):not(._3QjfB):hover [data-icon], | |
.overlay > div:first-child button:not([data-animate-menu-icons-item]):not(._3QjfB):hover [data-icon], | |
.copyable-area > header button:not([data-animate-menu-icons-item]):not(._3QjfB):hover [data-icon], | |
#side > header [role = 'button']:not(._3QjfB):hover [data-icon], | |
#main > div + header [role = 'button']:not(._3QjfB):hover [data-icon], | |
#main > footer > .copyable-area [role = 'button']:not(._3QjfB):hover [data-icon], | |
#main > footer + span:not([class]) > div [role = 'button']:not(._3QjfB):hover [data-icon], | |
.overlay > div:first-child [role = 'button']:not(._3QjfB):hover [data-icon], | |
.copyable-area > header [role = 'button']:not(._3QjfB):hover [data-icon] { | |
fill-opacity: 0.6 !important; | |
} | |
._1fiOp, | |
._2TZYF { | |
height: 59px !important; | |
justify-content: center !important; | |
border-bottom: 1px solid var(--bg-5) !important; | |
} | |
._1fiOp > [data-animate-drawer-title], | |
._2TZYF > [data-animate-drawer-title] { | |
height: unset !important; | |
} | |
._1fiOp ._3vTfY, | |
._2TZYF ._3vTfY { | |
margin-top: 1px !important; | |
font-size: 18px !important; | |
font-weight: normal !important; | |
} | |
#main > header { | |
border-bottom: 1px solid var(--bg-5) !important; | |
border-right: none !important; | |
border-color: var(--bg-5) !important; | |
} | |
#main > header::after { | |
content: unset !important; | |
} | |
#main ._1E1g0 { | |
border: 1px solid var(--b6-3); | |
text-shadow: 0 1px 0 rgba(var(--fg-1-rgb), 0.3); | |
} | |
#main ._1E1g0._2n04H { | |
border: 1px solid var(--b3-4); | |
} | |
#main ._1E1g0._2nH_- { | |
border: 1px solid rgba(var(--notification-biz-text-rgb), 0.3); | |
} | |
#main ._2J60S { | |
border: 1px solid var(--bg-5); | |
} | |
[data-asset-chat-background-dark], | |
[data-asset-chat-background-light] { | |
filter: invert(var(--chat-bg-i)) opacity(var(--chat-bg-o)); | |
background-image: var(--chat-image) !important; | |
background-position: var(--chat-bg-p) !important; | |
background-repeat: var(--chat-bg-r) !important; | |
background-size: var(--chat-bg-s) !important; | |
opacity: 1 !important; | |
} | |
#main ._1E1g0 { | |
text-shadow: 0 1px 0 rgba(var(--fg-3-rgb), 0.2); | |
} | |
#main ._9WQEN { | |
border: none !important; | |
} | |
#main [class *= 'message-'][data-id] > span + div:not(.urabC) > div { | |
box-shadow: 0 1px 0 rgba(var(--shadow-rgb), 0.33) !important; | |
} | |
#main .-AOZp ._2oA-- + div[style] { | |
background-color: var(--bg-4) !important; | |
} | |
[style *= 'width'][style *= 'height'] + div._3yTyY, | |
[style *= 'width'][style *= 'height'] + div._2CHFo { | |
padding: 2px 4px !important; | |
background-color: rgba(var(--bg-1-rgb), 0.7) !important; | |
border-radius: 5px !important; | |
} | |
.video-thumb .len7M, | |
.video-thumb + ._2DfqO { | |
padding: 2px 4px !important; | |
background-color: rgba(var(--bg-1-rgb), 0.7) !important; | |
border-radius: 5px !important; | |
} | |
.video-thumb._3EMsd + ._2DfqO { | |
right: 5px !important; | |
bottom: 3px !important; | |
} | |
[style *= 'height'][data-plain-text *= 'maps.google.com'] + div[class] > [role] { | |
padding: 2px 4px !important; | |
background-color: rgba(var(--bg-1-rgb), 0.7) !important; | |
border-radius: 5px !important; | |
} | |
.a221_ { | |
background-color: rgba(var(--bg-4-rgb), 0.5) !important; | |
} | |
#main> header ~ div[style *= 'height: 0px'] { | |
border-top: 1px solid var(--bg-5) !important; | |
} | |
#main > footer .velocity-animating, | |
#main > footer div[style $= 'translateY(0%);'], | |
#main > footer div[style $= 'translateY(0px);'] { | |
box-shadow: 0 -1px 0 var(--bg-5) !important; | |
} | |
#main > footer ._2k-2Z { | |
border-top: none; | |
} | |
#main > footer ._3ge3i { | |
border-top: 1px solid var(--bg-5) !important; | |
border-left: 1px solid var(--bg-5) !important; | |
} | |
#main > footer [data-list-scroll-container] { | |
border-bottom: 1px solid var(--bg-5) !important; | |
box-shadow: 0 -1px var(--bg-5) !important; | |
} | |
#main > footer + span > ._2pAWd { | |
border-top: 1px solid var(--bg-5) !important; | |
border-left: 1px solid var(--bg-5) !important; | |
} | |
#main > footer ._3eShu { | |
border-bottom: 1px solid var(--bg-5) !important; | |
} | |
#main > footer ._3uMse { | |
border-radius: var(--r-inputs) !important; | |
} | |
#main img[src *= 'maps.googleapis.com'] { | |
filter: invert(0.8) hue-rotate(180deg) !important; | |
} | |
.dark ._8Uqu5 ._3dtfX .m61XR { | |
color: var(--secondary-stronger) !important; | |
} | |
[class *= ' color-'] > span:nth-child(2) { | |
color: var(--fg-3) !important; | |
} | |
#main .color-0 { | |
color: var(--b1-0) !important; | |
} | |
#main .bg-color-0 { | |
background-color: var(--b1-0) !important; | |
} | |
#main .color-1 { | |
color: var(--b2-0) !important; | |
} | |
#main .bg-color-1 { | |
background-color: var(--b2-0) !important; | |
} | |
#main .color-2 { | |
color: var(--b3-0) !important; | |
} | |
#main .bg-color-2 { | |
background-color: var(--b3-0) !important; | |
} | |
#main .color-3 { | |
color: var(--b4-0) !important; | |
} | |
#main .bg-color-3 { | |
background-color: var(--b4-0) !important; | |
} | |
#main .color-4 { | |
color: var(--b5-0) !important; | |
} | |
#main .bg-color-4 { | |
background-color: var(--b5-0) !important; | |
} | |
#main .color-5 { | |
color: var(--b6-0) !important; | |
} | |
#main .bg-color-5 { | |
background-color: var(--b6-0) !important; | |
} | |
#main .color-6 { | |
color: var(--b7-0) !important; | |
} | |
#main .bg-color-6 { | |
background-color: var(--b7-0) !important; | |
} | |
#main .color-7 { | |
color: var(--b8-0) !important; | |
} | |
#main .bg-color-7 { | |
background-color: var(--b8-0) !important; | |
} | |
#main .color-8 { | |
color: var(--b1-1) !important; | |
} | |
#main .bg-color-8 { | |
background-color: var(--b1-1) !important; | |
} | |
#main .color-9 { | |
color: var(--b2-1) !important; | |
} | |
#main .bg-color-9 { | |
background-color: var(--b2-1) !important; | |
} | |
#main .color-10 { | |
color: var(--b3-1) !important; | |
} | |
#main .bg-color-10 { | |
background-color: var(--b3-1) !important; | |
} | |
#main .color-11 { | |
color: var(--b4-1) !important; | |
} | |
#main .bg-color-11 { | |
background-color: var(--b4-1) !important; | |
} | |
#main .color-12 { | |
color: var(--b5-1) !important; | |
} | |
#main .bg-color-12 { | |
background-color: var(--b5-1) !important; | |
} | |
#main .color-13 { | |
color: var(--b6-1) !important; | |
} | |
#main .bg-color-13 { | |
background-color: var(--b6-1) !important; | |
} | |
#main .color-14 { | |
color: var(--b7-1) !important; | |
} | |
#main .bg-color-14 { | |
background-color: var(--b7-1) !important; | |
} | |
#main .color-15 { | |
color: var(--b1-2) !important; | |
} | |
#main .bg-color-15 { | |
background-color: var(--b1-2) !important; | |
} | |
#main .color-16 { | |
color: var(--b2-2) !important; | |
} | |
#main .bg-color-16 { | |
background-color: var(--b2-2) !important; | |
} | |
#main .color-17 { | |
color: var(--b3-2) !important; | |
} | |
#main .bg-color-17 { | |
background-color: var(--b3-2) !important; | |
} | |
#main .color-18 { | |
color: var(--b4-2) !important; | |
} | |
#main .bg-color-18 { | |
background-color: var(--b4-2) !important; | |
} | |
#main .color-19 { | |
color: var(--b5-2) !important; | |
} | |
#main .bg-color-19 { | |
background-color: var(--b5-2) !important; | |
} | |
#main .color-20 { | |
color: var(--b6-2) !important; | |
} | |
#main .bg-color-20 { | |
background-color: var(--b6-2) !important; | |
} | |
@media screen and (max-height: 648px) { | |
#app > div > [tabindex] { | |
min-height: auto; | |
} | |
} | |
@media screen and (max-width: 648px) { | |
#app > div > [tabindex] { | |
min-width: auto; | |
} | |
} | |
@media screen and (max-width: 720px) { | |
.two > div:nth-child(3), | |
.three > div:nth-child(3) { | |
flex: 0 0 80px !important; | |
transition: 0.2s ease; | |
} | |
.two > div:nth-child(3):hover, | |
.three > div:nth-child(3):hover, | |
.two > div:nth-child(3):focus-within, | |
.three > div:nth-child(3):focus-within { | |
flex: 0 0 30% !important; | |
} | |
.two > div:nth-child(2) > div:nth-child(2) { | |
flex: 0 0 calc(100% - 80px) !important; | |
margin-left: calc(-30% + 80px); | |
} | |
.two > div:nth-child(3) { | |
min-width: 1px !important; | |
transition: 0.3s ease !important; | |
transition-delay: var(--c-m-delay) !important; | |
} | |
.two > div:nth-child(3):hover { | |
min-width: 349px !important; | |
transition-delay: var(--c-m-hover) !important; | |
flex: 0 0 30% !important; | |
} | |
.two > :nth-child(2) > :nth-child(1) { | |
z-index: 201 !important; | |
flex: 0 0 30% !important; | |
min-width: 350px !important; | |
} | |
.two > :nth-child(2) > :nth-child(1) [style][tabindex] { | |
border-right: 1px solid var(--bg-5) !important; | |
} | |
.three > div:nth-child(2) > div:nth-child(2) { | |
flex: 0 0 calc(100% - 30% - 80px) !important; | |
margin-left: calc(-30% + 80px); | |
} | |
.three > div:nth-child(4) { | |
flex: 0 0 calc(100% - 30% - 80px) !important; | |
} | |
.three > div:nth-child(3):hover { | |
flex: 0 0 80px !important; | |
} | |
.three ._14VS3, | |
.three ._1xXdX { | |
flex: 0 0 30% !important; | |
border-color: transparent !important; | |
} | |
._3qx7_:not(._3fVV4) label { | |
padding: 0px; | |
} | |
#side > header { | |
min-width: 240px; | |
} | |
#side > header + span { | |
display: none; | |
} | |
#side .eJ0yJ > div:last-child { | |
padding-left: 5px !important; | |
} | |
#side .eJ0yJ ._1582E { | |
position: relative; | |
flex-direction: row-reverse !important; | |
} | |
#side .eJ0yJ ._1582E .m61XR { | |
z-index: 999 !important; | |
margin-left: 0 !important; | |
position: absolute; | |
left: -41px; | |
bottom: -6px; | |
border-radius: 50%; | |
} | |
#side .eJ0yJ ._1582E .m61XR ._15G96 { | |
margin: 0; | |
} | |
[dir = 'RTL'] #side .eJ0yJ ._1582E .m61XR { | |
left: unset !important; | |
right: -77px !important; | |
} | |
#side .eJ0yJ ._1582E .m61XR ._31gEB { | |
border: 4px solid var(--bg-2); | |
} | |
#side .eJ0yJ ._1582E .m61XR > span { | |
display: flex !important; | |
flex-direction: row-reverse !important; | |
} | |
#side .eJ0yJ ._1582E ._38QnI, | |
#side .eJ0yJ ._1582E .ZKn2B > *:not(._31gEB) { | |
display: none; | |
} | |
._616fG { | |
overflow: unset !important; | |
margin-top: -8px !important; | |
margin-left: 0px !important; | |
position: absolute !important; | |
} | |
._616fG::before { | |
content: '' !important; | |
z-index: 1 !important; | |
position: absolute !important; | |
top: -31px !important; | |
left: -71px !important; | |
height: 53px !important; | |
width: 53px !important; | |
border-radius: var(--r-avatars) !important; | |
box-shadow: inset 0 0 0 3px var(--b4-0) !important; | |
animation: 2s aBorder infinite !important; | |
} | |
[dir = 'RTL'] ._616fG::before { | |
left: 62px !important; | |
} | |
#side .eJ0yJ .zFnXi { | |
padding: 1.5px; | |
z-index: 101; | |
position: absolute; | |
margin: -2px 0 0 -75px; | |
border: 3px solid var(--bg-2); | |
background-color: var(--bg-1) !important; | |
border-radius: 50%; | |
} | |
[dir = 'RTL'] #side .eJ0yJ .zFnXi { | |
margin-right: -35px !important; | |
} | |
#side .eJ0yJ .zFnXi > span > svg { | |
padding: 2px; | |
height: 14px !important; | |
width: 14px !important; | |
} | |
#side .eJ0yJ._13opk ._31gEB, | |
#side .eJ0yJ._13opk .zFnXi { | |
border-color: var(--bg-4) !important; | |
} | |
#side .eJ0yJ:hover:not(._13opk) ._31gEB, | |
#side .eJ0yJ:hover:not(._13opk) .zFnXi { | |
border-color: var(--bg-3) !important; | |
} | |
#side ._2kHpK { | |
min-width: 80px !important; | |
} | |
} | |
.message-in .selectable-text.invisible-space[dir = 'rtl']::before, | |
.message-out .selectable-text.invisible-space[dir = 'rtl']::before, | |
.message-in a.selectable-text[href]::before, | |
.message-out a.selectable-text[href]::before, | |
.message-in .eRacY[dir = 'ltr'] > [dir = 'ltr']::before, | |
.message-out .eRacY[dir = 'ltr'] > [dir = 'ltr']::before, | |
.message-in .selectable-text.invisible-space[dir = 'rtl']::after, | |
.message-out .selectable-text.invisible-space[dir = 'rtl']::after, | |
.message-in a.selectable-text[href]::after, | |
.message-out a.selectable-text[href]::after, | |
.message-in .eRacY[dir = 'ltr'] > [dir = 'ltr']::after, | |
.message-out .eRacY[dir = 'ltr'] > [dir = 'ltr']::after { | |
content: unset !important; | |
} | |
.message-in [data-pre-plain-text] > [dir = 'rtl'], | |
.message-out [data-pre-plain-text] > [dir = 'rtl'] { | |
padding-bottom: 0.8rem !important; | |
} | |
.message-in .selectable-text.invisible-space[dir = 'rtl'] > span[class], | |
.message-out .selectable-text.invisible-space[dir = 'rtl'] > span[class] { | |
display: unset !important; | |
} | |
@supports (-moz-user-select: none) { | |
.message-in .selectable-text.invisible-space[dir = 'rtl']::before, | |
.message-out .selectable-text.invisible-space[dir = 'rtl']::before { | |
content: unset !important; | |
} | |
} | |
.message-in [style *= 'width'] + div > .eRacY[dir = 'rtl'], | |
.message-out [style *= 'width'] + div > .eRacY[dir = 'rtl'], | |
.message-in .video-thumb + div > .eRacY[dir = 'rtl'], | |
.message-out .video-thumb + div > .eRacY[dir = 'rtl'] { | |
padding-bottom: 0.8rem !important; | |
} | |
.message-in .message-text-link::after, | |
.message-out .message-text-link::after { | |
content: unset !important; | |
} | |
.message-in ._20sYJ, | |
.message-out ._20sYJ { | |
padding-bottom: 0; | |
} | |
.message-in > div:nth-child(2), | |
.message-out > div:nth-child(2) { | |
min-width: 56px; | |
} | |
[class*='message-'] img[src$='-64.png'][alt='💋'] { | |
animation: aKiss 1s infinite; | |
} | |
[class*='message-'] img[src$='-64.png'][alt='🤩'], | |
[class*='message-'] img[src$='-64.png'][alt='😍'], | |
[class*='message-'] img[src$='-64.png'][alt='☺️'], | |
[class*='message-'] img[src$='-64.png'][alt='❣️'], | |
[class*='message-'] img[src$='-64.png'][alt='♥️'], | |
[class*='message-'] img[src$='-64.png'][alt='❤️'] { | |
animation: aPulse 1s infinite; | |
} | |
.gm-style img[src *= 'images/google'], | |
.gm-style img[src *= 'maps.googleapis.com'], | |
.gm-style img[style *= 'width: 256px'][style *= 'height: 256px'] { | |
filter: invert(0.8) hue-rotate(180deg) contrast(120%) !important; | |
} | |
.gm-style img[src *= 'com/pp?'], | |
.gm-style [style *= 'height: 40px; width: 40px'] { | |
border-radius: 50% !important; | |
} | |
._3UG7w:not(#z) > div[style] { | |
background-color: transparent !important; | |
} | |
.gm-style [controlwidth = '40'] * { | |
filter: invert(0.9) !important; | |
} | |
.gm-style [controlwidth = '40'] * [style *= 'd-color: rgb(255, 255, 255)'] { | |
background-color: var(--bg-0) !important; | |
} | |
.gm-style [style *= 'd-color: rgb(245, 245, 245)'] { | |
background-color: var(--bg-4) !important; | |
} | |
.gm-style [style *= ' color: rgb(68, 68, 68)'] { | |
color: var(--fg-3) !important; | |
} | |
.gm-style .BPkae { | |
border-top-color: var(--modal-background) !important; | |
} | |
.gm-style ._2T2Fj { | |
background-color: var(--ac-1) !important; | |
} | |
.VK7yK { | |
box-shadow: 0 -1px var(--bg-5) !important; | |
} | |
`); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment