From f9cb9502b11cd75db8956f636e329ced1bc551a9 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 28 Sep 2023 23:48:01 +0800
Subject: [PATCH] Extract alt badge styles out from tag
- Differentiate clickable version vs non-clickable version
- Also differentiate alt badge vs the other "tags" on media
---
src/components/media-modal.jsx | 2 +-
src/components/media.jsx | 2 +-
src/components/status.css | 44 +++++++++++++++++++++-------------
3 files changed, 30 insertions(+), 18 deletions(-)
diff --git a/src/components/media-modal.jsx b/src/components/media-modal.jsx
index d01f97fe..7e520da4 100644
--- a/src/components/media-modal.jsx
+++ b/src/components/media-modal.jsx
@@ -141,7 +141,7 @@ function MediaModal({
setShowMediaAlt(media.description);
}}
>
- <span class="tag collapsed">ALT</span>
+ <span class="alt-badge">ALT</span>
<span class="media-alt-desc">{media.description}</span>
</button>
)}
diff --git a/src/components/media.jsx b/src/components/media.jsx
index d2c6c498..a1a376de 100644
--- a/src/components/media.jsx
+++ b/src/components/media.jsx
@@ -34,7 +34,7 @@ const AltBadge = (props) => {
return (
<button
type="button"
- class="tag collapsed clickable"
+ class="alt-badge clickable"
{...rest}
onClick={(e) => {
e.stopPropagation();
diff --git a/src/components/status.css b/src/components/status.css
index 1fc920f6..d7e8cf6f 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -853,31 +853,16 @@
&[data-has-alt] {
position: relative;
- .tag {
+ .alt-badge {
position: absolute;
bottom: 8px;
left: 8px;
- font-size: 12px;
- font-weight: bold;
- color: var(--media-fg-color);
- background-color: var(--media-bg-color);
- border: var(--hairline-width) solid var(--media-outline-color);
- mix-blend-mode: luminosity;
- opacity: 0.75;
&:before {
content: '';
position: absolute;
inset: -12px;
}
-
- &:is(:hover, :focus):not(:active) {
- transition: 0.15s ease-out;
- transition-property: transform, opacity, mix-blend-mode;
- transform: scale(1.15);
- opacity: 0.8;
- mix-blend-mode: normal;
- }
}
}
}
@@ -1674,3 +1659,30 @@ a.card:is(:hover, :focus):visited {
#reactions-container .reactions-block .reblog-icon {
color: var(--reblog-color);
}
+
+/* ALT BADGE */
+
+.alt-badge {
+ font-size: 12px;
+ font-weight: bold;
+ color: var(--media-fg-color);
+ background-color: var(--media-bg-color);
+ border: var(--hairline-width) solid var(--media-outline-color);
+ mix-blend-mode: luminosity;
+ border-radius: 4px;
+ padding: 4px;
+ opacity: 0.65;
+
+ &.clickable {
+ opacity: 0.75;
+ border-width: 2px;
+
+ &:is(:hover, :focus):not(:active) {
+ transition: 0.15s ease-out;
+ transition-property: transform, opacity, mix-blend-mode;
+ transform: scale(1.15);
+ opacity: 0.8;
+ mix-blend-mode: normal;
+ }
+ }
+}