[web] Replace custom CSS styles with standard Bulma styles

Standard Bulma styles are now used over custom styles.
This commit is contained in:
Alain Nussbaumer 2023-07-01 09:48:38 +02:00
parent efe5f24049
commit 60f1c84a21
11 changed files with 15 additions and 23 deletions

View File

@ -7,7 +7,7 @@
<div class="card">
<div class="card-content">
<p class="title is-4" v-text="$t('dialog.add.stream.title')" />
<form class="fd-has-margin-bottom" @submit.prevent="play">
<form class="mb-5" @submit.prevent="play">
<div class="field">
<p class="control is-expanded has-icons-left">
<input

View File

@ -10,7 +10,7 @@
:artwork_url="album.artwork_url"
:artist="album.artist"
:album="album.name"
class="fd-has-shadow fd-has-margin-bottom fd-cover fd-cover-normal-image"
class="fd-has-shadow fd-cover fd-cover-normal-image mb-5"
/>
<p class="title is-4">
<a

View File

@ -7,7 +7,7 @@
<div class="card">
<div class="card-content">
<p class="title is-4" v-text="$t('dialog.playlist.save.title')" />
<form class="fd-has-margin-bottom" @submit.prevent="save">
<form class="mb-5" @submit.prevent="save">
<div class="field">
<p class="control is-expanded has-icons-left">
<input

View File

@ -1,6 +1,6 @@
<template>
<nav
class="fd-top-navbar navbar is-light is-fixed-top"
class="navbar is-light is-fixed-top"
:style="zindex"
role="navigation"
aria-label="main navigation"

View File

@ -10,7 +10,7 @@
:artwork_url="artwork_url"
:artist="album.artist"
:album="album.name"
class="fd-has-shadow fd-has-margin-bottom fd-cover fd-cover-normal-image"
class="fd-has-shadow fd-cover fd-cover-normal-image mb-5"
@load="artwork_loaded"
@error="artwork_error"
/>

View File

@ -31,14 +31,6 @@ a.navbar-item {
cursor: move;
}
.fd-has-margin-top {
margin-top: 24px;
}
.fd-has-margin-bottom {
margin-bottom: 24px;
}
.fd-is-square .button {
height: 27px;
min-width: 27px;

View File

@ -6,7 +6,7 @@
<h2 class="subtitle is-6 has-text-link has-text-weight-normal">
<a class="has-text-link" @click="open_artist" v-text="album.artist" />
</h2>
<div class="buttons fd-is-centered-mobile fd-has-margin-top">
<div class="buttons fd-is-centered-mobile mt-5">
<a class="button is-small is-dark is-rounded" @click="play">
<mdicon class="icon" name="shuffle" size="16" />
<span v-text="$t('page.album.shuffle')" />
@ -30,7 +30,7 @@
</template>
<template #content>
<p
class="heading is-7 has-text-centered-mobile fd-has-margin-top"
class="heading is-7 has-text-centered-mobile mt-5"
v-text="$t('page.album.track-count', { count: album.track_count })"
/>
<list-tracks :tracks="tracks" :uris="album.uri" />

View File

@ -6,7 +6,7 @@
<h2 class="subtitle is-6 has-text-link has-text-weight-normal">
<a class="has-text-link" @click="open_artist" v-text="album.artist" />
</h2>
<div class="buttons fd-is-centered-mobile fd-has-margin-top">
<div class="buttons fd-is-centered-mobile mt-5">
<a class="button is-small is-dark is-rounded" @click="play">
<mdicon class="icon" name="play" size="16" />
<span v-text="$t('page.audiobooks.album.play')" />
@ -30,7 +30,7 @@
</template>
<template #content>
<p
class="heading is-7 has-text-centered-mobile fd-has-margin-top"
class="heading is-7 has-text-centered-mobile mt-5"
v-text="
$t('page.audiobooks.album.track-count', {
count: album.track_count

View File

@ -16,7 +16,7 @@
<div class="notification is-size-7">
<span v-text="$t('page.settings.services.spotify.requirements')" />
</div>
<div class="fd-has-margin-top">
<div class="mt-5">
<p
class="content"
v-html="$t('page.settings.services.spotify.grant-access')"
@ -29,7 +29,7 @@
<span v-text="$t('page.settings.services.spotify.reauthorize')" />
<code v-text="spotify_missing_scope.join()" />
</p>
<div class="field fd-has-margin-top">
<div class="field mt-5">
<div class="control">
<a
class="button"
@ -49,7 +49,7 @@
</p>
<div
v-if="spotify.webapi_token_valid"
class="field fd-has-margin-top"
class="field mt-5"
>
<div class="control">
<a

View File

@ -66,7 +66,7 @@
</div>
<form
v-if="output.needs_auth_key"
class="fd-has-margin-bottom"
class="mb-5"
@submit.prevent="kickoff_verification(output.id)"
>
<div class="field is-grouped">

View File

@ -10,7 +10,7 @@
v-text="album.artists[0].name"
/>
</h2>
<div class="buttons fd-is-centered-mobile fd-has-margin-top">
<div class="buttons fd-is-centered-mobile mt-5">
<a class="button is-small is-dark is-rounded" @click="play">
<mdicon class="icon" name="shuffle" size="16" />
<span v-text="$t('page.spotify.album.shuffle')" />
@ -34,7 +34,7 @@
</template>
<template #content>
<p
class="heading is-7 has-text-centered-mobile fd-has-margin-top"
class="heading is-7 has-text-centered-mobile mt-5"
v-text="
$t('page.spotify.album.track-count', { count: album.tracks.total })
"