Fix CSS sub-pixel issues

sissbruecker · Mar 29, 2024 · 92f62d3 · 92f62d3
1 parent 9c48085
commit 92f62d3
Show file tree

Hide file tree

Showing 12 changed files with 120 additions and 101 deletions.
diff --git a/bookmarks/frontend/components/TagAutocomplete.svelte b/bookmarks/frontend/components/TagAutocomplete.svelte
@@ -151,18 +151,20 @@
     }
 
     .form-autocomplete.small .form-autocomplete-input {
-        height: 1.4rem;
-        min-height: 1.4rem;
+        height: var(--control-size-sm);
+        min-height: var(--control-size-sm);
         padding: 0.05rem 0.3rem;
     }
 
     .form-autocomplete.small .form-autocomplete-input input {
+        width: 100%;
+        height: 100%;
         margin: 0;
         padding: 0;
-        font-size: 0.7rem;
+        font-size: var(--font-size-sm);
     }
 
     .form-autocomplete.small .menu .menu-item {
-        font-size: 0.7rem;
+        font-size: var(--font-size-sm);
     }
 </style>
diff --git a/bookmarks/styles/base.scss b/bookmarks/styles/base.scss
@@ -9,7 +9,7 @@ body {
 }
 
 header {
-  margin-bottom: $unit-10;
+  margin-bottom: $unit-9;
 
   .logo {
     width: 28px;
@@ -50,14 +50,14 @@ section.content-area {
     border-bottom: solid 1px $border-color;
     display: flex;
     flex-wrap: wrap;
-    column-gap: $unit-6;
-    padding-bottom: $unit-2;
-    margin-bottom: $unit-4;
+    column-gap: $unit-5;
+    padding-bottom: $unit-1;
+    margin-bottom: $unit-3;
 
     h2 {
       flex: 0 0 auto;
-      line-height: 1.8rem;
-      margin-bottom: 0;
+      line-height: $unit-9;
+      margin: 0;
     }
 
     .header-controls {
@@ -95,10 +95,6 @@ span.confirmation {
   text-overflow: ellipsis;
 }
 
-.text-sm {
-  font-size: 0.7rem;
-}
-
 .text-gray-dark {
   color: $gray-color-dark;
 }
@@ -124,10 +120,6 @@ span.confirmation {
   margin-right: auto;
 }
 
-.ml-auto {
-  margin-left: auto;
-}
-
 .btn.btn-wide {
   padding-left: $unit-6;
   padding-right: $unit-6;

diff --git a/bookmarks/styles/bookmark-page.scss b/bookmarks/styles/bookmark-page.scss
@@ -1,11 +1,10 @@
 .bookmarks-page.grid {
-  grid-gap: $unit-10;
+  grid-gap: $unit-9;
 }
 
 /* Bookmark area header controls */
 .bookmarks-page .content-area-header {
   --searchbox-max-width: 350px;
-  --searchbox-height: 1.8rem;
 
   @media (max-width: $size-sm) {
     --searchbox-max-width: initial;
@@ -20,18 +19,18 @@
 
   // Regular input
   input[type='search'] {
-    height: var(--searchbox-height);
+    height: $control-size;
     -webkit-appearance: none;
   }
 
   // Enhanced auto-complete input
   // This needs a bit more wrangling to make the CSS component align with the attached button
   .form-autocomplete {
-    height: var(--searchbox-height);
+    height: $control-size;
 
     .form-autocomplete-input {
       width: 100%;
-      height: var(--searchbox-height);
+      height: $control-size;
 
       input[type='search'] {
         width: 100%;
@@ -72,6 +71,7 @@
     .menu {
       padding: $unit-4;
       min-width: 250px;
+      font-size: $font-size-sm;
     }
 
     .menu .actions {
@@ -108,6 +108,9 @@ ul.bookmark-list {
   list-style: none;
   margin: 0;
   padding: 0;
+
+  /* Increase line-height for better separation within / between items */
+  line-height: 1.1rem;
 }
 
 @keyframes appear {
@@ -125,54 +128,66 @@ ul.bookmark-list {
 /* Bookmarks */
 li[ld-bookmark-item] {
   position: relative;
+  margin-top: $unit-2;
 
   [ld-bulk-edit-checkbox].form-checkbox {
     display: none;
   }
 
+  .title {
+    position: relative;
+  }
+
+  .title img {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
+  .title img + a {
+    padding-left: 22px;
+  }
+
   .title a {
-    display: inline-block;
-    vertical-align: top;
+    display: block;
     width: 100%;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+  }
 
-    &[data-tooltip]:hover::after, &[data-tooltip]:focus::after {
-      content: attr(data-tooltip);
-      position: absolute;
-      z-index: 10;
-      top: 20px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: max-content;
-      max-width: 100%;
-      height: fit-content;
-      background-color: #292f62;
-      color: #fff;
-      padding: $unit-1;
-      border-radius: $border-radius;
-      border: 1px solid #424a8c;
-      font-size: $font-size-sm;
-      font-style: normal;
-      white-space: normal;
-      pointer-events: none;
-      animation: 0.3s ease 0s appear;
-    }
+  .title a[data-tooltip]:hover::after, .title a[data-tooltip]:focus::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    z-index: 10;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    width: max-content;
+    max-width: 90%;
+    height: fit-content;
+    background-color: #292f62;
+    color: #fff;
+    padding: $unit-1;
+    border-radius: $border-radius;
+    border: 1px solid #424a8c;
+    font-size: $font-size-sm;
+    font-style: normal;
+    white-space: normal;
+    pointer-events: none;
+    animation: 0.3s ease 0s appear;
   }
 
   &.unread .title a {
     font-style: italic;
   }
 
-  .title img {
-    width: 16px;
-    height: 16px;
-    margin-right: $unit-h;
-    vertical-align: text-top;
-  }
-
-  .url-display {
+  .url-path, .url-display {
+    font-size: $font-size-sm;
     color: $secondary-link-color;
   }
 
@@ -208,6 +223,8 @@ li[ld-bookmark-item] {
   }
 
   .actions {
+    font-size: $font-size-sm;
+
     a, button.btn-link {
       color: $gray-color;
       padding: 0;
@@ -224,10 +241,6 @@ li[ld-bookmark-item] {
         color: $gray-color-dark;
       }
     }
-
-    .separator {
-      align-self: flex-start;
-    }
   }
 }
 
@@ -236,6 +249,8 @@ li[ld-bookmark-item] {
 }
 
 .tag-cloud {
+  /* Increase line-height for better separation within / between items */
+  line-height: 1.1rem;
 
   .selected-tags {
     margin-bottom: $unit-4;
@@ -291,7 +306,7 @@ $bulk-edit-transition-duration: 400ms;
   .bulk-edit-bar {
     margin-top: -1px;
     margin-left: -$bulk-edit-bar-offset;
-    margin-bottom: $unit-4;
+    margin-bottom: $unit-3;
     max-height: 0;
     overflow: hidden;
     transition: max-height $bulk-edit-transition-duration;
@@ -313,24 +328,25 @@ $bulk-edit-transition-duration: 400ms;
     width: $bulk-edit-toggle-width;
     margin: 0 0 0 $bulk-edit-toggle-offset;
     padding: 0;
-    min-height: 1rem;
   }
 
   /* Bookmark checkboxes */
   li[ld-bookmark-item] [ld-bulk-edit-checkbox].form-checkbox {
     display: block;
     position: absolute;
     width: $bulk-edit-toggle-width;
+    min-height: $bulk-edit-toggle-width;
     left: -$bulk-edit-toggle-width - $bulk-edit-toggle-offset;
-    top: 0;
+    top: 50%;
+    transform: translateY(-50%);
     padding: 0;
     margin: 0;
     visibility: hidden;
     opacity: 0;
     transition: all $bulk-edit-transition-duration;
 
     .form-icon {
-      top: $unit-1;
+        top: 0;
     }
   }
 
@@ -342,7 +358,7 @@ $bulk-edit-transition-duration: 400ms;
   /* Actions */
   .bulk-edit-actions {
     display: flex;
-    align-items: baseline;
+    align-items: center;
     padding: $unit-1 0;
     border-top: solid 1px $border-color;
     gap: $unit-2;

diff --git a/bookmarks/styles/settings.scss b/bookmarks/styles/settings.scss
@@ -1,9 +1,9 @@
 .settings-page {
   section.content-area {
-    margin-bottom: $unit-12;
+    margin-bottom: $unit-10;
 
     h2 {
-      margin-bottom: $unit-4;
+      margin-bottom: $unit-3;
     }
   }
 

diff --git a/bookmarks/styles/spectre.scss b/bookmarks/styles/spectre.scss
@@ -3,6 +3,32 @@
 
 // Variables and mixins
 @import "../../node_modules/spectre.css/src/variables";
+
+// Customize variables to reduce font and control sizes
+
+// Can use CSS variables for font sizes, as they are not used in SCSS calculations
+$font-size: var(--font-size);
+$font-size-sm: var(--font-size-sm);
+$font-size-lg: var(--font-size-lg);
+
+// Can't use CSS variables for these, used in SCSS calculations
+$line-height: 1rem;
+$control-size: $unit-8;
+$control-size-sm: $unit-6;
+$control-size-lg: $unit-9;
+
+// Declare defaults for CSS variables, expose SCSS variables as CSS variables
+html {
+  --font-size: 0.7rem;
+  --font-size-sm: 0.65rem;
+  --font-size-lg: 0.8rem;
+
+  --control-size: #{$control-size};
+  --control-size-sm: #{$control-size-sm};
+  --control-size-lg: #{$control-size-lg};
+}
+
+// Mixins
 @import "../../node_modules/spectre.css/src/mixins";
 
 /*! Spectre.css v#{$version} | MIT License | github.com/picturepan2/spectre */
@@ -64,19 +90,6 @@ a:visited:hover {
   transition: none !important;
 }
 
-// Fix radio button sub-pixel size
-.form-radio .form-icon {
-  width: 14px;
-  height: 14px;
-  border-width: 1px;
-}
-
-.form-radio input:checked + .form-icon::before {
-  top: 3px;
-  left: 3px;
-  transform: unset;
-}
-
 // Make code work with light and dark theme
 code {
   color: $gray-color-dark;

diff --git a/bookmarks/styles/variables-dark.scss b/bookmarks/styles/variables-dark.scss
@@ -1,5 +1,3 @@
-$html-font-size: 18px !default;
-
 $body-bg: #161822 !default;
 $bg-color: lighten($body-bg, 5%) !default;
 $bg-color-light: lighten($body-bg, 5%) !default;

diff --git a/bookmarks/styles/variables-light.scss b/bookmarks/styles/variables-light.scss
@@ -1,5 +1,3 @@
-$html-font-size: 18px !default;
-
 $alternative-color: #05a6a3;
 $alternative-color-dark: darken($alternative-color, 5%);