467 lines
8.3 KiB
CSS
467 lines
8.3 KiB
CSS
/* AddConnectionWizard styles */
|
|
|
|
.stepper {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 1.5rem;
|
|
padding: 1rem 1.5rem 0;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.stepDot {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
background: var(--bg-secondary, #f0f0f0);
|
|
color: var(--text-secondary, #666);
|
|
border: 2px solid var(--border-color, #ddd);
|
|
transition: background 0.2s, border-color 0.2s, color 0.2s;
|
|
}
|
|
|
|
.stepDotActive {
|
|
background: var(--primary-color, #f25843);
|
|
border-color: var(--primary-color, #f25843);
|
|
color: white;
|
|
}
|
|
|
|
.stepDotDone {
|
|
background: var(--success-color, #22c55e);
|
|
border-color: var(--success-color, #22c55e);
|
|
color: white;
|
|
}
|
|
|
|
.stepDotHidden {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.body {
|
|
padding: 1.5rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.stepContent {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
min-height: 220px;
|
|
}
|
|
|
|
.stepTitle {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin: 0;
|
|
}
|
|
|
|
.stepBody {
|
|
font-size: 0.9375rem;
|
|
color: var(--text-primary);
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
}
|
|
|
|
.stepHint {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-secondary, #666);
|
|
margin: 0;
|
|
}
|
|
|
|
/* Connector grid (Step 0) */
|
|
.connectorGrid {
|
|
display: flex;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.connectorCard {
|
|
flex: 1 1 140px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.625rem;
|
|
padding: 1.25rem 1rem;
|
|
background: var(--surface-color);
|
|
border: 2px solid var(--border-color, #ddd);
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
|
|
}
|
|
|
|
.connectorCard:hover {
|
|
border-color: var(--primary-color, #f25843);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.connectorIcon {
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
.connectorLabel {
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Consent step (Step 1) */
|
|
.consentIcon {
|
|
display: flex;
|
|
justify-content: center;
|
|
color: var(--primary-color, #f25843);
|
|
}
|
|
|
|
.consentButtons {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.consentButtonYes {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 1.25rem;
|
|
background: var(--primary-color, #f25843);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 0.9375rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.consentButtonYes:hover {
|
|
background: var(--primary-dark, #d94d3a);
|
|
}
|
|
|
|
.consentButtonNo {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 1.25rem;
|
|
background: var(--surface-color);
|
|
color: var(--text-primary);
|
|
border: 2px solid var(--border-color, #ddd);
|
|
border-radius: 8px;
|
|
font-size: 0.9375rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: border-color 0.2s, background 0.2s;
|
|
}
|
|
|
|
.consentButtonNo:hover {
|
|
border-color: var(--text-secondary, #888);
|
|
background: var(--bg-secondary, #f5f5f5);
|
|
}
|
|
|
|
/* Preferences step (Step 2) */
|
|
.prefGroup {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
padding: 0.75rem 0;
|
|
border-bottom: 1px solid var(--border-color, #eee);
|
|
}
|
|
|
|
.prefGroup:last-of-type {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.prefLabel {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
font-size: 0.9375rem;
|
|
color: var(--text-primary);
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.prefLabelRow {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
font-size: 0.9375rem;
|
|
color: var(--text-primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.prefIcon {
|
|
color: var(--text-secondary, #666);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.prefCheck {
|
|
width: 18px;
|
|
height: 18px;
|
|
cursor: pointer;
|
|
accent-color: var(--primary-color, #f25843);
|
|
}
|
|
|
|
.prefSelect {
|
|
padding: 0.375rem 0.5rem;
|
|
border: 1px solid var(--border-color, #ddd);
|
|
border-radius: 6px;
|
|
font-size: 0.875rem;
|
|
background: var(--surface-color);
|
|
color: var(--text-primary);
|
|
min-width: 200px;
|
|
}
|
|
|
|
.prefNumber {
|
|
width: 80px;
|
|
padding: 0.375rem 0.5rem;
|
|
border: 1px solid var(--border-color, #ddd);
|
|
border-radius: 6px;
|
|
font-size: 0.875rem;
|
|
background: var(--surface-color);
|
|
color: var(--text-primary);
|
|
text-align: right;
|
|
}
|
|
|
|
.prefHint {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-secondary, #666);
|
|
margin: 0;
|
|
}
|
|
|
|
/* Summary step (Step 3) */
|
|
.summary {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
border: 1px solid var(--border-color, #ddd);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.summaryRow {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.625rem 1rem;
|
|
gap: 1rem;
|
|
border-bottom: 1px solid var(--border-color, #eee);
|
|
}
|
|
|
|
.summaryRow:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.summaryKey {
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary, #666);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.summaryVal {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
font-size: 0.875rem;
|
|
color: var(--text-primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Back button (step 1 consent screen) */
|
|
.stepNavLeft {
|
|
margin-top: 0.75rem;
|
|
display: flex;
|
|
}
|
|
|
|
.navBack {
|
|
background: none;
|
|
border: none;
|
|
padding: 0.25rem 0;
|
|
font-size: 0.8125rem;
|
|
color: var(--text-secondary, #666);
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.navBack:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Cost estimate hint */
|
|
.costHint {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.625rem;
|
|
padding: 0.75rem 1rem;
|
|
background: var(--info-bg, #eff6ff);
|
|
border: 1px solid var(--info-border, #bfdbfe);
|
|
border-radius: 8px;
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.costHintIcon {
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
color: var(--info-color, #3b82f6);
|
|
}
|
|
|
|
.costHint > div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.costHintTitle {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin-bottom: 0.125rem;
|
|
}
|
|
|
|
.costTable {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.costLabel {
|
|
color: var(--text-secondary, #555);
|
|
padding-right: 1rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.costVal {
|
|
font-weight: 600;
|
|
color: var(--info-color, #1d4ed8);
|
|
}
|
|
|
|
.costRowNeut .costLabel,
|
|
.costRowNeut .costVal {
|
|
padding-top: 0.125rem;
|
|
}
|
|
|
|
.costRowNeut .costVal {
|
|
color: #b45309;
|
|
}
|
|
|
|
.costHintWarn {
|
|
font-size: 0.75rem;
|
|
color: #b45309;
|
|
font-weight: 500;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.costHintNote {
|
|
color: var(--text-secondary, #555);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
:global(.dark-theme) .costHint {
|
|
background: rgba(59, 130, 246, 0.08);
|
|
border-color: rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
:global(.dark-theme) .costVal {
|
|
color: #93c5fd;
|
|
}
|
|
|
|
:global(.dark-theme) .costRowNeut .costVal,
|
|
:global(.dark-theme) .costHintWarn {
|
|
color: #fbbf24;
|
|
}
|
|
|
|
/* Navigation */
|
|
.stepNav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: auto;
|
|
padding-top: 0.5rem;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.navBack {
|
|
padding: 0.5rem 1rem;
|
|
background: var(--surface-color);
|
|
color: var(--text-secondary, #666);
|
|
border: 1px solid var(--border-color, #ddd);
|
|
border-radius: 6px;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.navBack:hover {
|
|
background: var(--bg-secondary, #f5f5f5);
|
|
}
|
|
|
|
.navNext {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
padding: 0.5rem 1.25rem;
|
|
background: var(--primary-color, #f25843);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.navNext:hover {
|
|
background: var(--primary-dark, #d94d3a);
|
|
}
|
|
|
|
.navConnect {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
padding: 0.625rem 1.5rem;
|
|
background: var(--primary-color, #f25843);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 0.9375rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.navConnect:hover:not(:disabled) {
|
|
background: var(--primary-dark, #d94d3a);
|
|
}
|
|
|
|
.navConnect:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Dark theme */
|
|
:global(.dark-theme) .connectorCard {
|
|
background: var(--surface-color);
|
|
}
|
|
|
|
:global(.dark-theme) .prefSelect,
|
|
:global(.dark-theme) .prefNumber {
|
|
background: var(--surface-color);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
:global(.dark-theme) .summary {
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
:global(.dark-theme) .summaryRow {
|
|
border-color: var(--border-color);
|
|
}
|