this repo has no description
1#notifications-page {
2 .notification {
3 content-visibility: auto;
4 }
5
6 .timeline-header {
7 position: sticky;
8 --mask-padding: 8px;
9 top: calc(48px - var(--mask-padding));
10 transition: top 0.5s ease-in-out;
11 header[hidden] ~ & {
12 top: calc(-1 * var(--mask-padding));
13 }
14 z-index: 1;
15 background-color: inherit;
16 mask-image: linear-gradient(
17 to bottom,
18 transparent,
19 #000 var(--mask-padding) calc(100% - var(--mask-padding) * 2),
20 transparent
21 );
22
23 @media (min-width: 40em) {
24 background-color: var(--bg-faded-color);
25 }
26 padding-block: 16px;
27 margin: 0;
28 opacity: 1;
29
30 #columns & {
31 position: static;
32 background-color: inherit;
33 }
34
35 small {
36 font-weight: normal;
37 font-size: var(--text-size);
38 }
39 }
40}
41
42.notification {
43 display: flex;
44 padding: 16px !important;
45 gap: 12px;
46 animation: appear 0.2s ease-out;
47 clear: both;
48
49 b[tabindex='0']:is(:hover, :focus) {
50 text-decoration: underline;
51 cursor: pointer;
52 }
53}
54.notification-type.notification-mention {
55 padding-top: 16px;
56}
57.only-mentions .notification:not(.notification-mention),
58.only-mentions .timeline-empty {
59 display: none;
60}
61.notification.skeleton {
62 color: var(--outline-color);
63}
64
65.notification-type {
66 width: 24px;
67 flex-shrink: 0;
68 opacity: 0.75;
69 color: var(--text-insignificant-color);
70 line-height: 0;
71}
72.notification-type.notification-mention {
73 color: var(--reply-to-color);
74}
75.notification-type.notification-favourite {
76 color: var(--favourite-color);
77}
78.notification-type.notification-reblog {
79 color: var(--reblog-color);
80}
81.notification-type.notification-poll {
82 color: var(--link-color);
83}
84
85.notification .reblog-icon {
86 color: var(--reblog-color);
87}
88.notification .favourite-icon {
89 color: var(--favourite-color);
90}
91
92.notification .account-avatar-stack {
93 position: relative;
94 text-align: center;
95}
96.notification .account-avatar-stack .account-sub-icons {
97 display: block;
98 width: fit-content;
99 margin: -0.25em auto 0;
100 line-height: 1;
101 z-index: 1;
102 position: relative;
103 background-color: var(--bg-blur-color);
104 /* background-image: linear-gradient(
105 to bottom,
106 var(--bg-color),
107 var(--bg-blur-color)
108 ); */
109 padding: 2px 4px;
110 border-radius: 999px;
111 overflow: hidden;
112 border: var(--hairline-width) solid var(--bg-color);
113 box-shadow: 0 1px var(--drop-shadow-color);
114}
115.notification .avatars-stack .account-avatar-stack .account-sub-icons .icon {
116 transition: transform 0.2s ease-out;
117}
118.notification
119 .avatars-stack:hover
120 .account-avatar-stack
121 .account-sub-icons
122 .icon {
123 transform: rotate(-15deg);
124}
125.notification
126 .avatars-stack:hover
127 .account-avatar-stack
128 .account-sub-icons
129 .icon
130 + .icon {
131 transform: rotate(15deg);
132}
133
134.notification .status-link {
135 border-radius: 8px;
136 border: 1px solid var(--outline-color);
137 max-height: 160px;
138 overflow: hidden;
139 filter: saturate(0.25);
140}
141.notification .status-link:not(.status-type-mention) > .status {
142 font-size: calc(var(--text-size) * 0.9);
143}
144.notification .status-link.truncated:not(.status-type-mention) > .status {
145 /* fade out mask gradient bottom */
146 mask-image: linear-gradient(
147 rgba(0, 0, 0, 1) 130px,
148 rgba(0, 0, 0, 0.5) 145px,
149 transparent 159px
150 );
151}
152.notification .status-link.truncated {
153 position: relative;
154}
155.notification .status-link.truncated:after {
156 content: attr(data-read-more);
157 line-height: 1;
158 display: inline-block;
159 position: absolute;
160 --inset-offset: 16px;
161 inset-block-end: var(--inset-offset);
162 inset-inline-end: var(--inset-offset);
163 color: var(--text-color);
164 background-color: var(--bg-faded-color);
165 border: 1px dashed var(--link-color);
166 box-shadow:
167 0 0 0 1px var(--bg-color),
168 0 -5px 10px var(--bg-color),
169 0 -5px 15px var(--bg-color),
170 0 -5px 20px var(--bg-color);
171 padding: 0.5em 0.75em;
172 border-radius: 10em;
173 font-size: 90%;
174 white-space: nowrap;
175 text-shadow: 0 -1px var(--bg-color);
176 transition: transform 0.2s ease-out;
177}
178.notification .status-link:is(:hover, :focus).truncated:after {
179 color: var(--link-color);
180 transform: translate(2px, 0);
181}
182.notification .status-link.status-type-mention {
183 max-height: 320px;
184 filter: none;
185 background-color: var(--bg-color);
186 border-color: var(--reply-to-color);
187 box-shadow: 0 0 0 3px var(--reply-to-faded-color);
188}
189.notification:focus-visible .status-link,
190.notification .status-link:is(:hover, :focus) {
191 background-color: var(--bg-blur-color);
192 filter: saturate(1);
193 border-color: var(--outline-hover-color);
194}
195.notification .status-link.status-type-mention:is(:hover, :focus) {
196 border-color: var(--reply-to-color);
197 box-shadow: 0 0 5px var(--reply-to-color);
198}
199.notification .status-link:active {
200 filter: brightness(0.95);
201}
202.notification .status-link > * {
203 pointer-events: none;
204}
205
206.notification-content {
207 flex-grow: 1;
208 min-width: 0;
209}
210.notification-content > p:first-child {
211 margin-top: 0;
212 margin-bottom: 8px;
213 text-wrap: pretty;
214}
215
216.notification-group-statuses {
217 margin: 0;
218 padding: 0;
219 list-style: none;
220}
221.notification-group-statuses > li {
222 margin: 0;
223 padding: 0;
224 list-style: none;
225 position: relative;
226 counter-increment: index;
227}
228.notification-group-statuses > li:before {
229 content: counter(index);
230 position: absolute;
231 inset-inline-start: 0;
232 font-size: 10px;
233 padding: 8px;
234 font-weight: bold;
235}
236.notification-group-statuses > li + li {
237 margin-top: -1px;
238}
239.notification-group-statuses > li:not(:last-child) .status-link {
240 border-end-start-radius: 0;
241 border-end-end-radius: 0;
242}
243.notification-group-statuses > li:not(:first-child) .status-link {
244 border-start-start-radius: 0;
245 border-start-end-radius: 0;
246}
247
248#mentions-option {
249 position: relative;
250 z-index: 2;
251 float: right;
252 &:dir(rtl) {
253 float: left;
254 }
255 margin-top: 0.5em;
256}
257#mentions-option label {
258 color: var(--text-insignificant-color);
259 display: inline-block;
260 padding: 1em 16px;
261 position: relative;
262 cursor: pointer;
263 z-index: 1;
264 font-size: 90%;
265 background-color: var(--bg-blur-color);
266 border-radius: 2em;
267}
268#mentions-option label:has(:checked) {
269 color: var(--text-color);
270 background-color: var(--bg-color);
271}
272
273/* FOLLOW REQUESTS */
274
275.follow-requests {
276 padding-block-end: 16px;
277}
278.follow-requests summary {
279 padding: 8px 16px;
280 cursor: pointer;
281}
282.follow-requests summary::marker,
283.follow-requests summary::-webkit-details-marker {
284 color: var(--text-insignificant-color);
285}
286.follow-requests details[open] summary {
287 color: var(--text-insignificant-color);
288}
289.follow-requests ul {
290 list-style: none;
291 padding: 0;
292 margin: 0;
293 max-height: 50vh;
294 max-height: 50dvh;
295 overflow: auto;
296 border-bottom: var(--hairline-width) solid var(--outline-color);
297}
298.follow-requests summary + ul {
299 border-top: var(--hairline-width) solid var(--outline-color);
300}
301.follow-requests ul li {
302 display: flex;
303 align-items: center;
304 padding: 16px;
305 border-bottom: var(--hairline-width) solid var(--outline-color);
306 justify-content: space-between;
307 column-gap: 16px;
308 row-gap: 4px;
309 flex-wrap: wrap;
310}
311.follow-requests ul li:last-child {
312 border-bottom: none;
313}
314.follow-requests ul li .follow-request-buttons {
315 margin: 0;
316 padding: 0;
317 display: flex;
318 flex: 1;
319 gap: 4px;
320 justify-content: flex-end;
321 align-items: center;
322}
323.follow-request-buttons .follow-request-states {
324 vertical-align: middle;
325}
326.follow-request-buttons .follow-request-states .icon {
327 margin-inline: 8px;
328}
329.follow-request-buttons .follow-request-states .icon.follow-accepted {
330 color: var(--green-color);
331}
332.follow-request-buttons .follow-request-states .icon.follow-rejected {
333 color: var(--red-color);
334}
335.follow-requests ul li .follow-request-buttons .follow-request-states {
336 order: -1;
337}
338
339/* ANNOUNCEMENTS */
340
341.announcements {
342 border: 1px solid var(--outline-color);
343 background-color: var(--bg-blur-color);
344 border-radius: 16px;
345 margin: 8px;
346 overflow: hidden;
347}
348.announcements summary {
349 list-style: none;
350 padding: 8px 16px;
351 cursor: pointer;
352 display: flex;
353 gap: 8px;
354 align-items: center;
355 justify-content: space-between;
356 user-select: none;
357 flex-wrap: wrap;
358}
359.announcements summary .announcement-icon {
360 color: var(--red-color);
361}
362.announcements[open] summary {
363 background-color: var(--bg-faded-color);
364}
365.announcements summary > span {
366 display: flex;
367 align-items: center;
368 gap: 8px;
369}
370@keyframes wiggle {
371 0% {
372 transform: rotate(0deg);
373 }
374 25% {
375 transform: rotate(-25deg) scale(1.1);
376 }
377 50% {
378 transform: rotate(5deg);
379 }
380 75% {
381 transform: rotate(-15deg);
382 }
383 100% {
384 transform: rotate(0deg);
385 }
386}
387.announcements summary .announcements-nav-buttons {
388 transition: all 0.2s ease-in-out;
389 opacity: 0;
390 pointer-events: none;
391 display: none;
392}
393.announcements[open] summary .announcements-nav-buttons {
394 display: flex;
395 opacity: 1;
396 pointer-events: auto;
397}
398.announcements summary:hover .announcement-icon {
399 animation: wiggle 0.5s 1;
400}
401.announcements:not([open]):hover {
402 background-color: var(--bg-faded-color);
403}
404.announcements[open] summary {
405 color: var(--text-color);
406}
407.announcements summary::-webkit-details-marker {
408 display: none;
409}
410.announcements > ul {
411 display: flex;
412 overflow-x: auto;
413 overflow-y: hidden;
414 scroll-snap-type: x mandatory;
415 scroll-behavior: smooth;
416 margin: 0;
417 padding: 8px;
418 gap: 8px;
419 background-color: var(--bg-faded-color);
420}
421.announcements > ul > li {
422 background-color: var(--bg-color);
423 scroll-snap-align: center;
424 scroll-snap-stop: always;
425 flex-shrink: 0;
426 display: flex;
427 width: 100%;
428 list-style: none;
429 margin: 0;
430 padding: 0;
431 position: relative;
432 border-radius: 8px;
433 box-shadow: 0 8px 16px -4px var(--drop-shadow-color);
434}
435.announcements > ul.announcements-list-multiple > li {
436 width: calc(100% - 16px);
437}
438.announcements > ul > li:last-child {
439 border-inline-end: none;
440}
441.announcements .announcement-block {
442 padding: 16px;
443 max-height: 50vh;
444 max-height: 50dvh;
445 overflow: auto;
446 mask-image: linear-gradient(
447 to top,
448 transparent 1px,
449 black 48px,
450 black calc(100% - 16px),
451 transparent calc(100% - 1px)
452 );
453}
454.announcements .announcement-content {
455 line-height: 1.4;
456}
457.announcements .announcement-content p {
458 margin-block: min(0.75em, 12px);
459 white-space: pre-wrap;
460 tab-size: 2;
461 text-wrap: pretty;
462}
463.announcements .announcement-reactions:not(:hidden) {
464 display: flex;
465 flex-wrap: wrap;
466 gap: 8px;
467}
468.announcements .announcement-reactions button.reacted {
469 color: var(--text-color);
470 background-color: var(--link-faded-color);
471}
472
473/* FILTERED NOTIFICATIONS */
474
475.filtered-notifications {
476 padding-block-end: 16px;
477
478 summary {
479 padding: 8px 16px;
480 cursor: pointer;
481 font-weight: 600;
482 user-select: none;
483 margin: 16px 0 0;
484 color: var(--text-insignificant-color);
485
486 &::marker,
487 &::-webkit-details-marker {
488 color: var(--text-insignificant-color);
489 }
490 }
491 details[open] summary {
492 color: var(--text-color);
493 }
494
495 summary + ul {
496 }
497 ul {
498 list-style: none;
499 padding: 0;
500 margin: 0;
501 max-height: 50vh;
502 max-height: 50dvh;
503 overflow: auto;
504 border-top: 1px solid var(--outline-color);
505 border-bottom: 1px solid var(--outline-color);
506 background-color: var(--bg-faded-color);
507
508 @media (min-width: 40em) {
509 background-color: var(--bg-color);
510 border-radius: 16px;
511 border-width: 0;
512 }
513
514 li {
515 display: flex;
516 padding: 16px;
517 row-gap: 8px;
518 column-gap: 16px;
519 border-bottom: 1px solid var(--outline-color);
520 }
521 li:last-child {
522 border-bottom: none;
523 }
524
525 .request-notifcations {
526 min-width: 0;
527 flex-grow: 1;
528 display: flex;
529 flex-direction: column;
530 align-items: flex-start;
531 gap: 8px;
532
533 .last-post {
534 max-width: 100%;
535
536 > .status-link {
537 border-radius: 8px;
538 overflow: hidden;
539 --max-height: 160px;
540 max-height: var(--max-height);
541 border: 1px solid var(--outline-color);
542
543 &:is(:hover, :focus-visible) {
544 border-color: var(--outline-hover-color);
545 }
546
547 .status {
548 mask-image: linear-gradient(
549 to bottom,
550 black calc(var(--max-height) / 2),
551 transparent calc(var(--max-height) - 8px)
552 );
553 font-size: calc(var(--text-size) * 0.9);
554
555 .content-container {
556 pointer-events: none;
557 filter: saturate(0.5);
558 }
559 }
560 }
561 }
562
563 .request-notifications-account {
564 display: flex;
565 align-items: center;
566 gap: 4px;
567
568 small {
569 flex: 1;
570 min-width: 0;
571 }
572 }
573 }
574
575 .notification-request-buttons {
576 grid-area: buttons;
577 margin: 0;
578 padding: 0;
579 display: flex;
580 flex-direction: column;
581 gap: 4px;
582
583 button {
584 max-width: 30vw;
585 }
586
587 .notification-request-states {
588 min-height: 32px;
589 text-align: center;
590 vertical-align: middle;
591
592 .icon {
593 margin-inline: 8px;
594
595 &.notification-accepted {
596 color: var(--green-color);
597 }
598
599 &.notification-dismissed {
600 color: var(--red-color);
601 }
602 }
603 }
604 }
605 }
606}
607
608#notifications-settings {
609 label {
610 display: flex;
611 gap: 8px;
612 align-items: center;
613 justify-content: space-between;
614
615 input[type='checkbox'] {
616 flex-shrink: 0;
617 }
618 }
619
620 .notification-policy-fields {
621 display: flex;
622 flex-direction: column;
623 gap: 8px;
624
625 select:has(option[value='accept']:checked) {
626 box-shadow: 0 0 0 2px var(--green-color);
627 }
628 select:has(option[value='filter']:checked) {
629 box-shadow: 0 0 0 2px var(--orange-color);
630 }
631 select:has(option[value='drop']:checked) {
632 box-shadow: 0 0 0 2px var(--red-color);
633 }
634 }
635}