/* Adicto theme overrides for Administrate.
*
* Palette (sampled from app/assets/images/adicto/mark.svg + the campaign
* tokens already defined in tokens.css; matches application layout's
* ):
*
* Background --color-ink-900 #0b0a1f deep midnight (page bg)
* Surface --color-surface #181431 card / table fill
* Surface 2 --color-surface-2 #221b3d inputs, hover rows
* Text --color-text #f5f1ea cream foreground
* Text soft --color-text-soft #b3a99e muted labels, captions
* Accent --color-magenta #ff0099 buttons, focus, active nav
* Accent hov --color-magenta-soft #ff63bf button hover
* Status ok --color-cyan #00e5ff
* Status warn --color-amber-2 #f0b35a
* Status bad --color-red #d8232a
* Mark warmth --color-cream #f7e6c2 sampled from mark.svg
*
* Layered ON TOP of administrate/application.css. The user-facing app
* already defines the Adicto palette as CSS custom properties in
* tokens.css; we reuse those here so brand colors stay in one place.
*
* Scope: every rule is qualified with `.administrate-page` (added to
* the Administrate layout's ), so nothing here can leak into the
* user-facing app even though both stylesheets are served by Propshaft
* from the same /assets path.
*/
.administrate-page {
/* Bring tokens.css custom properties into scope. The Administrate layout
* doesn't load app.css, but the variables live on :root so both contexts
* share them once tokens.css is on Propshaft's load path. */
background: var(--color-ink-900);
color: var(--color-text);
font-family: var(--font-body);
}
/* App chrome ------------------------------------------------------------- */
.administrate-page .app-container {
background: var(--color-ink-900);
color: var(--color-text);
padding: 0;
margin: 0;
max-width: unset;
}
.administrate-page .navigation {
background: var(--color-surface);
border-right: 1px solid var(--color-line-strong);
padding: 1.5em;
}
.administrate-page .navigation__link {
color: var(--color-text-soft);
border-color: transparent;
text-decoration: none;
}
.administrate-page .navigation__link:hover {
color: var(--color-text);
background: var(--color-surface-2);
}
.administrate-page .navigation__link--active {
color: var(--color-text);
background: var(--color-surface-3);
border-left: 3px solid var(--color-magenta);
}
.administrate-page .main-content {
background: var(--color-ink-900);
color: var(--color-text);
padding: 0 24px;
}
.administrate-page .main-content__header {
border-bottom: 1px solid var(--color-line);
}
.administrate-page .main-content__page-title {
color: var(--color-text);
}
.administrate-page .main-content__body {
background: var(--color-surface);
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-5);
margin-top: 16px;
}
.administrate-page .main-content__body--flush {
padding: 0;
}
/* Tables ----------------------------------------------------------------- */
.administrate-page table {
background: var(--color-surface);
color: var(--color-text);
border-color: var(--color-line);
}
.administrate-page th,
.administrate-page td {
border-color: var(--color-line);
}
.administrate-page .cell-label {
color: var(--color-text-soft);
background: var(--color-surface-2);
}
.administrate-page tr.js-table-row:hover {
background: var(--color-surface-2);
}
/* Buttons ---------------------------------------------------------------- */
.administrate-page .button {
background: var(--color-magenta);
color: var(--color-text);
border-color: transparent;
border-radius: var(--radius-sm);
}
.administrate-page .button:not(.link):hover {
background: var(--color-magenta-soft);
}
.administrate-page .button--alt {
background: var(--color-surface-2);
color: var(--color-text);
}
.administrate-page .button--alt:not(.link):hover {
background: var(--color-surface-3);
}
.administrate-page .button--danger {
background: var(--color-red);
}
.administrate-page .button--small {
padding: var(--space-1) var(--space-3);
font-size: var(--fs-small);
}
.administrate-page .button--nav {
background: transparent;
color: var(--color-text-soft);
border: 1px solid var(--color-line-strong);
}
.administrate-page .button--nav:hover {
background: var(--color-surface-2);
color: var(--color-text);
}
/* Forms ------------------------------------------------------------------ */
.administrate-page .field-unit__label {
color: var(--color-text-soft);
}
.administrate-page .field-unit__field input,
.administrate-page .field-unit__field select,
.administrate-page .field-unit__field textarea {
background: var(--color-surface-2);
color: var(--color-text);
border: 1px solid var(--color-line-strong);
border-radius: var(--radius-sm);
}
.administrate-page .field-unit__field input:focus,
.administrate-page .field-unit__field select:focus,
.administrate-page .field-unit__field textarea:focus {
border-color: var(--color-magenta);
outline: none;
}
/* Anchors ---------------------------------------------------------------- */
/* Engine forces a { color: #1976d2 } which reads as a blue smear inside
* the dark Adicto surfaces. Pagination items render as plain (not
* .button), so without this rule the page numbers stay engine blue.
* Cyan matches base.css's user-facing anchor color. */
.administrate-page a {
color: var(--color-cyan);
}
.administrate-page a:hover {
color: var(--color-cyan-soft);
}
.administrate-page .pagination .current {
color: var(--color-text);
}
/* Search bar ------------------------------------------------------------- */
.administrate-page .search input {
background: var(--color-surface-2);
color: var(--color-text);
border: 1px solid var(--color-line-strong);
border-radius: var(--radius-pill);
}
/* Flash messages --------------------------------------------------------- */
.administrate-page .flashes .flash--notice {
background: var(--color-surface);
color: var(--color-cyan);
border-left: 3px solid var(--color-cyan);
}
.administrate-page .flashes .flash--alert,
.administrate-page .flashes .flash--error {
background: var(--color-surface);
color: var(--color-red);
border-left: 3px solid var(--color-red);
}
/* Status badges (Phase 21) ----------------------------------------------- */
.administrate-page .status-pill {
display: inline-block;
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-pill);
font-size: var(--fs-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow);
background: var(--color-surface-3);
color: var(--color-text-soft);
}
.administrate-page .status-pill--ok { background: rgba(0, 229, 255, 0.15); color: var(--color-cyan); }
.administrate-page .status-pill--warn { background: rgba(240, 179, 90, 0.15); color: var(--color-amber-2); }
.administrate-page .status-pill--danger { background: rgba(216, 35, 42, 0.20); color: var(--color-red); }
.administrate-page .status-pill--neutral { background: var(--color-surface-3); color: var(--color-text-soft); }
/* Stat cards (Phase 20) -------------------------------------------------- */
.administrate-page .admin-stats-grid {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.administrate-page .admin-stat-group__label {
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow);
color: var(--color-text-soft);
margin: 0 0 var(--space-3);
}
.administrate-page .admin-stat-cards {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.administrate-page .admin-stat-card {
position: relative;
flex: 1 1 180px;
min-width: 0;
padding: var(--space-4);
background: var(--color-surface-2);
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
}
.administrate-page .admin-stat-card__icon {
position: absolute;
top: var(--space-3);
right: var(--space-4);
font-size: var(--fs-2);
line-height: 1;
color: var(--color-text-mute);
opacity: 0.7;
}
.administrate-page .admin-stat-card__label {
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow);
color: var(--color-text-soft);
margin-bottom: var(--space-2);
}
.administrate-page .admin-stat-card__value {
font-size: var(--fs-1);
font-weight: 700;
color: var(--color-text);
}
.administrate-page .admin-stat-card__delta {
margin-top: var(--space-2);
font-size: var(--fs-xs);
color: var(--color-text-soft);
}
.administrate-page .admin-stat-card--ok .admin-stat-card__value { color: var(--color-cyan); }
.administrate-page .admin-stat-card--ok .admin-stat-card__icon { color: var(--color-cyan); opacity: 0.8; }
.administrate-page .admin-stat-card--warn .admin-stat-card__value { color: var(--color-amber-2); }
.administrate-page .admin-stat-card--warn .admin-stat-card__icon { color: var(--color-amber-2); opacity: 0.8; }
/* Recent failed receipts table ------------------------------------------ */
.administrate-page .admin-recent-failed {
width: 100%;
}
.administrate-page .admin-recent-failed th,
.administrate-page .admin-recent-failed td {
padding: var(--space-2) var(--space-3);
text-align: left;
}
.administrate-page .admin-error {
color: var(--color-text-soft);
font-size: var(--fs-small);
}
.administrate-page .admin-empty {
color: var(--color-text-soft);
font-style: italic;
}
/* Receipt items table (Phase 22) ----------------------------------------- */
.administrate-page .admin-receipt-items {
width: 100%;
}
.administrate-page .admin-receipt-items th,
.administrate-page .admin-receipt-items td {
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--color-line);
text-align: left;
}
.administrate-page .admin-receipt-items th {
background: var(--color-surface-2);
color: var(--color-text-soft);
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow);
}
/* Receipt show: float image left, attribute list flows right.
* Scoped to action-show on the receipts controller so it doesn't bleed
* onto the index thumbnails or other resources. */
.administrate-page--receipts.administrate-page--action-show .attribute-data--active-storage img {
float: left;
max-width: 480px;
max-height: 640px;
object-fit: contain;
margin: 0 var(--space-5) var(--space-3) 0;
border-radius: var(--radius-sm);
}
.administrate-page--receipts.administrate-page--action-show dl {
overflow: hidden; /* clearfix for the floated image */
}
/* Linked-lotteries list on the receipt show page */
.administrate-page--receipts.administrate-page--action-show .main-content__body ul {
list-style: none;
padding: 0;
margin: 0;
}
.administrate-page--receipts.administrate-page--action-show .main-content__body li {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) 0;
border-bottom: 1px solid var(--color-line);
}
.administrate-page--receipts.administrate-page--action-show .main-content__body li:last-child {
border-bottom: none;
}
/* Level show: bigger minimum_score + description, prose user count (Phase 22) */
.administrate-page--levels.administrate-page--action-show dt#minimum_score,
.administrate-page--levels.administrate-page--action-show dt#minimum_score + dd,
.administrate-page--levels.administrate-page--action-show dt#description,
.administrate-page--levels.administrate-page--action-show dt#description + dd {
font-size: var(--fs-2);
line-height: 1.4;
}
.administrate-page--levels.administrate-page--action-show .admin-level-users-prose {
font-size: var(--fs-3);
color: var(--color-text-soft);
font-style: italic;
}
/* User show: profile card header (Phase 22) ----------------------------- */
.administrate-page--users.administrate-page--action-show .admin-profile-card {
display: flex;
align-items: center;
gap: var(--space-5);
padding: var(--space-5);
margin-bottom: var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
}
.administrate-page--users.administrate-page--action-show .admin-profile-card__avatar {
width: 120px;
height: 120px;
border-radius: var(--radius-md);
object-fit: cover;
background: var(--color-surface-2);
}
.administrate-page--users.administrate-page--action-show .admin-profile-card__avatar--placeholder {
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: var(--color-text-mute);
}
.administrate-page--users.administrate-page--action-show .admin-profile-card__body {
flex: 1;
min-width: 0;
}
.administrate-page--users.administrate-page--action-show .admin-profile-card__mobile {
font-size: var(--fs-1);
font-weight: 700;
color: var(--color-text);
margin-bottom: var(--space-2);
}
.administrate-page--users.administrate-page--action-show .admin-profile-card__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: center;
color: var(--color-text-soft);
}
.administrate-page--users.administrate-page--action-show .admin-profile-card__score {
color: var(--color-magenta);
font-weight: 600;
}
/* Branding mark in nav --------------------------------------------------- */
.administrate-page .navigation__brand {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-4);
border-bottom: 1px solid var(--color-line);
}
.administrate-page .navigation__brand img {
width: 28px;
height: 28px;
}
.administrate-page .navigation__brand-name {
font-weight: 700;
letter-spacing: var(--tracking-display);
color: var(--color-text);
}
.administrate-page .navigation__brand-sub {
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow);
color: var(--color-text-soft);
}
/* Empty state placeholders (Phase 23) ----------------------------------- */
.administrate-page .admin-empty-state {
text-align: center;
padding: var(--space-7) var(--space-5);
color: var(--color-text-soft);
}
.administrate-page .admin-empty-state__title {
font-size: var(--fs-2);
color: var(--color-text);
margin-bottom: var(--space-3);
}
.administrate-page .admin-empty-state .button {
margin-top: var(--space-4);
}
/* Mobile responsiveness (Phase 24) -------------------------------------- */
@media (max-width: 600px) {
/* .admin-stat-cards is a flex row (task 72); collapse to single column */
.administrate-page .admin-stat-cards {
flex-direction: column;
}
.administrate-page .admin-stat-card {
flex-basis: auto;
}
/* Recent-failed table stacks: thead hidden, each row becomes a card */
.administrate-page .admin-recent-failed thead {
display: none;
}
.administrate-page .admin-recent-failed tr {
display: block;
margin-bottom: var(--space-3);
padding: var(--space-3);
background: var(--color-surface-2);
border-radius: var(--radius-sm);
}
.administrate-page .admin-recent-failed td {
display: block;
padding: var(--space-1) 0;
border-bottom: none;
}
/* Resource index tables: drop secondary columns to keep the row
* scannable on a phone. Identifier + image + status stay. The
* cell-data--_ class is added by our shadow of
* administrate/application/_collection.html.erb. */
.administrate-page .cell-label--receipts_total_amount,
.administrate-page .cell-label--receipts_awarded_score,
.administrate-page .cell-label--receipts_user,
.administrate-page .cell-label--receipts_created_at,
.administrate-page .cell-data--receipts_total_amount,
.administrate-page .cell-data--receipts_awarded_score,
.administrate-page .cell-data--receipts_user,
.administrate-page .cell-data--receipts_created_at,
.administrate-page .cell-label--users_score,
.administrate-page .cell-label--users_receipts,
.administrate-page .cell-label--users_lotteries,
.administrate-page .cell-label--users_created_at,
.administrate-page .cell-data--users_score,
.administrate-page .cell-data--users_receipts,
.administrate-page .cell-data--users_lotteries,
.administrate-page .cell-data--users_created_at,
.administrate-page .cell-label--prizes_position,
.administrate-page .cell-data--prizes_position,
.administrate-page .cell-label--levels_users_count,
.administrate-page .cell-data--levels_users_count {
display: none;
}
}
/* Hamburger toggle button — hidden on desktop, shown only at <=768px. */
.administrate-page .navigation__hamburger {
display: none;
background: transparent;
border: 1px solid var(--color-line-strong);
color: var(--color-text);
border-radius: var(--radius-sm);
font-size: 1.25rem;
line-height: 1;
padding: var(--space-2) var(--space-3);
cursor: pointer;
}
@media (max-width: 768px) {
.administrate-page .app-container {
flex-direction: column;
}
.administrate-page .navigation {
border-right: none;
border-bottom: 1px solid var(--color-line-strong);
padding: var(--space-3);
}
/* Show the hamburger; hide the brand wordmark lockup + every nav item */
.administrate-page .navigation__hamburger {
display: inline-flex;
align-items: center;
justify-content: center;
}
.administrate-page .navigation__brand,
.administrate-page .navigation__link,
.administrate-page .navigation .button--nav {
display: none;
}
/* When the panel toggles open, reveal the lockup + every nav item.
* !important wins against the display:none above without forcing CSS
* specificity gymnastics. */
.administrate-page .navigation.navigation--open .navigation__brand,
.administrate-page .navigation.navigation--open .navigation__link,
.administrate-page .navigation.navigation--open .button--nav {
display: block;
margin-top: var(--space-2);
}
.administrate-page .navigation.navigation--open .navigation__brand {
display: flex;
}
}