Merge branch 'main' into UpdateSuperPins

This commit is contained in:
mr. m 2025-04-27 10:09:34 +02:00 committed by GitHub
commit f4d7402f53
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 194 additions and 405 deletions

View file

@ -1,36 +1,195 @@
.tab-icon-overlay {
opacity: 1 !important;
margin: initial !important;
border: none !important;
margin-right: 35px !important;
transform: translate(130%, 45%) scale(1.5) !important;
background-color: transparent !important;
fill: light-dark(black, white) !important;
transition: 0.2s;
&:hover {
fill: var(--zen-primary-color) !important;
transition: 0.2s;
:root {
--bmb-sound-icon-scale: 1.5;
--bmb-sound-icon-scale-essentials: 1.28;
--bmb-sound-icon-scale-glance: 1.15;
}
&:is([soundplaying], [muted]):not([selected]) {
/* ================== General ================== */
/* Tab icon overlay styles */
.tab-icon-overlay {
border: none !important;
transform: translate(130%, 44%) scale(var(--bmb-sound-icon-scale)) !important;
background-color: transparent !important;
transition: 0.2s;
&:is([soundplaying], [muted], [activemedia-blocked]):not([selected]) {
display: block !important;
}
}
/* Mute button takes place of tab icon when tabs are not expanded */
@media not (-moz-bool-pref: "zen.view.sidebar-expanded") {
.tab-icon-overlay {
margin: 0px !important;
transform: translate(-35%, 50%) scale(1.5) !important;
/* Ensure sound icon is still visible when tab not selected */
#navigator-toolbox:not([zen-sidebar-expanded])
#tabbrowser-tabs
.tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]):not(
[selected]
) {
display: block !important;
}
/* Prevent button from being toggled if tab is not selected */
&:is([soundplaying], [muted]):not([selected]) {
/* Fill sound button on hover; ensure icon is displayed */
#navigator-toolbox #tabbrowser-tabs .tabbrowser-tab {
& .tab-throbber,
& .tab-icon-pending,
& .tab-icon-image,
& .tab-sharing-icon-overlay,
& .tab-icon-overlay {
&:is([soundplaying], [muted]) {
&:hover {
fill: var(--zen-colors-primary) !important;
transition: 0.2s;
display: block !important;
}
}
}
}
/* ================== Zen essentials (expanded tabs) ================== */
#navigator-toolbox[zen-sidebar-expanded] {
.tabbrowser-tab[zen-essential] {
/* Hide tab icon image for collapsed tabs and essentials */
&:is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image {
display: none !important;
}
& .tab-throbber,
& .tab-icon-pending,
& .tab-icon-image,
& .tab-sharing-icon-overlay,
& .tab-icon-overlay,
& .tab-icon-stack {
&:is([soundplaying], [muted], [activemedia-blocked]) {
transform: translate(20%, 24%)
scale(var(--bmb-sound-icon-scale-essentials)) !important;
display: block !important;
/* Remove extra margin created for vanilla icons */
margin-inline-end: -2em !important;
margin-inline-start: -2em !important;
}
}
}
}
/* ================== Zen glance tab (expanded tabs) ================== */
#navigator-toolbox[zen-sidebar-expanded] {
.tabbrowser-tab[zen-glance-tab] {
/* Hide tab icon image */
&:is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image {
display: none !important;
}
& .tab-throbber,
& .tab-icon-pending,
& .tab-icon-image,
& .tab-sharing-icon-overlay,
& .tab-icon-overlay,
& .tab-icon-stack {
&:is([soundplaying], [muted], [activemedia-blocked]) {
transform: translate(-10%, 25%)
scale(var(--bmb-sound-icon-scale-glance)) !important;
display: block !important;
margin: 0px !important;
}
}
}
}
/* ================== Zen glance tab (pinned and essentials) ================== */
#navigator-toolbox[zen-sidebar-expanded]
#tabbrowser-tabs
.tabbrowser-tab[zen-glance-tab] {
& .tab-throbber,
& .tab-icon-pending,
& .tab-icon-image,
& .tab-sharing-icon-overlay,
& .tab-icon-overlay {
&:is([soundplaying], [muted], [activemedia-blocked]) {
margin: 0px !important;
transform: translate(-35%, 25%) scale(var(--bmb-sound-icon-scale-glance)) !important;
display: block !important;
}
}
}
/* ================== Pinned tab (tab page changed) ================== */
#navigator-toolbox[zen-sidebar-expanded] {
.tabbrowser-tab[zen-pinned-changed] {
/* Add extra space for sound button when reset tab button is active */
&:is([soundplaying], [muted], [activemedia-blocked]) {
.tab-reset-pin-button {
margin-right: 2.8em !important;
}
}
& .tab-throbber,
& .tab-icon-pending,
& .tab-icon-image,
& .tab-sharing-icon-overlay,
& .tab-icon-overlay {
&:is([soundplaying], [muted], [activemedia-blocked]) {
transform: translate(180%, 45%) scale(var(--bmb-sound-icon-scale)) !important;
}
}
}
}
/* ================== Expanded tabs ================== */
#navigator-toolbox[zen-sidebar-expanded] #tabbrowser-tabs .tabbrowser-tab {
& .tab-throbber,
& .tab-icon-pending,
& .tab-icon-image,
& .tab-sharing-icon-overlay,
& .tab-icon-overlay {
&:is([soundplaying], [muted], [activemedia-blocked]) {
margin-right: 36px !important;
margin-left: 0px !important;
}
}
}
/* ================== Split view (expanded tabs) ================== */
#navigator-toolbox[zen-sidebar-expanded]
#tabbrowser-tabs
.tabbrowser-tab[split-view] {
/* Sound icon takes place of tab icon if tab is not pinned */
&:is([soundplaying], [muted], [activemedia-blocked]):not([pinned])
.tab-icon-image {
display: none !important;
}
& .tab-throbber,
& .tab-icon-pending,
& .tab-icon-image,
& .tab-sharing-icon-overlay,
& .tab-icon-overlay {
/* Replace tab icon image with sound button; not needed if tab is pinned or essential */
&:is([soundplaying], [muted], [activemedia-blocked]):not(
[zen-essential],
[pinned]
) {
transform: translate(-40%, 46%) scale(var(--bmb-sound-icon-scale)) !important;
margin-right: 12px !important;
margin-left: 4px !important;
}
&:not([pinned]) {
margin-left: 0px !important;
}
}
}
/* ================== Collapsed tabs ================== */
#navigator-toolbox:not([zen-sidebar-expanded]) {
.tab-icon-overlay {
transform: translate(-40%, 46%) scale(var(--bmb-sound-icon-scale)) !important;
/* Prevent sound/media button from being toggled on click when collapsed tab out of focus */
&:is([soundplaying], [muted], [activemedia-blocked]):not([selected]) {
pointer-events: none !important;
}
}
.tabbrowser-tab:is([soundplaying], [muted]) .tab-icon-image {
.tabbrowser-tab:is([soundplaying], [muted], [activemedia-blocked])
.tab-icon-image {
display: none !important;
}
}

