diff --git a/modular/base.css b/modular/base.css index 2edc70d..318d157 100644 --- a/modular/base.css +++ b/modular/base.css @@ -1,3 +1,17 @@ +:root, +.theme-dark, +.theme-light { + --titlebar-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), + inset 0 0 0 2px rgba(0, 0, 0, 0.27), + 0 0 0 1px var(--tertiary, var(--background-tertiary)), + 0 0 0 2px var(--secondary, var(--background-secondary)), + 0 0 0 3px var(--primary, var(--background-primary)); + + --_font-titlebars: var(--font-primary); + + --titlebar-color: var(--accent); +} + /* i have no idea what half of these are for anymore */ /* most of them are probably now-redundant color fixes */ /* others are things i dont feel like need a toggle at the current moment */ diff --git a/modular/collapsing_sidebar/dynamic_+_compact-er_support.css b/modular/collapsing_sidebar/dynamic_+_compact-er_support.css index 139be79..9f2a422 100644 --- a/modular/collapsing_sidebar/dynamic_+_compact-er_support.css +++ b/modular/collapsing_sidebar/dynamic_+_compact-er_support.css @@ -63,7 +63,7 @@ > nav[class^="container-"] > [class^="container-"][class*="clickable-"] > [class^="animatedContainer-"] { - height: 32px; + height: 32px !important; } div[class^="sidebar-"]:not(:has(> [class^="side-"])) @@ -71,7 +71,7 @@ > [class^="container-"][class*="clickable-"] > [class^="animatedContainer-"] > [class^="bannerImage-"] { - height: 32px; + height: 32px !important; } div[class^="sidebar-"]:not(:has(> [class^="side-"])) > nav[class^="container-"] @@ -79,7 +79,7 @@ > [class^="animatedContainer-"] > [class^="bannerImage-"]:after { content: ""; - height: 32px; + height: 32px !important; width: 240px; top: 0; left: 0; diff --git a/modular/compacter_mode.css b/modular/compacter_mode.css index f3d6d6b..1a401d2 100644 --- a/modular/compacter_mode.css +++ b/modular/compacter_mode.css @@ -348,6 +348,37 @@ button.hh2-spotify-controls-button { margin-left: 4px; margin-right: 4px; } +div[class^="sidebar-"]:not(:has(> [class^="side-"])) + > nav[class^="container-"] + > [class^="container-"][class*="clickable-"] + > [class^="animatedContainer-"] { + height: 32px !important; +} + +div[class^="sidebar-"]:not(:has(> [class^="side-"])) + > nav[class^="container-"] + > [class^="container-"][class*="clickable-"] + > [class^="animatedContainer-"] + > [class^="bannerImage-"] { + height: 32px !important; +} +div[class^="sidebar-"]:not(:has(> [class^="side-"])) + > nav[class^="container-"] + > [class^="container-"][class*="clickable-"] + > [class^="animatedContainer-"] + > [class^="bannerImage-"]:after { + content: ""; + height: 32px !important; + width: 240px; + top: 0; + left: 0; + position: absolute; + background: linear-gradient( + 0deg, + var(--background-secondary) 5%, + transparent 100% + ); +} [nop="nop"] [class^="members-"] > [class^="content-"], [nop="nop"] [class^="sidebar-"] ul[class^="content-"] { @@ -430,6 +461,11 @@ button.hh2-spotify-controls-button { padding: 2px; } +[class^="chat-"] [class^="toolbar-"] [class*="iconWrapper-"], +[class^="chat-"] [class^="toolbar-"] > [class*="search-"] { + margin: 0 !important; +} + [class^="chatContent-"] > form [class^="channelTextArea"] { margin-bottom: 1px !important; } @@ -444,6 +480,9 @@ button.hh2-spotify-controls-button { padding-top: 9px !important; padding-bottom: 9px !important; } +[class^="channelTextArea-"] [class^="inner-"] { + padding-left: 0 !important; +} [class^="channelTextArea-"], [class^="channelTextArea-"] [class^="inner-"], [class^="channelTextArea-"] [class^="buttons-"], @@ -457,6 +496,13 @@ button.hh2-spotify-controls-button { [class^="channelTextArea-"] [class^="attachWrapper-"] { height: 40px; } +[class^="channelTextArea-"] [class^="attachWrapper-"] { + min-width: 40px; +} +[class^="channelTextArea-"] [class^="attachWrapper-"] [class^="attachButton-"] { + margin-left: 0; + padding-top: 0; +} [class^="channelTextArea-"] [class^="attachButton-"], [class^="channelTextArea-"] [class^="attachButton-"] > [class^="icon-"] { padding: 5px 8px; @@ -481,41 +527,41 @@ button.hh2-spotify-controls-button { margin-right: 0; } -[class^="menu-"] [class^="scroller-"] { +[class*="menu-"] [class^="scroller-"] { padding: 4px; } -[class^="menu-"] [class^="scroller-"]::-webkit-scrollbar { +[class*="menu-"] [class^="scroller-"]::-webkit-scrollbar { width: 4px; } -[class^="menu-"] [class^="scroller-"] [class^="item-"] { +[class*="menu-"] [class^="scroller-"] [class^="item-"] { margin: 1px 0; padding: 0 4px; min-height: 24px; } -[class^="menu-"] +[class*="menu-"] [class^="scroller-"] [class^="customItem-"][id^="message-quickreact-"] > [class^="button-"] { width: 24px; height: 24px; } -[class^="menu-"] +[class*="menu-"] [class^="scroller-"] [class^="wrapper-"]:has(> [class^="customItem-"][id^="message-quickreact-"]) { padding: 0; margin-bottom: 4px; } -[class^="menu-"] +[class*="menu-"] [class^="scroller-"] [class^="item-"] > [class^="labelContainer-"], -[class^="menu-"] +[class*="menu-"] [class^="scroller-"] [class^="item-"] > [class^="sliderContainer-"] { padding: 0; } -[class^="menu-"] +[class*="menu-"] [class^="scroller-"] [class^="item-"] > [class^="labelContainer-"] { diff --git a/modular/font/custom.css b/modular/font/custom.css index 9b2db82..451a45b 100644 --- a/modular/font/custom.css +++ b/modular/font/custom.css @@ -1,5 +1,6 @@ +:root, .theme-dark, -:root { +.theme-light { --font-primary: var(--xmc_custom_font), sans-serif !important; --font-display: var(--font-primary) !important; --font-code: var(--xmc_custom_font_mono), monospace !important; diff --git a/modular/font/revert_rebrand.css b/modular/font/revert_rebrand.css index 912df56..f0194e5 100644 --- a/modular/font/revert_rebrand.css +++ b/modular/font/revert_rebrand.css @@ -1,4 +1,5 @@ +:root, .theme-dark, -:root { +.theme-light { --font-display: var(--font-primary) !important; } diff --git a/modular/font/terminus.css b/modular/font/terminus.css index c614802..74ee65b 100644 --- a/modular/font/terminus.css +++ b/modular/font/terminus.css @@ -40,8 +40,9 @@ font-style: italic; } +:root, .theme-dark, -:root { +.theme-light { --font-primary: "Terminus (TTF) for Windows", "Terminus (TTF)", "Sazanami Gothic", "UnifontBitmap", "Unifont Windows", "Unifont", monospace !important; --font-display: "Terminus (TTF) for Windows", "Terminus (TTF)", @@ -52,7 +53,7 @@ --_font-titlebars: var(--font-primary) !important; } -[class^="menu-"] [class^="item-"], +[class*="menu-"] [class^="item-"], [class^="containerDefault-"] > [class^="iconVisibility-"] > [class^="content-"] diff --git a/modular/font/the_funny.css b/modular/font/the_funny.css index 7b53700..8a70ba6 100644 --- a/modular/font/the_funny.css +++ b/modular/font/the_funny.css @@ -16,8 +16,9 @@ font-style: normal; } +:root, .theme-dark, -:root { +.theme-light { --font-primary: "Comic Sans MS", cursive !important; --font-display: "Comic Sans MS", cursive !important; --font-code: "Pointfree", "Untyped", monospace !important; diff --git a/modular/font/the_funny_(alternate_monospace).css b/modular/font/the_funny_(alternate_monospace).css index b421c7e..c2ef868 100644 --- a/modular/font/the_funny_(alternate_monospace).css +++ b/modular/font/the_funny_(alternate_monospace).css @@ -16,8 +16,9 @@ font-style: normal; } +:root, .theme-dark, -:root { +.theme-light { --font-primary: "Comic Sans MS", cursive !important; --font-display: "Comic Sans MS", cursive !important; --font-code: "Untyped", "Pointfree", monospace !important; diff --git a/modular/font/unifont.css b/modular/font/unifont.css index e3e3440..b8d52ce 100644 --- a/modular/font/unifont.css +++ b/modular/font/unifont.css @@ -49,17 +49,18 @@ font-style: italic; } +:root, .theme-dark, -:root { - --font-primary: "Sazanami Gothic", "UnifontBitmap", "Unifont Windows", - "Unifont", monospace, "Twemoji" !important; - --font-display: "Sazanami Gothic", "UnifontBitmap", "Unifont Windows", - "Unifont", monospace, "Twemoji" !important; +.theme-light { + --font-primary: "UnifontBitmap", "Unifont Windows", "Unifont", monospace, + "Twemoji" !important; + --font-display: "UnifontBitmap", "Unifont Windows", "Unifont", monospace, + "Twemoji" !important; --font-code: "Terminus (TTF) for Windows", "Terminus (TTF)", "Sazanami Gothic", "UnifontBitmap", "Unifont Windows", "Unifont", monospace !important; } -[class^="menu-"] [class^="item-"], +[class*="menu-"] [class^="item-"], [class^="containerDefault-"] [class^="name-"], [class^="membersGroup-"] { font-size: 16px; diff --git a/modular/override_titlebar.css b/modular/override_titlebar.css index 268bc89..a6916a2 100644 --- a/modular/override_titlebar.css +++ b/modular/override_titlebar.css @@ -1,3 +1,5 @@ -:root { - --titlebar-color: var(--xmc_titlebar_color) !important; +:root, +.theme-dark, +.theme-light { + --titlebar-color: var(--xmc-titlebar-color) !important; } diff --git a/modular/overwrite_colors.css b/modular/overwrite_colors.css index 4789b25..dea66a5 100644 --- a/modular/overwrite_colors.css +++ b/modular/overwrite_colors.css @@ -1,14 +1,6 @@ :root, .theme-dark, .theme-light { - --titlebar-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), - inset 0 0 0 2px rgba(0, 0, 0, 0.27), 0 0 0 1px var(--background-tertiary), - 0 0 0 2px var(--background-secondary), 0 0 0 3px var(--background-primary); - - --_font-titlebars: var(--font-primary); - - --titlebar-color: var(--highlight); - --mention-background: rgba(var(--accent-rgb), 0.1); --header-primary: var(--text, var(--white-500)) !important; --header-secondary: var(--text, var(--primary-dark-300)) !important; @@ -328,8 +320,8 @@ rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"] { color: var(--interactive-hover) !important; } -[class^="menu-"] [class^="item-"]:active, -[class^="menu-"] [class^="item-"][class*="focused-"], +[class*="menu-"] [class^="item-"]:active, +[class*="menu-"] [class^="item-"][class*="focused-"], [class*="lookFilled-"][class*="colorBrand-"]:not([class*="buttonColor-"]), [class*="lookFilled-"][class*="colorBrandNew-"]:not([class*="buttonColor-"]), [style*="background-color: rgb(114, 137, 218)"]:not([class*="swatch-"]), diff --git a/modular/scheme/amora_focus.css b/modular/scheme/amora_focus.css index 5599d89..0331286 100644 --- a/modular/scheme/amora_focus.css +++ b/modular/scheme/amora_focus.css @@ -1,5 +1,5 @@ .theme-dark { - --_color0: #28222d; + --_color0: #2d2d2d; --_color1: #e83f80; --_color2: #a2baa8; --_color3: #eacac0; @@ -8,7 +8,7 @@ --_color6: #aabae7; --_color7: #dedbeb; - --_color8: #302838; + --_color8: #383838; --_color9: #f55d8f; --_color10: #bfd1c3; --_color11: #f0ddd8; @@ -43,6 +43,7 @@ --status-streaming: var(--_color4); --titlebar-color: var(--accent); + --wc-bright: #383838; } #splash { diff --git a/modular/scheme/source_engine_-_tools.css b/modular/scheme/source_engine_-_tools.css index 74bf911..2f15e63 100644 --- a/modular/scheme/source_engine_-_tools.css +++ b/modular/scheme/source_engine_-_tools.css @@ -40,7 +40,9 @@ --status-offline: var(--tertiary); --status-streaming: var(--_color5); - --status-danger: var(--red); + --status-danger: var(--red) !important; + --interactive-active: var(--white-500) !important; + --interactive-hover: var(--white-500) !important; } #splash { diff --git a/modular/scheme/valve.css b/modular/scheme/valve.css index 88ecc99..ced4139 100644 --- a/modular/scheme/valve.css +++ b/modular/scheme/valve.css @@ -40,7 +40,14 @@ --status-offline: var(--tertiary); --status-streaming: var(--_color5); - --status-danger: var(--red); + --status-danger: var(--red) !important; + --interactive-active: var(--white-500) !important; + --interactive-hover: var(--white-500) !important; + + --titlebar-active: var(--primary); + --titlebar-inactive: var(--primary); + --titlebar-border-active: var(--primary); + --titlebar-border-inactive: var(--primary); } #splash { diff --git a/modular/stylings/windows_classic.css b/modular/stylings/windows_classic.css new file mode 100644 index 0000000..dcdd74d --- /dev/null +++ b/modular/stylings/windows_classic.css @@ -0,0 +1,323 @@ +.theme-dark { + --wc-frame: -1px -1px 0 0 var(--wc-bright, var(--highlight)), + -1px 0px 0 0 var(--wc-bright, var(--highlight)), + 0px -1px 0 0 var(--wc-bright, var(--highlight)), + -1px 1px 0 0 var(--secondary), 1px -1px 0 0 var(--secondary), + 1px 1px 0 0 var(--secondary), 2px 2px 0 0 var(--tertiary), + -2px -2px 0 0 var(--primary), 1px -2px 0 0 var(--primary), + 2px -2px 0 0 var(--tertiary), -2px 1px 0 0 var(--primary), + -2px 2px 0 0 var(--tertiary); + + --wc-outer-edge: -1px -1px 0 0 var(--primary), -1px 0px 0 0 var(--primary), + 0px -1px 0 0 var(--primary), -1px 1px 0 0 var(--secondary), + 1px -1px 0 0 var(--secondary), 1px 1px 0 0 var(--secondary), + 2px 2px 0 0 var(--tertiary), + -2px -2px 0 0 var(--wc-bright, var(--highlight)), + 1px -2px 0 0 var(--wc-bright, var(--highlight)), + 2px -2px 0 0 var(--tertiary), + -2px 1px 0 0 var(--wc-bright, var(--highlight)), + -2px 2px 0 0 var(--tertiary); + + --wc-outer-edge-inset: inset -1px -1px 0 0 var(--tertiary), + inset -1px 0px 0 0 var(--tertiary), inset 0px -1px 0 0 var(--tertiary), + inset -1px 1px 0 0 var(--wc-bright, var(--highlight)), + inset 1px -1px 0 0 var(--wc-bright, var(--highlight)), + inset 1px 1px 0 0 var(--wc-bright, var(--highlight)), + inset 2px 2px 0 0 var(--primary), inset -2px -2px 0 0 var(--secondary), + inset 1px -2px 0 0 var(--secondary), inset 2px -2px 0 0 var(--primary), + inset -2px 1px 0 0 var(--secondary), inset -2px 2px 0 0 var(--primary); + + --wc-inner-edge: -1px -1px 0 0 var(--tertiary), -1px 0px 0 0 var(--tertiary), + 0px -1px 0 0 var(--tertiary), -1px 1px 0 0 var(--primary), + 1px -1px 0 0 var(--primary), 1px 1px 0 0 var(--primary), + 2px 2px 0 0 var(--wc-bright, var(--highlight)), + -2px -2px 0 0 var(--secondary), 1px -2px 0 0 var(--secondary), + 2px -2px 0 0 var(--wc-bright, var(--highlight)), + -2px 1px 0 0 var(--secondary), + -2px 2px 0 0 var(--wc-bright, var(--highlight)); + + --wc-inner-edge-inset: inset -1px -1px 0 0 var(--wc-bright, var(--highlight)), + inset -1px 0px 0 0 var(--wc-bright, var(--highlight)), + inset 0px -1px 0 0 var(--wc-bright, var(--highlight)), + inset -1px 1px 0 0 var(--secondary), inset 1px -1px 0 0 var(--secondary), + inset 1px 1px 0 0 var(--secondary), inset 2px 2px 0 0 var(--tertiary), + inset -2px -2px 0 0 var(--primary), inset 1px -2px 0 0 var(--primary), + inset 2px -2px 0 0 var(--tertiary), inset -2px 1px 0 0 var(--primary), + inset -2px 2px 0 0 var(--tertiary); +} +.theme-light { + --wc-frame: -1px -1px 0 0 var(--wc-bright, var(--highlight)), + -1px 0px 0 0 var(--wc-bright, var(--highlight)), + 0px -1px 0 0 var(--wc-bright, var(--highlight)), + -1px 1px 0 0 var(--secondary), 1px -1px 0 0 var(--secondary), + 1px 1px 0 0 var(--secondary), 2px 2px 0 0 var(--tertiary), + -2px -2px 0 0 var(--primary), 1px -2px 0 0 var(--primary), + 2px -2px 0 0 var(--tertiary), -2px 1px 0 0 var(--primary), + -2px 2px 0 0 var(--tertiary); + + --wc-outer-edge: -1px -1px 0 0 var(--primary), -1px 0px 0 0 var(--primary), + 0px -1px 0 0 var(--primary), -1px 1px 0 0 var(--secondary), + 1px -1px 0 0 var(--secondary), 1px 1px 0 0 var(--secondary), + 2px 2px 0 0 var(--tertiary), + -2px -2px 0 0 var(--wc-bright, var(--highlight)), + 1px -2px 0 0 var(--wc-bright, var(--highlight)), + 2px -2px 0 0 var(--tertiary), + -2px 1px 0 0 var(--wc-bright, var(--highlight)), + -2px 2px 0 0 var(--tertiary); + + --wc-outer-edge-inset: inset -1px -1px 0 0 var(--primary), + -1px 0px 0 0 var(--primary), 0px -1px 0 0 var(--primary), + -1px 1px 0 0 var(--secondary), 1px -1px 0 0 var(--secondary), + 1px 1px 0 0 var(--secondary), 2px 2px 0 0 var(--tertiary), + -2px -2px 0 0 var(--wc-bright, var(--highlight)), + 1px -2px 0 0 var(--wc-bright, var(--highlight)), + 2px -2px 0 0 var(--tertiary), + -2px 1px 0 0 var(--wc-bright, var(--highlight)), + -2px 2px 0 0 var(--tertiary); + + --wc-inner-edge: -1px -1px 0 0 var(--tertiary), -1px 0px 0 0 var(--tertiary), + 0px -1px 0 0 var(--tertiary), + -1px 1px 0 0 var(--wc-bright, var(--highlight)), + 1px -1px 0 0 var(--wc-bright, var(--highlight)), + 1px 1px 0 0 var(--wc-bright, var(--highlight)), 2px 2px 0 0 var(--primary), + -2px -2px 0 0 var(--secondary), 1px -2px 0 0 var(--secondary), + 2px -2px 0 0 var(--primary), -2px 1px 0 0 var(--secondary), + -2px 2px 0 0 var(--primary); +} + +[class*="button-"][class*="lookFilled-"], +section[class^="panels-"] + [class^="container-"] + [class^="flex-"] + button[class^="button-"], +[class^="toolbar-"] [class*="iconWrapper-"] { + border-radius: 0; + box-shadow: var(--wc-outer-edge-inset) !important; +} +[class*="button-"][class*="lookFilled-"]:active, +section[class^="panels-"] + [class^="container-"] + [class^="flex-"] + button[class^="button-"]:active { + box-shadow: var(--wc-inner-edge-inset) !important; +} + +[class^="chat-"] + > [class^="content-"] + > [class^="container-"] + > [class^="membersWrap-"] { + margin: 2px; + box-shadow: var(--wc-inner-edge); + height: calc(100% - 4px); + max-height: calc(100% - 4px); +} +[class^="messagesWrapper-"], +[class*="guilds-"], +[class^="sidebar-"] > nav > [class^="scroller-"] { + margin: 2px; + box-shadow: var(--wc-inner-edge); +} +[class^="chat-"] > [class^="content-"] > [class^="container-"], +[class^="chat-"] > [class^="content-"] > [class^="chatContent-"], +[class^="standardSidebarView-"] > [class^="contentRegion-"] { + margin-left: 2px; +} + +[class^="channelTextArea-"] > [class^="scrollableContainer-"], +[class^="chat-"] + [class^="toolbar-"] + > [class^="search-"] + > [class^="search-"] + > [class^="searchBar-"] { + box-shadow: var(--wc-inner-edge-inset); + border-radius: 0; +} + +[class^="chat-"] > [class^="content-"]:before { + display: none !important; +} + +[class^="standardSidebarView-"] + > [class^="sidebarRegion-"] + > [class^="sidebarRegionScroller-"], +[class^="standardSidebarView-"] + > [class^="contentRegion-"] + [class^="contentTransitionWrap-"] { + margin: 2px; + box-shadow: var(--wc-inner-edge); +} +[class^="standardSidebarView-"] > [class^="contentRegion-"], +[class^="standardSidebarView-"] > [class^="sidebarRegion-"] { + margin-top: 2px; +} +[class^="standardSidebarView-"] + > [class^="contentRegion-"] + [class^="contentTransitionWrap-"] { + height: calc(100% - 4px); +} + +div[class^="sidebar-"]:not(:has(> [class^="side-"])) + > nav[class^="container-"] + > [class^="container-"][class*="clickable-"] + > [class^="animatedContainer-"] { + height: 48px; +} + +div[class^="sidebar-"]:not(:has(> [class^="side-"])) + > nav[class^="container-"] + > [class^="container-"][class*="clickable-"] + > [class^="animatedContainer-"] + > [class^="bannerImage-"] { + height: 48px; +} +div[class^="sidebar-"]:not(:has(> [class^="side-"])) + > nav[class^="container-"] + > [class^="container-"][class*="clickable-"] + > [class^="animatedContainer-"] + > [class^="bannerImage-"]:after { + content: ""; + height: 48px; + width: 240px; + top: 0; + left: 0; + position: absolute; + background: linear-gradient( + 0deg, + var(--background-secondary) 5%, + transparent 100% + ); +} + +div[class^="sidebar-"]:not(:has(> [class^="side-"])) + > nav[class^="container-"] + > [class^="container-"][class*="clickable-"] + > [class^="animatedContainer-"] + [class^="bannerImg-"] { + top: -67px; + position: relative; +} + +div[class^="sidebar-"]:not(:has(> [class^="side-"])) + > nav[class^="container-"] + > [class^="scroller-"] + > ul + > div[style="height: 84px;"] { + height: 0 !important; +} + +[class*="menu-"] { + border-radius: 0; + margin: 2px; + box-shadow: var(--wc-frame); +} +[class*="menu-"] > [class^="scroller-"] { + padding: 2px !important; +} +[class*="menu-"] > [class^="scroller-"] [class^="item-"] { + border-radius: 0 !important; + margin: 2px 0; +} +[class*="menu-"] + > [class^="scroller-"] + [class^="customItem-"][id^="message-quickreact-"] + > [class^="button-"] { + border-radius: 0 !important; + box-shadow: var(--wc-outer-edge-inset); +} + +[class^="scroller-"]:not([class*="none-"]):not([class*="thin-"]):not( + :not(:hover)[class*="fade-"] + )::-webkit-scrollbar, +[class*="scrollerBase-"]:not([class*="none-"]):not([class*="thin-"]):not( + :not(:hover)[class*="fade-"] + )::-webkit-scrollbar { + min-width: 16px; + width: 16px; +} + +[class^="scroller-"]:not([class*="thin-"])::-webkit-scrollbar-track, +[class*="scrollerBase-"]:not([class*="thin-"])::-webkit-scrollbar-track { + background-color: var(--wc-bright, var(--highlight)); + border: none; + border-radius: 0; + margin: 0; +} +[class^="scroller-"]::-webkit-scrollbar-thumb, +[class*="scrollerBase-"]::-webkit-scrollbar-thumb, +[class^="scroller-"]:not([class*="thin-"])::-webkit-scrollbar-button, +[class*="scrollerBase-"]:not([class*="thin-"])::-webkit-scrollbar-button { + border-radius: 0; + background: var(--primary); + box-shadow: var(--wc-outer-edge-inset); + border: none; +} + +[class^="scroller-"][class*="fade-"]:not( + [class*="thin-"] + )::-webkit-scrollbar-button, +[class*="scrollerBase-"][class*="fade-"]:not( + [class*="thin-"] + )::-webkit-scrollbar-button { + visibility: hidden; +} +[class^="scroller-"][class*="fade-"]:not( + [class*="thin-"] + ):hover::-webkit-scrollbar-button, +[class*="scrollerBase-"][class*="fade-"]:not( + [class*="thin-"] + ):hover::-webkit-scrollbar-button { + visibility: visible; +} + +[class^="scroller-"]::-webkit-scrollbar-button:active, +[class*="scrollerBase-"]::-webkit-scrollbar-button:active { + box-shadow: var(--wc-inner-edge-inset); +} + +.postnet-expanded-category, +.postnet-repo-wrapper, +[class^="inner-"]:has(> input), +[class^="inputWrapper-"] > [class*="input-"], +[class^="colorSwatch-"] > [class^="swatch-"][aria-expanded="true"] { + border: none !important; + border-radius: 0 !important; + box-shadow: var(--wc-inner-edge-inset); +} +[class^="colorSwatch-"] > [class^="swatch-"] { + border: none !important; + border-radius: 0 !important; + box-shadow: var(--wc-outer-edge-inset); +} + +[class^="inputWrapper-"] > [class*="input-"] { + padding: 2px 2px 2px 4px; + height: 22px; +} + +[class^="select-"][class*="lookFilled-"] { + border: none !important; + border-radius: 0 !important; + box-shadow: var(--wc-inner-edge-inset); + padding: 2px 2px 2px 4px; +} +[class^="select-"][class*="lookFilled-"] > [class^="icons-"] { + margin: 2px; +} +[class^="select-"][class*="lookFilled-"] > [class^="icons-"] > svg { + background: var(--primary); + box-shadow: var(--wc-outer-edge-inset); + width: 16px; + height: 16px; +} +[class^="select-"][class*="lookFilled-"][class*="open-"] + > [class^="icons-"] + > svg { + box-shadow: var(--wc-inner-edge-inset); +} +[class^="popout-"][role="listbox"] > [class^="option-"] { + padding: 2px 2px 2px 4px; + margin: 2px 0; +} +[class^="popout-"][role="listbox"] > [class^="option-"]:hover { + background-color: var(--accent); +} diff --git a/modular/stylings.css b/modular/stylings/xmc.css similarity index 96% rename from modular/stylings.css rename to modular/stylings/xmc.css index 8d72b0b..4a31a2b 100644 --- a/modular/stylings.css +++ b/modular/stylings/xmc.css @@ -1,4 +1,6 @@ -:root { +:root, +.theme-dark, +.theme-light { --_font-titlebars: "Segoe UI", sans-serif; } @@ -59,7 +61,7 @@ section[class^="panels-"] [class^="container-"] [class^="flex-"] button[class^="button-"], -[class^="toolbar-"] [class^="iconWrapper-"] { +[class^="toolbar-"] [class*="iconWrapper-"] { border-radius: 0; color: var(--text) !important; background: var(--button-bg) !important; @@ -103,13 +105,13 @@ nav[class^="sidebar-"] div[class^="item-"]:not([class*="selected-"]):hover, border-radius: 0; } -[class^="toolbar-"] [class^="iconWrapper-"] { +[class^="toolbar-"] [class*="iconWrapper-"] { margin: 0; width: 32px; height: 32px; } -[class^="toolbar-"] [class^="iconWrapper-"] > svg { +[class^="toolbar-"] [class*="iconWrapper-"] > svg { margin: 4px; } diff --git a/modular/textarea/fullwidth.css b/modular/textarea/fullwidth.css index cf0d256..28d736c 100644 --- a/modular/textarea/fullwidth.css +++ b/modular/textarea/fullwidth.css @@ -102,3 +102,6 @@ form [class*="typing-"] { [class*="emojiButton-"] { max-height: unset; } +[class^="messagesWrapper-"] { + margin-bottom: 8px; +} diff --git a/modular/textarea/xmc_default.css b/modular/textarea/typing_above.css similarity index 100% rename from modular/textarea/xmc_default.css rename to modular/textarea/typing_above.css diff --git a/modular/titlebar_icon/msn_messenger_1.0.css b/modular/titlebar_icon/msn_messenger_1.0.css new file mode 100644 index 0000000..3bc1091 --- /dev/null +++ b/modular/titlebar_icon/msn_messenger_1.0.css @@ -0,0 +1,3 @@ +:root { + --titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACYSURBVDhPpZABDsAgCAN5uk/zZ45OahAnmqxJowi9OWVRKW2yyHDpdSILQQxTtVYCNpAQxnBUDtEGBgZEh1B7HQH+BnoyAbA/AjAwVgN4I7wHQGiaCWHoHKYwRHcxdBH+Lf91dbx+/gtoqiEf9uJD6nSA4FD9PpwFY5j6hrgwB3ZaASjMbGYAaIa4MFYCUGdeAMP9apeW9gDxfcZs7l81ZQAAAABJRU5ErkJggg=="); +} diff --git a/modular/titlebar_icon/msn.css b/modular/titlebar_icon/msn_messenger_4.6.css similarity index 100% rename from modular/titlebar_icon/msn.css rename to modular/titlebar_icon/msn_messenger_4.6.css diff --git a/modular/old_titlebar.css b/modular/titlebars/old_discord.css similarity index 100% rename from modular/old_titlebar.css rename to modular/titlebars/old_discord.css diff --git a/modular/titlebars/windows_classic.css b/modular/titlebars/windows_classic.css new file mode 100644 index 0000000..f8794df --- /dev/null +++ b/modular/titlebars/windows_classic.css @@ -0,0 +1,254 @@ +.theme-dark { + --wc-frame: -1px -1px 0 0 var(--wc-bright, var(--highlight)), + -1px 0px 0 0 var(--wc-bright, var(--highlight)), + 0px -1px 0 0 var(--wc-bright, var(--highlight)), + -1px 1px 0 0 var(--secondary), 1px -1px 0 0 var(--secondary), + 1px 1px 0 0 var(--secondary), 2px 2px 0 0 var(--tertiary), + -2px -2px 0 0 var(--primary), 1px -2px 0 0 var(--primary), + 2px -2px 0 0 var(--tertiary), -2px 1px 0 0 var(--primary), + -2px 2px 0 0 var(--tertiary); + + --wc-outer-edge: -1px -1px 0 0 var(--primary), -1px 0px 0 0 var(--primary), + 0px -1px 0 0 var(--primary), -1px 1px 0 0 var(--secondary), + 1px -1px 0 0 var(--secondary), 1px 1px 0 0 var(--secondary), + 2px 2px 0 0 var(--tertiary), + -2px -2px 0 0 var(--wc-bright, var(--highlight)), + 1px -2px 0 0 var(--wc-bright, var(--highlight)), + 2px -2px 0 0 var(--tertiary), + -2px 1px 0 0 var(--wc-bright, var(--highlight)), + -2px 2px 0 0 var(--tertiary); +} +.theme-light { + --wc-frame: -1px -1px 0 0 var(--wc-bright, var(--highlight)), + -1px 0px 0 0 var(--wc-bright, var(--highlight)), + 0px -1px 0 0 var(--wc-bright, var(--highlight)), + -1px 1px 0 0 var(--secondary), 1px -1px 0 0 var(--secondary), + 1px 1px 0 0 var(--secondary), 2px 2px 0 0 var(--tertiary), + -2px -2px 0 0 var(--primary), 1px -2px 0 0 var(--primary), + 2px -2px 0 0 var(--tertiary), -2px 1px 0 0 var(--primary), + -2px 2px 0 0 var(--tertiary); + + --wc-outer-edge: -1px -1px 0 0 var(--primary), -1px 0px 0 0 var(--primary), + 0px -1px 0 0 var(--primary), -1px 1px 0 0 var(--secondary), + 1px -1px 0 0 var(--secondary), 1px 1px 0 0 var(--secondary), + 2px 2px 0 0 var(--tertiary), + -2px -2px 0 0 var(--wc-bright, var(--highlight)), + 1px -2px 0 0 var(--wc-bright, var(--highlight)), + 2px -2px 0 0 var(--tertiary), + -2px 1px 0 0 var(--wc-bright, var(--highlight)), + -2px 2px 0 0 var(--tertiary); +} + +.platform-win #app-mount { + margin: 2px; + box-shadow: var(--wc-frame); + width: calc(100% - 6px); + height: calc(100% - 6px); + border: 1px solid var(--titlebar-border-inactive, var(--secondary)); +} +.platform-win.app-focused #app-mount { + border-color: var(--titlebar-border-active, var(--primary)) !important; +} + +[class^="typeWindows-"] { + height: 18px !important; + margin-top: 0; + background: var(--titlebar-inactive, var(--secondary)); + border-bottom: 1px solid var(--titlebar-border-inactive, var(--secondary)); +} +.app-focused [class^="typeWindows-"] { + background: var( + --titlebar-active, + var(--titlebar-color, var(--accent)) + ) !important; + border-color: var(--titlebar-border-active, var(--primary)) !important; +} + +[class^="winButtonClose-"] > svg, +[class^="winButtonMinMax-"] > svg, +[class^="wordmarkWindows-"] > svg { + display: none; +} + +[class^="wordmarkWindows-"] { + width: 16px !important; + height: 16px !important; + top: 1px !important; + left: 2px !important; + padding: 0 !important; + background-image: var(--titlebar-icon); + background-repeat: no-repeat; +} +[class^="wordmarkWindows-"]::after { + font-family: var(--_font-titlebars) !important; + font-size: 12px !important; + color: var(--wc-bright, var(--highlight)) !important; + font-weight: bold !important; + content: "Discord"; + position: absolute; + top: 2px; + left: 18px; + height: 17px; + opacity: 1; +} +.app-focused [class^="wordmarkWindows-"]::after { + color: var(--text) !important; +} + +[class*="winButton-"] { + top: 2px; + width: 12px !important; + height: 10px !important; + margin: 2px; + background: var(--primary) !important; + box-shadow: var(--wc-outer-edge); +} + +[class^="winButtonClose-"] { + right: 2px; +} +[class^="winButtonMinMax-"]:nth-child(3), +[class^="winButtonMinMax-"]:nth-child(4) { + right: 4px; +} + +[class*="winButton-"]::before { + width: 12px !important; + height: 10px !important; + background-color: var(--text); + content: ""; +} +[class^="winButtonClose-"]::before { + -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAwSURBVChTY6AE/IdidIBLHAzQJfEqhgGYIqIUwwBZionShK4IryZckng1URswMAAAIEcZ541Sy3oAAAAASUVORK5CYIIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); + mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAwSURBVChTY6AE/IdidIBLHAzQJfEqhgGYIqIUwwBZionShK4IryZckng1URswMAAAIEcZ541Sy3oAAAAASUVORK5CYIIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); +} +[class^="winButtonMinMax-"]:nth-child(3)::before { + -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAjSURBVChTY4CC/0RgFIBNATpGARgCaGBUAwiABAhhcgADAwD+Vybas8l0mAAAAABJRU5ErkJgggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); + mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAjSURBVChTY4CC/0RgFIBNATpGARgCaGBUAwiABAhhcgADAwD+Vybas8l0mAAAAABJRU5ErkJgggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); +} +[class^="winButtonMinMax-"]:nth-child(4)::before { + -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZSURBVChTYxgFtAb/cWCcAJtiEKYEMDAAALNwC/VcmzodAAAAAElFTkSuQmCCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); + mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZSURBVChTYxgFtAb/cWCcAJtiEKYEMDAAALNwC/VcmzodAAAAAElFTkSuQmCCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); +} + +[class*="recentMentionsPopout-"], +[class^="messagesPopoutWrap-"], +[class^="browser-"] { + border-radius: 0; + margin: 2px; + box-shadow: var(--wc-frame); + border: 1px solid var(--titlebar-border-active, var(--primary)); +} + +[class*="recentMentionsPopout-"] > [class^="header-"] { + padding: 0 4px; + font-family: var(--_font-titlebars) !important; + font-size: 12px !important; + color: var(--text) !important; + font-weight: bold !important; + height: 18px !important; + min-height: 18px !important; + border-bottom: 1px solid var(--titlebar-border-inactive, var(--secondary)); + background: var( + --titlebar-active, + var(--titlebar-color, var(--accent)) + ) !important; +} +[class*="recentMentionsPopout-"] + > [class^="header-"] + > [class^="controls-"] + > [class^="button-"] { + padding: 0; + border-radius: 0; + width: 16px; + height: 16px; + min-width: 16px; + min-height: 16px; + background-color: transparent; +} +[class*="recentMentionsPopout-"] > [class^="header-"] [class^="tab-"] { + margin-top: 0 !important; + padding: 0px 2px; + height: 16px; + border-radius: 0; + font-size: 12px; +} + +[class^="messagesPopoutWrap-"] > [class^="header-"] { + padding: 0; +} +[class^="messagesPopoutWrap-"] > [class^="header-"] > h1 { + padding: 0 4px; + font-family: var(--_font-titlebars) !important; + font-size: 12px !important; + color: var(--text) !important; + font-weight: bold !important; + height: 18px !important; + border-bottom: 1px solid var(--titlebar-border-inactive, var(--secondary)); + background: var( + --titlebar-active, + var(--titlebar-color, var(--accent)) + ) !important; +} + +[class^="browser-"] > [class^="header-"] { + padding: 0 4px; + font-family: var(--_font-titlebars) !important; + font-size: 12px !important; + color: var(--text) !important; + font-weight: bold !important; + height: 18px !important; + min-height: 18px !important; + border-bottom: 1px solid var(--titlebar-border-inactive, var(--secondary)); + background: var( + --titlebar-active, + var(--titlebar-color, var(--accent)) + ) !important; +} +[class^="browser-"] > [class^="header-"] > h1 { + font-family: var(--_font-titlebars) !important; + font-size: 12px !important; + color: var(--text) !important; + font-weight: bold !important; +} +[class^="browser-"] > [class^="header-"] > [class^="threadIcon-"] { + width: 16px; + height: 16px; +} +[class^="browser-"] > [class^="header-"] > [class^="threadIcon-"] { + margin-right: 2px; +} +[class^="browser-"] > [class^="header-"] > h1, +[class^="browser-"] > [class^="header-"] > [class^="divider-"], +[class^="browser-"] > [class^="header-"] > [class^="searchBox-"] { + margin-right: 0; +} + +[class^="browser-"] > [class^="header-"] > [class^="divider-"] { + flex-grow: 1; + background-color: transparent; +} +[class^="browser-"] > [class^="header-"] > [class^="closeIcon-"] > svg { + display: none; +} +[class^="browser-"] > [class^="header-"] > [class^="closeIcon-"] { + width: 12px !important; + min-width: 12px !important; + height: 10px !important; + min-height: 10px !important; + margin: 2px; + top: 0px; + right: -2px; + position: relative; + background: var(--primary) !important; + box-shadow: var(--wc-outer-edge); +} +[class^="browser-"] > [class^="header-"] > [class^="closeIcon-"]::before { + width: 12px !important; + height: 10px !important; + background-color: var(--text); + content: ""; + position: absolute; + -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAwSURBVChTY6AE/IdidIBLHAzQJfEqhgGYIqIUwwBZionShK4IryZckng1URswMAAAIEcZ541Sy3oAAAAASUVORK5CYIIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); + mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAwSURBVChTY6AE/IdidIBLHAzQJfEqhgGYIqIUwwBZionShK4IryZckng1URswMAAAIEcZ541Sy3oAAAAASUVORK5CYIIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); +} diff --git a/modular/titlebars.css b/modular/titlebars/xmc.css similarity index 88% rename from modular/titlebars.css rename to modular/titlebars/xmc.css index bd58f68..ed9fcc7 100644 --- a/modular/titlebars.css +++ b/modular/titlebars/xmc.css @@ -1,40 +1,12 @@ -[class^="userPopout-"] [class^="headerContainer-"], -[class^="userPopout-"] [class^="bodyTitle-"], -[class^="userPopout-"] [class^="userInfoTitle-"] { - padding: unset !important; -} - -[class^="userPopout-"] - [class^="activityUserPopout-"] - [class*="headerTextNormal-"], -[class^="userPopout-"] [class*="bodyTitle-"], -[class^="userPopout-"] [class*="aboutMeTitle-"], -[class^="userPopout-"] [class*="userInfoTitle-"] { - color: var(--text) !important; - padding: 0 10px !important; - background-color: var(--titlebar-color); - box-shadow: var(--titlebar-shadow); - margin-bottom: 0; - width: 100%; - height: 28px; - box-sizing: border-box; - display: flex; - align-items: center; - font-weight: 100; - font-family: var(--_font-titlebars) !important; - font-size: 12px !important; - text-transform: none; -} - [class*="recentMentionsPopout-"], [class^="messagesPopoutWrap-"], -[class*="root-"][class*="popout-"] { +[class^="browser-"] { border-radius: 0; } [class*="recentMentionsPopout-"] > [class^="header-"] { color: var(--text) !important; - padding: 0 10px; + padding: 0 4px; background-color: var(--titlebar-color); box-shadow: var(--titlebar-shadow); margin-bottom: 0; @@ -48,10 +20,9 @@ font-size: 12px !important; text-transform: none; } - [class*="recentMentionsPopout-"] > [class^="header-"] - > div + > [class^="controls-"] > [class^="button-"] { padding: 0; border-radius: 0; @@ -61,18 +32,20 @@ min-height: 16px; background-color: transparent; } +[class*="recentMentionsPopout-"] > [class^="header-"] [class^="tab-"] { + margin-top: 0 !important; +} [class^="messagesPopoutWrap-"] > [class^="header-"] { padding: 0; } - -[class^="messagesPopoutWrap-"] > [class^="header-"] > [class^="wrapper-"] { +[class^="messagesPopoutWrap-"] > [class^="header-"] > h1 { color: var(--text) !important; padding: 0 10px; background-color: var(--titlebar-color); box-shadow: var(--titlebar-shadow); margin-bottom: 0; - height: 28px; + height: 28px !important; box-sizing: border-box; display: flex; align-items: center; @@ -82,6 +55,47 @@ text-transform: none; } +[class^="browser-"] > [class^="header-"] { + color: var(--text) !important; + padding: 0 4px; + background-color: var(--titlebar-color); + box-shadow: var(--titlebar-shadow); + margin-bottom: 0; + height: 28px; + min-height: 28px; + box-sizing: border-box; + display: flex; + align-items: center; + font-weight: 100; + font-family: var(--_font-titlebars) !important; + font-size: 12px !important; + text-transform: none; +} +[class^="browser-"] > [class^="header-"] > h1 { + font-weight: 100; + font-family: var(--_font-titlebars) !important; + font-size: 12px !important; + text-transform: none; +} +[class^="browser-"] > [class^="header-"] > [class^="threadIcon-"], +[class^="browser-"] > [class^="header-"] > [class^="closeIcon-"] > svg { + width: 16px; + height: 16px; +} +[class^="browser-"] > [class^="header-"] > [class^="threadIcon-"] { + margin-right: 2px; +} +[class^="browser-"] > [class^="header-"] > h1, +[class^="browser-"] > [class^="header-"] > [class^="divider-"], +[class^="browser-"] > [class^="header-"] > [class^="searchBox-"] { + margin-right: 0; +} + +[class^="browser-"] > [class^="header-"] > [class^="divider-"] { + flex-grow: 1; + background-color: transparent; +} + .platform-win [class*="baseLayer-"] { top: -32px; padding-top: 32px;