diff --git a/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/chrome.css b/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/chrome.css index d02a3543..5798dcf6 100644 --- a/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/chrome.css +++ b/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/chrome.css @@ -77,88 +77,102 @@ /* Enables legacy layout for pinned tabs (icon only in grid) */ @media (-moz-bool-pref: "uc.pins.legacy-layout") { - #vertical-pinned-tabs-container .tabbrowser-tab[pinned] .tab-close-button { - display: none !important; - } - - #vertical-pinned-tabs-container .tabbrowser-tab[pinned] .tab-reset-button { - display: none !important; - } - - #vertical-pinned-tabs-container .tabbrowser-tab[pinned] .tab-reset-pin-button { - display: none !important; - } - - #vertical-pinned-tabs-container .tabbrowser-tab[pinned] .tab-label-container { - display: none !important; + #vertical-pinned-tabs-container, .zen-workspace-pinned-tabs-section { + .tabbrowser-tab[pinned] { + .tab-close-button, .tab-reset-button, + .tab-reset-pin-button, .tab-label-container { + display: none !important; + } + } } /*disable icon shift when tab was renamed*/ #navigator-toolbox[zen-sidebar-expanded="true"] { - & #vertical-pinned-tabs-container>.zen-workspace-tabs-section>.tabbrowser-tab>.tab-stack>.tab-content>.tab-icon-stack { - left: unset !important; + & #vertical-pinned-tabs-container>.zen-workspace-tabs-section, + & .zen-workspace-pinned-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 { - 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 { + #vertical-pinned-tabs-container>.zen-workspace-tabs-section, + .zen-workspace-pinned-tabs-section { display: flex !important; flex-wrap: wrap !important; flex-direction: row !important; + + &>.tabbrowser-tab { + width: auto !important; + min-width: var(--tab-pinned-min-width-expanded) !important; + flex: 1 1 auto !important; + } + + &>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, + .zen-workspace-pinned-tabs-section { + &>.tabbrowser-tab { + width: calc(100% / (var(--mod-superpins-pins-grid-count) + 1)) !important; + } + } } } @media (not (-moz-bool-pref: "uc.pins.auto-grow")) { - #vertical-pinned-tabs-container>.zen-workspace-tabs-section { + #vertical-pinned-tabs-container>.zen-workspace-tabs-section, + .zen-workspace-pinned-tabs-section { 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 { + #vertical-pinned-tabs-container>.zen-workspace-tabs-section, + .zen-workspace-pinned-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: 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, + .zen-workspace-pinned-tabs-section { + &:has(> :nth-child(2)) { + margin: 0 var(--zen-toolbox-padding) !important; + padding: 0 var(--zen-toolbox-padding) !important; + overflow: visible !important; + padding-bottom: 17px !important; + gap: 3px 3px !important; + max-width: calc(100% - var(--zen-toolbox-padding) * 2) !important; + } + + .tabbrowser-tab { + --toolbarbutton-inner-padding: 0; + } + + &>*:not(tab-group) { + margin: 0 !important; + } + + &>tab-group .tab-icon-stack { + margin: auto !important; + } } - #vertical-pinned-tabs-container>.zen-workspace-tabs-section .tabbrowser-tab { - --toolbarbutton-inner-padding: 0; - } + .zen-workspace-pinned-tabs-section { + position: relative !important; - #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; + .tab-icon-stack { + margin-left: 50% !important; + transform: translateX(-50%) !important; + } } .vertical-pinned-tabs-container-separator { @@ -174,8 +188,11 @@ display: none !important; } - #vertical-pinned-tabs-container>.zen-workspace-tabs-section:has(> :nth-child(2)) { - padding-bottom: 5px !important; + #vertical-pinned-tabs-container>.zen-workspace-tabs-section, + .zen-workspace-pinned-tabs-section { + :has(> :nth-child(2)) { + padding-bottom: 5px !important; + } } } } @@ -224,7 +241,7 @@ /* Puts Essentials at the bottom */ :has(#theme-SuperPins[uc-essentials-position="bottom"]) { - #zen-essentials-container, #zen-essentials-wrapper { + #zen-essentials-container, #zen-essentials-wrapper, #zen-essentials { order: 999 !important; margin-top: auto !important; padding-top: 5px !important; @@ -289,14 +306,18 @@ } :root:has(#theme-SuperPins[uc-superpins-border="pins"]) { - .tabbrowser-tab[pinned]:not([zen-essential="true"]) .tab-stack .tab-background, #vertical-pinned-tabs-container>.zen-workspace-tabs-section tab-group { + .tabbrowser-tab[pinned]:not([zen-essential="true"]) .tab-stack .tab-background, + #vertical-pinned-tabs-container>.zen-workspace-tabs-section tab-group, + .zen-workspace-pinned-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, #vertical-pinned-tabs-container>.zen-workspace-tabs-section tab-group { + .tabbrowser-tab[pinned] .tab-stack .tab-background, + #vertical-pinned-tabs-container>.zen-workspace-tabs-section tab-group, + .zen-workspace-pinned-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; } @@ -306,20 +327,22 @@ @media (-moz-bool-pref: "uc.pins.essentials-layout") { /* 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 { + #vertical-pinned-tabs-container>.zen-workspace-tabs-section, + .zen-workspace-pinned-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; + &:has(> :nth-child(2)) { + gap: var(--essentials-gap) var(--essentials-gap) !important; + } + + &>.tabbrowser-tab { + min-width: var(--essentials-width) !important; + } } @media (-moz-bool-pref: "uc.pins.grid-count") { - #vertical-pinned-tabs-container>.zen-workspace-tabs-section { + #vertical-pinned-tabs-container>.zen-workspace-tabs-section, + .zen-workspace-pinned-tabs-section { grid-template-columns: repeat(var(auto-fit, --mod-superpins-pins-grid-count), minmax(var(--essentials-width), auto)) !important; } } @@ -440,6 +463,10 @@ /* Increase margin below Essentials in case the workspace indicator is not visible. */ @media (not (-moz-bool-pref: "zen.workspaces.show-workspace-indicator")) { + .zen-current-workspace-indicator { + display: none !important; + } + :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) {