demos for spacedust
bad-example.com
1
2
3.notification {
4 padding: 0.75rem;
5 border: 0.5px solid hsla(0, 0%, 50%, 0.3);
6 border-width: 0.5px 0;
7 box-sizing: border-box;
8 display: flex;
9 justify-content: space-between;
10 gap: 0.5rem;
11}
12a.notification {
13 font: inherit;
14 color: inherit;
15}
16a.notification:hover {
17 /*box-shadow: 0 42px 42px -42px inset #2c343c;*/
18 /*, 0 -42px 42px -42px inset #221828;*/
19 /*box-shadow: 0 42px 42px -42px inset #2c343c;*/
20 /*background: #221828;*/
21 background: #0b0d0f;
22 border-top-color: hsla(0, 0%, 100%, 0.3);
23 border-bottom-color: hsla(0, 0%, 0%, 0.3);
24}
25
26.notification.error {
27 background: hsla(347, 72%, 20%, 0.333);
28 align-items: center;
29}
30.notification.error p {
31 margin: 0;
32}
33
34.notification-info {
35 display: flex;
36 align-items: baseline;
37}
38
39.handle {
40 color: skyblue;
41}
42
43.notification-context {
44 font-size: 0.8rem;
45 opacity: 0.667;
46 margin: 0.25rem 0 0;
47 max-width: 48em;
48}
49
50.notification-when {
51 font-size: 0.8rem;
52 opacity: 0.667;
53}