Ticket #6290: 6290.css.02

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,24 +100,34 @@
 }
 
 .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 {
+.drag-drop .drag-drop-inside p,
+.drag-drop-inside p.drag-drop-buttons {
        display: block;
 }
 
@@ -128,19 +138,83 @@
        text-align: center;
 }
 
+.drag-drop-inside p.drag-drop-info {margin-top: 0;}
+
 #avatar-to-crop {
        float: left;
-       margin: 0 20px 20px 0;
+       margin: 0 0 20px 0;
+       /*max-width: 60%;*/
        text-align: left;
 }
+
+#avatar-to-crop .jcrop-holder {
+       float: left;
+}
+
+.avatar-crop-management {
+       clear: left;
+       overflow: hidden;
+       padding-top: 20px;
+       text-align: center;
+}
+
+@media screen and (min-width: 1008px) {
+       .avatar-crop-management {
+               clear: none;
+               float: right;
+               padding-top: 0;
+               text-align: center;
+               width: 30%;
+       }
+}
+
+#bp-webcam-avatar .avatar-crop-management {
+       clear: none;
+       float: none;
+       overflow: visible;
+       padding-top: 0;
+       width: auto;
+}
+
 #avatar-crop-pane {
+       margin: 0 auto;
        overflow: hidden;
 }
 
-#avatar-crop-actions {
-       margin: 20px 0;
+#bp-webcam-avatar #avatar-to-crop {
+       border: 1px solid #eee;
+       max-width: 100%;
+       width: 100%;
 }
 
+@media screen and (min-width: 801px) {
+       #bp-webcam-avatar #avatar-to-crop {
+               max-width: 64%;
+               width: 64%;
+       }
+}
+
+#avatar-crop-actions a {
+       display: block;
+}
+
+#bp-webcam-avatar #avatar-crop-actions {
+       float: left;
+       margin: 0 0 20px 0;
+       width: 58%;
+}
+
+#avatar-crop-actions a.button {
+       margin-top: 10px;
+}
+
+#bp-webcam-avatar #avatar-crop-actions a.button {
+       display: block;
+       margin: 0 0 5px;
+       padding: 4px 0;
+       width: 100%;
+}
+
 #avatar-to-crop img,
 #avatar-crop-pane img,
 #avatar-crop-pane canvas,
@@ -152,19 +226,63 @@
 }
 
 #bp-webcam-avatar video {
-       float:left;
-       width:450px;
+       float: left;
+       margin-bottom: 0;
+       max-width: 100%;
+       width:100%;
 }
 
 #bp-webcam-avatar #avatar-crop-pane {
        border: 2px dashed #bbb;
+       clear: left;
+       float: right;
+       margin-bottom: 10px;
+       overflow: hidden;
+       max-width:38%;
+       width: 38%;
 }
 
+#avatar-crop-pane canvas {
+       height: auto;
+       width: 100%;
+       max-width: 100%;
+}
+
+@media screen and (max-width: 400px) {
+       #bp-webcam-avatar .avatar-crop-management #avatar-crop-actions,
+       #bp-webcam-avatar .avatar-crop-management #avatar-crop-pane {
+               float: none;
+               max-width: none;
+       }
+       #bp-webcam-avatar .avatar-crop-management #avatar-crop-actions  {
+               width: auto;
+       }
+}
+@media screen and (min-width: 801px) {
+       #bp-webcam-avatar .avatar-crop-management {
+               clear: none;
+               float: right;
+               max-width:31%;
+               width: 31%;
+       }
+
+       #bp-webcam-avatar .avatar-crop-management #avatar-crop-pane {
+               float: none;
+               max-width: 100%;
+               width: 100%;
+       }
+
+       #bp-webcam-avatar .avatar-crop-management #avatar-crop-actions {
+               float: left;
+               width: 100%;
+       }
+}
+
 /** 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,