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