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