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 grid-gap: 0 .5em; 141 } 142 .grid-2-columns { 143 grid-template-columns: 1fr 1fr; 144 } 145 .grid-3-columns { 146 grid-template-columns: 1fr 1fr 1fr; 147 } 148 .grid-4-columns { 149 grid-template-columns: 1fr 1fr 1fr 1fr; 150 } 151 152 /* grid cell classes: */ 153 .colspan-2 { grid-column-end: span 2; } 154 .colspan-3 { grid-column-end: span 3; } 155 .colspan-4 { grid-column-end: span 4; } 156 .rowspan-2 { grid-row-end: span 2; } 157 .rowspan-3 { grid-row-end: span 3; } 158 .rowspan-4 { grid-row-end: span 4; } 159 160} 161 162/* RTL Overrides */ 163[dir=rtl] main .info, main *[dir=rtl] .info, main .info[dir=rtl], 164[dir=rtl] main .tip, main *[dir=rtl] .tip, main .tip[dir=rtl], 165[dir=rtl] main .important, main *[dir=rtl] .important, main .important[dir=rtl], 166[dir=rtl] main .alert, main *[dir=rtl] .alert, main .alert[dir=rtl], 167[dir=rtl] main .help, main *[dir=rtl] .help, main .help[dir=rtl], 168[dir=rtl] main .download, main *[dir=rtl] .download, main .download[dir=rtl], 169[dir=rtl] main .todo, main *[dir=rtl] .todo, main .todo[dir=rtl] { 170 padding: 1pt 1.5em 1pt .25em; 171 border-width: 1px 4pt 1px 1px; 172} 173[dir=rtl] main .info::before, main *[dir=rtl] .info::before, main .info[dir=rtl]::before, 174[dir=rtl] main .tip::before, main *[dir=rtl] .tip::before, main .tip[dir=rtl]::before, 175[dir=rtl] main .important::before, main *[dir=rtl] .important::before, main .important[dir=rtl]::before, 176[dir=rtl] main .alert::before, main *[dir=rtl] .alert::before, main .alert[dir=rtl]::before, 177[dir=rtl] main .help::before, main *[dir=rtl] .help::before, main .help[dir=rtl]::before, 178[dir=rtl] main .download::before, main *[dir=rtl] .download::before, main .download[dir=rtl]::before, 179[dir=rtl] main .todo::before, main *[dir=rtl] .todo::before, main .todo[dir=rtl]::before { 180 right: .25em; 181} 182 183 /* notch down the icons for selected block-level elements: */ 184 div.info::before, div.tip::before, div.important::before, div.alert::before, div.help::before, div.download::before, div.todo::before, 185 article.info::before, article.tip::before, article.important::before, article.alert::before, article.help::before, article.download::before, article.todo::before, 186 aside.info::before, aside.tip::before, aside.important::before, aside.alert::before, aside.help::before, aside.download::before, aside.todo::before, 187 section.info::before, section.tip::before, section.important::before, section.alert::before, section.help::before, section.download::before, section.todo::before, 188 figure.info::before, figure.tip::before, figure.important::before, figure.alert::before, figure.help::before, figure.download::before, figure.todo::before { 189 left: .45em; 190 top: 1.25em; 191 } 192 193 194/* dark mode overrides */ 195@media (prefers-color-scheme: dark) { 196 197 body.darkmode { 198 main { 199 200 .outline, .info, .tip, .important, .alert, .help, .download, .todo { 201 border-color: #39393D #39393D #39393D inherit; 202 } 203 .outline { border-color: #ADADB3; } 204 .info { border-color: #027BDF; background-color: #182631; color: inherit; } 205 .tip { border-color: #F9A825; background-color: #46361e; } 206 .important { border-color: #E57403; background-color: #532E1D; } 207 .alert { border-color: #FF2A2A; background-color: #482124; } 208 .help { border-color: #4157FF; background-color: #20233C; } 209 .download { border-color: #288D30; background-color: #203125; } 210 .todo { border-color: #006064; background-color: #1A3236; } 211 212 .alert::before { filter: brightness(1.5); } 213 .help::before { filter: brightness(2.5); } 214 .download::before { filter: brightness(1.5); } 215 216 /* text colours: */ 217 .yellow { color: #FDD835; } 218 .orange { color: #FB8C00; } 219 .brown { color: #A5847E; } 220 .red { color: #FF4314; } 221 .purple { color: #BC6DCA; } 222 .indigo { color: #7986CB; } 223 .blue { color: #42A5F5; } 224 .cyan { color: #00BCD4; } 225 .teal { color: #26A69A; } 226 .green { color: #43A047; } 227 .grey, .gray { color: #78909C; } 228 229 /* special case: markers: */ 230 mark.yellow { background-color: #754E00; color: #CCC; } 231 mark.orange { background-color: #943400; color: #CCC; } 232 mark.brown { background-color: #4E342E; color: #CCC; } 233 mark.red { background-color: #A81A1A; color: #CCC; } 234 mark.purple { background-color: #6A1B9A; color: #CCC; } 235 mark.indigo { background-color: #1A237E; color: #CCC; } 236 mark.blue { background-color: #0D47A1; color: #CCC; } 237 mark.cyan { background-color: #006064; color: #CCC; } 238 mark.teal { background-color: #004D40; color: #CCC; } 239 mark.green { background-color: #1B5E20; color: #CCC; } 240 mark.grey, mark.gray { background-color: #37474F; color: #CCC; } 241 242 } 243 } 244} 245 246/* layout overrides for narrow screens: */ 247@media (max-width: 670px) { 248 main { 249 .grid-2-columns, 250 .grid-3-columns { 251 grid-template-columns: 100%; 252 } 253 .grid-4-columns { 254 grid-template-columns: 1fr 1fr; 255 } 256 } 257} 258@media (max-width: 440px) { 259 main { 260 .grid-4-columns { 261 grid-template-columns: 100%; 262 } 263 } 264}