/* * Civitas styles on top of Fluent UI Blazor v5. Fluent owns surfaces, text, lines, radii and the brand ramp * (built from data-theme-color="#036AC4" on ), so everything here uses Fluent's CSS variables and follows * light and dark automatically. Only brand colours Fluent doesn't have (cyan, violet, suite markers) are ours. * Design system: assets/README.md and assets/tokens.json */ :root { --cv-cyan: #1AB8E8; --cv-cyan-text: #006B8A; --cv-cyan-soft: #DFF4FB; --cv-violet: #6E4DB0; --cv-violet-soft: #EFE9F8; --cv-civic-soft: #E3EFFA; --cv-navy: #062B4F; } body[data-theme="dark"] { --cv-cyan: #4CCEF2; --cv-cyan-text: #4CCEF2; --cv-cyan-soft: #062F3F; --cv-violet: #B9A2EE; --cv-violet-soft: #2A1E47; --cv-civic-soft: #0C2C4D; --cv-navy: #1A4670; } /* Public Sans and IBM Plex Mono replace Fluent's Segoe UI and Consolas everywhere, components included. */ body { --fontFamilyBase: "Public Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif; --fontFamilyMonospace: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; margin: 0; font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); color: var(--colorNeutralForeground1); background-color: var(--colorNeutralBackground1); } *, *::before, *::after { box-sizing: border-box; } /* * Type, on Fluent's type ramp. Fluent injects its own heading sizes at runtime (h1 40px, h2 32px), which win * over plain element selectors, so these use "body h1" to keep the design system's sizes. */ body h1 { margin: 0 0 16px; font-size: var(--fontSizeHero700); line-height: var(--lineHeightHero700); font-weight: var(--fontWeightSemibold); } body h2 { margin: 0 0 8px; font-size: var(--fontSizeBase500); line-height: var(--lineHeightBase500); font-weight: var(--fontWeightSemibold); } /* * Blazor moves focus to the page's h1 after each navigation so screen readers announce the new page. The * heading isn't something you can act on, so it shouldn't show a focus ring. */ body h1:focus, body h1:focus-visible { outline: none; } p { margin: 0 0 12px; } a { color: var(--colorBrandForegroundLink); } a:hover { color: var(--colorBrandForegroundLinkHover); } .cv-muted { color: var(--colorNeutralForeground3); } .cv-small { font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); } .cv-eyebrow { font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); font-weight: var(--fontWeightSemibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--colorNeutralForeground3); } .cv-data, code, pre { font-family: var(--fontFamilyMonospace); font-size: var(--fontSizeBase200); font-variant-numeric: tabular-nums; } /* A sunken well for code, JSON and pairing codes. */ .cv-well { margin: 4px 0 0; padding: 12px; background: var(--colorNeutralBackground3); border-radius: var(--borderRadiusMedium); overflow-x: auto; white-space: pre-wrap; word-break: break-word; } .cv-section { margin-bottom: 32px; } /* Wide tables scroll sideways on small screens instead of squeezing their columns. */ .cv-grid-scroll { overflow-x: auto; } /* * Fluent top-aligns cells in multi-line grids; centre them so short cells line up with taller neighbours. * Fluent adds its grid styles after this file, hence "body" to win. */ body .fluent-data-grid td[multiline=true] { align-content: center; padding-block: 8px; } /* Present for browsers and password managers, invisible on screen. */ .cv-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .cv-narrow { max-width: 560px; } .cv-center { display: flex; justify-content: center; padding: 48px 0; } /* Layout */ /* Pages that run edge to edge (the homepage) undo this padding with the same variables. */ .cv-content { --cv-content-pad-y: 24px; --cv-content-pad-x: 32px; padding: var(--cv-content-pad-y) var(--cv-content-pad-x); } .cv-brand { display: inline-flex; padding: 0 8px; } .cv-brand img { height: 26px; width: auto; } .cv-account-link { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fontWeightRegular); } .cv-sign-out { margin: 0; } /* Header buttons that must work without interactivity (sign-out is a form post), styled like Fluent's transparent buttons on the brand header. */ .cv-header-button { font: inherit; font-weight: var(--fontWeightSemibold); color: var(--colorNeutralForegroundOnBrand); background: transparent; border: none; border-radius: var(--borderRadiusMedium); padding: 5px 12px; cursor: pointer; text-decoration: none; } .cv-header-button:hover { color: var(--colorNeutralForegroundOnBrand); background: var(--colorBrandBackgroundHover); } .cv-footer { font-size: var(--fontSizeBase200); padding: 0 8px; } .cv-footer a { color: var(--colorNeutralForeground2); text-decoration: none; } .cv-footer a:hover { color: var(--colorBrandForegroundLinkHover); text-decoration: underline; } /* The same line between the footer and the page as between the side navigation and the page. */ .fluent-layout-item[area=footer] { border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke1); } /* The side navigation's collapse button only applies on wide screens; small screens use the hamburger drawer. */ .fluent-layout[mobile] .cv-nav-toggle { display: none; } html[data-cv-nav=collapsed] .fluent-layout:not([mobile]) .fluent-layout-item[area=nav] { display: none; } @media (max-width: 768px) { .cv-content { --cv-content-pad-y: 16px; --cv-content-pad-x: 16px; } } /* Fluent drops the content's right padding in its mobile layout, which runs pages into the right edge. */ .fluent-layout[mobile] .fluent-layout-item[area=content].cv-content { padding-right: var(--cv-content-pad-x) !important; } /* * Native form controls styled like Fluent's. Only for the sign-in page, which isn't interactive because it * sets the login cookie. */ .cv-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; } .cv-field label { font-weight: var(--fontWeightSemibold); } .cv-input { font: inherit; color: var(--colorNeutralForeground1); background: var(--colorNeutralBackground1); border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); border-bottom-color: var(--colorNeutralStrokeAccessible); border-radius: var(--borderRadiusMedium); padding: 5px 10px; min-height: 32px; } .cv-input:focus-visible { outline: none; border-bottom: var(--strokeWidthThick) solid var(--colorCompoundBrandStroke); } .cv-input.cv-code { font-family: var(--fontFamilyMonospace); font-size: var(--fontSizeBase500); letter-spacing: 0.08em; text-transform: uppercase; } .cv-button-primary { font: inherit; font-weight: var(--fontWeightSemibold); min-height: 32px; padding: 5px 12px; border: none; border-radius: var(--borderRadiusMedium); background: var(--colorBrandBackground); color: var(--colorNeutralForegroundOnBrand); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; } .cv-button-primary:hover { background: var(--colorBrandBackgroundHover); color: var(--colorNeutralForegroundOnBrand); } .cv-button-secondary { font: inherit; font-weight: var(--fontWeightSemibold); min-height: 32px; padding: 4px 11px; border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); border-radius: var(--borderRadiusMedium); background: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); text-decoration: none; display: inline-flex; align-items: center; } .cv-button-secondary:hover { background: var(--colorNeutralBackground1Hover); border-color: var(--colorNeutralStroke1Hover); color: var(--colorNeutralForeground1); } .cv-button-large { min-height: 40px; padding-inline: 16px; font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); } /* A file input that looks like a secondary button (Account picture, community logo). */ .cv-upload-button { position: relative; display: inline-flex; align-items: center; padding: 5px 12px; border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); border-radius: var(--borderRadiusMedium); background: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); font-weight: var(--fontWeightSemibold); cursor: pointer; } .cv-upload-button:hover { background: var(--colorNeutralBackground1Hover); } .cv-upload-button:focus-within { outline: 2px solid var(--colorStrokeFocus2); outline-offset: 1px; } .cv-upload-busy { opacity: 0.6; cursor: default; } /* The file input covers the label, invisible, so a click anywhere on it opens the file picker. */ .cv-upload-button input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: inherit; } /* Suite markers: small badges only, never a page theme. */ .cv-suite-badge { display: inline-block; padding: 0 8px; border-radius: var(--borderRadiusSmall); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase300); font-weight: var(--fontWeightSemibold); } .cv-suite-core { background: var(--cv-civic-soft); color: var(--colorBrandForeground1); } .cv-suite-community { background: var(--cv-cyan-soft); color: var(--cv-cyan-text); } .cv-suite-roleplay { background: var(--cv-violet-soft); color: var(--cv-violet); } .validation-message { color: var(--colorPaletteRedForeground1); font-size: var(--fontSizeBase200); } /* Blazor's own error bar */ /* The error Blazor shows when the connection fails: a Fluent-style error message floating above the footer. */ #blazor-error-ui { display: none; position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(640px, calc(100vw - 32px)); z-index: 1000; } .cv-error-ui { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border: var(--strokeWidthThin) solid var(--colorPaletteRedBorder1); border-radius: var(--borderRadiusMedium); background: var(--colorPaletteRedBackground1); color: var(--colorNeutralForeground1); box-shadow: var(--shadow16); font-size: var(--fontSizeBase300); } .cv-error-ui-text { flex: 1; } .cv-error-ui-reload { padding: 5px 12px; border-radius: var(--borderRadiusMedium); background: var(--colorBrandBackground); color: var(--colorNeutralForegroundOnBrand); font-weight: var(--fontWeightSemibold); text-decoration: none; white-space: nowrap; } .cv-error-ui-reload:hover { background: var(--colorBrandBackgroundHover); } .cv-error-ui-dismiss { display: inline-flex; padding: 6px; border: 0; border-radius: var(--borderRadiusMedium); background: transparent; color: var(--colorNeutralForeground2); cursor: pointer; } .cv-error-ui-dismiss:hover { background: var(--colorSubtleBackgroundHover); } /* * The side navigation: the main sections scroll; Settings stays at the bottom. Fluent's own rules give every nav * flex: 1 and full height, so these are specific enough to win. */ .cv-nav { display: flex; flex-direction: column; /* The navigation area's own height; the error boundary around the nav adds a wrapper that 100% wouldn't pass through. */ height: var(--layout-body-height); } .cv-nav > .fluent-nav.cv-nav-main { flex: 1 1 auto; height: auto; min-height: 0; overflow-y: auto; padding-top: 10px; } .cv-nav > .fluent-nav.cv-nav-settings { flex: 0 0 auto; height: auto; padding-top: 4px; padding-bottom: 8px; border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2); } .cv-nav-account, .cv-nav-subitem { display: inline-flex; align-items: center; gap: 10px; } .cv-nav-divider { margin: 6px 12px; }