diff --git a/src/ripcord.scss b/src/ripcord.scss index 60a06d3..a512f27 100644 --- a/src/ripcord.scss +++ b/src/ripcord.scss @@ -59,11 +59,13 @@ padding-right: 0 !important; & > [class^="buttonContainer_"] { top: 16px; + margin-right: 0; } } & > [class^="buttonContainer_"] { top: 0; + margin-right: 52px; & > [class^="buttons_"] { padding: 0; @@ -72,11 +74,26 @@ & > [class^="buttonsInner_"] { height: 13px; border-radius: 0; + box-shadow: none; + border: none; + background: transparent; + transition: none; + padding: 0; - & > [class^="button_"] { + & > [class*="button_"] { padding: 0; height: 13px; min-width: 13px; + + .emoji { + width: 13px; + height: 13px; + } + } + + & > [class^="separator_"] { + height: 13px; + margin: 0 2px; } } } diff --git a/src/w9x/guilds.scss b/src/w9x/guilds.scss index 20efeea..0d7852c 100644 --- a/src/w9x/guilds.scss +++ b/src/w9x/guilds.scss @@ -1,7 +1,7 @@ .overlay [class^="widget_"] > [class^="base_"] > nav[class^="wrapper_"], [class*="guilds_"] { background-color: var(--Window) !important; - /*box-shadow: var(--RebarBorder);*/ + box-shadow: var(--RebarBorder); width: 48px; padding: 2px; @@ -455,14 +455,14 @@ } &:hover::after { - /*box-shadow: inset 0 1px var(--ThreeDShadow), inset -1px -1px 0 0 var(--ThreeDShadow), - inset 1px 2px 0 0 var(--ThreeDHighlight);*/ - box-shadow: inset 0 1px #282828, inset -1px -1px 0 0 #282828, inset 1px 2px 0 0 #282828; + box-shadow: inset 0 1px var(--ThreeDShadow), inset -1px -1px 0 0 var(--ThreeDShadow), + inset 1px 2px 0 0 var(--ThreeDHighlight); + /*box-shadow: inset 0 1px #282828, inset -1px -1px 0 0 #282828, inset 1px 2px 0 0 #282828;*/ } &: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);*/ - box-shadow: inset 0 1px #3a3a3a, inset -1px -1px 0 0 #3a3a3a, inset 1px 2px 0 0 #3a3a3a; + box-shadow: inset 0 1px var(--ThreeDShadow), inset -1px -1px 0 0 var(--ThreeDHighlight), + inset 1px 2px 0 0 var(--ThreeDShadow); + /*box-shadow: inset 0 1px #3a3a3a, inset -1px -1px 0 0 #3a3a3a, inset 1px 2px 0 0 #3a3a3a;*/ } } } diff --git a/src/winclassic.scss b/src/winclassic.scss index 685618c..848eca0 100644 --- a/src/winclassic.scss +++ b/src/winclassic.scss @@ -6,7 +6,7 @@ @use "w9x/toolbar" as w9xtoolbar; /*@use "w9x/channel_list" as w9xchannels;*/ -/*.theme-dark { +.theme-dark { --ThreeDLightShadow: #1a1a1a; --ThreeDHighlight: #383838; --ThreeDFace: #1a1a1a; @@ -43,7 +43,7 @@ --TitlebarOffset: 3px; /* 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; --ToolbarSettingsWidth: 51px; --ToolbarHelpWidth: 33px; @@ -51,9 +51,9 @@ --ToolbarAccountTextOffset: 1px; --ToolbarHelpTextOffset: -8px; --ToolbarUpdateTextOffset: -8px; -}*/ +} -.theme-dark { +/*.theme-dark { --ThreeDLightShadow: #1a1a1a; --ThreeDHighlight: #3e3e3e; --ThreeDFace: #202020; @@ -73,7 +73,7 @@ --Tooltip: #1a1a1a; --TooltipText: #dedbeb; --Scrollbar: #383838; - /*--WindowFrame: inset -1px -1px 0 0 #121212, inset 1px 1px 0 0 #121212;*/ + /*--WindowFrame: inset -1px -1px 0 0 #121212, inset 1px 1px 0 0 #121212;*/ /* --WindowFrame: inset -1px -1px 0 0 var(--ThreeDDarkShadow), inset 1px 1px 0 0 var(--ThreeDLightShadow), inset -2px -2px 0 0 var(--ThreeDShadow), inset 2px 2px 0 0 var(--ThreeDHighlight); --OuterEdge: inset -1px -1px 0 0 var(--ThreeDDarkShadow), inset 1px 1px 0 0 var(--ThreeDHighlight), @@ -92,7 +92,7 @@ --interactive-normal: #979797 !important; /* 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; --ToolbarSettingsWidth: 51px; --ToolbarHelpWidth: 33px; @@ -100,7 +100,7 @@ --ToolbarAccountTextOffset: 1px; --ToolbarHelpTextOffset: -8px; --ToolbarUpdateTextOffset: -8px; -} +}*/ .theme-light { --ImageScrollbarUp: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAlSURBVDhPYxgFQwD8h9JkAZBmGCYZIGsm2RBsmmF4FAxCwMAAAOXFD/HsWbUtAAAAAElFTkSuQmCCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); @@ -125,14 +125,14 @@ [class^="chat_"] > [class^="content_"] [class^="membersWrap_"] { padding: 2px; - /*box-shadow: var(--InnerEdge);*/ + box-shadow: var(--InnerEdge); height: calc(100% - 4px); max-height: calc(100% - 4px); background-color: var(--Window); } [class^="messagesWrapper_"] { padding: 2px; - /*box-shadow: var(--InnerEdge);*/ + box-shadow: var(--InnerEdge); background-color: var(--Window); [class^="scroller_"] { @@ -172,7 +172,7 @@ } [class^="chatContent_"] > form { background-color: var(--Window) !important; - padding-bottom: 4px !important; + /*padding-bottom: 4px !important;*/ } [class^="standardSidebarView_"] > [class^="sidebarRegion_"] > [class^="sidebarRegionScroller_"], @@ -289,7 +289,7 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) margin: -4px; } -*:not([class*="menu_"]):not([class*="inGame_"]) > [class^="scroller_"]:not([class*="none_"]), +/**: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; @@ -315,64 +315,54 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) 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 { - min-width: 16px; - width: 16px; - visibility: visible !important; -} - -*:not([class*="menu_"]):not([class*="inGame_"]) > [class^="scroller_"]::-webkit-scrollbar-track, -*:not([class*="menu_"]):not([class*="inGame_"]) > [class*="scrollerBase_"]::-webkit-scrollbar-track { - background-color: #{colors.$c8}; - border: none; - border-radius: 0; - margin: 0; - visibility: visible !important; -} -*:not([class*="menu_"]):not([class*="inGame_"]) > [class^="scroller_"]::-webkit-scrollbar-thumb, -*:not([class*="menu_"]):not([class*="inGame_"]) > [class*="scrollerBase_"]::-webkit-scrollbar-thumb, -*:not([class*="menu_"]):not([class*="inGame_"]) > [class^="scroller_"]::-webkit-scrollbar-button:single-button, -*:not([class*="menu_"]):not([class*="inGame_"]) > [class*="scrollerBase_"]::-webkit-scrollbar-button:single-button { - border-radius: 0 !important; - background: #{colors.$primary} !important; - box-shadow: var(--WindowFrame); - border: none !important; - visibility: visible !important; -} - -*:not([class*="menu_"]):not([class*="inGame_"]) > [class^="scroller_"]::-webkit-scrollbar-button:single-button:active, -*:not([class*="menu_"]):not([class*="inGame_"]) - > [class*="scrollerBase_"]::-webkit-scrollbar-button:single-button:active { - box-shadow: inset 1px 1px #{colors.$secondary}, inset -1px -1px #{colors.$secondary}; -} -*:not([class*="menu_"]):not([class*="inGame_"]) - > [class^="scroller_"]::-webkit-scrollbar-button:single-button:vertical:decrement, -*:not([class*="menu_"]):not([class*="inGame_"]) - > [class*="scrollerBase_"]::-webkit-scrollbar-button:single-button:vertical:decrement { - background-repeat: no-repeat !important; - background-image: var(--ImageScrollbarUp) !important; - background-position: center center !important; -} -*:not([class*="menu_"]):not([class*="inGame_"]) - > [class^="scroller_"]::-webkit-scrollbar-button:single-button:vertical:increment, -*:not([class*="menu_"]):not([class*="inGame_"]) - > [class*="scrollerBase_"]::-webkit-scrollbar-button:single-button:vertical:increment { - background-repeat: no-repeat !important; - background-image: var(--ImageScrollbarDown) !important; - background-position: center center !important; -} - -*:not([class*="menu_"]):not([class*="inGame_"]) - > [class^="scroller_"]::-webkit-scrollbar-button:single-button:vertical:decrement, -*:not([class*="menu_"]):not([class*="inGame_"]) - > [class*="scrollerBase_"]::-webkit-scrollbar-button:single-button:vertical:decrement { - border-width: 0 8px 8px 8px; - border-color: transparent transparent var(--text) transparent; }*/ +*: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: #{colors.$c8}; + border: none; + border-radius: 0; + margin: 0; + visibility: visible !important; + } + + &::-webkit-scrollbar-thumb, + &::-webkit-scrollbar-button:single-button { + border-radius: 0 !important; + background: #{colors.$primary} !important; + box-shadow: var(--WindowFrame); + border: none !important; + visibility: visible !important; + } + + &::-webkit-scrollbar-button:single-button:active { + box-shadow: inset 1px 1px #{colors.$secondary}, inset -1px -1px #{colors.$secondary}; + } + + &::-webkit-scrollbar-button:single-button:vertical:decrement { + background-repeat: no-repeat !important; + background-image: var(--ImageScrollbarUp) !important; + background-position: center center !important; + } + &::-webkit-scrollbar-button:single-button:vertical:increment { + background-repeat: no-repeat !important; + background-image: var(--ImageScrollbarDown) !important; + background-position: center center !important; + } + + &::-webkit-scrollbar-button:single-button:vertical:decrement { + border-width: 0 8px 8px 8px; + border-color: transparent transparent var(--text) transparent; + } +} + .postnet-expanded-category, .postnet-repo-wrapper, [class^="inner_"]:has(> input), @@ -553,12 +543,12 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) section[class^="panels_"] { background-color: var(--Window) !important; padding-top: 2px; - /*box-shadow: var(--RebarTop);*/ + box-shadow: var(--RebarTop); & > [class^="wrapper_"] > [class^="container_"] { background-color: var(--Window) !important; border-bottom: none; - /*box-shadow: var(--RebarBottom);*/ + box-shadow: var(--RebarBottom); } & > [class^="panel_"]:has(> [class^="body_"] > [class^="gameWrapper_"]) { @@ -570,7 +560,7 @@ section[class^="panels_"] { & > [class^="panel_"]:has(> [class^="body_"] > [class^="gameWrapper_"]) > [class^="body_"] { background-color: var(--Window) !important; border-bottom: none; - /*box-shadow: var(--RebarBottom);*/ + box-shadow: var(--RebarBottom); padding: 2px 4px; [class^="gameWrapper_"] { @@ -623,7 +613,7 @@ section[class^="panels_"] { padding: 4px; padding-bottom: 6px; margin: 0 !important; - /*box-shadow: var(--RebarBottom);*/ + box-shadow: var(--RebarBottom); background-color: var(--Window); } } @@ -664,7 +654,7 @@ section[class^="panels_"] { border-radius: 0 !important; border-left: 4px solid var(--Window); padding: 2px; - /*box-shadow: var(--RebarBorder);*/ + box-shadow: var(--RebarBorder); & > [class^="container_"] { background: var(--Window) !important; @@ -736,16 +726,16 @@ section[class^="panels_"] { padding: 0; margin: 3px 2px; - /*&::after { + &::after { left: 0; height: 1px; border-bottom: solid 1px var(--ThreeDHighlight); background-color: var(--ThreeDShadow); width: 100%; - }*/ - &::after { - display: none; } + /*&::after { + display: none; + }*/ & > [class^="textArea_"] { margin: 0 2px; @@ -768,39 +758,39 @@ section[class^="panels_"] { margin: 0; margin-bottom: 3px; border-radius: 0; - /*border: 1px solid transparent; + 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);*/ - height: 8px; - width: 100%; + width: calc(100% - 2px); + /*height: 8px; + width: 100%;*/ - background-color: #3c3c3c; + /*background-color: #3c3c3c; background-image: none; mask: var(--ProgressBar); - mask-repeat: repeat-x; + mask-repeat: repeat-x;*/ - /*& > [class^="progressBar_"] { + & > [class^="progressBar_"] { height: 100%; border-radius: 0; background-color: var(--Selection); background-image: none; mask: var(--ProgressBar); mask-repeat: repeat-x; - }*/ + } - & > [class^="progressBar_"] { + /*& > [class^="progressBar_"] { height: 100%; border-radius: 0; background-color: #f7f7f7; background-image: none; mask: var(--ProgressBar); mask-repeat: repeat-x; - } + }*/ & > [class^="tadaIcon_"] { display: none; @@ -864,7 +854,7 @@ section[class^="panels_"] { } } -[class^="base_"] > [class^="content_"] > [class^="sidebar_"] > [class^="container_"], +/*[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_"] { @@ -889,7 +879,7 @@ section[class^="panels_"] { } } } -} +}*/ [class^="members_"] { overflow: hidden auto !important;