Spotify/top-lists
0
0
Fork 0
Code Issues Activity

Merge pull request #49 from Oliver-Akins/theme/halloween

Browse source 
Adds a halloween theme and fixes some components not obeying the CSS vars
This commit is contained in:
Oliver 2020-10-26 22:39:08 -06:00 • committed by GitHub
commit 2bb5b984b4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 108 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

60
pnpm-lock.yaml generated
View file

@ -9,12 +9,12 @@ dependencies:
devDependencies:
'@vue/cli-plugin-babel': 4.4.6_52bf33a3befe03db0320b68ab836c6a2
'@vue/cli-plugin-eslint': 4.4.6_30950b7652c540e7653a93d80bb88e74
'@vue/cli-service': 4.4.6_7df22e45d43176cb0c60fbfd320f55b3
'@vue/cli-service': 4.4.6_vue-template-compiler@2.6.11
babel-eslint: 10.1.0_eslint@6.8.0
eslint: 6.8.0
eslint-plugin-vue: 6.2.2_eslint@6.8.0
vue-template-compiler: 2.6.11
lockfileVersion: 5.1
lockfileVersion: 5.2
packages:
/@ant-design-vue/babel-helper-vue-transform-on/1.0.1:
dev: true
@ -1041,7 +1041,7 @@ packages:
cssnano: 4.1.10
cssnano-preset-default: 4.0.7
postcss: 7.0.32
webpack: 4.44.1_webpack@4.44.1
webpack: 4.44.1
dev: true
peerDependencies:
webpack: ^4.0.0
@ -1067,7 +1067,7 @@ packages:
chalk: 1.1.3
error-stack-parser: 2.0.6
string-width: 2.1.1
webpack: 4.44.1_webpack@4.44.1
webpack: 4.44.1
dev: true
peerDependencies:
webpack: ^2.0.0 || ^3.0.0 || ^4.0.0
@ -1220,12 +1220,12 @@ packages:
dependencies:
'@babel/core': 7.11.1
'@vue/babel-preset-app': 4.5.3_vue@2.6.11
'@vue/cli-service': 4.4.6_7df22e45d43176cb0c60fbfd320f55b3
'@vue/cli-service': 4.4.6_vue-template-compiler@2.6.11
'@vue/cli-shared-utils': 4.5.3
babel-loader: 8.1.0_7e7526731d462686de4308c8ba1cfd85
cache-loader: 4.1.0_webpack@4.44.1
thread-loader: 2.1.3_webpack@4.44.1
webpack: 4.44.1_webpack@4.44.1
webpack: 4.44.1
dev: true
peerDependencies:
'@vue/cli-service': ^3.0.0 || ^4.0.0-0
@ -1234,13 +1234,13 @@ packages:
integrity: sha512-9cX9mN+4DIbcqw3rV6UBOA0t5zikIkrBLQloUzsOBOu5Xb7/UoD7inInFj7bnyHUflr5LqbdWJ+etCQcWAIIXA==
/@vue/cli-plugin-eslint/4.4.6_30950b7652c540e7653a93d80bb88e74:
dependencies:
'@vue/cli-service': 4.4.6_7df22e45d43176cb0c60fbfd320f55b3
'@vue/cli-service': 4.4.6_vue-template-compiler@2.6.11
'@vue/cli-shared-utils': 4.5.3
eslint: 6.8.0
eslint-loader: 2.2.1_eslint@6.8.0+webpack@4.44.1
globby: 9.2.0
inquirer: 7.3.3
webpack: 4.44.1_webpack@4.44.1
webpack: 4.44.1
yorkie: 2.0.0
dev: true
peerDependencies:
@ -1250,7 +1250,7 @@ packages:
integrity: sha512-3a9rVpOKPQsDgAlRkhmBMHboGobivG/47BbQGE66Z8YJxrgF/AWikP3Jy67SmxtszRkyiWfw4aJFRV9r3MzffQ==
/@vue/cli-plugin-router/4.5.3_@vue+cli-service@4.4.6:
dependencies:
'@vue/cli-service': 4.4.6_7df22e45d43176cb0c60fbfd320f55b3
'@vue/cli-service': 4.4.6_vue-template-compiler@2.6.11
'@vue/cli-shared-utils': 4.5.3
dev: true
peerDependencies:
@ -1259,13 +1259,13 @@ packages:
integrity: sha512-e0EqfwY4AGar1SX3rqD58QMoMYIxRD0AUauNiwSmuGjyA0Fr4Lfl1gBEPDCMZ5jIsO/4QNBateQGUy1S/GlxAw==
/@vue/cli-plugin-vuex/4.5.3_@vue+cli-service@4.4.6:
dependencies:
'@vue/cli-service': 4.4.6_7df22e45d43176cb0c60fbfd320f55b3
'@vue/cli-service': 4.4.6_vue-template-compiler@2.6.11
dev: true
peerDependencies:
'@vue/cli-service': ^3.0.0 || ^4.0.0-0
resolution:
integrity: sha512-23AAuaVbng6OUc5l7VHEGqCNiL1g1BsZL99X1rvKRttjDpdIYHtQAFsXjcTFitGpHRWoA9dgeujj/MkBPa1TcA==
/@vue/cli-service/4.4.6_7df22e45d43176cb0c60fbfd320f55b3:
/@vue/cli-service/4.4.6_vue-template-compiler@2.6.11:
dependencies:
'@intervolga/optimize-cssnano-plugin': 1.0.6_webpack@4.44.1
'@soda/friendly-errors-webpack-plugin': 1.7.1_webpack@4.44.1
@ -1315,7 +1315,7 @@ packages:
vue-loader: 15.9.3_5301d49b91a5273e67d0261daf815cc2
vue-style-loader: 4.1.2
vue-template-compiler: 2.6.11
webpack: 4.44.1_webpack@4.44.1
webpack: 4.44.1
webpack-bundle-analyzer: 3.8.0
webpack-chain: 6.5.1
webpack-dev-server: 3.11.0_webpack@4.44.1
@ -1325,7 +1325,6 @@ packages:
node: '>=8'
hasBin: true
peerDependencies:
'@vue/cli-service': '*'
less-loader: '*'
pug-plain-loader: '*'
raw-loader: '*'
@ -1382,7 +1381,7 @@ packages:
/@vue/preload-webpack-plugin/1.1.2_5ff516492094d25eb46611af254fac10:
dependencies:
html-webpack-plugin: 3.2.0_webpack@4.44.1
webpack: 4.44.1_webpack@4.44.1
webpack: 4.44.1
dev: true
engines:
node: '>=6.0.0'
@ -1876,7 +1875,7 @@ packages:
mkdirp: 0.5.5
pify: 4.0.1
schema-utils: 2.7.0
webpack: 4.44.1_webpack@4.44.1
webpack: 4.44.1
dev: true
engines:
node: '>= 6.9'
@ -2219,7 +2218,7 @@ packages:
mkdirp: 0.5.5
neo-async: 2.6.2
schema-utils: 2.7.0
webpack: 4.44.1_webpack@4.44.1
webpack: 4.44.1
dev: true
engines:
node: '>= 8.9.0'
@ -2718,7 +2717,7 @@ packages:
p-limit: 2.3.0
schema-utils: 1.0.0
serialize-javascript: 2.1.2
webpack: 4.44.1_webpack@4.44.1
webpack: 4.44.1
webpack-log: 2.0.0
dev: true
engines:
@ -2861,7 +2860,7 @@ packages:
postcss-value-parser: 4.1.0
schema-utils: 2.7.0
semver: 6.3.0
webpack: 4.44.1_webpack@4.44.1
webpack: 4.44.1
dev: true
engines:
node: '>= 8.9.0'
@ -3459,7 +3458,7 @@ packages:
object-assign: 4.1.1
object-hash: 1.3.1
rimraf: 2.7.1
webpack: 4.44.1_webpack@4.44.1
webpack: 4.44.1
dev: true
peerDependencies:
eslint: '>=1.6.0 <7.0.0'
@ -3857,7 +3856,7 @@ packages:
dependencies:
loader-utils: 1.4.0
schema-utils: 2.7.0
webpack: 4.44.1_webpack@4.44.1
webpack: 4.44.1
dev: true
engines:
node: '>= 8.9.0'
@ -4459,7 +4458,7 @@ packages:
tapable: 1.1.3
toposort: 1.0.7
util.promisify: 1.0.0
webpack: 4.44.1_webpack@4.44.1
webpack: 4.44.1
dev: true
engines:
node: '>=6.9'
@ -5539,7 +5538,7 @@ packages:
loader-utils: 1.4.0
normalize-url: 1.9.1
schema-utils: 1.0.0
webpack: 4.44.1_webpack@4.44.1
webpack: 4.44.1
webpack-sources: 1.4.3
dev: true
engines:
@ -7887,7 +7886,7 @@ packages:
serialize-javascript: 4.0.0
source-map: 0.6.1
terser: 4.8.0
webpack: 4.44.1_webpack@4.44.1
webpack: 4.44.1
webpack-sources: 1.4.3
worker-farm: 1.7.0
dev: true
@ -7907,7 +7906,7 @@ packages:
serialize-javascript: 4.0.0
source-map: 0.6.1
terser: 4.8.0
webpack: 4.44.1_webpack@4.44.1
webpack: 4.44.1
webpack-sources: 1.4.3
dev: true
engines:
@ -7950,7 +7949,7 @@ packages:
loader-runner: 2.4.0
loader-utils: 1.4.0
neo-async: 2.6.2
webpack: 4.44.1_webpack@4.44.1
webpack: 4.44.1
dev: true
engines:
node: '>= 6.9.0 <7.0.0 || >= 8.9.0'
@ -8251,7 +8250,7 @@ packages:
loader-utils: 1.4.0
mime: 2.4.6
schema-utils: 2.7.0
webpack: 4.44.1_webpack@4.44.1
webpack: 4.44.1
dev: true
engines:
node: '>= 8.9.0'
@ -8413,7 +8412,7 @@ packages:
vue-hot-reload-api: 2.3.4
vue-style-loader: 4.1.2
vue-template-compiler: 2.6.11
webpack: 4.44.1_webpack@4.44.1
webpack: 4.44.1
dev: true
peerDependencies:
cache-loader: '*'
@ -8530,7 +8529,7 @@ packages:
mime: 2.4.6
mkdirp: 0.5.5
range-parser: 1.2.1
webpack: 4.44.1_webpack@4.44.1
webpack: 4.44.1
webpack-log: 2.0.0
dev: true
engines:
@ -8570,7 +8569,7 @@ packages:
strip-ansi: 3.0.1
supports-color: 6.1.0
url: 0.11.0
webpack: 4.44.1_webpack@4.44.1
webpack: 4.44.1
webpack-dev-middleware: 3.7.2_webpack@4.44.1
webpack-log: 2.0.0
ws: 6.2.1
@ -8609,7 +8608,7 @@ packages:
dev: true
resolution:
integrity: sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==
/webpack/4.44.1_webpack@4.44.1:
/webpack/4.44.1:
dependencies:
'@webassemblyjs/ast': 1.9.0
'@webassemblyjs/helper-module-context': 1.9.0
@ -8639,7 +8638,6 @@ packages:
node: '>=6.11.5'
hasBin: true
peerDependencies:
webpack: '*'
webpack-cli: '*'
webpack-command: '*'
peerDependenciesMeta:

