/* * A reseller's own address: the one they have, and the one they are waiting for. * * Written against Filament's own custom properties rather than fixed colours, so * it follows the operator's accent and both themes without a second set of * rules. `--gray-*`, `--primary-*`, `--warning-*` are the panel's, and dark mode * is the `.dark` class on — the same arrangement settings-hub.css uses. * * Scoped under `.rw`, which only this page carries. * * The record block is the reason this file exists. It has to read as the three * cells a registrar's form asks for, on a phone as well as a laptop, because it * is copied by somebody who does not work with DNS and gets one chance to get it * right. A real table collapses into a jumble at that width, so it is a grid that * repeats its labels when there is no room for a header row. */ .rw { display: flex; flex-direction: column; gap: 1.5rem; } /* --------------------------------------------------------------------------- * Where customers go today * ------------------------------------------------------------------------- */ .rw-address { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .rw-address-text { min-width: 0; } .rw-address-host { font-size: 1.125rem; font-weight: 600; line-height: 1.4; color: var(--gray-950); overflow-wrap: anywhere; } .dark .rw-address-host { color: var(--gray-50); } .rw-address-note, .rw-empty { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.6; color: var(--gray-500); } .dark .rw-address-note, .dark .rw-empty { color: var(--gray-400); } .rw-empty strong { font-weight: 600; color: var(--gray-700); } .dark .rw-empty strong { color: var(--gray-200); } /* --------------------------------------------------------------------------- * One address, and whose move it is * ------------------------------------------------------------------------- */ .rw-domain { display: flex; flex-direction: column; gap: 1rem; font-size: 0.875rem; line-height: 1.6; } .rw-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } .rw-heading-host { overflow-wrap: anywhere; } .rw-guidance { color: var(--gray-600); } .dark .rw-guidance { color: var(--gray-300); } /* * What we can see, when it is not what it should be. * * Amber rather than red: a record that has not appeared yet is the ordinary * state of a domain added five minutes ago, and a red box on it would read as * a fault somebody has to fix tonight. */ .rw-note { display: flex; gap: 0.625rem; padding: 0.75rem 0.875rem; border: 1px solid var(--warning-200); border-radius: 0.5rem; background-color: var(--warning-50); color: var(--warning-800); } .dark .rw-note { border-color: color-mix(in oklab, var(--warning-400) 30%, transparent); background-color: color-mix(in oklab, var(--warning-400) 10%, transparent); color: var(--warning-300); } .rw-note-icon { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.1rem; } /* --------------------------------------------------------------------------- * The record to add * ------------------------------------------------------------------------- */ .rw-record { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.5rem 1.25rem; padding: 0.875rem 1rem; border: 1px solid var(--gray-200); border-radius: 0.5rem; background-color: var(--gray-50); } .dark .rw-record { border-color: var(--gray-700); background-color: var(--gray-900); } .rw-record-label { font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-500); } .dark .rw-record-label { color: var(--gray-400); } .rw-record-value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.875rem; color: var(--gray-950); overflow-wrap: anywhere; } .dark .rw-record-value { color: var(--gray-50); } /* * Three columns once there is room for them, which is the shape a registrar's * form actually has. Below that the labels sit beside their values instead of * above a row that would wrap into nonsense. */ @media (min-width: 40rem) { .rw-record { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem 1.5rem; } .rw-record-label { grid-row: 1; } .rw-record-value { grid-row: 2; } } .rw-hint { color: var(--gray-500); } .dark .rw-hint { color: var(--gray-400); } /* --------------------------------------------------------------------------- * Buttons and the footnote under them * ------------------------------------------------------------------------- */ .rw-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .rw-checked { font-size: 0.75rem; color: var(--gray-400); } .dark .rw-checked { color: var(--gray-500); }