Skip to:
Content

BuddyPress.org

Ticket #6290: 6290.css.02

File 6290.css.02, 5.4 KB (added by hnla, 5 years ago)

Second pass at avatar styles, breakpoints & jcrop correction

Line 
1Index: src/bp-core/css/avatar.css
2===================================================================
3--- src/bp-core/css/avatar.css  (revision 9784)
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,83 @@
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: 1008px) {
175+       .avatar-crop-management {
176+               clear: none;
177+               float: right;
178+               padding-top: 0;
179+               text-align: center;
180+               width: 30%;
181+       }
182+}
183+
184+#bp-webcam-avatar .avatar-crop-management {
185+       clear: none;
186+       float: none;
187+       overflow: visible;
188+       padding-top: 0;
189+       width: auto;
190+}
191+
192 #avatar-crop-pane {
193+       margin: 0 auto;
194        overflow: hidden;
195 }
196 
197-#avatar-crop-actions {
198-       margin: 20px 0;
199+#bp-webcam-avatar #avatar-to-crop {
200+       border: 1px solid #eee;
201+       max-width: 100%;
202+       width: 100%;
203 }
204 
205+@media screen and (min-width: 801px) {
206+       #bp-webcam-avatar #avatar-to-crop {
207+               max-width: 64%;
208+               width: 64%;
209+       }
210+}
211+
212+#avatar-crop-actions a {
213+       display: block;
214+}
215+
216+#bp-webcam-avatar #avatar-crop-actions {
217+       float: left;
218+       margin: 0 0 20px 0;
219+       width: 58%;
220+}
221+
222+#avatar-crop-actions a.button {
223+       margin-top: 10px;
224+}
225+
226+#bp-webcam-avatar #avatar-crop-actions a.button {
227+       display: block;
228+       margin: 0 0 5px;
229+       padding: 4px 0;
230+       width: 100%;
231+}
232+
233 #avatar-to-crop img,
234 #avatar-crop-pane img,
235 #avatar-crop-pane canvas,
236@@ -152,19 +226,63 @@
237 }
238 
239 #bp-webcam-avatar video {
240-       float:left;
241-       width:450px;
242+       float: left;
243+       margin-bottom: 0;
244+       max-width: 100%;
245+       width:100%;
246 }
247 
248 #bp-webcam-avatar #avatar-crop-pane {
249        border: 2px dashed #bbb;
250+       clear: left;
251+       float: right;
252+       margin-bottom: 10px;
253+       overflow: hidden;
254+       max-width:38%;
255+       width: 38%;
256 }
257 
258+#avatar-crop-pane canvas {
259+       height: auto;
260+       width: 100%;
261+       max-width: 100%;
262+}
263+
264+@media screen and (max-width: 400px) {
265+       #bp-webcam-avatar .avatar-crop-management #avatar-crop-actions,
266+       #bp-webcam-avatar .avatar-crop-management #avatar-crop-pane {
267+               float: none;
268+               max-width: none;
269+       }
270+       #bp-webcam-avatar .avatar-crop-management #avatar-crop-actions  {
271+               width: auto;
272+       }
273+}
274+@media screen and (min-width: 801px) {
275+       #bp-webcam-avatar .avatar-crop-management {
276+               clear: none;
277+               float: right;
278+               max-width:31%;
279+               width: 31%;
280+       }
281+
282+       #bp-webcam-avatar .avatar-crop-management #avatar-crop-pane {
283+               float: none;
284+               max-width: 100%;
285+               width: 100%;
286+       }
287+
288+       #bp-webcam-avatar .avatar-crop-management #avatar-crop-actions {
289+               float: left;
290+               width: 100%;
291+       }
292+}
293+
294 /** Admin Profile **/
295 body.users_page_bp-profile-edit.modal-open #TB_ajaxContent,
296 body.profile_page_bp-profile-edit.modal-open #TB_ajaxContent {
297-       width:95%!important;
298-       height:95%!important;
299+       height: 95% !important;
300+       width: 95% !important;
301 }
302 
303 body.users_page_bp-profile-edit.modal-open #TB_ajaxContent p.updated,