use img in playlist card

+ use $black background on right sidebar
This commit is contained in:
geoffrey45 2022-08-27 10:00:42 +03:00
parent 98e1e28a4b
commit d3d7d1f139
10 changed files with 19 additions and 53 deletions

View File

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

View File

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

View File

@ -66,7 +66,7 @@ defineProps<{
}
&:hover {
background: #234ece;
background: $darkestblue;
.children {
transform: scale(1);

View File

@ -37,7 +37,7 @@ const q = useQStore();
cursor: pointer;
&:hover {
background-color: $accent;
background-color: $darkestblue;
}
}

View File

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

View File

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

View File

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

View File

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

View File

@ -32,7 +32,7 @@ defineProps<{
}
.toggled {
background-color: $darkblue;
background-color: $darkestblue;
transition-delay: 0.15s;
.circle {

View File

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