1/** 2 * This contains the content styling 3 * @author Sascha Leib <sascha@leib.be> 4 */ 5 6 main { 7 /* simplified spacing in boxes: */ 8 .outline > *, .box > *, .info > *, .tip > *, .important > *, 9 .alert > *, .help > *, .download > *, .todo > * { 10 margin: .5em 0; 11 } 12 13 /* plain box and outline are different from the other styles: */ 14 .outline, .box { 15 box-sizing: border-box; 16 padding: .25em 1em .5em 1em; 17 margin: 1em 0; 18 } 19 .outline { 20 border: @ini_border solid 2pt; 21 } 22 .box { 23 background-color: @ini_background_alt; 24 } 25 26 /* icon-box classes: */ 27 .info, .tip, .important, .alert, .help, .download, .todo { 28 background: transparent .25em center no-repeat; 29 background-size: 1em; 30 box-sizing: border-box; 31 border: @ini_border solid 1px; 32 border-left-width: 4pt; 33 border-radius: .25em; 34 padding: 1pt .25em 1pt 1.5em; 35 margin: .5em 0; 36 /* position: relative; */ 37 } 38 39 .outline { border: #CCC solid 2pt; padding-left: .5em; } 40 .outline.filled { background-color: #EEE; } 41 42 .info { 43 border-left-color: #0085F2; 44 background-color: #E5F3FE; 45 background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEzLDlIMTFWN0gxM00xMywxN0gxMVYxMUgxM00xMiwyQTEwLDEwIDAgMCwwIDIsMTJBMTAsMTAgMCAwLDAgMTIsMjJBMTAsMTAgMCAwLDAgMjIsMTJBMTAsMTAgMCAwLDAgMTIsMloiIHN0eWxlPSJmaWxsOiMwMDg1RjI7IiAvPjwvc3ZnPg=="); 46 } 47 48 .tip { 49 border-left-color: #FFCA28; 50 background-color: #FFF9C4; 51 background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyLDZBNiw2IDAgMCwxIDE4LDEyQzE4LDE0LjIyIDE2Ljc5LDE2LjE2IDE1LDE3LjJWMTlBMSwxIDAgMCwxIDE0LDIwSDEwQTEsMSAwIDAsMSA5LDE5VjE3LjJDNy4yMSwxNi4xNiA2LDE0LjIyIDYsMTJBNiw2IDAgMCwxIDEyLDZNMTQsMjFWMjJBMSwxIDAgMCwxIDEzLDIzSDExQTEsMSAwIDAsMSAxMCwyMlYyMUgxNE0yMCwxMUgyM1YxM0gyMFYxMU0xLDExSDRWMTNIMVYxMU0xMywxVjRIMTFWMUgxM000LjkyLDMuNUw3LjA1LDUuNjRMNS42Myw3LjA1TDMuNSw0LjkzTDQuOTIsMy41TTE2Ljk1LDUuNjNMMTkuMDcsMy41TDIwLjUsNC45M0wxOC4zNyw3LjA1TDE2Ljk1LDUuNjNaIiBzdHlsZT0iZmlsbDojRkY5ODAwOyIgLz48L3N2Zz4="); 52 } 53 54 .important { 55 border-left-color: #FF9800; 56 background-color: #FFE0B2; 57 background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEzIDE0SDExVjlIMTNNMTMgMThIMTFWMTZIMTNNMSAyMUgyM0wxMiAyTDEgMjFaIiBzdHlsZT0iZmlsbDojRjU3QzAwOyIgLz48L3N2Zz4="); 58 } 59 60 .alert { 61 border-left-color: #B71C1C; 62 background-color: #FFCDD2; 63 background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTguMjcsM0wzLDguMjdWMTUuNzNMOC4yNywyMUgxNS43M0wyMSwxNS43M1Y4LjI3TDE1LjczLDNNOC40MSw3TDEyLDEwLjU5TDE1LjU5LDdMMTcsOC40MUwxMy40MSwxMkwxNywxNS41OUwxNS41OSwxN0wxMiwxMy40MUw4LjQxLDE3TDcsMTUuNTlMMTAuNTksMTJMNyw4LjQxIiBzdHlsZT0iZmlsbDojQjcxQzFDOyIgLz48L3N2Zz4="); 64 } 65 66 .help { 67 border-left-color: #7986CB; 68 background-color: #E8EAF6; 69 background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE1LjA3LDExLjI1TDE0LjE3LDEyLjE3QzEzLjQ1LDEyLjg5IDEzLDEzLjUgMTMsMTVIMTFWMTQuNUMxMSwxMy4zOSAxMS40NSwxMi4zOSAxMi4xNywxMS42N0wxMy40MSwxMC40MUMxMy43OCwxMC4wNSAxNCw5LjU1IDE0LDlDMTQsNy44OSAxMy4xLDcgMTIsN0EyLDIgMCAwLDAgMTAsOUg4QTQsNCAwIDAsMSAxMiw1QTQsNCAwIDAsMSAxNiw5QzE2LDkuODggMTUuNjQsMTAuNjcgMTUuMDcsMTEuMjVNMTMsMTlIMTFWMTdIMTNNMTIsMkExMCwxMCAwIDAsMCAyLDEyQTEwLDEwIDAgMCwwIDEyLDIyQTEwLDEwIDAgMCwwIDIyLDEyQzIyLDYuNDcgMTcuNSwyIDEyLDJaIiBzdHlsZT0iZmlsbDojMUEyMzdFOyIgLz48L3N2Zz4="); 70 } 71 72 .download { 73 border-left-color: #66BB6A; 74 background-color: #E8F5E9; 75 background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDJDMTcuNSAyIDIyIDYuNSAyMiAxMkMyMiAxNy41IDE3LjUgMjIgMTIgMjJDNi41IDIyIDIgMTcuNSAyIDEyQzIgNi41IDYuNSAyIDEyIDJNOCAxN0gxNlYxNUg4VjE3TTE2IDEwSDEzLjVWNkgxMC41VjEwSDhMMTIgMTRMMTYgMTBaIiBzdHlsZT0iZmlsbDojMUI1RTIwOyIgLz48L3N2Zz4="); 76 } 77 78 .todo { 79 border-left-color: #4DD0E1; 80 background-color: #E0F7FA; 81 background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3IDE1TDE4IDE5SDIxVjIySDNWMTlINkw3IDE1SDE3TTE1IDhMMTYgMTJIOEw5IDhIMTVNMTMgMUwxNCA1SDEwTDExIDFIMTNaIiBzdHlsZT0iZmlsbDojRjQ1MTFFOyIgLz48L3N2Zz4="); 82 } 83 84 /* modify spacing around headlines within blocks */ 85 .outline h1, .outline h2, .outline h3, .outline h4, .outline h5, .outline h6, 86 .info h1, .info h2, .info h3, .info h4, .info h5, .info h6, 87 .tip h1, .tip h2, .tip h3, .tip h4, .tip h5, .tip h6, 88 .important h1, .important h2, .important h3, .important h4, .important h5, .important h6, 89 .alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert h6, 90 .help h1, .help h2, .help h3, .help h4, .help h5, .help h6, 91 .download h1, .download h2, .download h3, .download h4, .download h5, .download h6, 92 .todo h1, .todo h2, .todo h3, .todo h4, .todo h5, .todo h6 { 93 margin: 6pt 0; 94 } 95 96 /* extra spacing for selected block-level elements: */ 97 div.info, div.tip, div.important, div.alert, div.help, div.download, div.todo, 98 article.info, article.tip, article.important, article.alert, article.help, article.download, article.todo, 99 aside.info, aside.tip, aside.important, aside.alert, aside.help, aside.download, aside.todo, 100 section.info, section.tip, section.important, section.alert, section.help, section.download, section.todo, 101 figure.info, figure.tip, figure.important, figure.alert, figure.help, figure.download, figure.todo { 102 padding: .5em 1em .75em 2em; 103 } 104 105 /* notch down the icons for selected block-level elements: */ 106 div.info, div.tip, div.important, div.alert, div.help, div.download, div.todo, 107 article.info, article.tip, article.important, article.alert, article.help, article.download, article.todo, 108 aside.info, aside.tip, aside.important, aside.alert, aside.help, aside.download, aside.todo, 109 section.info, section.tip, section.important, section.alert, section.help, section.download, section.todo, 110 figure.info, figure.tip, figure.important, figure.alert, figure.help, figure.download, figure.todo { 111 background-position: .5em 1.3em; 112 } 113 114 /* text colours: */ 115 .yellow { color: #966C03; } 116 .orange { color: #B24103; } 117 .brown { color: #3E2723; } 118 .red { color: #B71C1C; } 119 .purple { color: #4A148C; } 120 .indigo { color: #1A237E; } 121 .blue { color: #0D47A1; } 122 .cyan { color: #006064; } 123 .teal { color: #004D40; } 124 .green { color: #1B5E20; } 125 .grey, .gray { color: #37474F; } 126 127 /* special case: markers: */ 128 mark.yellow { background-color: #FFF176; color: #111; } 129 mark.orange { background-color: #FFB74D; color: #111; } 130 mark.brown { background-color: #BCAAA4; color: #111; } 131 mark.red { background-color: #E57373; color: #111; } 132 mark.purple { background-color: #CE93D8; color: #111; } 133 mark.indigo { background-color: #9FA8DA; color: #111; } 134 mark.blue { background-color: #64B5F6; color: #111; } 135 mark.cyan { background-color: #4DD0E1; color: #111; } 136 mark.teal { background-color: #4DB6AC; color: #111; } 137 mark.green { background-color: #81C784; color: #111; } 138 mark.grey, mark.gray { background-color: #B0BEC5; color: #111; } 139 140 /* text format helper classes: */ 141 .nowrap { 142 white-space: nowrap !important; 143 overflow: hidden; 144 text-overflow: ellipsis; 145 } 146 .small-text { 147 font-size: smaller !important; 148 line-height: 1.4em; 149 } 150 .large-text { 151 font-size: larger !important; 152 line-height: 1.4em; 153 } 154 155 /* grid-layout classes */ 156 .grid-2-columns, 157 .grid-3-columns, 158 .grid-4-columns { 159 display: grid; 160 } 161 .grid-2-columns { 162 grid-template-columns: 1fr 1fr; 163 grid-gap: 0 .5em; 164 } 165 .grid-3-columns { 166 grid-template-columns: 1fr 1fr 1fr; 167 grid-gap: 0 .33em; 168 } 169 .grid-4-columns { 170 grid-template-columns: 1fr 1fr 1fr 1fr; 171 grid-gap: 0 .25em; 172 } 173 174 /* grid cell classes: */ 175 .colspan-2 { grid-column-end: span 2; } 176 .colspan-3 { grid-column-end: span 3; } 177 .colspan-4 { grid-column-end: span 4; } 178 .rowspan-2 { grid-row-end: span 2; } 179 .rowspan-3 { grid-row-end: span 3; } 180 .rowspan-4 { grid-row-end: span 4; } 181 182 /* Definition List styles: */ 183 dt { font-weight: 600; } 184 dd { margin-left: 1.25em; margin-bottom: .5em; } 185 dl.compact { display: grid; grid-template-columns: min-content auto; } 186 dl.compact dt { grid-column-start: 1; } 187 dl.compact dd { grid-column-start: 2; margin-bottom: 0; } 188 189 /* disclosure and summary: */ 190 details summary { cursor: pointer; } 191} 192 193/* RTL Overrides */ 194main { 195 [dir=rtl] &, 196 & *[dir=rtl] { 197 .info, .tip, .important, .alert, .help, .download, .todo { 198 padding: 1pt 1.5em 1pt .25em; 199 border-width: 1px 4pt 1px 1px; 200 border-left-color: #CCC; 201 background-position: right .25em center; 202 } 203 div.info, div.tip, div.important, div.alert, div.help, div.download, div.todo,article.info, article.tip, article.important, article.alert, article.help, article.download, article.todo, aside.info, aside.tip, aside.important, aside.alert, aside.help, aside.download, aside.todo, section.info, section.tip, section.important, section.alert, section.help, section.download, section.todo, figure.info, figure.tip, figure.important, figure.alert, figure.help, figure.download, figure.todo { 204 padding-right: 2em; 205 background-position: right .5em 1.3em; 206 } 207 .info { border-right-color: #0085F2; } 208 .tip { border-right-color: #FFCA28; } 209 .important { border-right-color: #FF9800; } 210 .alert { border-right-color: #B71C1C; } 211 .help { border-right-color: #7986CB; } 212 .download { border-right-color: #66BB6A; } 213 .todo { border-right-color: #4DD0E1; } 214 } 215 .info[dir=rtl], .tip[dir=rtl], .important[dir=rtl], 216 .alert[dir=rtl], .help[dir=rtl], .download[dir=rtl], .todo[dir=rtl] { 217 padding: 1pt 1.5em 1pt .25em; 218 border-width: 1px 4pt 1px 1px; 219 border-right-color: #CCC; 220 background-position: right .25em center; 221 } 222 div.info[dir=rtl], div.tip[dir=rtl], div.important[dir=rtl], div.alert[dir=rtl], div.help[dir=rtl], div.download[dir=rtl], div.todo[dir=rtl],article.info[dir=rtl], article.tip[dir=rtl], article.important[dir=rtl], article.alert[dir=rtl], article.help[dir=rtl], article.download[dir=rtl], article.todo[dir=rtl], aside.info[dir=rtl], aside.tip[dir=rtl], aside.important[dir=rtl], aside.alert[dir=rtl], aside.help[dir=rtl], aside.download[dir=rtl], aside.todo[dir=rtl], section.info[dir=rtl], section.tip[dir=rtl], section.important[dir=rtl], section.alert[dir=rtl], section.help[dir=rtl], section.download[dir=rtl], section.todo[dir=rtl], figure.info[dir=rtl], figure.tip[dir=rtl], figure.important[dir=rtl], figure.alert[dir=rtl], figure.help[dir=rtl], figure.download[dir=rtl], figure.todo[dir=rtl] { 223 padding-right: 2em; 224 background-position: right .5em 1.3em; 225 } 226 .info[dir=rtl] { border-right-color: #0085F2; } 227 .tip[dir=rtl] { border-right-color: #FFCA28; } 228 .important[dir=rtl] { border-right-color: #FF9800; } 229 .alert[dir=rtl] { border-right-color: #B71C1C; } 230 .help[dir=rtl] { border-right-color: #7986CB; } 231 .download[dir=rtl] { border-right-color: #66BB6A; } 232 .todo[dir=rtl] { border-right-color: #4DD0E1; } 233 234} 235 236/* dark mode overrides */ 237@media (prefers-color-scheme: dark) { 238 239 body.darkmode { 240 main { 241 242 .outline, .info, .tip, .important, .alert, .help, .download, .todo { 243 border-color: #39393D #39393D #39393D inherit; 244 } 245 .outline { border-color: #ADADB3; } 246 .info { border-color: #027BDF; background-color: #182631; color: inherit; } 247 .tip { border-color: #F9A825; background-color: #46361e; } 248 .important { border-color: #E57403; background-color: #532E1D; } 249 .alert { border-color: #FF2A2A; background-color: #482124; } 250 .help { border-color: #4157FF; background-color: #20233C; } 251 .download { border-color: #288D30; background-color: #203125; } 252 .todo { border-color: #006064; background-color: #1A3236; } 253 254 .alert::before { filter: brightness(1.5); } 255 .help::before { filter: brightness(2.5); } 256 .download::before { filter: brightness(1.5); } 257 258 /* text colours: */ 259 .yellow { color: #FDD835; } 260 .orange { color: #FB8C00; } 261 .brown { color: #A5847E; } 262 .red { color: #FF4314; } 263 .purple { color: #BC6DCA; } 264 .indigo { color: #7986CB; } 265 .blue { color: #42A5F5; } 266 .cyan { color: #00BCD4; } 267 .teal { color: #26A69A; } 268 .green { color: #43A047; } 269 .grey, .gray { color: #78909C; } 270 271 /* special case: markers: */ 272 mark.yellow { background-color: #754E00; color: #CCC; } 273 mark.orange { background-color: #943400; color: #CCC; } 274 mark.brown { background-color: #4E342E; color: #CCC; } 275 mark.red { background-color: #A81A1A; color: #CCC; } 276 mark.purple { background-color: #6A1B9A; color: #CCC; } 277 mark.indigo { background-color: #1A237E; color: #CCC; } 278 mark.blue { background-color: #0D47A1; color: #CCC; } 279 mark.cyan { background-color: #006064; color: #CCC; } 280 mark.teal { background-color: #004D40; color: #CCC; } 281 mark.green { background-color: #1B5E20; color: #CCC; } 282 mark.grey, mark.gray { background-color: #37474F; color: #CCC; } 283 284 } 285 } 286} 287 288/* layout overrides for narrow screens: */ 289@media (max-width: 670px) { 290 main { 291 .grid-2-columns, 292 .grid-3-columns { 293 grid-template-columns: 100%; 294 } 295 .grid-4-columns { 296 grid-template-columns: 1fr 1fr; 297 } 298 299 .colspan-2, 300 .colspan-3, 301 .colspan-4 { grid-column-end: span 1; } 302 303 } 304} 305@media (max-width: 440px) { 306 main { 307 .grid-4-columns { 308 grid-template-columns: 100%; 309 } 310 } 311}