mirror of
https://github.com/tcsenpai/swingmusic.git
synced 2025-06-11 05:27:21 +00:00
use img in playlist card
+ use $black background on right sidebar
This commit is contained in:
parent
98e1e28a4b
commit
d3d7d1f139
@ -65,12 +65,12 @@ button {
|
||||
background: linear-gradient(70deg, $gray3, $gray2);
|
||||
|
||||
&:hover {
|
||||
background-image: linear-gradient(70deg, #234ece, $darkblue);
|
||||
background-image: linear-gradient(70deg, $darkestblue, $darkblue);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-active {
|
||||
background-image: linear-gradient(70deg, #234ece, $darkblue);
|
||||
background-image: linear-gradient(70deg, $darkestblue, $darkblue);
|
||||
}
|
||||
|
||||
.btn-more {
|
||||
|
@ -3,6 +3,7 @@
|
||||
$body: #0f1218;
|
||||
$separator: #ffffff2f;
|
||||
$highlight-blue: #006eff;
|
||||
$darkestblue: #234ece;
|
||||
$bbb: #161616; //bottom controls background
|
||||
$theme: #464545fd;
|
||||
|
||||
@ -41,7 +42,6 @@ $teal: rgb(64, 200, 224);
|
||||
$primary: $gray4;
|
||||
$accent: $gray1;
|
||||
$secondary: $gray5;
|
||||
$cta: $blue;
|
||||
$danger: $red;
|
||||
$track-hover: $gray4;
|
||||
$context: $gray;
|
||||
|
@ -66,7 +66,7 @@ defineProps<{
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #234ece;
|
||||
background: $darkestblue;
|
||||
|
||||
.children {
|
||||
transform: scale(1);
|
||||
|
@ -37,7 +37,7 @@ const q = useQStore();
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: $accent;
|
||||
background-color: $darkestblue;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -4,12 +4,7 @@
|
||||
:playlist="props.playlist"
|
||||
class="p-card rounded bg-primary"
|
||||
>
|
||||
<div
|
||||
class="image p-image rounded shadow-sm"
|
||||
:style="{
|
||||
backgroundImage: `url(${imguri + props.playlist.thumb})`,
|
||||
}"
|
||||
></div>
|
||||
<img :src="imguri + props.playlist.thumb" class="rounded" />
|
||||
<div class="bottom">
|
||||
<div class="name ellip">{{ props.playlist.name }}</div>
|
||||
<div class="count">
|
||||
@ -41,47 +36,20 @@ const props = defineProps<{
|
||||
transition: all 0.25s ease;
|
||||
position: relative;
|
||||
|
||||
.p-image {
|
||||
min-width: 100%;
|
||||
transition: all 0.2s ease;
|
||||
background-color: $gray4;
|
||||
img {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.drop {
|
||||
position: absolute;
|
||||
bottom: 4rem;
|
||||
right: 1.25rem;
|
||||
opacity: 0;
|
||||
transition: all 0.25s ease-in-out;
|
||||
display: none;
|
||||
|
||||
.drop-btn {
|
||||
background-color: $gray3;
|
||||
}
|
||||
}
|
||||
|
||||
.pbtn {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 4.5rem;
|
||||
left: 1.25rem;
|
||||
transition: all 0.25s ease-in-out;
|
||||
z-index: 10;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $gray2;
|
||||
|
||||
.drop {
|
||||
transition-delay: 0.75s;
|
||||
opacity: 1;
|
||||
transform: translate(0, -0.5rem);
|
||||
}
|
||||
background-color: $darkestblue;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 1rem;
|
||||
margin-top: $smaller;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
|
||||
.name {
|
||||
font-weight: 900;
|
||||
@ -89,7 +57,7 @@ const props = defineProps<{
|
||||
|
||||
.count {
|
||||
font-size: $medium;
|
||||
color: $gray1;
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div
|
||||
class="r-sidebar"
|
||||
class="r-sidebar rounded"
|
||||
:style="{
|
||||
marginBottom: !settings.use_alt_np ? '-1rem' : '',
|
||||
}"
|
||||
@ -35,6 +35,7 @@ const settings = useSettingsStore();
|
||||
<style lang="scss">
|
||||
.r-sidebar {
|
||||
width: 100%;
|
||||
background-color: $black;
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
|
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="up-next">
|
||||
<div class="r-grid">
|
||||
<div class="scrollable-r bg-primary rounded">
|
||||
<div class="scrollable-r rounded">
|
||||
<QueueActions />
|
||||
<div
|
||||
class="inner"
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div id="right-tabs" class="bg-primary rounded">
|
||||
<div id="right-tabs" class="rounded">
|
||||
<div class="tab-buttons-wrapper">
|
||||
<div id="tabheaders" class="rounded-sm noscroll">
|
||||
<div
|
||||
|
@ -32,7 +32,7 @@ defineProps<{
|
||||
}
|
||||
|
||||
.toggled {
|
||||
background-color: $darkblue;
|
||||
background-color: $darkestblue;
|
||||
transition-delay: 0.15s;
|
||||
|
||||
.circle {
|
||||
|
@ -2,7 +2,6 @@
|
||||
<div
|
||||
class="loaderx"
|
||||
:class="{ loader: loader.loading, not_loader: !loader.loading }"
|
||||
@click="modal.showSearchModal"
|
||||
>
|
||||
<div v-if="!loader.loading">🦋</div>
|
||||
</div>
|
||||
@ -10,10 +9,8 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import useLoaderStore from "@/stores/loader";
|
||||
import useModalStore from "@/stores/modal";
|
||||
|
||||
const loader = useLoaderStore();
|
||||
const modal = useModalStore();
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
Loading…
x
Reference in New Issue
Block a user