57 lines
4.3 KiB
CSS
57 lines
4.3 KiB
CSS
/* One expanded procedure at a time; completed steps become editable summaries. */
|
|
.issue-flow-progressive .issue-guided-form { padding: 0; border: 0; }
|
|
.issue-wizard-fields { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
|
|
.issue-procedure-step { min-width: 0; border-bottom: 1px solid var(--ops-line-soft); }
|
|
.issue-procedure-step:last-child { border-bottom: 0; }
|
|
.issue-procedure-step.is-current { padding: 16px 0 8px; }
|
|
.issue-procedure-step .issue-flow-heading { align-items: center; margin-bottom: 18px; }
|
|
.issue-procedure-step h2 { scroll-margin-top: 130px; }
|
|
.issue-procedure-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; animation: issue-step-enter 150ms ease-out; }
|
|
.issue-flow-progressive .issue-category-card { min-height: 122px; gap: 6px; padding: 14px; }
|
|
.issue-flow-progressive .issue-media-finder { padding: 0; border: 0; background: transparent; }
|
|
.page .issue-flow-progressive .issue-step-summary {
|
|
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
|
|
gap: 12px; width: 100%; padding: 10px 0; border: 0 !important;
|
|
background: transparent !important; text-align: left; color: var(--ops-text) !important;
|
|
box-shadow: none; text-transform: none;
|
|
}
|
|
.issue-step-summary .issue-step-number { width: 28px; height: 28px; color: var(--ops-primary-2); }
|
|
.issue-step-summary-copy { display: grid; gap: 3px; min-width: 0; }
|
|
.issue-step-summary-copy small { color: var(--ops-muted); font-size: 11px; font-weight: 500; }
|
|
.issue-step-summary-copy strong { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.issue-step-change { color: var(--ops-primary-2); font-size: 12px; }
|
|
.issue-step-summary:hover .issue-step-change { text-decoration: underline; }
|
|
.issue-procedure-actions { display: flex; grid-column: 1 / -1; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 10px; }
|
|
.issue-procedure-actions button { min-height: 44px; }
|
|
.page .issue-procedure-actions > button:not(.ghost-button) {
|
|
background: #c7bdff !important; border-color: #c7bdff !important; color: #1c172c !important;
|
|
}
|
|
.issue-procedure-actions button:disabled { opacity: .4; }
|
|
.issue-selection-count { margin-right: auto; color: var(--ops-muted); font-size: 12px; }
|
|
.issue-flow-progressive .issue-choice-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.issue-flow-progressive .issue-choice-row button { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 48px; }
|
|
.issue-device-check { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px; border: 1px solid currentColor; border-radius: 6px; }
|
|
/* Legacy global button colours are !important; scoped overrides keep toggles visible. */
|
|
.page .issue-flow-progressive button[aria-pressed='true'] {
|
|
border-color: #c7bdff !important; background: #373147 !important; color: #f5f0ff !important;
|
|
box-shadow: inset 0 0 0 1px #c7bdff;
|
|
}
|
|
.issue-device-feedback { margin: 4px 0 0; color: var(--ops-muted); font-size: 12px; line-height: 1.5; }
|
|
.issue-flow-progressive .issue-resolution-card { grid-template-columns: minmax(0, 1fr) auto; padding: 0; border: 0; }
|
|
.issue-flow-progressive .issue-resolution-card h3 { margin: 0; font-size: 19px; line-height: 1.4; }
|
|
.issue-flow-progressive .issue-resolution-card p { margin-top: 8px; font-size: 13px; }
|
|
.issue-flow-progressive .status-banner { display: grid; gap: 10px; }
|
|
.issue-flow-progressive .status-banner button { justify-self: start; }
|
|
@keyframes issue-step-enter { from { opacity: .5; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
|
|
@media (max-width: 680px) {
|
|
.issue-flow-progressive .issue-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.issue-flow-progressive .issue-category-card { min-height: 112px; padding: 12px; }
|
|
.issue-flow-progressive .issue-category-card p { display: none; }
|
|
.issue-flow-progressive .issue-category-card strong { font-size: 13px; }
|
|
.issue-procedure-step .issue-flow-heading h2 { font-size: 19px; }
|
|
.issue-flow-progressive .issue-step-summary { gap: 8px; }
|
|
.issue-flow-progressive .issue-choice-row button { font-size: 12px; padding: 10px; }
|
|
.issue-flow-progressive .issue-resolution-card { grid-template-columns: minmax(0, 1fr); }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) { .issue-procedure-content { animation: none; } }
|