mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-14 16:23:53 +02:00
226 lines
5.3 KiB
CSS
226 lines
5.3 KiB
CSS
#zen-workspaces-button {
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
margin: 0 30px;
|
|
opacity: .6;
|
|
}
|
|
|
|
#zen-workspaces-button .zen-workspace-sidebar-name {
|
|
margin-left: 0.2rem;
|
|
display: none;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
font-size: 13px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@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']: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 {
|
|
width: calc(var(--zen-sidebar-action-button-width) - 1px) !important;
|
|
margin-top: .2rem;
|
|
}
|
|
|
|
& #zen-workspaces-button .zen-workspace-sidebar-name {
|
|
display: block;
|
|
}
|
|
|
|
& #zen-workspaces-button .zen-workspace-sidebar-icon[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%;
|
|
}
|