Theme improvements (#822)

* start converting

* small fixes

* reorganize theme files

* cleanup search bar

* increase spacing

* small tweaks

* fix select styles in Chrome

* cleanup menus

* improve button icons

* restore badges

* remove unused classes

* restore some overrides

* restore bookmark form

* add summary outline

* avoid layout shifts

* restore bookmark details

* increase border radius for modals

* improve details modal

* restore reader mode

* restore settings

* cleanup variables

* start with dark theme

* more dark theme...

* more light theme...

* more dark theme...

* add postcss build

* remove sass processor

* update docker build

* fix alt color

* remove endless symbol

* fix tests

* update assets

* remove sass files

* fix docker build

* cleanup spacing

* improve theme

* update test scripts

* update CI workflow

* fix test

bookmarks/templates/settings/general.html

@@ -73,7 +73,7 @@
           </div>
         </div>
         <div class="form-group">
-          <label>Bookmark actions</label>
+          <label class="form-label">Bookmark actions</label>
           <label for="{{ form.display_view_bookmark_action.id_for_label }}" class="form-checkbox">
             {{ form.display_view_bookmark_action }}
             <i class="form-icon"></i> View
@@ -121,9 +121,11 @@
         </div>
         <div class="form-group">
           <details {% if form.auto_tagging_rules.value %}open{% endif %}>
-            <summary>Auto Tagging</summary>
+            <summary>
+              <span class="form-label d-inline-block">Auto Tagging</span>
+            </summary>
             <label for="{{ form.auto_tagging_rules.id_for_label }}" class="text-assistive">Auto Tagging</label>
-            <div class="mt-2">
+            <div>
               {{ form.auto_tagging_rules|add_class:"form-input monospace"|attr:"rows:6" }}
             </div>
           </details>
@@ -223,9 +225,11 @@ reddit.com/r/Music music reddit</pre>
         </div>
         <div class="form-group">
           <details {% if form.custom_css.value %}open{% endif %}>
-            <summary>Custom CSS</summary>
+            <summary>
+              <span class="form-label d-inline-block">Custom CSS</span>
+            </summary>
             <label for="{{ form.custom_css.id_for_label }}" class="text-assistive">Custom CSS</label>
-            <div class="mt-2">
+            <div>
               {{ form.custom_css|add_class:"form-input monospace"|attr:"rows:6" }}
             </div>
           </details>
@@ -234,7 +238,7 @@ reddit.com/r/Music music reddit</pre>
           </div>
         </div>
         <div class="form-group">
-          <input type="submit" name="update_profile" value="Save" class="btn btn-primary mt-2">
+          <input type="submit" name="update_profile" value="Save" class="btn btn-primary btn-wide mt-2">
         </div>
       </form>
     </section>
@@ -264,7 +268,7 @@ reddit.com/r/Music music reddit</pre>
           </div>
 
           <div class="form-group">
-            <input type="submit" name="update_global_settings" value="Save" class="btn btn-primary mt-2">
+            <input type="submit" name="update_global_settings" value="Save" class="btn btn-primary btn-wide mt-2">
           </div>
         </form>
       </section>

bookmarks/templates/settings/integrations.html

@@ -35,10 +35,8 @@
       <h2>REST API</h2>
       <p>The following token can be used to authenticate 3rd-party applications against the REST API:</p>
       <div class="form-group">
-        <div class="columns">
-          <div class="column width-50 width-md-100">
-            <input class="form-input" value="{{ api_token }}" readonly>
-          </div>
+        <div class="width-50 width-md-100">
+          <input class="form-input" value="{{ api_token }}" readonly>
         </div>
       </div>
       <p>
@@ -57,7 +55,7 @@
         <li><a href="{{ all_feed_url }}">All bookmarks</a></li>
         <li><a href="{{ unread_feed_url }}">Unread bookmarks</a></li>
         <li><a href="{{ shared_feed_url }}">Shared bookmarks</a></li>
-        <li><a href="{{ public_shared_feed_url }}">Public shared bookmarks</a><br><span class="text-small text-gray">The public shared feed does not contain an authentication token and can be shared with other people. Only shows shared bookmarks from users who have explicitly enabled public sharing.</span>
+        <li><a href="{{ public_shared_feed_url }}">Public shared bookmarks</a><br><span class="text-small text-secondary">The public shared feed does not contain an authentication token and can be shared with other people. Only shows shared bookmarks from users who have explicitly enabled public sharing.</span>
         </li>
       </ul>
       <p>

bookmarks/templates/settings/nav.html

@@ -10,7 +10,7 @@
         <a href="{% url 'bookmarks:settings.integrations' %}">Integrations</a>
     </li>
     {% if request.user.is_superuser %}
-    <li class="tab-item tooltip tooltip-bottom" data-tooltip="The admin panel provides additional features &#010; such as user management and bulk operations.">
+    <li class="tab-item">
         <a href="{% url 'admin:index' %}" target="_blank">
             <span>Admin</span>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="ml-1" style="width: 1.2em; height: 1.2em; vertical-align: -0.2em;">