mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-15 04:33:54 +02:00
304 lines
No EOL
11 KiB
CSS
304 lines
No EOL
11 KiB
CSS
:root:has(#customization-container) {
|
|
/* 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;
|
|
}
|
|
}
|
|
|
|
/* only use mod in collapsed toolbar mode */
|
|
:root:has(#navigator-toolbox:not([zen-sidebar-expanded="true"])) {
|
|
--zen-toolbox-max-width: 44px !important; /* Width of the collapsed sidebar */
|
|
--tab-collapsed-width: var(--zen-toolbox-max-width) !important; /* For automatic tab icon centering? */
|
|
|
|
#navigator-toolbox {
|
|
z-index: 4 !important;
|
|
}
|
|
|
|
|
|
/* Move topbar buttons in the now empty space */
|
|
@media not (-moz-bool-pref: "zen.view.compact") {
|
|
#browser:has(#navigator-toolbox:not([zen-right-side="true"])) {
|
|
#zen-appcontent-wrapper {
|
|
overflow: visible !important;
|
|
|
|
#zen-appcontent-navbar-container {
|
|
margin-left: calc(0px - var(--zen-toolbox-max-width)) !important;
|
|
|
|
#nav-bar-customization-target > toolbarbutton:first-child {
|
|
padding-inline-start: var(--toolbarbutton-outer-padding) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media not (-moz-bool-pref: "zen.view.compact.hide-toolbar"),
|
|
(not (-moz-bool-pref: "zen.view.compact")) {
|
|
|
|
#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;
|
|
}
|
|
}
|
|
|
|
/* In compact mode (with topbar hidden) the topbar should be above the sidebar when hovered, while the sidebar should be above the page, doesn't work well with transitions but z-index is weird :c */
|
|
#browser:has(#zen-appcontent-navbar-container[zen-has-hover]) #navigator-toolbox {
|
|
z-index: 3 !important;
|
|
}
|
|
|
|
#PersonalToolbar[collapsed=false] {
|
|
height: 2.2em !important;
|
|
}
|
|
|
|
#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 !important;
|
|
}
|
|
|
|
&:not([pinned]):hover .tab-close-button,
|
|
&[visuallyselected]:not([pinned]) .tab-close-button {
|
|
display: block !important;
|
|
}
|
|
|
|
&[zen-essential] {
|
|
margin: 0 !important;
|
|
--tab-min-height: 44px;
|
|
}
|
|
|
|
&:not([zen-essential]) {
|
|
width: 100% !important;
|
|
margin: 0 !important;
|
|
|
|
.tab-content {
|
|
justify-content: space-between !important;
|
|
padding: 0 var(--tab-inline-padding) !important;
|
|
gap: var(--tab-inline-padding);
|
|
width: 100% !important;
|
|
align-items: center !important;
|
|
}
|
|
|
|
.tab-label-container {
|
|
display: inline-block !important;
|
|
}
|
|
|
|
.tab-content {
|
|
min-width: 0 !important;
|
|
}
|
|
|
|
@media not (-moz-bool-pref: "theme.sidebar_expand_on_hover.default_tab_background_shape") {
|
|
.tab-background {
|
|
width: 100% !important;
|
|
transform: translateX(2px) !important;
|
|
border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
border-radius: 8px !important;
|
|
overflow: hidden !important;
|
|
|
|
@media not (-moz-bool-pref: "theme.sidebar_expand_on_hover.default_tab_background_shape") {
|
|
border-radius: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
#zen-essentials-container {
|
|
width: var(--theme-sidebar_expand_on_hover-expanded_width) !important;
|
|
justify-content: unset !important;
|
|
}
|
|
|
|
@media (-moz-bool-pref: "theme.sidebar_expand_on_hover.hide_workspace_indicator") {
|
|
#zen-current-workspace-indicator {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
#titlebar {
|
|
width: var(--zen-toolbox-max-width) !important;
|
|
transition: var(--theme-sidebar_expand_on_hover-transition_speed) width cubic-bezier(.24, -0.01, .58, 1) !important;
|
|
overflow: clip;
|
|
position: relative;
|
|
border-radius: 8px !important; /* Ensure rounded corners */
|
|
overflow: hidden !important; /* Ensure child elements don't overflow */
|
|
}
|
|
|
|
#navigator-toolbox[zen-right-side="true"] {
|
|
direction: rtl !important;
|
|
|
|
#titlebar {
|
|
direction: ltr !important;
|
|
}
|
|
}
|
|
|
|
@media (-moz-bool-pref: "theme.sidebar_expand_on_hover.inverted_tabs") {
|
|
.tabbrowser-tab {
|
|
direction: rtl !important;
|
|
}
|
|
}
|
|
|
|
#vertical-pinned-tabs-container:has(tab:not([hidden])) {
|
|
& .tabbrowser-tab {
|
|
max-width: unset !important;
|
|
}
|
|
}
|
|
|
|
@media not (-moz-bool-pref: "theme.sidebar_expand_on_hover.custom_background") {
|
|
#titlebar::before {
|
|
position: absolute;
|
|
content: "";
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0.0;
|
|
transition: 60ms opacity ease-in calc(var(--theme-sidebar_expand_on_hover-transition_speed) - 60ms);
|
|
z-index: -1;
|
|
background: var(--zen-main-browser-background-toolbar) !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:hover::before,
|
|
#titlebar:has(toolbarbutton[open="true"]:not(#zen-sidepanel-button))::before,
|
|
#navigator-toolbox[zen-has-hover] #titlebar::before,
|
|
#navigator-toolbox[has-popup-menu] #titlebar::before,
|
|
#navigator-toolbox[movingtab] #titlebar::before {
|
|
opacity: 1.0 !important;
|
|
transition: 60ms opacity ease-out;
|
|
}
|
|
}
|
|
|
|
#titlebar:hover,
|
|
#titlebar:has(toolbarbutton[open="true"]:not(#zen-sidepanel-button)),
|
|
#navigator-toolbox[zen-has-hover] #titlebar,
|
|
#navigator-toolbox[has-popup-menu] #titlebar,
|
|
#navigator-toolbox[movingtab] #titlebar{
|
|
width: var(--theme-sidebar_expand_on_hover-expanded_width) !important;
|
|
box-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
.tab-background {
|
|
width: calc(100% - 4px) !important;
|
|
}
|
|
|
|
@media (-moz-bool-pref: 'zen.tabs.show-newtab-vertical') {
|
|
#tabs-newtab-button {
|
|
width: 100% !important;
|
|
margin: 0 !important;
|
|
display: flex !important;
|
|
padding: 0 var(--tab-inline-padding) !important;
|
|
justify-content: start !important;
|
|
gap: var(--tab-inline-padding) !important;
|
|
|
|
.toolbarbutton-icon {
|
|
background: transparent !important;
|
|
padding: 0 !important;
|
|
height: 16px !important;
|
|
width: 16px !important;
|
|
}
|
|
|
|
.toolbarbutton-text {
|
|
display: flex !important;
|
|
background: transparent !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.toolbarbutton-text:before {
|
|
text-overflow: clip !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
#zen-sidebar-top-buttons {
|
|
width: 100% !important;
|
|
min-height: unset !important;
|
|
|
|
#zen-sidebar-top-buttons-customization-target:not(:has(*)) {
|
|
padding: 0 !important;
|
|
}
|
|
}
|
|
|
|
#zen-sidebar-icons-wrapper,
|
|
#zen-sidebar-top-buttons-customization-target {
|
|
justify-content: center !important;
|
|
display: flex;
|
|
flex-direction: row !important;
|
|
gap: 0 !important;
|
|
|
|
& > :not(panel) {
|
|
overflow: hidden !important;
|
|
padding: 0 !important;
|
|
width: 36px !important;
|
|
height: 36px !important;
|
|
flex-grow: 1 !important;
|
|
transition: flex-grow var(--theme-sidebar_expand_on_hover-transition_speed), width var(--theme-sidebar_expand_on_hover-transition_speed), margin-inline var(--theme-sidebar_expand_on_hover-transition_speed) linear !important;
|
|
margin-inline: 2px !important;
|
|
}
|
|
|
|
toolbarspring {
|
|
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), width var(--theme-sidebar_expand_on_hover-transition_speed), margin-inline var(--theme-sidebar_expand_on_hover-transition_speed) linear !important;
|
|
margin-inline: 2px !important;
|
|
overflow: hidden !important;
|
|
}
|
|
}
|
|
|
|
#navigator-toolbox:not([zen-has-hover],[has-popup-menu],[movingtab]) #titlebar:not(#titlebar:hover, #titlebar:has(toolbarbutton[open="true"]:not(#zen-sidepanel-button))) {
|
|
#zen-workspaces-button {
|
|
toolbarbutton:not([active="true"]) {
|
|
flex-grow: 0 !important;
|
|
width: 0 !important;
|
|
margin-inline: 0 !important;
|
|
}
|
|
}
|
|
|
|
@media not (-moz-bool-pref: "theme.sidebar_expand_on_hover.collapse_buttons") {
|
|
#zen-sidebar-icons-wrapper > toolbarbutton:not(:first-child),
|
|
#zen-sidebar-top-buttons-customization-target > toolbarbutton: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-icons-wrapper:not(:has(#zen-workspaces-button:not([dont-show="true"]))) > *:not(:first-child),
|
|
#zen-sidebar-top-buttons-customization-target:not(:has(#zen-workspaces-button:not([dont-show="true"]))) > *:not(:first-child),
|
|
/* Show active workspace only when visible workspace switcher */
|
|
#zen-sidebar-icons-wrapper:has(#zen-workspaces-button:not([dont-show="true"])) > *:not(#zen-workspaces-button),
|
|
#zen-sidebar-top-buttons-customization-target: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;
|
|
}
|
|
}
|
|
}
|
|
} |