-
-
Notifications
You must be signed in to change notification settings - Fork 13
/
Copy pathPrism Callouts.css
328 lines (323 loc) · 14.1 KB
/
Prism Callouts.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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
/*
Prism Callouts for Obsidian.md
> Snippet of an feature extracted from the Prism Theme for Obsidian.md
Version: 1.0.0
Documentation: https://github.com/damiankorcz/Prism-Theme/wiki/Callout-Customisation
Source: https://github.com/damiankorcz/Obsidian-Prism
Distributed under the MIT License. See https://github.com/damiankorcz/Obsidian-Prism/blob/main/LICENSE for more information.
Copyright (c) 2022-2024 Damian Korcz <https://github.com/damiankorcz>
*/
/* @settings
name: Prism Callouts 1.0.0
id: obsidian-prism-callouts
settings:
-
id: prism-callout
title: Prism Callout Class
type: class-toggle
default: true
*/
body:not(.prism-theme).theme-light {
--color-grey-base-hsl: 0, 0%, 90%;
--color-red-base-hsl: 7, 90%, 92%;
--color-orange-base-hsl: 26, 85%, 89%;
--color-yellow-base-hsl: 42, 88%, 83%;
--color-green-base-hsl: 101, 49%, 85%;
--color-mint-base-hsl: 152, 62%, 85%;
--color-cyan-base-hsl: 184, 60%, 85%;
--color-blue-base-hsl: 217, 76%, 92%;
--color-purple-base-hsl: 251, 87%, 94%;
--color-pink-base-hsl: 328, 79%, 93%;
--color-grey-tint-hsl: 0, 0%, 73%;
--color-red-tint-hsl: 7, 82%, 78%;
--color-orange-tint-hsl: 27, 80%, 69%;
--color-yellow-tint-hsl: 44, 67%, 58%;
--color-green-tint-hsl: 99, 50%, 59%;
--color-mint-tint-hsl: 158, 59%, 55%;
--color-cyan-tint-hsl: 184, 61%, 56%;
--color-blue-tint-hsl: 219, 73%, 78%;
--color-purple-tint-hsl: 252, 84%, 83%;
--color-pink-tint-hsl: 327, 72%, 79%;
--color-grey-text-hsl: 0, 0%, 47%;
--color-red-text-hsl: 3, 68%, 52%;
--color-orange-text-hsl: 31, 100%, 36%;
--color-yellow-text-hsl: 38, 62%, 37%;
--color-green-text-hsl: 93, 100%, 27%;
--color-mint-text-hsl: 161, 100%, 26%;
--color-cyan-text-hsl: 184, 100%, 28%;
--color-blue-text-hsl: 221, 67%, 56%;
--color-purple-text-hsl: 258, 75%, 63%;
--color-pink-text-hsl: 320, 60%, 50%;
}
body:not(.prism-theme).theme-dark {
--color-grey-base-hsl: 0, 0%, 16%;
--color-red-base-hsl: 2, 55%, 19%;
--color-orange-base-hsl: 26, 65%, 15%;
--color-yellow-base-hsl: 43, 73%, 12%;
--color-green-base-hsl: 124, 54%, 12%;
--color-mint-base-hsl: 165, 88%, 10%;
--color-cyan-base-hsl: 195, 65%, 13%;
--color-blue-base-hsl: 225, 50%, 20%;
--color-purple-base-hsl: 271, 48%, 21%;
--color-pink-base-hsl: 325, 55%, 18%;
--color-grey-tint-hsl: 0, 0%, 40%;
--color-red-tint-hsl: 3, 49%, 46%;
--color-orange-tint-hsl: 27, 53%, 37%;
--color-yellow-tint-hsl: 44, 59%, 31%;
--color-green-tint-hsl: 123, 43%, 32%;
--color-mint-tint-hsl: 166, 73%, 26%;
--color-cyan-tint-hsl: 195, 52%, 34%;
--color-blue-tint-hsl: 224, 44%, 49%;
--color-purple-tint-hsl: 271, 43%, 51%;
--color-pink-tint-hsl: 325, 47%, 45%;
--color-grey-text-hsl: 0, 0%, 67%;
--color-red-text-hsl: 4, 74%, 74%;
--color-orange-text-hsl: 26, 85%, 63%;
--color-yellow-text-hsl: 44, 60%, 53%;
--color-green-text-hsl: 124, 48%, 54%;
--color-mint-text-hsl: 166, 67%, 45%;
--color-cyan-text-hsl: 195, 69%, 58%;
--color-blue-text-hsl: 225, 61%, 75%;
--color-purple-text-hsl: 267, 52%, 75%;
--color-pink-text-hsl: 330, 64%, 74%;
}
body:not(.prism-theme).theme-light, body:not(.prism-theme).theme-dark {
--color-grey-base: hsl(var(--color-grey-base-hsl));
--color-red-base: hsl(var(--color-red-base-hsl));
--color-orange-base: hsl(var(--color-orange-base-hsl));
--color-yellow-base: hsl(var(--color-yellow-base-hsl));
--color-green-base: hsl(var(--color-green-base-hsl));
--color-mint-base: hsl(var(--color-mint-base-hsl));
--color-cyan-base: hsl(var(--color-cyan-base-hsl));
--color-blue-base: hsl(var(--color-blue-base-hsl));
--color-purple-base: hsl(var(--color-purple-base-hsl));
--color-pink-base: hsl(var(--color-pink-base-hsl));
--color-grey-tint: hsl(var(--color-grey-tint-hsl));
--color-red-tint: hsl(var(--color-red-tint-hsl));
--color-orange-tint: hsl(var(--color-orange-tint-hsl));
--color-yellow-tint: hsl(var(--color-yellow-tint-hsl));
--color-green-tint: hsl(var(--color-green-tint-hsl));
--color-mint-tint: hsl(var(--color-mint-tint-hsl));
--color-cyan-tint: hsl(var(--color-cyan-tint-hsl));
--color-blue-tint: hsl(var(--color-blue-tint-hsl));
--color-purple-tint: hsl(var(--color-purple-tint-hsl));
--color-pink-tint: hsl(var(--color-pink-tint-hsl));
--color-grey-text: hsl(var(--color-grey-text-hsl));
--color-red-text: hsl(var(--color-red-text-hsl));
--color-orange-text: hsl(var(--color-orange-text-hsl));
--color-yellow-text: hsl(var(--color-yellow-text-hsl));
--color-green-text: hsl(var(--color-green-text-hsl));
--color-mint-text: hsl(var(--color-mint-text-hsl));
--color-cyan-text: hsl(var(--color-cyan-text-hsl));
--color-blue-text: hsl(var(--color-blue-text-hsl));
--color-purple-text: hsl(var(--color-purple-text-hsl));
--color-pink-text: hsl(var(--color-pink-text-hsl));
}
body:not(.prism-theme) .callout {
--callout-padding: 4px;
--callout-radius: 8px;
--callout-background-alpha: 20%;
}
/* Hides the Style Settings options for this snippet since there currently aren't any beside the dummy class. */
.setting-item[data-id=obsidian-prism-callouts] {
display: none;
}
body:not(.prism-theme) .callout {
background-color: unset;
border: unset;
}
body:not(.prism-theme) .callout .callout-title {
position: relative;
z-index: 5;
gap: unset;
align-items: center;
min-height: 36px;
border: 2px solid;
border-radius: var(--callout-radius);
}
body:not(.prism-theme) .callout .callout-title:empty + .callout-content {
padding: var(--size-4-1) var(--size-4-3);
border-top-style: solid;
border-top-width: 1px;
border-radius: var(--callout-radius);
}
body:not(.prism-theme) .callout .callout-title-inner {
padding: var(--size-4-1) 0;
margin: 0 var(--size-4-1);
}
body:not(.prism-theme) .callout .callout-icon {
align-self: unset;
margin: 0 var(--size-4-1) 0 var(--size-4-2);
border-radius: var(--callout-radius);
}
body:not(.prism-theme) .callout .callout-fold {
display: flex;
align-self: unset;
margin-top: unset;
margin-left: auto;
}
body:not(.prism-theme) .callout .callout-content {
padding: var(--size-4-5) var(--size-4-3) var(--size-4-1) var(--size-4-3);
margin-top: -16px;
border-right: 1px solid;
border-bottom: 1px solid;
border-left: 1px solid;
border-bottom-right-radius: var(--callout-radius);
border-bottom-left-radius: var(--callout-radius);
}
body:not(.prism-theme) .callout[data-callout=note] > .callout-title {
color: var(--color-grey-text);
background-color: var(--color-grey-base);
border-color: var(--color-grey-tint);
}
body:not(.prism-theme) .callout[data-callout=note] > .callout-title .callout-icon .svg-icon {
color: var(--color-grey-text);
}
body:not(.prism-theme) .callout[data-callout=note] > .callout-content {
background-color: hsla(var(--color-grey-base-hsl), var(--callout-background-alpha));
border-color: var(--color-grey-tint);
}
body:not(.prism-theme) .callout:is([data-callout=abstract], [data-callout=summary], [data-callout=tldr]) > .callout-title {
color: var(--color-cyan-text);
background-color: var(--color-cyan-base);
border-color: var(--color-cyan-tint);
}
body:not(.prism-theme) .callout:is([data-callout=abstract], [data-callout=summary], [data-callout=tldr]) > .callout-title .callout-icon .svg-icon {
color: var(--color-cyan-text);
}
body:not(.prism-theme) .callout:is([data-callout=abstract], [data-callout=summary], [data-callout=tldr]) > .callout-content {
background-color: hsla(var(--color-cyan-base-hsl), var(--callout-background-alpha));
border-color: var(--color-cyan-tint);
}
body:not(.prism-theme) .callout:is([data-callout=info], [data-callout=todo]) > .callout-title {
color: var(--color-blue-text);
background-color: var(--color-blue-base);
border-color: var(--color-blue-tint);
}
body:not(.prism-theme) .callout:is([data-callout=info], [data-callout=todo]) > .callout-title .callout-icon .svg-icon {
color: var(--color-blue-text);
}
body:not(.prism-theme) .callout:is([data-callout=info], [data-callout=todo]) > .callout-content {
background-color: hsla(var(--color-blue-base-hsl), var(--callout-background-alpha));
border-color: var(--color-blue-tint);
}
body:not(.prism-theme) .callout:is([data-callout=tip], [data-callout=hint], [data-callout=important]) > .callout-title {
color: var(--color-mint-text);
background-color: var(--color-mint-base);
border-color: var(--color-mint-tint);
}
body:not(.prism-theme) .callout:is([data-callout=tip], [data-callout=hint], [data-callout=important]) > .callout-title .callout-icon .svg-icon {
color: var(--color-mint-text);
}
body:not(.prism-theme) .callout:is([data-callout=tip], [data-callout=hint], [data-callout=important]) > .callout-content {
background-color: hsla(var(--color-mint-base-hsl), var(--callout-background-alpha));
border-color: var(--color-mint-tint);
}
body:not(.prism-theme) .callout:is([data-callout=success], [data-callout=check], [data-callout=done]) > .callout-title {
color: var(--color-green-text);
background-color: var(--color-green-base);
border-color: var(--color-green-tint);
}
body:not(.prism-theme) .callout:is([data-callout=success], [data-callout=check], [data-callout=done]) > .callout-title .callout-icon .svg-icon {
color: var(--color-green-text);
}
body:not(.prism-theme) .callout:is([data-callout=success], [data-callout=check], [data-callout=done]) > .callout-content {
background-color: hsla(var(--color-green-base-hsl), var(--callout-background-alpha));
border-color: var(--color-green-tint);
}
body:not(.prism-theme) .callout:is([data-callout=question], [data-callout=help], [data-callout=faq]) > .callout-title {
color: var(--color-yellow-text);
background-color: var(--color-yellow-base);
border-color: var(--color-yellow-tint);
}
body:not(.prism-theme) .callout:is([data-callout=question], [data-callout=help], [data-callout=faq]) > .callout-title .callout-icon .svg-icon {
color: var(--color-yellow-text);
}
body:not(.prism-theme) .callout:is([data-callout=question], [data-callout=help], [data-callout=faq]) > .callout-content {
background-color: hsla(var(--color-yellow-base-hsl), var(--callout-background-alpha));
border-color: var(--color-yellow-tint);
}
body:not(.prism-theme) .callout:is([data-callout=warning], [data-callout=caution], [data-callout=attention]) > .callout-title {
color: var(--color-orange-text);
background-color: var(--color-orange-base);
border-color: var(--color-orange-tint);
}
body:not(.prism-theme) .callout:is([data-callout=warning], [data-callout=caution], [data-callout=attention]) > .callout-title .callout-icon .svg-icon {
color: var(--color-orange-text);
}
body:not(.prism-theme) .callout:is([data-callout=warning], [data-callout=caution], [data-callout=attention]) > .callout-content {
background-color: hsla(var(--color-orange-base-hsl), var(--callout-background-alpha));
border-color: var(--color-orange-tint);
}
body:not(.prism-theme) .callout:is([data-callout=failure], [data-callout=fail], [data-callout=missing]) > .callout-title {
color: var(--color-red-text);
background-color: var(--color-red-base);
border-color: var(--color-red-tint);
}
body:not(.prism-theme) .callout:is([data-callout=failure], [data-callout=fail], [data-callout=missing]) > .callout-title .callout-icon .svg-icon {
color: var(--color-red-text);
}
body:not(.prism-theme) .callout:is([data-callout=failure], [data-callout=fail], [data-callout=missing]) > .callout-content {
background-color: hsla(var(--color-red-base-hsl), var(--callout-background-alpha));
border-color: var(--color-red-tint);
}
body:not(.prism-theme) .callout:is([data-callout=danger], [data-callout=error]) > .callout-title {
color: var(--color-red-text);
background-color: var(--color-red-base);
border-color: var(--color-red-tint);
}
body:not(.prism-theme) .callout:is([data-callout=danger], [data-callout=error]) > .callout-title .callout-icon .svg-icon {
color: var(--color-red-text);
}
body:not(.prism-theme) .callout:is([data-callout=danger], [data-callout=error]) > .callout-content {
background-color: hsla(var(--color-red-base-hsl), var(--callout-background-alpha));
border-color: var(--color-red-tint);
}
body:not(.prism-theme) .callout[data-callout=bug] > .callout-title {
color: var(--color-pink-text);
background-color: var(--color-pink-base);
border-color: var(--color-pink-tint);
}
body:not(.prism-theme) .callout[data-callout=bug] > .callout-title .callout-icon .svg-icon {
color: var(--color-pink-text);
}
body:not(.prism-theme) .callout[data-callout=bug] > .callout-content {
background-color: hsla(var(--color-pink-base-hsl), var(--callout-background-alpha));
border-color: var(--color-pink-tint);
}
body:not(.prism-theme) .callout[data-callout=example] > .callout-title {
color: var(--color-purple-text);
background-color: var(--color-purple-base);
border-color: var(--color-purple-tint);
}
body:not(.prism-theme) .callout[data-callout=example] > .callout-title .callout-icon .svg-icon {
color: var(--color-purple-text);
}
body:not(.prism-theme) .callout[data-callout=example] > .callout-content {
background-color: hsla(var(--color-purple-base-hsl), var(--callout-background-alpha));
border-color: var(--color-purple-tint);
}
body:not(.prism-theme) .callout:is([data-callout=quote], [data-callout=cite]) > .callout-title {
color: var(--color-grey-text);
background-color: var(--color-grey-base);
border-color: var(--color-grey-tint);
}
body:not(.prism-theme) .callout:is([data-callout=quote], [data-callout=cite]) > .callout-title .callout-icon .svg-icon {
color: var(--color-grey-text);
}
body:not(.prism-theme) .callout:is([data-callout=quote], [data-callout=cite]) > .callout-content {
background-color: hsla(var(--color-grey-base-hsl), var(--callout-background-alpha));
border-color: var(--color-grey-tint);
}
body:not(.prism-theme) .release-notes-view .callout[data-callout] > .callout-title {
color: var(--color-grey-text);
background-color: var(--color-grey-base);
border-color: var(--color-grey-tint);
}
body:not(.prism-theme) .release-notes-view .callout[data-callout] > .callout-title .callout-icon .svg-icon {
color: var(--color-grey-text);
}
body:not(.prism-theme) .release-notes-view .callout[data-callout] > .callout-content {
background-color: hsla(var(--color-grey-base-hsl), var(--callout-background-alpha));
border-color: var(--color-grey-tint);
}