this repo has no description
Extract alt badge styles out from tag
- Differentiate clickable version vs non-clickable version
- Also differentiate alt badge vs the other "tags" on media
+30
-18
+1
-1
src/components/media-modal.jsx
+1
-1
src/components/media-modal.jsx
+1
-1
src/components/media.jsx
+1
-1
src/components/media.jsx
+28
-16
src/components/status.css
+28
-16
src/components/status.css
···
853
853
&[data-has-alt] {
854
854
position: relative;
855
855
856
-
.tag {
856
+
.alt-badge {
857
857
position: absolute;
858
858
bottom: 8px;
859
859
left: 8px;
860
-
font-size: 12px;
861
-
font-weight: bold;
862
-
color: var(--media-fg-color);
863
-
background-color: var(--media-bg-color);
864
-
border: var(--hairline-width) solid var(--media-outline-color);
865
-
mix-blend-mode: luminosity;
866
-
opacity: 0.75;
867
860
868
861
&:before {
869
862
content: '';
870
863
position: absolute;
871
864
inset: -12px;
872
-
}
873
-
874
-
&:is(:hover, :focus):not(:active) {
875
-
transition: 0.15s ease-out;
876
-
transition-property: transform, opacity, mix-blend-mode;
877
-
transform: scale(1.15);
878
-
opacity: 0.8;
879
-
mix-blend-mode: normal;
880
865
}
881
866
}
882
867
}
···
1674
1659
#reactions-container .reactions-block .reblog-icon {
1675
1660
color: var(--reblog-color);
1676
1661
}
1662
+
1663
+
/* ALT BADGE */
1664
+
1665
+
.alt-badge {
1666
+
font-size: 12px;
1667
+
font-weight: bold;
1668
+
color: var(--media-fg-color);
1669
+
background-color: var(--media-bg-color);
1670
+
border: var(--hairline-width) solid var(--media-outline-color);
1671
+
mix-blend-mode: luminosity;
1672
+
border-radius: 4px;
1673
+
padding: 4px;
1674
+
opacity: 0.65;
1675
+
1676
+
&.clickable {
1677
+
opacity: 0.75;
1678
+
border-width: 2px;
1679
+
1680
+
&:is(:hover, :focus):not(:active) {
1681
+
transition: 0.15s ease-out;
1682
+
transition-property: transform, opacity, mix-blend-mode;
1683
+
transform: scale(1.15);
1684
+
opacity: 0.8;
1685
+
mix-blend-mode: normal;
1686
+
}
1687
+
}
1688
+
}