diff --git a/css/_contact_list.scss b/css/_contact_list.scss index 3554041e2..7a69c733b 100644 --- a/css/_contact_list.scss +++ b/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; - font-size: 10pt; - padding: 6px 10%; + color: $baseLight; + font-size: 16px; + 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; } diff --git a/css/_filmstrip.scss b/css/_filmstrip.scss index 3fbbcd7f5..13e0edb40 100644 --- a/css/_filmstrip.scss +++ b/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; diff --git a/css/_side_toolbar_container.scss b/css/_side_toolbar_container.scss index f6a11afe3..93fcbd9a2 100644 --- a/css/_side_toolbar_container.scss +++ b/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; - font-size: 16px; + color: $toolbarTitleColor; text-align: center; + font-size: $toolbarTitleFontSize; } /** diff --git a/css/_toastr.scss b/css/_toastr.scss index f72fcabca..b657322a3 100644 --- a/css/_toastr.scss +++ b/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 * { diff --git a/css/_toolbars.scss b/css/_toolbars.scss index 206e0fdd2..7b7216fe5 100644 --- a/css/_toolbars.scss +++ b/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; } } diff --git a/css/_variables.scss b/css/_variables.scss index 117fb2a14..054e596b1 100644 --- a/css/_variables.scss +++ b/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 diff --git a/css/aui-components/dropdown.scss b/css/aui-components/dropdown.scss index e78f42619..7117cba36 100644 --- a/css/aui-components/dropdown.scss +++ b/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; } } diff --git a/css/themes/_light.scss b/css/themes/_light.scss index 6062e8bb5..a903b7bf6 100644 --- a/css/themes/_light.scss +++ b/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; @@ -63,4 +74,13 @@ $popoverFontColor: #ffffff; $popupMenuSelectedItemBackground: rgba(256, 256, 256, .2); // Toolbar -$splitterColor: #ccc; \ No newline at end of file +$splitterColor: #ccc; + +/** + * Forms + */ +//dropdown +$selectFontColor: $controlColor; +$selectBg: $controlBackground; +$selectActiveBg: darken($controlBackground, 5%); +$selectActiveItemBg: darken($controlBackground, 20%);