Cynosphere
/
xmc
mirror of https://gitlab.com/Cynosphere/xmc.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Make Modular

This commit is contained in:
CI 2023-03-18 04:34:32 +00:00
parent 8383a37f9a
commit 82ed312dfb
23 changed files with 747 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
modular/base.css
View File

@ -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 */

6
modular/collapsing_sidebar/dynamic_+_compact-er_support.css
View File

@ -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;

62
modular/compacter_mode.css
View File

@ -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-"] {

3
modular/font/custom.css
View File

@ -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;

3
modular/font/revert_rebrand.css
View File

@ -1,4 +1,5 @@
:root,
.theme-dark,
:root {
.theme-light {
--font-display: var(--font-primary) !important;
}

5
modular/font/terminus.css
View File

@ -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-"]

3
modular/font/the_funny.css
View File

@ -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;

3
modular/font/the_funny_(alternate_monospace).css
View File

@ -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;

13
modular/font/unifont.css
View File

@ -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;

6
modular/override_titlebar.css
View File

@ -1,3 +1,5 @@
:root {
--titlebar-color: var(--xmc_titlebar_color) !important;
:root,
.theme-dark,
.theme-light {
--titlebar-color: var(--xmc-titlebar-color) !important;
}

12
modular/overwrite_colors.css
View File

@ -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-"]),

5
modular/scheme/amora_focus.css
View File

@ -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 {

4
modular/scheme/source_engine_-_tools.css
View File

@ -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 {

9
modular/scheme/valve.css
View File

@ -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 {

323
modular/stylings/windows_classic.css Normal file
View File

@ -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);
}

10
modular/stylings.css → modular/stylings/xmc.css
View File

@ -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;
}

3
modular/textarea/fullwidth.css
View File

@ -102,3 +102,6 @@ form [class*="typing-"] {
[class*="emojiButton-"] {
max-height: unset;
}
[class^="messagesWrapper-"] {
margin-bottom: 8px;
}

0
modular/textarea/xmc_default.css → modular/textarea/typing_above.css
View File

3
modular/titlebar_icon/msn_messenger_1.0.css Normal file
View File

@ -0,0 +1,3 @@
:root {
--titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACYSURBVDhPpZABDsAgCAN5uk/zZ45OahAnmqxJowi9OWVRKW2yyHDpdSILQQxTtVYCNpAQxnBUDtEGBgZEh1B7HQH+BnoyAbA/AjAwVgN4I7wHQGiaCWHoHKYwRHcxdBH+Lf91dbx+/gtoqiEf9uJD6nSA4FD9PpwFY5j6hrgwB3ZaASjMbGYAaIa4MFYCUGdeAMP9apeW9gDxfcZs7l81ZQAAAABJRU5ErkJggg==");
}

0
modular/titlebar_icon/msn.css → modular/titlebar_icon/msn_messenger_4.6.css
View File

0
modular/old_titlebar.css → modular/titlebars/old_discord.css
View File

254
modular/titlebars/windows_classic.css Normal file
View File

@ -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==");
}

84
modular/titlebars.css → modular/titlebars/xmc.css
View File

@ -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;