this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 141 141 setShowMediaAlt(media.description); 142 142 }} 143 143 > 144 - <span class="tag collapsed">ALT</span> 144 + <span class="alt-badge">ALT</span> 145 145 <span class="media-alt-desc">{media.description}</span> 146 146 </button> 147 147 )}
+1 -1
src/components/media.jsx
··· 34 34 return ( 35 35 <button 36 36 type="button" 37 - class="tag collapsed clickable" 37 + class="alt-badge clickable" 38 38 {...rest} 39 39 onClick={(e) => { 40 40 e.stopPropagation();
+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 + }