diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c917a11..a1e0107 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -12,7 +12,7 @@ devDependencies: '@vue/cli-service': 4.5.8_vue-template-compiler@2.6.12 babel-eslint: 10.1.0_eslint@6.8.0 eslint: 6.8.0 - eslint-plugin-vue: 6.2.2_eslint@6.8.0 + eslint-plugin-vue: 7.1.0_eslint@6.8.0 vue-template-compiler: 2.6.12 lockfileVersion: 5.2 packages: @@ -3627,19 +3627,20 @@ packages: webpack: '>=2.0.0 <5.0.0' resolution: integrity: sha512-RLgV9hoCVsMLvOxCuNjdqOrUqIj9oJg8hF44vzJaYqsAHuY9G2YAeN3joQ9nxP0p5Th9iFSIpKo+SD8KISxXRg== - /eslint-plugin-vue/6.2.2_eslint@6.8.0: + /eslint-plugin-vue/7.1.0_eslint@6.8.0: dependencies: eslint: 6.8.0 + eslint-utils: 2.1.0 natural-compare: 1.4.0 - semver: 5.7.1 - vue-eslint-parser: 7.1.0_eslint@6.8.0 + semver: 7.3.2 + vue-eslint-parser: 7.1.1_eslint@6.8.0 dev: true engines: node: '>=8.10' peerDependencies: - eslint: ^5.0.0 || ^6.0.0 + eslint: ^6.2.0 || ^7.0.0 resolution: - integrity: sha512-Nhc+oVAHm0uz/PkJAWscwIT4ijTrK5fqNqz9QB1D35SbbuMG1uB6Yr5AJpvPSWg+WOw7nYNswerYh0kOk64gqQ== + integrity: sha512-9dW7kj8/d2IkDdgNpvIhJdJ3XzU3x4PThXYMzWt49taktYnGyrTY6/bXCYZ/VtQKU9kXPntPrZ41+8Pw0Nxblg== /eslint-scope/4.0.3: dependencies: esrecurse: 4.3.0 @@ -3666,6 +3667,14 @@ packages: node: '>=6' resolution: integrity: sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q== + /eslint-utils/2.1.0: + dependencies: + eslint-visitor-keys: 1.3.0 + dev: true + engines: + node: '>=6' + resolution: + integrity: sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg== /eslint-visitor-keys/1.3.0: dev: true engines: @@ -7463,6 +7472,13 @@ packages: hasBin: true resolution: integrity: sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A== + /semver/7.3.2: + dev: true + engines: + node: '>=10' + hasBin: true + resolution: + integrity: sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ== /send/0.17.1: dependencies: debug: 2.6.9 @@ -8564,7 +8580,7 @@ packages: vue: ^2 resolution: integrity: sha512-3vdpaOaxRpVRG5Qne8Hjb4HG+P2fxCo6t3SqyQOznMsZApKPcIvTLEMfvJ1yd3R/0DYOjdPYxCDeReMD+UGyuA== - /vue-eslint-parser/7.1.0_eslint@6.8.0: + /vue-eslint-parser/7.1.1_eslint@6.8.0: dependencies: debug: 4.2.0 eslint: 6.8.0 @@ -8579,7 +8595,7 @@ packages: peerDependencies: eslint: '>=5.0.0' resolution: - integrity: sha512-Kr21uPfthDc63nDl27AGQEhtt9VrZ9nkYk/NTftJ2ws9XiJwzJJCnCr3AITQ2jpRMA0XPGDECxYH8E027qMK9Q== + integrity: sha512-8FdXi0gieEwh1IprIBafpiJWcApwrU+l2FEj8c1HtHFdNXMd0+2jUSjBVmcQYohf/E72irwAXEXLga6TQcB3FA== /vue-hot-reload-api/2.3.4: dev: true resolution: @@ -9024,7 +9040,7 @@ specifiers: clipboard-polyfill: ^3.0.1 core-js: ^3.6.5 eslint: ^6.7.2 - eslint-plugin-vue: ^6.2.2 + eslint-plugin-vue: ^7.1.0 v-tooltip: ^2.0.3 vue: ^2.6.11 vue-ellipse-progress: ^1.1.1 diff --git a/public/static/css/theme/dark-high-contrast.css b/public/static/css/theme/dark-high-contrast.css new file mode 100644 index 0000000..c7ba7fe --- /dev/null +++ b/public/static/css/theme/dark-high-contrast.css @@ -0,0 +1,76 @@ +:root { + --spotify-green: #1DB954; + --spotify-white: #FFFFFF; + --spotify-black: #000000; + + --accent1: #7289da; + --accent2: #00aa00; + + --error: #ff0000; + --error-background: #ff00005d; + --error-text: #FFFFFF; + --error-accent: var(--error); + + --success: var(--accent2); + --success-background: #00aa002f; + --success-text: var(--card-text); + --success-accent: #00aa00; + + --background: black; + --background-text: white; + + --card-border-colour: white; + --card-border-style: solid; + --card-border-width: 2px; + --card-colour: black; + --card-text: white; + + --on-card-colour: black; + --on-card-text: white; + + --modal-container-background: #0e0f10eb; + --modal-background: var(--card-colour); + --modal-close-button: var(--card-text); + --modal-text: var(--card-text); + + --fonts: 'Open Sans', sans-serif; + + --corner-rounding: 7px; + + --input-background: var(--spotify-black); + --input-text: var(--spotify-green); + --input-active-border: var(--accent2); + + --button-hover-background: var(--accent2); + --button-background: var(--spotify-green); + --button-disabled-background: #09682a; + --button-text: var(--spotify-black); + --button-disabled-text: var(--spotify-black); + + --textarea-background: var(--spotify-black); + --textarea-text-colour: var(--spotify-green); + --textarea-border-colour: var(--accent2); + + --missing-picture-background: var(--background); + --missing-picture-foreground: var(--accent2); + + --tooltip-colour: white; + --tooltip-text: black; + + --percent-filled: var(--accent2); + --percent-empty: var(--on-card-colour); + --percent-text: var(--on-card-text); + + --scrollbar-background: #0f0f0f; + --scrollbar-handle: #4d4d4d; + --scrollbar-handle-hover: #5e5e5e; + + --card-bottom-row-text-colour: var(--accent2); + --card-bottom-row-background: var(--on-card-colour); + --card-bottom-row-hover-background: #1d1d1d; + --card-bottom-row-divider-colour: #000000; + --card-bottom-row-icon-colour: var(--card-bottom-row-text-colour); + + --icon-primary: var(--accent2); + --icon-secondary: var(--accent1); +} \ No newline at end of file diff --git a/public/static/css/theme/dark.css b/public/static/css/theme/dark.css index 362d610..b838f0d 100644 --- a/public/static/css/theme/dark.css +++ b/public/static/css/theme/dark.css @@ -19,6 +19,9 @@ --background: #23272A; --background-text: var(--spotify-white); + --card-border-colour: transparent; + --card-border-style: none; + --card-border-width: 0px; --card-colour: #2C2F33; --card-text: #ffffff80; diff --git a/public/static/css/theme/halloween.css b/public/static/css/theme/halloween.css index 3c3590c..8092342 100644 --- a/public/static/css/theme/halloween.css +++ b/public/static/css/theme/halloween.css @@ -19,6 +19,9 @@ --background: #FF8C00; --background-text: var(--spotify-white); + --card-border-colour: transparent; + --card-border-style: none; + --card-border-width: 0px; --card-colour: #794200; --card-text: white; diff --git a/public/static/css/theme/light.css b/public/static/css/theme/light.css index 0338236..2119ac5 100644 --- a/public/static/css/theme/light.css +++ b/public/static/css/theme/light.css @@ -19,6 +19,9 @@ --background: white; --background-text: dimgray; + --card-border-colour: transparent; + --card-border-style: none; + --card-border-width: 0px; --card-colour: #dddddd; --card-text: var(--background-text); diff --git a/src/components/cards/Artist.vue b/src/components/cards/Artist.vue index 96dcf38..d3911d8 100644 --- a/src/components/cards/Artist.vue +++ b/src/components/cards/Artist.vue @@ -76,13 +76,15 @@ export default {