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