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 border: transparent solid 2pt; 9 border-left-width: 1.5em; 10 padding: 1pt .5em; 11 margin: .5em 0; 12 position: relative; 13 } 14 .info::before, .tip::before, .important::before, 15 .alert::before, .help::before, .download::before, 16 .todo::before { 17 content: ' '; 18 background: transparent center/1em no-repeat; 19 position: absolute; 20 width: 1em; 21 height: 1em; 22 left: -1.25em; 23 right: initial; 24 top: .1em; 25 filter: opacity(90%); 26 } 27 28 .outline { border: #CCC solid 2pt; } 29 .outline.filled { background-color: #EEE; } 30 31 .info { border-color: #B0BEC5; } 32 .info::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTExLDlIMTNWN0gxMU0xMiwyMEM3LjU5LDIwIDQsMTYuNDEgNCwxMkM0LDcuNTkgNy41OSw0IDEyLDRDMTYuNDEsNCAyMCw3LjU5IDIwLDEyQzIwLDE2LjQxIDE2LjQxLDIwIDEyLDIwTTEyLDJBMTAsMTAgMCAwLDAgMiwxMkExMCwxMCAwIDAsMCAxMiwyMkExMCwxMCAwIDAsMCAyMiwxMkExMCwxMCAwIDAsMCAxMiwyTTExLDE3SDEzVjExSDExVjE3WiIgLz48L3N2Zz4=");} 33 .info.filled { background-color: #CFD8DC; } 34 35 .tip { border-color: #FFCA28; } 36 .tip::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTIwLDExSDIzVjEzSDIwVjExTTEsMTFINFYxM0gxVjExTTEzLDFWNEgxMVYxSDEzTTQuOTIsMy41TDcuMDUsNS42NEw1LjYzLDcuMDVMMy41LDQuOTNMNC45MiwzLjVNMTYuOTUsNS42M0wxOS4wNywzLjVMMjAuNSw0LjkzTDE4LjM3LDcuMDVMMTYuOTUsNS42M00xMiw2QTYsNiAwIDAsMSAxOCwxMkMxOCwxNC4yMiAxNi43OSwxNi4xNiAxNSwxNy4yVjE5QTEsMSAwIDAsMSAxNCwyMEgxMEExLDEgMCAwLDEgOSwxOVYxNy4yQzcuMjEsMTYuMTYgNiwxNC4yMiA2LDEyQTYsNiAwIDAsMSAxMiw2TTE0LDIxVjIyQTEsMSAwIDAsMSAxMywyM0gxMUExLDEgMCAwLDEgMTAsMjJWMjFIMTRNMTEsMThIMTNWMTUuODdDMTQuNzMsMTUuNDMgMTYsMTMuODYgMTYsMTJBNCw0IDAgMCwwIDEyLDhBNCw0IDAgMCwwIDgsMTJDOCwxMy44NiA5LjI3LDE1LjQzIDExLDE1Ljg3VjE4WiIgLz48L3N2Zz4=");} 37 .tip.filled { background-color: #FFF9C4; } 38 39 .important { border-color: #FF9800; } 40 .important::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyLDJMMSwyMUgyM00xMiw2TDE5LjUzLDE5SDQuNDdNMTEsMTBWMTRIMTNWMTBNMTEsMTZWMThIMTNWMTYiIC8+PC9zdmc+");} 41 .important.filled { background-color: #FFE0B2; } 42 43 .alert { border-color: #B71C1C; } 44 .alert::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTguMjcsM0wzLDguMjdWMTUuNzNMOC4yNywyMUgxNS43M0MxNy41LDE5LjI0IDIxLDE1LjczIDIxLDE1LjczVjguMjdMMTUuNzMsM005LjEsNUgxNC45TDE5LDkuMVYxNC45TDE0LjksMTlIOS4xTDUsMTQuOVY5LjFNMTEsMTVIMTNWMTdIMTFWMTVNMTEsN0gxM1YxM0gxMVY3IiAvPjwvc3ZnPg=="); 45 filter: invert(100%) opacity(90%);} 46 .alert.filled { background-color: #FFCDD2; } 47 48 .help { border-color: #7986CB; } 49 .help::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTExLDE4SDEzVjE2SDExVjE4TTEyLDJBMTAsMTAgMCAwLDAgMiwxMkExMCwxMCAwIDAsMCAxMiwyMkExMCwxMCAwIDAsMCAyMiwxMkExMCwxMCAwIDAsMCAxMiwyTTEyLDIwQzcuNTksMjAgNCwxNi40MSA0LDEyQzQsNy41OSA3LjU5LDQgMTIsNEMxNi40MSw0IDIwLDcuNTkgMjAsMTJDMjAsMTYuNDEgMTYuNDEsMjAgMTIsMjBNMTIsNkE0LDQgMCAwLDAgOCwxMEgxMEEyLDIgMCAwLDEgMTIsOEEyLDIgMCAwLDEgMTQsMTBDMTQsMTIgMTEsMTEuNzUgMTEsMTVIMTNDMTMsMTIuNzUgMTYsMTIuNSAxNiwxMEE0LDQgMCAwLDAgMTIsNloiIC8+PC9zdmc+");} 50 .help.filled { background-color: #E8EAF6; } 51 52 .download { border-color: #66BB6A; } 53 .download::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTUsMjBIMTlWMThINU0xOSw5SDE1VjNIOVY5SDVMMTIsMTZMMTksOVoiIC8+PC9zdmc+");} 54 .download.filled { background-color: #E8F5E9; } 55 56 .todo { border-color: #4DD0E1; } 57 .todo::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3IDE1TDE4IDE5SDIxVjIySDNWMTlINkw3IDE1SDE3TTE1IDhMMTYgMTJIOEw5IDhIMTVNMTMgMUwxNCA1SDEwTDExIDFIMTNaIiAvPjwvc3ZnPg==");} 58 .todo.filled { background-color: #E0F7FA; } 59 60 /* text colours: */ 61 .yellow { color: #F9A825; } 62 .orange { color: #E65100; } 63 .brown { color: #3E2723; } 64 .red { color: #B71C1C; } 65 .purple { color: #4A148C; } 66 .indigo { color: #1A237E; } 67 .blue { color: #0D47A1; } 68 .cyan { color: #006064; } 69 .teal { color: #004D40; } 70 .green { color: #1B5E20; } 71 .grey, .gray { color: #37474F; } 72 73 /* special case: markers: */ 74 mark.yellow { background-color: #FFF176; color: #111; } 75 mark.orange { background-color: #FFB74D; color: #111; } 76 mark.brown { background-color: #BCAAA4; color: #111; } 77 mark.red { background-color: #E57373; color: #111; } 78 mark.purple { background-color: #CE93D8; color: #111; } 79 mark.indigo { background-color: #9FA8DA; color: #111; } 80 mark.blue { background-color: #64B5F6; color: #111; } 81 mark.cyan { background-color: #4DD0E1; color: #111; } 82 mark.teal { background-color: #4DB6AC; color: #111; } 83 mark.green { background-color: #81C784; color: #111; } 84 mark.grey, mark.gray { background-color: #B0BEC5; color: #111; } 85 86 /* rounded corners */ 87 .rounded { border-radius: .5em; } 88 89 /* grid-layout classes */ 90 .grid-2-columns { 91 display: grid; 92 grid-template-columns: 1fr 1fr; 93 grid-gap: .5em; 94 } 95 96 97} 98 99/* RTL Overrides */ 100[dir=rtl] main .info, main *[dir=rtl] .info, main .info[dir=rtl], 101[dir=rtl] main .tip, main *[dir=rtl] .tip, main .tip[dir=rtl], 102[dir=rtl] main .important, main *[dir=rtl] .important, main .important[dir=rtl], 103[dir=rtl] main .alert, main *[dir=rtl] .alert, main .alert[dir=rtl], 104[dir=rtl] main .help, main *[dir=rtl] .help, main .help[dir=rtl], 105[dir=rtl] main .download, main *[dir=rtl] .download, main .download[dir=rtl], 106[dir=rtl] main .todo, main *[dir=rtl] .todo, main .todo[dir=rtl] { 107 border-width: 2pt 1.5em 2pt 2pt; 108} 109[dir=rtl] main .info::before, main *[dir=rtl] .info::before, main .info[dir=rtl]::before, 110[dir=rtl] main .tip::before, main *[dir=rtl] .tip::before, main .tip[dir=rtl]::before, 111[dir=rtl] main .important::before, main *[dir=rtl] .important::before, main .important[dir=rtl]::before, 112[dir=rtl] main .alert::before, main *[dir=rtl] .alert::before, main .alert[dir=rtl]::before, 113[dir=rtl] main .help::before, main *[dir=rtl] .help::before, main .help[dir=rtl]::before, 114[dir=rtl] main .download::before, main *[dir=rtl] .download::before, main .download[dir=rtl]::before, 115[dir=rtl] main .todo::before, main *[dir=rtl] .todo::before, main .todo[dir=rtl]::before { 116 left: initial; 117 right: -1.25em; 118} 119 120/* dark mode overrides */ 121@media (prefers-color-scheme: dark) { 122 123 body.darkmode { 124 main { 125 .outline { border-color: #ADADB3; } 126 .info { border-color: #546E7A; } 127 .tip { border-color: #F9A825; } 128 .important { border-color: #E65100; } 129 .alert { border-color: #B71C1C; } 130 .help { border-color: #1A237E; } 131 .download { border-color: #1B5E20; } 132 .todo { border-color: #006064; } 133 134 .outline.filled { background-color: #39393D; } 135 .info.filled { background-color: #2F353B; } 136 .tip.filled { background-color: #46361e; } 137 .important.filled { background-color: #532E1D; } 138 .alert.filled { background-color: #482124; } 139 .help.filled { background-color: #20233C; } 140 .download.filled { background-color: #203125; } 141 .todo.filled { background-color: #1A3236; } 142 143 .info::before, .alert::before, 144 .help::before, .download::before, 145 .todo::before { filter: invert(100%) opacity(80%); } 146 147 .tip::before, .important::before { filter: opacity(80%); } 148 149 /* text colours: */ 150 .yellow { color: #FDD835; } 151 .orange { color: #FB8C00; } 152 .brown { color: #8D6E63; } 153 .red { color: #E53935; } 154 .purple { color: #AB47BC; } 155 .indigo { color: #5C6BC0; } 156 .blue { color: #1976D2; } 157 .cyan { color: #00BCD4; } 158 .teal { color: #009688; } 159 .green { color: #388E3C; } 160 .grey, .gray { color: #607D8B; } 161 162 /* special case: markers: */ 163 mark.yellow { background-color: #845800; color: #CCC; } 164 mark.orange { background-color: #E65100; color: #CCC; } 165 mark.brown { background-color: #4E342E; color: #CCC; } 166 mark.red { background-color: #B71C1C; color: #CCC; } 167 mark.purple { background-color: #6A1B9A; color: #CCC; } 168 mark.indigo { background-color: #1A237E; color: #CCC; } 169 mark.blue { background-color: #0D47A1; color: #CCC; } 170 mark.cyan { background-color: #006064; color: #CCC; } 171 mark.teal { background-color: #004D40; color: #CCC; } 172 mark.green { background-color: #1B5E20; color: #CCC; } 173 mark.grey, mark.gray { background-color: #37474F; color: #CCC; } 174 175 } 176 } 177} 178