Make Modular

This commit is contained in:
CI 2022-10-19 03:32:11 +00:00
parent d163a27ef2
commit f789f0ec78
14 changed files with 1973 additions and 1912 deletions

View file

@ -1,5 +1,3 @@
/* colors */ /* colors */
.theme-dark, .theme-dark,
:root { :root {
@ -348,9 +346,7 @@
[class^="containerDefault-"] [class^="containerDefault-"]
[class*="iconVisibility-"]:hover [class*="iconVisibility-"]:hover
svg[class^="icon-"], svg[class^="icon-"],
[class^="containerDefault-"] [class^="containerDefault-"] [class*="iconVisibility-"]:hover [class^="name-"],
[class*="iconVisibility-"]:hover
[class^="name-"],
[class^="wrapper-"]:hover [class^="wrapper-"]:hover
> [class^="content-"] > [class^="content-"]
> [class^="mainContent-"] > [class^="mainContent-"]
@ -786,9 +782,7 @@
display: none; display: none;
} }
[class^="userPopout-"] [class^="userPopout-"] [class^="activityUserPopout-"] > [class^="bodyNormal-"],
[class^="activityUserPopout-"]
> [class^="bodyNormal-"],
[class^="userPopout-"] [class^="userPopout-"]
[class^="activityUserPopout-"] [class^="activityUserPopout-"]
> [class^="bodyAlignCenter-"], > [class^="bodyAlignCenter-"],
@ -916,9 +910,7 @@
[class^="userPopout-"] [class*="footer-"] [class*="inputDefault-"] { [class^="userPopout-"] [class*="footer-"] [class*="inputDefault-"] {
border: 1px solid var(--tertiary); border: 1px solid var(--tertiary);
} }
[class^="userPopout-"] [class^="userPopout-"] [class*="footer-"] [class*="inputDefault-"]::placeholder,
[class*="footer-"]
[class*="inputDefault-"]::placeholder,
[class^="userPopout-"] [class*="note-"] textarea::placeholder { [class^="userPopout-"] [class*="note-"] textarea::placeholder {
color: var(--interactive-active); color: var(--interactive-active);
} }
@ -928,9 +920,7 @@
padding: 0 8px 8px; padding: 0 8px 8px;
} }
[class^="userPopout-"] [class^="userPopout-"] [class^="activityUserPopout-"] [class^="spotifyIcon-"] {
[class^="activityUserPopout-"]
[class^="spotifyIcon-"] {
top: 4px !important; top: 4px !important;
right: 8px !important; right: 8px !important;
} }
@ -981,9 +971,7 @@
image-rendering: pixelated; image-rendering: pixelated;
} }
[class^="focusLock-"][aria-modal="true"] [class^="focusLock-"][aria-modal="true"] > [class*="root-"] > [class^="body-"] {
> [class*="root-"]
> [class^="body-"] {
margin-top: 8px; margin-top: 8px;
} }
@ -1384,8 +1372,7 @@
transition: background-color 0.75s linear; transition: background-color 0.75s linear;
} }
[class*="progressBarHeader-"] [class*="progressBarHeader-"] > [class^="container-"]:not([class*="checked-"]),
> [class^="container-"]:not([class*="checked-"]),
[class^="control-"] > [class^="container-"]:not([class*="checked-"]) { [class^="control-"] > [class^="container-"]:not([class*="checked-"]) {
background-color: var(--highlight) !important; background-color: var(--highlight) !important;
} }
@ -1875,5 +1862,3 @@
.hljs-ansi-background-white { .hljs-ansi-background-white {
background-color: var(--_color7) !important; background-color: var(--_color7) !important;
} }

View file

