diff --git a/modular/9x_bot_tag.css b/modular/9x_bot_tag.css new file mode 100644 index 0000000..9c4105c --- /dev/null +++ b/modular/9x_bot_tag.css @@ -0,0 +1,57 @@ +[class*="botTag-"] { + font-size: 0%; + padding: 0 !important; + background: none !important; +} + +[class*="botTag-"]:not([class*="botTagCompact-"]) { + margin-left: 6px; +} + +[class*="botTag-"] [class*="botText-"] { + font-size: 0; + display: none; +} + +:not([class^="repliedMessage-"]) [class*="botTagCompact-"] { + margin-right: -6px !important; +} +[class^="repliedMessage-"] [class*="botTagCompact-"] { + margin-right: 4px !important; + margin-left: 4px !important; +} + +[class*="botTag-"] svg[class^="botTagVerified-"] { + width: 16px; + height: 16px; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABlSURBVDhPzY5RCsAwCEM9+m6+TYsj2ujaj8EePGitCZXfchKXGMsHcaGIB7NNCQ/cOnYvCqYQ6jwzUhICqBPmnxY4+Rx8+0EG30xSoIQlB2dmEVbmZWZToIyFOtiGEQxsBTcRuQCANOfCY5uAHgAAAABJRU5ErkJgggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); +} + +[class*="botTag-"] svg[class^="botTagVerified-"] > path { + display: none; +} + +[class*="botTag-"]:after { + visibility: visible; + content: ""; + width: 16px; + height: 16px; + vertical-align: middle; + position: relative; + top: 0; + margin-left: 0; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABxSURBVDhP1Y9RDgARDEQd3dHczHayyog22v3bSV5QPFU4tdYeZVxZQbG1dgUZgiVBIRrq4BTgBVm6YD8o6AbvF38jwIGTkOCGK8ggV3ScUWMIFs32MzEF1n/5VQV1VyDLTcDgHM83wRdGRzNayCAp5QETRCGPhz4v+gAAAABJRU5ErkJgggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); + background-size: 16px 16px; +} + +[class*="message-"] [class*="botTag-"]:after { + top: 4px !important; +} + +[class*="message-"][class*="compact-"] [class*="botTag-"]:after { + top: 3px !important; +} + +[class^="repliedMessage-"] [class*="botTagCompact-"]:after { + top: 1px !important; +} \ No newline at end of file diff --git a/modular/base.css b/modular/base.css new file mode 100644 index 0000000..71d2f53 --- /dev/null +++ b/modular/base.css @@ -0,0 +1,1284 @@ + /* BASE THEME START */ + + /* 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); + } + + [data-popout-root], + html { + --brand-experiment: 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-"], + [class^="app-"] { + background-color: transparent !important; + } + + html:not(.overlay) body { + background-color: transparent !important; + } + + [class^="menu-"] [class^="item-"]:active, + [class^="menu-"] [class^="item-"][class*="focused-"], + [class*="lookFilled-"][class*="colorBrand-"]:not([class*="buttonColor-"]), + [class*="lookFilled-"][class*="colorBrandNew-"]:not([class*="buttonColor-"]), + [style*="background-color: rgb(114, 137, 218)"]:not([class*="swatch-"]), + [class^="slider-"] [class^="bar-"] [class^="barFill-"], + [class^="control-"] + [class^="container-"][style*="background-color: rgb(67, 181, 129);"] { + background-color: var(--accent) !important; + } + + [style*="border-color: rgb(114, 137, 218)"], + [class*="lookOutlined-"][class*="colorBrand-"] { + border-color: var(--accent) !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; + } + + [class*="mentioned-"]:before { + background-color: var(--accent); + } + + [class^="slider-"] [class^="bar-"], + [class^="control-"] + [class^="container-"][style*="background-color: rgb(114, 118, 125);"] { + background-color: var(--background-secondary) !important; + } + + [class^="container-"] > [class^="slider-"] > svg { + display: none; + } + + [class^="autocomplete-"] { + border: none !important; + background-color: var(--background-floating) !important; + box-shadow: 0 2px 5px 0 var(--background-secondary) !important; + } + + [class^="autocomplete-"] [class*="selectorSelected-"], + [class^="autocomplete-"] [class*="autocompleteRow-"] [class*="selected-"] { + background-color: var(--background-secondary) !important; + } + + [class*="autocompleteRowHeading-"] { + font-size: 14px !important; + } + + [class^="autocomplete-"] [class*="categoryHeader-"] { + background-color: var(--background-floating) !important; + } + + [class*="avatarSpeaking-"], + [class^="avatar-"][class*="speaking-"] { + box-shadow: 0 0 0 2px var(--status-online), + 0 0 0 3px var(--background-secondary) !important; + } + + [class^="voiceUsers-"] [class^="avatarContainer-"] { + overflow: visible; + } + + [class^="peopleColumn-"] { + background: var(--background-primary); + } + + [class^="itemCard-"] [class*="inset-"] { + background-color: var(--background-primary) !important; + } + + [class*="outer-"][class*="interactive-"]:hover { + background-color: var(--background-modifier-hover) !important; + } + + [class^="base-"] > [class^="content-"] > [class^="container-"] { + background: var(--background-primary); + } + + .mention[class*="wrapper-"] { + color: var(--accent); + background: rgba(var(--accent-rgb), 0.1); + } + + .mention[class*="wrapper-"]:hover { + color: #ffffff; + background: var(--accent); + } + + [class*="mentioned-"] .mention.interactive:hover { + color: var(--accent) !important; + } + + [class^="mediaBarGrabber-"], + [class^="mediaBarProgress-"], + [class^="mediaBarProgress-"]:after, + [class^="mediaBarProgress-"]:before { + background-color: var(--accent) !important; + } + + [class^="reaction-"] { + background-color: var(--secondary); + border: none; + border-radius: 4px !important; + } + + [class^="reaction-"]:hover, + [class^="reaction-"][class*="reactionMe-"] { + background-color: var(--highlight); + } + + [class^="reaction-"][class*="reactionMe-"] [class*="reactionCount-"], + [class^="reaction-"]:hover [class*="reactionCount-"] { + color: var(--_color15); + } + + [class^="reaction-"] [class*="reactionCount-"] { + color: var(--text); + } + + [class^="uploadModal-"], + [class^="uploadModal-"] [class^="footer-"], + [class^="layerContainer-"] + [class^="layer-"] + [class^="focusLock-"] + [class^="container-"], + [class^="layerContainer-"] + [class^="layer-"] + [class^="focusLock-"] + [class^="container-"] + [class*="footer-"], + [class^="layerContainer-"] + [class^="layer-"] + [class^="focusLock-"] + [class*="modalSize-"], + [class^="layerContainer-"] + [class^="layer-"] + [class^="focusLock-"] + [class*="modalSize-"] + [class*="footer-"], + [class^="layerContainer-"] + [class^="layer-"] + [class^="focusLock-"] + [class*="modalRoot-"], + [class^="layerContainer-"] + [class^="layer-"] + [class^="focusLock-"] + [class*="modalRoot-"] + [class*="footer-"] { + background-color: var(--background-primary) !important; + } + + [class^="uploadModal-"] [class^="footer-"], + [class^="layerContainer-"] + [class^="layer-"] + [class^="focusLock-"] + [class^="container-"] + [class*="footer-"] { + box-shadow: none; + } + + /* Channel icons */ + [class^="containerDefault-"] [class*="modeUnread-"] svg[class^="icon-"], + [class^="containerDefault-"]:not(:hover) + [class*="modeUnread-"] + [class^="name-"] { + color: var(--accent); + } + [class^="containerDefault-"] [class*="modeUnread-"] [class^="unread-"] { + background-color: var(--accent); + } + + [class^="containerDefault-"] + [class*="iconVisibility-"]:hover + svg[class^="icon-"], + [class^="containerDefault-"] + [class*="iconVisibility-"]:hover + [class^="name-"], + [class^="wrapper-"]:hover + > [class^="content-"] + > [class^="mainContent-"] + > [class^="iconContainer-"] + > svg[class^="icon-"] { + color: var(--interactive-hover) !important; + } + + /* Status colors */ + rect[fill="#43b581"], + path[fill="#43b581"], + rect[fill="#3ba55c"], + path[fill="#3ba55c"], + rect[fill="rgba(67, 181, 129, 1)"], + rect[fill="rgba(59, 165, 92, 1)"], + rect[mask="url(#svg-mask-status-online)"][fill="#ffffff"], + rect[mask="url(#svg-mask-status-online-mobile)"][fill="#ffffff"], + rect[fill="hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%)"], + path[fill="hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%)"] { + fill: var(--status-online); + } + + rect[fill="#faa61a"], + path[fill="#faa61a"], + rect[fill="rgba(250, 166, 26, 1)"], + rect[mask="url(#svg-mask-status-idle)"][fill="#ffffff"], + rect[mask="url(#svg-mask-status-idle-mobile)"][fill="#ffffff"], + rect[fill="hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%)"], + path[fill="hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%)"] { + fill: var(--status-idle); + } + + rect[fill="#f04747"], + path[fill="#f04747"], + rect[fill="#ed4245"], + path[fill="#ed4245"], + rect[fill="rgba(240, 71, 71, 1)"], + rect[mask="url(#svg-mask-status-dnd)"][fill="#ffffff"], + rect[mask="url(#svg-mask-status-dnd-mobile)"][fill="#ffffff"], + rect[fill="hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%)"], + path[fill="hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%)"] { + fill: var(--status-dnd); + } + + rect[fill="#747f8d"], + path[fill="#747f8d"], + rect[mask="url(#svg-mask-status-offline)"][fill="#ffffff"], + rect[mask="url(#svg-mask-status-offline-mobile)"][fill="#ffffff"], + rect[fill="hsl(214, calc(var(--saturation-factor, 1) * 9.9%), 50.4%)"] { + fill: var(--status-offline); + } + + rect[fill="#593695"], + path[fill="#593695"], + rect[fill="rgba(89, 54, 149, 1)"], + rect[mask="url(#svg-mask-status-streaming)"][fill="#ffffff"], + rect[mask="url(#svg-mask-status-streaming-mobile)"][fill="#ffffff"], + rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"] { + fill: var(--status-streaming); + } + + /******/ + + /* misc */ + [class*="standardSidebarView-"] + [class*="contentColumn-"]:not([class*="contentColumnWide-"]) { + max-width: 100%; + } + + [class*="standardSidebarView-"] [class*="sidebarRegion-"] { + flex: 0; + } + + [class*="unreadBar-"] { + margin: 4px; + border-radius: 4px !important; + } + + [class*="unreadBar-"][class*="mention-"] { + background-color: var(--red) !important; + } + + [class^="numberBadge-"] { + border-radius: 4px !important; + background-color: var(--red) !important; + } + + [class*="containerDefault-"] [class*="listDefault-"] { + padding-left: 8px !important; + } + [class*="containerDefault-"] + [class*="listDefault-"] + [class^="avatarContainer-"] { + margin-left: 6px !important; + } + [class*="containerDefault-"] [class*="listDefault-"] > [class^="clickable-"] { + padding-left: 0 !important; + } + [class*="containerDefault-"] + [class*="listDefault-"] + > [class^="clickable-"] + > [class^="content-"] { + margin-left: 0 !important; + } + [class*="containerDefault-"] [class*="listDefault-"] > [class^="separator-"] { + width: 100% !important; + margin: 3px !important; + } + + [class^="nowPlayingColumn-"] { + display: none; + } + + /* Avatars */ + [class*="avatar-"], + [class*="avatar-"] [class*="image-"], + [class*="callAvatar-"], + [class*="callAvatar-"] [class*="speaking-"], + [class*="avatarDefault-"], + [class*="avatarSpeaking-"], + [class*="avatar-"] [class*="inner-"], + [class*="callAvatarVoice-"], + [class*="callAvatarWrapper-"] [class*="speaking-"], + [class^="messagesWrapper-"] + [class^="scrollerInner-"] + [class^="message-"] + [class*="header-"] + [class*="avatar-"] + [class*="large-"], + [class^="messagesWrapper-"] + [class^="scrollerInner-"] + [class^="message-"] + [class*="header-"] + [class*="avatar-"] + [class*="wrapper-"], + [class^="messagesWrapper-"] + [class^="scrollerInner-"] + [class^="message-"] + [class*="contents-"] + [class*="avatar-"], + [class^="messagesWrapper-"] + [class^="scrollerInner-"] + [class^="wrapper-"] + [class*="contents-"] + [class*="avatar-"], + [class^="messageGroupCozy-"] [class*="contents-"] [class*="avatar-"], + [class*="autocomplete-"] + [class*="autocompleteInner-"] + [class*="autocompleteRow-"] + [class*="content-"] + [class*="wrapper-"], + [class*="guildsWrapper-"] + [class*="guilds-"] + [class*="guild-"] + [class*="guildInner-"], + div[class^="listItem-"] foreignObject img, + div[class^="listItem-"] foreignObject a[class^="button-"], + div[class^="listItem-"] foreignObject [class^="childWrapper-"], + div[class^="listItem-"] foreignObject [class^="folder-"], + div[class^="listItem-"] div[class^="wrapperSimple-"], + [class^="circleIconButton-"], + [class^="folderIconWrapper-"], + [class^="avatarContainer-"] { + border-radius: 10% !important; + } + + [class^="folderIconWrapper-"] + > [class^="closedFolderIconWrapper-"] + > [class^="icon-"] { + border-radius: 6px !important; + } + + [class*="avatarMasked-"], + [class*="maskProfile-"], + [class*="mask-"], + [class*="avatar-"] svg[class*="mask-"] > foreignObject, + [class*="avatarWrapper-"] svg[class*="mask-"] > foreignObject, + [class*="avatarHint-"] > foreignObject, + [class*="wrapper-"] svg[class*="mask-"] > foreignObject, + [class*="callAvatarWrapper-"] svg[class*="callAvatarMask-"] > foreignObject, + div[class^="listItem-"] [class^="wrapper-"] > svg > foreignObject, + [class^="bannerSVGWrapper-"] > foreignObject { + mask: none !important; + mask-image: none !important; + -webkit-mask-image: none !important; + } + + /* chat box */ + [class*="chat-"] [class*="chatContent-"] form { + position: relative; + margin: 0; + } + + [class*="chat-"] form [class*="typing-"] { + position: absolute; + top: -2px; + left: 10px; + } + + [class*="channelTextArea-"] { + margin-bottom: 10px !important; + margin-top: 24px !important; + padding: 0 !important; + } + + [class*="channelTextArea-"] [class*="inner-"] { + border-radius: 6px; + } + + [class*="sansAttachButton-"] { + padding-left: 10px !important; + } + + .typing .ellipsis, + [class*="typing-"] span[class*="ellipsis-"] { + display: none; + } + + form [class*="typing-"] { + background-color: transparent !important; + } + + [class^="scrollerSpacer-"] { + height: 4px !important; + } + + [class^="chatContent-"] > form:before { + display: none !important; + } + + /* Embeds */ + [class*="embed-"] { + border-radius: 0 0 0 0; + border-color: var(--interactive-active); + } + [class*="embed-"] [class*="embedInner-"] { + border-color: transparent; + } + [class*="embed-"] [class*="embedAuthorIcon-"] { + border-radius: 0; + } + [class*="embed-"] [class^="grid-"] { + padding: 8px !important; + } + [class*="embed-"] [class*="embedMargin-"] { + margin-top: 4px !important; + } + [class*="embed-"] [class*="embedMedia-"] { + margin-top: 4px !important; + } + [class*="embed-"] [class*="embedTitle-"] { + font-size: 16px !important; + font-weight: 200 !important; + } + [class*="embed-"] [class*="embedFieldName-"] { + font-weight: 500 !important; + } + [class*="embed-"] [class*="embedDescription-"], + [class*="embed-"] [class*="embedFieldName-"], + [class*="embed-"] [class*="embedFieldValue-"] { + font-size: 16px !important; + } + [class*="embed-"] [class*="embedFooterText-"] { + font-size: 0.8em; + } + + /* User Popout */ + @keyframes active-stripes { + from { + background-position: 40px; + } + to { + background-position: 0px; + } + } + + [class*="avatarHint-"], + [class*="avatarNormal-"], + [class*="avatarWrapper-"] [class*="wrapper-"], + [class*="avatarWrapper-"] [class*="image-"], + [class*="replyAvatar-"] { + border: none; + border-radius: 10% !important; + } + + [class*="background-"] [class*="wrapper-"] [class*="image-"] { + border: 2px solid var(--interactive-active); + } + + [class^="userPopout-"] { + border-radius: 0px; + border: none !important; + overflow: hidden scroll !important; + } + + [class^="userPopout-"]::-webkit-scrollbar { + display: none; + } + + [class^="userPopout-"] [class^="banner-"] { + /*box-shadow: 0 2px 5px 0 var(--background-secondary) !important;*/ + background-image: url("https://totallynotavir.us/i/5rw87lo8.gif"); + background-repeat: no-repeat; + image-rendering: pixelated; + } + [class^="userPopout-"] [class^="body-"] { + overflow: hidden visible !important; + } + + [class^="userPopout-"] [class*="headerTop-"], + [class^="userPopout-"] [class*="headerTop-"]:after { + box-shadow: inset 0px -36px 24px -1px var(--background-secondary); + } + + [class^="userPopout-"] [class*="headerTop-"] { + padding: 40px 8px 12px; + } + + [class^="userPopout-"] [class^="headerContainer-"], + [class^="userPopout-"] [class*="bodyTitle-"], + [class^="userPopout-"] [class*="userInfoTitle-"] { + padding: 4px 10px; + margin-bottom: 0 !important; + } + + [class^="userPopout-"] [class^="bodyInnerWrapper"] { + background-color: var(--background-secondary); + } + + [class^="userPopout-"] [class^="avatar-"] { + background-color: transparent; + } + + [class^="userPopout-"] [class*="avatarWrapper-"] { + left: 8px; + } + + /*[class^="userPopout-"] [class*="headerTop-"] { + display: grid; + grid-template-columns: auto 1fr; + grid-template-areas: "avatar info" "status status" "last last" "join join" "date date" "badges badges"; + align-items: center; + justify-content: flex-start; + padding: 10px; + box-sizing: border-box; + transform: translateZ(0); + }*/ + + [class^="userPopout-"] [class*="headerTag-"] { + color: var(--text-normal); + justify-content: flex-start; + } + + [class^="userPopout-"] + [class*="headerTag-"] + span:not([class*="botText-"]):not([class*="username-"]) { + margin-right: 3px; + } + + /*[class^="userPopout-"] [class*="avatarWrapper-"] > [class^="wrapper-"] { + width: 48px !important; + height: 48px !important; + }*/ + + [class^="userPopout-"] [class*="avatarWrapper-"] > [class^="avatarHint-"] { + display: none; + } + + [class^="userPopout-"] + [class*="avatarWrapper-"] + > [class^="avatar-"] + > svg + > foreignObject { + x: 8px; + } + + [class^="userPopout-"] + [class*="avatarWrapper-"] + > [class^="avatar-"] + > svg + > rect { + x: 0; + y: 0; + width: 8px; + height: 100%; + mask: none !important; + } + + [class^="userPopout-"] [class*="headerTop-"] > [class*="avatarWrapper-"] { + margin-bottom: 0; + } + [class^="userPopout-"] [class*="headerTop-"] > [class*="headerText-"] { + display: block; + } + + [class^="userPopout-"] [class*="headerTop-"] > [class*="headerText-"] > div { + width: 100%; + text-align: left; + line-height: normal; + align-items: center; + } + + [class^="userPopout-"] [class*="headerTop-"] [class*="headerNameWrapper-"] { + overflow: hidden; + text-overflow: ellipsis; + } + [class^="userPopout-"] + [class*="headerTop-"] + [class*="headerNameWrapper-"] + [class*="headerName-"] { + white-space: nowrap; + } + [class^="userPopout-"] + [class*="headerTop-"] + [class*="headerTagUsernameNoNickname-"] { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + [class^="userPopout-"] [class^="activity-"] { + background: transparent; + position: relative; + padding: 0; + } + + [class^="userPopout-"] [class^="activityUserPopout-"], + [class^="userPopout-"] [class^="body-"], + [class^="userPopout-"] [class^="body-"] [class^="bodyInnerWrapper-"] { + padding: 0; + } + + [class^="userPopout-"] [class^="body-"]::-webkit-scrollbar { + display: none; + } + + [class^="userPopout-"] + [class^="activityUserPopout-"] + > [class^="bodyNormal-"], + [class^="userPopout-"] + [class^="activityUserPopout-"] + > [class^="bodyAlignCenter-"], + [class^="userPopout-"] [class*="aboutMeBody-"], + [class^="userPopout-"] [class*="userInfoBody-"], + [class^="userPopout-"] + [class^="body-"] + > [class^="bodyInnerWrapper-"] + > [class^="markup-"] { + padding: 8px; + } + + [class^="userPopout-"] [class*="headerTop-"] [class^="customStatus-"] { + margin-top: 10px; + grid-area: status; + text-align: left; + } + [class^="userPopout-"] + [class*="headerTop-"] + [class^="customStatus-"] + [class*="customStatusSoloEmoji-"] { + height: 20px; + width: 20px; + } + [class^="userPopout-"] + [class*="headerPlaying-"] + [class*="activity-"] + > [class*="buttonsWrapper-"] { + margin-top: 0; + padding: 0 10px; + position: relative; + } + [class^="userPopout-"] + [class*="headerPlaying-"] + [class*="activity-"] + > [class*="buttonsWrapper-"] + > [class*="listeningActionsUserPopout-"] { + height: 34px; + position: absolute; + top: 10px; + left: -11px; + width: calc(100% + 20px); + border-bottom: none; + border-top: 1px solid var(--interactive-active); + } + + [class^="userPopout-"] [class*="actionsStreamPreview-"], + [class^="userPopout-"] [class*="listeningActionsUserPopout-"] { + position: absolute; + bottom: -35px; + left: 0; + width: 100%; + box-sizing: border-box; + margin-top: 0; + display: flex; + align-items: center; + justify-content: center; + height: 34px; + padding: 0 5px; + } + [class^="userPopout-"] [class*="listeningActionsUserPopout-"] > span, + [class^="userPopout-"] + [class*="listeningActionsUserPopout-"] + [class*="contents-"] { + margin: 0; + } + [class^="userPopout-"] + [class*="listeningActionsUserPopout-"] + [class*="iconButton-"] { + max-width: 62px; + } + [class^="userPopout-"] [class*="assetsLargeImageStreamPreview-"], + [class^="userPopout-"] [class*="assetsLargeImageUserPopout-"], + [class^="userPopout-"] [class*="assetsLargeImageUserPopoutXbox-"] { + width: 45px; + height: 45px; + border-radius: 10%; + } + + [class^="userPopout-"] [class^="protip-"] { + display: none; + } + + [class^="userPopout-"] [class*="header-"], + [class^="userPopout-"] [class*="headerTop-"], + [class^="userPopout-"] [class*="headerPlaying-"], + [class^="userPopout-"] [class*="headerNormal-"], + [class^="userPopout-"] [class*="headerXbox-"], + [class^="userPopout-"] [class*="headerSpotify-"], + [class^="userPopout-"] [class*="headerStreaming-"] { + border-bottom: none !important; + } + + [class^="userPopout-"] [class*="buttonsWrapper-"] { + margin-top: 0; + padding: 0 8px 8px; + } + [class^="userPopout-"] [class*="buttonsWrapper-"]:empty { + padding: 0; + } + + [class^="userPopout-"] [class*="headerXbox-"] [class*="avatarStatus-"] { + background-color: #107c10; + } + [class^="userPopout-"] [class*="headerSpotify-"] [class*="avatarStatus-"] { + background-color: #1db954; + } + [class^="userPopout-"] [class*="headerStreaming-"] [class*="avatarStatus-"] { + background-color: var(--status-streaming); + } + + [class^="userPopout-"] [class^="body-"], + [class^="userPopout-"] [class*="footer-"], + [class^="userPopout-"] [class*="activityUserPopout-"], + [class^="userPopout-"] [class*="scrollerWrap-"] { + background: var(--background-secondary) !important; + } + + [class^="userPopout-"] [class*="note-"], + [class^="userPopout-"] [class*="footer-"] { + padding: 8px; + } + + [class^="userPopout-"] [class*="note-"] textarea, + [class^="userPopout-"] [class*="footer-"] [class*="inputDefault-"] { + border: 1px solid var(--tertiary); + } + [class^="userPopout-"] + [class*="footer-"] + [class*="inputDefault-"]::placeholder, + [class^="userPopout-"] [class*="note-"] textarea::placeholder { + color: var(--interactive-active); + } + + [class^="userPopout-"] [class^="timeBarUserPopout-"] { + margin-top: 0; + padding: 0 8px 8px; + } + + [class^="userPopout-"] + [class^="activityUserPopout-"] + [class^="spotifyIcon-"] { + top: 4px !important; + right: 8px !important; + } + + [class^="userPopout-"] [class^="aboutMeSection-"], + [class^="userPopout-"] [class^="userInfoSection-"], + [class^="userPopout-"] + [class^="body-"] + > [class^="bodyInnerWrapper-"] + > [class^="textRow-"] { + margin: 0 !important; + } + + [class^="userPopout-"] [class*="rolesList-"] { + margin: 0; + padding: 8px; + } + + [class^="userPopout-"] + [class^="body-"] + > [class^="bodyInnerWrapper-"] + > [class^="textRow-"] + > [class^="markdown-"] { + color: var(--text-normal); + } + + [class^="userPopout-"] [class^="customStatus-"] { + margin: 0; + padding: 0 8px 8px; + } + + [class^="userPopout-"] .mutual-guilds { + padding: 0 !important; + padding-top: 8px !important; + } + + [class^="userPopout-"] [class*="role-"] { + background: var(--background-modifier-selected); + } + + /* Profiles */ + [class^="focusLock-"][aria-modal="true"] + > [class^="root-"] + [class*="profileBanner-"] { + background: url("https://totallynotavir.us/i/5rw87lo8.gif"); + background-size: cover; + background-repeat: no-repeat; + image-rendering: pixelated; + } + + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] { + margin-top: 8px; + } + + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="infoScroller-"], + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="infoScroller-"] + > [class^="userInfoSection-"], + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="listScroller-"], + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="listScroller-"] + > [class^="activityProfile-"] { + padding: 0 !important; + } + + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="infoScroller-"] + > [class^="userInfoSection-"] + > [class^="userInfoText-"], + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="infoScroller-"] + > [class^="userInfoSection-"] + > [class^="note-"], + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="listScroller-"] + > [class^="activityProfile-"] + > [class^="bodyNormal-"], + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="listScroller-"] + > [class^="activityProfile-"] + > [class^="bodyAlignCenter-"] { + padding: 8px !important; + margin: 0; + } + + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="infoScroller-"] + > [class^="userInfoSection-"] + > [class^="note-"] + textarea { + border: 1px solid var(--tertiary); + } + + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="infoScroller-"] + > [class^="userInfoSection-"] + > [class^="connectedAccounts-"] + > [class^="connectedAccount-"] { + margin: 8px; + } + + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="listScroller-"] + > [class^="activityProfile-"] + > [class^="headerContainer-"] { + margin-bottom: 0; + } + + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="listScroller-"] + > [class^="activityProfile-"] + [class^="spotifyIcon-"] { + top: 3px; + right: 8px; + } + + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="topSection-"] + > header + > [class^="header-"] + [class^="avatar-"] { + border: none !important; + background-color: transparent; + } + + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="topSection-"] + > header + > [class*="nameTag-"] { + margin-top: 64px !important; + } + + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="topSection-"] + > header + > [class^="customStatusActivity-"] { + padding-bottom: 8px !important; + } + + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="topSection-"] + > [class^="tabBarContainer-"] + > [class^="tabBar-"] { + height: 36px !important; + } + + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="topSection-"] + > [class^="tabBarContainer-"] + > [class^="tabBar-"] + > [class^="tabBarItem-"] { + margin-right: 24px !important; + } + + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="infoScroller-"] + > [class^="userInfoSection-"] + > [class*="userInfoSectionHeader-"], + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="listScroller-"] + > [class^="activityProfile-"] + [class*="headerTextNormal-"] { + padding: 4px 10px !important; + margin-bottom: 0 !important; + } + + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="infoScroller-"] + > [class^="userInfoSection-"] + + [class*="userInfoSection-"] { + border: none !important; + } + + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="infoScroller-"] + > [class^="userInfoSection-"] + > [class^="connectedAccounts-"] { + margin-top: 0px; + } + + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="infoScroller-"] + > [class^="connectedAccounts-"]::before { + color: var(--header-secondary) !important; + padding: 4px 10px; + text-transform: uppercase; + font-family: var(--font-display); + font-weight: 700; + font-size: 12px; + line-height: 16px; + height: 16px; + width: 100%; + content: "Connected Accounts"; + position: absolute; + } + + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="infoScroller-"] + > [class^="connectedAccounts-"] + > [class^="connectedAccountsColumn-"] { + margin-top: 16px; + } + + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="infoScroller-"] + > [class^="connectedAccounts-"] + > [class^="connectedAccountsColumn-"]:nth-child(1) { + padding-left: 8px; + } + + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="infoScroller-"] + > [class^="connectedAccounts-"] + > [class^="connectedAccountsColumn-"] + > [class^="connectedAccountContainer-"] { + background-color: var(--background-secondary); + } + + /* Reactions Modal */ + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="scroller-"] { + background: var(--background-secondary); + } + + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + [class^="reactors-"] { + background-color: var(--background-primary); + } + + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="scroller-"] + > [class^="reactionSelected-"] { + background-color: var(--background-modifier-active); + } + + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="scroller-"] + > [class^="reactionDefault-"]:hover { + background-color: var(--background-modifier-hover); + } + + /* Change Nickname Modal */ + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"]:not([class*="carouselModal-"]) { + background-color: var(--background-primary); + } + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > form + > [class^="flex-"]:nth-child(3), + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="flex-"]:nth-child(3) { + background: var(--background-secondary); + } + + /* Delete Modal */ + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="content-"] + > [class^="message-"] { + background-color: var(--background-primary); + } + + /* dropdown menus */ + [class^="css-"][class$="-menu"] { + z-index: 9999; + background-color: var(--background-secondary); + border-color: var(--background-primary); + } + + /* listen along */ + [id^="popout_"] [class^="userList-"] { + border-color: var(--background-primary) !important; + } + [id^="popout_"] [class^="userList-"] [class^="header-"] { + background-color: var(--background-secondary) !important; + color: var(--header-primary) !important; + } + [id^="popout_"] [class^="userList-"] [class^="content-"] { + background-color: var(--background-primary) !important; + } + + [class*="moreUsers-"] { + background-color: var(--background-tertiary) !important; + } + + /* misc */ + [class^="uploadModal-"] { + border-radius: 0; + } + + #splash { + background-color: var(--primary); + } + + /*[class*="pictureInPicture-"] { + display: none; diff --git a/modular/collapsing_members.css b/modular/collapsing_members.css new file mode 100644 index 0000000..7ccadc9 --- /dev/null +++ b/modular/collapsing_members.css @@ -0,0 +1,74 @@ +[class^="chat-"] + > [class^="content-"] + > [class^="container-"] > [class^="membersWrap-"], + [class^="chat-"] > [class^="content-"] > [class^="membersWrap-"] { + width: 50px !important; + min-width: 50px !important; + } + + [class^="chat-"] + > [class^="content-"] + > [class^="container-"]:hover > [class^="membersWrap-"], + [class^="chat-"] > [class^="content-"] > [class^="membersWrap-"]:hover { + width: 240px !important; + } + + [class^="chat-"] > [class^="content-"] > [class^="container"] > [class^="membersWrap-"], + [class^="chat-"] > [class^="content-"] > [class^="membersWrap-"] { + min-width: 0; + min-height: 100%; + background-color: var(--background-secondary); + } + + [class^="chat-"] + > [class^="content-"] > [class^="container-"] + > [class^="membersWrap-"] + > [class^="members-"],[class^="chat-"] + > [class^="content-"] + > [class^="membersWrap-"] + > [class^="members-"] { + width: 58px !important; + } + + [class^="chat-"] + > [class^="content-"] > [class^="container-"]:hover > + [class^="membersWrap-"] + > [class^="members-"], + [class^="chat-"] + > [class^="content-"] > + [class^="membersWrap-"]:hover + > [class^="members-"]{ + width: 240px !important; + } + + [class^="chat-"] + > [class^="content-"] > [class^="container-"] > + [class^="membersWrap-"] + > [class^="members-"] + > [class^="content-"] + > [class^="membersGroup-"], + [class^="chat-"] + > [class^="content-"] > + [class^="membersWrap-"] + > [class^="members-"] + > [class^="content-"] + > [class^="membersGroup-"] { + height: 0; + padding-top: 12px; + } + + [class^="chat-"] + > [class^="content-"] > [class^="container-"]:hover > + [class^="membersWrap-"] + > [class^="members-"] + > [class^="content-"] + > [class^="membersGroup-"], + [class^="chat-"] + > [class^="content-"] > + [class^="membersWrap-"]:hover + > [class^="members-"] + > [class^="content-"] + > [class^="membersGroup-"] { + height: 40px; + padding-top: 24px; + } \ No newline at end of file diff --git a/modular/cozy_compact.css b/modular/cozy_compact.css new file mode 100644 index 0000000..6ac5174 --- /dev/null +++ b/modular/cozy_compact.css @@ -0,0 +1,145 @@ +html:not(.a11y-font-scaled-down) + [class*="message-"]:not([class*="systemMessage-"]):not([class*="compact-"]), +html:not(.a11y-font-scaled-down) + [class^="messagesWrapper-"] + [class^="scrollerInner-"] + > [class^="wrapper-"], +html:not(.a11y-font-scaled-down) + [class^="messagesWrapper-"] + [class^="scrollerInner-"] + > [class^="container-"]:not([class*="systemMessage-"]):not([class*="compact-"]) { + padding: 0 !important; + padding-left: 16px !important; +} + +[class*="message-"]:not([class*="systemMessage-"]):not([class*="compact-"]), +[class^="messagesWrapper-"] + [class^="scrollerInner-"] + > [class^="wrapper-"]:not([class*="systemMessage-"]):not([class*="compact-"]), +[class^="messagesWrapper-"] + [class^="scrollerInner-"] + > [class^="container-"]:not([class*="systemMessage-"]):not([class*="compact-"]) { + padding-left: 16px !important; +} + +[class*="message-"][class*="systemMessage-"] { + padding-left: 32px !important; +} + +[class*="message-"][class*="systemMessage-"] [class^="iconContainer-"] { + margin-right: 0; + width: 24px; +} + +html:not(.a11y-font-scaled-down) + [class*="message-"]:not([class*="compact-"]) + > [class^="contents-"] + > [class^="header-"], +html:not(.a11y-font-scaled-down) + [class^="messagesWrapper-"] + [class^="scrollerInner-"] + > [class^="wrapper-"]:not([class*="compact-"]) + > [class^="contents-"] + > [class^="header-"], +html:not(.a11y-font-scaled-down) + [class*="message-"]:not([class*="compact-"]) + > [class^="wrapper-"] + > [class^="contents-"] + > [class^="header-"] { + padding-left: 0 !important; + margin-left: 24px; + padding-bottom: 0 !important; +} + +.a11y-font-scaled-down + [class*="message-"]:not([class*="compact-"]) + > [class^="contents-"] + > [class^="header-"], +.a11y-font-scaled-down + [class^="messagesWrapper-"] + [class^="scrollerInner-"] + > [class^="wrapper-"]:not([class*="compact-"]) + > [class^="contents-"] + > [class^="header-"] + .a11y-font-scaled-down + [class*="message-"]:not([class*="compact-"]) + > [class^="wrapper-"] + > [class^="contents-"] + > [class^="header-"] { + margin-left: calc(24px - 4.5rem); +} + +[class*="message-"] + > [class^="wrapper-"] + > [class^="contents-"] + [class^="avatar-"], +[class^="messagesWrapper-"] + [class^="scrollerInner-"] + > [class^="wrapper-"] + > [class^="contents-"] + [class^="avatar-"], +[class*="message-"] > [class^="contents-"] [class^="avatar-"] { + width: 20px; + height: 20px; + left: 16px; +} + +[class*="message-"] + > [class^="wrapper-"] + > [class^="contents-"] + [class^="avatar-"] { + left: 0 !important; +} + +[class^="messagesWrapper-"] + [class^="scrollerInner-"] + > [class^="wrapper-"] + > [class^="contents-"], +[class*="message-"] > [class^="contents-"], +[class*="message-"] > [class^="wrapper-"] > [class^="contents-"] { + margin-left: 0; + padding: 0; +} + +[class*="message-"][class*="systemMessage-"] > [class^="container-"] { + padding: 0; +} + +[class*="cozy-"][class*="hasThread-"]::after { + display: none; +} + +[class*="message-"] > [class^="wrapper-"] { + padding-left: 0; +} + +[class^="messagesWrapper-"] [class^="scrollerInner-"]:after { + height: 4px !important; +} + +[class*="message-"]:not([class*="compact-"]) + [class^="contents-"] + [class*="timestampVisibleOnHover-"] { + display: none; +} + +[class^="messagesWrapper-"] [class^="scrollerInner-"] [class^="divider-"] { + margin: 4px; + height: 8px; +} + +[class^="messagesWrapper-"] [class^="scrollerInner-"] [class*="groupStart-"][class*="cozy-"] { + margin-top: 8px; +} + +div[class*="cozyMessage-"] div[class^="repliedMessage-"] { + margin-left: 33px; +} + +div[class*="cozyMessage-"] div[class^="repliedMessage-"]:before { + --avatar-size: 20px; + border-left: var(--spine-width) solid var(--interactive-active); + border-bottom: 0 solid var(--interactive-active); + border-right: 0 solid var(--interactive-active); + border-top: var(--spine-width) solid var(--interactive-active); +} \ No newline at end of file diff --git a/modular/custom_bg.css b/modular/custom_bg.css new file mode 100644 index 0000000..7abf031 --- /dev/null +++ b/modular/custom_bg.css @@ -0,0 +1,147 @@ +.theme-dark, + :root { + --transparent_background-primary: rgba( + var(--primary-rgb), + var(--primary-alpha) + ) !important; + --transparent_background-secondary: rgba( + var(--secondary-rgb), + var(--secondary-alpha) + ) !important; + --transparent_background-tertiary: rgba( + var(--tertiary-rgb), + var(--tertiary-alpha) + ) !important; +} + +[class^="appMount-"] { + background: var(--custom-background), var(--primary) !important; +} + +[class^="chat-"] > [class^="content-"] > [class^="chatContent-"], +[class^="chat-"] > [class^="title-"], +[class^="markup-"] code, +[class*="embedFull-"], +[class^="chat-"] > [class^="title-"] [class^="searchBar-"], +[class^="content-"] + > [class^="sidebar-"] + > [class^="privateChannels-"] + > [class^="searchBar-"] + > [class^="searchBarComponent-"], +[class^="standardSidebarView-"] > [class^="contentRegion-"], +[class^="accountProfileCard-"], +[class^="base-"] > [class^="content-"] > [class^="wrapper-"], +[class^="perksModal-"], +[class^="base-"] > [class^="content-"] > [class^="container-"], +[class^="gameUpdates-"], +[class^="applicationStore-"], +[class^="pageWrapper-"], +.messageLinkPreview-container { + background-color: var(--transparent_background-primary) !important; +} +[class^="channelTextArea-"], +[class^="content-"] > [class^="sidebar-"], +[class^="chat-"] > [class^="content-"] > [class^="container-"], +[class^="standardSidebarView-"] + > [class^="sidebarRegion-"] + [class^="sidebarRegionScroller-"] { + background: var(--transparent_background-secondary) !important; +} +nav[class*="guilds-"], +body > #app-mount > .platform-web > [class^="popout-"] > [class^="content-"] > [class^="wrapper-"] { + background: var(--transparent_background-tertiary) !important; +} + +[class^="chat-"], +[class^="content-"] > [class^="sidebar-"] > [class^="container-"], +[class^="content-"] > [class^="sidebar-"] > [class^="privateChannels-"], +[class^="content-"] + > [class^="sidebar-"] + > [class^="privateChannels-"] + > [class^="scroller-"], +nav[class*="guilds-"] > ul > [class^="scroller-"], +[class^="content-"] > [class^="sidebar-"] > [class^="panels-"], +[class^="chat-"] + > [class^="content-"] + > [class^="membersWrap-"] + > [class^="members-"] + > div, +[class^="channelTextArea-"] > [class^="scrollableContainer-"], +[class^="chat-"] > [class^="title-"] [class^="children-"]:after, +[class^="chat-"] + > [class^="content-"] + > [class^="chatContent-"] + [class^="scrollerInner-"] + > [class^="wrapper-"], +[class^="chat-"] + > [class^="content-"] + > [class^="chatContent-"] + [class^="scrollerInner-"] + > [class^="wrapper-"] + > [class^="wrapper-"], +[class^="standardSidebarView-"], +[class^="standardSidebarView-"] + > [class^="contentRegion-"] + [class^="contentRegionScroller-"], +[class^="base-"] + > [class^="content-"] + > [class^="wrapper-"] + > [class^="navigationBar-"], +[class^="peopleColumn-"], +[class^="base-"] + > [class^="content-"] + > [class^="container-"] + > [class*="container-"], +[class^="base-"] + > [class^="content-"] + > [class^="container-"] + > [class^="scroller-"], +[class^="base-"] + > [class^="content-"] + > [class^="container-"] + > [class*="container-"] + > [class^="table-"] + > [class*="header-"], +[class^="applicationStore-"] [class^="headerBar-"], +[class^="applicationStore-"] [class^="scroller-"], +#gm-settings-inject, +[class^="base-"] + > [class^="content-"] + > [class^="container-"] + > section + > section[class^="headerBarContainer-"], +[class^="chat-"] + > [class^="content-"] + > [class^="container-"] + > [class^="membersWrap-"] + > [class^="members-"], +[class^="chat-"] + > [class^="content-"] + > [class^="container-"] + > [class^="membersWrap-"], +[class^="chat-"] + > [class^="content-"] + > [class^="container-"] + > [class^="membersWrap-"] + > [class^="members-"] + > div, +body > #app-mount > .platform-web > [class^="popout-"] > [class^="content-"] > [class^="wrapper-"] > [class^="callContainer-"] { + background: transparent !important; +} + + +#gm-settings-inject [class^="auto-"]::-webkit-scrollbar-track, +#gm-settings-inject[class^="auto-"]::-webkit-scrollbar-track { + background: transparent !important; + border: none; +} +#gm-settings-inject [class^="auto-"]::-webkit-scrollbar-thumb, +#gm-settings-inject[class^="auto-"]::-webkit-scrollbar-thumb { + background: var(--interactive-normal); + border: none; +} +#gm-settings-inject [class^="auto-"]::-webkit-scrollbar, +#gm-settings-inject[class^="auto-"]::-webkit-scrollbar { + width: 12px !important; + height: 12px !important; +} \ No newline at end of file diff --git a/modular/font/custom.css b/modular/font/custom.css new file mode 100644 index 0000000..0db57ee --- /dev/null +++ b/modular/font/custom.css @@ -0,0 +1,6 @@ +.theme-dark, + :root { + --font-primary: var(--xmc_custom_font), sans-serif !important; + --font-display: var(--font-primary) !important; + --font-code: var(--xmc_custom_font_mono), monospace !important; +} \ No newline at end of file diff --git a/modular/font/default.css b/modular/font/default.css new file mode 100644 index 0000000..0519ecb --- /dev/null +++ b/modular/font/default.css @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/modular/font/revert_rebrand.css b/modular/font/revert_rebrand.css new file mode 100644 index 0000000..701f406 --- /dev/null +++ b/modular/font/revert_rebrand.css @@ -0,0 +1,4 @@ +.theme-dark, + :root { + --font-display: var(--font-primary) !important; +} \ No newline at end of file diff --git a/modular/font/terminus.css b/modular/font/terminus.css new file mode 100644 index 0000000..febc3b1 --- /dev/null +++ b/modular/font/terminus.css @@ -0,0 +1,112 @@ +@font-face { + font-family: "Unifont"; + src: local("Unifont"), + url(https://cynosphere.gitlab.io/Customizations/discord/assets/unifont-14.0.01.ttf) + format("truetype"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "Terminus (TTF)"; + src: local("Terminus (TTF)"), + url(https://cynosphere.gitlab.io/Customizations/discord/assets/TerminusTTF-4.47.0.ttf) + format("truetype"); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: "Terminus (TTF)"; + src: local("Terminus (TTF)"), + url(https://cynosphere.gitlab.io/Customizations/discord/assets/TerminusTTF-Bold-4.47.0.ttf) + format("truetype"); + font-weight: bold; + font-style: normal; +} +@font-face { + font-family: "Terminus (TTF)"; + src: local("Terminus (TTF)"), + url(https://cynosphere.gitlab.io/Customizations/discord/assets/TerminusTTF-Bold%20Italic-4.47.0.ttf) + format("truetype"); + font-weight: bold; + font-style: italic; +} +@font-face { + font-family: "Terminus (TTF)"; + src: local("Terminus (TTF)"), + url(https://cynosphere.gitlab.io/Customizations/discord/assets/TerminusTTF-Italic-4.47.0.ttf) + format("truetype"); + font-weight: normal; + font-style: italic; +} + +.theme-dark, + :root { + --font-primary: "Terminus (TTF) for Windows", "Terminus (TTF)", "Unifont Windows", "Unifont", + monospace !important; + --font-display: "Terminus (TTF) for Windows", "Terminus (TTF)", "Unifont Windows", "Unifont", + monospace !important; + --font-code: "Terminus (TTF) for Windows", "Terminus (TTF)", "Unifont Windows", "Unifont", + monospace !important; + + --_font-titlebars: var(--font-primary) !important; +} + +[class^="menu-"] [class^="item-"], +[class^="containerDefault-"] + > [class^="iconVisibility-"] + > [class^="content-"] + [class^="name-"] { + font-size: 16px; + text-transform: none; + font-weight: 500; +} +[class^="containerDefault-"] + > [class^="iconVisibility-"] + > [class^="mainContent-"] + [class^="name-"], +[class^="membersGroup-"], +[class^="headerContent-"] > [class^="name-"] { + font-size: 16px; + text-transform: none; + font-weight: 600; +} + +[class^="reaction-"] [class*="reactionCount-"] { + font-size: 12px; +} + +.hh2-spotify-controls-album-name, +.gm-spotify-controls-album-name, +.showTag-username { + color: var(--highlight) !important; + font-size: 0.75em !important; +} + +[class^="sidebar-"] + > [class^="container-"] + > [class^="container-"] + > [class^="header-"] + > [class^="name-"], +[class*="heading-md-medium-"], +[class*="heading-md-normal-"] { + font-size: 16px !important; +} + +[class*="edited-"], +[class*="botTag-"] [class*="botText-"], +span[class="role-tag"], +.antiDelete-deleted-suffix { + font-size: 12px !important; +} + +[class^="latin12CompactTimeStamp-"], +[class^="latin24CompactTimeStamp-"], +[class^="asianCompactTimeStamp-"], +[class^="embedFooterText-"] { + font-size: 0.75em !important; +} + +[class^="codeBlockText-"], [class^="codeLine-"] { + font-size: 12px !important; +} \ No newline at end of file diff --git a/modular/font/the_funny.css b/modular/font/the_funny.css new file mode 100644 index 0000000..2754770 --- /dev/null +++ b/modular/font/the_funny.css @@ -0,0 +1,24 @@ +@font-face { + font-family: "Pointfree"; + src: local("Pointfree"), + url(https://cynosphere.gitlab.io/Customizations/discord/assets/pointfree.ttf) + format("truetype"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "Untyped"; + src: local("Untyped"), + url(https://cynosphere.gitlab.io/Customizations/discord/assets/untyped.ttf) + format("truetype"); + font-weight: normal; + font-style: normal; +} + +.theme-dark, + :root { + --font-primary: "Comic Sans MS", cursive !important; + --font-display: "Comic Sans MS", cursive !important; + --font-code: "Pointfree", "Untyped", monospace !important; +} \ No newline at end of file diff --git a/modular/font/the_funny_(alternate_monospace).css b/modular/font/the_funny_(alternate_monospace).css new file mode 100644 index 0000000..0c5ce48 --- /dev/null +++ b/modular/font/the_funny_(alternate_monospace).css @@ -0,0 +1,24 @@ +@font-face { + font-family: "Untyped"; + src: local("Untyped"), + url(https://cynosphere.gitlab.io/Customizations/discord/assets/untyped.ttf) + format("truetype"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "Pointfree"; + src: local("Pointfree"), + url(https://cynosphere.gitlab.io/Customizations/discord/assets/pointfree.ttf) + format("truetype"); + font-weight: normal; + font-style: normal; +} + +.theme-dark, + :root { + --font-primary: "Comic Sans MS", cursive !important; + --font-display: "Comic Sans MS", cursive !important; + --font-code: "Untyped", "Pointfree", monospace !important; +} \ No newline at end of file diff --git a/modular/font/unifont.css b/modular/font/unifont.css new file mode 100644 index 0000000..5132865 --- /dev/null +++ b/modular/font/unifont.css @@ -0,0 +1,66 @@ +@font-face { + font-family: "Unifont"; + src: local("Unifont"), + url(https://cynosphere.gitlab.io/Customizations/discord/assets/unifont-14.0.01.ttf) + format("truetype"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "Unifont"; + src: local("Unifont"), + url(https://cynosphere.gitlab.io/Customizations/discord/assets/unifont-14.0.01.ttf) + format("truetype"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "Terminus (TTF)"; + src: local("Terminus (TTF)"), + url(https://cynosphere.gitlab.io/Customizations/discord/assets/TerminusTTF-4.47.0.ttf) + format("truetype"); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: "Terminus (TTF)"; + src: local("Terminus (TTF)"), + url(https://cynosphere.gitlab.io/Customizations/discord/assets/TerminusTTF-Bold-4.47.0.ttf) + format("truetype"); + font-weight: bold; + font-style: normal; +} +@font-face { + font-family: "Terminus (TTF)"; + src: local("Terminus (TTF)"), + url(https://cynosphere.gitlab.io/Customizations/discord/assets/TerminusTTF-Bold%20Italic-4.47.0.ttf) + format("truetype"); + font-weight: bold; + font-style: italic; +} +@font-face { + font-family: "Terminus (TTF)"; + src: local("Terminus (TTF)"), + url(https://cynosphere.gitlab.io/Customizations/discord/assets/TerminusTTF-Italic-4.47.0.ttf) + format("truetype"); + font-weight: normal; + font-style: italic; +} + +.theme-dark, + :root { + --font-primary: "Unifont Windows", "Unifont", monospace !important; + --font-display: "Unifont Windows", "Unifont", monospace !important; + --font-code: "Terminus (TTF) for Windows", "Terminus (TTF)", "Unifont Windows", "Unifont", + monospace !important; +} + +[class^="menu-"] [class^="item-"], +[class^="containerDefault-"] [class^="name-"], +[class^="membersGroup-"] { + font-size: 16px; + text-transform: none; + font-weight: 500; +} \ No newline at end of file diff --git a/modular/hide_tag.css b/modular/hide_tag.css new file mode 100644 index 0000000..b4b05b8 --- /dev/null +++ b/modular/hide_tag.css @@ -0,0 +1,15 @@ +section[class^="panels-"] + > [class^="container-"]:last-child + [class*="nameTag-"] { + display: none; +} + +section[class^="panels-"] > [class^="container-"]:last-child { + position: relative; +} + +section[class^="panels-"] > [class^="container-"]:last-child > div:last-child { + position: absolute; + right: 0; + padding-right: 8px; +} \ No newline at end of file diff --git a/modular/left_reply.css b/modular/left_reply.css new file mode 100644 index 0000000..38f29e4 --- /dev/null +++ b/modular/left_reply.css @@ -0,0 +1,36 @@ +[class^="channelTextArea-"] > [class^="attachedBars-"] [class^="replyBar-"], +[class^="channelTextArea-"] + > [class^="attachedBars-"] + [class^="threadSuggestionBar-"] { + background: transparent; +} + +[class^="channelTextArea-"] > [class^="attachedBars-"] [class^="replyBar-"] { + display: flex; + flex-direction: row-reverse; + align-self: flex-start; +} +[class^="channelTextArea-"] + > [class^="attachedBars-"] + [class^="replyBar-"] + > [class^="actions-"] { + flex-direction: row-reverse; +} +[class^="channelTextArea-"] + > [class^="attachedBars-"] + [class^="replyBar-"] + [class*="replyLabel-"] { + margin-left: 12px; +} + +[class^="channelTextArea-"] + > [class^="attachedBars-"] + [class^="replyBar-"] + > [class^="actions-"]::after { + position: relative; + content: ""; + background-color: var(--background-modifier-accent); + width: 1px; + height: 20px; + left: 100%; +} \ No newline at end of file diff --git a/modular/nyantro.css b/modular/nyantro.css new file mode 100644 index 0000000..b49f1d4 --- /dev/null +++ b/modular/nyantro.css @@ -0,0 +1,23 @@ +[class^="progressBarContainer-"] { + background: url("data:image/gif;base64,R0lGODlhMAAMAIAAAAxBd////yH/C05FVFNDQVBFMi4wAwEAAAAh+QQECgAAACwAAAAAMAAMAAACJYSPqcvtD6MKstpLr24Z9A2GYvJ544mhXQmxoesElIyCcB3dRgEAIfkEBAoAAAAsAQACAC0ACgAAAiGEj6nLHG0enNQdWbPefOHYhSLydVhJoSYXPO04qrAmJwUAIfkEBAoAAAAsBQABACkACwAAAiGEj6nLwQ8jcC5ViW3evHt1GaE0flxpphn6BNTEqvI8dQUAIfkEBAoAAAAsAQABACoACwAAAiGEj6nLwQ+jcU5VidPNvPtvad0GfmSJeicUUECbxnK0RgUAIfkEBAoAAAAsAAAAACcADAAAAiCEj6mbwQ+ji5QGd6t+c/v2hZzYiVpXmuoKIikLm6hXAAAh+QQECgAAACwAAAAALQAMAAACI4SPqQvBD6NysloTXL480g4uX0iW1Wg21oem7ismLUy/LFwAACH5BAQKAAAALAkAAAAkAAwAAAIghI8Joe0Po0yBWTaz3g/z7UXhMX7kYmplmo0rC8cyUgAAIfkEBAoAAAAsBQAAACUACgAAAh2Ejwmh7Q+jbIFZNrPeEXPudU74IVa5kSiYqOtRAAAh+QQECgAAACwEAAAAIgAKAAACHISPELfpD6OcqTGKs4bWRp+B36YFi0mGaVmtWQEAIfkEBAoAAAAsAAAAACMACgAAAh2EjxC36Q+jnK8xirOW1kavgd+2BYtJhmnpiGtUAAAh+QQECgAAACwAAAAALgALAAACIYSPqcvtD+MKicqLn82c7e6BIhZQ5jem6oVKbfdqQLzKBQAh+QQECgAAACwCAAIALAAJAAACHQx+hsvtD2OStDplKc68r2CEm0eW5uSN6aqe1lgAADs="); +} + +[class^="progressBarContainer-"] [class^="progressBar-"] { + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAIAAAAs6UAAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUNCQzIyREQ0QjdEMTFFMzlEMDM4Qzc3MEY0NzdGMDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUNCQzIyREU0QjdEMTFFMzlEMDM4Qzc3MEY0NzdGMDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQ0JDMjJEQjRCN0QxMUUzOUQwMzhDNzcwRjQ3N0YwOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQ0JDMjJEQzRCN0QxMUUzOUQwMzhDNzcwRjQ3N0YwOCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PovDFgYAAAAmSURBVHjaYvjPwMAAxjMZmBhA9H8INv4P4TPM/A+m04zBNECAAQBCWQv9SUQpVgAAAABJRU5ErkJggg=="); + background-size: contain; +} + +[class^="progressBarContainer-"] [class^="progressBar-"]:after { + content: ""; + background: url("data:image/gif;base64,R0lGODlhIgAVAKIHAL3/9/+Zmf8zmf/MmZmZmf+Z/wAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpDMkJBNjY5RTU1NEJFMzExOUM4QUM2MDAwNDQzRERBQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCREIzOEIzMzRCN0IxMUUzODhEQjgwOTYzMTgyNTE0QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCREIzOEIzMjRCN0IxMUUzODhEQjgwOTYzMTgyNTE0QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkM1QkE2NjlFNTU0QkUzMTE5QzhBQzYwMDA0NDNEREFDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkMyQkE2NjlFNTU0QkUzMTE5QzhBQzYwMDA0NDNEREFDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkECQcABwAsAAAAACIAFQAAA6J4umv+MDpG6zEj682zsRaWFWRpltoHMuJZCCRseis7xG5eDGp93bqCA7f7TFaYoIFAMMwczB5EkTzJllEUttmIGoG5bfPBjDawD7CsJC67uWcv2CRov929C/q2ZpcBbYBmLGk6W1BRY4MUDnMvJEsBAXdlknk2fCeRk2iJliAijpBlEmigjR0plKSgpKWvEUheF4tUZqZID1RHjEe8PsDBBwkAIfkECQcABwAsAAAAACIAFQAAA6B4umv+MDpG6zEj682zsRaWFWRpltoHMuJZCCRseis7xG5eDGp93TqS40XiKSYgTLBgIBAMqE/zmQSaZEzns+jQ9pC/5dQJ0VIv5KMVWxqb36opxHrNvu9ptPfGbmsBbgSAeRdydCdjXWRPchQPh1hNAQF4TpM9NnwukpRyi5chGjqJEoSOIh0plaYsZBKvsCuNjY5ptElgDyFIuj6+vwcJACH5BAkHAAcALAAAAAAiABUAAAOfeLrc/vCZSaudUY7Nu99GxhhcYZ7oyYXiQQ5pIZgzCrYuLMd8MbAiUu802flYGIhwaCAQDKpQ86nUoWqF6dP00wIby572SXE6vyMrlmhuu9GKifWaddvNQAtszXYCxgR/Zy5jYTFeXmSDiIZGdQEBd06QSBQ5e4cEkE9nnZQaG2J4F4MSLx8rkqUSZBeurhlTUqsLsi60DpZxSWBJugcJACH5BAkHAAcALAAAAAAiABUAAAOgeLrc/vCZSaudUY7Nu99GxhhcYZ7oyYXiQQ5pIZgzCrYuLMd8MbAiUu802flYGIhwaCAQDKpQ86nUoWqF6dP00wIby572SXE6vyMrlmhuu9GuifWaddvNwMkZtmY7AWMEgGcKY2ExXl5khFMVc0Z1AQF3TpJShDl8iASST2efloV5JTyJFpgOch8dgW9KZxexshGNLqgLtbW0SXFwvaJfCQAh+QQJBwAHACwAAAAAIgAVAAADoXi63P7wmUmrnVGOzbvfRsYYXGGe6MmF4kEOaSGYMwq2LizHfDGwIlLPNKGZfi6gZmggEAy2iVPZEKZqzakq+1xUFFYe90lxTsHmim6HGpvf3eR7skYJ3PC5tyystc0AboFnVXQ9XFJTZIQOYUYFTQEBeWaSVF4bbCeRk1meBJYSL3WbaReMIxQfHXh6jaYXsbEQni6oaF21ERR7l0ksvA0JACH5BAkHAAcALAAAAAAiABUAAAOeeLrc/vCZSaudUY7Nu99GxhhcYZ7oyYXiQQ5pIZgzCrYuLMfFlA4hTITEMxkIBMOuADwmhzqeM6mashTCXKw2TVKQyKuTRSx2wegnNkyJ1ozpOFiMLqcEU8BZHx6NYW8nVlZefQ1tZgQBAXJIi1eHUTRwi0lhl48QL0sogxaGDhMlUo2gh14fHhcVmnOrrxNqrU9joX21Q0IUElm7DQkAIfkECQcABwAsAAAAACIAFQAAA6J4umv+MDpG6zEj682zsRaWFWRpltoHMuJZCCRseis7xG5eDGp93bqCA7f7TFaYoIFAMMwczB5EkTzJllEUttmIGoG5bfPBjDawD7CsJC67uWcv2CRov929C/q2ZpcBbYBmLGk6W1BRY4MUDnMvJEsBAXdlknk2fCeRk2iJliAijpBlEmigjR0plKSgpKWvEUheF4tUZqZID1RHjEe8PsDBBwkAIfkECQcABwAsAAAAACIAFQAAA6B4umv+MDpG6zEj682zsRaWFWRpltoHMuJZCCRseis7xG5eDGp93TqS40XiKSYgTLBgIBAMqE/zmQSaZEzns+jQ9pC/5dQJ0VIv5KMVWxqb36opxHrNvu9ptPfGbmsBbgSAeRdydCdjXWRPchQPh1hNAQF4TpM9NnwukpRyi5chGjqJEoSOIh0plaYsZBKvsCuNjY5ptElgDyFIuj6+vwcJACH5BAkHAAcALAAAAAAiABUAAAOfeLrc/vCZSaudUY7Nu99GxhhcYZ7oyYXiQQ5pIZgzCrYuLMd8MbAiUu802flYGIhwaCAQDKpQ86nUoWqF6dP00wIby572SXE6vyMrlmhuu9GKifWaddvNQAtszXYCxgR/Zy5jYTFeXmSDiIZGdQEBd06QSBQ5e4cEkE9nnZQaG2J4F4MSLx8rkqUSZBeurhlTUqsLsi60DpZxSWBJugcJACH5BAkHAAcALAAAAAAiABUAAAOgeLrc/vCZSaudUY7Nu99GxhhcYZ7oyYXiQQ5pIZgzCrYuLMd8MbAiUu802flYGIhwaCAQDKpQ86nUoWqF6dP00wIby572SXE6vyMrlmhuu9GuifWaddvNwMkZtmY7AWMEgGcKY2ExXl5khFMVc0Z1AQF3TpJShDl8iASST2efloV5JTyJFpgOch8dgW9KZxexshGNLqgLtbW0SXFwvaJfCQAh+QQJBwAHACwAAAAAIgAVAAADoXi63P7wmUmrnVGOzbvfRsYYXGGe6MmF4kEOaSGYMwq2LizHfDGwIlLPNKGZfi6gZmggEAy2iVPZEKZqzakq+1xUFFYe90lxTsHmim6HGpvf3eR7skYJ3PC5tyystc0AboFnVXQ9XFJTZIQOYUYFTQEBeWaSVF4bbCeRk1meBJYSL3WbaReMIxQfHXh6jaYXsbEQni6oaF21ERR7l0ksvA0JACH5BAkHAAcALAAAAAAiABUAAAOeeLrc/vCZSaudUY7Nu99GxhhcYZ7oyYXiQQ5pIZgzCrYuLMfFlA4hTITEMxkIBMOuADwmhzqeM6mashTCXKw2TVKQyKuTRSx2wegnNkyJ1ozpOFiMLqcEU8BZHx6NYW8nVlZefQ1tZgQBAXJIi1eHUTRwi0lhl48QL0sogxaGDhMlUo2gh14fHhcVmnOrrxNqrU9joX21Q0IUElm7DQkAOw=="); + background-size: contain; + width: 25px !important; + height: 15px !important; + position: absolute; + right: -12px; + top: -6px; +} + +[class^="progressBarContainer-"] [class^="tadaIcon-"] { + display: none; +} \ No newline at end of file diff --git a/modular/old_roles.css b/modular/old_roles.css new file mode 100644 index 0000000..7e0f496 --- /dev/null +++ b/modular/old_roles.css @@ -0,0 +1,51 @@ +[class*="role-"] { + position: relative; + border-radius: 5%; + } + + [class^="role-"], [note="FIX ME WHEN WE HAVE :has()"] { + padding-left: 16px; + } + + [class^="roleRemoveButton-"] [class^="roleCircle-"] { + margin: 0 !important; + border-radius: 5% !important; + width: 100%; + height: 22px; + top: 0; + left: 0; + opacity: 0.25; + position: absolute; + z-index: 1; + } + + [class^="roleRemoveButton-"] { + position: absolute; + left: 0; + width: 100%; + height: 22px; + overflow-x: clip; + overflow-y: visible; + } + + [class^="roleName-"] { + z-index: 2; + } + + [class^="roleRemoveIcon-"] { + display: block; + position: absolute; + left: 8px; + z-index: 4; + } + + [class^="roleRemoveIcon-"] > path { + fill: #ffffff; + filter: brightness(1); + } + + [class^="roleRemoveButton-"] [class*="roleDot-"] { + width: 1em !important; + height: 1em !important; + margin-top: 0.25em; + } diff --git a/modular/old_titlebar.css b/modular/old_titlebar.css new file mode 100644 index 0000000..21e04dd --- /dev/null +++ b/modular/old_titlebar.css @@ -0,0 +1,93 @@ +[class*="wordmark-"] { + display: none !important; +} +[class*="titleBar-"] { + margin-top: 0; +} +[class*="typeWindows-"] { + height: 0px !important; + margin: 0 !important; + padding: 0 !important; + border: none !important; + box-shadow: none !important; +} +[class*="winButton-"] { + margin-top: 19px; + margin-right: 5px; + opacity: 0.3; +} +[class*="winButton-"]:hover { + opacity: 1; +} + +.platform-win [class*="headerBar-"], +.platform-win [class^="chat-"] > [class^="title-"], +.platform-win [class*="activityFeed-"] > [class*="container-"], +.platform-win [class^="libraryHeader-"], +.platform-win + [class*="spacer-"] + > [class*="container-"] + > [class*="container-"], +.platform-win + [class^="base-"] + > [class^="content-"] + > [class^="container-"] + > [class^="container-"], +.platform-win [class^="videoControls-"] [class^="headerWrapper-"] { + padding-right: 104px !important; +} + +.platform-win [class^="topControls-"] { + top: -4px; + position: relative; +} + +[class*="winButtonClose-"], +[class*="winButtonMinMax-"] { + width: 24px !important; + height: 24px !important; + margin-left: 0 !important; + opacity: 1 !important; + margin-top: 13px !important; + margin-left: 4px !important; + background-color: var(--interactive-normal) !important; +} + +[class*="winButtonClose-"] { + margin-right: 12px; +} + +[class*="winButtonClose-"] svg, +[class*="winButtonMinMax-"] svg { + display: none; +} +[class*="winButtonClose-"] { + mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMSAxaDI0djI0SDFWMXoiLz48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMjAgNy40MUwxOC41OSA2IDEzIDExLjU5IDcuNDEgNiA2IDcuNDEgMTEuNTkgMTMgNiAxOC41OSA3LjQxIDIwIDEzIDE0LjQxIDE4LjU5IDIwIDIwIDE4LjU5IDE0LjQxIDEzIDIwIDcuNDF6Ii8+PC9nPjwvc3ZnPg==") + no-repeat; + -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMSAxaDI0djI0SDFWMXoiLz48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMjAgNy40MUwxOC41OSA2IDEzIDExLjU5IDcuNDEgNiA2IDcuNDEgMTEuNTkgMTMgNiAxOC41OSA3LjQxIDIwIDEzIDE0LjQxIDE4LjU5IDIwIDIwIDE4LjU5IDE0LjQxIDEzIDIwIDcuNDF6Ii8+PC9nPjwvc3ZnPg==") + no-repeat; + background-image: none !important; +} +[class*="winButtonMinMax-"]:nth-child(3) { + mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMSAxaDI0djI0SDFWMXoiLz48cGF0aCBmaWxsPSIjRkZGIiBkPSJNOCAxM0g2djdoN3YtMkg4di01em0tMiAwaDJWOGg1VjZINnY3em03IDV2Mmg3di03aC0ydjVoLTV6bTAtMTJ2Mmg1djVoMlY2aC03eiIvPjwvZz48L3N2Zz4=") + no-repeat; + -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMSAxaDI0djI0SDFWMXoiLz48cGF0aCBmaWxsPSIjRkZGIiBkPSJNOCAxM0g2djdoN3YtMkg4di01em0tMiAwaDJWOGg1VjZINnY3em03IDV2Mmg3di03aC0ydjVoLTV6bTAtMTJ2Mmg1djVoMlY2aC03eiIvPjwvZz48L3N2Zz4=") + no-repeat; + background-image: none !important; +} +[class*="winButtonMinMax-"]:nth-child(4) { + mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMTkgMTl2LTJIN3YyaDEyeiIvPjxwYXRoIGQ9Ik0xIDI1aDI0VjFIMXYyNHoiLz48L2c+PC9zdmc+") + no-repeat; + -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMTkgMTl2LTJIN3YyaDEyeiIvPjxwYXRoIGQ9Ik0xIDI1aDI0VjFIMXYyNHoiLz48L2c+PC9zdmc+") + no-repeat; + background-image: none !important; +} +[class*="winButtonClose-"]:hover, +[class*="winButtonMinMax-"]:hover { + background-color: var(--interactive-hover) !important; +} + +[class^="typeMacOS-"][class*="unfocused-"] [class*="macButton-"], +html.platform-win:not(.app-focused) [class*="winButton-"] { + opacity: 1 !important; +} \ No newline at end of file diff --git a/modular/scheme/amoled.css b/modular/scheme/amoled.css new file mode 100644 index 0000000..472808d --- /dev/null +++ b/modular/scheme/amoled.css @@ -0,0 +1,45 @@ +.theme-dark, +:root { + --_color0: #484f58; + --_color1: #f85149; + --_color2: #3fb950; + --_color3: #d29922; + --_color4: #58a6ff; + --_color5: #bc8cff; + --_color6: #39c5cf; + --_color7: #b1bac4; + + --_color8: #6e7681; + --_color9: #ff7b72; + --_color10: #56d364; + --_color11: #e3b341; + --_color12: #79c0ff; + --_color13: #d2a8ff; + --_color14: #56d4dd; + --_color15: #f0f6fc; + + --_colorFG: var(--_color7); + + --primary: #000000; + --secondary: #000000; + --tertiary: #000000; + --primary-rgb: 0, 0, 0; + --secondary-rgb: 0, 0, 0; + --tertiary-rgb: 0, 0, 0; + + --accent: #9c4249; + --accent-rgb: 111, 47, 49; + --red: #f04747; + --text: #dcddde; + --link: #50f148; + --highlight: #232323; + --highlight-rgb: 35, 35, 35; + + --status-online: #43b581; + --status-idle: #faa61a; + --status-dnd: #f04747; + --status-offline: #747f8d; + --status-streaming: #593695; + + --titlebar-color: #060606 !important; +} \ No newline at end of file diff --git a/modular/scheme/amora.css b/modular/scheme/amora.css new file mode 100644 index 0000000..a88281f --- /dev/null +++ b/modular/scheme/amora.css @@ -0,0 +1,43 @@ +.theme-dark, +:root { + --_color0: #231d29; + --_color1: #e83f80; + --_color2: #a2baa8; + --_color3: #eacac0; + --_color4: #9985d1; + --_color5: #e68ac1; + --_color6: #aabae7; + --_color7: #dedbeb; + + --_color8: #302838; + --_color9: #f55d8f; + --_color10: #bfd1c3; + --_color11: #f0ddd8; + --_color12: #b4a4de; + --_color13: #edabd2; + --_color14: #c4d1f5; + --_color15: #edebf7; + + --_colorFG: var(--_color7); + + --primary: #302838; + --secondary: #2a2331; + --tertiary: #231d29; + --primary-rgb: 48, 40, 56; + --secondary-rgb: 42, 35, 49; + --tertiary-rgb: 35, 29, 41; + + --accent: var(--_color1); + --accent-rgb: 232, 63, 128; + --red: var(--_color6); + --text: var(--_color7); + --link: var(--_color10); + --highlight: #634e75; + --highlight-rgb: 99, 78, 117; + + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color5); + --status-offline: var(--tertiary); + --status-streaming: var(--_color4); +} \ No newline at end of file diff --git a/modular/scheme/amora_focus.css b/modular/scheme/amora_focus.css new file mode 100644 index 0000000..7898b33 --- /dev/null +++ b/modular/scheme/amora_focus.css @@ -0,0 +1,43 @@ +.theme-dark, +:root { + --_color0: #28222d; + --_color1: #e83f80; + --_color2: #a2baa8; + --_color3: #eacac0; + --_color4: #9985d1; + --_color5: #e68ac1; + --_color6: #aabae7; + --_color7: #dedbeb; + + --_color8: #302838; + --_color9: #f55d8f; + --_color10: #bfd1c3; + --_color11: #f0ddd8; + --_color12: #b4a4de; + --_color13: #edabd2; + --_color14: #c4d1f5; + --_color15: #edebf7; + + --_colorFG: var(--_color7); + + --primary: #1a1a1a; + --secondary: #171717; + --tertiary: #141414; + --primary-rgb: 26, 26, 26; + --secondary-rgb: 23, 23, 23; + --tertiary-rgb: 20, 20, 20; + + --accent: var(--_color1); + --accent-rgb: 232, 63, 128; + --red: var(--_color6); + --text: var(--_color7); + --link: var(--_color10); + --highlight: #5c5c5c; + --highlight-rgb: 92, 92, 92; + + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color5); + --status-offline: var(--tertiary); + --status-streaming: var(--_color4); +} \ No newline at end of file diff --git a/modular/scheme/annie.css b/modular/scheme/annie.css new file mode 100644 index 0000000..41ac286 --- /dev/null +++ b/modular/scheme/annie.css @@ -0,0 +1,45 @@ +.theme-dark, +:root { + --_color0: #484f58; + --_color1: #f85149; + --_color2: #3fb950; + --_color3: #d29922; + --_color4: #58a6ff; + --_color5: #bc8cff; + --_color6: #39c5cf; + --_color7: #b1bac4; + + --_color8: #6e7681; + --_color9: #ff7b72; + --_color10: #56d364; + --_color11: #e3b341; + --_color12: #79c0ff; + --_color13: #d2a8ff; + --_color14: #56d4dd; + --_color15: #f0f6fc; + + --_colorFG: var(--_color7); + + --primary: #141414; + --secondary: #111111; + --tertiary: #0c0c0c; + --primary-rgb: 20, 20, 20; + --secondary-rgb: 17, 17, 17; + --tertiary-rgb: 12, 12, 12; + + --accent: #7289da; + --accent-rgb: 114, 137, 218; + --red: #f04747; + --text: #dcddde; + --link: #00aff4; + --highlight: #747474; + --highlight-rgb: 116, 116, 116; + + --status-online: #43b581; + --status-idle: #faa61a; + --status-dnd: #f04747; + --status-offline: #747f8d; + --status-streaming: #593695; + + --titlebar-color: var(--tertiary) !important; +} \ No newline at end of file diff --git a/modular/scheme/catppuccin_frappe.css b/modular/scheme/catppuccin_frappe.css new file mode 100644 index 0000000..70ae4b1 --- /dev/null +++ b/modular/scheme/catppuccin_frappe.css @@ -0,0 +1,48 @@ +.theme-dark, +:root { + --_color0: #51576d; + --_color1: #e78284; + --_color2: #a6d189; + --_color3: #e5c890; + --_color4: #8caaee; + --_color5: #f4b8e4; + --_color6: #81c8be; + --_color7: #b5bfe2; + + --_color8: #626880; + --_color9: #e78284; + --_color10: #a6d189; + --_color11: #e5c890; + --_color12: #8caaee; + --_color13: #f4b8e4; + --_color14: #81c8be; + --_color15: #a5adce; + + --_colorFG: #c6d0f5; + + --primary: #303446; + --secondary: #292c3c; + --tertiary: #232634; + --primary-rgb: 48, 52, 70; + --secondary-rgb: 41, 44, 60; + --tertiary-rgb: 35, 38, 52; + + --accent: #8caaee; + --accent-rgb: 140, 170, 238; + --red: var(--_color1); + --text: var(--_colorFG); + --link: var(--_color14); + --highlight: #a5adce; + --highlight-rgb: 165, 173, 206; + + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color1); + --status-offline: var(--_color8); + --status-streaming: var(--_color5); + + --titlebar-color: #414559 !important; + + --interactive-hover: var(--_color6) !important; + --interactive-active: var(--_color7) !important; +} \ No newline at end of file diff --git a/modular/scheme/catppuccin_macchiato.css b/modular/scheme/catppuccin_macchiato.css new file mode 100644 index 0000000..33201f5 --- /dev/null +++ b/modular/scheme/catppuccin_macchiato.css @@ -0,0 +1,49 @@ +.theme-dark, +:root { + --_color0: #494d64; + --_color1: #ed8796; + --_color2: #a6da95; + --_color3: #eed49f; + --_color4: #8aadf4; + --_color5: #f5bde6; + --_color6: #8bd5ca; + --_color7: #b8c0e0; + + --_color8: #5b6078; + --_color9: #ed8796; + --_color10: #a6da95; + --_color11: #eed49f; + --_color12: #8aadf4; + --_color13: #f5bde6; + --_color14: #8bd5ca; + --_color15: #a5adcb; + + --_colorFG: #cad3f5; + + --primary: #24273a; + --secondary: #1e2030; + --tertiary: #181926; + --primary-rgb: 36, 39, 58; + --secondary-rgb: 30, 32, 48; + --tertiary-rgb: 35, 38, 52; + + --accent: #8aadf4; + --accent-rgb: 138, 173, 244; + --red: var(--_color1); + --text: var(--_colorFG); + --link: var(--_color14); + --highlight: #a5adcb; + --highlight-rgb: 165, 173, 203; + + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color1); + --status-offline: var(--_color8); + --status-streaming: var(--_color5); + + --titlebar-color: #363a4f !important; + + --interactive-hover: var(--_color6) !important; + --interactive-active: var(--_color7) !important; + +} \ No newline at end of file diff --git a/modular/scheme/catppuccin_mocha.css b/modular/scheme/catppuccin_mocha.css new file mode 100644 index 0000000..c9115b9 --- /dev/null +++ b/modular/scheme/catppuccin_mocha.css @@ -0,0 +1,52 @@ +.theme-dark, +:root { + --_color0: #45475a; + --_color1: #f38ba8; + --_color2: #a6e3a1; + --_color3: #f9e2af; + --_color4: #89b4fa; + --_color5: #f5c2e7; + --_color6: #94e2d5; + --_color7: #bac2de; + + --_color8: #585b70; + --_color9: #f38ba8; + --_color10: #a6e3a1; + --_color11: #f9e2af; + --_color12: #89b4fa; + --_color13: #f5c2e7; + --_color14: #94e2d5; + --_color15: #a6adc8; + + --_colorFG: #cdd6f4; + + --primary: #1e1e2e; + --secondary: #181825; + --tertiary: #11111b; + --primary-rgb: 30, 30, 46; + --secondary-rgb: 24, 24, 37; + --tertiary-rgb: 17, 17, 27; + + --accent: #89b4fa; + --accent-rgb: 137, 180, 250; + --red: var(--_color1); + --text: var(--_colorFG); + --link: var(--_color14); + --highlight: #a6adc8; + --highlight-rgb: 166, 173, 200; + + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color1); + --status-offline: var(--_color8); + --status-streaming: var(--_color5); + + --titlebar-color: #313244 !important; + + --background-mentioned: rgba(137, 180, 250, 0.2) !important; + --background-mentioned-hover: rgba(137, 180, 250, 0.15) !important; + --background-modifier-accent: rgba(137, 180, 250, 0.25) !important; + --background-modifier-active: rgba(205, 214, 244, 0.16) !important; + --background-modifier-hover: rgba(137, 180, 250, 0.08) !important; + --background-modifier-selected: rgba(137, 180, 250, 0.24) !important; +} \ No newline at end of file diff --git a/modular/scheme/custom.css b/modular/scheme/custom.css new file mode 100644 index 0000000..94e61e0 --- /dev/null +++ b/modular/scheme/custom.css @@ -0,0 +1,47 @@ +.theme-dark,:root { + --_color0: var(--xmc-custom-color0); + --_color1: var(--xmc-custom-color1); + --_color2: var(--xmc-custom-color2); + --_color3: var(--xmc-custom-color3); + --_color4: var(--xmc-custom-color4); + --_color5: var(--xmc-custom-color5); + --_color6: var(--xmc-custom-color6); + --_color7: var(--xmc-custom-color7); + + --_color8: var(--xmc-custom-color8); + --_color9: var(--xmc-custom-color9); + --_color10: var(--xmc-custom-color10); + --_color11: var(--xmc-custom-color11); + --_color12: var(--xmc-custom-color12); + --_color13: var(--xmc-custom-color13); + --_color14: var(--xmc-custom-color14); + --_color15: var(--xmc-custom-color15); + + --_colorFG: var(--xmc-custom-foreground); + + --primary: var(--xmc-custom-primary); + --secondary: var(--xmc-custom-secondary); + --tertiary: var(--xmc-custom-tertiary); + --primary-rgb: var(--xmc-custom-primary-rgb); + --secondary-rgb: var(--xmc-custom-primary-rgb); + --tertiary-rgb: var(--xmc-custom-primary-rgb); + + --accent: var(--xmc-custom-accent); + --accent-rgb: var(--xmc-custom-accent-rgb); + --red: var(--xmc-custom-red); + --text: var(--xmc-custom-text); + --link: var(--xmc-custom-link); + --highlight: var(--xmc-custom-highlight); + --highlight-rgb: var(--xmc-custom-highlight-rgb); + + --status-online: var(--xmc-custom-status-online); + --status-idle: var(--xmc-custom-status-idle); + --status-dnd: var(--xmc-custom-status-dnd); + --status-offline: var(--xmc-custom-status-offline); + --status-streaming: var(--xmc-custom-status-streaming); + + --titlebar-color: var(--xmc-custom-titlebar) !important; + + --interactive-hover: var(--xmc-custom-hover) !important; + --interactive-active: var(--xmc-custom-active) !important; +} \ No newline at end of file diff --git a/modular/scheme/everforest.css b/modular/scheme/everforest.css new file mode 100644 index 0000000..abd0659 --- /dev/null +++ b/modular/scheme/everforest.css @@ -0,0 +1,46 @@ +.theme-dark, +:root { + --_color0: #7a8478; + --_color1: #e67e80; + --_color2: #a7c080; + --_color3: #dbbc7f; + --_color4: #7fbbb3; + --_color5: #d699b6; + --_color6: #83c092; + --_color7: #d3c6aa; + + --_color8: #5c6a72; + --_color9: #f85552; + --_color10: #8da101; + --_color11: #dfa000; + --_color12: #3a94c5; + --_color13: #df69ba; + --_color14: #35a77c; + --_color15: #9da9a0; + + --_colorFG: var(--_color7); + + --primary: #323c41; + --secondary: #2b3339; + --tertiary: #1e2327; + --primary-rgb: 50, 60, 65; + --secondary-rgb: 43, 51, 57; + --tertiary-rgb: 30, 35, 39; + + --accent: var(--_color2); + --accent-rgb: 167, 192, 128; + --red: var(--_color1); + --text: var(--_color7); + --link: var(--_color12); + --highlight: var(--_color0); + --highlight-rgb: 122, 132, 120; + + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color1); + --status-offline: var(--tertiary); + --status-streaming: var(--_color5); + + --interactive-hover: var(--_color6) !important; + --interactive-active: var(--_color15) !important; +} \ No newline at end of file diff --git a/modular/scheme/gruvbox.css b/modular/scheme/gruvbox.css new file mode 100644 index 0000000..9a16939 --- /dev/null +++ b/modular/scheme/gruvbox.css @@ -0,0 +1,43 @@ +.theme-dark, +:root { + --_color0: #32302f; + --_color1: #cc241d; + --_color2: #98971a; + --_color3: #d79921; + --_color4: #458588; + --_color5: #b16286; + --_color6: #689d6a; + --_color7: #a89984; + + --_color8: #1d2021; + --_color9: #fb4934; + --_color10: #b8bb26; + --_color11: #fabd2f; + --_color12: #83a598; + --_color13: #d3869b; + --_color14: #8ec07c; + --_color15: #ebdbb2; + + --_colorFG: #d5c4a1; + + --primary: #32302f; + --secondary: #282828; + --tertiary: #1d2021; + --primary-rgb: 50, 48, 47; + --secondary-rgb: 40, 40, 40; + --tertiary-rgb: 29, 32, 33; + + --accent: var(--_color5); + --accent-rgb: 177, 98, 134; + --red: var(--_color9); + --text: var(--_colorFG); + --link: var(--_color12); + --highlight: #665c54; + --highlight-rgb: 102, 92, 84; + + --status-online: var(--_color10); + --status-idle: var(--_color11); + --status-dnd: var(--_color1); + --status-offline: var(--_color8); + --status-streaming: var(--_color13); +} \ No newline at end of file diff --git a/modular/scheme/lovelace.css b/modular/scheme/lovelace.css new file mode 100644 index 0000000..e0cee8e --- /dev/null +++ b/modular/scheme/lovelace.css @@ -0,0 +1,46 @@ +.theme-dark, +:root { + --_color0: #282a36; + --_color1: #f37f97; + --_color2: #5adecd; + --_color3: #f2a272; + --_color4: #8897f4; + --_color5: #c574dd; + --_color6: #79e6f3; + --_color7: #fdfdfd; + + --_color8: #414458; + --_color9: #ff4971; + --_color10: #18e3c8; + --_color11: #ff8037; + --_color12: #556fff; + --_color13: #b043d1; + --_color14: #3fdcee; + --_color15: #bebec1; + + --_colorFG: var(--_color7); + + --secondary: #1d1f28; + --primary: #282a36; + --tertiary: #141721; + --primary-rgb: 29, 31, 40; + --secondary-rgb: 40, 42, 54; + --tertiary-rgb: 20, 23, 33; + + --accent: var(--_color5); + --accent-rgb: 197, 116, 221; + --red: var(--_color1); + --text: var(--_color7); + --link: var(--_color12); + --highlight: var(--_color8); + --highlight-rgb: 65, 68, 88; + + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color9); + --status-offline: var(--tertiary); + --status-streaming: var(--_color5); + + --interactive-hover: var(--_color6) !important; + --interactive-active: var(--_color7) !important; +} \ No newline at end of file diff --git a/modular/scheme/nord.css b/modular/scheme/nord.css new file mode 100644 index 0000000..1075816 --- /dev/null +++ b/modular/scheme/nord.css @@ -0,0 +1,45 @@ +.theme-dark, +:root { + --_color0: #3b4252; + --_color1: #bf616a; + --_color2: #a3be8c; + --_color3: #ebcb8b; + --_color4: #81a1c1; + --_color5: #b48ead; + --_color6: #88c0d0; + --_color7: #e5e9f0; + + --_color8: #4c566a; + --_color9: #bf616a; + --_color10: #a3be8c; + --_color11: #ebcb8b; + --_color12: #81a1c1; + --_color13: #b48ead; + --_color14: #88c0d0; + --_color15: #eceff4; + + --_colorFG: #cdd3dd; + + --primary: #434c5e; + --secondary: #3b4252; + --tertiary: #2e3440; + --primary-rgb: 67, 76, 94; + --secondary-rgb: 59, 66, 82; + --tertiary-rgb: 46, 52, 64; + + --accent: #88c0d0; + --accent-rgb: 136, 192, 208; + --red: var(--_color1); + --text: var(--_colorFG); + --link: var(--_color12); + --highlight: #8fbcbb; + --highlight-rgb: 143, 188, 187; + + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color1); + --status-offline: var(--_color8); + --status-streaming: var(--_color5); + + --titlebar-color: #4c566a !important; +} \ No newline at end of file diff --git a/modular/scheme/stock.css b/modular/scheme/stock.css new file mode 100644 index 0000000..5913a3a --- /dev/null +++ b/modular/scheme/stock.css @@ -0,0 +1,45 @@ +.theme-dark, +:root { + --_color0: #484f58; + --_color1: #f85149; + --_color2: #3fb950; + --_color3: #d29922; + --_color4: #58a6ff; + --_color5: #bc8cff; + --_color6: #39c5cf; + --_color7: #b1bac4; + + --_color8: #6e7681; + --_color9: #ff7b72; + --_color10: #56d364; + --_color11: #e3b341; + --_color12: #79c0ff; + --_color13: #d2a8ff; + --_color14: #56d4dd; + --_color15: #f0f6fc; + + --_colorFG: var(--_color7); + + --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; + + --status-online: #43b581; + --status-idle: #faa61a; + --status-dnd: #f04747; + --status-offline: #747f8d; + --status-streaming: #593695; + + --titlebar-color: var(--highlight) !important; +} \ No newline at end of file diff --git a/modular/scheme/tokyo_night.css b/modular/scheme/tokyo_night.css new file mode 100644 index 0000000..642bf92 --- /dev/null +++ b/modular/scheme/tokyo_night.css @@ -0,0 +1,46 @@ +.theme-dark, +:root { + --_color0: #32344a; + --_color1: #f7768e; + --_color2: #9ece6a; + --_color3: #e0af68; + --_color4: #7aa2f7; + --_color5: #ad8ee6; + --_color6: #449dab; + --_color7: #787c99; + + --_color8: #444b6a; + --_color9: #ff7a93; + --_color10: #b9f27c; + --_color11: #ff9e64; + --_color12: #7da6ff; + --_color13: #bb9af7; + --_color14: #0db9d7; + --_color15: #acb0d0; + + --_colorFG: #a9b1d6; + + --primary: #1a1b26; + --secondary: #16161e; + --tertiary: #101014; + --primary-rgb: 26, 27, 38; + --secondary-rgb: 22, 22, 30; + --tertiary-rgb: 16, 16, 20; + + --accent: #3d59a1; + --accent-rgb: 61, 89, 161; + --red: var(--_color1); + --text: var(--_colorFG); + --link: var(--_color12); + --highlight: #565f89; + --highlight-rgb: 86, 95, 137; + + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color1); + --status-offline: var(--tertiary); + --status-streaming: var(--_color5); + + --interactive-hover: var(--_color4) !important; + --interactive-active: var(--_color15) !important; +} \ No newline at end of file diff --git a/modular/scheme/xmc.css b/modular/scheme/xmc.css new file mode 100644 index 0000000..19ddf6e --- /dev/null +++ b/modular/scheme/xmc.css @@ -0,0 +1,45 @@ +.theme-dark, +:root { + --_color0: #373e4d; + --_color1: #fa5aa4; + --_color2: #2be491; + --_color3: #fa946e; + --_color4: #63c5ea; + --_color5: #cf8ef4; + --_color6: #89ccf7; + --_color7: #edfefe; + + --_color8: #3b4252; + --_color9: #fa74b2; + --_color10: #44eb9f; + --_color11: #faa687; + --_color12: #7acbea; + --_color13: #d8a6f4; + --_color14: #a1d5f7; + --_color15: #e7f7f7; + + --_colorFG: #bbc5ff; + + --primary: #2c2c2c; + --secondary: #282828; + --tertiary: #212121; + --primary-rgb: 43, 43, 43; + --secondary-rgb: 41, 41, 41; + --tertiary-rgb: 33, 33, 33; + + --accent: #58516d; + --accent-rgb: 88, 81, 109; + --red: var(--_color1); + --text: #d2d2c8; + --link: var(--_color6); + --highlight: #404040; + --highlight-rgb: 64, 64, 64; + + --status-online: var(--_color4); + --status-idle: var(--_color3); + --status-dnd: var(--_color1); + --status-offline: var(--_color8); + --status-streaming: var(--_color5); + + --titlebar-color: var(--accent) !important; +} \ No newline at end of file diff --git a/modular/status_icons.css b/modular/status_icons.css new file mode 100644 index 0000000..2f3b497 --- /dev/null +++ b/modular/status_icons.css @@ -0,0 +1,473 @@ +[class^="member-"] [class^="avatar-"] [class*="wrapper-"] > svg, +[class^="member-"] + [class^="avatar-"] + [class*="wrapper-"] + > svg + > svg[class^="cursorDefault-"], +[class^="member-"] + [class^="avatar-"] + [class*="wrapper-"] + > svg + > svg[class^="cursorDefault-"] + > svg[class^="dots-"], +[class^="channel-"] [class^="avatar-"] [class*="wrapper-"] > svg, +[class^="channel-"] + [class^="avatar-"] + [class*="wrapper-"] + > svg + > svg[class^="cursorDefault-"], +[class^="channel-"] + [class^="avatar-"] + [class*="wrapper-"] + > svg + > svg[class^="cursorDefault-"] + > svg[class^="dots-"], +[class^="autocompleteRow"] [class*="content-"] > [class^="wrapper-"] > svg, +[class^="userInfo-"] [class^="avatar-"] > svg, +[class^="panels-"] [class^="avatar-"] > svg, +[class^="modal-"] > [class^="inner-"] [class^="avatar-"] > svg, +[class^="focusLock-"][aria-modal="true"] + > [class^="root-"] + [class^="avatar-"] + > svg, +[class^="userPopoutInner-"] [class^="avatarHoverTarget-"] > [class^="wrapper-"] > svg { + overflow: visible; +} + +[class^="member-"] + [class^="avatar-"] + [class*="wrapper-"] + > svg + > svg[class^="cursorDefault-"] + > rect, +[class^="channel-"] + [class^="avatar-"] + [class*="wrapper-"] + > svg + > svg[class^="cursorDefault-"] + > rect, +[class^="modal-"] + > [class^="inner-"] + [class^="avatar-"] + > svg + > svg[class^="cursorDefault-"] + > rect { + x: -18.5; + y: -17; +} + +[class^="member-"] + [class^="avatar-"] + [class*="wrapper-"] + > svg + > svg[class^="cursorDefault-"] + > svg[class^="dots-"] + circle, +[class^="channel-"] + [class^="avatar-"] + [class*="wrapper-"] + > svg + > svg[class^="cursorDefault-"] + > svg[class^="dots-"] + circle { + cx: -20.1; + r: 1.5; +} + +[class^="member-"] + [class^="avatar-"] + [class*="wrapper-"] + > svg + > svg[class^="cursorDefault-"] + > svg[class^="dots-"] + circle:nth-child(1), +[class^="channel-"] + [class^="avatar-"] + [class*="wrapper-"] + > svg + > svg[class^="cursorDefault-"] + > svg[class^="dots-"] + circle:nth-child(1) { + cy: -16; +} + +[class^="member-"] + [class^="avatar-"] + [class*="wrapper-"] + > svg + > svg[class^="cursorDefault-"] + > svg[class^="dots-"] + circle:nth-child(2), +[class^="channel-"] + [class^="avatar-"] + [class*="wrapper-"] + > svg + > svg[class^="cursorDefault-"] + > svg[class^="dots-"] + circle:nth-child(2) { + cy: -8; +} + +[class^="member-"] + [class^="avatar-"] + [class^="wrapper-"] + > svg + > svg[class^="cursorDefault-"] + > svg[class^="dots-"] + circle:nth-child(3), +[class^="channel-"] + [class^="avatar-"] + [class*="wrapper-"] + > svg + > svg[class^="cursorDefault-"] + > svg[class^="dots-"] + circle:nth-child(3) { + cy: 0; +} + +[class^="member-"] + [class^="avatar-"] + [class*="wrapper-"] + > svg + rect[fill="#43b581"], +[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%)"], +[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%)"] { + mask: none !important; + width: 4px; + height: 32px; + x: -4; + y: 0; +} + +[class^="autocompleteRow"] + [class*="content-"] + > [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%)"] { + mask: none !important; + width: 4px; + height: 24px; + x: -4; + 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%)"] { + mask: none !important; + width: 4px; + height: 32px; + x: 32; + 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%)"] { + mask: none !important; + width: 8px; + height: 120px; + x: 120; + y: 0; +} + +[class^="userPopoutInner-"] [class^="avatarHoverTarget-"] > [class^="wrapper-"] > svg circle, +[class^="userProfileModalInner-"] [class^="header-"] [class^="wrapper-"] > svg circle { + display: none; +} + +[class^="accountProfileCard-"] + [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%)"] { + mask: none !important; + width: 8px; + height: 80px; + x: 80; + y: 0; +} \ No newline at end of file diff --git a/modular/stylings.css b/modular/stylings.css new file mode 100644 index 0000000..d14af36 --- /dev/null +++ b/modular/stylings.css @@ -0,0 +1,151 @@ +.theme-dark, + :root { + --_font-titlebars: "Segoe UI", sans-serif !important; + + --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); + + --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); +} + +[class*="button-"][class*="lookFilled-"], +section[class^="panels-"] + [class^="container-"] + [class^="flex-"] + button[class^="button-"], +[class^="toolbar-"] [class^="iconWrapper-"] { + border-radius: 0; + background: var(--button-bg) !important; + box-shadow: var(--button-shadow) !important; +} + +div[class^="containerDefault-"][class*="selected-"] + [class^="iconVisibility-"] + > [class^="content-"], +div[class^="containerDefault-"] + [class^="iconVisibility-"][class*="modeSelected-"] + > [class^="content-"], +nav[class^="sidebar-"] div[class^="item-"][class*="selected-"], +[class^="privateChannels-"] + [class^="channel-"][class*="selected-"] + [class^="layout-"], +[class^="member-"][class*="selected-"] > [class^="layout-"], +.sidebarOverhaul [class^="channel-"][class*="selected-"] [class^="layout-"] { + border-radius: 0; + background: var(--button-bg) !important; + box-shadow: var(--button-shadow) !important; +} + +div[class^="containerDefault-"] [class^="content-"]:hover, +nav[class^="sidebar-"] div[class^="item-"]:not([class*="selected-"]):hover, +[class^="privateChannels-"] + [class^="channel-"]:not([class*="selected-"]):hover + [class^="layout-"], +[class^="member-"]:not([class*="selected-"]):hover > [class^="layout-"], +.sidebarOverhaul + [class^="channel-"]:not([class*="selected-"]):hover + [class^="layout-"] { + border-radius: 0; + background: var(--hover-bg) !important; + box-shadow: var(--hover-shadow) !important; +} + +[class^="scroller-"]::-webkit-scrollbar-thumb, +[class*="scrollerBase-"]::-webkit-scrollbar-thumb { + border-radius: 0; + background: transparent; + box-shadow: var(--scrollbar-shadow); +} + +[class^="channelTextArea-"] > [class^="scrollableContainer-"] { + border: 1px solid var(--tertiary); + border-radius: 0; +} + +[class^="toolbar-"] [class^="iconWrapper-"] { + margin: 0; + width: 32px; + height: 32px; +} + +[class^="toolbar-"] [class^="iconWrapper-"] > svg { + margin: 4px; +} + +[class^="toolbar-"] > [class^="search-"] { + margin: 0; +} + +[class^="toolbar-"] > [class^="search-"] [class^="searchBar-"] { + background-color: var(--primary); + border: 1px solid var(--tertiary); + border-radius: 0; + height: 32px; + justify-content: center; +} + +[class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > .DraftEditor-root, +[class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > [class^="icon-"] { + height: 24px; + margin-top: 2px; +} + +[class*="recentMentionsPopout-"] + > [class^="header-"] + > [class^="tabBar-"] + > [class^="tab-"] { + margin: 0; + border-radius: 0; + background: var(--button-bg) !important; + box-shadow: var(--button-shadow) !important; + font-weight: 100; + font-size: 12px !important; +} + +[class*="recentMentionsPopout-"] + > [class^="header-"] + > [class^="tabBar-"] + > [class^="tab-"]:hover, +[class*="recentMentionsPopout-"] + > [class^="header-"] + > [class^="tabBar-"] + > [class^="tab-"][class*="active-"] { + background: var(--hover-bg) !important; + box-shadow: var(--hover-shadow) !important; +} + +[class^="reaction-"] { + background-color: var(--button-bg); + box-shadow: var(--button-shadow); + border-radius: 0; +} + +[class^="reaction-"]:hover, +[class^="reaction-"][class*="reactionMe-"] { + background-color: var(--hover-bg); + box-shadow: var(--hover-shadow); +} + +[class^="reaction-"][class*="reactionMe-"] [class*="reactionCount-"], +[class^="reaction-"]:hover [class*="reactionCount-"] { + color: #ffffff; +} + +[class^="reaction-"] [class*="reactionCount-"] { + color: var(--text); +} \ No newline at end of file diff --git a/modular/textarea/fullwidth.css b/modular/textarea/fullwidth.css new file mode 100644 index 0000000..6602b6c --- /dev/null +++ b/modular/textarea/fullwidth.css @@ -0,0 +1,22 @@ +[class^="chatContent-"] > form { + padding: 0 !important; +} +[class^="chatContent-"] > form [class^="channelTextArea"] { + margin-bottom: 0 !important; +} +[class^="chatContent-"] > form [class^="channelTextArea"] > [class^="scrollableContainer-"] { + border-radius: 0 !important; +} + +[class^="chatContent-"] > form [class^="channelTextArea"] > [class^="scrollableContainer-"] > [class^="inner-"] > [class^="textArea-"], +[class^="chatContent-"] > form [class^="channelTextArea"] > [class^="scrollableContainer-"] > [class^="inner-"] > [class^="buttons-"], +[class^="chatContent-"] > form [class^="channelTextArea"] > [class^="scrollableContainer-"] > [class^="inner-"] > [class^="attachWrapper-"] > [class^="attachButton-"] { + height: 53px; +} +[class^="chatContent-"] > form [class^="channelTextArea"] > [class^="scrollableContainer-"] > [class^="inner-"] > [class^="textArea-"] > div > [class*="fontSize16Padding-"] { + padding-top: 15px !important; + padding-bottom: 15px !important; +} +[class^="chatContent-"] > form [class^="channelTextArea"] > [class^="scrollableContainer-"] > [class^="inner-"] > [class^="buttons-"] [class*="emojiButton-"] { + max-height: unset; +} \ No newline at end of file diff --git a/modular/textarea/mobile.css b/modular/textarea/mobile.css new file mode 100644 index 0000000..ed55532 --- /dev/null +++ b/modular/textarea/mobile.css @@ -0,0 +1,216 @@ +[class^="channelTextArea-"], +[class^="channelTextArea-"] > [class^="scrollableContainer-"] { + background-color: transparent !important; +} +[class^="channelTextArea-"] > [class^="scrollableContainer-"] { + overflow: hidden !important; +} +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] { + padding-left: 0 !important; +} +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="attachWrapper-"] { + margin-right: 10px; +} +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="attachWrapper-"] + > [class^="attachButton-"] { + margin-left: 0 !important; + padding: 10px; +} +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"] { + margin-right: 10px; +} +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"] + > div { + padding-left: 10px; + margin-left: 4px; +} +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] + > * { + width: 44px; + margin-right: 10px; +} + +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] + > [class^="buttonContainer-"] + > button, +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] + > .expression-picker-chat-input-button + > * { + width: 44px; +} + +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="attachWrapper-"], +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"], +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] + > * { + background-color: var(--background-secondary); + border-radius: 22px 22px 22px 22px; +} + +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] + > [class^="separator-"] { + margin-left: 0; +} + +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] + > [class^="separator-"]:before { + display: none; +} + +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] + > [class^="separator-"] + > [class^="buttonContainer-"] + > button { + width: 44px; +} + +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] + > [class^="separator-"] + > [class^="buttonContainer-"] + > button + > [class^="contents-"] { + margin-left: 4px; +} + +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] + > [class^="separator-"] + > [class^="buttonContainer-"] + > button + > [class^="contents-"] + > [class*="activeButtonChild-"] { + color: var(--interactive-active); +} + +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] + > [class^="separator-"] + > [class^="buttonContainer-"] + > button:not([disabled]) { + background-color: var(--brand-experiment); + border-radius: 22px 22px 22px 22px; +} + +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > div:not([class]) { + background-color: var(--background-secondary); +} + +[class^="channelTextArea-"] > [class^="attachedBars-"] { + background: var(--background-primary) !important; +} + +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"] { + max-height: 128px; + overflow-y: scroll; +} + +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"]::-webkit-scrollbar { + width: 16px; + height: 16px; +} + +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"]::-webkit-scrollbar-corner { + background-color: transparent; +} + +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"]::-webkit-scrollbar-thumb { + background-color: var(--scrollbar-auto-thumb); + min-height: 40px; +} + +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"]::-webkit-scrollbar-thumb, +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"]::-webkit-scrollbar-track { + border: 4px solid transparent; + background-clip: padding-box; + border-radius: 8px; +} + +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="attachWrapper-"] { + max-height: 44px; +} + +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] { + align-items: center; +} + +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"] + > div + > [class^="placeholder-"] { + left: 14px; +} \ No newline at end of file diff --git a/modular/titlebars.css b/modular/titlebars.css new file mode 100644 index 0000000..b01c5e1 --- /dev/null +++ b/modular/titlebars.css @@ -0,0 +1,293 @@ +[class^="userPopout-"] [class^="headerContainer-"], +[class^="userPopout-"] [class^="bodyTitle-"], +[class^="userPopout-"] [class^="userInfoTitle-"] { + padding: unset !important; +} + + +[class^="userPopout-"] [class^="activityUserPopout-"] [class*="headerTextNormal-"], +[class^="userPopout-"] [class*="bodyTitle-"], +[class^="userPopout-"] [class*="aboutMeTitle-"], +[class^="userPopout-"] [class*="userInfoTitle-"] { + color: var(--text) !important; + padding: 0 10px !important; + background-color: var(--titlebar-color); + box-shadow: var(--titlebar-shadow); + margin-bottom: 0; + width: 100%; + height: 28px; + box-sizing: border-box; + display: flex; + align-items: center; + font-weight: 100; + font-family: var(--_font-titlebars) !important; + font-size: 12px !important; + text-transform: none; +} + +[class*="recentMentionsPopout-"], +[class^="messagesPopoutWrap-"], +[class*="root-"][class*="popout-"] { + border-radius: 0; +} + +[class*="recentMentionsPopout-"] > [class^="header-"] { + color: var(--text) !important; + padding: 0 10px; + background-color: var(--titlebar-color); + box-shadow: var(--titlebar-shadow); + margin-bottom: 0; + height: 28px; + min-height: 28px; + box-sizing: border-box; + display: flex; + align-items: center; + font-weight: 100; + font-family: var(--_font-titlebars) !important; + font-size: 12px !important; + text-transform: none; +} + +[class*="recentMentionsPopout-"] + > [class^="header-"] + > div + > [class^="button-"] { + padding: 0; + border-radius: 0; + width: 16px; + height: 16px; + min-width: 16px; + min-height: 16px; + background-color: transparent; +} + +[class^="messagesPopoutWrap-"] > [class^="header-"] { + padding: 0; +} + +[class^="messagesPopoutWrap-"] > [class^="header-"] > [class^="wrapper-"] { + color: var(--text) !important; + padding: 0 10px; + background-color: var(--titlebar-color); + box-shadow: var(--titlebar-shadow); + margin-bottom: 0; + height: 28px; + box-sizing: border-box; + display: flex; + align-items: center; + font-weight: 100; + font-family: var(--_font-titlebars) !important; + font-size: 12px !important; + text-transform: none; +} + +.platform-win [class*="baseLayer-"] { + top: -32px; + padding-top: 32px; + } + .platform-win [class^="app-"] > [class^="app-"] > [class^="bg-"] { + top: -32px; + } + + [class^="typeWindows-"] { + margin: 3px; + padding: 6px; + height: 14px !important; + background: var(--titlebar-color); + box-shadow: var(--titlebar-shadow); + } + + [class^="typeMacOS-"] { + background-color: var(--background-tertiary); + height: 32px !important; + } + + [class^="macButtons-"] { + padding: 8px !important; + } + + [class*="winButton-"] { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAJVSURBVFhH1ZjtThQxFIa9j81ust+fV8ONIH6AiMgAAgr4A/SavAFioiJBshLxAvjLgXfI25TuTGm7pM00eZJOe872me3szJl9dtcWAoneFr6trokPyLlPjdty0aujY/l//NXK1dGX9KKX+4fy7+CzFcQkF/2790kuP+4LG/rmMWKSi15s78j0w67cXF/noG8eIya56PnGpvzJtnIoRziOmOSiZ+sbcv4+yzFFOY6Y5KKnb9/J2dq6kkPfPP59F5Nc9NfyGzldWVVi6JvHiEku+uPla/n5atkKYpKLniwuyffnL6wgJrmoD8i5T43bsGgIcdt0OpUQarVaVHLRou21QdHJZCLj8dgJxHLRkDwl6lM9UXQ0GslwOHQCsRQNyVOiPtWTLjoYDJwwRYtiipgR9ameKIoz7vf7TiCWoiF5StSneqIozrjX6z2gXq/nmOOIpWhRXhnMU6I+1RNFccbdbjcHHwrBLMtyKMt5xFJUz2s2m+rkCMbMPCXqUz3pop1OZ0bSlEWMKYoxUJbH+RlRn+qJopBot9uFixHMIQaxFGUeKPtGOc88JepTPVEUW9NqtaTRaFhBDGIpyjwXmKdEfaonimJrcPYuIJaiIXlK1Kd6SirqA0X1a+0xyq7Rx3hwjYbARWNRLdGi7bVB0ehbj8Ur82OqzO1pnhu+C092w5/nEUrwDfBphL4+Z7tGXfKU6DxFCcFCfMajr8+VFSXAJU+JzlvmAXNBfc4U1edc8pToUxTO5hbqc7bC2SVPiVbmVaQyL3eVeV32gaLR/4AIgYvGoSa368P/Q8a1fTUAAAAASUVORK5CYII="); + background-size: 42px; + background-repeat: no-repeat; + background-color: transparent !important; + width: 14px !important; + height: 14px !important; + top: -1px !important; + position: relative !important; + margin-left: 30px; + } + + [class*="macButton-"] { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAJVSURBVFhH1ZjtThQxFIa9j81ust+fV8ONIH6AiMgAAgr4A/SavAFioiJBshLxAvjLgXfI25TuTGm7pM00eZJOe872me3szJl9dtcWAoneFr6trokPyLlPjdty0aujY/l//NXK1dGX9KKX+4fy7+CzFcQkF/2790kuP+4LG/rmMWKSi15s78j0w67cXF/noG8eIya56PnGpvzJtnIoRziOmOSiZ+sbcv4+yzFFOY6Y5KKnb9/J2dq6kkPfPP59F5Nc9NfyGzldWVVi6JvHiEku+uPla/n5atkKYpKLniwuyffnL6wgJrmoD8i5T43bsGgIcdt0OpUQarVaVHLRou21QdHJZCLj8dgJxHLRkDwl6lM9UXQ0GslwOHQCsRQNyVOiPtWTLjoYDJwwRYtiipgR9ameKIoz7vf7TiCWoiF5StSneqIozrjX6z2gXq/nmOOIpWhRXhnMU6I+1RNFccbdbjcHHwrBLMtyKMt5xFJUz2s2m+rkCMbMPCXqUz3pop1OZ0bSlEWMKYoxUJbH+RlRn+qJopBot9uFixHMIQaxFGUeKPtGOc88JepTPVEUW9NqtaTRaFhBDGIpyjwXmKdEfaonimJrcPYuIJaiIXlK1Kd6SirqA0X1a+0xyq7Rx3hwjYbARWNRLdGi7bVB0ehbj8Ur82OqzO1pnhu+C092w5/nEUrwDfBphL4+Z7tGXfKU6DxFCcFCfMajr8+VFSXAJU+JzlvmAXNBfc4U1edc8pToUxTO5hbqc7bC2SVPiVbmVaQyL3eVeV32gaLR/4AIgYvGoSa368P/Q8a1fTUAAAAASUVORK5CYII="); + background-size: 42px; + background-repeat: no-repeat; + background-color: transparent !important; + width: 14px !important; + height: 14px !important; + border-radius: 0; + } + + [class^="typeMacOS-"][class*="unfocused-"] [class*="macButton-"], + html.platform-win:not(.app-focused) [class*="winButton-"] { + opacity: 0.4; + } + + [class^="typeMacOS-"][class*="unfocused-"] [class*="macButton-"]:hover, + html.platform-win:not(.app-focused) [class*="winButton-"]:hover { + opacity: 1; + } + + [class*="macButton-"] > svg, + [class*="winButton-"] > svg, + [class^="wordmarkWindows-"] > svg { + display: none; + } + + [class*="winButtonClose-"] { + margin-right: 3px; + } + + [class*="macButtonClose-"], + [class*="winButtonClose-"] { + background-position: 0px 0px; + } + [class*="macButtonClose-"]:hover, + [class*="winButtonClose-"]:hover { + background-position: 0px -14px; + } + [class*="macButtonClose-"]:active, + [class*="winButtonClose-"]:active { + background-position: 0px -28px; + } + + [class*="macButtonMaximize-"], + [class*="winButtonMinMax-"]:nth-child(3) { + background-position: -14px 0px; + } + [class*="macButtonMaximize-"]:hover, + [class*="winButtonMinMax-"]:nth-child(3):hover { + background-position: -14px -14px; + } + [class*="macButtonMaximize-"]:active, + [class*="winButtonMinMax-"]:nth-child(3):active { + background-position: -14px -28px; + } + + [class*="macButtonMinimize-"], + [class*="winButtonMinMax-"]:nth-child(4) { + background-position: -28px 0px; + } + [class*="macButtonMinimize-"]:hover, + [class*="winButtonMinMax-"]:nth-child(4):hover { + background-position: -28px -14px; + } + [class*="macButtonMinimize-"]:active, + [class*="winButtonMinMax-"]:nth-child(4):active { + background-position: -28px -28px; + } + + [class^="wordmarkWindows-"] { + width: 16px !important; + height: 16px !important; + top: 8px !important; + left: 9px !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-repeat: no-repeat; + } + [class^="wordmarkWindows-"]::after { + font-family: var(--_font-titlebars) !important; + font-size: 12px !important; + line-height: 250% !important; + color: var(--text) !important; + font-weight: 0 !important; + content: "Discord"; + position: absolute; + top: -8px; + left: 21px; + height: 17px; + opacity: 1; + } + + html.platform-win:not(.app-focused) [class^="wordmarkWindows-"]::after, + html:not(.platform-win) + #app-mount + > div:not(.app-focused) + [class^="wordmarkWindows-"]::after { + opacity: 0.4; + } + +[class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="infoScroller-"] + > [class^="userInfoSection-"] + > [class*="userInfoSectionHeader-"] { + color: var(--text) !important; + padding: 0 10px; + background-color: var(--titlebar-color); + box-shadow: var(--titlebar-shadow); + margin-bottom: 0; + height: 28px; + box-sizing: border-box; + display: flex; + align-items: center; + font-weight: 100; + font-family: var(--_font-titlebars) !important; + font-size: 12px !important; + text-transform: none; + } + + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="infoScroller-"] + > [class^="connectedAccounts-"]::before { + color: var(--text) !important; + padding: 0 10px; + background-color: var(--titlebar-color); + box-shadow: var(--titlebar-shadow); + margin-bottom: 0; + height: 28px; + width: 100%; + box-sizing: border-box; + display: flex; + align-items: center; + font-weight: 100; + font-family: var(--_font-titlebars) !important; + font-size: 12px !important; + text-transform: none; + content: "Connected Accounts"; + position: absolute; + } + + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="infoScroller-"] + > [class^="connectedAccounts-"] > [class^="connectedAccountsColumn-"] { + margin-top: 28px; + } + + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="listScroller-"] + > [class^="activityProfile-"] + [class*="headerTextNormal-"] { + color: var(--text) !important; + padding: 0 10px; + background-color: var(--titlebar-color); + box-shadow: var(--titlebar-shadow); + margin-bottom: 0; + width: 100%; + height: 28px; + box-sizing: border-box; + display: flex; + align-items: center; + font-weight: 100; + font-family: var(--_font-titlebars) !important; + font-size: 12px !important; + text-transform: none; + } diff --git a/modular/unread.css b/modular/unread.css new file mode 100644 index 0000000..ed887bd --- /dev/null +++ b/modular/unread.css @@ -0,0 +1,51 @@ +[class^="listItem-"]:hover [class^="pill-"] { + display: none; +} +[class^="listItem-"] [class^="pill-"] { + width: 52px !important; + height: 56px !important; + top: -4px !important; + left: 11px; + z-index: 100; +} +[class^="listItem-"] [class^="pill-"] > span { + display: none; +} +[class^="listItem-"] [class^="pill-"] > span[style*="height: 8px;"] { + display: block; + left: 4px; + bottom: 2px; + height: 12px !important; + width: 12px !important; + border-radius: 100% !important; + transform: none !important; + z-index: 100; + background: var(--red); +} +[class^="listItem-"] [class^="pill-"] > span[style*="height: 40px;"] { + display: block; + background: transparent; + height: 46px !important; + width: 46px !important; + right: 4px; + top: 5px !important; + border-radius: 10% !important; + box-shadow: 0 0 0 2.5px var(--accent); + z-index: 100; +} + +[class^="listItem-"]:hover [class^="pill-"] span { + opacity: 0 !important; +} + +[class^="listItem-"]:not(:hover) [class^="pill-"] span { + opacity: 0 !important; +} +[class^="listItem-"]:not(:hover) [class^="pill-"] span[style^="opacity: 0.7"], +[class^="listItem-"]:not(:hover) [class^="pill-"] span[style^="opacity: 1"] { + opacity: 1 !important; +} + +[class^="listItem-"] [class^="upperBadge-"] { + z-index: 500; +} \ No newline at end of file