From a2bda7eff4144f161417ca02228f3ac52977f166 Mon Sep 17 00:00:00 2001
From: CI <ci@c7.pm>
Date: Thu, 8 Dec 2022 02:44:42 +0000
Subject: [PATCH] Make Modular

---
 modular/base.css         | 27 ++++++++++++++++++---------
 modular/cozy_compact.css | 15 +++++++++++++--
 modular/status_icons.css | 19 ++++++++++++++++---
 3 files changed, 47 insertions(+), 14 deletions(-)

diff --git a/modular/base.css b/modular/base.css
index 967c685..361ce88 100644
--- a/modular/base.css
+++ b/modular/base.css
@@ -579,7 +579,8 @@ div[class^="listItem-"] div[class^="wrapperSimple-"],
 [class*="wrapper-"] svg[class*="mask-"] > foreignObject,
 [class*="callAvatarWrapper-"] svg[class*="callAvatarMask-"] > foreignObject,
 div[class^="listItem-"] [class^="wrapper-"] > svg > foreignObject,
-[class^="bannerSVGWrapper-"] > foreignObject {
+[class^="bannerSVGWrapper-"] > foreignObject,
+[class^="avatarDecoration-"] > foreignObject {
   mask: none !important;
   mask-image: none !important;
   -webkit-mask-image: none !important;
@@ -1865,28 +1866,36 @@ code.inline {
 .hljs-ansi-style-bold {
   font-weight: 0;
 }
-.hljs-ansi-foreground-black .hljs-ansi-style-bold {
+.hljs-ansi-foreground-black .hljs-ansi-style-bold,
+.hljs-ansi-foreground-black.hljs-ansi-style-bold {
   color: var(--_color8) !important;
 }
-.hljs-ansi-foreground-red .hljs-ansi-style-bold {
+.hljs-ansi-foreground-red .hljs-ansi-style-bold,
+.hljs-ansi-foreground-red.hljs-ansi-style-bold {
   color: var(--_color9) !important;
 }
-.hljs-ansi-foreground-green .hljs-ansi-style-bold {
+.hljs-ansi-foreground-green .hljs-ansi-style-bold,
+.hljs-ansi-foreground-green.hljs-ansi-style-bold {
   color: var(--_color10) !important;
 }
-.hljs-ansi-foreground-yellow .hljs-ansi-style-bold {
+.hljs-ansi-foreground-yellow .hljs-ansi-style-bold,
+.hljs-ansi-foreground-yellow.hljs-ansi-style-bold {
   color: var(--_color11) !important;
 }
-.hljs-ansi-foreground-blue .hljs-ansi-style-bold {
+.hljs-ansi-foreground-blue .hljs-ansi-style-bold,
+.hljs-ansi-foreground-blue.hljs-ansi-style-bold {
   color: var(--_color12) !important;
 }
-.hljs-ansi-foreground-magenta .hljs-ansi-style-bold {
+.hljs-ansi-foreground-magenta .hljs-ansi-style-bold,
+.hljs-ansi-foreground-magenta.hljs-ansi-style-bold {
   color: var(--_color13) !important;
 }
-.hljs-ansi-foreground-cyan .hljs-ansi-style-bold {
+.hljs-ansi-foreground-cyan .hljs-ansi-style-bold,
+.hljs-ansi-foreground-cyan.hljs-ansi-style-bold {
   color: var(--_color14) !important;
 }
-.hljs-ansi-foreground-white .hljs-ansi-style-bold {
+.hljs-ansi-foreground-white .hljs-ansi-style-bold,
+.hljs-ansi-foreground-white.hljs-ansi-style-bold {
   color: var(--_color15) !important;
 }
 .hljs-ansi-background-black {
diff --git a/modular/cozy_compact.css b/modular/cozy_compact.css
index d71c0e4..cf4e9ea 100644
--- a/modular/cozy_compact.css
+++ b/modular/cozy_compact.css
@@ -7,7 +7,9 @@ html:not(.a11y-font-scaled-down)
 html:not(.a11y-font-scaled-down)
   [class^="messagesWrapper-"]
   [class^="scrollerInner-"]
-  > [class^="container-"]:not([class*="systemMessage-"]):not([class*="compact-"]) {
+  > [class^="container-"]:not([class*="systemMessage-"]):not(
+    [class*="compact-"]
+  ) {
   padding: 0 !important;
   padding-left: 16px !important;
 }
@@ -18,7 +20,9 @@ html:not(.a11y-font-scaled-down)
   > [class^="wrapper-"]:not([class*="systemMessage-"]):not([class*="compact-"]),
 [class^="messagesWrapper-"]
   [class^="scrollerInner-"]
-  > [class^="container-"]:not([class*="systemMessage-"]):not([class*="compact-"]) {
+  > [class^="container-"]:not([class*="systemMessage-"]):not(
+    [class*="compact-"]
+  ) {
   padding-left: 16px !important;
 }
 
@@ -145,3 +149,10 @@ div[class*="cozyMessage-"] div[class^="repliedMessage-"]:before {
   border-right: 0 solid var(--interactive-active);
   border-top: var(--spine-width) solid var(--interactive-active);
 }
+
+[class*="cozyMessage-"] [class^="avatarDecoration-"] {
+  margin-top: calc(24px - 20px * var(--decoration-to-avatar-ratio));
+  left: calc(38px - 20px * var(--decoration-to-avatar-ratio));
+  width: calc(20px * var(--decoration-to-avatar-ratio));
+  height: calc(20px * var(--decoration-to-avatar-ratio));
+}
diff --git a/modular/status_icons.css b/modular/status_icons.css
index e0d4b87..001a40b 100644
--- a/modular/status_icons.css
+++ b/modular/status_icons.css
@@ -133,7 +133,13 @@
   [class*="wrapper-"]
   > svg
   > svg[class^="cursorDefault-"]
-  > rect[fill^="var(--status-"] {
+  > rect[fill^="var(--status-"],
+[class^="member-"]
+  [class^="avatar-"]
+  [class*="wrapper-"]
+  > svg
+  > svg[class^="cursorDefault-"]
+  > rect[fill^="#"] {
   mask: none !important;
   x: -18.5;
   y: -17;
@@ -144,8 +150,15 @@
 [class^="panels-"]
   [class*="avatar-"]
   > svg
-  > svg
-  > rect[fill^="var(--status-"] {
+  > rect[mask^="url(#svg-mask-status"] {
+  mask: none !important;
+  x: 32;
+  y: 0;
+  width: 4px;
+  height: 32px;
+}
+[class^="panels-"] [class*="avatar-"] > svg > svg > rect[fill^="var(--status-"],
+[class^="panels-"] [class*="avatar-"] > svg > svg > rect[fill^="#"] {
   mask: none !important;
   x: 17.5;
   y: -17;