diff --git a/themes/253a3a74-0cc4-47b7-8b82-996a64f030d5/chrome.css b/themes/253a3a74-0cc4-47b7-8b82-996a64f030d5/chrome.css index 4c54cd3a..08471537 100644 --- a/themes/253a3a74-0cc4-47b7-8b82-996a64f030d5/chrome.css +++ b/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; -} - -search-textbox#search-box:hover { - border: 1px solid var(--zen-colors-secondary) !important; -} - -search-textbox#search-box:hover:active { - border: 1px solid var(--zen-colors-secondary) !important; -} - -button#viewButton { - appearance: none; - color: inherit; - background-color: transparent !important; - border-radius: var(--toolbarbutton-border-radius); - border: 1px solid transparent !important; -} - -button#viewButton:hover { - background-color: var(--zen-colors-border) !important; -} - -button#viewButton:hover:active { - background-color: var(--zen-colors-border) !important; -} - -#sidebar-box[sidebarcommand="viewHistorySidebar"] #sidebar-header { - border-bottom: 0px !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; } +/* History Tab Styles */ #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; + 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; + + 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; + } + + 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; + } } -#sidebar-box[hidden="true"][sidebarcommand="viewHistorySidebar"] { - display: flex !important; - opacity: 0 !important; - transform: translateX(105%); + +/* Inner Styles of History Tab */ + +#sidebar-box[sidebarcommand="viewHistorySidebar"] box#sidebar-header { + border-bottom: none !important; } -#sidebar-box[checked="true"][sidebarcommand="viewHistorySidebar"] { - transform: translateX(0); +window#history-panel { + box-shadow: var(--box-shadow-10) !important; + background: var(--zen-colors-tertiary) !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)); + } +} + + +/* 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; +} + +window#history-panel hbox#sidebar-search-container button#viewButton:hover { + background-color: color-mix(in srgb, currentColor 10%, transparent) !important; +} + +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; +} \ No newline at end of file diff --git a/themes/253a3a74-0cc4-47b7-8b82-996a64f030d5/image.png b/themes/253a3a74-0cc4-47b7-8b82-996a64f030d5/image.png index 9c9c9208..eb5da59d 100644 Binary files a/themes/253a3a74-0cc4-47b7-8b82-996a64f030d5/image.png and b/themes/253a3a74-0cc4-47b7-8b82-996a64f030d5/image.png differ diff --git a/themes/253a3a74-0cc4-47b7-8b82-996a64f030d5/preferences.json b/themes/253a3a74-0cc4-47b7-8b82-996a64f030d5/preferences.json new file mode 100644 index 00000000..ac457a64 --- /dev/null +++ b/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" + } + ] + } + ] \ No newline at end of file diff --git a/themes/253a3a74-0cc4-47b7-8b82-996a64f030d5/readme.md b/themes/253a3a74-0cc4-47b7-8b82-996a64f030d5/readme.md index 38f92ee6..9746060f 100644 --- a/themes/253a3a74-0cc4-47b7-8b82-996a64f030d5/readme.md +++ b/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. diff --git a/themes/253a3a74-0cc4-47b7-8b82-996a64f030d5/theme.json b/themes/253a3a74-0cc4-47b7-8b82-996a64f030d5/theme.json index 528e49c7..b936a52a 100644 --- a/themes/253a3a74-0cc4-47b7-8b82-996a64f030d5/theme.json +++ b/themes/253a3a74-0cc4-47b7-8b82-996a64f030d5/theme.json @@ -1,7 +1,7 @@ { "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", @@ -9,6 +9,6 @@ "author": "ahmaadaziz", "createdAt": "2024-10-12", "updatedAt": "2025-01-26", - "version": "1.0.0", + "version": "2.0.0", "tags": [] } \ No newline at end of file