470 lines
14 KiB
SCSS
470 lines
14 KiB
SCSS
[class*="guilds_"] {
|
|
background-color: var(--ThreeDFace) !important;
|
|
box-shadow: var(--wc-rebar);
|
|
width: 48px;
|
|
padding: 2px;
|
|
|
|
[class^="scroller_"] {
|
|
padding-top: 4px;
|
|
|
|
&::-webkit-scrollbar,
|
|
&::-webkit-scrollbar-thumb,
|
|
&::-webkit-scrollbar-button,
|
|
&::-webkit-scrollbar-button:single-button,
|
|
&::-webkit-scrollbar-track {
|
|
visibility: hidden !important;
|
|
width: 0px !important;
|
|
min-width: 0px !important;
|
|
}
|
|
|
|
& > div[style*="height: 56px;"]:has(> [class^="listItem_"]) {
|
|
height: unset !important;
|
|
}
|
|
}
|
|
|
|
[class^="listItemWrapper_"] > [class^="wrapper_"] {
|
|
width: 40px;
|
|
height: 40px;
|
|
& > svg {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
}
|
|
[class^="listItem_"] {
|
|
--custom-list-items-list-item-width: 48px;
|
|
margin: 0 !important;
|
|
|
|
[class^="lowerBadge_"] {
|
|
top: 0;
|
|
z-index: 11;
|
|
width: 16px;
|
|
height: 16px;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
image-rendering: pixelated;
|
|
|
|
&:has(> [class^="numberBadge_"][style*="--status-danger"]) {
|
|
background-image: var(--ImagePing);
|
|
|
|
& > [class^="numberBadge_"] {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
[class^="upperBadge_"] {
|
|
left: 0;
|
|
right: unset;
|
|
z-index: 11;
|
|
width: 16px;
|
|
height: 16px;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
image-rendering: pixelated;
|
|
|
|
&:has(
|
|
> [class^="iconBadge_"]
|
|
> svg
|
|
> path[d="M4 2.5C2.897 2.5 2 3.397 2 4.5V15.5C2 16.604 2.897 17.5 4 17.5H11V19.5H7V21.5H17V19.5H13V17.5H20C21.103 17.5 22 16.604 22 15.5V4.5C22 3.397 21.103 2.5 20 2.5H4ZM20 4.5V13.5H4V4.5H20Z"]
|
|
) {
|
|
background-image: var(--ImageMonitor);
|
|
|
|
& > [class^="iconBadge_"] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&:has(
|
|
> [class^="iconBadge_"]
|
|
> svg
|
|
> path[d="M11.383 3.07904C11.009 2.92504 10.579 3.01004 10.293 3.29604L6 8.00204H3C2.45 8.00204 2 8.45304 2 9.00204V15.002C2 15.552 2.45 16.002 3 16.002H6L10.293 20.71C10.579 20.996 11.009 21.082 11.383 20.927C11.757 20.772 12 20.407 12 20.002V4.00204C12 3.59904 11.757 3.23204 11.383 3.07904ZM14 5.00195V7.00195C16.757 7.00195 19 9.24595 19 12.002C19 14.759 16.757 17.002 14 17.002V19.002C17.86 19.002 21 15.863 21 12.002C21 8.14295 17.86 5.00195 14 5.00195ZM14 9.00195C15.654 9.00195 17 10.349 17 12.002C17 13.657 15.654 15.002 14 15.002V13.002C14.551 13.002 15 12.553 15 12.002C15 11.451 14.551 11.002 14 11.002V9.00195Z"]
|
|
) {
|
|
background-image: var(--ImageSpeaker);
|
|
|
|
& > [class^="iconBadge_"] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&:has(
|
|
> [class^="iconBadge_"]
|
|
> svg
|
|
> path[d="M21.526 8.149C21.231 7.966 20.862 7.951 20.553 8.105L18 9.382V7C18 5.897 17.103 5 16 5H4C2.897 5 2 5.897 2 7V17C2 18.104 2.897 19 4 19H16C17.103 19 18 18.104 18 17V14.618L20.553 15.894C20.694 15.965 20.847 16 21 16C21.183 16 21.365 15.949 21.526 15.851C21.82 15.668 22 15.347 22 15V9C22 8.653 21.82 8.332 21.526 8.149Z"]
|
|
) {
|
|
background-image: var(--ImageCamera);
|
|
|
|
& > [class^="iconBadge_"] {
|
|
display: none;
|
|
}
|
|
}
|
|
&:has(
|
|
> [class^="iconBadge_"]
|
|
> svg
|
|
> g
|
|
> path[d="M4.92871 13.4149L10.5857 19.0709L18.3639 11.2927C19.7781 9.87859 22.6066 6.48376 21.1923 2.80748C17.5153 1.3932 14.1213 4.22173 12.7074 5.63625L4.92871 13.4149ZM16.064 9.93309C17.1686 9.93309 18.064 9.03766 18.064 7.93309C18.064 6.82852 17.1686 5.93309 16.064 5.93309C14.9594 5.93309 14.064 6.82852 14.064 7.93309C14.064 9.03766 14.9594 9.93309 16.064 9.93309Z"]
|
|
) {
|
|
background-image: var(--ImageJoystick);
|
|
|
|
& > [class^="iconBadge_"] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&:has(
|
|
> [class^="iconBadge_"]
|
|
> svg
|
|
> g
|
|
> path[d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7v-5z"]
|
|
) {
|
|
background-image: var(--ImageEvents);
|
|
|
|
& > [class^="iconBadge_"] {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
& > [class^="guildSeparator_"] {
|
|
width: 48px;
|
|
border-radius: 0;
|
|
height: 1px;
|
|
border-top: solid 1px var(--ThreeDShadow);
|
|
background-color: var(--ThreeDHighlight);
|
|
margin: 3px 2px;
|
|
}
|
|
|
|
[class^="pill_"] {
|
|
width: 16px;
|
|
height: 16px;
|
|
left: unset;
|
|
right: 4px;
|
|
z-index: 10;
|
|
pointer-events: none;
|
|
|
|
&:has(> [class^="item_"][style*="height: 8px;"]) {
|
|
background-image: var(--ImageUnread);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
[class^="item_"] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
[class*="selected_"] > [class^="wrapper_"]:has(> svg) {
|
|
box-shadow: inset -1px -1px 0 0 var(--ThreeDHighlight),
|
|
inset 1px 1px 0 0 var(--ThreeDShadow);
|
|
&:hover {
|
|
box-shadow: inset -1px -1px 0 0 var(--ThreeDHighlight),
|
|
inset 1px 1px 0 0 var(--ThreeDShadow);
|
|
}
|
|
}
|
|
|
|
[class^="wrapper_"]:has(> svg) {
|
|
width: 40px;
|
|
height: 40px;
|
|
& > svg {
|
|
width: 40px;
|
|
height: 40px;
|
|
|
|
img[class^="icon_"] {
|
|
width: 38.41px;
|
|
height: 38.41px;
|
|
}
|
|
|
|
[class^="folder_"] {
|
|
background-color: transparent;
|
|
[class^="folderIconWrapper_"] {
|
|
width: 38.41px;
|
|
height: 38.41px;
|
|
padding: 4.8px;
|
|
mask-image: var(--ImageFolderClosed);
|
|
mask-repeat: no-repeat;
|
|
mask-position: center;
|
|
mask-size: 38.41px;
|
|
-webkit-mask-image: var(--ImageFolderClosed);
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-position: center;
|
|
-webkit-mask-size: 38.41px;
|
|
background-size: 38.41px;
|
|
image-rendering: pixelated;
|
|
|
|
&::before,
|
|
&::after {
|
|
position: absolute;
|
|
content: "";
|
|
display: block;
|
|
width: 38.41px;
|
|
height: 38.41px;
|
|
|
|
mask-image: var(--ImageFolderClosed);
|
|
mask-repeat: no-repeat;
|
|
mask-position: center;
|
|
mask-size: 38.41px;
|
|
-webkit-mask-image: var(--ImageFolderClosed);
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-position: center;
|
|
-webkit-mask-size: 38.41px;
|
|
/*background-image: var(--ImageFolderClosed);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-color: transparent !important;*/
|
|
background-size: 38.41px;
|
|
background-color: inherit;
|
|
}
|
|
|
|
&:has(
|
|
[class^="expandedFolderIconWrapper_"]:not([style^="transform:"])
|
|
) {
|
|
background-image: none;
|
|
}
|
|
|
|
[class^="closedFolderIconWrapper_"] {
|
|
width: 38.41px;
|
|
height: 38.41px;
|
|
padding: 0;
|
|
background-color: inherit;
|
|
display: block;
|
|
|
|
&::before {
|
|
position: absolute;
|
|
content: "";
|
|
display: block;
|
|
width: 38.41px;
|
|
height: 38.41px;
|
|
|
|
mask-image: var(--ImageFolderClosed);
|
|
mask-repeat: no-repeat;
|
|
mask-position: center;
|
|
mask-size: 38.41px;
|
|
-webkit-mask-image: var(--ImageFolderClosed);
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-position: center;
|
|
-webkit-mask-size: 38.41px;
|
|
/*background-image: var(--ImageFolderClosed);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-color: transparent !important;*/
|
|
background-size: 38.41px;
|
|
background-color: inherit;
|
|
}
|
|
&::after {
|
|
position: absolute;
|
|
content: "";
|
|
display: block;
|
|
width: 38.41px;
|
|
height: 38.41px;
|
|
|
|
background-image: var(--ImageFolderClosedOverlay);
|
|
background-size: 38.41px;
|
|
}
|
|
|
|
& > [class^="icon_"] {
|
|
width: 38.41px;
|
|
height: 38.41px;
|
|
background-color: inherit;
|
|
background-image: none !important;
|
|
position: absolute;
|
|
|
|
&::before {
|
|
position: absolute;
|
|
content: "";
|
|
display: block;
|
|
width: 38.41px;
|
|
height: 38.41px;
|
|
|
|
mask-image: var(--ImageFolderClosed);
|
|
mask-repeat: no-repeat;
|
|
mask-position: center;
|
|
mask-size: 38.41px;
|
|
-webkit-mask-image: var(--ImageFolderClosed);
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-position: center;
|
|
-webkit-mask-size: 38.41px;
|
|
/*background-image: var(--ImageFolderClosed);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-color: transparent !important;*/
|
|
background-size: 38.41px;
|
|
background-color: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
[class^="expandedFolderIconWrapper_"] {
|
|
width: unset;
|
|
height: unset;
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 38.41px;
|
|
height: 38.41px;
|
|
background-image: var(--ImageFolderOpenOverlay);
|
|
background-size: 38.41px;
|
|
}
|
|
|
|
& > svg {
|
|
width: 38.41px;
|
|
height: 38.41px;
|
|
|
|
background-color: currentColor;
|
|
|
|
mask-image: var(--ImageFolderOpen);
|
|
mask-repeat: no-repeat;
|
|
mask-position: center;
|
|
mask-size: 38.41px;
|
|
-webkit-mask-image: var(--ImageFolderOpen);
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-position: center;
|
|
-webkit-mask-size: 38.41px;
|
|
/*background-image: var(--ImageFolderOpen);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-color: transparent !important;*/
|
|
background-size: 38.41px;
|
|
image-rendering: pixelated;
|
|
|
|
& > path {
|
|
display: none;
|
|
}
|
|
}
|
|
&[style^="transform:"] > svg {
|
|
background-image: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
[class^="childWrapper_"] {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
box-shadow: inset -1px -1px 0 0 var(--ThreeDShadow),
|
|
inset 1px 1px 0 0 var(--ThreeDHighlight);
|
|
}
|
|
}
|
|
[class^="wrapperSimple_"] {
|
|
width: 40px;
|
|
height: 40px;
|
|
& > svg {
|
|
width: 40px;
|
|
height: 40px;
|
|
|
|
img[class^="icon_"] {
|
|
width: 38px;
|
|
height: 38px;
|
|
}
|
|
}
|
|
}
|
|
|
|
[class^="circleIconButton_"] {
|
|
background-color: transparent;
|
|
&:hover {
|
|
box-shadow: inset -1px -1px 0 0 var(--ThreeDShadow),
|
|
inset 1px 1px 0 0 var(--ThreeDHighlight);
|
|
}
|
|
}
|
|
|
|
[data-list-item-id="guildsnav___home"] > [class^="childWrapper_"] > svg {
|
|
background-image: var(--ImageHome);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
image-rendering: pixelated;
|
|
width: 38.41px;
|
|
height: 38.41px;
|
|
background-size: 38.41px;
|
|
|
|
& > path {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
[data-list-item-id="guildsnav___guild-discover-button"] > svg {
|
|
background-image: var(--ImageDiscovery);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
image-rendering: pixelated;
|
|
width: 38.41px;
|
|
height: 38.41px;
|
|
background-size: 38.41px;
|
|
|
|
& > path {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
[data-list-item-id="guildsnav___create-join-button"] > svg {
|
|
background-image: var(--ImageAdd);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
image-rendering: pixelated;
|
|
width: 38.41px;
|
|
height: 38.41px;
|
|
background-size: 38.41px;
|
|
|
|
& > path {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul[id^="folder-items-"] {
|
|
height: unset !important;
|
|
box-shadow: var(--wc-frame);
|
|
padding: 4px;
|
|
& > [class^="listItem_"] {
|
|
--custom-list-items-list-item-width: 40px;
|
|
|
|
[class^="pill_"] {
|
|
right: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
[class^="wrapper_"]:has(> [class^="expandedFolderBackground_"]) {
|
|
width: unset !important;
|
|
}
|
|
|
|
[class^="expandedFolderBackground_"] {
|
|
background-color: transparent;
|
|
width: unset;
|
|
|
|
& + [class^="listItem_"] [class^="wrapper_"]:has(> svg) {
|
|
height: 62px;
|
|
|
|
&::after {
|
|
position: absolute;
|
|
content: "";
|
|
height: 23px;
|
|
width: 40px;
|
|
left: 0;
|
|
bottom: 0;
|
|
text-align: center;
|
|
background-image: var(--ImageScrollbarDown);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
image-rendering: pixelated;
|
|
}
|
|
&:has([class^="folder_"][aria-expanded="true"]) {
|
|
box-shadow: inset -1px -1px 0 0 var(--ThreeDShadow),
|
|
inset 1px 1px 0 0 var(--ThreeDHighlight);
|
|
}
|
|
|
|
&:hover::after {
|
|
box-shadow: inset 0 1px var(--ThreeDShadow),
|
|
inset -1px -1px 0 0 var(--ThreeDShadow),
|
|
inset 1px 2px 0 0 var(--ThreeDHighlight);
|
|
}
|
|
&:has([class^="folder_"][aria-expanded="true"])::after {
|
|
box-shadow: inset 0 1px var(--ThreeDShadow),
|
|
inset -1px -1px 0 0 var(--ThreeDHighlight),
|
|
inset 1px 2px 0 0 var(--ThreeDShadow);
|
|
}
|
|
}
|
|
}
|
|
}
|