Skip to content

Commit ed82c90

Browse files
DavidOliverDavidOliver
committed
Update admonitions; simplify code bg/bdr colors
Closes #2149
1 parent 6c4aac2 commit ed82c90

File tree

8 files changed

+211
-188
lines changed

8 files changed

+211
-188
lines changed

‎assets/css/content/admonition.css‎

Lines changed: 92 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,12 @@
1+
/* See general.css for base admonition styles - they are shared with blockquote */
2+
13
.content-inner section.admonition {
24
border-radius: var(--borderRadius-base);
3-
border-left: 0;
4-
}
5-
6-
.content-inner section.admonition.warning {
7-
background-color: var(--warningBackground);
8-
}
9-
10-
.content-inner section.admonition.error {
11-
background-color: var(--errorBackground);
12-
}
13-
14-
.content-inner section.admonition.info {
15-
background-color: var(--infoBackground);
16-
}
17-
18-
.content-inner section.admonition.neutral {
19-
background-color: var(--neutralBackground);
20-
}
21-
22-
.content-inner section.admonition.tip {
23-
background-color: var(--tipBackground);
245
}
256

267
.content-inner section.admonition > .admonition-title {
278
color: var(--contrast);
28-
margin: 0 -1.2rem;
29-
padding: .7rem 1.2rem .7rem 3.3rem;
9+
padding-left: 2.2rem;
3010
font-weight: 700;
3111
font-style: normal;
3212
}
@@ -41,72 +21,104 @@
4121
-moz-osx-font-smoothing: grayscale;
4222
}
4323

