mirror of
https://github.com/zen-browser/desktop.git
synced 2026-07-27 18:46:20 +00:00
refactor: update styling and structure of Zen UI components; remove deprecated toolbar styles and adjust margins for better layout
This commit is contained in:
mr. M
@@ -9,7 +9,7 @@ export var ZenCustomizableUI = new (class {
|
||||
'zen-sidebar-top-buttons',
|
||||
{
|
||||
type: this.TYPE_TOOLBAR,
|
||||
defaultPlacements: ['preferences-button', 'zen-expand-sidebar-button', 'zen-sidepanel-button'],
|
||||
defaultPlacements: ['zen-sidepanel-button'],
|
||||
defaultCollapsed: null,
|
||||
},
|
||||
true
|
||||
@@ -45,7 +45,6 @@ export var ZenCustomizableUI = new (class {
|
||||
customizationtarget="zen-sidebar-top-buttons-customization-target"
|
||||
mode="icons">
|
||||
<hbox id="zen-sidebar-top-buttons-customization-target" class="customization-target" flex="1">
|
||||
<toolbarbutton removable="true" class="chromeclass-toolbar-additional toolbarbutton-1 zen-sidebar-action-button" id="zen-expand-sidebar-button" data-l10n-id="sidebar-zen-expand" cui-areatype="toolbar" oncommand="gZenVerticalTabsManager.toggleExpand();"></toolbarbutton>
|
||||
<toolbarbutton removable="true" class="toolbarbutton-1 zen-sidebar-action-button zen-compact-mode-ignore" id="zen-sidepanel-button" data-l10n-id="sidebar-zen-sidepanel" onclick="gZenBrowserManagerSidebar.toggle();"></toolbarbutton>
|
||||
</hbox>
|
||||
</toolbar>
|
||||
|
||||
@@ -118,10 +118,8 @@ var gZenUIManager = {
|
||||
var gZenVerticalTabsManager = {
|
||||
init() {
|
||||
var updateEvent = this._updateEvent.bind(this);
|
||||
Services.prefs.addObserver('zen.view.sidebar-expanded', updateEvent);
|
||||
Services.prefs.addObserver('zen.tabs.vertical.right-side', updateEvent);
|
||||
Services.prefs.addObserver('zen.view.sidebar-expanded.max-width', updateEvent);
|
||||
Services.prefs.addObserver('zen.view.sidebar-expanded.on-hover', updateEvent);
|
||||
|
||||
gZenCompactModeManager.addEventListener(updateEvent);
|
||||
this._updateEvent();
|
||||
@@ -152,31 +150,6 @@ var gZenVerticalTabsManager = {
|
||||
return this._navigatorToolbox;
|
||||
},
|
||||
|
||||
_updateOnHoverVerticalTabs() {
|
||||
const onHover = Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover');
|
||||
const expanded = Services.prefs.getBoolPref('zen.view.sidebar-expanded');
|
||||
const sidebar = this.navigatorToolbox;
|
||||
|
||||
if (onHover) {
|
||||
// if the sidebar is not expanded, and hover detection is enabled, show the sidebar
|
||||
sidebar.removeAttribute('zen-expanded');
|
||||
sidebar.setAttribute('zen-user-hover', 'true');
|
||||
|
||||
sidebar.removeAttribute('zen-has-hover');
|
||||
}
|
||||
else if (expanded) {
|
||||
// if the sidebar is expanded, close, and remove hover detection
|
||||
sidebar.setAttribute('zen-expanded', 'true');
|
||||
sidebar.removeAttribute('zen-user-hover');
|
||||
sidebar.removeAttribute('zen-has-hover');
|
||||
} else {
|
||||
// if the sidebar is not expanded, and hover detection is disabled, hide the sidebar
|
||||
sidebar.removeAttribute('zen-expanded');
|
||||
sidebar.removeAttribute('zen-user-show');
|
||||
sidebar.removeAttribute('zen-user-hover');
|
||||
}
|
||||
},
|
||||
|
||||
initRightSideOrderContextMenu() {
|
||||
const kConfigKey = 'zen.tabs.vertical.right-side';
|
||||
const fragment = window.MozXULElement.parseXULToFragment(`
|
||||
@@ -190,13 +163,14 @@ var gZenVerticalTabsManager = {
|
||||
document.getElementById('viewToolbarsMenuSeparator').before(fragment);
|
||||
},
|
||||
|
||||
get isWindowsStyledButtons() {
|
||||
return !(window.AppConstants.platform === 'macosx'|| window.matchMedia('(-moz-gtk-csd-reversed-placement)').matches);
|
||||
},
|
||||
|
||||
_updateEvent() {
|
||||
this._updateMaxWidth();
|
||||
const topButtons = document.getElementById('zen-sidebar-top-buttons');
|
||||
const customizationTarget = document.getElementById('nav-bar-customization-target');
|
||||
const tabboxWrapper = document.getElementById('zen-tabbox-wrapper');
|
||||
const browser = document.getElementById('browser');
|
||||
const sidebarExpanded = Services.prefs.getBoolPref('zen.view.sidebar-expanded');
|
||||
|
||||
if (Services.prefs.getBoolPref('zen.tabs.vertical.right-side')) {
|
||||
this.navigatorToolbox.setAttribute('zen-right-side', 'true');
|
||||
@@ -206,10 +180,8 @@ var gZenVerticalTabsManager = {
|
||||
|
||||
// Check if the sidebar is in hover mode
|
||||
if (
|
||||
sidebarExpanded &&
|
||||
!this.navigatorToolbox.hasAttribute('zen-right-side') &&
|
||||
!Services.prefs.getBoolPref('zen.view.compact') &&
|
||||
!Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover')
|
||||
!Services.prefs.getBoolPref('zen.view.compact')
|
||||
) {
|
||||
this.navigatorToolbox.prepend(topButtons);
|
||||
// browser.prepend(this.navigatorToolbox);
|
||||
@@ -218,28 +190,39 @@ var gZenVerticalTabsManager = {
|
||||
// tabboxWrapper.prepend(this.navigatorToolbox);
|
||||
}
|
||||
|
||||
if (Services.prefs.getBoolPref('zen.view.use-single-toolbar')) {
|
||||
if (!topButtons.contains(document.getElementById('nav-bar'))) {
|
||||
topButtons.after(document.getElementById('nav-bar'));
|
||||
}
|
||||
let elements = document.querySelectorAll('#nav-bar-customization-target > *:is(toolbarbutton, #stop-reload-button)');
|
||||
elements = Array.from(elements);
|
||||
const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
|
||||
for (const button of elements) {
|
||||
buttonsTarget.append(button);
|
||||
}
|
||||
topButtons.appendChild(document.getElementById('PanelUI-button'));
|
||||
if (this.isWindowsStyledButtons) {
|
||||
document.getElementById('zen-appcontent-navbar-container').append(
|
||||
document.querySelector('#nav-bar > .titlebar-buttonbox-container')
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Always move the splitter next to the sidebar
|
||||
this.navigatorToolbox.after(document.getElementById('zen-sidebar-splitter'));
|
||||
|
||||
this._updateOnHoverVerticalTabs();
|
||||
},
|
||||
|
||||
_updateMaxWidth() {
|
||||
const isCompactMode = Services.prefs.getBoolPref('zen.view.compact');
|
||||
const expanded = this.expanded;
|
||||
const maxWidth = Services.prefs.getIntPref('zen.view.sidebar-expanded.max-width');
|
||||
const toolbox = document.getElementById('navigator-toolbox');
|
||||
if (expanded && !isCompactMode) {
|
||||
if (!isCompactMode) {
|
||||
toolbox.style.maxWidth = `${maxWidth}px`;
|
||||
} else {
|
||||
toolbox.style.removeProperty('maxWidth');
|
||||
}
|
||||
},
|
||||
|
||||
get expanded() {
|
||||
return Services.prefs.getBoolPref('zen.view.sidebar-expanded');
|
||||
},
|
||||
|
||||
get expandButton() {
|
||||
if (this._expandButton) {
|
||||
return this._expandButton;
|
||||
@@ -248,30 +231,6 @@ var gZenVerticalTabsManager = {
|
||||
return this._expandButton;
|
||||
},
|
||||
|
||||
toggleExpand() {
|
||||
const pausedForExpand = this._hoverPausedForExpand;
|
||||
const onHover = Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover');
|
||||
const expanded = Services.prefs.getBoolPref('zen.view.sidebar-expanded');
|
||||
|
||||
|
||||
if (onHover && !expanded) {
|
||||
// Expand sidebar and disable hover detection
|
||||
Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover', false);
|
||||
this._hoverPausedForExpand = true;
|
||||
Services.prefs.setBoolPref('zen.view.sidebar-expanded', true);
|
||||
} else if (pausedForExpand && expanded) {
|
||||
// Re-enable hover detection when closing
|
||||
this._hoverPausedForExpand = false;
|
||||
Services.prefs.setBoolPref('zen.view.sidebar-expanded', false);
|
||||
Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover', true); // Re-enable hover detection when closing
|
||||
}
|
||||
else {
|
||||
// Toggle sidebar
|
||||
Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover', false);
|
||||
Services.prefs.setBoolPref('zen.view.sidebar-expanded', !expanded);
|
||||
}
|
||||
},
|
||||
|
||||
toggleTabsOnRight() {
|
||||
const newVal = !Services.prefs.getBoolPref('zen.tabs.vertical.right-side');
|
||||
Services.prefs.setBoolPref('zen.tabs.vertical.right-side', newVal);
|
||||
|
||||
@@ -20,7 +20,6 @@
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-profile-dialog.css" />
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-sidebar-panels.css" />
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-popup.css" />
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-cool-toolbar.css" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-compact-mode.css" />
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/skin/zen-icons/icons.css" />
|
||||
|
||||
@@ -43,7 +43,6 @@
|
||||
content/browser/zen-styles/zen-popup.css (content/zen-styles/zen-popup.css)
|
||||
content/browser/zen-styles/zen-sidebar-panels.css (content/zen-styles/zen-sidebar-panels.css)
|
||||
content/browser/zen-styles/zen-gradient-generator.css (content/zen-styles/zen-gradient-generator.css)
|
||||
content/browser/zen-styles/zen-cool-toolbar.css (content/zen-styles/zen-cool-toolbar.css)
|
||||
|
||||
content/browser/zen-styles/zen-panels/bookmarks.css (content/zen-styles/zen-panels/bookmarks.css)
|
||||
content/browser/zen-styles/zen-panels/extensions.css (content/zen-styles/zen-panels/extensions.css)
|
||||
|
||||
@@ -4,9 +4,17 @@
|
||||
border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
|
||||
position: relative;
|
||||
|
||||
&:not([zen-split="true"]) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
|
||||
border-radius: var(--zen-border-radius);
|
||||
overflow: hidden;
|
||||
|
||||
#browser:has(#navigator-toolbox[zen-right-side='true']) & {
|
||||
margin-right: 0;
|
||||
margin-left: var(--zen-element-separation);
|
||||
}
|
||||
|
||||
:root[zen-no-padding='true'] &:not([zen-split="true"]) {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -77,6 +77,19 @@
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
:root:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar']) {
|
||||
& #zen-appcontent-wrapper {
|
||||
margin: var(--zen-element-separation);
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#browser:has(#navigator-toolbox[zen-right-side='true']) & #zen-appcontent-wrapper {
|
||||
margin-right: 0;
|
||||
margin-left: var(--zen-element-separation);
|
||||
}
|
||||
}
|
||||
|
||||
#tabbrowser-tabbox {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
|
||||
:root:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar']):not(:has(#tabbrowser-tabpanels[zen-split-view='true'])) {
|
||||
& #zen-appcontent-wrapper {
|
||||
box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
|
||||
border-radius: var(--zen-border-radius);
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
margin: var(--zen-element-separation);
|
||||
margin-left: 0;
|
||||
|
||||
#browser:has(#navigator-toolbox[zen-right-side='true']) & {
|
||||
margin-right: 0;
|
||||
margin-left: var(--zen-element-separation);
|
||||
}
|
||||
|
||||
& #zen-appcontent-navbar-container {
|
||||
background: color-mix(in srgb, var(--zen-colors-tertiary) 90%, transparent 10%);
|
||||
}
|
||||
|
||||
:root[zen-no-padding='true'] & {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
& #zen-appcontent-navbar-container {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
@media (-moz-platform: macos) {
|
||||
& #zen-appcontent-navbar-container {
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
& #zen-appcontent-navbar-container {
|
||||
border-bottom: 1px solid light-dark(rgba(0,0,0,.04), rgba(255,255,255,.04));
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: 'zen.view.compact') {
|
||||
@media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
|
||||
@media not (-moz-platform: macos) {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -4,11 +4,11 @@
|
||||
visibility: inherit;
|
||||
}
|
||||
|
||||
#zen-appcontent-wrapper {
|
||||
#tabbrowser-tabpanels {
|
||||
transition: transform 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
#zen-appcontent-wrapper:has(.zen-glance-background) {
|
||||
#tabbrowser-tabpanels:has(.zen-glance-background) {
|
||||
transform: scale(0.98);
|
||||
backdrop-filter: blur(5px);
|
||||
|
||||
|
||||
@@ -51,6 +51,19 @@
|
||||
order: 0 !important;
|
||||
|
||||
display: flex;
|
||||
|
||||
& toolbarspring { display: none; }
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: 'zen.view.use-single-toolbar') {
|
||||
& #zen-appcontent-navbar-container > .titlebar-buttonbox-container {
|
||||
margin-left: auto;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
& #urlbar-container {
|
||||
width: -moz-available !important;
|
||||
}
|
||||
}
|
||||
|
||||
.titlebar-spacer[type='pre-tabs'],
|
||||
@@ -219,15 +232,7 @@
|
||||
}
|
||||
|
||||
/* 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-compact-mode-ignore)),
|
||||
#navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true'])
|
||||
) {
|
||||
#navigator-toolbox {
|
||||
--zen-toolbox-min-width: fit-content;
|
||||
--tab-icon-end-margin: 8.5px;
|
||||
padding: var(--zen-toolbox-padding);
|
||||
@@ -242,11 +247,16 @@
|
||||
margin-inline: var(--tab-block-margin);
|
||||
}
|
||||
|
||||
& #zen-sidebar-top-buttons {
|
||||
& #zen-sidebar-top-buttons,
|
||||
& #nav-bar {
|
||||
padding: var(--zen-element-separation);
|
||||
margin-top: var(--zen-element-separation);
|
||||
}
|
||||
|
||||
& #nav-bar {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
& #zen-workspaces-button[as-button='true'] {
|
||||
width: calc(100% - 10px) !important;
|
||||
}
|
||||
@@ -378,198 +388,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 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-compact-mode-ignore)),
|
||||
#navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true'])
|
||||
)
|
||||
) {
|
||||
--tab-min-width: 36px !important;
|
||||
|
||||
/* Important: When changin this value, make sure expand on hover doesn't break! */
|
||||
--zen-toolbox-padding: calc(var(--zen-element-separation) / 2 + 1px);
|
||||
--zen-toolbox-max-width: calc(var(--tab-min-width) + var(--zen-toolbox-padding) * 2);
|
||||
max-width: var(--zen-toolbox-max-width) !important;
|
||||
min-width: var(--zen-toolbox-max-width) !important;
|
||||
|
||||
--zen-tabbar-offset: 1px; /* Fix the tabbar offset, because there's a shadow */
|
||||
&[zen-right-side='true'] {
|
||||
margin-left: var(--zen-tabbar-offset);
|
||||
}
|
||||
|
||||
&:not([zen-right-side='true']) {
|
||||
margin-right: var(--zen-tabbar-offset);
|
||||
}
|
||||
|
||||
& #zen-current-workspace-indicator-name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& #TabsToolbar {
|
||||
padding-top: var(--zen-element-separation);
|
||||
}
|
||||
|
||||
& #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-icons-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: var(--zen-element-separation);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:root:has(&) #zen-sidebar-splitter {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
& #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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Mark: Separator styling */
|
||||
#zen-sidebar-splitter {
|
||||
opacity: 0;
|
||||
@@ -577,91 +395,6 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Mark: Expand on hover */
|
||||
@media (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') and (not ((-moz-bool-pref: 'zen.view.compact') and (-moz-bool-pref: 'zen.view.compact.hide-tabbar'))) {
|
||||
#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;
|
||||
|
||||
height: 100%;
|
||||
|
||||
border-top-right-radius: var(--zen-border-radius);
|
||||
width: var(--zen-toolbox-max-width);
|
||||
|
||||
& .tabbrowser-tab {
|
||||
transition: 0s !important;
|
||||
}
|
||||
}
|
||||
|
||||
#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-compact-mode-ignore)) {
|
||||
--zen-toolbox-max-width: 45px;
|
||||
max-width: var(--zen-toolbox-max-width) !important;
|
||||
min-width: var(--zen-toolbox-max-width) !important;
|
||||
padding: 0 !important;
|
||||
|
||||
& #TabsToolbar {
|
||||
z-index: 100 !important;
|
||||
width: 250px !important;
|
||||
|
||||
background: var(--zen-main-browser-background-toolbar) !important;
|
||||
background-attachment: fixed !important;
|
||||
background-size: 2000px !important; /* Dont ask me why */
|
||||
|
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
|
||||
position: absolute;
|
||||
padding: var(--zen-toolbox-padding);
|
||||
transition: 0 !important;
|
||||
/*animation: zen-vtabs-animation 0.3s ease-in-out;*/
|
||||
-moz-window-dragging: no-drag;
|
||||
overflow: hidden;
|
||||
transition: width 0.2s !important;
|
||||
|
||||
& .tab-throbber,
|
||||
& .tab-icon-pending,
|
||||
& .tab-icon-image,
|
||||
& .tab-sharing-icon-overlay,
|
||||
& .tab-icon-overlay {
|
||||
transition: 0.1s !important;
|
||||
}
|
||||
}
|
||||
|
||||
&[zen-right-side='true'] #TabsToolbar {
|
||||
right: 0;
|
||||
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 {
|
||||
|
||||
@@ -108,46 +108,37 @@
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@media (-moz-bool-pref: 'zen.view.sidebar-expanded') {
|
||||
/** Keep these selectors in sync with the ones in vertical-tabs.css */
|
||||
#navigator-toolbox:is(
|
||||
#navigator-toolbox[zen-user-hover='true'][zen-has-hover],
|
||||
#navigator-toolbox[zen-user-hover='true'][has-popup-menu],
|
||||
#navigator-toolbox[zen-user-hover='true']:focus-within,
|
||||
#mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox,
|
||||
#navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
|
||||
:not([zen-user-hover='true'])
|
||||
) {
|
||||
& #zen-workspaces-button[as-button='true'] {
|
||||
width: calc(100% - var(--toolbarbutton-outer-padding));
|
||||
margin: 2px;
|
||||
min-width: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
|
||||
height: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
|
||||
}
|
||||
/** Keep these selectors in sync with the ones in vertical-tabs.css */
|
||||
#navigator-toolbox {
|
||||
& #zen-workspaces-button[as-button='true'] {
|
||||
width: calc(100% - var(--toolbarbutton-outer-padding));
|
||||
margin: 2px;
|
||||
min-width: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
|
||||
height: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
|
||||
}
|
||||
|
||||
& #zen-workspaces-button .zen-workspace-sidebar-name {
|
||||
display: block;
|
||||
}
|
||||
& #zen-workspaces-button .zen-workspace-sidebar-name {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& #zen-workspaces-button .zen-workspace-sidebar-icon {
|
||||
margin-inline-end: 5px;
|
||||
& #zen-workspaces-button .zen-workspace-sidebar-icon {
|
||||
margin-inline-end: 5px;
|
||||
|
||||
& [no-icon='true'] {
|
||||
display: none;
|
||||
}
|
||||
& [no-icon='true'] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
& #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon='true'] + .zen-workspace-sidebar-name {
|
||||
margin-left: 0;
|
||||
}
|
||||
& #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon='true'] + .zen-workspace-sidebar-name {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
& #zen-workspaces-button {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
display: flex;
|
||||
gap: 0.5ch;
|
||||
}
|
||||
& #zen-workspaces-button {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
display: flex;
|
||||
gap: 0.5ch;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user