1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
stacksidebar {
border-left-width: 0px;
border-right-width: 0px;
}
/* Mimic the status page. */
.avatar-page,
.timed-animation-page {
margin: 36px 12px;
}
.avatar-page > box > label.title,
.timed-animation-page > box > label.title {
margin-bottom: 12px;
}
.avatar-page > box > label.description {
margin-bottom: 36px;
}
#animation-sample {
min-width: 30px;
min-height: 30px;
border-radius: 24px;
background: linear-gradient(to bottom, var(--green-2), var(--green-5));
}
.tab-page {
--accent-bg-color: rgb(0 0 0 / 60%);
--accent-fg-color: white;
--accent-color: rgb(0 0 0 / 75%);
--grey-bg-color: white;
background: hsl(from var(--hue) h s 92%);
}
@media (prefers-color-scheme: dark) {
.tab-page {
--accent-bg-color: rgb(255 255 255 / 60%);
--accent-fg-color: rgb(0 0 0 / 80%);
--accent-color: rgb(255 255 255 / 75%);
--grey-bg-color: #363636;
background: hsl(from var(--hue) h s 20%);
}
}
.tab-page-color-1 {
--hue: var(--blue-3);
}
.tab-page-color-2 {
--hue: var(--green-3);
}
.tab-page-color-3 {
--hue: var(--yellow-3);
}
.tab-page-color-4 {
--hue: var(--orange-3);
}
.tab-page-color-5 {
--hue: var(--red-3);
}
.tab-page-color-6 {
--hue: var(--purple-3);
}
.tab-page-color-7 {
--hue: var(--brown-3);
}
.tab-page-color-8 {
background: var(--grey-bg-color);
}
.tag {
background: color-mix(in srgb, currentColor 10%, transparent);
color: inherit;
border-radius: 99px;
}
.tag:dir(ltr) {
padding-left: 12px;
}
.tag:dir(rtl) {
padding-right: 12px;
}
.tag button {
margin: 3px;
min-width: 0;
min-height: 0;
padding: 6px;
}
.toolbar-demo {
border-radius: 15px;
}
|
