mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-15 04:33:54 +02:00
260 lines
9 KiB
CSS
260 lines
9 KiB
CSS
|
|
/* only use mod in collapsed toolbar mode */
|
|
:root:has(#navigator-toolbox:not([zen-sidebar-expanded="true"])) {
|
|
#browser {
|
|
--tab-collapsed-width: 44px !important;
|
|
}
|
|
|
|
#navigator-toolbox {
|
|
z-index: 4 !important;
|
|
}
|
|
|
|
|
|
/* Move topbar buttons in the now empty space */
|
|
@media not (-moz-bool-pref: "zen.view.compact") {
|
|
#zen-appcontent-wrapper {
|
|
overflow: visible !important;
|
|
|
|
#zen-appcontent-navbar-container {
|
|
margin-left: calc(0px - var(--tab-collapsed-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-tabbar"),
|
|
(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;
|
|
}
|
|
}
|
|
|
|
#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(--tab-collapsed-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 */
|
|
}
|
|
|
|
#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,
|
|
#navigator-toolbox[zen-has-hover] #titlebar::before {
|
|
opacity: 1.0 !important;
|
|
transition: 60ms opacity ease-out;
|
|
}
|
|
}
|
|
|
|
#titlebar:hover,
|
|
#navigator-toolbox[zen-has-hover] #titlebar {
|
|
width: var(--theme-sidebar_expand_on_hover-expanded_width) !important;
|
|
box-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
|
|
|
|
#zen-sidebar-top-buttons {
|
|
width: var(--theme-sidebar_expand_on_hover-expanded_width);
|
|
}
|
|
}
|
|
|
|
.tab-background {
|
|
border-top-right-radius: 8px !important;
|
|
border-bottom-right-radius: 8px !important;
|
|
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: var(--tab-collapsed-width);
|
|
transition: width var(--theme-sidebar_expand_on_hover-transition_speed) ease-in-out !important;
|
|
}
|
|
|
|
#zen-sidebar-icons-wrapper,
|
|
#zen-sidebar-top-buttons-customization-target {
|
|
justify-content: center !important;
|
|
display: flex;
|
|
flex-direction: row !important;
|
|
gap: 0 !important;
|
|
|
|
toolbarbutton {
|
|
overflow: hidden !important;
|
|
padding: 0 !important;
|
|
width: 36px !important;
|
|
height: 36px !important;
|
|
flex: auto !important;
|
|
transition: flex var(--theme-sidebar_expand_on_hover-transition_speed), width var(--theme-sidebar_expand_on_hover-transition_speed) linear !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: auto !important;
|
|
transition: flex var(--theme-sidebar_expand_on_hover-transition_speed), width var(--theme-sidebar_expand_on_hover-transition_speed) linear !important;
|
|
overflow: hidden !important;
|
|
}
|
|
}
|
|
|
|
#navigator-toolbox:not([zen-has-hover]) #titlebar:not(#titlebar:hover) {
|
|
#zen-workspaces-button {
|
|
toolbarbutton:not([active="true"]) {
|
|
flex: 0 !important;
|
|
width: 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: 0 !important;
|
|
width: 0 !important;
|
|
min-width: 0 !important;
|
|
}
|
|
}
|
|
|
|
@media (-moz-bool-pref: "theme.sidebar_expand_on_hover.collapse_buttons") {
|
|
#zen-sidebar-icons-wrapper:not(:has(#zen-workspaces-button)) > toolbarbutton:not(:first-child),
|
|
#zen-sidebar-top-buttons-customization-target:not(:has(#zen-workspaces-button)) > toolbarbutton:not(:first-child),
|
|
#zen-sidebar-icons-wrapper:has(#zen-workspaces-button) > toolbarbutton:not(#zen-workspaces-button),
|
|
#zen-sidebar-top-buttons-customization-target:has(#zen-workspaces-button) > toolbarbutton:not(#zen-workspaces-button) {
|
|
flex: 0 !important;
|
|
width: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
}
|