From b5d69848487a6d6fc967b2afca94a7297a8481f7 Mon Sep 17 00:00:00 2001 From: Cynthia Date: Mon, 21 Nov 2022 21:20:50 -0700 Subject: [PATCH] fix css var stuff --- xmc.user.css | 386 ++++++++++++--------------------------------------- 1 file changed, 92 insertions(+), 294 deletions(-) diff --git a/xmc.user.css b/xmc.user.css index 156cb88..97dd952 100644 --- a/xmc.user.css +++ b/xmc.user.css @@ -1707,9 +1707,11 @@ html.platform-win:not(.app-focused) [class*="winButton-"] { > svg > svg[class^="cursorDefault-"] > svg[class^="dots-"], -[class^="autocompleteRow"] [class*="content-"] > [class^="wrapper-"] > svg, +[class^="autocompleteRowIcon-"] + > [class^="wrapper-"] + > svg, [class^="userInfo-"] [class^="avatar-"] > svg, -[class^="panels-"] [class^="avatar-"] > svg, +[class^="panels-"] [class*="avatar-"] > svg > svg, [class^="modal-"] > [class^="inner-"] [class^="avatar-"] > svg, [class^="focusLock-"][aria-modal="true"] > [class^="root-"] @@ -1814,122 +1816,37 @@ html.platform-win:not(.app-focused) [class*="winButton-"] { [class^="avatar-"] [class*="wrapper-"] > svg - rect[fill="#43b581"], + > svg[class^="cursorDefault-"] + > rect[fill^="var(--status-"] { + mask: none !important; + x: -18.5; + y: -17; + width: 4px; + height: 32px; +} + +[class^="panels-"] + [class*="avatar-"] + > svg + > svg + > rect[fill^="var(--status-"] { + mask: none !important; + x: 17.5; + y: -17; + width: 4px; + height: 32px; +} + [class^="member-"] [class^="avatar-"] [class*="wrapper-"] > svg - rect[fill="#faa61a"], -[class^="member-"] - [class^="avatar-"] - [class*="wrapper-"] - > svg - rect[fill="#f04747"], -[class^="member-"] - [class^="avatar-"] - [class*="wrapper-"] - > svg - rect[fill="#747f8d"], -[class^="member-"] - [class^="avatar-"] - [class*="wrapper-"] - > svg - rect[fill="#593695"], -[class^="member-"] - [class^="avatar-"] - [class*="wrapper-"] - > svg - rect[fill="#3ba55c"], -[class^="member-"] - [class^="avatar-"] - [class*="wrapper-"] - > svg - rect[fill="#ed4245"], -[class^="member-"] - [class^="avatar-"] - [class*="wrapper-"] - > svg - rect[fill="hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%)"], -[class^="member-"] - [class^="avatar-"] - [class*="wrapper-"] - > svg - rect[fill="hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%)"], -[class^="member-"] - [class^="avatar-"] - [class*="wrapper-"] - > svg - rect[fill="hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%)"], -[class^="member-"] - [class^="avatar-"] - [class*="wrapper-"] - > svg - rect[fill="hsl(214, calc(var(--saturation-factor, 1) * 9.9%), 50.4%)"], -[class^="member-"] - [class^="avatar-"] - [class*="wrapper-"] - > svg - rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"], + rect[mask^="url(#svg-mask-status-"], [class^="channel-"] [class^="avatar-"] [class*="wrapper-"] > svg - rect[fill="#43b581"], -[class^="channel-"] - [class^="avatar-"] - [class*="wrapper-"] - > svg - rect[fill="#faa61a"], -[class^="channel-"] - [class^="avatar-"] - [class*="wrapper-"] - > svg - rect[fill="#f04747"], -[class^="channel-"] - [class^="avatar-"] - [class*="wrapper-"] - > svg - rect[fill="#747f8d"], -[class^="channel-"] - [class^="avatar-"] - [class*="wrapper-"] - > svg - rect[fill="#593695"], -[class^="channel-"] - [class^="avatar-"] - [class*="wrapper-"] - > svg - rect[fill="#3ba55c"], -[class^="channel-"] - [class^="avatar-"] - [class*="wrapper-"] - > svg - rect[fill="#ed4245"], -[class^="channel-"] - [class^="avatar-"] - [class*="wrapper-"] - > svg - rect[fill="hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%)"], -[class^="channel-"] - [class^="avatar-"] - [class*="wrapper-"] - > svg - rect[fill="hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%)"], -[class^="channel-"] - [class^="avatar-"] - [class*="wrapper-"] - > svg - rect[fill="hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%)"], -[class^="channel-"] - [class^="avatar-"] - [class*="wrapper-"] - > svg - rect[fill="hsl(214, calc(var(--saturation-factor, 1) * 9.9%), 50.4%)"], -[class^="channel-"] - [class^="avatar-"] - [class*="wrapper-"] - > svg - rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"] { + rect[mask^="url(#svg-mask-status-"] { mask: none !important; width: 4px; height: 32px; @@ -1937,66 +1854,10 @@ html.platform-win:not(.app-focused) [class*="winButton-"] { y: 0; } -[class^="autocompleteRow"] - [class*="content-"] +[class^="autocompleteRowIcon-"] > [class^="wrapper-"] > svg - rect[fill="#43b581"], -[class^="autocompleteRow"] - [class*="content-"] - > [class^="wrapper-"] - > svg - rect[fill="#faa61a"], -[class^="autocompleteRow"] - [class*="content-"] - > [class^="wrapper-"] - > svg - rect[fill="#f04747"], -[class^="autocompleteRow"] - [class*="content-"] - > [class^="wrapper-"] - > svg - rect[fill="#747f8d"], -[class^="autocompleteRow"] - [class*="content-"] - > [class^="wrapper-"] - > svg - rect[fill="#593695"], -[class^="autocompleteRow"] - [class*="content-"] - > [class^="wrapper-"] - > svg - rect[fill="#3ba55c"], -[class^="autocompleteRow"] - [class*="content-"] - > [class^="wrapper-"] - > svg - rect[fill="#ed4245"], -[class^="autocompleteRow"] - [class*="content-"] - > [class^="wrapper-"] - > svg - rect[fill="hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%)"], -[class^="autocompleteRow"] - [class*="content-"] - > [class^="wrapper-"] - > svg - rect[fill="hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%)"], -[class^="autocompleteRow"] - [class*="content-"] - > [class^="wrapper-"] - > svg - rect[fill="hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%)"], -[class^="autocompleteRow"] - [class*="content-"] - > [class^="wrapper-"] - > svg - rect[fill="hsl(214, calc(var(--saturation-factor, 1) * 9.9%), 50.4%)"], -[class^="autocompleteRow"] - [class*="content-"] - > [class^="wrapper-"] - > svg - rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"] { + rect[mask^="url(#svg-mask-status-"] { mask: none !important; width: 4px; height: 24px; @@ -2004,58 +1865,7 @@ html.platform-win:not(.app-focused) [class*="winButton-"] { y: 0; } -[class^="panels-"] [class*="avatar-"] > svg rect[fill="#43b581"], -[class^="panels-"] [class*="avatar-"] > svg rect[fill="#faa61a"], -[class^="panels-"] [class*="avatar-"] > svg rect[fill="#f04747"], -[class^="panels-"] [class*="avatar-"] > svg rect[fill="#747f8d"], -[class^="panels-"] [class*="avatar-"] > svg rect[fill="#593695"], -[class^="panels-"] - [class^="avatar-"] - > svg - rect[fill="hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%)"], -[class^="panels-"] - [class^="avatar-"] - > svg - rect[fill="hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%)"], -[class^="panels-"] - [class^="avatar-"] - > svg - rect[fill="hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%)"], -[class^="panels-"] - [class^="avatar-"] - > svg - rect[fill="hsl(214, calc(var(--saturation-factor, 1) * 9.9%), 50.4%)"], -[class^="panels-"] - [class^="avatar-"] - > svg - rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"], -[class^="userInfo-"] [class^="avatar-"] > svg rect[fill="#43b581"], -[class^="userInfo-"] [class^="avatar-"] > svg rect[fill="#faa61a"], -[class^="userInfo-"] [class^="avatar-"] > svg rect[fill="#f04747"], -[class^="userInfo-"] [class^="avatar-"] > svg rect[fill="#747f8d"], -[class^="userInfo-"] [class^="avatar-"] > svg rect[fill="#593695"], -[class^="userInfo-"] [class^="avatar-"] > svg rect[fill="#3ba55c"], -[class^="userInfo-"] [class^="avatar-"] > svg rect[fill="#ed4245"], -[class^="userInfo-"] - [class^="avatar-"] - > svg - rect[fill="hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%)"], -[class^="userInfo-"] - [class^="avatar-"] - > svg - rect[fill="hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%)"], -[class^="userInfo-"] - [class^="avatar-"] - > svg - rect[fill="hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%)"], -[class^="userInfo-"] - [class^="avatar-"] - > svg - rect[fill="hsl(214, calc(var(--saturation-factor, 1) * 9.9%), 50.4%)"], -[class^="userInfo-"] - [class^="avatar-"] - > svg - rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"] { +[class^="userInfo-"] [class^="avatar-"] > svg rect[mask^="url(#svg-mask-status-"] { mask: none !important; width: 4px; height: 32px; @@ -2063,36 +1873,7 @@ html.platform-win:not(.app-focused) [class*="winButton-"] { y: 0; } -[class^="focusLock-"][aria-modal="true"] - > [class^="root-"] - [class^="avatar-"] - > svg - rect[fill="hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%)"], -[class^="focusLock-"][aria-modal="true"] - > [class^="root-"] - [class^="avatar-"] - > svg - rect[fill="hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%)"], -[class^="focusLock-"][aria-modal="true"] - > [class^="root-"] - [class^="avatar-"] - > svg - rect[fill="hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%)"], -[class^="focusLock-"][aria-modal="true"] - > [class^="root-"] - [class^="avatar-"] - > svg - rect[fill="hsl(214, calc(var(--saturation-factor, 1) * 9.9%), 50.4%)"], -[class^="focusLock-"][aria-modal="true"] - > [class^="root-"] - [class^="avatar-"] - > svg - rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"], -[class^="userProfileModalInner-"] [class^="header-"] [class^="wrapper-"] > svg rect[fill="hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%)"], -[class^="userProfileModalInner-"] [class^="header-"] [class^="wrapper-"] > svg rect[fill="hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%)"], -[class^="userProfileModalInner-"] [class^="header-"] [class^="wrapper-"] > svg rect[fill="hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%)"], -[class^="userProfileModalInner-"] [class^="header-"] [class^="wrapper-"] > svg rect[fill="hsl(214, calc(var(--saturation-factor, 1) * 9.9%), 50.4%)"], -[class^="userProfileModalInner-"] [class^="header-"] [class^="wrapper-"] > svg rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"] { +[class^="userProfileModalInner-"] [class^="header-"] [class*="avatar-"] > svg rect[mask^="url(#svg-mask-status-"] { mask: none !important; width: 8px; height: 120px; @@ -2101,55 +1882,17 @@ html.platform-win:not(.app-focused) [class*="winButton-"] { } [class^="userPopoutInner-"] [class^="avatarHoverTarget-"] > [class^="wrapper-"] > svg circle, -[class^="userProfileModalInner-"] [class^="header-"] [class^="wrapper-"] > svg circle { +[class^="userPopoutInner-"] [class^="avatarHoverTarget-"] > [class^="wrapper-"] > svg > rect[fill="black"], +[class^="userProfileModalInner-"] [class^="header-"] [class^="wrapper-"] > svg circle, +[class^="userProfileModalInner-"] [class^="header-"] [class^="wrapper-"] > svg > rect[fill="black"] { display: none; } [class^="accountProfileCard-"] - [class^="avatar-"] + [class*="avatar-"] > svg - rect[fill="hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%)"], -[class^="accountProfileCard-"] - [class^="avatar-"] - > svg - rect[fill="hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%)"], -[class^="accountProfileCard-"] - [class^="avatar-"] - > svg - rect[fill="hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%)"], -[class^="accountProfileCard-"] - [class^="avatar-"] - > svg - rect[fill="hsl(214, calc(var(--saturation-factor, 1) * 9.9%), 50.4%)"], -[class^="accountProfileCard-"] - [class^="avatar-"] - > svg - rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"], -[class^="userPopout-"] - [class^="avatar-"] - > svg - rect[fill="hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%)"], -[class^="userPopout-"] - [class^="avatar-"] - > svg - rect[fill="hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%)"], -[class^="userPopout-"] - [class^="avatar-"] - > svg - rect[fill="hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%)"], -[class^="userPopout-"] - [class^="avatar-"] - > svg - rect[fill="hsl(214, calc(var(--saturation-factor, 1) * 9.9%), 50.4%)"], -[class^="userPopout-"] - [class^="avatar-"] - > svg - rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"], -[class^="userPopoutInner-"] [class^="avatarHoverTarget-"] > [class^="wrapper-"] > svg rect[fill="hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%)"], -[class^="userPopoutInner-"] [class^="avatarHoverTarget-"] > [class^="wrapper-"] > svg rect[fill="hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%)"], -[class^="userPopoutInner-"] [class^="avatarHoverTarget-"] > [class^="wrapper-"] > svg rect[fill="hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%)"], -[class^="userPopoutInner-"] [class^="avatarHoverTarget-"] > [class^="wrapper-"] > svg rect[fill="hsl(214, calc(var(--saturation-factor, 1) * 9.9%), 50.4%)"], -[class^="userPopoutInner-"] [class^="avatarHoverTarget-"] > [class^="wrapper-"] > svg rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"] { + rect[mask^="url(#svg-mask-status-"], +[class^="userPopoutInner-"] [class^="avatarHoverTarget-"] > [class^="wrapper-"] > svg rect[mask^="url(#svg-mask-status-"] { mask: none !important; width: 8px; height: 80px; @@ -3018,11 +2761,66 @@ strong { --text-warning: var(--_color3); --status-warning: var(--_color3); --status-warning-background: var(--_color3); + --status-green-600: var(--status-online) !important; + --status-yellow-500: var(--status-idle) !important; + --status-red-500: var(--status-dnd) !important; + --status-grey-500: var(--status-offline) !important; + --twitch: var(--status-streaming) !important; } [data-popout-root], html { --brand-experiment: var(--accent) !important; + --brand-100: var(--accent) !important; + --brand-130: var(--accent) !important; + --brand-160: var(--accent) !important; + --brand-200: var(--accent) !important; + --brand-230: var(--accent) !important; + --brand-260: var(--accent) !important; + --brand-300: var(--accent) !important; + --brand-330: var(--accent) !important; + --brand-360: var(--accent) !important; + --brand-400: var(--accent) !important; + --brand-430: var(--accent) !important; + --brand-460: var(--accent) !important; + --brand-500: var(--accent) !important; + --brand-530: var(--accent) !important; + --brand-560: var(--accent) !important; + --brand-600: var(--accent) !important; + --brand-630: var(--accent) !important; + --brand-660: var(--accent) !important; + --brand-700: var(--accent) !important; + --brand-730: var(--accent) !important; + --brand-760: var(--accent) !important; + --brand-800: var(--accent) !important; + --brand-830: var(--accent) !important; + --brand-860: var(--accent) !important; + --brand-900: var(--accent) !important; + --brand-new-100: var(--accent) !important; + --brand-new-130: var(--accent) !important; + --brand-new-160: var(--accent) !important; + --brand-new-200: var(--accent) !important; + --brand-new-230: var(--accent) !important; + --brand-new-260: var(--accent) !important; + --brand-new-300: var(--accent) !important; + --brand-new-330: var(--accent) !important; + --brand-new-360: var(--accent) !important; + --brand-new-400: var(--accent) !important; + --brand-new-430: var(--accent) !important; + --brand-new-460: var(--accent) !important; + --brand-new-500: var(--accent) !important; + --brand-new-530: var(--accent) !important; + --brand-new-560: var(--accent) !important; + --brand-new-600: var(--accent) !important; + --brand-new-630: var(--accent) !important; + --brand-new-660: var(--accent) !important; + --brand-new-700: var(--accent) !important; + --brand-new-730: var(--accent) !important; + --brand-new-760: var(--accent) !important; + --brand-new-800: var(--accent) !important; + --brand-new-830: var(--accent) !important; + --brand-new-860: var(--accent) !important; + --brand-experiment-900: var(--accent) !important; --brand-experiment-100: var(--accent) !important; --brand-experiment-130: var(--accent) !important; --brand-experiment-160: var(--accent) !important;