1/** 2 * This contains the content styling 3 * @author Sascha Leib <sascha@leib.be> 4 */ 5 6 main { 7 .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 .info { border-color: #B0BEC5; } 29 .info::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTExLDlIMTNWN0gxMU0xMiwyMEM3LjU5LDIwIDQsMTYuNDEgNCwxMkM0LDcuNTkgNy41OSw0IDEyLDRDMTYuNDEsNCAyMCw3LjU5IDIwLDEyQzIwLDE2LjQxIDE2LjQxLDIwIDEyLDIwTTEyLDJBMTAsMTAgMCAwLDAgMiwxMkExMCwxMCAwIDAsMCAxMiwyMkExMCwxMCAwIDAsMCAyMiwxMkExMCwxMCAwIDAsMCAxMiwyTTExLDE3SDEzVjExSDExVjE3WiIgLz48L3N2Zz4=");} 30 31 .tip { border-color: #FFCA28; } 32 .tip::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTIwLDExSDIzVjEzSDIwVjExTTEsMTFINFYxM0gxVjExTTEzLDFWNEgxMVYxSDEzTTQuOTIsMy41TDcuMDUsNS42NEw1LjYzLDcuMDVMMy41LDQuOTNMNC45MiwzLjVNMTYuOTUsNS42M0wxOS4wNywzLjVMMjAuNSw0LjkzTDE4LjM3LDcuMDVMMTYuOTUsNS42M00xMiw2QTYsNiAwIDAsMSAxOCwxMkMxOCwxNC4yMiAxNi43OSwxNi4xNiAxNSwxNy4yVjE5QTEsMSAwIDAsMSAxNCwyMEgxMEExLDEgMCAwLDEgOSwxOVYxNy4yQzcuMjEsMTYuMTYgNiwxNC4yMiA2LDEyQTYsNiAwIDAsMSAxMiw2TTE0LDIxVjIyQTEsMSAwIDAsMSAxMywyM0gxMUExLDEgMCAwLDEgMTAsMjJWMjFIMTRNMTEsMThIMTNWMTUuODdDMTQuNzMsMTUuNDMgMTYsMTMuODYgMTYsMTJBNCw0IDAgMCwwIDEyLDhBNCw0IDAgMCwwIDgsMTJDOCwxMy44NiA5LjI3LDE1LjQzIDExLDE1Ljg3VjE4WiIgLz48L3N2Zz4=");} 33 34 .important { border-color: #FF9800; } 35 .important::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyLDJMMSwyMUgyM00xMiw2TDE5LjUzLDE5SDQuNDdNMTEsMTBWMTRIMTNWMTBNMTEsMTZWMThIMTNWMTYiIC8+PC9zdmc+");} 36 37 .alert { border-color: #E53935; } 38 .alert::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTguMjcsM0wzLDguMjdWMTUuNzNMOC4yNywyMUgxNS43M0MxNy41LDE5LjI0IDIxLDE1LjczIDIxLDE1LjczVjguMjdMMTUuNzMsM005LjEsNUgxNC45TDE5LDkuMVYxNC45TDE0LjksMTlIOS4xTDUsMTQuOVY5LjFNMTEsMTVIMTNWMTdIMTFWMTVNMTEsN0gxM1YxM0gxMVY3IiAvPjwvc3ZnPg==");} 39 40 .help { border-color: #7986CB; } 41 .help::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTExLDE4SDEzVjE2SDExVjE4TTEyLDJBMTAsMTAgMCAwLDAgMiwxMkExMCwxMCAwIDAsMCAxMiwyMkExMCwxMCAwIDAsMCAyMiwxMkExMCwxMCAwIDAsMCAxMiwyTTEyLDIwQzcuNTksMjAgNCwxNi40MSA0LDEyQzQsNy41OSA3LjU5LDQgMTIsNEMxNi40MSw0IDIwLDcuNTkgMjAsMTJDMjAsMTYuNDEgMTYuNDEsMjAgMTIsMjBNMTIsNkE0LDQgMCAwLDAgOCwxMEgxMEEyLDIgMCAwLDEgMTIsOEEyLDIgMCAwLDEgMTQsMTBDMTQsMTIgMTEsMTEuNzUgMTEsMTVIMTNDMTMsMTIuNzUgMTYsMTIuNSAxNiwxMEE0LDQgMCAwLDAgMTIsNloiIC8+PC9zdmc+");} 42 43 .download { border-color: #43A047; } 44 .download::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTUsMjBIMTlWMThINU0xOSw5SDE1VjNIOVY5SDVMMTIsMTZMMTksOVoiIC8+PC9zdmc+");} 45 46 .todo { border-color: #4DD0E1; } 47 .todo::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3IDE1TDE4IDE5SDIxVjIySDNWMTlINkw3IDE1SDE3TTE1IDhMMTYgMTJIOEw5IDhIMTVNMTMgMUwxNCA1SDEwTDExIDFIMTNaIiAvPjwvc3ZnPg==");} 48} 49 50/* RTL Overrides */ 51[dir=rtl] main .info, main *[dir=rtl] .info, main .info[dir=rtl], 52[dir=rtl] main .tip, main *[dir=rtl] .tip, main .tip[dir=rtl], 53[dir=rtl] main .important, main *[dir=rtl] .important, main .important[dir=rtl], 54[dir=rtl] main .alert, main *[dir=rtl] .alert, main .alert[dir=rtl], 55[dir=rtl] main .help, main *[dir=rtl] .help, main .help[dir=rtl], 56[dir=rtl] main .download, main *[dir=rtl] .download, main .download[dir=rtl], 57[dir=rtl] main .todo, main *[dir=rtl] .todo, main .todo[dir=rtl] { 58 border-width: 2pt 1.5em 2pt 2pt; 59} 60[dir=rtl] main .info::before, main *[dir=rtl] .info::before, main .info[dir=rtl]::before, 61[dir=rtl] main .tip::before, main *[dir=rtl] .tip::before, main .tip[dir=rtl]::before, 62[dir=rtl] main .important::before, main *[dir=rtl] .important::before, main .important[dir=rtl]::before, 63[dir=rtl] main .alert::before, main *[dir=rtl] .alert::before, main .alert[dir=rtl]::before, 64[dir=rtl] main .help::before, main *[dir=rtl] .help::before, main .help[dir=rtl]::before, 65[dir=rtl] main .download::before, main *[dir=rtl] .download::before, main .download[dir=rtl]::before, 66[dir=rtl] main .todo::before, main *[dir=rtl] .todo::before, main .todo[dir=rtl]::before { 67 left: initial; 68 right: -1.25em; 69} 70 71/* dark mode overrides */ 72@media (prefers-color-scheme: dark) { 73 74 body.darkmode { 75 main { 76 .info { border-color: #546E7A; } 77 .tip { border-color: #F9A825; } 78 .important { border-color: #E65100; } 79 .alert { border-color: #B71C1C; } 80 .help { border-color: #1A237E; } 81 .download { border-color: #1B5E20; } 82 .todo { border-color: #006064; } 83 84 .info::before, .alert::before, 85 .help::before, .download::before, 86 .todo::before { filter: invert(100%) opacity(80%); } 87 88 .tip::before, .important::before { filter: opacity(80%); } 89 } 90 } 91} 92