Various CSS improvements

bookmarks/frontend/components/SearchAutoComplete.svelte

@@ -209,11 +209,7 @@
     {#each suggestions.tags as suggestion}
       <li class="menu-item" class:selected={selectedIndex === suggestion.index}>
         <a href="#" on:mousedown|preventDefault={() => completeSuggestion(suggestion)}>
-          <div class="tile tile-centered">
-            <div class="tile-content">
-              {suggestion.label}
-            </div>
-          </div>
+          {suggestion.label}
         </a>
       </li>
     {/each}
@@ -224,11 +220,7 @@
     {#each suggestions.search as suggestion}
       <li class="menu-item" class:selected={selectedIndex === suggestion.index}>
         <a href="#" on:mousedown|preventDefault={() => completeSuggestion(suggestion)}>
-          <div class="tile tile-centered">
-            <div class="tile-content">
-              {suggestion.label}
-            </div>
-          </div>
+          {suggestion.label}
         </a>
       </li>
     {/each}
@@ -239,11 +231,7 @@
     {#each suggestions.bookmarks as suggestion}
       <li class="menu-item" class:selected={selectedIndex === suggestion.index}>
         <a href="#" on:mousedown|preventDefault={() => completeSuggestion(suggestion)}>
-          <div class="tile tile-centered">
-            <div class="tile-content">
-              {suggestion.label}
-            </div>
-          </div>
+          {suggestion.label}
         </a>
       </li>
     {/each}

bookmarks/frontend/components/TagAutocomplete.svelte

@@ -131,11 +131,7 @@
     {#each suggestions as tag,i}
       <li class="menu-item" class:selected={selectedIndex === i}>
         <a href="#" on:mousedown|preventDefault={() => complete(tag)}>
-          <div class="tile tile-centered">
-            <div class="tile-content">
-              {tag.name}
-            </div>
-          </div>
+          {tag.name}
         </a>
       </li>
     {/each}

bookmarks/styles/base.scss

@@ -1,14 +1,29 @@
+/* Main layout */
 body {
   margin: 20px 10px;
 
   @media (min-width: $size-sm) {
-    // High horizontal padding accounts for checkboxes that show up in bulk edit mode
-    margin: 20px 24px;
+    // Horizontal padding accounts for checkboxes that show up in bulk edit mode
+    margin: 20px 32px;
   }
 }
 
 header {
-  margin-bottom: 40px;
+  margin-bottom: $unit-10;
+
+  .logo {
+    width: 28px;
+    height: 28px;
+  }
+
+  a:hover {
+    text-decoration: none;
+  }
+
+  h1 {
+    margin: 0 0 0 $unit-3;
+    font-size: $font-size-lg;
+  }
 }
 
 header .toasts {
@@ -23,97 +38,81 @@ header .toasts {
   }
 }
 
-.navbar {
+/* Shared components */
 
-  .navbar-brand {
+// Content area component
+section.content-area {
+  h2 {
+    font-size: $font-size-lg;
+  }
 
+  .content-area-header {
+    border-bottom: solid 1px $border-color;
     display: flex;
-    align-items: center;
-
-    .logo {
-      width: 28px;
-      height: 28px;
-    }
-
-    h1 {
-      text-transform: uppercase;
-      display: inline-block;
-      margin: 0 0 0 8px;
+    flex-wrap: wrap;
+    padding-bottom: $unit-2;
+    margin-bottom: $unit-4;
+
+    h2 {
+      line-height: 1.8rem;
+      margin-right: auto;
+      margin-bottom: 0;
     }
   }
+}
 
-  .dropdown-toggle {
-  }
+// Confirm button component
+span.confirmation {
+  display: flex;
+  align-items: baseline;
 }
 
-/* Overrides */
+span.confirmation .btn.btn-link {
+  color: $error-color !important;
 
-// Reduce heading sizes
-h1 {
-  font-size: inherit;
+  &:hover {
+    text-decoration: underline;
+  }
 }
 
-h2 {
-  font-size: .85rem;
-  color: $gray-color-dark;
-}
+/* Additional utilities */
 
-// Fix up visited styles
-a:visited {
-  color: $link-color;
-}
-a:visited:hover {
-  color: $link-color-dark;
-}
-.btn-link:visited:not(.btn-primary) {
-  color: $link-color;
+.truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.btn-link:visited:not(.btn-primary):hover {
-  color: $link-color-dark;
+
+.text-sm {
+  font-size: 0.7rem;
 }
 
-code {
+.text-gray-dark {
   color: $gray-color-dark;
-  background-color: $code-bg-color;
-  box-shadow: 1px 1px 0 $code-shadow-color;
 }
 
-// Increase spacing between columns
-.container > .columns > .column:not(:first-child) {
-  padding-left: 2rem;
+.align-baseline {
+  align-items: baseline;
 }
 
-// Remove left padding from first pagination link
-.pagination .page-item:first-child a {
-  padding-left: 0;
+.align-center {
+  align-items: center;
 }
 
-// Override border color for tab block
-.tab-block {
-  border-bottom: solid 1px $border-color;
+.justify-between {
+  justify-content: space-between;
 }
 
-// Form auto-complete menu
-.form-autocomplete .menu {
-  .menu-item.selected > a, .menu-item > a:hover {
-    background: $secondary-color;
-    color: $primary-color;
-  }
+.mb-4 {
+  margin-bottom: $unit-4;
+}
 
-  .group-item, .group-item:hover {
-    color: $gray-color;
-    text-transform: uppercase;
-    background: none;
-    font-size: 0.6rem;
-    font-weight: bold;
-  }
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
 }
 
-// Increase input font size on small viewports to prevent zooming on focus the input
-// on mobile devices. 430px relates to the "normalized" iPhone 14 Pro Max
-// viewport size
-@media screen and (max-width: 430px) {
-  .form-input {
-    font-size: 16px;
-  }
+.btn.btn-wide {
+  padding-left: $unit-6;
+  padding-right: $unit-6;
 }

bookmarks/styles/bookmark-form.scss

@@ -0,0 +1,50 @@
+.bookmarks-form {
+
+  .btn.form-icon {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+    visibility: hidden;
+    color: $gray-color;
+
+    &:focus,
+    &:hover,
+    &:active,
+    &.active {
+      color: $gray-color-dark;
+    }
+
+    > svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .has-icon-right > input, .has-icon-right > textarea {
+    padding-right: 30px;
+  }
+
+  .has-icon-right > input:placeholder-shown ~ .btn.form-icon,
+  .has-icon-right > textarea:placeholder-shown ~ .btn.form-icon {
+    visibility: visible;
+  }
+
+  .form-icon.loading {
+    visibility: hidden;
+  }
+
+  .form-input-hint.bookmark-exists {
+    display: none;
+    color: $warning-color;
+
+    a {
+      color: $warning-color;
+      text-decoration: underline;
+      font-weight: bold;
+    }
+  }
+
+  details.notes textarea {
+    box-sizing: border-box;
+  }
+}