Skip to content

Whatsapp Web by franco

Screenshot of Whatsapp Web

Details

Authorfranco

LicenseNONE

Categorywhatsapp

Created

Updated

Size64 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Responsive Whatsapp Web Skin. This skin has animation for the chat partition which close after the mouse is moved to the chat.

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         Whatsapp Web (Reactive)
@namespace    USO Archive
@author       Cosmic
@description  Responsive Whatsapp Web Skin. This skin has animation for the chat partition which close after the mouse is moved to the chat.
@version      20231029.05.52
@license      NONE
@preprocessor uso
==/UserStyle== */
@-moz-document domain("web.whatsapp.com") {
:root, .dark {
	/*Style created BY Kilgor485747
@name         Responsive Whatsapp
@homepageURL  https://userstyles.org/users/308360
@author       Kilgor485747 
@e-mail       Kilgor485747@hotmail.com
@version      1.8
@license      MIT
@preprocessor stylish
*/
	
/* ========================== TIP 1 / DICA 1 ================================== */	
	
	/* To keep the left sidebar open just delete all code 2 */
	
	/* Para manter o sidebar aberto basta excluir todo o codigo 2  */
	
/* ========================== TIP 2 / DICA 2 ================================== */
	
	/* To customize the wallpaper just change the link in line 962 to another one of your choice */
	
   /*Para customizar o wallpaper basta alterar o link na linha 962 para outro de sua preferencia*/

/* ============================================================================ */		
        --height-offset-chat: 30px;        
        --height-offset-contacts: 0px;
        --height-offset-contact-negative: translate(0, -0px);
        --width-chat: 1200px;
        --width-contacts: 80px;
        --corner-smooth-chat: 16px;
        --corner-smooth-contacts: 0px;
        --chat-blur-intensity: blur(16px);
        --contacts-blur-intensity: blur(16px);
        --chat-color: rgba(0, 0, 0, 0.2);
        --contacts-color: rgba(0, 0, 0, 0.2);
        --chat-header-color: rgba(0, 0, 0, 0.2);
        --contacts-header-color: rgba(0, 0, 0, 0.2);
        --contact-selected-color: rgba(0, 0, 0, 0.2);
        --contact-selected-line-color: #65BFFF;
        --outgoing-bgr: #3939398c !important;
        --outgoing-blur-intensity: blur(16px);
        --incoming-bgr: #0000008c !important;
        --incoming-filter: blur(10px) !important;
        --txt-color: #FFFFFF;
        --link-color: #68BBE4;
        --notice-color: #ff473d;
        --read-marker: #65BFFF;
        --input-bgr: rgba(0, 0, 0, 0.2);
        --input-txt: #F2F2F2;
        /**/
        --txt-color-dark: var(--txt-color);
        --txt-color-opacity: var(--txt-color);
        --ico-color: var(--txt-color);
        --ico-hover-color: var(--txt-color);
        --contact-selected-hover-color: var(--contact-selected-color);
        /**/
        --popup-txt: #d2d2d2;
        --popup-bgr: #00000047;
        --emoji-ico-hover: #d2d2d2;
        --emoji-search-bgr: #eee;
        --emoji-search-bgr-hover: #fff;
        --reference-person-hover: #006090;
        --semi-transparent: rgba(0, 0, 0, 0.2);
        
        /**/
        --chat-marginX: 16px;
        --chat-padding: 32px;
        --chat-padding-x: 64px;
        /**/
        --startup-background: transparent;
        --startup-background-rgb: transparent;
        --bgr-color: #333;
        --link: var(--link-color);
        --link-rgb: var(--link-color);
        --read-marker-color: var(--read-marker);
        --icon-ack-rgb: var(--read-marker);
        --icon-ack: var(--read-marker);
        --app-background-stripe: transparent;
        --intro-background: transparent;
        --panel-background-lighter: transparent;
        --panel-header-background: transparent;
        --avatar-background: transparent;
        --conversation-panel-border: transparent;
        --border-default: transparent;
        --border-default-rgb: transparent;
        --border-list: var(--contacts-border);
        --border-list-rgb: var(--contacts-border);
        --border-panel: transparent;
        --border-panel-rgb: transparent;
        --border-strong: transparent;
        --border-stronger: transparent;
        --border-strong-rgb: transparent;
        --border-stronger-rgb: transparent;
        --typing: var(--notice-color);
        --typing-rgb: var(--notice-color);
    }



    /*Dark emoji window*/
    

    /* Hide contacts separate lines */
    

    #side {
        --unread-marker-background: var(--notice-color);
        --search-container-background: transparent;
        --input-placeholder: var(--input-txt);
        --input-placeholder-rgb: var(--input-txt);
    }
    #main {
        --compose-panel-background-hover: var(--reference-person-hover);
        --compose-panel-background-hover-rgb: var(--reference-person-hover);
        --primary-strong: var(--txt-color);
        --primary-stronger: rgba(241, 241, 242, 0.88);
        --primary-strongest: #fff;
        --secondary: var(--txt-color-dark);
        --secondary-lighter: var(--txt-color-dark);
        --secondary-stronger: var(--txt-color-dark);
        --primary-title: var(--txt-color);
        --message-primary: var(--txt-color);
        --input-placeholder: var(--input-txt);
        --input-placeholder-rgb: var(--txt-color-dark);
        --compose-input-background: var(--input-bgr);
        --compose-primary: var(--input-txt);
        --intro-secondary: var(--txt-color-dark);
        --bubble-meta: var(--txt-color-dark);
        --system-message-text: var(--txt-color);
        --unread-marker-text: var(--txt-color);
        --icon-lighter: var(--txt-color-opacity);
        --bubble-meta-icon: var(--txt-color-dark);
        --conversation-panel-background: transparent;
        --compose-panel-background: transparent;
        --rich-text-panel-background: transparent;
        --compose-input-background-focused: #3f5560;
        --incoming-primary: #797c7e;
        --incoming-background: var(--incoming-bgr);
        --incoming-background-rgb: var(--incoming-bgr);
        --incoming-background-deeper: var(--incoming-bgr);
        --incoming-background-deeper-rgb: var(--incoming-bgr);
        --incoming-background-highlight: #ccc;
        --incoming-background-highlight-rgb: var(--incoming-bgr);
        --outgoing-background: var(--outgoing-bgr);
        --outgoing-background-rgb: var(--outgoing-bgr);
        --outgoing-background-deeper: var(--outgoing-bgr);
        --outgoing-background-deeper-rgb: var(--outgoing-bgr);
        --outgoing-background-highlight: #ccc;
        --outgoing-background-highlight-rgb: var(--outgoing-bgr);
        --panel-background: #20272b;
        --panel-background-rgb: rgba(32, 39, 43, 1);
        --panel-background-active: #1e2529;
        --system-message-background: var(--semi-transparent);
        --notification-e2e-background: var(--semi-transparent);
        --notification-e2e-text: #fad964;
        --notification-e2e-icon: #fad964;
        --quick-action-button: var(--txt-color-dark);
        --quick-action-button-background: var(--semi-transparent);
        --unread-background: var(--semi-transparent);
        --unread-bar-background: transparent;
    }
    *, .dark * {
        scrollbar-color: var(--semi-transparent) transparent;
        scrollbar-width: large;
    }
    body {
        background: var(--bgr-color) var(--bgr-image) !important;
        background-size: cover !important;
    }
    #startup {
        animation: none !important;
    }
    #side > div,
    #side > div:nth-child(3) > div,
    #side #pane-side > div > div > div > div > div,
    #side #pane-side > div > div > div > div > div > div,
    #main > div,
    #main > div > div > div > div > div,
    #main footer > div:nth-child(2) > div > div:nth-child(4) > div:nth-child(1) > div:nth-child(2) {
        background: transparent;
    }
    #side #pane-side div > div:after,
    #app > div > div > div:nth-child(4) > div,
    #main > div > div > div > div > div,
    #main footer > div:nth-child(1) > div:nth-child(2) {
        border: unset;
    }
    #side > div:nth-child(3) > div:after,
    #app > div > div > div:nth-child(4) > div:after,
    #main header:after {
        display: none;
    }
    #app > div > div > div:nth-child(4) > div > div > div > div,
    #app > div > div > div:nth-child(4) > div > div > div > div > div > div,
    #app > div > div > div:nth-child(2) > div:nth-child(3) > span > div > span > div > div:nth-child(2) > div > div:nth-child(2) > div #side > div:nth-child(3) > div > label > div > div,
    #side #pane-side > div > div > div > div > div,
    #side #pane-side > div > div > div > div > div > div > div:nth-child(2) > div:nth-child(1) > div > span,
    #side #pane-side > div > div > div > div > div > div > div:nth-child(1) > div:nth-child(1) > div:nth-child(1),
    #main footer > div:nth-child(4) > div,
    #main footer > div:nth-child(2) > div > div:nth-child(3) > div > div > div > div:hover > span {
        color: var(--txt-color);
    }
    #app > div > div > div:nth-child(4) > div > div > div > h1,
    #side #pane-side > div > div > div > div > div > div > div:nth-child(2) > div:nth-child(1) > div,
    #side #pane-side > div > div > div > div > div > div > div:nth-child(2) > div:nth-child(2) > div > span,
    #side #pane-side > div > div > div > div > div > div > div:nth-child(1) > div:nth-child(2) > div:nth-child(1),
    #side #pane-side > div > div > div > div > div > div > div:nth-child(1) > div:nth-child(1) > div:nth-child(2),
    #main footer > div:nth-child(2) > div > div:nth-child(3) > div > div > div > div > span {
        color: var(--txt-color-dark);
    }
    #side header > div:nth-child(2) > div > span > div svg,
    #side > div:nth-child(3) > div > button svg,
    #side > div:nth-child(3) > div > span > button > span > svg,
    #side #pane-side > div > div > div > div > div > div > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) > span > div svg,
    #side #pane-side > div > div > div > div > div > div > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) > span:nth-child(3) svg,
    #main .message-in > div > div > span svg,
    #main .message-out > div > div > span svg,
    #main > div > div > div > div > div > div > div > div > a svg,
    #main > div > div > div > div > div > div > div > div > div > d...

Reviews

No reviews yet.