Skip to:
Content

BuddyPress.org

Ticket #6290: 6290.css.01

File 6290.css.01, 3.3 KB (added by hnla, 4 years ago)

Update avatar.css: ad vertical centering for crop pane upload message/button. Minor re-factoring to ruleset formatting.

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,21 +100,30 @@
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@@ -128,14 +137,13 @@
145        text-align: center;
146 }
147 
148+.drag-drop-inside p.drag-drop-info {margin-top: 0;}
149+
150 #avatar-to-crop {
151        float: left;
152        margin: 0 20px 20px 0;
153        text-align: left;
154 }
155-#avatar-crop-pane {
156-       overflow: hidden;
157-}
158 
159 #avatar-crop-actions {
160        margin: 20px 0;
161@@ -152,8 +160,8 @@
162 }
163 
164 #bp-webcam-avatar video {
165-       float:left;
166-       width:450px;
167+       float: left;
168+       width: 450px;
169 }
170 
171 #bp-webcam-avatar #avatar-crop-pane {
172@@ -163,8 +171,8 @@
173 /** Admin Profile **/
174 body.users_page_bp-profile-edit.modal-open #TB_ajaxContent,
175 body.profile_page_bp-profile-edit.modal-open #TB_ajaxContent {
176-       width:95%!important;
177-       height:95%!important;
178+       height: 95% !important;
179+       width: 95% !important;
180 }
181 
182 body.users_page_bp-profile-edit.modal-open #TB_ajaxContent p.updated,