src/ui/hosting.css

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

/* Hosting options. Page layout only; components come from relmio-ui.css. */

.hosting-shell {
  display: flex;
  flex-direction: column;
  gap: var(--rm-space-3);
  width: min(100% - 2 * var(--rm-gutter), var(--rm-content-width));
  margin-inline: auto;
  padding-block: var(--rm-space-4);
}

.hosting-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rm-space-2) var(--rm-space-6);
}

.hosting-head__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--rm-space-1) var(--rm-space-4);
  min-width: 0;
}

.hosting-head__state {
  max-width: 34rem;
  min-width: 0;
}

.hosting-status,
.hosting-error {
  line-height: 1.45;
}

.hosting-status {
  color: var(--rm-ink-muted);
  font-size: var(--rm-text-sm);
}

/* A failure replaces the progress line in the same slot. */
.hosting-head__state:has(> .hosting-error:not([hidden])) > .hosting-status {
  display: none;
}

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

.hosting-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.hosting-page[data-hosting-view="review"] .hosting-form {
  display: none;
}

.hosting-view .rm-panel__header {
  padding-top: var(--rm-space-4);
  padding-bottom: var(--rm-space-3);
}

.hosting-view .rm-panel__footer {
  justify-content: flex-end;
}

.hosting-footer-hint {
  flex: 1 1 16rem;
  min-width: 0;
  color: var(--rm-ink-muted);
  font-size: var(--rm-text-sm);
  line-height: 1.4;
}

.hosting-footer-hint:empty {
  display: none;
}

/* Step 1: the chooser beside a compact availability matrix. */
.hosting-compare {
  display: grid;
  grid-template-columns: minmax(15rem, 17rem) minmax(0, 1fr);
  align-items: start;
  gap: var(--rm-space-4) var(--rm-space-6);
}

.hosting-compare__matrix,
.hosting-compare__chooser {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rm-space-3);
  min-width: 0;
}

/* Contains the visually hidden cell text so it scrolls with the table. */
.hosting-matrix-wrap {
  position: relative;
}

.hosting-matrix {
  font-size: var(--rm-text-sm);
}

.hosting-matrix :is(th, td) {
  padding: 0.4375rem 0.625rem;
  vertical-align: middle;
  white-space: nowrap;
}

.hosting-matrix td {
  text-align: center;
}

.hosting-matrix thead th:not(:first-child) {
  text-align: center;
}

/* Experimental badges wrap under the host name instead of widening the table. */
.hosting-matrix tbody th {
  color: var(--rm-ink);
  font-weight: 600;
  white-space: normal;
}

.hosting-matrix tbody tr[data-selected="true"] > * {
  background: var(--rm-accent-soft);
}

.hosting-matrix__count {
  color: var(--rm-ink-subtle);
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-xs);
  font-weight: 500;
}

.hosting-mark {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--rm-ink);
  vertical-align: middle;
}

.hosting-mark + .hosting-mark,
.hosting-mark + .rm-visually-hidden + .hosting-mark {
  margin-inline-start: var(--rm-space-1);
}

.hosting-mark[data-mode="managed"] {
  color: var(--rm-accent-ink);
}

.hosting-mark[data-mode="external"] {
  color: var(--rm-ink-muted);
}

.hosting-mark[data-mode="unavailable"] {
  color: var(--rm-ink-subtle);
}

.hosting-mark[data-mode="unavailable"]::before {
  width: 0.625rem;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  content: "";
}

.hosting-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rm-space-1) var(--rm-space-4);
  margin: 0;
  color: var(--rm-ink-muted);
  font-size: var(--rm-text-xs);
  line-height: 1.4;
}

.hosting-legend > div {
  display: flex;
  align-items: center;
  gap: var(--rm-space-1);
}

.hosting-legend dt {
  display: inline-flex;
  align-items: center;
  gap: var(--rm-space-1);
  color: var(--rm-ink);
  font-weight: 600;
}

.hosting-legend dd {
  margin: 0;
}

