79 lines
6.9 KiB
CSS
79 lines
6.9 KiB
CSS
.recap-admin { display: grid; gap: 24px; }
|
|
.recap-admin-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; }
|
|
.recap-panel.admin-panel { margin: 0; padding: 28px; min-width: 0; border: 1px solid var(--ops-line); border-radius: 14px; background: var(--ops-panel); }
|
|
.recap-panel h2, .recap-preference h2 { margin: 8px 0 12px; font-size: 22px; }
|
|
.recap-panel h3 { font-size: 16px; }
|
|
.recap-panel p, .recap-preference p { color: var(--ops-muted); font-size: 13px; line-height: 1.7; }
|
|
.recap-panel a, .recap-preference a, .recap-text-link { color: #c7bdff; text-decoration: none; }
|
|
.recap-panel a:hover, .recap-preference a:hover, .recap-text-link:hover { text-decoration: underline; }
|
|
.recap-eyebrow { display: block; color: #bcb3eb; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
|
|
.recap-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
|
|
.recap-section-heading > div { min-width: 0; }
|
|
.recap-pill { display: inline-flex; align-items: center; padding: 6px 10px; border: 1px solid var(--ops-line); border-radius: 99px; font-size: 11px; line-height: 1.4; color: var(--ops-muted); white-space: nowrap; }
|
|
.recap-pill.is-enabled { color: #cfc7fc; background: #c7bdff12; border-color: #c7bdff40; }
|
|
.recap-pill.is-attention { color: #eab9a6; border-color: #eab9a650; }
|
|
.recap-overview-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 28px; border: 1px solid var(--ops-line); border-radius: 14px; background: linear-gradient(110deg, #c7bdff0c, transparent 65%), var(--ops-panel); }
|
|
.recap-overview-strip p { color: var(--ops-muted); font-size: 13px; margin: 12px 0 0; line-height: 1.6; }
|
|
.recap-subscriber-count { display: flex; align-items: center; gap: 14px; }
|
|
.recap-subscriber-count strong { color: #d8d0ff; font-size: 36px; font-weight: 500; }
|
|
.recap-subscriber-count span { max-width: 100px; color: var(--ops-muted); font-size: 12px; line-height: 1.5; }
|
|
.recap-schedule-form { display: grid; gap: 18px; margin-top: 24px; }
|
|
.recap-schedule-form label, .recap-month-label { display: grid; gap: 9px; padding: 0; margin: 0; color: var(--ops-text); font-size: 13px; text-transform: none; border: 0; background: none; }
|
|
.recap-schedule-form input:not([type=checkbox]), .recap-schedule-form select, .recap-month-label select { min-width: 0; width: 100%; min-height: 44px; border: 1px solid var(--ops-line); border-radius: 8px; padding: 10px 12px; font: 13px Inter, sans-serif; }
|
|
.recap-schedule-form small { color: var(--ops-faint); font-size: 12px; line-height: 1.5; }
|
|
.recap-schedule-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
|
|
.recap-schedule-form .recap-checkbox { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
|
|
.recap-checkbox input { width: 18px; height: 18px; accent-color: #c7bdff; }
|
|
.recap-schedule-form button { justify-self: start; }
|
|
.recap-schedule-form .recap-muted { margin: -6px 0 0; }
|
|
.recap-panel .recap-muted, .recap-preference .recap-muted { font-size: 12px; color: var(--ops-faint); }
|
|
.recap-setup-note { padding: 14px 16px; border: 1px solid var(--ops-line); border-radius: 8px; margin: 20px 0 0; }
|
|
.recap-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
|
.recap-month-label { margin-top: 24px; }
|
|
.recap-preview-guidance { border-top: 1px solid var(--ops-line); margin-top: 28px; padding-top: 16px; }
|
|
.recap-preview-guidance ul { padding-left: 18px; margin: 18px 0; color: var(--ops-muted); font-size: 13px; line-height: 2; }
|
|
.recap-preview-guidance a { font-size: 13px; }
|
|
.recap-mode-buttons { display: flex; flex-shrink: 0; gap: 6px; }
|
|
.recap-mode-buttons button { background: transparent !important; color: var(--ops-muted); border: 1px solid var(--ops-line); padding: 10px 12px; font-size: 12px; text-transform: none; }
|
|
.recap-mode-buttons button[aria-pressed=true] { border-color: #c7bdff70; color: #d5cdff; background: #c7bdff10 !important; }
|
|
.recap-preview iframe { display: block; width: 100%; height: 1050px; margin-top: 18px; border: 1px solid var(--ops-line); border-radius: 10px; background: #131315; }
|
|
.recap-plain-preview { white-space: pre-wrap; overflow-wrap: anywhere; padding: 24px; background: #131315; border: 1px solid var(--ops-line); border-radius: 10px; color: var(--ops-muted); font-size: 13px; line-height: 1.8; }
|
|
.recap-history-scroll { overflow-x: auto; margin-top: 18px; }
|
|
.recap-history { width: 100%; border-collapse: collapse; font-size: 12px; }
|
|
.recap-history th { color: var(--ops-faint); font-size: 11px; font-weight: 500; text-align: left; }
|
|
.recap-history th, .recap-history td { padding: 16px 12px; border-bottom: 1px solid var(--ops-line-soft); vertical-align: top; }
|
|
.recap-history td { min-width: 135px; line-height: 1.7; }
|
|
.recap-history td:first-child { min-width: 170px; }
|
|
.recap-history td:nth-child(3) { min-width: 245px; max-width: 400px; }
|
|
.recap-history strong { display: block; font-weight: 500; }
|
|
.recap-history small { display: block; margin-top: 6px; font-size: 11px; color: var(--ops-muted); overflow-wrap: anywhere; }
|
|
.recap-pagination { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--ops-muted); font-size: 12px; margin-top: 16px; }
|
|
.recap-pagination .recap-actions { margin: 0; }
|
|
.recap-empty { text-align: center; padding: 36px 20px 24px; }
|
|
.recap-empty > span { color: #bcb3eb; font-size: 28px; }
|
|
.recap-empty p { max-width: 430px; margin: 12px auto; }
|
|
.recap-preference { border-top: 1px solid var(--ops-line); margin-top: 28px; padding-top: 28px; scroll-margin-top: 24px; }
|
|
.recap-preference p { max-width: 620px; }
|
|
.recap-delivery-address { overflow-wrap: anywhere; }
|
|
.page > main.recap-link-page { max-width: 600px; margin: 70px auto; }
|
|
.recap-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 32px; text-decoration: none; color: var(--ops-text); font: 500 25px "DM Sans", sans-serif; }
|
|
.recap-brand img { width: 42px; height: 42px; object-fit: contain; }
|
|
.recap-brand .brand-logo { width: 42px; height: 42px; flex: 0 0 42px; }
|
|
.recap-link-page h1 { font-size: clamp(25px, 5vw, 36px); margin: 16px 0; }
|
|
.recap-link-page p { font-size: 14px; line-height: 1.8; color: var(--ops-muted); }
|
|
.recap-link-page button, .recap-link-page .recap-text-link { margin-top: 16px; }
|
|
.recap-link-page .recap-text-link { display: inline-block; font-size: 14px; }
|
|
@media (max-width: 1000px) { .recap-admin-grid { grid-template-columns: 1fr; } }
|
|
@media (max-width: 600px) {
|
|
.recap-panel.admin-panel { padding: 20px 16px; }
|
|
.recap-overview-strip, .recap-section-heading { flex-direction: column; gap: 16px; }
|
|
.recap-overview-strip { padding: 20px; }
|
|
.recap-subscriber-count span { max-width: none; }
|
|
.recap-schedule-fields { gap: 12px; }
|
|
.recap-panel h2, .recap-preference h2 { font-size: 20px; }
|
|
.recap-preview iframe { height: 1200px; }
|
|
.page > main.recap-link-page { margin: 36px auto; }
|
|
.recap-link-page .account-panel { padding: 26px 22px; }
|
|
.recap-pagination { flex-wrap: wrap; }
|
|
}
|