data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

fix(design): tweak scrollbar colors (#687)

Browse source
This commit is contained in:
Nolan Lawson 2018-11-24 09:33:07 -08:00 committed by GitHub
parent 2569b59b32
commit bfa37f5105
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 35 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
scss/themes/_base.scss
View file

@ -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";

7
scss/themes/_dark.scss
View file

@ -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";

6
scss/themes/_dark_scrollbars.scss Normal file
View file

@ -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";

1
scss/themes/_default.scss
View file

@ -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";

6
scss/themes/_light_scrollbars.scss Normal file
View file

@ -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";

1
scss/themes/_offline.scss
View file

@ -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";

1
scss/themes/cobalt.scss
View file

@ -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};

1
scss/themes/gecko.scss
View file

@ -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";

1
scss/themes/hacker.scss
View file

@ -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%)};

1
scss/themes/hotpants.scss
View file

@ -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";

1
scss/themes/majesty.scss
View file

@ -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";

1
scss/themes/oaken.scss
View file

@ -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";

1
scss/themes/ozark.scss
View file

@ -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";

1
scss/themes/punk.scss
View file

@ -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%)};

1
scss/themes/riot.scss
View file

@ -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%)};

1
scss/themes/scarlet.scss
View file

@ -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";

1
scss/themes/seafoam.scss
View file

@ -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";

6
scss/themes/sorcery.scss
View file

@ -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%)};