MediaAttachmentGrid: remove css modules

src/timelines/MediaAttachmentGrid.css

@@ -0,0 +1,27 @@
+.MediaAttachmentGrid {
+  /* Note: MeidaAttachmentGrid has hard-coded layout calcalation */
+  margin-top: 1em;
+  margin-left: calc(var(--card-pad, 0) + var(--toot-avatar-size, 0) + 8px);
+  margin-right: var(--card-pad, 0);
+  gap: 4px;
+
+  > :where(img, video) {
+    max-height: 35vh;
+    min-height: 40px;
+    min-width: 40px;
+    object-fit: contain;
+    max-width: 100%;
+    background-color: var(--tutu-color-surface-d);
+    border-radius: 2px;
+    border: 1px solid var(--tutu-color-surface-d);
+    transition: outline-width 60ms var(--tutu-anim-curve-std), border-color 60ms var(--tutu-anim-curve-std);
+    contain: strict;
+    content-visibility: auto;
+
+    &:hover,
+    &:focus-visible {
+      outline: 8px solid var(--media-color-accent, var(--tutu-color-surface-d));
+      border-color: var(--media-color-accent, var(--tutu-color-surface-d));
+    }
+  }
+}

src/timelines/MediaAttachmentGrid.tsx

@@ -10,8 +10,6 @@ import {
   createSignal,
   onCleanup,
 } from "solid-js";
-import { css } from "solid-styled";
-import tootStyle from "./toot.module.css";
 import MediaViewer from "./MediaViewer";
 import { render } from "solid-js/web";
 import {
@@ -21,6 +19,8 @@ import {
 import { useStore } from "@nanostores/solid";
 import { $settings } from "../settings/stores";
 import { averageColorHex } from "../platform/blurhash";
+import "./MediaAttachmentGrid.css";
+import cardStyle from "../material/cards.module.css";
 
 type ElementSize = { width: number; height: number };
 
@@ -114,13 +114,6 @@ const MediaAttachmentGrid: Component<{
       itemMaxSize(),
     );
 
-    // I don't know why mastodon does not return this
-    // and the condition for it to return this.
-    // Anyway, It is useless now.
-    // My hope is the FastAverageColor, but
-    // we may need better tool to manage the performance impact
-    // before using this. See #37.
-    // TODO: use fast average color to extract accent color
     const accentColor =
       item.meta?.colors?.accent ??
       (item.blurhash ? averageColorHex(item.blurhash) : undefined);
@@ -134,16 +127,11 @@ const MediaAttachmentGrid: Component<{
       accentColor ? { "--media-color-accent": accentColor } : {},
     );
   };
-
-  css`
-    .attachments {
-      column-count: ${columnCount().toString()};
-    }
-  `;
   return (
     <section
       ref={setRootRef}
-      class={[tootStyle.tootAttachmentGrp, "attachments"].join(" ")}
+      class={`MediaAttachmentGrid ${cardStyle.cardNoPad}`}
+      style={{ "column-count": columnCount() }}
       onClick={(e) => {
         if (e.target !== e.currentTarget) {
           e.stopImmediatePropagation();

src/timelines/toot.module.css

@@ -238,35 +238,6 @@
   }
 }
 
-.tootAttachmentGrp {
-  /* Note: MeidaAttachmentGrid has hard-coded layout calcalation */
-  composes: cardNoPad from "../material/cards.module.css";
-  margin-top: 1em;
-  margin-left: calc(var(--card-pad, 0) + var(--toot-avatar-size, 0) + 8px);
-  margin-right: var(--card-pad, 0);
-  gap: 4px;
-
-  > :where(img, video) {
-    max-height: 35vh;
-    min-height: 40px;
-    min-width: 40px;
-    object-fit: contain;
-    max-width: 100%;
-    background-color: var(--tutu-color-surface-d);
-    border-radius: 2px;
-    border: 1px solid var(--tutu-color-surface-d);
-    transition: outline-width 60ms var(--tutu-anim-curve-std), border-color 60ms var(--tutu-anim-curve-std);
-    contain: strict;
-    content-visibility: auto;
-
-    &:hover,
-    &:focus-visible {
-      outline: 8px solid var(--media-color-accent, var(--tutu-color-surface-d));
-      border: none;
-    }
-  }
-}
-
 .tootBottomActionGrp {
   composes: cardGutSkip from "../material/cards.module.css";
   padding-block: calc((var(--card-gut) - 10px) / 2);