Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-03-12 00:48:50 +01:00
Code Issues Projects Releases Packages Wiki Activity

Extract alt badge styles out from tag

Browse source 
- Differentiate clickable version vs non-clickable version
- Also differentiate alt badge vs the other "tags" on media
This commit is contained in:
Lim Chee Aun 2023-09-28 23:48:01 +08:00
parent 01c90150a8
commit f9cb9502b1
3 changed files with 30 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/media-modal.jsx
View file

@ -141,7 +141,7 @@ function MediaModal({
setShowMediaAlt(media.description); setShowMediaAlt(media.description);
}} }}
> >
<span class="tag collapsed">ALT</span> <span class="alt-badge">ALT</span>
<span class="media-alt-desc">{media.description}</span> <span class="media-alt-desc">{media.description}</span>
</button> </button>
)} )}

2
src/components/media.jsx
View file

@ -34,7 +34,7 @@ const AltBadge = (props) => {
return ( return (
<button <button
type="button" type="button"
class="tag collapsed clickable" class="alt-badge clickable"
{...rest} {...rest}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();

44
src/components/status.css
View file

@ -853,31 +853,16 @@
&[data-has-alt] { &[data-has-alt] {
position: relative; position: relative;
.tag { .alt-badge {
position: absolute; position: absolute;
bottom: 8px; bottom: 8px;
left: 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 { &:before {
content: ''; content: '';
position: absolute; position: absolute;
inset: -12px; 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 { #reactions-container .reactions-block .reblog-icon {
color: var(--reblog-color); 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;
}
}
}