zen-realigned/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css

985 lines
22 KiB
CSS

#tabbrowser-tabs,
#TabsToolbar,
#titlebar,
#TabsToolbar-customization-target {
flex-direction: column;
height: 100%;
}
:root[zen-single-toolbar='true'] {
& #zen-appcontent-navbar-container,
& #zen-sidebar-top-buttons {
--zen-toolbar-height: 32px;
height: var(--zen-toolbar-height);
}
& #zen-sidebar-top-buttons .toolbarbutton-1 {
& > .toolbarbutton-icon {
padding: 5px;
}
}
& #zen-sidebar-top-buttons-separator {
width: 100%;
}
}
@media (-moz-bool-pref: 'zen.tabs.vertical') {
:root:not([zen-window-buttons-reversed='true']) {
& .titlebar-buttonbox-container {
margin-left: auto;
width: fit-content;
}
&:root[zen-right-side='true'] #zen-sidebar-top-buttons-customization-target .titlebar-buttonbox-container {
/* Must have the zen-sidebar-top-buttons-customization-target so we target it only when it's on the sidebar */
margin-right: calc(-2 * var(--zen-toolbox-padding));
margin-top: -10px /*Make sure this stays synced with the top buttons' margin!*/;
& .titlebar-button {
align-items: end;
}
}
}
#vertical-pinned-tabs-container, #tabbrowser-arrowscrollbox {
.tabbrowser-tab[fadein='true'][zen-initial-fadein='true'] {
animation: zen-new-tab-appear-vertical 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}
}
}
:root[zen-window-buttons-reversed='true'] .titlebar-buttonbox-container {
margin-right: auto;
width: fit-content;
}
#TabsToolbar > * {
justify-content: center;
}
#browser {
--zen-toolbox-padding: calc(var(--zen-element-separation) / 1.5);
:root[zen-no-padding='true'] & {
--zen-toolbox-padding: 4px;
}
}
:root[zen-single-toolbar='true'] {
#urlbar-container {
width: -moz-available !important;
}
.sharing-icon,
#identity-icon,
.urlbar-icon,
#permissions-granted-icon,
#tracking-protection-icon,
#tracking-protection-icon-box,
#blocked-permissions-container > .blocked-permission-icon {
width: 12px;
height: 12px;
}
#identity-icon-box,
#identity-permission-box {
margin-top: auto;
margin-bottom: auto;
padding: 6px !important;
}
& #urlbar-container,
& #urlbar {
--urlbar-container-height: 40px;
--urlbar-height: 38px !important;
}
& #nav-bar {
margin-bottom: 6px;
}
& #zen-sidebar-top-buttons {
margin: 4px 0;
}
& #PanelUI-menu-button {
padding: 0 !important;
}
}
#vertical-pinned-tabs-container-separator {
background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
margin: 8px auto;
border: none;
height: 1px;
width: 98%;
#vertical-pinned-tabs-container:not(:has(tab:not([hidden]))) + & {
display: none;
}
}
#navigator-toolbox {
--border-radius-medium: 10px;
--tab-border-radius: 10px;
--zen-toolbox-min-width: 1px;
--tab-hover-background-color: color-mix(in srgb, var(--toolbarbutton-hover-background) 50%, transparent 50%);
min-width: var(--zen-toolbox-min-width);
margin-top: 0 !important; /* Fix full screen mode */
padding-bottom: var(--zen-element-separation) !important;
border: none;
order: 0 !important;
display: flex;
}
.titlebar-spacer[type='pre-tabs'],
.titlebar-spacer[type='post-tabs'] {
display: none;
}
:root[zen-single-toolbar='true']:not([customizing]) {
#zen-appcontent-navbar-container {
display: flex;
-moz-window-dragging: drag;
min-height: var(--zen-element-separation);
height: var(--zen-element-separation);
& #PersonalToolbar {
width: -moz-available;
}
/* We enable this trick IF we follow any of theses conditions:
* - We are supposed to hide the window controls (e.g. left sidebar, windows like layouts)
* - This also involves linux's reverse GTK window controls, we'll need to handle that a bit differently
* - If we are not in any of the above, we can still enable it if the user has bookmarks toolbar enabled
*/
&:has(#PersonalToolbar[collapsed='false']) {
%include vertical-tabs-topbar.inc.css
}
&[should-hide='true'] {
%include vertical-tabs-topbar.inc.css
}
}
}
#TabsToolbar-customization-target {
position: relative;
max-width: 100%;
gap: 0;
&::after {
content: '';
display: block;
height: 1px;
margin: 0 auto;
width: 80%;
left: 50%;
transform: translateX(-50%);
position: absolute;
bottom: calc(-1 * var(--zen-toolbox-padding));
}
@media (-moz-bool-pref: 'zen.view.show-bottom-border') {
&::after {
background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
}
}
& > * {
border-top-width: 0 !important;
}
}
#vertical-tabs-newtab-button {
&:hover,
&:not(:is(:hover, :active)) .toolbarbutton-icon {
background: transparent !important;
}
}
#tabbrowser-tabs {
margin-inline-start: 0 !important;
padding-inline-start: 0 !important;
--tab-inner-inline-margin: 0;
position: relative;
border-bottom: 0px solid transparent !important;
--tab-block-margin: 2px;
--tab-selected-bgcolor: light-dark(rgba(255,255,255,.8), rgba(255,255,255,.25));
grid-gap: 0 !important;
&[overflow]::after,
#vertical-tabs-newtab-button {
/* Hide separator they give us, eww */
display: none !important;
}
& .tabbrowser-tab {
transition: scale 0.07s ease;
&[fadein='true']:not([zen-essential='true']) {
#tabbrowser-tabs[zen-workspace-animation='previous'] & {
animation: zen-slide-in 0.2s ease;
}
#tabbrowser-tabs[zen-workspace-animation='next'] & {
animation: zen-slide-in-reverse 0.2s ease;
}
}
&:not([zen-essential='true']):active {
scale: 0.98;
}
max-width: unset;
padding: 0 !important;
position: relative;
border-radius: var(--border-radius-medium);
& .tab-background {
overflow: hidden;
& .tab-context-line {
margin: 0 0px !important;
width: 3px !important;
}
}
&[selected] .tab-background {
backdrop-filter: blur(10px);
}
@media (-moz-bool-pref: 'zen.tabs.dim-pending') {
&[pending='true'] .tab-icon-image {
opacity: 0.5;
}
}
/* We have a tab inside a tab, this means, it's a glance tab */
& .tabbrowser-tab {
border-radius: 5px;
pointer-events: none;
margin: 0;
--toolbarbutton-inner-padding: 0;
& .tab-background {
background: transparent;
box-shadow: none !important;
}
& label { display: none !important; }
& .tab-close-button,
& .tab-reset-button {
display: none !important;
}
& .tab-icon-image {
--toolbarbutton-inner-padding: 0 !important;
}
}
/* On essentials, glance tabs are floating */
&[zen-essential='true'] .tabbrowser-tab {
position: absolute;
top: 3px;
right: 5px;
--tab-collapsed-width: 15px;
--tab-min-height: 15px;
width: var(--tab-collapsed-width) !important;
z-index: 1;
pointer-events: none;
}
}
}
#zen-sidebar-icons-wrapper {
background: transparent;
gap: 5px;
align-items: center;
padding-top: var(--zen-element-separation);
& > toolbarbutton:not(#zen-workspaces-button) {
padding: 0 !important;
}
}
#newtab-button-container {
display: none !important;
}
#tabbrowser-arrowscrollbox {
&::part(scrollbox) {
gap: 0px !important;
}
&::part(overflow-start-indicator),
&::part(overflow-end-indicator) {
display: none !important;
}
}
#vertical-pinned-tabs-container {
padding-inline-end: 0 !important;
display: flex !important;
flex-direction: column;
& .tabbrowser-tab:not(:hover) .tab-background:not([selected]):not([multiselected]) {
background: transparent !important;
}
& .tabbrowser-tab .tab-content {
display: flex;
align-items: center;
justify-content: center;
}
.tabbrowser-tab[zen-glance-tab='true'] {
width: fit-content !important;
}
}
/* Mark: toolbox as expanded */
#navigator-toolbox[zen-sidebar-expanded='true'] {
--zen-toolbox-min-width: fit-content;
--tab-icon-end-margin: 8.5px;
padding: var(--zen-toolbox-padding);
padding-left: 0;
padding-top: 0;
#PersonalToolbar:not([collapsed='true']) {
padding-left: 0 !important;
}
& #titlebar {
min-width: 150px;
}
& #tabbrowser-arrowscrollbox-periphery {
margin-inline: var(--tab-block-margin);
}
& #nav-bar {
padding-right: 0;
:root[zen-single-toolbar='true'] & {
margin-left: var(--zen-toolbox-padding);
& #urlbar:not([breakout-extend='true']) .urlbar-input-container {
padding-left: 4px;
padding-right: 4px;
}
:root[zen-right-side='true'] & {
margin-left: 0;
}
}
}
& #nav-bar {
margin-top: 0;
}
& #zen-workspaces-button[as-button='true'] {
width: calc(100% - 10px) !important;
}
& #zen-current-workspace-indicator-icon[no-icon='true'] {
display: none;
}
& #zen-workspaces-button {
margin-left: 2px;
margin-right: 2px;
& .zen-workspace-sidebar-icon[no-icon='true'] {
display: none;
}
}
& #vertical-pinned-tabs-container:has(tab:not([hidden])) {
position: relative;
& .tabbrowser-tab {
width: 100%;
}
}
& #zen-sidebar-icons-wrapper {
display: flex;
/* Make sure the icons take most of the space, smartly */
flex-direction: row;
justify-content: space-between;
width: 100%;
position: relative;
}
& #zen-essentials-container {
--tab-min-height: 44px;
}
/* Mark: Fix separator paddings */
&[zen-right-side='true'] {
padding-left: 0;
}
&:not([zen-right-side='true']):not([zen-user-hover='true']) {
padding-right: 0;
& #titlebar {
padding-left: var(--zen-toolbox-padding);
}
}
& #TabsToolbar-customization-target {
&::after {
width: 100%;
bottom: calc(-0.5 * var(--zen-toolbox-padding));
}
& > *:not(tabs):not(#search-container):not(#zen-workspaces-button),
& #tabbrowser-arrowscrollbox-periphery > toolbarbutton {
width: 100% !important;
border-radius: var(--tab-border-radius) !important;
padding-left: var(--toolbarbutton-inner-padding) !important;
padding-right: var(--toolbarbutton-inner-padding) !important;
& label {
display: flex;
width: 100%;
}
& image {
height: 16px;
width: 16px;
padding: 0 !important;
}
&:is([open], [checked]) {
background: var(--toolbarbutton-active-background) !important;
& image,
label {
background: transparent !important;
}
}
&:hover {
background: var(--toolbarbutton-hover-background) !important;
& image,
label {
background: transparent !important;
}
}
}
}
& #tabbrowser-tabs {
--tab-inline-padding: 8px;
& .tabbrowser-tab {
& .tab-label-container {
display: flex;
}
& .tab-background {
@media not (prefers-color-scheme: dark) {
&:is([selected], [multiselected]) {
box-shadow: 0 .5px 1px rgba(0, 0, 0, 0.1);
}
}
margin-inline: var(--tab-block-margin);
width: -moz-available;
}
&:is(:hover, [visuallyselected]) .tab-close-button {
display: block;
--tab-inline-padding: 0; /* Avoid weird padding */
margin-inline-end: 0 !important;
}
.tab-throbber,
.tab-icon-pending,
.tab-icon-image,
.tab-sharing-icon-overlay,
.tab-icon-overlay {
margin-inline-end: var(--toolbarbutton-inner-padding) !important;
margin-inline-start: calc(var(--toolbarbutton-inner-padding) / 4) !important;
}
}
}
}
:root:not([zen-sidebar-expanded='true']) {
--tab-min-width: 36px !important;
--zen-toolbox-padding: calc(var(--zen-element-separation) / 2 + 1px);
--zen-toolbox-max-width: calc(var(--tab-min-width) + var(--zen-toolbox-padding) * 2);
}
/* Mark: collapsed sidebar */
#navigator-toolbox:not([zen-sidebar-expanded='true']) {
max-width: var(--zen-toolbox-max-width) !important;
min-width: var(--zen-toolbox-max-width) !important;
& #zen-current-workspace-indicator-name,
& .toolbarbutton-text {
display: none !important;
}
& #zen-current-workspace-indicator {
padding-left: 0;
padding-right: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: .4;
}
& #zen-essentials-container {
justify-content: center;
}
& #vertical-tabs-newtab-button {
padding: 0 !important;
background: transparent !important;
}
:root[customizing] & #zen-sidebar-icons-wrapper {
min-width: unset !important;
}
& #zen-sidebar-top-buttons {
justify-content: center;
max-height: unset !important;
height: fit-content !important;
margin-bottom: var(--zen-element-separation);
}
& #titlebar {
display: grid;
grid-template-rows: auto 1fr;
}
& #zen-sidebar-top-buttons-customization-target {
flex-direction: column;
padding-top: var(--zen-element-separation);
}
& #zen-sidebar-icons-wrapper {
display: flex;
flex-direction: column;
padding-top: var(--zen-element-separation);
align-items: center;
}
& #tabbrowser-arrowscrollbox-periphery {
& > toolbarbutton {
margin: 0 auto !important;
padding: 0 !important;
}
&::before {
width: 90% !important;
}
}
& #EssentialsToolbar {
display: none !important;
}
& #essentials-accordion-header {
display: none !important;
}
& #vertical-pinned-tabs-container:has(tab:not([hidden])) {
position: relative;
& .tabbrowser-tab {
max-width: var(--tab-min-width);
}
}
& #TabsToolbar-customization-target {
padding-bottom: var(--zen-toolbox-padding);
&::after {
bottom: -1px !important;
}
}
& #tabbrowser-tabs {
margin-top: -2px;
& .tabbrowser-tab {
margin: 0 auto;
& .tab-background {
margin-inline: auto !important;
&:is([selected], [multiselected]) {
box-shadow: 0 0 1px 1px rgba(0,0,0,.1);
@media not (prefers-color-scheme: dark) {
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.12) !important;
}
}
}
& .tab-reset-button {
display: none !important;
}
& .tab-content {
display: flex;
align-content: center;
justify-content: center;
padding: 0 !important;
& .tab-label-container {
display: none !important;
}
& .tab-icon-image,
& .tab-icon-pending {
margin-inline-end: 0 !important;
}
/* Hide glances */
& .tabbrowser-tab {
display: none !important;
}
}
}
@media (-moz-bool-pref: 'zen.view.sidebar-collapsed.hide-mute-button') {
& .tab-icon-overlay:is([soundplaying], [muted]):not([selected]) {
display: none !important;
:is(
:root[uidensity='compact'],
#tabbrowser-tabs[secondarytext-unsupported],
:root:not([uidensity='compact']) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:hover
)
.tab-icon-stack[indicator-replaces-favicon]
> :not(&),
:root:not([uidensity='compact'])
#tabbrowser-tabs:not([secondarytext-unsupported])
.tabbrowser-tab:not(:hover)
&[indicator-replaces-favicon] {
opacity: 1 !important;
}
}
}
& .tab-throbber,
& .tab-icon-pending,
& .tab-icon-image,
& .tab-sharing-icon-overlay,
& .tab-icon-overlay {
margin-inline-end: 0 !important;
}
}
& #zen-workspaces-button {
flex-direction: column;
&:not([as-button='true']) {
& toolbarbutton {
&[active='true']::after {
bottom: 50% !important;
transform: translateY(50%) !important;
}
}
}
}
}
:root:not([zen-sidebar-expanded='true']) #zen-sidebar-splitter {
display: none !important;
}
/* Mark: Separator styling */
#zen-sidebar-splitter {
opacity: 0;
width: var(--zen-toolbox-padding);
height: 100%;
transition: opacity 0.2s ease-in-out;
background: var(--zen-colors-border);
appearance: none;
&:hover {
opacity: 1;
}
}
/* Mark: Move sidebar to the right */
:root[zen-right-side='true'] {
& #navigator-toolbox {
order: 3 !important;
}
& #zen-sidebar-splitter {
order: 2 !important;
}
}
/* Mark: Override the default tab close button */
#tabbrowser-tabs {
& .tabbrowser-tab {
&[pinned] .tab-close-button {
display: none !important;
}
&[pinned]:not([zen-essential]):hover .tab-reset-button,
&[pinned][visuallyselected]:not([zen-essential]) .tab-reset-button {
display: block;
}
&[zen-essential] .tab-reset-button {
display: none;
}
&:not([pinned]) .tab-reset-button {
display: none;
}
&[selected] .tab-background {
border-color: transparent;
}
}
}
.tab-reset-button {
display: none;
-moz-context-properties: fill, fill-opacity;
border-radius: var(--tab-border-radius);
color: inherit;
fill: currentColor;
padding: 6px;
width: 24px;
height: 24px;
outline: var(--toolbarbutton-outline);
&:hover {
outline-color: var(--toolbarbutton-hover-outline-color);
}
&:hover:active {
outline-color: var(--toolbarbutton-active-outline-color);
}
}
.reset-icon {
appearance: none;
}
@media not (forced-colors) {
.tab-reset-button:hover {
background-color: color-mix(in srgb, currentColor 10%, transparent);
}
.tab-reset-button:hover:active {
background-color: color-mix(in srgb, currentColor 20%, transparent);
}
}
.tab-reset-button> .button-icon,
.tab-reset-button > .button-box > .button-icon,
.tab-reset-button > .toolbarbutton-icon {
margin: 0;
}
.tab-reset-button > .button-box > .button-text,
.tab-reset-button > .toolbarbutton-text {
display: none;
}
/* Customization mode */
/*:root[customizing] #TabsToolbar > *:not(#zen-sidebar-icons-wrapper) {
overflow: hidden;
max-width: 0 !important;
margin-right: var(--zen-element-separation);
padding: 0 !important;
opacity: 0;
display: none;
}*/
:root[customizing] #TabsToolbar > *,
:root[customizing] #TabsToolbar-customization-target {
min-width: unset !important;
}
/* Mark: Sidebar top buttons */
#zen-sidebar-top-buttons {
order: -1;
min-width: unset !important;
:root[zen-sidebar-expanded='true'] & {
--toolbarbutton-inner-padding: calc(var(--zen-toolbar-button-inner-padding) - 2px) !important;
}
& #zen-sidebar-top-buttons-customization-target {
height: 100%;
align-items: center;
:root:not([zen-sidebar-expanded='true']):not([zen-right-side='true']) {
padding-inline-start: var(--zen-toolbox-padding);
}
#nav-bar & {
padding-inline-start: var(--toolbarbutton-outer-padding);
}
:root[zen-right-side='true'] & {
padding-inline-end: var(--zen-toolbox-padding);
}
& toolbarbutton:not(.titlebar-button) {
height: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
padding: 0 var(--toolbarbutton-outer-padding) !important;
}
& toolbarspring {
display: none;
}
}
& .zen-sidebar-action-button {
padding: 0 !important;
& label {
display: none !important;
}
}
}
#tabs-newtab-button {
display: none;
}
@media (-moz-bool-pref: 'zen.tabs.show-newtab-vertical') {
#tabs-newtab-button {
display: flex !important;
& .toolbarbutton-text {
align-items: center;
padding-top: 0;
}
}
#tabbrowser-arrowscrollbox-periphery {
@media not (prefers-color-scheme: dark) {
--zen-colors-border: var(--zen-colors-tertiary);
}
@media (-moz-bool-pref: 'zen.view.show-newtab-button-top') {
order: -1;
}
@media (-moz-bool-pref: 'zen.view.show-newtab-button-border-top') and (not (-moz-bool-pref: 'zen.view.show-newtab-button-top')) {
#tabbrowser-arrowscrollbox:has(tab:not([hidden])) & {
margin-top: 15px;
position: relative;
&::before {
content: '';
display: block;
height: 1px;
background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
width: 98%;
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
}
}
}
}
}
/* Mark: Essentials Toolbar */
#zen-essentials-container {
padding-bottom: var(--zen-toolbox-padding);
overflow: hidden;
gap: 3px;
}
#zen-essentials-container {
overflow: hidden;
transition: max-height 0.3s ease-out;
opacity: 1;
grid-template-columns: repeat(auto-fit, minmax(var(--tab-pinned-min-width-expanded), auto));
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
display: grid;
padding: 0;
}
#zen-essentials-container .tabbrowser-tab {
--toolbarbutton-inner-padding: 0;
max-width: unset;
width: 100% !important;
border-radius: var(--border-radius-medium);
&[selected] .tab-background {
box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.1));
}
&:not([selected]) .tab-background {
background: var(--zen-toolbar-element-bg);
backdrop-filter: none !important;
}
& .tab-content {
display: flex;
justify-content: center;
}
& .tab-label-container {
display: none !important;
}
& .tab-close-button {
display: none !important;
}
& .tab-icon-image,
& .tab-icon-overlay {
margin-inline-end: 0 !important;
}
}
/* Very special occasions */
/* Mark: Right side windows controls with collapsed sidebar */
@media not (-moz-bool-pref: 'zen.view.compact') {
:root[zen-right-side='true']:not([zen-sidebar-expanded='true']):not([zen-window-buttons-reversed='true']) {
& #navigator-toolbox {
margin-top: var(--zen-toolbar-height) !important;
}
& .titlebar-buttonbox-container {
margin-right: calc(-1 * var(--zen-toolbox-max-width)) !important;
}
& #zen-appcontent-wrapper {
overflow-x: visible;
}
& #zen-sidebar-top-buttons-customization-target {
padding-top: 0;
}
& #zen-appcontent-navbar-container {
padding-left: var(--zen-element-separation);
}
%include vertical-tabs-topbuttons-fix.css
}
:root:not([zen-right-side='true']):not([zen-sidebar-expanded='true'])[zen-window-buttons-reversed='true'] {
& #navigator-toolbox {
margin-top: var(--zen-toolbar-height) !important;
}
& .titlebar-buttonbox-container {
margin-left: calc(-1 * var(--zen-toolbox-max-width)) !important;
}
& #zen-appcontent-wrapper {
overflow-x: visible;
}
& #zen-sidebar-top-buttons-customization-target {
padding-top: 0;
}
& #zen-appcontent-navbar-container {
padding-right: var(--zen-element-separation);
}
%include vertical-tabs-topbuttons-fix.css
}
}