Compare commits

...

4 Commits

Author SHA1 Message Date
CI e76451403d Make Modular 2023-05-30 03:16:13 +00:00
Cynthia Foxwell 0a96cc859d forgot home icon, -5% on selected radius 2023-05-29 21:15:49 -06:00
CI e63e6e09ff Make Modular 2023-05-30 03:13:14 +00:00
Cynthia Foxwell 77cd066398 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.
2023-05-29 21:11:04 -06:00
5 changed files with 224 additions and 7 deletions

View File

@ -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-"]

View File

@ -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));

View File

@ -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;
}

View File

@ -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;