mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-14 16:23:53 +02:00
302 lines
7.5 KiB
CSS
302 lines
7.5 KiB
CSS
#zen-workspaces-button {
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
|
|
position: relative;
|
|
|
|
&:not([as-button='true']) {
|
|
--zen-workspaces-strip-background-color: color-mix(in srgb, var(--zen-colors-border) 50%, transparent 50%);
|
|
--toolbarbutton-hover-background: var(--toolbarbutton-hover-background) !important;
|
|
border-radius: var(--zen-button-border-radius) !important;
|
|
background: var(--zen-workspaces-strip-background-color) !important;
|
|
padding: 5px;
|
|
appearance: unset !important;
|
|
height: fit-content;
|
|
gap: 3px;
|
|
|
|
& toolbarbutton {
|
|
margin: 0 !important;
|
|
width: 25px;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 0 !important;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
& > * {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
&[active='true']::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 4px;
|
|
border-radius: 99px;
|
|
height: 4px;
|
|
background: var(--zen-primary-color);
|
|
bottom: -2px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
animation: zen-workspaces-button-active 0.1s ease-in-out;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[as-button='true'] {
|
|
border-radius: var(--tab-border-radius);
|
|
|
|
&:hover {
|
|
background: var(--toolbarbutton-hover-background);
|
|
}
|
|
}
|
|
|
|
:root:has(#navigator-toolbox:not([zen-expanded='true'])) &[as-button='true'] {
|
|
margin: 0 !important;
|
|
padding: var(--toolbarbutton-inner-padding) !important;
|
|
width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
|
|
height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
|
|
border-radius: var(--tab-border-radius) !important;
|
|
|
|
&:hover {
|
|
background: var(--toolbarbutton-hover-background) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
#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;
|
|
}
|
|
|
|
@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: 100% !important;
|
|
margin: 2px;
|
|
min-width: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
|
|
height: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
|
|
|
|
& .zen-workspace-sidebar-wrapper {
|
|
left: calc(var(--toolbarbutton-outer-padding) + 5px);
|
|
width: calc(100% - (var(--toolbarbutton-outer-padding) * 3));
|
|
}
|
|
}
|
|
|
|
& #zen-workspaces-button .zen-workspace-sidebar-name {
|
|
display: block;
|
|
}
|
|
|
|
& #zen-workspaces-button .zen-workspace-sidebar-icon {
|
|
margin-inline-end: 5px;
|
|
|
|
& [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 {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
display: flex;
|
|
width: calc(100% - var(--zen-tabbrowser-padding) * 6) !important;
|
|
gap: 0.5ch;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 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: 15px;
|
|
width: var(--panel-width);
|
|
min-height: 150px;
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-create-input,
|
|
#PanelUI-zen-workspaces-edit-input {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-create-icons-container toolbarbutton,
|
|
#PanelUI-zen-workspaces-edit-icons-container toolbarbutton {
|
|
width: 30px;
|
|
height: 30px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 2px solid transparent;
|
|
border-radius: 7px;
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-create-icons-container toolbarbutton[selected='true'],
|
|
#PanelUI-zen-workspaces-edit-icons-container toolbarbutton[selected='true'] {
|
|
border-color: var(--zen-colors-secondary);
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-create-icons-container toolbarbutton .toolbarbutton-icon,
|
|
#PanelUI-zen-workspaces-edit-icons-container toolbarbutton .toolbarbutton-icon {
|
|
display: none;
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-create-icons-container toolbarbutton .toolbarbutton-text,
|
|
#PanelUI-zen-workspaces-edit-icons-container toolbarbutton .toolbarbutton-text {
|
|
min-width: unset;
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-create-icons-container,
|
|
#PanelUI-zen-workspaces-edit-icons-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-create-icons-container toolbarbutton.toolbarbutton-1,
|
|
#PanelUI-zen-workspaces-edit-icons-container toolbarbutton.toolbarbutton-1 {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#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-current-info toolbarbutton:last-child {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-list toolbarbutton,
|
|
#PanelUI-zen-workspaces-current-info toolbarbutton {
|
|
padding: 5px;
|
|
border-radius: var(--zen-button-border-radius);
|
|
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&:first-child {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
& .zen-workspace-icon {
|
|
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%);
|
|
}
|
|
|
|
& .zen-workspace-name {
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
& .zen-workspace-container {
|
|
font-size: 12px;
|
|
opacity: 0.5;
|
|
font-weight: normal;
|
|
}
|
|
|
|
& .zen-workspace-actions {
|
|
display: none;
|
|
margin: 0;
|
|
margin-left: auto !important;
|
|
}
|
|
|
|
&:hover .zen-workspace-actions,
|
|
& .zen-workspace-actions[active='true'] {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-current-info toolbarbutton:first-child {
|
|
margin-bottom: 10px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-view > vbox:nth-child(2) {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#PanelUI-zen-workspaces-new {
|
|
margin-left: auto;
|
|
min-height: 1px !important;
|
|
padding: 3px;
|
|
border-radius: 4px;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
#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%;
|
|
}
|