Merge pull request #1139 from BeatC/FIX-adjust-branding1

Fix visual bugs in sidebar

css/_contact_list.scss

@@ -5,7 +5,7 @@
         font-size: 12px;
         bottom: 0px;
         margin: 0;
-        margin-top: 16px;
+        margin-top: 12px;
         padding: 0px;
         width: 100%;
     }
@@ -13,18 +13,24 @@
     .clickable {
         cursor: pointer;
     }
+
+    .icon-security,
+    .icon-security-locked {
+        font-size: 16px;
+    }
 }
 
 #contacts {
 
     >li {
-        color: $defaultSideBarFontColor;
+        display: block;
         list-style-type: none;
         text-align: left;
         white-space: nowrap;
-        color: #FFF;
+        color: $baseLight;
-        font-size: 10pt;
+        font-size: 16px;
-        padding: 6px 10%;
+        padding: 0 10%;
+        height: 27px;
 
         &:hover,
         &:active {
@@ -36,6 +42,7 @@
             vertical-align: middle;
             margin: 0px;
             width: 100%;
+            line-height: 1.5em;
             text-overflow: ellipsis;
             overflow: hidden;
         }

css/_filmstrip.scss

@@ -18,7 +18,7 @@
         flex-wrap: nowrap;
         position: relative;
         z-index: 1;                     // Set z-index to make element visible
-        width: 17px;
+        width: $hideFilmstripButtonWidth;
 
         button {
             font-size: 14px;
@@ -53,7 +53,7 @@
         padding-left: 17px;
         bottom: 0;
         width:auto;
-        border: 2px solid transparent;
+        border: $thumbnailsBorder solid transparent;
         z-index: 5;
         transition: bottom 2s;
         overflow: visible !important;
@@ -67,7 +67,7 @@
             display: none;
             position: relative;
             background-size: contain;
-            border: 2px solid transparent;
+            border: $thumbnailVideoBorder solid transparent;
             border-radius:1px;
             margin: 0 $thumbnailVideoMargin;
 
@@ -84,7 +84,7 @@
                 -webkit-animation-name: greyPulse;
                 -webkit-animation-duration: 2s;
                 -webkit-animation-iteration-count: 1;
-                border: 2px solid $videoThumbnailSelected !important;
+                border: $thumbnailVideoBorder solid $videoThumbnailSelected !important;
                 box-shadow: inset 0 0 3px $videoThumbnailSelected,
                 0 0 3px $videoThumbnailSelected !important;
             }
@@ -98,7 +98,7 @@
             */
             &:hover {
                 cursor: hand;
-                border: 2px solid $videoThumbnailHovered;
+                border: $thumbnailVideoBorder solid $videoThumbnailHovered;
                 box-shadow: inset 0 0 3px $videoThumbnailHovered,
                 0 0 3px $videoThumbnailHovered;
 

css/_side_toolbar_container.scss

@@ -16,7 +16,7 @@
      * Labels inside the side panel.
      */
     label {
-        color: $defaultColor;
+        color: $baseLight;
     }
 
     /**
@@ -64,16 +64,16 @@
          * Titles and subtitles of inner containers.
          */
         div.title, div.subTitle {
-            margin: 10px 0;
+            margin: 24px 0 11px;
         }
 
         /**
          * Main title size.
          */
         div.title {
-            color: $defaultColor !important;
+            color: $toolbarTitleColor;
-            font-size: 16px;
             text-align: center;
+            font-size: $toolbarTitleFontSize;
         }
 
         /**

css/_toastr.scss

@@ -92,8 +92,9 @@
 }
 
 #toast-container.notification-bottom-right {
+  $videoOffset: 2 * ($thumbnailVideoMargin + $thumbnailsBorder) + $thumbnailVideoBorder;
   bottom: 135px;
-  right: 28px;
+  right: $hideFilmstripButtonWidth + $videoOffset;
 }
 
 #toast-container * {

css/_toolbars.scss

@@ -252,7 +252,7 @@ a.button>#avatar {
  */
 @include keyframes(slideInExt) {
     from { width: 0px; }
-    to   { width: 200px; } // TO FIX: Make this value a percentage.
+    to   { width: $sidebarWidth; } // TO FIX: Make this value a percentage.
 }
 
 .slideInExt {
@@ -260,7 +260,7 @@ a.button>#avatar {
 }
 
 @include keyframes(slideOutExt) {
-  from { width: 200px; } // TO FIX: Make this value a percentage.
+  from { width: $sidebarWidth; } // TO FIX: Make this value a percentage.
   to   { width: 0px; }
 }
 

css/_variables.scss

@@ -17,6 +17,10 @@ $thumbnailToolbarHeight: 22px;
 $thumbnailIndicatorBorder: 0px;
 $thumbnailIndicatorSize: $thumbnailToolbarHeight;
 $thumbnailVideoMargin: 2px;
+$thumbnailsBorder: 2px;
+$thumbnailVideoBorder: 2px;
+$hideFilmstripButtonWidth: 17px;
+
 
 /**
  * Color variables.
@@ -30,6 +34,8 @@ $tooltipBg: rgba(0,0,0, 0.7);
 /**
  * Toolbar
  */
+$toolbarTitleColor: #FFFFFF;
+$toolbarTitleFontSize: 19px;
 $toolbarBackground: rgba(0, 0, 0, 0.5);
 $toolbarSelectBackground: rgba(0, 0, 0, .6);
 $toolbarBadgeBackground: #165ECC;
@@ -90,9 +96,9 @@ $notificationWidth: 215px;
 /**
  * Misc.
  */
-$borderRadius: 4px;
+$borderRadius: 3px;
 $defaultWatermarkLink: '../images/watermark.png';
-$sidebarWidth: 200px;
+$sidebarWidth: 220px;
 
 $happySoftwareBackground: transparent;
 
@@ -117,11 +123,6 @@ $defaultDarkFontColor: #000;
 /**
  * Forms
  */
-//dropdown
-$selectFontColor: $defaultLightFontColor;
-$selectBg: $defaultBackground;
-$selectActiveBg: $defaultBackground;
-$selectActiveItemBg: $defaultDarkColor;
 //inputs
 $inputControlEmColor: #f29424;
 //buttons

css/aui-components/dropdown.scss

@@ -1,6 +1,6 @@
-
 .select2-container.aui-select2-container {
     background-color: transparent !important;
+    margin-top: 2px;
 
     a.select2-choice {
         height: 28px !important;
@@ -55,6 +55,7 @@
 
             .select2-result-label{
                 font-size: 12px;
+                color: $selectFontColor !important;
                 line-height: 20px;
             }
         }

css/themes/_light.scss

@@ -1,3 +1,14 @@
+/**
+ * Base
+ */
+$baseLight: #FFFFFF;
+
+/**
+* Controls
+*/
+$controlBackground: $baseLight;
+$controlColor: #333333;
+
 /**
 * Buttons
 */
@@ -17,7 +28,7 @@ $buttonLinkColor: #0090e8;
 
 $primaryButtonBackground: #3572b0;
 $primaryButtonHoverBackground: #2a67a5;
-$primaryButtonColor: #fff;
+$primaryButtonColor: $baseLight;
 $primaryButtonFontWeight: 400;
 
 $buttonShadowColor: #192d4f;
@@ -38,14 +49,14 @@ $uploadConnectionIconColor: #ffa800;
  **/
 $auiDialogColor: #333;
 $auiDialogBg: #f5f5f5;
-$auiDialogContentBg: #fff;
+$auiDialogContentBg: $baseLight;
 $auiBorderColor: #ccc;
 $dialogTitleFontWeight: 400;
 
 // Main controls
-$inputBackground: #fff;
+$inputBackground: $controlBackground;
 $inputBorderColor: #ccc;
-$inputColor: #333;
+$inputColor: $controlColor;
 $placeHolderColor: #a7a7a7;
 $readOnlyInputColor: #a7a7a7;
 $defaultDarkSelectionColor: #ccc;
@@ -64,3 +75,12 @@ $popupMenuSelectedItemBackground: rgba(256, 256, 256, .2);
 
 // Toolbar
 $splitterColor: #ccc;
+
+/**
+ * Forms
+ */
+//dropdown
+$selectFontColor: $controlColor;
+$selectBg: $controlBackground;
+$selectActiveBg: darken($controlBackground, 5%);
+$selectActiveItemBg: darken($controlBackground, 20%);