whatsapp new mobile redesign for web (custom css)

readme.md

This is still W.I.P

main.css

/** modify voice message button color **/
button[aria-label="Voice message"] {
    background-color: #21C063;
    border-radius: 50px;
}

button[aria-label="Voice message"] svg {
    width: 20px;
    height: 20px;
}

/** modify send message button color **/
button[aria-label="Send"] {
    background-color: #21C063;
    border-radius: 50px;
    width: 40px;
    height: 40px;

}

button[aria-label="Send"] svg {
    width: 20px;
    height: 20px;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}


/** modify the voice message icon **/
path[d="M11.999,14.942c2.001,0,3.531-1.53,3.531-3.531V4.35c0-2.001-1.53-3.531-3.531-3.531 S8.469,2.35,8.469,4.35v7.061C8.469,13.412,9.999,14.942,11.999,14.942z M18.237,11.412c0,3.531-2.942,6.002-6.237,6.002 s-6.237-2.471-6.237-6.002H3.761c0,4.001,3.178,7.297,7.061,7.885v3.884h2.354v-3.884c3.884-0.588,7.061-3.884,7.061-7.885 L18.237,11.412z"] {
    fill: #051717;
}

/** modify the send message icon **/
path[d="M1.101,21.757L23.8,12.028L1.101,2.3l0.011,7.912l13.623,1.816L1.112,13.845 L1.101,21.757z"] {
    fill: #051717;
}

/** modify the input for messages **/
.copyable-area {
    --rich-text-panel-background: none;
}

div:has(> .lexical-rich-text-input) {
    border-radius: 30px;
    background: #1F2C34
}


/** change colors to new ones **/
* {
    --panel-header-background: #0B141B;
    --dropdown-background: #121B22;
    --panel-background-colored: #0B141B;
    --drawer-background: #0B141B;
    --drawer-gallery-background: #0B141B;
    --avatar-background: #0B141B;
    --background-default: #0B141B;
    --background-document-with-captions: #0B141B;
    --button-primary: #0B141B;
    --button-primary-destructive-color: #0B141B;
    --button-primary-destructive-spinner-color: #0B141B;
    --checkbox-mark: #0B141B;
    --drawer-background: #0B141B;
    --drawer-gallery-background: #0B141B;
    --drawer-section-background: #0B141B;
    --electron-deprecation-app-expired-header: #0B141B;
    --filters-container-background: #0B141B;
    --location-cluster-background: #0B141B;
    --modal-backdrop-solid: #0B141B;
    --panel-background: #0B141B;
    --popup-panel-background: #0B141B;
    --product-thumb-background: #0B141B;
    --poll-modal-background-color: #0B141B;
    --ptt-draft-waveform-background-border: #0B141B;
    --search-container-background: #0B141B;
    --search-input-container-background: #0B141B;
    --search-input-container-background-active: #0B141B;
    --startup-background: #0B141B;
    --status-link-preview-title: #0B141B;
    --voip-background: #0B141B;
    --reactions-bubble-border: #0B141B;
    --skeleton-gradient-background-middle: #0B141B;
    --carousel-button-background-color: #0B141B;
    --splashscreen-startup-background: #0B141B;
    --butterbar-connection-primary: #0B141B;
    --butterbar-fatal-primary: #0B141B;
    --butterbar-primary: #0B141B;
    --butterbar-green-nux-primary: #0B141B;
    --butterbar-blue-nux-primary: #0B141B;
    --butterbar-ad-action-info-primary: #0B141B;
    --butterbar-ad-action-warning-primary: #0B141B;
    --compose-primary: #0B141B;
    --modal-title: #0B141B;
    --status-link-preview-title: #0B141B;
    --voip-background: #0B141B;
    --gray-850: #0B141B;
    --gray-900: #0B141B;
    --wds-cool-gray-900: #0B141B;
}