src/ui/supergrok-vps.css

Rama main · réplica de lectura del repositorio original.

/* SuperGrok on your VPS. Components come from relmio-ui.css; this file only
   lays out the route wizard. Kit tokens only. */

/* One step panel at a time. supergrok-vps.js marks the current one. */
.route-content > .route-panel:not([data-current]) {
  display: none;
}

.route-form {
  display: contents;
}

/* Step headings take programmatic focus when the step changes; they are not controls. */
.route-panel h2[tabindex="-1"]:focus {
  outline: none;
}

/* Active progress stays with the stepper on phones. A blocking error, then
   safety, follow the panel, while the desktop rail retains its two-row layout. */
@media (min-width: 64rem) {
  .route-layout {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .route-rail {
    grid-area: 1 / 1;
  }

  .route-content {
    grid-area: 1 / 2 / 3 / 3;
  }

  .route-rail-foot {
    grid-area: 2 / 1;
    align-self: start;
  }
}

.route-rail-foot {
  display: flex;
  flex-direction: column;
  gap: var(--rm-space-4);
  min-width: 0;
}

.route-intro {
  display: grid;
  gap: var(--rm-space-1);
}

.route-steps .rm-stepper__link {
  cursor: default;
}

.route-steps .rm-stepper__link:hover {
  background: none;
}

.route-safety {
  display: grid;
  gap: var(--rm-space-2);
  margin: 0;
  padding: var(--rm-space-3) var(--rm-space-4);
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-radius-md);
  background: var(--rm-surface-muted);
  list-style: none;
}

.route-safety .rm-status {
  align-items: flex-start;
  line-height: 1.4;
}

.route-safety .rm-status__dot {
  margin-top: 0.375em;
}

.route-progress {
  display: grid;
  gap: var(--rm-space-2);
}

.route-progress__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rm-space-3);
}

.route-progress__label {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.route-status,
.route-error {
  overflow-wrap: anywhere;
}

/* The progress card repeats the running step; an error replaces stale status. */
.supergrok-vps[data-operation-busy="true"] .route-status,
.supergrok-vps:has(.route-error:not([hidden])) .route-status {
  display: none;
}

.route-error::before {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  background-color: var(--rm-danger);
  content: "";
  -webkit-mask: var(--rm-icon-alert) center / contain no-repeat;
  mask: var(--rm-icon-alert) center / contain no-repeat;
}

/* Panel bodies: a main column and a quieter side column, chosen by the panel's
   own width. The server form stays in one column until the panel is wide,
   because its fields need the width more than the notes beside them. */
.route-panel .rm-panel__body {
  container-type: inline-size;
}

.route-columns {
  display: grid;
  align-items: start;
  gap: var(--rm-space-3) var(--rm-space-6);
  min-width: 0;
}

@container (min-width: 36rem) {
  .route-columns:not(.route-columns--form) {
    grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.72fr);
  }
}

@container (min-width: 52rem) {
  .route-columns--form {
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.6fr);
  }
}

.route-main,
.route-aside {
  display: flex;
  flex-direction: column;
  gap: var(--rm-space-3);
  min-width: 0;
}

.route-main {
  container-type: inline-size;
}

/* Server address, port and the identity check share one row when there is room. */
.route-target {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5rem;
  align-items: end;
  gap: var(--rm-space-3);
}

.route-target__scan {
  grid-column: 1 / -1;
  justify-self: start;
}

@container (min-width: 30rem) {
  .route-target {
    grid-template-columns: minmax(0, 1fr) 6.5rem auto;
  }

  .route-target__scan {
    grid-column: auto;
    min-height: 2.75rem;
  }
}

.route-signin {
  --rm-field-min: 10rem;
}

.route-fingerprint {
  font-size: var(--rm-text-sm);
}

/* The session line carries the SSH fingerprint, which has no spaces. */
.route-session {
  overflow-wrap: anywhere;
}

.route-session:empty,
.route-models:empty,
.route-state:empty {
  display: none;
}

/* Review */
.route-review-list {
  grid-template-columns: minmax(6.5rem, max-content) minmax(0, 1fr);
}

.route-summary {
  color: var(--rm-ink-muted);
  font-size: var(--rm-text-md);
  overflow-wrap: anywhere;
}

/* Sign in and connect */
.route-login {
  display: grid;
  align-items: center;
  gap: var(--rm-space-3) var(--rm-space-6);
  padding: var(--rm-space-4);
  border: 1px solid var(--rm-accent-line);
  border-radius: var(--rm-radius-lg);
  background: var(--rm-accent-soft);
}

@media (min-width: 48rem) {
  .route-login {
    grid-template-areas: "text code" "note code";
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .route-login__text {
    grid-area: text;
  }

  .route-login__code {
    grid-area: code;
  }

  .route-login__note {
    grid-area: note;
  }
}

/* On narrow screens the pending sign-in box replaces the step description. */
@media (max-width: 63.99rem) {
  #settings-panel:has(#device-link:not([hidden])) .rm-panel__heading > p {
    display: none;
  }
}

/* The n8n credential values read across one row, label above value. */
.route-values {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--rm-space-3) var(--rm-space-6);
}

.route-values > div {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
}

.route-values dd {
  overflow-wrap: anywhere;
}

.route-login__text,
.route-login__code {
  display: grid;
  gap: var(--rm-space-1);
  min-width: 0;
}

.route-login__code {
  justify-items: start;
  gap: var(--rm-space-2);
}

.route-device-code {
  color: var(--rm-accent-ink);
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-2xl);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.route-device-code:empty {
  display: none;
}

/* The device code is the whole task while it is pending. */
.route-login:not(:has(#device-link:not([hidden]))) .route-login__note {
  display: none;
}

.route-secret {
  display: flex;
  gap: var(--rm-space-2);
}

.route-secret .rm-icon-button {
  width: 2.75rem;
  height: 2.75rem;
}