Cynosphere/pxvmc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

backlog

Browse source
This commit is contained in:
Cynthia Foxwell 2024-05-05 16:18:38 -06:00
parent 31eeffbbda
commit 5909475503
14 changed files with 3360 additions and 697 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.prettierrc Normal file
View file

@ -0,0 +1,6 @@
{
"semi": true,
"bracketSpacing": false,
"endOfLine": "lf",
"printWidth": 120
}

2
pxvmc.scss
View file

@ -13,7 +13,7 @@
@use "src/voice_rings";
@use "src/wide_settings";
@use "src/private_channels";
/*@use "src/embeds";*/
@use "src/embeds";
@use "src/winclassic";
@use "src/misc";
@use "src/ansi_chain";

36
src/channel_list.scss
View file

@ -41,6 +41,31 @@
display: none;
}
[class^="voiceUserSummary_"] {
padding: 2px 4px;
height: 20px;
& > [class^="container_"] {
& > :is(svg, [class^="avatarContainer_"]),
& > [class^="avatarContainer_"] > [class^="clickableAvatar_"] {
width: 16px;
height: 16px;
}
& > [class^="icon_"] {
margin-right: 3px;
}
& > [class*="avatarContainerMasked_"] {
margin-right: 1px;
& > foreignObject {
mask: none;
}
}
}
}
[class^="containerDefault_"] {
margin-left: 0;
padding: 0;
@ -56,6 +81,7 @@
[class^="link_"] {
border-radius: 0;
padding: 2px 4px;
min-height: unset;
--channel-icon: var(--text-muted);
[class^="icon_"] {
@ -153,11 +179,7 @@
&[class*="clickable_"] {
height: 21px;
background: linear-gradient(
to right,
colors.$highlight,
transparent 75%
);
background: linear-gradient(to right, colors.$highlight, transparent 75%);
&:hover {
[class^="mainContent_"] > svg {
@ -195,8 +217,7 @@
font-size: 12px;
margin-left: 23px;
color: var(--text-normal);
text-shadow: 0px 0px 4px colors.$c0, 0px 0px 4px colors.$c0,
0px 0px 4px colors.$c0, 0px 0px 4px colors.$c0;
text-shadow: 0px 0px 4px colors.$c0, 0px 0px 4px colors.$c0, 0px 0px 4px colors.$c0, 0px 0px 4px colors.$c0;
}
}
@ -225,6 +246,7 @@
[class^="link_"] {
border-radius: 0;
padding: 2px 4px;
min-height: unset;
--channel-icon: var(--text-muted);
[class^="icon_"] {

4
src/compact.scss
View file

@ -281,7 +281,7 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"]))
[class^="sidebar_"] header[class^="header_"] {
padding: 4px 8px;
}
[class^="chat_"] > [class^="title_"],
/*[class^="chat_"] > [class^="title_"],
[class^="chat_"] > section[class*="container_"],
[class^="base_"]
> [class^="content_"]
@ -359,7 +359,7 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"]))
margin: 0 !important;
}
}
}
}*/
[class^="chatContent_"]
> form

42
src/context_menu.scss
View file

@ -23,13 +23,11 @@
margin: 1px 0;
padding: 0 2px !important;
min-height: 16px !important;
font-size: 12px;
font-size: var(--FontSize, 12px);
&:not(:has(> [class^="iconContainer_"] > [class^="icon_"])):not(
:has(> [class^="iconContainerLeft_"])
):not(:has(> [class^="statusItem_"])):not(
:has([class^="userMenuItem_"])
) {
&:not(:has(> [class^="iconContainer_"] > [class^="icon_"])):not(:has(> [class^="iconContainerLeft_"])):not(
:has(> [class^="statusItem_"])
):not(:has([class^="userMenuItem_"])):not(:has([class^="optionLabel_"])) {
padding-inline-start: 20px !important;
}
&:has(> [class^="iconContainer_"] > [class^="icon_"]) {
@ -46,9 +44,25 @@
padding-left: 2px;
& > [class^="subtext_"] {
line-height: 12px;
line-height: var(--FontSize, 12px);
margin-top: 0;
}
&:has(> [class^="optionLabel_"]) {
padding-left: 0;
}
& > [class^="optionLabel_"] {
font-size: var(--FontSize, 12px);
& > [class^="optionName_"] {
margin-left: 3px;
}
& > [class^="optionIcon_"] {
width: 16px;
height: 16px;
}
}
}
& > [class^="iconContainer_"],
@ -88,13 +102,10 @@
-webkit-mask-position: center;
}
&[role="menuitemcheckbox"]
> [class^="iconContainer_"]
> svg[class^="icon_"] {
&[role="menuitemcheckbox"] > [class^="iconContainer_"] > svg[class^="icon_"] {
display: none;
}
&[role="menuitemcheckbox"][aria-checked="true"]
> [class^="iconContainer_"]:before {
&[role="menuitemcheckbox"][aria-checked="true"] > [class^="iconContainer_"]:before {
content: "";
position: absolute;
right: 0px;
@ -110,13 +121,10 @@
-webkit-mask-position: center;
}
&[role="menuitemradio"]
> [class^="iconContainer_"]
> svg[class^="icon_"] {
&[role="menuitemradio"] > [class^="iconContainer_"] > svg[class^="icon_"] {
display: none;
}
&[role="menuitemradio"][aria-checked="true"]
> [class^="iconContainer_"]:before {
&[role="menuitemradio"][aria-checked="true"] > [class^="iconContainer_"]:before {
content: "";
position: absolute;
right: -1px;

112
src/embeds.scss
View file

@ -33,35 +33,50 @@
font-size: 0.8em;
}*/
@media (min-height: 551px) {
@media (min-height: 481px) {
/* big youtube */
[class^="embedWrapper_"]:has(iframe),
/*[class^="embedWrapper_"]:has(iframe),
[class^="embedWrapper_"]:has(video),
[class^="embedWrapper_"]:has(img[src*="i.ytimg.com"]) {
max-width: 550px !important;
[class^="embedWrapper_"]:has(img[src*="i.ytimg.com"])*/
[class^="embedWrapper_"] {
max-width: 500px !important;
:is(
[class*="embedProvider_"],
[class*="embedAuthor_"],
[class*="embedTitle_"],
[class*="embedDescription_"],
[class*="embedFields_"],
[class*="embedFooter_"],
[class*="embedMedia_"]
) {
min-width: unset !important;
}
[class^="gridContainer_"] {
max-width: 550px !important;
max-width: 480px !important;
}
[class*="embedMedia_"] {
max-width: 550px !important;
max-width: 480px !important;
max-height: unset !important;
[class^="imageWrapper_"] {
max-width: 550px !important;
aspect-ratio: unset !important;
max-width: 480px !important;
max-height: 480px !important;
width: max-content !important;
height: max-content !important;
:is(img, video) {
max-width: 550px !important;
max-height: 550px !important;
aspect-ratio: unset !important;
max-width: 480px !important;
max-height: 480px !important;
width: max-content !important;
height: max-content !important;
}
}
& > [class^="embedVideo_"] {
max-width: 550px !important;
aspect-ratio: unset;
max-width: 480px !important;
& > iframe {
max-width: unset !important;
@ -73,34 +88,67 @@
}
}
/* linked images equal to attachments */
:is([class^="inlineMediaEmbed_"], [class^="messageAttachment_"]) {
max-width: 550px !important;
max-height: 550px !important;
[class^="imageWrapper_"] {
max-width: 550px !important;
max-height: 550px !important;
width: max-content !important;
height: max-content !important;
aspect-ratio: unset !important;
[class^="loadingOverlay_"] {
aspect-ratio: unset !important;
}
[class^="embedWrapper_"]:has(iframe),
[class^="embedWrapper_"]:has(img[src*="i.ytimg.com"]) {
[class*="embedMedia_"] [class^="imageWrapper_"] {
max-height: unset !important;
:is(img, video) {
max-width: 550px !important;
max-height: 550px !important;
max-height: unset !important;
}
}
}
/* linked images equal to attachments */
:is([class^="inlineMediaEmbed_"], [class^="messageAttachment_"]) {
max-width: 480px !important;
max-height: 480px !important;
[class^="imageWrapper_"] {
max-width: 480px !important;
max-height: 480px !important;
width: max-content !important;
height: max-content !important;
:is(img, video) {
max-width: 480px !important;
max-height: 480px !important;
width: max-content !important;
height: max-content !important;
}
}
}
[class^="oneByOneGrid_"] {
max-height: 550px !important;
[class^="visualMediaItemContainer_"]:has(> [class^="oneByOneGrid_"]) {
max-width: unset;
& > [class^="oneByOneGrid_"] {
max-height: 480px !important;
& > [class^="mosaicItem_"] {
max-width: 480px !important;
[class^="imageWrapper_"] {
width: unset !important;
max-width: 480px !important;
:is(img, video) {
max-width: 480px !important;
max-height: 480px !important;
width: max-content !important;
height: max-content !important;
}
}
}
}
}
[class^="imageContainer_"]:has([aria-label="GIF"]) + [class^="altText_"] {
display: none;
}
[class*="wrapper_"][data-fullscreen="true"] > video {
max-width: unset !important;
max-height: unset !important;
width: 100% !important;
height: 100% !important;
}
}

12
src/font.scss
View file

@ -165,12 +165,12 @@
:root,
.theme-dark,
.theme-light {
--font-primary: "Twemoji Mozilla", "Terminus (TTF) for Windows",
"Terminus (TTF)", "Sazanami Gothic", "UnifontBitmap", "Unifont Windows",
"Unifont", monospace !important;
--font-display: "Twemoji Mozilla", "Terminus (TTF) for Windows",
"Terminus (TTF)", "Sazanami Gothic", "UnifontBitmap", "Unifont Windows",
"Unifont", monospace !important;
--font-primary: "Twemoji Mozilla", "Tahoma", "MS PGothic",
"Terminus (TTF) for Windows", "Terminus (TTF)", "Sazanami Gothic",
"UnifontBitmap", "Unifont Windows", "Unifont", monospace !important;
--font-display: "Twemoji Mozilla", "Tahoma", "MS PGothic",
"Terminus (TTF) for Windows", "Terminus (TTF)", "Sazanami Gothic",
"UnifontBitmap", "Unifont Windows", "Unifont", monospace !important;
--font-code: "Terminus (TTF) for Windows", "Terminus (TTF)", "Sazanami Gothic",
"UnifontBitmap", "Unifont Windows", "Unifont", monospace !important;

14
src/misc.scss
View file

@ -1,6 +1,4 @@
[class^="mediaAttachmentsContainer_"]
[class^="messageAttachment_"]
[class^="lazyImg_"] {
[class^="mediaAttachmentsContainer_"] [class^="messageAttachment_"] [class^="lazyImg_"] {
object-fit: contain !important;
}
@ -8,10 +6,8 @@
background-color: var(--background-secondary);
}
[class^="upperBadge_"]
[class^="iconBadge_"]:has(> svg > path[d^="M5.66493"][d$="7V9Z"]),
[class^="upperBadge_"]
[class^="iconBadge_"]:has(> svg > path[d^="M20.97"][d$="0-2h1V7Z"]) {
[class^="upperBadge_"] [class^="iconBadge_"]:has(> svg > path[d^="M5.66493"][d$="7V9Z"]),
[class^="upperBadge_"] [class^="iconBadge_"]:has(> svg > path[d^="M20.97"][d$="0-2h1V7Z"]) {
display: none;
}
@ -46,3 +42,7 @@
}
}
*/
[class^="positionContainer_"]:has(#gif-picker-tab-panel) {
height: calc(100vh - 128px);
}

44
src/ripcord.scss
View file

@ -18,6 +18,7 @@
&[class*="hasContent_"] {
margin-top: 0.25rem;
margin-bottom: -1px;
}
}
@ -81,6 +82,37 @@
}
}
&[class*="systemMessage_"] {
& > [class^="buttonContainer_"] {
top: 3px !important;
}
& > [class^="contents_"] > [class*="messageContent_"] > [class^="container_"] {
padding: 0;
& > [class^="iconContainer_"] {
padding: 0;
width: 32px;
& > [class^="icon_"] {
width: 13px;
height: 13px;
background-size: cover;
}
}
& > [class^="content_"] {
font-size: 12px;
line-height: 13px;
& > [class^="timestamp_"] {
position: absolute;
right: 0;
}
}
}
}
& > [class^="contents_"] {
& > [class*="messageContent_"]:has(> [class^="attachment_"]) {
margin: 0;
@ -137,12 +169,7 @@
margin-left: 2px;
}
:is(
.platform-icons-wrapper,
.roleTags-wrapper,
[class^="newMemberBadge_"]
)
> svg {
:is(.platform-icons-wrapper, .roleTags-wrapper, [class^="newMemberBadge_"]) > svg {
width: 13px;
height: 13px;
margin: 0 !important;
@ -532,10 +559,7 @@
}
}
[class^="chat_"]
[class^="messagesWrapper_"]
[class^="scroller_"]
[class^="scrollerContent_"] {
[class^="chat_"] [class^="messagesWrapper_"] [class^="scroller_"] [class^="scrollerContent_"] {
padding: 0 !important;
padding-bottom: 3px !important;
}

740
src/w9x/channel_list.scss Normal file
View file

@ -0,0 +1,740 @@
[class^="base_"] > [class^="content_"] > [class^="sidebar_"] {
border-radius: 0 !important;
border-left: 4px solid var(--ThreeDFace);
padding: 2px;
box-shadow: var(--RebarBorder);
& > [class^="container_"] {
background: var(--Window) !important;
& > [class^="container_"][class*="clickable_"] {
background: var(--ThreeDFace) !important;
& > header[class^="header_"] {
padding: 0px;
padding-bottom: 2px;
height: 22px !important;
box-shadow: inset 0 -1px 0 0 var(--ThreeDHighlight), inset 0 -2px 0 0 var(--ThreeDShadow);
& > [class^="headerContent_"] {
height: 20px !important;
padding-left: 6px;
& > [class*="name_"] {
font-weight: normal;
font-size: var(--FontSize);
}
& > [class^="headerChildren_"] {
width: 20px;
height: 18px;
background-color: var(--WindowText);
mask-image: var(--ImageScrollbarDown);
mask-repeat: no-repeat;
mask-position: center;
&:has(> svg[class*="open"]) {
mask-image: var(--ImageClose);
}
& > svg {
display: none;
}
}
& > [class^="guildIconV2Container_"] {
margin-right: 2px;
}
}
}
& > [class^="animatedContainer_"] {
height: 20px !important;
& > [class^="bannerImage_"] {
height: 20px !important;
&::after {
content: "";
height: 20px !important;
width: 240px;
top: 0;
left: 0;
position: absolute;
background: linear-gradient(to top, var(--ThreeDFace) 5%, transparent 100%);
}
}
}
}
& > [class^="animatedBannerHoverLayer_"] {
display: none;
}
& > [class^="scroller_"] {
scrollbar-width: unset !important;
scrollbar-color: unset !important;
&::-webkit-scrollbar {
min-width: 16px;
width: 16px;
}
&::-webkit-scrollbar-track {
visibility: visible !important;
background-color: var(--Scrollbar) !important;
border: none;
border-radius: 0;
margin: 0;
}
&::-webkit-scrollbar-thumb,
&::-webkit-scrollbar-button:single-button {
visibility: visible !important;
border-radius: 0 !important;
background: var(--ThreeDFace) !important;
box-shadow: var(--WindowFrame);
border: none !important;
}
&::-webkit-scrollbar-button:single-button:active {
box-shadow: inset 1px 1px var(--ThreeDShadow), inset -1px -1px var(--ThreeDShadow) !important;
}
&::-webkit-scrollbar-button:single-button:vertical:decrement {
background-repeat: no-repeat !important;
background-position: center center !important;
background-image: var(--ImageScrollbarUp) !important;
}
&::-webkit-scrollbar-button:single-button:vertical:increment {
background-repeat: no-repeat !important;
background-position: center center !important;
background-image: var(--ImageScrollbarDown) !important;
}
& > [class^="content_"] {
--channel-icon: var(--WindowText);
& > div[style="height: 84px;"],
& > div[style="height: 84px;"] + div[style="height: 12px;"],
& > div[style="height: 0px;"] + div[style="height: 12px;"],
& > [class^="sectionDivider"] + div[style="height: 12px;"] {
height: 0px !important;
}
[class^="container_"]:has(> [class^="progressBarContainer_"]) {
padding: 0;
margin: 3px 2px;
&::after {
left: 0;
height: 1px;
border-bottom: solid 1px var(--ThreeDHighlight);
background-color: var(--ThreeDShadow);
width: 100%;
}
& > [class^="textArea_"] {
margin: 0;
height: 16px;
& > [class^="goalTextContainer_"],
& > [class^="progressFraction_"] {
& > [data-text-variant] {
color: var(--WindowText) !important;
font-size: var(--FontSize);
}
}
& > [class^="progressFraction_"] > [class^="count_"] {
display: none;
}
}
& > [class^="progressBarContainer_"] {
margin: 0;
margin-bottom: 3px;
border-radius: 0;
border: 1px solid transparent;
border-top-color: var(--ThreeDShadow);
border-left-color: var(--ThreeDShadow);
border-bottom-color: var(--ThreeDHighlight);
border-right-color: var(--ThreeDHighlight);
background-color: var(--ThreeDFace);
height: 14px;
width: calc(100% - 2px);
& > [class^="progressBar_"] {
height: 100%;
border-radius: 0;
background-color: var(--Selection);
background-image: none;
mask: var(--ProgressBar);
mask-repeat: repeat-x;
}
& > [class^="tadaIcon_"] {
display: none;
}
}
}
[class^="sectionDivider_"] {
height: 1px;
border-top: solid 1px var(--ThreeDShadow);
background-color: var(--ThreeDHighlight);
margin: 3px 2px;
width: calc(100% - 4px);
&
+ [class^="containerDefault_"]:has(> [class*="clickable_"])
> [class^="iconVisibility_"]
> [class^="mainContent_"]::before {
height: 0 !important;
top: 10px;
}
}
[class^="containerDefault_"] {
margin-left: 0;
padding: 0;
[class^="iconVisibility_"] {
margin-left: 0;
padding: 0;
height: unset;
color: var(--WindowText);
& > [class^="unread_"] {
display: none;
}
&[class*="modeUnread"] [class^="name_"] {
font-weight: bold;
}
&[class*="modeSelected_"] {
[class^="link_"] {
background-color: transparent !important;
[class^="name_"] {
background-color: var(--Selection);
color: var(--SelectionText);
}
}
}
&[class*="modeMuted_"] {
[class^="link_"] {
background-color: transparent !important;
[class^="name_"] {
color: var(--ThreeDShadow);
text-shadow: 1px 1px 0 var(--ThreeDHighlight);
}
}
}
&:hover [class^="link_"] {
background-color: transparent !important;
}
}
[class^="link_"] {
padding: 0;
border-radius: 0;
[class^="linkTop_"] {
justify-content: flex-start;
& > [class^="children_"] {
flex-grow: 1;
align-items: flex-end;
justify-content: flex-end;
}
}
[class^="name_"] {
line-height: 16px;
font-size: var(--FontSize);
font-weight: normal;
letter-spacing: unset;
color: var(--WindowText);
flex-grow: 0;
}
[class^="iconContainer_"] {
margin-right: 3px;
& > [class^="icon_"] {
width: 16px;
height: 16px;
}
}
[class^="channelInfo_"] {
& > [class^="wrapper_"] {
border-radius: 0;
line-height: 16px;
height: 16px;
& > [class^="users_"] {
background-color: transparent;
color: var(--WindowText);
padding-right: 6px;
width: unset;
}
& > [class^="total_"] {
background-color: transparent;
color: var(--ThreeDHighlight);
padding: 0;
&::after {
content: "/";
border: none;
left: -4px;
}
}
}
}
[class^="newChannel_"] {
position: absolute;
right: 0;
font-size: 0;
background-color: transparent !important;
border-radius: 0;
width: 16px;
height: 16px;
top: 0px;
&::after {
content: "";
width: 16px;
height: 16px;
position: absolute;
right: 0;
background-image: var(--ImageNew);
background-size: 16px;
background-position: center;
background-repeat: no-repeat;
}
}
}
&:has(> [class*="clickable_"]) {
& > [class^="iconVisibility_"] > [class^="mainContent_"] {
&::before {
content: "";
height: 8px;
width: 8px;
border-left: 1px dotted;
border-bottom: 1px dotted;
border-color: var(--ThreeDHighlight);
position: absolute;
top: 1px;
left: 9px;
}
&::after {
content: "";
display: block;
position: absolute;
top: 5px;
left: 5px;
width: 7px;
height: 7px;
border: 1px solid;
border-color: var(--ThreeDHighlight);
background-color: var(--Window);
}
& > svg {
top: 6px;
left: 6px;
width: 7px;
height: 7px;
transform: none !important;
background-color: var(--WindowText);
mask-image: var(--ImageListMinus);
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-image: var(--ImageListMinus);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
z-index: 2;
& > path {
display: none;
}
}
& > [class^="name_"] {
margin-left: 38px;
line-height: 16px;
font-size: var(--FontSize);
font-weight: normal;
letter-spacing: unset;
color: var(--WindowText);
&::after {
content: "";
display: block;
width: 16px;
height: 16px;
position: absolute;
left: 19px;
top: 0;
background-image: var(--ImageFolderOpen16);
background-repeat: no-repeat;
background-position: center;
image-rendering: pixelated;
}
}
}
&
~ [class^="containerDefault_"]:has(> [class*="clickable_"])
> [class^="iconVisibility_"]
> [class^="mainContent_"]::before {
height: 14px;
top: -5px;
}
&
+ [class^="containerDefault_"]:has(> [class*="clickable_"])
> [class^="iconVisibility_"]
> [class^="mainContent_"]::before {
height: 10px;
top: -1px;
}
[class*="collapsed_"] {
& > [class^="mainContent_"] > svg {
mask-image: var(--ImageListPlus) !important;
-webkit-mask-image: var(--ImageListPlus) !important;
}
[class^="name_"]::after {
background-image: var(--ImageFolderClosed16) !important;
}
}
& ~ [class^="containerDefault_"]:not(:has(> [class*="clickable_"])) {
margin-left: 38px;
&::before {
content: "";
height: 14px;
width: 8px;
border-left: 1px dotted;
border-bottom: 1px dotted;
border-color: var(--ThreeDHighlight);
position: absolute;
top: -5px;
left: -10px;
}
&::after {
content: "";
height: 14px;
width: 0px;
border-left: 1px dotted;
border-bottom: 1px dotted;
border-color: var(--ThreeDHighlight);
position: absolute;
top: -5px;
left: -29px;
}
}
& + [class^="containerDefault_"]:not(:has(> [class*="clickable_"])) {
&::before {
top: 1px;
height: 8px;
}
&::after {
top: -1px;
height: 10px;
}
}
& ~ [class^="container_"] {
margin-left: 38px;
&::before {
content: "";
height: 100%;
width: 0px;
border-left: 1px dotted;
border-bottom: 1px dotted;
border-color: var(--ThreeDHighlight);
position: absolute;
top: -5px;
left: -10px;
}
&::after {
content: "";
height: 100%;
width: 0px;
border-left: 1px dotted;
border-bottom: 1px dotted;
border-color: var(--ThreeDHighlight);
position: absolute;
top: -5px;
left: -29px;
}
}
&:not(:has(~ [class^="containerDefault_"] > [class*="clickable_"])) {
& ~ [class^="containerDefault_"]:not(:has(> [class*="clickable_"])) {
&::after,
& > div:has(> [class*="typeVoice_"]) ~ [class^="list_"]::after,
& ~ [class^="container_"]::after {
display: none;
}
}
}
&:not(:has(~ [class^="containerDefault_"]:has(div:not([class*="clickable_"])))) {
& > div:has(> [class*="typeVoice_"]) ~ [class^="list_"]::before {
display: none;
}
}
}
& > div:has(> [class*="typeVoice_"]) ~ [class^="list_"] {
padding: 0;
margin-left: 19px;
&::before {
content: "";
width: 0px;
height: calc(100% - 16px);
border-left: 1px dotted;
border-bottom: 1px dotted;
border-color: var(--ThreeDHighlight);
position: absolute;
top: 9px;
left: -10px;
}
&::after {
content: "";
width: 0px;
height: calc(100% - 16px);
border-left: 1px dotted;
border-bottom: 1px dotted;
border-color: var(--ThreeDHighlight);
position: absolute;
top: 9px;
left: -29px;
}
& > [class^="draggable_"] {
height: unset;
overflow-x: visible;
&::before {
content: "";
height: 14px;
width: 8px;
border-left: 1px dotted;
border-bottom: 1px dotted;
border-color: var(--ThreeDHighlight);
position: absolute;
top: -5px;
left: -10px;
}
&:first-of-type::before {
top: 1px;
height: 8px;
}
& > [class^="voiceUser_"] {
height: unset;
& > [class^="content_"] {
margin: 0;
& > [class^="userAvatar_"] {
margin: 0;
margin-right: 3px;
width: 16px;
height: 16px;
}
& > [class^="usernameFont_"] {
font-size: var(--FontSize);
line-height: var(--FontSize);
}
}
}
}
}
}
[class^="container_"] {
[class^="spineBorder_"] {
display: none;
}
[class^="containerDefault_"] {
margin-left: 19px;
& > [class^="spine_"] {
display: none;
}
&::before {
content: "";
height: 14px;
width: 8px;
border-left: 1px dotted;
border-bottom: 1px dotted;
border-color: var(--ThreeDHighlight);
position: absolute;
top: -5px;
left: -10px;
}
&:first-of-type::before {
top: 1px;
height: 8px;
}
}
}
[class^="voiceUserSummary_"] {
height: 16px;
padding: 0;
margin-left: 38px;
position: relative;
&::before {
content: "";
height: 14px;
width: 8px;
border-left: 1px dotted;
border-bottom: 1px dotted;
border-color: var(--ThreeDHighlight);
position: absolute;
top: -5px;
left: -10px;
}
&::after {
content: "";
height: 14px;
width: 0px;
border-left: 1px dotted;
border-bottom: 1px dotted;
border-color: var(--ThreeDHighlight);
position: absolute;
top: -5px;
left: -29px;
}
& > [class^="container_"] {
& > svg {
margin-right: 3px;
width: 16px;
height: 16px;
}
& > [class^="avatarContainer_"],
& > [class^="avatarContainer_"] > [class^="clickableAvatar_"] {
width: 16px;
height: 16px;
}
}
}
}
}
}
}
.theme-light
[class^="base_"]
> [class^="content_"]
> [class^="sidebar_"]
> [class^="container_"]
> [class^="scroller_"]
> [class^="content_"]
[class^="containerDefault_"]
[class^="iconVisibility_"]
[class^="link_"]
[class^="channelInfo_"]
> [class^="wrapper_"]
> [class^="total_"] {
color: var(--ThreeDShadow) !important;
}
[id^="popout_"]:has(#guild-header-popout) {
top: 97px !important;
left: 58px !important;
width: 236px;
& > div {
transition: none;
transform: none;
}
#guild-header-popout {
width: 240px;
}
}
[class^="containerDefault_"] > [class^="iconVisibility_"] > [class^="mainContent_"] [class^="name_"],
[class^="membersGroup_"],
[class^="headerContent_"] > [class^="name_"] {
font-size: 16px;
text-transform: none !important;
font-weight: 600;
}
.theme-light {
[class^="base_"]
> [class^="content_"]
> [class^="sidebar_"]
> [class^="container_"]
> [class^="scroller_"]
> [class^="content_"]
[class^="containerDefault_"] {
&:has(> [class*="clickable_"]) {
& > [class^="iconVisibility_"] > [class^="mainContent_"] {
&::before,
&::after {
border-color: var(--ThreeDShadow) !important;
}
}
& ~ [class^="containerDefault_"]:not(:has(> [class*="clickable_"])) {
&::before,
&::after {
border-color: var(--ThreeDShadow) !important;
}
}
& ~ [class^="container_"] {
&::before,
&::after {
border-color: var(--ThreeDShadow) !important;
}
}
}
& > div:has(> [class*="typeVoice_"]) ~ [class^="list_"] {
&::before,
&::after,
& > [class^="draggable_"]::before {
border-color: var(--ThreeDShadow) !important;
}
}
}
[class^="container_"] [class^="containerDefault_"]::before {
border-color: var(--ThreeDShadow) !important;
}
}
[class^="flowerStarContainer_"] {
& > [class^="flowerStar_"] > path {
display: none;
}
& > [class^="childContainer_"] > svg {
width: 16px;
height: 16px;
}
}

469
src/w9x/guilds.scss Normal file
View file

@ -0,0 +1,469 @@
[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);
}
}
}
}

886
src/w9x/images.scss Normal file
View file

File diff suppressed because one or more lines are too long

688
src/w9x/toolbar.scss Normal file
View file

@ -0,0 +1,688 @@
[class*="baseLayer_"] > [class^="container_"] {
--ToolbarVerticalOffset: 0px;
padding-top: calc(76px + var(--ToolbarVerticalOffset));
background-color: var(--ThreeDFace);
&:has(> [class^="base_"] > [class^="notice_"]) {
--ToolbarVerticalOffset: 24px;
}
&::before {
content: "";
position: absolute;
height: 74px;
width: calc(100vw - var(--devtools-sidebar-width));
top: 0;
left: 0;
box-shadow: var(--RebarBorder), inset 0 24px 0 0 var(--ThreeDFace), inset 0 25px 0 0 var(--ThreeDShadow),
inset 0 26px 0 0 var(--ThreeDHighlight), inset 0 48px 0 0 var(--ThreeDFace), inset 0 49px 0 0 var(--ThreeDShadow),
inset 0 50px 0 0 var(--ThreeDHighlight);
background-color: var(--ThreeDFace);
}
& > [class^="base_"] {
overflow: visible;
& > [class^="notice_"] {
position: absolute;
left: -52px;
top: -24px;
height: 16px;
border-radius: 0;
width: 100vw;
padding: 3px;
justify-content: left;
font-size: 8pt;
& > [class*="guildIcon_"] {
width: 16px;
height: 16px;
margin-right: 3px;
}
& > [class^="closeButton_"] {
width: 16px;
height: 16px;
right: 10px;
top: 3px;
background-color: var(--WindowText);
mask-image: var(--ImageClose);
mask-repeat: no-repeat;
mask-position: center;
& > svg {
display: none;
}
}
& > button[class*="actionButton_"] {
border-radius: 0;
border: none;
font-size: 8pt;
padding: 0;
margin-left: 3px;
color: var(--WindowText);
transition: none;
&:hover {
background-color: var(--ThreeDFace);
color: var(--WindowText);
box-shadow: var(--OuterEdge) !important;
}
&:active {
background-color: var(--ThreeDFace);
box-shadow: var(--InnerEdge) !important;
}
}
}
}
}
html.platform-win {
[class*="baseLayer_"] > [class^="container_"]::before {
width: calc(100vw - 8px - var(--devtools-sidebar-width)) !important;
}
[class^="chat_"] > [class^="title_"] {
width: calc(100vw - 258px);
[class^="toolbar_"] > [class^="search_"] {
left: calc(100vw - 242px - 68px);
}
}
}
/*[class^="appAsidePanelWrapper_"]:has(#user-settings-cog)
section[class^="panels_"]
> [class^="container_"]:last-child
> div
> button:nth-child(3) {
box-shadow: var(--PressedEdge);
}*/
section[class^="panels_"] > [class^="container_"]:last-child {
position: absolute;
top: calc(-50px - var(--ToolbarVerticalOffset));
left: -50px;
height: 22px;
background-color: transparent;
z-index: 20;
padding: 0;
& > [class*="withTagAsButton_"] {
z-index: 20;
position: absolute;
top: -23px;
left: 0px;
padding: 6px;
height: 7px;
margin: 0;
border-radius: 0;
background-color: transparent;
width: unset;
min-width: unset;
&:hover {
box-shadow: var(--HoverEdge);
}
&[aria-expanded="true"] {
box-shadow: var(--PressedEdge);
}
&::after {
color: var(--WindowText);
font-family: var(--font-primary);
font-size: var(--FontSize);
content: "Account";
position: relative;
top: var(--ToolbarAccountTextOffset);
}
& > * {
display: none;
}
}
& > div {
& > button:nth-child(3) {
z-index: 20;
position: absolute;
top: -23px;
left: var(--ToolbarAccountWidth);
padding: 6px;
height: 19px !important;
margin: 0 !important;
border-radius: 0;
background-color: transparent;
width: unset !important;
min-width: unset !important;
min-height: unset !important;
color: unset;
cursor: default;
box-shadow: none;
&:hover {
box-shadow: var(--HoverEdge);
}
&::after {
color: var(--WindowText);
font-family: var(--font-primary);
font-size: var(--FontSize);
content: "Settings";
}
& > * {
display: none;
}
}
& > button:not(:nth-child(3)) {
width: 24px !important;
height: 22px !important;
min-width: unset !important;
min-height: unset !important;
box-shadow: none;
border-radius: 0;
margin: 0 !important;
&:hover {
box-shadow: var(--HoverEdge);
background-color: transparent;
}
& > [class^="contents"] {
width: 24px;
height: 22px;
& > [class^="lottieIcon_"] {
width: 16px !important;
height: 16px !important;
padding: 3px 4px;
}
}
}
}
&::after {
content: "";
position: absolute;
right: 0px;
top: 0;
width: 1px;
height: 18px;
margin: 2px 3px;
background-color: var(--ThreeDShadow);
border-right: solid 1px var(--ThreeDHighlight);
}
}
a[href="https://support.discord.com"]:has(> [class^="iconWrapper_"])
{
z-index: 20;
position: absolute;
top: -23px;
left: calc(-56px + var(--ToolbarAccountWidth) + var(--ToolbarSettingsWidth));
padding: 6px !important;
height: 19px !important;
margin: 0;
border-radius: 0;
background-color: transparent;
width: unset !important;
min-width: unset;
color: unset;
cursor: default;
line-height: unset;
&:hover {
box-shadow: var(--HoverEdge);
}
&[aria-expanded="true"] {
box-shadow: var(--PressedEdge);
}
&::after {
color: var(--WindowText);
font-family: var(--font-primary);
font-size: var(--FontSize);
content: "Help";
position: relative;
top: var(--ToolbarHelpTextOffset);
}
& > * {
display: none;
}
}
[class^="iconWrapper_"] {
&:has(
> svg
> g
> path[d="M17.5053 1.76605C17.5053 1.76605 26.7154 8.05195 23.2155 16.8783C19.7157 25.7047 12.7544 23.2563 15.3562 20.6775C17.9581 18.0986 12.2862 16.3487 8.65588 13.0024L17.4976 1.76605"]
),
&:has(
> svg
> path[d="M9.54 3.28a3 3 0 0 0-.37.74c-.19.52.28.98.83.98h4c.55 0 1.02-.46.83-.98a2.96 2.96 0 0 0-.37-.74c.23-.16.56-.28.99-.28a1 1 0 1 0 0-2c-1 0-2.01.4-2.68 1.1a3 3 0 0 0-1.54 0A3.76 3.76 0 0 0 8.55 1a1 1 0 0 0 0 2c.43 0 .76.12 1 .28ZM18.01 18.85c-.04.1-.03.22.05.3l1.51 1.5a1 1 0 0 1-1.41 1.42l-1.18-1.18a.26.26 0 0 0-.37 0 6.7 6.7 0 0 1-2.8 1.82c-.42.14-.83-.2-.86-.64l-.42-8.57a.53.53 0 0 0-1.05 0l-.43 8.57c-.03.45-.44.78-.87.64A6.7 6.7 0 0 1 7.4 20.9a.26.26 0 0 0-.37-.01l-1.18 1.18a1 1 0 0 1-1.41-1.41l1.51-1.51c.08-.08.1-.2.05-.3-.47-.94-.78-2-.92-3.12a.25.25 0 0 0-.25-.23H3a1 1 0 1 1 0-2h1.82c.13 0 .24-.1.25-.23.14-1.13.45-2.18.92-3.12a.25.25 0 0 0-.05-.3l-1.51-1.5a1 1 0 1 1 1.41-1.42L7.02 8.1c.1.1.27.1.37 0a6.66 6.66 0 0 1 2.95-1.87c.38-.11.75.14.85.52l.57 2.27c.06.25.42.25.48 0l.57-2.27c.1-.38.47-.63.85-.52 1.1.33 2.11.98 2.95 1.86.1.1.26.11.37.01l1.18-1.18a1 1 0 1 1 1.41 1.41l-1.51 1.51c-.08.08-.1.2-.05.3.47.94.78 2 .92 3.12.01.13.12.23.25.23H21a1 1 0 1 1 0 2h-1.82c-.13 0-.24.1-.25.23a9.68 9.68 0 0 1-.92 3.12Z"]
) {
z-index: 20;
position: absolute;
top: -23px;
left: calc(-56px + var(--ToolbarAccountWidth) + var(--ToolbarSettingsWidth));
padding: 6px !important;
height: 19px !important;
margin: 0;
border-radius: 0;
background-color: transparent;
width: unset !important;
min-width: unset;
color: unset;
cursor: default;
line-height: unset;
&:hover {
box-shadow: var(--HoverEdge);
}
&[aria-expanded="true"] {
box-shadow: var(--PressedEdge);
}
&::after {
color: var(--WindowText);
font-family: var(--font-primary);
font-size: var(--FontSize);
content: "Help";
position: relative;
top: var(--ToolbarHelpTextOffset);
}
& > * {
display: none;
}
}
&:has(> svg > path[class^="downloadArrow_"]),
&:has(> svg > path[class^="updateIconForeground_"]) {
z-index: 20;
position: absolute;
top: -23px;
left: calc(-56px + var(--ToolbarAccountWidth) + var(--ToolbarSettingsWidth) + var(--ToolbarHelpWidth));
padding: 6px !important;
height: 19px !important;
margin: 0;
border-radius: 0;
background-color: transparent;
width: unset !important;
min-width: unset;
color: unset;
cursor: default;
line-height: unset;
&:hover {
box-shadow: var(--HoverEdge);
}
&[aria-expanded="true"] {
box-shadow: var(--PressedEdge);
}
&::after {
color: var(--WindowText);
font-family: var(--font-primary);
font-size: var(--FontSize);
content: "Update";
position: relative;
top: var(--ToolbarUpdateTextOffset);
}
& > * {
display: none;
}
}
& > svg:has(> foreignObject[mask="url(#svg-mask-header-bar-badge)"]) + [class^="iconBadge_"] {
border-radius: 0;
background-color: transparent;
background-image: var(--ImageRedDot);
background-position: center;
background-repeat: no-repeat;
background-size: 8px;
image-rendering: pixelated;
}
}
/*html:not(.app-focused) {
section[class^="panels_"] > [class^="container_"]:last-child {
& > [class*="withTagAsButton_"]::after,
&
> div
> button:has(
> div
> svg
> path[d="M19.738 10H22V14H19.739C19.498 14.931 19.1 15.798 18.565 16.564L20 18L18 20L16.565 18.564C15.797 19.099 14.932 19.498 14 19.738V22H10V19.738C9.069 19.498 8.203 19.099 7.436 18.564L6 20L4 18L5.436 16.564C4.901 15.799 4.502 14.932 4.262 14H2V10H4.262C4.502 9.068 4.9 8.202 5.436 7.436L4 6L6 4L7.436 5.436C8.202 4.9 9.068 4.502 10 4.262V2H14V4.261C14.932 4.502 15.797 4.9 16.565 5.435L18 3.999L20 5.999L18.564 7.436C19.099 8.202 19.498 9.069 19.738 10ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z"]
)::after,
&
> div
> button:has(
> div
> svg
> path[d="M10.56 1.1c-.46.05-.7.53-.64.98.18 1.16-.19 2.2-.98 2.53-.8.33-1.79-.15-2.49-1.1-.27-.36-.78-.52-1.14-.24-.77.59-1.45 1.27-2.04 2.04-.28.36-.12.87.24 1.14.96.7 1.43 1.7 1.1 2.49-.33.8-1.37 1.16-2.53.98-.45-.07-.93.18-.99.64a11.1 11.1 0 0 0 0 2.88c.06.46.54.7.99.64 1.16-.18 2.2.19 2.53.98.33.8-.14 1.79-1.1 2.49-.36.27-.52.78-.24 1.14.59.77 1.27 1.45 2.04 2.04.36.28.87.12 1.14-.24.7-.95 1.7-1.43 2.49-1.1.8.33 1.16 1.37.98 2.53-.07.45.18.93.64.99a11.1 11.1 0 0 0 2.88 0c.46-.06.7-.54.64-.99-.18-1.16.19-2.2.98-2.53.8-.33 1.79.14 2.49 1.1.27.36.78.52 1.14.24.77-.59 1.45-1.27 2.04-2.04.28-.36.12-.87-.24-1.14-.96-.7-1.43-1.7-1.1-2.49.33-.8 1.37-1.16 2.53-.98.45.07.93-.18.99-.64a11.1 11.1 0 0 0 0-2.88c-.06-.46-.54-.7-.99-.64-1.16.18-2.2-.19-2.53-.98-.33-.8.14-1.79 1.1-2.49.36-.27.52-.78.24-1.14a11.07 11.07 0 0 0-2.04-2.04c-.36-.28-.87-.12-1.14.24-.7.96-1.7 1.43-2.49 1.1-.8-.33-1.16-1.37-.98-2.53.07-.45-.18-.93-.64-.99a11.1 11.1 0 0 0-2.88 0ZM16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"]
)::after {
color: var(--ThreeDShadow) !important;
}
}
[class^="iconWrapper_"] {
&:has(
> svg
> g
> path[d="M17.5053 1.76605C17.5053 1.76605 26.7154 8.05195 23.2155 16.8783C19.7157 25.7047 12.7544 23.2563 15.3562 20.6775C17.9581 18.0986 12.2862 16.3487 8.65588 13.0024L17.4976 1.76605"]
)::after,
&:has(
> svg
> path[d="M9.54 3.28a3 3 0 0 0-.37.74c-.19.52.28.98.83.98h4c.55 0 1.02-.46.83-.98a2.96 2.96 0 0 0-.37-.74c.23-.16.56-.28.99-.28a1 1 0 1 0 0-2c-1 0-2.01.4-2.68 1.1a3 3 0 0 0-1.54 0A3.76 3.76 0 0 0 8.55 1a1 1 0 0 0 0 2c.43 0 .76.12 1 .28ZM18.01 18.85c-.04.1-.03.22.05.3l1.51 1.5a1 1 0 0 1-1.41 1.42l-1.18-1.18a.26.26 0 0 0-.37 0 6.7 6.7 0 0 1-2.8 1.82c-.42.14-.83-.2-.86-.64l-.42-8.57a.53.53 0 0 0-1.05 0l-.43 8.57c-.03.45-.44.78-.87.64A6.7 6.7 0 0 1 7.4 20.9a.26.26 0 0 0-.37-.01l-1.18 1.18a1 1 0 0 1-1.41-1.41l1.51-1.51c.08-.08.1-.2.05-.3-.47-.94-.78-2-.92-3.12a.25.25 0 0 0-.25-.23H3a1 1 0 1 1 0-2h1.82c.13 0 .24-.1.25-.23.14-1.13.45-2.18.92-3.12a.25.25 0 0 0-.05-.3l-1.51-1.5a1 1 0 1 1 1.41-1.42L7.02 8.1c.1.1.27.1.37 0a6.66 6.66 0 0 1 2.95-1.87c.38-.11.75.14.85.52l.57 2.27c.06.25.42.25.48 0l.57-2.27c.1-.38.47-.63.85-.52 1.1.33 2.11.98 2.95 1.86.1.1.26.11.37.01l1.18-1.18a1 1 0 1 1 1.41 1.41l-1.51 1.51c-.08.08-.1.2-.05.3.47.94.78 2 .92 3.12.01.13.12.23.25.23H21a1 1 0 1 1 0 2h-1.82c-.13 0-.24.1-.25.23a9.68 9.68 0 0 1-.92 3.12Z"]
)::after,
&:has(> svg > path[class^="downloadArrow_"])::after,
&:has(> svg > path[class^="updateIconForeground_"])::after {
color: var(--ThreeDShadow) !important;
}
}
a[href="https://support.discord.com"]:has(> [class^="iconWrapper_"])::after
{
color: var(--ThreeDShadow) !important;
}
}*/
[class^="chat_"],
[class^="sidebar_"] + main[class^="container_"],
[class^="sidebar_"] + main[class^="pageWrapper_"] {
overflow: visible;
}
[id^="popout_"] {
&:has([class^="accountProfilePopoutWrapper_"]) {
top: 20px !important;
}
&:has(> #staff-help-popout) {
right: unset !important;
left: calc(var(--ToolbarAccountWidth) + var(--ToolbarSettingsWidth) + 2px) !important;
top: 22px !important;
}
&:has([class^="messagesPopoutWrap_"]) {
left: calc((20px * 5) + 8px);
top: 48px !important;
}
&:has([class*="recentMentionsPopout_"]) {
left: calc((20px * 8) + 18px);
top: 48px !important;
}
&:has([class^="browser_"]) {
left: calc((20px * 2) + 18px);
top: 48px !important;
}
&:has(> [class^="menu_"][id="thread-context"]) {
left: calc((20px * 7) + 14px);
top: 48px !important;
}
}
[class^="layerContainer_"] > [class*="layer_"]:has(> [class^="menu_"][id="user-settings-cog"]) {
left: calc(var(--ToolbarAccountWidth) + 2px) !important;
top: 22px !important;
}
[class^="accountProfilePopoutWrapper_"] {
left: unset;
[class^="userPopoutOuter_"] {
padding: 0 !important;
border-radius: 0;
width: unset;
[class^="userPopoutInner_"] {
border-radius: 0;
&::before,
& > [class^="bannerSVGWrapper_"],
& > [class*="avatarWrapper_"],
& > [class^="profileBadges_"] {
display: none;
}
& > [class^="userPopoutOverlayBackground_"] {
border-radius: 0;
margin: 0;
& > [class^="section_"],
& > [class^="divider_"],
& > [class^="scroller_"] {
display: none;
}
}
}
}
}
[class^="chat_"] > [class^="subtitleContainer_"] > [class^="title_"] {
height: 22px;
min-height: 22px;
padding: 0;
position: absolute;
top: calc(-26px - var(--ToolbarVerticalOffset));
left: -298px;
background-color: transparent;
width: calc(100vw - 250px);
[class^="children_"] {
height: 22px;
& > [class^="iconWrapper_"]:has(+ [class^="hiddenVisually_"]) {
display: none;
}
[class^="titleWrapper_"] {
margin: 0 4px;
& > :is(h1, h2) {
font-size: var(--FontSize);
font-weight: normal;
}
}
[class*="channelName_"] {
margin-left: 3px;
padding: 0;
& > [class^="container_"] > [class^="input_"] {
font-size: var(--FontSize);
font-weight: normal;
height: 22px;
line-height: 22px;
border-radius: 0;
padding: 0;
}
}
& > div > [class*="avatar_"] {
width: 22px !important;
height: 22px !important;
margin: 0;
padding: 1px;
& > svg {
width: 20px;
height: 20px;
&:has(> rect) {
width: 24px;
height: 24px;
}
}
}
[class^="divider_"] {
display: none;
}
[class^="topic_"] {
height: 22px;
margin: 0;
padding: 2px;
background-color: var(--Window);
box-shadow: var(--InnerEdge);
& > span:first-of-type {
margin-left: 4px;
}
span {
color: var(--WindowText);
font-size: var(--FontSize);
line-height: var(--FontSize);
}
}
&::after {
display: none;
}
}
[class^="toolbar_"] {
height: 22px;
position: absolute;
left: 56px;
top: -24px;
[class*="iconWrapper_"] {
margin: 0;
width: 24px;
height: 22px;
border-radius: 0;
&:hover {
box-shadow: var(--HoverEdge);
background-color: transparent;
}
&[class*="selected_"] {
box-shadow: var(--PressedEdge) !important;
&:not(:active):not(:hover)::before {
content: "";
display: block;
position: absolute;
width: 20px;
height: 18px;
top: 2px;
left: 2px;
z-index: -1;
background-color: var(--ThreeDHighlight);
mask-image: var(--ImageDither);
mask-repeat: repeat;
}
}
& > svg {
height: 22px;
padding: 3px 4px;
}
}
& > [class^="search_"] {
position: absolute;
left: calc(100vw - 242px - 60px);
top: 24px;
margin: 0;
& > [class^="search_"] > [class^="searchBar_"] {
height: 22px;
width: 242px;
border-radius: 0;
background-color: var(--Window);
box-shadow: var(--InnerEdge);
.public-DraftEditorPlaceholder-inner {
color: var(--WindowText);
font-size: var(--FontSize);
}
& > [class^="icon_"] {
width: 20px;
height: 22px;
& > [class^="iconContainer_"] {
background-image: var(--ImageSearch);
background-repeat: no-repeat;
background-position: center;
image-rendering: pixelated;
& > svg {
display: none;
}
}
}
}
}
}
}
[class^="base_"] > [class^="content_"] > main[class^="container_"] > section[class*="container_"] {
height: 22px;
min-height: 22px;
padding: 0;
position: absolute;
top: -26px;
left: -50px;
background-color: transparent;
width: calc(100vw - 250px);
[class^="children_"] {
height: 22px;
& > [class^="iconWrapper_"]:has(+ [class^="titleWrapper_"]) {
display: none;
}
[class^="titleWrapper_"] {
margin: 0 4px;
& > h1 {
font-size: var(--FontSize);
font-weight: normal;
}
}
[class^="divider_"] {
display: none;
}
&::after {
display: none;
}
}
[class^="toolbar_"] {
height: 22px;
position: absolute;
left: 56px;
top: -24px;
[class*="iconWrapper_"] {
margin: 0;
width: 24px;
height: 22px;
border-radius: 0;
&:hover {
box-shadow: var(--HoverEdge);
background-color: transparent;
}
&[class*="selected_"] {
box-shadow: var(--PressedEdge);
}
& > svg {
height: 22px;
padding: 3px 4px;
}
}
[class^="divider_"] {
display: none;
}
}
}

1002
src/winclassic.scss
View file

File diff suppressed because it is too large Load diff