this repo has no description
1@keyframes bell {
2 0% {
3 transform: rotate(0deg);
4 }
5 33% {
6 transform: rotate(5deg);
7 }
8 66% {
9 transform: rotate(-10deg);
10 }
11 100% {
12 transform: rotate(0deg);
13 }
14}
15.notifications-button.open {
16 animation: bell 0.3s ease-out both;
17 transform-origin: 50% 0;
18}
19
20.notifications-menu {
21 width: 28em;
22 font-size: 90%;
23 padding: 0;
24 height: 40em;
25 overflow: auto;
26 overscroll-behavior: contain;
27}
28.notifications-menu .status {
29 font-size: inherit;
30}
31.notifications-menu header {
32 padding: 16px;
33 margin: 0;
34 border-bottom: var(--hairline-width) solid var(--outline-color);
35}
36.notifications-menu header h2 {
37 margin: 0;
38 padding: 0;
39 font-size: 1.2em;
40}
41.notifications-menu main {
42 min-height: 100%;
43}
44.notifications-menu .notification {
45 animation: appear-smooth 0.3s ease-out 0.1s both;
46}
47.notifications-menu footer {
48 animation: slide-up 0.3s ease-out 0.2s both;
49 position: sticky;
50 bottom: 0;
51 border-top: var(--hairline-width) solid var(--outline-color);
52 background-color: var(--bg-blur-color);
53 backdrop-filter: blur(16px);
54 padding: 16px;
55 gap: 8px;
56 display: flex;
57 justify-content: space-between;
58}