| 1 | Index: 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 | +}
|
|---|
![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
