fix(design): tweak scrollbar colors (#687)
This commit is contained in:
parent
2569b59b32
commit
bfa37f5105
|
@ -93,10 +93,3 @@
|
||||||
|
|
||||||
--compose-button-halo: #{rgba(255, 255, 255, 0.1)};
|
--compose-button-halo: #{rgba(255, 255, 255, 0.1)};
|
||||||
}
|
}
|
||||||
|
|
||||||
$scrollbar-face: #{lighten($main-theme-color, 18%)} !default;
|
|
||||||
$scrollbar-face-hover: #{lighten($main-theme-color, 20%)} !default;
|
|
||||||
$scrollbar-face-active: #{lighten($main-theme-color, 15%)} !default;
|
|
||||||
$scrollbar-track: #{darken($body-bg-color, 3%)} !default;
|
|
||||||
|
|
||||||
@import "_scrollbars.scss";
|
|
|
@ -30,10 +30,3 @@
|
||||||
--compose-autosuggest-item-active: #{lighten($main-bg-color, 15%)};
|
--compose-autosuggest-item-active: #{lighten($main-bg-color, 15%)};
|
||||||
--compose-autosuggest-outline: #{lighten($border-color, 20%)};
|
--compose-autosuggest-outline: #{lighten($border-color, 20%)};
|
||||||
}
|
}
|
||||||
|
|
||||||
$scrollbar-face: #{lighten($main-theme-color, 5%)};
|
|
||||||
$scrollbar-face-hover: #{lighten($main-theme-color, 7%)};
|
|
||||||
$scrollbar-face-active: #{lighten($main-theme-color, 3%)};
|
|
||||||
$scrollbar-track: #{darken($body-bg-color, 3%)};
|
|
||||||
|
|
||||||
@import "_scrollbars.scss";
|
|
|
@ -0,0 +1,6 @@
|
||||||
|
$scrollbar-face: #{lighten($main-theme-color, 5%)} !default;
|
||||||
|
$scrollbar-face-hover: #{lighten($main-theme-color, 7%)} !default;
|
||||||
|
$scrollbar-face-active: #{lighten($main-theme-color, 3%)} !default;
|
||||||
|
$scrollbar-track: #{lighten($body-bg-color, 7%)} !default;
|
||||||
|
|
||||||
|
@import "_scrollbars.scss";
|
|
@ -11,3 +11,4 @@ $focus-outline: lighten($main-theme-color, 30%);
|
||||||
$compose-background: lighten($main-theme-color, 32%);
|
$compose-background: lighten($main-theme-color, 32%);
|
||||||
|
|
||||||
@import "_base.scss";
|
@import "_base.scss";
|
||||||
|
@import "_light_scrollbars.scss";
|
|
@ -0,0 +1,6 @@
|
||||||
|
$scrollbar-face: #{lighten($main-theme-color, 18%)} !default;
|
||||||
|
$scrollbar-face-hover: #{lighten($main-theme-color, 20%)} !default;
|
||||||
|
$scrollbar-face-active: #{lighten($main-theme-color, 15%)} !default;
|
||||||
|
$scrollbar-track: #{darken($body-bg-color, 3%)} !default;
|
||||||
|
|
||||||
|
@import "_scrollbars.scss";
|
|
@ -11,3 +11,4 @@ $focus-outline: lighten($main-theme-color, 15%);
|
||||||
$compose-background: lighten($main-theme-color, 17%);
|
$compose-background: lighten($main-theme-color, 17%);
|
||||||
|
|
||||||
@import "_base.scss";
|
@import "_base.scss";
|
||||||
|
@import "_light_scrollbars.scss";
|
|
@ -12,6 +12,7 @@ $compose-background: lighten($main-theme-color, 32%);
|
||||||
|
|
||||||
@import "_base.scss";
|
@import "_base.scss";
|
||||||
@import "_dark.scss";
|
@import "_dark.scss";
|
||||||
|
@import "_dark_scrollbars.scss";
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--settings-list-item-text: #{$main-text-color};
|
--settings-list-item-text: #{$main-text-color};
|
||||||
|
|
|
@ -11,3 +11,4 @@ $focus-outline: lighten($main-theme-color, 30%);
|
||||||
$compose-background: lighten($main-theme-color, 32%);
|
$compose-background: lighten($main-theme-color, 32%);
|
||||||
|
|
||||||
@import "_base.scss";
|
@import "_base.scss";
|
||||||
|
@import "_light_scrollbars.scss";
|
||||||
|
|
|
@ -13,6 +13,7 @@ $compose-background: lighten($main-theme-color, 52%);
|
||||||
|
|
||||||
@import "_base.scss";
|
@import "_base.scss";
|
||||||
@import "_dark.scss";
|
@import "_dark.scss";
|
||||||
|
@import "_dark_scrollbars.scss";
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--nav-bg: #{lighten($body-bg-color, 10%)};
|
--nav-bg: #{lighten($body-bg-color, 10%)};
|
||||||
|
|
|
@ -16,3 +16,4 @@ $scrollbar-face-hover: #{lighten($main-theme-color, 14%)};
|
||||||
$scrollbar-face-active: #{lighten($main-theme-color, 10%)};
|
$scrollbar-face-active: #{lighten($main-theme-color, 10%)};
|
||||||
|
|
||||||
@import "_base.scss";
|
@import "_base.scss";
|
||||||
|
@import "_light_scrollbars.scss";
|
||||||
|
|
|
@ -11,3 +11,4 @@ $focus-outline: lighten($main-theme-color, 30%);
|
||||||
$compose-background: lighten($main-theme-color, 32%);
|
$compose-background: lighten($main-theme-color, 32%);
|
||||||
|
|
||||||
@import "_base.scss";
|
@import "_base.scss";
|
||||||
|
@import "_light_scrollbars.scss";
|
|
@ -11,3 +11,4 @@ $focus-outline: lighten($main-theme-color, 30%);
|
||||||
$compose-background: lighten($main-theme-color, 32%);
|
$compose-background: lighten($main-theme-color, 32%);
|
||||||
|
|
||||||
@import "_base.scss";
|
@import "_base.scss";
|
||||||
|
@import "_light_scrollbars.scss";
|
||||||
|
|
|
@ -12,3 +12,4 @@ $compose-background: darken($main-theme-color, 12%);
|
||||||
|
|
||||||
@import "_base.scss";
|
@import "_base.scss";
|
||||||
@import "_dark.scss";
|
@import "_dark.scss";
|
||||||
|
@import "_dark_scrollbars.scss";
|
|
@ -13,6 +13,7 @@ $compose-background: lighten($main-theme-color, 52%);
|
||||||
|
|
||||||
@import "_base.scss";
|
@import "_base.scss";
|
||||||
@import "_dark.scss";
|
@import "_dark.scss";
|
||||||
|
@import "_dark_scrollbars.scss";
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--nav-bg: #{lighten($body-bg-color, 10%)};
|
--nav-bg: #{lighten($body-bg-color, 10%)};
|
||||||
|
|
|
@ -13,6 +13,7 @@ $compose-background: lighten($main-theme-color, 52%);
|
||||||
|
|
||||||
@import "_base.scss";
|
@import "_base.scss";
|
||||||
@import "_dark.scss";
|
@import "_dark.scss";
|
||||||
|
@import "_dark_scrollbars.scss";
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--nav-bg: #{lighten($body-bg-color, 10%)};
|
--nav-bg: #{lighten($body-bg-color, 10%)};
|
||||||
|
|
|
@ -11,3 +11,4 @@ $focus-outline: lighten($main-theme-color, 30%);
|
||||||
$compose-background: lighten($main-theme-color, 32%);
|
$compose-background: lighten($main-theme-color, 32%);
|
||||||
|
|
||||||
@import "_base.scss";
|
@import "_base.scss";
|
||||||
|
@import "_light_scrollbars.scss";
|
||||||
|
|
|
@ -11,3 +11,4 @@ $focus-outline: lighten($main-theme-color, 50%);
|
||||||
$compose-background: lighten($main-theme-color, 52%);
|
$compose-background: lighten($main-theme-color, 52%);
|
||||||
|
|
||||||
@import "_base.scss";
|
@import "_base.scss";
|
||||||
|
@import "_light_scrollbars.scss";
|
|
@ -11,8 +11,14 @@ $toast-bg: #333;
|
||||||
$focus-outline: lighten($main-theme-color, 50%);
|
$focus-outline: lighten($main-theme-color, 50%);
|
||||||
$compose-background: lighten($main-theme-color, 52%);
|
$compose-background: lighten($main-theme-color, 52%);
|
||||||
|
|
||||||
|
// override scrollbar color to make it a bit darker
|
||||||
|
$scrollbar-face: #{lighten($main-theme-color, 3%)};
|
||||||
|
$scrollbar-face-hover: #{lighten($main-theme-color, 5%)};
|
||||||
|
$scrollbar-face-active: #{lighten($main-theme-color, 1%)};
|
||||||
|
|
||||||
@import "_base.scss";
|
@import "_base.scss";
|
||||||
@import "_dark.scss";
|
@import "_dark.scss";
|
||||||
|
@import "_dark_scrollbars.scss";
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--nav-bg: #{lighten($body-bg-color, 10%)};
|
--nav-bg: #{lighten($body-bg-color, 10%)};
|
||||||
|
|
Loading…
Reference in New Issue