mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-07 17:05:31 +02:00
Merge pull request #1442 from JLBlk/UpdateSuperPins
This commit is contained in:
mr. m
GitHub
commit
cc8790ef46
3 changed files with 396 additions and 144 deletions
|
|
@ -1,5 +1,10 @@
|
||||||
@media (-moz-bool-pref: "zen.tabs.vertical") {
|
@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) */
|
/* Makes essentials transparent (when toggled) */
|
||||||
:root:has(#theme-SuperPins[uc-essentials-color-scheme="transparent"]) {
|
:root:has(#theme-SuperPins[uc-essentials-color-scheme="transparent"]) {
|
||||||
.tabbrowser-tab[zen-essential="true"]:not(:hover):not([selected="true"]) .tab-stack .tab-background {
|
.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")) {
|
@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) */
|
/* Set width of Essentials (Dropdown) */
|
||||||
:root:has(#theme-SuperPins[uc-essentials-width="Thin"]) {
|
:root:has(#theme-SuperPins[uc-essentials-width="Thin"]) {
|
||||||
--essentials-width: 50px;
|
--essentials-width: 50px;
|
||||||
|
|
@ -25,10 +36,19 @@
|
||||||
:root:has(#theme-SuperPins[uc-essentials-width="Thin"],
|
:root:has(#theme-SuperPins[uc-essentials-width="Thin"],
|
||||||
#theme-SuperPins[uc-essentials-width="Normal"],
|
#theme-SuperPins[uc-essentials-width="Normal"],
|
||||||
#theme-SuperPins[uc-essentials-width="Wide"]) {
|
#theme-SuperPins[uc-essentials-width="Wide"]) {
|
||||||
#zen-essentials-container {
|
#zen-essentials-container, .zen-essentials-container {
|
||||||
grid-template-columns: repeat(auto-fit,
|
grid-template-columns: repeat(auto-fit,
|
||||||
minmax(var(--essentials-width), auto)) !important;
|
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"],
|
:root:has(#theme-SuperPins[uc-essentials-gap="Small"],
|
||||||
#theme-SuperPins[uc-essentials-gap="Normal"],
|
#theme-SuperPins[uc-essentials-gap="Normal"],
|
||||||
#theme-SuperPins[uc-essentials-gap="Big"]) {
|
#theme-SuperPins[uc-essentials-gap="Big"]) {
|
||||||
#zen-essentials-container {
|
#zen-essentials-container, .zen-essentials-container {
|
||||||
gap: var(--essentials-gap) var(--essentials-gap) !important;
|
gap: var(--essentials-gap) var(--essentials-gap) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -75,23 +95,31 @@
|
||||||
|
|
||||||
/*disable icon shift when tab was renamed*/
|
/*disable icon shift when tab was renamed*/
|
||||||
#navigator-toolbox[zen-sidebar-expanded="true"] {
|
#navigator-toolbox[zen-sidebar-expanded="true"] {
|
||||||
& #tabbrowser-tabs {
|
& #vertical-pinned-tabs-container>.zen-workspace-tabs-section>.tabbrowser-tab>.tab-stack>.tab-content>.tab-icon-stack {
|
||||||
& .tabbrowser-tab {
|
left: unset !important;
|
||||||
&[zen-pinned-changed="true"]:not([zen-essential])>.tab-stack>.tab-content>.tab-icon-stack {
|
|
||||||
left: unset !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Make pinned tabs auto-grow to span full width of row */
|
/* Make pinned tabs auto-grow to span full width of row */
|
||||||
@media (-moz-bool-pref: "uc.pins.auto-grow") {
|
@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;
|
width: auto !important;
|
||||||
min-width: var(--tab-pinned-min-width-expanded) !important;
|
min-width: var(--tab-pinned-min-width-expanded) !important;
|
||||||
flex: 1 1 auto !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 {
|
#vertical-pinned-tabs-container>.zen-workspace-tabs-section {
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
flex-wrap: wrap !important;
|
flex-wrap: wrap !important;
|
||||||
|
|
@ -104,24 +132,35 @@
|
||||||
grid-template-columns: repeat(auto-fit, minmax(var(--tab-pinned-min-width-expanded), auto)) !important;
|
grid-template-columns: repeat(auto-fit, minmax(var(--tab-pinned-min-width-expanded), auto)) !important;
|
||||||
display: grid !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*/
|
/*The actual grid layout*/
|
||||||
#vertical-pinned-tabs-container>.zen-workspace-tabs-section:has(> :nth-child(2)) {
|
#vertical-pinned-tabs-container>.zen-workspace-tabs-section:has(> :nth-child(2)) {
|
||||||
padding: 0 var(--zen-toolbox-padding) !important;
|
padding: 0 var(--zen-toolbox-padding) !important;
|
||||||
overflow: hidden !important;
|
overflow: visible !important;
|
||||||
padding-bottom: 17px !important;
|
padding-bottom: 17px !important;
|
||||||
gap: 3px 3px !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;
|
--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;
|
margin: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#vertical-pinned-tabs-container>.zen-workspace-tabs-section>tab-group .tab-icon-stack {
|
||||||
|
margin: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
.vertical-pinned-tabs-container-separator {
|
.vertical-pinned-tabs-container-separator {
|
||||||
position: absolute !important;
|
position: absolute !important;
|
||||||
bottom: 7px !important;
|
bottom: 7px !important;
|
||||||
|
|
@ -129,6 +168,16 @@
|
||||||
transform: translateX(-50%) !important;
|
transform: translateX(-50%) !important;
|
||||||
width: calc(100% - var(--zen-toolbox-padding) * 2) !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 */
|
/* 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 */
|
/* Make Essentials auto-grow to span full width of a row */
|
||||||
@media (-moz-bool-pref: "uc.essentials.auto-grow") {
|
@media (-moz-bool-pref: "uc.essentials.auto-grow") {
|
||||||
.tabbrowser-tab[zen-essential="true"] {
|
.tabbrowser-tab[zen-essential="true"] {
|
||||||
width: auto !important;
|
width: auto !important;
|
||||||
min-width: var(--essentials-width) !important;
|
min-width: var(--essentials-width) !important;
|
||||||
flex: 1 1 0 !important;
|
flex: 1 1 auto !important;
|
||||||
box-sizing: border-box !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;
|
display: flex !important;
|
||||||
flex-wrap: wrap !important;
|
flex-wrap: wrap !important;
|
||||||
flex-direction: row !important;
|
flex-direction: row !important;
|
||||||
box-sizing: border-box !important;
|
|
||||||
min-width: 0 !important;
|
|
||||||
height: auto !important;
|
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -164,7 +224,7 @@
|
||||||
|
|
||||||
/* Puts Essentials at the bottom */
|
/* Puts Essentials at the bottom */
|
||||||
:has(#theme-SuperPins[uc-essentials-position="bottom"]) {
|
:has(#theme-SuperPins[uc-essentials-position="bottom"]) {
|
||||||
#zen-essentials-container {
|
#zen-essentials-container, .zen-essentials-container {
|
||||||
order: 999 !important;
|
order: 999 !important;
|
||||||
margin-top: auto !important;
|
margin-top: auto !important;
|
||||||
padding-top: 5px !important;
|
padding-top: 5px !important;
|
||||||
|
|
@ -211,21 +271,23 @@
|
||||||
|
|
||||||
/* Adds border to Pins/Essentials (when toggled) */
|
/* Adds border to Pins/Essentials (when toggled) */
|
||||||
:root:has(#theme-SuperPins[uc-superpins-border="essentials"]) {
|
: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 {
|
||||||
border: 1px solid light-dark(color-mix(in srgb, var(--zen-colors-secondary) 80%, black),
|
& .tabbrowser-tab[zen-essential="true"] .tab-stack .tab-background {
|
||||||
color-mix(in srgb, var(--zen-colors-secondary) 80%, white)) !important;
|
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"]) {
|
: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),
|
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;
|
color-mix(in srgb, var(--zen-colors-secondary) 80%, white)) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:root:has(#theme-SuperPins[uc-superpins-border="both"]) {
|
: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),
|
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;
|
color-mix(in srgb, var(--zen-colors-secondary) 80%, white)) !important;
|
||||||
}
|
}
|
||||||
|
|
@ -233,130 +295,248 @@
|
||||||
|
|
||||||
/* Let pinned tabs have the same selected styling as essentials */
|
/* Let pinned tabs have the same selected styling as essentials */
|
||||||
@media (-moz-bool-pref: "uc.pins.essentials-layout") {
|
@media (-moz-bool-pref: "uc.pins.essentials-layout") {
|
||||||
#vertical-pinned-tabs-container>.zen-workspace-tabs-section {
|
|
||||||
grid-template-columns: repeat(auto-fit,
|
/* Specific query to overwrite previous one */
|
||||||
minmax(var(--essentials-width), auto)) !important;
|
#vertical-pinned-tabs-container>.zen-workspace-tabs-section:has(> :nth-child(2)) {
|
||||||
gap: var(--essentials-gap) var(--essentials-gap) !important;
|
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;
|
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 */
|
/* pins height */
|
||||||
:root:has(#theme-SuperPins[uc-pinned-height="small"]) {
|
:root:has(#theme-SuperPins[uc-pinned-height="small"]) {
|
||||||
#navigator-toolbox[zen-sidebar-expanded="true"]
|
#navigator-toolbox[zen-sidebar-expanded="true"] #vertical-pinned-tabs-container:has(> :nth-child(2)) .zen-workspace-tabs-section {
|
||||||
#vertical-pinned-tabs-container:has(tab:not([hidden]))
|
&>.tabbrowser-tab, &>tab-group {
|
||||||
.tabbrowser-tab {
|
height: 40px !important;
|
||||||
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 {
|
|
||||||
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 {
|
|
||||||
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,
|
|
||||||
.tab-icon-overlay {
|
|
||||||
height: 16px !important;
|
|
||||||
width: 16px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
:root:has(#theme-SuperPins[uc-favicon-size="normal"]) {
|
|
||||||
.tab-throbber,
|
|
||||||
.tab-icon-pending,
|
|
||||||
.tab-icon-image,
|
|
||||||
.tab-sharing-icon-overlay,
|
|
||||||
.tab-icon-overlay {
|
|
||||||
height: 18px !important;
|
|
||||||
width: 18px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
:root:has(#theme-SuperPins[uc-favicon-size="large"]) {
|
|
||||||
.tab-throbber,
|
|
||||||
.tab-icon-pending,
|
|
||||||
.tab-icon-image,
|
|
||||||
.tab-sharing-icon-overlay,
|
|
||||||
.tab-icon-overlay {
|
|
||||||
height: 20px !important;
|
|
||||||
width: 20px !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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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 {
|
|
||||||
opacity: 1 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* If dim-type is set to icons. */
|
|
||||||
:root:has(#theme-SuperPins[uc-tabs-dim-type="icons"]) {
|
|
||||||
.tab-icon-image[pending="true"] {
|
|
||||||
opacity: 0.5 !important;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/* If dim-type is set to text. */
|
:root:has(#theme-SuperPins[uc-pinned-height="normal"]) {
|
||||||
:root:has(#theme-SuperPins[uc-tabs-dim-type="text"]) {
|
#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(> :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-icon-pending,
|
||||||
|
.tab-icon-image,
|
||||||
|
.tab-sharing-icon-overlay,
|
||||||
|
.tab-icon-overlay {
|
||||||
|
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-icon-pending,
|
||||||
|
.tab-icon-image,
|
||||||
|
.tab-sharing-icon-overlay,
|
||||||
|
.tab-icon-overlay {
|
||||||
|
height: 18px !important;
|
||||||
|
width: 18px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-throbber {
|
||||||
|
transform: scale(1.125) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:root:has(#theme-SuperPins[uc-favicon-size="large"]) {
|
||||||
|
|
||||||
|
.tab-icon-pending,
|
||||||
|
.tab-icon-image,
|
||||||
|
.tab-sharing-icon-overlay,
|
||||||
|
.tab-icon-overlay {
|
||||||
|
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 {
|
.tabbrowser-tab[pending="true"] .tab-text {
|
||||||
opacity: 0.5 !important;
|
opacity: 1 !important;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/* If dim-type is set to icon + text. */
|
/* If dim-type is set to icons. */
|
||||||
:root:has(#theme-SuperPins[uc-tabs-dim-type="both"]) {
|
:root:has(#theme-SuperPins[uc-tabs-dim-type="icons"]) {
|
||||||
.tab-icon-image[pending="true"], .tabbrowser-tab[pending="true"] .tab-text {
|
.tab-icon-image[pending="true"] {
|
||||||
opacity: 0.5 !important;
|
opacity: 0.5 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* If dim-type is set to text. */
|
||||||
|
:root:has(#theme-SuperPins[uc-tabs-dim-type="text"]) {
|
||||||
|
.tabbrowser-tab[pending="true"] .tab-text {
|
||||||
|
opacity: 0.5 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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 {
|
||||||
|
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",
|
"type": "checkbox",
|
||||||
"disabledOn": []
|
"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",
|
"property": "uc.tabs.dim-type",
|
||||||
"label": "Dim the selected parts of a tab when it is unloaded",
|
"label": "Dim the selected parts of a tab when it is unloaded",
|
||||||
|
|
@ -241,5 +287,31 @@
|
||||||
"value": "large"
|
"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",
|
"id": "ad97bb70-0066-4e42-9b5f-173a5e42c6fc",
|
||||||
"name": "SuperPins",
|
"name": "SuperPins",
|
||||||
"description": "This Zen Mod enhances pinned tabs/Essentials, by making some UI/UX changes.",
|
"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",
|
"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",
|
"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",
|
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/image.png",
|
||||||
"author": "JLBlk",
|
"author": "CosmoCreeper",
|
||||||
"version": "1.5.0",
|
"version": "1.5.1",
|
||||||
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/preferences.json",
|
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/preferences.json",
|
||||||
"tags": [
|
"tags": [
|
||||||
"tabs"
|
"tabs"
|
||||||
],
|
],
|
||||||
"createdAt": "2024-08-28",
|
"createdAt": "2024-08-28",
|
||||||
"updatedAt": "2025-04-17"
|
"updatedAt": "2025-04-17"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue