xref: /template/ad-hominem/css/_admin.less (revision 445d91c700b994e3b5cbae6358c061da6c08be74) 
1
2/* indicate special modes by using a different background and border */
3body.mode_admin {
4	main {
5		& {
6			background-color: @ini_background_alt;
7			border: @ini_text_alt solid 2px;
8			color: @ini_text_alt;
9		}
10		#toc {
11			background-color: @ini_background_alt;
12		}
13		#navYouAreHere {
14			background-color: @ini_background;
15			padding: .25em .25em 0 .25em;
16			border-radius: .25em;
17			border: @ini_text_alt solid 2px;
18		}
19		table th {
20			background-color: @ini_background_neu;
21		}
22	}
23	div.ui-admin {
24
25		& {
26			display: grid;
27			grid-template-columns: 1fr 1fr;
28		}
29
30		h1.first-child,
31		div.level1	{
32			grid-column: 1 / span 2;
33			margin-bottom: 1em;
34		}
35
36		/* main task grouped in two columns */
37		ul.admin_tasks {
38			grid-column: 2;
39			list-style-type: none;
40			font-size: 1.125em;
41			margin: 0;
42		}
43		ul.admin_tasks:first-of-type {
44			grid-row: 3 / span 4;
45			grid-column: 1;
46		}
47		ul.admin_plugins {
48			grid-row: 6;
49			grid-column: 2;
50		}
51
52		/* general menu item styling */
53		ul {
54			padding: 0;
55			li {
56				margin: 0 0 1em 0;
57				font-weight: bold;
58				list-style-type: none;
59				white-space: nowrap;
60
61				a {
62					display: flex;
63					span {
64						display: inline-block;
65
66						&.icon {
67							width: 1.5em;
68							min-height: 1.5em;
69							margin: 0 0.5em;
70							vertical-align: top;
71
72							svg {
73								width: 1.5em;
74								height: 1.5em;
75								fill: @ini_link;
76								display: inline-block;
77								path {
78									fill: @ini_link;
79								}
80							}
81						}
82
83						&.prompt {
84							white-space: normal;
85						}
86					}
87				}
88			}
89		}
90
91		/* Security Warning */
92		#security__check {
93			clear: both;
94			grid-row: 7;
95			grid-column: 1 / span 2;
96		}
97
98		/* DokuWiki version */
99		#admin__version {
100			display: block;
101			box-sizing: border-box;
102			width: 100%;
103			max-height: 7em;
104			overflow: auto;
105			color: @ini_text_neu;
106			background: @ini_background_neu url('images/info.svg') .25em .5em no-repeat;
107			background-size: 1em;
108			padding: .25em 0 .25em 1.75em;
109			border: @ini_border 1px solid;
110			border-radius: .25em;
111			box-shadow: inset .5pt .5pt 1pt #00000088;
112			grid-row: 9;
113			grid-column: 1 / span 2;
114		}
115	}
116
117	/* user manager: */
118	#user__manager {
119		button {
120			& {
121				background-color: @ini_background;
122				border: @ini_text solid 1px;
123				border-radius: .25em;
124				padding: .25em .5em;
125				cursor: pointer;
126			}
127			&#usrmgr__del {
128				background-color: #fcd;
129				color: @ini_text;
130			}
131			&[name="fn[add]"] {
132				background-color: #cdf;
133				color: @ini_text;
134			}
135			&[name="fn[start]"] {
136				border-radius: .5em 0 0 .5em;
137			}
138			&[name="fn[prev]"],
139			&[name="fn[next]"] {
140				border-radius: 0;
141				border-left-width: 0;
142			}
143			&[name="fn[last]"] {
144				border-radius: 0 .5em .5em 0;
145				border-left-width: 0;
146			}
147		}
148	}
149
150	/* extensions manager */
151	#extension__list {
152		ul.extensionList {
153			li {
154				padding: .25em .5em;
155				border: transparent dashed 2pt;
156				border-radius: .25em;
157			}
158			li.update {
159				border-color: @ini_focus_color;
160			}
161		}
162
163		.legend a.info, .legend a.info.close {
164			width: 22px;
165			height: 22px;
166			background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 9H13V7H11M12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M11 17H13V11H11V17Z' style='fill:%23ADADB3'/%3E%3C/svg%3E") center no-repeat;
167			background-size: 24px;
168			border-radius: 50%;
169			margin-bottom: .5em;
170		}
171
172		/* git warnings */
173		.actions {
174			p.permerror {
175				border: #D99C3C solid 1px;;
176				background-color: #FBF0C4;
177				background-position: 1px 1px;
178				border-radius: 2pt;
179				padding: 1.5px 1pt 0 22px;
180			}
181			.available {
182				border: #6EC247 solid 1px;
183				background-color: #C4FEB8;
184				padding: 1pt;
185				border-radius: 2pt;
186			}
187		}
188
189		/* extensions manager */
190		section.extension {
191
192			& {
193				padding: .5rem;
194				border: @ini_border solid 1pt;
195				border-radius: .5rem .25rem .25rem .5rem;
196				border-left: .5rem solid darken(@ini_border, 20%);
197				align-items: start;
198			}
199			&.enabled {
200				border-left-color: #0085F2;
201			}
202			&.disabled {
203				border-left-color: @ini_border;
204			}
205			&.update {
206				border-left-color: #B71C1C;
207			}
208
209			/* elements */
210			h2 {
211				margin: 0; padding: 0;
212			}
213
214			/* notices */
215			& > .notices {
216				li.info {
217					background-image: none;
218				}
219				li.warning {
220					border: #D99C3C solid 1px;;
221					background-color: #FEA;
222					border-radius: 2pt;
223					padding: 0 1pt 2pt 0;
224					margin-bottom: 1.5pt;
225				}
226				li.error {
227					border: #F33 solid 1px;;
228					background-color: #FFDADA;
229					border-radius: 2pt;
230					padding: 0 1pt 2pt 0;
231					margin-bottom: 1.5pt;
232				}
233				span.icon {
234					align-self: flex-start;
235					margin: 1pt 0 0 1pt;
236				}
237			}
238		}
239	}
240
241}
242
243/* style the extension manager items: */
244body.dokuwiki #extension__manager {
245	form.install { box-sizing: border-box; width: 100%; padding: 1em 2em; background-color: #EEE; }
246	form.install .block { text-align: left; width: 100% }
247	form.install input[name=installurl] {
248		font-family: @ini_mono_fonts;
249		padding: .25em .25em .25em 24px;
250		border-radius: 10px;
251		background: @ini_background_site url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAABdklEQVR4AWMgAVRo1zY3rGk41rC+rqvCBCJWBpPM4WoomLHtdtuv/t9Lfk263TtrQ0t7Oj9cbzZDc/W6s/8T7khD+P+F/8bv29PZlswJVVBu0vPuVZyNYHFZbmAqE1SR0cbjXR6pjGBO58am962Ta3e3ftqy6B5LCcMasOj7gInrm9jBzI4vTX+bfjT/7/4/p/w/zFXybUmt71u4wJzGfxP/t/xvA+KaP2XnQSKVFpWPav/U/6+HKJjz++OVJUDp1n9N/+r+19QyMCz1mPC/8X/X/26Igrn3GiUeL5n/v+F/8//6/9NOMTC0hDUDefP/L4MoOL6ickVeSQ1QqAGooPdBJE/lnloge/fhixBHftFd9bLkR83/+n/1QAXVP8qX1Pyv/L/s/12f/4xQNz8s3Pa/6X/Vvzqgour/5f/r/q//f2fmLy54WP7lfJN74eMSoKIyoNFz/5/+9ar+Px9aZL3Xfjvz7aO3/96+eLvsnSVE7CPhOAYA9nvIX0UoNU8AAAAASUVORK5CYII=') 3px center no-repeat;
252		width: calc(100% - 6em);
253	}
254	form.install input[name=overwrite] { width: auto; margin-left: 2em;}
255	form.install button[type=submit] {
256		border: #CCC solid 1.5pt;
257		padding: .5em .75em;
258		background-color: #cdf;
259	}
260	form.install button[type=submit]::before {
261		content: ' ';
262		display: inline-block;
263		position: relative;
264		top: .1em;
265		width: 1em;
266		height: 1em;
267		background: transparent url('images/editor/edit-save.svg') center bottom no-repeat;
268		margin-right: .25em;
269	}
270}
271
272/* dark mode overrides */
273@media (prefers-color-scheme: dark) {
274	body.darkmode.mode_admin {
275		main {
276			& {
277				background-color: @ini_background_alt_dark;
278				border-color: @ini_text_alt_dark;
279				color: @ini_text_alt_dark;
280			}
281			#toc {
282				background-color: @ini_background_alt_dark;
283				border-left: @ini_text_alt_dark solid .5pt;;
284			}
285			#navYouAreHere {
286				background-color: @ini_background_dark;
287				border-color: @ini_text_alt_dark;
288			}
289		}
290
291		#extension__manager form.install { background-color: #39393D; }
292		#extension__manager form.install button[type=submit] {
293			color: #CDF;
294			background-color: #346;
295			border-color: #90909B;
296		}
297		#extension__manager form.install button[type=submit]::before { filter: invert(.9); }
298		div.ui-admin #admin__version {
299			color: @ini_text_neu_dark;
300			background-color: @ini_background_neu_dark;
301		}
302
303		div.ui-admin ul li a span.icon {
304			svg {
305				& { fill: @ini_link_dark; }
306				path { fill: @ini_link_dark; }
307			}
308		}
309
310		/* Extension Manager: */
311		#extension__manager{
312			.panelHeader { background-color: @ini_background_alt_dark; }
313			ul.tabs li a { background-color: @ini_background_dark; border-color: @ini_border_dark; color: @ini_text_dark }
314			ul.tabs li.active a { background-color: @ini_background_alt_dark; border-color: @ini_text_dark; }
315			tr .input, tr.default .input { color: @ini_text_dark; }
316		}
317		#extension__list {
318			ul.extensionList li { color: @ini_text_dark; }
319			.actions {
320				p.permerror {
321					border-color: #86560A;
322					background-color: #4D3F04;
323				}
324				.available {
325					border-color: #4F7A0B;
326					background-color: #333E03;
327				}
328			}
329			section.extension > .notices {
330				li.warning {
331					border-color: #86560A;
332					background-color: #4D3F04;
333				}
334				li.error {
335					border-color: #A62A2A;
336					background-color: #360505;
337				}
338			}
339			ul.extensionList li.update {
340				border-color: @ini_focus_color_dark;
341			}
342		}
343	}
344}
345
346/* below tablet size */
347@media (max-width: @ini_tablet_width) {
348	body.dokuwiki div.ui-admin { display: block; }
349}