@ -1,6 +1,7 @@
[class^="chat-"] [class^="chat-"]
> [class^="content-"] > [class^="content-"]
> [class^="container-"] > [class^="membersWrap-"], > [class^="container-"]
> [class^="membersWrap-"],
[class^="chat-"] > [class^="content-"] > [class^="membersWrap-"] { [class^="chat-"] > [class^="content-"] > [class^="membersWrap-"] {
width: 50px !important; width: 50px !important;
min-width: 50px !important; min-width: 50px !important;
@ -8,12 +9,16 @@
[class^="chat-"] [class^="chat-"]
> [class^="content-"] > [class^="content-"]
> [class^="container-"]:hover > [class^="membersWrap-"], > [class^="container-"]:hover
> [class^="membersWrap-"],
[class^="chat-"] > [class^="content-"] > [class^="membersWrap-"]:hover { [class^="chat-"] > [class^="content-"] > [class^="membersWrap-"]:hover {
width: 240px !important; width: 240px !important;
} }
[class^="chat-"] > [class^="content-"] > [class^="container"] > [class^="membersWrap-"], [class^="chat-"]
> [class^="content-"]
> [class^="container"]
> [class^="membersWrap-"],
[class^="chat-"] > [class^="content-"] > [class^="membersWrap-"] { [class^="chat-"] > [class^="content-"] > [class^="membersWrap-"] {
min-width: 0; min-width: 0;
min-height: 100%; min-height: 100%;
@ -21,9 +26,11 @@
} }
[class^="chat-"] [class^="chat-"]
> [class^="content-"] > [class^="container-"] > [class^="content-"]
> [class^="container-"]
> [class^="membersWrap-"] > [class^="membersWrap-"]
> [class^="members-"],[class^="chat-"] > [class^="members-"],
[class^="chat-"]
> [class^="content-"] > [class^="content-"]
> [class^="membersWrap-"] > [class^="membersWrap-"]
> [class^="members-"] { > [class^="members-"] {
@ -31,25 +38,27 @@
} }
[class^="chat-"] [class^="chat-"]
> [class^="content-"] > [class^="container-"]:hover > > [class^="content-"]
[class^="membersWrap-"] > [class^="container-"]:hover
> [class^="membersWrap-"]
> [class^="members-"], > [class^="members-"],
[class^="chat-"] [class^="chat-"]
> [class^="content-"] > > [class^="content-"]
[class^="membersWrap-"]:hover > [class^="membersWrap-"]:hover
> [class^="members-"] { > [class^="members-"] {
width: 240px !important; width: 240px !important;
} }
[class^="chat-"] [class^="chat-"]
> [class^="content-"] > [class^="container-"] > > [class^="content-"]
[class^="membersWrap-"] > [class^="container-"]
> [class^="membersWrap-"]
> [class^="members-"] > [class^="members-"]
> [class^="content-"] > [class^="content-"]
> [class^="membersGroup-"], > [class^="membersGroup-"],
[class^="chat-"] [class^="chat-"]
> [class^="content-"] > > [class^="content-"]
[class^="membersWrap-"] > [class^="membersWrap-"]
> [class^="members-"] > [class^="members-"]
> [class^="content-"] > [class^="content-"]
> [class^="membersGroup-"] { > [class^="membersGroup-"] {
@ -58,14 +67,15 @@
} }
[class^="chat-"] [class^="chat-"]
> [class^="content-"] > [class^="container-"]:hover > > [class^="content-"]
[class^="membersWrap-"] > [class^="container-"]:hover
> [class^="membersWrap-"]
> [class^="members-"] > [class^="members-"]
> [class^="content-"] > [class^="content-"]
> [class^="membersGroup-"], > [class^="membersGroup-"],
[class^="chat-"] [class^="chat-"]
> [class^="content-"] > > [class^="content-"]
[class^="membersWrap-"]:hover > [class^="membersWrap-"]:hover
> [class^="members-"] > [class^="members-"]
> [class^="content-"] > [class^="content-"]
> [class^="membersGroup-"] { > [class^="membersGroup-"] {

View file

@ -128,7 +128,9 @@ html:not(.a11y-font-scaled-down)
height: 8px; height: 8px;
} }
[class^="messagesWrapper-"] [class^="scrollerInner-"] [class*="groupStart-"][class*="cozy-"] { [class^="messagesWrapper-"]
[class^="scrollerInner-"]
[class*="groupStart-"][class*="cozy-"] {
margin-top: 8px; margin-top: 8px;
} }

View file

@ -48,7 +48,12 @@
background: var(--transparent_background-secondary) !important; background: var(--transparent_background-secondary) !important;
} }
nav[class*="guilds-"], nav[class*="guilds-"],
body > #app-mount > .platform-web > [class^="popout-"] > [class^="content-"] > [class^="wrapper-"] { body
> #app-mount
> .platform-web
> [class^="popout-"]
> [class^="content-"]
> [class^="wrapper-"] {
background: var(--transparent_background-tertiary) !important; background: var(--transparent_background-tertiary) !important;
} }
@ -125,11 +130,16 @@ nav[class*="guilds-"] > ul > [class^="scroller-"],
> [class^="membersWrap-"] > [class^="membersWrap-"]
> [class^="members-"] > [class^="members-"]
> div, > div,
body > #app-mount > .platform-web > [class^="popout-"] > [class^="content-"] > [class^="wrapper-"] > [class^="callContainer-"] { body
> #app-mount
> .platform-web
> [class^="popout-"]
> [class^="content-"]
> [class^="wrapper-"]
> [class^="callContainer-"] {
background: transparent !important; background: transparent !important;
} }
#gm-settings-inject [class^="auto-"]::-webkit-scrollbar-track, #gm-settings-inject [class^="auto-"]::-webkit-scrollbar-track,
#gm-settings-inject[class^="auto-"]::-webkit-scrollbar-track { #gm-settings-inject[class^="auto-"]::-webkit-scrollbar-track {
background: transparent !important; background: transparent !important;

