Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
9.9 kB · 476 lines
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477@import "octane-kumo/styles/standalone";* { box-sizing: border-box;}body { margin: 0; background: var(--color-kumo-canvas); color: var(--text-color-kumo-default); font-family: Inter, system-ui, sans-serif; font-size: 14px; line-height: 1.6;}.onboarding { overflow-wrap: anywhere;}.onboarding a { color: var(--text-color-kumo-link); text-decoration: none;}.onboarding a:hover { text-decoration: underline;}.control-header { position: sticky; top: 0; z-index: 10; height: 3rem; display: flex; align-items: center; gap: 1.5rem; padding: 0 1.5rem; border-bottom: 1px solid var(--color-kumo-line); background: var(--color-kumo-base);}.onboarding .control-brand { display: flex; align-items: center; gap: 0.625rem; color: var(--text-color-kumo-default); font-weight: 600; text-decoration: none;}.control-brand-mark { width: 1.75rem; height: auto;}.control-header-label { color: var(--text-color-kumo-subtle); padding-left: 1.5rem; border-left: 1px solid var(--color-kumo-line);}.control-header-actions { display: flex; margin-left: auto;}.control-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); align-items: start;}.control-nav { position: sticky; top: 3rem; display: grid; align-content: start; gap: 0.25rem; min-height: calc(100dvh - 3rem); padding: 1.25rem 0.75rem; border-right: 1px solid var(--color-kumo-line); background: var(--color-kumo-base);}.control-nav p { padding: 0.375rem 0.75rem; color: var(--text-color-kumo-subtle);}.control-nav a,.control-nav-current { padding: 0.5rem 0.75rem; border-radius: 0.375rem;}.onboarding .control-nav a { color: var(--text-color-kumo-default); text-decoration: none;}.control-nav a:hover,.control-nav a:focus-visible,.control-nav-current { background: var(--color-kumo-tint);}.control-nav-current { font-weight: 500;}.onboarding main { width: 100%; min-width: 0; max-width: 76rem; margin: 0 auto; padding: 2rem; scroll-margin-top: 4.5rem;}.control-page-heading { display: grid; gap: 0.375rem; padding-bottom: 1.5rem; margin-bottom: 2rem; border-bottom: 1px solid var(--color-kumo-line);}.control-page-heading > p { color: var(--text-color-kumo-subtle); max-width: 52rem;}.control-breadcrumb { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; color: var(--text-color-kumo-subtle);}.control-content { display: grid; gap: 3rem; min-width: 0;}.control-detail { max-width: 52rem;}.control-section { display: grid; gap: 1rem; min-width: 0; scroll-margin-top: 4.5rem;}.onboarding h1,.onboarding h2,.onboarding h3,.onboarding p { margin: 0;}.onboarding h1 { font-size: 24px; font-weight: 600;}.onboarding h2 { font-size: 18px; font-weight: 600;}.onboarding h3 { font-size: 16px; font-weight: 600;}.onboarding p,.onboarding button,.onboarding label,.onboarding a,.onboarding span,.onboarding summary { font-size: 14px;}.onboarding strong { font-weight: 500;}.intro { display: grid; gap: 0.375rem;}.intro > p,.permissions p { color: var(--text-color-kumo-subtle);}.connect-card,.installation-card { padding: 1.25rem 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; min-width: 0;}.connect-card > .intro:first-child,.installation-card > .intro:first-child { margin: -1.25rem -1.5rem 0; padding: 1rem 1.5rem; border-bottom: 1px solid var(--color-kumo-line); background: var(--color-kumo-elevated);}.onboarding ul { list-style: none; padding: 0; margin: 0; display: grid;}.onboarding li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--color-kumo-line);}.onboarding li:last-child { border-bottom: 0;}.onboarding li > div { min-width: 0;}.account-list,.installation-list { border: 1px solid var(--color-kumo-line); border-radius: 0.375rem; background: var(--color-kumo-base); overflow: hidden;}.onboarding li[data-selected="true"] { background: var(--color-kumo-tint);}.account-name { font-weight: 500;}.account-id,.installation-id { color: var(--text-color-kumo-subtle);}.installation-badge { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 0.25rem; background: var(--color-kumo-tint); color: var(--text-color-kumo-subtle);}.installation-badge[data-status="ready"] { background: var(--color-kumo-success-tint); color: var(--text-color-kumo-success);}.installation-badge[data-status="failed"] { background: var(--color-kumo-danger-tint); color: var(--text-color-kumo-danger);}.onboarding [role="alert"] { color: var(--text-color-kumo-danger);}.actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;}.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;}.installation-create { padding: 1rem 1.25rem; border: 1px dashed var(--color-kumo-line); border-radius: 0.5rem; gap: 0.75rem;}.installation-intro,.installation-summary,.progress-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 1.5rem;}.installation-intro > .intro { flex: 1 1 16rem; min-width: 0;}.installation-progress { --progress-color: var(--color-kumo-brand); display: grid; gap: 0.75rem;}.installation-progress[data-status="ready"] { --progress-color: var(--text-color-kumo-success);}.installation-progress[data-status="failed"] { --progress-color: var(--text-color-kumo-danger);}.progress-heading { color: var(--text-color-kumo-subtle); gap: 0.25rem 1rem;}.progress-label { color: var(--text-color-kumo-default); font-weight: 500;}.installation-progress-bar { display: block; appearance: none; width: 100%; height: 0.5rem; border: 0; border-radius: 999px; overflow: hidden; background: var(--color-kumo-fill); color: var(--progress-color); accent-color: var(--progress-color);}.installation-progress-bar::-webkit-progress-bar { background: var(--color-kumo-fill); border-radius: 999px;}.installation-progress-bar::-webkit-progress-value { background: var(--progress-color); border-radius: 999px;}.installation-progress-bar::-moz-progress-bar { background: var(--progress-color); border-radius: 999px;}.installation-progress-bar:indeterminate { background: linear-gradient( to right, transparent, var(--progress-color), transparent ) var(--color-kumo-fill); background-size: 50% 100%; background-repeat: no-repeat; animation: installation-progress 1.5s ease-in-out infinite alternate;}.installation-progress-bar:indeterminate::-webkit-progress-bar { background: transparent;}@keyframes installation-progress { from { background-position: 0% 0; } to { background-position: 100% 0; }}@media (prefers-reduced-motion: reduce) { .installation-progress-bar:indeterminate { animation: none; background-position: center; }}.progress-details > summary { color: var(--text-color-kumo-subtle);}.progress-details[open] > summary { margin-bottom: 1rem;}.onboarding .progress { list-style: none; display: grid; gap: 0.75rem; padding: 0; margin: 0;}.onboarding .progress li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0.75rem; border: 0; padding: 0; align-items: start;}.step-state { color: var(--text-color-kumo-subtle);}.progress [data-state="complete"] .step-state { color: var(--text-color-kumo-success);}.progress [data-state="stopped"] .step-state { color: var(--text-color-kumo-danger);}.progress [aria-current="step"] { font-weight: 500;}.progress [aria-current="step"] .step-state { color: var(--text-color-kumo-link);}.progress [aria-current="step"][data-state="stopped"] .step-state { color: var(--text-color-kumo-danger);}.installation-card > .actions:empty { display: none;}.onboarding .open-flarebot { text-decoration: underline; text-underline-offset: 3px; font-weight: 500;}.recovery { display: grid; padding-top: 1rem; border-top: 1px solid var(--color-kumo-line);}.onboarding summary { cursor: pointer;}.onboarding details p { margin: 0.75rem 0;}.onboarding :focus-visible { outline: 2px solid var(--color-kumo-brand); outline-offset: 3px;}.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 20; padding: 0.5rem 0.75rem; background: var(--color-kumo-base);}.skip-link:focus { top: 0.5rem;}.domain-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem;}.domain-form input,.domain-form select { width: 100%; min-width: 0; padding: 0.625rem 0.75rem; border: 1px solid var(--color-kumo-line); border-radius: 0.375rem; background: var(--color-kumo-canvas); color: var(--text-color-kumo-default); font: inherit;}@media (max-width: 900px) { .control-layout { grid-template-columns: minmax(0, 1fr); } .control-nav { position: static; display: flex; flex-wrap: wrap; min-height: 0; padding: 0.75rem 1rem; border-right: 0; border-bottom: 1px solid var(--color-kumo-line); } .control-nav p { width: 100%; }}@media (max-width: 600px) { .control-header { padding: 0 1rem; gap: 0.75rem; } .control-header-label { padding-left: 0.75rem; } .onboarding main { padding: 1.5rem 1rem; } .connect-card, .installation-card { padding: 1rem; } .connect-card > .intro:first-child, .installation-card > .intro:first-child { margin: -1rem -1rem 0; padding: 0.875rem 1rem; } .section-heading { flex-direction: column; } .onboarding li { align-items: flex-start; flex-direction: column; }}