[create-theme]: Zen Browser CSS Tweaks

[ANOMICC]

Name

Zen Browser CSS Tweaks

Description

Some Minor CSS Adjustments That Aim To Make Zen Just A Little Bit Cleaner

Homepage

https://github.com/ANOMICC/Zen-Browser-CSS-Tweaks

Image

https://imgur.com/a/BfvnpoU

Type

• [ ] JSON Color Theme

Theme Styles

:root {
    /* CHANGE THIS TO WHATEVER YOU LIKE*/

    /* Background */
    --zen-primary-color: #000000 !important;
    --zen-colors-secondary: rgba(255, 255, 255, .1) !important;

    /* Borders */
    --zen-colors-border: rgba(255,255,255,.2) !important;

    /* Hover */
    --button-hover-bgcolor: rgba(255, 255, 255, .1) !important;

    /* URLBar Icon Size */
    --urlbarView-favicon-width: 20px !important;

    /* URLBar Option Hover BG */
    --urlbarView-hover-background: rgba(255, 255, 255, .1) !important;
}

/* Sidebar Tab Spacing */
.tabbrowser-tab {
    margin-bottom: 6.5px !important;
}

/* Sidebar Workplace Button */
#zen-workspaces-button {
    border: none !important;
}

/* Sidebar Remove Buttons + Divider */
#zen-bookmark-button, #alltabs-button, #zen-sidebar-icons-wrapper::before {
    display: none !important;
}

/* Sidebar Remove Padding */
#navigator-toolbox {
    padding: 0px 5px 4px 5px !important;
    top: -1px !important;
}

/* Sidebar Buttons */
.tabbrowser-tab, #tabs-newtab-button {
    border-radius: 8px !important;
}

/* Top Windows Buttons */
.titlebar-button {
    border-radius: 4px !important;
}

/* Main Window Remove Border */
#panel-1-1, #panel-1-2, #panel-1-3 #panel-1-4 {
    box-shadow: none !important;
}

/* Search Bar Left Icon */
#identity-icon-box {
  background: var(--zen-colors-secondary) !important;
}

/* THEMES */

/* URLBar */

#urlbar-background {
    background-color: #020202 !important;
    border-radius: 16px !important;
}

/* URLBar Link Color */
.urlbarView-url {
  color: gray !important;
}

/* URLBar Bookmark Icon */
#urlbar-engine-one-off-item-bookmarks {
    fill: currentColor !important;
}

/* URLBar Option */
.urlbarView-row {
    min-height: 42px !important;
}

/* URLBar Search Bar Extra Margin */
#urlbar[breakout][breakout-extend] {
    & > .urlbar-input-container {
        margin: 4px !important;
    }
}

Readme

# Zen Browser CSS Tweaks
A CSS file to fix some minor misalignment and spacing issues. Aims to make your Zen Browser experience a bit better while also giving you the option to modify the css and use your own colors. (Default Theme: OLED).
This Theme was created to fix my OCD over these tiny misalignments. 🗿

**RECOMMENDED THEMES:** Compact Sidebar, Floating URLbar

## How To Install
1. Open Zen Browser.
2. Head to "about:support".
3. Locate "Profile Folder" and hit "Open Folder".
4. Locate the "chrome" folder. If the folder is not there, create it or make sure to download before mentioned recommended themes first.
5. Download the [userChrome.css](./userChrome.css) file and put it inside the "chrome" folder.
6. Restart Zen Browser.

## Showcase
![Showcase](https://github.com/user-attachments/assets/2a1d40c5-f691-40ed-9af3-4130dedc91b5)

## Changes
- Customizeable color theme
- Fixed spacing between sidebar tabs
- Removed borders from certain buttons and the main window
- Removed the "All Tabs" and "Bookmark" buttons in the sidebar
- Fixed the weird sidebar padding
- Rounded the windows buttons
- Fixed some spacing inside the URLBar Theme

Preferences

{
  "uc.minimal-sidebar.hide-alltabs-button.enabled": "Hide the alltabs button",
  "uc.minimal-sidebar.hide-bookmark-button.enabled": "Hide the bookmarks button"
}

[github-actions[bot]]

Error creating theme

Sorry about that! There was an error creating the theme. Please try again or contact the maintainers for help.

Image must be a PNG.