|
1 | | -/* Collapsible admonitions are not supported ATM. */ |
2 | | -.md-typeset :is(details, summary) { |
| 1 | +/* Hide fallback admonition when collapsible */ |
| 2 | +.md-typeset details:not( |
| 3 | + .default, |
| 4 | + .info, |
| 5 | + .success, |
| 6 | + .warning, |
| 7 | + .error |
| 8 | +) { |
3 | 9 | display: none !important; |
4 | 10 | } |
5 | 11 |
|
6 | | -.md-typeset .admonition { |
| 12 | +.md-typeset .admonition, |
| 13 | +.md-typeset details { |
7 | 14 | box-shadow: unset; |
8 | | - border: 2px solid; |
9 | | - border-radius: 6px; |
10 | | - border-left-width: 14px; |
| 15 | + border-width: var(--csc-admonition-border-width); |
| 16 | + border-radius: var(--csc-admonition-border-radius); |
11 | 17 | font-size: medium; |
12 | 18 | font-weight: var(--csc-font-weight--regular); |
13 | 19 | } |
14 | 20 |
|
15 | | -.md-typeset .admonition-title::before { |
| 21 | +.md-typeset .admonition:not( |
| 22 | + .info, |
| 23 | + .success, |
| 24 | + .warning, |
| 25 | + .error |
| 26 | +) .admonition-title::before, |
| 27 | +.md-typeset details:not( |
| 28 | + .info, |
| 29 | + .success, |
| 30 | + .warning, |
| 31 | + .error |
| 32 | +) > summary::before { |
16 | 33 | display: none; |
17 | 34 | } |
18 | 35 |
|
19 | | -.md-typeset .admonition-title { |
20 | | - margin: unset !important; |
21 | | - padding: unset !important; |
22 | | - padding-top: .6rem !important; |
| 36 | +.md-typeset .admonition-title, |
| 37 | +.md-typeset details > summary { |
23 | 38 | font-weight: var(--csc-font-weight--bold); |
| 39 | +} |
| 40 | + |
| 41 | +.md-typeset .admonition-title { |
24 | 42 | background-color: unset !important; |
25 | 43 | } |
26 | 44 |
|
27 | 45 | .md-typeset .admonition-title + * { |
28 | 46 | margin-top: 0; |
29 | 47 | } |
30 | 48 |
|
| 49 | +.md-typeset .admonition > :not(.admonition-title):first-child { |
| 50 | + margin-top: .6rem; |
| 51 | +} |
| 52 | + |
| 53 | +.md-typeset .admonition:not( |
| 54 | + .info, |
| 55 | + .success, |
| 56 | + .warning, |
| 57 | + .error |
| 58 | +) > .admonition-title, |
| 59 | +.md-typeset details:not( |
| 60 | + .info, |
| 61 | + .success, |
| 62 | + .warning, |
| 63 | + .error |
| 64 | +) > summary { |
| 65 | + padding: .4rem 0 .4rem .6rem !important; |
| 66 | +} |
| 67 | + |
31 | 68 | .md-typeset .admonition:not( |
32 | 69 | .default, |
33 | 70 | .info, |
|
40 | 77 | color: var(--csc-admonition--fg); |
41 | 78 | } |
42 | 79 |
|
43 | | -.md-typeset .admonition.default { |
44 | | - border-color: var(--csc-admonition-default--border); |
| 80 | +.md-typeset .admonition:is( |
| 81 | + .default-label, |
| 82 | + .info-label, |
| 83 | + .success-label, |
| 84 | + .warning-label, |
| 85 | + .error-label |
| 86 | +) > .admonition-title { |
| 87 | + display: none; |
| 88 | +} |
| 89 | + |
| 90 | +.md-typeset .admonition:is( |
| 91 | + .default-label, |
| 92 | + .info-label, |
| 93 | + .success-label, |
| 94 | + .warning-label, |
| 95 | + .error-label |
| 96 | +) { |
| 97 | + max-width: max-content; |
| 98 | + line-height: 1; |
| 99 | + font-weight: var(--csc-font-weight--regular); |
| 100 | + font-size: var(--csc-admonition-label-font-size); |
| 101 | + padding: var(--csc-admonition-label-padding); |
| 102 | + box-shadow: var(--csc-admonition-label-box-shadow); |
| 103 | +} |
| 104 | + |
| 105 | +.md-typeset .admonition:is( |
| 106 | + .default-label, |
| 107 | + .info-label, |
| 108 | + .success-label, |
| 109 | + .warning-label, |
| 110 | + .error-label |
| 111 | +) > :last-child { |
| 112 | + margin-bottom: 0; |
| 113 | +} |
| 114 | + |
| 115 | +.md-typeset .admonition.default, |
| 116 | +.md-typeset details.default { |
| 117 | + border-color: var(--csc-admonition-default-border-color); |
| 118 | +} |
| 119 | + |
| 120 | +.md-typeset details.default:focus-within { |
| 121 | + box-shadow: 0 0 0 .2rem color(from var(--csc-admonition-default-background-color) srgb r g b / .6); |
| 122 | +} |
| 123 | + |
| 124 | +.md-typeset .admonition.default > .admonition-title::before, |
| 125 | +.md-typeset details.default > summary::after, |
| 126 | +.md-typeset details.default > summary::before { |
| 127 | + background-color: var(--csc-admonition-default-border-color); |
| 128 | +} |
| 129 | + |
| 130 | +.md-typeset details.default > summary { |
| 131 | + background-color: var(--csc-admonition-default-background-color); |
45 | 132 | } |
46 | 133 |
|
47 | 134 | .md-typeset .admonition.default-label { |
48 | | - border-color: var(--csc-admonition-default-label--fg) !important; |
49 | | - color: var(--csc-admonition-default-label--fg); |
50 | | - background-color: var(--csc-admonition-default-label--bg); |
| 135 | + border-color: var(--csc-admonition-default-text-color) !important; |
| 136 | + color: var(--csc-admonition-default-text-color); |
| 137 | + background-color: var(--csc-admonition-default-background-color); |
| 138 | +} |
| 139 | + |
| 140 | +.md-typeset .admonition.info, |
| 141 | +.md-typeset details.info { |
| 142 | + border-color: var(--csc-admonition-info-border-color); |
| 143 | +} |
| 144 | + |
| 145 | +.md-typeset details.info:focus-within { |
| 146 | + box-shadow: 0 0 0 .2rem color(from var(--csc-admonition-info-background-color) srgb r g b / .6); |
| 147 | +} |
| 148 | + |
| 149 | +.md-typeset .admonition.info > .admonition-title::before, |
| 150 | +.md-typeset details.info > summary::after, |
| 151 | +.md-typeset details.info > summary::before { |
| 152 | + background-color: var(--csc-admonition-info-border-color); |
51 | 153 | } |
52 | 154 |
|
53 | | -.md-typeset .admonition.info { |
54 | | - border-color: var(--csc-admonition-info--border); |
| 155 | +.md-typeset details.info > summary { |
| 156 | + background-color: var(--csc-admonition-info-background-color); |
55 | 157 | } |
56 | 158 |
|
57 | 159 | .md-typeset .admonition.info-label { |
58 | | - border-color: var(--csc-admonition-info-label--fg) !important; |
59 | | - color: var(--csc-admonition-info-label--fg); |
60 | | - background-color: var(--csc-admonition-info-label--bg); |
| 160 | + border-color: var(--csc-admonition-info-text-color) !important; |
| 161 | + color: var(--csc-admonition-info-text-color); |
| 162 | + background-color: var(--csc-admonition-info-background-color); |
61 | 163 | } |
62 | 164 |
|
63 | | -.md-typeset .admonition.success { |
64 | | - border-color: var(--csc-admonition-success--border); |
| 165 | +.md-typeset .admonition.success, |
| 166 | +.md-typeset details.success { |
| 167 | + border-color: var(--csc-admonition-success-border-color); |
| 168 | +} |
| 169 | +.md-typeset details.success:focus-within { |
| 170 | + box-shadow: 0 0 0 .2rem color(from var(--csc-admonition-success-background-color) srgb r g b / .6); |
| 171 | +} |
| 172 | + |
| 173 | +.md-typeset .admonition.success > .admonition-title::before, |
| 174 | +.md-typeset details.success > summary::after, |
| 175 | +.md-typeset details.success > summary::before { |
| 176 | + background-color: var(--csc-admonition-success-border-color); |
| 177 | +} |
| 178 | + |
| 179 | +.md-typeset details.success > summary { |
| 180 | + background-color: var(--csc-admonition-success-background-color); |
65 | 181 | } |
66 | 182 |
|
67 | 183 | .md-typeset .admonition.success-label { |
68 | | - border-color: var(--csc-admonition-success-label--fg) !important; |
69 | | - color: var(--csc-admonition-success-label--fg); |
70 | | - background-color: var(--csc-admonition-success-label--bg); |
| 184 | + border-color: var(--csc-admonition-success-text-color) !important; |
| 185 | + color: var(--csc-admonition-success-text-color); |
| 186 | + background-color: var(--csc-admonition-success-background-color); |
| 187 | +} |
| 188 | + |
| 189 | +.md-typeset .admonition.warning, |
| 190 | +.md-typeset details.warning { |
| 191 | + border-color: var(--csc-admonition-warning-border-color); |
71 | 192 | } |
72 | 193 |
|
73 | | -.md-typeset .admonition.warning { |
74 | | - border-color: var(--csc-admonition-warning--border); |
| 194 | +.md-typeset details.warning:focus-within { |
| 195 | + box-shadow: 0 0 0 .2rem color(from var(--csc-admonition-warning-background-color) srgb r g b / .6); |
| 196 | +} |
| 197 | + |
| 198 | +.md-typeset .admonition.warning > .admonition-title::before, |
| 199 | +.md-typeset details.warning > summary::after, |
| 200 | +.md-typeset details.warning > summary::before { |
| 201 | + background-color: var(--csc-admonition-warning-border-color); |
| 202 | +} |
| 203 | + |
| 204 | +.md-typeset details.warning > summary { |
| 205 | + background-color: var(--csc-admonition-warning-background-color); |
75 | 206 | } |
76 | 207 |
|
77 | 208 | .md-typeset .admonition.warning-label { |
78 | | - border-color: var(--csc-admonition-warning-label--fg) !important; |
79 | | - color: var(--csc-admonition-warning-label--fg); |
80 | | - background-color: var(--csc-admonition-warning-label--bg); |
| 209 | + border-color: var(--csc-admonition-warning-text-color) !important; |
| 210 | + color: var(--csc-admonition-warning-text-color); |
| 211 | + background-color: var(--csc-admonition-warning-background-color); |
81 | 212 | } |
82 | 213 |
|
83 | | -.md-typeset .admonition.error { |
84 | | - border-color: var(--csc-admonition-error--border); |
| 214 | +.md-typeset .admonition.error, |
| 215 | +.md-typeset details.error { |
| 216 | + border-color: var(--csc-admonition-error-border-color); |
85 | 217 | } |
86 | 218 |
|
87 | | -.md-typeset .admonition.error-label { |
88 | | - border-color: var(--csc-admonition-error-label--fg) !important; |
89 | | - color: var(--csc-admonition-error-label--fg); |
90 | | - background-color: var(--csc-admonition-error-label--bg); |
| 219 | +.md-typeset details.error:focus-within { |
| 220 | + box-shadow: 0 0 0 .2rem color(from var(--csc-admonition-error-background-color) srgb r g b / .6); |
91 | 221 | } |
92 | 222 |
|
93 | | -.md-typeset .admonition:is( |
94 | | - .default-label, |
95 | | - .info-label, |
96 | | - .success-label, |
97 | | - .warning-label, |
98 | | - .error-label |
99 | | -) { |
100 | | - max-width: max-content; |
101 | | - border: var(--csc-border); |
102 | | - font-weight: var(--csc-font-weight--regular); |
| 223 | +.md-typeset .admonition.error > .admonition-title::before, |
| 224 | +.md-typeset details.error > summary::after, |
| 225 | +.md-typeset details.error > summary::before { |
| 226 | + background-color: var(--csc-admonition-error-border-color); |
103 | 227 | } |
104 | 228 |
|
105 | | -.md-typeset .admonition:is( |
106 | | - .default-label, |
107 | | - .info-label, |
108 | | - .success-label, |
109 | | - .warning-label, |
110 | | - .error-label |
111 | | -) > .admonition-title { |
112 | | - display: none; |
| 229 | +.md-typeset details.error > summary { |
| 230 | + background-color: var(--csc-admonition-error-background-color); |
113 | 231 | } |
114 | 232 |
|
115 | | -.md-typeset .admonition:is( |
116 | | - .default-label, |
117 | | - .info-label, |
118 | | - .success-label, |
119 | | - .warning-label, |
120 | | - .error-label |
121 | | -) > :nth-child(2) { |
122 | | - margin-top: .1rem; |
| 233 | +/* Error admonition type is not defined in Material for MkDocs, |
| 234 | + so here's the icon for it. Icons for the other admonitions |
| 235 | + are defined in mkdocs.yml, under theme.icon.admonition.* |
| 236 | +*/ |
| 237 | +.md-typeset .admonition.error > .admonition-title::before, |
| 238 | +.md-typeset details.error > summary::before { |
| 239 | + -webkit-mask-image: var(--md-admonition-icon--error); |
| 240 | + mask-image: var(--md-admonition-icon--error); |
123 | 241 | } |
124 | 242 |
|
125 | | -.md-typeset .admonition:is( |
126 | | - .default-label, |
127 | | - .info-label, |
128 | | - .success-label, |
129 | | - .warning-label, |
130 | | - .error-label |
131 | | -) > :last-child { |
132 | | - margin-bottom: .1rem; |
| 243 | +.md-typeset .admonition.error-label { |
| 244 | + border-color: var(--csc-admonition-error-text-color) !important; |
| 245 | + color: var(--csc-admonition-error-text-color); |
| 246 | + background-color: var(--csc-admonition-error-background-color); |
133 | 247 | } |
0 commit comments