Skip to:
Content

BuddyPress.org

Ticket #6290: 6290.css.03

File 6290.css.03, 6.7 KB (added by hnla, 5 years ago)

Update styles for WP Admin Modal & groups uploader, enhance profile screens

Line 
1Index: src/bp-core/css/avatar.css
2===================================================================
3--- src/bp-core/css/avatar.css  (revision 9785)
4+++ src/bp-core/css/avatar.css  (working copy)
5@@ -1,6 +1,6 @@
6 div.bp-avatar-status {
7-       clear:both;
8-       margin:1em 0;
9+       clear: both;
10+       margin: 1em 0;
11 }
12 
13 div.bp-avatar-status p.updated {
14@@ -21,47 +21,47 @@
15 }
16 
17 .progress {
18+       background: none;
19+       border: 1px solid #d1d1d1;
20        float: right;
21        height: 22px;
22+       line-height: 2em;
23        margin: 6px 10px 0 0;
24-       width: 200px;
25-       line-height: 2em;
26+       margin-bottom: 2px;
27        padding: 0;
28        overflow: hidden;
29-       margin-bottom: 2px;
30-       border: 1px solid #d1d1d1;
31-       background: none;
32+       width: 200px;
33 }
34 
35 .bar {
36-       z-index: 9;
37+       background-color: #c3ff88;
38        width: 0;
39        height: 100%;
40-       background-color: #c3ff88;
41+       z-index: 9;
42 }
43 
44 .bp-uploader-progress div.error {
45-       font-size: 90%;
46-       display: block;
47-       padding: 10px 15px;
48        background-color: #fdc;
49        border: 1px solid #a00;
50        color: #800;
51+       display: block;
52+       font-size: 90%;
53+       padding: 10px 15px;
54 }
55 
56 #bp-uploader-warning, #bp-webcam-message p.warning {
57-       margin:1em 0;
58-       font-size: 90%;
59-       display: block;
60-       padding: 10px 15px;
61        background-color: #ffec8b;
62        border: 1px solid #fc0;
63        color: #440;
64+       display: block;
65+       font-size: 90%;
66+       margin: 1em 0;
67+       padding: 10px 15px;
68 }
69 
70 div.bp-avatar-nav {
71-       clear:both;
72        background: transparent;
73+       clear: both;
74        margin: 10px 0 10px;
75        overflow: hidden;
76 }
77@@ -72,22 +72,22 @@
78 }
79 
80 .bp-avatar-nav .avatar-nav-items li.avatar-nav-item {
81-       float: left;
82-       margin: 0;
83-       list-style: none;
84- }
85+ float: left;
86+ margin: 0;
87+ list-style: none;
88+}
89 
90 .avatar-nav-items li a {
91-       display: block;
92-       padding: 5px 10px;
93-       text-decoration: none;
94+ display: block;
95+ padding: 5px 10px;
96+ text-decoration: none;
97 }
98 
99 .avatar-nav-items li.current a {
100        background-color: #eee;
101        color: #555;
102-       opacity: .8;
103        font-weight: bold;
104+       opacity: 0.8;
105 }
106 
107 #drag-drop-area {
108@@ -100,24 +100,34 @@
109 }
110 
111 .drag-drop-inside p {
112-       display:none;
113+       display: none;
114 }
115 
116 .drag-drop-inside p.drag-drop-buttons {
117-       margin-top:80px;
118+       margin-top: 80px;
119        text-align: center;
120 }
121+
122 .drag-drop .drag-drop-inside p.drag-drop-buttons {
123-       margin:auto;
124+       margin: auto;
125        text-align: auto;
126 }
127 
128+.drag-drop #drag-drop-area {
129+       display: table;
130+       height: 100%;
131+       width: 100%;
132+}
133+
134 .drag-drop .drag-drop-inside {
135-       margin: 70px auto 0;
136-       width: 250px;
137+       display: table-cell;
138+       padding: 40px 0;
139+       text-align: center;
140+       vertical-align: middle;
141 }
142 
143-.drag-drop .drag-drop-inside p, .drag-drop-inside p.drag-drop-buttons {
144+.drag-drop .drag-drop-inside p,
145+.drag-drop-inside p.drag-drop-buttons {
146        display: block;
147 }
148 
149@@ -128,19 +138,84 @@
150        text-align: center;
151 }
152 
153+.drag-drop-inside p.drag-drop-info {margin-top: 0;}
154+
155 #avatar-to-crop {
156        float: left;
157-       margin: 0 20px 20px 0;
158+       margin: 0 0 20px 0;
159+       /*max-width: 60%;*/
160        text-align: left;
161 }
162+
163+#avatar-to-crop .jcrop-holder {
164+       float: left;
165+}
166+
167+.avatar-crop-management {
168+       clear: left;
169+       overflow: hidden;
170+       padding-top: 20px;
171+       text-align: center;
172+}
173+
174+@media screen and (min-width: 1108px) {
175+       /* Uploader screen - Camara will override this */
176+       .avatar-crop-management {
177+               clear: none;
178+               float: right;
179+               padding-top: 0;
180+               text-align: center;
181+               width: 25%;
182+       }
183+}
184+
185+#bp-webcam-avatar .avatar-crop-management {
186+       clear: none;
187+       float: none;
188+       overflow: visible;
189+       padding-top: 0;
190+       width: auto;
191+}
192+
193 #avatar-crop-pane {
194+       margin: 0 auto;
195        overflow: hidden;
196 }
197 
198-#avatar-crop-actions {
199-       margin: 20px 0;
200+#bp-webcam-avatar #avatar-to-crop {
201+       border: 1px solid #eee;
202+       max-width: 100%;
203+       width: 100%;
204 }
205 
206+@media screen and (min-width: 801px) {
207+       #bp-webcam-avatar #avatar-to-crop {
208+               max-width: 64%;
209+               width: 64%;
210+       }
211+}
212+
213+#avatar-crop-actions a {
214+       display: block;
215+}
216+
217+#bp-webcam-avatar #avatar-crop-actions {
218+       float: left;
219+       margin: 0 0 20px 0;
220+       width: 50%;
221+}
222+
223+#avatar-crop-actions a.button {
224+       margin-top: 10px;
225+}
226+
227+#bp-webcam-avatar #avatar-crop-actions a.button {
228+       display: block;
229+       margin: 0 0 5px;
230+       padding: 4px 0;
231+       width: 100%;
232+}
233+
234 #avatar-to-crop img,
235 #avatar-crop-pane img,
236 #avatar-crop-pane canvas,
237@@ -152,19 +227,89 @@
238 }
239 
240 #bp-webcam-avatar video {
241-       float:left;
242-       width:450px;
243+       float: left;
244+       margin-bottom: 0;
245+       max-width: 100%;
246+       width: 100%;
247 }
248 
249 #bp-webcam-avatar #avatar-crop-pane {
250        border: 2px dashed #bbb;
251+       clear: left;
252+       float: right;
253+       margin: 0  40px 10px 0;
254+       overflow: hidden;
255+       /*max-width:38%;
256+       width: 38%;*/
257 }
258 
259+/**
260+*  Users can define avatar constants with new dimension values
261+*  If they do, we'll ensure the layouts preserved by enforcing a max width
262+*  that matches bp default settings.
263+*/
264+.avatar-crop-management #avatar-crop-pane {
265+       max-width: 150px;
266+       max-height: 150px;
267+}
268+
269+#avatar-crop-pane canvas {
270+       height: auto;
271+       width: 100%;
272+       max-width: 100%;
273+}
274+
275+.group-avatar .bp-avatar .avatar-crop-management {
276+       margin-left: 0;
277+       padding-top: 0;
278+       width: auto;
279+}
280+
281+@media screen and (max-width: 480px) {
282+
283+       #bp-webcam-avatar .avatar-crop-management #avatar-crop-actions,
284+       #bp-webcam-avatar .avatar-crop-management #avatar-crop-pane {
285+               float: none;
286+       }
287+
288+       #bp-webcam-avatar .avatar-crop-management #avatar-crop-pane {
289+               margin: 0 auto 10px;
290+       }
291+
292+       #bp-webcam-avatar .avatar-crop-management #avatar-crop-actions  {
293+               width: auto;
294+       }
295+
296+}
297+
298+@media screen and (min-width: 801px) {
299+
300+       .group-avatar .bp-avatar .avatar-crop-management {
301+               float: left;
302+               margin-left: 40px;
303+       }
304+
305+       #bp-webcam-avatar .avatar-crop-management {
306+               clear: none;
307+               float: right;
308+       }
309+
310+       #bp-webcam-avatar .avatar-crop-management #avatar-crop-pane {
311+               float: none;
312+               margin: 0 auto 10px;
313+       }
314+
315+       #bp-webcam-avatar .avatar-crop-management #avatar-crop-actions {
316+               float: left;
317+               width: 100%;
318+       }
319+}
320+
321 /** Admin Profile **/
322 body.users_page_bp-profile-edit.modal-open #TB_ajaxContent,
323 body.profile_page_bp-profile-edit.modal-open #TB_ajaxContent {
324-       width:95%!important;
325-       height:95%!important;
326+       height: 95% !important;
327+       width: 95% !important;
328 }
329 
330 body.users_page_bp-profile-edit.modal-open #TB_ajaxContent p.updated,
331@@ -174,3 +319,34 @@
332        display: block;
333        padding: 10px 15px;
334 }
335+
336+@media screen and (min-width: 783px) {
337+       .wp-admin #TB_window .bp-avatar .avatar-crop-management {
338+               clear: none;
339+               float: right;
340+               padding-top: 0;
341+               text-align: center;
342+               width: 30%;
343+       }
344+}
345+
346+.wp-admin #TB_window .bp-avatar #avatar-to-crop video {
347+               width: 100%;
348+       }
349+
350+.wp-admin #TB_window .bp-avatar .avatar-crop-management a.button {
351+       height: auto;
352+       line-height: inherit;
353+}
354+
355+@media screen and (min-width: 810px) {
356+       .wp-admin #TB_window .bp-avatar #bp-webcam-avatar #avatar-to-crop {
357+               max-width: none;
358+               width: 76%;
359+       }
360+
361+       .wp-admin #TB_window #bp-webcam-avatar .avatar-crop-management {
362+               max-width: none;
363+               width: auto;
364+       }
365+}