Use nice checkbox style for short/long selectors

templates/playlist-generator/index.html.twig

@@ -12,16 +12,16 @@
       </div>
       <div class="row">
         <div class="col-md-6 col-sm-12">
-          <div>
+          <div class="form-check form-switch">
             <input
               type="checkbox"
-              class="custom-control-input"
+              class="form-check-input"
               id="check-quick-create-long-playlist"
               name="check-quick-create-long-playlist"
               value="long-playlist"
               checked
             >
-            <label class="custom-control-label" for="check-quick-create-long-playlist">
+            <label class="form-check-label" for="check-quick-create-long-playlist">
               Generate a long playlist (x2)
             </label>
           </div>
@@ -51,28 +51,28 @@
       </ul>
       <div class="row">
         <div class="col-md-8 col-sm-12">
-          <div>
+          <div class="form-check form-switch">
             <input
               type="checkbox"
-              class="custom-control-input"
+              class="form-check-input"
               id="check-top-artist-filter-artists"
               name="check-top-artist-filter-artists"
               value="filter-artists"
               checked
             >
-            <label class="custom-control-label" for="check-top-artist-filter-artists">
-              Allow only selected artists in recommendations
+            <label class="form-check-label" for="check-top-artist-filter-artists">
+              Filter only selected artists in recommendations
             </label>
           </div>
-          <div>
+          <div class="form-check form-switch">
             <input
               type="checkbox"
-              class="custom-control-input"
+              class="form-check-input"
               id="check-top-artist-long-playlist"
               name="check-top-artist-long-playlist"
               value="long-playlist"
             >
-            <label class="custom-control-label" for="check-top-artist-long-playlist">
+            <label class="form-check-label" for="check-top-artist-long-playlist">
               Generate a long playlist (x2)
             </label>
           </div>
@@ -92,28 +92,28 @@
       </ul>
       <div class="row">
         <div class="col-md-8 col-sm-12">
-          <div>
+          <div class="form-check form-switch">
             <input
               type="checkbox"
-              class="custom-control-input"
+              class="form-check-input"
               id="check-playlist-filter-artists"
               name="check-playlist-filter-artists"
               value="filter-artists"
               checked
             >
-            <label class="custom-control-label" for="check-playlist-filter-artists">
-              Allow only artists in selected playlists in recommendations
+            <label class="form-check-label" for="check-playlist-filter-artists">
+              Filter only artists in selected playlists in recommendations
             </label>
           </div>
-          <div>
+          <div class="form-check form-switch">
             <input
               type="checkbox"
-              class="custom-control-input"
+              class="form-check-input"
               id="check-playlist-long-playlist"
               name="check-playlist-long-playlist"
               value="long-playlist"
             >
-            <label class="custom-control-label" for="check-playlist-long-playlist">
+            <label class="form-check-label" for="check-playlist-long-playlist">
               Generate a long playlist (x2)
             </label>
           </div>