[web] Remove inline styles whenever possible

Most of the inline styles have been removed in favour of standard Bulma styles.

web-src/src/pages/PageAlbums.vue

@@ -6,11 +6,7 @@
         <index-button-list :index="albums.indexList" />
         <div class="columns">
           <div class="column">
-            <p
-              class="heading"
-              style="margin-bottom: 24px"
-              v-text="$t('page.albums.filter')"
-            />
+            <p class="heading mb-5" v-text="$t('page.albums.filter')" />
             <div class="field">
               <div class="control">
                 <input
@@ -45,11 +41,7 @@
             </div>
           </div>
           <div class="column">
-            <p
-              class="heading"
-              style="margin-bottom: 24px"
-              v-text="$t('page.albums.sort-by.title')"
-            />
+            <p class="heading mb-5" v-text="$t('page.albums.sort-by.title')" />
             <dropdown-menu
               v-model="selected_groupby_option_id"
               :options="groupby_options"

web-src/src/pages/PageArtist.vue

@@ -4,11 +4,7 @@
       <template #options>
         <div class="columns">
           <div class="column">
-            <p
-              class="heading"
-              style="margin-bottom: 24px"
-              v-text="$t('page.artist.sort-by.title')"
-            />
+            <p class="heading mb-5" v-text="$t('page.artist.sort-by.title')" />
             <dropdown-menu
               v-model="selected_groupby_option_id"
               :options="groupby_options"

web-src/src/pages/PageArtistTracks.vue

@@ -5,11 +5,7 @@
         <index-button-list :index="tracks.indexList" />
         <div class="columns">
           <div class="column">
-            <p
-              class="heading"
-              style="margin-bottom: 24px"
-              v-text="$t('page.artist.sort-by.title')"
-            />
+            <p class="heading mb-5" v-text="$t('page.artist.sort-by.title')" />
             <dropdown-menu
               v-model="selected_groupby_option_id"
               :options="groupby_options"

web-src/src/pages/PageArtists.vue

@@ -6,11 +6,7 @@
         <index-button-list :index="artists.indexList" />
         <div class="columns">
           <div class="column">
-            <p
-              class="heading"
-              style="margin-bottom: 24px"
-              v-text="$t('page.artists.filter')"
-            />
+            <p class="heading mb-5" v-text="$t('page.artists.filter')" />
             <div class="field">
               <div class="control">
                 <input
@@ -45,11 +41,7 @@
             </div>
           </div>
           <div class="column">
-            <p
-              class="heading"
-              style="margin-bottom: 24px"
-              v-text="$t('page.artists.sort-by.title')"
-            />
+            <p class="heading mb-5" v-text="$t('page.artists.sort-by.title')" />
             <dropdown-menu
               v-model="selected_groupby_option_id"
               :options="groupby_options"

web-src/src/pages/PageComposerTracks.vue

@@ -5,11 +5,7 @@
         <index-button-list :index="tracks.indexList" />
         <div class="columns">
           <div class="column">
-            <p
-              class="heading"
-              style="margin-bottom: 24px"
-              v-text="$t('page.artist.sort-by.title')"
-            />
+            <p class="heading mb-5" v-text="$t('page.artist.sort-by.title')" />
             <dropdown-menu
               v-model="selected_groupby_option_id"
               :options="groupby_options"

web-src/src/pages/PageGenreTracks.vue

@@ -5,11 +5,7 @@
         <index-button-list :index="tracks.indexList" />
         <div class="columns">
           <div class="column">
-            <p
-              class="heading"
-              style="margin-bottom: 24px"
-              v-text="$t('page.genre.sort-by.title')"
-            />
+            <p class="heading mb-5" v-text="$t('page.genre.sort-by.title')" />
             <dropdown-menu
               v-model="selected_groupby_option_id"
               :options="groupby_options"

web-src/src/pages/PageSearch.vue

@@ -23,7 +23,7 @@
                 </p>
               </div>
             </form>
-            <div class="tags" style="margin-top: 16px">
+            <div class="tags mt-4">
               <a
                 v-for="recent_search in recent_searches"
                 :key="recent_search"

web-src/src/pages/SettingsPageOnlineServices.vue

@@ -47,10 +47,7 @@
               <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 v-if="spotify.webapi_token_valid" class="field mt-5">
               <div class="control">
                 <a
                   class="button is-danger"

web-src/src/pages/SettingsPageRemotesOutputs.vue

@@ -57,7 +57,7 @@
                 <input
                   v-model="output.selected"
                   type="checkbox"
-                  style="margin-right: 5px"
+                  class="mr-2"
                   @change="output_toggle(output.id)"
                 />
                 <span v-text="output.name" />

web-src/src/pages/SpotifyPageSearch.vue

@@ -21,7 +21,7 @@
                 </p>
               </div>
             </form>
-            <div class="tags" style="margin-top: 16px">
+            <div class="tags mt-4">
               <a
                 v-for="recent_search in recent_searches"
                 :key="recent_search"