update floating history

This commit is contained in:
Ahmad Aziz 2025-05-01 14:54:32 +00:00
parent 2e27bdad86
commit b75f0ed4cf
6 changed files with 137 additions and 59 deletions

View file

@ -1,65 +1,124 @@
window.sidebar-panel { /* Disable dragable splitter */
background-color: var(--zen-themed-toolbar-bg) !important; #sidebar-box[sidebarcommand="viewHistorySidebar"] + splitter {
display: none !important;
} }
search-textbox#search-box { /* Make sure content is not affect by history tab sliding in and out */
appearance: none !important; #tabbrowser-tabbox[flex="1"][tabcontainer="tabbrowser-tabs"] {
background-color: var(--zen-colors-tertiary) !important; will-change: unset !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;
} }
/* History Tab Styles */
#sidebar-box[sidebarcommand="viewHistorySidebar"] { #sidebar-box[sidebarcommand="viewHistorySidebar"] {
background-color: var(--zen-themed-toolbar-bg) !important; order: none !important;
border-radius: var(--zen-border-radius); height: 80% !important;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1); width: 22em !important;
border: 1px solid var(--zen-colors-border);
padding: var(--zen-toolbox-padding) !important; body:has(#theme-Floating-History[theme-floating_history-position="right"]) {
position: fixed; right: 15px;
z-index: 1; }
height: 80vh !important;
width: 20em !important; body:has(#theme-Floating-History[theme-floating_history-position="left"]) {
top: 10vh !important; left: 15px;
right: 0.6vw !important; }
transform: translateX(105%);
transition: all 0.2s ease-in-out;
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; /* Inner Styles of History Tab */
opacity: 0 !important;
transform: translateX(105%); #sidebar-box[sidebarcommand="viewHistorySidebar"] box#sidebar-header {
border-bottom: none !important;
} }
#sidebar-box[checked="true"][sidebarcommand="viewHistorySidebar"] { window#history-panel {
transform: translateX(0); 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;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.2 KiB

View file

@ -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"
}
]
}
]

View file

@ -1,3 +1,3 @@
# Floating-History # 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.

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

View file

@ -1,14 +1,14 @@
{ {
"id": "253a3a74-0cc4-47b7-8b82-996a64f030d5", "id": "253a3a74-0cc4-47b7-8b82-996a64f030d5",
"name": "Floating History", "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", "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", "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", "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", "author": "ahmaadaziz",
"createdAt": "2024-10-12", "createdAt": "2024-10-12",
"updatedAt": "2025-01-26", "updatedAt": "2025-01-26",
"version": "1.0.0", "version": "2.0.0",
"tags": [] "tags": []
} }