Style CC thread list avatars like Discord
This CL makes the avatars overlap each other (with some margin) in a
Discord-like fashion, in order to save up space.
Bug: twpowertools:71
Change-Id: I3c8d8aa149072a6249863d534b45b35e36fab931
diff --git a/src/static/css/thread_list_avatars.css b/src/static/css/thread_list_avatars.css
index 7771bc0..ff739d8 100644
--- a/src/static/css/thread_list_avatars.css
+++ b/src/static/css/thread_list_avatars.css
@@ -1,7 +1,7 @@
.TWPT-avatars {
display: flex;
flex-direction: row;
- min-width: 108px;
+ min-width: 84px;
overflow-x: hidden;
margin-inline-start: 14px;
}
@@ -13,9 +13,25 @@
align-self: center;
border-width: 0;
border-radius: 50%;
+ margin-inline-start: -4px;
+}
+
+.TWPT-avatars .TWPT-avatar:first-child,
+ .TWPT-avatars .TWPT-avatar-private-placeholder:first-child {
margin-inline-start: 6px;
}
+html:not([dir="rtl"]) .TWPT-avatars .TWPT-avatar:not(:first-child) {
+ /* This mask is defined as an svg to have smooth/antialiased borders. */
+ mask: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2028%2028%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cmask%20id%3D%22circle%22%3E%0A%20%20%20%20%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23fff%22%2F%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%22-10%22%20cy%3D%2214%22%20r%3D%2216.5%22%20fill%3D%22%23000%22%2F%3E%0A%20%20%20%20%3C%2Fmask%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20mask%3D%22url(%23circle)%22%2F%3E%0A%3C%2Fsvg%3E');
+ -webkit-mask: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2028%2028%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cmask%20id%3D%22circle%22%3E%0A%20%20%20%20%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23fff%22%2F%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%22-10%22%20cy%3D%2214%22%20r%3D%2216.5%22%20fill%3D%22%23000%22%2F%3E%0A%20%20%20%20%3C%2Fmask%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20mask%3D%22url(%23circle)%22%2F%3E%0A%3C%2Fsvg%3E');
+}
+
+html[dir="rtl"] .TWPT-avatars .TWPT-avatar:not(:first-child) {
+ mask: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2028%2028%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cmask%20id%3D%22circle%22%3E%0A%20%20%20%20%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23fff%22%2F%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2238%22%20cy%3D%2214%22%20r%3D%2216.5%22%20fill%3D%22%23000%22%2F%3E%0A%20%20%20%20%3C%2Fmask%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20mask%3D%22url(%23circle)%22%2F%3E%0A%3C%2Fsvg%3E');
+ -webkit-mask: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2028%2028%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cmask%20id%3D%22circle%22%3E%0A%20%20%20%20%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23fff%22%2F%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2238%22%20cy%3D%2214%22%20r%3D%2216.5%22%20fill%3D%22%23000%22%2F%3E%0A%20%20%20%20%3C%2Fmask%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20mask%3D%22url(%23circle)%22%2F%3E%0A%3C%2Fsvg%3E');
+}
+
.TWPT-avatars .TWPT-avatar {
background-position: center;
background-size: cover;
@@ -36,5 +52,5 @@
* Changing styles of existing elements so the avatars fit.
*/
body.TWPT-threadlistavatars-enabled ec-thread-summary .main-header .panel-description a.header .header-content {
- width: calc(100% - 218px);
+ width: calc(100% - 194px);
}