/** * Redstone Admin Theme — CSS Variables * Literal values. Previously resolved from Settings/Theme.json via the CSS * realm; that file has been removed (CSS-only theming per JR, 2026-09-23). **/ /* color-scheme tells the browser which scaffolding color (scrollbars, form controls, and most importantly the default page background painted during navigation) to use. Without this, Chrome paints white between page unload and the new page's first paint, producing a jarring white/black flash on themed sites. With `light dark` declared here, the browser matches the user's OS preference and the flash disappears. Paired with `html { background: var(--Admin-White) }` below so the first paint matches the theme surface immediately — before any content-specific CSS has a chance to apply. An explicit toggle choice pins the scheme to match, so browser-drawn controls follow the chosen theme rather than the OS. Otherwise an OS dark preference gives form fields white text even when light is chosen. */ :root { color-scheme: light dark; /* Font Families */ --Admin-FontFamily: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --Admin-FontSize: 14px; /* Brand / Theme Colors */ --Admin-ControlColor: #528fcc; --Admin-ControlHoverColor: #3c74aa; --Admin-ErrorColor: #e1223a; --Admin-FocusColor: #3799de; --Admin-LinkColor: #528fcc; --Admin-PrimaryButton: #528fcc; --Admin-PrimaryButtonActive: var(--Admin-PrimaryButtonHover); --Admin-PrimaryButtonHover: #3c74aa; --Admin-SecondaryButton: #73d3cf; --Admin-SuccessColor: #73d3cf; --Admin-ToggleOnColor: var(--Admin-ControlColor); /* Sidebar */ --Admin-LogoWidth: 140px; --Admin-SidebarBg: #244b62; --Admin-SidebarItemFocus: #1a2025; --Admin-SidebarItemHover: rgba(20, 20, 20, 0.4); --Admin-SidebarWidth: 220px; /* Header */ --Admin-HeaderHeight: 56px; --Admin-HeaderIconColor: var(--Admin-OnBrand); --Admin-HeaderLinkActiveColor: var(--Admin-HeaderLinkColor); --Admin-HeaderLinkColor: var(--Admin-Neutral05); --Admin-HeaderLinkHoverColor: var(--Admin-HeaderLinkColor); --Admin-HeaderNameColor: var(--Admin-Neutral06); /* Navigation items */ --Admin-CopyrightColor: var(--Admin-Neutral05); --Admin-NavItemActiveColor: var(--Admin-OnBrand); --Admin-NavItemColor: #7993a0; /* Content */ --Admin-ContentBottomSpace: 40px; --Admin-ContentGutter: 16px; --Admin-ContentMaxWidth: 1100px; /* Buttons */ --Admin-ButtonDisabledBg: var(--Admin-Neutral03); --Admin-ButtonDisabledColor: var(--Admin-Neutral05); --Admin-ButtonHeight: 36px; --Admin-IconButtonHoverBg: rgba(20, 20, 20, 0.08); /* Checkbox (Form.css, .FormFieldForCheckBox) */ --Admin-CheckboxBg: var(--Admin-White); --Admin-CheckboxBorderColor: var(--Admin-Neutral04); --Admin-CheckboxCheckedBg: var(--Admin-ControlColor); --Admin-CheckboxCheckedIcon: none; --Admin-CheckboxFocusShadow: var(--Admin-FocusRingBoxShadow); --Admin-CheckboxGap: 8px; --Admin-CheckboxHoverBg: var(--Admin-Neutral02); --Admin-CheckboxRadius: 4px; --Admin-CheckboxSize: 16px; /* Upload (Upload.css) */ --Admin-UploadBorderColor: var(--Admin-Neutral04); --Admin-UploadDropActiveBg: var(--Admin-Neutral01); --Admin-UploadPlaceholderBg: var(--Admin-Neutral02); --Admin-UploadThumbBorderColor: var(--Admin-Neutral03); --Admin-UploadThumbAspectRatio: 1 / 1; --Admin-UploadThumbSize: 100px; /* Dialog (Dialog.css) */ --Admin-DialogBackdrop: rgba(0, 0, 0, 0.4); --Admin-DialogButtonGap: 12px; --Admin-DialogButtonWidth: auto; --Admin-DialogDangerButton: #e1223a; --Admin-DialogDangerButtonActive: #a31919; --Admin-DialogDangerButtonHover: #c41e33; --Admin-DialogGap: 24px; --Admin-DialogMaxWidth: 480px; --Admin-DialogPadding: 32px; --Admin-DialogRadius: var(--Admin-Radius); --Admin-DialogShadow: 0 8px 30px rgba(0, 0, 0, 0.15); --Admin-DialogTextColor: var(--Admin-Neutral06); --Admin-DialogTextGap: 8px; --Admin-DialogTitleColor: var(--Admin-Neutral07); --Admin-DialogTitleSize: 18px; /* Shape */ --Admin-Radius: 4px; /* Focus */ --Admin-FocusRingBoxShadow: 0 0 0 3px rgba(20, 20, 20, 0.35); /* Scaffold / Tables */ --Admin-PagerDisabledColor: var(--Admin-Neutral05); --Admin-PagerHoverBg: var(--Admin-Neutral02); --Admin-PillBg: var(--Admin-White); --Admin-PillBorder: var(--Admin-Neutral03); --Admin-PillColor: var(--Admin-Neutral06); --Admin-PillHoverBg: var(--Admin-Neutral02); --Admin-RowActionActiveBg: var(--Admin-ControlColor); --Admin-RowActionIconActiveColor: var(--Admin-White); --Admin-RowActionIconColor: var(--Admin-ControlColor); --Admin-ScaffoldHeaderBg: #528fcc; --Admin-ScaffoldHeaderColor: #ffffff; --Admin-ScaffoldRowAlternateBg: var(--Admin-Neutral02); --Admin-ScaffoldRowCardHoverBg: var(--Admin-White); --Admin-ScaffoldRowDivider: var(--Admin-Neutral03); --Admin-ScaffoldRowHoverBg: var(--Admin-Neutral03); --Admin-ScaffoldSearchHoverBg: var(--Admin-Neutral01); /* Status badges */ --Admin-StatusBadgeDangerBorder: #c62828; --Admin-StatusBadgeDangerFill: #fbe9e7; --Admin-StatusBadgeDangerText: #c62828; --Admin-StatusBadgeInfoBorder: var(--Admin-Neutral04); --Admin-StatusBadgeInfoFill: var(--Admin-Neutral02); --Admin-StatusBadgeInfoText: var(--Admin-Neutral06); --Admin-StatusBadgeSuccessBorder: #2e7d32; --Admin-StatusBadgeSuccessFill: #e8f5e9; --Admin-StatusBadgeSuccessText: #2e7d32; /* Neutral Colors */ --Admin-Black: #000000; --Admin-Neutral01: #f5f5f5; --Admin-Neutral02: #ededed; --Admin-Neutral03: #e3e3e3; --Admin-Neutral04: #b3b3b3; --Admin-Neutral05: #95989a; --Admin-Neutral06: #585858; --Admin-Neutral07: #414141; --Admin-White: #ffffff; /* Semantic tokens that DO NOT flip between light/dark themes. Use these where the surrounding color is always dark (sidebar, brand buttons, toasts, status badges) so the text stays legible regardless of OS / user theme choice. --Admin-White is repurposed below for "card surface" and therefore is NOT a safe choice for text on always-dark surfaces. */ --Admin-OnBrand: #ffffff; /* Transitions */ --Admin-Transition: 0.2s ease; } /* ============================================ Dark mode scaffold ============================================ Opt-in today via . Also respects the OS prefers-color-scheme signal when the user hasn't explicitly chosen. Variables override — keep brand colors (PrimaryButton etc.) so the Redstone identity is intact. Neutral ramp and background colors flip to a low-contrast dark surface. Status badges keep their accented backgrounds, which read well on either mode. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --Admin-Black: #f4f6f8; --Admin-Neutral01: #161a20; --Admin-Neutral02: #242a33; --Admin-Neutral03: #2d343e; --Admin-Neutral04: #4a5360; --Admin-Neutral05: #8a95a3; --Admin-Neutral06: #bcc5d1; --Admin-Neutral07: #e8ecf1; --Admin-White: #1d232b; /* The teal sidebar (#244b62) was picked for contrast against a white content area. In dark mode that makes the sidebar the lightest surface, inverting the intended hierarchy. Deepen it to a dark slate so content still reads as the primary surface. */ --Admin-SidebarBg: #0f141a; --Admin-SidebarItemFocus: rgba(255, 255, 255, 0.12); --Admin-SidebarItemHover: rgba(255, 255, 255, 0.06); } } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { --Admin-Black: #f4f6f8; --Admin-Neutral01: #161a20; --Admin-Neutral02: #242a33; --Admin-Neutral03: #2d343e; --Admin-Neutral04: #4a5360; --Admin-Neutral05: #8a95a3; --Admin-Neutral06: #bcc5d1; --Admin-Neutral07: #e8ecf1; --Admin-White: #1d232b; --Admin-SidebarBg: #0f141a; --Admin-SidebarItemFocus: rgba(255, 255, 255, 0.12); --Admin-SidebarItemHover: rgba(255, 255, 255, 0.06); color-scheme: dark; } /* Paint html + body with the theme surface from the very first frame so cross-page navigation doesn't show a flash of browser-default background. html picks up the variable even before any layout CSS classifies the body. */ html, body { background: var(--Admin-Neutral01); } /* Dark mode: dim the card shadows (too stark on dark bg) and tone the page background. */ :root[data-theme="dark"] body, :root:not([data-theme="light"]) body { background: var(--Admin-Neutral01); color: var(--Admin-Neutral07); } /* Cross-fade between pages on browsers that support the View Transitions API (Chrome / Edge today; Safari + Firefox progressing). Silently ignored on browsers that don't support it — falls back to the normal hard navigation, which is now flash-free thanks to color-scheme above. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; } /* Suppress every transition + animation during the first-paint window. Site.js adds `.transitions-off` synchronously in before the browser's first paint, and removes it two animation frames after DOMContentLoaded. Without this, elements with `transition: background` (buttons, nav items, cards, form controls) fade in from the browser's unstyled default when each new page loads — a subtle but visible second flash on top of the one color-scheme already fixed. */ html.transitions-off *, html.transitions-off *::before, html.transitions-off *::after { animation: none !important; transition: none !important; } /* ============================================ Reset & Base ============================================ */ *, *::before, *::after { box-sizing: border-box; } body { -webkit-font-smoothing: antialiased; background-color: var(--Admin-Neutral01); color: var(--Admin-Neutral07); font-family: var(--Admin-FontFamily); font-size: var(--Admin-FontSize); line-height: 1.5; margin: 0; } a { color: var(--Admin-LinkColor); text-decoration: none; } a:hover { color: var(--Admin-PrimaryButtonHover); } h1, h2, h3, h4 { font-weight: 600; margin-top: 0; } /* ============================================ Layout — Header + Sidebar + Content ============================================ */ .AdminLayout { display: flex; min-height: 100vh; } /* Header — sits to the right of the (full-height) sidebar rather than spanning the full width above it, so the sidebar can run the full viewport height with the logo living at its top. Mobile resets `left` back to 0, since the sidebar becomes an off-canvas drawer there. Absolute, not fixed: it scrolls away with the page rather than sitting over the content. MainContent's margin-top still reserves its height. */ .Header { align-items: center; background: var(--Admin-White); display: flex; height: var(--Admin-HeaderHeight); justify-content: space-between; left: var(--Admin-SidebarWidth); padding: 0 24px 0 0; position: absolute; right: 0; top: 0; z-index: 100; } .HeaderLeft { align-items: center; display: flex; height: 100%; } /* Compact header logo — hidden on desktop (the logo lives at the top of the full-height sidebar there); shown by the mobile breakpoint in Responsive.css, since the sidebar is off-canvas at that width. */ .HeaderLogo { display: none; } /* Main Content */ /* min-width:0 overrides the flex default of min-width:auto, which floors a flex item at its content's min-content size. Without it, a wide child (the scaffold table, which has its own overflow-x:auto specifically to scroll internally rather than widen the page) forces MainContent itself wider than the viewport at some in-between widths, causing page-level horizontal scroll instead of the table's own scrollbar. */ .MainContent { flex: 1; margin-left: var(--Admin-SidebarWidth); margin-top: var(--Admin-HeaderHeight); min-height: calc(100vh - var(--Admin-HeaderHeight)); min-width: 0; } /* Page header and main content share one column: same max-width, same centring, same minimum gutter — so their left/right edges always line up (a page-header title and the card/panel below it start at the same x). "width: calc(100% - gutter*2)" rather than padding is what gives a GUARANTEED minimum gutter that still lets the column reach its full max-width and center once there's room for it: below max-width+2*gutter the calc'd width is the smaller value and wins, giving exactly the gutter on each side (via the auto margins); above that, max-width caps it and the extra space becomes larger, centred margins instead. */ .PageHeaderInner, .MainContentInner { margin: 0 auto; max-width: var(--Admin-ContentMaxWidth); width: calc(100% - (var(--Admin-ContentGutter) * 2)); } /* Space below the last content block, so buttons and pagers never sit flush against the bottom of the window. */ .MainContentInner { padding-bottom: var(--Admin-ContentBottomSpace); } /* ============================================ Page Header ============================================ */ .PageHeader { margin-bottom: 24px; padding: 40px 0 0; } /* The divider lives on the inner (max-width, centred) element rather than the outer full-bleed one, so it spans the content column — not the full viewport — matching the design's "divider spans the content width". Grid rather than flex: the breadcrumb, title and action button are three independent children (flattened out of the old single-wrapper markup), laid out as areas so the button can share a row with the title — and be vertically centred against it specifically — without an absolute- positioning hack. Row/column tracks size to their content (no fixed height), so a wrapped multi-line title pushes the divider down with it instead of the divider cutting through it. The title row has a minimum height of one button (minmax's floor), not just "auto", so a page with no action button (create/edit) still lands its title at the same y as a page that has one — the row would otherwise shrink to the shorter title's own height and pull it 8px higher. minmax's "auto" ceiling still lets a wrapped multi-line title grow the row past that floor. */ .PageHeaderInner { align-items: center; border-bottom: 1px solid var(--Admin-Neutral03); column-gap: 16px; display: grid; grid-template-areas: "Crumb Crumb" "Title Action"; grid-template-columns: 1fr auto; grid-template-rows: auto minmax(var(--Admin-ButtonHeight), auto); padding: 0 0 16px; row-gap: 8px; } .PageHeaderTitle { color: var(--Admin-Neutral07); font-size: 24px; font-weight: 600; grid-area: Title; letter-spacing: -0.01em; line-height: 1.2; margin: 0; } .PageHeaderSubtitle { color: var(--Admin-Neutral05); font-size: 14px; margin: 4px 0 0; } .PageHeaderActions { display: flex; gap: 8px; grid-area: Action; justify-self: end; } /* Breadcrumbs — primary "where am I" cue, kept prominent but muted enough not to compete with the page title sitting below. */ .Breadcrumbs { align-items: center; color: var(--Admin-Neutral06); display: inline-flex; flex-wrap: wrap; font-size: 13px; font-weight: 500; gap: 4px; grid-area: Crumb; /* Spacing to the title row comes from PageHeaderInner's row-gap now (grid), not a margin here — a margin would stack on top of the gap and throw off the spec's measured offsets. */ margin-bottom: 0; } .Breadcrumbs a { border-bottom: 1px solid transparent; color: var(--Admin-LinkColor); text-decoration: none; transition: border-color var(--Admin-Transition); } .Breadcrumbs a:hover { border-bottom-color: currentColor; color: var(--Admin-ControlHoverColor); } /* ============================================ Buttons ============================================ */ .Button { align-items: center; border: none; border-radius: var(--Admin-Radius); cursor: pointer; display: inline-flex; font-family: var(--Admin-FontFamily); font-size: 13px; font-weight: 600; height: var(--Admin-ButtonHeight); justify-content: center; padding: 0 20px; text-decoration: none; transition: background var(--Admin-Transition); } .Button:focus-visible { box-shadow: var(--Admin-FocusRingBoxShadow); outline: none; } .PrimaryButton { background: var(--Admin-PrimaryButton); color: var(--Admin-OnBrand); } .PrimaryButton:hover { background: var(--Admin-PrimaryButtonHover); color: var(--Admin-OnBrand); } .PrimaryButton:active { background: var(--Admin-PrimaryButtonActive); color: var(--Admin-OnBrand); } .SecondaryButton { background: var(--Admin-Neutral03); color: var(--Admin-Neutral06); } .SecondaryButton:hover { background: var(--Admin-Neutral04); color: var(--Admin-OnBrand); } .DangerButton { background: var(--Admin-ErrorColor); color: var(--Admin-OnBrand); } .DangerButton:hover { background: #c41e33; color: var(--Admin-OnBrand); } /* Disabled, for any palette. The :hover and :active pairs out-rank each palette's own hover and active, so a disabled button never lights up. */ .Button:disabled, .Button:disabled:active, .Button:disabled:hover { background: var(--Admin-ButtonDisabledBg); border-color: var(--Admin-ButtonDisabledBg); color: var(--Admin-ButtonDisabledColor); cursor: not-allowed; } .SmallButton { font-size: 11px; height: 28px; padding: 0 14px; } /* ============================================ Icon Button ============================================ For a bare-icon control rather than a text button — the mobile nav toggle and its close counterpart today. Active/focus-visible are shared with .Button (same tokens); resting fill, border and icon colour are left to each variant class (.MobileMenuToggle / .MobileMenuClose in Navigation.css), since those differ per control. */ .IconButton { align-items: center; background: transparent; border: none; border-radius: var(--Admin-Radius); cursor: pointer; display: flex; height: 40px; justify-content: center; padding: 0; transition: background var(--Admin-Transition), color var(--Admin-Transition); width: 40px; } .IconButton:hover { background: var(--Admin-IconButtonHoverBg); } .IconButton:active { background: var(--Admin-PrimaryButton); color: var(--Admin-OnBrand); } .IconButton:focus-visible { box-shadow: var(--Admin-FocusRingBoxShadow); outline: none; } /* * Redstone Admin — Navigation * Sidebar, hamburger toggle, mobile menu, nav items */ /* Taken out of the header's flex layout so the open toggle and its close counterpart share the exact same box — the close button isn't even inside
in the markup. Both are hidden by default (display:none) and only switched on by the ≤900px nav-shell breakpoint in Responsive.css, so their geometry is safe to state unconditionally here. */ .MobileMenuToggle, .MobileMenuClose { display: none; right: 8px; top: calc(var(--Admin-HeaderHeight) / 2); transform: translateY(-50%); z-index: 100; } /* The toggle scrolls away with the header (absolute within the full-width mobile .Header), so it never floats over the page content. */ .MobileMenuToggle { position: absolute; } /* .MobileMenuClose stays fixed: it belongs to the drawer, which is viewport-anchored. It sits above the drawer and its scrim (see the z-index ladder on .MobileOverlay / .Sidebar below). At the top of the page it exactly covers the toggle underneath — the toggle itself is never hidden on open, just covered. */ .MobileMenuClose { position: fixed; z-index: 201; } .HamburgerBar { /* HeaderIconColor rather than OnBrand directly: OnBrand is white and assumes an always-dark surface behind it, which held for the old solid dark SidebarBg/mobile header but not a light brand gradient — the token lets a theme repoint just the icon color without touching OnBrand (still needed elsewhere for white text on dark brand buttons). */ background: var(--Admin-HeaderIconColor); border-radius: 1px; height: 2px; left: 50%; position: absolute; top: 50%; width: 24px; } /* A static 24×9 two-bar icon — bar 1 (24 wide) at the top, bar 2 (18 wide, flush right) at the bottom, 5px apart. It no longer morphs into an X on open: .MobileMenuClose now covers it at the same position instead, so there's nothing left to animate. */ .HamburgerBar:nth-child(1) { transform: translate(-50%, calc(-50% - 3.5px)); } .HamburgerBar:nth-child(2) { transform: translate(calc(-50% + 3px), calc(-50% + 3.5px)); width: 18px; } .HamburgerBar:nth-child(3) { display: none; } .MobileMenuCloseIcon { height: 24px; width: 24px; } /* Mobile overlay — covers the header as well as the content (top:0, not the old var(--Admin-HeaderHeight)), so opening the drawer dims the whole viewport in one sweep rather than leaving the header lit. */ .MobileOverlay { background: rgba(0,0,0,0.4); bottom: 0; display: none; left: 0; position: fixed; right: 0; top: 0; z-index: 150; } .MobileOverlay.Active { display: block; } .HeaderProfile { align-items: center; display: flex; font-size: 13px; gap: 16px; } /* Desktop theme toggle in the header — icon-only button that swaps between 🌙 (light mode, offers to go dark) and ☀ (dark mode, offers to go light) via the same .ThemeToggleLightLabel / .ThemeToggleDarkLabel swap rules the mobile sidebar version uses. */ .HeaderThemeToggle { background: transparent; border: none; border-radius: 4px; color: var(--Admin-Neutral05); cursor: pointer; font-size: 16px; line-height: 1; padding: 4px 8px; transition: background var(--Admin-Transition), color var(--Admin-Transition); } .HeaderThemeToggle:hover { background: var(--Admin-Neutral02); color: var(--Admin-Neutral07); } .HeaderThemeToggle:focus-visible { box-shadow: var(--Admin-FocusRingBoxShadow); outline: none; } .HeaderProfileName { color: var(--Admin-HeaderNameColor); font-weight: 600; } .HeaderLogout { color: var(--Admin-HeaderLinkColor); font-size: 12px; } .HeaderProfileLink { color: var(--Admin-HeaderLinkColor); font-size: 12px; } .HeaderProfileLink:hover, .HeaderLogout:hover { color: var(--Admin-HeaderLinkHoverColor); text-decoration: underline; } .HeaderProfileLink:active, .HeaderLogout:active { color: var(--Admin-HeaderLinkActiveColor); text-decoration: underline; } /* Header text links take the same focus ring as the buttons. The padding gives the ring room around the text and the negative margin keeps the layout unchanged, as on the logo links. */ .HeaderProfileLink, .HeaderLogout { border-radius: var(--Admin-Radius); margin: -4px; padding: 4px; } .HeaderProfileLink:focus-visible, .HeaderLogout:focus-visible { box-shadow: var(--Admin-FocusRingBoxShadow); outline: none; } .LogoutFormInline { display: inline; margin: 0; padding: 0; } .LogoutButton { background: none; border: none; cursor: pointer; font-family: var(--Admin-FontFamily); font-size: 12px; padding: 0; } /* Sidebar — full viewport height, flex column so the logo sits fixed at the top, the nav list scrolls independently in the middle, and the footer (copyright) is pinned at the bottom without absolute positioning. The mobile drawer reuses this same column layout (Responsive.css only toggles visibility/transform), rather than a separate structure. */ .Sidebar { background: var(--Admin-SidebarBg); bottom: 0; display: flex; flex-direction: column; left: 0; position: fixed; top: 0; width: var(--Admin-SidebarWidth); /* Above .Header (100) and .MobileOverlay (150) — the drawer pattern's scrim needs to cover the header too (below 900px), and the drawer itself sits above that scrim. .MobileMenuClose (201) is the only thing above the drawer. */ z-index: 200; } .SidebarLogo { align-items: center; display: flex; flex-shrink: 0; justify-content: center; padding: 16px 24px; } .SidebarLogo img { display: block; width: var(--Admin-LogoWidth); } /* Logo links, sidebar and mobile header. The padding gives the focus ring room around the image and the negative margin keeps the layout unchanged, the same as the front end's .HeaderLogoArea a. */ .SidebarLogo a, .HeaderLogo a { border-radius: var(--Admin-Radius); display: block; margin: -4px; padding: 4px; } .SidebarLogo a:focus-visible, .HeaderLogo a:focus-visible { box-shadow: var(--Admin-FocusRingBoxShadow); outline: none; } .PrimaryNavigation { flex: 1 1 auto; list-style: none; margin: 0; overflow-y: auto; padding: 0 16px; } .NavigationItem { margin: 0 0 20px; } .NavigationItemInner { align-items: center; border-radius: var(--Admin-Radius); color: var(--Admin-NavItemColor); cursor: pointer; display: flex; font-size: 13px; font-weight: 600; gap: 10px; height: 44px; padding: 0 24px; text-decoration: none; transition: background var(--Admin-Transition), color var(--Admin-Transition); } a.NavigationItemInner:hover, .NavigationItemInner:hover { background: var(--Admin-SidebarItemHover); color: var(--Admin-NavItemActiveColor); } .NavigationItemActive > .NavigationItemInner, .NavigationItemActive > a.NavigationItemInner { background: var(--Admin-SidebarItemFocus); color: var(--Admin-NavItemActiveColor); } .NavigationItemInner:focus-visible { box-shadow: var(--Admin-FocusRingBoxShadow); outline: none; } .SidebarFooter { color: var(--Admin-CopyrightColor); flex-shrink: 0; font-size: 12px; padding: 16px; text-align: center; } .NavigationIcon { align-items: center; display: flex; flex-shrink: 0; font-size: 14px; height: 20px; justify-content: center; opacity: 0.7; width: 20px; } .NavigationLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Navigation icon classes — Unicode icons per menu item */ .IconDashboard::before { content: "\25A0"; } .IconProducts::before { content: "\270E"; } .IconCategories::before { content: "\2630"; } .IconFAQs::before { content: "\2753"; } .IconQuotes::before { content: "\1F4C4"; } .IconContacts::before { content: "\2709"; } .IconUsers::before { content: "\263B"; } .NavigationChildren { list-style: none; margin: 0; padding: 0; } .NavigationChildren .NavigationItemInner { color: rgba(255, 255, 255, 0.7); font-size: 13px; font-weight: 400; padding-left: 46px; } .NavigationChildren .NavigationItemInner:hover { color: var(--Admin-OnBrand); } /* Sidebar scrollbar */ .Sidebar::-webkit-scrollbar { width: 6px; } .Sidebar::-webkit-scrollbar-track { background: transparent; } .Sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; } /* ============================================ Forms — Admin style ============================================ */ .FormGroup { background: var(--Admin-White); border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-bottom: 24px; } .FormGroupTitle { border-bottom: 1px solid var(--Admin-Neutral03); color: var(--Admin-Neutral07); font-size: 16px; font-weight: 300; padding: 16px 24px; } .FormGroupContent { padding: 24px; } .FormRow { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin-bottom: 16px; } .FormRow:last-child { margin-bottom: 0; } .FormRow.TwoColumn { grid-template-columns: repeat(2, 1fr); } .FormRow.OneColumn { grid-template-columns: 1fr; } .FormField { margin-bottom: 0; } .FormFieldLabel { color: var(--Admin-Neutral06); display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; } /* Inline help text below a form field label — rendered via ... in form templates. */ .FormFieldHelp { color: var(--Admin-Neutral05); display: block; font-size: 12px; font-weight: 400; line-height: 1.4; margin-top: 4px; } /* Sticky footer for long edit/create forms — applies to the form-buttons bar inside a ScaffoldForm. The position: sticky keeps Save/Cancel visible as the user scrolls a long form. */ .ScaffoldForm .FormButtons { background: var(--Admin-White); bottom: 0; box-shadow: 0 -2px 6px rgba(0,0,0,0.04); position: sticky; z-index: 2; } /* Danger variant for a "Delete this record" button on edit pages. */ .Button.DangerButton { background: transparent; border: 1px solid transparent; color: var(--Admin-ErrorColor); margin-right: auto; /* push to the left, away from Save/Cancel */ } .Button.DangerButton:hover { background: #fbe9e7; border-color: rgba(225, 34, 58, 0.4); } /* Metadata panel on edit pages — right-side info block (Created/Modified). */ .EditMetadata { align-items: center; background: var(--Admin-Neutral02); border-left: 3px solid var(--Admin-Neutral04); border-radius: 4px; color: var(--Admin-Neutral06); display: flex; flex-wrap: wrap; font-size: 12px; gap: 12px; margin: 0 0 16px; padding: 10px 14px; } .EditMetadata > span { display: inline-flex; gap: 4px; } .EditMetadata .EditMetadataLabel { color: var(--Admin-Neutral05); font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; } /* Link treatment for "View on site" and similar external pointers in the metadata panel — primary blue, no underline, margin-left: auto so it pushes to the right edge of the flex row. */ .EditMetadata .EditMetadataLink { color: var(--Admin-PrimaryButton); font-weight: 600; margin-left: auto; text-decoration: none; } .EditMetadata .EditMetadataLink:hover { color: var(--Admin-PrimaryButtonHover); text-decoration: underline; } .FormFieldRequired { color: var(--Admin-ErrorColor); margin-left: 2px; } .FormFieldInput, .FormFieldTextBox, .FormFieldEmailBox, .FormFieldSelect, .FormFieldTextArea { background: var(--Admin-White); border: 1px solid var(--Admin-Neutral05); border-radius: 3px; color: var(--Admin-Neutral07); font-family: var(--Admin-FontFamily); font-size: 14px; height: 40px; padding: 0 12px; transition: border-color var(--Admin-Transition); width: 100%; } .FormFieldInput:focus, .FormFieldTextBox:focus, .FormFieldSelect:focus, .FormFieldTextArea:focus { border-color: var(--Admin-FocusColor); box-shadow: 0 0 0 3px rgba(55, 153, 222, 0.12); outline: none; } .FormFieldInput::placeholder { color: var(--Admin-Neutral04); } /* Invalid field styling — triggered by JS validation, not browser default */ .FormFieldInput.FieldInvalid, .FormFieldSelect.FieldInvalid { border-color: var(--Admin-ErrorColor); } .FormFieldInput.FieldInvalid:focus { box-shadow: 0 0 0 3px rgba(225, 34, 58, 0.12); } /* Inline field error messages */ .FormFieldErrorMessage { color: var(--Admin-ErrorColor); display: none; font-size: 12px; font-weight: 500; line-height: 1.3; margin-top: 4px; } .FormFieldErrorMessage.Visible { display: block; } .FormFieldTextArea { height: auto; min-height: 100px; padding: 10px 12px; resize: vertical; } .FormFieldCheckbox { accent-color: var(--Admin-ControlColor); height: 20px; width: 20px; } /* ============================================ Checkbox selector — a box beside its label, with optional help text under the label ============================================
…
. The box stays the real input (appearance: none), so it keeps its semantics and keyboard operation. Hovering the label counts as hovering the box. */ .FormFieldForCheckBox .FormFieldLabel { align-items: flex-start; cursor: pointer; display: flex; gap: var(--Admin-CheckboxGap); margin: 0; } .FormFieldForCheckBox .FormFieldLabel input[type="checkbox"] { appearance: none; background-color: var(--Admin-CheckboxBg); background-position: center; background-repeat: no-repeat; border: 1px solid var(--Admin-CheckboxBorderColor); border-radius: var(--Admin-CheckboxRadius); box-sizing: border-box; cursor: pointer; flex: 0 0 var(--Admin-CheckboxSize); height: var(--Admin-CheckboxSize); margin: 0; width: var(--Admin-CheckboxSize); } .FormFieldForCheckBox .FormFieldLabel:hover input[type="checkbox"] { background-color: var(--Admin-CheckboxHoverBg); } /* After the hover rule, at the same specificity, so a checked box keeps its fill on hover. */ .FormFieldForCheckBox .FormFieldLabel input[type="checkbox"]:checked { background-color: var(--Admin-CheckboxCheckedBg); background-image: var(--Admin-CheckboxCheckedIcon); border-color: var(--Admin-CheckboxCheckedBg); } .FormFieldForCheckBox .FormFieldLabel input[type="checkbox"]:focus-visible { box-shadow: var(--Admin-CheckboxFocusShadow); outline: none; } .FormFieldForCheckBox .FormFieldHelp { margin-left: calc(var(--Admin-CheckboxSize) + var(--Admin-CheckboxGap)); } /* ============================================ Toggle Switch — WJ Rocket Pattern ============================================ Either a real checkbox (role="switch", :checked) or a div synced to a hidden input (.ToggleActive, ScaffoldFormsAndNavigation.js). */ .ToggleField { align-items: center; display: flex; gap: 10px; margin-top: 8px; } .ToggleSwitch { appearance: none; background: var(--Admin-Neutral03); border: 1px solid var(--Admin-Neutral03); border-radius: 13px; cursor: pointer; flex-shrink: 0; height: 26px; margin: 0; position: relative; transition: background var(--Admin-Transition); width: 50px; } .ToggleSwitch:focus-visible { box-shadow: var(--Admin-FocusRingBoxShadow); outline: none; } .ToggleSwitch::before { background: var(--Admin-White); border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2); content: ""; height: 20px; left: 2px; position: absolute; top: 2px; transition: left var(--Admin-Transition); width: 20px; } .ToggleSwitch.ToggleActive, .ToggleSwitch:checked { background: var(--Admin-ToggleOnColor); border-color: var(--Admin-ToggleOnColor); } .ToggleSwitch.ToggleActive::before, .ToggleSwitch:checked::before { left: 26px; } .ToggleLabel { color: var(--Admin-Neutral06); font-size: 13px; font-weight: 600; } .ToggleLabel.ToggleLabelActive { color: var(--Admin-ControlColor); } .ToggleLabel.ToggleLabelInactive { color: var(--Admin-Neutral05); } .FormButtons { border-top: 1px solid var(--Admin-Neutral03); display: flex; gap: 12px; padding: 20px 24px; } .FormButtonSubmit { background: var(--Admin-PrimaryButton); border: none; border-radius: 20px; color: var(--Admin-OnBrand); cursor: pointer; font-family: var(--Admin-FontFamily); font-size: 14px; font-weight: 600; height: 40px; padding: 0 24px; transition: background var(--Admin-Transition); } .FormButtonSubmit:hover { background: var(--Admin-PrimaryButtonHover); } /* ============================================ Auth Pages (Login / Forgot / Reset / Logout) ============================================ */ .AuthBody { background: radial-gradient(ellipse 1200px 600px at 50% -200px, rgba(82, 143, 204, 0.18), transparent 70%), linear-gradient(180deg, var(--Admin-Neutral01) 0%, var(--Admin-Neutral02) 100%); color: var(--Admin-Neutral07); font-family: var(--Admin-FontFamily); margin: 0; min-height: 100vh; } /* Floating theme toggle in the top-right on auth pages (no sidebar/header exists on those shells). Same behavior as the header/sidebar toggles: click flips data-theme on and saves to localStorage. */ .AuthThemeToggle { background: transparent; border: 1px solid var(--Admin-Neutral03); border-radius: 6px; color: var(--Admin-Neutral06); cursor: pointer; font-size: 15px; line-height: 1; padding: 6px 10px; position: fixed; right: 16px; top: 16px; transition: background var(--Admin-Transition), color var(--Admin-Transition), border-color var(--Admin-Transition); z-index: 100; } .AuthThemeToggle:hover { background: var(--Admin-Neutral02); border-color: var(--Admin-Neutral04); color: var(--Admin-Neutral07); } .AuthThemeToggle:focus-visible { outline: 2px solid var(--Admin-PrimaryButton); outline-offset: 2px; } .AuthMain { align-items: center; box-sizing: border-box; display: flex; justify-content: center; min-height: 100vh; padding: 24px 16px; } .LoginPage { align-items: center; display: flex; justify-content: center; width: 100%; } .LoginCard { background: var(--Admin-White); border-radius: 10px; box-shadow: 0 1px 2px rgba(20, 40, 70, 0.04), 0 8px 24px rgba(20, 40, 70, 0.10), 0 24px 48px -12px rgba(20, 40, 70, 0.12); max-width: 400px; overflow: hidden; padding: 40px 36px 32px; position: relative; width: 100%; } /* Brand accent stripe at the top of the card */ .LoginCard::before { background: linear-gradient(90deg, var(--Admin-PrimaryButton), var(--Admin-SecondaryButton)); content: ""; height: 4px; left: 0; position: absolute; right: 0; top: 0; } .LoginBrand { margin-bottom: 28px; text-align: center; } .LoginMark { align-items: center; background: rgba(82, 143, 204, 0.12); border-radius: 50%; box-sizing: border-box; color: var(--Admin-PrimaryButton); display: inline-flex; height: 48px; justify-content: center; margin-bottom: 12px; padding: 10px; width: 48px; } .LoginLogo { /* Neutral07 flips cleanly (dark text light, light text dark) — SidebarBg was tuned for contrast against white, not for use as text. */ color: var(--Admin-Neutral07); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 4px; } .LoginSubtitle { color: var(--Admin-Neutral06); font-size: 14px; line-height: 1.4; margin: 0; } .LoginCard .FormField { margin-bottom: 18px; } .LoginCard .FormFieldInput { /* Neutral04 gives enough contrast against Neutral-White in both modes; Neutral03 was too low-contrast on the dark card background. */ border: 1px solid var(--Admin-Neutral04); border-radius: 6px; font-size: 15px; height: 44px; transition: border-color var(--Admin-Transition), box-shadow var(--Admin-Transition); } .LoginCard .FormFieldInput:hover { border-color: var(--Admin-Neutral04); } .LoginCard .FormFieldInput:focus { border-color: var(--Admin-PrimaryButton); box-shadow: 0 0 0 3px rgba(82, 143, 204, 0.25); outline: none; } .LoginCard .FormFieldInput::placeholder { color: var(--Admin-Neutral04); font-weight: 400; } .LoginCard .FormFieldInput.FieldInvalid { border-color: var(--Admin-ErrorColor); box-shadow: 0 0 0 3px rgba(225, 34, 58, 0.15); } .LoginCard .FormButtonSubmit { background: var(--Admin-PrimaryButtonHover); border-radius: 24px; font-size: 15px; font-weight: 600; height: 46px; margin-top: 8px; position: relative; transition: background var(--Admin-Transition), transform 0.05s ease, box-shadow var(--Admin-Transition); width: 100%; } .LoginCard .FormButtonSubmit:hover:not(:disabled) { background: #2f5f8c; box-shadow: 0 4px 12px rgba(60, 116, 170, 0.35); } .LoginCard .FormButtonSubmit:active:not(:disabled) { transform: translateY(1px); } .LoginCard .FormButtonSubmit:focus-visible { box-shadow: 0 0 0 3px rgba(82, 143, 204, 0.45); outline: none; } .LoginCard .FormButtonSubmit:disabled { cursor: progress; opacity: 0.85; } .FormButtonSubmit .ButtonLabel { display: inline; } .FormButtonSubmit .ButtonLoadingLabel { display: none; } .FormButtonSubmit.ButtonLoading .ButtonLabel { display: none; } .FormButtonSubmit.ButtonLoading .ButtonLoadingLabel { align-items: center; display: inline-flex; gap: 8px; } .FormButtonSubmit.ButtonLoading .ButtonLoadingLabel::before { animation: AuthSpin 0.7s linear infinite; border: 2px solid rgba(255, 255, 255, 0.45); border-radius: 50%; border-top-color: #ffffff; content: ""; display: inline-block; height: 14px; width: 14px; } /* When a submit button uses the inline .ButtonLoadingLabel pattern, suppress the generic .ButtonLoading::after spinner and color-transparent rule from Components.css so we don't stack two spinners. */ .FormButtonSubmit.ButtonLoading:has(.ButtonLoadingLabel) { color: #ffffff !important; pointer-events: none; } .FormButtonSubmit.ButtonLoading:has(.ButtonLoadingLabel)::after { content: none; display: none; } @keyframes AuthSpin { to { transform: rotate(360deg); } } .LoginFooter { font-size: 13px; margin-bottom: 0; margin-top: 20px; text-align: center; } .LoginFooter a { border-radius: 2px; color: var(--Admin-PrimaryButton); font-weight: 600; text-decoration: none; } .LoginFooter a:hover { color: var(--Admin-PrimaryButtonHover); text-decoration: underline; } .LoginFooter a:focus-visible { outline: 2px solid var(--Admin-PrimaryButton); outline-offset: 3px; } .LogoutMessage { color: var(--Admin-Neutral06); font-size: 15px; margin-bottom: 0; text-align: center; } /* Error alert */ .LoginError { background: #fbe9e7; border: 1px solid rgba(225, 34, 58, 0.4); border-left: 3px solid var(--Admin-ErrorColor); border-radius: 6px; color: #a81d2f; display: none; font-size: 13px; font-weight: 600; line-height: 1.4; margin-bottom: 16px; padding: 12px 14px 12px 40px; position: relative; } .LoginError.Visible { display: block; } .LoginError::before { color: var(--Admin-ErrorColor); content: "\26A0"; font-size: 16px; left: 12px; line-height: 1; /* ⚠ warning sign */ position: absolute; top: 50%; transform: translateY(-50%); } /* Field-level error */ .LoginCard .FormFieldErrorMessage { color: var(--Admin-ErrorColor); display: none; font-size: 12px; font-weight: 600; margin-top: 6px; } .LoginCard .FormFieldErrorMessage.Visible { display: block; } /* Password field with visibility toggle */ .PasswordField { position: relative; } .PasswordField .FormFieldInput { padding-right: 44px; } .PasswordToggle { align-items: center; background: transparent; border: none; border-radius: 50%; color: var(--Admin-Neutral05); cursor: pointer; display: inline-flex; height: 36px; justify-content: center; padding: 0; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); transition: color var(--Admin-Transition), background var(--Admin-Transition); width: 36px; } .PasswordToggle:hover { background: rgba(82, 143, 204, 0.08); color: var(--Admin-PrimaryButton); } .PasswordToggle:focus-visible { box-shadow: 0 0 0 3px rgba(82, 143, 204, 0.25); color: var(--Admin-PrimaryButton); outline: none; } .PasswordToggle .PasswordEye { display: inline-block; } .PasswordToggle .PasswordEyeOff { display: none; } .PasswordToggle[aria-pressed="true"] .PasswordEye { display: none; } .PasswordToggle[aria-pressed="true"] .PasswordEyeOff { display: inline-block; } /* Caps lock indicator */ .CapsLockWarning { background: #fff6d6; border: 1px solid #e7c870; border-radius: 4px; color: #8a6410; display: none; font-size: 12px; font-weight: 600; margin-top: 6px; padding: 4px 10px; } .CapsLockWarning.Visible { display: inline-block; } /* ============================================ Form Feedback ============================================ */ .FormSuccessMessage { background: #e8f5e9; border: 1px solid #4caf50; border-radius: 6px; color: #2e7d32; font-size: 14px; font-weight: 600; margin-bottom: 16px; padding: 16px 20px; } /* Inline success state — replaces form fields after successful submission */ .FormSuccessInline { padding: 24px 16px; text-align: center; } .FormSuccessIcon { align-items: center; background: #e8f5e9; border-radius: 50%; color: #2e7d32; display: inline-flex; font-size: 24px; height: 48px; justify-content: center; margin-bottom: 12px; width: 48px; } .FormSuccessText { color: var(--Admin-Neutral07); font-size: 15px; font-weight: 500; line-height: 1.5; } .FormErrors { background: #fbe9e7; border: 1px solid var(--Admin-ErrorColor); border-radius: 6px; color: #c62828; font-size: 13px; font-weight: 500; line-height: 1.5; margin-bottom: 16px; padding: 14px 20px; } .FormSuccessMessage + .FormErrors, .FormErrors:empty { display: none; } /* ============================================ Child-form collections — shared patterns ============================================ Section-level help text shown under a FormGroup title. Distinct from per-field FormFieldHelp (which sits under individual fields). */ .FormGroupHelp { color: var(--Admin-Neutral06); font-size: 13px; line-height: 1.5; margin: 0 0 16px 0; } /* ============================================ Child-form: Card layout (FeatureRow) ============================================ Each row is a bordered card so the boundary between rows is visually obvious and the action buttons sit clearly inside their row. Fields stack vertically on the left, actions align at top-right. */ .FeaturesGroup .FormGroupContent > button[data-turbo-action="add"] { margin-top: 8px; } #FeaturesList { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; } .FeatureRow { align-items: start; background: var(--Admin-White); border: 1px solid var(--Admin-Neutral03); border-radius: 4px; display: grid; gap: 16px; grid-template-columns: 1fr auto; padding: 16px; } .FeatureRowFields { display: flex; flex-direction: column; gap: 12px; min-width: 0; /* prevent grid blow-out with long text */ } /* Collapse the inner .FormField bottom margin so the field gap above is the sole spacer. */ .FeatureRowFields .FormField { margin: 0; } .FeatureRowActions { align-items: flex-start; display: flex; gap: 4px; /* Nudge down slightly so the buttons align with the first field's input (not its label). */ padding-top: 22px; } /* ============================================ Child-form: Table-row layout (SpecRow) ============================================ For flat name/value pairs where a card feels heavyweight. The collection container is a so rows are inside a . Semantic, compact, still works with the runtime's add/remove/move verbs. */ .SpecsTable { border-collapse: collapse; margin-bottom: 12px; width: 100%; } .SpecsTable thead th { border-bottom: 1px solid var(--Admin-Neutral03); color: var(--Admin-Neutral06); font-size: 12px; font-weight: 600; letter-spacing: 0.5px; padding: 0 12px 8px 12px; text-align: left; text-transform: uppercase; } .SpecsTable thead th.SpecActionsCol { white-space: nowrap; width: 1%; } .SpecsTable tbody tr.SpecRow { border-bottom: 1px solid var(--Admin-Neutral02); transition: background-color 120ms ease; } .SpecsTable tbody tr.SpecRow:last-child { border-bottom: none; } .SpecsTable tbody tr.SpecRow:hover { background: var(--Admin-Neutral01); } .SpecsTable tbody td { padding: 8px 12px; vertical-align: middle; } .SpecsTable tbody td.FormTableRowActionsCell { white-space: nowrap; width: 1%; } .SpecsTable .FormField { margin: 0; } /* The table header already labels the column — hide per-cell labels from the compact rendering. Still readable by screen readers since aria-label on inputs carries the name. */ .SpecsTable .FormField .FormFieldLabel { display: none; } .SpecsTable .FormTableRowActions { display: flex; gap: 4px; justify-content: flex-end; } /* Dim no-op reorder buttons at the ends of a collection. Runtime still lets the click through — this is a visual hint only. Apply to both the card layout (FeatureRow) and the table layout (SpecRow) so the two sections feel consistent. */ #FeaturesList .FeatureRow:first-child button[data-turbo-action="move-up"], #FeaturesList .FeatureRow:last-child button[data-turbo-action="move-down"], .SpecsTable tbody tr.SpecRow:first-child button[data-turbo-action="move-up"], .SpecsTable tbody tr.SpecRow:last-child button[data-turbo-action="move-down"] { cursor: not-allowed; opacity: 0.25; } /* Empty-state markup for child collections. Template always emits the EmptyState element; CSS hides it as soon as any .FeatureRow / tr.SpecRow siblings exist. Uses CSS :has() so the hide/show updates automatically on runtime add/remove — no JS involved. Reappears if the user removes the last row. */ .EmptyState { color: var(--Admin-Neutral06); font-style: italic; margin: 0; padding: 16px; text-align: center; } #FeaturesList:has(.FeatureRow) > .EmptyState { display: none; } .SpecsTable tbody:has(tr.SpecRow) > tr.EmptyStateRow { display: none; } .SpecsTable tbody tr.EmptyStateRow > td { border-bottom: none; padding: 0; } /* ============================================ Upload — single-file uploader (Templates/Form/Upload.tpl, JS/Upload.js) ============================================ One row, after the WJ admin's uploader: a square image tile, a dashed drop zone, then an icon-only "Choose a file" button. Every box keeps its size through the upload. The tile is always there, the zone is the tile's height. "Drop a file here" is centred in it, and moves up to make room when the status line below it shows the progress bar, the file name or an error (Evan's call). Under 480px wide the zone moves onto its own line below the tile and the button, and the button shows its "Choose a file" label. */ /* A grid item's min-width is its content, so a long file name would widen the FormRow instead of truncating. */ .FormFieldForUpload { min-width: 0; } .FormFieldUpload { container-type: inline-size; position: relative; } .UploadFileInput { height: 0; left: -9999px; opacity: 0; position: absolute; width: 0; } .UploadRow { align-items: center; display: flex; gap: 16px; } /* White behind the image with a light border, so a white or transparent logo still reads as a tile on the page. JS shows .UploadPreview inside it only when there's an image; until then the tile shows the placeholder (Sketch Form/Upload/No Image), its square centred on the placeholder grey. The tile is as tall as the drop zone; its width comes from the aspect-ratio token. */ .UploadThumb { aspect-ratio: var(--Admin-UploadThumbAspectRatio); background: var(--Admin-White); border: 1px solid var(--Admin-UploadThumbBorderColor); border-radius: var(--Admin-Radius); flex: none; height: var(--Admin-UploadThumbSize); overflow: hidden; } .UploadThumb:has(> .UploadPreview[hidden]) { background: var(--Admin-UploadPlaceholderBg) url(/Images/UploadNoImage.svg) center / contain no-repeat; } .UploadPreview, .UploadPreviewLink { display: block; height: 100%; width: 100%; } .UploadPreviewLink:focus-visible { box-shadow: inset var(--Admin-FocusRingBoxShadow); outline: none; } /* Logos vary in shape, so the image fits inside the tile uncropped. */ .UploadPreviewImage { display: block; height: 100%; object-fit: contain; width: 100%; } .UploadDropZone { align-items: center; background: var(--Admin-White); border: 2px dashed var(--Admin-UploadBorderColor); border-radius: var(--Admin-Radius); display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; height: var(--Admin-UploadThumbSize); justify-content: center; min-width: 0; padding: 0 16px; transition: background var(--Admin-Transition), border-color var(--Admin-Transition); } .UploadDropZone.UploadDropZoneActive { background: var(--Admin-UploadDropActiveBg); border-color: var(--Admin-FocusColor); } .UploadDropHint { align-items: center; color: var(--Admin-Neutral06); display: flex; font-size: 14px; gap: 4px; line-height: 20px; } /* Sketch Icon/Download at the 16px "Drop Files Here" size. */ .UploadDropHintIcon { flex: none; height: 16px; width: 16px; } /* Out of the layout until something in it shows, so the hint stays centred. Its height fits the remove button, the tallest thing in it. */ .UploadStatus { align-items: center; display: none; height: 32px; justify-content: center; max-width: 100%; } .UploadStatus:has(> :not([hidden])) { display: flex; } .UploadResult { align-items: center; display: flex; gap: 4px; min-width: 0; } /* Poppins sits its capitals high in the line box. Centred as is, a lowercase file name lines up with the remove icon but "Current file" reads 2px high; 1px down splits the difference. */ .UploadResultName { color: var(--Admin-Black); font-size: 14px; line-height: 20px; min-width: 0; overflow: hidden; position: relative; text-overflow: ellipsis; top: 1px; white-space: nowrap; } .UploadRemove { color: var(--Admin-Neutral06); flex: none; height: 32px; width: 32px; } /* Sketch Icon/Close */ .UploadRemoveIcon { height: 16px; width: 16px; } .UploadProgress { max-width: 320px; width: 100%; } .UploadProgressBar { background: var(--Admin-Neutral03); border-radius: 4px; height: 8px; overflow: hidden; position: relative; width: 100%; } .UploadProgressBar::after { background: var(--Admin-PrimaryButton); content: ""; height: 100%; left: 0; position: absolute; top: 0; transition: width 0.2s ease-out; width: var(--upload-progress, 0%); } .UploadProgressLabel { color: var(--Admin-Neutral06); display: block; font-size: 12px; line-height: 16px; margin-top: 4px; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; } /* Two lines at most, so a long message can't grow the zone. */ .UploadError { -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--Admin-ErrorColor); display: -webkit-box; font-size: 12px; font-weight: 500; line-height: 16px; overflow: hidden; text-align: center; } .UploadBrowseButton { flex: none; padding: 0; width: var(--Admin-ButtonHeight); } .UploadIcon { flex: none; height: 24px; width: 24px; } /* Shown only once the row stacks; the button carries an aria-label either way. */ .UploadBrowseLabel { display: none; } .UploadError[hidden], .UploadPreview[hidden], .UploadProgress[hidden], .UploadResult[hidden] { display: none !important; } @container (max-width: 479px) { .UploadRow { flex-wrap: wrap; justify-content: space-between; } .UploadDropZone { flex-basis: 100%; order: 1; } /* Fills the space beside the tile, or takes a line of its own when there isn't room for its label. */ .UploadBrowseButton { flex: 1 0 auto; gap: 8px; padding: 0 16px; width: auto; } .UploadBrowseLabel { display: inline; } } /* ============================================ Scaffold — Table Listings ============================================ */ .ScaffoldIndex { padding: 0 0 40px; } .ScaffoldFilters { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-bottom: 16px; } .ScaffoldFilters input[type="text"], .ScaffoldFilters select { border: 1px solid var(--Admin-Neutral04); border-radius: 3px; font-family: var(--Admin-FontFamily); font-size: 13px; height: 32px; padding: 0 10px; } .ScaffoldFilters .FilterButton { background: var(--Admin-SecondaryButton); border: none; border-radius: 3px; color: var(--Admin-OnBrand); cursor: pointer; font-family: var(--Admin-FontFamily); font-size: 11px; font-weight: 700; height: 32px; padding: 0 14px; text-transform: uppercase; } .ScaffoldFilters .FilterButton:hover { background: #5bc0bc; } .ScaffoldTableWrapper { background: var(--Admin-White); border-radius: var(--Admin-Radius); box-shadow: 0 1px 3px rgba(0,0,0,0.08); overflow-x: auto; } .ScaffoldTable { border-collapse: collapse; min-width: 640px; width: 100%; } .ScaffoldTable thead th { background: var(--Admin-ScaffoldHeaderBg); border-bottom: none; color: var(--Admin-ScaffoldHeaderColor); font-size: 16px; font-weight: 700; height: 50px; letter-spacing: 0.5px; padding: 0 24px; text-align: left; text-transform: uppercase; white-space: nowrap; } /* Sortable header columns */ .ScaffoldTable thead th[data-sort] { cursor: pointer; transition: background var(--Admin-Transition), color var(--Admin-Transition); user-select: none; } .ScaffoldTable thead th[data-sort]:hover { background: var(--Admin-PillHoverBg); } /* The arrow is a real element (.SortArrowIcon), not generated content, so it can be a CSS mask icon: shown only on the currently sorted column, rotated for asc/desc — not a static ↕ on every sortable header. */ .SortArrowIcon { display: inline-block; height: 12px; margin-left: 6px; vertical-align: middle; width: 12px; } .ScaffoldTable thead th:first-child { border-radius: var(--Admin-Radius) 0 0 0; } .ScaffoldTable thead th:last-child { border-radius: 0 var(--Admin-Radius) 0 0; } .ScaffoldTable tbody td { border-bottom: 1px solid var(--Admin-ScaffoldRowDivider); font-size: 14px; height: 72px; padding: 12px 24px; vertical-align: middle; } /* Desktop only: at ≤640 rows are cards (Responsive.css), and this rule's (0,2,3) would strip the last card's dashed field dividers. */ @media (min-width: 641px) { .ScaffoldTable tbody tr:last-child td { border-bottom: none; } } .ScaffoldRowActions { align-items: center; display: flex; gap: 0; justify-content: flex-start; white-space: nowrap; } /* Icon buttons in scaffold rows: 16px mask icons in 40px hit areas, which is a comfortable finger target. The buttons touch (no gap), so the icons keep the design's 40px pitch. Hover/focus-visible mirror the shell's .IconButton pattern (a tint, then the shared focus ring). */ .ScaffoldRowActions a, .ScaffoldRowActions button { align-items: center; background: transparent; border: none; border-radius: var(--Admin-Radius); cursor: pointer; display: inline-flex; height: 40px; justify-content: center; padding: 0; transition: background var(--Admin-Transition); width: 40px; } .RowActionIcon { background: var(--Admin-RowActionIconColor); display: inline-block; height: 16px; width: 16px; } .ScaffoldRowActions a:hover, .ScaffoldRowActions button:hover { background: var(--Admin-IconButtonHoverBg); } .ScaffoldRowActions a:focus-visible, .ScaffoldRowActions button:focus-visible { box-shadow: var(--Admin-FocusRingBoxShadow); outline: none; } /* Pressed: the Outline Button's Active state, inverted (a solid fill with the icon knocked out). (0,3,1) on the icon beats the .ActionDanger rule below. */ .ScaffoldRowActions a:active, .ScaffoldRowActions button:active { background: var(--Admin-RowActionActiveBg); } .ScaffoldRowActions a:active .RowActionIcon, .ScaffoldRowActions button:active .RowActionIcon { background: var(--Admin-RowActionIconActiveColor); } .ScaffoldRowActions .ActionDanger .RowActionIcon { background: var(--Admin-RowActionIconColor); } /* Pagination */ .ScaffoldPagination { align-items: center; display: flex; font-size: 15px; font-weight: 700; gap: 8px; justify-content: center; padding: 20px 0; } .ScaffoldPagination a, .ScaffoldPagination span { align-items: center; border-radius: 50%; display: inline-flex; height: 40px; justify-content: center; min-width: 40px; padding: 0; text-decoration: none; } .ScaffoldPagination a { color: var(--Admin-PrimaryButton); } .ScaffoldPagination a:hover { background: var(--Admin-PagerHoverBg); } .ScaffoldPagination a:focus-visible, .ScaffoldPagination span.PaginationArrow:focus-visible { box-shadow: var(--Admin-FocusRingBoxShadow); outline: none; } .ScaffoldPagination .PaginationActive { background: var(--Admin-PrimaryButton); color: var(--Admin-OnBrand); } .PaginationArrowIcon { background: currentColor; display: inline-block; height: 20px; width: 20px; } .PaginationPrev .PaginationArrowIcon { transform: scaleX(-1); } .PaginationDisabled.PaginationArrow { color: var(--Admin-PagerDisabledColor); } /* Status badges — one modifier class per ApprovalStatusID (StatusBadgeStatus1 = Pending, 2 = Approved, 3 = Suspended), mapped to generic semantic tokens (Info/Success/Danger) so Redstone stays status-vocabulary-neutral while Think Charity supplies the actual colours. */ .StatusBadge { align-items: center; border-radius: var(--Admin-Radius); border-style: solid; border-width: 1px; display: inline-flex; font-size: 16px; font-weight: 900; height: 24px; justify-content: center; text-transform: uppercase; width: 104px; } .StatusBadgeStatus1 { background: var(--Admin-StatusBadgeInfoFill); border-color: var(--Admin-StatusBadgeInfoBorder); color: var(--Admin-StatusBadgeInfoText); } .StatusBadgeStatus2 { background: var(--Admin-StatusBadgeSuccessFill); border-color: var(--Admin-StatusBadgeSuccessBorder); color: var(--Admin-StatusBadgeSuccessText); } .StatusBadgeStatus3 { background: var(--Admin-StatusBadgeDangerFill); border-color: var(--Admin-StatusBadgeDangerBorder); color: var(--Admin-StatusBadgeDangerText); } /* ============================================ Striped Table Rows ============================================ */ /* Striping + hover use neutral CSS vars so they flip cleanly in dark mode. Neutral02 is the "one step from background" tint; Neutral03 the next step. On light theme that's #ededed / #e3e3e3; on dark, #242a33 / #2d343e. Think Charity's design has flat white rows with divider lines instead — left as-is here since Redstone is meant to be reusable and a future project may still want the zebra; see ThinkCharity/Shell.css, which overrides both to white/neutral for this brand instead of deleting or changing this rule. */ .ScaffoldTable tbody tr:nth-child(even) { background: var(--Admin-ScaffoldRowAlternateBg); } .ScaffoldTable tbody tr:hover { background: var(--Admin-ScaffoldRowHoverBg); } /* Name cell link — primary row click target */ .ScaffoldTable .ScaffoldRowLink { color: var(--Admin-Black); font-weight: 700; text-decoration: none; } .ScaffoldTable .ScaffoldRowLink:hover { color: var(--Admin-PrimaryButton); text-decoration: underline; } /* A list link shows what it does (edit, view, open the site) on hover and focus: an icon after the text, sized to the text. Its negative margin cancels its width, so it never moves or wraps the text; it runs into the cell's padding instead. The modifier class sets the mask. On the ≤640 cards the icon moves before right-aligned values (Responsive.css), so ::before carries the same icon, hidden here. */ .ScaffoldLinkIcon::after, .ScaffoldLinkIcon::before { background: currentColor; content: ""; display: inline-block; height: 0.875em; mask-position: center; mask-repeat: no-repeat; mask-size: contain; opacity: 0; pointer-events: none; transition: opacity var(--Admin-Transition); vertical-align: -0.0625em; width: 0.875em; } .ScaffoldLinkIcon::after { margin-left: 0.25em; margin-right: -1.125em; } .ScaffoldLinkIcon::before { display: none; margin-left: -1.125em; margin-right: 0.25em; } .ScaffoldLinkIcon:focus-visible::after, .ScaffoldLinkIcon:focus-visible::before, .ScaffoldLinkIcon:hover::after, .ScaffoldLinkIcon:hover::before { opacity: 1; } /* ============================================ Fragment loading state — shown while /xhr/render/ is in flight ============================================ */ /* The fragment target gets .ScaffoldFragmentLoading while fetching. Dim the existing content and overlay a thin progress bar along the top so the user has immediate feedback. The existing DOM stays in place until the response arrives, avoiding layout thrash. */ .ScaffoldFragmentTarget { position: relative; transition: opacity var(--Admin-Transition); } .ScaffoldFragmentTarget.ScaffoldFragmentLoading { opacity: 0.6; pointer-events: none; } .ScaffoldFragmentTarget.ScaffoldFragmentLoading::after { animation: scaffoldFragmentProgress 1s linear infinite; background: linear-gradient( 90deg, transparent 0%, var(--Admin-PrimaryButton) 40%, var(--Admin-PrimaryButton) 60%, transparent 100% ); background-repeat: no-repeat; background-size: 40% 100%; content: ""; height: 3px; left: 0; position: absolute; right: 0; top: 0; z-index: 3; } @keyframes scaffoldFragmentProgress { 0% { background-position: -50% 0; } 100% { background-position: 150% 0; } } /* ============================================ Empty state — totally-empty table, zero records AND no filter applied. Distinct from .ScaffoldNoResults (filtered-empty). Rendered by each list's body template when List.Records.IsEmpty and no filter is active. ============================================ */ .ScaffoldEmptyState { background: var(--Admin-White); border-radius: var(--Admin-Radius); box-shadow: 0 1px 3px rgba(0,0,0,0.06); color: var(--Admin-Neutral06); font-family: var(--Admin-FontFamily); padding: 48px 24px; text-align: center; } .ScaffoldEmptyStateTitle { color: var(--Admin-Neutral07); font-size: 17px; font-weight: 600; margin-bottom: 6px; } .ScaffoldEmptyStateText { font-size: 13px; line-height: 1.5; margin-bottom: 20px; } .ScaffoldEmptyState .Button { margin: 0 4px; } /* ============================================ Scaffold Toolbar (search + filter) ============================================ */ .ScaffoldToolbar { align-items: center; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; margin-bottom: 24px; } .ScaffoldToolbarLeft { align-items: center; display: flex; flex-wrap: wrap; gap: 16px; } .ScaffoldToolbarRight { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; } .ScaffoldSearchForm { align-items: center; display: flex; gap: 8px; margin: 0; } .ScaffoldSearch { position: relative; } .ScaffoldSearch input { background: var(--Admin-White); border: 1px solid var(--Admin-Neutral04); border-radius: var(--Admin-Radius); font-family: var(--Admin-FontFamily); font-size: 16px; height: 48px; padding: 0 16px; transition: background var(--Admin-Transition), border-color var(--Admin-Transition), box-shadow var(--Admin-Transition); width: 271px; } .ScaffoldSearch input:hover { background: var(--Admin-ScaffoldSearchHoverBg); } .ScaffoldSearch input:focus { border-color: var(--Admin-FocusColor); box-shadow: var(--Admin-FocusRingBoxShadow); outline: none; } .GoButton { align-items: center; background: var(--Admin-PrimaryButton); border: none; border-radius: var(--Admin-Radius); color: var(--Admin-FocusColor); cursor: pointer; display: inline-flex; font-family: var(--Admin-FontFamily); font-size: 21px; font-weight: 900; height: 48px; justify-content: center; padding: 0; transition: background var(--Admin-Transition); width: 48px; } .GoButton:hover { background: var(--Admin-PrimaryButtonHover); } .GoButton:active { background: var(--Admin-PrimaryButtonActive); } .GoButton:focus-visible { box-shadow: var(--Admin-FocusRingBoxShadow); outline: none; } .ScaffoldSearchIcon { color: var(--Admin-Neutral05); left: 10px; pointer-events: none; position: absolute; top: 50%; transform: translateY(-50%); } .ScaffoldFilterChip { align-items: center; background: var(--Admin-PillBg); border: 1px solid var(--Admin-PillBorder); border-radius: 16px; color: var(--Admin-PillColor); cursor: pointer; display: inline-flex; font-size: 16px; font-weight: 700; height: 32px; justify-content: center; min-width: 80px; padding: 0 14px; text-transform: uppercase; transition: background var(--Admin-Transition), color var(--Admin-Transition), border-color var(--Admin-Transition); } .ScaffoldFilterChip:hover { background: var(--Admin-PillHoverBg); } .ScaffoldFilterChip:focus-visible { box-shadow: var(--Admin-FocusRingBoxShadow); outline: none; } .ScaffoldFilterChip.Active { background: var(--Admin-PrimaryButton); border-color: var(--Admin-PrimaryButton); color: var(--Admin-OnBrand); } .ScaffoldFilterChipCount { font-size: 11px; margin-left: 6px; opacity: 0.75; } /* No-results state after filtering */ .ScaffoldNoResults { background: var(--Admin-White); color: var(--Admin-Neutral05); display: none; font-family: var(--Admin-FontFamily); font-size: 14px; font-style: italic; padding: 40px 20px; text-align: center; } .ScaffoldNoResults.Visible { display: block; } /* An empty list shows only its message, without the column headers */ .ScaffoldTableWrapper:has(> .ScaffoldEmptyState, > .ScaffoldNoResults.Visible) > .ScaffoldTable { display: none; } /* Table row fade-hide for filtered rows (keeps layout stable during re-sort/filter) */ .ScaffoldTable tbody tr[hidden] { display: none; } /* Per-page selector + row count */ .ScaffoldPageSize { align-items: center; color: var(--Admin-Neutral06); display: inline-flex; font-size: 12px; gap: 6px; } .ScaffoldPageSize select { border: 1px solid var(--Admin-Neutral03); border-radius: 4px; font-family: var(--Admin-FontFamily); font-size: 12px; height: 28px; padding: 0 6px; } .ScaffoldRowRange { color: var(--Admin-CopyrightColor); font-family: var(--Admin-FontFamily); font-size: 14px; } .ScaffoldPagination a { cursor: pointer; } .ScaffoldPagination .PaginationDisabled { pointer-events: none; } /* Pager bar — page-size + row range + pagination */ .ScaffoldPagerBar { align-items: center; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; margin-top: 24px; padding: 0; } .ScaffoldPagerBar .ScaffoldPagination { margin-left: auto; padding: 0; } /* Created/Modified column (relative time) */ .ScaffoldTable .ScaffoldDateCell { color: var(--Admin-Neutral05); font-size: 13px; white-space: nowrap; } /* ============================================ Dashboard ============================================ */ .Dashboard { padding: 24px 0 40px; } .DashboardWelcome { margin-bottom: 32px; } .DashboardWelcome h1 { font-size: 24px; font-weight: 300; margin-bottom: 8px; } .DashboardWelcome p { color: var(--Admin-Neutral05); font-size: 15px; } .DashboardGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; } .DashboardCard { background: var(--Admin-White); border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); overflow: hidden; } .DashboardCardHeader { padding: 16px 20px; border-bottom: 1px solid var(--Admin-Neutral03); display: flex; justify-content: space-between; align-items: center; } .DashboardCardHeader h3 { font-size: 14px; font-weight: 600; margin: 0; text-transform: uppercase; letter-spacing: 0.5px; color: var(--Admin-Neutral06); } .DashboardCardCount { font-size: 28px; font-weight: 700; color: var(--Admin-PrimaryButton); } .DashboardCardContent { padding: 16px 20px; } .DashboardCardRecord { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--Admin-Neutral02); font-size: 13px; } .DashboardCardRecord:last-child { border-bottom: none; } .DashboardCardRecordLink { text-decoration: none; color: inherit; transition: background var(--Admin-Transition); margin: 0 -20px; padding: 8px 20px; border-bottom: 1px solid var(--Admin-Neutral02); } .DashboardCardRecordLink:hover { background: var(--Admin-Neutral02); color: inherit; } .DashboardCardRecordLink:last-child { border-bottom: none; } .DashboardCardRecordName { color: var(--Admin-Neutral07); font-weight: 500; } .DashboardCardRecordDate { color: var(--Admin-Neutral05); font-size: 12px; } .DashboardCardFooter { padding: 12px 20px; border-top: 1px solid var(--Admin-Neutral03); text-align: center; } .DashboardCardFooter a { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } /* Stat cards */ .DashboardStatGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } .DashboardStat { background: var(--Admin-White); border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); padding: 20px; text-align: center; } .DashboardStatLink { display: block; text-decoration: none; color: inherit; transition: box-shadow var(--Admin-Transition), transform var(--Admin-Transition); } .DashboardStatLink:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); transform: translateY(-2px); color: inherit; } .DashboardStatValue { font-size: 36px; font-weight: 700; color: var(--Admin-PrimaryButton); line-height: 1; margin-bottom: 4px; } .DashboardStatLabel { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--Admin-Neutral05); } .DashboardStatMeta { margin-top: 6px; font-size: 12px; color: var(--Admin-Neutral05); } .DashboardStatMetaAlert { color: var(--Admin-PrimaryButton); font-weight: 600; } .DashboardStatMetaAlert:empty, .DashboardStatMeta:empty { display: none; } /* "0 new" / "0 inactive" meta lines are noise — hide them with :has or JS fallback */ .DashboardStatMeta[data-zero="true"] { display: none; } /* Panel header icon */ .DashboardCardIcon { display: inline-block; vertical-align: -3px; margin-right: 8px; color: var(--Admin-Neutral05); } .DashboardCardHeader h3 { display: flex; align-items: center; } /* Row layout: left side (name + NEW badge) / right side (meta + relative date) */ .DashboardCardRecordMain { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 1; } .DashboardCardRecordMeta { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-left: 12px; flex-shrink: 0; } /* NEW badge for unhandled submissions */ .NewBadge { display: inline-block; padding: 2px 7px; background: var(--Admin-PrimaryButton); color: #ffffff; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; border-radius: 10px; text-transform: uppercase; line-height: 1.3; flex-shrink: 0; } /* Relative date (populated by JS) */ .RelativeDate { color: var(--Admin-Neutral05); font-size: 11px; font-style: italic; } /* Dashboard card empty state (populated by JS) */ .DashboardCardEmpty { padding: 24px 8px; text-align: center; color: var(--Admin-Neutral05); font-size: 13px; font-style: italic; } @media (max-width: 640px) { .DashboardStatGrid { grid-template-columns: repeat(2, 1fr); } .DashboardCardRecordLink { flex-direction: column; align-items: flex-start; gap: 4px; } .DashboardCardRecordMeta { align-items: flex-start; flex-direction: row; margin-left: 0; gap: 12px; } } /* ============================================ Detail View ============================================ */ .DetailCard { background: var(--Admin-White); border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-bottom: 24px; } .DetailCardHeader { padding: 16px 24px; border-bottom: 1px solid var(--Admin-Neutral03); font-size: 16px; font-weight: 300; color: var(--Admin-Neutral07); } .DetailCardContent { padding: 24px; } .DetailGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .DetailFieldLabel { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--Admin-Neutral05); margin-bottom: 4px; } .DetailFieldValue { font-size: 15px; color: var(--Admin-Neutral07); } .DetailMessage { font-size: 15px; line-height: 1.7; color: var(--Admin-Neutral07); white-space: pre-wrap; } /* Date cells in tables */ .DateCell { font-size: 12px; color: var(--Admin-Neutral05); white-space: nowrap; } /* ============================================ Copyable Detail Fields ============================================ */ /* Wraps a value (email, phone, SKU, etc.) with a hidden copy icon that appears on hover. Click copies data-copy to the clipboard and flashes a small "Copied" tooltip. Wired by JS in Site.js. */ .CopyableValue { display: inline-flex; align-items: center; gap: 6px; position: relative; } .CopyableValue::after { content: "⎘"; /* UTF-8 copy glyph (U+2398) */ display: inline-block; color: var(--Admin-Neutral05); font-size: 14px; cursor: pointer; opacity: 0; transition: opacity var(--Admin-Transition), color var(--Admin-Transition); padding: 2px 4px; border-radius: 3px; user-select: none; } .CopyableValue:hover::after { opacity: 1; } .CopyableValue.Copied::after { content: "✓"; color: var(--Admin-SuccessColor, #2e7d32); opacity: 1; } /* Clicks bubble up; the whole field is the hit target for copy */ .CopyableValue { cursor: pointer; } .CopyableValue a { cursor: pointer; } /* ============================================ Page header title + inline status badge ============================================ */ .PageHeaderTitle .StatusBadge { vertical-align: middle; margin-left: 12px; font-size: 11px; } /* ============================================ Print styles ============================================ */ @media print { .Header, .Sidebar, .MobileOverlay, .NoPrint, .PageHeaderActions, .Breadcrumbs { display: none !important; } body { background: #ffffff; color: #000; } .AdminLayout { display: block; } .MainContent { margin-left: 0; } .DetailCard { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; } .DetailCardHeader { background: #f0f0f0; color: #000; } .PageHeader { border-bottom: 2px solid #000; margin-bottom: 20px; } .CopyableValue::after { display: none; } /* Show full URL inline for printed links */ a[href^="http"]::after, a[href^="mailto:"]::after, a[href^="tel:"]::after { content: " <" attr(href) ">"; font-size: 0.85em; color: #666; } } /* ============================================ Activity Panel (audit log history) ============================================ */ .ActivityPanel { background: var(--Admin-White); border: 1px solid var(--Admin-Neutral03); border-radius: 4px; margin-top: 24px; padding: 16px 24px; } .ActivityPanelHeader { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; border-bottom: 1px solid var(--Admin-Neutral03); padding-bottom: 8px; } .ActivityPanelHeader h3 { margin: 0; font-size: 14px; font-weight: 700; text-transform: uppercase; color: var(--Admin-Neutral06); letter-spacing: 0.5px; } .ActivityPanelSubtitle { font-size: 11px; color: var(--Admin-Neutral05); } .ActivityEmpty { padding: 16px 0; color: var(--Admin-Neutral05); font-style: italic; } .ActivityList { list-style: none; margin: 0; padding: 0; } .ActivityItem { border-left: 3px solid var(--Admin-Neutral03); padding: 8px 12px 12px; margin-bottom: 8px; } .ActivityItem[data-action="Created"] { border-left-color: #4caf50; } .ActivityItem[data-action="Updated"] { border-left-color: var(--Admin-PrimaryButton); } .ActivityItem[data-action="StatusChanged"] { border-left-color: #ff9800; } .ActivityItem[data-action="Deleted"] { border-left-color: var(--Admin-ErrorColor); } .ActivityItemHead { display: flex; gap: 12px; align-items: baseline; margin-bottom: 4px; } .ActivityAction { font-weight: 700; color: var(--Admin-Neutral07); font-size: 13px; } .ActivityTime { font-size: 11px; color: var(--Admin-Neutral05); margin-left: auto; } .ActivityUser { font-size: 11px; color: var(--Admin-Neutral06); background: var(--Admin-Neutral01); padding: 1px 8px; border-radius: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } .ActivityUserSystem { font-style: italic; color: var(--Admin-Neutral05); } .ActivityFieldChanges { margin: 0; padding: 8px 10px; background: var(--Admin-Neutral01); border-radius: 3px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; line-height: 1.5; color: var(--Admin-Neutral06); overflow-x: auto; white-space: pre-wrap; word-break: break-word; } /* ============================================ Toast Notifications ============================================ */ .ToastContainer { display: flex; flex-direction: column; gap: 8px; pointer-events: none; position: fixed; right: 24px; top: calc(var(--Admin-HeaderHeight) + 16px); z-index: 200; } /* On mobile, toasts drop below the fixed header but stay clear of the bottom-right FAB. Center-anchored bottom with safe-area inset for notched devices. */ @media (max-width: 640px) { .ToastContainer { align-items: center; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); left: 12px; right: 12px; top: auto; } @keyframes toastSlideIn { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } } } .Toast { animation: toastSlideIn 0.3s ease; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); font-size: 14px; font-weight: 600; max-width: 400px; padding: 14px 20px; pointer-events: auto; } .Toast.ToastSuccess { background: #2e7d32; color: var(--Admin-OnBrand); } .Toast.ToastError { background: var(--Admin-ErrorColor); color: var(--Admin-OnBrand); } .Toast.ToastFadeOut { animation: toastFadeOut 0.3s ease forwards; } @keyframes toastSlideIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } @keyframes toastFadeOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-10px); } } /* ============================================ Empty States ============================================ */ .EmptyState { color: var(--Admin-Neutral05); padding: 60px 20px; text-align: center; } .EmptyStateTitle { color: var(--Admin-Neutral06); font-size: 18px; font-weight: 600; margin-bottom: 8px; } .EmptyStateText { font-size: 14px; margin-bottom: 20px; } /* ============================================ Loading Button State ============================================ */ .ButtonLoading { color: transparent !important; pointer-events: none; position: relative; } .ButtonLoading::after { animation: buttonSpin 0.6s linear infinite; border: 2px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: var(--Admin-OnBrand); content: ""; height: 18px; left: 50%; margin: -9px 0 0 -9px; position: absolute; top: 50%; width: 18px; } @keyframes buttonSpin { to { transform: rotate(360deg); } } /* ============================================ Row Count Badge ============================================ */ .PageHeaderCount { align-items: center; background: var(--Admin-Neutral03); border-radius: 11px; color: var(--Admin-Neutral06); display: inline-flex; font-size: 12px; font-weight: 700; height: 22px; justify-content: center; margin-left: 8px; min-width: 26px; padding: 0 8px; vertical-align: middle; } /* ============================================ User Avatar ============================================ */ /* Covers both a real (the shell's exported Profile Image asset) and the JS-generated initials fallback used on any page that still relies on it — same circle geometry either way. */ .HeaderAvatar { align-items: center; background: var(--Admin-SidebarBg); border-radius: 50%; color: var(--Admin-OnBrand); display: inline-flex; font-size: 12px; font-weight: 700; height: 32px; justify-content: center; letter-spacing: 0.5px; object-fit: cover; width: 32px; } /* ============================================ Dialog ============================================ Structure for the Toolbox Dialog control (Templates/Dialog.tpl, JS/Admin/Dialog.js): a native opened with showModal(). The browser supplies the top layer, the inert page behind it, the focus trap and Escape-to-close, so nothing here sets a z-index. Sizes and colours read the --Admin-Dialog* tokens in Theme.css; a brand layer sets their values. The padding sits on .DialogInner rather than the , so a click in it isn't read as a backdrop click (the control closes when the click target is the itself). */ .DialogOuter { background: var(--Admin-White); border: none; border-radius: var(--Admin-DialogRadius); box-shadow: var(--Admin-DialogShadow); color: var(--Admin-Neutral07); margin: auto; max-height: calc(100% - 32px); max-width: none; overflow: auto; padding: 0; width: min(100% - 32px, var(--Admin-DialogMaxWidth)); } .DialogOuter::backdrop { background: var(--Admin-DialogBackdrop); } /* The page behind a modal shouldn't scroll under it. */ :root:has(.DialogOuter[open]) { overflow: hidden; } .DialogInner { display: flex; flex-direction: column; gap: var(--Admin-DialogGap); padding: var(--Admin-DialogPadding); text-align: center; } .DialogTitle { color: var(--Admin-DialogTitleColor); font-size: var(--Admin-DialogTitleSize); font-weight: 600; line-height: 1; margin: 0; } /* Optional supporting line under the title. It sits closer to the title than the inner gap, which still separates it from the buttons. */ .DialogText { color: var(--Admin-DialogTextColor); font-size: var(--Admin-FontSize); line-height: 1.5; margin: 0; } .DialogTitle + .DialogText { margin-top: calc(var(--Admin-DialogTextGap) - var(--Admin-DialogGap)); } .DialogButtons { display: flex; flex-wrap: wrap; gap: var(--Admin-DialogButtonGap); justify-content: center; margin: 0; } /* margin: 0 undoes Form.css's .Button.DangerButton margin-right: auto (meant to push an edit page's delete away from Save), which would knock the centred row off centre. This file loads after Form.css at the same specificity. */ .DialogButtons .Button { flex: 0 1 var(--Admin-DialogButtonWidth); margin: 0; } /* A filled danger button. Form.css's .Button.DangerButton is red text on a transparent fill, which reads too faintly in a confirm; these override it (later in the bundle, same or higher specificity). */ .DialogButtons .DangerButton { background: var(--Admin-DialogDangerButton); border-color: transparent; color: var(--Admin-OnBrand); } .DialogButtons .DangerButton:hover { background: var(--Admin-DialogDangerButtonHover); border-color: transparent; color: var(--Admin-OnBrand); } .DialogButtons .DangerButton:active { background: var(--Admin-DialogDangerButtonActive); color: var(--Admin-OnBrand); } /* showModal() moves focus to the [autofocus] button, but browsers only match :focus-visible for script-moved focus when the last input was a key, so a dialog opened by a click hides which button Enter will press. The autofocus button shows the ring on plain :focus instead. */ .DialogButtons .Button[autofocus]:focus { box-shadow: var(--Admin-FocusRingBoxShadow); outline: none; } /* Narrow screens stack the buttons full width. */ @media (max-width: 640px) { .DialogButtons { flex-direction: column; } .DialogButtons .Button { flex-basis: auto; } } /* * CMSContent.css — shared article-body typography for rendered block * content. Loaded by both the public site (wj-agua) and the admin * (wj-agua-admin) so the editor preview reads the same as the * published article. * * Scope: styles elements inside .HTMLContent only. Outer container * spacing (max-width, padding, hero) belongs to each site's own CSS: * public CMSPage.css owns the .CMSPage .HTMLContent container rules; * admin BlockEditor.css owns the editor chrome around the canvas. * * Sync requirement: wj-agua-admin/CSS/CMSContent.css is a byte-identical * copy of this file — keep both in sync until the two-site hosting * can point at a single file. */ .HTMLContent h1, .HTMLContent h2, .HTMLContent h3, .HTMLContent h4, .HTMLContent h5, .HTMLContent h6 { line-height: 1.25; margin-top: 48px; margin-bottom: 16px; } .HTMLContent h1 { font-size: 36px; } .HTMLContent h2 { font-size: 28px; } .HTMLContent h3 { font-size: 22px; } .HTMLContent h4 { font-size: 18px; } .HTMLContent h5 { font-size: 16px; } .HTMLContent h6 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; } .HTMLContent h1:first-child, .HTMLContent h2:first-child, .HTMLContent h3:first-child, .HTMLContent h4:first-child, .HTMLContent h5:first-child, .HTMLContent h6:first-child { margin-top: 0; } .HTMLContent p { margin-bottom: 16px; } .HTMLContent ul, .HTMLContent ol { padding-left: 24px; margin-bottom: 16px; } .HTMLContent li { margin-bottom: 8px; } .HTMLContent blockquote { margin: 0 0 16px 0; padding: 4px 0 4px 16px; border-left: 3px solid rgba(128, 128, 128, 0.4); font-style: italic; } .HTMLContent blockquote cite { display: block; margin-top: 8px; font-size: 14px; font-style: normal; opacity: 0.8; } .HTMLContent hr { border: 0; border-top: 1px solid rgba(128, 128, 128, 0.25); margin: 24px 0; } .HTMLContent code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.95em; background: rgba(128, 128, 128, 0.12); padding: 0.1em 0.3em; border-radius: 3px; } .HTMLContent figure { margin: 0 0 16px 0; } .HTMLContent figcaption { font-size: 14px; opacity: 0.8; margin-top: 8px; } .HTMLContent table { border-collapse: collapse; width: 100%; margin-bottom: 16px; } .HTMLContent th, .HTMLContent td { padding: 6px 10px; border: 1px solid rgba(128, 128, 128, 0.25); text-align: left; vertical-align: top; } .HTMLContent caption { caption-side: top; padding: 6px 0; font-weight: 600; text-align: left; } /* * BlockEditor chrome — admin-only styling for the block editor UI. * * Article-body typography (h1-h6, p, ul, ol, li, blockquote, cite, hr, * code, table) is owned by CMSContent.css, which is shared byte-for- * byte with the public site. This file only styles the editor's * scaffolding: toolbar, block wrapper, floating controls, editable * focus ring, placeholder, list-item add/remove, admin fallback * states. Do not duplicate typography rules here. */ .BlockEditor { position: relative; border: 1px solid var(--border-color, #d4d4d8); border-radius: 6px; background: var(--surface-color, #fff); overflow: hidden; } .BlockEditorToolbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; background: var(--surface-muted, #f4f4f5); border-bottom: 1px solid var(--border-color, #d4d4d8); position: sticky; top: 0; z-index: 2; } .BlockEditorToolbarButton { font: inherit; font-size: 0.85rem; padding: 6px 10px; background: var(--surface-color, #fff); color: var(--text-color, #18181b); border: 1px solid var(--border-color, #d4d4d8); border-radius: 4px; cursor: pointer; } .BlockEditorToolbarButton:hover { background: var(--primary-soft, #e0e7ff); border-color: var(--primary-color, #4f46e5); } .BlockEditorCanvas { padding: 24px 28px; min-height: 120px; color: var(--text-color, #18181b); } .BlockEditorCanvas .HTMLContent { max-width: 78ch; margin: 0 auto; } /* ── Per-block shell ─────────────────────────────────────────────── */ .BlockEditorBlock { position: relative; margin: 0; padding: 4px 0; border-radius: 4px; } .BlockEditorBlock:hover, .BlockEditorBlock:focus-within { background: var(--surface-muted, #fafafa); } /* Block-to-block spacing is owned by the wrapper; zero out the top margin the semantic elements inherit from CMSContent.css so we don't get double spacing inside the editor. */ .BlockEditorBlock > h1, .BlockEditorBlock > h2, .BlockEditorBlock > h3, .BlockEditorBlock > h4, .BlockEditorBlock > h5, .BlockEditorBlock > h6, .BlockEditorBlock > p, .BlockEditorBlock > blockquote, .BlockEditorBlock > hr { margin-top: 0; margin-bottom: 0; } .BlockEditorBlock + .BlockEditorBlock { margin-top: 14px; } .BlockEditorBlock[data-block-type="divider"] { padding: 16px 0; } /* ── Floating controls ───────────────────────────────────────────── */ .BlockEditorFloating { position: absolute; top: -14px; right: 4px; display: none; align-items: center; gap: 6px; padding: 3px 6px; background: var(--surface-color, #fff); border: 1px solid var(--border-color, #d4d4d8); border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); font-size: 0.75rem; z-index: 1; } .BlockEditorBlock:hover > .BlockEditorFloating, .BlockEditorBlock:focus-within > .BlockEditorFloating { display: flex; } .BlockEditorFloatingLabel { color: var(--text-muted, #52525b); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; padding: 0 4px; } .BlockEditorFloatingSelect { font: inherit; font-size: 0.75rem; padding: 2px 4px; background: var(--surface-color, #fff); color: var(--text-color, #18181b); border: 1px solid var(--border-color, #d4d4d8); border-radius: 3px; } .BlockEditorFloatingActions { display: flex; gap: 2px; } .BlockEditorFloatingButton { font: inherit; width: 22px; height: 22px; padding: 0; background: transparent; color: var(--text-muted, #52525b); border: 1px solid transparent; border-radius: 3px; cursor: pointer; line-height: 1; } .BlockEditorFloatingButton:hover:not([disabled]) { background: var(--surface-muted, #f4f4f5); border-color: var(--border-color, #d4d4d8); color: var(--text-color, #18181b); } .BlockEditorFloatingButton[disabled] { opacity: 0.3; cursor: not-allowed; } .BlockEditorFloatingButtonDanger:hover:not([disabled]) { color: var(--danger-color, #dc2626); border-color: var(--danger-color, #dc2626); } /* ── Editable surfaces ───────────────────────────────────────────── */ .BlockEditorEditable { outline: none; padding: 2px 4px; border-radius: 3px; min-height: 1.2em; } .BlockEditorEditable:focus { box-shadow: 0 0 0 2px var(--primary-soft, #e0e7ff); } .BlockEditorEditable:empty:before { content: attr(data-placeholder); color: var(--text-muted, #a1a1aa); font-style: italic; pointer-events: none; } /* ── List editor chrome (remove/add buttons) ─────────────────────── */ .BlockEditorListWrapper { display: flex; flex-direction: column; gap: 6px; } /* Keep
  • as list-item so the bullet/number renders naturally; the remove button overlays at top-right rather than joining a flex row (flex on
  • suppresses the marker in most browsers). */ .BlockEditorListItem { position: relative; padding-right: 26px; } .BlockEditorListItemText { min-width: 0; } .BlockEditorListItemRemove { position: absolute; top: 0; right: 0; font: inherit; width: 20px; height: 20px; padding: 0; background: transparent; color: var(--text-muted, #52525b); border: 1px solid transparent; border-radius: 3px; cursor: pointer; line-height: 1; opacity: 0; transition: opacity 0.12s ease; } .BlockEditorListItem:hover > .BlockEditorListItemRemove, .BlockEditorListItem:focus-within > .BlockEditorListItemRemove { opacity: 1; } .BlockEditorListItemRemove:hover:not([disabled]) { color: var(--danger-color, #dc2626); border-color: var(--danger-color, #dc2626); } .BlockEditorListItemRemove[disabled] { opacity: 0; cursor: not-allowed; } .BlockEditorListItemAdd { font: inherit; font-size: 0.85rem; padding: 4px 10px; background: transparent; color: var(--text-muted, #52525b); border: 1px dashed var(--border-color, #d4d4d8); border-radius: 3px; cursor: pointer; align-self: flex-start; margin-left: 24px; /* matches .HTMLContent ul padding-left */ } .BlockEditorListItemAdd:hover { color: var(--primary-color, #4f46e5); border-color: var(--primary-color, #4f46e5); } /* ── Unknown block fallback ───────────────────────────────────────── */ .BlockEditorUnknown { padding: 8px; background: var(--warn-soft, #fef3c7); color: var(--warn-color, #92400e); border-radius: 3px; font-family: monospace; font-size: 0.85rem; } /* ── Inline formatting toolbar (3.8b) ─────────────────────────────── */ .BlockEditorInlineToolbar { position: absolute; display: none; align-items: center; gap: 2px; padding: 4px; background: var(--surface-color, #fff); border: 1px solid var(--border-color, #d4d4d8); border-radius: 5px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); z-index: 1000; font-size: 0.9rem; } .BlockEditorInlineBtn { font: inherit; min-width: 28px; height: 28px; padding: 0 8px; background: transparent; color: var(--text-color, #18181b); border: 1px solid transparent; border-radius: 3px; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; } .BlockEditorInlineBtn:hover { background: var(--surface-muted, #f4f4f5); border-color: var(--border-color, #d4d4d8); } .BlockEditorInlineBtn.Active { background: var(--primary-soft, #e0e7ff); border-color: var(--primary-color, #4f46e5); color: var(--primary-color, #4f46e5); } .BlockEditorInlineBtn[data-inline-format="Strong"] { font-weight: 900; } .BlockEditorInlineBtn[data-inline-format="Em"] { font-style: italic; } .BlockEditorInlineBtn[data-inline-format="Code"] { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.85em; } /* ── Link popover (3.8b) ──────────────────────────────────────────── */ .BlockEditorLinkPopover { position: absolute; display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--surface-color, #fff); border: 1px solid var(--border-color, #d4d4d8); border-radius: 5px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); z-index: 1001; min-width: 280px; font-size: 0.85rem; } .BlockEditorLinkPopoverRow { display: flex; align-items: center; gap: 6px; } .BlockEditorLinkPopoverInput { font: inherit; flex: 1; padding: 6px 8px; background: var(--surface-color, #fff); color: var(--text-color, #18181b); border: 1px solid var(--border-color, #d4d4d8); border-radius: 3px; outline: none; } .BlockEditorLinkPopoverInput:focus { border-color: var(--primary-color, #4f46e5); box-shadow: 0 0 0 2px var(--primary-soft, #e0e7ff); } .BlockEditorLinkPopoverCheckbox { display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text-muted, #52525b); } .BlockEditorLinkPopoverButtons { display: flex; justify-content: flex-end; gap: 6px; } .BlockEditorLinkPopoverButton { font: inherit; padding: 5px 12px; background: var(--primary-color, #4f46e5); color: #fff; border: 1px solid var(--primary-color, #4f46e5); border-radius: 3px; cursor: pointer; } .BlockEditorLinkPopoverButton:hover { opacity: 0.9; } .BlockEditorLinkPopoverButtonSecondary { background: transparent; color: var(--text-color, #18181b); border-color: var(--border-color, #d4d4d8); } .BlockEditorLinkPopoverButtonSecondary:hover { background: var(--surface-muted, #f4f4f5); opacity: 1; } /* Show link inside editable with subtle underline so editors see what's linked. Inherits CMSContent.css colour treatment for ; this just makes the underline visible inside the editor even if the site's production styles drop it. */ .BlockEditorEditable a { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; } /* ── Table editor (3.8c) ──────────────────────────────────────────── */ .BlockEditorTableWrapper { display: flex; flex-direction: column; gap: 8px; width: 100%; } .BlockEditorTableHeader { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .BlockEditorTableCaption { font: inherit; font-size: 0.9rem; flex: 1 1 260px; min-width: 200px; padding: 5px 8px; background: var(--surface-color, #fff); color: var(--text-color, #18181b); border: 1px solid var(--border-color, #d4d4d8); border-radius: 3px; } .BlockEditorTableCaption:focus { outline: none; border-color: var(--primary-color, #4f46e5); box-shadow: 0 0 0 2px var(--primary-soft, #e0e7ff); } .BlockEditorTableHeaderToggle { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-muted, #52525b); cursor: pointer; user-select: none; } .BlockEditorTableScroll { overflow-x: auto; /* Undo CMSContent.css padding on nested .HTMLContent ancestor — the editor canvas applies its own padding to the table wrapper. */ margin: 0; } .BlockEditorTable { border-collapse: separate; border-spacing: 0; width: 100%; /* Override CMSContent.css's .HTMLContent table rules so the editor chrome cells (corner, column/row controls) render cleanly. */ margin-bottom: 0; } .BlockEditorTable th, .BlockEditorTable td { border: 1px solid rgba(128, 128, 128, 0.25); padding: 0; text-align: left; vertical-align: top; } .BlockEditorTableCell { min-width: 80px; } .BlockEditorTableCellContent { min-height: 1.6em; padding: 6px 8px; } .BlockEditorTableHeadRow .BlockEditorTableCell { background: var(--surface-muted, #f4f4f5); font-weight: 600; } /* Column-control row + row-control column are editor chrome — lighter visual weight so the table body reads as content. */ .BlockEditorTableColumnControls td, .BlockEditorTableColumnControl, .BlockEditorTableRowControl, .BlockEditorTableCorner { border: 0; background: transparent; padding: 0; } .BlockEditorTableColumnControl { width: auto; text-align: center; padding: 2px 0; } .BlockEditorTableRowControl { width: 26px; padding: 0 2px; text-align: center; vertical-align: middle; } .BlockEditorTableCorner { width: 26px; } .BlockEditorTableColumnRemove, .BlockEditorTableRowRemove { font: inherit; width: 22px; height: 22px; padding: 0; background: transparent; color: var(--text-muted, #52525b); border: 1px solid transparent; border-radius: 3px; cursor: pointer; line-height: 1; opacity: 0; transition: opacity 0.12s ease; } .BlockEditorTable:hover .BlockEditorTableColumnRemove, .BlockEditorTable:hover .BlockEditorTableRowRemove { opacity: 0.55; } .BlockEditorTableColumnRemove:hover:not([disabled]), .BlockEditorTableRowRemove:hover:not([disabled]) { opacity: 1; color: var(--danger-color, #dc2626); border-color: var(--danger-color, #dc2626); } .BlockEditorTableColumnRemove[disabled], .BlockEditorTableRowRemove[disabled] { opacity: 0.15; cursor: not-allowed; } .BlockEditorTableFooter { display: flex; gap: 8px; } .BlockEditorTableAddRow, .BlockEditorTableAddColumn { font: inherit; font-size: 0.85rem; padding: 4px 10px; background: transparent; color: var(--text-muted, #52525b); border: 1px dashed var(--border-color, #d4d4d8); border-radius: 3px; cursor: pointer; } .BlockEditorTableAddRow:hover, .BlockEditorTableAddColumn:hover { color: var(--primary-color, #4f46e5); border-color: var(--primary-color, #4f46e5); } /* ── Media blocks: image, figure, embed (3.8d) ───────────────────── */ .BlockEditorMedia { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--surface-muted, #fafafa); border: 1px solid var(--border-color, #e4e4e7); border-radius: 4px; } .BlockEditorMediaRow { display: flex; gap: 8px; align-items: center; } .BlockEditorMediaRowSplit > * { flex: 1 1 auto; } .BlockEditorMediaInput, .BlockEditorMediaInputSmall { font: inherit; font-size: 0.9rem; padding: 5px 8px; background: var(--surface-color, #fff); color: var(--text-color, #18181b); border: 1px solid var(--border-color, #d4d4d8); border-radius: 3px; width: 100%; } .BlockEditorMediaInputSmall { max-width: 80px; } .BlockEditorMediaInput:focus, .BlockEditorMediaInputSmall:focus { outline: none; border-color: var(--primary-color, #4f46e5); box-shadow: 0 0 0 2px var(--primary-soft, #e0e7ff); } .BlockEditorMediaPreview { display: flex; justify-content: center; align-items: center; min-height: 120px; background: var(--surface-color, #fff); border: 1px dashed var(--border-color, #d4d4d8); border-radius: 3px; overflow: hidden; } .BlockEditorMediaPreviewImage { max-width: 100%; max-height: 360px; height: auto; display: block; } .BlockEditorMediaPreviewEmbed { width: 100%; aspect-ratio: 16 / 9; border: 0; } .BlockEditorMediaPreviewEmpty { padding: 32px; color: var(--text-muted, #a1a1aa); font-size: 0.9rem; text-align: center; } .BlockEditorMediaPreviewError { color: var(--danger-color, #dc2626); } .BlockEditorMediaError { padding: 6px 10px; background: var(--danger-soft, #fee2e2); color: var(--danger-color, #991b1b); border-radius: 3px; font-size: 0.85rem; } .BlockEditorMediaNote { padding: 6px 10px; background: var(--warn-soft, #fef3c7); color: var(--warn-color, #92400e); border-radius: 3px; font-size: 0.8rem; font-style: italic; } /* Figure block — source type selector + inner source + caption */ .BlockEditorFigureSourceTypeRow { display: flex; align-items: center; gap: 8px; } .BlockEditorFigureTypeLabel { font-size: 0.85rem; color: var(--text-muted, #52525b); } .BlockEditorFigureTypeSelect { font: inherit; padding: 4px 8px; background: var(--surface-color, #fff); color: var(--text-color, #18181b); border: 1px solid var(--border-color, #d4d4d8); border-radius: 3px; } .BlockEditorFigureSource { display: flex; flex-direction: column; } .BlockEditorFigureCaptionRow { border-top: 1px solid var(--border-color, #e4e4e7); padding-top: 8px; } .BlockEditorFigureCaption { font-size: 0.9em; color: var(--text-muted, #52525b); font-style: italic; } /* ============================================ Responsive — Navigation shell drawer (900px and below) ============================================ Below 900px the sidebar becomes the off-canvas drawer (header with a compact logo left / hamburger right, 300px drawer over a scrim) instead of Redstone's older icon-only collapsed rail. The icon rail only reads well when nav items have icons (this design has none — see ThinkCharity/Shell.css hiding .NavigationIcon), so rather than special-case that per-brand, the drawer — which needs no icons — is now the one collapsed pattern Redstone offers below 900px. Everything here is the nav/header shell; content-reflow rules (forms, table-to-cards, toasts, pager, FAB) stay under the narrower 640px breakpoint below, since none of that needs to change just because the sidebar collapsed. */ @media (max-width: 900px) { /* Show the toggle, hide the desktop sidebar. The header keeps a compact logo (hidden by default in Layout.css) since the full sidebar — and the logo living at its top — is off-canvas here. Logo sits at the header's natural left edge (HeaderLeft's only remaining flow child); the toggle and close button are position:fixed (Navigation.css) so they don't need flex placement at all. */ .HeaderLogo { display: flex; padding: 0 12px 0 18px; } .HeaderLogo img { display: block; width: 116px; } .MobileMenuToggle { display: flex; } /* Close button only when the drawer is actually open (JS toggles .Active, same pattern as .MobileOverlay.Active) — it stays display:none the rest of the time rather than merely hidden behind the toggle, so it's out of the tab order when not in use. */ .MobileMenuClose.Active { display: flex; } /* Sidebar: hidden by default, slide in from left when open. Already a full-height flex column by default (Navigation.css); only the transform/width differ for the drawer behaviour. visibility: hidden while closed takes the off-screen links out of the tab order. Its transition is delayed by the slide duration on close, so the slide-out still animates, and it switches immediately on open. */ .Sidebar { transform: translateX(-100%); transition: transform 0.25s ease, visibility 0s linear 0.25s; visibility: hidden; width: 300px; } .Sidebar.SidebarOpen { transform: translateX(0); transition: transform 0.25s ease, visibility 0s; visibility: visible; } .MainContent { margin-left: 0; } /* Header spans the full width below 900px — the sidebar is off-canvas, not a permanent column beside it. */ .Header { left: 0; } /* Page header: stack the action below the title rather than beside it (no design exists narrower than the 1920 frame — left-aligned, natural width is an acceptable default). The shared column gutter (Layout.css's --Admin-ContentGutter) still applies here unchanged. */ .PageHeaderInner { align-items: start; grid-template-areas: "Crumb" "Title" "Action"; grid-template-columns: 1fr; } .PageHeaderActions { justify-self: start; } .DashboardStatGrid { grid-template-columns: repeat(2, 1fr); } /* Header: compact — Change Password / Logout / theme toggle move into the drawer's .SidebarUser section so they aren't duplicated. */ .HeaderProfileLink, .HeaderProfileName { display: none; } .HeaderAvatar { display: none; } .HeaderLogout { display: none; } .HeaderThemeToggle { display: none; } /* User section inside the sidebar drawer — surfaced via .SidebarUser, inert (display:none, below) above 900px where the header shows these links itself instead. */ .SidebarUser { border-top: 1px solid var(--Admin-SidebarItemFocus); display: flex !important; flex-direction: column; gap: 6px; padding: 12px 20px; } .SidebarUserProfile { align-items: center; display: flex; gap: 8px; } .SidebarUser .SidebarUserName { color: var(--Admin-NavItemColor); font-size: 14px; font-weight: 600; } /* The 4px padding and -4px margin give the focus ring room without moving the layout, as on the header links. */ .SidebarUser a, .SidebarUser .ThemeToggle { background: transparent; border: none; border-radius: var(--Admin-Radius); color: var(--Admin-NavItemColor); cursor: pointer; font-family: inherit; font-size: 13px; margin: -4px; padding: 4px; text-align: left; text-decoration: none; } .SidebarUser a:hover, .SidebarUser .ThemeToggle:hover { color: var(--Admin-NavItemActiveColor); } .SidebarUser a:focus-visible, .SidebarUser .ThemeToggle:focus-visible { box-shadow: var(--Admin-FocusRingBoxShadow); outline: none; } } /* ============================================ Responsive — Mobile content reflow (640px and below) ============================================ Narrow-screen reflow for page CONTENT — forms, the scaffold table, the pager, toasts, the FAB. Independent of the 900px nav-shell breakpoint above: none of this needs to change just because the sidebar collapsed to a drawer, only once the content column itself gets tight. */ @media (max-width: 640px) { :root { --Admin-ScaffoldRowAlternateBg: var(--Admin-White); } /* Form rows collapse to a single column on mobile. The variant class overrides (.TwoColumn / .OneColumn) are more specific in Form.css, so we match them explicitly here. */ .FormRow, .FormRow.TwoColumn, .FormRow.OneColumn { grid-template-columns: 1fr !important; } /* Form footer buttons stack vertically on mobile — three side-by-side buttons otherwise text-wrap inside their own padding at 390px. Full-width stacking keeps each label on one line. Visual hierarchy via `order`: primary submit → top destructive (Delete) → bottom, isolated everything else (Save & Add, Cancel) → author DOM order in between. */ .ScaffoldForm .FormButtons { align-items: stretch; flex-direction: column; gap: 8px; padding: 14px 16px; } .ScaffoldForm .FormButtons .Button, .ScaffoldForm .FormButtons .FormButtonSubmit { margin-right: 0; width: 100%; /* reset DangerButton's desktop margin-right:auto */ } .ScaffoldForm .FormButtons .FormButtonSubmit { order: -1; } .ScaffoldForm .FormButtons .DangerButton { margin-top: 4px; order: 99; } .DetailGrid { grid-template-columns: 1fr; } /* Toasts: full width */ .ToastContainer { left: 12px; right: 12px; } .Toast { max-width: none; } /* Scaffold table → card layout. Hide the
    • and re-flow each tbody row as a stacked card. Each
    renders its column label via data-label, so the markup stays a real (SEO / a11y / export compatibility) but reads as cards visually. Rows without data-label (Actions) stack without a label prefix. */ .ScaffoldTableWrapper { background: transparent; box-shadow: none; overflow-x: visible; } .ScaffoldTable { display: block; min-width: 0; width: 100%; } .ScaffoldTable thead { display: none; } .ScaffoldTable tbody { display: block; } .ScaffoldTable tbody tr { background: var(--Admin-White); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); display: block; margin-bottom: 12px; padding: 8px 14px 10px; } .ScaffoldTable tbody tr:hover { background: var(--Admin-ScaffoldRowCardHoverBg); } .ScaffoldTable tbody td { align-items: center; border: none; border-bottom: 1px dashed var(--Admin-Neutral02); display: flex; font-size: 14px; gap: 12px; height: unset; justify-content: space-between; padding: 12px 0; } .ScaffoldTable tbody td:last-child { border-bottom: none; } .ScaffoldTable tbody td[data-label]::before { color: var(--Admin-Neutral05); content: attr(data-label); flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; } /* The cell that contains the primary row link becomes the card title regardless of its table-column position. Full-width, bold, no data-label prefix. :has() matches it anywhere in the row. */ .ScaffoldTable tbody td:has(.ScaffoldRowLink) { border-bottom: 1px solid var(--Admin-Neutral03); display: block; margin-bottom: 4px; } .ScaffoldTable tbody td:has(.ScaffoldRowLink)::before { display: none; } .ScaffoldTable tbody td:has(.ScaffoldRowLink) .ScaffoldRowLink { color: var(--Admin-Neutral07); font-size: 16px; font-weight: 700; line-height: 1.3; text-decoration: none; } /* Values sit right-aligned in the right column, so a link's icon goes before them; the card title keeps it after. */ .ScaffoldTable tbody td .ScaffoldLinkIcon::after { display: none; } .ScaffoldTable tbody td .ScaffoldLinkIcon::before { display: inline-block; } .ScaffoldTable tbody td:has(.ScaffoldRowLink) .ScaffoldLinkIcon::after { display: inline-block; } .ScaffoldTable tbody td:has(.ScaffoldRowLink) .ScaffoldLinkIcon::before { display: none; } .ScaffoldTable tbody td .ScaffoldRowActions { justify-content: flex-end; } /* Pager bar stacks centered on mobile. */ .ScaffoldPagerBar { align-items: stretch; flex-direction: column; gap: 8px; text-align: center; } .ScaffoldPagerBar .ScaffoldPagination { justify-content: center; margin-left: 0; } /* FAB — anchors to bottom-right on mobile so +New X is thumb-reachable. */ .ScaffoldFAB { align-items: center; border-radius: 50%; bottom: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.25); display: inline-flex !important; font-size: 28px; font-weight: 400; height: 56px; justify-content: center; line-height: 1; padding: 0 !important; position: fixed; right: 20px; width: 56px; z-index: 100; } .ScaffoldFAB .ScaffoldFABLabel { display: none; } } /* Default: hide mobile-only chrome on desktop. The FAB is part of the normal template markup but inert above 640px; SidebarUser likewise above 900px (see the nav-shell breakpoint, where it's switched on). */ .ScaffoldFAB { display: none; } .SidebarUser { display: none; } /* ThemeToggle label swapping — swap "Switch to dark/light mode" based on the currently applied theme (explicit data-theme wins; otherwise OS pref). */ .ThemeToggle .ThemeToggleDarkLabel { display: none; } :root[data-theme="dark"] .ThemeToggle .ThemeToggleLightLabel { display: none; } :root[data-theme="dark"] .ThemeToggle .ThemeToggleDarkLabel { display: inline; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ThemeToggle .ThemeToggleLightLabel { display: none; } :root:not([data-theme="light"]) .ThemeToggle .ThemeToggleDarkLabel { display: inline; } } /* ============================================ Environment Bar Rendered by EnvironmentBar.tpl outside Production only. Ported from the WJ framework's Base/Errors.css. ============================================ */ .EnvironmentBar { background-color: rgba(255, 0, 0, 0.85); color: #FFFFFF; font-family: Helvetica, Arial, sans-serif; font-size: 11px; font-weight: bold; height: 24px; left: 50%; line-height: 26px; margin-left: -100px; position: fixed; text-align: center; text-transform: uppercase; top: 0; width: 200px; z-index: 1000000; } .EnvironmentBar:focus { bottom: 0; outline: none; top: auto; } .EnvironmentBar[data-environment="Dev"], .EnvironmentBar[data-environment="Local"] { background-color: rgba(255, 165, 0, 0.85); } /* ============================================ Think Charity — Admin theme ============================================ Sets Redstone's generic --Admin-* custom properties to the Think Charity palette and type scale (LocalTemp/AdminDesignSpec.md), plus the TC-only variable-font plumbing the front end uses (ThinkCharity/CSS/Base.css). Loads after every Redstone/* file in CSS/Admin.json, so these values win the cascade for the same custom properties without editing Redstone. Two blocks. The plain ":root" block holds every token Redstone's dark mode leaves alone (layout, sizes, fonts, brand colours), so it applies in every theme. The second block holds only the colour tokens that Redstone's dark blocks in Redstone/Theme.css reassign (the neutral ramp, black, white and the sidebar colours). That second block uses ":root:not([data-theme=\"dark\"])" rather than plain ":root". Redstone's auto-dark rule is "@media (prefers-color-scheme: dark) { :root:not([data-theme=\"light\"]) }", whose specificity (0,2,0) beats ":root" (0,1,0) whatever the source order. Matching it here makes the light palette win for an OS dark preference with no explicit choice. Dark mode is deferred, so the admin renders light unless the user opts in with the toggle. An explicit data-theme="dark" still gets Redstone's dark colours. Redstone itself is untouched, so another project can still use OS auto-dark. */ :root { /* Generic body copy font. Redstone's default ('Source Sans 3') is no longer loaded now that Head.tpl pulls the Typekit kit instead of Google Fonts — repointed here so table/form/scaffold text (out of scope this pass, but still reads this token) doesn't silently fall through to a system font. Poppins is the spec's body/table-cell/ field face; headings override this per-element with --TCTypeface02. */ --Admin-FontFamily: var(--TCTypeface03-FontFamily); /* Brand colours */ --Admin-ErrorColor: #FF3A3A; --Admin-FocusColor: #69B3E7; --Admin-LinkColor: #002E6D; --Admin-PrimaryButton: #002E6D; --Admin-PrimaryButtonActive: #001C41; --Admin-PrimaryButtonHover: #002557; --Admin-ToggleOnColor: #002E6D; /* Sidebar / header chrome */ --Admin-CopyrightColor: #4A7DA2; --Admin-HeaderHeight: 64px; --Admin-HeaderIconColor: #002E6D; --Admin-HeaderLinkActiveColor: #33588A; --Admin-HeaderLinkColor: #002E6D; --Admin-HeaderLinkHoverColor: #1A437C; --Admin-HeaderNameColor: #000000; --Admin-LogoWidth: 162px; --Admin-NavItemActiveColor: #002E6D; --Admin-NavItemColor: #002E6D; --Admin-SidebarWidth: 300px; /* Content layout */ --Admin-ContentBottomSpace: 100px; --Admin-ContentGutter: 40px; --Admin-ContentMaxWidth: 1160px; /* Buttons. No admin disabled design; this is the front end's (--ThisButtonDisabled-* in ThinkCharity/CSS/Base.css). */ --Admin-ButtonDisabledBg: #919191; --Admin-ButtonDisabledColor: #CCCCCC; --Admin-ButtonHeight: 48px; --Admin-IconButtonHoverBg: rgba(105, 179, 231, 0.25); /* Dialog — Admin > Notifications/Pop-Up/Block (see ThinkCharity/Dialog.css) */ --Admin-DialogButtonGap: 16px; --Admin-DialogButtonWidth: 250px; /* No design. #FF3A3A (--Admin-ErrorColor) is 3.55:1 under white text, so the fill uses its 20/30/40% shades, as the brand palette chart steps a colour: 5.2:1+. */ --Admin-DialogDangerButton: #CC2E2E; --Admin-DialogDangerButtonActive: #992323; --Admin-DialogDangerButtonHover: #B32929; --Admin-DialogGap: 40px; --Admin-DialogMaxWidth: 640px; --Admin-DialogPadding: 40px; --Admin-DialogRadius: 16px; --Admin-DialogShadow: 0 4px 16px rgba(0, 0, 0, 0.25); --Admin-DialogTitleColor: #002E6D; --Admin-DialogTitleSize: 32px; /* Upload — Sketch Form/Upload/*, plus the text field's border and hover fill. The tile is the front end's organization logo shape (.OrganizationDetailLogoArea, 327:180). */ --Admin-UploadBorderColor: #B3B3B3; --Admin-UploadDropActiveBg: #F0F7FD; --Admin-UploadPlaceholderBg: #D8D8D8; --Admin-UploadThumbBorderColor: #E3E3E3; --Admin-UploadThumbAspectRatio: 327 / 180; /* Checkbox — Admin/Checkbox/Box/* and Admin/Checkbox/Selector/*. The box is Sketch's 4px smoothed corner (the path runs 6.4px); the focus glow is the symbol's 2.5 blur. */ --Admin-CheckboxBg: #FFFFFF; --Admin-CheckboxBorderColor: #919191; --Admin-CheckboxCheckedBg: #69B3E7; --Admin-CheckboxCheckedIcon: url("/Images/IconCheckmarkThemeBrandSecondary.svg"); --Admin-CheckboxFocusShadow: 0 0 5px #69B3E7; --Admin-CheckboxGap: 12px; --Admin-CheckboxHoverBg: #DAECF9; /* Shape */ --Admin-Radius: 8px; /* Focus ring — identical to the front end's --InteractiveFocusVisible-BoxShadow */ --Admin-FocusRingBoxShadow: 0 0 8px #69B3E7; /* Forms — the dropdown chevron (Forms.css), Form/Dropdown/* */ --Admin-SelectArrowColor: #000000; --Admin-SelectArrowOpenColor: #000000; --Admin-SelectArrowPlaceholderColor: #919191; /* Scaffold / Tables (Organizations list) */ --Admin-PagerDisabledColor: #4D6D99; --Admin-PagerHoverBg: #DAECF9; --Admin-PillBg: #D2E8F8; --Admin-PillBorder: #69B3E7; --Admin-PillColor: #002E6D; --Admin-PillHoverBg: #A5D1F1; --Admin-RowActionActiveBg: #002E6D; --Admin-RowActionIconActiveColor: #FFFFFF; --Admin-RowActionIconColor: #002E6D; --Admin-ScaffoldHeaderBg: #C3E1F5; --Admin-ScaffoldHeaderColor: #002E6D; --Admin-ScaffoldRowAlternateBg: var(--Admin-White); --Admin-ScaffoldRowDivider: #C3E1F5; --Admin-ScaffoldRowHoverBg: #F0F7FD; --Admin-ScaffoldSearchHoverBg: #F0F7FD; /* Status badges — Pending only gives one hex in the spec's colour table (no separate text shade like Approved/Suspended have), so its text reuses the brand secondary colour rather than the border/fill hue; flagged in the report as a judgement call. */ --Admin-StatusBadgeDangerBorder: #EE0B0B; --Admin-StatusBadgeDangerFill: rgba(238, 11, 11, 0.2); --Admin-StatusBadgeDangerText: #B00000; --Admin-StatusBadgeInfoBorder: #69B3E7; --Admin-StatusBadgeInfoFill: rgba(105, 179, 231, 0.2); --Admin-StatusBadgeInfoText: #002E6D; --Admin-StatusBadgeSuccessBorder: #97D700; --Admin-StatusBadgeSuccessFill: rgba(151, 215, 0, 0.25); --Admin-StatusBadgeSuccessText: #154734; /* TC-only brand colours that don't map onto an existing --Admin-* slot */ --TCColor-HeaderGradientFrom: #C3E1F5; --TCColor-HeaderGradientTo: rgba(227, 242, 251, 0); --TCColor-OutlineButton: #002E6D; --TCColor-OutlineButtonHover: rgba(105, 179, 231, 0.25); --TCColor-PageBackground: #F0F7FD; --TCColor-TitleDivider: #69B3E7; /* Fonts — same variable-font approach as ThinkCharity/CSS/Base.css: one physical font family per opsz, with weight/italic supplied through --TCTypeface-FontWght / -FontItal at the point of use. */ --TCTypeface-FontItal: 0; --TCTypeface-FontWght: 400; --TCTypeface01-FontFamily: "degular-variable", sans-serif; --TCTypeface02-FontFamily: var(--TCTypeface01-FontFamily); --TCTypeface03-FontFamily: "Poppins", sans-serif; } /* Colour tokens Redstone's dark mode reassigns. These restate Redstone's own light defaults and the Think Charity sidebar colours, excluded for an explicit data-theme="dark". See the header comment. */ :root:not([data-theme="dark"]) { --Admin-Black: #000000; --Admin-Neutral01: #f5f5f5; --Admin-Neutral02: #ededed; --Admin-Neutral03: #e3e3e3; --Admin-Neutral04: #b3b3b3; --Admin-Neutral05: #95989a; --Admin-Neutral06: #585858; --Admin-Neutral07: #414141; --Admin-SidebarBg: linear-gradient(180deg, #C3E1F5 0%, #F0F7FD 100%); --Admin-SidebarItemFocus: #87C2EC; --Admin-SidebarItemHover: #B4D9F3; --Admin-White: #ffffff; /* Browser-drawn controls (inputs, selects, scrollbars) follow the same light-unless-toggled-dark rule, not the OS preference. */ color-scheme: light; } *, *::before, *::after { /* opsz values: Degular Text: 6, Degular: 14, Degular Display: 72 */ --TCTypeface01-FontVariationSettings: "ital" var(--TCTypeface-FontItal, 0), "opsz" 14, "wght" var(--TCTypeface-FontWght); --TCTypeface02-FontVariationSettings: "ital" var(--TCTypeface-FontItal, 0), "opsz" 72, "wght" var(--TCTypeface-FontWght); } /* ============================================ Think Charity — Admin shell ============================================ Brand-specific rules for the pieces Redstone leaves generic: gradients, the header avatar size, and every typeface/weight/colour call the design spec makes for the sidebar, header, content column and page-header pattern. Structural sizing/positioning stays in Redstone; this file only re-declares colour and font properties on Redstone's selectors (it loads after Redstone in CSS/Admin.json, so these declarations win). */ /* Page background. Redeclares the same selector Theme.css uses for the first-paint flash fix, rather than repointing --Admin-Neutral01 itself — that token still drives table/scaffold surfaces out of scope this pass. */ html, body { background: var(--TCColor-PageBackground); } /* Theme.css also has an UNCONDITIONAL (not @media-gated) ":root:not([data-theme=\"light\"]) body" rule that paints body with --Admin-Neutral01 whenever data-theme isn't explicitly "light" — which includes the default, no-toggle-used state, not only actual dark mode. That selector's specificity (0,2,1) beats a plain "body" (0,0,1), so it silently wins over the rule above whenever dark mode hasn't been explicitly turned off. Countering it at equal specificity, scoped to "not dark", so the light default here is TC's background while an explicit data-theme="dark" toggle (left alone, per scope) still gets Theme.css's own dark value untouched. */ :root:not([data-theme="dark"]) body { background: var(--TCColor-PageBackground); } /* ============================================ Header ============================================ */ .Header { background: linear-gradient(180deg, var(--TCColor-HeaderGradientFrom) 0%, var(--TCColor-HeaderGradientTo) 100%); } .HeaderProfileLink, .HeaderLogout { --TCTypeface-FontWght: 700; font-family: var(--TCTypeface02-FontFamily); font-size: 16px; font-variation-settings: var(--TCTypeface02-FontVariationSettings); font-weight: var(--TCTypeface-FontWght); line-height: 24px; } .HeaderProfileName { --TCTypeface-FontWght: 700; font-family: var(--TCTypeface02-FontFamily); font-size: 18px; font-variation-settings: var(--TCTypeface02-FontVariationSettings); font-weight: var(--TCTypeface-FontWght); line-height: 24px; } .HeaderProfile .HeaderAvatar { height: 40px; width: 40px; } /* ============================================ Mobile navigation controls ============================================ Both are .IconButton (Layout.css) for size/radius/active/focus-visible; only the resting fill+border+icon colour differ per control, which is exactly what varies between the admin's Primary and Outline button palettes — the toggle reads like a plain icon (no border, transparent), the close button uses the Primary button palette (Sketch Admin/Buttons/Primary Button/*). It sits on the overlay, directly over the toggle, so every state needs a solid fill: a translucent hover let the hamburger show through. */ .MobileMenuToggle { color: var(--Admin-HeaderIconColor); } .MobileMenuClose { background: var(--Admin-PrimaryButton); color: var(--Admin-OnBrand); } .MobileMenuClose:hover { background: var(--Admin-PrimaryButtonHover); } .MobileMenuClose:active { background: var(--Admin-PrimaryButtonActive); } /* ============================================ Sidebar / navigation ============================================ */ /* Logos, sidebar and mobile header: each link holds both colourways and the theme picks one. The navy logo is for the light theme; the light blue one for dark. Keyed on the toggle's data-theme only, because the admin renders light unless the toggle chooses dark. Scoped to the logo containers to out-rank their `img { display: block }` rules. */ .SidebarLogo .LogoForDark, .HeaderLogo .LogoForDark { display: none; } :root[data-theme="dark"] .LogoForLight { display: none; } :root[data-theme="dark"] .LogoForDark { display: block; } .NavigationItemInner { --TCTypeface-FontWght: 700; font-family: var(--TCTypeface02-FontFamily); font-size: 24px; font-variation-settings: var(--TCTypeface02-FontVariationSettings); font-weight: var(--TCTypeface-FontWght); line-height: 24px; } /* No nav icons in the design; hiding it (rather than removing it from the template) leaves the icon slot in place for a future menu item that might want one. With it gone, the label sits at the item's own 24px padding — x40 from the sidebar edge, matching the spec. */ .NavigationIcon { display: none; } /* First nav item at y162: --Admin-LogoWidth (162px) gives a ~63px-tall logo at its natural aspect ratio, so SidebarLogo's 16px top+bottom padding brings it to ~95px — this makes up the remaining gap to 162. */ .PrimaryNavigation { padding-top: 67px; } .SidebarFooter { font-family: var(--TCTypeface03-FontFamily); font-size: 14px; } /* ============================================ Content column / page header ============================================ */ .PageHeaderTitle { --TCTypeface-FontWght: 700; color: #000000; font-family: var(--TCTypeface02-FontFamily); font-size: 32px; font-variation-settings: var(--TCTypeface02-FontVariationSettings); font-weight: var(--TCTypeface-FontWght); letter-spacing: normal; line-height: 32px; } /* Flow layout (grid areas + gaps, defined structurally in Redstone/ Layout.css) rather than fixed offsets — these are just the exact TC-spec numbers layered on top. row-gap:4px plus the button (48px) being taller than the single-line title (32px) is what centres the title 8px into that shared row, landing it at y141 while the button (which fills the row exactly) sits at y133 — both fall out of `align-items: center` on the row rather than being stated directly. padding-bottom:24px is what puts the divider at y205 under a single-line title; a wrapped title simply pushes it further down instead of the divider cutting through the text (no fixed height here, unlike the pass this replaced). */ .PageHeaderInner { border-bottom-color: var(--TCColor-TitleDivider); column-gap: 24px; padding-bottom: 24px; row-gap: 4px; } .PageHeaderActions .Button { min-width: 250px; } .Breadcrumbs { --TCTypeface-FontWght: 500; color: #000000; font-family: var(--TCTypeface01-FontFamily); font-size: 16px; font-variation-settings: var(--TCTypeface01-FontVariationSettings); font-weight: var(--TCTypeface-FontWght); } .Breadcrumbs a { color: #002E6D; } .Breadcrumbs a:hover { color: var(--Admin-PrimaryButtonHover); } /* ============================================ Buttons — Primary and Outline ============================================ .Button carries the shared label typography; .PrimaryButton already reads the reassigned --Admin-PrimaryButton* tokens from ThinkCharity/Theme.css with no further rule needed here. .SecondaryButton is Redstone's filled-grey default — the design's "Outline button" is a distinct visual language (border, not fill), so it's fully redeclared here rather than layered onto the Redstone rule. */ .Button { --TCTypeface-FontWght: 700; font-family: var(--TCTypeface01-FontFamily); font-size: 18px; font-variation-settings: var(--TCTypeface01-FontVariationSettings); font-weight: var(--TCTypeface-FontWght); line-height: 20px; } .SecondaryButton { background: transparent; border: 2px solid var(--TCColor-OutlineButton); color: var(--TCColor-OutlineButton); } .SecondaryButton:hover { background: var(--TCColor-OutlineButtonHover); color: var(--TCColor-OutlineButton); } .SecondaryButton:active { background: var(--TCColor-OutlineButton); color: #FFFFFF; } /* ============================================ Organizations list ============================================ Mask icons (structural sizing lives in Redstone/Scaffold.css) plus every colour/font call for the toolbar, table, badges and pager. */ /* An exact design offset, not a structural one: on the list page the 32px pills are vertically centred on the 48px search/GO row rather than sitting below it — the toolbar's own top edge is 8px above where the pills visually start (y222 vs y230), which align-items:center on .ScaffoldToolbar already achieves once the toolbar's box starts 8px higher. The edit page's PageHeader-to-panel gap is unrelated and stays untouched. */ .ScaffoldToolbar { margin-top: -8px; } .ScaffoldTable thead th { --TCTypeface-FontWght: 700; font-family: var(--TCTypeface01-FontFamily); font-variation-settings: var(--TCTypeface01-FontVariationSettings); font-weight: var(--TCTypeface-FontWght); } .SortArrowIcon { background: var(--Admin-ScaffoldHeaderColor); mask-image: url(/Images/IconSortArrow.svg); mask-position: center; mask-repeat: no-repeat; mask-size: contain; opacity: 0; } .ScaffoldTable thead th[data-sort-dir] .SortArrowIcon { opacity: 1; } .ScaffoldTable thead th[data-sort-dir="desc"] .SortArrowIcon { transform: rotate(180deg); } .ScaffoldTable tbody td { color: var(--Admin-Black); font-family: var(--Admin-FontFamily); } .RowActionIconEdit { mask-image: url(/Images/IconEdit.svg); } .RowActionIconApprove { mask-image: url(/Images/IconApprove.svg); } .RowActionIconSuspend { mask-image: url(/Images/IconSuspend.svg); } .RowActionIconView { mask-image: url(/Images/IconView.svg); } .RowActionIconResolve { mask-image: url(/Images/IconResolve.svg); } .RowActionIconOverride { mask-image: url(/Images/IconOverride.svg); } .RowActionIcon { mask-position: center; mask-repeat: no-repeat; mask-size: contain; } .ScaffoldLinkIconEdit::after, .ScaffoldLinkIconEdit::before { mask-image: url(/Images/IconEdit.svg); } .ScaffoldLinkIconView::after, .ScaffoldLinkIconView::before { mask-image: url(/Images/IconView.svg); } .ScaffoldLinkIconExternal::after, .ScaffoldLinkIconExternal::before { mask-image: url(/Images/IconAnchorTargetBlank.svg); } .GoButton { --TCTypeface-FontWght: 900; font-family: var(--TCTypeface01-FontFamily); font-variation-settings: var(--TCTypeface01-FontVariationSettings); font-weight: var(--TCTypeface-FontWght); } .ScaffoldFilterChip { --TCTypeface-FontWght: 700; font-family: var(--TCTypeface02-FontFamily); font-variation-settings: var(--TCTypeface02-FontVariationSettings); font-weight: var(--TCTypeface-FontWght); } .StatusBadge { font-family: var(--TCTypeface01-FontFamily); } .ScaffoldRowLink { font-family: var(--Admin-FontFamily); } .PaginationArrowIcon { mask-image: url(/Images/IconChevron.svg); mask-position: center; mask-repeat: no-repeat; mask-size: contain; } .ScaffoldPagination, .ScaffoldRowRange { font-family: var(--TCTypeface02-FontFamily); } .ScaffoldPagination { --TCTypeface-FontWght: 700; font-variation-settings: var(--TCTypeface02-FontVariationSettings); font-weight: var(--TCTypeface-FontWght); } /* JR extras the design doesn't have — hidden rather than removed, since Redstone is the reusable base and another project may still want them. */ .PageHeaderCount { display: none; } .ScaffoldFAB { display: none !important; } /* ============================================ Responsive re-statement ============================================ The drawer breakpoint moved to 900px (Redstone/Responsive.css no longer has a tablet icon-only rail), so the mobile header background — a solid fill, not the gradient, since that gradient assumes it's flanked by the sidebar's own gradient which isn't there once the sidebar goes off-canvas — now switches at the same 900px point rather than 640px. */ @media (max-width: 900px) { .Header { background: var(--TCColor-HeaderGradientFrom); } } /* Minimum content-column gutter: 40px above 900px, 24px at and below (24 matches the front end's --Viewport-InlinePadding). The 40px default lives in ThinkCharity/Theme.css's plain :root block; this is just the narrower override, media-scoped like Redstone's own breakpoints. The space below the content follows the same split: 100px (the design's gap under the edit form's buttons) above 900px, 48px at and below. */ @media (max-width: 900px) { :root { --Admin-ContentBottomSpace: 48px; --Admin-ContentGutter: 24px; } } /* ============================================ Think Charity - Admin export buttons and date filters ============================================ A statement panel (Pages/organization-statement.tpl) holds its own dates and a row of outline export buttons, each the download icon and its format. List pages export from the page header's Menu instead (ThinkCharity/Menu.css). Date filters sit in the toolbar beside the status pills: a small label and a date field the height of the search field. The listing's statement row action uses the download icon. */ .ScaffoldExport { display: flex; gap: 8px; margin: 16px 0 0; } .ScaffoldExportButton { gap: 8px; } .ScaffoldExportIcon { background: currentColor; display: inline-block; height: 24px; mask-image: url(/Images/IconDownload.svg); mask-position: center; mask-repeat: no-repeat; mask-size: contain; width: 24px; } .ScaffoldFilterDates { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 16px; } .ScaffoldFilterDateLabel { align-items: center; color: var(--Admin-Neutral07); display: inline-flex; font-size: 14px; gap: 8px; } .ScaffoldFilterDate { background: var(--Admin-White); border: 1px solid var(--Admin-Neutral04); border-radius: var(--Admin-Radius); font-family: var(--Admin-FontFamily); font-size: 16px; height: 48px; padding: 0 12px; transition: background var(--Admin-Transition), border-color var(--Admin-Transition), box-shadow var(--Admin-Transition); } .ScaffoldFilterDate:hover { background: var(--Admin-ScaffoldSearchHoverBg); } .ScaffoldFilterDate:focus { border-color: var(--Admin-FocusColor); box-shadow: var(--Admin-FocusRingBoxShadow); outline: none; } .StatementPanelText { color: var(--Admin-Neutral07); font-size: 14px; line-height: 1.5; margin: 0 0 8px; } .RowActionIconStatement { mask-image: url(/Images/IconDownload.svg); } /* ============================================ Think Charity - Admin menu ============================================ The front end's Menu (ThinkCharity/CSS/Menu.css) for Templates/Menu.tpl: the Popover API opens and dismisses the panel, and CSS anchor positioning hangs it below the trigger, right edges aligned. The trigger is Redstone's IconButton in the row action icon colour; the panel and rows are the front end's. */ .MenuTrigger { anchor-name: var(--MenuAnchor-Name); color: var(--Admin-RowActionIconColor); } .MenuTriggerIcon { background-color: currentColor; height: 24px; mask: url(/Images/IconEllipsis.svg) no-repeat center / contain; width: 24px; } /* Open reads as IconButton:active. JS/Admin/Menu.js sets the class. */ .MenuTrigger.MenuTriggerExpanded { background: var(--Admin-PrimaryButton); color: var(--Admin-OnBrand); } /* The 95% opacity is on the fill, so the rows stay fully opaque. Where the page header stacks and the trigger sits at the left, flip-inline hangs the panel to the right of it instead. */ .MenuPanel { background-color: rgb(255 255 255 / 0.95); border: none; border-radius: 12px; box-shadow: 0 4px 8px rgb(0 0 0 / 0.25); color: #000000; margin: 2px 0 0; padding: 8px 0; position: absolute; position-anchor: var(--MenuAnchor-Name); position-area: bottom span-left; position-try-fallbacks: flip-inline, flip-block; width: 200px; } .MenuList { list-style: none; margin: 0; padding: 0; } .MenuItemLink { align-items: center; appearance: none; background: none; border: none; border-radius: 8px; color: inherit; cursor: pointer; display: flex; font: inherit; gap: 8px; height: 38px; margin-inline: 8px; padding-inline: 8px; text-align: left; text-decoration: none; transition: background-color var(--Admin-Transition); width: calc(100% - 16px); } .MenuItemLink:hover { background-color: #E1F0FA; } .MenuItemLink:active, .MenuItemLink:focus-visible { background-color: #B4D9F3; outline: none; } .MenuItemLink:disabled { cursor: progress; opacity: 0.6; } .MenuItemIcon { background-color: currentColor; flex: 0 0 auto; height: 24px; mask-position: center; mask-repeat: no-repeat; mask-size: contain; width: 24px; } .MenuItemIconDownload { mask-image: url(/Images/IconDownload.svg); } .MenuItemLabel { font-size: 16px; line-height: 20px; } /* ============================================ Think Charity — Admin Organizations list ============================================ Column sizing for the Organizations table only, scoped by its data-scaffold attribute so other Scaffold tables keep Redstone's default auto layout. Created, Status and Actions hold fixed-size content (a relative date, a 104px badge, three 16px icons at 40px pitch), so they take the design's pixel widths. Name and URL share the rest. At the 1160px design width that gives 374 and 373, so the columns start at the spec's 530 / 904 / 1277 / 1401 / 1530. At narrower widths only the text columns shrink, which keeps the badge clear of the icons. The 800px minimum stops Name and URL going below about 190px each. Narrower than that, the table scrolls inside .ScaffoldTableWrapper instead. All of it applies above 640px only. At 640px and below Redstone turns the table into stacked cards, where a minimum width would push the page wider than the viewport. */ @media (min-width: 641px) { .ScaffoldTable[data-scaffold="organizations"] { min-width: 800px; table-layout: fixed; } .ScaffoldTable[data-scaffold="organizations"] thead th:nth-child(3) { width: 124px; } .ScaffoldTable[data-scaffold="organizations"] thead th:nth-child(4) { width: 129px; } .ScaffoldTable[data-scaffold="organizations"] thead th:nth-child(5) { width: 160px; } /* The actions cell holds icon buttons, not inset text. A 16px inset plus the 12px between each 40px hit area and its centred 16px icon puts the first icon at the spec's x1554. */ .ScaffoldTable[data-scaffold="organizations"] tbody td:last-child { padding-left: 16px; } } /* ============================================ Think Charity — Admin Challenges list ============================================ There is no design for this table; it follows the Organizations list (Organizations.css), and the close-out dialog follows the shared Dialog. Rules are scoped to data-scaffold="challenges" or the #ResolveDialog classes. Ends, Pledged, Created By, Status and Actions hold short fixed content, so they take fixed widths and Title takes the rest: 192px at 1280, where the content column is 900. Cells have 24px side padding, so the widths are the content plus 48: "4 pledges" and the CREATED BY heading need 132, the 104px badge 152 ("Ready to resolve" wraps under it). Ends fits "February 8, 2026"; the longest months wrap the year. Actions fits three 40px icon buttons (see the actions-cell rule). As on Organizations, all of it applies above 640px only, where Redstone's stacked cards take over. */ @media (min-width: 641px) { .ScaffoldTable[data-scaffold="challenges"] { min-width: 860px; table-layout: fixed; } .ScaffoldTable[data-scaffold="challenges"] thead th:nth-child(2) { width: 148px; } .ScaffoldTable[data-scaffold="challenges"] thead th:nth-child(3) { width: 132px; } .ScaffoldTable[data-scaffold="challenges"] thead th:nth-child(4) { width: 132px; } .ScaffoldTable[data-scaffold="challenges"] thead th:nth-child(5) { width: 152px; } .ScaffoldTable[data-scaffold="challenges"] thead th:nth-child(6) { width: 144px; } /* Icon buttons, not inset text: the same 16px inset as Organizations.css. Three 40px buttons fill 120 of the 144px column, so the right padding drops to 8; the 12px between the last button's edge and its icon makes up the rest. */ .ScaffoldTable[data-scaffold="challenges"] tbody td:last-child { padding-left: 16px; padding-right: 8px; } } /* Table cells are Poppins (--Admin-FontFamily), a static font, so font-weight alone sets the weight there. */ /* The sides under the title, and the pledge count under the total. */ .ChallengeSides, .ChallengeTallyCount { color: var(--Admin-Neutral06); display: block; font-size: 14px; line-height: 20px; margin-top: 4px; } /* A side name wraps as a whole, never mid-name; one too long for the column is cut short with an ellipsis. */ .ChallengeSideName { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; } .ChallengeSidesVersus { margin: 0 4px; } .ChallengeTallyTotal { display: block; font-weight: 600; } /* Status badges by ChallengeStatus ID: Draft, Active, Closed, Deleted. Redstone's StatusBadgeStatus1-3 are keyed to the organization approval statuses, so challenges get their own mapping onto the same tokens. */ .ChallengeStatusBadge1 { background: var(--Admin-StatusBadgeInfoFill); border-color: var(--Admin-StatusBadgeInfoBorder); color: var(--Admin-StatusBadgeInfoText); } .ChallengeStatusBadge2 { background: var(--Admin-StatusBadgeSuccessFill); border-color: var(--Admin-StatusBadgeSuccessBorder); color: var(--Admin-StatusBadgeSuccessText); } .ChallengeStatusBadge3 { background: var(--Admin-Neutral02); border-color: var(--Admin-Neutral04); color: var(--Admin-Neutral07); } .ChallengeStatusBadge4 { background: var(--Admin-StatusBadgeDangerFill); border-color: var(--Admin-StatusBadgeDangerBorder); color: var(--Admin-StatusBadgeDangerText); } /* The second line under the badge: the outcome of a closed challenge, or "Ready to resolve" (added by ChallengeResolve.js). */ .ChallengeStatusNote { color: var(--Admin-Neutral06); display: block; font-size: 14px; line-height: 20px; margin-top: 4px; } .ChallengeStatusNoteReady { color: var(--Admin-LinkColor); font-weight: 600; } /* The Pledged and Status cells hold two lines. Wrapped in one element, they stay together as the cell's value in the ≤640 stacked cards, where each cell is a flex row that spreads its children apart. */ .ChallengeCellLines { display: block; } @media (max-width: 640px) { .ChallengeCellLines { text-align: right; } } /* ============================================ Close-out dialog (#ResolveDialog) ============================================ */ .ResolveDialogChallengeTitle { font-weight: 600; } .ResolveStep { display: flex; flex-direction: column; gap: var(--Admin-DialogGap); margin: 0; } .ResolveStep[hidden] { display: none; } /* The three outcomes stack at the dialog buttons' width. */ .ResolveChoices { align-items: center; display: flex; flex-direction: column; gap: var(--Admin-DialogButtonGap); } .ResolveChoices .Button { margin: 0; max-width: 100%; width: var(--Admin-DialogButtonWidth); } .ResolveChoices .DangerButton { margin-right: 0; } /* The winner picker follows the front end's Pick Side cards (ThinkCharity/CSS/ChallengeAccept.css): navy at rest, the side's accent gradient and glow when picked, Accent01 for side 1 and Accent03 for side 2. The input is visually hidden and the label is the card. */ .ResolveSides { border: 0; display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin: 0; min-width: 0; padding: 0; } .ResolveSide { align-items: center; background-color: #002E6D; border-radius: 16px; color: var(--Admin-White); cursor: pointer; display: flex; flex-direction: column; gap: 4px; justify-content: center; min-height: 120px; padding: 16px; position: relative; text-align: center; transition: 0.25s; } /* The input covers the card, so it carries the pointer too. */ .ResolveSideInput { appearance: none; border-radius: 16px; cursor: pointer; inset: 0; margin: 0; position: absolute; } .ResolveSideInput:focus-visible { box-shadow: var(--Admin-FocusRingBoxShadow); outline: none; } .ResolveSideName { --TCTypeface-FontWght: 700; font-family: var(--TCTypeface01-FontFamily); font-size: 18px; font-variation-settings: var(--TCTypeface01-FontVariationSettings); font-weight: var(--TCTypeface-FontWght); line-height: 20px; } .ResolveSideTotal { font-size: 14px; line-height: 20px; } .ResolveSide[data-display-order="1"]:has(.ResolveSideInput:checked) { background-color: #97D700; background-image: linear-gradient(180deg, #97D700 0%, #C8ED00 100%); box-shadow: 0 0 8px #97D700; color: #154734; } .ResolveSide[data-display-order="2"]:has(.ResolveSideInput:checked) { background-color: #00C389; background-image: linear-gradient(180deg, #00C389 0%, #00E3BE 100%); box-shadow: 0 0 8px #00C389; color: #154734; } /* No narrow design: the cards stack on a phone-width dialog. */ @media (max-width: 640px) { .ResolveSides { grid-template-columns: 1fr; } } /* ============================================ Winner override dialog (#OverrideDialog) ============================================ Reuses the close-out dialog's steps and side cards. The current winner's card is marked and can't be picked; the other card takes the usual picked gradient. */ .OverrideCurrentTag { display: none; } .OverrideSideCurrent .OverrideCurrentTag { background: var(--Admin-White); border-radius: 12px; color: #002E6D; display: block; font-size: 12px; font-weight: 600; line-height: 16px; padding: 4px 8px; text-transform: uppercase; } .OverrideSideCurrent, .OverrideSideCurrent .ResolveSideInput { cursor: default; } /* Left-aligned and bulleted so each audience reads as its own line. */ .OverrideConsequences { display: flex; flex-direction: column; gap: 8px; padding-left: 20px; text-align: left; } .OverrideConsequences strong { color: var(--Admin-Black); } /* ============================================ Think Charity — Admin Campaigns list ============================================ There is no design for this table; it follows the Challenges list (Challenges.css). Rules are scoped to data-scaffold="campaigns". Ends, Raised, Created By, Status and Actions hold short fixed content, so they take fixed widths and Title takes the rest. Cells have 24px side padding, so the widths are the content plus 48: Raised fits "100% of $10,000.00" (six-figure goals wrap), the 104px badge needs 152. Actions fits two 40px icon buttons (see the actions-cell rule). Title gets 192 at 1280. All of it applies above 640px only, where Redstone's stacked cards take over. */ @media (min-width: 641px) { .ScaffoldTable[data-scaffold="campaigns"] { min-width: 860px; table-layout: fixed; } .ScaffoldTable[data-scaffold="campaigns"] thead th:nth-child(2) { width: 148px; } .ScaffoldTable[data-scaffold="campaigns"] thead th:nth-child(3) { width: 172px; } .ScaffoldTable[data-scaffold="campaigns"] thead th:nth-child(4) { width: 132px; } .ScaffoldTable[data-scaffold="campaigns"] thead th:nth-child(5) { width: 152px; } .ScaffoldTable[data-scaffold="campaigns"] thead th:nth-child(6) { width: 104px; } /* Two 40px buttons with the same 16px inset as Challenges.css, and the same 8px on the right. */ .ScaffoldTable[data-scaffold="campaigns"] tbody td:last-child { padding-left: 16px; padding-right: 8px; } } /* The beneficiary under the title, and the goal under the amount raised. */ .CampaignBeneficiary, .CampaignRaisedGoal, .CampaignRaisedGoalReached { color: var(--Admin-Neutral06); display: block; font-size: 14px; line-height: 20px; margin-top: 4px; } .CampaignRaisedTotal { display: block; font-weight: 600; } .CampaignRaisedGoalReached { color: var(--Admin-StatusBadgeSuccessText); font-weight: 600; margin-top: 0; } /* Status badges by CampaignStatus ID: Draft, Active, Ended, Closed, Deleted. */ .CampaignStatusBadge1 { background: var(--Admin-StatusBadgeInfoFill); border-color: var(--Admin-StatusBadgeInfoBorder); color: var(--Admin-StatusBadgeInfoText); } .CampaignStatusBadge2 { background: var(--Admin-StatusBadgeSuccessFill); border-color: var(--Admin-StatusBadgeSuccessBorder); color: var(--Admin-StatusBadgeSuccessText); } .CampaignStatusBadge3, .CampaignStatusBadge4 { background: var(--Admin-Neutral02); border-color: var(--Admin-Neutral04); color: var(--Admin-Neutral07); } .CampaignStatusBadge5 { background: var(--Admin-StatusBadgeDangerFill); border-color: var(--Admin-StatusBadgeDangerBorder); color: var(--Admin-StatusBadgeDangerText); } /* The Raised cell holds two or three lines. Wrapped in one element, they stay together as the cell's value in the ≤640 stacked cards. */ .CampaignCellLines { display: block; } @media (max-width: 640px) { .CampaignCellLines { text-align: right; } } /* ============================================ Think Charity — Admin Pledges list ============================================ The design's Pledges frame has five columns across 1160px; Pledged and Outcome are ours. Seven didn't fit the 900px content column at 1280, so the organization sits under the challenge (PledgesListBody.tpl). Side Chosen, Pledge, Pledged and Outcome hold short content, so they take fixed widths and Challenge and Name share the rest: 166px each at 1280, 296 at 1920. Cells have 24px side padding, so each width is the content plus 48: the SIDE CHOSEN heading needs 148, "$500,000.00" 128, the PLEDGED heading and its sort arrow 140, and the 104px badge 152. As on the other lists, all of it applies above 640px only, where Redstone's stacked cards take over. */ @media (min-width: 641px) { .ScaffoldTable[data-scaffold="pledges"] { min-width: 900px; table-layout: fixed; } .ScaffoldTable[data-scaffold="pledges"] thead th:nth-child(3) { width: 148px; } .ScaffoldTable[data-scaffold="pledges"] thead th:nth-child(4) { width: 128px; } .ScaffoldTable[data-scaffold="pledges"] thead th:nth-child(5) { width: 140px; } .ScaffoldTable[data-scaffold="pledges"] thead th:nth-child(6) { width: 152px; } /* The design right-aligns the amount and its heading. */ .ScaffoldTable[data-scaffold="pledges"] .PledgeAmountCell { text-align: right; } } /* The design's challenge dropdown: 327px, left of the search, and no wider than the column on a phone. */ .ScaffoldFilterSelectWrapper { max-width: 100%; } .ScaffoldFilterSelectWrapper .ScaffoldFilterSelect { max-width: 100%; width: 327px; } /* Name over email for members, email over "Guest" for guests. The card view right-aligns them with the other values; the challenge cell is the card's title, so its organization line isn't wrapped and stays left. */ .PledgeCellLines { display: block; } .PledgerName { display: block; } .PledgeCellNote { color: var(--Admin-Neutral06); display: block; font-size: 14px; line-height: 20px; margin-top: 4px; } /* An address has no spaces to wrap at, so it breaks anywhere instead of widening the column. */ .PledgerEmail { overflow-wrap: anywhere; } @media (max-width: 640px) { .PledgeCellLines { text-align: right; } } /* Outcome badges by PledgeOutcomes ID: Won, Lost, Cancelled, No Winner, plus Pending for a pledge whose challenge hasn't closed. */ .PledgeOutcomeBadgePending { background: var(--Admin-StatusBadgeInfoFill); border-color: var(--Admin-StatusBadgeInfoBorder); color: var(--Admin-StatusBadgeInfoText); } .PledgeOutcomeBadge1 { background: var(--Admin-StatusBadgeSuccessFill); border-color: var(--Admin-StatusBadgeSuccessBorder); color: var(--Admin-StatusBadgeSuccessText); } .PledgeOutcomeBadge2, .PledgeOutcomeBadge3, .PledgeOutcomeBadge4 { background: var(--Admin-Neutral02); border-color: var(--Admin-Neutral04); color: var(--Admin-Neutral07); } /* ============================================ Think Charity - Admin Donations list and Donation page ============================================ Donor and For share the width; Amount, Date, Status and Actions take fixed widths. Status fits the 104px badge plus the 48px cell padding; a refunded donation's Refunded badge wraps under its status. Actions fits one 40px icon button with the Campaigns list's 16px inset and 8px on the right. As on the other lists, the widths apply above 640px only, where Redstone's stacked cards take over. */ @media (min-width: 641px) { .ScaffoldTable[data-scaffold="donations"] { min-width: 920px; table-layout: fixed; } .ScaffoldTable[data-scaffold="donations"] thead th:nth-child(3) { width: 128px; } .ScaffoldTable[data-scaffold="donations"] thead th:nth-child(4) { width: 140px; } .ScaffoldTable[data-scaffold="donations"] thead th:nth-child(5) { width: 152px; } .ScaffoldTable[data-scaffold="donations"] thead th:nth-child(6) { width: 64px; } .ScaffoldTable[data-scaffold="donations"] tbody td:last-child { padding-left: 16px; padding-right: 8px; } .ScaffoldTable[data-scaffold="donations"] .DonationAmountCell { text-align: right; } } /* Three dropdowns sit beside the search, so each is narrower than the Pledges one. */ [data-scaffold-toolbar="donations"] .ScaffoldFilterSelectWrapper .ScaffoldFilterSelect { width: 200px; } /* The receipt number box, before the email search, fits an 8-character receipt number. On narrow screens the email search and GO wrap below it. */ [data-scaffold-toolbar="donations"] .ScaffoldSearchForm { flex-wrap: wrap; } [data-scaffold-toolbar="donations"] .ScaffoldSearch .ScaffoldFilterText { width: 152px; } /* Name over email in Donor; challenge or campaign over organization in For. */ .DonationCellLines { display: block; } .DonorName, .DonationFor { display: block; } .DonationCellNote { color: var(--Admin-Neutral06); display: block; font-size: 14px; line-height: 20px; margin-top: 4px; } .DonorEmail { overflow-wrap: anywhere; } .DonationBadges { display: inline-flex; flex-wrap: wrap; gap: 8px; } @media (max-width: 640px) { .DonationCellLines { text-align: right; } /* The donor is the card title, so it stays left like other cards'. */ .ScaffoldTable tbody td:has(.ScaffoldRowLink) .DonationCellLines { text-align: left; } } /* Status badges by DonationStatus ID: Pending, Succeeded, Failed. */ .DonationStatusBadge1 { background: var(--Admin-StatusBadgeInfoFill); border-color: var(--Admin-StatusBadgeInfoBorder); color: var(--Admin-StatusBadgeInfoText); } .DonationStatusBadge2 { background: var(--Admin-StatusBadgeSuccessFill); border-color: var(--Admin-StatusBadgeSuccessBorder); color: var(--Admin-StatusBadgeSuccessText); } .DonationStatusBadge3 { background: var(--Admin-StatusBadgeDangerFill); border-color: var(--Admin-StatusBadgeDangerBorder); color: var(--Admin-StatusBadgeDangerText); } .DonationRefundedBadge { background: var(--Admin-Neutral02); border-color: var(--Admin-Neutral04); color: var(--Admin-Neutral07); } /* Donation page */ .DonorAddress span { display: block; } .DonationNoteFailure { color: var(--Admin-StatusBadgeDangerText); font-size: 13px; margin-top: 4px; } .RefundDialog .FormFieldTextArea { margin-bottom: 16px; width: 100%; } /* ============================================ Think Charity - Admin account pages ============================================ The Staff account panel (Templates/StaffAccount.tpl) puts each card's buttons below it, so they take the cards' 24px spacing before the next card. */ .AccountForm .FormButtons, .AccountPanel > .FormButtons { margin-bottom: 24px; } /* A second line under a list cell, as .PledgeCellNote on the Pledges list. */ .AccountCellNote { color: var(--Admin-Neutral06); display: block; font-size: 14px; line-height: 20px; margin-top: 4px; } /* Row action icon for a staff member's roles page, in the same mask style as the row icons in Shell.css. */ .RowActionIconRoles { mask-image: url(/Images/IconRoles.svg); } /* Staff list roles: one line of comma-separated names, the first three shown, then an ellipsis when there are more (Templates/StaffRowCells.tpl). */ .AccountRoleList { display: block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .AccountRoleName + .AccountRoleName::before { content: ", "; } .AccountRoleName:nth-child(n+4) { display: none; } .AccountRoleList:has(.AccountRoleName:nth-child(4))::after { content: ", \2026"; } /* Row action icon for resending a staff invite. */ .RowActionIconResend { mask-image: url(/Images/IconResend.svg); } /* Row action icon for sending a staff member a password reset link. */ .RowActionIconResetLink { mask-image: url(/Images/IconKey.svg); } /* ============================================ Think Charity — Admin Dashboard ============================================ Pages/index.tpl, cut from the Sketch Admin frame "Dashboard" (SVG in LocalTemp/Sketch/Admin/Dashboard/). White tiles 16px apart: three stat tiles across, then two challenge panels side by side, then full-width panels. A panel is a header (DegularDisplay-Bold 24 with View All) over rows split by a hairline; a challenge row is its art, title and organization, the panel's extra cells, and the edit and view actions. Below 900px the tiles stack. The actions sit at the top of the row, level with the title, as in Sketch: their 40px hit areas pad each icon by 12px, so they start 8px above the 24px title line. Each tile is a size container: when its content is narrower than 420px (the two-up panels at 1024 and 1280), a row's actions wrap to a line under the text instead of squeezing it. Pending Resolutions rows, with the creator and end date too, move those to a second line below 760px, and their actions follow below 420px. */ .AdminDashboard { display: flex; flex-direction: column; gap: 16px; } .DashboardStats { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .DashboardPair { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .DashboardTile { background-color: #ffffff; border-radius: 8px; container-type: inline-size; min-width: 0; padding: 24px; } .DashboardTileHeader { align-items: baseline; border-bottom: 1px solid #D2E8F8; display: flex; gap: 16px; justify-content: space-between; padding-bottom: 12px; } .DashboardTileTitle { --TCTypeface-FontWght: 700; color: #000000; font-family: var(--TCTypeface02-FontFamily); font-size: 24px; font-variation-settings: var(--TCTypeface02-FontVariationSettings); font-weight: var(--TCTypeface-FontWght); line-height: 24px; margin: 0; } .DashboardViewAll { --TCTypeface-FontWght: 700; border-radius: var(--Admin-Radius); color: #002E6D; flex: 0 0 auto; font-family: var(--TCTypeface02-FontFamily); font-size: 16px; font-variation-settings: var(--TCTypeface02-FontVariationSettings); font-weight: var(--TCTypeface-FontWght); line-height: 24px; margin: -4px; padding: 4px; text-decoration: none; } .DashboardViewAll:hover { text-decoration: underline; } .DashboardViewAll:focus-visible { box-shadow: var(--Admin-FocusRingBoxShadow); outline: none; } /* Stat tiles: the title, then the figure (DegularDisplay-Black 48/56) and its period (Degular-Bold 18/20), centred. */ .DashboardStatTile { display: flex; flex-direction: column; text-align: center; } .DashboardStatTile .DashboardTileTitle { margin-bottom: 28px; text-align: left; } .DashboardTileFigure { --TCTypeface-FontWght: 900; color: #002E6D; font-family: var(--TCTypeface02-FontFamily); font-size: 48px; font-variation-settings: var(--TCTypeface02-FontVariationSettings); font-weight: var(--TCTypeface-FontWght); line-height: 56px; margin: 0 0 12px; overflow-wrap: anywhere; } .DashboardTilePeriod { --TCTypeface-FontWght: 700; color: #002E6D; font-family: var(--TCTypeface01-FontFamily); font-size: 18px; font-variation-settings: var(--TCTypeface01-FontVariationSettings); font-weight: var(--TCTypeface-FontWght); line-height: 20px; margin: 0; } /* Rows */ .DashboardRows { list-style: none; margin: 0; padding: 0; } /* The art, text and actions align to the top, as in Sketch; the Pending Resolutions details sit in the middle. */ .DashboardRow { align-items: flex-start; border-bottom: 1px solid #D2E8F8; display: flex; gap: 16px; padding: 14px 0; } .DashboardRow:last-child { border-bottom: none; padding-bottom: 0; } .DashboardRowThumbnail { aspect-ratio: 327 / 180; border-radius: 6px; flex: 0 0 89px; object-fit: cover; width: 89px; } .DashboardRowText { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; } .DashboardRowTitle { border-radius: var(--Admin-Radius); color: #000000; overflow-wrap: anywhere; font-family: var(--TCTypeface03-FontFamily); font-size: 16px; font-weight: 700; line-height: 24px; text-decoration: none; } .DashboardRowTitle:hover { text-decoration: underline; } .DashboardRowTitle:focus-visible { box-shadow: var(--Admin-FocusRingBoxShadow); outline: none; } .DashboardRowNote, .DashboardRowCell { color: #000000; font-family: var(--TCTypeface03-FontFamily); font-size: 14px; line-height: 24px; } .DashboardRowNote { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .DashboardRowCell { flex: 0 0 auto; } .DashboardRowCreator { flex-basis: 160px; } .DashboardRowDate { white-space: nowrap; } .DashboardRow .ScaffoldRowActions { flex: 0 0 auto; margin-top: -8px; padding-left: 0; } /* Pending Resolutions: the creator, end date and actions sit in the row's middle, until the details wrap (below). */ .DashboardRow:has(.DashboardRowDetails) .ScaffoldRowActions { align-self: center; margin-top: 0; } .DashboardRowDetails { align-items: center; align-self: center; display: flex; flex: 0 0 auto; gap: 16px; } /* Failed Notifications: name, recipient, email, phone and time across. */ .DashboardNotificationRow { align-items: center; min-height: 54px; padding-block: 7px; } .DashboardNotificationRow .DashboardRowCell { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .DashboardNotificationName { font-weight: 700; } .DashboardNotificationRow .DashboardRowDate { flex: 0 0 auto; } .DashboardRowArrow { align-items: center; border-radius: var(--Admin-Radius); display: flex; flex: 0 0 40px; height: 40px; justify-content: center; } .DashboardRowArrow:hover { background-color: var(--Admin-RowActionHoverBg, rgb(0 46 109 / 0.08)); } .DashboardRowArrow:focus-visible { box-shadow: var(--Admin-FocusRingBoxShadow); outline: none; } .RowActionIconArrow { mask-image: url(/Images/IconBackArrow.svg); transform: scaleX(-1); } .DashboardEmpty, .DashboardPlaceholder { color: var(--Admin-Neutral06); font-family: var(--TCTypeface03-FontFamily); font-size: 14px; line-height: 24px; margin: 0; padding-top: 16px; } @media (max-width: 900px) { .DashboardStats, .DashboardPair { grid-template-columns: minmax(0, 1fr); } } /* Pending Resolutions below 760px: the creator and end date go to a second line under the text (the art's 89px plus the 16px gap), and the actions move to the top right, level with the title. */ @container (max-width: 759px) { .DashboardRow:has(.DashboardRowDetails) { flex-wrap: wrap; row-gap: 4px; } .DashboardRow:has(.DashboardRowDetails) .DashboardRowText { flex: 1 1 0; } .DashboardRow:has(.DashboardRowDetails) .ScaffoldRowActions { align-self: flex-start; margin-top: -8px; } .DashboardRowDetails { align-self: flex-start; margin-left: 105px; order: 1; width: calc(100% - 105px); } .DashboardRowCreator { flex-basis: auto; } } /* A narrow tile: the text takes the first line beside the art, and the actions follow on their own line, lined up under the text (the 40px hit areas pad each icon by 12px, so they start 12px left of the text's 105px). In Pending Resolutions they come after the creator and end date. Notification rows wrap two cells to a line. */ @container (max-width: 419px) { .DashboardRow { flex-wrap: wrap; row-gap: 4px; } .DashboardRowText, .DashboardRow:has(.DashboardRowDetails) .DashboardRowText { flex: 1 1 calc(100% - 105px); } .DashboardRow .ScaffoldRowActions { margin-left: 93px; margin-top: 0; order: 2; } .DashboardRowDetails { flex-wrap: wrap; gap: 0 16px; } .DashboardNotificationRow .DashboardRowCell { flex-basis: 40%; } } /* ============================================ Think Charity — Admin Notifications list ============================================ The NotificationLog review list (Pages/notifications.tpl). No design exists, so it follows the Pledges list: Notification and Recipient share the width, and Channel, Status and Logged take fixed widths of their content plus the cells' 48px of padding (the CHANNEL heading and sort arrow 128, the 112px Suppressed badge 160, the LOGGED date and time 176). Above 640px only, as on the other lists. */ @media (min-width: 641px) { .ScaffoldTable[data-scaffold="notifications"] { min-width: 900px; table-layout: fixed; } .ScaffoldTable[data-scaffold="notifications"] thead th:nth-child(3) { width: 128px; } .ScaffoldTable[data-scaffold="notifications"] thead th:nth-child(4) { width: 160px; } .ScaffoldTable[data-scaffold="notifications"] thead th:nth-child(5) { width: 176px; } } .NotificationCellLines { display: block; } .NotificationName, .NotificationRecipient { display: block; font-weight: 500; overflow-wrap: anywhere; } .NotificationCellNote { color: var(--Admin-Neutral06); display: block; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; } /* The provider's reason for a failure or bounce, under the notification. */ .NotificationReason { color: var(--Admin-StatusBadgeDangerText, #b71c1c); display: block; font-size: 14px; line-height: 20px; margin-top: 4px; overflow-wrap: anywhere; } .NotificationStatusBadge1, .NotificationStatusBadge5 { background: var(--Admin-StatusBadgeInfoFill); border-color: var(--Admin-StatusBadgeInfoBorder); color: var(--Admin-StatusBadgeInfoText); } .NotificationStatusBadge2 { background: var(--Admin-StatusBadgeSuccessFill); border-color: var(--Admin-StatusBadgeSuccessBorder); color: var(--Admin-StatusBadgeSuccessText); } .NotificationStatusBadge3, .NotificationStatusBadge4 { background: var(--Admin-StatusBadgeDangerFill); border-color: var(--Admin-StatusBadgeDangerBorder); color: var(--Admin-StatusBadgeDangerText); } @media (max-width: 640px) { .NotificationCellLines { text-align: right; } } /* ============================================ Think Charity — Forms (Organization create/edit, Password change) ============================================ Brand layer for the form components Redstone leaves generic: the edit metadata panel, the form-card heading, text-field states, the slug preview read-only box, the Save/Cancel buttons and the form-result messages. Structural sizing (padding, radius tokens, grid) that any project would want stays in Redstone/Form.css; this file only re-declares colour, type and the Think Charity–specific offsets the design spec calls out (LocalTemp/AdminDesignSpec.md — Layout: "Organizations - Edit", Components: Text field). Loads after Redstone/Form.css and ThinkCharity/Shell.css in CSS/Admin.json. */ /* ============================================ Edit metadata panel ============================================ Redstone's default is a neutral left-border strip; the design is a solid tinted panel with generous inset and Poppins Bold labels. */ .EditMetadata { background: #C3E1F5; border-left: none; border-radius: var(--Admin-Radius); color: #000000; font-family: var(--TCTypeface03-FontFamily); font-size: 16px; gap: 8px 24px; margin: 0 0 24px; padding: 16px; } .EditMetadata > span { max-width: 100%; min-width: 0; } .EditMetadata .EditMetadataLabel { --TCTypeface-FontWght: 700; color: #002E6D; font-family: var(--TCTypeface03-FontFamily); font-size: 16px; font-weight: var(--TCTypeface-FontWght); letter-spacing: normal; text-transform: none; } .EditMetadata .EditMetadataLink { color: #002E6D; font-weight: 400; margin-left: 0; overflow-wrap: anywhere; text-decoration: underline; } .EditMetadata .EditMetadataLink:hover { color: var(--Admin-PrimaryButtonHover); } .EditMetadata .EditMetadataLink:focus-visible { border-radius: var(--Admin-Radius); box-shadow: var(--Admin-FocusRingBoxShadow); margin: -4px; outline: none; padding: 4px; } /* Created reads like the other values; Redstone's .RelativeDate is the dashboard's small grey italic. */ .EditMetadata .RelativeDate { color: inherit; font-size: inherit; font-style: normal; } /* ============================================ Form card (FormGroup) ============================================ */ .FormGroup { border-radius: var(--Admin-Radius); } .FormGroupTitle { --TCTypeface-FontWght: 700; border-bottom: none; color: #000000; font-family: var(--TCTypeface02-FontFamily); font-size: 24px; font-variation-settings: var(--TCTypeface02-FontVariationSettings); font-weight: var(--TCTypeface-FontWght); line-height: 24px; padding: 24px 24px 16px; } /* The title already carries its own bottom padding as the gap to the first field, so the content block underneath doesn't also need its own top inset — only when a title is present (child forms with no FormGroupTitle keep Redstone's uniform 24px). */ .FormGroup:has(.FormGroupTitle) .FormGroupContent { padding-top: 0; } /* ============================================ Field labels ============================================ The design puts the required asterisk AFTER the label text ("Text:" then "*"); JR's Label.tpl markup renders the asterisk first. Reordered with flex + order rather than editing the shared template, which is also used outside this pass. */ .FormFieldLabel { color: #000000; display: flex; font-family: var(--TCTypeface03-FontFamily); font-size: 14px; font-weight: 400; gap: 2px; line-height: 18px; margin-bottom: 6px; } .FormFieldLabelText { order: 1; } .FormFieldRequired { color: var(--Admin-ErrorColor); order: 2; } /* ============================================ Text field states ============================================ Symbols: Form/Text Field/*, Form/Text Field - Required/* (LocalTemp/Sketch/Admin/symbols/Form_Text_Field_*). Default: 1px #B3B3B3 border. Hover: #F0F7FD fill. Active/typing: 1px #69B3E7 border + 3px #69B3E7 ring at 25%. Filled/read-only: #F5F5F5, no border, #585858 text. Error: same ring in #EE0B0B plus a message below. */ .FormFieldInput, .FormFieldTextBox, .FormFieldEmailBox, .FormFieldSelect, .FormFieldTextArea { background: #FFFFFF; border: 1px solid #B3B3B3; border-radius: var(--Admin-Radius); color: #000000; font-family: var(--TCTypeface03-FontFamily); font-size: 16px; height: 48px; padding: 0 16px; transition: background var(--Admin-Transition), border-color var(--Admin-Transition), box-shadow var(--Admin-Transition); } .FormFieldTextArea { height: auto; min-height: 120px; padding: 16px; } /* Dropdown — Form/Dropdown/*: the text field plus a 24px chevron 16px from the right edge, #919191 with the placeholder showing (the design's rest, hover and focus states) and black once a value is picked, like the text. The native arrow is removed and the chevron is drawn on the wrapper, not as the select's background image, because browser autofill repaints the field's background and would hide it. A mask keeps one file for every colour. The design's Active state is the open list, with the chevron flipped and black; :open isn't supported everywhere yet, so that rule simply drops out where it isn't. */ .FormFieldSelectWrapper { position: relative; } .FormFieldSelectWrapper::after { background: var(--Admin-SelectArrowColor); content: ""; height: 24px; mask-image: url(/Images/IconSelectArrow.svg); mask-position: center; mask-repeat: no-repeat; mask-size: contain; pointer-events: none; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); transition: transform var(--Admin-Transition), background var(--Admin-Transition); width: 24px; } .FormFieldSelectWrapper:has(.Placeholder:checked)::after { background: var(--Admin-SelectArrowPlaceholderColor); } .FormFieldSelectWrapper:has(.FormFieldSelect:open)::after { background: var(--Admin-SelectArrowOpenColor); transform: translateY(-50%) scaleY(-1); } /* 16px inset + 24px chevron + 8px gap, so a long option never runs under it. */ .FormFieldSelect { appearance: none; padding-right: 48px; } /* While the placeholder option is chosen, the field shows it in the design's placeholder grey, like a text field's placeholder. The open list keeps every option black. */ .FormFieldSelect:has(.Placeholder:checked) { color: #919191; } .FormFieldSelect option { color: #000000; } .FormFieldInput::placeholder, .FormFieldTextBox::placeholder, .FormFieldEmailBox::placeholder, .FormFieldTextArea::placeholder { color: #919191; } .FormFieldInput:hover, .FormFieldTextBox:hover, .FormFieldEmailBox:hover, .FormFieldSelect:hover, .FormFieldTextArea:hover { background: #F0F7FD; } /* "Active" in the spec is the typing state, not only keyboard focus — :focus (not :focus-visible) so a mouse click into the field shows it too, matching the symbol set. */ .FormFieldInput:focus, .FormFieldTextBox:focus, .FormFieldEmailBox:focus, .FormFieldSelect:focus, .FormFieldTextArea:focus { background: #FFFFFF; border-color: #69B3E7; box-shadow: 0 0 0 3px rgba(105, 179, 231, 0.25); outline: none; } /* Read-only / disabled — "Filled" in the spec. No FormField in this pass's two forms is actually read-only (the frozen Slug isn't an input at all — see .SlugPreview below), but the front-end pattern requires an explicit colour for every state, so this is here for the next field that needs it. */ .FormFieldInput:disabled, .FormFieldInput[readonly], .FormFieldTextBox:disabled, .FormFieldTextBox[readonly], .FormFieldEmailBox:disabled, .FormFieldEmailBox[readonly], .FormFieldTextArea:disabled, .FormFieldTextArea[readonly] { background: #F5F5F5; border-color: transparent; color: #585858; } /* Error — JS toggles .FieldInvalid on the input and .Visible on the adjacent .FormFieldErrorMessage message; see ScaffoldFormsAndNavigation.js. */ .FormFieldInput.FieldInvalid, .FormFieldTextBox.FieldInvalid, .FormFieldEmailBox.FieldInvalid, .FormFieldSelect.FieldInvalid, .FormFieldTextArea.FieldInvalid { border-color: #EE0B0B; } .FormFieldInput.FieldInvalid:focus, .FormFieldTextBox.FieldInvalid:focus, .FormFieldEmailBox.FieldInvalid:focus, .FormFieldSelect.FieldInvalid:focus, .FormFieldTextArea.FieldInvalid:focus { box-shadow: 0 0 0 3px rgba(238, 11, 11, 0.25); } .FormFieldErrorMessage { color: var(--Admin-ErrorColor); font-family: var(--TCTypeface03-FontFamily); font-size: 12px; font-weight: 500; line-height: 12px; margin-top: 6px; } /* Field help text — no design for this element. Kept quiet: Poppins 12, #585858, matching the field-error size but a neutral colour so it doesn't compete with a real error message. */ .FormFieldHelp { color: #585858; font-family: var(--TCTypeface03-FontFamily); font-size: 12px; font-weight: 400; line-height: 1.4; margin-top: 6px; } /* Checkbox selector — Admin/Checkbox/Selector/*: a Poppins Bold 16/24 #002E6D title with a Poppins Medium 14/18 #414141 description 4px under it, both 28px in. Sketch puts the box at y+4 of the 24px title line, but the browser sets Poppins 1px higher than Sketch (baseline 16, not 17), so the box sits 2px down to centre on the capitals, as on the front end. */ .FormFieldForCheckBox .FormFieldLabel input[type="checkbox"] { margin-top: 2px; } .FormFieldForCheckBox .FormFieldLabelText { color: #002E6D; font-family: var(--TCTypeface03-FontFamily); font-size: 16px; font-weight: 700; line-height: 24px; } .FormFieldForCheckBox .FormFieldHelp { color: #414141; display: block; font-size: 14px; font-weight: 500; line-height: 18px; margin-top: 4px; } /* ============================================ Slug preview (create page) — reads like a read-only field ============================================ No design for this element (JR's TCAutoSlugPreview component); the spec only has states for real inputs. Matches the Filled/read-only text-field treatment plus the field-error colour for a collision. */ .SlugPreview { background: #F5F5F5; border-radius: var(--Admin-Radius); color: #585858; display: flex; flex-wrap: wrap; font-family: var(--TCTypeface03-FontFamily); font-size: 16px; gap: 4px 12px; min-height: 48px; padding: 12px 16px; } .SlugPreviewValue { color: #585858; font-family: var(--TCTypeface03-FontFamily); } .SlugPreviewCollision { color: var(--Admin-ErrorColor); font-size: 12px; font-weight: 500; } /* ============================================ Save / Cancel buttons ============================================ FormButtons sits outside FormGroup already (ScaffoldForm.tpl / OrganizationCreateForm.tpl put them as siblings), so no template change was needed to move them visually below the card — only to drop Redstone's sticky-footer treatment, which doesn't match a design with the buttons living in normal flow 24px under the card. */ .ScaffoldForm .FormButtons, .FormButtons { background: none; border-top: none; box-shadow: none; gap: 16px; margin-top: 24px; padding: 0; position: static; } /* .FormButtonSubmit has no .Button class in the markup, so its look is built to match .Button.PrimaryButton (Shell.css) directly rather than layering a third palette on top of Redstone's own submit style. */ .FormButtonSubmit { --TCTypeface-FontWght: 700; align-items: center; background: var(--Admin-PrimaryButton); border: none; border-radius: var(--Admin-Radius); color: #FFFFFF; display: inline-flex; font-family: var(--TCTypeface01-FontFamily); font-size: 18px; font-variation-settings: var(--TCTypeface01-FontVariationSettings); font-weight: var(--TCTypeface-FontWght); height: var(--Admin-ButtonHeight); justify-content: center; line-height: 20px; min-width: 150px; padding: 0 24px; white-space: nowrap; } .FormButtonSubmit:hover { background: var(--Admin-PrimaryButtonHover); } .FormButtonSubmit:active { background: var(--Admin-PrimaryButtonActive); } .FormButtonSubmit:focus-visible { box-shadow: var(--Admin-FocusRingBoxShadow); outline: none; } .FormButtons .Button.SecondaryButton { min-width: 150px; white-space: nowrap; } /* ============================================ Form-result messages (success / error) ============================================ Notifications/Pop-Up/Block (LocalTemp/Sketch/Admin/symbols/ Notifications_Pop-Up_Block__339D.svg) turned out to be a "confirm you want to cancel this event" dialog, not a success/error banner — it doesn't map onto showFormSuccess()/.FormErrors at all (different content, two action buttons, no analogue in this flow). No banner component exists elsewhere in the spec either, so these keep Redstone's toast-style layout and just pick up brand tokens instead of the generic green/red: the danger and success status-badge tokens already defined in ThinkCharity/Theme.css for the Organizations badges, reused here for consistency rather than inventing new colours. */ .FormErrors { background: var(--Admin-StatusBadgeDangerFill); border-color: var(--Admin-StatusBadgeDangerBorder); color: var(--Admin-StatusBadgeDangerText); } .FormSuccessMessage, .FormSuccessInline { background: var(--Admin-StatusBadgeSuccessFill); } .FormSuccessMessage { border-color: var(--Admin-StatusBadgeSuccessBorder); color: var(--Admin-StatusBadgeSuccessText); } .FormSuccessIcon { background: var(--Admin-StatusBadgeSuccessFill); color: var(--Admin-StatusBadgeSuccessText); } .FormSuccessText { color: var(--Admin-StatusBadgeSuccessText); } /* ============================================ Edit pages: the locked details of a launched record ============================================ The Live edit forms (ChallengeEditLiveForm.tpl, CampaignEditLiveForm.tpl) show the fields that lock at launch as text. Label above value, like a form field, in two columns matching the forms' TwoColumn rows. */ .LockedDetails { display: grid; gap: 16px 24px; grid-template-columns: 1fr 1fr; margin: 0; } @media (max-width: 640px) { .LockedDetails { grid-template-columns: 1fr; } } .LockedDetails dt { color: var(--Admin-Neutral06); font-size: 14px; line-height: 20px; } .LockedDetails dd { color: var(--Admin-Black); font-size: 16px; line-height: 24px; margin: 4px 0 0; } /* ============================================ Featured order (Templates/Form/FeaturedOrder.tpl) ============================================ The switch and its label, then the order number in a short box. While the switch is off the number is readonly, shown in the disabled look. */ .FeaturedOrder { align-items: center; display: flex; flex-wrap: wrap; gap: 16px 24px; } .FeaturedOrderSwitch { align-items: center; cursor: pointer; display: inline-flex; gap: 12px; } .FeaturedOrderSwitchLabel { color: #000000; font-family: var(--TCTypeface03-FontFamily); font-size: 16px; } .FeaturedOrder .FeaturedOrderInput { width: 120px; } .FeaturedOrder .FeaturedOrderInput[readonly] { cursor: not-allowed; } /* ============================================ Thumbnail picker — Sketch Form/Thumbnail/* (Templates/Form/ThumbnailPicker.tpl) ============================================ A row of 163.5x90 images, 12px corners and 8px apart, that scrolls sideways and snaps to each image. Selected (and Active, the design's pressed state) is a 2px #69B3E7 ring 2px out; keyboard focus is the 8px glow. Hover is drawn the same as Default. The radio sits invisibly over its image, so it keeps keyboard and screen reader behaviour. The list's padding leaves room for the ring and glow inside its scroll box, and it's positioned so ThumbnailPicker.js can read each image's offset from it. */ /* The field is a FormRow grid item, which would otherwise grow to the whole row's width. */ .FormFieldForThumbnailPicker { min-width: 0; } .ThumbnailPickerList { display: flex; gap: 8px; margin: -8px; overflow-x: auto; overscroll-behavior-x: contain; padding: 8px; position: relative; scroll-padding-inline: 8px; scroll-snap-type: x mandatory; scrollbar-width: thin; } .ThumbnailPickerOption { border-radius: 12px; cursor: pointer; flex: 0 0 163.5px; position: relative; scroll-snap-align: start; } .ThumbnailPickerRadio { appearance: none; inset: 0; margin: 0; opacity: 0; position: absolute; } .ThumbnailPickerImage { aspect-ratio: 327 / 180; border-radius: 12px; display: block; height: auto; width: 100%; } .ThumbnailPickerOption:active, .ThumbnailPickerOption:has(.ThumbnailPickerRadio:checked) { outline: 2px solid #69B3E7; outline-offset: 2px; } .ThumbnailPickerOption:has(.ThumbnailPickerRadio:focus-visible) { box-shadow: var(--Admin-FocusRingBoxShadow); } /* ============================================ Think Charity — Dialog ============================================ Admin > Notifications/Pop-Up/Block in Sketch (no admin frame places it yet). The sizes and colours are --Admin-Dialog* values in ThinkCharity/Theme.css; this file holds the title type and the narrow-screen padding. Every value was read from the SVG export (LocalTemp/Sketch/Dialog/Symbol-PopUpBlock-Admin.svg). The card is 640 wide with a 16px smooth corner (the 25.6 path extent is 16 at 60% smoothing) and a 0 4px 16px shadow at 25% black. Its padding is 40px, with 40px between the title and the buttons. The buttons are the standard Admin Primary and Outline buttons (.PrimaryButton and .SecondaryButton), 250px wide with 16px between them. The design has no backdrop, so Redstone's 40% black (the same as the mobile drawer overlay) stands. */ /* DegularDisplay-Bold 32/32 */ .DialogTitle { --TCTypeface-FontWght: 700; font-family: var(--TCTypeface02-FontFamily); font-variation-settings: var(--TCTypeface02-FontVariationSettings); font-weight: var(--TCTypeface-FontWght); } /* No narrow design. 40px padding on a phone-width card is most of the width, so it steps down to the 24px gutter used at ≤900. */ @media (max-width: 640px) { :root { --Admin-DialogGap: 24px; --Admin-DialogPadding: 24px; --Admin-DialogTitleSize: 28px; } } /* ============================================ Think Charity — Login / Logout / Auth shell ============================================ Brand layer for AuthHtml.tpl and its three pages (login, logout, change-password reuses the normal shell + Forms.css instead). LocalTemp/AdminDesignSpec.md — Layout: "Login", frame BDA0DA73-92F1-4000-8481-DE356918629C. Loads after Redstone/Form.css in CSS/Admin.json. */ /* Full-page gradient background, replacing Redstone's neutral radial+linear wash. The selector matches the specificity of Shell.css's ":root:not([data-theme=\"dark\"]) body" page-background rule, which would otherwise paint over the gradient. This file loads after Shell.css, so it wins in every theme. */ :root body.AuthBody { background: linear-gradient(180deg, #00204C 0%, #053D89 100%); margin: 0; min-height: 100vh; overflow-x: hidden; } /* Cloud band — 1920x412 at y551 in the 1920x1080 frame, i.e. starting at 51% of frame height and running to ~89%. Scaled with a background-image on a full-width, full-height fixed layer (not an ) so it tracks the viewport at any width without contributing its own scrollable box; background-size keeps the artwork's aspect ratio so it never distorts, and clipping it to the AuthBody's own overflow:hidden is what stops a wider-than-viewport scaled image from creating horizontal scroll. Behind the card via z-index, same stacking context as .AuthMain. */ .AuthBody::before { background-image: url(/Images/LoginClouds.webp); background-position: center 51%; background-repeat: no-repeat; background-size: 100% auto; content: ""; inset: 0; position: fixed; z-index: 0; } .AuthThemeToggle { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.4); color: #FFFFFF; } .AuthThemeToggle:hover { background: rgba(255, 255, 255, 0.22); border-color: #FFFFFF; color: #FFFFFF; } .AuthThemeToggle:focus-visible { box-shadow: var(--Admin-FocusRingBoxShadow); outline: none; } .AuthMain { position: relative; z-index: 1; } .LoginCard { align-items: center; background: #FFFFFF; border-radius: var(--Admin-Radius); box-shadow: none; display: flex; flex-direction: column; max-width: 500px; overflow: visible; padding: 40px 0; width: 500px; } .LoginCard::before { content: none; } .LoginBrand { margin-bottom: 0; } /* The stacked logo is the page's

    , named by its alt text. It replaces JR's padlock, text heading and subtitle; the design has none of those. */ .LoginLogo { margin: 0; } .LoginBrandLogo { display: block; height: auto; width: 300px; } .LoginFormInner { align-items: center; display: flex; flex-direction: column; width: 100%; } .LoginCard .FormField { margin-bottom: 0; margin-top: 24px; width: 327px; } /* .LoginError (a
    , same tag as .FormField) sits before the first .FormField in the DOM (LoginForm.tpl), which rules out both :first-child and :first-of-type (the latter counts by tag name, not class, so .LoginError itself is the "first div"). The adjacent- sibling combinator targets the field that actually follows it. */ .LoginError + .FormField { margin-top: 65px; } .LoginCard .FormFieldInput { border-radius: var(--Admin-Radius); color: #000000; font-size: 16px; height: 48px; } .LoginCard .FormFieldInput:hover { background: #F0F7FD; } /* Redstone's own ".LoginCard .FormFieldInput:focus"/".FieldInvalid" are more specific than Forms.css's generic field-state rules (three classes vs. two), so the login-specific tint would otherwise win. Restated here at the same specificity with the brand tokens instead of Redstone's blue-tinted default. */ .LoginCard .FormFieldInput:focus { background: #FFFFFF; border-color: #69B3E7; box-shadow: 0 0 0 3px rgba(105, 179, 231, 0.25); } .LoginCard .FormFieldInput.FieldInvalid { border-color: #EE0B0B; } .LoginCard .FormFieldInput.FieldInvalid:focus { box-shadow: 0 0 0 3px rgba(238, 11, 11, 0.25); } .LoginCard .FormButtonSubmit { --TCTypeface-FontWght: 700; background: var(--Admin-PrimaryButton); border-radius: var(--Admin-Radius); font-family: var(--TCTypeface01-FontFamily); font-size: 18px; font-variation-settings: var(--TCTypeface01-FontVariationSettings); font-weight: var(--TCTypeface-FontWght); height: var(--Admin-ButtonHeight); line-height: 20px; margin-top: 40px; width: 250px; } .LoginCard .FormButtonSubmit:hover:not(:disabled) { background: var(--Admin-PrimaryButtonHover); box-shadow: none; } .LoginCard .FormButtonSubmit:active:not(:disabled) { background: var(--Admin-PrimaryButtonActive); transform: none; } .LoginCard .FormButtonSubmit:focus-visible { box-shadow: var(--Admin-FocusRingBoxShadow); } .LoginFooter { margin-top: 24px; } .LoginFooter a { --TCTypeface-FontWght: 700; color: var(--Admin-HeaderLinkColor); font-family: var(--TCTypeface02-FontFamily); font-size: 16px; font-variation-settings: var(--TCTypeface02-FontVariationSettings); font-weight: var(--TCTypeface-FontWght); line-height: 24px; text-decoration: none; } .LoginFooter a:hover { color: var(--Admin-HeaderLinkHoverColor); text-decoration: underline; } .LoginFooter a:active { color: var(--Admin-HeaderLinkActiveColor); } .LoginFooter a:focus-visible { box-shadow: var(--Admin-FocusRingBoxShadow); outline: none; } .LogoutMessage { font-family: var(--TCTypeface03-FontFamily); margin-top: 24px; } /* ============================================ Mobile — no design for this width; card fills the viewport minus a 24px gutter on each side (matching --Viewport-InlinePadding on the front end), and the cloud band keeps scaling with it. ============================================ */ @media (max-width: 640px) { .LoginCard { max-width: calc(100vw - 48px); padding: 32px 0; width: calc(100vw - 48px); } .LoginCard .FormField, .LoginBrandLogo { max-width: calc(100vw - 48px - 48px); width: 100%; } .LoginError + .FormField { margin-top: 40px; } }