2
src/App.vue
View file

@ -62,7 +62,7 @@ export default {
<style>
@import "./css/transitions.css";
@import "./css/theme/dark.css";
@import "./css/theme/halloween.css";
@import "./css/scrollbar.css";
@import "./css/tooltips.css";
@import "./css/inputs.css";

5
src/components/ControlBar.vue
View file

@ -212,10 +212,11 @@ export default {
}
#error {
background-color: var(--error-background);
border-radius: var(--corner-rounding);
border-color: var(--error);
border-color: var(--error-accent);
color: var(--error-text);
border-style: solid;
color: var(--error);
text-align: center;
border-width: 2px;
padding: 10px;

2
src/components/LoginView.vue
View file

@ -75,7 +75,7 @@ export default {
.card {
border-radius: var(--corner-rounding);
background-color: var(--card-colour);
color: var(--spotify-green);
color: var(--card-text);
text-align: center;
padding: 15px;
width: 90%;

1
src/components/modals/DetailedTrack.vue
View file

@ -162,6 +162,7 @@ export default {
background-color: var(--modal-background);
border-radius: var(--corner-rounding);
padding: 0 15px 15px 15px;
color: var(--modal-text);
overflow-y: auto;
max-height: 85%;
z-index: 11;

1
src/components/modals/FeaturesInfo.vue
View file

@ -155,6 +155,7 @@ export default {
background-color: var(--modal-background);
border-radius: var(--corner-rounding);
padding: 0 15px 15px 15px;
color: var(--modal-text);
text-align: center;
overflow-y: auto;
max-height: 85%;

1
src/components/modals/PopularityInfo.vue
View file

@ -55,6 +55,7 @@ export default {
.modal {
background-color: var(--modal-background);
border-radius: var(--corner-rounding);
color: var(--modal-text);
text-align: center;
max-height: 85%;
padding: 0 15px;

1
src/components/modals/ShareTrack.vue
View file

@ -73,6 +73,7 @@ export default {
background-color: var(--modal-background);
border-radius: var(--corner-rounding);
padding: 0 15px 15px 15px;
color: var(--modal-text);
text-align: center;
max-height: 85%;
z-index: 11;

70
src/css/theme/halloween.css Normal file
View file

@ -0,0 +1,70 @@
:root {
--spotify-green: #1DB954;
--spotify-white: #FFFFFF;
--spotify-black: #000000;
--accent1: #7289da;
--accent2: #00aa00;
--error: #ff0000;
--error-background: #ff00005d;
--error-text: white;
--error-accent: var(--error);
--success: var(--accent2);
--success-background: #00aa002f;
--success-text: var(--card-text);
--success-accent: #00aa00;
--background: #FF8C00;
--background-text: var(--spotify-white);
--card-colour: #794200;
--card-text: white;
--on-card-colour: #bd6800;
--on-card-text: white;
--modal-container-background: #0e0f10e0;
--modal-background: var(--background);
--modal-close-button: black;
--modal-text: black;
--fonts: 'Open Sans', sans-serif;
--corner-rounding: 7px;
--input-background: var(--spotify-black);
--input-text: orange;
--input-active-border: var(--accent1);
--button-background: #f09e3c;
--button-hover-background: #d6923f;
--button-disabled-background: #965200;
--button-text: var(--spotify-black);
--button-disabled-text: var(--spotify-black);
--textarea-background: var(--spotify-black);
--textarea-text-colour: orange;
--textarea-border-colour: var(--accent1);
--missing-picture-background: var(--on-card-colour);
--missing-picture-foreground: var(--accent2);
--tooltip-colour: var(--spotify-black);
--tooltip-text: orange;
--percent-filled: black;
--percent-empty: white;
--percent-text: black;
--scrollbar-background: #6d3e00;
--scrollbar-handle: #e06500;
--scrollbar-handle-hover: #e06500c2;
--card-bottom-row-text-colour: var(--on-card-text);
--card-bottom-row-background: var(--on-card-colour);
--card-bottom-row-hover-background: #9e5700;
--card-bottom-row-divider-colour: white;
--card-bottom-row-icon-colour: white;
}