[web] Migrate to Bulma 1.0.2

web-src/package-lock.json

@@ -3062,9 +3062,9 @@
       "license": "MIT"
     },
     "node_modules/vite": {
-      "version": "5.4.3",
+      "version": "5.4.6",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.6.tgz",
-      "integrity": "sha512-IH+nl64eq9lJjFqU+/yrRnrHPVTlgy42/+IzbOdaFDVlyLgI/wDlf+FCobXLX1cT0X5+7LMyH1mIy2xJdLfo8Q==",
+      "integrity": "sha512-IeL5f8OO5nylsgzd9tq4qD2QqI0k2CQLGrWD0rCN0EQJZpBK5vJAx0I+GDkMOXxQX/OfFHMuLIx6ddAxGX/k+Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

web-src/src/App.vue

@@ -5,7 +5,6 @@
     <router-view v-slot="{ Component }">
       <component :is="Component" />
     </router-view>
-
     <modal-dialog-remote-pairing
       :show="pairing_active"
       @close="pairing_active = false"
@@ -18,7 +17,7 @@
     <navbar-bottom />
     <div
       v-show="show_burger_menu || show_player_menu"
-      class="fd-overlay-fullscreen"
+      class="overlay-fullscreen"
       @click="show_burger_menu = show_player_menu = false"
     />
   </div>

web-src/src/components/ControlMainVolume.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="media is-align-items-center pt-0">
     <div class="media-left">
-      <a class="button is-white is-small" @click="toggle">
+      <a class="button is-small" @click="toggle">
         <mdicon class="icon" :name="icon" />
       </a>
     </div>

web-src/src/components/ControlOutputVolume.vue

@@ -2,7 +2,7 @@
   <div class="media is-align-items-center pt-0">
     <div class="media-left">
       <a
-        class="button is-white is-small"
+        class="button is-small"
         :class="{ 'has-text-grey-light': !output.selected }"
         @click="toggle"
       >

web-src/src/components/ControlStreamVolume.vue

@@ -2,7 +2,7 @@
   <div class="media is-align-items-center pt-0">
     <div class="media-left">
       <a
-        class="button is-white is-small"
+        class="button is-small"
         :class="{
           'has-text-grey-light': !playing && !loading,
           'is-loading': loading

web-src/src/components/ControlSwitch.vue

@@ -1,14 +1,22 @@
 <template>
-  <label class="toggle">
+  <div class="field">
-    <input
+    <label class="toggle">
-      :checked="modelValue"
+      <div class="control is-flex is-align-content-center">
-      type="checkbox"
+        <input
-      class="toggle-checkbox is-rounded mr-2"
+          :checked="modelValue"
-      @change="$emit('update:modelValue', !modelValue)"
+          type="checkbox"
-    />
+          class="toggle-checkbox"
-    <div class="toggle-switch"></div>
+          @change="$emit('update:modelValue', !modelValue)"
-    <slot name="label" class="toggle-label" />
+        />
-  </label>
+        <div class="toggle-switch" />
+        <slot name="label" />
+        <slot name="info" />
+      </div>
+    </label>
+    <p v-if="$slots['help']" class="help notification">
+      <slot name="help" />
+    </p>
+  </div>
 </template>
 
 <script>
@@ -29,10 +37,11 @@ export default {
 
 .toggle-switch {
   display: inline-block;
-  background: var(--bulma-grey-light);
+  background: var(--bulma-grey-lighter);
   border-radius: 1rem;
-  width: 2.75rem;
+  min-width: 2.5rem;
-  height: 1.5rem;
+  width: 2.5rem;
+  height: 1.25rem;
   position: relative;
   vertical-align: middle;
   transition: background 0.25s;
@@ -49,18 +58,18 @@ export default {
   width: 1rem;
   height: 1rem;
   position: absolute;
-  top: 0.25rem;
+  top: 0.125rem;
-  left: 0.25rem;
+  left: 0.125rem;
   transition: left 0.25s;
 }
 .toggle:hover .toggle-switch:before {
   background: var(--bulma-white);
 }
 .toggle-checkbox:checked + .toggle-switch {
-  background: var(--bulma-primary);
+  background: var(--bulma-dark);
 }
 .toggle-checkbox:checked + .toggle-switch:before {
-  left: 1.5rem;
+  left: 1.375rem;
 }
 
 .toggle-checkbox {

web-src/src/components/ListAlbums.vue

@@ -3,7 +3,7 @@
     <div v-if="!item.isItem" class="py-5">
       <span
         :id="`index_${item.index}`"
-        class="tag is-info is-light is-small has-text-weight-bold"
+        class="tag is-small has-text-weight-bold"
         v-text="item.index"
       />
     </div>

web-src/src/components/ListArtists.vue

@@ -4,7 +4,7 @@
       <div class="media-content">
         <span
           :id="`index_${item.index}`"
-          class="tag is-info is-light is-small has-text-weight-bold"
+          class="tag is-small has-text-weight-bold"
           v-text="item.index"
         />
       </div>

web-src/src/components/ListComposers.vue

@@ -4,7 +4,7 @@
       <div class="media-content">
         <span
           :id="`index_${item.index}`"
-          class="tag is-info is-light is-small has-text-weight-bold"
+          class="tag is-small has-text-weight-bold"
           v-text="item.index"
         />
       </div>

web-src/src/components/ListGenres.vue

@@ -4,7 +4,7 @@
       <div class="media-content">
         <span
           :id="`index_${item.index}`"
-          class="tag is-info is-light is-small has-text-weight-bold"
+          class="tag is-small has-text-weight-bold"
           v-text="item.index"
         />
       </div>

web-src/src/components/ListTracks.vue

@@ -3,7 +3,7 @@
     <div v-if="!item.isItem" class="py-5">
       <span
         :id="`index_${item.index}`"
-        class="tag is-info is-light is-small has-text-weight-bold"
+        class="tag is-small has-text-weight-bold"
         v-text="item.index"
       />
     </div>

web-src/src/components/ModalDialog.vue

@@ -11,17 +11,13 @@
       </a>
       <a
         v-if="delete_action"
-        class="card-footer-item has-background-danger has-text-white has-text-weight-bold"
+        class="card-footer-item has-background-danger"
         @click="$emit('delete')"
       >
         <mdicon class="icon" name="delete" size="16" />
         <span class="is-size-7" v-text="delete_action" />
       </a>
-      <a
+      <a v-if="ok_action" class="card-footer-item" @click="$emit('ok')">
-        v-if="ok_action"
-        class="card-footer-item has-background-info has-text-white has-text-weight-bold"
-        @click="$emit('ok')"
-      >
         <mdicon class="icon" name="check" size="16" />
         <span class="is-size-7" v-text="ok_action" />
       </a>

web-src/src/components/ModalDialogAddRss.vue

@@ -7,7 +7,7 @@
           <input
             ref="url_field"
             v-model="url"
-            class="input is-shadowless"
+            class="input"
             type="url"
             pattern="http[s]?://.+"
             required
@@ -33,7 +33,7 @@
       </a>
       <a
         :class="{ 'is-disabled': disabled }"
-        class="card-footer-item has-background-info has-text-white has-text-weight-bold"
+        class="card-footer-item"
         @click="add_stream"
       >
         <mdicon class="icon" name="playlist-plus" size="16" />

web-src/src/components/ModalDialogAddUrlStream.vue

@@ -8,7 +8,7 @@
             <input
               ref="url_field"
               v-model="url"
-              class="input is-shadowless"
+              class="input"
               type="url"
               pattern="http[s]?://.+"
               required

web-src/src/components/ModalDialogPlaylistSave.vue

@@ -8,7 +8,7 @@
             <input
               ref="playlist_name_field"
               v-model="playlist_name"
-              class="input is-shadowless"
+              class="input"
               type="text"
               pattern=".+"
               required
@@ -34,7 +34,7 @@
       </a>
       <a
         :class="{ 'is-disabled': disabled }"
-        class="card-footer-item has-background-info has-text-white has-text-weight-bold"
+        class="card-footer-item has-text-weight-bold"
         @click="save"
       >
         <mdicon class="icon" name="content-save" size="16" />

web-src/src/components/ModalDialogRemotePairing.vue

@@ -23,10 +23,7 @@
         <mdicon class="icon" name="cancel" size="16" />
         <span class="is-size-7" v-text="$t('dialog.remote-pairing.cancel')" />
       </a>
-      <a
+      <a class="card-footer-item" @click="kickoff_pairing">
-        class="card-footer-item has-background-info has-text-white has-text-weight-bold"
-        @click="kickoff_pairing"
-      >
         <mdicon class="icon" name="cellphone" size="16" />
         <span class="is-size-7" v-text="$t('dialog.remote-pairing.pair')" />
       </a>

web-src/src/components/ModalDialogUpdate.vue

@@ -9,8 +9,8 @@
   >
     <template #modal-content>
       <div v-if="!libraryStore.updating">
-        <p class="mb-3" v-text="$t('dialog.update.info')" />
         <div v-if="spotify_enabled || rss.tracks > 0" class="field">
+          <label class="label" v-text="$t('dialog.update.info')" />
           <div class="control">
             <div class="select is-small">
               <select v-model="libraryStore.update_dialog_scan_kind">
@@ -30,13 +30,11 @@
             </div>
           </div>
         </div>
-        <div class="field">
+        <control-switch v-model="rescan_metadata">
-          <control-switch v-model="rescan_metadata">
+          <template #label>
-            <template #label>
+            <span v-text="$t('dialog.update.rescan-metadata')" />
-              <span v-text="$t('dialog.update.rescan-metadata')" />
+          </template>
-            </template>
+        </control-switch>
-          </control-switch>
-        </div>
       </div>
       <div v-else>
         <p class="mb-3" v-text="$t('dialog.update.progress')" />

web-src/src/components/NavbarBottom.vue

@@ -18,9 +18,9 @@
         <control-link
           :to="{ name: 'now-playing' }"
           exact
-          class="navbar-item is-expanded is-clipped is-size-7"
+          class="navbar-item is-justify-content-flex-start is-expanded is-clipped is-size-7"
         >
-          <div class="fd-is-text-clipped">
+          <div class="is-text-clipped">
             <strong v-text="current.title" />
             <br />
             <span v-text="current.artist" />
@@ -134,3 +134,11 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.is-text-clipped {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

web-src/src/components/SettingsCheckbox.vue

@@ -1,23 +1,23 @@
 <template>
-  <div class="field">
+  <control-switch v-model="setting.value" @update:model-value="update">
-    <control-switch
+    <template #label>
-      :id="setting.name"
+      <slot name="label" />
-      v-model="setting.value"
+    </template>
-      @update:model-value="update_setting"
+    <template #info>
-    >
+      <mdicon
-      <template #label>
+        v-if="isSuccess"
-        <slot name="label" />
+        class="icon has-text-info"
-      </template>
+        name="check"
-    </control-switch>
+        size="16"
-    <i
+      />
-      class="is-size-7"
+      <mdicon
-      :class="{ 'has-text-info': is_success, 'has-text-danger': is_error }"
+        v-if="isError"
-      v-text="info"
+        class="icon has-text-danger"
-    />
+        name="close"
-    <p v-if="$slots['info']" class="help">
+        size="16"
-      <slot name="info" />
+      />
-    </p>
+    </template>
-  </div>
+  </control-switch>
 </template>
 
 <script>
@@ -48,18 +48,10 @@ export default {
   },
 
   computed: {
-    info() {
+    isError() {
-      if (this.is_success) {
-        return this.$t('setting.saved')
-      } else if (this.is_error) {
-        return this.$t('setting.not-saved')
-      }
-      return ''
-    },
-    is_error() {
       return this.statusUpdate === 'error'
     },
-    is_success() {
+    isSuccess() {
       return this.statusUpdate === 'success'
     },
     setting() {
@@ -76,13 +68,13 @@ export default {
   },
 
   methods: {
-    clear_status() {
+    clearStatus() {
       if (this.is_error) {
         this.setting.value = !this.setting.value
       }
       this.statusUpdate = ''
     },
-    update_setting() {
+    update() {
       this.timerId = -1
       const setting = {
         category: this.category,
@@ -99,7 +91,7 @@ export default {
           this.statusUpdate = 'error'
         })
         .finally(() => {
-          this.timerId = window.setTimeout(this.clear_status, this.timerDelay)
+          this.timerId = window.setTimeout(this.clearStatus, this.timerDelay)
         })
     }
   }

web-src/src/i18n/de.json

@@ -241,6 +241,7 @@
       "compiled-with": "Compiliert mit Unterstützung von {options}.",
       "library": "Bibliothek",
       "more": "mehr",
+      "name": "Name",
       "total-playtime": "Gesamte Spielzeit",
       "tracks": "Tracks",
       "update": "Neu einlesen",
@@ -407,8 +408,8 @@
       "count": "{count} Track|{count} Track|{count} Tracks",
       "edit": "Bearbeiten",
       "hide-previous": "Vorherige verbergen",
-      "title": "Warteschlange",
+      "save": "Speichern",
-      "save": "Speichern"
+      "title": "Warteschlange"
     },
     "radio": {
       "count": "{count} Station|{count} Station|{count} Stationen",
@@ -494,8 +495,7 @@
         "spotify": {
           "no-support": "OwnTone wurde entweder ohne Unterstützung für Spotify erstellt oder libspotify ist nicht installiert.",
           "logged-as": "Angemeldet als ",
-          "requirements": "Spotify Premium Abo erforderlich.",
+          "requirements": "Spotify Premium Abo erforderlich. Zugriff auf die Spotify Web-Api ermöglicht scannen der Spotify-Blibliothek. Erforderliche scopes sind: ",
-          "scopes": "Zugriff auf die Spotify Web-Api ermöglicht scannen der Spotify-Blibliothek. Erforderliche scopes sind: ",
           "user": "Zugriff gestattet für ",
           "authorize": "Authorisiere Web-API-Zugriff",
           "grant-access": "Zugriff auf die Spotify Web-API gestatten",
@@ -571,10 +571,6 @@
       "toggle-lyrics": "Liedtexte anzeigen/verbergen"
     }
   },
-  "setting": {
-    "not-saved": " (Fehler beim Speichern der Einstellungen)",
-    "saved": " (Einstellungen gesichert)"
-  },
   "server": {
     "connection-failed": "Fehler bei Verbindung zum OwnTone-Server",
     "missing-port": "Fehlender Websocket-Port",

web-src/src/i18n/en.json

@@ -241,6 +241,7 @@
       "compiled-with": "Compiled with support for {options}.",
       "library": "Library",
       "more": "more",
+      "name": "Name",
       "total-playtime": "Total playtime",
       "tracks": "Tracks",
       "update": "Update",
@@ -407,8 +408,8 @@
       "count": "{count} track|{count} track|{count} tracks",
       "edit": "Edit",
       "hide-previous": "Hide previous",
-      "title": "Queue",
+      "save": "Save",
-      "save": "Save"
+      "title": "Queue"
     },
     "radio": {
       "count": "{count} station|{count} station|{count} stations",
@@ -494,8 +495,7 @@
         "spotify": {
           "no-support": "OwnTone was either built without support for Spotify or libspotify is not installed.",
           "logged-as": "Logged in as ",
-          "requirements": "You must have a Spotify premium account.",
+          "requirements": "You must have a Spotify premium account. Access to the Spotify Web API enables scanning of your Spotify library. Required scopes are: ",
-          "scopes": "Access to the Spotify Web API enables scanning of your Spotify library. Required scopes are: ",
           "user": "Access granted for ",
           "authorize": "Authorize Web API access",
           "grant-access": "Grant access to the Spotify Web API",
@@ -571,10 +571,6 @@
       "toggle-lyrics": "Toggle lyrics"
     }
   },
-  "setting": {
-    "not-saved": " (error saving setting)",
-    "saved": " (setting saved)"
-  },
   "server": {
     "connection-failed": "Failed to connect to OwnTone server",
     "missing-port": "Missing websocket port",

web-src/src/i18n/fr.json

@@ -241,6 +241,7 @@
       "compiled-with": "Compilé avec les options {options}.",
       "library": "Bibliothèque",
       "more": "plus",
+      "name": "Nom",
       "total-playtime": "Durée totale de lecture",
       "tracks": "Pistes",
       "update": "Actualiser",
@@ -407,8 +408,8 @@
       "count": "{count} piste|{count} piste|{count} pistes",
       "edit": "Éditer",
       "hide-previous": "Masquer l’historique",
-      "queue": "File d’attente",
+      "save": "Enregistrer",
-      "save": "Enregistrer"
+      "title": "File d’attente"
     },
     "radio": {
       "count": "{count} station|{count} station|{count} stations",
@@ -494,8 +495,7 @@
         "spotify": {
           "no-support": "L’option Spotify n’est pas présente.",
           "logged-as": "Connecté en tant que ",
-          "requirements": "Vous devez posséder un compte Spotify Premium.",
+          "requirements": "Vous devez posséder un compte Spotify Premium. L’accès à l’API de Spotify permet l’analyse de votre bibliothèque Spotify. Les champs d’application requis sont les suivants :",
-          "scopes": "L’accès à l’API de Spotify permet l’analyse de votre bibliothèque Spotify. Les champs d’application requis sont les suivants :",
           "user": "Accès autorisé pour ",
           "authorize": "Autoriser l’accès à l’API",
           "grant-access": "Accordez l’accès à l’API de Spotify",
@@ -571,10 +571,6 @@
       "toggle-lyrics": "Voir/Cacher les paroles"
     }
   },
-  "setting": {
-    "not-saved": " (erreur à l’enregistrement du réglage)",
-    "saved": " (réglage enregistré)"
-  },
   "server": {
     "connection-failed": "Échec de connexion au serveur",
     "missing-port": "Port websocket manquant",

web-src/src/i18n/zh-CN.json

@@ -241,6 +241,7 @@
       "compiled-with": "编译支持来自于 {options}",
       "library": "资料库",
       "more": "更多",
+      "name": "名称",
       "total-playtime": "总播放时长",
       "tracks": "曲目总数",
       "update": "更新",
@@ -407,8 +408,8 @@
       "count": "{count} 只曲目|{count} 只曲目",
       "edit": "编辑",
       "hide-previous": "隐藏历史",
-      "title": "清单",
+      "save": "保存",
-      "save": "保存"
+      "title": "清单"
     },
     "radio": {
       "count": "{count} 个电台|{count} 个电台",
@@ -494,8 +495,7 @@
         "spotify": {
           "no-support": "OwnTone的构建没有来自 Spotify 官方的支持，也未安装 libspotify",
           "logged-as": "登录为 ",
-          "requirements": "您必须拥有 Spotify付费帐户",
+          "requirements": "您必须拥有 Spotify付费帐户。访问 Spotify Web API 可以扫描您的 Spotify库。所需范围是：",
-          "scopes": "访问 Spotify Web API 可以扫描您的 Spotify库。所需范围是：",
           "user": "授予访问权限",
           "authorize": "授权 Web API 访问",
           "grant-access": "授予对 Spotify Web API 的访问权限",
@@ -571,10 +571,6 @@
       "toggle-lyrics": "显示/隐藏歌词"
     }
   },
-  "setting": {
-    "not-saved": " (设置保存错误)",
-    "saved": " (设置已保存)"
-  },
   "server": {
     "connection-failed": "无法连接到 OwnTone 服务器",
     "missing-port": "缺少 websocket 端口",

web-src/src/i18n/zh-TW.json

@@ -241,6 +241,7 @@
       "compiled-with": "編譯支持來自於 {options}",
       "library": "資料庫",
       "more": "更多",
+      "name": "名稱",
       "total-playtime": "總播放時長",
       "tracks": "曲目總數",
       "update": "更新",
@@ -407,8 +408,8 @@
       "count": "{count} 首曲目|{count} 首曲目",
       "edit": "編輯",
       "hide-previous": "隱藏歷史",
-      "title": "清單",
+      "save": "儲存",
-      "save": "儲存"
+      "title": "清單"
     },
     "radio": {
       "count": "{count} 個電台|{count} 個電台",
@@ -494,8 +495,7 @@
         "spotify": {
           "no-support": "OwnTone並無 Spotify 官方的支持，也未安裝 libspotify",
           "logged-as": "登入為 ",
-          "requirements": "您必須擁有 Spotify付費帳戶",
+          "requirements": "您必須擁有 Spotify付費帳戶。訪問 Spotify Web API 可以掃描您的 Spotify庫。所需範圍是：",
-          "scopes": "訪問 Spotify Web API 可以掃描您的 Spotify庫。所需範圍是：",
           "user": "授予訪問權限",
           "authorize": "授權 Web API 訪問",
           "grant-access": "授予對 Spotify Web API 的訪問權限",
@@ -571,10 +571,6 @@
       "toggle-lyrics": "顯示/隱藏歌詞"
     }
   },
-  "setting": {
-    "not-saved": " (設定儲存錯誤)",
-    "saved": " (設定已儲存)"
-  },
   "server": {
     "connection-failed": "無法連接到 OwnTone 伺服器",
     "missing-port": "缺少 websocket 端口",

web-src/src/mystyles.scss

@@ -11,12 +11,6 @@
   cursor: move;
 }
 
-.fd-is-text-clipped {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .fd-tabs-section {
   padding-bottom: 0;
   padding-top: 0;
@@ -44,6 +38,11 @@
   }
 }
 
+.navbar-item {
+  width: var(--bulma-navbar-height);
+  justify-content: center;
+}
+
 .fd-cover {
   align-items: center;
   display: flex;
@@ -112,24 +111,16 @@
 
 /* Only scroll content if modal contains a card component */
 .modal-content .card-content {
-  max-height: calc(100vh - 200px);
+  max-height: calc(100vh - calc(4 * var(--bulma-navbar-height)));
   overflow: auto;
 }
 
-/* Show scrollbar for navbar menu in desktop mode if content exceeds the screen size */
-@include desktop {
-  .navbar-dropdown {
-    max-height: calc(100vh - calc(2 * var(--bulma-navbar-height)) - 2rem);
-    overflow: auto;
-  }
-}
-
 .buttons {
   @include mobile {
-    &.fd-is-centered-mobile {
+    &.is-centered-mobile {
       justify-content: center;
       &:not(.has-addons) {
-        .button:not(.is-fullwidth) {
+        .button {
           margin-left: 0.25rem;
           margin-right: 0.25rem;
         }
@@ -157,7 +148,7 @@
   }
 }
 
-.fd-overlay-fullscreen {
+.overlay-fullscreen {
   @extend .is-overlay;
   z-index: 25;
   background-color: rgba(10, 10, 10, 0.2);
@@ -187,9 +178,9 @@
   box-sizing: border-box;
   border-radius: 50%;
   background: var(--bulma-light);
-  border: 1px solid var(--bulma-grey-light);
+  border: 1px solid var(--bulma-grey-lighter);
   @media (prefers-color-scheme: dark) {
-    background: var(--bulma-grey-light);
+    background: var(--bulma-grey-lighter);
     border: 1px solid var(--bulma-grey-dark);
   }
 }
@@ -209,12 +200,12 @@
   background: linear-gradient(
     90deg,
     var(--bulma-dark) var(--sx),
-    var(--bulma-grey-light) var(--sx)
+    var(--bulma-grey-lighter) var(--sx)
   );
   @media (prefers-color-scheme: dark) {
     background: linear-gradient(
       90deg,
-      var(--bulma-grey-light) var(--sx),
+      var(--bulma-grey-lighter) var(--sx),
       var(--bulma-grey-dark) var(--sx)
     );
   }

web-src/src/pages/PageAbout.vue

@@ -5,13 +5,11 @@
         <div class="column is-four-fifths">
           <div class="content">
             <nav class="level">
-              <!-- Left side -->
               <div class="level-left">
                 <div class="level-item">
                   <p class="title is-4" v-text="$t('page.about.library')" />
                 </div>
               </div>
-              <!-- Right side -->
               <div class="level-right">
                 <div v-if="library.updating">
                   <a
@@ -31,7 +29,7 @@
             <div class="media">
               <div
                 class="media-content has-text-weight-bold"
-                v-text="$t('page.about.library')"
+                v-text="$t('page.about.name')"
               />
               <div class="media-right" v-text="configuration.library_name" />
             </div>

web-src/src/pages/PageAlbum.vue

@@ -6,13 +6,16 @@
         <p class="subtitle is-6 has-text-link">
           <a class="has-text-link" @click="open_artist" v-text="album.artist" />
         </p>
-        <div class="buttons fd-is-centered-mobile mt-5">
+        <div class="buttons is-centered-mobile mt-5">
-          <a class="button is-small is-dark is-rounded" @click="play">
+          <a
+            class="button has-background-light is-small is-rounded"
+            @click="play"
+          >
             <mdicon class="icon" name="shuffle" size="16" />
             <span v-text="$t('page.album.shuffle')" />
           </a>
           <a
-            class="button is-small is-light is-rounded"
+            class="button is-small has-background-light is-rounded"
             @click="show_details_modal = true"
           >
             <mdicon class="icon" name="dots-horizontal" size="16" />

web-src/src/pages/PageAlbumSpotify.vue

@@ -10,7 +10,7 @@
             v-text="album.artists[0].name"
           />
         </p>
-        <div class="buttons fd-is-centered-mobile mt-5">
+        <div class="buttons 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')" />

web-src/src/pages/PageAlbums.vue

@@ -7,22 +7,25 @@
         <div class="columns">
           <div class="column">
             <p class="heading" v-text="$t('page.albums.filter')" />
-            <div class="field">
+            <control-switch v-model="uiStore.hide_singles">
-              <control-switch v-model="uiStore.hide_singles">
+              <template #label>
-                <template #label>
+                <span v-text="$t('page.albums.hide-singles')" />
-                  <span v-text="$t('page.albums.hide-singles')" />
+              </template>
-                </template>
+              <template #help>
-              </control-switch>
+                <span v-text="$t('page.albums.hide-singles-help')" />
-              <p class="help" v-text="$t('page.albums.hide-singles-help')" />
+              </template>
-            </div>
+            </control-switch>
-            <div v-if="spotify_enabled" class="field">
+            <control-switch
-              <control-switch v-model="uiStore.hide_spotify">
+              v-if="spotify_enabled"
-                <template #label>
+              v-model="uiStore.hide_spotify"
-                  <span v-text="$t('page.albums.hide-spotify')" />
+            >
-                </template>
+              <template #label>
-              </control-switch>
+                <span v-text="$t('page.albums.hide-spotify')" />
-              <p class="help" v-text="$t('page.albums.hide-spotify-help')" />
+              </template>
-            </div>
+              <template #help>
+                <span v-text="$t('page.albums.hide-spotify-help')" />
+              </template>
+            </control-switch>
           </div>
           <div class="column">
             <p class="heading" v-text="$t('page.albums.sort.title')" />

web-src/src/pages/PageArtist.vue

@@ -5,14 +5,17 @@
         <div class="columns">
           <div class="column">
             <p class="heading" v-text="$t('page.artist.filter')" />
-            <div v-if="spotify_enabled" class="field">
+            <control-switch
-              <control-switch v-model="uiStore.hide_spotify">
+              v-if="spotify_enabled"
-                <template #label>
+              v-model="uiStore.hide_spotify"
-                  <span v-text="$t('page.artist.hide-spotify')" />
+            >
-                </template>
+              <template #label>
-              </control-switch>
+                <span v-text="$t('page.artist.hide-spotify')" />
-              <p class="help" v-text="$t('page.artist.hide-spotify-help')" />
+              </template>
-            </div>
+              <template #help>
+                <span v-text="$t('page.artist.hide-spotify-help')" />
+              </template>
+            </control-switch>
           </div>
           <div class="column">
             <p class="heading" v-text="$t('page.artist.sort.title')" />

web-src/src/pages/PageArtistTracks.vue

@@ -6,14 +6,17 @@
         <div class="columns">
           <div class="column">
             <p class="heading" v-text="$t('page.artist.filter')" />
-            <div v-if="spotify_enabled" class="field">
+            <control-switch
-              <control-switch v-model="uiStore.hide_spotify">
+              v-if="spotify_enabled"
-                <template #label>
+              v-model="uiStore.hide_spotify"
-                  <span v-text="$t('page.artist.hide-spotify')" />
+            >
-                </template>
+              <template #label>
-              </control-switch>
+                <span v-text="$t('page.artist.hide-spotify')" />
-              <p class="help" v-text="$t('page.artist.hide-spotify-help')" />
+              </template>
-            </div>
+              <template #help>
+                <span v-text="$t('page.artist.hide-spotify-help')" />
+              </template>
+            </control-switch>
           </div>
           <div class="column">
             <p class="heading" v-text="$t('page.artist.sort.title')" />

web-src/src/pages/PageArtists.vue

@@ -6,22 +6,24 @@
         <index-button-list :indices="artists.indices" />
         <div class="columns">
           <div class="column">
-            <p class="heading" v-text="$t('page.artists.filter')" />
+            <p v-text="$t('page.artists.filter')" class="heading" />
-            <div class="field">
+            <control-switch v-model="uiStore.hide_singles">
-              <control-switch v-model="uiStore.hide_singles">
+              <template #label>
-                <template #label>
+                <span v-text="$t('page.artists.hide-singles')" />
-                  <span v-text="$t('page.artists.hide-singles')" />
+              </template>
-                </template>
+              <template #help>
-              </control-switch>
+                <span v-text="$t('page.artists.hide-singles-help')" />
-              <p class="help" v-text="$t('page.artists.hide-singles-help')" />
+              </template>
-            </div>
+            </control-switch>
             <div v-if="spotify_enabled" class="field">
               <control-switch v-model="uiStore.hide_spotify">
                 <template #label>
                   <span v-text="$t('page.artists.hide-spotify')" />
                 </template>
+                <template #help>
+                  <span v-text="$t('page.artists.hide-spotify-help')" />
+                </template>
               </control-switch>
-              <p class="help" v-text="$t('page.artists.hide-spotify-help')" />
             </div>
           </div>
           <div class="column">

web-src/src/pages/PageAudiobooksAlbum.vue

@@ -6,7 +6,7 @@
         <p class="subtitle is-6 has-text-link">
           <a class="has-text-link" @click="open_artist" v-text="album.artist" />
         </p>
-        <div class="buttons fd-is-centered-mobile mt-5">
+        <div class="buttons 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')" />

web-src/src/pages/PageMusic.vue

@@ -12,7 +12,7 @@
         <nav class="level">
           <p class="level-item">
             <router-link
-              class="button is-light is-small is-rounded"
+              class="button is-small is-rounded"
               :to="{ name: 'music-recently-added' }"
             >
               {{ $t('page.music.show-more') }}
@@ -32,7 +32,7 @@
         <nav class="level">
           <p class="level-item">
             <router-link
-              class="button is-light is-small is-rounded"
+              class="button is-small is-rounded"
               :to="{ name: 'music-recently-played' }"
             >
               {{ $t('page.music.show-more') }}

web-src/src/pages/PageMusicSpotify.vue

@@ -13,7 +13,7 @@
           <p class="level-item">
             <router-link
               :to="{ name: 'music-spotify-new-releases' }"
-              class="button is-light is-small is-rounded"
+              class="button is-small is-rounded"
             >
               {{ $t('page.spotify.music.show-more') }}
             </router-link>
@@ -36,7 +36,7 @@
           <p class="level-item">
             <router-link
               :to="{ name: 'music-spotify-featured-playlists' }"
-              class="button is-light is-small is-rounded"
+              class="button is-small is-rounded"
             >
               {{ $t('page.spotify.music.show-more') }}
             </router-link>

web-src/src/pages/PageNowPlaying.vue

@@ -1,56 +1,56 @@
 <template>
   <div class="hero is-full-height">
-    <div v-if="track.id > 0" class="hero-body is-flex is-align-items-center">
+    <div class="hero-body is-flex is-align-items-center">
-      <div class="container has-text-centered" style="max-width: 500px">
-        <cover-artwork
-          :url="track.artwork_url"
-          :artist="track.artist"
-          :album="track.album"
-          class="is-clickable fd-has-shadow fd-cover-big-image"
-          :class="{ 'is-masked': lyricsStore.pane }"
-          @click="open_dialog(track)"
-        />
-        <lyrics-pane v-if="lyricsStore.pane" />
-        <control-slider
-          v-model:value="track_progress"
-          class="mt-5"
-          :disabled="is_live"
-          :max="track_progress_max"
-          :cursor="cursor"
-          @change="seek"
-          @mousedown="start_dragging"
-          @mouseup="end_dragging"
-        />
-        <div class="is-flex is-justify-content-space-between">
-          <p class="subtitle is-7" v-text="track_elapsed_time" />
-          <p class="subtitle is-7" v-text="track_total_time" />
-        </div>
-        <p class="title is-5" v-text="track.title" />
-        <p class="title is-6" v-text="track.artist" />
-        <p
-          v-if="composer"
-          class="subtitle is-6 has-text-grey has-text-weight-bold"
-          v-text="composer"
-        />
-        <p v-if="track.album" class="subtitle is-6" v-text="track.album" />
-        <p
-          v-if="settingsStore.show_filepath_now_playing"
-          class="subtitle is-6 has-text-grey"
-          v-text="track.path"
-        />
-      </div>
-    </div>
-    <div v-else class="hero-body is-flex is-align-items-center">
       <div class="container has-text-centered">
-        <p class="title is-5" v-text="$t('page.now-playing.title')" />
+        <div v-if="track.id" class="mx-auto" style="max-width: 32rem">
-        <p class="subtitle" v-text="$t('page.now-playing.info')" />
+          <cover-artwork
+            :url="track.artwork_url"
+            :artist="track.artist"
+            :album="track.album"
+            class="is-clickable fd-has-shadow fd-cover-big-image"
+            :class="{ 'is-masked': lyricsStore.pane }"
+            @click="open_dialog(track)"
+          />
+          <lyrics-pane v-if="lyricsStore.pane" />
+          <control-slider
+            v-model:value="track_progress"
+            class="mt-5"
+            :disabled="is_live"
+            :max="track_progress_max"
+            :cursor="cursor"
+            @change="seek"
+            @mousedown="start_dragging"
+            @mouseup="end_dragging"
+          />
+          <div class="is-flex is-justify-content-space-between">
+            <p class="subtitle is-7" v-text="track_elapsed_time" />
+            <p class="subtitle is-7" v-text="track_total_time" />
+          </div>
+          <p class="title is-5" v-text="track.title" />
+          <p class="title is-6" v-text="track.artist" />
+          <p
+            v-if="composer"
+            class="subtitle is-6 has-text-grey has-text-weight-bold"
+            v-text="composer"
+          />
+          <p v-if="track.album" class="subtitle is-6" v-text="track.album" />
+          <p
+            v-if="settingsStore.show_filepath_now_playing"
+            class="subtitle is-6 has-text-grey"
+            v-text="track.path"
+          />
+        </div>
+        <div v-else>
+          <p class="title is-5" v-text="$t('page.now-playing.title')" />
+          <p class="subtitle" v-text="$t('page.now-playing.info')" />
+        </div>
       </div>
+      <modal-dialog-queue-item
+        :show="show_details_modal"
+        :item="selected_item"
+        @close="show_details_modal = false"
+      />
     </div>
-    <modal-dialog-queue-item
-      :show="show_details_modal"
-      :item="selected_item"
-      @close="show_details_modal = false"
-    />
   </div>
 </template>
 

web-src/src/pages/PagePodcast.vue

@@ -6,7 +6,7 @@
         <p class="subtitle is-6">
           <br />
         </p>
-        <div class="buttons fd-is-centered-mobile mt-5">
+        <div class="buttons 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.podcast.play')" />

web-src/src/pages/PageSearchLibrary.vue

@@ -9,7 +9,7 @@
                 <input
                   ref="search_field"
                   v-model="search_query"
-                  class="input is-rounded is-shadowless"
+                  class="input is-rounded"
                   type="text"
                   :placeholder="$t('page.search.placeholder')"
                   autocomplete="off"
@@ -60,7 +60,7 @@
         <nav v-if="show_all_button(items)" class="level">
           <p class="level-item">
             <a
-              class="button is-light is-small is-rounded"
+              class="button is-small is-rounded"
               @click="expand(type)"
               v-text="
                 $t(`page.search.show-${type}s`, items.total, {

web-src/src/pages/PageSearchSpotify.vue

@@ -9,7 +9,7 @@
                 <input
                   ref="search_field"
                   v-model="search_query"
-                  class="input is-rounded is-shadowless"
+                  class="input is-rounded"
                   type="text"
                   :placeholder="$t('page.spotify.search.placeholder')"
                   autocomplete="off"
@@ -55,7 +55,7 @@
         <nav v-if="show_all_button(items)" class="level">
           <p class="level-item">
             <a
-              class="button is-light is-small is-rounded"
+              class="button is-small is-rounded"
               @click="expand(type)"
               v-text="
                 $t(`page.spotify.search.show-${type}s`, items.total, {

web-src/src/pages/PageSettingsOnlineServices.vue

@@ -9,18 +9,19 @@
         />
       </template>
       <template #content>
-        <div v-if="!spotify.spotify_installed" class="notification is-size-7">
+        <div v-if="!spotify.spotify_installed" class="notification help">
           <p v-text="$t('page.settings.services.spotify.no-support')" />
         </div>
         <div v-if="spotify.spotify_installed">
-          <div class="notification is-size-7">
+          <div>
-            <span v-text="$t('page.settings.services.spotify.requirements')" />
-          </div>
-          <div class="mt-5">
             <p
               class="content"
               v-text="$t('page.settings.services.spotify.grant-access')"
             />
+            <div class="notification help">
+              <p v-text="$t('page.settings.services.spotify.requirements')" />
+              <p v-text="spotify_required_scope.join(', ')" />
+            </div>
             <p v-if="spotify.webapi_token_valid">
               <span v-text="$t('page.settings.services.spotify.user')" />
               <code v-text="spotify.webapi_user" />
@@ -29,25 +30,21 @@
               <span v-text="$t('page.settings.services.spotify.reauthorize')" />
               <code v-text="spotify_missing_scope.join()" />
             </p>
-            <div class="field mt-5">
+            <div
+              v-if="
+                !spotify.webapi_token_valid || spotify_missing_scope.length > 0
+              "
+              class="field"
+            >
               <div class="control">
                 <a
                   class="button"
-                  :class="{
-                    'is-info':
-                      !spotify.webapi_token_valid ||
-                      spotify_missing_scope.length > 0
-                  }"
                   :href="spotify.oauth_uri"
                   v-text="$t('page.settings.services.spotify.authorize')"
                 />
               </div>
             </div>
-            <p class="help">
+            <div v-if="spotify.webapi_token_valid" class="field">
-              <span v-text="$t('page.settings.services.spotify.scopes')" />
-              <code v-text="spotify_required_scope.join(', ')" />
-            </p>
-            <div v-if="spotify.webapi_token_valid" class="field mt-5">
               <div class="control">
                 <a
                   class="button is-danger"

web-src/src/pages/PageSettingsRemotesOutputs.vue

@@ -50,17 +50,14 @@
           v-text="$t('page.settings.devices.speaker-pairing-info')"
         />
         <div v-for="output in outputs" :key="output.id">
-          <div class="field">
+          <control-switch
-            <control-switch
+            v-model="output.selected"
-              :id="output.id"
+            @update:model-value="toggleOutput(output.id)"
-              v-model="output.selected"
+          >
-              @update:model-value="toggleOutput(output.id)"
+            <template #label>
-            >
+              <span v-text="output.name" />
-              <template #label>
+            </template>
-                <span v-text="output.name" />
+          </control-switch>
-              </template>
-            </control-switch>
-          </div>
           <form
             v-if="output.needs_auth_key"
             class="mb-5"

web-src/src/templates/ContentWithHeading.vue

@@ -6,14 +6,13 @@
           <section v-if="$slots.options" ref="options">
             <slot name="options" />
             <nav class="buttons is-centered">
-              <router-link class="button is-small is-white" :to="position">
+              <router-link class="button is-small" :to="position">
                 <mdicon class="icon" :name="icon" size="16" />
               </router-link>
             </nav>
           </section>
-          <div :class="{ 'is-full-height': $slots.options }">
+          <div>
             <nav id="top" class="level is-clipped">
-              <!-- Left side -->
               <div class="level-left is-flex-shrink-1">
                 <div
                   class="level-item is-flex-shrink-1 has-text-centered-mobile"
@@ -23,7 +22,6 @@
                   </div>
                 </div>
               </div>
-              <!-- Right side -->
               <div class="level-right has-text-centered-mobile">
                 <slot name="heading-right" />
               </div>

web-src/src/templates/ContentWithHero.vue

@@ -6,13 +6,11 @@
           <div class="column is-four-fifths">
             <div class="columns is-flex-direction-row-reverse">
               <div class="column fd-has-cover">
-                <!-- Slot heading right -->
                 <slot name="heading-right" />
               </div>
               <div
                 class="column m-auto is-three-fifths has-text-centered-mobile"
               >
-                <!-- Slot heading left -->
                 <slot name="heading-left" />
               </div>
             </div>