44-
.content-inner section.admonition > .admonition-title.warning {
45-
background-color: var(--warningHeadingBackground);
46-
color: var(--warningHeading);
47-
}
48-
.content-inner section.admonition > .admonition-title.warning::before {
49-
content: var(--icon-error-warning);
50-
color: var(--warningHeading);
51-
}
52-
53-
.content-inner section.admonition > .admonition-title.error {
54-
background-color: var(--errorHeadingBackground);
55-
color: var(--errorHeading);
56-
}
57-
.content-inner section.admonition > .admonition-title.error::before {
58-
content: var(--icon-error-warning);
59-
color: var(--errorHeading);
60-
}
61-
62-
.content-inner section.admonition > .admonition-title.info {
63-
background-color: var(--infoHeadingBackground);
64-
color: var(--infoHeading);
65-
}
66-
.content-inner section.admonition > .admonition-title.info::before {
67-
content: var(--icon-information);
68-
color: var(--infoHeading);
69-
}
24+
.content-inner section.admonition {
25+
/* Default icon */
26+
& .admonition-title::before {
27+
content: var(--icon-error-warning);
28+
}
7029

71-
.content-inner section.admonition > .admonition-title.neutral {
72-
background-color: var(--neutralHeadingBackground);
73-
color: var(--neutralHeading);
74-
}
75-
.content-inner section.admonition > .admonition-title.neutral::before {
76-
content: var(--icon-double-quotes-l);
77-
color: var(--neutralHeading);
30+
&.warning {
31+
background-color: var(--warningBackground);
32+
& .admonition-title {
33+
&, &::before {
34+
color: var(--warningHeading);
35+
}
36+
}
37+
}
38+
&.error {
39+
background-color: var(--errorBackground);
40+
& .admonition-title {
41+
&, &::before {
42+
color: var(--errorHeading);
43+
}
44+
}
45+
}
46+
&.info {
47+
background-color: var(--infoBackground);
48+
& .admonition-title {
49+
&, &::before {
50+
color: var(--infoHeading);
51+
}
52+
}
53+
}
54+
&.neutral {
55+
background-color: var(--neutralBackground);
56+
& .admonition-title {
57+
&, &::before {
58+
content: var(--icon-double-quotes-l);
59+
color: var(--neutralHeading);
60+
}
61+
}
62+
}
63+
&.tip {
64+
background-color: var(--tipBackground);
65+
& .admonition-title {
66+
&, &::before {
67+
color: var(--tipHeading);
68+
}
69+
}
70+
}
7871
}
7972

80-
.content-inner section.admonition > .admonition-title.tip {
81-
background-color: var(--tipHeadingBackground);
82-
color: var(--tipHeading);
83-
}
84-
.content-inner section.admonition > .admonition-title.tip::before {
85-
content: var(--icon-information);
86-
color: var(--tipHeading);
73+
@media print {
74+
.content-inner section.admonition {
75+
&.warning {
76+
border-color: hsl(from var(--warningHeading) h s l / 15%);
77+
& .admonition-title {
78+
&, &::before {
79+
color: hsl(var(--warningHue), 90%, 40%);
80+
}
81+
}
82+
}
83+
&.error {
84+
border-color: hsl(from var(--errorHeading) h s l / 15%);
85+
& .admonition-title {
86+
&, &::before {
87+
color: hsl(var(--errorHue), 80%, 40%);
88+
}
89+
}
90+
}
91+
&.info {
92+
border-color: hsl(from var(--infoHeading) h s l / 15%);
93+
& .admonition-title {
94+
&, &::before {
95+
color: hsl(var(--infoHue), 80%, 40%);
96+
}
97+
}
98+
}
99+
&.neutral {
100+
border-color: hsl(from var(--neutralHeading) h s l / 15%);
101+
& .admonition-title {
102+
&, &::before {
103+
color: hsl(var(--neutralHue), 30%, 40%);
104+
}
105+
}
106+
}
107+
&.tip {
108+
border-color: hsl(from var(--tipHeading) h s l / 15%);
109+
& .admonition-title {
110+
&, &::before {
111+
color: hsl(var(--tipHue), 50%, 40%);
112+
}
113+
}
114+
}
115+
}
87116
}
88117

89118
.content-inner section.admonition > .admonition-title code {
90119
margin: 0 0.5ch;
91120
}
92121

93-
.content-inner section.admonition code {
94-
background-color: var(--admInlineCodeBackground);
95-
border: 1px solid var(--admInlineCodeBorder);
96-
color: var(--admInlineCodeColor);
97-
}
98-
99-
.content-inner section.admonition pre code {
100-
background-color: var(--admCodeBackground);
101-
border: 1px solid var(--admCodeBorder);
102-
color: var(--admCodeColor);
103-
}
104-
105-
.content-inner section.admonition > .admonition-title :is(a, a:visited) {
106-
color: inherit;
107-
text-decoration-color: currentColor;
108-
}
109-
110122
@media screen and (max-width: 768px) {
111123
.content-inner section.admonition {
112124
margin-left: calc(-1 * var(--content-gutter));

‎assets/css/content/code.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,16 @@
1616
color: var(--link-visited-color);
1717
}
1818

19+
.content-inner strong > code {
20+
font-weight: bold;
21+
}
22+
1923
.content-inner code {
24+
font-family: var(--monoFontFamily);
25+
font-style: normal;
26+
line-height: 24px;
27+
font-weight: 400;
28+
font-size: var(--text-sm);
2029
background-color: var(--codeBackground);
2130
vertical-align: baseline;
2231
border-radius: var(--borderRadius-sm);

‎assets/css/content/epub-admonition.css‎

Lines changed: 10 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -11,27 +11,27 @@
1111

1212
.content-inner section.admonition.warning {
1313
background-color: var(--warningBackground);
14-
border-left-color: var(--warningHeadingBackground);
14+
border-left-color: var(--warningHeading);
1515
}
1616

1717
.content-inner section.admonition.error {
1818
background-color: var(--errorBackground);
19-
border-left-color: var(--errorHeadingBackground);
19+
border-left-color: var(--errorHeading);
2020
}
2121

2222
.content-inner section.admonition.info {
2323
background-color: var(--infoBackground);
24-
border-left-color: var(--infoHeadingBackground);
24+
border-left-color: var(--infoHeading);
2525
}
2626

2727
.content-inner section.admonition.neutral {
2828
background-color: var(--neutralBackground);
29-
border-left-color: var(--neutralHeadingBackground);
29+
border-left-color: var(--neutralHeading);
3030
}
3131

3232
.content-inner section.admonition.tip {
3333
background-color: var(--tipBackground);
34-
border-left-color: var(--tipHeadingBackground);
34+
border-left-color: var(--tipHeading);
3535
}
3636

3737
.content-inner section.admonition > .admonition-title {
@@ -42,33 +42,21 @@
4242
}
4343

4444
.content-inner section.admonition > .admonition-title.warning {
45-
color: var(--warningHeadingBackground);
45+
color: var(--warningHeading);
4646
}
4747
.content-inner section.admonition > .admonition-title.error {
48-
color: var(--errorHeadingBackground);
48+
color: var(--errorHeading);
4949
}
5050
.content-inner section.admonition > .admonition-title.info {
51-
color: var(--infoHeadingBackground);
51+
color: var(--infoHeading);
5252
}
5353
.content-inner section.admonition > .admonition-title.neutral {
54-
color: var(--neutralHeadingBackground);
54+
color: var(--neutralHeading);
5555
}
5656
.content-inner section.admonition > .admonition-title.tip {
57-
color: var(--tipHeadingBackground);
57+
color: var(--tipHeading);
5858
}
5959

6060
.content-inner section.admonition > .admonition-title code {
6161
margin: 0 0.5ch;
6262
}
63-
64-
.content-inner section.admonition code {
65-
background-color: var(--admInlineCodeBackground);
66-
border: 1px solid var(--admInlineCodeBorder);
67-
color: var(--admInlineCodeColor);
68-
}
69-
70-
.content-inner section.admonition pre code {
71-
background-color: var(--admCodeBackground);
72-
border: 1px solid var(--admCodeBorder);
73-
color: var(--admCodeColor);
74-
}

‎assets/css/content/general.css‎

Lines changed: 47 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -132,18 +132,54 @@
132132
font-weight: normal;
133133
}
134134

135-
.content-inner blockquote, .content-inner section.admonition {
136-
border-left: 3px solid var(--blockquoteBorder);
137-
position: relative;
138-
margin: 1.5625em 0;
139-
padding: 0 1.2rem;
140-
overflow: auto;
141-
background-color: var(--blockquoteBackground);
142-
border-radius: var(--borderRadius-base);
135+
.content-inner {
136+
& :is(blockquote, section.admonition) {
137+
position: relative;
138+
margin: 1.5625em 0;
139+
padding: 0 1.2rem;
140+
overflow: auto;
141+
border-radius: var(--borderRadius-base);
142+
143+
& :is(code, pre code) {
144+
background-color: var(--admCodeBackground);
145+
border: 1px solid var(--admCodeBorder);
146+
color: var(--admCodeColor);
147+
}
148+
149+
& :is(a, a:visited) {
150+
color: inherit;
151+
}
152+
153+
& :is(h1, h2, h3, h4, h5, h6):first-child {
154+
padding-bottom: 1em;
155+
border-bottom: 2px solid hsl(from currentColor h s l / 15%);
156+
}
157+
158+
& p:last-child {
159+
padding-bottom: 1em;
160+
margin-bottom: 0;
161+
}
162+
}
163+
164+
& blockquote {
165+
border-left: 3px solid var(--blockquoteBorder);
166+
background-color: var(--blockquoteBackground);
167+
}
143168
}
144-
.content-inner blockquote p:last-child, .content-inner section.admonition p:last-child {
145-
padding-bottom: 1em;
146-
margin-bottom: 0;
169+
170+
@media print {
171+
.content-inner :is(blockquote, section.admonition) {
172+
border: 2px solid hsl(from var(--textBody) h s l / 15%);
173+
174+
& :is(code, pre code) {
175+
border-color: var(--gray400);
176+
}
177+
178+
& pre code.makeup {
179+
white-space: break-spaces;
180+
break-inside: avoid;
181+
}
182+
}
147183
}
148184

149185
.content-inner table {
@@ -240,18 +276,6 @@
240276
max-width: 100%;
241277
}
242278

243-
.content-inner strong > code {
244-
font-weight: bold;
245-
}
246-
247-
.content-inner code {
248-
font-family: var(--monoFontFamily);
249-
font-style: normal;
250-
line-height: 24px;
251-
font-weight: 400;
252-
font-size: var(--text-sm);
253-
}
254-
255279
@media screen and (max-width: 768px) {
256280
.content-inner :is(ol, ul) {
257281
padding-left: calc(1.5 * var(--content-gutter));

0 commit comments

Comments
 (0)