From b907cda562ba88da6dd00438ed0a490289a134d6 Mon Sep 17 00:00:00 2001 From: Patrick Kontschak Date: Wed, 22 Jan 2020 06:23:52 +0100 Subject: [PATCH] Add "Tomorrow Night" themes (#175) * add custom properties for progress bar colors * add Tomorrow themes * update existing themes with custom progress props --- src/components/GameDetail/GameProgress.vue | 8 +++--- src/styles/_inputs.scss | 22 +++++++-------- src/styles/_themes.scss | 4 ++- src/styles/themes/blue.scss | 3 +++ src/styles/themes/city-lights.scss | 3 +++ src/styles/themes/dark.scss | 3 +++ src/styles/themes/default.scss | 3 +++ src/styles/themes/hyrule.scss | 3 +++ src/styles/themes/tomorrow-night-bright.scss | 27 +++++++++++++++++++ src/styles/themes/tomorrow-night.scss | 27 +++++++++++++++++++ src/themes.js | 28 ++++++++++++++++---- 11 files changed, 110 insertions(+), 21 deletions(-) create mode 100644 src/styles/themes/tomorrow-night-bright.scss create mode 100644 src/styles/themes/tomorrow-night.scss diff --git a/src/components/GameDetail/GameProgress.vue b/src/components/GameDetail/GameProgress.vue index 3f2f50cf..f629fc13 100644 --- a/src/components/GameDetail/GameProgress.vue +++ b/src/components/GameDetail/GameProgress.vue @@ -83,20 +83,20 @@ export default { display: block; width: 140px; text-align: center; - color: var(--accent-color); + color: var(--progress-primary-color); } &.not-progressed { - background: var(--list-background); + background: var(--progress-secondary-color); } &.progressed { z-index: 1; width: var(--progress); - background: var(--accent-color); + background: var(--progress-primary-color); &::after { - color: var(--game-card-text-color); + color: var(--progress-text-color); } } } diff --git a/src/styles/_inputs.scss b/src/styles/_inputs.scss index 004aea83..956a942a 100644 --- a/src/styles/_inputs.scss +++ b/src/styles/_inputs.scss @@ -96,7 +96,7 @@ input[type=range] { &::-webkit-slider-runnable-track, &::-ms-fill-lower, &::-ms-fill-upper { - background: var(--accent-color); + background: var(--progress-primary-color); } } @@ -105,7 +105,7 @@ input[type=range] { height: 36px; cursor: pointer; animate: 0.2s; - background: var(--accent-color); + background: var(--progress-primary-color); border-radius: $border-radius; overflow: hidden; } @@ -113,11 +113,11 @@ input[type=range] { &::-webkit-slider-thumb { height: 36px; width: 16px; - background: var(--primary-background); + background: var(--progress-text-color); cursor: pointer; border-radius: 0; -webkit-appearance: none; - box-shadow: 500px 0 0 500px var(--list-background); + box-shadow: 500px 0 0 500px var(--progress-secondary-color); } &::-moz-range-track { @@ -126,7 +126,7 @@ input[type=range] { cursor: pointer; animate: 0.2s; overflow: hidden; - background: var(--list-background); + background: var(--progress-secondary-color); border-radius: $border-radius; } @@ -135,7 +135,7 @@ input[type=range] { width: 16px; border: none; border-radius: 0; - background: var(--primary-background); + background: var(--progress-text-color); cursor: pointer; } @@ -144,7 +144,7 @@ input[type=range] { width: 16px; border: none; border-radius: 0; - background: var(--accent-color); + background: var(--progress-primary-color); } &::-ms-track { @@ -160,12 +160,12 @@ input[type=range] { } &::-ms-fill-lower { - background: var(--accent-color); + background: var(--progress-primary-color); border-radius: $border-radius; } &::-ms-fill-upper { - background: var(--accent-color); + background: var(--progress-primary-color); border-radius: $border-radius; } @@ -173,8 +173,8 @@ input[type=range] { height: 36px; width: 16px; border-radius: 0; - background: var(--primary-background); - box-shadow: 500px 0 0 500px var(--list-background); + background: var(--progress-text-color); + box-shadow: 500px 0 0 500px var(--progress-secondary-color); cursor: pointer; } } \ No newline at end of file diff --git a/src/styles/_themes.scss b/src/styles/_themes.scss index 5f0aeb2f..be27be87 100644 --- a/src/styles/_themes.scss +++ b/src/styles/_themes.scss @@ -2,4 +2,6 @@ @import "themes/default"; @import "themes/city-lights"; @import "themes/blue"; -@import "themes/hyrule"; \ No newline at end of file +@import "themes/hyrule"; +@import "themes/tomorrow-night"; +@import "themes/tomorrow-night-bright"; \ No newline at end of file diff --git a/src/styles/themes/blue.scss b/src/styles/themes/blue.scss index 7deb803d..90267d19 100644 --- a/src/styles/themes/blue.scss +++ b/src/styles/themes/blue.scss @@ -12,6 +12,9 @@ --modal-background: #011f4b; --modal-text-color: #b3cde0; --note-color: #ffae42; + --progress-primary-color: #005b96; + --progress-secondary-color: #b3cde0; + --progress-text-color: #ffffff; --primary-background: #005b96; --primary-text-color: #ffffff; --rating-star-color: #ffae42; diff --git a/src/styles/themes/city-lights.scss b/src/styles/themes/city-lights.scss index 7c2bf5e2..d87301b8 100644 --- a/src/styles/themes/city-lights.scss +++ b/src/styles/themes/city-lights.scss @@ -12,6 +12,9 @@ --modal-background: #0b212f; --modal-text-color: #fcfcfc; --note-color: #ffae42; + --progress-primary-color: #8B76C1; + --progress-secondary-color: #003b4a; + --progress-text-color: #12141C; --primary-background: #003b4a; --primary-text-color: #fcfcfc; --rating-star-color: #ffae42; diff --git a/src/styles/themes/dark.scss b/src/styles/themes/dark.scss index 68fc10a7..4270be89 100644 --- a/src/styles/themes/dark.scss +++ b/src/styles/themes/dark.scss @@ -12,6 +12,9 @@ --modal-background: #414548; --modal-text-color: #fff; --note-color: #ffae42; + --progress-primary-color: #fc0; + --progress-secondary-color: #333; + --progress-text-color: #222; --primary-background: #333; --primary-text-color: #c0c0c0; --rating-star-color: #ffae42; diff --git a/src/styles/themes/default.scss b/src/styles/themes/default.scss index 7c964c84..3e42f367 100644 --- a/src/styles/themes/default.scss +++ b/src/styles/themes/default.scss @@ -14,6 +14,9 @@ --modal-background: #414548; --modal-text-color: #fff; --note-color: #ffae42; + --progress-primary-color: #1dbc60; + --progress-secondary-color: #a5a2a2; + --progress-text-color: #333333; --primary-background: #{darken(#555, 10%)}; --primary-text-color: #ffffff; --rating-star-color: #ffae42; diff --git a/src/styles/themes/hyrule.scss b/src/styles/themes/hyrule.scss index 623949e3..02958f68 100644 --- a/src/styles/themes/hyrule.scss +++ b/src/styles/themes/hyrule.scss @@ -12,6 +12,9 @@ --modal-background: #{darken(#5c4639, 10%)}; --modal-text-color: #{lighten(#5c4639, 60%)}; --note-color: #FCCFB6; + --progress-primary-color: #{lighten(#0e5135, 20%)}; + --progress-secondary-color: #{darken(#714a2f, 10%)}; + --progress-text-color: #{lighten(#5c4639, 60%)}; --primary-background: #0e5135; --primary-text-color: #{lighten(#0e5135, 20%)}; --rating-star-color: #f7a400; diff --git a/src/styles/themes/tomorrow-night-bright.scss b/src/styles/themes/tomorrow-night-bright.scss new file mode 100644 index 00000000..dabdac7f --- /dev/null +++ b/src/styles/themes/tomorrow-night-bright.scss @@ -0,0 +1,27 @@ +.theme-tomorrow-night-bright { + --body-background: #000000; + --danger-background: #d54e53; + --danger-text-color: #fff; + --game-card-background: #000000; + --game-card-text-color: #fff; + --header-text-color: #fff; + --accent-color: #e78c45; + --list-background: #000000; + --list-header-background: #000000; + --list-header-text-color: #fff; + --modal-background: #2a2a2a; + --modal-text-color: #fff; + --note-color: #7aa6da; + --progress-primary-color: #b9ca4a; + --progress-secondary-color: #2a2a2a; + --progress-text-color: #2a2a2a; + --primary-background: #424242; + --primary-text-color: #fff; + --rating-star-color: #e7c547; + --secondary-background: #2a2a2a; + --secondary-text-color: #fff; + --success-background: #b9ca4a; + --success-text-color: #424242; + --warning-background: #d54e53; + --warning-text-color: #fff; +} diff --git a/src/styles/themes/tomorrow-night.scss b/src/styles/themes/tomorrow-night.scss new file mode 100644 index 00000000..aa9ec671 --- /dev/null +++ b/src/styles/themes/tomorrow-night.scss @@ -0,0 +1,27 @@ +.theme-tomorrow-night { + --body-background: #1d1f21; + --danger-background: #cc6666; + --danger-text-color: #fff; + --game-card-background: #1d1f21; + --game-card-text-color: #fff; + --header-text-color: #fff; + --accent-color: #de935f; + --list-background: #1d1f21; + --list-header-background: #1d1f21; + --list-header-text-color: #fff; + --modal-background: #282a2e; + --modal-text-color: #fff; + --note-color: #81a2be; + --progress-primary-color: #b5bd68; + --progress-secondary-color: #373b41; + --progress-text-color: #282a2e; + --primary-background: #373b41; + --primary-text-color: #fff; + --rating-star-color: #f0c674; + --secondary-background: #282a2e; + --secondary-text-color: #fff; + --success-background: #b5bd68; + --success-text-color: #373b41; + --warning-background: #cc6666; + --warning-text-color: #fff; +} diff --git a/src/themes.js b/src/themes.js index 3e6b0d84..a456012e 100644 --- a/src/themes.js +++ b/src/themes.js @@ -5,7 +5,7 @@ export default [ description: '', author: { name: 'Gamebrary staff', - url: 'http://google.com', + url: 'https://google.com', }, }, { @@ -14,7 +14,7 @@ export default [ description: 'Inspired on the awesome theme developed by YummyGum http://citylights.xyz/', author: { name: 'Gamebrary staff', - url: 'http://gamebrary.com', + url: 'https://gamebrary.com', }, }, { @@ -23,7 +23,25 @@ export default [ description: 'Dark theme', author: { name: 'Gamebrary staff', - url: 'http://gamebrary.com', + url: 'https://gamebrary.com', + }, + }, + { + name: 'Tomorrow Night', + id: 'tomorrow-night', + description: 'Tomorrow Night theme', + author: { + name: 'Chris Kempson', + url: 'https://github.com/chriskempson/tomorrow-theme', + }, + }, + { + name: 'Tomorrow Night Bright', + id: 'tomorrow-night-bright', + description: 'Tomorrow Night Bright theme', + author: { + name: 'Chris Kempson', + url: 'https://github.com/chriskempson/tomorrow-theme', }, }, { @@ -32,7 +50,7 @@ export default [ description: 'Blue theme', author: { name: 'Gamebrary staff', - url: 'http://gamebrary.com', + url: 'https://gamebrary.com', }, }, { @@ -41,7 +59,7 @@ export default [ description: 'Theme inspired by Hyrule colors', author: { name: 'Gamebrary staff', - url: 'http://gamebrary.com', + url: 'https://gamebrary.com', }, }, ];