xref: /plugin/adhocwrap/all.less (revision 887607777de0491d70f3cf689557db31a0276ac7)
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