Make Modular

This commit is contained in:
CI 2023-10-08 18:38:42 +00:00
parent 78f6f5d335
commit 326d549dde
15 changed files with 1017 additions and 78 deletions

View file

@ -415,7 +415,9 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"]))
[class^="scroller-"]::-webkit-scrollbar-button:single-button:active,
[class*="scrollerBase-"]::-webkit-scrollbar-button:single-button:active {
box-shadow: inset 1px 1px var(--secondary), inset -1px -1px var(--secondary);
box-shadow:
inset 1px 1px var(--secondary),
inset -1px -1px var(--secondary);
}
[class^="scroller-"]:not(
[class*="thin-"]
@ -498,3 +500,287 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"]))
[class^="popout-"][role="listbox"] > [class^="option-"]:hover {
background-color: var(--accent);
}
[class^="userPopoutOuter-"] {
padding: 2px !important;
background: var(--primary) !important;
border-radius: 0 !important;
box-shadow: var(--wc-outer-edge);
}
[class^="userPopoutOuter-"] > [class^="userPopoutInner-"],
[class^="userPopoutOuter-"]
> [class^="userPopoutInner-"]
> [class^="userPopoutOverlayBackground-"] {
background: transparent;
}
[class^="userPopoutOuter-"] > [class^="userPopoutInner-"]:before {
display: none;
}
[class^="userPopoutOuter-"]
> [class^="userPopoutInner-"]
> [class*="avatarWrapper-"] {
top: 26px;
left: 8px;
}
[class^="userPopoutOuter-"]
> [class^="userPopoutInner-"]
> [class*="avatarWrapper-"]
> [class^="avatarHoverTarget-"]
> [class^="wrapper-"] {
width: 56px !important;
height: 56px !important;
}
[class^="userPopoutOuter-"]
> [class^="userPopoutInner-"]
> [class*="avatarWrapper-"]
[class*="avatarHint-"] {
width: 48px !important;
height: 48px !important;
}
[class^="userPopoutOuter-"]
> [class^="userPopoutInner-"]
> [class*="avatarWrapper-"]
> [class^="avatarHoverTarget-"]
> [class^="wrapper-"]
> svg {
width: 55px !important;
height: 55px !important;
}
[class^="userPopoutOuter-"][class*="userProfileOuterThemed-"]:after {
position: absolute;
top: 2px;
left: 2px;
content: "";
width: calc(100% - 4px);
height: 18px;
background: linear-gradient(
to right,
var(--profile-gradient-primary-color),
var(--profile-gradient-secondary-color)
);
}
[class^="userPopoutOuter-"][class*="userProfileOuterUnthemed-"]
> [class^="userPopoutInner-"]
[class^="banner-"] {
height: 18px !important;
}
[class^="userPopoutOuter-"][class*="userProfileOuterThemed-"]
> [class^="userPopoutInner-"][class*="userProfileInnerThemedWithBanner-"]
[class^="banner-"] {
margin-top: 19px;
border-radius: 0;
}
[class^="userPopoutOuter-"][class*="userProfileOuterThemed-"]
> [class^="userPopoutInner-"][class*="userProfileInnerThemedWithBanner-"]
[class^="banner-"]:after {
content: "";
background: linear-gradient(to bottom, transparent 32px, var(--primary) 64px);
width: 340px;
height: 120px;
position: absolute;
top: 19px;
left: 0;
}
[class^="userPopoutOuter-"][class*="userProfileOuterThemed-"]
> [class^="userPopoutInner-"][class*="userProfileInnerThemedPremiumWithoutBanner-"]
[class^="banner-"] {
display: none;
}
[class^="userPopoutOuter-"]
> [class^="userPopoutInner-"]
> [class^="userPopoutOverlayBackground-"] {
margin: 0 !important;
overflow: visible;
}
[class^="userPopoutOuter-"]
> [class^="userPopoutInner-"][class*="userProfileInnerThemedWithBanner-"]
> [class^="userPopoutOverlayBackground-"] {
margin-top: -72px !important;
}
[class^="userPopoutOuter-"]
> [class^="userPopoutInner-"][class*="userProfileInnerThemedPremiumWithoutBanner-"]
> [class^="userPopoutOverlayBackground-"] {
margin-top: -48px !important;
}
[class^="userPopoutOuter-"][class*="userProfileOuterUnthemed-"]
> [class^="userPopoutInner-"]
> [class^="userPopoutOverlayBackground-"] {
margin-top: -78px !important;
}
[class^="userPopoutOuter-"]
> [class^="userPopoutInner-"][class*="userProfileInnerThemedWithBanner-"]
[class*="usernameSection-"] {
padding: 0 !important;
position: absolute;
top: -60px;
left: 64px;
}
[class^="userPopoutOuter-"]
> [class^="userPopoutInner-"][class*="userProfileInnerThemedPremiumWithoutBanner-"]
[class*="usernameSection-"] {
padding: 0 !important;
position: absolute;
top: -56px;
left: 64px;
}
[class^="userPopoutOuter-"][class*="userProfileOuterUnthemed-"]
> [class^="userPopoutInner-"]
[class*="usernameSection-"] {
padding: 0 !important;
position: absolute;
top: -54px;
left: 64px;
}
[class^="userPopoutOuter-"]
> [class^="userPopoutInner-"]
[class*="usernameSection-"]
> div {
display: flex;
flex-direction: row !important;
align-items: center;
}
[class^="userPopoutOuter-"]
> [class^="userPopoutInner-"]
[class*="usernameSection-"]
> div
> [class^="userText-"]
> h1 {
font-size: 16px !important;
line-height: 16px !important;
text-shadow: 1px 1px 0 var(--primary);
}
[class^="userPopoutOuter-"]
> [class^="userPopoutInner-"]
[class*="usernameSection-"]
[class^="userText-"]
> div
> [class*="userTag-"] {
line-height: 16px;
width: max-content;
}
[class^="userPopoutOuter-"]
> [class^="userPopoutInner-"]
[class*="usernameSection-"]
[class^="userText-"]
> div
> [class*="userTag-"]
> span {
text-shadow: 1px 1px 0 var(--primary);
font-size: 12px;
padding-left: 2px;
}
[class^="userPopoutOuter-"]
> [class^="userPopoutInner-"]
[class*="usernameSection-"]
[class^="userText-"]
> div {
position: absolute;
top: -26px;
left: -62px;
z-index: 10;
flex-direction: row-reverse !important;
}
[class^="userPopoutOuter-"][class*="userProfileOuterUnthemed-"]
> [class^="userPopoutInner-"]
[class*="usernameSection-"]
[class^="userText-"]
> div {
position: absolute;
top: -26px;
}
[class^="userPopoutOuter-"]
> [class^="userPopoutInner-"][class*="userProfileInnerThemedPremiumWithoutBanner-"]
[class*="usernameSection-"]
[class^="userText-"]
> div {
position: absolute;
top: -24px;
}
[class^="userPopoutOuter-"]
> [class^="userPopoutInner-"]
[class*="usernameSection-"]
[class^="userText-"]
> div
.platform-icons-wrapper {
margin-left: 0 !important;
}
[class^="userPopoutOuter-"]
> [class^="userPopoutInner-"]
[class*="usernameSection-"]
> div
> [class*="pronouns-"] {
font-size: 12px;
line-height: 12px;
padding-top: 0;
margin-left: 4px;
opacity: 0.75;
text-shadow: 1px 1px 0 var(--primary);
}
[class^="userPopoutOuter-"][class*="userProfileOuterThemed-"]
> [class^="userPopoutInner-"][class*="userProfileInnerThemedWithBanner-"]
[class*="customStatusSection-"] {
padding: 0 !important;
position: absolute;
top: -38px;
left: 64px;
}
[class^="userPopoutOuter-"][class*="userProfileOuterUnthemed-"]
> [class^="userPopoutInner-"]
[class*="customStatusSection-"] {
padding: 0 !important;
position: absolute;
top: -30px;
left: 64px;
}
[class^="userPopoutOuter-"]
> [class^="userPopoutInner-"][class*="userProfileInnerThemedPremiumWithoutBanner-"]
[class*="customStatusSection-"] {
padding: 0 !important;
position: absolute;
top: -32px;
left: 64px;
}
[class^="userPopoutOuter-"]
> [class^="userPopoutInner-"]
[class*="customStatusSection-"]
> [class^="customStatus-"] {
font-size: 12px;
line-height: 12px;
text-shadow: 1px 1px 0 var(--primary);
display: flex;
flex-direction: row !important;
align-items: center;
}
[class^="userPopoutOuter-"]
> [class^="userPopoutInner-"]
[class*="customStatusSection-"]
> [class^="customStatus-"]
> [class*="customStatusEmoji-"] {
width: 16px;
height: 16px;
}
[class^="userPopoutOuter-"]
> [class^="userPopoutInner-"]
[class*="customStatusSection-"]
> [class^="customStatus-"]
> [class^="customStatusText-"] {
max-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
}
[class^="userPopoutOuter-"]
> [class^="userPopoutInner-"]
[class^="section-"]:has(> .mutual-guilds) {
padding-top: 0;
}
[class^="userPopoutOuter-"]
> [class^="userPopoutInner-"]
> [class^="profileBadges-"] {
visibility: hidden;
height: 30px !important;
}
[class^="userPopoutOuter-"]
> [class^="userPopoutInner-"]
> [class^="bannerSVGWrapper-"][viewbox$=" 60"] {
margin-bottom: 60px;
}