xref: /template/ad-hominem/css/_fileuploader.css (revision e049119df75fbdb492fe2047fa19f04ad609ca48) 
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 auto;
14		grid-gap: 5px;
15		align-items: center;
16	}
17	&::before {
18		content: '\1F5CE';
19		color: @ini_text;
20		font-size: 1.25rem;
21		display: inline-block;
22		width: 1.25rem;
23		height:1.5rem;
24		text-align: right;
25	}
26	&.qq-upload-success {
27		grid-template-columns: 1.25rem auto auto;
28	}
29	.qq-upload-size {
30		min-width: fit-content;
31		text-align: right;
32	}
33	.qq-upload-failed-text {
34		grid-column: 2 / span 2;
35	}
36}
37
38
39#mediamanager__page .qq-upload-list li input[type="text"] {
40	font-family: @ini_mono_fonts;
41	font-size: @ini_alt_font_size;
42	background-color: transparent;
43	border: 1px solid transparent;
44	padding: .25em;
45	border-radius: 1.5pt;
46}
47#mediamanager__page .qq-upload-list li input[type="text"]:focus {
48	border-color: @ini_border;
49}
50
51.qq-uploader .error {
52	color: #f00;
53	background-color: #fff;
54}
55
56/* select file button */
57
58.qq-upload-button,
59#mediamanager__upload_button {
60	display: inline-block;
61	text-decoration: none;
62	font-size: 1rem;
63	cursor: pointer;
64	margin: 1px 1px 5px;
65	padding: 2pt 20pt;
66	border: none 0;
67	color: #FFF;
68	cursor: pointer;
69}
70.qq-upload-button {
71	background-color: #15395B;
72}
73#mediamanager__upload_button {
74	background-color: #B71C1C;
75	padding: .4rem 2.5rem;
76}
77
78
79.qq-upload-button-focus {
80	outline: 1px dotted;
81}
82
83/* drop area */
84
85.qq-upload-drop-area {
86	background: @ini_background_neu;
87	color: @ini_text_neu;
88	text-align: center;
89}
90
91.qq-upload-drop-area span {
92	padding: 2em .5em;
93}
94
95.qq-upload-drop-area-active {
96	position: fixed;
97	top: 0; left: 0;
98	width: 100vw;
99	height: 100vh;
100	min-height: 70px;
101	background: fadeout(@ini_background_alt, 10%);;
102	z-index: 99;
103}
104.qq-upload-drop-area-active span {
105	display: block;
106	position: absolute;
107	top: 50%;
108	width: 100%;
109	margin-top: -8px;
110	font-size: 120%;
111	color: #15395B;
112}
113/* list of files to upload */
114
115div.qq-uploader ul {
116	margin: 0;
117	padding: 0;
118	list-style: none;
119}
120
121.qq-uploader li {
122	margin: 0 0 5px;
123	color: @ini_text;
124}
125
126.qq-uploader li span,
127.qq-uploader li input,
128.qq-uploader li a {
129	margin-right: 5px;
130}
131
132.qq-upload-file {
133	display: block;
134	font-weight: bold;
135}
136
137.qq-upload-spinner {
138	display: inline-block;
139	background: url("../../images/throbber.gif");
140	width: 15px;
141	height: 15px;
142	vertical-align: text-bottom;
143}
144
145.qq-upload-size {
146	font-size: 85%;
147}
148.qq-upload-cancel {
149	font-size: 1rem;
150	line-height: 1.25;
151	width: 1em; height: 1.5em;
152	overflow: hidden;
153}
154.qq-upload-cancel::before {
155	content: '\1F5D9';
156	display: inline-block;
157	width: 1em;
158	height: 1.5em;
159}
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				color: @ini_text_dark;
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
218		}
219	}
220}