/* Window frame, title bar, resize handles, dialogs, menu bars, popups. */
#windows { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#windows > * { pointer-events: auto; }
.win {
position: absolute;
background: var(--face);
padding: 3px;
display: flex;
flex-direction: column;
min-width: 120px;
min-height: 60px;
box-shadow:
inset -1px -1px var(--dark),
inset 1px 1px var(--hilite),
inset -2px -2px var(--shadow),
inset 2px 2px var(--face-lt);
}
.win.active {
box-shadow:
inset -1px -1px var(--dark),
inset 1px 1px var(--hilite),
inset -2px -2px var(--shadow),
inset 2px 2px var(--face-lt),
1px 1px 0 rgba(0, 0, 0, 0.15);
}
.win-title {
height: 18px;
flex: 0 0 18px;
display: flex;
align-items: center;
gap: 3px;
padding: 0 2px 0 3px;
background: linear-gradient(90deg, var(--title-in-1), var(--title-in-2));
color: var(--title-text-in);
font-weight: bold;
cursor: default;
}
.win.active .win-title { background: linear-gradient(90deg, var(--title-1), var(--title-2)); color: var(--title-text); }
.win-title .win-title-icon { width: 16px; height: 16px; flex: 0 0 16px; display: block; }
.win-title .win-title-icon svg { display: block; width: 16px; height: 16px; }
.win-title-text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-title-buttons { display: flex; gap: 2px; flex: 0 0 auto; }
.win-btn {
width: 16px; height: 14px;
border: none; padding: 0;
background: var(--face);
display: grid; place-items: center;
cursor: default;
box-shadow:
inset -1px -1px var(--dark),
inset 1px 1px var(--hilite),
inset -2px -2px var(--shadow),
inset 2px 2px var(--face-lt);
}
.win-btn:active { box-shadow: inset 1px 1px var(--dark), inset -1px -1px var(--hilite), inset 2px 2px var(--shadow), inset -2px -2px var(--face-lt); }
.win-btn:disabled { opacity: 0.5; }
.win-btn svg { display: block; }
.win-btn.close { margin-left: 2px; }
.win-menubar { flex: 0 0 auto; display: flex; padding: 1px 0 2px; }
.win-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.win-content { flex: 1 1 auto; min-height: 0; position: relative; display: flex; flex-direction: column; }
.win.maximized { padding: 3px; }
.win.dragging, .win.resizing { transition: none; }
.win.minimized { display: none; }
/* Resize handles (8-way) sit just inside the window frame. */
.win-rz { position: absolute; z-index: 5; }
.win-rz.n { top: -1px; left: 6px; right: 6px; height: 4px; cursor: ns-resize; }
.win-rz.s { bottom: -1px; left: 6px; right: 6px; height: 4px; cursor: ns-resize; }
.win-rz.w { left: -1px; top: 6px; bottom: 6px; width: 4px; cursor: ew-resize; }
.win-rz.e { right: -1px; top: 6px; bottom: 6px; width: 4px; cursor: ew-resize; }
.win-rz.nw { top: -1px; left: -1px; width: 8px; height: 8px; cursor: nwse-resize; }
.win-rz.ne { top: -1px; right: -1px; width: 8px; height: 8px; cursor: nesw-resize; }
.win-rz.sw { bottom: -1px; left: -1px; width: 8px; height: 8px; cursor: nesw-resize; }
.win-rz.se { bottom: -1px; right: -1px; width: 8px; height: 8px; cursor: nwse-resize; }
.win.maximized .win-rz { display: none; }
/* ------------------------------------------------------------- menu bars */
.menu-root { display: flex; }
.menu-title {
padding: 2px 7px;
font: 11px var(--font);
background: none; border: none; color: var(--text);
cursor: default;
}
.menu-title.open { background: var(--sel); color: var(--sel-text); }
.menu-title:disabled { color: var(--text-dis); text-shadow: 1px 1px 0 var(--hilite); }
.menu-pop {
position: fixed;
z-index: 8000;
min-width: 120px;
background: var(--face);
padding: 2px;
box-shadow:
inset -1px -1px var(--dark),
inset 1px 1px var(--hilite),
inset -2px -2px var(--shadow),
inset 2px 2px var(--face-lt),
2px 2px 3px rgba(0, 0, 0, 0.35);
}
.menu-item {
display: flex; align-items: center; gap: 8px;
padding: 3px 20px 3px 22px;
font: 11px var(--font);
white-space: nowrap;
position: relative;
cursor: default;
}
.menu-item .mi-icon { position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; display: block; }
.menu-item .mi-icon svg { display: block; width: 16px; height: 16px; }
.menu-item .mi-label { flex: 1 1 auto; }
.menu-item .mi-accel { color: inherit; padding-left: 16px; }
.menu-item .mi-arrow { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; background: url("data:image/svg+xml;utf8,") no-repeat center; }
.menu-item.hot { background: var(--sel); color: var(--sel-text); }
.menu-item.hot .mi-arrow { background-image: url("data:image/svg+xml;utf8,"); }
.menu-item.disabled { color: var(--text-dis); text-shadow: 1px 1px 0 var(--hilite); }
.menu-item.checked { position: relative; }
.menu-item.checked::before {
content: ""; position: absolute; left: 7px; top: 6px;
width: 3px; height: 6px; border: solid currentColor; border-width: 0 2px 2px 0;
transform: rotate(40deg);
}
.menu-item.radio::before {
content: ""; position: absolute; left: 7px; top: 7px;
width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.menu-sep { height: 2px; margin: 3px 2px; box-shadow: inset 0 1px var(--shadow), inset 0 -1px var(--hilite); }
/* --------------------------------------------------------------- dialogs */
.win.dialog .win-body { padding: 0; }
.dlg {
padding: 12px;
display: flex;
flex-direction: column;
gap: 12px;
min-height: 0;
}
.dlg-message { display: flex; gap: 14px; align-items: flex-start; }
.dlg-message .dlg-icon { width: 32px; height: 32px; flex: 0 0 32px; }
.dlg-message .dlg-icon svg { width: 32px; height: 32px; display: block; }
.dlg-text { flex: 1 1 auto; line-height: 1.45; padding-top: 2px; white-space: pre-wrap; word-break: break-word; }
.dlg-buttons { display: flex; justify-content: center; gap: 8px; }
.dlg-buttons.right { justify-content: flex-end; }
.dlg-field { display: flex; align-items: center; gap: 8px; }
.dlg-field > label { width: 90px; flex: 0 0 90px; text-align: right; }
.dlg-field > input[type="text"] { flex: 1 1 auto; }