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