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
2025-08-14 14:09:26 +02:00 · 2024-09-13 23:19:47 +02:00
parent b736464f3f
commit 3ae9cf0420
84 changed files with 5366 additions and 1344 deletions
--- a/bookmarks/styles/theme/autocomplete.css
+++ b/bookmarks/styles/theme/autocomplete.css
@@ -0,0 +1,55 @@
+/* Autocomplete */
+.form-autocomplete {
+    position: relative;
+
+    & .form-autocomplete-input {
+        align-content: flex-start;
+        display: flex;
+        flex-wrap: wrap;
+        height: auto;
+        min-height: var(--unit-8);
+        padding: var(--unit-h);
+        background: var(--input-bg-color);
+
+        &.is-focused {
+            outline: var(--focus-outline);
+            outline-offset: calc(var(--focus-outline-offset) * -1);
+        }
+
+        & .form-input {
+            background: transparent;
+            border-color: transparent;
+            box-shadow: none;
+            display: inline-block;
+            flex: 1 0 auto;
+            height: var(--unit-6);
+            line-height: var(--unit-4);
+            margin: var(--unit-h);
+            width: auto;
+
+            &:focus {
+                outline: none;
+            }
+        }
+    }
+
+    & .menu {
+        left: 0;
+        position: absolute;
+        top: 100%;
+        width: 100%;
+
+        & .menu-item.selected > a, & .menu-item > a:hover {
+            background: var(--menu-item-hover-bg-color);
+            color: var(--menu-item-hover-color);
+        }
+
+        & .group-item, & .group-item:hover {
+            color: var(--tertiary-text-color);
+            text-transform: uppercase;
+            background: none;
+            font-size: 0.6rem;
+            font-weight: bold;
+        }
+    }
+}