-
Notifications
You must be signed in to change notification settings - Fork 0
/
phoenix-callouts.css
99 lines (85 loc) · 3.45 KB
/
phoenix-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
/* Phoenix Theme addon for old-style admonitions/callouts in Obsidian 1.0+ */
/* adapted from kepano's snippet at https://gist.github.com/kepano/cde61ac7db1afd3f173a16157c627f93 */
body {
--callout-border-width: 0 0 0 4px;
--callout-border-opacity: 1;
--callout-radius: 0.2em;
--callout-padding: 0;
--callout-title-padding: var(--size-4-3) var(--size-4-3); /* top-bottom, left-right */
--callout-content-padding: var(--size-4-3) var(--size-4-3); /* top-bottom, left-right */
--callout-content-background: var(--background-primary-alt);
}
.callout-content {
background-color: var(--callout-content-background);
}
/* remove unnecessary margin from certain child elements of callout */
/* also keeps things more balanced and uniform */
.callout-content ul,
.callout-content ol {
margin-bottom: 0 !important;
}
/* remove strange bottom margin due to the span surrounding an img embed */
.callout-content img {
margin-bottom: -8px !important;
}
/* remove (colored?) space at the bottom of codeblock-type admonitions (not applicable to newer blockquote-type callouts) */
.callout-content.admonition-content {
margin-bottom: 0 !important;
}
/* not applicable for old-style callouts since this lengthens the colored title bar */
/* replaced with "inverse" (content padding, below) */
.markdown-preview-view .callout-title {
margin-bottom: 0 !important;
}
/* associated with above */
.markdown-preview-view .callout-content {
padding-top: var(--size-4-3) !important;
}
/* fix for shadows of callouts inside callouts */
/* requires Modular CSS Layout - Multi-Column */
/* https://github.com/efemkay/obsidian-modular-css-layout */
.callout:not(.admonition).drop-shadow,
.callout-content .callout {
box-shadow: 0 .1rem .2rem var(--background-modifier-box-shadow);
}
/* remove margins from inner callouts of multi-column callout */
/* this prevents "duplication" of the margins/padding */
div[data-callout="multi-column"].callout > .callout-content > *:is(div,ul,blockquote,p) {
margin: 0 !important;
}
/* however, small bottom/left margins needed for callouts in callouts */
div[data-callout="multi-column"].callout > .callout-content > *:is(div,ul,blockquote,p) {
margin-bottom: 3px !important;
margin-right: 2px !important;
}
/* fixes to make printing callouts readable on a white background */
@media print {
.callout {
/* background-color: color-mix(in srgb, var(--r-meteor), rgba(var(--callout-color)) 40%) */
/* background-color: color-mix(in srgb, rgba(var(--callout-color), 0.5), #78787878) */
/* background-color: rgb(from var(--callout-color) calc(1 - r) calc(1 - g) calc(1 - b)); */
background-color: rgba(var(--callout-color), 0.2);
}
.callout::before {
/* background-color: rgba(var(--callout-color), 0.1); */
margin-top: calc(0px - calc(var(--size-normal) + var(--size-4-4) + var(--size-4-3)));
/* background-color: var(--background-primary); */
background-color: rgba(var(--callout-color), 0.7);
/* background-color: var(--r-dark0); */
filter: invert(0.5);
mix-blend-mode: overlay;
display: block;
/* width: 100%; */
height: calc(var(--size-normal) + var(--size-4-4) + var(--size-4-3));
position: relative;
top: calc(var(--size-normal) + var(--size-4-4) + var(--size-4-3));
/* left: calc(var(--callout-radius) + 0.01em); */
border-radius: 0 var(--callout-radius) 0 0;
content: "";
z-index: -1;
}
.callout-content {
/* very light version of r-light0 */
background-color: #f8f1ea;
}
}