diff --git a/modular/compacter_mode.css b/modular/compacter_mode.css index f64617e..b97812a 100644 --- a/modular/compacter_mode.css +++ b/modular/compacter_mode.css @@ -270,16 +270,16 @@ button.hh2-spotify-controls-button { color: var(--text-muted) !important; } -[class^="members-"] [class^="member-"] > [class^="layout-"] { +[class^="members-"] [class^="member-"] > [class^="memberInner-"] { height: 32px; } [class^="members-"] [class^="member-"] - > [class^="layout-"] + > [class^="memberInner-"] > [class^="avatar-"], [class^="members-"] [class^="member-"] - > [class^="layout-"] + > [class^="memberInner-"] > [class^="avatar-"] > [class^="wrapper-"] { width: 24px !important; @@ -287,7 +287,7 @@ button.hh2-spotify-controls-button { } [class^="members-"] [class^="member-"] - > [class^="layout-"] + > [class^="memberInner-"] > [class^="avatar-"] > [class^="wrapper-"] > svg[viewBox="0 0 40 40"] { @@ -296,7 +296,18 @@ button.hh2-spotify-controls-button { } [class^="members-"] [class^="member-"] - > [class^="layout-"] + > [class^="memberInner-"] + > [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^="members-"] + [class^="member-"] + > [class^="memberInner-"] > [class^="avatar-"] > [class^="wrapper-"] > svg[viewBox="0 0 32 32"] { @@ -305,7 +316,7 @@ button.hh2-spotify-controls-button { } [class^="members-"] [class^="member-"] - > [class^="layout-"] + > [class^="memberInner-"] > [class^="avatar-"] { margin-right: 8px; } @@ -315,7 +326,7 @@ button.hh2-spotify-controls-button { } [class^="members-"] [class^="member-"] - > [class^="layout-"] + > [class^="memberInner-"] > [class^="children-"] > .presence-icons-wrapper > span