View file

@ -3,7 +3,8 @@
border-radius: 5%; border-radius: 5%;
} }
[class^="role-"], [note="FIX ME WHEN WE HAVE :has()"] { [class^="role-"],
[note="FIX ME WHEN WE HAVE :has()"] {
padding-left: 16px; padding-left: 16px;
} }

View file

@ -30,7 +30,10 @@
> [class^="root-"] > [class^="root-"]
[class^="avatar-"] [class^="avatar-"]
> svg, > svg,
[class^="userPopoutInner-"] [class^="avatarHoverTarget-"] > [class^="wrapper-"] > svg { [class^="userPopoutInner-"]
[class^="avatarHoverTarget-"]
> [class^="wrapper-"]
> svg {
overflow: visible; overflow: visible;
} }
@ -403,11 +406,31 @@
[class^="avatar-"] [class^="avatar-"]
> svg > svg
rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"], rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"],
[class^="userProfileModalInner-"] [class^="header-"] [class^="wrapper-"] > svg rect[fill="hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%)"], [class^="userProfileModalInner-"]
[class^="userProfileModalInner-"] [class^="header-"] [class^="wrapper-"] > svg rect[fill="hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%)"], [class^="header-"]
[class^="userProfileModalInner-"] [class^="header-"] [class^="wrapper-"] > svg rect[fill="hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%)"], [class^="wrapper-"]
[class^="userProfileModalInner-"] [class^="header-"] [class^="wrapper-"] > svg rect[fill="hsl(214, calc(var(--saturation-factor, 1) * 9.9%), 50.4%)"], > svg
[class^="userProfileModalInner-"] [class^="header-"] [class^="wrapper-"] > svg rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"] { rect[fill="hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%)"],
[class^="userProfileModalInner-"]
[class^="header-"]
[class^="wrapper-"]
> svg
rect[fill="hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%)"],
[class^="userProfileModalInner-"]
[class^="header-"]
[class^="wrapper-"]
> svg
rect[fill="hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%)"],
[class^="userProfileModalInner-"]
[class^="header-"]
[class^="wrapper-"]
> svg
rect[fill="hsl(214, calc(var(--saturation-factor, 1) * 9.9%), 50.4%)"],
[class^="userProfileModalInner-"]
[class^="header-"]
[class^="wrapper-"]
> svg
rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"] {
mask: none !important; mask: none !important;
width: 8px; width: 8px;
height: 120px; height: 120px;
@ -415,8 +438,16 @@
y: 0; y: 0;
} }
[class^="userPopoutInner-"] [class^="avatarHoverTarget-"] > [class^="wrapper-"] > svg circle, [class^="userPopoutInner-"]
[class^="userProfileModalInner-"] [class^="header-"] [class^="wrapper-"] > svg circle { [class^="avatarHoverTarget-"]
> [class^="wrapper-"]
> svg
circle,
[class^="userProfileModalInner-"]
[class^="header-"]
[class^="wrapper-"]
> svg
circle {
display: none; display: none;
} }
@ -460,11 +491,31 @@
[class^="avatar-"] [class^="avatar-"]
> svg > svg
rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"], rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"],
[class^="userPopoutInner-"] [class^="avatarHoverTarget-"] > [class^="wrapper-"] > svg rect[fill="hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%)"], [class^="userPopoutInner-"]
[class^="userPopoutInner-"] [class^="avatarHoverTarget-"] > [class^="wrapper-"] > svg rect[fill="hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%)"], [class^="avatarHoverTarget-"]
[class^="userPopoutInner-"] [class^="avatarHoverTarget-"] > [class^="wrapper-"] > svg rect[fill="hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%)"], > [class^="wrapper-"]
[class^="userPopoutInner-"] [class^="avatarHoverTarget-"] > [class^="wrapper-"] > svg rect[fill="hsl(214, calc(var(--saturation-factor, 1) * 9.9%), 50.4%)"], > svg
[class^="userPopoutInner-"] [class^="avatarHoverTarget-"] > [class^="wrapper-"] > svg rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"] { rect[fill="hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%)"],
[class^="userPopoutInner-"]
[class^="avatarHoverTarget-"]
> [class^="wrapper-"]
> svg
rect[fill="hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%)"],
[class^="userPopoutInner-"]
[class^="avatarHoverTarget-"]
> [class^="wrapper-"]
> svg
rect[fill="hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%)"],
[class^="userPopoutInner-"]
[class^="avatarHoverTarget-"]
> [class^="wrapper-"]
> svg
rect[fill="hsl(214, calc(var(--saturation-factor, 1) * 9.9%), 50.4%)"],
[class^="userPopoutInner-"]
[class^="avatarHoverTarget-"]
> [class^="wrapper-"]
> svg
rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"] {
mask: none !important; mask: none !important;
width: 8px; width: 8px;
height: 80px; height: 80px;

View file

@ -4,8 +4,9 @@
padding: unset !important; padding: unset !important;
} }
[class^="userPopout-"]
[class^="userPopout-"] [class^="activityUserPopout-"] [class*="headerTextNormal-"], [class^="activityUserPopout-"]
[class*="headerTextNormal-"],
[class^="userPopout-"] [class*="bodyTitle-"], [class^="userPopout-"] [class*="bodyTitle-"],
[class^="userPopout-"] [class*="aboutMeTitle-"], [class^="userPopout-"] [class*="aboutMeTitle-"],
[class^="userPopout-"] [class*="userInfoTitle-"] { [class^="userPopout-"] [class*="userInfoTitle-"] {
@ -266,7 +267,8 @@
> [class*="root-"] > [class*="root-"]
> [class^="body-"] > [class^="body-"]
> [class^="infoScroller-"] > [class^="infoScroller-"]
> [class^="connectedAccounts-"] > [class^="connectedAccountsColumn-"] { > [class^="connectedAccounts-"]
> [class^="connectedAccountsColumn-"] {
margin-top: 28px; margin-top: 28px;
} }