pxvmc/src/w9x/toolbar.scss

689 lines
18 KiB
SCSS

[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;
}
}
}