Mirrors/gamebrary
2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2024-11-23 19:53:14 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add "Tomorrow Night" themes (#175)

Browse source 
* add custom properties for progress bar colors

* add Tomorrow themes

* update existing themes with custom progress props
This commit is contained in:
Patrick Kontschak 2020-01-22 06:23:52 +01:00 committed by Roman Cervantes
parent 52af31e488
commit b907cda562
11 changed files with 110 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/GameDetail/GameProgress.vue
View file

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

22
src/styles/_inputs.scss
View file

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

4
src/styles/_themes.scss
View file

@ -2,4 +2,6 @@
@import "themes/default";
@import "themes/city-lights";
@import "themes/blue";
@import "themes/hyrule";
@import "themes/hyrule";
@import "themes/tomorrow-night";
@import "themes/tomorrow-night-bright";

3
src/styles/themes/blue.scss
View file

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

3
src/styles/themes/city-lights.scss
View file

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

3
src/styles/themes/dark.scss
View file

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

3
src/styles/themes/default.scss
View file

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

3
src/styles/themes/hyrule.scss
View file

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

27
src/styles/themes/tomorrow-night-bright.scss Normal file
View file

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

27
src/styles/themes/tomorrow-night.scss Normal file
View file

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

28
src/themes.js
View file

@ -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',
},
},
];