this repo has no description
Make 'Read more' buttons look more consistent everywhere
Too many cooks spoil the broth
+64
-44
+53
-31
src/components/status.css
+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
+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 »
2174
-
</button>
2175
2176
</Link>
2176
2177
</main>
2177
2178
</div>
+7
-10
src/pages/notifications.css
+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 {