Combining and refining a dark theme and a dynamic sidebar
Messenger Dynamic Sidebar by evorulz
Details
Authorevorulz
LicenseNo License
Categorymessenger.com
Created
Updated
Size7.7 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
/* ==UserStyle==
@name Messenger Dynamic Sidebar
@description Show and hide your chat sidebar seamlessly
@author reizumi
@namespace codeberg.org/reizumi
@homepageURL https://codeberg.org/reizumi/userstyles
@preprocessor stylus
@version 1.2.1
@license CC-BY-SA-4.0
@var text sidebarSpeed "Sidebar speed" .2s
@var text sidebarDelay "Sidebar leave delay" .1s
@var select sidebarEase "Sidebar easing" {
"Ease*" : "ease",
"Ease-in" : "ease-in",
"Ease-out" : "ease-out",
"Ease-in-out" : "ease-in-out"
}
@var text sidebarWidth "Sidebar width (focused)" 360px
@var checkbox hideActionBar "Hide action bar" 1
@var text actionBarDelay "Action bar trigger delay" .15s
==/UserStyle== */
@-moz-document domain("messenger.com") {
if hideActionBar {
.x9f619.x1n2onr6.x1ja2u2z.x78zum5.xdt5ytf.x2lah0s.x193iq5w.xeuugli.xycxndf.x4uap5.xkhd6sd.xexx8yu.x18d9i69 {
max-width: 0;
overflow: hidden;
border-right-color: var(--web-wash);
transition: max-width sidebarSpeed;
transition-delay: actionBarDelay;
}
.x9f619.x1n2onr6.x1ja2u2z.x78zum5.xdt5ytf.x2lah0s.x193iq5w.xeuugli.xycxndf.x4uap5.xkhd6sd.xexx8yu.x18d9i69:hover {
max-width: 211px;
border-right-color: var(--media-inner-border);
}
}
/* Header */
.x1cvmir6 .x9f619.x1n2onr6.x1ja2u2z.x78zum5.x2lah0s.x1qughib.x6s0dn4.xozqiw3.x1q0g3np.x1sy10c2.xktsk01.xod5an3.x1d52u69.xzd29fr {
opacity: 0;
height: 0;
margin: 0 16px;
overflow: hidden;
transition: sidebarSpeed;
}
/* Search */
.x1cvmir6 .x9f619.x1n2onr6.x1ja2u2z.x1pi30zi.x1swvt13.xsag5q8.x1yrsyyn {
opacity: 0;
height: 0;
overflow: hidden;
transition: sidebarSpeed;
}
/* Text Header */
.x1cvmir6 .x1heor9g.x1qlqyl8.x1pd3egz.x1a2a7pz {
min-width: 150px;
}
/* Unread Message Indicator */
.x1cvmir6 .xww2gxu[data-visualcompletion="ignore"] {
position: relative;
right: 83px;
transition-delay: sidebarDelay;
}
/* Notification bell */
.x1cvmir6 .xozqiw3.x78zum5.x6s0dn4 svg,
.x1cvmir6 .xozqiw3.x78zum5.x6s0dn4 .x1fsd2vl {
display: none;
}
/* Hide contents */
.x9f619.x1n2onr6.x1ja2u2z.x78zum5.x1iyjqo2.xs83m0k.xeuugli.x1qughib.x6s0dn4.x1a02dak.x1q0g3np.xdl72j9 {
overflow: hidden;
}
/* Sidebar (not focused) */
.x1cvmir6 {
width: 80px;
min-width: 80px;
transition: width sidebarSpeed sidebarEase;
transition-delay: sidebarDelay;
}
@media only screen and (min-width: 900px) {
/* Sidebar (focused) */
.x1vjfegm:hover .x1cvmir6 {
width: sidebarWidth;
transition-delay: 0s;
}
/* Header (focused) */
.x1vjfegm:hover .x1cvmir6 .x9f619.x1n2onr6.x1ja2u2z.x78zum5.x2lah0s.x1qughib.x6s0dn4.xozqiw3.x1q0g3np.x1sy10c2.xktsk01.xod5an3.x1d52u69.xzd29fr {
opacity: 1;
height: auto;
overflow: visible;
margin: 20px 16px 12px 16px;
}
/* Search (focused) */
.x1vjfegm:hover .x9f619.x1n2onr6.x1ja2u2z.x1pi30zi.x1swvt13.xsag5q8.x1yrsyyn {
opacity: 1;
height: auto;
overflow: visible;
}
/* Unread Message Indicator (focused) */
.x1vjfegm:hover .x1cvmir6 .xww2gxu[data-visualcompletion="ignore"] {
right: 0;
transition-delay: 0s;
}
/* Notification bell (focused) */
.x1vjfegm:hover .x1cvmir6 .xozqiw3.x78zum5.x6s0dn4 svg,
.x1vjfegm:hover .x1cvmir6 .xozqiw3.x78zum5.x6s0dn4 .x1fsd2vl {
display: block;
}
/* Scrollbar */
.x1cvmir6 .x78zum5.xdt5ytf.x1iyjqo2.xs83m0k.x1xzczws.x6ikm8r.x1rife3k.x1n2onr6.xh8yej3 {
overflow-y: hidden;
}
/* Scrollbar (focused) */
.x1vjfegm:hover .x78zum5.xdt5ytf.x1iyjqo2.xs83m0k.x1xzczws.x6ikm8r.x1rife3k.x1n2onr6.xh8yej3 {
overflow-y: scroll;
}
/* Hide contents (focused) */
.x1vjfegm:hover .x1cvmir6 .x9f619.x1n2onr6.x1ja2u2z.x78zum5.x1iyjqo2.xs83m0k.xeuugli.x1qughib.x6s0dn4.x1a02dak.x1q0g3np.xdl72j9 {
overflow: visible;
}
/*Hide Windows App Installation Prompt*/
#mount_0_0_mM > div > div > div > div.x9f619.x1n2onr6.x1ja2u2z > div > div > div > div.x78zum5.xdt5ytf.x10cihs4.x1t2pt76.x1n2onr6.x1ja2u2z > div.x9f619.x2lah0s.x1nhvcw1.x1qjc9v5.xozqiw3.x1q0g3np.x78zum5.x1iyjqo2.x1t2pt76.x1n2onr6.x1ja2u2z > div.x9f619.x1n2onr6.x78zum5.xdt5ytf.x193iq5w.xeuugli.x2lah0s.x1t2pt76.x1xzczws.x1vjfegm > div > div.x9f619.x1n2onr6.x1ja2u2z.x78zum5.xdt5ytf.x2lah0s.x193iq5w.xeuugli.x1iyjqo2.xexx8yu.x4uap5.x18d9i69.xkhd6sd.x1cvmir6.x12nzpgo > div > div > div > div > div.x9f619.x1n2onr6.x1ja2u2z.x78zum5.x1r8uery.xs83m0k.xeuugli.x1qughib.x6s0dn4.xozqiw3.x1q0g3np.xb756pt.x1c4vz4f.xt55aet.xexx8yu.xc73u3c.x18d9i69.x5ib6vp.x1lku1pv.x12nzpgo{
display:none;
}
/* Dark Scrollbar*/
::-webkit-scrollbar,
::-webkit-scrollbar-corner,
::-webkit-scrollbar,
::-webkit-scrollbar-corner {
background: var(--bg) !important;
width: 8px
}
::-webkit-scrollbar-button,
::-webkit-scrollbar-button {
display: none !important;
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
background: #999 !important;
width: 8px !important;
border-radius: 10px;
transition: .1s !important;
}
::-webkit-scrollbar-thumb:not(:active):hover,
::-webkit-scrollbar-thumb:not(:active):hover {
background: #777 !important;
transition: .1s !important;
}
::-webkit-scrollbar-thumb:active,
::-webkit-scrollbar-thumb:hover:active,
::-webkit-scrollbar-thumb:active,
::-webkit-scrollbar-thumb:hover:active {
background: #5c5c5c !important;
transition: .1s !important;
}
/*Variables*/
:root {
--bg: #000;
--bg2: #141414;
--bg3: #222;
--item: #333;
--item-hover: #666;
--item-active: #777;
--text: #fff;
--text-dark: #ddd;
--text-dark2: #aaa;
--none: #00000000;
--debug: #0f0;
}
.__fb-light-mode{
--surface-background: #000;
--messenger-card-background: #000;
--card-background: #141414;
--comment-footer-background: #141414 !important;
--web-wash: #000 !important;
--fds-gray-20: var(--debug);
--divider: #333;
--media-inner-border: #181818;
--hosted-view-selected-state: #222;
--popover-background: #222;
--wash: #333;
--secondary-button-text: #fff;
--secondary-button-background: #222 !important;
--secondary-text: #aaa;
--overlay-alpha-80: #0000;
--primary-icon: #fff;
--always-black: #fff;
--primary-text: #fff;
--filter-primary-icon: invert(100%);
}
/*Main*/
body{
background: var(--bg) !important;
}
/*Sidebar*/
/*Message List*/
.xgqcy7u:hover{
background-color: var(--bg3);
transition: .03s;
}
/*Facebook Marketplace*/
.x1qhmfi1 /*view product button*/{
background-color: var(--bg3)
}
div.x78zum5.xdt5ytf.x5yr21d /*product info background*/{
background-color: var(--bg2);
border-radius: 15px;
}
/*Speech bubble menus*/
.x1jx94hy{
background-color: var(--bg2);
}
.x1y1aw1k:hover{
background-color: var(--bg3);
transition: .04s;
border-radius: 15px;
}
/*Pop up menu*/
.x104qc98{
box-shadow: 0px 0px 7px rgba(0,0,0,0.5);
}
}
}