From 9124aa2c87b3e9c794439ac953a71fa833cf81bf Mon Sep 17 00:00:00 2001 From: Maxim Voloshin Date: Wed, 19 Oct 2016 20:34:20 +0300 Subject: [PATCH 1/5] Adjusted CSS for side toolbar elements --- css/_contact_list.scss | 9 +++++++-- css/_side_toolbar_container.scss | 6 +++--- css/_variables.scss | 4 +++- css/components/_form-control.scss | 1 + css/themes/_light.scss | 19 +++++++++++++++---- 5 files changed, 29 insertions(+), 10 deletions(-) diff --git a/css/_contact_list.scss b/css/_contact_list.scss index 3554041e2..fa4f3d269 100644 --- a/css/_contact_list.scss +++ b/css/_contact_list.scss @@ -13,6 +13,11 @@ .clickable { cursor: pointer; } + + .icon-security, + .icon-security-locked { + font-size: 16px; + } } #contacts { @@ -22,8 +27,8 @@ list-style-type: none; text-align: left; white-space: nowrap; - color: #FFF; - font-size: 10pt; + color: $baseLight; + font-size: 18px; padding: 6px 10%; &:hover, diff --git a/css/_side_toolbar_container.scss b/css/_side_toolbar_container.scss index f6a11afe3..2e4e6d8eb 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; } /** @@ -71,9 +71,9 @@ * Main title size. */ div.title { - color: $defaultColor !important; - font-size: 16px; + color: $toolbarTitleColor !important; text-align: center; + font-size: $toolbarTitleFontSize; } /** diff --git a/css/_variables.scss b/css/_variables.scss index 117fb2a14..2263b86e9 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -30,6 +30,8 @@ $tooltipBg: rgba(0,0,0, 0.7); /** * Toolbar */ +$toolbarTitleColor: #FFFFFF; +$toolbarTitleFontSize: 24px; $toolbarBackground: rgba(0, 0, 0, 0.5); $toolbarSelectBackground: rgba(0, 0, 0, .6); $toolbarBadgeBackground: #165ECC; @@ -90,7 +92,7 @@ $notificationWidth: 215px; /** * Misc. */ -$borderRadius: 4px; +$borderRadius: 3px; $defaultWatermarkLink: '../images/watermark.png'; $sidebarWidth: 200px; diff --git a/css/components/_form-control.scss b/css/components/_form-control.scss index 227312162..fe0466e9c 100644 --- a/css/components/_form-control.scss +++ b/css/components/_form-control.scss @@ -24,6 +24,7 @@ } &__hint { + color: $baseLight; margin-top: 0; font-size: $hintFontSize; diff --git a/css/themes/_light.scss b/css/themes/_light.scss index 6062e8bb5..0ea80e1de 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; From cbc69433053071aaa52cf2882431baaba5e5bb3f Mon Sep 17 00:00:00 2001 From: Ilya Daynatovich Date: Thu, 10 Nov 2016 18:48:34 +0200 Subject: [PATCH 2/5] work on colors --- css/_contact_list.scss | 10 ++++++---- css/_side_toolbar_container.scss | 4 ++-- css/_toolbars.scss | 4 ++-- css/_variables.scss | 9 ++------- css/aui-components/dropdown.scss | 2 +- css/themes/_light.scss | 11 ++++++++++- 6 files changed, 23 insertions(+), 17 deletions(-) diff --git a/css/_contact_list.scss b/css/_contact_list.scss index fa4f3d269..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%; } @@ -23,13 +23,14 @@ #contacts { >li { - color: $defaultSideBarFontColor; + display: block; list-style-type: none; text-align: left; white-space: nowrap; color: $baseLight; - font-size: 18px; - padding: 6px 10%; + font-size: 16px; + padding: 0 10%; + height: 27px; &:hover, &:active { @@ -41,6 +42,7 @@ vertical-align: middle; margin: 0px; width: 100%; + line-height: 1.5em; text-overflow: ellipsis; overflow: hidden; } diff --git a/css/_side_toolbar_container.scss b/css/_side_toolbar_container.scss index 2e4e6d8eb..93fcbd9a2 100644 --- a/css/_side_toolbar_container.scss +++ b/css/_side_toolbar_container.scss @@ -64,14 +64,14 @@ * Titles and subtitles of inner containers. */ div.title, div.subTitle { - margin: 10px 0; + margin: 24px 0 11px; } /** * Main title size. */ div.title { - color: $toolbarTitleColor !important; + color: $toolbarTitleColor; text-align: center; font-size: $toolbarTitleFontSize; } 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 2263b86e9..3a752f9e6 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -31,7 +31,7 @@ $tooltipBg: rgba(0,0,0, 0.7); * Toolbar */ $toolbarTitleColor: #FFFFFF; -$toolbarTitleFontSize: 24px; +$toolbarTitleFontSize: 19px; $toolbarBackground: rgba(0, 0, 0, 0.5); $toolbarSelectBackground: rgba(0, 0, 0, .6); $toolbarBadgeBackground: #165ECC; @@ -94,7 +94,7 @@ $notificationWidth: 215px; */ $borderRadius: 3px; $defaultWatermarkLink: '../images/watermark.png'; -$sidebarWidth: 200px; +$sidebarWidth: 220px; $happySoftwareBackground: transparent; @@ -119,11 +119,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..af6362356 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; diff --git a/css/themes/_light.scss b/css/themes/_light.scss index 0ea80e1de..d2f200bd3 100644 --- a/css/themes/_light.scss +++ b/css/themes/_light.scss @@ -74,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: $baseLight; +$selectBg: $controlBackground; +$selectActiveBg: darken($controlBackground, 5%); +$selectActiveItemBg: darken($controlBackground, 10%); From d0127b879d0011aec9a0625a643a63dd0334d8f6 Mon Sep 17 00:00:00 2001 From: Ilya Daynatovich Date: Fri, 11 Nov 2016 18:30:27 +0200 Subject: [PATCH 3/5] fixed dropdown colors --- css/aui-components/dropdown.scss | 1 + css/themes/_light.scss | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/css/aui-components/dropdown.scss b/css/aui-components/dropdown.scss index af6362356..7117cba36 100644 --- a/css/aui-components/dropdown.scss +++ b/css/aui-components/dropdown.scss @@ -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 d2f200bd3..a903b7bf6 100644 --- a/css/themes/_light.scss +++ b/css/themes/_light.scss @@ -80,7 +80,7 @@ $splitterColor: #ccc; * Forms */ //dropdown -$selectFontColor: $baseLight; +$selectFontColor: $controlColor; $selectBg: $controlBackground; $selectActiveBg: darken($controlBackground, 5%); -$selectActiveItemBg: darken($controlBackground, 10%); +$selectActiveItemBg: darken($controlBackground, 20%); From 1d1d8defdaf3e3fd666583a551db8e5742aaebbb Mon Sep 17 00:00:00 2001 From: Ilya Daynatovich Date: Fri, 11 Nov 2016 18:52:36 +0200 Subject: [PATCH 4/5] Updated calculation of offset --- css/_filmstrip.scss | 10 +++++----- css/_toastr.scss | 3 ++- css/_variables.scss | 4 ++++ 3 files changed, 11 insertions(+), 6 deletions(-) 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/_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/_variables.scss b/css/_variables.scss index 3a752f9e6..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. From d2ef94a7eb215187d96e0178155b21b8d920d728 Mon Sep 17 00:00:00 2001 From: Ilya Daynatovich Date: Mon, 14 Nov 2016 11:02:11 +0200 Subject: [PATCH 5/5] Fix problem with hint --- css/components/_form-control.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/css/components/_form-control.scss b/css/components/_form-control.scss index fe0466e9c..227312162 100644 --- a/css/components/_form-control.scss +++ b/css/components/_form-control.scss @@ -24,7 +24,6 @@ } &__hint { - color: $baseLight; margin-top: 0; font-size: $hintFontSize;