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