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

new system theme amalgamation

Browse source
This commit is contained in:
Cynthia Foxwell 2024-07-19 00:43:39 -06:00
parent b33a327e1b
commit 6a9464e039
6 changed files with 205 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/channel_list.scss
View file

@ -3,6 +3,10 @@
[class^="base_"] > [class^="content_"] > [class^="sidebar_"] { [class^="base_"] > [class^="content_"] > [class^="sidebar_"] {
border-radius: 0; border-radius: 0;
& > [class^="container_"] > [class^="scroller_"] {
overflow-y: auto !important;
}
} }
[class^="base_"] [class^="base_"]

10
src/ripcord.scss
View file

@ -576,7 +576,11 @@
} }
} }
[class^="chat_"] [class^="messagesWrapper_"] [class^="scroller_"] [class^="scrollerContent_"] { [class^="chat_"] [class^="messagesWrapper_"] {
padding: 0 !important; border-bottom: 1px solid colors.$c0;
padding-bottom: 3px !important;
[class^="scroller_"] [class^="scrollerContent_"] {
padding: 0 !important;
padding-bottom: 3px !important;
}
} }

1
src/w9x/channel_list.scss
View file

@ -72,6 +72,7 @@
& > [class^="scroller_"] { & > [class^="scroller_"] {
scrollbar-width: unset !important; scrollbar-width: unset !important;
scrollbar-color: unset !important; scrollbar-color: unset !important;
overflow-y: auto !important;
&::-webkit-scrollbar { &::-webkit-scrollbar {
min-width: 16px; min-width: 16px;

4
src/w9x/guilds.scss
View file

@ -1,7 +1,7 @@
.overlay [class^="widget_"] > [class^="base_"] > nav[class^="wrapper_"], .overlay [class^="widget_"] > [class^="base_"] > nav[class^="wrapper_"],
[class*="guilds_"] { [class*="guilds_"] {
background-color: var(--ThreeDFace) !important; background-color: var(--Window) !important;
box-shadow: var(--RebarBorder); /*box-shadow: var(--RebarBorder);*/
width: 48px; width: 48px;
padding: 2px; padding: 2px;

50
src/w9x/toolbar.scss
View file

@ -1,7 +1,7 @@
[class*="baseLayer_"] > [class^="container_"] { [class*="baseLayer_"] > [class^="container_"] {
--ToolbarVerticalOffset: 0px; --ToolbarVerticalOffset: 0px;
padding-top: calc(76px + var(--ToolbarVerticalOffset)); padding-top: calc(76px + var(--ToolbarVerticalOffset));
background-color: var(--ThreeDFace); background-color: var(--Window);
&:has(> [class^="base_"] > [class^="notice_"]) { &:has(> [class^="base_"] > [class^="notice_"]) {
--ToolbarVerticalOffset: 24px; --ToolbarVerticalOffset: 24px;
@ -14,10 +14,10 @@
width: calc(100vw - var(--devtools-sidebar-width)); width: calc(100vw - var(--devtools-sidebar-width));
top: 0; top: 0;
left: 0; left: 0;
box-shadow: var(--RebarBorder), inset 0 24px 0 0 var(--ThreeDFace), inset 0 25px 0 0 var(--ThreeDShadow), /*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 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); inset 0 50px 0 0 var(--ThreeDHighlight);*/
background-color: var(--ThreeDFace); background-color: var(--Window);
} }
& > [class^="base_"] { & > [class^="base_"] {
@ -124,6 +124,7 @@ section[class^="panels_"] > [class^="container_"]:last-child {
&:hover { &:hover {
box-shadow: var(--HoverEdge); box-shadow: var(--HoverEdge);
background-color: var(--ThreeDFace);
} }
&[aria-expanded="true"] { &[aria-expanded="true"] {
box-shadow: var(--PressedEdge); box-shadow: var(--PressedEdge);
@ -153,7 +154,6 @@ section[class^="panels_"] > [class^="container_"]:last-child {
height: 19px !important; height: 19px !important;
margin: 0 !important; margin: 0 !important;
border-radius: 0; border-radius: 0;
background-color: transparent;
width: unset !important; width: unset !important;
min-width: unset !important; min-width: unset !important;
min-height: unset !important; min-height: unset !important;
@ -163,6 +163,7 @@ section[class^="panels_"] > [class^="container_"]:last-child {
&:hover { &:hover {
box-shadow: var(--HoverEdge); box-shadow: var(--HoverEdge);
background-color: var(--ThreeDFace);
} }
&::after { &::after {
@ -188,7 +189,7 @@ section[class^="panels_"] > [class^="container_"]:last-child {
&:hover { &:hover {
box-shadow: var(--HoverEdge); box-shadow: var(--HoverEdge);
background-color: transparent; background-color: var(--ThreeDFace);
} }
& > [class^="contents"] { & > [class^="contents"] {
@ -235,6 +236,7 @@ a[href="https://support.discord.com"]:has(> [class^="iconWrapper_"])
&:hover { &:hover {
box-shadow: var(--HoverEdge); box-shadow: var(--HoverEdge);
background-color: var(--ThreeDFace);
} }
&[aria-expanded="true"] { &[aria-expanded="true"] {
box-shadow: var(--PressedEdge); box-shadow: var(--PressedEdge);
@ -281,6 +283,7 @@ a[href="https://support.discord.com"]:has(> [class^="iconWrapper_"])
&:hover { &:hover {
box-shadow: var(--HoverEdge); box-shadow: var(--HoverEdge);
background-color: var(--ThreeDFace);
} }
&[aria-expanded="true"] { &[aria-expanded="true"] {
box-shadow: var(--PressedEdge); box-shadow: var(--PressedEdge);
@ -318,6 +321,7 @@ a[href="https://support.discord.com"]:has(> [class^="iconWrapper_"])
&:hover { &:hover {
box-shadow: var(--HoverEdge); box-shadow: var(--HoverEdge);
background-color: var(--ThreeDFace);
} }
&[aria-expanded="true"] { &[aria-expanded="true"] {
box-shadow: var(--PressedEdge); box-shadow: var(--PressedEdge);
@ -465,6 +469,7 @@ html:not(.overlay) [id^="popout_"] {
& > [class^="body_"] { & > [class^="body_"] {
padding: 0; padding: 0;
overflow: hidden !important;
& > :not([class^="menus_"]) { & > :not([class^="menus_"]) {
display: none; display: none;
@ -475,15 +480,21 @@ html:not(.overlay) [id^="popout_"] {
padding: 2px; padding: 2px;
box-shadow: var(--WindowFrame) !important; box-shadow: var(--WindowFrame) !important;
& > [class^="menu_"] { & > [class*="menuOverlay_"] {
padding: 0 !important; border: none;
box-shadow: none !important; border-radius: 0;
& > [class^="scroller_"] { & > [class^="menu_"] {
padding-bottom: 0 !important; padding: 0 !important;
box-shadow: none !important;
& > [class^="separator"] { & > [class^="scroller_"] {
display: none; margin-right: 0 !important;
padding-bottom: 0 !important;
& > [class^="separator"] {
display: none;
}
} }
} }
} }
@ -520,6 +531,7 @@ html:not(.overlay) [id^="popout_"] {
& > :is(h1, h2) { & > :is(h1, h2) {
font-size: var(--FontSize); font-size: var(--FontSize);
font-weight: normal; font-weight: normal;
color: var(--WindowText);
} }
} }
@ -562,7 +574,7 @@ html:not(.overlay) [id^="popout_"] {
height: 22px; height: 22px;
margin: 0; margin: 0;
padding: 2px; padding: 2px;
background-color: var(--Window); background-color: var(--ThreeDFace);
box-shadow: var(--InnerEdge); box-shadow: var(--InnerEdge);
& > span:first-of-type { & > span:first-of-type {
@ -594,10 +606,11 @@ html:not(.overlay) [id^="popout_"] {
&:hover { &:hover {
box-shadow: var(--HoverEdge); box-shadow: var(--HoverEdge);
background-color: transparent; background-color: var(--ThreeDFace);
} }
&[class*="selected_"] { &[class*="selected_"] {
box-shadow: var(--PressedEdge) !important; box-shadow: var(--PressedEdge) !important;
background-color: var(--ThreeDPressed);
&:not(:active):not(:hover)::before { &:not(:active):not(:hover)::before {
content: ""; content: "";
@ -631,7 +644,7 @@ html:not(.overlay) [id^="popout_"] {
height: 22px; height: 22px;
width: 242px; width: 242px;
border-radius: 0; border-radius: 0;
background-color: var(--Window); background-color: var(--ThreeDFace);
box-shadow: var(--InnerEdge); box-shadow: var(--InnerEdge);
.public-DraftEditorPlaceholder-inner { .public-DraftEditorPlaceholder-inner {
@ -698,6 +711,7 @@ html:not(.overlay) [id^="popout_"] {
& > h1 { & > h1 {
font-size: var(--FontSize); font-size: var(--FontSize);
font-weight: normal; font-weight: normal;
color: var(--WindowText);
} }
} }
@ -717,7 +731,7 @@ html:not(.overlay) [id^="popout_"] {
&:hover { &:hover {
box-shadow: var(--HoverEdge); box-shadow: var(--HoverEdge);
background-color: transparent; background-color: var(--ThreeDFace);
} }
&[class*="selected_"] { &[class*="selected_"] {
box-shadow: var(--PressedEdge) !important; box-shadow: var(--PressedEdge) !important;
@ -768,7 +782,7 @@ html:not(.overlay) [id^="popout_"] {
&:hover { &:hover {
box-shadow: var(--HoverEdge); box-shadow: var(--HoverEdge);
background-color: transparent; background-color: var(--ThreeDFace);
} }
&[class*="selected_"] { &[class*="selected_"] {
box-shadow: var(--PressedEdge); box-shadow: var(--PressedEdge);

192
src/winclassic.scss
View file

@ -6,7 +6,7 @@
@use "w9x/toolbar" as w9xtoolbar; @use "w9x/toolbar" as w9xtoolbar;
/*@use "w9x/channel_list" as w9xchannels;*/ /*@use "w9x/channel_list" as w9xchannels;*/
.theme-dark { /*.theme-dark {
--ThreeDLightShadow: #1a1a1a; --ThreeDLightShadow: #1a1a1a;
--ThreeDHighlight: #383838; --ThreeDHighlight: #383838;
--ThreeDFace: #1a1a1a; --ThreeDFace: #1a1a1a;
@ -42,6 +42,53 @@
--FontSize: 8pt; --FontSize: 8pt;
--TitlebarOffset: 3px; --TitlebarOffset: 3px;
/* Toolbar offsets, these need to be hardcoded as theres no way to get another element's width in CSS */
/* Padding included */ /*
--ToolbarAccountWidth: 51px;
--ToolbarSettingsWidth: 51px;
--ToolbarHelpWidth: 33px;
--ToolbarAccountTextOffset: 1px;
--ToolbarHelpTextOffset: -8px;
--ToolbarUpdateTextOffset: -8px;
}*/
.theme-dark {
--ThreeDLightShadow: #1a1a1a;
--ThreeDHighlight: #3e3e3e;
--ThreeDFace: #202020;
--ThreeDShadow: #121212;
--ThreeDDarkShadow: #141414;
--ThreeDPressed: #282828;
--Window: #171717;
--WindowText: #979797;
--ActiveTitleStart: #287373;
--ActiveTitleEnd: #53a6a6;
--ActiveTitleText: #edebf7;
--InactiveTitleStart: #171717;
--InactiveTitleEnd: #171717;
--InactiveTitleText: #383838;
--Selection: #808080;
--SelectionText: #f7f7f7;
--Tooltip: #1a1a1a;
--TooltipText: #dedbeb;
--Scrollbar: #383838;
--WindowFrame: inset -1px -1px 0 0 #121212, inset 1px 1px 0 0 #121212;
--OuterEdge: inset -1px -1px 0 0 var(--ThreeDDarkShadow), inset 1px 1px 0 0 var(--ThreeDHighlight),
inset -2px -2px 0 0 var(--ThreeDShadow), inset 2px 2px 0 0 var(--ThreeDLightShadow);
--InnerEdge: inset -1px -1px 0 0 #3c3c3c, inset 1px 1px 0 0 #3c3c3c;
--RebarBorder: inset 0 -1px 0 0 var(--ThreeDHighlight), inset 0 -2px 0 0 var(--ThreeDShadow);
--RebarBottom: inset 0 -1px 0 0 var(--ThreeDHighlight), inset 0 -2px 0 0 var(--ThreeDShadow);
--RebarTop: inset 0 1px 0 0 var(--ThreeDShadow), inset 0 2px 0 0 var(--ThreeDHighlight);
--HoverEdge: inset -1px -1px 0 0 #282828, inset 1px 1px 0 0 #282828;
--PressedEdge: inset -1px -1px 0 0 #3a3a3a, inset 1px 1px 0 0 #3a3a3a;
--ProgressBar: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 14"><rect x="1" y="1" height="12" width="8" fill="black"></rect></svg>');
--FontSize: 8pt;
--TitlebarOffset: 3px;
--interactive-normal: #979797 !important;
/* Toolbar offsets, these need to be hardcoded as theres no way to get another element's width in CSS */ /* Toolbar offsets, these need to be hardcoded as theres no way to get another element's width in CSS */
/* Padding included */ /* Padding included */
--ToolbarAccountWidth: 51px; --ToolbarAccountWidth: 51px;
@ -76,14 +123,14 @@
[class^="chat_"] > [class^="content_"] [class^="membersWrap_"] { [class^="chat_"] > [class^="content_"] [class^="membersWrap_"] {
padding: 2px; padding: 2px;
box-shadow: var(--InnerEdge); /*box-shadow: var(--InnerEdge);*/
height: calc(100% - 4px); height: calc(100% - 4px);
max-height: calc(100% - 4px); max-height: calc(100% - 4px);
background-color: var(--Window); background-color: var(--Window);
} }
[class^="messagesWrapper_"] { [class^="messagesWrapper_"] {
padding: 2px; padding: 2px;
box-shadow: var(--InnerEdge); /*box-shadow: var(--InnerEdge);*/
background-color: var(--Window); background-color: var(--Window);
[class^="scroller_"] { [class^="scroller_"] {
@ -98,6 +145,9 @@
} }
} }
} }
[class^="chat_"] > [class^="content_"] {
background-color: var(--Window);
}
[class^="chat_"] > [class^="content_"] > [class^="container_"], [class^="chat_"] > [class^="content_"] > [class^="container_"],
[class^="chat_"] > [class^="content_"] > [class^="chatContent_"], [class^="chat_"] > [class^="content_"] > [class^="chatContent_"],
[class^="standardSidebarView_"] > [class^="contentRegion_"] { [class^="standardSidebarView_"] > [class^="contentRegion_"] {
@ -108,16 +158,19 @@
box-shadow: var(--InnerEdge); box-shadow: var(--InnerEdge);
border-radius: 0; border-radius: 0;
background-color: var(--ThreeDFace); background-color: var(--ThreeDFace);
}
[class^="channelTextArea_"] > [class^="scrollableContainer_"] {
min-height: 42px !important; min-height: 42px !important;
&::-webkit-scrollbar-thumb {
background-color: transparent;
}
} }
[class^="chat_"] > [class^="content_"]:before { [class^="chat_"] > [class^="content_"]:before {
display: none !important; display: none !important;
} }
[class^="chatContent_"] > form { [class^="chatContent_"] > form {
background-color: transparent !important; background-color: var(--Window) !important;
padding-bottom: 4px !important;
} }
[class^="standardSidebarView_"] > [class^="sidebarRegion_"] > [class^="sidebarRegionScroller_"], [class^="standardSidebarView_"] > [class^="sidebarRegion_"] > [class^="sidebarRegionScroller_"],
@ -183,19 +236,50 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"]))
border: none !important; border: none !important;
padding: 2px; padding: 2px;
box-shadow: var(--WindowFrame) !important; box-shadow: var(--WindowFrame) !important;
} overflow: hidden auto !important;
[class*="menu_"] > [class^="scroller_"] {
padding: 1px 1px 4px 1px !important; & > [class^="scroller_"] {
margin-right: -4px; padding: 1px !important;
} padding-bottom: 4px !important;
[class*="menu_"] > [class^="scroller_"] [class^="item_"] { margin-right: -8px;
border-radius: 0 !important;
margin: 1px 0; [class^="item_"] {
padding: 0 2px !important; border-radius: 0 !important;
} margin: 1px 0;
[class*="menu_"] > [class^="scroller_"] [class^="customItem_"][id^="message-quickreact_"] > [class^="button_"] { padding: 0 2px !important;
border-radius: 0 !important;
box-shadow: var(--OuterEdge); &:active,
&[class*="focused_"] {
background-color: var(--Selection) !important;
color: var(--SelectionText) !important;
}
&[aria-haspopup="true"] > [class^="iconContainer_"]:before,
&[role="menuitemcheckbox"][aria-checked="true"] > [class^="iconContainer_"]:before,
&[role="menuitemradio"][aria-checked="true"] > [class^="iconContainer_"]:before {
background-color: var(--WindowText) !important;
}
& > [class^="label_"] > [class^="roleRow_"] > [class^="roleCircle_"] {
border-top: 1px solid var(--WindowText) !important;
border-left: 1px solid var(--WindowText) !important;
}
}
[class^="customItem_"][id^="message-quickreact_"] > [class^="button_"] {
border-radius: 0 !important;
box-shadow: var(--OuterEdge);
}
[class^="separator_"] {
margin: 4px 1px;
border-top: 1px solid var(--ThreeDShadow);
border-bottom: 1px solid var(--ThreeDHighlight);
}
& > div[aria-hidden="true"] {
visibility: none;
display: none;
}
}
} }
[class^="submenuPaddingContainer_"] { [class^="submenuPaddingContainer_"] {
@ -203,7 +287,35 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"]))
margin: -4px; margin: -4px;
} }
*:not([class*="menu_"]):not([class*="inGame_"]) > [class^="scroller_"]:not([class*="none_"])::-webkit-scrollbar, *:not([class*="menu_"]):not([class*="inGame_"]) > [class^="scroller_"]:not([class*="none_"]),
*:not([class*="menu_"]):not([class*="inGame_"]) > [class*="scrollerBase_"]:not([class*="none_"]) {
&::-webkit-scrollbar {
min-width: 16px;
width: 16px;
visibility: visible !important;
}
&::-webkit-scrollbar-track {
background-color: #171717;
border: none;
border-radius: 0;
margin: 0;
}
&::-webkit-scrollbar-thumb,
&::-webkit-scrollbar-button:single-button {
border-radius: 0 !important;
background: #2d2d2d !important;
border: 2px solid #171717 !important;
visibility: visible !important;
&:hover {
background: #979797 !important;
}
}
}
/**:not([class*="menu_"]):not([class*="inGame_"]) > [class^="scroller_"]:not([class*="none_"])::-webkit-scrollbar,
*:not([class*="menu_"]):not([class*="inGame_"]) > [class*="scrollerBase_"]:not([class*="none_"])::-webkit-scrollbar { *:not([class*="menu_"]):not([class*="inGame_"]) > [class*="scrollerBase_"]:not([class*="none_"])::-webkit-scrollbar {
min-width: 16px; min-width: 16px;
width: 16px; width: 16px;
@ -257,7 +369,7 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"]))
> [class*="scrollerBase_"]::-webkit-scrollbar-button:single-button:vertical:decrement { > [class*="scrollerBase_"]::-webkit-scrollbar-button:single-button:vertical:decrement {
border-width: 0 8px 8px 8px; border-width: 0 8px 8px 8px;
border-color: transparent transparent var(--text) transparent; border-color: transparent transparent var(--text) transparent;
} }*/
.postnet-expanded-category, .postnet-expanded-category,
.postnet-repo-wrapper, .postnet-repo-wrapper,
@ -437,14 +549,14 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"]))
} }
section[class^="panels_"] { section[class^="panels_"] {
background-color: var(--ThreeDFace) !important; background-color: var(--Window) !important;
padding-top: 2px; padding-top: 2px;
box-shadow: var(--RebarTop); /*box-shadow: var(--RebarTop);*/
& > [class^="wrapper_"] > [class^="container_"] { & > [class^="wrapper_"] > [class^="container_"] {
background-color: var(--ThreeDFace) !important; background-color: var(--Window) !important;
border-bottom: none; border-bottom: none;
box-shadow: var(--RebarBottom); /*box-shadow: var(--RebarBottom);*/
} }
& > [class^="panel_"]:has(> [class^="body_"] > [class^="gameWrapper_"]) { & > [class^="panel_"]:has(> [class^="body_"] > [class^="gameWrapper_"]) {
@ -454,9 +566,9 @@ section[class^="panels_"] {
& > [class*="activityPanel_"], & > [class*="activityPanel_"],
& > [class^="panel_"]:has(> [class^="body_"] > [class^="gameWrapper_"]) > [class^="body_"] { & > [class^="panel_"]:has(> [class^="body_"] > [class^="gameWrapper_"]) > [class^="body_"] {
background-color: var(--ThreeDFace) !important; background-color: var(--Window) !important;
border-bottom: none; border-bottom: none;
box-shadow: var(--RebarBottom); /*box-shadow: var(--RebarBottom);*/
padding: 2px 4px; padding: 2px 4px;
[class^="gameWrapper_"] { [class^="gameWrapper_"] {
@ -509,8 +621,8 @@ section[class^="panels_"] {
padding: 4px; padding: 4px;
padding-bottom: 6px; padding-bottom: 6px;
margin: 0 !important; margin: 0 !important;
box-shadow: var(--RebarBottom); /*box-shadow: var(--RebarBottom);*/
background-color: var(--ThreeDFace); background-color: var(--Window);
} }
} }
@ -538,7 +650,7 @@ section[class^="panels_"] {
} }
[class^="sidebar_"] { [class^="sidebar_"] {
border-left: 4px solid var(--ThreeDFace); border-left: 4px solid var(--Window);
} }
/*[class^="sidebar_"] > nav > [class^="scroller_"] { /*[class^="sidebar_"] > nav > [class^="scroller_"] {
@ -548,15 +660,15 @@ section[class^="panels_"] {
[class^="base_"] > [class^="content_"] > [class^="sidebar_"] { [class^="base_"] > [class^="content_"] > [class^="sidebar_"] {
border-radius: 0 !important; border-radius: 0 !important;
border-left: 4px solid var(--ThreeDFace); border-left: 4px solid var(--Window);
padding: 2px; padding: 2px;
box-shadow: var(--RebarBorder); /*box-shadow: var(--RebarBorder);*/
& > [class^="container_"] { & > [class^="container_"] {
background: var(--Window) !important; background: var(--Window) !important;
& > [class^="container_"][class*="clickable_"] { & > [class^="container_"][class*="clickable_"] {
background: var(--ThreeDFace) !important; background: var(--Window) !important;
& > header[class^="header_"] { & > header[class^="header_"] {
padding: 0px; padding: 0px;
padding-bottom: 2px; padding-bottom: 2px;
@ -730,3 +842,17 @@ section[class^="panels_"] {
width: 240px; width: 240px;
} }
} }
[class^="base_"] > [class^="content_"] > [class^="sidebar_"] > [class^="container_"],
.overlay [class^="widget_"] > [class^="base_"] > [class^="sidebar_"] > [class^="children_"] > [class^="channelList_"] {
& > [class^="scroller_"] > [class^="content_"] {
[class^="containerDefault_"] [class^="iconVisibility_"][class*="modeSelected_"] [class^="link_"] {
background-color: var(--Selection) !important;
--channel-icon: var(var(--SelectionText)) !important;
[class^="name_"] {
color: var(var(--SelectionText)) !important;
}
}
}
}