obsidian-inline-spoilers/styles.css at master · logonoff/obsidian-inline-spoilers · GitHub

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
/*!
 * Inline Spoilers for Obsidian
 * https://github.com/logonoff/obsidian-inline-spoilers
 * SPDX-License-Identifier: GPL-3.0-or-later
 */
body {
	--inline-spoilers-hidden-foreground: transparent;
	--inline-spoilers-hidden-background: var(--interactive-accent);

	--inline-spoilers-revealed-foreground: var(--text-accent);
	--inline-spoilers-revealed-background: hsla(var(--color-accent-hsl), 0.075);

	--inline-spoilers-spoiler-radius: var(--radius-s);
}

/* spoiler bar */
.inline_spoilers-spoiler,
.inline_spoilers-editor-spoiler,
.inline_spoilers-editor-spoiler-delimiter {
	/* obscured */
	background-color: var(--inline-spoilers-hidden-background) !important;
	color: var(--inline-spoilers-hidden-foreground) !important;
}

/** used when a hidden spoiler is revealed by clicking in reader mode */
.inline_spoilers-spoiler.inline_spoilers-revealed,

/** used when a hidden spoiler is revealed in editor mode */
.cm-active .inline_spoilers-editor-spoiler,
.cm-active .inline_spoilers-editor-spoiler-delimiter,

/** used when a hidden spoiler is revealed using "Reveal all spoilers" */
.inline_spoilers-revealed .inline_spoilers-spoiler,
.inline_spoilers-revealed .inline_spoilers-editor-spoiler,
.inline_spoilers-revealed .inline_spoilers-editor-spoiler-delimiter {
	/* revealed */
	background-color: var(--inline-spoilers-revealed-background) !important;
	color: var(--inline-spoilers-revealed-foreground) !important;
}

/* reader */
.inline_spoilers-spoiler {
	border-radius: var(--inline-spoilers-spoiler-radius);
}

/* editor */
.is-live-preview .inline_spoilers-editor-spoiler {
	border-radius: var(--inline-spoilers-spoiler-radius);
}

.is-live-preview .cm-active .inline_spoilers-editor-spoiler {
	/* contiguous border radius with the delimiter */
	border-radius: 0em;
}

/* delimiter */
.cm-line .inline_spoilers-editor-spoiler-delimiter {
	&:has(+ .inline_spoilers-editor-spoiler) {
		border-radius: var(--inline-spoilers-spoiler-radius) 0 0 var(--inline-spoilers-spoiler-radius);
	}
	&:is(.inline_spoilers-editor-spoiler + .inline_spoilers-editor-spoiler-delimiter) {
		border-radius: 0 var(--inline-spoilers-spoiler-radius) var(--inline-spoilers-spoiler-radius) 0;
	}
}

.is-live-preview .inline_spoilers-editor-spoiler-delimiter {
	display: none;
}

.is-live-preview .cm-active .inline_spoilers-editor-spoiler-delimiter {
	display: unset;
}