.hosting-capability {
  color: var(--rm-ink-muted);
  font-size: var(--rm-text-sm);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.hosting-capability > .rm-badge {
  margin-inline-end: var(--rm-space-1);
}

/* The root sign-in note reads as a warning through its words; color supports it. */
.hosting-capability__root {
  color: var(--rm-warning);
  font-weight: 600;
}

.hosting-notes-trigger {
  justify-self: start;
  margin-inline-start: -0.75rem;
}

/* Native popover: provider login notes open above the page, so the chooser
   keeps its height and the view still fits one screen. */
.hosting-notes {
  width: min(36rem, 100% - 2 * var(--rm-gutter));
  max-height: calc(100% - 2 * var(--rm-gutter));
  padding: var(--rm-space-4) var(--rm-space-5) var(--rm-space-5);
  overflow: auto;
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-radius-xl);
  background: var(--rm-surface);
  box-shadow: var(--rm-shadow-lg);
  color: var(--rm-ink);
  font-size: var(--rm-text-md);
  line-height: var(--rm-leading-body);
}

.hosting-notes:popover-open {
  display: grid;
  gap: var(--rm-space-3);
}

.hosting-notes::backdrop {
  background: var(--rm-overlay);
}

.hosting-notes__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rm-space-3);
}

.hosting-sources {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rm-space-1) var(--rm-space-4);
}

.hosting-sources > a {
  overflow-wrap: anywhere;
}

/* Step 2: plan details. */
.hosting-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  align-items: start;
  gap: var(--rm-space-3) var(--rm-space-4);
}

.hosting-inputs {
  display: contents;
}

/* Optional plan details may scroll the panel body once opened. */
.hosting-review__layout {
  display: grid;
  align-content: start;
  gap: var(--rm-space-4);
  min-width: 0;
}

.hosting-review__side {
  display: grid;
  align-content: start;
  gap: var(--rm-space-4);
  min-width: 0;
}

.hosting-zip-note,
.hosting-files-note {
  color: var(--rm-ink-muted);
  font-size: var(--rm-text-sm);
  line-height: 1.5;
}

.hosting-review__doc {
  gap: var(--rm-space-4);
  min-width: 0;
  padding-top: var(--rm-space-3);
  font-size: var(--rm-text-md);
  line-height: 1.55;
}

.hosting-review__doc > section {
  display: grid;
  gap: var(--rm-space-2);
  min-width: 0;
}

.hosting-review__doc h3 {
  font-size: var(--rm-text-md);
  font-weight: 650;
}

.hosting-review__doc :is(ol, ul) {
  display: grid;
  gap: var(--rm-space-2);
  margin: 0;
  padding-inline-start: 1.25rem;
}

.hosting-review__doc li {
  overflow-wrap: anywhere;
}

.hosting-code {
  margin: 0;
  padding: var(--rm-space-3) var(--rm-space-4);
  border-radius: var(--rm-radius-md);
  background: var(--rm-terminal-bg);
  color: var(--rm-terminal-fg);
  font-size: var(--rm-text-sm);
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.hosting-files {
  display: grid;
  gap: var(--rm-space-4);
}

.hosting-file {
  display: grid;
  gap: var(--rm-space-2);
  min-width: 0;
}

.hosting-file__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rm-space-2) var(--rm-space-4);
}

.hosting-file__name {
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* One-screen shell: the active view fills the window below the heading. */
@media (min-width: 64rem) and (min-height: 37.5rem) {
  .rm-app--fit .hosting-shell {
    height: 100%;
  }

  .rm-app--fit :is(.hosting-form, .hosting-review, .hosting-form > .hosting-view) {
    flex: 1 1 auto;
  }

  .rm-app--fit .hosting-review__layout {
    flex: 1 1 auto;
  }
}

@media (max-width: 63.99rem) {
  .hosting-compare {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* From 1024 to 1279px wide, and in windows under 768px tall such as
   1280 x 720: a tighter shell keeps long plan forms, and step 1 with its
   longest capability note, on one screen. */
@media (min-width: 64rem) and (max-width: 79.99rem),
  (min-width: 64rem) and (min-height: 37.5rem) and (max-height: 47.99rem) {
  .hosting-shell {
    gap: var(--rm-space-2);
    padding-block: var(--rm-space-1);
  }

  .hosting-view .rm-panel__header {
    padding-top: var(--rm-space-2);
    padding-bottom: var(--rm-space-2);
  }
}

/* From 1024 to 1279px: five narrower field columns, and slimmer matrix cells
   so the availability table fits its column without scrolling sideways. */
@media (min-width: 64rem) and (max-width: 79.99rem) {
  .hosting-fields {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    gap: var(--rm-space-2) var(--rm-space-3);
  }

  .hosting-matrix :is(th, td) {
    padding-inline: 0.5rem;
  }
}