diff options
| author | Sam Potts <sam@potts.es> | 2019-06-20 23:50:46 +1000 |
|---|---|---|
| committer | Sam Potts <sam@potts.es> | 2019-06-20 23:50:46 +1000 |
| commit | 2e40b91ec1aabf33e945cba66fbcdd9b7aa53ba7 (patch) | |
| tree | 91f42276e31e6ec24cc8ef5bb17201dc5f07efc3 /demo/src/sass/settings | |
| parent | 97d9228bed639f0c20b1f21468dd3f181af6b262 (diff) | |
| download | plyr-2e40b91ec1aabf33e945cba66fbcdd9b7aa53ba7.tar.lz plyr-2e40b91ec1aabf33e945cba66fbcdd9b7aa53ba7.tar.xz plyr-2e40b91ec1aabf33e945cba66fbcdd9b7aa53ba7.zip | |
Styling tweaks for demo
Diffstat (limited to 'demo/src/sass/settings')
| -rw-r--r-- | demo/src/sass/settings/colors.scss | 38 | ||||
| -rw-r--r-- | demo/src/sass/settings/cosmetic.scss | 2 | ||||
| -rw-r--r-- | demo/src/sass/settings/plyr.scss | 3 |
3 files changed, 30 insertions, 13 deletions
diff --git a/demo/src/sass/settings/colors.scss b/demo/src/sass/settings/colors.scss index 61363e67..308e6757 100644 --- a/demo/src/sass/settings/colors.scss +++ b/demo/src/sass/settings/colors.scss @@ -2,27 +2,41 @@ // Colors // ========================================================================== -// Greyscale -$gray-dark: #343f4a; -$gray: #55646b; +// Grayscale +$color-gray-9: hsl(210, 15%, 16%); +$color-gray-8: lighten($color-gray-9, 9%); +$color-gray-7: lighten($color-gray-8, 9%); +$color-gray-6: lighten($color-gray-7, 9%); +$color-gray-5: lighten($color-gray-6, 9%); +$color-gray-4: lighten($color-gray-5, 9%); +$color-gray-3: lighten($color-gray-4, 9%); +$color-gray-2: lighten($color-gray-3, 9%); +$color-gray-1: lighten($color-gray-2, 9%); +$color-gray-0: lighten($color-gray-1, 9%); -// Text -$color-text: #fff; +// Branding +$color-brand-primary: hsl(198, 100%, 50%); -// Plyr -$color-brand-primary: #1aafff; // #7bc47f +// Text +$color-text: $color-gray-7; +$color-headings: $color-brand-primary; // Brands $color-twitter: #4baaf4; // Elements -$color-link: #fff; -$color-background: $color-brand-primary; +$color-link: $color-brand-primary; + +// Background +$color-background-from: hsl(198, 100%, 94%); +$color-background-to: hsl(198, 100%, 98%); // Buttons -$color-button-background: #fff; -$color-button-text: $gray; -$color-button-text-hover: $gray-dark; +$color-button-background: $color-brand-primary; +$color-button-text: #fff; +$color-button-background-hover: hsl(198, 100%, 55%); +$color-button-count-background: #fff; +$color-button-count-text: $color-gray-6; // Focus $tab-focus-default-color: #fff; diff --git a/demo/src/sass/settings/cosmetic.scss b/demo/src/sass/settings/cosmetic.scss index d750efe2..84ff819f 100644 --- a/demo/src/sass/settings/cosmetic.scss +++ b/demo/src/sass/settings/cosmetic.scss @@ -9,4 +9,4 @@ $arrow-size: 5px; $border-radius-base: 4px; // Background -$page-background: linear-gradient(to left top, lighten($color-background, 10%), darken($color-background, 20%)); +$page-background: linear-gradient(to left top, $color-background-from, $color-background-to); diff --git a/demo/src/sass/settings/plyr.scss b/demo/src/sass/settings/plyr.scss index ae6be636..edd917c4 100644 --- a/demo/src/sass/settings/plyr.scss +++ b/demo/src/sass/settings/plyr.scss @@ -14,6 +14,9 @@ $plyr-font-size-badges: 9px; // Other $plyr-font-smoothing: true; +// Colors +$plyr-color-main: $color-brand-primary; + // Captions $plyr-font-size-captions-base: $plyr-font-size-base; $plyr-font-size-captions-small: $plyr-font-size-small; |