[create-theme]: Floating History

[ahmaadaziz]

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.

Homepage

https://github.com/ahmaadaziz/zen-floating-history

Image

https://raw.githubusercontent.com/ahmaadaziz/zen-floating-history/refs/heads/main/screenshots/floating-history.png

Type

• [ ] JSON Color Theme

Theme Styles

window.sidebar-panel {
  background-color: var(--zen-themed-toolbar-bg) !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; 
}

#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,.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;
}

#sidebar-box[hidden=true][sidebarcommand="viewHistorySidebar"] {
  display: flex !important;
  opacity: 0 !important;
  transform: translateX(105%);
}

#sidebar-box[checked=true][sidebarcommand="viewHistorySidebar"] {
  transform: translateX(0);
}

Readme

# 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.

Preferences

No response

[github-actions[bot]]

Thank you for your contribution! :tada:

Your theme has been successfully submitted. The maintainers will review it and get back to you soon.

Here are some details about your submission:

• Your theme has been requested into this PR.
• It has been created into the create-theme-479 branch.

If you have any questions or need help, feel free to ask in the comments below or in the PR.