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);
}
}