From 9acd2f885157a4b9232beb4a9e73adbce657aa79 Mon Sep 17 00:00:00 2001 From: CI Date: Sun, 12 Feb 2023 05:30:52 +0000 Subject: [PATCH] Make Modular --- .../just_colored_italics.css | 4 + modular/base.css | 380 +------------ modular/collapsing_sidebar/integrated.css | 169 ++++++ .../integrated_-_compact-er_support.css | 169 ++++++ modular/collapsing_sidebar/simple.css | 7 + modular/compacter_mode.css | 506 ++++++++++++++++++ modular/custom_bg.css | 4 + modular/old_roles.css | 36 +- modular/overwrite_colors.css | 221 ++++++++ modular/scheme/amora_focus.css | 8 +- modular/scheme/stock.css | 24 +- modular/stylings.css | 32 +- modular/textarea/fullwidth.css | 1 + modular/titlebar_icon/discord.css | 3 + modular/titlebar_icon/discord_canary.css | 3 + modular/titlebar_icon/discord_development.css | 3 + modular/titlebar_icon/mcord.css | 3 + modular/titlebar_icon/mcord_inverted.css | 3 + modular/titlebar_icon/mirc_6.css | 3 + modular/titlebar_icon/mirc_6_inverted.css | 3 + modular/titlebar_icon/mirc_7.css | 3 + modular/titlebar_icon/mirc_7_inverted.css | 3 + modular/titlebar_icon/msn.css | 3 + modular/titlebars.css | 2 +- 24 files changed, 1187 insertions(+), 406 deletions(-) create mode 100644 modular/accessible_styles/just_colored_italics.css create mode 100644 modular/collapsing_sidebar/integrated.css create mode 100644 modular/collapsing_sidebar/integrated_-_compact-er_support.css create mode 100644 modular/collapsing_sidebar/simple.css create mode 100644 modular/compacter_mode.css create mode 100644 modular/overwrite_colors.css create mode 100644 modular/titlebar_icon/discord.css create mode 100644 modular/titlebar_icon/discord_canary.css create mode 100644 modular/titlebar_icon/discord_development.css create mode 100644 modular/titlebar_icon/mcord.css create mode 100644 modular/titlebar_icon/mcord_inverted.css create mode 100644 modular/titlebar_icon/mirc_6.css create mode 100644 modular/titlebar_icon/mirc_6_inverted.css create mode 100644 modular/titlebar_icon/mirc_7.css create mode 100644 modular/titlebar_icon/mirc_7_inverted.css create mode 100644 modular/titlebar_icon/msn.css diff --git a/modular/accessible_styles/just_colored_italics.css b/modular/accessible_styles/just_colored_italics.css new file mode 100644 index 0000000..418a5b7 --- /dev/null +++ b/modular/accessible_styles/just_colored_italics.css @@ -0,0 +1,4 @@ +span[data-slate-leaf="true"][class*="italics-"], +em { + color: #f80; +} diff --git a/modular/base.css b/modular/base.css index e3d113c..85e8367 100644 --- a/modular/base.css +++ b/modular/base.css @@ -1,217 +1,3 @@ -/* colors */ -.theme-dark, -:root { - --titlebar-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), - inset 0 0 0 2px rgba(0, 0, 0, 0.27), 0 0 0 1px var(--tertiary), - 0 0 0 2px var(--secondary), 0 0 0 3px var(--primary); - - --_font-titlebars: var(--font-primary); - - --titlebar-color: var(--highlight); - - --header-primary: var(--text) !important; - --header-secondary: var(--text) !important; - --text-normal: var(--text) !important; - --text-muted: var(--highlight) !important; - --text-link: var(--link) !important; - --text-brand: var(--accent); - --channels-default: var(--text) !important; - --channel-icon: var(--text); - --interactive-normal: var(--text) !important; - --interactive-hover: var(--_color15) !important; - --interactive-active: var(--_color15) !important; - --interactive-muted: var(--highlight) !important; - --background-primary: var(--primary) !important; - --background-secondary: var(--secondary) !important; - --background-secondary-alt: var(--secondary) !important; - --background-tertiary: var(--tertiary) !important; - --background-accent: var(--highlight) !important; - --background-floating: var(--primary) !important; - --background-mobile-primary: var(--primary) !important; - --background-mobile-secondary: var(--secondary) !important; - --background-modifier-hover: rgba(var(--highlight-rgb), 0.16) !important; - --background-modifier-active: rgba(var(--highlight-rgb), 0.24) !important; - --background-modifier-selected: rgba(var(--highlight-rgb), 0.32) !important; - --background-modifier-accent: rgba(var(--highlight-rgb), 0.06) !important; - --background-mentioned: rgba(var(--accent-rgb), 0.05) !important; - --background-mentioned-hover: rgba(var(--accent-rgb), 0.08) !important; - --background-message-hover: rgba(4, 4, 5, 0.07) !important; - --background-help-warning: rgba(250, 166, 26, 0.1) !important; - --background-help-info: rgba(0, 176, 244, 0.1) !important; - --scrollbar-thin-thumb: var(--text) !important; - --scrollbar-thin-track: transparent !important; - --scrollbar-auto-thumb: var(--text) !important; - --scrollbar-auto-track: transparent !important; - --scrollbar-auto-scrollbar-color-thumb: var(--text) !important; - --scrollbar-auto-scrollbar-color-track: transparent !important; - --elevation-stroke: 0 0 0 1px rgba(4, 4, 5, 0.15) !important; - --elevation-low: 0 1px 0 rgba(4, 4, 5, 0.2), 0 1.5px 0 rgba(6, 6, 7, 0.05), - 0 2px 0 rgba(4, 4, 5, 0.05) !important; - --elevation-medium: 0 4px 4px rgba(0, 0, 0, 0.16) !important; - --elevation-high: 0 8px 16px rgba(0, 0, 0, 0.24) !important; - --logo-primary: #fff !important; - --focus-primary: var(--link) !important; - --guild-header-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4) !important; - --channeltextarea-background: var(--secondary) !important; - --activity-card-background: var(--primary) !important; - --textbox-markdown-syntax: #8e9297 !important; - --deprecated-card-bg: rgba(32, 34, 37, 0.6) !important; - --deprecated-card-editable-bg: rgba(32, 34, 37, 0.3) !important; - --deprecated-store-bg: var(--primary) !important; - --deprecated-quickswitcher-input-background: var(--primary) !important; - --deprecated-quickswitcher-input-placeholder: hsla( - 0, - 0%, - 100%, - 0.3 - ) !important; - --deprecated-text-input-bg: rgba(0, 0, 0, 0.1) !important; - --deprecated-text-input-border: rgba(0, 0, 0, 0.3) !important; - --deprecated-text-input-border-hover: #040405 !important; - --deprecated-text-input-border-disabled: #181b28 !important; - --deprecated-text-input-prefix: #dcddde !important; - --input-background: var(--tertiary) !important; - --control-brand-foreground: var(--accent) !important; - --channel-text-area-placeholder: var(--highlight); - --status-positive-text: var(--text); - --status-danger-text: var(--text); - --status-warning-text: var(--text); - --button-secondary-background: var(--primary); - --button-secondary-background-hover: var(--highlight); - --button-secondary-background-active: var(--highlight); - --button-secondary-background-disabled: var(--tertiary); - --text-danger: var(--_color1); - --status-danger: var(--_color1); - --status-danger-background: var(--_color1); - --button-danger-background: var(--_color1); - --button-danger-background-hover: var(--_color9); - --button-danger-background-active: var(--_color9); - --button-outline-danger-border: var(--_color1); - --button-outline-danger-border-hover: var(--_color9); - --button-outline-danger-border-active: var(--_color9); - --button-outline-danger-background-hover: var(--_color9); - --button-outline-danger-background-active: var(--_color9); - --text-positive: var(--_color2); - --status-positive: var(--_color2); - --status-positive-background: var(--_color2); - --button-positive-background: var(--_color2); - --button-positive-background-hover: var(--_color10); - --button-positive-background-active: var(--_color10); - --button-outline-positive-border: var(--_color2); - --button-outline-positive-border-hover: var(--_color10); - --button-outline-positive-border-active: var(--_color10); - --button-outline-positive-background-hover: var(--_color10); - --button-outline-positive-background-active: var(--_color10); - --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; - --brand-experiment-200: var(--accent) !important; - --brand-experiment-230: var(--accent) !important; - --brand-experiment-260: var(--accent) !important; - --brand-experiment-300: var(--accent) !important; - --brand-experiment-330: var(--accent) !important; - --brand-experiment-360: var(--accent) !important; - --brand-experiment-400: var(--accent) !important; - --brand-experiment-430: var(--accent) !important; - --brand-experiment-460: var(--accent) !important; - --brand-experiment-500: var(--accent) !important; - --brand-experiment-530: var(--accent) !important; - --brand-experiment-560: var(--accent) !important; - --brand-experiment-600: var(--accent) !important; - --brand-experiment-630: var(--accent) !important; - --brand-experiment-660: var(--accent) !important; - --brand-experiment-700: var(--accent) !important; - --brand-experiment-730: var(--accent) !important; - --brand-experiment-760: var(--accent) !important; - --brand-experiment-800: var(--accent) !important; - --brand-experiment-830: var(--accent) !important; - --brand-experiment-860: var(--accent) !important; - --brand-experiment-900: var(--accent) !important; - --brand-experiment-05a: rgba(var(--accent-rgb), 0.05) !important; - --brand-experiment-10a: rgba(var(--accent-rgb), 0.1) !important; - --brand-experiment-15a: rgba(var(--accent-rgb), 0.15) !important; - --brand-experiment-20a: rgba(var(--accent-rgb), 0.2) !important; - --brand-experiment-25a: rgba(var(--accent-rgb), 0.25) !important; - --brand-experiment-30a: rgba(var(--accent-rgb), 0.3) !important; - --brand-experiment-35a: rgba(var(--accent-rgb), 0.35) !important; - --brand-experiment-40a: rgba(var(--accent-rgb), 0.4) !important; - --brand-experiment-45a: rgba(var(--accent-rgb), 0.45) !important; - --brand-experiment-50a: rgba(var(--accent-rgb), 0.5) !important; - --brand-experiment-55a: rgba(var(--accent-rgb), 0.55) !important; - --brand-experiment-60a: rgba(var(--accent-rgb), 0.6) !important; - --brand-experiment-65a: rgba(var(--accent-rgb), 0.65) !important; - --brand-experiment-70a: rgba(var(--accent-rgb), 0.7) !important; - --brand-experiment-75a: rgba(var(--accent-rgb), 0.75) !important; - --brand-experiment-80a: rgba(var(--accent-rgb), 0.8) !important; - --brand-experiment-85a: rgba(var(--accent-rgb), 0.85) !important; - --brand-experiment-90a: rgba(var(--accent-rgb), 0.9) !important; - --brand-experiment-95a: rgba(var(--accent-rgb), 0.95) !important; -} - -/**/ [class^="appMount-"], [class^="bg-"], [class^="layers-"] > [class^="layer-"], @@ -231,23 +17,23 @@ html:not(.overlay) body { [class^="slider-"] [class^="bar-"] [class^="barFill-"], [class^="control-"] [class^="container-"][style*="background-color: rgb(67, 181, 129);"] { - background-color: var(--accent) !important; + background-color: var(--accent, var(--brand-new-500)) !important; } [style*="border-color: rgb(114, 137, 218)"], [class*="lookOutlined-"][class*="colorBrand-"] { - border-color: var(--accent) !important; + border-color: var(--accent, var(--brand-new-500)) !important; } [class*="lookOutlined-"][class*="colorBrand-"], [class*="colorDefault-"]:not([class*="focused-"]) [class^="checkbox-"], [class*="colorDefault-"]:not([class*="focused-"]) [class^="radioSelection-"], [class*="colorDefault-"][class*="focused-"] [class^="check-"] { - color: var(--accent) !important; + color: var(--accent, var(--brand-new-500)) !important; } [class*="mentioned-"]:before { - background-color: var(--accent); + background-color: var(--accent, var(--brand-new-500)); } [class^="slider-"] [class^="bar-"], @@ -306,44 +92,44 @@ html:not(.overlay) body { } .mention[class*="wrapper-"] { - color: var(--accent); + color: var(--accent, var(--brand-new-500)); background: rgba(var(--accent-rgb), 0.1); } .mention[class*="wrapper-"]:hover { color: #ffffff; - background: var(--accent); + background: var(--accent, var(--brand-new-500)); } [class*="mentioned-"] .mention.interactive:hover { - color: var(--accent) !important; + color: var(--accent, var(--brand-new-500)) !important; } [class^="mediaBarGrabber-"], [class^="mediaBarProgress-"], [class^="mediaBarProgress-"]:after, [class^="mediaBarProgress-"]:before { - background-color: var(--accent) !important; + background-color: var(--accent, var(--brand-new-500)) !important; } [class^="reaction-"] { - background-color: var(--secondary); + background-color: var(--background-secondary); border: none; border-radius: 4px !important; } [class^="reaction-"]:hover, [class^="reaction-"][class*="reactionMe-"] { - background-color: var(--highlight); + background-color: var(--highlight, var(--primary-dark-500)); } [class^="reaction-"][class*="reactionMe-"] [class*="reactionCount-"], [class^="reaction-"]:hover [class*="reactionCount-"] { - color: var(--_color15); + color: var(--_color15, var(--white-500)); } [class^="reaction-"] [class*="reactionCount-"] { - color: var(--text); + color: var(--text, var(--text-normal)); } [class^="uploadModal-"], @@ -388,10 +174,10 @@ html:not(.overlay) body { [class^="containerDefault-"]:not(:hover) [class*="modeUnread-"] [class^="name-"] { - color: var(--accent); + color: var(--accent, var(--brand-new-500)); } [class^="containerDefault-"] [class*="modeUnread-"] [class^="unread-"] { - background-color: var(--accent); + background-color: var(--accent, var(--brand-new-500)); } [class^="containerDefault-"] @@ -477,12 +263,12 @@ rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"] { } [class*="unreadBar-"][class*="mention-"] { - background-color: var(--red) !important; + background-color: var(--red, var(--status-red-500)) !important; } [class^="numberBadge-"] { border-radius: 4px !important; - background-color: var(--red) !important; + background-color: var(--red, var(--status-red-500)) !important; } [class*="containerDefault-"] [class*="listDefault-"] { @@ -586,8 +372,8 @@ div[class^="listItem-"] [class^="wrapper-"] > svg > foreignObject, -webkit-mask-image: none !important; } -[class^="accountProfileCard-"] > [class^="userInfo-"] > [class*="avatar-"] { - top: 112px; +[class^="accountProfileCard-"] { + max-width: 660px; } /* chat box */ @@ -670,15 +456,6 @@ form [class*="typing-"] { } /* User Popout */ -@keyframes active-stripes { - from { - background-position: 40px; - } - to { - background-position: 0px; - } -} - [class*="avatarHint-"], [class*="avatarNormal-"], [class*="avatarWrapper-"] [class*="wrapper-"], @@ -964,7 +741,7 @@ form [class*="typing-"] { [class^="userPopout-"] [class*="note-"] textarea, [class^="userPopout-"] [class*="footer-"] [class*="inputDefault-"] { - border: 1px solid var(--tertiary); + border: 1px solid var(--background-tertiary); } [class^="userPopout-"] [class*="footer-"] [class*="inputDefault-"]::placeholder, [class^="userPopout-"] [class*="note-"] textarea::placeholder { @@ -1087,7 +864,7 @@ form [class*="typing-"] { > [class^="userInfoSection-"] > [class^="note-"] textarea { - border: 1px solid var(--tertiary); + border: 1px solid var(--background-tertiary); } [class^="focusLock-"][aria-modal="true"] @@ -1497,7 +1274,7 @@ svg[fill="#FF73FA"] { [class^="chat-"][class*="background-"], [class^="title-"][class*="background-"], [class^="chat-"] > [class^="content-"] > [class^="container-"] { - background-color: var(--tertiary) !important; + background-color: var(--background-tertiary) !important; } [class*="headerBarInner-"]:after { @@ -1505,10 +1282,10 @@ svg[fill="#FF73FA"] { } [class^="streamPreview-"] { - background-color: var(--secondary) !important; + background-color: var(--background-secondary) !important; } [class^="streamPreview-"] > [class^="previewContainer-"] { - background-color: var(--primary) !important; + background-color: var(--background-primary) !important; } [class*="messageContent-"].deleted-message { @@ -1529,117 +1306,6 @@ code, font-family: var(--font-code) !important; } -/* an attempt to have collapsing channel list */ -/*[class^="sidebar-"] > [class^="panels-"] { - position: absolute; - bottom: 0; - width: 240px; - height: 53px; - display: flex; - flex-direction: column-reverse; - justify-content: flex-end; - z-index: 10; - } - [class^="sidebar-"] > [class^="panels-"]:hover { - height: unset; - flex-direction: column; - } - - [class^="sidebar-"] { - width: unset; - } - [class^="sidebar-"] > nav[class^="container-"] { - width: unset; - z-index: 9; - } - - [class^="sidebar-"] > nav[class^="container-"] > [class^="scroller-"] { - width: 48px; - margin-top: 48px; - margin-bottom: 53px; - } - [class^="sidebar-"] > nav[class^="container-"] > [class^="scroller-"]:hover { - width: 240px; - } - - [class^="sidebar-"] - > nav[class^="container-"] - > [class^="container-"][class*="clickable-"] { - position: fixed; - top: 0; - width: 240px; - z-index: 101; - background: var(--background-secondary); - } - - [class^="sidebar-"] - > nav[class^="container-"] - > [class^="container-"][class*="clickable-"] - > [class^="animatedContainer-"] { - height: 48px; - } - - [class^="sidebar-"] - > nav[class^="container-"] - > [class^="container-"][class*="clickable-"] - > [class^="animatedContainer-"] - > [class^="bannerImage-"] { - height: 48px; - } - [class^="sidebar-"] - > nav[class^="container-"] - > [class^="container-"][class*="clickable-"] - > [class^="animatedContainer-"] - > [class^="bannerImage-"]:after { - content: ""; - height: 48px; - width: 240px; - top: 0; - left: 0; - position: absolute; - background: linear-gradient( - 0deg, - var(--background-secondary) 5%, - transparent 100% - ); - } - - [class^="sidebar-"] - > nav[class^="container-"] - > [class^="container-"][class*="clickable-"] - > [class^="animatedContainer-"] - [class^="bannerImg-"] { - top: -67px; - position: relative; - } - - [class^="sidebar-"] - > nav[class^="container-"] - > [class^="scroller-"] - > ul - > div[style="height: 84px;"] { - height: 0 !important; - } - - [class^="chatContent-"] > form [class^="channelTextArea"] { - margin-left: 192px; - } - - [class^="sidebar-"]:hover - ~ [class^="chat-"] - [class^="chatContent-"] - > form - [class^="channelTextArea"] { - margin-left: 0; - } - - [class^="chat-"] [class^="title-"] { - margin-left: 192px; - } - [class^="sidebar-"]:hover ~ [class^="chat-"] [class^="title-"] { - margin-left: 0; - }*/ - /* jane's steam border ext */ .steam-border-message > #border { width: 20px !important; diff --git a/modular/collapsing_sidebar/integrated.css b/modular/collapsing_sidebar/integrated.css new file mode 100644 index 0000000..09c4249 --- /dev/null +++ b/modular/collapsing_sidebar/integrated.css @@ -0,0 +1,169 @@ +div[class^="sidebar-"]:has(> nav[class^="container-"]) > [class^="panels-"] { + position: absolute; + bottom: 0; + width: 240px; + height: 53px; + display: flex; + flex-direction: column-reverse; + justify-content: flex-end; + z-index: 10; +} +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > [class^="panels-"]:hover { + height: unset; + flex-direction: column; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]) { + width: unset; +} +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] { + width: unset; + z-index: 9; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] + > [class^="scroller-"] { + width: 56px; + margin-top: 48px; + margin-bottom: 53px; +} +div[class^="sidebar-"]:has(> nav[class^="container-"]):hover + > nav[class^="container-"] + > [class^="scroller-"] { + width: 240px; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] + > [class^="container-"][class*="clickable-"] { + position: fixed; + top: 0; + width: 240px; + z-index: 101; + background: var(--background-secondary); +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] + > [class^="container-"][class*="clickable-"] + > [class^="animatedContainer-"] { + height: 48px; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] + > [class^="container-"][class*="clickable-"] + > [class^="animatedContainer-"] + > [class^="bannerImage-"] { + height: 48px; +} +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] + > [class^="container-"][class*="clickable-"] + > [class^="animatedContainer-"] + > [class^="bannerImage-"]:after { + content: ""; + height: 48px; + width: 240px; + top: 0; + left: 0; + position: absolute; + background: linear-gradient( + 0deg, + var(--background-secondary) 5%, + transparent 100% + ); +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] + > [class^="container-"][class*="clickable-"] + > [class^="animatedContainer-"] + [class^="bannerImg-"] { + top: -67px; + position: relative; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] + > [class^="scroller-"] + > ul + > div[style="height: 84px;"] { + height: 0 !important; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + ~ [class^="chat-"] + [class^="chatContent-"] + > form + > [class^="channelTextArea"] { + width: calc(100% - 184px); + margin-left: 184px; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]):hover + ~ [class^="chat-"] + [class^="chatContent-"] + > form + > [class^="channelTextArea"] { + margin-left: 0; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + ~ [class^="chat-"] + [class^="title-"] { + margin-left: 184px; + width: calc(100% - 184px); +} +div[class^="sidebar-"]:has(> nav[class^="container-"]):hover + ~ [class^="chat-"] + [class^="title-"] { + margin-left: 0; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + [class^="channelInfo-"], +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + [class^="containerDefault-"][class*="selected-"] + [class^="iconVisibility-"] + > [class^="content-"] + > [class^="children-"], +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + [class^="containerDefault-"] + [class^="iconVisibility-"]:not([class*="typeThread-"]) + > [class^="content-"] + > [class^="mainContent-"] + > [class^="name-"], +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + [class^="containerDefault-"] + > [class^="iconVisibility-"][class*="clickable-"], +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + [class^="containerDefault-"] + [class^="voiceUser-"] + > [class^="content-"] + > [class^="icons-"], +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + [class^="containerDefault-"] + [class^="voiceUser-"] + > [class^="content-"] + > [class*="username-"] { + display: none; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + [class^="containerDefault-"] + [class^="iconVisibility-"][class*="typeThread-"] + > [class^="content-"] + > [class^="mainContent-"] + > [class^="name-"] { + margin-left: 20px; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + ~ [class^="chat-"] + [class^="autocomplete-"] { + left: -184px; +} diff --git a/modular/collapsing_sidebar/integrated_-_compact-er_support.css b/modular/collapsing_sidebar/integrated_-_compact-er_support.css new file mode 100644 index 0000000..10ccbdf --- /dev/null +++ b/modular/collapsing_sidebar/integrated_-_compact-er_support.css @@ -0,0 +1,169 @@ +div[class^="sidebar-"]:has(> nav[class^="container-"]) > [class^="panels-"] { + position: absolute; + bottom: 0; + width: 240px; + height: 40px; + display: flex; + flex-direction: column-reverse; + justify-content: flex-end; + z-index: 10; +} +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > [class^="panels-"]:hover { + height: unset; + flex-direction: column; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]) { + width: unset; +} +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] { + width: unset; + z-index: 9; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] + > [class^="scroller-"] { + width: 56px; + margin-top: 48px; + margin-bottom: 53px; +} +div[class^="sidebar-"]:has(> nav[class^="container-"]):hover + > nav[class^="container-"] + > [class^="scroller-"] { + width: 240px; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] + > [class^="container-"][class*="clickable-"] { + position: fixed; + top: 0; + width: 240px; + z-index: 101; + background: var(--background-secondary); +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] + > [class^="container-"][class*="clickable-"] + > [class^="animatedContainer-"] { + height: 32px; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] + > [class^="container-"][class*="clickable-"] + > [class^="animatedContainer-"] + > [class^="bannerImage-"] { + height: 32px; +} +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] + > [class^="container-"][class*="clickable-"] + > [class^="animatedContainer-"] + > [class^="bannerImage-"]:after { + content: ""; + height: 32px; + width: 240px; + top: 0; + left: 0; + position: absolute; + background: linear-gradient( + 0deg, + var(--background-secondary) 5%, + transparent 100% + ); +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] + > [class^="container-"][class*="clickable-"] + > [class^="animatedContainer-"] + [class^="bannerImg-"] { + top: -67px; + position: relative; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] + > [class^="scroller-"] + > ul + > div[style="height: 84px;"] { + height: 0 !important; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + ~ [class^="chat-"] + [class^="chatContent-"] + > form + > [class^="channelTextArea"] { + width: calc(100% - 184px); + margin-left: 184px; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]):hover + ~ [class^="chat-"] + [class^="chatContent-"] + > form + > [class^="channelTextArea"] { + margin-left: 0; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + ~ [class^="chat-"] + [class^="title-"] { + margin-left: 184px; + width: calc(100% - 184px); +} +div[class^="sidebar-"]:has(> nav[class^="container-"]):hover + ~ [class^="chat-"] + [class^="title-"] { + margin-left: 0; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + [class^="channelInfo-"], +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + [class^="containerDefault-"][class*="selected-"] + [class^="iconVisibility-"] + > [class^="content-"] + > [class^="children-"], +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + [class^="containerDefault-"] + [class^="iconVisibility-"]:not([class*="typeThread-"]) + > [class^="content-"] + > [class^="mainContent-"] + > [class^="name-"], +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + [class^="containerDefault-"] + > [class^="iconVisibility-"][class*="clickable-"], +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + [class^="containerDefault-"] + [class^="voiceUser-"] + > [class^="content-"] + > [class^="icons-"], +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + [class^="containerDefault-"] + [class^="voiceUser-"] + > [class^="content-"] + > [class*="username-"] { + display: none; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + [class^="containerDefault-"] + [class^="iconVisibility-"][class*="typeThread-"] + > [class^="content-"] + > [class^="mainContent-"] + > [class^="name-"] { + margin-left: 20px; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + ~ [class^="chat-"] + [class^="autocomplete-"] { + left: -184px; +} diff --git a/modular/collapsing_sidebar/simple.css b/modular/collapsing_sidebar/simple.css new file mode 100644 index 0000000..b297da1 --- /dev/null +++ b/modular/collapsing_sidebar/simple.css @@ -0,0 +1,7 @@ +[class^="sidebar-"] { + overflow: hidden; + width: 48px; +} +[class^="sidebar-"]:hover { + width: 240px; +} diff --git a/modular/compacter_mode.css b/modular/compacter_mode.css new file mode 100644 index 0000000..2e191db --- /dev/null +++ b/modular/compacter_mode.css @@ -0,0 +1,506 @@ +[class*="guilds-"] [class^="listItemWrapper-"] > [class^="wrapper-"], +[class*="guilds-"] [class^="listItemWrapper-"] > [class^="wrapper-"] > svg, +[class*="guilds-"] [class^="listItem-"] [class^="wrapper-"]:has(> svg), +[class*="guilds-"] [class^="listItem-"] [class^="wrapper-"]:has(> svg) > svg, +[class*="guilds-"] [class^="listItem-"] [class^="wrapperSimple-"], +[class*="guilds-"] [class^="listItem-"] [class^="wrapperSimple-"] > svg { + width: 32px; + height: 32px; +} + +[class*="guilds-"] [class^="listItem-"] > [class^="pill-"], +[class*="guilds-"] + [class^="listItem-"] + > [class^="pill-"] + > [class^="item-"][style*="height: 40px;"] { + height: 32px !important; +} + +[class*="guilds-"], +[class*="guilds-"] [class^="listItem-"], +[class*="guilds-"] + [class^="wrapper-"]:has(> [class^="expandedFolderBackground-"]) { + width: 48px; +} +[class*="guilds-"] [class^="unreadMentionsIndicator"] { + width: 48px; + height: 16px; +} + +[class*="guilds-"] > ul > [class^="scroller-"] { + padding-top: 8px !important; +} +[class*="guilds-"] [class^="listItem-"] { + margin-bottom: 4px; +} + +[class*="guilds-"] ul[id^="folder-items-"] > [class^="listItem-"] { + width: 32px !important; + height: 32px !important; + margin-left: 8px; +} + +[class*="guilds-"] [class^="expandedFolderBackground-"] { + width: 32px; + left: 8px; +} + +[class*="guilds-"] ul[id^="folder-items-"] { + height: unset !important; +} + +section[class^="panels-"] > [class*="activityPanel-"] [class^="gameIcon-"], +section[class^="panels-"] + > [class*="activityPanel-"] + [class^="actions-"] + > [class^="panelButtonContainer-"] + > button, +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class*="directionRow-"] + > button, +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="actionButtons-"] + > button { + width: 24px; + height: 24px; + min-height: 24px; +} + +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class*="directionRow-"] { + position: absolute; + bottom: 8px; + right: 8px; + display: grid; + grid-gap: 4px; + grid-auto-flow: column; +} + +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] + > div { + padding-left: 20px; +} +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] + > div + > [class^="rtcConnectionStatus-"] { + position: absolute; + left: 8px; +} +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] + > div + > [class^="rtcConnectionStatus-"]:has(> :nth-child(2)) { + top: 12px; +} +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] + > div + > [class^="rtcConnectionStatus-"] + > svg[class^="ping-"] { + margin-right: 0; +} +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] + > div + > [class^="rtcConnectionStatus-"] + > [class^="labelWrapper-"], +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] + > div + > [class^="rtcConnectionStatus-"] + > [class^="labelWrapper-"] + > button { + width: 16px; + height: 16px; +} +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] + > div + > [class^="rtcConnectionStatus-"] + > [class^="labelWrapper-"] { + position: relative; + left: -16px; + z-index: 10; +} +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] + > div + > [class^="rtcConnectionStatus-"] + > [class^="labelWrapper-"] + > button + > [class^="contents-"] { + display: none; +} + +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="actionButtons-"] + > button { + padding: 0; + background: transparent; +} +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="actionButtons-"] { + grid-gap: 4px; + padding-top: 0; + grid-template-columns: repeat(auto-fill, minmax(0, 24px)); + height: 24px; +} + +section[class^="panels-"] > [class^="container-"] { + height: 40px; + padding: 0 4px; +} +section[class^="panels-"] + > [class^="container-"] + > [class^="avatarWrapper-"] + > [class*="avatar-"] { + width: 24px !important; + height: 24px !important; +} +section[class^="panels-"] + > [class^="container-"] + > [class^="avatarWrapper-"] + > [class*="avatar-"] + > svg { + width: 32px !important; + height: 32px !important; +} +section[class^="panels-"] + > [class^="container-"] + > [class*="directionRow-"] + > button { + width: 24px; + height: 24px; +} +section[class^="panels-"] > [class^="container-"] > [class*="directionRow-"] { + display: grid; + grid-auto-flow: column; + grid-gap: 4px; + padding-right: 4px !important; +} + +.hh2-spotify-controls-player { + margin: 4px 4px !important; + height: 32px !important; +} +.hh2-spotify-controls-album-image { + width: 32px !important; + height: 32px !important; +} +button.hh2-spotify-controls-button { + width: 24px !important; +} +.hh2-spotify-controls-info-box { + margin-left: 4px !important; + max-width: 112px !important; + margin-right: 4px !important; +} +.hh2-spotify-controls-buttons { + display: grid !important; + grid-auto-flow: column; + grid-gap: 4px; +} +.hh2-spotify-controls-track-name { + font-size: 0.75em; +} +.hh2-spotify-controls-album-name span, +.hh2-spotify-controls-album-name a { + color: var(--text-muted) !important; +} + +[class^="members-"] [class^="member-"] > [class^="layout-"] { + height: 32px; +} +[class^="members-"] + [class^="member-"] + > [class^="layout-"] + > [class^="avatar-"], +[class^="members-"] + [class^="member-"] + > [class^="layout-"] + > [class^="avatar-"] + > [class^="wrapper-"] { + width: 24px !important; + height: 24px !important; +} +[class^="members-"] + [class^="member-"] + > [class^="layout-"] + > [class^="avatar-"] + > [class^="wrapper-"] + > svg[viewBox="0 0 40 40"] { + width: 32px !important; + height: 32px !important; +} +[class^="members-"] + [class^="member-"] + > [class^="layout-"] + > [class^="avatar-"] + > [class^="wrapper-"] + > svg[viewBox="0 0 32 32"] { + width: 24px !important; + height: 24px !important; +} +[class^="members-"] + [class^="member-"] + > [class^="layout-"] + > [class^="avatar-"] { + margin-right: 8px; +} +[class^="members-"] [class^="membersGroup-"] { + padding: 12px 8px 0 8px !important; + height: unset; +} +[class^="members-"] + [class^="member-"] + > [class^="layout-"] + > [class^="children-"] + > .presence-icons-wrapper + > span + > img { + width: 20px; + height: 20px; +} + +[class^="sidebar-"] [class^="containerDefault-"]:has(> [class*="clickable-"]) { + padding-top: 8px; +} +[class^="sidebar-"] ul[class^="content-"] > div[style="height: 12px;"] { + height: 6px !important; +} +[class^="sidebar-"] ul[class^="content-"] > div[style="height: 84px;"] { + height: 100px !important; +} +[class^="sidebar-"] ul[class^="content-"] > [class^="sectionDivider-"] { + margin-top: 6px; +} +[class^="sidebar-"] + [class^="containerDefault-"] + [class^="iconVisibility-"] + > [class^="content-"] { + padding: 0 4px; +} +[class^="sidebar-"] + [class^="containerDefault-"] + [class^="iconVisibility-"] + > [class^="content-"] + > [class^="mainContent-"], +[class^="sidebar-"] + [class^="containerDefault-"] + [class^="iconVisibility-"] + > [class^="content-"] + > [class^="children-"] + > [class^="iconItem-"] { + padding: 3px 0; +} +[class^="sidebar-"] + [class^="containerDefault-"] + [class^="voiceUser-"] + [class^="userAvatar-"] { + margin-left: 4px; + margin-right: 4px; +} + +[nop="nop"] [class^="members-"] > [class^="content-"], +[nop="nop"] [class^="sidebar-"] ul[class^="content-"] { + height: unset !important; + padding-bottom: 8px; +} + +[class^="sidebar-"] header[class^="header-"] { + padding: 4px 8px; +} +[class^="chat-"] > [class^="title-"] { + height: 32px; +} +[class^="chat-"] + > [class^="title-"] + [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] { + height: 24px !important; +} +[class^="chat-"] + > [class^="title-"] + [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > .DraftEditor-root, +[class^="chat-"] + > [class^="title-"] + [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > [class^="icon-"] { + margin-top: 0 !important; +} +[class^="chat-"] + > [class^="title-"] + [class^="toolbar-"] + [class^="iconWrapper-"] { + width: 24px !important; + height: 24px !important; +} +[class^="chat-"] + > [class^="title-"] + [class^="toolbar-"] + [class*="iconWrapper-"] + > svg { + margin: 0 !important; + padding: 1px; +} +[class^="chat-"] > [class^="title-"] [class^="toolbar-"] { + display: grid; + grid-auto-flow: column; + grid-gap: 4px; +} +[class^="chat-"] + > [class^="title-"] + [class^="toolbar-"] + > [class^="icon-"]:has(> [class^="text-md-normal-"]) { + margin-left: 4px; + margin-right: 0; +} +[class^="chat-"] > [class^="title-"] [class^="topic-"] { + margin-left: 4px; +} +[class^="chat-"] > [class^="title-"] [class^="titleWrapper-"] { + margin-right: 4px; +} +[class^="chat-"] + > [class^="title-"] + > [class^="children-"] + > [class^="iconWrapper-"], +[class^="chat-"] > [class^="title-"] [class^="divider-"] { + margin: 0 4px; +} +[class^="chat-"] + > [class^="title-"] + > [class^="children-"] + > [class^="iconWrapper-"] + > svg { + padding: 2px; +} + +[class^="chatContent-"] > form [class^="channelTextArea"] { + margin-bottom: 1px !important; +} +[class^="chatContent-"] + > form + [class^="channelTextArea"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"] + > div + > [class*="fontSize16Padding-"] { + padding-top: 9px !important; + padding-bottom: 9px !important; +} +[class^="channelTextArea-"] [class^="inner-"], +[class^="channelTextArea-"] [class^="buttons-"], +[class^="channelTextArea-"] [class^="attachWrapper-"], +[class^="channelTextArea-"] [class^="attachButton-"] { + height: 40px !important; +} +[class^="channelTextArea-"] [class^="attachButton-"], +[class^="channelTextArea-"] [class^="attachButton-"] > [class^="icon-"] { + padding: 5px 8px; +} +[class^="channelTextArea-"] + [class^="buttons-"] + [class*="buttonContainer-"] + > button:not(:has(> [class*="innerButton-"])) { + margin: 0; +} +[class^="channelTextArea-"] [class^="buttons-"] > [class^="separator-"], +[class^="channelTextArea-"] + [class^="buttons-"] + > [class^="separator-"] + [class*="innerButton-"] { + margin-left: 4px; +} +[class^="channelTextArea-"] + [class^="buttons-"] + > [class^="separator-"] + [class*="innerButton-"] { + margin-right: 0; +} + +[class^="menu-"] [class^="scroller-"] { + padding: 4px; +} +[class^="menu-"] [class^="scroller-"]::-webkit-scrollbar { + width: 4px; +} +[class^="menu-"] [class^="scroller-"] [class^="item-"] { + margin: 1px 0; + padding: 0 4px; + min-height: 24px; +} +[class^="menu-"] + [class^="scroller-"] + [class^="customItem-"][id^="message-quickreact-"] + > [class^="button-"] { + width: 24px; + height: 24px; +} +[class^="menu-"] + [class^="scroller-"] + [class^="wrapper-"]:has(> [class^="customItem-"][id^="message-quickreact-"]) { + padding: 0; + margin-bottom: 4px; +} +[class^="menu-"] + [class^="scroller-"] + [class^="item-"] + > [class^="labelContainer-"], +[class^="menu-"] + [class^="scroller-"] + [class^="item-"] + > [class^="sliderContainer-"] { + padding: 0; +} +[class^="menu-"] + [class^="scroller-"] + [class^="item-"] + > [class^="labelContainer-"] { + min-height: 24px; +} diff --git a/modular/custom_bg.css b/modular/custom_bg.css index 164b483..aac5bae 100644 --- a/modular/custom_bg.css +++ b/modular/custom_bg.css @@ -8,6 +8,10 @@ var(--secondary-rgb), var(--secondary-alpha) ) !important; + --transparent_background-secondary-alt: rgba( + var(--secondary--alt-rgb, --secondary-rgb), + var(--secondary-alpha) + ) !important; --transparent_background-tertiary: rgba( var(--tertiary-rgb), var(--tertiary-alpha) diff --git a/modular/old_roles.css b/modular/old_roles.css index 60ee490..8bcfd9f 100644 --- a/modular/old_roles.css +++ b/modular/old_roles.css @@ -1,15 +1,10 @@ -[class*="role-"] { +[class^="role-"] { position: relative; border-radius: 5%; } -[class^="role-"], -[note="FIX ME WHEN WE HAVE :has()"] { - padding-left: 16px; -} - -[class^="roleRemoveButton-"] [class^="roleCircle-"], -[class^="roleRemoveButton-"] [class^="roleFlowerStar-"] { +[class^="role-"] [class^="roleRemoveButton-"] [class^="roleCircle-"], +[class^="role-"] [class^="roleRemoveButton-"] [class^="roleFlowerStar-"] { margin: 0 !important; border-radius: 5% !important; width: 100% !important; @@ -21,15 +16,15 @@ opacity: 0.25; } -[class^="roleFlowerStar-"] > svg[class^="linkIcon-"] { - z-index: 6; +[class^="role-"] [class^="roleFlowerStar-"] > svg[class^="linkIcon-"] { + z-index: 7; position: absolute; - opacity: 1; right: -2px; top: -2px; + opacity: 5; } -[class^="roleRemoveButton-"] { +[class^="role-"] [class^="roleRemoveButton-"] { position: absolute; left: 0; width: 100%; @@ -42,23 +37,20 @@ z-index: 5; } -[class^="roleName-"] { +[class^="role-"] [class^="roleName-"] { z-index: 2; + margin-right: 0; } -[class^="roleRemoveIcon-"] { +[class^="role-"] [class^="roleRemoveIcon-"] { display: block; position: absolute; - left: 8px; - z-index: 4; + top: 4px; + left: 4px; + z-index: 6; } -[class^="roleRemoveIcon-"] > path { - fill: #ffffff; - filter: brightness(1); -} - -[class^="roleRemoveButton-"] [class*="roleDot-"] { +[class^="role-"] [class^="roleRemoveButton-"] [class*="roleDot-"] { width: 1em !important; height: 1em !important; margin-top: 0.25em; diff --git a/modular/overwrite_colors.css b/modular/overwrite_colors.css new file mode 100644 index 0000000..1fa336c --- /dev/null +++ b/modular/overwrite_colors.css @@ -0,0 +1,221 @@ +.theme-dark, +:root { + --titlebar-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), + inset 0 0 0 2px rgba(0, 0, 0, 0.27), 0 0 0 1px var(--background-tertiary), + 0 0 0 2px var(--background-secondary), 0 0 0 3px var(--background-primary); + + --_font-titlebars: var(--font-primary); + + --titlebar-color: var(--highlight); + + --header-primary: var(--text, var(--white-500)) !important; + --header-secondary: var(--text, var(--primary-dark-300)) !important; + --text-normal: var(--text, var(--primary-dark-200)) !important; + --text-muted: var(--highlight, var(--primary-dark-330)) !important; + --text-link: var(--link, var(--link-500)) !important; + --text-brand: var(--accent); + --channels-default: var(--text, var(--primary-dark-345)) !important; + --channel-icon: var(--text, var(--primary-dark-360)); + --interactive-normal: var(--text, var(--primary-dark-300)) !important; + --interactive-hover: var(--_color15, var(--primary-dark-200)) !important; + --interactive-active: var(--_color15, var(--white-500)) !important; + --interactive-muted: var(--highlight, var(--primary-dark-500)) !important; + --background-primary: var(--primary, var(--primary-dark-600)) !important; + --background-secondary: var(--secondary, var(--primary-dark-630)) !important; + --background-secondary-alt: var( + --secondary-alt, + var(--secondary, var(--primary-dark-660)) + ) !important; + --background-tertiary: var(--tertiary, var(--primary-dark-700)) !important; + --background-accent: var(--highlight, var(--primary-dark-500)) !important; + --background-floating: var(--primary, var(--primary-dark-800)) !important; + --background-modifier-hover: rgba(var(--highlight-rgb), 0.16) !important; + --background-modifier-active: rgba(var(--highlight-rgb), 0.24) !important; + --background-modifier-selected: rgba(var(--highlight-rgb), 0.32) !important; + --background-modifier-accent: rgba(var(--highlight-rgb), 0.06) !important; + --background-mentioned: rgba(var(--accent-rgb), 0.05) !important; + --background-mentioned-hover: rgba(var(--accent-rgb), 0.08) !important; + --background-message-hover: rgba(4, 4, 5, 0.07) !important; + --background-help-warning: rgba(250, 166, 26, 0.1) !important; + --background-help-info: rgba(0, 176, 244, 0.1) !important; + --scrollbar-thin-thumb: var(--text) !important; + --scrollbar-thin-track: transparent !important; + --scrollbar-auto-thumb: var(--text) !important; + --scrollbar-auto-track: transparent !important; + --scrollbar-auto-scrollbar-color-thumb: var(--text) !important; + --scrollbar-auto-scrollbar-color-track: transparent !important; + --elevation-stroke: 0 0 0 1px rgba(4, 4, 5, 0.15) !important; + --elevation-low: 0 1px 0 rgba(4, 4, 5, 0.2), 0 1.5px 0 rgba(6, 6, 7, 0.05), + 0 2px 0 rgba(4, 4, 5, 0.05) !important; + --elevation-medium: 0 4px 4px rgba(0, 0, 0, 0.16) !important; + --elevation-high: 0 8px 16px rgba(0, 0, 0, 0.24) !important; + --logo-primary: #fff !important; + --focus-primary: var(--link) !important; + --guild-header-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4) !important; + --channeltextarea-background: var( + --secondary, + var(--primary-dark-560) + ) !important; + --activity-card-background: var( + --tertiary, + var(--primary-dark-700) + ) !important; + --textbox-markdown-syntax: #8e9297 !important; + --deprecated-card-bg: rgba(32, 34, 37, 0.6) !important; + --deprecated-card-editable-bg: rgba(32, 34, 37, 0.3) !important; + --deprecated-store-bg: var(--primary) !important; + --deprecated-quickswitcher-input-background: var( + --primary, + --primary-dark-400 + ) !important; + --deprecated-quickswitcher-input-placeholder: hsla( + 0, + 0%, + 100%, + 0.3 + ) !important; + --deprecated-text-input-bg: rgba(0, 0, 0, 0.1) !important; + --deprecated-text-input-border: rgba(0, 0, 0, 0.3) !important; + --deprecated-text-input-border-hover: #040405 !important; + --deprecated-text-input-border-disabled: #181b28 !important; + --deprecated-text-input-prefix: #dcddde !important; + --input-background: var(--tertiary, var(--primary-dark-700)) !important; + --control-brand-foreground: var(--accent) !important; + --channel-text-area-placeholder: var(--highlight); + --status-positive-text: var(--text); + --status-danger-text: var(--text); + --status-warning-text: var(--text); + --button-secondary-background: var(--primary); + --button-secondary-background-hover: var(--highlight); + --button-secondary-background-active: var(--highlight); + --button-secondary-background-disabled: var(--tertiary); + --text-danger: var(--_color1); + --status-danger: var(--_color1); + --status-danger-background: var(--_color1); + --button-danger-background: var(--_color1); + --button-danger-background-hover: var(--_color9); + --button-danger-background-active: var(--_color9); + --button-outline-danger-border: var(--_color1); + --button-outline-danger-border-hover: var(--_color9); + --button-outline-danger-border-active: var(--_color9); + --button-outline-danger-background-hover: var(--_color9); + --button-outline-danger-background-active: var(--_color9); + --text-positive: var(--_color2); + --status-positive: var(--_color2); + --status-positive-background: var(--_color2); + --button-positive-background: var(--_color2); + --button-positive-background-hover: var(--_color10); + --button-positive-background-active: var(--_color10); + --button-outline-positive-border: var(--_color2); + --button-outline-positive-border-hover: var(--_color10); + --button-outline-positive-border-active: var(--_color10); + --button-outline-positive-background-hover: var(--_color10); + --button-outline-positive-background-active: var(--_color10); + --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; + --brand-experiment-200: var(--accent) !important; + --brand-experiment-230: var(--accent) !important; + --brand-experiment-260: var(--accent) !important; + --brand-experiment-300: var(--accent) !important; + --brand-experiment-330: var(--accent) !important; + --brand-experiment-360: var(--accent) !important; + --brand-experiment-400: var(--accent) !important; + --brand-experiment-430: var(--accent) !important; + --brand-experiment-460: var(--accent) !important; + --brand-experiment-500: var(--accent) !important; + --brand-experiment-530: var(--accent) !important; + --brand-experiment-560: var(--accent) !important; + --brand-experiment-600: var(--accent) !important; + --brand-experiment-630: var(--accent) !important; + --brand-experiment-660: var(--accent) !important; + --brand-experiment-700: var(--accent) !important; + --brand-experiment-730: var(--accent) !important; + --brand-experiment-760: var(--accent) !important; + --brand-experiment-800: var(--accent) !important; + --brand-experiment-830: var(--accent) !important; + --brand-experiment-860: var(--accent) !important; + --brand-experiment-900: var(--accent) !important; + --brand-experiment-05a: rgba(var(--accent-rgb), 0.05) !important; + --brand-experiment-10a: rgba(var(--accent-rgb), 0.1) !important; + --brand-experiment-15a: rgba(var(--accent-rgb), 0.15) !important; + --brand-experiment-20a: rgba(var(--accent-rgb), 0.2) !important; + --brand-experiment-25a: rgba(var(--accent-rgb), 0.25) !important; + --brand-experiment-30a: rgba(var(--accent-rgb), 0.3) !important; + --brand-experiment-35a: rgba(var(--accent-rgb), 0.35) !important; + --brand-experiment-40a: rgba(var(--accent-rgb), 0.4) !important; + --brand-experiment-45a: rgba(var(--accent-rgb), 0.45) !important; + --brand-experiment-50a: rgba(var(--accent-rgb), 0.5) !important; + --brand-experiment-55a: rgba(var(--accent-rgb), 0.55) !important; + --brand-experiment-60a: rgba(var(--accent-rgb), 0.6) !important; + --brand-experiment-65a: rgba(var(--accent-rgb), 0.65) !important; + --brand-experiment-70a: rgba(var(--accent-rgb), 0.7) !important; + --brand-experiment-75a: rgba(var(--accent-rgb), 0.75) !important; + --brand-experiment-80a: rgba(var(--accent-rgb), 0.8) !important; + --brand-experiment-85a: rgba(var(--accent-rgb), 0.85) !important; + --brand-experiment-90a: rgba(var(--accent-rgb), 0.9) !important; + --brand-experiment-95a: rgba(var(--accent-rgb), 0.95) !important; +} diff --git a/modular/scheme/amora_focus.css b/modular/scheme/amora_focus.css index f5a157d..99766df 100644 --- a/modular/scheme/amora_focus.css +++ b/modular/scheme/amora_focus.css @@ -22,13 +22,15 @@ --primary: #1a1a1a; --secondary: #171717; + --secondary-alt: #151515; --tertiary: #141414; --primary-rgb: 26, 26, 26; --secondary-rgb: 23, 23, 23; + --secondary-alt-rgb: 21, 21, 21; --tertiary-rgb: 20, 20, 20; - --accent: var(--_color1); - --accent-rgb: 232, 63, 128; + --accent: #634e75; + --accent-rgb: 99, 78, 117; --red: var(--_color6); --text: var(--_color7); --link: var(--_color10); @@ -40,4 +42,6 @@ --status-dnd: var(--_color5); --status-offline: var(--tertiary); --status-streaming: var(--_color4); + + --titlebar-color: var(--accent); } diff --git a/modular/scheme/stock.css b/modular/scheme/stock.css index 1793916..4ba11c5 100644 --- a/modular/scheme/stock.css +++ b/modular/scheme/stock.css @@ -20,20 +20,20 @@ --_colorFG: var(--_color7); - --primary: #36393f; - --secondary: #2f3136; - --tertiary: #202225; - --primary-rgb: 54, 57, 63; - --secondary-rgb: 47, 49, 54; - --tertiary-rgb: 32, 34, 37; + --__primary: #36393f; + --__secondary: #2f3136; + --__tertiary: #202225; + --__primary-rgb: 54, 57, 63; + --__secondary-rgb: 47, 49, 54; + --__tertiary-rgb: 32, 34, 37; --accent: #7289da; --accent-rgb: 114, 137, 218; - --red: #f04747; - --text: #dcddde; - --link: #00aff4; - --highlight: #72767d; - --highlight-rgb: 114, 118, 125; + --__red: #f04747; + --__text: #dcddde; + --__link: #00aff4; + --__highlight: #72767d; + --__highlight-rgb: 114, 118, 125; --status-online: #43b581; --status-idle: #faa61a; @@ -41,5 +41,5 @@ --status-offline: #747f8d; --status-streaming: #593695; - --titlebar-color: var(--highlight); + --__titlebar-color: var(--highlight); } diff --git a/modular/stylings.css b/modular/stylings.css index 54de26d..b562f0b 100644 --- a/modular/stylings.css +++ b/modular/stylings.css @@ -2,19 +2,25 @@ :root { --_font-titlebars: "Segoe UI", sans-serif; - --button-bg: linear-gradient(to bottom, var(--primary), var(--secondary)); - --button-shadow: inset 0 0 0 1px var(--tertiary), - inset 0 0 0 2px var(--primary), inset 0 0 0 3px var(--secondary); + --button-bg: linear-gradient( + to bottom, + var(--background-primary), + var(--background-secondary) + ); + --button-shadow: inset 0 0 0 1px var(--background-tertiary), + inset 0 0 0 2px var(--background-primary), + inset 0 0 0 3px var(--background-secondary); --hover-bg: #3f3f3f; --hover-shadow: inset 0 0 0 1px #373737, inset 0 0 0 2px #444444, inset 0 0 0 3px #3c3c3c; - --scrollbar-shadow: inset 0 0 0 1px var(--tertiary), inset 0 0 0 2px #404040, - inset 0 0 0 3px var(--primary), inset 0 0 0 4px var(--secondary); - --scrollbar-shadow-hover: inset 0 0 0 1px var(--tertiary), - inset 0 0 0 2px #646464, inset 0 0 0 3px var(--primary), - inset 0 0 0 4px var(--secondary); + --scrollbar-shadow: inset 0 0 0 1px var(--background-tertiary), + inset 0 0 0 2px #404040, inset 0 0 0 3px var(--background-primary), + inset 0 0 0 4px var(--background-secondary); + --scrollbar-shadow-hover: inset 0 0 0 1px var(--background-tertiary), + inset 0 0 0 2px #646464, inset 0 0 0 3px var(--background-primary), + inset 0 0 0 4px var(--background-secondary); } [class*="button-"][class*="lookFilled-"], @@ -42,7 +48,9 @@ nav[class^="sidebar-"] div[class^="item-"][class*="selected-"], box-shadow: var(--button-shadow) !important; } -[class^="containerDefault-"] [class^="content-"]:hover, +[class^="containerDefault-"] + [class^="iconVisibility-"]:hover + [class^="content-"], nav[class^="sidebar-"] div[class^="item-"]:not([class*="selected-"]):hover, [class^="member-"]:not([aria-expanded="true"]):hover > [class^="layout-"], [class^="channel-"] [class^="interactive-"]:not([class*="selected-"]):hover { @@ -59,7 +67,7 @@ nav[class^="sidebar-"] div[class^="item-"]:not([class*="selected-"]):hover, } [class^="channelTextArea-"] > [class^="scrollableContainer-"] { - border: 1px solid var(--tertiary); + border: 1px solid var(--background-tertiary); border-radius: 0; } @@ -78,8 +86,8 @@ nav[class^="sidebar-"] div[class^="item-"]:not([class*="selected-"]):hover, } [class^="toolbar-"] > [class^="search-"] [class^="searchBar-"] { - background-color: var(--primary); - border: 1px solid var(--tertiary); + background-color: var(--background-primary); + border: 1px solid var(--background-tertiary); border-radius: 0; height: 32px; justify-content: center; diff --git a/modular/textarea/fullwidth.css b/modular/textarea/fullwidth.css index 29b6513..3545de1 100644 --- a/modular/textarea/fullwidth.css +++ b/modular/textarea/fullwidth.css @@ -9,6 +9,7 @@ [class^="channelTextArea"] > [class^="scrollableContainer-"] { border-radius: 0 !important; + border: 0 !important; } [class^="chatContent-"] diff --git a/modular/titlebar_icon/discord.css b/modular/titlebar_icon/discord.css new file mode 100644 index 0000000..17cdee0 --- /dev/null +++ b/modular/titlebar_icon/discord.css @@ -0,0 +1,3 @@ +:root { + --titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFrSURBVDhPnVNNS8NAFMy5Pyd/pgGvCXi0eLT4C7wKJfSkIKjUg3jrRevFo+AHEhRvIuglabHpttnnm5fNsmmiiA8GXmbmTbKbXW+9gij1gzAddKM06YapMkiYHwRR5htbs1js8OCQB4n7H5AS6zGjY8bKYpGHs0lzoB0cMKmF8JvjNuNv4IBhNezj0yphYzOjvf0vOjie09bOVIAeHDQbEMpyfI8bbI4Vrm8Uaa1bAc31YhYBvMMlsb07ax10AY8TkCBAVcTZRS6mj8+CjkY55bkWoAcHbcQeJ0DVAm7vl2IaXy7kOXlZCdCDgwZP5a8C7BKeX1diUkrTw1MZBqAHhx4eJ0CWYDfx9DynotD09l7Q+GpBd49LAXpw0OCxAXw65TdyiCV7/RkdnsztcwVwvf7U4TDDvxHFAf85SLEMozgA9+DPR5nfXD/KKITIlzjLWQeWCg+8ZqxZcrRxnXmHGYp7IAEHzdhMed43/d6Afr0nB7gAAAAASUVORK5CYII="); +} diff --git a/modular/titlebar_icon/discord_canary.css b/modular/titlebar_icon/discord_canary.css new file mode 100644 index 0000000..1f36e60 --- /dev/null +++ b/modular/titlebar_icon/discord_canary.css @@ -0,0 +1,3 @@ +:root { + --titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGhSURBVDhPlZNdKwRhFMfner6CzXukFE2JlIj4BHLtS/ANKOUDjGnviF3rnV03XJhyIXm92W2Wi+VGKDZSe2ae5zjneZ7ZtEhO/ZrzPOf3n7dmrNoK90cdwg33xwICDNTz3qhjtO8F2WE7zI0kCfwDL8wN2yamC/YGbcgO+WF2COn4K1/mPmdMnE8w4BH4T5I6vNPvEBgTHk2iKO2ieDjG6Hpewb0o7amZ8narvmPBdq8L232ooNuTH48opfwZmqlHiH3KWrDVExDIRFdzPwe/wE7sc9aCTQcIZMTjqZLE8zlGJ1Mo4Y14p34axdOZnpET+5y1YKMLCGRkpayvkl+gdTfK8g1xq/oo7+q7ICf2OWvBemdAICOl0JIAChZ1z3AvKmYtlGugR1jrcAlkxH1OSy8FFMVF/faZ4hLK14Kaibuscg30EjPtDmTaMCY8nMDoYqa6jokuZzE8GK/Zb9efNqy2epBuwX9BGRXmgnSzDakmH1KNSMdf4Fl17nPGxHVBqsGGlXqPwD/w2DWx7wXLCQeW61wiIMDAPe0lan5ny/oEGx2ifF3nCr4AAAAASUVORK5CYII="); +} diff --git a/modular/titlebar_icon/discord_development.css b/modular/titlebar_icon/discord_development.css new file mode 100644 index 0000000..35d58fc --- /dev/null +++ b/modular/titlebar_icon/discord_development.css @@ -0,0 +1,3 @@ +:root { + --titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGqSURBVDhPldNNTsJQEAfwt+YUCoUCItAWEFS4hPEz8RDGxBOIXweQ2rhT1xoTwa0VTVR0K1Y8QN0R3NCkjDNDGxE16iS/ZPLmPy9N04rhykwUVaRn80Urmy85fUWLzmjmxb6WlpsKaLnpfQS/MCjrrfVLyUwG1OykieCPTCVT+LgkrRUMRSvAf6S1/D4vp9QJFYFvfnEZjk9O4cK8hPLmDjPNOp/N4Wwwi1SRTGd1BCRXKIFtv0Kv1/uWbduc8fO0KxKpjIWArG9sfbs4aH1jm7MeS4wlVQcBubm941Dj/gFWVteg0+lA5+2N+0bjgWeU8fO0K+IJxUFA2u02hyq6AfFxBZ6fW9BqvXC/W9njGWX8PO2K6FjKQkBct/+YjuOAhcvUE7qo2+1y77ouZz2WkGPjOgJSrZ1z6LHZhIPDI6hfXTPqm80nnp1Va5z16CISTagIfLPzS1DGFzV4Rsqb2zAzuzB83v+0JTluSJE4/JPBy1ShcCyAzFA4Cn+D2Ujs8/8QlOQAMkZDMvxIkoEyQSn6eXmwRkIRdSQY1pGFHA/1+ijOvJhXQrwDgTTB8rXBmzwAAAAASUVORK5CYII="); +} diff --git a/modular/titlebar_icon/mcord.css b/modular/titlebar_icon/mcord.css new file mode 100644 index 0000000..4c30761 --- /dev/null +++ b/modular/titlebar_icon/mcord.css @@ -0,0 +1,3 @@ +:root { + --titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACJSURBVDhPxVABDoAgELqn388LvHDMrOnW1i060IPMYGXmsYNm8qrFddxCPg9Y01Y+QM6SJljjzGWt+j2AoiE3Ue4DD5BZIXh1cOhJ9xCoZhY85C1AmqyfgJ0BGnQD+bjOjgsEsa9vB4CBz43q4rN9sv4LOoWbnLvWGlkLIHYCpDFfJkEbK4iIOAFjx6/RbabDvAAAAABJRU5ErkJgggAAAAAAAAAAAAAAAA=="); +} diff --git a/modular/titlebar_icon/mcord_inverted.css b/modular/titlebar_icon/mcord_inverted.css new file mode 100644 index 0000000..56e75cc --- /dev/null +++ b/modular/titlebar_icon/mcord_inverted.css @@ -0,0 +1,3 @@ +:root { + --titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACJSURBVDhPxU9bDoAwCOPDeG5ujjwsYcs0IzGR2G2FtptkxczSgZtq+YAamEO+D9jgtzVqEOjZqhqcT5rbGvV7gJEAN+Fu0U/B0ZBTjoSJnniGwAzUkLcA8OEFtlsAhNXg4qkfPV3q7e2AvHVhxJ7ixXz4Bbyimuq58uwhACG7AeCqD1MCgx0Q0QXjX8uT7Jk2OwAAAABJRU5ErkJgggAAAAAAAAAAAAAAAA=="); +} diff --git a/modular/titlebar_icon/mirc_6.css b/modular/titlebar_icon/mirc_6.css new file mode 100644 index 0000000..197b9ad --- /dev/null +++ b/modular/titlebar_icon/mirc_6.css @@ -0,0 +1,3 @@ +:root { + --titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAB/SURBVDhPxZALCgAhCEQ9ujcvJ1PMggwWduBRijN9CGLm9sIwRWmzzhbyeUCtDooD2ENWAyjPTKvq3wAmahVk1NkCpHJy7b2mMHuQ6iUAZkOs4PyEaPReuAHWJcAMZlr2wZhOB/UAsBhNt4Ackm5xD5iDW8jsnz8xMoZ0zYiIOusbnt1lWQzCAAAAAElFTkSuQmCCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); +} diff --git a/modular/titlebar_icon/mirc_6_inverted.css b/modular/titlebar_icon/mirc_6_inverted.css new file mode 100644 index 0000000..9fcd596 --- /dev/null +++ b/modular/titlebar_icon/mirc_6_inverted.css @@ -0,0 +1,3 @@ +:root { + --titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACCSURBVDhPxY7hCsAgCIT9MfbcvrnT0rIbbAmDHRx11X1GJmaWilspq11QwQj5HrCRvdq1PNC9KRdahjde7foZwCRbpukb4JRjGHOciXTzhLkKACuHtekQC+BcDOcf2LoAcFre5yJMrwHSVC+GXgAIgV9sAHwqQvxcZeHJXQOUrCK6ADMZukVNcDDrAAAAAElFTkSuQmCCAAAAAAAAAAAAAAAAAAAAAAAAAA=="); +} diff --git a/modular/titlebar_icon/mirc_7.css b/modular/titlebar_icon/mirc_7.css new file mode 100644 index 0000000..c5b9248 --- /dev/null +++ b/modular/titlebar_icon/mirc_7.css @@ -0,0 +1,3 @@ +:root { + --titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAIgSURBVDhPXZAf2PJQGMZ3HRgEwSB4IfjggyAYDAbBIAgGgyAIgsFgMBgEwSAIPhgEQRAEwSB4IQiCweCF4IUXgmAwGASDQff7nNO/b53r+l17nvuc+37OmcSXZkXQ+nceNf8KNv/VL00YH0u11hhvrwLTT+AsMlH70RU9L4EdphhT7Ucl/E1JZ76gmutXiGquxGbHuWAwKzAKC3S9nPpcfN1VASug3s4E+ugMtbd8BbR7C0ouoNsp9GEC1fqENohhOGdxWBsk9KydQGjDE9rd+Sug1Q3hrS+08QNeC4yQJudk/hZ1VTuK+m6nAGMGj2/0v9DqzMQG/960pKK5q4xuGD81sf7qAdwl3ziA1xXN3L9pKWm7pyYdlBqOLfnJnvqoLj/ZPGjImA9veH0dqu7eAnZkuAaNJ5+8n1E9USqsKKT8VlHGCuJ/DFOrfgvgU65uA4XGBKLnYX1WYcH1fIRpj+GyY9hNZARmDdKaNh7wKZzrmALoICdq0lOIxQfdLO2jPLZRHJrI9iomPQpYcsOUDHfEJI9qgwKIWU1Gsafrf/1BebJwORpIlm3M7Q/4Bj1j/jYxJIN4ks5QEgH12Zoh3zL8LJiYKoyPxSdwAz/MmVJfOg3kKpnon4xlhjRq4bys4TRniAMKNRU4+j2ETyjtBjIycCb3Pm2TkfAoIBw1cVxpOG87OEUdxKEGt6PcAvgE/w3nHZpma3WMVKWCJEnSLy2BBAWWLCo4AAAAAElFTkSuQmCC"); +} diff --git a/modular/titlebar_icon/mirc_7_inverted.css b/modular/titlebar_icon/mirc_7_inverted.css new file mode 100644 index 0000000..b5e162a --- /dev/null +++ b/modular/titlebar_icon/mirc_7_inverted.css @@ -0,0 +1,3 @@ +:root { + --titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAMQSURBVDhPTZB7SFRZGMBP5zrThqNzR5tsMhvL1mwnyyyM/KciInXLyoW1ptSslOzFFEY1udqahG2uu2lsZVH0/KMWbTUKtAfLUqwRRJEQ7SPabWzZ3Zyg50zBr3Ovjzzw4/u+33e+7x6uME5pYn1QgYl7UJ5YR4l7X0upu+6RQvV6We3ed2fVmFrdHDZOccIeug6+N6nLuczlnd1mfne/qrM7uFgeGOgbriH3Z4pGVx/vGxdihesrbje+5+DcABfWP+dS+UuOLnxq1ka8URvmXNH/Zm3QOOcPvCP99I0LkT9iK7/Uv2FP5h386a2sG3+IrZObqZ/XZbodaRfZPPE0vpRTA+5L55aPC/JiNtJR+5zt09r5QuWq/i7PsYFLNc9Ml+dYb7hdRhzs+saFWGQvoa3mH8o8ZzFy00UPctGrTZerYr8zcsOZJ8dWyPmqx3jHNZBjKzAbRhxwkStMl61ivzNyw4kJ38QGFRgkG9TGMGbL0AES+hjvs/DDMo3GfI2KuUnk6lm9C5KqdU6/dXLstZPDL+NI+trOlVAsbSEHrYoLimbF6A0RhB96CHV+QudeC7uzNGo+1xJFoj+S8sAoZl3VyWzXce+I5IxaWN1toypgo+KJDf9fNlylknevV1I9SyPUbuWKP4LKeVqLMJ+4uR8rCT4re3tcFNzTWX5XZ1JVBJ9VaiSXabzrySP8IJnQzRheXPewTS0T8apx5FUcTer5hxTxazV8T+LJvOpgZoeDEQWS0DUroXsuwt0LCHdlcqtpLPsLbfhmyusirliy899R5PzqIOuGg7iVkrLfRpL+YxTp56MYni/pOWvhVauV35ssbJutsWmGbNmUIdPMn+j0Stb96WJ6m53prXacSyVr7seSemwoqUetxC6R/PfTOAJHLPx9wEJnhYXK+VZWpcrjRR6pC+NCSddwppwcxpQTw3AslhTfjiKlXiPlWw19oeR7r86DU2k8bcsg0JzBrYZUSqZGUJAiZwt7tgwqiM4a8pH5vUT1EixWXyv0yKAawDtBsixZPlr6qdwlhBAfAJkz9Tuj0O+XAAAAAElFTkSuQmCC"); +} diff --git a/modular/titlebar_icon/msn.css b/modular/titlebar_icon/msn.css new file mode 100644 index 0000000..50ad113 --- /dev/null +++ b/modular/titlebar_icon/msn.css @@ -0,0 +1,3 @@ +:root { + --titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAM6SURBVDhPhZJrUIxRGMePMUiDkUaMmeRSQy7lMijklg+lBg1DG8Nu6EalJFqxU7JtbcnSZd+tbMm2W3RZpdVlG7GpKJemZqKLiC9tYYsti/17rdf0gRm/mWfmzHPO7z/PnHPI/1A9rRKyLu38tPHgiiFZUV4K0/4b3dCAe6ky/nHF3YIspkXiq6kXXHUw8hu5YAv2giyciQsJl+8x22MYjUZzdXMKgD5ESytwX9MROTzyxX7H7QioDSpU9hXiKBWHmZ4cEDNnjIx8ncuov9Hr9Qviyq6hl47YVwbwMjrkD9qfhGzO40L8rhr8xxVwTcrHtD25IDPC0Nun3cqoY4hkcoUlJwdkay0M34zTdZ91y6cd8YB7Bh9bhBLYBJeBuD4EWZAKeuJJjDZGV1c9L+9mCOKTwvGspSHsV48THfmIrFgHs20BIM4iEGspmlq1USbhD/TU4568yO949VZML4cwikH4cFNxRqh839nd62Pv5qydYOsEMscVvuF8DaON8Wagpb2uR43+4Ud0AGCgK6ZkBIt9xThSwkNO23mklPuDFeeBRbuW4kTUqVqd7uMSRick9/UXsNOvQGdoNwW8pCtCVURXKKg3aXg+WghZcyICqVNYH8LGOPs1ILOXoFajuWgKSNR8794dGYAuQyd0tMxrzIJSS0HSI0PRcDmaR8uRUZ8OjjgOm6K4sPHyo/+DB8jyIPT09nFMIfStTvyOH07F3Q0NordZELTU4FglBeVoDao+VICvvg7vNBFcooWwY8diiuMBjN+SDStPSm8K+ENQHR/BVaWwDroKtioZssF7yOkuRnipFLtEFJzOSWDnL4GFy1lMXHUS5t5qI6MSUveqRehZGAur/Zmw2BcK3+p4iDpvQ9Agg+/NbGxPzMbqqDzYBhbAwk2MSY6HMctPAUYn5JIy85lVaBiIbRosD+3Enls8cDWZOHlHDK90MTbEXMey0wWYH3AHZm5yTHY4C/3Xb9aMTj+n9j07LKegrrJxgBtzi6p3SOCAJY+FjzQRrgIRVp6RYN5xOab6lICsVWCt941+Rv03Ta/bg/mq3Kb9qYKBzbykTy7R0n5Wck2roOilQtM2GPj7FCE/Ab+l9dhxypy/AAAAAElFTkSuQmCC"); +} diff --git a/modular/titlebars.css b/modular/titlebars.css index 4d40413..bd58f68 100644 --- a/modular/titlebars.css +++ b/modular/titlebars.css @@ -194,7 +194,7 @@ html.platform-win:not(.app-focused) [class*="winButton-"]:hover { top: 6px !important; left: 7px !important; padding: 0 !important; - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAM6SURBVDhPhZJrUIxRGMePMUiDkUaMmeRSQy7lMijklg+lBg1DG8Nu6EalJFqxU7JtbcnSZd+tbMm2W3RZpdVlG7GpKJemZqKLiC9tYYsti/17rdf0gRm/mWfmzHPO7z/PnHPI/1A9rRKyLu38tPHgiiFZUV4K0/4b3dCAe6ky/nHF3YIspkXiq6kXXHUw8hu5YAv2giyciQsJl+8x22MYjUZzdXMKgD5ESytwX9MROTzyxX7H7QioDSpU9hXiKBWHmZ4cEDNnjIx8ncuov9Hr9Qviyq6hl47YVwbwMjrkD9qfhGzO40L8rhr8xxVwTcrHtD25IDPC0Nun3cqoY4hkcoUlJwdkay0M34zTdZ91y6cd8YB7Bh9bhBLYBJeBuD4EWZAKeuJJjDZGV1c9L+9mCOKTwvGspSHsV48THfmIrFgHs20BIM4iEGspmlq1USbhD/TU4568yO949VZML4cwikH4cFNxRqh839nd62Pv5qydYOsEMscVvuF8DaON8Wagpb2uR43+4Ud0AGCgK6ZkBIt9xThSwkNO23mklPuDFeeBRbuW4kTUqVqd7uMSRick9/UXsNOvQGdoNwW8pCtCVURXKKg3aXg+WghZcyICqVNYH8LGOPs1ILOXoFajuWgKSNR8794dGYAuQyd0tMxrzIJSS0HSI0PRcDmaR8uRUZ8OjjgOm6K4sPHyo/+DB8jyIPT09nFMIfStTvyOH07F3Q0NordZELTU4FglBeVoDao+VICvvg7vNBFcooWwY8diiuMBjN+SDStPSm8K+ENQHR/BVaWwDroKtioZssF7yOkuRnipFLtEFJzOSWDnL4GFy1lMXHUS5t5qI6MSUveqRehZGAur/Zmw2BcK3+p4iDpvQ9Agg+/NbGxPzMbqqDzYBhbAwk2MSY6HMctPAUYn5JIy85lVaBiIbRosD+3Enls8cDWZOHlHDK90MTbEXMey0wWYH3AHZm5yTHY4C/3Xb9aMTj+n9j07LKegrrJxgBtzi6p3SOCAJY+FjzQRrgIRVp6RYN5xOab6lICsVWCt941+Rv03Ta/bg/mq3Kb9qYKBzbykTy7R0n5Wck2roOilQtM2GPj7FCE/Ab+l9dhxypy/AAAAAElFTkSuQmCC"); + background-image: var(--titlebar-icon); background-repeat: no-repeat; } [class^="wordmarkWindows-"]::after {