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