/* ==UserStyle== @name Dark-WhatsApp Lite @description Non-customizable version of Dark-WhatsApp. @namespace github.com/vednoc/dark-whatsapp @homepageURL https://github.com/vednoc/dark-whatsapp @supportURL https://github.com/vednoc/dark-whatsapp/issues @updateURL https://userstyles.world/api/style/253.user.css @author vednoc (https://github.com/vednoc) @version 3.7.2 @license MIT ==/UserStyle== */ @-moz-document domain('web.whatsapp.com') { :root:not(#z), .dark:not(#z) { --version: '🌚 Dark-WhatsApp Lite v3.7.2 — March 31st, 2023'; --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-2); --green-deep-rgb: var(--ac-2-rgb); --blue-ocean: var(--bg-2); --blue-ocean-rgb: var(--bg-2-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); --chat-meta: var(--fg-3); --chat-meta-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); --chevron-button-background: var(--bg-3); --chevron-button-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-2); --intro-border-rgb: var(--ac-2-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.8); --quick-action-button-rgb: var(--fg-3-rgb); --quick-action-button-background: var(--bg-4); --quick-action-button-background-rgb: var(--bg-4-rgb); --round-entry-point-background-color: var(--bg-4); --round-entry-point-background-color-rgb: var(--bg-4-rgb); --quoted-message-text: var(--fg-2); --quoted-message-text-rgb: var(--fg-2-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: var(--ac-0); --teal-hover-rgb: var(--ac-0-rgb); --teal-pale: var(--ac-3); --teal-pale-rgb: var(--ac-3-rgb); --text-muted: var(--fg-4); --text-muted-rgb: var(--fg-4-rgb); --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-text: var(--fg-1); --tooltip-text-rgb: var(--fg-1-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-timestamp: var(--ac-0); --unread-timestamp-rgb: var(--ac-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); --reactions-tray-background: var(--bg-3); --reactions-tray-background-rgb: var(--bg-3-rgb); --reactions-tray-active-round-background: var(--bg-5); --reactions-tray-active-round-background-rgb: var(--bg-5-rgb); --reactions-picker-bg: var(--bg-4); --reactions-picker-bg-rgb: var(--bg-4-rgb); --svg-gray-button: var(--fg-3); --svg-gray-button-rgb: var(--fg-3-rgb); --text-primary-strong: var(--fg-1); --text-primary-strong-rgb: var(--fg-1-rgb); --text-secondary-lighter: var(--fg-2); --text-secondary-lighter-rgb: var(--fg-2-rgb); --text-medium-emphasis: var(--fg-3); --text-medium-emphasis-rgb: var(--fg-3-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,"); } @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 ._1Ftww { color: var(--fg-1) !important; border: 1px solid var(--bg-5) !important; } html > body ._1Ftww button:nth-child(2) { color: var(--ac-1) !important; } html > body ._1Ftww button:nth-child(3) { color: var(--fg-4) !important; } html > body [data-testid^="intro-md-beta-logo-"] { padding: 8rem; background-image: var(--intro-image); } html > body [data-testid^="intro-md-beta-logo-"] > svg { display: none; } html > body [data-testid="intro-title"] { font-size: 0px !important; } html > body [data-testid="intro-title"]::before { content: var(--version); font-size: 1.5rem; } html > body [data-testid="intro-text"] { font-size: 0px !important; } html > body [data-testid="intro-text"]::before { content: 'Still looking for someone to help maintain Dark-WhatsApp. I will try to maintain it until a big breaking update. Also, check out my other project related to userstyles:\A\A 🌟 https://userstyles.world 🌟\A\A Changelog: https://github.com/vednoc/dark-whatsapp\AP.S. CSS can not create clickable links.'; white-space: pre-wrap; font-size: 0.875rem; } .Iwkc0 { position: relative; --blue-light: var(--ac-3); --inverse: var(--ac-3); } .Iwkc0:first-child, .Iwkc0:first-child::after { width: calc(100% + 8px); } .Iwkc0:first-child::before { content: ''; filter: invert(var(--chat-bg-i)) opacity(var(--chat-bg-o)); background: var(--chat-image) !important; position: absolute; height: 100%; width: 100%; } .Iwkc0:first-child span { font-size: 0 !important; } .Iwkc0:first-child span::before { content: 'Use this with Dark-WhatsApp'; font-size: 16px !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; } [id*='startup'] .graphic::after { opacity: 0.6 !important; background: linear-gradient(to right, var(--bg-0) 0%, var(--bg-0) 33%, transparent 44%, transparent 55%, var(--bg-0) 66%, var(--bg-0) 100%) !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; } ._3g4Pn[style], ._3PdFH { background-color: var(--bg-5) !important; } ._3g4Pn[style], ._3g4Pn[style] > img, img.o2zu3hjb, ._1jLYl, ._1PAkz { border-radius: var(--r-avatars) !important; } [data-list-scroll-offset] > div:first-child > div:last-child { margin-left: 0 !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; } [data-animate-media-viewer] > div:first-child { border-bottom: 1px solid var(--bg-5) !important; background-color: var(--bg-2) !important; } .overlay [data-testid='cell-frame-container'] { background-color: transparent !important; } .overlay [data-animate-modal-popup] { box-shadow: var(--bshadow) !important; 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); } ._1XWMx { border-color: var(--bg-5) !important; background-color: var(--bg-2) !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; } [data-testid="confirm-popup"] { background-color: var(--modal-backdrop) !important; } [data-testid="confirm-popup"] [data-animate-modal-popup] { --white-rgb: var(--fg-1-rgb); } .landing-title { color: var(--fg-1) !important; } .landing-wrapper-before { background-color: var(--bg-1) !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 { color: var(--ac-0) !important; } .landing-main label { color: var(--fg-3) !important; } .landing-main [fill^='#f2f'i] { fill: var(--bg-5); } .landing-main [fill^='#818'i] { fill: var(--fg-1); } .landing-main div[data-ref] { 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 { background-color: transparent !important; } .landing-main + div img { opacity: 0.3; } .landing-main + div [style *= 'opacity: 1'] { background-color: transparent !important; } .landing-main a[href*='faq.whatsapp.com'] + div > span > div { color: #fff !important; background-color: var(--ac-0) !important; box-shadow: bsh; } .landing-main a[href*='faq.whatsapp.com'] + div > span > div::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 > ._36BuW::before, span div:first-child > ._36BuW::before { content: none; } #app > div .p3_M1 { border-radius: var(--r-inputs) !important; } #app > div > span > div[style ^= 'transform-origin:'][tabindex], #app > div .o--vV[style ^= 'transform-origin:'][tabindex] { box-shadow: var(--bshadow) !important; border: 1px solid var(--bg-4); border-radius: var(--r-menus) !important; } #app > div > span > ._3IU7z { border: 1px solid var(--bg-5) !important; box-shadow: var(--bshadow) !important; } #app > div > span > ._3IU7z div[tabindex='-1'] > div:only-child { border-left: none !important; } #app > div > span > ._3IU7z > [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; } [data-testid="chat-list-search-container"] { background-color: var(--bg-2) !important; border-bottom: 1px solid var(--bg-5) !important; } [data-testid="chat-list-search-container"] > div { border-radius: var(--r-inputs) !important; box-shadow: inset 0 0 0 1px var(--bg-4); } [data-testid="chat-list-search-container"]:focus-within { box-shadow: var(--bshadow); } #app > div > [tabindex] [data-testid="chatlist-header"] { border-bottom: 1px solid var(--bg-5) !important; } #app > div > [tabindex] [data-testid='chat-butterbar'] { border-bottom: 1px solid var(--bg-5) !important; } #app > div > [tabindex] [data-testid='chat-butterbar'] [data-icon = 'x'] svg path { fill: var(--fg-5); } #app > div > [tabindex].three > [data-testid="drawer-right"] { border-left: 1px solid var(--bg-5) !important; } #app > div > [tabindex].three > [data-testid="drawer-right"] section > div { box-shadow: 0 0 0 1px var(--bg-4) !important; } .dark .three #main > *, .dark .three #main .copyable-area > div[tabindex='0'] { 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.wJ21F, #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-3) !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; } .copyable-area header[class] { height: 59px !important; justify-content: center !important; border-bottom: 1px solid var(--bg-5) !important; } .copyable-area header[class] > [data-animate-drawer-title] { height: unset !important; } .copyable-area header[class] > [data-animate-drawer-title] > div:nth-child(2) { margin-top: 1px !important; font-size: 18px !important; font-weight: normal !important; } #main > header { border-bottom: 1px solid var(--bg-5) !important; box-shadow: none !important; border-color: var(--bg-5) !important; } #main > header::after { content: unset; } #main .EtBAv { border: 1px solid var(--b6-3); text-shadow: none !important; } #main .EtBAv._1p8Qv { border: 1px solid var(--b3-4); } [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 ._5ML0C { border: none !important; } #main [data-js-context-icon] + div[style] { background-color: var(--bg-4) !important; } [style *= 'width'][style *= 'height'] + div._2AKAp, [style *= 'width'][style *= 'height'] + div.zE8pI { padding: 2px 4px !important; background-color: rgba(var(--bg-1-rgb), 0.7) !important; border-radius: 5px !important; } .video-thumb ._1rd4q, .video-thumb + ._3phU6 { padding: 2px 4px !important; background-color: rgba(var(--bg-1-rgb), 0.7) !important; border-radius: 5px !important; } .video-thumb._3V2jl + ._3phU6 { 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; } .fMR4l { 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 ._3ImlL { border-top: none; border-bottom: 1px solid var(--bg-5); } #main > footer ._31enr { 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 > .OVz7E { border-top: 1px solid var(--bg-5) !important; border-left: 1px solid var(--bg-5) !important; } #main > footer ._2A8P4 { border-radius: var(--r-inputs) !important; } #main img[src *= 'maps.googleapis.com'] { filter: invert(0.8) hue-rotate(180deg) !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(4), .three > div:nth-child(4) { flex: 0 0 80px !important; transition: 0.2s ease; } .two > div:nth-child(4):hover, .three > div:nth-child(4):hover, .two > div:nth-child(4):focus-within, .three > div:nth-child(4):focus-within { flex: 0 0 30% !important; } .two > div:nth-child(3) > div:nth-child(2) { flex: 0 0 calc(100% - 80px) !important; margin-left: calc(-30% + 80px); } .two > div:nth-child(4) { min-width: 1px !important; transition: 0.3s ease !important; transition-delay: var(--c-m-delay) !important; } .two > div:nth-child(4):hover { min-width: 349px !important; transition-delay: var(--c-m-hover) !important; flex: 0 0 30% !important; } .two > :nth-child(3) > :nth-child(1) { z-index: 201 !important; flex: 0 0 30% !important; min-width: 350px !important; } .two > :nth-child(3) > :nth-child(1) [style][tabindex] { border-right: 1px solid var(--bg-5) !important; } .three > div:nth-child(3) > div:nth-child(2) { flex: 0 0 calc(100% - 30% - 81px) !important; margin-left: calc(-30% + 80px); } .three > div:nth-child(4) { max-width: 80px !important; flex: 0 0 80px !important; } [data-testid="chatlist-header"] { display: flex; justify-content: start; min-height: 59px; } [data-testid="chatlist-header"]:not(:focus-within) { overflow: hidden; } [data-testid="chatlist-header"] > div:nth-child(2) { margin-left: 1rem; } [data-testid="chatlist-header"] + span { display: none; } [data-testid="chatlist-header"] + span + div:not(:focus-within) [data-testid="chat-list-search-container"] > div { min-width: 60px; } #side span[title*="…"] { overflow: unset !important; margin-top: -8px !important; margin-left: 0px !important; position: absolute !important; } #side span[title*="…"]::before { content: '' !important; position: absolute !important; top: -31px !important; left: -66px !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'] #side span[title*="…"]::before { left: 63px !important; } #side [data-testid='cell-frame-container'] > div:nth-child(2) > div:nth-child(2) { position: relative; flex-direction: row-reverse; } #side [data-testid='cell-frame-container'] > div:nth-child(2) > div:nth-child(2) [role='gridcell'] { margin: 0 !important; } #side [data-testid='cell-frame-container'] > div:nth-child(2) > div:nth-child(2) [data-testid="icon-unread-count"] { left: 44px; z-index: 9999; position: fixed; margin-top: 4px; border: 2px solid var(--bg-2) !important; } #side [data-testid='cell-frame-container'] > div:nth-child(2) > div:nth-child(2) [data-testid^="status-"] { left: 44px; z-index: 9999; position: fixed; margin-top: 4px; padding: 3px !important; border: 2px solid var(--bg-2) !important; background-color: var(--bg-4) !important; border-radius: 50%; } #side [data-testid='cell-frame-container'] > div:nth-child(2) > div:nth-child(2) [data-testid^="status-"] svg { width: 14px; height: 14px; } #side [data-testid='cell-frame-container'] > div:nth-child(2) > div:nth-child(2) .status-vcard, #side [data-testid='cell-frame-container'] > div:nth-child(2) > div:nth-child(2) button[aria-hidden], #side [data-testid='cell-frame-container'] > div:nth-child(2) > div:nth-child(2) [data-icon]:not([data-icon*='status-']):not([data-icon*='disappearing']) { display: none; } #side:not(#z) [aria-selected='false'] > div:hover [data-testid="icon-unread-count"], #side:not(#z) [aria-selected='false'] > div:hover [data-testid^="status-"] { border-color: var(--bg-3) !important; } #side:not(#z) [aria-selected='false'] > div:hover [data-testid^="status-"] { background-color: var(--bg-5) !important; } #side:not(#z) [aria-selected='true'] > div [data-testid="icon-unread-count"], #side:not(#z) [aria-selected='true'] > div [data-testid^="status-"] { border-color: var(--bg-4) !important; background-color: var(--bg-1) !important; } #side > #pane-side { overflow-x: hidden !important; } [data-testid="chatlist-e2e-message"] { display: none; } } .message-in .copyable-text.selectable-text:has([src^='/img'][src$='-40.png']), .message-out .copyable-text.selectable-text:has([src^='/img'][src$='-40.png']), .message-in .copyable-text.selectable-text:has([src^='/img'][src$='-64.png']), .message-out .copyable-text.selectable-text:has([src^='/img'][src$='-64.png']) { margin: 0 57px 0 0 !important; } [class*='message-'] img[src$='-64.png'][alt='💋'] { animation: aKiss 1.5s infinite; } [class*='message-'] img[src$='-64.png'][alt='❤️'] { animation: aPulse 1.5s 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; } .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 ._3Q8RX { background-color: var(--ac-1) !important; } ._3nNEI { box-shadow: 0 -1px var(--bg-3) !important; } }