-
Notifications
You must be signed in to change notification settings - Fork 1
/
styles.css
103 lines (93 loc) · 3.27 KB
/
styles.css
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
/* This is taken from @microflash/remark-callout-directives/themes/github/index.css and modified. Modified to work with tailwind darkMode, and match starlights <Asides/> */
:root {
--callout-headingFontColor-note: hsl(235, 76%, 29%);
--callout-bg-note: hsl(236, 77%, 90%);
--callout-border-note: hsl(235, 82%, 59%);
--callout-headingFontColor-success: hsl(137, 72%, 24%);
--callout-bg-success: hsl(96, 79%, 91%);
--callout-border-success: hsl(137, 66%, 30%);
--callout-headingFontColor-tip: hsl(277, 76%, 31%);
--callout-bg-tip: hsl(276, 70%, 90%);
--callout-border-tip: hsl(277, 81%, 60%);
--callout-headingFontColor-caution: hsl(41, 57%, 27%);
--callout-bg-caution: hsl(43, 80%, 88%);
--callout-border-caution: hsl(41, 80%, 63%);
--callout-headingFontColor-danger: hsl(342, 62%, 31%);
--callout-bg-danger: hsl(338, 57%, 89%);
--callout-border-danger: hsl(341, 72%, 60%);
}
:root[data-theme="dark"] {
--callout-headingFontColor-note: hsl(235, 86%, 86%);
--callout-bg-note: hsl(235, 50%, 20%);
--callout-border-note: hsl(235, 90%, 59%);
--callout-headingFontColor-success: hsl(96, 77%, 81%);
--callout-bg-success: hsl(95, 33%, 23%);
--callout-border-success: hsl(96, 77%, 81%);
--callout-headingFontColor-tip: hsl(276, 72%, 89%);
--callout-bg-tip: hsl(276, 36%, 22%);
--callout-border-tip: hsl(277, 81%, 60%);
--callout-headingFontColor-caution: hsl(42, 72%, 87%);
--callout-bg-caution: hsl(43, 33%, 22%);
--callout-border-caution: hsl(42, 72%, 65%);
--callout-headingFontColor-danger: hsl(338, 61%, 86%);
--callout-bg-danger: hsl(339, 32%, 21%);
--callout-border-danger: hsl(340, 64%, 62%);
}
.callout {
--calloutheadingFontColor: var(--callout-headingFontColor);
--callout-bg: var(--callout-bg);
--callout-border: var(--callout-border);
border-left: 0.25em solid var(--callout-border);
padding: 0.5rem 1rem;
color: inherit;
background-color: var(--callout-bg);
border-radius: 0.125rem;
}
.callout-indicator {
display: flex;
align-items: center;
line-height: 1;
margin-bottom: 16px;
color: var(--calloutheadingFontColor);
}
.callout-title {
font-weight: 600;
font-size: 1.25rem;
letter-spacing: 0.025em;
}
.callout-indicator > svg:first-of-type {
margin-right: 0.5rem;
}
.callout-content:first-child,
.callout-content:only-child {
margin-block-start: 0;
}
.callout-content:last-child,
.callout-content:only-child {
margin-block-end: 0;
}
.callout-note {
--callout-headingFontColor: var(--callout-headingFontColor-note);
--callout-bg: var(--callout-bg-note);
--callout-border: var(--callout-border-note);
}
.callout-success {
--callout-headingFontColor: var(--callout-headingFontColor-success);
--callout-bg: var(--callout-bg-success);
--callout-border: var(--callout-border-success);
}
.callout-caution {
--callout-headingFontColor: var(--callout-headingFontColor-caution);
--callout-bg: var(--callout-bg-caution);
--callout-border: var(--callout-border-caution);
}
.callout-danger {
--callout-headingFontColor: var(--callout-headingFontColor-danger);
--callout-bg: var(--callout-bg-danger);
--callout-border: var(--callout-border-danger);
}
.callout-tip {
--callout-headingFontColor: var(--callout-headingFontColor-tip);
--callout-bg: var(--callout-bg-tip);
--callout-border: var(--callout-border-tip);
}