Update: Floating History

themes/253a3a74-0cc4-47b7-8b82-996a64f030d5/chrome.css

@@ -1,65 +1,124 @@
-window.sidebar-panel {
-  background-color: var(--zen-themed-toolbar-bg) !important;
+/* Disable dragable splitter */
+#sidebar-box[sidebarcommand="viewHistorySidebar"] + splitter {
+  display: none !important;
 }
 
-search-textbox#search-box {
-  appearance: none !important;
-  background-color: var(--zen-colors-tertiary) !important;
-  border: 1px solid var(--zen-colors-border) !important;
-  padding: 0.5rem !important;
-  border-radius: 5px !important;
+/* Make sure content is not affect by history tab sliding in and out */
+#tabbrowser-tabbox[flex="1"][tabcontainer="tabbrowser-tabs"] {
+    will-change: unset !important;
 }
 
-search-textbox#search-box:hover {
-  border: 1px solid var(--zen-colors-secondary) !important;
-}
+/* History Tab Styles */
+#sidebar-box[sidebarcommand="viewHistorySidebar"] {
+    order: none !important;
+    height: 80% !important;
+    width: 22em !important;
+
+    body:has(#theme-Floating-History[theme-floating_history-position="right"]) {
+        right: 15px;
+    }
+
+    body:has(#theme-Floating-History[theme-floating_history-position="left"]) {
+        left: 15px;
+    }
+
+
+    position: fixed !important;
+    transform: translateX(50%) !important;
+    z-index: 10;
+
+    transform: translateY(12%) !important;
+
+    border-radius: var(--zen-border-radius) !important;
 
-search-textbox#search-box:hover:active {
-  border: 1px solid var(--zen-colors-secondary) !important;
-}
+    box-shadow: var(--box-shadow-10) !important;
+    background: var(--zen-colors-tertiary) !important;
+    border: 1px solid var(--zen-colors-border) !important;
+
+    transition: transform 0.35s !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+
+
+    &[hidden="true"] {
+		display: flex !important;
+
+        body:has(#theme-Floating-History[theme-floating_history-position="right"]) {
+            transform: translateX(110%) translateY(12%) !important;
+        }
 
-button#viewButton {
-  appearance: none;
-  color: inherit;
-  background-color: transparent !important;
-  border-radius: var(--toolbarbutton-border-radius);
-  border: 1px solid transparent !important;
+        body:has(#theme-Floating-History[theme-floating_history-position="left"]) {
+            transform: translateX(-110%) translateY(12%) !important;
+        }
+	}
+
+    @starting-style {
+        display: flex !important;
+
+        body:has(#theme-Floating-History[theme-floating_history-position="right"]) {
+            transform: translateX(110%) translateY(12%) !important;
+        }
+
+        body:has(#theme-Floating-History[theme-floating_history-position="left"]) {
+            transform: translateX(-110%) translateY(12%) !important;
+        }
+    }
+
+    &[checked="true"] {
+        display: flex !important;
+        transform: translateX(0%) translateY(12%) !important;
+    }
 }
 
-button#viewButton:hover {
-  background-color: var(--zen-colors-border) !important;
+
+/* Inner Styles of History Tab */
+
+#sidebar-box[sidebarcommand="viewHistorySidebar"] box#sidebar-header {
+    border-bottom: none !important;
 }
 
-button#viewButton:hover:active {
-  background-color: var(--zen-colors-border) !important;
+window#history-panel {
+    box-shadow: var(--box-shadow-10) !important;
+    background: var(--zen-colors-tertiary) !important;
 }
 
-#sidebar-box[sidebarcommand="viewHistorySidebar"] #sidebar-header {
-  border-bottom: 0px !important;
+/* Search Bar Styles */
+window#history-panel search-textbox#search-box[data-l10n-id="places-history-search"] {
+    appearance: none !important;
+    background-color: var(--input-bgcolor, var(--zen-colors-tertiary)) !important;
+    color: var(--input-color, var(--toolbar-field-color)) !important;
+    border: 1px solid var(--zen-input-border-color, rgb(66,65,77));
+    border-radius: 4px;
+    outline: none;
+    box-sizing: border-box;
+    padding: 0.5rem !important;
+
+
+    &[focused="true"] {
+        background-color: var(--input-bgcolor, var(--toolbar-field-background-color)) !important;
+        border: 1px solid var(--input-border-color, rgb(66,65,77));
+    }
 }
 
