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..f31f814 --- /dev/null +++ b/modular/square_avatars/off.css @@ -0,0 +1,100 @@ +[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, +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, +div[class^="listItem-"] + foreignObject + [class*="selected-"] + > [class^="childWrapper-"] { + border-radius: 20% !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 diff --git a/xmc.user.css b/xmc.user.css index fd6ad69..2f1f4b6 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,100 @@ 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, +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, +div[class^="listItem-"] foreignObject [class*="selected-"] > [class^="childWrapper-"] { + border-radius: 20% !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 +5535,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;