xref: /template/ad-hominem/css/_media_popup.css (revision 2fd890d1234ae9930f6e15baf655344abd846971) 
1/**
2 * This file provides styles for the media manager popup
3 * (mediamanager.php).
4 */
5
6/*____________ structure ____________*/
7
8html.popup {
9	overflow: auto;
10}
11
12#media__manager {
13	height: 100%;
14	overflow: hidden;
15}
16
17#mediamgr__aside {
18	width: 30%;
19	height: 100%;
20	overflow: auto;
21	position: absolute;
22	left: 0;
23	border-right: 1px solid @ini_border;
24}
25[dir=rtl] #mediamgr__aside {
26	left: auto;
27	right: 0;
28	border-right-width: 0;
29	border-left: 1px solid @ini_border;
30}
31#mediamgr__aside .pad {
32	padding: .5em;
33}
34
35#mediamgr__content {
36	width: 69.7%;
37	height: 100%;
38	overflow: auto;
39	position: absolute;
40	right: 0;
41}
42[dir=rtl] #mediamgr__content {
43	right: auto;
44	left: 0;
45}
46#mediamgr__content .pad {
47	padding: .5em;
48}
49
50#media__manager h1,
51#media__manager h2 {
52	font-size: 1.5em;
53	margin-bottom: .5em;
54	padding-bottom: .2em;
55	border-bottom: 1px solid @ini_border;
56}
57
58/* left side
59********************************************************************/
60
61/*____________ options ____________*/
62
63#media__opts {
64	margin-bottom: .5em;
65}
66
67#media__opts input {
68	margin-right: .3em;
69}
70[dir=rtl] #media__opts input {
71	margin-right: 0;
72	margin-left: .3em;
73}
74#media__opts label {
75}
76
77/*____________ tree ____________*/
78
79#media__tree ul {
80	padding-left: .2em;
81}
82[dir=rtl] #media__tree ul {
83	padding-left: 0;
84	padding-right: .2em;
85}
86#media__tree ul li {
87	clear: left;
88	list-style-type: none;
89	list-style-image: none;
90	margin-left: 0;
91}
92[dir=rtl] #media__tree ul li {
93	clear: right;
94	margin-right: 0;
95}
96#media__tree ul li img {
97	float: left;
98	padding: .5em .3em 0 0;
99}
100[dir=rtl] #media__tree ul li img {
101	float: right;
102	padding: .5em 0 0 .3em;
103}
104#media__tree ul li div.li {
105	display: inline;
106}
107#media__tree ul li li {
108	margin-left: 1.5em;
109}
110[dir=rtl] #media__tree ul li li {
111	margin-left: 0;
112	margin-right: 1.5em;
113}
114
115/* right side
116********************************************************************/
117
118/*____________ upload form ____________*/
119
120/* upload info */
121#media__content div.upload {
122	font-size: .9em;
123	margin-bottom: .5em;
124}
125
126#mediamanager__uploader {
127	margin-bottom: 1em;
128}
129#mediamanager__uploader p {
130	margin-bottom: .5em;
131}
132
133/*____________ file list ____________*/
134
135#media__content img.load {
136	margin: 1em auto;
137}
138
139#media__content .odd,
140#media__content .even {
141	padding: .5em;
142}
143#media__content .odd {
144	background-color: @ini_background_alt;
145}
146#media__content .even {
147}
148/* highlight newly uploaded or edited file */
149#media__content #scroll__here {
150	border: 1px dashed @ini_border;
151}
152
153/* link which inserts media file */
154#media__content a.mediafile {
155	margin-right: 1.5em;
156	font-weight: bold;
157	cursor: pointer;
158}
159[dir=rtl] #media__content a.mediafile {
160	margin-right: 0;
161	margin-left: 1.5em;
162}
163#media__content span.info {
164}
165#media__content img.btn {
166	vertical-align: text-bottom;
167}
168
169/* info how to insert media, if JS disabled */
170#media__content div.example {
171	color: @ini_text_neu;
172	margin-left: 1em;
173}
174
175#media__content div.detail {
176	padding: .2em 0;
177}
178#media__content div.detail div.thumb {
179	float: left;
180	margin: 0 .5em 0 18px;
181}
182[dir=rtl] #media__content div.detail div.thumb {
183	float: right;
184	margin: 0 18px 0 .5em;
185}
186#media__content div.detail div.thumb a {
187	display: block;
188	cursor: pointer;
189}
190#media__content div.detail p {
191	margin-bottom: 0;
192}
193
194
195/*____________ media search ____________*/
196
197#dw__mediasearch {
198}
199#dw__mediasearch p {
200}
201#dw__mediasearch label {
202	width: 100%;
203}
204#dw__mediasearch label span {
205	display: block;
206}
207#dw__mediasearch input[type="text"] {
208	background-color: @ini_background;
209	color: @ini_text;
210	border: @ini_border solid 1px;
211	font-family: @ini_mono_fonts;
212	font-size: @ini_alt_font_size;
213	padding: .15em; margin: 0 .25rem;
214	width: ~"calc(100% - 1.25rem)";
215}
216#dw__mediasearch button {
217	background-color: #004D40;
218	color: #FFF;
219	padding: .25rem 1rem;
220	border: transparent none 0;
221	cursor: pointer;
222	font-size: 1rem;
223    margin-top: .5em;
224}
225
226/* dark mode overrides */
227@media (prefers-color-scheme: dark) {
228
229	body.darkmode {
230		#media__content .odd {
231			background-color: @ini_background_dark;
232		}
233
234		#dw__mediasearch input[type="text"] {
235			background-color: @ini_background_site_dark;
236			color: @ini_text_dark;
237			border-color: @ini_border_dark;
238		}
239	}
240}