mirror of
https://github.com/agent0ai/agent-zero.git
synced 2026-05-23 04:17:34 +00:00
b64c43e736
Add a shared grouped action rail for Browser, Desktop, and Editor floating surface modals so modality switches, canvas docking, focus mode, New, and close controls appear in a consistent order with separators. Fix the Desktop focus button class collision that hid the canvas docking button, and align dock button labels with canvas terminology.
175 lines
3.6 KiB
CSS
175 lines
3.6 KiB
CSS
.modal.surface-modal-parked,
|
|
.modal.modal-surface-parked {
|
|
display: block;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.modal.surface-modal-parked .modal-inner,
|
|
.modal.modal-surface-parked .modal-inner {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.modal.surface-floating,
|
|
.modal.modal-floating {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.modal.surface-floating .modal-inner,
|
|
.modal.modal-floating .modal-inner {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.surface-switcher,
|
|
.modal-surface-switcher {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: 34px;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.surface-modal-actions {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.surface-modal-action-group {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.surface-modal-action-group[hidden],
|
|
.surface-modal-action-separator[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.surface-modal-action-separator {
|
|
display: block;
|
|
flex: 0 0 1px;
|
|
width: 1px;
|
|
height: 20px;
|
|
margin: 0 5px;
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--color-border) 72%, transparent);
|
|
}
|
|
|
|
.surface-modal-new-action {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.surface-dock-button,
|
|
.surface-button,
|
|
.modal-dock-button,
|
|
.modal-surface-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 34px;
|
|
height: 34px;
|
|
min-width: 34px;
|
|
min-height: 34px;
|
|
padding: 0;
|
|
border: 1px solid transparent;
|
|
border-radius: 7px;
|
|
background: transparent;
|
|
color: var(--color-text);
|
|
cursor: pointer;
|
|
opacity: 0.72;
|
|
transition: background-color 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
|
|
}
|
|
|
|
.surface-dock-button:hover,
|
|
.surface-button:hover,
|
|
.surface-button.is-active,
|
|
.modal-dock-button:hover,
|
|
.modal-surface-button:hover,
|
|
.modal-surface-button.is-active {
|
|
opacity: 1;
|
|
border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
|
|
background: color-mix(in srgb, var(--color-background-hover) 72%, transparent);
|
|
}
|
|
|
|
.surface-dock-button .material-symbols-outlined,
|
|
.surface-button .material-symbols-outlined,
|
|
.modal-dock-button .material-symbols-outlined,
|
|
.modal-surface-button .material-symbols-outlined {
|
|
font-size: 19px;
|
|
}
|
|
|
|
.surface-modal-new-button {
|
|
appearance: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
height: 34px;
|
|
min-height: 34px;
|
|
padding: 0 9px 0 8px;
|
|
border: 1px solid transparent;
|
|
border-radius: 7px;
|
|
background: transparent;
|
|
color: var(--color-text);
|
|
cursor: pointer;
|
|
font: inherit;
|
|
font-size: 12px;
|
|
font-weight: 750;
|
|
letter-spacing: 0;
|
|
line-height: 1;
|
|
opacity: 0.82;
|
|
white-space: nowrap;
|
|
transition: background-color 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
|
|
}
|
|
|
|
.surface-modal-new-button:hover:not(:disabled),
|
|
.surface-modal-new-action.is-open .surface-modal-new-button {
|
|
opacity: 1;
|
|
border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
|
|
background: color-mix(in srgb, var(--color-background-hover) 72%, transparent);
|
|
}
|
|
|
|
.surface-modal-new-button:disabled {
|
|
cursor: default;
|
|
opacity: 0.45;
|
|
}
|
|
|
|
.surface-modal-new-button .material-symbols-outlined {
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
.surface-modal-actions,
|
|
.surface-modal-action-group {
|
|
gap: 3px;
|
|
}
|
|
|
|
.surface-modal-action-separator {
|
|
margin: 0 3px;
|
|
}
|
|
|
|
.surface-modal-new-button span:not(.material-symbols-outlined) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.surface-image,
|
|
.modal-surface-image {
|
|
display: block;
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 6px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.surface-resize-handle {
|
|
position: absolute;
|
|
touch-action: none;
|
|
}
|