xref: /template/ad-hominem/css/_fileuploader.css (revision c8a4fd957175ecea2e63fbb884bf0e0a11628f77) 
1/**
2 * This file provides the styles for the file uploader
3 * used in the media manager (both fullscreen and popup).
4 */
5
6 .qq-uploader {
7	position: relative;
8	width: 100%;
9}
10#mediamanager__page .qq-upload-list li {
11	& {
12		display: grid;
13		grid-template-columns: 1.25rem auto 1.25rem;
14		grid-gap: 5px;
15		align-items: center;
16	}
17	&::before {
18		content: '';
19		background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14,11C12.34,11 11,9.66 11,8V4H7C5.9,4 5,4.9 5,6V19C5,20.1 5.9,21 7,21H16C17.1,21 18,20.1 18,19V11H14M12,8C12,9.1 12.9,10 14,10H17.59L12,4.41V8M7,3H12L19,10V19C19,20.66 17.66,22 16,22H7C5.34,22 4,20.66 4,19V6C4,4.34 5.34,3 7,3Z' /%3E%3C/svg%3E") center no-repeat;
20		background-size: 1em;
21		display: inline-block;
22		width: 1.25rem;
23		height:1.5rem;
24	}
25	&.qq-upload-success {
26		grid-template-columns: 1.25rem auto auto;
27	}
28	.qq-upload-size {
29		min-width: fit-content;
30		text-align: right;
31	}
32	.qq-upload-failed-text {
33		grid-column: 2 / span 2;
34	}
35}
36
37#mediamanager__page .qq-upload-list li input[type="text"] {
38	font-family: @ini_mono_fonts;
39	font-size: @ini_alt_font_size;
40	background-color: transparent;
41	border: 1px solid transparent;
42	padding: .25em;
43	border-radius: 1.5pt;
44}
45#mediamanager__page .qq-upload-list li input[type="text"]:focus {
46	border-color: @ini_border;
47}
48
49.qq-uploader .error {
50	color: #f00;
51	background-color: #fff;
52}
53
54/* select file button */
55
56.qq-upload-button,
57#mediamanager__upload_button {
58	display: inline-block;
59	text-decoration: none;
60	font-size: 1rem;
61	cursor: pointer;
62	margin: 1px 1px 5px;
63	padding: 2pt 20pt;
64	border: none 0;
65	color: #FFF;
66	cursor: pointer;
67}
68.qq-upload-button {
69	background-color: #15395B;
70}
71#mediamanager__upload_button {
72	background-color: #B71C1C;
73	padding: .4rem 2.5rem;
74}
75
76.qq-upload-button-focus {
77	outline: 1px dotted;
78}
79
80/* drop area */
81.qq-upload-drop-area {
82	background: @ini_background_neu;
83	color: @ini_text_neu;
84	text-align: center;
85}
86
87.qq-upload-drop-area span {
88	padding: 2em .5em;
89}
90
91.qq-upload-drop-area-active {
92	position: fixed;
93	top: 0; left: 0;
94	width: 100vw;
95	height: 100vh;
96	min-height: 70px;
97	background: fadeout(@ini_background_alt, 10%);;
98	z-index: 99;
99}
100.qq-upload-drop-area-active span {
101	display: block;
102	position: absolute;
103	top: 50%;
104	width: 100%;
105	margin-top: -8px;
106	font-size: 120%;
107	color: #15395B;
108}
109/* list of files to upload */
110
111div.qq-uploader ul {
112	margin: 0;
113	padding: 0;
114	list-style: none;
115}
116
117.qq-uploader li {
118	margin: 0 0 5px;
119	color: @ini_text;
120}
121
122.qq-uploader li span,
123.qq-uploader li input,
124.qq-uploader li a {
125	margin-right: 5px;
126}
127
128.qq-upload-file {
129	display: block;
130	font-weight: bold;
131}
132
133.qq-upload-spinner {
134	display: inline-block;
135	background: url("../../images/throbber.gif");
136	width: 15px;
137	height: 15px;
138	vertical-align: text-bottom;
139}
140
141.qq-upload-size {
142	font-size: 85%;
143}
144.qq-upload-cancel {
145	font-size: 1rem;
146	line-height: 1.25;
147	width: 1em; height: 1.5em;
148	overflow: hidden;
149}
150.qq-upload-cancel::before {
151	content: '';
152	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' style='fill:%23A00' /%3E%3C/svg%3E") center no-repeat;
153	background-size: 1em;
154	display: inline-block;
155	width: 1em;
156	height: 1.5em;
157}
158
159.qq-upload-failed-text {
160	display: none;
161}
162.qq-upload-fail .qq-upload-failed-text {
163	display: inline;
164}
165
166.qq-action-container * {
167	vertical-align: middle;
168}
169.qq-overwrite-check input {
170	margin-left: 10px;
171}
172
173/* media tree overrides */
174#media__tree ul li div.li {
175	display:	grid;
176}
177#mediamanager__page .ui-resizable-e {
178	background-color: #EEE;
179}
180
181/* dark mode overrides */
182@media (prefers-color-scheme: dark) {
183
184	body.darkmode {
185		.qq-upload-button {
186			background-color: #1976D2;
187		}
188
189		.qq-upload-drop-area {
190			background: @ini_background_neu_dark;
191			color: @ini_text_neu_dark;
192		}
193
194		.qq-upload-drop-area-active {
195			background: fadeout(@ini_background_alt_dark, 10%);;
196		}
197		.qq-upload-drop-area-active span {
198			color: #1976D2;
199		}
200
201		#mediamanager__page .qq-upload-list {
202			li::before {
203				filter: invert(.9);
204			}
205			li input[type="text"] {
206				color: @ini_text_dark;
207			}
208			li input[type="text"]:focus {
209				border-color: @ini_border_dark;
210			}
211			.qq-upload-size {
212				color: @ini_text_dark;
213			}
214			.qq-upload-cancel::before {
215				filter: brightness(1.5);
216			}
217
218		}
219	}
220}