mirror of
https://github.com/owntone/owntone-server.git
synced 2025-03-03 23:30:09 -05:00
[web] Remove remnants of the name forked-daapd in styles
This commit is contained in:
parent
4796963781
commit
6354f9972a
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<figure>
|
||||
<figure class="cover has-shadow">
|
||||
<img v-lazy="{ src: url, lifecycle }" @click="$emit('click')" />
|
||||
</figure>
|
||||
</template>
|
||||
@ -50,3 +50,58 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use 'bulma/sass/utilities/mixins';
|
||||
|
||||
.cover {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
&.is-small {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
img {
|
||||
border-radius: var(--bulma-radius-small);
|
||||
max-width: 4rem;
|
||||
max-height: 4rem;
|
||||
}
|
||||
}
|
||||
&.is-medium {
|
||||
@include mixins.tablet {
|
||||
justify-content: right;
|
||||
}
|
||||
img {
|
||||
border-radius: var(--bulma-radius);
|
||||
max-height: calc(150px - 1.5rem);
|
||||
}
|
||||
}
|
||||
&.is-normal {
|
||||
img {
|
||||
border-radius: var(--bulma-radius-large);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&.is-big {
|
||||
@include mixins.mobile {
|
||||
@media screen and (orientation: landscape) {
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
img {
|
||||
border-radius: var(--bulma-radius-large);
|
||||
max-height: calc(100vh - 26rem);
|
||||
}
|
||||
&.is-masked {
|
||||
filter: blur(0.5rem) opacity(0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
.has-shadow img {
|
||||
box-shadow:
|
||||
0 0.25rem 0.5rem 0 var(--bulma-background-active),
|
||||
0 0.375rem 1.25rem 0 var(--bulma-background-active);
|
||||
}
|
||||
</style>
|
||||
|
@ -17,7 +17,7 @@
|
||||
:url="item.item.artwork_url"
|
||||
:artist="item.item.artist"
|
||||
:album="item.item.name"
|
||||
class="media-left fd-has-shadow fd-cover fd-cover-small-image"
|
||||
class="media-left is-small"
|
||||
/>
|
||||
<div class="media-content">
|
||||
<div class="is-size-6 has-text-weight-bold" v-text="item.item.name" />
|
||||
|
@ -12,7 +12,7 @@
|
||||
:url="artwork_url(item)"
|
||||
:artist="item.artist"
|
||||
:album="item.name"
|
||||
class="fd-has-shadow fd-cover fd-cover-small-image"
|
||||
class="is-small"
|
||||
/>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
|
@ -8,7 +8,7 @@
|
||||
:url="item.artwork_url"
|
||||
:artist="item.artist"
|
||||
:album="item.name"
|
||||
class="fd-has-shadow fd-cover fd-cover-normal-image mb-3"
|
||||
class="is-normal mb-3"
|
||||
/>
|
||||
<div v-if="media_kind_resolved === 'podcast'" class="buttons">
|
||||
<a
|
||||
|
@ -8,7 +8,7 @@
|
||||
:url="artwork_url(item)"
|
||||
:artist="item.artist"
|
||||
:album="item.name"
|
||||
class="fd-has-shadow fd-cover fd-cover-normal-image mb-3"
|
||||
class="is-normal mb-3"
|
||||
@load="artwork_loaded"
|
||||
@error="artwork_error"
|
||||
/>
|
||||
|
@ -12,12 +12,6 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fd-has-shadow img {
|
||||
box-shadow:
|
||||
0 0.25rem 0.5rem 0 var(--bulma-background-active),
|
||||
0 0.375rem 1.25rem 0 var(--bulma-background-active);
|
||||
}
|
||||
|
||||
.is-full-height {
|
||||
min-height: calc(100vh - calc(2 * var(--bulma-navbar-height)));
|
||||
}
|
||||
@ -35,52 +29,6 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.fd-cover {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
&-small-image {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
img {
|
||||
border-radius: var(--bulma-radius-small);
|
||||
max-width: 4rem;
|
||||
max-height: 4rem;
|
||||
}
|
||||
}
|
||||
&-medium-image {
|
||||
@include mixins.tablet {
|
||||
justify-content: right;
|
||||
}
|
||||
img {
|
||||
border-radius: var(--bulma-radius);
|
||||
max-height: calc(150px - 1.5rem);
|
||||
}
|
||||
}
|
||||
&-normal-image {
|
||||
img {
|
||||
border-radius: var(--bulma-radius-large);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&-big-image {
|
||||
@include mixins.mobile {
|
||||
@media screen and (orientation: landscape) {
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
img {
|
||||
border-radius: var(--bulma-radius-large);
|
||||
max-height: calc(100vh - 26rem);
|
||||
}
|
||||
&.is-masked {
|
||||
filter: blur(0.5rem) opacity(0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media:first-of-type {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
@ -106,7 +54,7 @@
|
||||
}
|
||||
|
||||
.column {
|
||||
&.fd-has-cover {
|
||||
&.has-cover {
|
||||
@include mixins.mobile {
|
||||
margin: auto;
|
||||
}
|
||||
|
@ -27,7 +27,7 @@
|
||||
:url="album.artwork_url"
|
||||
:artist="album.artist"
|
||||
:album="album.name"
|
||||
class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image"
|
||||
class="is-clickable is-medium"
|
||||
@click="show_details_modal = true"
|
||||
/>
|
||||
</template>
|
||||
|
@ -24,7 +24,7 @@
|
||||
:url="artwork_url(album)"
|
||||
:artist="album.artists[0].name"
|
||||
:album="album.name"
|
||||
class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image"
|
||||
class="is-clickable is-medium"
|
||||
@click="show_details_modal = true"
|
||||
/>
|
||||
</template>
|
||||
|
@ -24,7 +24,7 @@
|
||||
:url="album.artwork_url"
|
||||
:artist="album.artist"
|
||||
:album="album.name"
|
||||
class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image"
|
||||
class="is-clickable is-medium"
|
||||
@click="show_details_modal = true"
|
||||
/>
|
||||
</template>
|
||||
|
@ -7,7 +7,7 @@
|
||||
:url="track.artwork_url"
|
||||
:artist="track.artist"
|
||||
:album="track.album"
|
||||
class="is-clickable fd-has-shadow fd-cover-big-image"
|
||||
class="is-clickable is-big"
|
||||
:class="{ 'is-masked': lyricsStore.pane }"
|
||||
@click="open_dialog(track)"
|
||||
/>
|
||||
|
@ -24,7 +24,7 @@
|
||||
:url="album.artwork_url"
|
||||
:artist="album.artist"
|
||||
:album="album.name"
|
||||
class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image"
|
||||
class="is-clickable is-medium"
|
||||
@click="show_details_modal = true"
|
||||
/>
|
||||
</template>
|
||||
|
@ -5,7 +5,7 @@
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-four-fifths">
|
||||
<div class="columns is-flex-direction-row-reverse">
|
||||
<div class="column fd-has-cover">
|
||||
<div class="column has-cover">
|
||||
<slot name="heading-right" />
|
||||
</div>
|
||||
<div
|
||||
@ -23,14 +23,10 @@
|
||||
<div class="container">
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-four-fifths">
|
||||
<!-- Slot content -->
|
||||
<slot name="content" />
|
||||
<!-- Slot footer -->
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script></script>
|
||||
|
Loading…
x
Reference in New Issue
Block a user