/* * 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; } /* The pages' wrapper (App.razor) takes no room of its own. It's inert until a live page's first draw (LiveMarker). */ #cv-app { display: contents; } body:has(> #cv-app[inert]) { cursor: progress; } /* * 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. * Fluent also lets a cell's text break anywhere and scroll inside the cell, so a crowded table squeezed its columns * down to a letter or two ("Test Avata r"). Text wraps between words instead, and no column gets narrower than its * longest word: a table that still doesn't fit scrolls sideways in its cv-grid-scroll. */ body .fluent-data-grid td[multiline=true] { align-content: center; padding-block: 8px; word-break: normal; overflow-wrap: break-word; min-width: min-content; } /* * A text area with a set height scrolls its text inside the box. Left to Fluent, the text can grow taller than * the box, which then scrolls instead and carries its focus line up through the text. */ fluent-textarea:not([auto-resize])::part(root) { grid-template-rows: minmax(0, 1fr); overflow: clip; } fluent-textarea:not([auto-resize])::part(control) { field-sizing: fixed; block-size: 100%; min-block-size: 0; } /* 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-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); } /* * Page layout (assets/README.md, "Page layout"). Signed-in pages run the full width of the content area: a * PageHeader, then panels in a PanelGrid and full-width tables, on the app's page surface. Nothing inside sets a * max-width; panels get their widths from the grid. A page still loading marks itself cv-page-surface so the * surface doesn't flash in once its header arrives. Reading and marketing pages (legal, homepage, public community * pages, sign-in) have no PageHeader and keep their own measure. */ .cv-content:has(.cv-page-header, .cv-page-surface) { background: var(--colorNeutralBackground2); } .cv-panel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; align-items: stretch; margin-bottom: 24px; } .cv-panel-grid-compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); } /* A card holding one thing: a form, a list, a setting (Panel). */ .cv-panel { display: flex; flex-direction: column; min-width: 0; padding: 20px 24px; background: var(--colorNeutralBackground1); border: var(--strokeWidthThin) solid var(--colorNeutralStroke2); border-radius: var(--borderRadiusLarge); box-shadow: var(--shadow4); } .cv-panel-grid > .cv-panel-wide { grid-column: 1 / -1; } /* Outside a grid, panels stack with the grid's spacing. */ .cv-panel:not(.cv-panel-grid > *) { margin-bottom: 16px; } /* A strip: one panel with its cells side by side and a line between each (the overview's figures and checks). As many go to a row as fit, and rows balance: six go three and three, five three and two, four two and two, so no cell sits alone on a row beside empty space; too narrow for that, they stack. The markup gives the count (data-cells). Cells in a shorter last row share its width. The lines are each cell's left and bottom edges, pulled 1px out so the panel's edge hides the outer ones. */ .cv-panel.cv-strip { container-type: inline-size; padding: 0; overflow: hidden; } .cv-strip-row { --cv-strip-columns: 1; display: flex; flex-wrap: wrap; } .cv-strip-row > * { flex: 1 1 calc(100% / var(--cv-strip-columns) - 1px); min-width: 0; margin: 0 0 -1px -1px; border-left: var(--strokeWidthThin) solid var(--colorNeutralStroke2); border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2); } /* Each column needs 170px. */ @container (min-width: 340px) { .cv-strip-row:is([data-cells="2"], [data-cells="4"], [data-cells="6"]) { --cv-strip-columns: 2; } } @container (min-width: 510px) { .cv-strip-row:is([data-cells="3"], [data-cells="5"], [data-cells="6"]) { --cv-strip-columns: 3; } } @container (min-width: 680px) { .cv-strip-row[data-cells="4"] { --cv-strip-columns: 4; } } @container (min-width: 850px) { .cv-strip-row[data-cells="5"] { --cv-strip-columns: 5; } } @container (min-width: 1020px) { .cv-strip-row[data-cells="6"] { --cv-strip-columns: 6; } } .cv-panel-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; } .cv-panel-heading { flex: 1 1 280px; min-width: 0; } body .cv-panel-title { margin: 0; font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); font-weight: var(--fontWeightSemibold); } .cv-panel-description { margin-top: 4px; color: var(--colorNeutralForeground2); } .cv-panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .cv-panel-body { flex: 1 1 auto; min-width: 0; } .cv-panel-body > :last-child { margin-bottom: 0; } /* Pushed to the bottom, so footers in a row of panels line up. */ .cv-panel-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; } /* A row of filters and commands over a table: fields, a search button, switches, lined up along the bottom. */ .cv-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-bottom: 16px; } /* A row of fields and buttons of a page's own, lined up along the bottom (a form's code box and its Turn on button). */ .cv-field-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; } /* * An icon-only button is 32px wide, but Fluent keeps a text button's 12px sides on it, which squeezed the icon to * nothing (the Markdown editor's toolbar showed empty buttons). It has no sides; its icon sits in the middle. */ fluent-button[icon-only] { padding-inline: 0; } /* A badge is one line high, so a long name (a role on the Members page) broke onto a second line it had no room for. */ fluent-badge { white-space: nowrap; } /* * A field beside a button. Fluent gives every field a margin above and below, for forms that stack their fields, and * a 2px empty line under its input, so in a row lined up along the bottom the buttons sat lower than the box, and a * row lined up along the top or middle lined them up with the label. Every row holding a field and a button (a * horizontal FluentStack, a toolbar or a cv-field-row) is fixed here, so no page has to remember it: the row lines up * along the bottom (over FluentStack's own inline alignment), the field loses its margin, and the buttons rise by * those 2px. */ .fluent-stack-horizontal:has(> fluent-field):has(> fluent-button) { align-items: flex-end !important; } .fluent-stack-horizontal:has(> fluent-button) > fluent-field, .cv-toolbar fluent-field, .cv-field-row > fluent-field { margin-block: 0; } /* A dropdown is as tall as a text box, and without a message it keeps no row for one, so it lines up with them. */ .cv-toolbar fluent-dropdown { height: 32px; } .cv-toolbar fluent-field > fluent-text[slot="message"]:empty { display: none; } /* * A switch with its label beside it ("Former members") is shorter than a text box, so along the bottom it sat below * the box's middle. It takes a text box's height and centres itself in it, level with the box beside it. */ .cv-toolbar fluent-field[label-position="after"]:has(> fluent-switch), .cv-field-row > fluent-field[label-position="after"]:has(> fluent-switch) { min-height: 32px; align-content: center; } .fluent-stack-horizontal:has(> fluent-field) > fluent-button, .cv-toolbar fluent-button, .cv-toolbar .cv-download-link, .cv-field-row > fluent-button { margin-bottom: var(--spacingVerticalXXS); } /* * A dialog's or drawer's buttons (its ActionTemplate) arrive in one wrapper, which Fluent's footer places but doesn't * space out, so they touched ("Add to roster" and Cancel). Buttons in a row always keep 8px between them. */ fluent-dialog-body > div[slot=action] { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } /* * Loading (assets/README.md, "Loading"): Fluent's skeletons shaped like what's coming (Skeleton, PanelSkeleton, * PageSkeleton), laid out here like the panels, tables, lists and fields they stand in for. Fluent draws each * skeleton inline, so they're blocks here, and its shimmer rests for people who ask for less motion. */ .cv-skeleton .fluent-skeleton, .cv-skeleton-header .fluent-skeleton, .cv-panel-heading > .fluent-skeleton { display: block; max-width: 100%; } @media (prefers-reduced-motion: reduce) { .fluent-skeleton::after { animation: none; } } .cv-skeleton-header { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; } .cv-skeleton-lines { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .cv-skeleton-tabs { display: flex; flex-wrap: wrap; gap: 16px 32px; padding: 10px 0; margin-bottom: 24px; border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2); } .cv-skeleton-tabs .fluent-skeleton { display: block; } .cv-skeleton-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-bottom: 16px; } .cv-skeleton-field { display: flex; flex-direction: column; gap: 8px; max-width: 100%; } .cv-skeleton-form { display: flex; flex-direction: column; gap: 16px; } .cv-skeleton-form .cv-skeleton-box { max-width: 320px; } .cv-skeleton-table-row { display: grid; grid-template-columns: repeat(var(--cv-skeleton-columns, 4), minmax(0, 1fr)); align-items: center; gap: 16px; min-height: 52px; padding: 8px; border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2); } .cv-skeleton-table-head { min-height: 40px; } .cv-skeleton-person, .cv-skeleton-list-row { display: flex; align-items: center; gap: 12px; min-width: 0; } .cv-skeleton-person > .fluent-skeleton:not([shape]), .cv-skeleton-list-row > .cv-skeleton-lines { flex: 1 1 auto; } .cv-skeleton-person > .fluent-skeleton[shape], .cv-skeleton-list-row > .fluent-skeleton[shape] { flex: none; } .cv-skeleton-list { display: flex; flex-direction: column; gap: 20px; } .cv-skeleton-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 12px 16px; } /* * Hover labels (assets/README.md, "Hover labels"): Fluent's tooltip, drawn in place by Hint. Until Fluent's scripts * define it, a tooltip would show as plain text beside what it labels. It's a popover, so it opens above everything, * but its text still inherits from where it sits: a table heading's capitals and spacing, a button's weight. */ fluent-tooltip:not(:defined) { display: none; } fluent-tooltip { /* Plain text, so it never takes the pointer: a tooltip over or beside a button (the event card's Edit and Close) let the mouse land on it, not on the button. */ pointer-events: none; font-weight: var(--fontWeightRegular); font-style: normal; letter-spacing: normal; text-align: start; text-transform: none; white-space: normal; overflow-wrap: break-word; } .cv-hint-focusable:focus-visible { outline: 2px solid var(--colorStrokeFocus2); outline-offset: 2px; border-radius: var(--borderRadiusSmall); } /* * Info labels (assets/README.md, "Info labels"): the popover behind an info icon (a field's LabelInfo, or a * FluentLabelInfo in a heading) fits its text up to a readable width, rather than running as wide as the text, and * reads as body text wherever the icon sits. */ body .fluent-label-info { --fluent-label-info-width: 320px; } .fluent-label-info > fluent-popover-b { font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); font-weight: var(--fontWeightRegular); letter-spacing: normal; text-align: start; text-transform: none; white-space: normal; } /* A heading inside a card or panel is the card's title, at the panel title's size. */ body .fluent-card h2, body .cv-panel h2 { font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); } /* Fluent's cards match panels: the same padding, 8px corners (the design system's cards) and the same quiet line. */ body .fluent-card:not([appearance]), body .fluent-card[appearance] { padding: 20px 24px; border-radius: var(--borderRadiusLarge); border-color: var(--colorNeutralStroke2); } .cv-brand { display: inline-flex; padding: 0 8px; } .cv-brand img { height: 26px; width: auto; } .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); } /* The person's picture in the header, opening their account card (AccountMenu). */ .cv-account-button { display: inline-flex; padding: 2px; margin-right: 4px; background: transparent; border: none; border-radius: 50%; cursor: pointer; } .cv-account-button:hover { background: var(--colorBrandBackgroundHover); } .cv-account-button:focus-visible { outline: 2px solid var(--colorNeutralForegroundOnBrand); outline-offset: 1px; } /* A native popover: the browser puts it on top, and closes it on Escape or a click outside. It always opens from the header's right-hand end, so it's placed there rather than anchored to the button. */ .cv-account-card { position: fixed; inset: 52px 12px auto auto; margin: 0; width: min(340px, calc(100vw - 24px)); padding: 0; color: var(--colorNeutralForeground1); background: var(--colorNeutralBackground1); border: var(--strokeWidthThin) solid var(--colorNeutralStroke2); border-radius: var(--borderRadiusLarge); box-shadow: var(--shadow16); font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase300); } .cv-account-card-top { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 0 16px; } .cv-account-card-label { font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground3); } .cv-account-card-action { font: inherit; color: var(--colorNeutralForeground1); background: transparent; border: none; border-radius: var(--borderRadiusMedium); padding: 6px 10px; cursor: pointer; } .cv-account-card-action:hover { background: var(--colorNeutralBackground1Hover); } .cv-account-card-person { display: flex; align-items: flex-start; gap: 16px; padding: 12px 16px 16px; } .cv-account-card-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; } .cv-account-card-name { font-size: var(--fontSizeBase500); line-height: var(--lineHeightBase500); } .cv-account-card-username { color: var(--colorNeutralForeground3); font-size: var(--fontSizeBase200); margin-bottom: 6px; } .cv-account-card-who a { color: var(--colorBrandForegroundLink); text-decoration: none; } .cv-account-card-who a:hover { text-decoration: underline; } .cv-account-card-alts { padding: 10px 16px 14px; border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2); } .cv-account-card-alts ul { list-style: none; margin: 6px 0 0; padding: 0; } .cv-account-card-alts li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; padding: 2px 0; } .cv-account-card-alts .cv-account-card-username { margin: 0; } /* The bell in the header (NotificationBell), with the number unread on its corner. */ .cv-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; border: none; border-radius: var(--borderRadiusMedium); cursor: pointer; } .cv-bell:hover { background: var(--colorBrandBackgroundHover); } .cv-bell:focus-visible { outline: 2px solid var(--colorNeutralForegroundOnBrand); outline-offset: 1px; } .cv-bell-count { position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; font-size: var(--fontSizeBase100); font-weight: var(--fontWeightSemibold); line-height: 16px; text-align: center; color: var(--colorNeutralForegroundOnBrand); background: var(--colorPaletteRedBackground3); } /* The "?" card on pages without a live connection (HelpCard): a few links. Not .cv-help-card, which is a guide's card on the help homepage. */ .cv-help-popover { width: min(280px, calc(100vw - 24px)); } .cv-help-popover-body { display: flex; flex-direction: column; gap: 12px; padding: 8px 16px 16px; } .cv-help-popover-links { display: flex; flex-direction: column; gap: 8px; } .cv-help-popover-links a { color: var(--colorBrandForeground1); } /* The bell's card: the account card's frame, a little wider, with the newest notifications. */ .cv-notifications-card { width: min(380px, calc(100vw - 24px)); } .cv-notifications-card-empty { margin: 0; padding: 16px; } .cv-notifications-card-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: min(420px, calc(100vh - 160px)); overflow-y: auto; } /* Each one is a link to what it's about, or a button that marks it read when it isn't about anything to open. */ .cv-notification-item { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 10px 16px 10px 20px; font: inherit; text-align: left; color: inherit; text-decoration: none; background: transparent; border: none; border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2); cursor: pointer; } .cv-notification-item:hover { background: var(--colorNeutralBackground1Hover); } .cv-notifications-card-more { display: flex; justify-content: center; padding: 6px 0; border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2); } .cv-notifications-card-list .cv-notification-body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cv-notifications-card-footer { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2); } /* Unread notifications are bold, with a dot. */ .cv-notification-title { font-weight: var(--fontWeightRegular); overflow-wrap: anywhere; } .cv-unread .cv-notification-title { font-weight: var(--fontWeightSemibold); } .cv-notification-body { color: var(--colorNeutralForeground2); white-space: pre-line; overflow-wrap: anywhere; } .cv-notifications-card-list .cv-unread .cv-notification-item { background-image: radial-gradient(circle, var(--colorBrandForeground1) 3.5px, transparent 4px); background-repeat: no-repeat; background-position: 4px 15px; background-size: 12px 12px; } /* * The megaphone's card (AnnouncementsButton): the account card's frame, bigger, opening under Civitas at the header's * left, with every announcement in full, newest first. It scrolls inside itself. */ .cv-announcements-card { inset: 52px auto auto 8px; width: min(600px, calc(100vw - 16px)); max-height: calc(100vh - 64px); overflow: hidden; } .cv-announcements-card:popover-open { display: flex; flex-direction: column; } .cv-announcements-list { list-style: none; margin: 8px 0 0; padding: 0; overflow-y: auto; } .cv-announcements-list > li { display: flex; flex-direction: column; gap: 2px; padding: 16px 20px; border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2); } .cv-announcement-title { margin: 0; font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); font-weight: var(--fontWeightSemibold); overflow-wrap: anywhere; } .cv-announcement-body { margin-top: 8px; overflow-wrap: anywhere; } .cv-announcement-body > :first-child { margin-top: 0; } .cv-announcement-body > :last-child { margin-bottom: 0; } /* A button that reads as a link: it opens something on the page rather than going anywhere (the help panel's news). */ .cv-link-button { padding: 0; font: inherit; text-align: start; color: var(--colorBrandForegroundLink); background: none; border: none; cursor: pointer; } .cv-link-button:hover { color: var(--colorBrandForegroundLinkHover); text-decoration: underline; } .cv-footer { font-size: var(--fontSizeBase200); padding: 0 8px; } .cv-footer a { color: var(--colorNeutralForeground2); text-decoration: none; } /* The Linden Lab notice is the footer's longest line, so it wraps rather than pushing the page sideways. */ .cv-footer .cv-footer-notice { min-width: 0; text-align: end; } .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 button at the top of the side navigation (NavToggle) only applies on wide screens; small screens use the hamburger drawer. */ .fluent-layout[mobile] .cv-nav-top { display: none; } .cv-nav-top { flex: none; height: 40px; padding: 6px 0 0 14px; } .cv-nav-toggle { color: var(--colorNeutralForeground2); } /* * Folded down to its icons on wide screens, like the Microsoft 365 admin center: the navigation keeps a 52px rail * with each page's and group's icon (their names show on hover), and its headings, group pages and chevrons hide. * Fluent writes each item's name as bare text, so the item's font size hides it. A group's icon opens the navigation * again with the group open (MainNav). */ html[data-cv-nav=collapsed] .fluent-layout:not([mobile]) .fluent-layout-item[area=nav] { width: 52px !important; } html[data-cv-nav=collapsed] .fluent-layout-item[area=nav] :is(.fluent-navitem, .fluent-navcategoryitem) { font-size: 0; gap: 0; } html[data-cv-nav=collapsed] .fluent-layout-item[area=nav] :is(.expand-icon, .fluent-navsubitemgroup, .fluent-navsectionheader, .cv-nav-switcher-name, .cv-nav-switcher-chevron) { display: none !important; } /* A group holding the page you're on keeps Fluent's marker for the current page while its pages are hidden. */ html[data-cv-nav=collapsed] .fluent-layout-item[area=nav] .fluent-navcategoryitem:has(~ .fluent-navsubitemgroup .active)::after { content: ""; position: absolute; width: 4px; height: calc(100% - 20px); margin-inline-start: -16px; border-radius: var(--borderRadiusCircular); background-color: var(--colorCompoundBrandForeground1); } html[data-cv-nav=collapsed] .fluent-layout-item[area=nav] .cv-nav-switcher { width: 38px; padding: 6px 0; justify-content: center; border-color: transparent; background: transparent; } /* The app launcher (AppLauncher) at the left of the header, and its grid of apps, like Microsoft 365's. */ .cv-launcher-button { display: inline-grid; place-items: center; width: 32px; height: 32px; color: var(--colorNeutralForegroundOnBrand); background: transparent; border: none; border-radius: var(--borderRadiusMedium); cursor: pointer; } /* The launcher opens under the button's wrapper: its tooltip sets the button's own anchor name. */ .cv-launcher-anchor { display: inline-flex; anchor-name: --cv-launcher; } .cv-launcher-button:hover { background: var(--colorBrandBackgroundHover); } .cv-launcher-button:focus-visible { outline: 2px solid var(--colorNeutralForegroundOnBrand); outline-offset: 1px; } .cv-launcher { position: fixed; inset: 52px auto auto 8px; margin: 0; width: min(320px, calc(100vw - 16px)); padding: 12px; color: var(--colorNeutralForeground1); background: var(--colorNeutralBackground1); border: var(--strokeWidthThin) solid var(--colorNeutralStroke2); border-radius: var(--borderRadiusLarge); box-shadow: var(--shadow16); font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase300); } .cv-launcher-title { display: block; padding: 0 4px 8px; font-weight: var(--fontWeightSemibold); } .cv-launcher-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0; padding: 0; list-style: none; } .cv-launcher-app { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; color: var(--colorNeutralForeground1); text-decoration: none; border-radius: var(--borderRadiusMedium); font-size: var(--fontSizeBase200); } .cv-launcher-app:hover { background: var(--colorSubtleBackgroundHover); } .cv-launcher-app[aria-current] { background: var(--colorSubtleBackgroundSelected); font-weight: var(--fontWeightSemibold); } .cv-launcher-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--borderRadiusLarge); } .cv-launcher-icon-civitas { background: var(--colorNeutralBackground3); } .cv-launcher-icon-dispatch { color: #FFFFFF; background: var(--colorBrandBackground); } .cv-launcher-icon-finance { color: #FFFFFF; background: var(--cv-navy); } .cv-launcher-icon-staff { color: #FFFFFF; background: var(--cv-navy); } /* The community picker at the top of a community's part of the side navigation (MainNav), and its list. */ .cv-nav-switcher { display: flex; align-items: center; gap: 10px; width: 100%; margin: 2px 0 6px; padding: 6px 8px 6px 7px; color: var(--colorNeutralForeground1); background: var(--colorNeutralBackground1); border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); border-radius: var(--borderRadiusMedium); font: inherit; font-weight: var(--fontWeightSemibold); text-align: left; cursor: pointer; } .cv-nav-switcher:hover { background: var(--colorNeutralBackground1Hover); } .cv-nav-switcher-name, .cv-switcher-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cv-community-tile { display: inline-grid; flex: none; place-items: center; width: 24px; height: 24px; color: var(--colorNeutralForegroundOnBrand); background: var(--colorBrandBackground); border-radius: var(--borderRadiusMedium); font-size: var(--fontSizeBase200); font-weight: var(--fontWeightSemibold); } .cv-switcher { margin: 0; width: 260px; padding: 8px; color: var(--colorNeutralForeground1); background: var(--colorNeutralBackground1); border: var(--strokeWidthThin) solid var(--colorNeutralStroke2); border-radius: var(--borderRadiusLarge); box-shadow: var(--shadow16); font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase300); } @supports (position-area: bottom) { .cv-switcher { inset: auto; margin-top: 4px; position-area: bottom span-right; position-try-fallbacks: flip-block; } } .cv-switcher-label { display: block; padding: 2px 8px 6px; font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground3); } .cv-switcher-list { margin: 0; padding: 0; list-style: none; } .cv-switcher-links { margin-top: 6px; padding-top: 6px; border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2); } .cv-switcher-option { display: flex; align-items: center; gap: 10px; padding: 8px; color: var(--colorNeutralForeground1); text-decoration: none; border-radius: var(--borderRadiusMedium); } .cv-switcher-option:hover { background: var(--colorSubtleBackgroundHover); } .cv-switcher-option[aria-current] { font-weight: var(--fontWeightSemibold); } @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; cursor: pointer; } .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 community's pages scroll; Your account 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; /* Fluent's nav colour, so the row with the button at the top matches the rest. */ background-color: var(--nav-bg-color, var(--colorNeutralBackground4)); /* 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-divider { margin: 6px 12px; } .cv-nav > .fluent-nav.cv-nav-account { flex: 0 0 auto; height: auto; padding-top: 4px; padding-bottom: 8px; border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2); } /* * Your account sits at the bottom and opens upwards, so its arrow is the other way round from the groups above it: * up while it's folded, down once it's open (including when Fluent opens it for the page you're on). */ .cv-nav > .fluent-nav.cv-nav-account .fluent-navcategoryitem > .expand-icon { transform: rotate(180deg); } .cv-nav > .fluent-nav.cv-nav-account .fluent-navcategoryitem > .expand-icon.expanded, .cv-nav > .fluent-nav.cv-nav-account .fluent-navcategoryitem:has(+ .fluent-navsubitemgroup .active) > .expand-icon:not(.user-interacted) { transform: none; } /* * Site notices (SiteNotices, SiteNoticeBar): message bars Civitas staff put up across the website, in a strip right * under the header that runs the width of the content area. It undoes the content's padding, and gives it back * below, so an edge-to-edge page (the homepage) still meets it. */ .cv-site-notices { display: flex; flex-direction: column; margin: calc(-1 * var(--cv-content-pad-y)) calc(-1 * var(--cv-content-pad-x)) var(--cv-content-pad-y); } .cv-notice { display: flex; align-items: flex-start; gap: 8px; padding: 10px var(--cv-content-pad-x, 16px); border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2); background: var(--colorNeutralBackground3); color: var(--colorNeutralForeground1); font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); } .cv-notice-warning { background: var(--colorPaletteDarkOrangeBackground1); border-bottom-color: var(--colorPaletteDarkOrangeBorder1); } .cv-notice-error { background: var(--colorPaletteRedBackground1); border-bottom-color: var(--colorPaletteRedBorder1); } .cv-notice-success { background: var(--colorPaletteGreenBackground1); border-bottom-color: var(--colorPaletteGreenBorder1); } .cv-notice-icon { display: inline-flex; padding-top: 1px; } .cv-notice-text { flex: 1; min-width: 0; overflow-wrap: anywhere; } .cv-notice-text strong { font-weight: var(--fontWeightSemibold); margin-right: 6px; } .cv-notice-text a { margin-left: 6px; } .cv-notice-dismiss { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: var(--borderRadiusMedium); background: transparent; color: var(--colorNeutralForeground2); cursor: pointer; } .cv-notice-dismiss:hover { background: var(--colorSubtleBackgroundHover); } .cv-notice-dismiss:focus-visible { outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2); } /* A notice shown as a preview on the staff site, inside a panel rather than across the page. */ .cv-notice-preview .cv-notice { padding-inline: 12px; border: var(--strokeWidthThin) solid var(--colorNeutralStroke2); border-radius: var(--borderRadiusMedium); } /* Markdown shown on a page (Markdown), such as an announcement. Headings stay the size of a panel's. */ .cv-markdown { overflow-wrap: anywhere; } .cv-markdown > :first-child { margin-top: 0; } .cv-markdown > :last-child { margin-bottom: 0; } .cv-markdown p, .cv-markdown ul, .cv-markdown ol, .cv-markdown blockquote, .cv-markdown pre, .cv-markdown table { margin: 0 0 12px; } .cv-markdown h1, .cv-markdown h2 { font-size: var(--fontSizeBase500); line-height: var(--lineHeightBase500); font-weight: var(--fontWeightSemibold); margin: 20px 0 8px; } .cv-markdown h3, .cv-markdown h4, .cv-markdown h5, .cv-markdown h6 { font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); font-weight: var(--fontWeightSemibold); margin: 16px 0 6px; } .cv-markdown ul, .cv-markdown ol { padding-left: 24px; } .cv-markdown ul { list-style: disc; } .cv-markdown ol { list-style: decimal; } .cv-markdown li + li { margin-top: 2px; } /* A checklist item's box stands in for its bullet. */ .cv-markdown li.task-list-item { list-style: none; margin-left: -20px; } .cv-markdown blockquote { padding: 2px 0 2px 12px; border-left: 3px solid var(--colorNeutralStroke1); color: var(--colorNeutralForeground2); } .cv-markdown code { padding: 1px 4px; border-radius: var(--borderRadiusSmall); background: var(--colorNeutralBackground3); } .cv-markdown pre { padding: 10px 12px; border-radius: var(--borderRadiusMedium); background: var(--colorNeutralBackground3); overflow-x: auto; } .cv-markdown pre code { padding: 0; background: none; } .cv-markdown img { max-width: 100%; height: auto; border-radius: var(--borderRadiusMedium); } .cv-markdown hr { border: none; border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2); margin: 16px 0; } .cv-markdown table { border-collapse: collapse; display: block; overflow-x: auto; } .cv-markdown th, .cv-markdown td { padding: 6px 10px; border: var(--strokeWidthThin) solid var(--colorNeutralStroke2); text-align: left; } .cv-markdown th { background: var(--colorNeutralBackground3); font-weight: var(--fontWeightSemibold); } /* The Markdown editor (MarkdownEditor): a toolbar over the text, with a live preview beside it on a wide screen. */ .cv-md-editor { display: flex; flex-direction: column; gap: 4px; } .cv-md-label { font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); color: var(--colorNeutralForeground1); } .cv-md-toolbar { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 2px; border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); border-bottom: none; border-radius: var(--borderRadiusMedium) var(--borderRadiusMedium) 0 0; background: var(--colorNeutralBackground2); } .cv-md-tools { display: flex; gap: 2px; } .cv-md-tools + .cv-md-tools { padding-left: 12px; border-left: var(--strokeWidthThin) solid var(--colorNeutralStroke2); } .cv-md-panes { display: grid; grid-template-columns: 1fr 1fr; container-type: inline-size; border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); border-radius: 0 0 var(--borderRadiusMedium) var(--borderRadiusMedium); overflow: hidden; } .cv-md-input { min-height: 360px; padding: 12px; border: none; resize: vertical; background: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); font-family: var(--fontFamilyMonospace); font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase400); box-sizing: border-box; width: 100%; } .cv-md-input:focus { outline: none; box-shadow: inset 0 -2px 0 var(--colorCompoundBrandStroke); } .cv-md-preview { min-width: 0; padding: 12px 16px; border-left: var(--strokeWidthThin) solid var(--colorNeutralStroke2); background: var(--colorNeutralBackground1); overflow-y: auto; max-height: 640px; } .cv-md-preview-label { margin-bottom: 8px; font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); font-weight: var(--fontWeightSemibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--colorNeutralForeground3); } /* Too narrow for two panes: the preview goes under the text. */ @container (max-width: 720px) { .cv-md-panes > .cv-md-input, .cv-md-panes > .cv-md-preview { grid-column: 1 / -1; } .cv-md-preview { border-left: none; border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2); } } .cv-md-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; } /* Fields of a form in a panel, one under another. */ .cv-stack { display: flex; flex-direction: column; align-items: stretch; gap: 16px; } .cv-stack > fluent-switch { align-self: flex-start; } /* Confetti for finishing the setup guide (js/confetti.js): over everything, and never in the way of a click. */ .cv-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 10000; pointer-events: none; } /* * Help (cmty.app/help). The search box and its matches (js/help.js draws the matches, so these aren't scoped), and a * list of guides with what each is for. */ .cv-help-search { position: relative; display: flex; align-items: center; } .cv-help-search input { width: 100%; min-height: 32px; padding: 4px 10px 4px 34px; font: inherit; color: var(--colorNeutralForeground1); background: var(--colorNeutralBackground1); border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); border-bottom-color: var(--colorNeutralStrokeAccessible); border-radius: var(--borderRadiusMedium); } .cv-help-search input:focus { outline: none; border-bottom: 2px solid var(--colorCompoundBrandStroke); } .cv-help-search-icon { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--colorNeutralForeground3); pointer-events: none; } .cv-help-search-large input { min-height: 48px; padding-left: 44px; font-size: var(--fontSizeBase400); border-radius: var(--borderRadiusLarge); box-shadow: var(--shadow4); } .cv-help-search-large .cv-help-search-icon { left: 14px; width: 20px; height: 20px; } .cv-help-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 10; display: flex; flex-direction: column; padding: 4px; max-height: 420px; overflow-y: auto; text-align: left; background: var(--colorNeutralBackground1); border: var(--strokeWidthThin) solid var(--colorNeutralStroke2); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); } .cv-help-results[hidden] { display: none; } .cv-help-results a { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--borderRadiusMedium); color: var(--colorNeutralForeground1); text-decoration: none; } .cv-help-results a:hover, .cv-help-results a[aria-selected=true] { background: var(--colorNeutralBackground1Hover); } .cv-help-results strong { font-weight: var(--fontWeightSemibold); } .cv-help-results span { font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); color: var(--colorNeutralForeground2); } .cv-help-results p { margin: 0; padding: 8px 10px; color: var(--colorNeutralForeground2); } .cv-help-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .cv-help-list li { display: flex; flex-direction: column; gap: 2px; } .cv-help-list a { font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); font-weight: var(--fontWeightSemibold); } .cv-help-list span { color: var(--colorNeutralForeground2); } /* The website's parts of the help panel (HelpButton): contacting Civitas, requests and news. */ .cv-help-panel-text { margin: 0; color: var(--colorNeutralForeground2); } .cv-help-panel-link { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .cv-help-panel-news { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .cv-help-panel-news li { display: flex; flex-direction: column; } .cv-help-panel-news span { font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); color: var(--colorNeutralForeground2); } .cv-help-panel-more { font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); }