Merge pull request #50 from Oliver-Akins/dev

Add halloween theme

pnpm-lock.yaml

@@ -9,12 +9,12 @@ dependencies:
 devDependencies:
   '@vue/cli-plugin-babel': 4.4.6_a17f8753fefa6d1bd7cb7a980cc59ef3
   '@vue/cli-plugin-eslint': 4.4.6_30950b7652c540e7653a93d80bb88e74
-  '@vue/cli-service': 4.4.6_80d380958322054484b2df65bedb5db4
+  '@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.12
-lockfileVersion: 5.1
+  vue-template-compiler: 2.6.11
+lockfileVersion: 5.2
 packages:
   /@babel/code-frame/7.10.4:
     dependencies:
@@ -1323,7 +1323,6 @@ packages:
       node: '>=8'
     hasBin: true
     peerDependencies:
-      '@vue/cli-service': '*'
       less-loader: '*'
       pug-plain-loader: '*'
       raw-loader: '*'
@@ -8670,7 +8669,6 @@ packages:
       node: '>=6.11.5'
     hasBin: true
     peerDependencies:
-      webpack: '*'
       webpack-cli: '*'
       webpack-command: '*'
     peerDependenciesMeta:

src/App.vue

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

src/components/ControlBar.vue

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

src/components/LoginView.vue

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

src/components/modals/DetailedTrack.vue

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

src/components/modals/FeaturesInfo.vue

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

src/components/modals/PopularityInfo.vue

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

src/components/modals/ShareTrack.vue

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

src/css/theme/halloween.css

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