this repo has no description
0
fork

Configure Feed

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

Make 'Read more' buttons look more consistent everywhere

Too many cooks spoil the broth

+64 -44
+53 -31
src/components/status.css
··· 107 107 --inset-offset: 16px; 108 108 inset-block-end: var(--inset-offset); 109 109 inset-inline-end: var(--inset-offset); 110 - color: var(--link-color); 111 - background-color: var(--bg-faded-blur-color); 112 - backdrop-filter: blur(8px); 113 - border: 1px solid var(--outline-color); 110 + color: var(--text-color); 111 + background-color: var(--bg-faded-color); 112 + border: 1px dashed var(--link-color); 113 + box-shadow: 0 0 0 1px var(--bg-color), 0 -5px 10px var(--bg-color), 114 + 0 -5px 15px var(--bg-color), 0 -5px 20px var(--bg-color); 114 115 padding: 0.5em 0.75em; 115 116 border-radius: 10em; 116 117 font-size: 90%; 117 118 white-space: nowrap; 118 - box-shadow: inset 0 0 0 1px var(--bg-color); 119 - text-shadow: 0 -1px var(--bg-color); 120 - transition-property: transform, background-color, border-color; 121 - transition-duration: 0.2s; 122 - transition-timing-function: ease-out; 119 + transition: transform 0.2s ease-out; 123 120 } 124 121 125 122 &:is(:hover, :focus):after { 126 - border-color: var(--link-color); 127 - background-color: var(--bg-color); 123 + color: var(--link-color); 128 124 transform: translate(2px, 0); 129 125 } 130 126 } ··· 1536 1532 text-overflow: ellipsis; 1537 1533 } 1538 1534 1539 - #filtered-status-peek .status-link { 1540 - border-radius: 16px; 1541 - border: var(--hairline-width) dashed var(--text-insignificant-color); 1542 - max-height: 33vh; 1543 - max-height: 33dvh; 1544 - overflow: hidden; 1545 - } 1546 - #filtered-status-peek .status-link .status { 1547 - pointer-events: none; 1548 - font-size: 90%; 1549 - max-height: 33vh; 1550 - max-height: 33dvh; 1551 - overflow: hidden; 1552 - mask-image: linear-gradient(black 80%, transparent 95%); 1553 - } 1554 - #filtered-status-peek .status-post-link { 1555 - float: right; 1556 - position: sticky; 1557 - bottom: 8px; 1558 - right: 8px; 1535 + #filtered-status-peek { 1536 + .status-link { 1537 + margin: 8px 0 0; 1538 + border-radius: 16px; 1539 + border: var(--hairline-width) solid var(--divider-color); 1540 + position: relative; 1541 + max-height: 33vh; 1542 + max-height: 33dvh; 1543 + overflow: hidden; 1544 + 1545 + &.truncated { 1546 + .status { 1547 + mask-image: linear-gradient(to bottom, #000 80px, transparent); 1548 + } 1549 + 1550 + &:after { 1551 + content: attr(data-read-more); 1552 + line-height: 1; 1553 + display: inline-block; 1554 + position: absolute; 1555 + --inset-offset: 16px; 1556 + inset-block-end: var(--inset-offset); 1557 + inset-inline-end: var(--inset-offset); 1558 + color: var(--text-color); 1559 + background-color: var(--bg-faded-color); 1560 + border: 1px dashed var(--link-color); 1561 + box-shadow: 0 0 0 1px var(--bg-color), 0 -5px 10px var(--bg-color), 1562 + 0 -5px 15px var(--bg-color), 0 -5px 20px var(--bg-color); 1563 + padding: 0.5em 0.75em; 1564 + border-radius: 10em; 1565 + font-size: 90%; 1566 + white-space: nowrap; 1567 + transition: transform 0.2s ease-out; 1568 + } 1569 + 1570 + &:is(:hover, :focus):after { 1571 + color: var(--link-color); 1572 + transform: translate(2px, 0); 1573 + } 1574 + } 1575 + 1576 + .status { 1577 + pointer-events: none; 1578 + font-size: 90%; 1579 + } 1580 + } 1559 1581 } 1560 1582 1561 1583 /* REACTIONS */
+4 -3
src/components/status.jsx
··· 2089 2089 }, 2090 2090 ); 2091 2091 2092 + const statusPeekRef = useTruncated(); 2093 + 2092 2094 return ( 2093 2095 <div 2094 2096 class={isReblog ? (group ? 'status-group' : 'status-reblog') : ''} ··· 2162 2164 </header> 2163 2165 <main tabIndex="-1"> 2164 2166 <Link 2167 + ref={statusPeekRef} 2165 2168 class="status-link" 2166 2169 to={`/${instance}/s/${status.id}`} 2167 2170 onClick={() => { 2168 2171 setShowPeek(false); 2169 2172 }} 2173 + data-read-more="Read more →" 2170 2174 > 2171 2175 <Status status={status} instance={instance} size="s" readOnly /> 2172 - <button type="button" class="status-post-link plain3"> 2173 - See post &raquo; 2174 - </button> 2175 2176 </Link> 2176 2177 </main> 2177 2178 </div>
+7 -10
src/pages/notifications.css
··· 118 118 --inset-offset: 16px; 119 119 inset-block-end: var(--inset-offset); 120 120 inset-inline-end: var(--inset-offset); 121 - color: var(--link-color); 122 - background-color: var(--bg-faded-blur-color); 123 - backdrop-filter: blur(8px); 124 - border: 1px solid var(--outline-color); 121 + color: var(--text-color); 122 + background-color: var(--bg-faded-color); 123 + border: 1px dashed var(--link-color); 124 + box-shadow: 0 0 0 1px var(--bg-color), 0 -5px 10px var(--bg-color), 125 + 0 -5px 15px var(--bg-color), 0 -5px 20px var(--bg-color); 125 126 padding: 0.5em 0.75em; 126 127 border-radius: 10em; 127 128 font-size: 90%; 128 129 white-space: nowrap; 129 - box-shadow: inset 0 0 0 1px var(--bg-color); 130 130 text-shadow: 0 -1px var(--bg-color); 131 - transition-property: transform, background-color, border-color; 132 - transition-duration: 0.2s; 133 - transition-timing-function: ease-out; 131 + transition: transform 0.2s ease-out; 134 132 } 135 133 .notification .status-link:is(:hover, :focus).truncated:after { 136 - border-color: var(--link-color); 137 - background-color: var(--bg-color); 134 + color: var(--link-color); 138 135 transform: translate(2px, 0); 139 136 } 140 137 .notification .status-link.status-type-mention {