diff --git a/modular/accessible_styles/italics_+_bold.css b/modular/accessible_styles/italics_+_bold.css index ecf1261..c1b77f7 100644 --- a/modular/accessible_styles/italics_+_bold.css +++ b/modular/accessible_styles/italics_+_bold.css @@ -9,5 +9,7 @@ em { span[data-slate-leaf="true"][class*="bold-"], strong { font-weight: 400; - text-shadow: 0.1px 0.1px, -0.1px -0.1px; + text-shadow: + 0.1px 0.1px, + -0.1px -0.1px; } diff --git a/modular/base.css b/modular/base.css index 20a6277..4a72a0e 100644 --- a/modular/base.css +++ b/modular/base.css @@ -186,7 +186,8 @@ [class*="modal-"][class*="root-"] { background-color: var(--background-primary); - box-shadow: var(--deprecated-card-bg) 0px 0px 0px 1px, + box-shadow: + var(--deprecated-card-bg) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 2px 10px 0px; } diff --git a/modular/collapsing_sidebar/compact-er_support.css b/modular/collapsing_sidebar/compact-er_support.css index f738315..c45c17a 100644 --- a/modular/collapsing_sidebar/compact-er_support.css +++ b/modular/collapsing_sidebar/compact-er_support.css @@ -131,17 +131,16 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class^="containerDefault-"][class*="selected-"] [class^="iconVisibility-"] - > [class^="content-"] + [class^="linkTop-"] > [class^="children-"], div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class^="containerDefault-"] [class^="iconVisibility-"][class*="modeSelected-"] - > [class^="content-"] + [class^="linkTop-"] > [class^="children-"], div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class^="iconVisibility-"]:not([class*="typeThread-"]) - > [class^="content-"] - > [class^="mainContent-"] + [class^="linkTop-"] > [class^="name-"], div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class^="containerDefault-"] @@ -149,12 +148,12 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class^="containerDefault-"] [class^="voiceUser-"] - > [class^="content-"] + [class^="linkTop-"] > [class^="icons-"], div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class^="containerDefault-"] [class^="voiceUser-"] - > [class^="content-"] + [class^="linkTop-"] > [class*="username-"] { display: none; } @@ -162,8 +161,7 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class^="containerDefault-"] [class^="iconVisibility-"][class*="typeThread-"] - > [class^="content-"] - > [class^="mainContent-"] + [class^="linkTop-"] > [class^="name-"] { margin-left: 20px; } @@ -197,9 +195,32 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) display: none; } +div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) + > nav[class^="container-"] + > [class^="container-"][class*="bottom-"] + > [class^="containerPadding-"] + > [class^="bar-"] { + width: 32px !important; +} + +div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) + > nav[class^="container-"] + > [class^="container-"][class*="bottom-"] + > [class^="containerPadding-"] + > [class^="bar-"] + > svg { + display: none; +} + div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class*="unreadBar-"] - > span { + > span, +div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) + > nav[class^="container-"] + > [class^="container-"][class*="bottom-"] + > [class^="containerPadding-"] + > [class^="bar-"] + > [class*="barText-"] { overflow: hidden; white-space: nowrap; text-overflow: clip; diff --git a/modular/collapsing_sidebar/dynamic.css b/modular/collapsing_sidebar/dynamic.css index e4626ae..9b42c38 100644 --- a/modular/collapsing_sidebar/dynamic.css +++ b/modular/collapsing_sidebar/dynamic.css @@ -131,17 +131,16 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class^="containerDefault-"][class*="selected-"] [class^="iconVisibility-"] - > [class^="content-"] + [class^="linkTop-"] > [class^="children-"], div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class^="containerDefault-"] [class^="iconVisibility-"][class*="modeSelected-"] - > [class^="content-"] + [class^="linkTop-"] > [class^="children-"], div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class^="iconVisibility-"]:not([class*="typeThread-"]) - > [class^="content-"] - > [class^="mainContent-"] + [class^="linkTop-"] > [class^="name-"], div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class^="containerDefault-"] @@ -149,12 +148,12 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class^="containerDefault-"] [class^="voiceUser-"] - > [class^="content-"] + [class^="linkTop-"] > [class^="icons-"], div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class^="containerDefault-"] [class^="voiceUser-"] - > [class^="content-"] + [class^="linkTop-"] > [class*="username-"] { display: none; } @@ -162,8 +161,7 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class^="containerDefault-"] [class^="iconVisibility-"][class*="typeThread-"] - > [class^="content-"] - > [class^="mainContent-"] + [class^="linkTop-"] > [class^="name-"] { margin-left: 20px; } @@ -197,9 +195,32 @@ display: none; } + div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) + > nav[class^="container-"] + > [class^="container-"][class*="bottom-"] + > [class^="containerPadding-"] + > [class^="bar-"] { + width: 32px !important; + } + + div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) + > nav[class^="container-"] + > [class^="container-"][class*="bottom-"] + > [class^="containerPadding-"] + > [class^="bar-"] + > svg { + display: none; + } + div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class*="unreadBar-"] - > span { + > span, + div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) + > nav[class^="container-"] + > [class^="container-"][class*="bottom-"] + > [class^="containerPadding-"] + > [class^="bar-"] + > [class*="barText-"] { overflow: hidden; white-space: nowrap; text-overflow: clip; diff --git a/modular/collapsing_sidebar/dynamic_+_compact-er_support.css b/modular/collapsing_sidebar/dynamic_+_compact-er_support.css index 2d93fe0..c5f3669 100644 --- a/modular/collapsing_sidebar/dynamic_+_compact-er_support.css +++ b/modular/collapsing_sidebar/dynamic_+_compact-er_support.css @@ -131,17 +131,16 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class^="containerDefault-"][class*="selected-"] [class^="iconVisibility-"] - > [class^="content-"] + [class^="linkTop-"] > [class^="children-"], div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class^="containerDefault-"] [class^="iconVisibility-"][class*="modeSelected-"] - > [class^="content-"] + [class^="linkTop-"] > [class^="children-"], div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class^="iconVisibility-"]:not([class*="typeThread-"]) - > [class^="content-"] - > [class^="mainContent-"] + [class^="linkTop-"] > [class^="name-"], div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class^="containerDefault-"] @@ -149,12 +148,12 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class^="containerDefault-"] [class^="voiceUser-"] - > [class^="content-"] + [class^="linkTop-"] > [class^="icons-"], div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class^="containerDefault-"] [class^="voiceUser-"] - > [class^="content-"] + [class^="linkTop-"] > [class*="username-"] { display: none; } @@ -162,8 +161,7 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class^="containerDefault-"] [class^="iconVisibility-"][class*="typeThread-"] - > [class^="content-"] - > [class^="mainContent-"] + [class^="linkTop-"] > [class^="name-"] { margin-left: 20px; } @@ -197,9 +195,32 @@ display: none; } + div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) + > nav[class^="container-"] + > [class^="container-"][class*="bottom-"] + > [class^="containerPadding-"] + > [class^="bar-"] { + width: 32px !important; + } + + div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) + > nav[class^="container-"] + > [class^="container-"][class*="bottom-"] + > [class^="containerPadding-"] + > [class^="bar-"] + > svg { + display: none; + } + div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class*="unreadBar-"] - > span { + > span, + div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) + > nav[class^="container-"] + > [class^="container-"][class*="bottom-"] + > [class^="containerPadding-"] + > [class^="bar-"] + > [class*="barText-"] { overflow: hidden; white-space: nowrap; text-overflow: clip; diff --git a/modular/collapsing_sidebar/on.css b/modular/collapsing_sidebar/on.css index 3f56646..ff4f5e6 100644 --- a/modular/collapsing_sidebar/on.css +++ b/modular/collapsing_sidebar/on.css @@ -137,17 +137,16 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class^="containerDefault-"][class*="selected-"] [class^="iconVisibility-"] - > [class^="content-"] + [class^="linkTop-"] > [class^="children-"], div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class^="containerDefault-"] [class^="iconVisibility-"][class*="modeSelected-"] - > [class^="content-"] + [class^="linkTop-"] > [class^="children-"], div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class^="iconVisibility-"]:not([class*="typeThread-"]) - > [class^="content-"] - > [class^="mainContent-"] + [class^="linkTop-"] > [class^="name-"], div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class^="containerDefault-"] @@ -155,12 +154,12 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class^="containerDefault-"] [class^="voiceUser-"] - > [class^="content-"] + [class^="linkTop-"] > [class^="icons-"], div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class^="containerDefault-"] [class^="voiceUser-"] - > [class^="content-"] + [class^="linkTop-"] > [class*="username-"] { display: none; } @@ -168,8 +167,7 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class^="containerDefault-"] [class^="iconVisibility-"][class*="typeThread-"] - > [class^="content-"] - > [class^="mainContent-"] + [class^="linkTop-"] > [class^="name-"] { margin-left: 20px; } @@ -203,9 +201,32 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) display: none; } +div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) + > nav[class^="container-"] + > [class^="container-"][class*="bottom-"] + > [class^="containerPadding-"] + > [class^="bar-"] { + width: 32px !important; +} + +div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) + > nav[class^="container-"] + > [class^="container-"][class*="bottom-"] + > [class^="containerPadding-"] + > [class^="bar-"] + > svg { + display: none; +} + div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) [class*="unreadBar-"] - > span { + > span, +div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) + > nav[class^="container-"] + > [class^="container-"][class*="bottom-"] + > [class^="containerPadding-"] + > [class^="bar-"] + > [class*="barText-"] { overflow: hidden; white-space: nowrap; text-overflow: clip; diff --git a/modular/compacter_mode.css b/modular/compacter_mode.css index 8304d3d..35cdfd6 100644 --- a/modular/compacter_mode.css +++ b/modular/compacter_mode.css @@ -347,8 +347,8 @@ button.hh2-spotify-controls-button { [class^="sidebar-"] ul[class^="content-"] > [class^="sectionDivider-"] { margin-top: 6px; } -[class^="sidebar-"] [class^="iconVisibility-"] > [class^="content-"] { - padding: 0 4px; +[class^="sidebar-"] [class^="containerDefault-"] [class^="link-"] { + padding: 4px; } [class^="sidebar-"] [class^="iconVisibility-"] @@ -384,6 +384,9 @@ button.hh2-spotify-controls-button { margin-left: 4px; margin-right: 4px; } +[class^="sidebar-"] [class^="containerDefault-"] [class^="spine-"] { + top: 2px; +} div[class^="sidebar-"]:not(:has(> [class^="side-"])) > nav[class^="container-"] > [class^="container-"][class*="clickable-"] @@ -430,25 +433,382 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])) [class^="sidebar-"] header[class^="header-"] { padding: 4px 8px; } -[class^="chat-"] > [class^="title-"] { +[class^="chat-"] > [class^="title-"], +[class^="chat-"] > section[class*="container-"], +[class^="base-"] + > [class^="content-"] + > [class^="container-"] + > section[class*="container-"], +[class^="base-"] + > [class^="content-"] + > [class^="applicationStore-"] + section[class*="container-"] { + height: 32px; + min-height: 32px; + padding: 0; +} +[class^="chat-"] > [class^="title-"][class^="libraryHeader-"]:before, +[class^="chat-"] > section[class*="container-"][class^="libraryHeader-"]:before, +[class^="base-"] + > [class^="content-"] + > [class^="container-"] + > section[class*="container-"][class^="libraryHeader-"]:before, +[class^="base-"] + > [class^="content-"] + > [class^="applicationStore-"] + section[class*="container-"][class^="libraryHeader-"]:before { + top: 31px; +} +[class^="chat-"] > [class^="title-"] > [class^="upperContainer-"], +[class^="chat-"] > section[class*="container-"] > [class^="upperContainer-"], +[class^="base-"] + > [class^="content-"] + > [class^="container-"] + > section[class*="container-"] + > [class^="upperContainer-"], +[class^="base-"] + > [class^="content-"] + > [class^="applicationStore-"] + section[class*="container-"] + > [class^="upperContainer-"] { height: 32px; } [class^="chat-"] > [class^="title-"] - [class^="toolbar-"] + > [class^="upperContainer-"] + > [class^="toolbar-"], +[class^="chat-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"], +[class^="base-"] + > [class^="content-"] + > [class^="container-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"], +[class^="base-"] + > [class^="content-"] + > [class^="applicationStore-"] + section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] { + display: grid; + grid-auto-flow: column; + grid-gap: 4px; + margin-right: 4px; +} +[class^="chat-"] + > [class^="title-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="inviteToolbar-"], +[class^="chat-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="inviteToolbar-"], +[class^="base-"] + > [class^="content-"] + > [class^="container-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="inviteToolbar-"], +[class^="base-"] + > [class^="content-"] + > [class^="applicationStore-"] + section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="inviteToolbar-"] { + display: grid; + grid-auto-flow: column; + grid-gap: 4px; +} +[class^="chat-"] + > [class^="title-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"], +[class^="chat-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"], +[class^="base-"] + > [class^="content-"] + > [class^="container-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"], +[class^="base-"] + > [class^="content-"] + > [class^="applicationStore-"] + section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] > [class^="search-"] [class^="searchBar-"] { height: 24px !important; } [class^="chat-"] > [class^="title-"] - [class^="toolbar-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] > [class^="search-"] [class^="searchBar-"] - > .DraftEditor-root, + > .DraftEditor-root + [class^="chat-"] + > [class^="title-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > [class^="icon-"], [class^="chat-"] > [class^="title-"] - [class^="toolbar-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > .DraftEditor-root + [class^="chat-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > [class^="icon-"], +[class^="chat-"] + > [class^="title-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > .DraftEditor-root + [class^="base-"] + > [class^="content-"] + > [class^="container-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > [class^="icon-"], +[class^="chat-"] + > [class^="title-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > .DraftEditor-root + [class^="base-"] + > [class^="content-"] + > [class^="applicationStore-"] + section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > [class^="icon-"], +[class^="chat-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > .DraftEditor-root + [class^="chat-"] + > [class^="title-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > [class^="icon-"], +[class^="chat-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > .DraftEditor-root + [class^="chat-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > [class^="icon-"], +[class^="chat-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > .DraftEditor-root + [class^="base-"] + > [class^="content-"] + > [class^="container-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > [class^="icon-"], +[class^="chat-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > .DraftEditor-root + [class^="base-"] + > [class^="content-"] + > [class^="applicationStore-"] + section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > [class^="icon-"], +[class^="base-"] + > [class^="content-"] + > [class^="container-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > .DraftEditor-root + [class^="chat-"] + > [class^="title-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > [class^="icon-"], +[class^="base-"] + > [class^="content-"] + > [class^="container-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > .DraftEditor-root + [class^="chat-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > [class^="icon-"], +[class^="base-"] + > [class^="content-"] + > [class^="container-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > .DraftEditor-root + [class^="base-"] + > [class^="content-"] + > [class^="container-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > [class^="icon-"], +[class^="base-"] + > [class^="content-"] + > [class^="container-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > .DraftEditor-root + [class^="base-"] + > [class^="content-"] + > [class^="applicationStore-"] + section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > [class^="icon-"], +[class^="base-"] + > [class^="content-"] + > [class^="applicationStore-"] + section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > .DraftEditor-root + [class^="chat-"] + > [class^="title-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > [class^="icon-"], +[class^="base-"] + > [class^="content-"] + > [class^="applicationStore-"] + section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > .DraftEditor-root + [class^="chat-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > [class^="icon-"], +[class^="base-"] + > [class^="content-"] + > [class^="applicationStore-"] + section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > .DraftEditor-root + [class^="base-"] + > [class^="content-"] + > [class^="container-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > [class^="icon-"], +[class^="base-"] + > [class^="content-"] + > [class^="applicationStore-"] + section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > .DraftEditor-root + [class^="base-"] + > [class^="content-"] + > [class^="applicationStore-"] + section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] > [class^="search-"] [class^="searchBar-"] > [class^="icon-"] { @@ -456,54 +816,234 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])) } [class^="chat-"] > [class^="title-"] - [class^="toolbar-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + [class^="iconWrapper-"], +[class^="chat-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + [class^="iconWrapper-"], +[class^="base-"] + > [class^="content-"] + > [class^="container-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + [class^="iconWrapper-"], +[class^="base-"] + > [class^="content-"] + > [class^="applicationStore-"] + section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] [class^="iconWrapper-"] { width: 24px !important; height: 24px !important; + margin: 0; } [class^="chat-"] > [class^="title-"] - [class^="toolbar-"] - [class*="iconWrapper-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + [class^="iconWrapper-"] + > svg, +[class^="chat-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + [class^="iconWrapper-"] + > svg, +[class^="base-"] + > [class^="content-"] + > [class^="container-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + [class^="iconWrapper-"] + > svg, +[class^="base-"] + > [class^="content-"] + > [class^="applicationStore-"] + section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + [class^="iconWrapper-"] > svg { margin: 0 !important; padding: 1px; } -[class^="chat-"] > [class^="title-"] [class^="toolbar-"] { - display: grid; - grid-auto-flow: column; - grid-gap: 4px; -} [class^="chat-"] > [class^="title-"] - [class^="toolbar-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="icon-"]:has(> [class^="text-md-normal-"]), +[class^="chat-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="icon-"]:has(> [class^="text-md-normal-"]), +[class^="base-"] + > [class^="content-"] + > [class^="container-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] + > [class^="icon-"]:has(> [class^="text-md-normal-"]), +[class^="base-"] + > [class^="content-"] + > [class^="applicationStore-"] + section[class*="container-"] + > [class^="upperContainer-"] + > [class^="toolbar-"] > [class^="icon-"]:has(> [class^="text-md-normal-"]) { margin-left: 4px; margin-right: 0; } -[class^="chat-"] > [class^="title-"] [class^="topic-"] { +[class^="chat-"] + > [class^="title-"] + > [class^="upperContainer-"] + [class^="topic-"], +[class^="chat-"] + > section[class*="container-"] + > [class^="upperContainer-"] + [class^="topic-"], +[class^="base-"] + > [class^="content-"] + > [class^="container-"] + > section[class*="container-"] + > [class^="upperContainer-"] + [class^="topic-"], +[class^="base-"] + > [class^="content-"] + > [class^="applicationStore-"] + section[class*="container-"] + > [class^="upperContainer-"] + [class^="topic-"] { margin-left: 4px; } -[class^="chat-"] > [class^="title-"] [class^="titleWrapper-"] { +[class^="chat-"] + > [class^="title-"] + > [class^="upperContainer-"] + [class^="titleWrapper-"], +[class^="chat-"] + > section[class*="container-"] + > [class^="upperContainer-"] + [class^="titleWrapper-"], +[class^="base-"] + > [class^="content-"] + > [class^="container-"] + > section[class*="container-"] + > [class^="upperContainer-"] + [class^="titleWrapper-"], +[class^="base-"] + > [class^="content-"] + > [class^="applicationStore-"] + section[class*="container-"] + > [class^="upperContainer-"] + [class^="titleWrapper-"] { margin-right: 4px; } [class^="chat-"] > [class^="title-"] + > [class^="upperContainer-"] > [class^="children-"] > [class^="iconWrapper-"], -[class^="chat-"] > [class^="title-"] [class^="divider-"] { +[class^="chat-"] + > [class^="title-"] + > [class^="upperContainer-"] + [class^="divider-"], +[class^="chat-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="children-"] + > [class^="iconWrapper-"], +[class^="chat-"] + > section[class*="container-"] + > [class^="upperContainer-"] + [class^="divider-"], +[class^="base-"] + > [class^="content-"] + > [class^="container-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="children-"] + > [class^="iconWrapper-"], +[class^="base-"] + > [class^="content-"] + > [class^="container-"] + > section[class*="container-"] + > [class^="upperContainer-"] + [class^="divider-"], +[class^="base-"] + > [class^="content-"] + > [class^="applicationStore-"] + section[class*="container-"] + > [class^="upperContainer-"] + > [class^="children-"] + > [class^="iconWrapper-"], +[class^="base-"] + > [class^="content-"] + > [class^="applicationStore-"] + section[class*="container-"] + > [class^="upperContainer-"] + [class^="divider-"] { margin: 0 4px; } [class^="chat-"] > [class^="title-"] + > [class^="upperContainer-"] + > [class^="children-"] + > [class^="iconWrapper-"] + > svg, +[class^="chat-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="children-"] + > [class^="iconWrapper-"] + > svg, +[class^="base-"] + > [class^="content-"] + > [class^="container-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class^="children-"] + > [class^="iconWrapper-"] + > svg, +[class^="base-"] + > [class^="content-"] + > [class^="applicationStore-"] + section[class*="container-"] + > [class^="upperContainer-"] > [class^="children-"] > [class^="iconWrapper-"] > svg { padding: 2px; } - -[class^="chat-"] [class^="toolbar-"] [class*="iconWrapper-"], -[class^="chat-"] [class^="toolbar-"] > [class*="search-"] { +[class*="iconWrapper-"] + [class^="chat-"] + > [class^="title-"] + > [class^="upperContainer-"] + > [class*="search-"], +[class*="iconWrapper-"] + [class^="chat-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class*="search-"], +[class*="iconWrapper-"] + [class^="base-"] + > [class^="content-"] + > [class^="container-"] + > section[class*="container-"] + > [class^="upperContainer-"] + > [class*="search-"], +[class*="iconWrapper-"] + [class^="base-"] + > [class^="content-"] + > [class^="applicationStore-"] + section[class*="container-"] + > [class^="upperContainer-"] + > [class*="search-"] { margin: 0 !important; } @@ -531,7 +1071,13 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])) min-height: 40px !important; } [class^="channelTextArea-"] [class^="buttons-"], -[class^="channelTextArea-"] [class^="attachWrapper-"] { +[class^="channelTextArea-"] [class^="attachWrapper-"], +[class^="chatContent-"] + > form + [class^="channelTextArea"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"] { height: 40px; } [class^="channelTextArea-"] [class^="attachWrapper-"] { diff --git a/modular/font/terminus.css b/modular/font/terminus.css index 958b7d9..ade0c67 100644 --- a/modular/font/terminus.css +++ b/modular/font/terminus.css @@ -1,6 +1,7 @@ @font-face { font-family: "Unifont"; - src: local("Unifont"), + src: + local("Unifont"), url(https://cynosphere.gitlab.io/Customizations/discord/assets/unifont-14.0.01.ttf) format("truetype"); font-weight: normal; @@ -9,7 +10,8 @@ @font-face { font-family: "Terminus (TTF)"; - src: local("Terminus (TTF)"), + src: + local("Terminus (TTF)"), url(https://cynosphere.gitlab.io/Customizations/discord/assets/TerminusTTF-4.47.0.ttf) format("truetype"); font-weight: normal; @@ -17,7 +19,8 @@ } @font-face { font-family: "Terminus (TTF)"; - src: local("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; @@ -25,7 +28,8 @@ } @font-face { font-family: "Terminus (TTF)"; - src: local("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; @@ -33,7 +37,8 @@ } @font-face { font-family: "Terminus (TTF)"; - src: local("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; diff --git a/modular/font/the_funny.css b/modular/font/the_funny.css index 8a70ba6..e661b80 100644 --- a/modular/font/the_funny.css +++ b/modular/font/the_funny.css @@ -1,6 +1,7 @@ @font-face { font-family: "Pointfree"; - src: local("Pointfree"), + src: + local("Pointfree"), url(https://cynosphere.gitlab.io/Customizations/discord/assets/pointfree.ttf) format("truetype"); font-weight: normal; @@ -9,7 +10,8 @@ @font-face { font-family: "Untyped"; - src: local("Untyped"), + src: + local("Untyped"), url(https://cynosphere.gitlab.io/Customizations/discord/assets/untyped.ttf) format("truetype"); font-weight: normal; diff --git a/modular/font/the_funny_(alternate_monospace).css b/modular/font/the_funny_(alternate_monospace).css index c2ef868..2f2ad9a 100644 --- a/modular/font/the_funny_(alternate_monospace).css +++ b/modular/font/the_funny_(alternate_monospace).css @@ -1,6 +1,7 @@ @font-face { font-family: "Untyped"; - src: local("Untyped"), + src: + local("Untyped"), url(https://cynosphere.gitlab.io/Customizations/discord/assets/untyped.ttf) format("truetype"); font-weight: normal; @@ -9,7 +10,8 @@ @font-face { font-family: "Pointfree"; - src: local("Pointfree"), + src: + local("Pointfree"), url(https://cynosphere.gitlab.io/Customizations/discord/assets/pointfree.ttf) format("truetype"); font-weight: normal; diff --git a/modular/font/unifont.css b/modular/font/unifont.css index a0a857b..b739d48 100644 --- a/modular/font/unifont.css +++ b/modular/font/unifont.css @@ -1,6 +1,7 @@ @font-face { font-family: "Unifont"; - src: local("Unifont"), + src: + local("Unifont"), url(https://cynosphere.gitlab.io/Customizations/discord/assets/unifont-14.0.01.ttf) format("truetype"); font-weight: normal; @@ -9,7 +10,8 @@ @font-face { font-family: "Unifont"; - src: local("Unifont"), + src: + local("Unifont"), url(https://cynosphere.gitlab.io/Customizations/discord/assets/unifont-14.0.01.ttf) format("truetype"); font-weight: normal; @@ -18,7 +20,8 @@ @font-face { font-family: "Terminus (TTF)"; - src: local("Terminus (TTF)"), + src: + local("Terminus (TTF)"), url(https://cynosphere.gitlab.io/Customizations/discord/assets/TerminusTTF-4.47.0.ttf) format("truetype"); font-weight: normal; @@ -26,7 +29,8 @@ } @font-face { font-family: "Terminus (TTF)"; - src: local("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; @@ -34,7 +38,8 @@ } @font-face { font-family: "Terminus (TTF)"; - src: local("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; @@ -42,7 +47,8 @@ } @font-face { font-family: "Terminus (TTF)"; - src: local("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; diff --git a/modular/scheme/amora.css b/modular/scheme/amora.css index 0ce7987..f7c9c08 100644 --- a/modular/scheme/amora.css +++ b/modular/scheme/amora.css @@ -39,6 +39,8 @@ --status-dnd: var(--_color5); --status-offline: var(--highlight); --status-streaming: var(--_color4); + + --status-warning-text: var(--primary) !important; } #splash { diff --git a/modular/scheme/amora_focus.css b/modular/scheme/amora_focus.css index ac362c9..7d390df 100644 --- a/modular/scheme/amora_focus.css +++ b/modular/scheme/amora_focus.css @@ -42,6 +42,8 @@ --status-offline: var(--highlight); --status-streaming: var(--_color4); + --status-warning-text: var(--primary) !important; + --titlebar-color: var(--accent); --wc-bright: #383838; } diff --git a/modular/stylings/windows_classic.css b/modular/stylings/windows_classic.css index e88c269..f5705af 100644 --- a/modular/stylings/windows_classic.css +++ b/modular/stylings/windows_classic.css @@ -415,7 +415,9 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])) [class^="scroller-"]::-webkit-scrollbar-button:single-button:active, [class*="scrollerBase-"]::-webkit-scrollbar-button:single-button:active { - box-shadow: inset 1px 1px var(--secondary), inset -1px -1px var(--secondary); + box-shadow: + inset 1px 1px var(--secondary), + inset -1px -1px var(--secondary); } [class^="scroller-"]:not( [class*="thin-"] @@ -498,3 +500,287 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])) [class^="popout-"][role="listbox"] > [class^="option-"]:hover { background-color: var(--accent); } + +[class^="userPopoutOuter-"] { + padding: 2px !important; + background: var(--primary) !important; + border-radius: 0 !important; + box-shadow: var(--wc-outer-edge); +} +[class^="userPopoutOuter-"] > [class^="userPopoutInner-"], +[class^="userPopoutOuter-"] + > [class^="userPopoutInner-"] + > [class^="userPopoutOverlayBackground-"] { + background: transparent; +} +[class^="userPopoutOuter-"] > [class^="userPopoutInner-"]:before { + display: none; +} +[class^="userPopoutOuter-"] + > [class^="userPopoutInner-"] + > [class*="avatarWrapper-"] { + top: 26px; + left: 8px; +} +[class^="userPopoutOuter-"] + > [class^="userPopoutInner-"] + > [class*="avatarWrapper-"] + > [class^="avatarHoverTarget-"] + > [class^="wrapper-"] { + width: 56px !important; + height: 56px !important; +} +[class^="userPopoutOuter-"] + > [class^="userPopoutInner-"] + > [class*="avatarWrapper-"] + [class*="avatarHint-"] { + width: 48px !important; + height: 48px !important; +} +[class^="userPopoutOuter-"] + > [class^="userPopoutInner-"] + > [class*="avatarWrapper-"] + > [class^="avatarHoverTarget-"] + > [class^="wrapper-"] + > svg { + width: 55px !important; + height: 55px !important; +} +[class^="userPopoutOuter-"][class*="userProfileOuterThemed-"]:after { + position: absolute; + top: 2px; + left: 2px; + content: ""; + width: calc(100% - 4px); + height: 18px; + background: linear-gradient( + to right, + var(--profile-gradient-primary-color), + var(--profile-gradient-secondary-color) + ); +} +[class^="userPopoutOuter-"][class*="userProfileOuterUnthemed-"] + > [class^="userPopoutInner-"] + [class^="banner-"] { + height: 18px !important; +} +[class^="userPopoutOuter-"][class*="userProfileOuterThemed-"] + > [class^="userPopoutInner-"][class*="userProfileInnerThemedWithBanner-"] + [class^="banner-"] { + margin-top: 19px; + border-radius: 0; +} +[class^="userPopoutOuter-"][class*="userProfileOuterThemed-"] + > [class^="userPopoutInner-"][class*="userProfileInnerThemedWithBanner-"] + [class^="banner-"]:after { + content: ""; + background: linear-gradient(to bottom, transparent 32px, var(--primary) 64px); + width: 340px; + height: 120px; + position: absolute; + top: 19px; + left: 0; +} +[class^="userPopoutOuter-"][class*="userProfileOuterThemed-"] + > [class^="userPopoutInner-"][class*="userProfileInnerThemedPremiumWithoutBanner-"] + [class^="banner-"] { + display: none; +} +[class^="userPopoutOuter-"] + > [class^="userPopoutInner-"] + > [class^="userPopoutOverlayBackground-"] { + margin: 0 !important; + overflow: visible; +} +[class^="userPopoutOuter-"] + > [class^="userPopoutInner-"][class*="userProfileInnerThemedWithBanner-"] + > [class^="userPopoutOverlayBackground-"] { + margin-top: -72px !important; +} +[class^="userPopoutOuter-"] + > [class^="userPopoutInner-"][class*="userProfileInnerThemedPremiumWithoutBanner-"] + > [class^="userPopoutOverlayBackground-"] { + margin-top: -48px !important; +} +[class^="userPopoutOuter-"][class*="userProfileOuterUnthemed-"] + > [class^="userPopoutInner-"] + > [class^="userPopoutOverlayBackground-"] { + margin-top: -78px !important; +} +[class^="userPopoutOuter-"] + > [class^="userPopoutInner-"][class*="userProfileInnerThemedWithBanner-"] + [class*="usernameSection-"] { + padding: 0 !important; + position: absolute; + top: -60px; + left: 64px; +} +[class^="userPopoutOuter-"] + > [class^="userPopoutInner-"][class*="userProfileInnerThemedPremiumWithoutBanner-"] + [class*="usernameSection-"] { + padding: 0 !important; + position: absolute; + top: -56px; + left: 64px; +} +[class^="userPopoutOuter-"][class*="userProfileOuterUnthemed-"] + > [class^="userPopoutInner-"] + [class*="usernameSection-"] { + padding: 0 !important; + position: absolute; + top: -54px; + left: 64px; +} +[class^="userPopoutOuter-"] + > [class^="userPopoutInner-"] + [class*="usernameSection-"] + > div { + display: flex; + flex-direction: row !important; + align-items: center; +} +[class^="userPopoutOuter-"] + > [class^="userPopoutInner-"] + [class*="usernameSection-"] + > div + > [class^="userText-"] + > h1 { + font-size: 16px !important; + line-height: 16px !important; + text-shadow: 1px 1px 0 var(--primary); +} +[class^="userPopoutOuter-"] + > [class^="userPopoutInner-"] + [class*="usernameSection-"] + [class^="userText-"] + > div + > [class*="userTag-"] { + line-height: 16px; + width: max-content; +} +[class^="userPopoutOuter-"] + > [class^="userPopoutInner-"] + [class*="usernameSection-"] + [class^="userText-"] + > div + > [class*="userTag-"] + > span { + text-shadow: 1px 1px 0 var(--primary); + font-size: 12px; + padding-left: 2px; +} +[class^="userPopoutOuter-"] + > [class^="userPopoutInner-"] + [class*="usernameSection-"] + [class^="userText-"] + > div { + position: absolute; + top: -26px; + left: -62px; + z-index: 10; + flex-direction: row-reverse !important; +} +[class^="userPopoutOuter-"][class*="userProfileOuterUnthemed-"] + > [class^="userPopoutInner-"] + [class*="usernameSection-"] + [class^="userText-"] + > div { + position: absolute; + top: -26px; +} +[class^="userPopoutOuter-"] + > [class^="userPopoutInner-"][class*="userProfileInnerThemedPremiumWithoutBanner-"] + [class*="usernameSection-"] + [class^="userText-"] + > div { + position: absolute; + top: -24px; +} +[class^="userPopoutOuter-"] + > [class^="userPopoutInner-"] + [class*="usernameSection-"] + [class^="userText-"] + > div + .platform-icons-wrapper { + margin-left: 0 !important; +} +[class^="userPopoutOuter-"] + > [class^="userPopoutInner-"] + [class*="usernameSection-"] + > div + > [class*="pronouns-"] { + font-size: 12px; + line-height: 12px; + padding-top: 0; + margin-left: 4px; + opacity: 0.75; + text-shadow: 1px 1px 0 var(--primary); +} +[class^="userPopoutOuter-"][class*="userProfileOuterThemed-"] + > [class^="userPopoutInner-"][class*="userProfileInnerThemedWithBanner-"] + [class*="customStatusSection-"] { + padding: 0 !important; + position: absolute; + top: -38px; + left: 64px; +} +[class^="userPopoutOuter-"][class*="userProfileOuterUnthemed-"] + > [class^="userPopoutInner-"] + [class*="customStatusSection-"] { + padding: 0 !important; + position: absolute; + top: -30px; + left: 64px; +} +[class^="userPopoutOuter-"] + > [class^="userPopoutInner-"][class*="userProfileInnerThemedPremiumWithoutBanner-"] + [class*="customStatusSection-"] { + padding: 0 !important; + position: absolute; + top: -32px; + left: 64px; +} +[class^="userPopoutOuter-"] + > [class^="userPopoutInner-"] + [class*="customStatusSection-"] + > [class^="customStatus-"] { + font-size: 12px; + line-height: 12px; + text-shadow: 1px 1px 0 var(--primary); + display: flex; + flex-direction: row !important; + align-items: center; +} +[class^="userPopoutOuter-"] + > [class^="userPopoutInner-"] + [class*="customStatusSection-"] + > [class^="customStatus-"] + > [class*="customStatusEmoji-"] { + width: 16px; + height: 16px; +} +[class^="userPopoutOuter-"] + > [class^="userPopoutInner-"] + [class*="customStatusSection-"] + > [class^="customStatus-"] + > [class^="customStatusText-"] { + max-height: 24px; + overflow: hidden; + text-overflow: ellipsis; +} +[class^="userPopoutOuter-"] + > [class^="userPopoutInner-"] + [class^="section-"]:has(> .mutual-guilds) { + padding-top: 0; +} +[class^="userPopoutOuter-"] + > [class^="userPopoutInner-"] + > [class^="profileBadges-"] { + visibility: hidden; + height: 30px !important; +} +[class^="userPopoutOuter-"] + > [class^="userPopoutInner-"] + > [class^="bannerSVGWrapper-"][viewbox$=" 60"] { + margin-bottom: 60px; +} diff --git a/modular/voice_rings.css b/modular/voice_rings.css index 6035965..e381e0f 100644 --- a/modular/voice_rings.css +++ b/modular/voice_rings.css @@ -1,6 +1,7 @@ [class*="avatarSpeaking-"], [class^="avatar-"][class*="speaking-"] { - box-shadow: 0 0 0 2px var(--status-online, var(--status-green-600)), + box-shadow: + 0 0 0 2px var(--status-online, var(--status-green-600)), 0 0 0 3px var(--background-secondary) !important; }