Ticket #6290: 6290.css.01

Index: src/bp-core/css/avatar.css
===================================================================
--- src/bp-core/css/avatar.css  (revision 9784)
+++ src/bp-core/css/avatar.css  (working copy)
@@ -1,6 +1,6 @@
 div.bp-avatar-status {
-       clear:both;
-       margin:1em 0;
+       clear: both;
+       margin: 1em 0;
 }
 
 div.bp-avatar-status p.updated {
@@ -21,47 +21,47 @@
 }
 
 .progress {
+       background: none;
+       border: 1px solid #d1d1d1;
        float: right;
        height: 22px;
+       line-height: 2em;
        margin: 6px 10px 0 0;
-       width: 200px;
-       line-height: 2em;
+       margin-bottom: 2px;
        padding: 0;
        overflow: hidden;
-       margin-bottom: 2px;
-       border: 1px solid #d1d1d1;
-       background: none;
+       width: 200px;
 }
 
 .bar {
-       z-index: 9;
+       background-color: #c3ff88;
        width: 0;
        height: 100%;
-       background-color: #c3ff88;
+       z-index: 9;
 }
 
 .bp-uploader-progress div.error {
-       font-size: 90%;
-       display: block;
-       padding: 10px 15px;
        background-color: #fdc;
        border: 1px solid #a00;
        color: #800;
+       display: block;
+       font-size: 90%;
+       padding: 10px 15px;
 }
 
 #bp-uploader-warning, #bp-webcam-message p.warning {
-       margin:1em 0;
-       font-size: 90%;
-       display: block;
-       padding: 10px 15px;
        background-color: #ffec8b;
        border: 1px solid #fc0;
        color: #440;
+       display: block;
+       font-size: 90%;
+       margin: 1em 0;
+       padding: 10px 15px;
 }
 
 div.bp-avatar-nav {
-       clear:both;
        background: transparent;
+       clear: both;
        margin: 10px 0 10px;
        overflow: hidden;
 }
@@ -72,22 +72,22 @@
 }
 
 .bp-avatar-nav .avatar-nav-items li.avatar-nav-item {
-       float: left;
-       margin: 0;
-       list-style: none;
- }
+ float: left;
+ margin: 0;
+ list-style: none;
+}
 
 .avatar-nav-items li a {
-       display: block;
-       padding: 5px 10px;
-       text-decoration: none;
+ display: block;
+ padding: 5px 10px;
+ text-decoration: none;
 }
 
 .avatar-nav-items li.current a {
        background-color: #eee;
        color: #555;
-       opacity: .8;
        font-weight: bold;
+       opacity: 0.8;
 }
 
 #drag-drop-area {
@@ -100,21 +100,30 @@
 }
 
 .drag-drop-inside p {
-       display:none;
+       display: none;
 }
 
 .drag-drop-inside p.drag-drop-buttons {
-       margin-top:80px;
+       margin-top: 80px;
        text-align: center;
 }
+
 .drag-drop .drag-drop-inside p.drag-drop-buttons {
-       margin:auto;
+       margin: auto;
        text-align: auto;
 }
 
+.drag-drop #drag-drop-area {
+       display: table;
+       height: 100%;
+       width: 100%;
+}
+
 .drag-drop .drag-drop-inside {
-       margin: 70px auto 0;
-       width: 250px;
+       display: table-cell;
+       padding: 40px 0;
+       text-align: center;
+       vertical-align: middle;
 }
 
 .drag-drop .drag-drop-inside p, .drag-drop-inside p.drag-drop-buttons {
@@ -128,14 +137,13 @@
        text-align: center;
 }
 
+.drag-drop-inside p.drag-drop-info {margin-top: 0;}
+
 #avatar-to-crop {
        float: left;
        margin: 0 20px 20px 0;
        text-align: left;
 }
-#avatar-crop-pane {
-       overflow: hidden;
-}
 
 #avatar-crop-actions {
        margin: 20px 0;
@@ -152,8 +160,8 @@
 }
 
 #bp-webcam-avatar video {
-       float:left;
-       width:450px;
+       float: left;
+       width: 450px;
 }
 
 #bp-webcam-avatar #avatar-crop-pane {
@@ -163,8 +171,8 @@
 /** Admin Profile **/
 body.users_page_bp-profile-edit.modal-open #TB_ajaxContent,
 body.profile_page_bp-profile-edit.modal-open #TB_ajaxContent {
-       width:95%!important;
-       height:95%!important;
+       height: 95% !important;
+       width: 95% !important;
 }
 
 body.users_page_bp-profile-edit.modal-open #TB_ajaxContent p.updated,