From fe6bdfdeb37a0e13e8ca00170dcb1e9e62d65ce5 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 11 Dec 2022 15:00:51 +0800
Subject: [PATCH] This .plain conflicted with other styles, so create .plain2
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Also… this looks completely different on Mobile Safari (iPhone)...

Maybe due to a better screen...
---
 src/components/status.jsx | 6 +++---
 src/index.css             | 7 ++++++-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/status.jsx b/src/components/status.jsx
index bbf20c31..4862f8ce 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -849,7 +849,7 @@ function Status({ statusID, status, withinContext, size = 'm', skeleton }) {
             <span />
             <button
               type="button"
-              class="carousel-button plain"
+              class="carousel-button plain2"
               onClick={() => setShowMediaModal(false)}
             >
               <Icon icon="x" />
@@ -859,7 +859,7 @@ function Status({ statusID, status, withinContext, size = 'm', skeleton }) {
             <div class="carousel-controls">
               <button
                 type="button"
-                class="carousel-button plain"
+                class="carousel-button plain2"
                 hidden={showMediaModal === 0}
                 onClick={(e) => {
                   e.preventDefault();
@@ -892,7 +892,7 @@ function Status({ statusID, status, withinContext, size = 'm', skeleton }) {
               </span>
               <button
                 type="button"
-                class="carousel-button plain"
+                class="carousel-button plain2"
                 hidden={showMediaModal === mediaAttachments.length - 1}
                 onClick={(e) => {
                   e.preventDefault();
diff --git a/src/index.css b/src/index.css
index 39ac54c3..6eda4ae7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -121,6 +121,11 @@ button > * {
 }
 
 :is(button, .button).plain {
+  background-color: transparent;
+  color: var(--link-color);
+  backdrop-filter: blur(12px);
+}
+:is(button, .button).plain2 {
   background-color: transparent;
   color: var(--link-color);
   backdrop-filter: blur(12px) invert(.25) brightness(1.5);
@@ -170,7 +175,7 @@ select.plain {
   img:hover, video:hover {
     filter: brightness(1);
   }
-  :is(button, .button).plain {
+  :is(button, .button).plain2 {
     backdrop-filter: blur(12px) brightness(.5);
   }
 }