Fix UI visibility, form CSS, and quick-connect modal
- Fix drawer/modal backdrop class names and is-visible transitions - Add protocol tab, settings tab, and command palette CSS - Add form-section-content as CSS alias for form-section-body - Add missing form CSS: form-hint, form-toggle, jump-host-row, preset-row - Add btn-outline, form-input-sm, form-select-sm styles - Replace window.prompt() with custom modal for WKWebView compatibility - Remove diagnostic banner and instrumentation
This commit is contained in:
@@ -132,6 +132,18 @@
|
||||
.btn-group {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
/* Outline button — transparent background, subtle border */
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.btn-outline:hover {
|
||||
background: var(--surface-2);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-group .btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@@ -97,12 +97,14 @@
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.form-section-body {
|
||||
.form-section-body,
|
||||
.form-section-content {
|
||||
padding: var(--space-4);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form-section.is-open .form-section-body {
|
||||
.form-section.is-open .form-section-body,
|
||||
.form-section.is-open .form-section-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -437,3 +439,76 @@
|
||||
color: var(--text-tertiary);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------
|
||||
Form hint — inline help text below fields
|
||||
----------------------------------------------------------------------- */
|
||||
.form-hint {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-tertiary);
|
||||
margin-top: var(--space-1);
|
||||
line-height: var(--leading-relaxed);
|
||||
}
|
||||
|
||||
.form-hint.secret-error {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------
|
||||
Toggle wrapper — label + toggle switch in a row
|
||||
----------------------------------------------------------------------- */
|
||||
.form-toggle-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-1) 0;
|
||||
}
|
||||
|
||||
.form-toggle-label {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------
|
||||
Jump host rows
|
||||
----------------------------------------------------------------------- */
|
||||
.jump-hosts-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.jump-host-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 80px 1fr auto;
|
||||
gap: var(--space-2);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------
|
||||
Payload preset rows
|
||||
----------------------------------------------------------------------- */
|
||||
.payload-presets-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.preset-row {
|
||||
display: grid;
|
||||
grid-template-columns: 120px 1fr 100px auto;
|
||||
gap: var(--space-2);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------
|
||||
Small / compact form controls — used inside repeater rows
|
||||
----------------------------------------------------------------------- */
|
||||
.form-input-sm,
|
||||
.form-select-sm {
|
||||
font-size: var(--text-xs);
|
||||
padding: var(--space-1) var(--space-2);
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
@@ -233,6 +233,183 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Protocol selector tabs inside the drawer */
|
||||
.drawer-protocol-tabs {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
padding: 0 var(--space-5);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.drawer-proto-tab {
|
||||
position: relative;
|
||||
padding: var(--space-2) var(--space-4);
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--weight-medium);
|
||||
cursor: pointer;
|
||||
letter-spacing: 0.04em;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.drawer-proto-tab:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.drawer-proto-tab.active {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.drawer-proto-tab.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: var(--space-2);
|
||||
right: var(--space-2);
|
||||
height: 2px;
|
||||
background: var(--accent);
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
/* Settings tab bar */
|
||||
.settings-tab-bar {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
padding: 0 var(--space-5);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.settings-tab {
|
||||
position: relative;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--weight-medium);
|
||||
cursor: pointer;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.settings-tab:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.settings-tab.active {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.settings-tab.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: var(--space-1);
|
||||
right: var(--space-1);
|
||||
height: 2px;
|
||||
background: var(--accent);
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.settings-body {
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
/* Command palette */
|
||||
.palette-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: var(--z-modal-backdrop);
|
||||
background: rgba(10, 10, 20, 0.50);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding-top: 20vh;
|
||||
}
|
||||
|
||||
.palette {
|
||||
width: 520px;
|
||||
max-width: calc(100vw - var(--space-8));
|
||||
max-height: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow-xl);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.palette-input {
|
||||
width: 100%;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
color: var(--text-primary);
|
||||
font-size: var(--text-base);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.palette-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--space-1) 0;
|
||||
}
|
||||
|
||||
.palette-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-2) var(--space-4);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
.palette-item:hover,
|
||||
.palette-item-active {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.palette-item-label {
|
||||
flex: 1;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.palette-item-detail {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.palette-item-shortcut {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-tertiary);
|
||||
background: var(--bg-surface);
|
||||
padding: var(--space-half) var(--space-1);
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.palette-section {
|
||||
padding: var(--space-1) var(--space-4);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--weight-semibold);
|
||||
color: var(--text-tertiary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.palette-empty {
|
||||
padding: var(--space-6) var(--space-4);
|
||||
text-align: center;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------
|
||||
Confirmation dialog
|
||||
----------------------------------------------------------------------- */
|
||||
|
||||
Reference in New Issue
Block a user