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