forked from ZenBrowserMirrors/zen-desktop
585 lines
No EOL
16 KiB
CSS
585 lines
No EOL
16 KiB
CSS
@media (-moz-bool-pref: 'zen.tabs.vertical') {
|
|
|
|
#tabbrowser-tabs,
|
|
#TabsToolbar,
|
|
#titlebar,
|
|
#TabsToolbar-customization-target {
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
#TabsToolbar > * {
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
#private-browsing-indicator-with-label {
|
|
display: none !important;
|
|
}
|
|
|
|
#browser {
|
|
--zen-toolbox-padding: 5px;
|
|
}
|
|
|
|
#navigator-toolbox {
|
|
--border-radius-medium: 8px;
|
|
--tab-border-radius: var(--border-radius-medium);
|
|
--zen-toolbox-min-width: 1px;
|
|
|
|
--tab-hover-background-color: var(--toolbarbutton-hover-background) !important;
|
|
|
|
min-width: var(--zen-toolbox-min-width);
|
|
margin-top: 0 !important; /* Fix full screen mode */
|
|
|
|
padding: var(--zen-toolbox-padding);
|
|
padding-top: var(--zen-toolbox-top-align);
|
|
padding-bottom: var(--zen-element-separation);
|
|
|
|
display: flex;
|
|
}
|
|
|
|
|
|
#TabsToolbar-customization-target {
|
|
position: relative;
|
|
gap: 0;
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
height: 1px;
|
|
background: color-mix(in srgb, var(--zen-colors-border) 70%, transparent 30%);
|
|
margin: 0 auto;
|
|
width: 80%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
position: absolute;
|
|
bottom: calc(-1 * var(--zen-toolbox-padding));
|
|
}
|
|
|
|
& > * {
|
|
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;
|
|
|
|
position: relative;
|
|
border-bottom: 0px solid transparent !important;
|
|
|
|
--tab-block-margin: 2px;
|
|
--tab-selected-bgcolor: var(--zen-colors-primary);
|
|
grid-gap: 0 !important;
|
|
|
|
& .tabbrowser-tab {
|
|
animation: zen-slide-in 0.2s;
|
|
|
|
max-width: unset !important;
|
|
padding: 0 !important;
|
|
|
|
position: relative;
|
|
|
|
height: calc(var(--tab-min-height) + var(--tab-block-margin) * 2) !important;
|
|
min-height: calc(var(--tab-min-height) + var(--tab-block-margin) * 2) !important;
|
|
|
|
border-radius: var(--border-radius-medium);
|
|
|
|
& .tab-background {
|
|
overflow: hidden;
|
|
|
|
&:is([selected], [multiselected]) {
|
|
@media not (prefers-color-scheme: dark) {
|
|
border: 1px solid color-mix(in srgb, var(--zen-colors-primary) 60%, transparent 40%) !important;
|
|
}
|
|
}
|
|
|
|
& .tab-context-line {
|
|
margin: 0 0px !important;
|
|
width: 3px !important;
|
|
}
|
|
}
|
|
|
|
@media (-moz-bool-pref: 'zen.tabs.dim-pending') {
|
|
&[pending='true'] .tab-icon-image {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#zen-sidebar-icons-wrapper {
|
|
background: transparent;
|
|
padding: 0;
|
|
gap: 5px;
|
|
align-items: center;
|
|
|
|
& > toolbarbutton:not(#zen-workspaces-button) {
|
|
padding: 0 !important;
|
|
}
|
|
}
|
|
|
|
#newtab-button-container {
|
|
display: none !important;
|
|
}
|
|
|
|
#tabbrowser-arrowscrollbox {
|
|
&::part(scrollbox) {
|
|
gap: 0px !important;
|
|
}
|
|
}
|
|
|
|
#vertical-pinned-tabs-container {
|
|
padding-inline-end: 0 !important;
|
|
gap: 3px !important;
|
|
max-height: unset !important;
|
|
overflow: visible !important;
|
|
|
|
& .tab-background:not(:hover):not([selected]):not([multiselected]) {
|
|
background: color-mix(in srgb, var(--zen-colors-secondary) 20%, transparent 80%) !important;
|
|
}
|
|
|
|
& .tabbrowser-tab .tab-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* Mark: toolbox as expanded */
|
|
#navigator-toolbox:is(
|
|
#navigator-toolbox[zen-user-hover='true'][zen-has-hover],
|
|
#navigator-toolbox[zen-user-hover='true']:focus-within,
|
|
#navigator-toolbox[zen-user-hover='true'][movingtab],
|
|
#navigator-toolbox[zen-user-hover='true'][flash-popup],
|
|
#navigator-toolbox[zen-user-hover='true'][has-popup-menu],
|
|
#navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
|
|
#navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true'])) {
|
|
--zen-toolbox-min-width: fit-content;
|
|
|
|
& #titlebar {
|
|
min-width: 150px;
|
|
}
|
|
|
|
& #zen-workspaces-button {
|
|
margin-left: 2px;
|
|
margin-right: 2px;
|
|
|
|
& .zen-workspace-sidebar-icon[no-icon='true'] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
& #zen-sidebar-icons-wrapper {
|
|
display: flex;
|
|
/* Make sure the icons take most of the space, smartly */
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
|
|
padding-top: var(--zen-element-separation);
|
|
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
--toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important;
|
|
}
|
|
|
|
/* Mark: Fix separator paddings */
|
|
&[zen-right-side='true'] {
|
|
padding-left: 0;
|
|
}
|
|
|
|
&:not([zen-right-side='true']) {
|
|
padding-right: 0;
|
|
}
|
|
|
|
& #TabsToolbar-customization-target {
|
|
&::after {
|
|
width: 100%;
|
|
bottom: calc(-0.5 * var(--zen-toolbox-padding));
|
|
}
|
|
|
|
& > *:not(tabs):not(#search-container) {
|
|
width: 100%;
|
|
border-radius: var(--tab-border-radius);
|
|
|
|
padding-left: var(--toolbarbutton-inner-padding);
|
|
padding-right: var(--toolbarbutton-inner-padding);
|
|
|
|
& label {
|
|
display: flex;
|
|
width: 0;
|
|
}
|
|
|
|
& 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 {
|
|
& .tabbrowser-tab {
|
|
& .tab-background {
|
|
@media not (prefers-color-scheme: dark) {
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
&:not([pinned]):is(:hover, [visuallyselected]) .tab-close-button {
|
|
display: block !important;
|
|
}
|
|
|
|
.tab-throbber,
|
|
.tab-icon-pending,
|
|
.tab-icon-image,
|
|
.tab-sharing-icon-overlay,
|
|
.tab-icon-overlay {
|
|
&:not([pinned]) {
|
|
margin-inline-end: var(--toolbarbutton-inner-padding) !important;
|
|
margin-inline-start: calc(var(--toolbarbutton-inner-padding) / 4) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Mark: toolbox as collapsed */
|
|
#navigator-toolbox:not(#navigator-toolbox:is(
|
|
#navigator-toolbox[zen-user-hover='true'][zen-has-hover],
|
|
#navigator-toolbox[zen-user-hover='true']:focus-within,
|
|
#navigator-toolbox[zen-user-hover='true'][movingtab],
|
|
#navigator-toolbox[zen-user-hover='true'][flash-popup],
|
|
#navigator-toolbox[zen-user-hover='true'][has-popup-menu],
|
|
#navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
|
|
#navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true']))) {
|
|
--zen-toolbox-max-width: 51px;
|
|
max-width: var(--zen-toolbox-max-width) !important;
|
|
min-width: calc(var(--zen-toolbox-max-width) + var(--zen-toolbox-padding) / 2 + 2px) !important;
|
|
|
|
& #vertical-tabs-newtab-button {
|
|
padding: 0 !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
:root[customizing] & #zen-sidebar-icons-wrapper {
|
|
min-width: unset !important;
|
|
}
|
|
|
|
& #zen-sidebar-icons-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: var(--zen-element-separation);
|
|
align-items: center;
|
|
}
|
|
|
|
:root:has(&) #zen-sidebar-splitter {
|
|
display: none !important;
|
|
}
|
|
|
|
& #vertical-pinned-tabs-container:has(tab:not([hidden])) {
|
|
margin-bottom: 8px;
|
|
position: relative;
|
|
|
|
&::after {
|
|
bottom: -4px;
|
|
content: '';
|
|
display: block;
|
|
height: 1px;
|
|
background: color-mix(in srgb, var(--zen-colors-border) 80%, transparent 20%);
|
|
width: 70%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
& #zen-workspaces-button[as-button='true']::after {
|
|
content: '';
|
|
display: block;
|
|
height: 80%;
|
|
width: 3px;
|
|
background: color-mix(in srgb, var(--zen-primary-color) 50%, transparent 50%);
|
|
position: absolute;
|
|
left: calc(-1 * var(--zen-toolbox-padding) - 1px);
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
border-top-right-radius: var(--zen-border-radius);
|
|
border-bottom-right-radius: var(--zen-border-radius);
|
|
}
|
|
|
|
&[zen-right-side='true'] #zen-workspaces-button[as-button='true']::after {
|
|
left: unset;
|
|
right: calc(-1 * var(--zen-toolbox-padding) - 1px);
|
|
|
|
border-top-left-radius: var(--zen-border-radius);
|
|
border-bottom-left-radius: var(--zen-border-radius);
|
|
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
& #TabsToolbar-customization-target {
|
|
padding-bottom: var(--zen-toolbox-padding);
|
|
|
|
&::after {
|
|
bottom: -1px !important;
|
|
}
|
|
}
|
|
|
|
& #tabbrowser-tabs {
|
|
--tab-min-width: 36px !important;
|
|
|
|
& .tabbrowser-tab {
|
|
margin: 0 auto;
|
|
width: var(--tab-min-width) !important;
|
|
height: var(--tab-min-width) !important;
|
|
|
|
& .tab-background:is([selected], [multiselected]) {
|
|
@media not (prefers-color-scheme: dark) {
|
|
box-shadow: 0 0 1px 1px rgba(0,0,0,.05) !important;
|
|
}
|
|
}
|
|
|
|
& .tab-content {
|
|
display: flex;
|
|
align-content: center;
|
|
justify-content: center;
|
|
|
|
& .tab-label-container {
|
|
display: none;
|
|
}
|
|
|
|
& .tab-icon-image,
|
|
& .tab-icon-pending {
|
|
margin-inline-end: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
#vertical-pinned-tabs-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0 !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:has(#navigator-toolbox:not([zen-right-side='true'])) &[active='true']::after {
|
|
left: -2px;
|
|
animation: zen-workspaces-button-active-collapsed-left 0.1s ease-in-out !important;
|
|
}
|
|
|
|
:root:has(#navigator-toolbox[zen-right-side='true']) &[active='true']::after {
|
|
left: unset !important;
|
|
right: -2px;
|
|
animation: zen-workspaces-button-active-collapsed-right 0.1s ease-in-out !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Mark: Separator styling */
|
|
#zen-sidebar-splitter {
|
|
opacity: 0;
|
|
width: var(--zen-toolbox-padding);
|
|
height: 100%;
|
|
}
|
|
|
|
/* Mark: Expand on hover */
|
|
@media (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') and (not (-moz-bool-pref: 'zen.view.compact')) {
|
|
#zen-sidebar-splitter {
|
|
display: none !important;
|
|
}
|
|
|
|
#navigator-toolbox {
|
|
z-index: 1;
|
|
}
|
|
|
|
#TabsToolbar {
|
|
z-index: 1;
|
|
background-repeat: no-repeat !important;
|
|
background-position: center center !important;
|
|
background-size: cover !important;
|
|
|
|
border-top: 1px solid transparent;
|
|
border-right: 1px solid transparent;
|
|
|
|
height: 100%;
|
|
|
|
border-top-right-radius: var(--zen-border-radius);
|
|
}
|
|
|
|
#navigator-toolbox[zen-has-hover],
|
|
#navigator-toolbox:focus-within,
|
|
#navigator-toolbox[movingtab],
|
|
#navigator-toolbox[flash-popup],
|
|
#navigator-toolbox[has-popup-menu],
|
|
#navigator-toolbox:has(.tabbrowser-tab:active),
|
|
#navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
|
|
--zen-navigation-toolbar-min-width: 55.5px !important; /* + the width of the splitter */
|
|
|
|
max-width: var(--zen-navigation-toolbar-min-width) !important;
|
|
min-width: var(--zen-navigation-toolbar-min-width) !important;
|
|
padding: 0 !important;
|
|
|
|
& #TabsToolbar {
|
|
z-index: 100 !important;
|
|
width: 250px !important;
|
|
background-color: var(--zen-dialog-background);
|
|
border-top-color: var(--zen-colors-border);
|
|
border-right-color: var(--zen-colors-border);
|
|
position: absolute;
|
|
padding: var(--zen-toolbox-padding);
|
|
transition: 0 !important;
|
|
animation: zen-vtabs-animation 0.3s ease-in-out;
|
|
-moz-window-dragging: no-drag;
|
|
}
|
|
|
|
&[zen-right-side='true'] #TabsToolbar {
|
|
animation: zen-sidebar-panel-animation-right 0.3s ease-in-out;
|
|
|
|
right: 0;
|
|
border-right: 0;
|
|
border-left: 1px solid var(--zen-colors-border);
|
|
border-top-left-radius: var(--zen-border-radius);
|
|
border-top-right-radius: 0;
|
|
}
|
|
|
|
#navigator-toolbox:not(&)
|
|
#TabsToolbar
|
|
#tabbrowser-tabs[closebuttons='activetab']
|
|
.tabbrowser-tab
|
|
.tab-content[class]
|
|
> .tab-close-button[class] {
|
|
display: none !important;
|
|
visibility: hidden !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Mark: Move sidebar to the right */
|
|
#browser:has(#navigator-toolbox[zen-right-side='true']) {
|
|
& #navigator-toolbox {
|
|
order: 3;
|
|
}
|
|
|
|
& #zen-sidebar-splitter {
|
|
order: 2;
|
|
}
|
|
}
|
|
|
|
/* Mark: Override the default tab close button */
|
|
#tabbrowser-tabs {
|
|
& .tabbrowser-tab {
|
|
&[pinned] .tab-close-button {
|
|
display: none !important;
|
|
}
|
|
|
|
&[selected] .tab-background {
|
|
background: var(--zen-colors-secondary) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
--toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important;
|
|
|
|
& #zen-sidebar-top-buttons-customization-target {
|
|
height: 100%;
|
|
align-items: center;
|
|
|
|
#nav-bar:has(&) & {
|
|
padding-inline-start: calc(var(--zen-toolbox-padding) + var(--toolbarbutton-outer-padding));
|
|
}
|
|
|
|
#browser:has(#navigator-toolbox[zen-right-side='true']) & {
|
|
padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
|
|
}
|
|
|
|
& toolbarbutton {
|
|
height: 100%;
|
|
padding: 0 var(--toolbarbutton-outer-padding) !important;
|
|
}
|
|
}
|
|
|
|
& .zen-sidebar-action-button {
|
|
padding: 0 !important;
|
|
|
|
& label {
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
} |