mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-14 16:23:53 +02:00
ed88aafdc1
This commit fixes an issue where dragging workspaces to change their position doesn't work on Linux platforms. The main changes include: 1. Added Linux-specific drag and drop handling with a transparent drag image 2. Enhanced dragover event handling for better visual feedback on Linux 3. Improved CSS styles for drag and drop elements on Linux 4. Added clearer comments to explain the reorder mode behavior The issue was that the drag and drop functionality wasn't working properly on Linux due to platform-specific behavior differences. This fix ensures that workspace reordering works consistently across all platforms.
518 lines
11 KiB
CSS
518 lines
11 KiB
CSS
/*
|
|
* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
*/
|
|
@namespace html 'http://www.w3.org/1999/xhtml';
|
|
|
|
#zen-workspaces-button {
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
font-size: x-small;
|
|
|
|
position: relative;
|
|
|
|
&[dont-show='true'] {
|
|
display: none !important;
|
|
}
|
|
|
|
--toolbarbutton-hover-background: transparent !important;
|
|
border-radius: var(--zen-button-border-radius) !important;
|
|
background: transparent;
|
|
appearance: unset !important;
|
|
height: fit-content;
|
|
gap: 3px;
|
|
|
|
container-type: inline-size;
|
|
width: 100%;
|
|
|
|
& toolbarbutton {
|
|
margin: 0;
|
|
width: 25px;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 0 !important;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
& .zen-workspace-icon[no-icon='true'] {
|
|
width: 6px;
|
|
height: 6px;
|
|
background: light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4));
|
|
border-radius: 50%;
|
|
}
|
|
|
|
filter: grayscale(1);
|
|
opacity: 0.5;
|
|
transition:
|
|
filter 0.2s,
|
|
opacity 0.2s,
|
|
width 0.1s;
|
|
|
|
&[active='true'],
|
|
&:hover {
|
|
filter: grayscale(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--zen-toolbar-element-bg);
|
|
}
|
|
}
|
|
|
|
&[overflow] {
|
|
gap: 0 !important;
|
|
|
|
& toolbarbutton {
|
|
margin: 0;
|
|
}
|
|
|
|
& toolbarbutton:not([active='true']),
|
|
&:has(toolbarbutton:hover) toolbarbutton[active='true'] {
|
|
&:not(:hover) {
|
|
width: min(var(--zen-overflowed-workspace-button-width), 25px);
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 4px;
|
|
border-radius: 99px;
|
|
height: 4px;
|
|
background: color-mix(
|
|
in srgb,
|
|
var(--zen-primary-color) 10%,
|
|
light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4)) 90%
|
|
);
|
|
left: 50%;
|
|
top: 50%;
|
|
filter: saturate(140%) brightness(110%) !important;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
& .zen-workspace-icon {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#zen-workspaces-button .zen-workspace-sidebar-wrapper {
|
|
position: absolute;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#zen-workspaces-button .zen-workspace-sidebar-name {
|
|
margin-left: 0.2rem;
|
|
display: none;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/** Keep these selectors in sync with the ones in vertical-tabs.css */
|
|
#navigator-toolbox {
|
|
& #zen-workspaces-button .zen-workspace-sidebar-name {
|
|
display: block;
|
|
}
|
|
|
|
& #zen-workspaces-button .zen-workspace-sidebar-icon {
|
|
margin-inline-end: 5px;
|
|
}
|
|
|
|
& #zen-workspaces-button {
|
|
overflow: hidden;
|
|
display: flex;
|
|
gap: 0.5ch;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
scroll-behavior: smooth;
|
|
}
|
|
}
|
|
|
|
/* Workspaces Panel UI */
|
|
|
|
#PanelUI-zen-workspaces {
|
|
--panel-width: 320px;
|
|
--panel-padding: 0;
|
|
}
|
|
|
|
#PanelUI-zen-workspaces > panelmultiview {
|
|
align-items: flex-start;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
#PanelUI-zen-workspaces panelmultiview panelview {
|
|
position: relative;
|
|
padding: 10px;
|
|
width: var(--panel-width);
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-icon-picker toolbarbutton {
|
|
width: 30px;
|
|
height: 30px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 2px solid transparent;
|
|
border-radius: 7px;
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-icon-picker toolbarbutton[selected='true'] {
|
|
border-color: var(--zen-colors-secondary);
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-icon-picker toolbarbutton .toolbarbutton-icon {
|
|
display: none;
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-icon-picker toolbarbutton .toolbarbutton-text {
|
|
min-width: unset;
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-icon-picker {
|
|
padding: 5px !important;
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-icon-picker-wrapper {
|
|
overflow-x: hidden;
|
|
justify-items: center;
|
|
overflow-y: auto;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
|
|
justify-content: space-between;
|
|
align-content: space-between;
|
|
max-height: 250px;
|
|
|
|
.workspace-icon-button {
|
|
min-width: 24px;
|
|
min-height: 24px;
|
|
font-size: 16px;
|
|
margin: 2px;
|
|
padding: 4px;
|
|
}
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-list[empty='true'] {
|
|
font-weight: 600;
|
|
padding: 10px;
|
|
width: 100%;
|
|
text-align: start;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.PanelUI-zen-workspaces-user-create {
|
|
height: 100%;
|
|
|
|
.PanelUI-zen-workspaces-creation-wraper {
|
|
border-radius: 5px;
|
|
border: 1px solid var(--zen-colors-border);
|
|
|
|
margin-top: 10px;
|
|
|
|
& .PanelUI-zen-workspaces-icons-container {
|
|
padding: 10px 0;
|
|
min-width: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-right: 1px solid var(--zen-colors-border);
|
|
margin-right: 2px;
|
|
}
|
|
|
|
& html|input {
|
|
border: none;
|
|
outline: none !important;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Workspace icon picker styles */
|
|
#PanelUI-zen-workspaces-icon-picker-wrapper {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
gap: 5px;
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-icon-search-bar {
|
|
display: flex;
|
|
position: sticky;
|
|
top: 0;
|
|
background-color: inherit;
|
|
z-index: 1000;
|
|
padding: 8px;
|
|
width: 100%;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-icon-search-input {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
font-size: 14px;
|
|
border: 1px solid var(--panel-separator-color, #ccc);
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-list toolbarbutton {
|
|
padding: 5px;
|
|
border-radius: var(--zen-button-border-radius);
|
|
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
&:first-child {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
& .zen-workspace-icon {
|
|
position: relative;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: var(--zen-button-border-radius);
|
|
margin-right: 10px;
|
|
border: 1px solid var(--zen-colors-border);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-weight: 600;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&[data-usercontextid] .zen-workspace-icon {
|
|
border-color: color-mix(in srgb, var(--identity-tab-color) 40%, transparent 60%);
|
|
}
|
|
|
|
& > vbox:has(> .zen-workspace-name) {
|
|
overflow: hidden;
|
|
}
|
|
|
|
& .zen-workspace-name {
|
|
font-weight: 600;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
width: 100%;
|
|
}
|
|
|
|
& .zen-workspace-container {
|
|
font-size: 12px;
|
|
opacity: 0.5;
|
|
font-weight: normal;
|
|
}
|
|
|
|
& .zen-workspace-actions,
|
|
.zen-workspace-actions-reorder-icon {
|
|
display: none;
|
|
margin: 0;
|
|
margin-left: auto !important;
|
|
}
|
|
|
|
&.zen-workspace-button[active='true'] {
|
|
position: relative;
|
|
}
|
|
|
|
&.zen-workspace-button[active='true'] .zen-workspace-icon::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
left: -2px;
|
|
width: 2px;
|
|
height: 16px;
|
|
background-color: var(--toolbarbutton-icon-fill-attention);
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
|
|
.zen-workspace-button.dragging {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.zen-workspace-button.dragover::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 2px;
|
|
background-color: var(--toolbarbutton-icon-fill-attention);
|
|
}
|
|
|
|
/* Enhanced visual feedback for Linux platform */
|
|
@supports (-moz-gtk-csd-available) {
|
|
.zen-workspace-button.dragover {
|
|
background-color: color-mix(in srgb, var(--toolbarbutton-icon-fill-attention) 15%, transparent);
|
|
}
|
|
|
|
.zen-workspace-button.dragover::after {
|
|
height: 3px;
|
|
}
|
|
}
|
|
|
|
.zen-workspace-last-place-drop-target.dragover {
|
|
background-color: var(--toolbarbutton-icon-fill-attention);
|
|
}
|
|
|
|
/* Enhanced visual feedback for Linux platform */
|
|
@supports (-moz-gtk-csd-available) {
|
|
.zen-workspace-last-place-drop-target {
|
|
height: 6px;
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.zen-workspace-last-place-drop-target.dragover {
|
|
background-color: var(--toolbarbutton-icon-fill-attention);
|
|
box-shadow: 0 0 4px var(--toolbarbutton-icon-fill-attention);
|
|
}
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-reorder-mode[active='true'] {
|
|
color: var(--toolbarbutton-icon-fill-attention) !important;
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-list:not([reorder-mode='true']) toolbarbutton {
|
|
&:hover .zen-workspace-actions,
|
|
& .zen-workspace-actions[active='true'] {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-list[reorder-mode='true'] toolbarbutton {
|
|
.zen-workspace-actions-reorder-icon {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-list[reorder-mode='true'] .zen-workspace-last-place-drop-target {
|
|
display: block;
|
|
}
|
|
|
|
.zen-workspace-last-place-drop-target {
|
|
display: none;
|
|
height: 4px;
|
|
width: 100%;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-view > vbox:nth-child(2) {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-new,
|
|
#PanelUI-zen-workspaces-reorder-mode,
|
|
#PanelUI-zen-gradient-generator-color-custom-add {
|
|
min-height: 1px !important;
|
|
padding: 3px;
|
|
border-radius: 4px;
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-create-footer,
|
|
#PanelUI-zen-workspaces-edit-footer {
|
|
padding-bottom: 0 !important;
|
|
margin-top: 10px;
|
|
margin-left: 0;
|
|
margin-bottom: 0 !important;
|
|
width: 100%;
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-create-footer button[default='true'],
|
|
#PanelUI-zen-workspaces-edit-footer button[default='true'] {
|
|
width: 100%;
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-header {
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* Mark workspaces indicator */
|
|
#zen-current-workspace-indicator-container {
|
|
position: relative;
|
|
margin-bottom: var(--zen-workspace-indicator-height);
|
|
}
|
|
|
|
.zen-current-workspace-indicator {
|
|
padding: calc(15px + var(--zen-toolbox-padding)) calc(4px + var(--tab-inline-padding));
|
|
font-weight: 600;
|
|
position: absolute;
|
|
max-height: var(--zen-workspace-indicator-height);
|
|
min-height: var(--zen-workspace-indicator-height);
|
|
gap: var(--tab-icon-end-margin);
|
|
align-items: center;
|
|
flex-direction: row !important;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
|
|
&::before {
|
|
border-radius: var(--border-radius-medium);
|
|
background: transparent;
|
|
transition: background 0.1s;
|
|
pointer-events: none;
|
|
content: '';
|
|
position: absolute;
|
|
top: var(--zen-toolbox-padding);
|
|
left: calc(var(--zen-toolbox-padding) / 2);
|
|
width: calc(100% - var(--zen-toolbox-padding));
|
|
height: calc(100% - var(--zen-toolbox-padding) * 2);
|
|
}
|
|
|
|
&:hover,
|
|
&[open='true'] {
|
|
&::before {
|
|
background: var(--tab-hover-background-color);
|
|
}
|
|
}
|
|
|
|
& .zen-current-workspace-indicator-icon {
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.zen-current-workspace-indicator-name {
|
|
opacity: 0.5;
|
|
display: block;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
pointer-events: none;
|
|
font-size: small;
|
|
}
|
|
}
|
|
|
|
@media not -moz-pref('zen.workspaces.show-workspace-indicator') {
|
|
#zen-current-workspace-indicator-container {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
#zen-current-workspace-indicator-container[hidden='true'] {
|
|
display: none !important;
|
|
}
|