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

View file

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

View file

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

View file

@ -48,7 +48,12 @@
background: var(--transparent_background-secondary) !important;
}
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;
}
@ -125,11 +130,16 @@ nav[class*="guilds-"] > ul > [class^="scroller-"],
> [class^="membersWrap-"]
> [class^="members-"]
> 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;
}
#gm-settings-inject [class^="auto-"]::-webkit-scrollbar-track,
#gm-settings-inject[class^="auto-"]::-webkit-scrollbar-track {
background: transparent !important;

View file

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

View file

@ -30,7 +30,10 @@
> [class^="root-"]
[class^="avatar-"]
> svg,
[class^="userPopoutInner-"] [class^="avatarHoverTarget-"] > [class^="wrapper-"] > svg {
[class^="userPopoutInner-"]
[class^="avatarHoverTarget-"]
> [class^="wrapper-"]
> svg {
overflow: visible;
}
@ -403,11 +406,31 @@
[class^="avatar-"]
> svg
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^="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%)"] {
[class^="userProfileModalInner-"]
[class^="header-"]
[class^="wrapper-"]
> svg
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;
width: 8px;
height: 120px;
@ -415,8 +438,16 @@
y: 0;
}
[class^="userPopoutInner-"] [class^="avatarHoverTarget-"] > [class^="wrapper-"] > svg circle,
[class^="userProfileModalInner-"] [class^="header-"] [class^="wrapper-"] > svg circle {
[class^="userPopoutInner-"]
[class^="avatarHoverTarget-"]
> [class^="wrapper-"]
> svg
circle,
[class^="userProfileModalInner-"]
[class^="header-"]
[class^="wrapper-"]
> svg
circle {
display: none;
}
@ -460,11 +491,31 @@
[class^="avatar-"]
> svg
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^="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%)"] {
[class^="userPopoutInner-"]
[class^="avatarHoverTarget-"]
> [class^="wrapper-"]
> svg
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;
width: 8px;
height: 80px;

View file

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