From 5e7e0a9d36fa2077dc8a2bed6a7559560cc033ed Mon Sep 17 00:00:00 2001 From: CI Date: Tue, 22 Nov 2022 04:21:30 +0000 Subject: [PATCH] Make Modular --- modular/base.css | 55 ++++++ modular/status_icons.css | 368 +++++---------------------------------- 2 files changed, 99 insertions(+), 324 deletions(-) diff --git a/modular/base.css b/modular/base.css index 2f5021c..967c685 100644 --- a/modular/base.css +++ b/modular/base.css @@ -105,11 +105,66 @@ --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; diff --git a/modular/status_icons.css b/modular/status_icons.css index 81e2a5c..e0d4b87 100644 --- a/modular/status_icons.css +++ b/modular/status_icons.css @@ -22,9 +22,9 @@ > 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-"] @@ -132,122 +132,37 @@ [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; @@ -255,66 +170,10 @@ 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; @@ -322,58 +181,10 @@ 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%)"] { + rect[mask^="url(#svg-mask-status-"] { mask: none !important; width: 4px; height: 32px; @@ -381,56 +192,11 @@ 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-"] + [class*="avatar-"] > 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%)"] { + rect[mask^="url(#svg-mask-status-"] { mask: none !important; width: 8px; height: 120px; @@ -443,79 +209,33 @@ > [class^="wrapper-"] > svg circle, +[class^="userPopoutInner-"] + [class^="avatarHoverTarget-"] + > [class^="wrapper-"] + > svg + > rect[fill="black"], [class^="userProfileModalInner-"] [class^="header-"] [class^="wrapper-"] > svg - circle { + 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%)"], + rect[mask^="url(#svg-mask-status-"], [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-"] { mask: none !important; width: 8px; height: 80px;