Lite version of WhatsApp
Catppuccion WhatsApp by franco
Details
Authorfranco
LicenseCC-BY-NC-ND-4.0
Categorywhatsapp
Created
Updated
Size73 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
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 Catppuccion WhatsApp
@namespace USO Archive
@author franco
@description Lite version of WhatsApp
@version 20231227.09.54
@license CC-BY-NC-ND-4.0
@preprocessor uso
@advanced dropdown bgr-image "Background image" {
default "Default*" <<<EOT https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/default.jpg EOT;
autumn "Autumn" <<<EOT https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/autumn.jpg EOT;
dream "Dream" <<<EOT https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/dream.jpg EOT;
forest "Forest" <<<EOT https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/forest.jpg EOT;
lake "Lake" <<<EOT https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/lake.jpg EOT;
mountain "Mountain" <<<EOT https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/mountain.jpg EOT;
office "Office" <<<EOT https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/office.jpg EOT;
spring "Spring" <<<EOT https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/spring.jpg EOT;
summer "Summer" <<<EOT https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/summer.jpg EOT;
winter "Winter" <<<EOT https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/winter.jpg EOT;
bgr-image-custom-dropdown "Custom" <<<EOT /*[[bgr-image-custom]]*\/ EOT;
}
@advanced text bgr-image-custom "Background image (Custom)" "https://example.com/image.png"
@advanced text chat-blur-intensity "Blur intensity - chat ( 0 - 64 )" "16"
@advanced color chat-selected-mark "Selected contact - mark" #65bfff
@advanced text cnt-blur-intensity "Blur intensity - contacts ( 0 - 64, require Separate contacts ON)" "16"
@advanced dropdown contacts-separator "Hide contacts separate lines" {
off "Off*" <<<EOT EOT;
on "On" <<<EOT :root, .dark {
--contacts-border: rgba(0, 0, 0, 0);
} EOT;
}
@advanced text corner-smooth-chat "Corner smooth - chat ( 0 - 48 )" "16"
@advanced text corner-smooth-cnt "Corner smooth - contacts ( 0 - 48, require Separate contacts ON)" "0"
@advanced dropdown dark-emoji "Dark emoji window" {
darkOn "Off*" <<<EOT EOT;
darkOff "On" <<<EOT :root, .dark {
--popup-txt: #ddd;
--popup-bgr: #111;
--emoji-ico-hover: #fff;
--emoji-search-bgr: #222;
--emoji-search-bgr-hover: #333;
--reference-person-hover: #156379;
} EOT;
}
@advanced text height-offset-chat "Height offset - chat ( 0 - 128 )" "32"
@advanced text height-offset-cnt "Height offset - contacts ( 0 - 128, require Separate contacts ON)" "0"
@advanced color incoming-bgr "Message bgr - guest" #262d31
@advanced color input-txt "Input field text colour" #f2f2f2
@advanced color link-color "Link colour" #68bbe4
@advanced color notice-color "Notice colour" #65bfff
@advanced color outgoing-bgr "Message bgr - you" #0e3d55
@advanced color read-marker "Read marker colour" #65bfff
@advanced dropdown reduce-contacts "Reduce contacts" {
off "Off*" <<<EOT EOT;
on "On" <<<EOT #pane-side > div > div > div > div > div > div > div:nth-child(2) {
flex-flow: row;
padding-right: 0;
}
#pane-side > div > div > div > div > div > div > div:nth-child(1) > div:nth-child(1) > div {
width: 40px !important;
height: 40px !important;
}
#pane-side > div > div > div > div > div > div > div:nth-child(2) > div:nth-child(1) {
flex-grow: 2
}
#pane-side > div > div > div > div > div > div > div:nth-child(2) > div:nth-child(1) > div:nth-child(2),
#pane-side > div > div > div > div > div > div > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) {
display: none
}
#pane-side > div > div > div > div > div > div > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) {
padding-right: 16px
}
EOT;
}
@advanced dropdown separate-contacts "Separate contacts" {
off "Off*" <<<EOT EOT;
on "On" <<<EOT #app > div > div {
opacity: 1;
animation: none !important;
width: 100vw;
height: 100vh;
max-width: unset;
border-radius: unset;
}
#app > div > div:before {
display: none;
}
#app > div > div > div:nth-child(3) {
position: absolute;
z-index: 10;
top: 0;
bottom: 0;
left: 0;
opacity: 0;
animation: ease-in-out show 0.3s 0.5s forwards;
margin: var(--height-offset-contacts) 0;
height: unset;
width: var(--width-contacts);
max-width: unset;
border-radius: 0 var(--corner-smooth-contacts) var(--corner-smooth-contacts) 0;
}
#app > div > div > div:nth-child(4) {
background: transparent !important;
min-width: 500px;
max-width: unset;
position: absolute;
z-index: 5;
top: 0;
right: 0;
bottom: 0;
left: 100px;
box-sizing: border-box;
padding: var(--height-offset-chat) var(--chat-padding-x);
animation: ease-in-out show 0.3s 1s forwards;
opacity: 0;
}
@media only screen and (max-width: 2080px) {
#app > div > div > div:nth-child(4) {
left: var(--width-contacts);
}
}
#side:before {
position: absolute;
z-index: -2;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
content: '';
background: var(--bgr-color) var(--bgr-image) !important;
transform: var(--height-offset-contact-negative);
background-size: cover !important;
filter: var(--chat-blur-intensity);
}
#side:after {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
content: '';
opacity: 1;
background-color: var(--contacts-color);
}
#app > div > div > div:nth-child(4) > div {
position: relative;
z-index: 8;
overflow: hidden;
width: 100%;
max-width: var(--width-chat);
height: 100%;
margin: 0 auto;
opacity: 1;
border: unset;
border-radius: var(--corner-smooth-chat);
transform: none !important;
}
#app > div > div > div:nth-child(4) > div:before {
position: absolute;
z-index: -10;
top: 50%;
left: 50%;
width: 100vw !important;
height: 100vh !important;
content: '';
transform: translate(calc(-50% - 50px), -50%);
background: var(--bgr-color) var(--bgr-image) !important;
background-size: cover !important;
filter: var(--chat-blur-intensity);
}
@media only screen and (max-width: 2080px) {
#app > div > div > div:nth-child(4) > div:before {
transform: translate(calc(-50% - 180px), -50%);
}
}
#app > div > div > div:nth-child(4) > div > div:before {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
content: '';
background-image: unset;
background-color: var(--chat-color) !important;
}
#main > div:before {
display: none;
}
#main > div:first-child {
opacity: 1 !important;
background-image: unset;
background-color: var(--chat-color) !important;
} EOT;
}
@advanced color txt-color "Text colour" #ffffff
@advanced text width-chat "Width - chat ( 480 - 2280 )" "1000"
@advanced text width-contacts "Width - contacts ( 240 - 500 )" "360"
==/UserStyle== */
/* ==UserStyle==
@name WhatsApp blur lite
@namespace USO Archive
@author Damian Sowiński
@description `Lite version of WhatsApp blur theme.<br>Full configurable version is here: <a href="https://github.com/DamianSowinski/whatsapp">WhatsApp blur</a>Important!Please use Stylus extension instead Stylish extension because the Stylish not allow customize theme.If there is no change after clicking button "Instal style" on this page, please click on Stylus extension ico and find this style using "Find style" options.After install you can change style options by clicking cog ico beside the style name.Alternatively you can use this link to install style directly in stylus: <a href="https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/whatsapp-blur.user.styl">Install style in stylus</a>Enjoy!`
@version 1.0.5
@license CC-BY-NC-ND-4.0
@preprocessor uso
@advanced dropdown bgr-image "Background image" {
default "Default*" <<<EOT https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/default.jpg EOT;
spring "Spring" <<<EOT https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/spring.jpg EOT;
summer "Summer" <<<EOT https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/summer.jpg EOT;
autumn "Autumn" <<<EOT https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/autumn.jpg EOT;
winter "Winter" <<<EOT https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/winter.jpg EOT;
dream "Dream" <<<EOT https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/dream.jpg EOT;
office "Office" <<<EOT https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/office.jpg EOT;
lake "Lake" <<<EOT https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/lake.jpg EOT;
forest "Forest" <<<EOT https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/forest.jpg EOT;
mountain "Mountain" <<<EOT https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/mountain.jpg EOT;
bgr-image-custom-dropdown "Custom" <<<EOT /*[[bgr-image-custom]]*\/ EOT;
}
@advanced text bgr-image-custom "Background image (Custom)" "https://example.com/image.png"
@advanced dropdown dark-emoji "Dark emoji window" {
darkOn "Off*" <<<EOT EOT;
darkOff "On" <<<EOT :root, .dark {
--popup-txt: #ddd;
--popup-bgr: #111;
--emoji-ico-hover: #fff;
--emoji-search-bgr: #222;
--emoji-search-bgr-hover: #333;
--reference-person-hover: #156379;
} EOT;
}
@advanced dropdown separate-contacts "Separate contacts" {
off "Off*" <<<EOT EOT;
on "On" <<<EOT #app > div > div {
top: 0;
opacity: 1;
animation: none !important;
width: 100vw;
height: 100vh;
max-width: unset;
border-radius: unset;
}
#app > div > div:before {
display: none;
}
#app > div > div:last-child > div:nth-child...