diff --git a/src/hide.less b/src/hide.less index bbff7b6..20d3a47 100644 --- a/src/hide.less +++ b/src/hide.less @@ -100,6 +100,8 @@ div[class^="autocompleteShadow-"], // bugged [class^="unreadPill-"], // NEW at right, not needed div[class^="overviewSidebar-"], // at community creation, not needed section div[class^="children-"] div[class^="spacer-"], // to check + +div[class^="children-"]::after, // shadow at title { all: unset !important; display: none !important; diff --git a/src/settings.less b/src/settings.less index 59a3ede..4075df2 100644 --- a/src/settings.less +++ b/src/settings.less @@ -28,6 +28,7 @@ div[class^="standardSidebarView-"] { width: unset; // to increase size background: var(--background-secondary); // bugfix & > div { + padding-left: @rounder; flex-direction: row; height: @tab-height; } diff --git a/src/style.less b/src/style.less index 60e0084..3d900a6 100644 --- a/src/style.less +++ b/src/style.less @@ -20,7 +20,7 @@ li[class^="channel-"], [class^="avatar-"], [role="dialog"], - div[class^="menu-"] div, + div[class^="menu-"] div, // menu elements div[class^="role-"], div[class^="colorPicker"] div div[class^="saturation"] div, #channels ul li div > div[class^="content-"], @@ -33,6 +33,12 @@ border-radius: @round !important; } +// Blur menus +[role="menu"] { + background-color: unset; + backdrop-filter: blur(@round) saturate(100%); +} + // Rounder // Popouts [class^="authBox"], // login @@ -45,7 +51,6 @@ // UI elements [class^="checkboxWrapper-"], // checkbox [class*="embed"], - div[class^="sidebar-"], div[class^="markup-"] pre code, // ```code``` div[class^="item-"], // in settings div[class^="group-"], // radiogroup @@ -64,8 +69,9 @@ div[class^="select-"], div[class^="messagesWrapper-"] div, - div[class^="container-"], - div[class^="chat-"], + + div[class^="container"] > div, + div[class^="chat-"] > div[class^="content-"], { border-radius: @rounder !important; } @@ -192,4 +198,44 @@ div[class^="channelTextArea-"] { } } +// Mica-like material from Windows 11 + +[class^="sidebar-"] { + &, & > nav { + background-color: transparent; + } + + & > nav, + & > nav div[class^="scroller-"] { + .top-border(@rounder); + } + + & > nav div[class^="scroller-"] { + background-color: var(--background-secondary); + } + + nav[class^="private"] { + margin-top: 48px; + } + + section { // bottom panel + .bottom-border(@rounder); + } +} + +div[class^="base-"] > div[class^="content-"] > div[class^="container"], +div[class^="chat-"] +{ + background-color: unset; + & > div { + background-color: var(--background-primary); + } +} + +[class^="sidebar"] header, +[class^="chat"] > section, +[class^="container-"] > section { + background-color: var(--background-tertiary) !important; +} + @import "settings";