1
2/* ### ### ### */
3
4	/* Vars */
5	/* Display */
6	/* Flex */
7	/* Position */
8	/* Settings */
9	/* Font */
10	/* Text */
11	/* Color */
12	/* Box */
13	/* Size */
14
15#mediamanager__page {
16	/* Display */
17	display: flex;
18	flex-flow: wrap;
19	/* Position */
20	position: relative;
21	/* Font */
22	font-size: .8rem;
23	/* Text */
24	text-align: left;
25	/* Size */
26	width: 100%;
27	min-width: 50rem;
28}
29
30#mediamanager__page > h1 {
31	/* Position */
32	flex: 1 0 100%;
33	/* Box */
34	margin-bottom: .5rem;
35}
36
37#mediamanager__page dd {
38	/* Box */
39	margin: 0;
40}
41
42#mediamanager__page .namespaces {
43	/* Size */
44	width: 20%;
45	min-width: 10em;
46}
47
48#mediamanager__page .namespaces h2 {
49	/* Dsiplay */
50	display: flex;
51	/* Settings */
52	line-height: 1;
53	list-style: none;
54	/* Font */
55	font-size: .9rem;
56	font-weight: normal;
57	/* Box */
58	padding: 0;
59	margin: 0;
60	/* Size */
61	width: fit-content;
62}
63
64#mediamanager__page .namespaces h2 {
65	/* Position */
66	position: relative;
67	z-index: 2;
68	/* Settings */
69	list-style: none;
70	white-space: nowrap;
71	/* Font */
72	font-weight: normal;
73	/* Text */
74	text-decoration: none;
75	/* Color */
76	color: var(--main-color);
77	background-color: var(--lite-color);
78	/* Box */
79	padding: .4rem .8rem;
80	margin: 0 .1rem 0 .2rem;
81}
82
83#mediamanager__page .filelist {
84	/* Size */
85	width: 50%;
86	min-width: 25em;
87}
88
89#mediamanager__page .filelist ul {
90	/* Box */
91	padding: 0;
92	margin: 0 .4rem 0 0;
93}
94
95#mediamanager__page .filelist ul li {
96	/* Box */
97	padding: 0;
98	margin: 0;
99}
100
101#mediamanager__page .filelist ul {
102	/* Box */
103	padding: 0;
104	margin: 0 .2rem 0 0;
105}
106
107#mediamanager__page .filelist li dt a {
108	/* Display */
109	display: table-cell;
110	/* Position */
111	vertical-align: middle;
112	/* Settings */
113	overflow: hidden;
114}
115
116#mediamanager__page .filelist ul.thumbs {
117	/* Display */
118	display: flex;
119	flex-flow: wrap;
120	gap: .3rem;
121	/* Settings */
122	list-style: none;
123	/* Box */
124	margin: .3rem;
125}
126
127#mediamanager__page .filelist .thumbs li {
128	/* Position */
129	position: relative;
130	vertical-align: top;
131	/* Settings */
132	line-height: 1.2;
133	/* Font */
134	font-size: .7rem;
135	/* Text */
136	text-align: center;
137	/* Box */
138	padding: .3rem .4rem;
139	border: .1rem solid var(--lite-color);
140	margin: 0;
141	/* Size */
142	width: 8rem;
143	min-height: 11rem;
144}
145#mediamanager__page .filelist .thumbs dl {
146	/* Display */
147	display: flex;
148	flex-flow: column;
149	align-items: center;
150}
151
152#mediamanager__page .filelist .thumbs li dt a {
153	/* Size */
154	height: 8rem;
155	width: 7rem;
156}
157
158#mediamanager__page .filelist .thumbs li .name {
159	/* Font */
160	font-weight: bold;
161	/* Size */
162	padding: .3rem 0;
163}
164
165#mediamanager__page .filelist .thumbs li .date {
166	/* Font */
167	font-style: italic;
168	/* Text */
169	white-space: normal;
170}
171
172#mediamanager__page .filelist .thumbs li .name,
173#mediamanager__page .filelist .thumbs li .size,
174#mediamanager__page .filelist .thumbs li .filesize,
175#mediamanager__page .filelist .thumbs li .date {
176	/* Display */
177	display: block;
178	/* Settings */
179	overflow: hidden;
180	/* Text */
181	text-overflow: ellipsis;
182	white-space: nowrap;
183	/* Size */
184	width: 7rem;
185}
186
187#mediamanager__page .file {
188	/* Size */
189	width: 30%;
190	min-width: 15em;
191}
192
193#mediamanager__page .file div.image {
194	/* Text */
195	text-align: center;
196	/* Box */
197	margin: .5rem 0;
198}
199
200#mediamanager__page .file div.image img {
201	/* Size */
202	width: 100%;
203}
204
205#mediamanager__page .file ul.actions {
206	/* Text */
207	text-align: center;
208	list-style: none;
209	/* Box */
210	padding: 0;
211	margin: 0;
212}
213
214#mediamanager__page .file dl {
215	/* Color */
216	color: var(--main-color);
217	/* Box */
218	margin: 0;
219}
220
221#mediamanager__page .file dl dt {
222	/* Font */
223	font-weight: bold;
224	/* Color */
225	background: var(--dark-color);
226	/* Box */
227	padding: .1rem .3rem;
228}
229
230#mediamanager__page .file dl dd {
231	/* Color */
232	background: var(--lite-color);
233	/* Box */
234	padding: .1rem .3rem;
235}
236
237
238/* ### ### ### */
239
240#mediamanager__page .panelHeader h3 {
241	/* Font */
242	font-size: .8rem;
243	font-weight: normal;
244	/* Box */
245	padding: 0;
246	margin: 0 0 .2rem;
247}
248
249#mediamanager__page .panelHeader ul {
250	/* Settings */
251	list-style: none;
252	/* Box */
253	padding: 0;
254	margin: 0;
255}
256
257#mediamanager__page .panelHeader ul li {
258	/* Position */
259	float: left;
260}
261
262#mediamanager__page .panelHeader ul li.ui-buttonset {
263	/* Box */
264	padding-left: 2rem;
265	margin: 0 0 0 .3rem;
266}
267
268#mediamanager__page .panelHeader form.options {
269	/* Position */
270	float: right;
271}
272
273#mediamanager__page .panelHeader form.options ul {
274	/* Display */
275	display: flex;
276	gap: .3rem;
277	/* Box */
278	padding: 0;
279	border: 0;
280	border-radius: 0;
281	margin: 0 .5rem;
282}
283
284#mediamanager__page .panelHeader form.options ul li {
285	/* Display */
286	display: flex;
287	/* Box */
288	padding: 0;
289	border: .1rem solid var(--dark-color);
290	border-radius: 0;
291	margin: 0;
292}
293
294#mediamanager__page .panelHeader form.options .ui-buttonset label {
295	/* Font */
296	font-size: .7rem;
297	/* Color */
298	color: var(--main-color);
299	background: var(--dark-color);
300	/* Box */
301	padding: 0;
302	border: 0;
303	border-radius: 0;
304	margin: 0;
305}
306
307#mediamanager__page .panelHeader form.options .ui-buttonset .ui-button-text {
308	/* Settings */
309	line-height: 1;
310	/* Box */
311	padding: .4rem .5rem;
312	border: 0;
313	margin: 0;
314}
315
316#mediamanager__page .panelHeader form.options .ui-buttonset .ui-state-active,
317#mediamanager__page .panelHeader form.options .ui-buttonset .ui-state-active.ui-state-hover {
318	/* Color */
319	background: var(--lite-color);
320}
321
322#mediamanager__page .panelHeader form.options .ui-buttonset .ui-state-hover {
323	/* Color */
324	background: var(--anti-color);
325}
326
327#mediamanager__page .panelContent {
328	/* Position */
329	position: relative;
330	/* Settings */
331	overflow-x: hidden;
332	overflow-y: auto;
333	/* Box */
334	padding: 0;
335	margin: 0 .4rem .4rem 0;
336	/* Box */
337	max-height: 20rem;
338}
339
340/* ### ### ### */
341
342#media__tree > ul {
343	/* Box */
344	margin-top: .4rem;
345}
346
347#media__tree ul {
348	/* Box */
349	padding-left: .3rem;
350}
351
352#media__tree ul li {
353	/* Settings */
354	clear: left;
355	list-style-type: none;
356	list-style-image: none;
357	/* Box */
358	margin-left: 0;
359}
360
361#media__tree ul li img {
362	/* Position */
363	float: left;
364	/* Box */
365	padding: .3rem .3rem 0 0;
366	border: 0;
367}
368
369#media__tree ul li li {
370	/* Box */
371	margin-left: 1.5rem;
372}
373
374#media__tree ul li div.li {
375	/* Display */
376	display: inline;
377}
378
379#media__tree ul li .li {
380	/* Color */
381	color: var(--anti-color);
382}
383
384/* ### ### ### */
385
386#mediamanager__page .ui-resizable-e {
387	/* Position */
388	right: 0;
389	/* Color */
390	background: var(--main-color) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAgBAMAAADDFxRQAAAAFVBMVEUzMzMzMzMzMzMzMzMzMzMzMzMAAAC/StzQAAAAB3RSTlMQEQQPAX8A/rYeMAAAACdJREFUeAFjSDNLY0gLg2AVMK0GxG4MYWFhVMVsYWIgc0H2IHBaGgAKAiA/dIJU/QAAAABJRU5ErkJggg==) center center no-repeat;
391	/* Size */
392	width: .4rem;
393}
394