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