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,