View file

@ -7,8 +7,8 @@
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/5c4d7772-d963-4672-ab03-e9d541438881/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/5c4d7772-d963-4672-ab03-e9d541438881/image.png",
"author": "jvabn",
"version": "1.0.2",
"version": "1.0.3",
"tags": [],
"createdAt": "2024-10-12",
"updatedAt": "2025-03-12"
"updatedAt": "2025-04-27"
}

View file

@ -1,268 +0,0 @@
:root {
--ezuitb-darken-background: rgba(0, 0, 0, 0.1);
--ezuitb-darken-background-hover: rgba(0, 0, 0, 0.18);
--ezuitb-tab-background-hover: rgba(0, 0, 0, 0.1);
--ezuitb-url-bar-background: rgba(0, 0, 0, 0.08);
--ezuitb-floating-url-bar-background: rgba(255, 255, 255, 0.8);
--ezuitb-new-tab-button-text-color: rgba(0, 0, 0, 0.5);
--ezuitb-tab-background-active: #ffffff;
--ezuitb-tab-background-active-shadow: 2px 2px 2px rgba(0, 0, 0, 0.14),
-1px -1px 1px rgba(0, 0, 0, 0.1);
--ezuitb-popup-background: #ffffffff;
--ezuitb-background-gradient-start: #fac4ca;
--ezuitb-background-gradient-end: #e9fac1;
--ezuitb-background-gradient-angle: 140deg;
--ezuitb-border-color: #00000028;
--ezuitb-attention-color: #e06271;
--ezuitb-page-canvas-spacing: calc(var(--zen-element-separation) * 1.2);
--ezuitb-element-half-separation: calc(var(--zen-element-separation) / 2);
--ezuitb-element-three-quarters-separation: calc(
var(--zen-element-separation) * 0.75
);
--ezuitb-web-page-canvas-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2),
-1px -1px 3px rgba(0, 0, 0, 0.08);
--ezuitb-web-page-canvas-shadow-active: 2px 2px 3px rgba(0, 0, 0, 0.3),
-1px -1px 3px rgba(0, 0, 0, 0.2);
--ezuitb-floating-url-bar-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8),
1px 1px 3px rgba(0, 0, 0, 0.8);
}
/* Exit Button Padding Right */
@media (-moz-bool-pref: "uc.erics-zen-ui-tweak-box.exit-button-padding-right.enabled") {
.titlebar-buttonbox-container {
padding-right: var(--zen-element-separation);
}
}
/* Fun colors */
@media (-moz-bool-pref: "uc.erics-zen-ui-tweak-box.fun-colors.enabled") {
:root {
/* --zen-colors-primary: black !important; */
--zen-colors-secondary: var(--ezuitb-darken-background) !important;
--zen-colors-tertiary: linear-gradient(
var(--ezuitb-background-gradient-angle),
var(--ezuitb-background-gradient-start),
var(--ezuitb-background-gradient-end)
) !important;
--zen-colors-border: var(--ezuitb-border-color) !important;
--zen-dialog-background: var(--ezuitb-popup-background) !important;
/* --toolbarbutton-hover-background: var(
--ezuitb-darken-background-hover
) !important; */
--toolbarbutton-icon-fill-attention: var(
--ezuitb-attention-color
) !important;
}
#commonDialogWindow {
background-color: var(--ezuitb-popup-background) !important;
}
}
/* Removing tab-bar top padding */
@media (-moz-bool-pref: "uc.erics-zen-ui-tweak-box.tab-bar-top-padding.enabled") {
#TabsToolbar {
padding-top: 0 !important;
}
}
/* Web-page canvas shadow */
@media (-moz-bool-pref: "uc.erics-zen-ui-tweak-box.page-canvas-shadows.enabled") {
#tabbrowser-tabpanels {
grid-gap: var(--ezuitb-page-canvas-spacing) !important;
padding-right: var(--ezuitb-page-canvas-spacing) !important;
padding-bottom: var(--ezuitb-page-canvas-spacing) !important;
& .browserSidebarContainer {
box-shadow: var(--ezuitb-web-page-canvas-shadow) !important;
margin: 0 !important;
/* Darken active canvas when split */
&[zen-split-active="true"] {
box-shadow: var(--ezuitb-web-page-canvas-shadow-active) !important;
}
}
}
}
/* URL Bar remove border */
@media (-moz-bool-pref: "uc.erics-zen-ui-tweak-box.remove-url-bar-border.enabled") {
#urlbar {
border: 0 !important;
}
}
@media (-moz-bool-pref: "uc.erics-zen-ui-tweak-box.url-bar-tweaks.enabled") {
/* URL Bar buttons hover */
.urlbar-input-container {
&
> *:not(.urlbar-input-box):not(#page-action-buttons):not(
#identity-box
):hover,
.urlbar-page-action:hover {
background-color: var(--ezuitb-darken-background-hover) !important;
}
}
/* URL Bar black transparent background */
#urlbar-background {
background-color: var(--ezuitb-url-bar-background) !important;
}
/* SSL icon background */
#identity-icon-box {
background-color: var(--ezuitb-darken-background) !important;
}
}
/* Floating URL Bar tweaks */
@media (-moz-bool-pref: "uc.erics-zen-ui-tweak-box.floating-url-bar-tweaks.enabled") {
#urlbar:is([breakout][breakout-extend], [breakout][usertyping][focused]) {
#urlbar-background {
background-color: var(--ezuitb-floating-url-bar-background) !important;
}
box-shadow: var(--ezuitb-floating-url-bar-shadow) !important;
}
/* Floating URL Bar item hover */
.urlbarView-row:hover {
background-color: var(--ezuitb-darken-background) !important;
}
}
/* New Tab Button with text */
@media (-moz-bool-pref: "uc.erics-zen-ui-tweak-box.new-tab-button-text.enabled") {
@media (-moz-bool-pref: "zen.view.sidebar-expanded") {
#tabs-newtab-button {
display: flex;
flex-direction: row !important;
justify-content: flex-start !important;
&:after {
content: "New Tab";
flex: 1;
color: var(--ezuitb-new-tab-button-text-color);
}
}
}
}
/* New tab separator when no unpinned tabs */
@media (-moz-bool-pref: "uc.erics-zen-ui-tweak-box.new-tab-separator-when-no-unpinned-tabs.enabled") {
.tabbrowser-tab[pinned]
+ #tabbrowser-arrowscrollbox-periphery
> #tabs-newtab-button {
margin-top: calc(var(--zen-element-separation) * 2) !important;
position: relative;
}
/* The separator */
.tabbrowser-tab[pinned]
+ #tabbrowser-arrowscrollbox-periphery
> #tabs-newtab-button::before {
content: "";
position: absolute;
top: calc(var(--zen-element-separation) * -1);
left: 0;
width: 100%;
height: 1.5px;
border-radius: 1px;
background: var(--zen-colors-border);
}
}
/* Pinned tabs grid layout */
@media (-moz-bool-pref: "uc.erics-zen-ui-tweak-box.pinned-tabs-layout.enabled") {
.scrollbox-clip > scrollbox {
grid-template-columns: repeat(
auto-fill,
minmax(calc(var(--tab-min-height) * 1.2), 1fr)
) !important;
gap: 5px;
}
.tabbrowser-tab[pinned] {
background-color: var(--ezuitb-darken-background) !important;
border-radius: 8px !important;
cursor: pointer;
.tab-icon-stack {
opacity: 1 !important;
}
.tab-icon-image {
opacity: 1 !important;
}
}
.tabbrowser-tab[pinned]:hover {
background-color: var(--ezuitb-darken-background-hover) !important;
}
.tabbrowser-tab[pinned][selected="true"],
.tabbrowser-tab[pinned][multiselected="true"] {
background-color: var(--ezuitb-tab-background-active) !important;
box-shadow: var(--ezuitb-tab-background-active-shadow) !important;
}
}
/* Zen workspace button */
@media (-moz-bool-pref: "uc.erics-zen-ui-tweak-box.workspace-button-tweaks.enabled") {
#zen-workspaces-button {
background-color: var(--ezuitb-darken-background) !important;
border-radius: 8px !important;
cursor: pointer;
box-sizing: border-box;
height: 34px !important;
border-width: 0 !important;
aspect-ratio: 1 / 1;
}
/* Zen workspace button - Hover */
#zen-workspaces-button:hover {
background-color: var(--ezuitb-darken-background-hover) !important;
}
/* Zen workspace button - space from tabs when collapsed */
@media not (-moz-bool-pref: "zen.view.sidebar-expanded") {
#zen-workspaces-button {
margin-bottom: var(--zen-element-separation) !important;
}
}
/* Zen workspace button - width when expanded */
@media (-moz-bool-pref: "zen.view.sidebar-expanded") {
#zen-workspaces-button {
width: calc(
100% - var(--ezuitb-element-three-quarters-separation)
) !important;
margin-left: var(--ezuitb-element-half-separation) !important;
}
}
}
/*Toolbar Button Tweaks*/
@media (-moz-bool-pref: "uc.erics-zen-ui-tweak-box.toolbar-button-tweaks.enabled") {
#zen-profile-button:hover,
.toolbarbutton-1:hover > .toolbarbutton-icon,
.toolbarbutton-1:hover > .toolbarbutton-badge-stack {
background-color: var(--ezuitb-darken-background-hover) !important;
}
#tabs-newtab-button:hover > .toolbarbutton-icon {
background-color: transparent !important;
}
}
/* Tab tweaks */
@media (-moz-bool-pref: "uc.erics-zen-ui-tweak-box.tab-button-tweaks.enabled") {
.tabbrowser-tab:not([pinned]):not([selected="true"]):hover,
#tabs-newtab-button:hover {
background-color: var(--ezuitb-tab-background-hover) !important;
}
/* Tab - Selected */
.tabbrowser-tab:not([pinned])[selected="true"],
.tabbrowser-tab:not([pinned])[multiselected="true"] {
background-color: var(--ezuitb-tab-background-active) !important;
box-shadow: var(--ezuitb-tab-background-active-shadow) !important;
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 KiB

View file

@ -1,80 +0,0 @@
[
{
"property": "uc.erics-zen-ui-tweak-box.exit-button-padding-right.enabled",
"label": "Adds some spacing to the right of the exit button",
"type": "checkbox",
"disabledOn": []
},
{
"property": "uc.erics-zen-ui-tweak-box.fun-colors.enabled",
"label": "Enables a cool gradient as the background",
"type": "checkbox",
"disabledOn": []
},
{
"property": "uc.erics-zen-ui-tweak-box.tab-bar-top-padding.enabled",
"label": "Removes the top padding from the tabs side panel so it's aligned with the page",
"type": "checkbox",
"disabledOn": []
},
{
"property": "uc.erics-zen-ui-tweak-box.page-canvas-shadows.enabled",
"label": "Adds shadows to the page canvas",
"type": "checkbox",
"disabledOn": []
},
{
"property": "uc.erics-zen-ui-tweak-box.remove-url-bar-border.enabled",
"label": "Removes the border around the URL Bar",
"type": "checkbox",
"disabledOn": []
},
{
"property": "uc.erics-zen-ui-tweak-box.url-bar-tweaks.enabled",
"label": "URL Bar appearance tweaks",
"type": "checkbox",
"disabledOn": []
},
{
"property": "uc.erics-zen-ui-tweak-box.floating-url-bar-tweaks.enabled",
"label": "Floating URL Bar appearance tweaks",
"type": "checkbox",
"disabledOn": []
},
{
"property": "uc.erics-zen-ui-tweak-box.new-tab-button-text.enabled",
"label": "New tab button text",
"type": "checkbox",
"disabledOn": []
},
{
"property": "uc.erics-zen-ui-tweak-box.new-tab-separator-when-no-unpinned-tabs.enabled",
"label": "Adds a separator before the new tab button if there are no unpinned tabs",
"type": "checkbox",
"disabledOn": []
},
{
"property": "uc.erics-zen-ui-tweak-box.pinned-tabs-layout.enabled",
"label": "Tweaks the layout of the pinned tabs",
"type": "checkbox",
"disabledOn": []
},
{
"property": "uc.erics-zen-ui-tweak-box.workspace-button-tweaks.enabled",
"label": "Tweaks the appearance of the workspace button",
"type": "checkbox",
"disabledOn": []
},
{
"property": "uc.erics-zen-ui-tweak-box.tab-button-tweaks.enabled",
"label": "Tweaks the appearance of the tab buttons",
"type": "checkbox",
"disabledOn": []
},
{
"property": "uc.erics-zen-ui-tweak-box.toolbar-button-tweaks.enabled",
"label": "Tweaks the appearance of the toolbar buttons",
"type": "checkbox",
"disabledOn": []
}
]

View file

@ -1,7 +0,0 @@
# Eric's Zen UI Tweak Box
Several optional UI changes for the Zen Browser. Completely changes the appearance of the browser with all tweaks enabled.
**Exit Button Right Padding theme users** - You don´t need that theme when using this one.
## Available Twe

View file

@ -1,15 +0,0 @@
{
"id": "bed8c922-616a-4165-8c86-6822ccf478ad",
"name": "Erics Zen UI Tweak Box",
"description": "Various tweaks for the Zen Browser UI",
"homepage": "https://github.com/ericmackrodt/zen-themes",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/bed8c922-616a-4165-8c86-6822ccf478ad/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/bed8c922-616a-4165-8c86-6822ccf478ad/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/bed8c922-616a-4165-8c86-6822ccf478ad/image.png",
"author": "ericmackrodt",
"version": "1.0.0",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/bed8c922-616a-4165-8c86-6822ccf478ad/preferences.json",
"tags": [],
"createdAt": "2024-09-07",
"updatedAt": "2025-01-26"
}