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/badges.css
+++ b/bookmarks/styles/theme/badges.css
@@ -0,0 +1,64 @@
+/* Badges */
+.badge {
+    position: relative;
+    white-space: nowrap;
+
+    &[data-badge],
+    &:not([data-badge]) {
+        &::after {
+            background: var(--primary-color);
+            background-clip: padding-box;
+            border-radius: .5rem;
+            box-shadow: 0 0 0 1px var(--body-color);
+            color: var(--contrast-text-color);
+            content: attr(data-badge);
+            display: inline-block;
+            transform: translate(-.05rem, -.5rem);
+        }
+    }
+
+    &[data-badge] {
+        &::after {
+            font-size: var(--font-size-sm);
+            height: .9rem;
+            line-height: 1;
+            min-width: .9rem;
+            padding: .1rem .2rem;
+            text-align: center;
+            white-space: nowrap;
+        }
+    }
+
+    &:not([data-badge]),
+    &[data-badge=""] {
+        &::after {
+            height: 6px;
+            min-width: 6px;
+            padding: 0;
+            width: 6px;
+        }
+    }
+
+    /* Badges for Buttons */
+
+    &.btn {
+        &::after {
+            position: absolute;
+            top: 0;
+            right: 0;
+            transform: translate(50%, -50%);
+        }
+    }
+
+    /* Badges for Avatars */
+
+    &.avatar {
+        &::after {
+            position: absolute;
+            top: 14.64%;
+            right: 14.64%;
+            transform: translate(50%, -50%);
+            z-index: var(--zindex-1);
+        }
+    }
+}