diff --git a/Selector.Web/CSS/now.scss b/Selector.Web/CSS/now.scss
index bbf6a62..219ddab 100644
--- a/Selector.Web/CSS/now.scss
+++ b/Selector.Web/CSS/now.scss
@@ -9,6 +9,12 @@
padding: 15px;
box-shadow: 4px 4px 2px #5e5e5e;
+ transition: box-shadow 0.5s;
+
+ &:hover {
+ box-shadow: none;
+ offset: 4px 4px;
+ }
}
.now-playing-card {
diff --git a/Selector.Web/scripts/Now/Spotify.ts b/Selector.Web/scripts/Now/Spotify.ts
index 37f5323..347c11f 100644
--- a/Selector.Web/scripts/Now/Spotify.ts
+++ b/Selector.Web/scripts/Now/Spotify.ts
@@ -43,7 +43,6 @@ export let AudioFeatureCard: Vue.Component = {
template:
`
-
Info
{{ Key }} {{ Mode }}
{{ feature.tempo }} BPM
{{ feature.timeSignature }}/4
@@ -94,25 +93,31 @@ export let AudioFeatureChartCard: Vue.Component = {
type: "radar",
data: this.chartData,
options: {
- // plugins: {
- // legend: {
- // labels: {
- // color: "white"
- // }
- // }
- // },
elements: {
line: {
- borderWidth: 4
+ borderWidth: 4,
+ borderColor: "#3a3a3a",
+ backgroundColor: "#727272",
+ borderCapStyle: "round",
+ borderJoinStyle: "round"
},
point: {
- radius: 4
+ radius: 4,
+ pointStyle: "circle",
+ borderColor: "black",
+ backgroundColor: "white"
}
},
scales: {
r: {
angleLines: {
- display: false
+ display: true
+ },
+ pointLabels: {
+ color: 'white',
+ font: {
+ size: 12
+ }
},
beginAtZero: true,
suggestedMin: 0,