-#sidebar-box[sidebarcommand="viewHistorySidebar"] {
-  background-color: var(--zen-themed-toolbar-bg) !important;
-  border-radius: var(--zen-border-radius);
-  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
-  border: 1px solid var(--zen-colors-border);
-  padding: var(--zen-toolbox-padding) !important;
-  position: fixed;
-  z-index: 1;
-  height: 80vh !important;
-  width: 20em !important;
-  top: 10vh !important;
-  right: 0.6vw !important;
-  transform: translateX(105%);
-  transition: all 0.2s ease-in-out;
+
+/* View Button Styles */
+window#history-panel hbox#sidebar-search-container button#viewButton {
+    appearance: none !important;
+    margin-inline-end: 4px !important;
+    border-radius: 6px !important;
+    border: 1px solid transparent !important;
+    padding: 2px 4px !important;
+    background: transparent !important;
 }
 
-#sidebar-box[hidden="true"][sidebarcommand="viewHistorySidebar"] {
-  display: flex !important;
-  opacity: 0 !important;
-  transform: translateX(105%);
+window#history-panel hbox#sidebar-search-container button#viewButton:hover {
+    background-color: color-mix(in srgb, currentColor 10%, transparent) !important;
 }
 
-#sidebar-box[checked="true"][sidebarcommand="viewHistorySidebar"] {
-  transform: translateX(0);
+window#history-panel hbox#sidebar-search-container button#viewButton:active {
+    background-color: color-mix(in srgb, currentColor 15%, transparent) !important;
 }
+
+window#history-panel hbox#sidebar-search-container {
+    margin-bottom: 1rem !important;
+}

themes/253a3a74-0cc4-47b7-8b82-996a64f030d5/preferences.json

@@ -0,0 +1,19 @@
+[
+    {
+      "property": "theme.floating_history.position",
+      "label": "Position",
+      "type": "dropdown",
+      "disabledOn": [],
+      "defaultValue": "right",
+      "options": [
+        {
+          "label": "Left",
+          "value": "left"
+        },
+        {
+          "label": "Right",
+          "value": "right"
+        }
+      ]
+    }
+  ]

themes/253a3a74-0cc4-47b7-8b82-996a64f030d5/readme.md

@@ -1,3 +1,3 @@
 # Floating-History
 
-A Zen browser mod for a detached and redesigned history sidebar, so that it appears to float on the left side and match the zen aesthetic.
+Improves the history tab by matching the browser theme, make it floating, more responsive, and allow placing it on either side.

themes/253a3a74-0cc4-47b7-8b82-996a64f030d5/theme.json

@@ -1,14 +1,14 @@
 {
     "id": "253a3a74-0cc4-47b7-8b82-996a64f030d5",
     "name": "Floating History",
-    "description": "Detaches and moves a redesgined history sidebar to the left so that it appears to float and matches the zen aesthetic.",
+    "description": "Improves the history tab by matching the browser theme, make it floating, more responsive, and allow placing it on either side.",
     "homepage": "https://github.com/ahmaadaziz/zen-floating-history",
     "style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/253a3a74-0cc4-47b7-8b82-996a64f030d5/chrome.css",
     "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/253a3a74-0cc4-47b7-8b82-996a64f030d5/readme.md",
-    "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/253a3a74-0cc4-47b7-8b82-996a64f030d5/image.png",
+    "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/253a3a74-0cc4-47b7-8b82-996a64f030d5/screenshots/floating-history.png",
     "author": "ahmaadaziz",
     "createdAt": "2024-10-12",
     "updatedAt": "2025-01-26",
-    "version": "1.0.0",
+    "version": "2.0.0",
     "tags": []
 }