girineko/YesPlayMusic
1
0
Fork 0
mirror of https://github.com/GiriNeko/YesPlayMusic.git synced 2025-12-16 13:17:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: adapt dark mode for modal

Browse source
This commit is contained in:
qier222 2020-12-16 16:01:32 +08:00
parent c75c69432a
commit 0680d258ae
3 changed files with 85 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

71
src/components/Modal.vue Normal file
View file

@ -0,0 +1,71 @@
<template>
<div>
<div class="shade" @click="close" v-show="show">
<div class="description-full" @click.stop>
<span>{{ text }}</span>
<span class="close" @click="close">
{{ $t("modal.close") }}
</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Modal",
props: {
show: Boolean,
close: Function,
text: String,
},
};
</script>
<style lang="scss" scoped>
.shade {
background: rgba(255, 255, 255, 0.38);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
.description-full {
background: rgba(255, 255, 255, 0.78);
box-shadow: 0 12px 16px -8px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.08);
backdrop-filter: blur(12px) opacity(1);
padding: 32px;
border-radius: 12px;
width: 50vw;
margin: auto 0;
font-size: 14px;
z-index: 100;
display: flex;
flex-direction: column;
.close {
display: flex;
justify-content: flex-end;
font-size: 16px;
margin-top: 20px;
color: var(--color-primary);
cursor: pointer;
}
}
}
[data-theme="dark"] {
.shade {
background: rgba(0, 0, 0, 0.38);
color: var(--color-text);
.description-full {
background: rgba(46, 46, 46, 0.68);
border: 1px solid rgba(255, 255, 255, 0.08);
}
}
}
</style>

64
src/views/album.vue
View file

@ -90,20 +90,11 @@
/>
</div>
</div>
<transition name="fade">
<div
class="shade"
@click="showFullDescription = false"
v-show="showFullDescription"
>
<div class="description-full" @click.stop>
<span>{{ album.description }}</span>
<span class="close" @click="showFullDescription = false">
{{ $t("modal.close") }}
</span>
</div>
</div>
</transition>
<Modal
:show="showFullDescription"
:close="() => (showFullDescription = false)"
:text="album.description"
/>
</div>
</template>
@ -122,6 +113,7 @@ import ButtonTwoTone from "@/components/ButtonTwoTone.vue";
import TrackList from "@/components/TrackList.vue";
import CoverRow from "@/components/CoverRow.vue";
import Cover from "@/components/Cover.vue";
import Modal from "@/components/Modal.vue";
export default {
name: "Album",
@ -131,6 +123,7 @@ export default {
TrackList,
ExplicitSymbol,
CoverRow,
Modal,
},
data() {
return {
@ -305,49 +298,6 @@ export default {
}
}
.shade {
background: rgba(255, 255, 255, 0.38);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
.description-full {
background: rgba(255, 255, 255, 0.78);
box-shadow: 0 12px 16px -8px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.08);
backdrop-filter: blur(12px);
padding: 32px;
border-radius: 12px;
width: 50vw;
margin: auto 0;
font-size: 14px;
z-index: 100;
display: flex;
flex-direction: column;
.close {
display: flex;
justify-content: flex-end;
font-size: 16px;
margin-top: 20px;
color: #335eea;
cursor: pointer;
}
}
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.2s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
.explicit-symbol {
opacity: 0.28;
color: var(--color-text);

64
src/views/playlist.vue
View file

@ -112,20 +112,11 @@
<TrackList :tracks="tracks" :type="'playlist'" :id="playlist.id" />
<transition name="fade">
<div
class="shade"
@click="showFullDescription = false"
v-show="showFullDescription"
>
<div class="description-full" @click.stop>
<span>{{ playlist.description }}</span>
<span class="close" @click="showFullDescription = false">
{{ $t("modal.close") }}
</span>
</div>
</div>
</transition>
<Modal
:show="showFullDescription"
:close="() => (showFullDescription = false)"
:text="playlist.description"
/>
</div>
</template>
@ -140,6 +131,7 @@ import { isAccountLoggedIn } from "@/utils/auth";
import ButtonTwoTone from "@/components/ButtonTwoTone.vue";
import TrackList from "@/components/TrackList.vue";
import Cover from "@/components/Cover.vue";
import Modal from "@/components/Modal.vue";
const specialPlaylist = {
2829816518: {
@ -234,6 +226,7 @@ export default {
Cover,
ButtonTwoTone,
TrackList,
Modal,
},
data() {
return {
@ -412,41 +405,6 @@ export default {
}
}
.shade {
background: rgba(255, 255, 255, 0.38);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
.description-full {
background: rgba(255, 255, 255, 0.78);
box-shadow: 0 12px 16px -8px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.08);
backdrop-filter: blur(12px);
padding: 32px;
border-radius: 12px;
width: 50vw;
margin: auto 0;
font-size: 14px;
z-index: 100;
display: flex;
flex-direction: column;
.close {
display: flex;
justify-content: flex-end;
font-size: 16px;
margin-top: 20px;
color: #335eea;
cursor: pointer;
}
}
}
.special-playlist {
margin-top: 192px;
margin-bottom: 128px;
@ -647,12 +605,4 @@ export default {
}
}
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.2s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>