add synchronized dual-display workbench
This commit is contained in:
Jens
@@ -1990,6 +1990,223 @@ button.overview-command-card { cursor: pointer; }
|
||||
.context-health { min-width: auto; border: 0; padding-inline: 0.45rem; background: transparent; box-shadow: none; }
|
||||
.context-account { border-color: var(--gi-line); box-shadow: none; }
|
||||
|
||||
/* Synchronized dual-display workbench */
|
||||
.secondary-display-launch {
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
gap: 0.45rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 2.35rem;
|
||||
border: 1px solid var(--gi-line);
|
||||
border-radius: 999px;
|
||||
padding: 0.45rem 0.75rem;
|
||||
background: var(--gi-surface);
|
||||
color: var(--gi-ink-700);
|
||||
font: inherit;
|
||||
font-size: var(--gi-text-2xs);
|
||||
font-weight: 750;
|
||||
cursor: pointer;
|
||||
transition: border-color var(--gi-dur-2) var(--gi-ease), background var(--gi-dur-2) var(--gi-ease), color var(--gi-dur-2) var(--gi-ease);
|
||||
}
|
||||
|
||||
.secondary-display-launch svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.secondary-display-launch:hover,
|
||||
.secondary-display-launch:focus-visible {
|
||||
border-color: var(--gi-brand-400);
|
||||
background: var(--gi-brand-50);
|
||||
color: var(--gi-brand-800);
|
||||
}
|
||||
|
||||
.secondary-display-launch-active {
|
||||
border-color: var(--gi-brand-600);
|
||||
background: var(--gi-brand-800);
|
||||
color: #fff;
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--gi-brand-500) 14%, transparent);
|
||||
}
|
||||
|
||||
.secondary-display-launch-active:hover,
|
||||
.secondary-display-launch-active:focus-visible {
|
||||
border-color: var(--gi-brand-700);
|
||||
background: var(--gi-brand-700);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.secondary-display-error {
|
||||
display: flex;
|
||||
gap: 0.55rem;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #f2c8c2;
|
||||
padding: 0.55rem 0.9rem;
|
||||
background: #fff4f2;
|
||||
color: #8b2f25;
|
||||
font-size: var(--gi-text-xs);
|
||||
}
|
||||
|
||||
.secondary-display-error svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.secondary-display-body {
|
||||
min-width: 420px;
|
||||
min-height: 100dvh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background: var(--gi-canvas);
|
||||
color: var(--gi-ink-900);
|
||||
}
|
||||
|
||||
.secondary-display-shell {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
width: 100vw;
|
||||
height: 100dvh;
|
||||
background: var(--gi-canvas);
|
||||
}
|
||||
|
||||
.secondary-display-header {
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
min-height: 4.5rem;
|
||||
border-bottom: 1px solid var(--gi-line);
|
||||
padding: 0.65rem 0.85rem;
|
||||
background: color-mix(in srgb, var(--gi-surface) 96%, transparent);
|
||||
box-shadow: 0 8px 24px rgba(5, 46, 43, 0.06);
|
||||
}
|
||||
|
||||
.secondary-display-brand {
|
||||
display: flex;
|
||||
gap: 0.65rem;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.secondary-display-brand img {
|
||||
width: 2.35rem;
|
||||
height: 2.35rem;
|
||||
}
|
||||
|
||||
.secondary-display-brand span {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.secondary-display-brand small {
|
||||
color: var(--gi-brand-600);
|
||||
font-size: 0.58rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.09em;
|
||||
}
|
||||
|
||||
.secondary-display-brand strong {
|
||||
overflow: hidden;
|
||||
font-family: var(--gi-font-display);
|
||||
font-size: 1rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.secondary-display-status {
|
||||
display: inline-flex;
|
||||
gap: 0.4rem;
|
||||
align-items: center;
|
||||
border-radius: 999px;
|
||||
padding: 0.45rem 0.65rem;
|
||||
background: var(--gi-brand-50);
|
||||
color: var(--gi-brand-800);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.secondary-display-status i {
|
||||
width: 0.48rem;
|
||||
height: 0.48rem;
|
||||
border-radius: 50%;
|
||||
background: var(--gi-accent-500);
|
||||
box-shadow: 0 0 0 4px color-mix(in srgb, var(--gi-accent-500) 15%, transparent);
|
||||
}
|
||||
|
||||
.secondary-display-close {
|
||||
min-height: 2.3rem;
|
||||
border: 1px solid var(--gi-line);
|
||||
border-radius: var(--gi-radius-md);
|
||||
padding: 0.45rem 0.65rem;
|
||||
background: var(--gi-surface);
|
||||
color: var(--gi-ink-700);
|
||||
font: inherit;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.secondary-display-close:hover,
|
||||
.secondary-display-close:focus-visible {
|
||||
border-color: var(--gi-brand-400);
|
||||
color: var(--gi-brand-800);
|
||||
}
|
||||
|
||||
.secondary-display-content {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
padding: 0.85rem;
|
||||
}
|
||||
|
||||
.secondary-display-content > .geo-results-panel,
|
||||
.secondary-display-content > .geo-results-panel.geo-results-panel-open {
|
||||
position: static !important;
|
||||
inset: auto !important;
|
||||
display: flex;
|
||||
width: 100% !important;
|
||||
max-width: none !important;
|
||||
height: auto !important;
|
||||
max-height: none !important;
|
||||
min-height: calc(100dvh - 6.2rem);
|
||||
overflow: visible !important;
|
||||
border: 1px solid var(--gi-line) !important;
|
||||
border-radius: var(--gi-radius-lg) !important;
|
||||
background: var(--gi-surface) !important;
|
||||
box-shadow: var(--gi-shadow-sm) !important;
|
||||
visibility: visible !important;
|
||||
opacity: 1 !important;
|
||||
pointer-events: auto !important;
|
||||
transform: none !important;
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
.secondary-display-content .geo-results-panel > .geo-panel-heading {
|
||||
position: sticky;
|
||||
z-index: 4;
|
||||
top: -0.85rem;
|
||||
border-bottom: 1px solid var(--gi-line);
|
||||
background: color-mix(in srgb, var(--gi-surface) 96%, transparent);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.workbench-shell-dual-display .geo-map-stage {
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.secondary-display-launch span { display: none; }
|
||||
.secondary-display-launch { width: 2.5rem; padding-inline: 0; }
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.secondary-display-header { grid-template-columns: minmax(0, 1fr) auto; }
|
||||
.secondary-display-status { display: none; }
|
||||
}
|
||||
|
||||
.geo-explorer-layout,
|
||||
.workbench-shell-guest .geo-explorer-layout {
|
||||
grid-template-columns: clamp(18rem, 18vw, 22rem) minmax(0, 1fr);
|
||||
@@ -2092,4 +2309,4 @@ button.overview-command-card { cursor: pointer; }
|
||||
.geo-explorer-layout, .workbench-shell-guest .geo-explorer-layout { grid-template-rows: 15rem minmax(25rem, 62vh); }
|
||||
.geo-theme-panel { max-height: 15rem; }
|
||||
.geo-theme-list { max-height: 7.2rem; min-height: 4.75rem; }
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user