From 77cd066398f5a16964cd10a56ab8208fb92b0dc4 Mon Sep 17 00:00:00 2001 From: Cynthia Foxwell Date: Mon, 29 May 2023 21:11:04 -0600 Subject: [PATCH 1/4] fix endpwn status for rounded, compacter avatar decoration fixes for dms rounded avatars is a full reimplementation because i need to remove masks. only thing "noticable" is the fact that guild hover animations look "smoother"/"slower"/"faster. i tried to get the timing close but it is what it is. this theme was never meant for vanilla purists anyways, always a second thought. --- xmc.user.css | 110 ++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 105 insertions(+), 5 deletions(-) diff --git a/xmc.user.css b/xmc.user.css index fd6ad69..729556f 100644 --- a/xmc.user.css +++ b/xmc.user.css @@ -307,10 +307,10 @@ rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"] { fill: var(--status-streaming); } -[class^="containerDefault-"]:not(:hover) [class*="modeUnread-"] svg[class^="icon-"], -[class^="containerDefault-"]:not(:hover) - [class*="modeUnread-"] - [class^="name-"] { +[class^="containerDefault-"]:not(:hover):not([class*="selected-"]) + [class*="modeUnread-"] svg[class^="icon-"], +[class^="containerDefault-"]:not(:hover):not([class*="selected-"]) + [class*="modeUnread-"] [class^="name-"] { color: var(--accent, var(--brand-new-500)); } [class^="containerDefault-"] [class*="modeUnread-"] [class^="unread-"] { @@ -2780,7 +2780,97 @@ body > #app-mount > .platform-web > [class^="popout-"] > [class^="content-"] > [ @var text xmc_cbg_background 'Custom Background (full access to background, use url() for URLs)' "" @var select xmc_square_avatars 'Square Avatars' { - 'Off': "", + 'Off': `[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^="avatarContainer-"], +[class^="executedCommandAvatar-"] { + border-radius: 50% !important; +} + +div[class^="listItem-"] foreignObject img, +div[class^="listItem-"] foreignObject [class*="selected-"] > img { + transition: border-radius 0.35s ease; +} + +div[class^="listItem-"] foreignObject [class*="selected-"] > img { + border-radius: 25% !important; +} + +[class^="folderIconWrapper-"] + > [class^="closedFolderIconWrapper-"] + > [class^="icon-"] { + border-radius: 50% !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, +[class^="avatarDecoration-"] > foreignObject { + mask: none !important; + mask-image: none !important; + -webkit-mask-image: none !important; +} + +[class*="avatarHint-"], +[class*="avatarNormal-"], +[class*="avatarWrapper-"] [class*="wrapper-"], +[class*="avatarWrapper-"] [class*="image-"], +[class*="replyAvatar-"] { + border: none; + border-radius: 10% !important; +}`, 'On*': `[class*="avatar-"], [class*="avatar-"] [class*="image-"], [class*="callAvatar-"], @@ -5442,6 +5532,16 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])) [class^="sidebar-"] > [class^="privateChannels-"] ul[class^="content-"] > [class^="channel-"] [class*="layout-"] > [class^="avatar-"] { margin-right: 8px; } +[class^="sidebar-"] > [class^="privateChannels-"] ul[class^="content-"] > [class^="channel-"] [class*="layout-"] > [class^="avatar-"] + > [class^="wrapper-"] + > [class^="avatarDecoration-"] { + top: calc((.4 - var(--decoration-to-avatar-ratio)/2)*32px); + left: calc((.475 - var(--decoration-to-avatar-ratio)/2)*32px); + width: calc(32px * var(--decoration-to-avatar-ratio)); + height: calc(32px * var(--decoration-to-avatar-ratio)); +} + + [class^="sidebar-"] > [class^="privateChannels-"] ul[class^="content-"] > [class*="privateChannelsHeaderContainer-"] { padding: 9px 4px 2px 9px; height: 24px; From e63e6e09ffc81d2eb04997d5ea2eac7fede3dc44 Mon Sep 17 00:00:00 2001 From: CI Date: Tue, 30 May 2023 03:13:14 +0000 Subject: [PATCH 2/4] Make Modular --- modular/compacter_mode.css | 14 +++ modular/overwrite_colors.css | 4 +- modular/square_avatars/off.css | 91 +++++++++++++++++++ .../on.css} | 0 4 files changed, 107 insertions(+), 2 deletions(-) create mode 100644 modular/square_avatars/off.css rename modular/{square_avatars.css => square_avatars/on.css} (100%) diff --git a/modular/compacter_mode.css b/modular/compacter_mode.css index 0ccc76a..3aa5ad7 100644 --- a/modular/compacter_mode.css +++ b/modular/compacter_mode.css @@ -652,6 +652,20 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])) > [class^="avatar-"] { margin-right: 8px; } +[class^="sidebar-"] + > [class^="privateChannels-"] + ul[class^="content-"] + > [class^="channel-"] + [class*="layout-"] + > [class^="avatar-"] + > [class^="wrapper-"] + > [class^="avatarDecoration-"] { + top: calc((0.4 - var(--decoration-to-avatar-ratio) / 2) * 32px); + left: calc((0.475 - var(--decoration-to-avatar-ratio) / 2) * 32px); + width: calc(32px * var(--decoration-to-avatar-ratio)); + height: calc(32px * var(--decoration-to-avatar-ratio)); +} + [class^="sidebar-"] > [class^="privateChannels-"] ul[class^="content-"] diff --git a/modular/overwrite_colors.css b/modular/overwrite_colors.css index 8250f0c..5d37364 100644 --- a/modular/overwrite_colors.css +++ b/modular/overwrite_colors.css @@ -291,10 +291,10 @@ rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"] { fill: var(--status-streaming); } -[class^="containerDefault-"]:not(:hover) +[class^="containerDefault-"]:not(:hover):not([class*="selected-"]) [class*="modeUnread-"] svg[class^="icon-"], -[class^="containerDefault-"]:not(:hover) +[class^="containerDefault-"]:not(:hover):not([class*="selected-"]) [class*="modeUnread-"] [class^="name-"] { color: var(--accent, var(--brand-new-500)); diff --git a/modular/square_avatars/off.css b/modular/square_avatars/off.css new file mode 100644 index 0000000..04d287f --- /dev/null +++ b/modular/square_avatars/off.css @@ -0,0 +1,91 @@ +[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^="avatarContainer-"], +[class^="executedCommandAvatar-"] { + border-radius: 50% !important; +} + +div[class^="listItem-"] foreignObject img, +div[class^="listItem-"] foreignObject [class*="selected-"] > img { + transition: border-radius 0.35s ease; +} + +div[class^="listItem-"] foreignObject [class*="selected-"] > img { + border-radius: 25% !important; +} + +[class^="folderIconWrapper-"] + > [class^="closedFolderIconWrapper-"] + > [class^="icon-"] { + border-radius: 50% !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, +[class^="avatarDecoration-"] > foreignObject { + mask: none !important; + mask-image: none !important; + -webkit-mask-image: none !important; +} + +[class*="avatarHint-"], +[class*="avatarNormal-"], +[class*="avatarWrapper-"] [class*="wrapper-"], +[class*="avatarWrapper-"] [class*="image-"], +[class*="replyAvatar-"] { + border: none; + border-radius: 10% !important; +} diff --git a/modular/square_avatars.css b/modular/square_avatars/on.css similarity index 100% rename from modular/square_avatars.css rename to modular/square_avatars/on.css From 0a96cc859d903c5ab567998c652a02cc8ad1669e Mon Sep 17 00:00:00 2001 From: Cynthia Foxwell Date: Mon, 29 May 2023 21:15:21 -0600 Subject: [PATCH 3/4] forgot home icon, -5% on selected radius --- xmc.user.css | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/xmc.user.css b/xmc.user.css index 729556f..2f1f4b6 100644 --- a/xmc.user.css +++ b/xmc.user.css @@ -2833,12 +2833,15 @@ div[class^="listItem-"] div[class^="wrapperSimple-"], } div[class^="listItem-"] foreignObject img, -div[class^="listItem-"] foreignObject [class*="selected-"] > img { +div[class^="listItem-"] foreignObject [class*="selected-"] > img, +div[class^="listItem-"] foreignObject [class^="childWrapper-"], +div[class^="listItem-"] foreignObject [class*="selected-"] > [class^="childWrapper-"] { transition: border-radius 0.35s ease; } -div[class^="listItem-"] foreignObject [class*="selected-"] > img { - border-radius: 25% !important; +div[class^="listItem-"] foreignObject [class*="selected-"] > img, +div[class^="listItem-"] foreignObject [class*="selected-"] > [class^="childWrapper-"] { + border-radius: 20% !important; } [class^="folderIconWrapper-"] From e76451403da9c56a1010078c2d6f71b8d51c4500 Mon Sep 17 00:00:00 2001 From: CI Date: Tue, 30 May 2023 03:16:13 +0000 Subject: [PATCH 4/4] Make Modular --- modular/square_avatars/off.css | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/modular/square_avatars/off.css b/modular/square_avatars/off.css index 04d287f..f31f814 100644 --- a/modular/square_avatars/off.css +++ b/modular/square_avatars/off.css @@ -51,12 +51,21 @@ div[class^="listItem-"] div[class^="wrapperSimple-"], } div[class^="listItem-"] foreignObject img, -div[class^="listItem-"] foreignObject [class*="selected-"] > img { +div[class^="listItem-"] foreignObject [class*="selected-"] > img, +div[class^="listItem-"] foreignObject [class^="childWrapper-"], +div[class^="listItem-"] + foreignObject + [class*="selected-"] + > [class^="childWrapper-"] { transition: border-radius 0.35s ease; } -div[class^="listItem-"] foreignObject [class*="selected-"] > img { - border-radius: 25% !important; +div[class^="listItem-"] foreignObject [class*="selected-"] > img, +div[class^="listItem-"] + foreignObject + [class*="selected-"] + > [class^="childWrapper-"] { + border-radius: 20% !important; } [class^="folderIconWrapper-"]