mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-07 17:05:31 +02:00
Merge branch 'main' into main
This commit is contained in:
mr. m
GitHub
commit
b0674c50f6
10 changed files with 590 additions and 549 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -1,5 +1,10 @@
|
|||
@media (-moz-bool-pref: "zen.tabs.vertical") {
|
||||
|
||||
/* Prevents stuff from being clipped off from bottom of Essentials */
|
||||
#zen-essentials-container, .zen-essentials-container {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
/* Makes essentials transparent (when toggled) */
|
||||
:root:has(#theme-SuperPins[uc-essentials-color-scheme="transparent"]) {
|
||||
.tabbrowser-tab[zen-essential="true"]:not(:hover):not([selected="true"]) .tab-stack .tab-background {
|
||||
|
|
@ -9,6 +14,12 @@
|
|||
|
||||
@media (-moz-bool-pref: "zen.view.sidebar-expanded") and (not (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover")) {
|
||||
|
||||
/* Default essentials-width and essentials-gap variables (set to browser default) to fix some bugs */
|
||||
:root {
|
||||
--essentials-width: 49px;
|
||||
--essentials-gap: calc(var(--zen-toolbox-padding) - 2px);
|
||||
}
|
||||
|
||||
/* Set width of Essentials (Dropdown) */
|
||||
:root:has(#theme-SuperPins[uc-essentials-width="Thin"]) {
|
||||
--essentials-width: 50px;
|
||||
|
|
@ -25,10 +36,19 @@
|
|||
:root:has(#theme-SuperPins[uc-essentials-width="Thin"],
|
||||
#theme-SuperPins[uc-essentials-width="Normal"],
|
||||
#theme-SuperPins[uc-essentials-width="Wide"]) {
|
||||
#zen-essentials-container {
|
||||
#zen-essentials-container, .zen-essentials-container {
|
||||
grid-template-columns: repeat(auto-fit,
|
||||
minmax(var(--essentials-width), auto)) !important;
|
||||
min-width: var(--essentials-width) !important;
|
||||
}
|
||||
|
||||
.zen-essentials-container {
|
||||
max-width: calc(100% - var(--zen-toolbox-padding) * 2);
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "uc.essentials.grid-count") {
|
||||
#zen-essentials-container, .zen-essentials-container {
|
||||
grid-template-columns: repeat(var(--mod-superpins-essentials-grid-count), minmax(var(--essentials-width), auto)) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -48,7 +68,7 @@
|
|||
:root:has(#theme-SuperPins[uc-essentials-gap="Small"],
|
||||
#theme-SuperPins[uc-essentials-gap="Normal"],
|
||||
#theme-SuperPins[uc-essentials-gap="Big"]) {
|
||||
#zen-essentials-container {
|
||||
#zen-essentials-container, .zen-essentials-container {
|
||||
gap: var(--essentials-gap) var(--essentials-gap) !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -75,23 +95,31 @@
|
|||
|
||||
/*disable icon shift when tab was renamed*/
|
||||
#navigator-toolbox[zen-sidebar-expanded="true"] {
|
||||
& #tabbrowser-tabs {
|
||||
& .tabbrowser-tab {
|
||||
&[zen-pinned-changed="true"]:not([zen-essential])>.tab-stack>.tab-content>.tab-icon-stack {
|
||||
& #vertical-pinned-tabs-container>.zen-workspace-tabs-section>.tabbrowser-tab>.tab-stack>.tab-content>.tab-icon-stack {
|
||||
left: unset !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Make pinned tabs auto-grow to span full width of row */
|
||||
@media (-moz-bool-pref: "uc.pins.auto-grow") {
|
||||
#vertical-pinned-tabs-container>.zen-workspace-tabs-section>.tabbrowser-tab[pinned] {
|
||||
#vertical-pinned-tabs-container>.zen-workspace-tabs-section>.tabbrowser-tab {
|
||||
width: auto !important;
|
||||
min-width: var(--tab-pinned-min-width-expanded) !important;
|
||||
flex: 1 1 auto !important;
|
||||
}
|
||||
|
||||
#vertical-pinned-tabs-container>.zen-workspace-tabs-section>tab-group {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "uc.pins.grid-count") {
|
||||
|
||||
/* Logic for pinned tabs that have auto-grow and grid-count. Must use +1 to fix */
|
||||
#vertical-pinned-tabs-container>.zen-workspace-tabs-section>.tabbrowser-tab {
|
||||
width: calc(100% / (var(--mod-superpins-pins-grid-count) + 1)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#vertical-pinned-tabs-container>.zen-workspace-tabs-section {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
|
|
@ -104,24 +132,35 @@
|
|||
grid-template-columns: repeat(auto-fit, minmax(var(--tab-pinned-min-width-expanded), auto)) !important;
|
||||
display: grid !important;
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "uc.pins.grid-count") {
|
||||
#vertical-pinned-tabs-container>.zen-workspace-tabs-section {
|
||||
grid-template-columns: repeat(var(auto-fit, --mod-superpins-pins-grid-count), minmax(var(--tab-pinned-min-width-expanded), auto)) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*The actual grid layout*/
|
||||
#vertical-pinned-tabs-container>.zen-workspace-tabs-section:has(> :nth-child(2)) {
|
||||
padding: 0 var(--zen-toolbox-padding) !important;
|
||||
overflow: hidden !important;
|
||||
overflow: visible !important;
|
||||
padding-bottom: 17px !important;
|
||||
gap: 3px 3px !important;
|
||||
max-width: calc(100% - var(--zen-toolbox-padding) * 2) !important;
|
||||
}
|
||||
|
||||
#vertical-pinned-tabs-container>.zen-workspace-tabs-section>.tabbrowser-tab[pinned] {
|
||||
#vertical-pinned-tabs-container>.zen-workspace-tabs-section .tabbrowser-tab {
|
||||
--toolbarbutton-inner-padding: 0;
|
||||
}
|
||||
|
||||
#vertical-pinned-tabs-container > .zen-workspace-tabs-section > * {
|
||||
#vertical-pinned-tabs-container>.zen-workspace-tabs-section>*:not(tab-group) {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
#vertical-pinned-tabs-container>.zen-workspace-tabs-section>tab-group .tab-icon-stack {
|
||||
margin: auto !important;
|
||||
}
|
||||
|
||||
.vertical-pinned-tabs-container-separator {
|
||||
position: absolute !important;
|
||||
bottom: 7px !important;
|
||||
|
|
@ -129,6 +168,16 @@
|
|||
transform: translateX(-50%) !important;
|
||||
width: calc(100% - var(--zen-toolbox-padding) * 2) !important;
|
||||
}
|
||||
|
||||
:root:has(#theme-SuperPins[uc-tabs-show-separator="never"]) {
|
||||
.vertical-pinned-tabs-container-separator {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#vertical-pinned-tabs-container>.zen-workspace-tabs-section:has(> :nth-child(2)) {
|
||||
padding-bottom: 5px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Make Essentials look more box like */
|
||||
|
|
@ -138,22 +187,33 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* If Essentials have a grid count but do not have auto-grow on */
|
||||
@media (-moz-bool-pref: "uc.essentials.grid-count") {
|
||||
#zen-essentials-container, .zen-essentials-container {
|
||||
grid-template-columns: repeat(var(--mod-superpins-essentials-grid-count), minmax(var(--essentials-width), auto)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Make Essentials auto-grow to span full width of a row */
|
||||
@media (-moz-bool-pref: "uc.essentials.auto-grow") {
|
||||
.tabbrowser-tab[zen-essential="true"] {
|
||||
width: auto !important;
|
||||
min-width: var(--essentials-width) !important;
|
||||
flex: 1 1 0 !important;
|
||||
box-sizing: border-box !important;
|
||||
flex: 1 1 auto !important;
|
||||
}
|
||||
|
||||
#zen-essentials-container {
|
||||
@media (-moz-bool-pref: "uc.essentials.grid-count") {
|
||||
|
||||
/* For auto-grow with grid-count. must use +1 to fix a bug */
|
||||
.tabbrowser-tab[zen-essential="true"] {
|
||||
width: calc(100% / (var(--mod-superpins-essentials-grid-count) + 1)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#zen-essentials-container, .zen-essentials-container {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
flex-direction: row !important;
|
||||
box-sizing: border-box !important;
|
||||
min-width: 0 !important;
|
||||
height: auto !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
|
|
@ -164,7 +224,7 @@
|
|||
|
||||
/* Puts Essentials at the bottom */
|
||||
:has(#theme-SuperPins[uc-essentials-position="bottom"]) {
|
||||
#zen-essentials-container {
|
||||
#zen-essentials-container, .zen-essentials-container {
|
||||
order: 999 !important;
|
||||
margin-top: auto !important;
|
||||
padding-top: 5px !important;
|
||||
|
|
@ -211,21 +271,23 @@
|
|||
|
||||
/* Adds border to Pins/Essentials (when toggled) */
|
||||
:root:has(#theme-SuperPins[uc-superpins-border="essentials"]) {
|
||||
#zen-essentials-container .tabbrowser-tab[zen-essential="true"] .tab-stack .tab-background {
|
||||
#zen-essentials-container, .zen-essentials-container {
|
||||
& .tabbrowser-tab[zen-essential="true"] .tab-stack .tab-background {
|
||||
border: 1px solid light-dark(color-mix(in srgb, var(--zen-colors-secondary) 80%, black),
|
||||
color-mix(in srgb, var(--zen-colors-secondary) 80%, white)) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:root:has(#theme-SuperPins[uc-superpins-border="pins"]) {
|
||||
.tabbrowser-tab[pinned]:not([zen-essential="true"]) .tab-stack .tab-background {
|
||||
.tabbrowser-tab[pinned]:not([zen-essential="true"]) .tab-stack .tab-background, #vertical-pinned-tabs-container>.zen-workspace-tabs-section tab-group {
|
||||
border: 1px solid light-dark(color-mix(in srgb, var(--zen-colors-secondary) 80%, black),
|
||||
color-mix(in srgb, var(--zen-colors-secondary) 80%, white)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
:root:has(#theme-SuperPins[uc-superpins-border="both"]) {
|
||||
.tabbrowser-tab[pinned] .tab-stack .tab-background {
|
||||
.tabbrowser-tab[pinned] .tab-stack .tab-background, #vertical-pinned-tabs-container>.zen-workspace-tabs-section tab-group {
|
||||
border: 1px solid light-dark(color-mix(in srgb, var(--zen-colors-secondary) 80%, black),
|
||||
color-mix(in srgb, var(--zen-colors-secondary) 80%, white)) !important;
|
||||
}
|
||||
|
|
@ -233,41 +295,55 @@
|
|||
|
||||
/* Let pinned tabs have the same selected styling as essentials */
|
||||
@media (-moz-bool-pref: "uc.pins.essentials-layout") {
|
||||
#vertical-pinned-tabs-container>.zen-workspace-tabs-section {
|
||||
grid-template-columns: repeat(auto-fit,
|
||||
minmax(var(--essentials-width), auto)) !important;
|
||||
|
||||
/* Specific query to overwrite previous one */
|
||||
#vertical-pinned-tabs-container>.zen-workspace-tabs-section:has(> :nth-child(2)) {
|
||||
gap: var(--essentials-gap) var(--essentials-gap) !important;
|
||||
}
|
||||
|
||||
#vertical-pinned-tabs-container>.zen-workspace-tabs-section>.tabbrowser-tab[pinned] {
|
||||
#vertical-pinned-tabs-container>.zen-workspace-tabs-section {
|
||||
grid-template-columns: repeat(auto-fit, minmax(var(--essentials-width), auto)) !important;
|
||||
}
|
||||
|
||||
#vertical-pinned-tabs-container>.zen-workspace-tabs-section>.tabbrowser-tab {
|
||||
min-width: var(--essentials-width) !important;
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "uc.pins.grid-count") {
|
||||
#vertical-pinned-tabs-container>.zen-workspace-tabs-section {
|
||||
grid-template-columns: repeat(var(auto-fit, --mod-superpins-pins-grid-count), minmax(var(--essentials-width), auto)) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* pins height */
|
||||
:root:has(#theme-SuperPins[uc-pinned-height="small"]) {
|
||||
#navigator-toolbox[zen-sidebar-expanded="true"]
|
||||
#vertical-pinned-tabs-container:has(tab:not([hidden]))
|
||||
.tabbrowser-tab {
|
||||
#navigator-toolbox[zen-sidebar-expanded="true"] #vertical-pinned-tabs-container:has(> :nth-child(2)) .zen-workspace-tabs-section {
|
||||
&>.tabbrowser-tab, &>tab-group {
|
||||
height: 40px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:root:has(#theme-SuperPins[uc-pinned-height="normal"]) {
|
||||
#navigator-toolbox[zen-sidebar-expanded="true"]
|
||||
#vertical-pinned-tabs-container:has(tab:not([hidden]))
|
||||
.tabbrowser-tab {
|
||||
#navigator-toolbox[zen-sidebar-expanded="true"] #vertical-pinned-tabs-container:has(> :nth-child(2)) .zen-workspace-tabs-section {
|
||||
&>.tabbrowser-tab, &>tab-group {
|
||||
height: 50px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:root:has(#theme-SuperPins[uc-pinned-height="large"]) {
|
||||
#navigator-toolbox[zen-sidebar-expanded="true"]
|
||||
#vertical-pinned-tabs-container:has(tab:not([hidden]))
|
||||
.tabbrowser-tab {
|
||||
#navigator-toolbox[zen-sidebar-expanded="true"] #vertical-pinned-tabs-container:has(> :nth-child(2)) .zen-workspace-tabs-section {
|
||||
&>.tabbrowser-tab, &>tab-group {
|
||||
height: 60px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* favicon size */
|
||||
:root:has(#theme-SuperPins[uc-favicon-size="small"]) {
|
||||
.tab-throbber,
|
||||
|
||||
.tab-icon-pending,
|
||||
.tab-icon-image,
|
||||
.tab-sharing-icon-overlay,
|
||||
|
|
@ -275,9 +351,12 @@
|
|||
height: 16px !important;
|
||||
width: 16px !important;
|
||||
}
|
||||
|
||||
/* No need to scale tab throbber as it is same size. */
|
||||
}
|
||||
|
||||
:root:has(#theme-SuperPins[uc-favicon-size="normal"]) {
|
||||
.tab-throbber,
|
||||
|
||||
.tab-icon-pending,
|
||||
.tab-icon-image,
|
||||
.tab-sharing-icon-overlay,
|
||||
|
|
@ -285,9 +364,14 @@
|
|||
height: 18px !important;
|
||||
width: 18px !important;
|
||||
}
|
||||
|
||||
.tab-throbber {
|
||||
transform: scale(1.125) !important;
|
||||
}
|
||||
}
|
||||
|
||||
:root:has(#theme-SuperPins[uc-favicon-size="large"]) {
|
||||
.tab-throbber,
|
||||
|
||||
.tab-icon-pending,
|
||||
.tab-icon-image,
|
||||
.tab-sharing-icon-overlay,
|
||||
|
|
@ -295,47 +379,88 @@
|
|||
height: 20px !important;
|
||||
width: 20px !important;
|
||||
}
|
||||
|
||||
.tab-throbber {
|
||||
transform: scale(1.25) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* workspace icons size */
|
||||
:root:has(#theme-SuperPins[uc-workspace-icon-size="x-small"]) {
|
||||
#zen-workspaces-button {
|
||||
font-size: x-small !important;
|
||||
}
|
||||
}
|
||||
|
||||
:root:has(#theme-SuperPins[uc-workspace-icon-size="small"]) {
|
||||
#zen-workspaces-button {
|
||||
font-size: small !important;
|
||||
}
|
||||
}
|
||||
|
||||
:root:has(#theme-SuperPins[uc-workspace-icon-size="medium"]) {
|
||||
#zen-workspaces-button {
|
||||
font-size: medium !important;
|
||||
}
|
||||
}
|
||||
|
||||
:root:has(#theme-SuperPins[uc-workspace-icon-size="large"]) {
|
||||
#zen-workspaces-button {
|
||||
font-size: large !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* current workspace icons size */
|
||||
:root:has(#theme-SuperPins[uc-workspace-current-icon-size="small"]) {
|
||||
.zen-current-workspace-indicator .zen-current-workspace-indicator-icon {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
:root:has(#theme-SuperPins[uc-workspace-current-icon-size="normal"]) {
|
||||
.zen-current-workspace-indicator .zen-current-workspace-indicator-icon {
|
||||
font-size: 14.5px !important;
|
||||
}
|
||||
}
|
||||
|
||||
:root:has(#theme-SuperPins[uc-workspace-current-icon-size="large"]) {
|
||||
.zen-current-workspace-indicator .zen-current-workspace-indicator-icon {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Increase margin below Essentials in case the workspace indicator is not visible. */
|
||||
@media (not (-moz-bool-pref: "zen.workspaces.show-workspace-indicator")) {
|
||||
:root:has(#theme-SuperPins[uc-tabs-show-separator="essentials-shown"]) {
|
||||
#zen-essentials-container, .zen-essentials-container {
|
||||
&:has(~ #zen-tabs-wrapper #zen-browser-tabs-container #vertical-pinned-tabs-container .zen-workspace-tabs-section[active="true"] .tabbrowser-tab) {
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
}
|
||||
|
||||
#zen-essentials-container, .zen-essentials-container {
|
||||
&:has(> :nth-child(1))~#zen-tabs-wrapper #zen-browser-tabs-container #vertical-pinned-tabs-container>.zen-workspace-tabs-section {
|
||||
min-height: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
#zen-essentials-container, .zen-essentials-container {
|
||||
&:has(> :nth-child(1))~#zen-tabs-wrapper #zen-browser-tabs-container #vertical-pinned-tabs-container>.zen-workspace-tabs-section .vertical-pinned-tabs-container-separator {
|
||||
max-height: unset !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:root:not(:has(#theme-SuperPins[uc-tabs-show-separator="essentials-shown"])) {
|
||||
#zen-essentials-container, .zen-essentials-container {
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Ensure that the browser uses SuperPins dim rather than the built-in dim-pending. */
|
||||
.tab-icon-image[pending="true"], .tabbrowser-tab[pending="true"] .tab-text {
|
||||
.tab-icon-image[pending="true"],
|
||||
.tabbrowser-tab[pending="true"] .tab-text {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
|
|
@ -355,8 +480,63 @@
|
|||
|
||||
/* If dim-type is set to icon + text. */
|
||||
:root:has(#theme-SuperPins[uc-tabs-dim-type="both"]) {
|
||||
.tab-icon-image[pending="true"], .tabbrowser-tab[pending="true"] .tab-text {
|
||||
|
||||
.tab-icon-image[pending="true"],
|
||||
.tabbrowser-tab[pending="true"] .tab-text {
|
||||
opacity: 0.5 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "uc.tabs.strikethrough-on-pending") {
|
||||
.tabbrowser-tab[pending="true"] .tab-text {
|
||||
text-decoration: line-through !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "uc.pins.stay-at-top") {
|
||||
#zen-browser-tabs-container {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
#tabbrowser-arrowscrollbox {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
#tabbrowser-arrowscrollbox>.zen-workspace-tabs-section {
|
||||
overflow-y: auto !important;
|
||||
overflow-x: hidden !important;
|
||||
/* Calculate the height of the bottom workspace section. */
|
||||
max-height: calc(100% - 43px) !important;
|
||||
box-sizing: border-box !important;
|
||||
padding-bottom: 60px !important;
|
||||
}
|
||||
|
||||
/* In case workspace indicator is not visible. */
|
||||
@media (not (-moz-bool-pref: "zen.workspaces.show-workspace-indicator")) {
|
||||
#tabbrowser-arrowscrollbox>.zen-workspace-tabs-section {
|
||||
max-height: calc(100% - 5px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#zen-tabs-wrapper {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* Ensure tab-groups never shrink. */
|
||||
tab-group {
|
||||
flex: 0 0 auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: "uc.pins.active-bg") {
|
||||
.zen-workspace-tabs-section .tabbrowser-tab[pinned][selected="true"] .tab-stack .tab-background {
|
||||
background-color: var(--mod-superpins-pins-active-bg) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.zen-workspace-tabs-section .tabbrowser-tab[pinned][selected="true"]:hover .tab-stack .tab-background {
|
||||
opacity: 0.8 !important;
|
||||
background-color: var(--mod-superpins-pins-active-bg) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -138,6 +138,52 @@
|
|||
"type": "checkbox",
|
||||
"disabledOn": []
|
||||
},
|
||||
{
|
||||
"property": "uc.pins.stay-at-top",
|
||||
"label": "Keep pinned tabs at the top when scrolling",
|
||||
"type": "checkbox",
|
||||
"disabledOn": []
|
||||
},
|
||||
{
|
||||
"property": "uc.pins.active-bg",
|
||||
"label": "Adds a custom background to active pinned tabs",
|
||||
"type": "checkbox",
|
||||
"disabledOn": []
|
||||
},
|
||||
{
|
||||
"property": "mod.superpins.pins.active-bg",
|
||||
"label": "Custom background for active pinned tabs.",
|
||||
"type": "string",
|
||||
"disabledOn": []
|
||||
},
|
||||
{
|
||||
"property": "uc.tabs.strikethrough-on-pending",
|
||||
"label": "Adds a strikethrough effect on unloaded tabs",
|
||||
"type": "checkbox",
|
||||
"disabledOn": []
|
||||
},
|
||||
{
|
||||
"property": "uc.tabs.show-separator",
|
||||
"label": "When to display separator",
|
||||
"type": "dropdown",
|
||||
"disabledOn": [],
|
||||
"placeholder": "Default",
|
||||
"defaultValue": "pinned-shown",
|
||||
"options": [
|
||||
{
|
||||
"label": "Never",
|
||||
"value": "never"
|
||||
},
|
||||
{
|
||||
"label": "When there are pinned tabs only",
|
||||
"value": "pinned-shown"
|
||||
},
|
||||
{
|
||||
"label": "When there are Essentials and/or pinned tabs",
|
||||
"value": "essentials-shown"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"property": "uc.tabs.dim-type",
|
||||
"label": "Dim the selected parts of a tab when it is unloaded",
|
||||
|
|
@ -241,5 +287,31 @@
|
|||
"value": "large"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"property": "uc.essentials.grid-count",
|
||||
"label": "Makes Essentials have a limited amount of columns",
|
||||
"type": "checkbox",
|
||||
"disabledOn": []
|
||||
},
|
||||
{
|
||||
"property": "mod.superpins.essentials.grid-count",
|
||||
"label": "Number of slots in essentials grid.",
|
||||
"type": "string",
|
||||
"disabledOn": [],
|
||||
"defaultValue": "1"
|
||||
},
|
||||
{
|
||||
"property": "uc.pins.grid-count",
|
||||
"label": "Makes pinned tabs have a limited amount of columns",
|
||||
"type": "checkbox",
|
||||
"disabledOn": []
|
||||
},
|
||||
{
|
||||
"property": "mod.superpins.pins.grid-count",
|
||||
"label": "Number of slots in pins grid.",
|
||||
"type": "string",
|
||||
"disabledOn": [],
|
||||
"defaultValue": "1"
|
||||
}
|
||||
]
|
||||
|
|
@ -2,16 +2,16 @@
|
|||
"id": "ad97bb70-0066-4e42-9b5f-173a5e42c6fc",
|
||||
"name": "SuperPins",
|
||||
"description": "This Zen Mod enhances pinned tabs/Essentials, by making some UI/UX changes.",
|
||||
"homepage": "https://github.com/JLBlk/Zen-Themes/tree/main/SuperPins",
|
||||
"homepage": "https://github.com/CosmoCreeper/Zen-Themes/tree/main/SuperPins",
|
||||
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/chrome.css",
|
||||
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/readme.md",
|
||||
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/image.png",
|
||||
"author": "JLBlk",
|
||||
"version": "1.5.0",
|
||||
"author": "CosmoCreeper",
|
||||
"version": "1.5.1",
|
||||
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/preferences.json",
|
||||
"tags": [
|
||||
"tabs"
|
||||
],
|
||||
"createdAt": "2024-08-28",
|
||||
"updatedAt": "2025-04-17"
|
||||
"updatedAt": "2025-04-27"
|
||||
}
|
||||
|
|
@ -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 |
|
|
@ -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": []
|
||||
}
|
||||
]
|
||||
|
|
@ -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
|
||||
|
|
@ -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"
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue