mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-14 20:23:53 +02:00
319 lines
No EOL
12 KiB
CSS
319 lines
No EOL
12 KiB
CSS
:root:has(#customization-container:not([hidden])) {
|
|
/* Show flexible space in customiation mode in top buttons, since this mod allows them there */
|
|
#zen-sidebar-top-buttons-customization-target toolbarspring {
|
|
display: flex !important;
|
|
}
|
|
}
|
|
|
|
:root:not([zen-compact-mode="true"], :has(#customization-container:not([hidden]))) {
|
|
--tab-min-width: calc(36px) !important;
|
|
--zen-toolbox-padding: calc(var(--zen-element-separation) / 2 + 1px) !important;
|
|
--zen-toolbox-max-width: calc(var(--tab-min-width) + var(--tab-block-margin) + var(--zen-toolbox-padding) * 2) !important;
|
|
--zen-toolbox-min-width: 1px !important;
|
|
--zen-sidebar-width: var(--zen-toolbox-max-width) !important;
|
|
|
|
@media (-moz-bool-pref: "theme.sidebar_expand_on_hover.hide_workspace_indicator") {
|
|
#zen-current-workspace-indicator-container {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
#zen-sidebar-splitter {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Change tab shape to square when collapsed */
|
|
tab:not([zen-essential]) .tab-background {
|
|
min-width: var(--tab-min-width) !important;
|
|
}
|
|
|
|
/* Center tab icon */
|
|
.tab-icon-stack > .tab-icon-image {
|
|
margin-inline-start: calc(calc(var(--tab-min-width) + var(--tab-block-margin) * 2 - var(--tab-inline-padding) * 2 - 16px) / 2) !important;
|
|
}
|
|
|
|
/* Same design as tabs for New Tab button and other toolbarbuttons */
|
|
#TabsToolbar-customization-target toolbarbutton {
|
|
margin: var(--tab-block-margin) !important;
|
|
padding: 0 calc(var(--tab-inline-padding) - var(--tab-block-margin)) !important;
|
|
justify-content: flex-start !important;
|
|
|
|
& > .toolbarbutton-icon {
|
|
margin-inline-start: calc(calc(var(--tab-min-width) + var(--tab-block-margin) * 2 - var(--tab-inline-padding) * 2 - 16px) / 2) !important;
|
|
margin-inline-end: var(--toolbarbutton-inner-padding) !important;
|
|
}
|
|
|
|
& > .toolbarbutton-text {
|
|
padding: 0 !important;
|
|
align-items: center !important;
|
|
}
|
|
}
|
|
|
|
/* Stop New Tab button from increasing the width */
|
|
.zen-workspace-tabs-section {
|
|
width: calc(var(--tab-min-width) + var(--tab-block-margin)) !important;
|
|
}
|
|
|
|
tab[pinned]:not([zen-essential]) > stack {
|
|
--tab-inline-padding: 8px !important;
|
|
& > .tab-content {
|
|
padding: 0 var(--tab-inline-padding) !important;
|
|
min-width: 0 !important;
|
|
justify-content: unset !important;
|
|
}
|
|
}
|
|
|
|
@media (not (-moz-bool-pref: "zen.view.use-single-toolbar")) {
|
|
|
|
#navigator-toolbox {
|
|
margin-top: var(--zen-toolbar-height) !important;
|
|
}
|
|
|
|
#browser:has(#PersonalToolbar[collapsed=false]) #navigator-toolbox {
|
|
margin-top: calc(var(--zen-toolbar-height) + 2.2em) !important;
|
|
}
|
|
}
|
|
|
|
/* Move topbar buttons in the now empty space */
|
|
@media (not (-moz-bool-pref: "zen.view.use-single-toolbar")) and (not (-moz-platform: macos)) {
|
|
#browser:has(#navigator-toolbox:not([zen-right-side="true"])) {
|
|
#zen-appcontent-wrapper {
|
|
overflow: visible !important;
|
|
|
|
#zen-appcontent-navbar-container:has(#nav-bar>.titlebar-buttonbox-container:last-child) {
|
|
margin-left: calc(0px - var(--zen-toolbox-max-width)) !important;
|
|
padding-left: var(--zen-element-separation);
|
|
|
|
#nav-bar {
|
|
margin-inline-start: var(--zen-element-separation);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#navigator-toolbox {
|
|
z-index: 4 !important;
|
|
width: var(--zen-toolbox-max-width) !important;
|
|
max-width: var(--zen-toolbox-max-width) !important;
|
|
min-width: var(--zen-toolbox-max-width) !important;
|
|
position: relative !important;
|
|
|
|
/*
|
|
I have no idea how to replicate the browser background, I don't know where the colors come from, the computed values in the inspector don't match anything on screen.
|
|
This is as close as I was able to get so far.
|
|
*/
|
|
&::before {
|
|
position: absolute;
|
|
content: "";
|
|
width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding));
|
|
height: 100%;
|
|
opacity: 0.0;
|
|
transition: 60ms opacity ease-in calc(var(--theme-sidebar_expand_on_hover-transition_speed) - 60ms), width ease-in-out var(--theme-sidebar_expand_on_hover-transition_speed);
|
|
z-index: -1;
|
|
background-image: var(--zen-main-browser-background) !important;
|
|
background-color: var(--lwt-accent-color) !important;
|
|
background-attachment: fixed !important;
|
|
background-size: 2000px !important;
|
|
backdrop-filter: blur(5px) !important;
|
|
border-top-right-radius: 8px !important;
|
|
border-bottom-right-radius: 8px !important;
|
|
}
|
|
|
|
> #titlebar, > #zen-sidebar-top-buttons, > #nav-bar {
|
|
width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding)) !important;
|
|
max-width: var(--zen-sidebar-width) !important;
|
|
min-width: var(--zen-toolbar-min-width) !important;
|
|
padding-right: var(--zen-toolbox-padding) !important;
|
|
}
|
|
|
|
> #titlebar, > #zen-sidebar-top-buttons {
|
|
overflow: hidden !important;
|
|
transition: width ease-in-out var(--theme-sidebar_expand_on_hover-transition_speed), max-width ease-in-out var(--theme-sidebar_expand_on_hover-transition_speed);
|
|
}
|
|
|
|
> #nav-bar {
|
|
margin: 0 !important;
|
|
padding-left: var(--zen-toolbox-padding) !important;
|
|
transition: var(--ext-theme-background-transition), width ease-in-out var(--theme-sidebar_expand_on_hover-transition_speed), max-width ease-in-out var(--theme-sidebar_expand_on_hover-transition_speed) !important;
|
|
}
|
|
}
|
|
|
|
/* Essentials */
|
|
#zen-essentials-container {
|
|
display: flex !important;
|
|
justify-content: center !important;
|
|
gap: 0 !important;
|
|
overflow-x: scroll !important;
|
|
|
|
> .tabbrowser-tab {
|
|
flex: 1 !important;
|
|
/* Todo change this from hardcoded value */
|
|
min-width: 40px !important;
|
|
margin-inline: calc(var(--zen-toolbox-padding) - 2px) !important;
|
|
transition: flex-grow var(--theme-sidebar_expand_on_hover-transition_speed) linear,
|
|
min-width var(--theme-sidebar_expand_on_hover-transition_speed) linear,
|
|
margin-inline var(--theme-sidebar_expand_on_hover-transition_speed) linear !important;
|
|
}
|
|
}
|
|
|
|
/* Hide empty top buttons */
|
|
#zen-sidebar-top-buttons:not(:has(:not(#zen-sidebar-top-buttons-separator, #zen-sidebar-top-buttons-customization-target))) {
|
|
display: none !important;
|
|
}
|
|
|
|
#zen-sidebar-bottom-buttons,
|
|
#zen-sidebar-top-buttons-customization-target {
|
|
justify-content: center !important;
|
|
gap: 0 !important;
|
|
|
|
& > :not(panel,#zen-sidebar-top-buttons-separator) {
|
|
overflow: hidden !important;
|
|
padding: 0 !important;
|
|
min-width: fit-content !important;
|
|
min-height: fit-content !important;
|
|
flex-grow: 1 !important;
|
|
transition: flex-grow var(--theme-sidebar_expand_on_hover-transition_speed) linear,
|
|
width var(--theme-sidebar_expand_on_hover-transition_speed) linear,
|
|
margin-inline var(--theme-sidebar_expand_on_hover-transition_speed) linear !important;
|
|
margin-inline: 2px !important;
|
|
}
|
|
|
|
toolbarspring {
|
|
transition: flex-grow var(--theme-sidebar_expand_on_hover-transition_speed) cubic-bezier(.001,1,.003,0.99),
|
|
width var(--theme-sidebar_expand_on_hover-transition_speed) linear,
|
|
margin-inline var(--theme-sidebar_expand_on_hover-transition_speed) linear !important;;
|
|
flex-grow: 100 !important;
|
|
display: flex !important;
|
|
}
|
|
}
|
|
|
|
#zen-workspaces-button {
|
|
flex-direction: row !important;
|
|
justify-content: center !important;
|
|
gap: 0 !important;
|
|
min-width: fit-content !important;
|
|
transition: min-width var(--theme-sidebar_expand_on_hover-transition_speed) linear !important;
|
|
|
|
toolbarbutton {
|
|
margin: 0 !important;
|
|
flex-grow: 1 !important;
|
|
transition: flex-grow var(--theme-sidebar_expand_on_hover-transition_speed) linear,
|
|
width var(--theme-sidebar_expand_on_hover-transition_speed) linear,
|
|
margin-inline var(--theme-sidebar_expand_on_hover-transition_speed) linear !important;
|
|
margin-inline: 2px !important;
|
|
overflow: hidden !important;
|
|
}
|
|
}
|
|
|
|
#tabbrowser-arrowscrollbox-periphery {
|
|
margin-inline: 0 !important;
|
|
|
|
/* Decrease the seperator line to the same length as before */
|
|
&::before {
|
|
margin-inline: var(--tab-block-margin);
|
|
}
|
|
}
|
|
|
|
/* Expanded bar */
|
|
#navigator-toolbox:is(
|
|
[zen-has-hover],
|
|
[movingtab],
|
|
[flash-popup],
|
|
[has-popup-menu],
|
|
:has(.tabbrowser-tab:active),
|
|
:has(toolbarbutton[open="true"]:not(#zen-sidepanel-button), #urlbar[open]),
|
|
) {
|
|
--zen-sidebar-width: var(--theme-sidebar_expand_on_hover-expanded_width) !important;
|
|
&::before {
|
|
opacity: 1.0;
|
|
transition: 60ms opacity ease-in, width ease-in-out var(--theme-sidebar_expand_on_hover-transition_speed);
|
|
}
|
|
}
|
|
|
|
/* Collapsed bar */
|
|
#navigator-toolbox:not(
|
|
[zen-has-hover],
|
|
[movingtab],
|
|
[flash-popup],
|
|
[has-popup-menu],
|
|
:has(.tabbrowser-tab:active),
|
|
:has(toolbarbutton[open="true"]:not(#zen-sidepanel-button), #urlbar[open])
|
|
) {
|
|
|
|
/* Show only active/first/no(todo) button*/
|
|
#zen-workspaces-button {
|
|
toolbarbutton:not([active="true"]) {
|
|
flex-grow: 0 !important;
|
|
width: 0 !important;
|
|
margin-inline: 0 !important;
|
|
}
|
|
}
|
|
|
|
#zen-essentials-container:has([selected]) > .tabbrowser-tab:not([selected]),
|
|
#zen-essentials-container:not(:has([selected])) > .tabbrowser-tab:not(:first-child) {
|
|
flex-grow: 0 !important;
|
|
width: 0 !important;
|
|
min-width: 0 !important;
|
|
margin-inline: 0 !important;
|
|
}
|
|
|
|
toolbarspring {
|
|
flex-grow: 0 !important;
|
|
width: 0 !important;
|
|
min-width: 0 !important;
|
|
margin-inline: 0 !important;
|
|
}
|
|
|
|
/*Workaround for invisible top buttons seperator*/
|
|
#zen-sidebar-top-buttons-customization-target > :not(:nth-child(1 of toolbarbutton, toolbaritem))
|
|
{
|
|
flex-grow: 0 !important;
|
|
width: 0 !important;
|
|
min-width: 0 !important;
|
|
margin-inline: 0 !important;
|
|
}
|
|
|
|
@media not (-moz-bool-pref: "theme.sidebar_expand_on_hover.collapse_buttons") {
|
|
#zen-sidebar-bottom-buttons > :not(:first-child)
|
|
{
|
|
flex-grow: 0 !important;
|
|
width: 0 !important;
|
|
min-width: 0 !important;
|
|
margin-inline: 0 !important;
|
|
}
|
|
}
|
|
|
|
@media (-moz-bool-pref: "theme.sidebar_expand_on_hover.collapse_buttons") {
|
|
/* Show first child only when no visible workspace switcher */
|
|
#zen-sidebar-bottom-buttons:not(:has(#zen-workspaces-button:not([dont-show="true"]))) > :not(:first-child),
|
|
/* Show active workspace only when visible workspace switcher */
|
|
#zen-sidebar-bottom-buttons:has(#zen-workspaces-button:not([dont-show="true"])) > :not(#zen-workspaces-button) {
|
|
flex-grow: 0 !important;
|
|
width: 0 !important;
|
|
min-width: 0 !important;
|
|
margin-inline: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Support for tabs on the right */
|
|
#navigator-toolbox[zen-right-side="true"] {
|
|
direction: rtl !important;
|
|
|
|
#titlebar, #zen-sidebar-top-buttons {
|
|
direction: ltr !important;
|
|
}
|
|
|
|
#titlebar {
|
|
padding-left: var(--zen-toolbox-padding) !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
@media (-moz-bool-pref: "zen.view.use-single-toolbar") {
|
|
#nav-bar {
|
|
direction: ltr !important;
|
|
}
|
|
}
|
|
}
|
|
} |