/* nexus-community member screens: the Nexus UI/UX kit account control plane (the Nexus UI/UX kit §4, §5, §6) built from the kit's primitives (assets/kit/nexus-kit.css: .nf-ui-btn, -card, -chip, -badge, -eyebrow, -title, -field, -banner, -dot, -meta) and its tokens (--nx-*), light and dark through (kit bridge). Everything is scoped under .nxn.nx-community so no theme rule reaches in. Logical properties (right to left), rem sizes (Readabler scales everything), hairlines, 5px corners, status by dot, one inverted primary. */ /* 1.10.0: a theme never styles our controls. The member screens sit inside the theme's #buddypress.buddypress-wrap, whose rules box every button and field. The served copy is shielded (scripts/shield-css.mjs: every selector +2 id-levels), so these resets beat any theme rule with fewer ids; they are :where()-light, so our component rules and the kit's own controls (excluded) still win. Another plugin's own region inside the hub (a .nxn region that is not governance, the wallet or a community panel) keeps its own styles: it is left out. */ .nx-community :where(button, input[type="button"], input[type="submit"], input[type="reset"], a.button):where(:not(.nf-ui-btn, .nxn-btn, .nxn-button, .nx-btn, .nx-seg__btn, .nx-switch, .nx-check, .nx-radio, .nf-ui-segment > button, .nxn-segment > button, .nxc-hub > .nxn:not(.nxg, .nxr-hub) *, .nxc-hub > .nxd-panel__body > .nxn:not(.nx-dp) *)):not(#nx-shield):not(#nx-shield) { appearance: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit; letter-spacing: inherit; line-height: inherit; text-align: inherit; text-decoration: none; text-transform: none; text-shadow: none; min-block-size: 0; min-inline-size: 0; inline-size: auto; cursor: pointer; } .nx-community :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea):where(:not(.nxc-hub > .nxn:not(.nxg, .nxr-hub) *)):not(#nx-shield):not(#nx-shield) { min-block-size: 0; box-shadow: none; text-transform: none; letter-spacing: inherit; text-align: start; } .nx-community :where(button, a, input, select, textarea, summary):focus:not(:focus-visible):not(#nx-shield):not(#nx-shield) { outline: none; box-shadow: none; } .nx-community :where(input[type="checkbox"], input[type="radio"], .nx-switch):not(#nx-shield):not(#nx-shield) { font-size: inherit; text-align: start; } /* 1.10.3: the hub's tabs and the kit's segmented controls hold their look against any theme or plugin rule, !important ones included (some load only for signed-in members and administrators). The primary pair always reads. */ .nx-community :is(.nxc-tabs__item, .nf-ui-tab):not(#nx-shield):not(#nx-shield) { border-width: 0 !important; border-style: none !important; background-image: none !important; box-shadow: none !important; border-radius: 0 !important; text-transform: none !important; letter-spacing: normal !important; } .nx-community :is(.nxc-tabs__item, .nf-ui-tab):not(:hover):not(#nx-shield):not(#nx-shield) { background-color: transparent !important; } .nxn .nf-ui-segment > button:not(#nx-shield):not(#nx-shield), .nxn .nxn-segment > button:not(#nx-shield):not(#nx-shield) { border-width: 0 !important; box-shadow: none !important; background-image: none !important; text-transform: none !important; letter-spacing: normal !important; } .nxn .nf-ui-segment > button:not([aria-pressed="true"], [aria-checked="true"], [data-active="true"]):not(#nx-shield):not(#nx-shield), .nxn .nxn-segment > button:not([aria-pressed="true"], [aria-checked="true"], [data-active="true"]):not(#nx-shield):not(#nx-shield) { background-color: transparent !important; color: var(--nx-text-muted) !important; } .nxn .nf-ui-segment > button:is([aria-pressed="true"], [aria-checked="true"], [data-active="true"]):not(#nx-shield):not(#nx-shield), .nxn .nxn-segment > button:is([aria-pressed="true"], [aria-checked="true"], [data-active="true"]):not(#nx-shield):not(#nx-shield) { background-color: var(--nx-primary-bg) !important; color: var(--nx-primary-ink) !important; } .nxn :is(a, button).nf-ui-btn[data-variant="primary"]:not(#nx-shield):not(#nx-shield) { color: var(--nx-primary-ink) !important; } .nx-community table a:where(:not([class*="btn"], [class*="button"], [role="button"], [role="tab"], [data-variant])):not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary) !important; } /* the theme sets table links with !important */ .nx-community table a.nf-ui-btn[data-variant="primary"]:not(#nx-shield):not(#nx-shield), .nx-community table a.nxn-btn--primary:not(#nx-shield):not(#nx-shield) { color: var(--nx-primary-ink, var(--nx-bg-surface)) !important; } .nx-community table a:is(.nf-ui-btn, .nxn-btn):not([data-variant="primary"], [data-variant="danger"], .nxn-btn--primary):not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary) !important; } /* secondary buttons drawn as links in a table keep the body ink */ /* The frame: full width of the content area, on the page canvas, starting below the theme's header. */ #nxc-member:not(#nx-shield):not(#nx-shield) { --nxc-rail: 16rem; --nxc-gap: 1.5rem; /* The site's platform colour, else its institution's, else neutral (tokens from the estate theme). */ --nxc-hue-a: var(--nx-domain-a, var(--nxi-a, #a3a3a3)); --nxc-hue-b: var(--nx-domain-b, var(--nxi-c, #737373)); display: block; /* Full width (owner 2026-10-28: "our designs must be full width"), with gutters that grow with the screen; the content keeps clear of buttons a theme fixes to the right edge (--nxc-clear-end). */ max-inline-size: none; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 3rem) var(--nxc-clear-end, clamp(1rem, 3vw, 3rem)); margin-block: 0 3rem; color: var(--nx-text-secondary); background: var(--nx-bg-canvas); font-family: var(--nx-font-sans); font-size: 0.875rem; line-height: 1.5; text-align: start; box-sizing: border-box; isolation: isolate; } #nxc-member *:not(#nx-shield):not(#nx-shield), #nxc-member *:not(#nx-shield):not(#nx-shield)::before, #nxc-member *:not(#nx-shield):not(#nx-shield)::after { box-sizing: border-box; } /* BuddyPress's own stylesheet rounds and pads everything inside its wrapper (body #buddypress div); the frame's id outranks it, and the kit's primitives keep their own corners. */ #nxc-member div:not(#nx-shield):not(#nx-shield) { border-radius: 0; } #nxc-member .nf-ui-card:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-head:not(#nx-shield):not(#nx-shield), #nxc-member .nf-ui-banner:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-empty:not(#nx-shield):not(#nx-shield) { border-radius: 5px; } /* 1.10.3: links only; a button drawn as a link (any *btn* / *button* class, role button or tab, a kit variant) keeps its own ink. */ #nxc-member a:where(:not([class*="btn"], [class*="button"], [role="button"], [role="tab"], [data-variant])):not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); text-decoration: none; } #nxc-member a:where(:not([class*="btn"], [class*="button"], [role="button"], [role="tab"], [data-variant])):hover:not(#nx-shield):not(#nx-shield) { text-decoration: underline; text-underline-offset: 0.2em; } #nxc-member :focus-visible:not(#nx-shield):not(#nx-shield) { outline: 2px solid var(--nx-focus); outline-offset: 2px; border-radius: 2px; } #nxc-member p:not(.nxc-hub *):not(#nx-shield):not(#nx-shield) { margin: 0; } /* 1.7.0: a plugin's own region inside the frame (.nxc-hub) keeps its own spacing */ #nxc-member ul:not(.nxc-hub *):not(#nx-shield):not(#nx-shield), #nxc-member ol:not(.nxc-hub *):not(#nx-shield):not(#nx-shield) { margin: 0; padding: 0; list-style: none; } #nxc-member img:not(#nx-shield):not(#nx-shield) { max-inline-size: 100%; block-size: auto; } #nxc-member h1:not(.nxc-hub *):not(#nx-shield):not(#nx-shield), #nxc-member h2:not(.nxc-hub *):not(#nx-shield):not(#nx-shield), #nxc-member h3:not(.nxc-hub *):not(#nx-shield):not(#nx-shield) { margin: 0; color: var(--nx-text-primary); font-family: var(--nx-font-sans); text-transform: none; letter-spacing: -0.01em; } #nxc-member .nxc-sr:not(#nx-shield):not(#nx-shield) { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0 !important; padding: 0 !important; border: 0 !important; } #nxc-member .nxc-icon:not(#nx-shield):not(#nx-shield) { flex: none; inline-size: 1rem; block-size: 1rem; } /* Header: cover band, identity, actions, numbers. */ #nxc-member .nxc-head:not(#nx-shield):not(#nx-shield) { border: 1px solid var(--nx-border-hairline); border-radius: 5px; background: var(--nx-bg-surface); overflow: hidden; } #nxc-member .nxc-cover:not(#nx-shield):not(#nx-shield) { block-size: 12.5rem; background-color: var(--nx-bg-muted); /* No cover of the member's own: a fine hexagon line pattern over a soft gradient of the site's colour. A cover the member uploaded is an inline background-image and replaces both layers. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5' viewBox='0 0 28 48.5'%3E%3Cpath d='M14 0 28 8.08v16.17L14 32.33 0 24.25V8.08zM14 32.33V48.5' fill='none' stroke='%23808080' stroke-opacity='.28' stroke-width='.6'/%3E%3C/svg%3E"), linear-gradient(120deg, color-mix(in srgb, var(--nxc-hue-a) 34%, var(--nx-bg-surface)), color-mix(in srgb, var(--nxc-hue-b) 16%, var(--nx-bg-surface)) 70%); background-size: 28px 48.5px, cover; background-position: center; border-block-end: 1px solid var(--nx-border-hairline); } #nxc-member .nxc-head__body:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem 1.25rem; align-items: end; padding: 0 1.5rem 1.25rem; } #nxc-member .nxc-avatar:not(#nx-shield):not(#nx-shield) { margin-block-start: -3rem; inline-size: 6rem; block-size: 6rem; border-radius: 5px; padding: 3px; background: var(--nx-bg-surface); box-shadow: 0 0 0 1px var(--nx-border-hairline-strong); } #nxc-member .nxc-avatar img:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-avatar40 img:not(#nx-shield):not(#nx-shield) { inline-size: 100%; block-size: 100%; border: 0; padding: 0; margin: 0; border-radius: 5px; object-fit: cover; display: block; box-shadow: none; background: var(--nx-bg-muted); } #nxc-member .nxc-identity:not(#nx-shield):not(#nx-shield) { min-inline-size: 0; padding-block-start: 0.75rem; } #nxc-member .nxc-name:not(#nx-shield):not(#nx-shield) { font-size: 1.5rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; } #nxc-member .nxc-handle:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.25rem !important; font-family: var(--nx-font-mono); font-size: 0.75rem; color: var(--nx-text-muted); } #nxc-member .nxc-active:not(#nx-shield):not(#nx-shield) { margin-block-start: 0.25rem !important; font-size: 0.8125rem; color: var(--nx-text-muted); } #nxc-member .nxc-actions:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; } #nxc-member .nxc-actions .nf-ui-btn:not(#nx-shield):not(#nx-shield) { text-decoration: none; } #nxc-member .nxc-more:not(#nx-shield):not(#nx-shield) { position: relative; } #nxc-member .nxc-more > summary:not(#nx-shield):not(#nx-shield) { list-style: none; cursor: pointer; } #nxc-member .nxc-more > summary:not(#nx-shield):not(#nx-shield)::-webkit-details-marker { display: none; } #nxc-member .nxc-more__menu:not(#nx-shield):not(#nx-shield) { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 0.5rem); z-index: 5; min-inline-size: 16rem; padding: 0.75rem; } #nxc-member .nxc-head__stats:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding: 0.875rem 1.5rem; border-block-start: 1px solid var(--nx-border-hairline); background: var(--nx-bg-canvas); } #nxc-member .nxc-stats:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin: 0; } #nxc-member .nxc-stat:not(#nx-shield):not(#nx-shield) { display: flex; flex-direction: column-reverse; gap: 0.125rem; } #nxc-member .nxc-stat dt:not(#nx-shield):not(#nx-shield) { margin: 0; } #nxc-member .nxc-stat dt:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-secondary); } #nxc-member .nxc-stat dd:not(#nx-shield):not(#nx-shield) { margin: 0; font-family: var(--nx-font-mono); font-size: 1.25rem; font-weight: 600; color: var(--nx-text-primary); font-variant-numeric: tabular-nums; } #nxc-member .nxc-stat dd.nxc-stat__text:not(#nx-shield):not(#nx-shield) { font-family: var(--nx-font-sans); font-size: 0.9375rem; } /* Layout: rail and section. */ #nxc-member .nxc-layout:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: var(--nxc-rail) minmax(0, 1fr); gap: var(--nxc-gap); margin-block-start: var(--nxc-gap); align-items: start; } #nxc-member .nxc-rail:not(#nx-shield):not(#nx-shield) { position: sticky; inset-block-start: 1rem; } #nxc-member .nxc-rail__group + .nxc-rail__group:not(#nx-shield):not(#nx-shield) { margin-block-start: 1.25rem; } #nxc-member .nxc-rail__eyebrow:not(#nx-shield):not(#nx-shield) { padding-inline-start: 0.75rem; margin-block-end: 0.375rem !important; } #nxc-member .nxc-rail__item:not(#nx-shield):not(#nx-shield) { display: flex; align-items: center; gap: 0.625rem; min-block-size: 2rem; padding-block: 0.375rem; padding-inline: 0.75rem; border-inline-start: 2px solid transparent; color: var(--nx-text-secondary) !important; font-size: 0.875rem; text-decoration: none !important; transition: background-color 120ms cubic-bezier(.2,0,0,1); } #nxc-member .nxc-rail__item:hover:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-hover); color: var(--nx-text-primary) !important; } #nxc-member .nxc-rail__item[aria-current="page"]:not(#nx-shield):not(#nx-shield) { border-inline-start-color: var(--nx-text-primary); color: var(--nx-text-primary) !important; font-weight: 500; background: var(--nx-bg-elevated); } #nxc-member .nxc-rail__label:not(#nx-shield):not(#nx-shield) { flex: 1; min-inline-size: 0; } #nxc-member .nxc-rail__count:not(#nx-shield):not(#nx-shield) { font-family: var(--nx-font-mono); font-size: 0.6875rem; color: var(--nx-text-muted); font-variant-numeric: tabular-nums; } #nxc-member .nxc-main:not(#nx-shield):not(#nx-shield) { min-inline-size: 0; outline: none; } #nxc-member .nxc-section:not(#nx-shield):not(#nx-shield) { margin-block-end: 1rem; } #nxc-member .nxc-section .nf-ui-title:not(#nx-shield):not(#nx-shield) { margin-block-start: 0.25rem; } #nxc-member .nxc-filters:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-chips:not(#nx-shield):not(#nx-shield) { margin-block: 0.875rem 0; } #nxc-member .nxc-filters ul:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-chips ul:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; gap: 0.5rem; } #nxc-member .nxc-chips:not(#nx-shield):not(#nx-shield) { margin-block: 0 1rem; } #nxc-member a.nf-ui-chip:not(#nx-shield):not(#nx-shield) { text-decoration: none; color: var(--nx-text-secondary); } #nxc-member a.nf-ui-chip[data-active="true"]:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); } #nxc-member .nxc-chip-count:not(#nx-shield):not(#nx-shield) { font-family: var(--nx-font-mono); color: var(--nx-text-muted); } /* Activity: composer and feed. */ #nxc-member .nxc-composer:not(#nx-shield):not(#nx-shield) { padding: 1rem; margin-block-end: 1rem; } #nxc-member .nxc-composer__row:not(#nx-shield):not(#nx-shield) { display: flex; gap: 0.75rem; align-items: flex-start; } #nxc-member .nxc-composer textarea.nf-ui-field:not(#nx-shield):not(#nx-shield) { flex: 1; min-block-size: 2.75rem; block-size: auto; resize: vertical; padding-block: 0.5rem; font: inherit; line-height: 1.5; } #nxc-member .nxc-composer__bar:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: flex-end; margin-block-start: 0.75rem; padding-inline-start: 3.25rem; } #nxc-member .nxc-attach:not(#nx-shield):not(#nx-shield) { margin-inline-end: auto; cursor: pointer; } #nxc-member .nxc-attach:focus-within:not(#nx-shield):not(#nx-shield) { outline: 2px solid var(--nx-focus); outline-offset: 2px; } #nxc-member select.nf-ui-field.nxc-privacy:not(#nx-shield):not(#nx-shield) { inline-size: auto; block-size: 1.875rem; padding-block: 0; font-size: 0.8125rem; } #nxc-member .nxc-avatar40:not(#nx-shield):not(#nx-shield) { flex: none; inline-size: 2.5rem; block-size: 2.5rem; } #nxc-member .nxc-feed:not(#nx-shield):not(#nx-shield) { display: grid; gap: 0.75rem; } #nxc-member .nxc-post:not(#nx-shield):not(#nx-shield) { padding: 1rem; } #nxc-member .nxc-post__head:not(#nx-shield):not(#nx-shield) { display: flex; gap: 0.75rem; align-items: flex-start; } #nxc-member .nxc-post__who:not(#nx-shield):not(#nx-shield) { min-inline-size: 0; flex: 1; } #nxc-member .nxc-post__action:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-secondary); overflow-wrap: anywhere; } #nxc-member .nxc-post__action a:not(#nx-shield):not(#nx-shield) { font-weight: 500; } #nxc-member .nxc-post__meta:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-block-start: 0.125rem !important; } #nxc-member .nxc-post__meta a:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-muted); } #nxc-member .nxc-site:not(#nx-shield):not(#nx-shield) { gap: 0.25rem; } #nxc-member .nxc-post__body:not(#nx-shield):not(#nx-shield) { margin-block-start: 0.75rem; padding-inline-start: 3.25rem; color: var(--nx-text-primary); font-size: 0.9375rem; overflow-wrap: anywhere; } #nxc-member .nxc-post__body p + p:not(#nx-shield):not(#nx-shield) { margin-block-start: 0.5rem; } #nxc-member .nxc-post__body img:not(#nx-shield):not(#nx-shield) { border-radius: 5px; } #nxc-member .nxc-post .nxf-cmt-preview:not(#nx-shield):not(#nx-shield) { margin-block-start: 0.75rem; margin-inline-start: 3.25rem; padding: 0.75rem 1rem; border: 1px solid var(--nx-border-hairline); border-radius: 5px; background: var(--nx-bg-elevated); } #nxc-member .nxc-post .nxf-cmt-preview a:not(#nx-shield):not(#nx-shield) { font-weight: 500; } #nxc-member .nxc-post .nxf-cmt-preview p:not(#nx-shield):not(#nx-shield) { margin-block-start: 0.25rem; color: var(--nx-text-muted); font-size: 0.8125rem; } #nxc-member .nxc-post__actions:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: flex-start; margin-block-start: 0.75rem; padding-inline-start: 2.75rem; } #nxc-member .nxc-icon-btn:not(#nx-shield):not(#nx-shield) { gap: 0.375rem; font-family: var(--nx-font-mono); font-size: 0.75rem; color: var(--nx-text-muted); text-decoration: none; } #nxc-member .nxc-icon-btn[data-active="true"]:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); } #nxc-member .nxc-icon-btn[data-active="true"] .nxc-icon:not(#nx-shield):not(#nx-shield) { fill: currentColor; } #nxc-member .nxf-cmt-report > summary:not(#nx-shield):not(#nx-shield) { list-style: none; cursor: pointer; } #nxc-member .nxf-cmt-report > summary:not(#nx-shield):not(#nx-shield)::-webkit-details-marker { display: none; } #nxc-member .nxf-cmt-report[open]:not(#nx-shield):not(#nx-shield) { flex-basis: 100%; } #nxc-member .nxf-cmt-report form:not(#nx-shield):not(#nx-shield) { margin-block-start: 0.5rem; padding: 1rem; border: 1px solid var(--nx-border-hairline-strong); border-radius: 5px; background: var(--nx-bg-elevated); display: grid; gap: 0.75rem; } #nxc-member .nx-engine-field label:not(#nx-shield):not(#nx-shield) { display: block; margin-block-end: 0.25rem; color: var(--nx-text-primary); font-weight: 500; font-size: 0.8125rem; } #nxc-member .nx-engine-field select:not(#nx-shield):not(#nx-shield), #nxc-member .nx-engine-field textarea:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp input[type="text"]:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp input[type="email"]:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp input[type="url"]:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp input[type="search"]:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp input[type="password"]:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp select:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp textarea:not(#nx-shield):not(#nx-shield) { inline-size: 100%; max-inline-size: 30rem; min-block-size: 2.25rem; padding: 0.375rem 0.625rem; font: inherit; color: var(--nx-text-primary); background: var(--nx-bg-surface); border: 1px solid var(--nx-border-hairline-strong); border-radius: 5px; box-shadow: none; } #nxc-member .nx-engine-hint:not(#nx-shield):not(#nx-shield), #nxc-member .nx-engine-meta:not(#nx-shield):not(#nx-shield) { font-size: 0.75rem; color: var(--nx-text-muted); } #nxc-member .nx-engine-button:not(#nx-shield):not(#nx-shield), #nxc-member .nx-engine-action:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; min-block-size: 1.875rem; padding: 0 0.75rem; font: inherit; font-size: 0.8125rem; font-weight: 500; color: var(--nx-text-primary); background: transparent; border: 1px solid var(--nx-border-hairline-strong); border-radius: 5px; cursor: pointer; } #nxc-member .nx-engine-button:not(#nx-shield):not(#nx-shield) { color: var(--nx-primary-ink); background: var(--nx-primary-bg); border-color: var(--nx-primary-bg); } #nxc-member .nxc-more-row:not(#nx-shield):not(#nx-shield) { margin-block-start: 1rem !important; text-align: center; } #nxc-member .nxc-more__menu .nxf-cmt-member-actions:not(#nx-shield):not(#nx-shield) { display: grid; gap: 0.5rem; } /* Overview panels. */ #nxc-member .nxc-grid:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } #nxc-member .nxc-card:not(#nx-shield):not(#nx-shield) { padding: 1rem 1.125rem; display: flex; flex-direction: column; gap: 0.5rem; } #nxc-member .nxc-card--wide:not(#nx-shield):not(#nx-shield) { grid-column: 1 / -1; } #nxc-member .nxc-card .nf-ui-title:not(#nx-shield):not(#nx-shield) { margin-block-end: 0.25rem; } #nxc-member .nxc-metric:not(#nx-shield):not(#nx-shield) { font-family: var(--nx-font-mono); font-size: 1.75rem; font-weight: 500; color: var(--nx-text-primary); line-height: 1.1; } #nxc-member .nxc-meter:not(#nx-shield):not(#nx-shield) { block-size: 4px; background: var(--nx-bg-muted); border-radius: 2px; overflow: hidden; } #nxc-member .nxc-meter span:not(#nx-shield):not(#nx-shield) { display: block; block-size: 100%; background: var(--nx-text-primary); } #nxc-member .nxc-list li:not(#nx-shield):not(#nx-shield) { display: flex; align-items: center; gap: 0.5rem; padding-block: 0.125rem; } #nxc-member .nxc-rows li:not(#nx-shield):not(#nx-shield) { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.5rem; border-block-end: 1px solid var(--nx-border-hairline); } #nxc-member .nxc-rows li:last-child:not(#nx-shield):not(#nx-shield) { border-block-end: 0; } #nxc-member .nxc-rows li a:not(#nx-shield):not(#nx-shield) { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #nxc-member .nxc-rows li .nf-ui-meta:not(#nx-shield):not(#nx-shield) { flex: none; } #nxc-member .nxc-steps li:not(#nx-shield):not(#nx-shield) { display: flex; gap: 0.75rem; align-items: baseline; padding-block: 0.5rem; border-block-end: 1px solid var(--nx-border-hairline); } #nxc-member .nxc-steps li:last-child:not(#nx-shield):not(#nx-shield) { border-block-end: 0; } #nxc-member .nxc-link:not(#nx-shield):not(#nx-shield) { font-size: 0.8125rem; text-decoration: underline !important; text-underline-offset: 0.2em; } #nxc-member .nxc-badges:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 0.75rem; } #nxc-member .nxc-badges li:not(#nx-shield):not(#nx-shield) { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; text-align: center; font-size: 0.75rem; color: var(--nx-text-secondary); } #nxc-member .nxc-badges img:not(#nx-shield):not(#nx-shield) { inline-size: 2.5rem; block-size: 2.5rem; } #nxc-member .nxc-badge-blank:not(#nx-shield):not(#nx-shield) { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border: 1px solid var(--nx-border-hairline-strong); border-radius: 5px; color: var(--nx-text-muted); } #nxc-member .nxc-sites:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.5rem; } #nxc-member .nxc-site:not(#nx-shield):not(#nx-shield) { --nxc-bar-a: var(--nxc-site-a, var(--nx-border-strong)); --nxc-bar-b: var(--nxc-site-b, var(--nxc-bar-a)); display: flex; gap: 0; align-items: stretch; padding: 0; text-decoration: none; } :root[data-theme="dark"] #nxc-member .nxc-site:not(#nx-shield):not(#nx-shield) { --nxc-bar-a: var(--nxc-site-a-d, var(--nx-border-strong)); --nxc-bar-b: var(--nxc-site-b-d, var(--nxc-bar-a)); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) #nxc-member .nxc-site:not(#nx-shield):not(#nx-shield) { --nxc-bar-a: var(--nxc-site-a-d, var(--nx-border-strong)); --nxc-bar-b: var(--nxc-site-b-d, var(--nxc-bar-a)); } } #nxc-member .nxc-site__bar:not(#nx-shield):not(#nx-shield) { flex: none; inline-size: 4px; background: linear-gradient(180deg, var(--nxc-bar-a), var(--nxc-bar-b)); } #nxc-member .nxc-site__text:not(#nx-shield):not(#nx-shield) { display: flex; flex-direction: column; gap: 0.125rem; min-inline-size: 0; padding: 0.625rem 0.875rem; } #nxc-member .nxc-site__text .nf-ui-eyebrow:not(#nx-shield):not(#nx-shield) { margin: 0; } #nxc-member .nxc-sites strong:not(#nx-shield):not(#nx-shield) { display: block; color: var(--nx-text-primary); font-weight: 600; font-size: 0.8125rem; } #nxc-member .nxc-sites .nf-ui-meta:not(#nx-shield):not(#nx-shield) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #nxc-member .nxc-empty:not(#nx-shield):not(#nx-shield) { padding: 1.5rem 1rem; text-align: center; display: grid; gap: 0.5rem; justify-items: center; color: var(--nx-text-secondary); } #nxc-member .nxc-main > .nxc-empty:not(#nx-shield):not(#nx-shield) { border: 1px dashed var(--nx-border-hairline-strong); border-radius: 5px; } #nxc-member .nf-ui-banner:not(#nx-shield):not(#nx-shield) { margin-block-end: 1rem; } /* BuddyPress's and bbPress's own tab bodies inside the frame, in the kit's look. */ #nxc-member .nxc-bp:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-secondary); } #nxc-member .nxc-bp h2:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp h3:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp h4:not(#nx-shield):not(#nx-shield) { font-size: 0.9375rem; font-weight: 500; margin-block: 1rem 0.5rem; } #nxc-member .nxc-bp .bp-screen-title:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp .screen-heading:not(#nx-shield):not(#nx-shield) { display: none; } #nxc-member .nxc-bp table:not(#nx-shield):not(#nx-shield) { inline-size: 100%; border-collapse: collapse; border: 1px solid var(--nx-border-hairline); border-radius: 5px; overflow: hidden; } #nxc-member .nxc-bp th:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp td:not(#nx-shield):not(#nx-shield) { padding: 0.625rem 0.75rem; border-block-end: 1px solid var(--nx-border-hairline); text-align: start; background: var(--nx-bg-surface); color: var(--nx-text-secondary); } #nxc-member .nxc-bp th:not(#nx-shield):not(#nx-shield) { font-family: var(--nx-font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nx-text-muted); background: var(--nx-bg-muted); } #nxc-member .nxc-bp .profile-fields td.label:not(#nx-shield):not(#nx-shield) { inline-size: 35%; font-weight: 500; color: var(--nx-text-primary); } #nxc-member .nxc-bp button:not(.nx-switch):not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp input[type="submit"]:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp .button:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp a.button:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; min-block-size: 2.25rem; padding: 0 0.875rem; font: inherit; font-weight: 500; font-size: 0.8125rem; line-height: 1; color: var(--nx-text-primary); background: transparent; border: 1px solid var(--nx-border-hairline-strong); border-radius: 5px; box-shadow: none; text-transform: none; cursor: pointer; } #nxc-member .nxc-bp input[type="submit"]:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp button[type="submit"]:not(.nx-switch):not(#nx-shield):not(#nx-shield) { color: var(--nx-primary-ink); background: var(--nx-primary-bg); border-color: var(--nx-primary-bg); } #nxc-member .nxc-bp .bp-feedback:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp .info:not(#nx-shield):not(#nx-shield) { padding: 0.75rem 1rem; border: 1px solid var(--nx-border-hairline-strong); border-radius: 5px; background: var(--nx-bg-elevated); color: var(--nx-text-secondary); box-shadow: none; } #nxc-member .nxc-bp .bp-feedback .bp-icon:not(#nx-shield):not(#nx-shield) { display: none; } #nxc-member .nxc-bp ul.item-list:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp ul#members-list:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp ul#groups-list:not(#nx-shield):not(#nx-shield) { display: grid; gap: 0.5rem; } #nxc-member .nxc-bp ul.item-list > li:not(#nx-shield):not(#nx-shield) { padding: 0.75rem 1rem; border: 1px solid var(--nx-border-hairline); border-radius: 5px; background: var(--nx-bg-surface); list-style: none; } #nxc-member .nxc-bp .item-avatar img:not(#nx-shield):not(#nx-shield) { inline-size: 2.5rem; block-size: 2.5rem; border-radius: 5px; } #nxc-member .nxc-bp .nxc-points ul:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp .nxc-badges:not(#nx-shield):not(#nx-shield) { list-style: none; } #nxc-member .nxc-bp .nxc-requests:not(#nx-shield):not(#nx-shield) { max-inline-size: 100%; } /* Phone and tablet: one column; the rail becomes a scrollable bar with the current item in view. */ @media (max-width: 63.99em) { #nxc-member .nxc-layout:not(#nx-shield):not(#nx-shield) { grid-template-columns: minmax(0, 1fr); gap: 1rem; } #nxc-member .nxc-rail:not(#nx-shield):not(#nx-shield) { position: static; border-block: 1px solid var(--nx-border-hairline); background: var(--nx-bg-canvas); } #nxc-member .nxc-rail__scroll:not(#nx-shield):not(#nx-shield) { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; } #nxc-member .nxc-rail__scroll:not(#nx-shield):not(#nx-shield)::-webkit-scrollbar { display: none; } #nxc-member .nxc-rail__group:not(#nx-shield):not(#nx-shield) { display: flex; flex: none; } #nxc-member .nxc-rail__group + .nxc-rail__group:not(#nx-shield):not(#nx-shield) { margin-block-start: 0; } #nxc-member .nxc-rail__eyebrow:not(#nx-shield):not(#nx-shield) { display: none; } #nxc-member .nxc-rail ul:not(#nx-shield):not(#nx-shield) { display: flex; } #nxc-member .nxc-rail__item:not(#nx-shield):not(#nx-shield) { white-space: nowrap; min-block-size: 2.75rem; border-inline-start: 0; border-block-end: 2px solid transparent; scroll-snap-align: center; } #nxc-member .nxc-rail__item[aria-current="page"]:not(#nx-shield):not(#nx-shield) { border-block-end-color: var(--nx-text-primary); background: transparent; } #nxc-member .nxc-grid:not(#nx-shield):not(#nx-shield) { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 40em) { #nxc-member .nxc-cover:not(#nx-shield):not(#nx-shield) { block-size: 8.75rem; } #nxc-member .nxc-head__body:not(#nx-shield):not(#nx-shield) { grid-template-columns: auto minmax(0, 1fr); padding: 0 1rem 1rem; } #nxc-member .nxc-avatar:not(#nx-shield):not(#nx-shield) { inline-size: 5rem; block-size: 5rem; margin-block-start: -2.5rem; } #nxc-member .nxc-actions:not(#nx-shield):not(#nx-shield) { grid-column: 1 / -1; justify-content: flex-start; } #nxc-member .nxc-head__stats:not(#nx-shield):not(#nx-shield) { padding: 0.75rem 1rem; } #nxc-member .nxc-stats:not(#nx-shield):not(#nx-shield) { gap: 0.5rem 1.25rem; } #nxc-member .nxc-post__body:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-composer__bar:not(#nx-shield):not(#nx-shield) { padding-inline-start: 0; } #nxc-member .nxc-post__actions:not(#nx-shield):not(#nx-shield) { padding-inline-start: 0; } #nxc-member .nxc-post .nxf-cmt-preview:not(#nx-shield):not(#nx-shield) { margin-inline-start: 0; } } @media (prefers-reduced-motion: reduce) { #nxc-member .nxc-rail__item:not(#nx-shield):not(#nx-shield) { transition: none; } } @media (forced-colors: active) { #nxc-member .nxc-rail__item[aria-current="page"]:not(#nx-shield):not(#nx-shield) { border-color: Highlight; } #nxc-member .nxc-meter span:not(#nx-shield):not(#nx-shield) { background: Highlight; } } /* The kit's fields and buttons inside BuddyPress's wrapper, where its stylesheet would otherwise win. */ #nxc-member .nf-ui-field:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); background: var(--nx-bg-surface); border: 1px solid var(--nx-border-hairline-strong); border-radius: 5px; box-shadow: none; font-family: var(--nx-font-sans); } #nxc-member .nf-ui-field:not(#nx-shield):not(#nx-shield)::placeholder { color: var(--nx-text-muted); opacity: 1; } #nxc-member .nf-ui-field:focus:not(#nx-shield):not(#nx-shield) { border-color: var(--nx-accent); box-shadow: 0 0 0 3px var(--nx-accent-soft); outline: none; } #nxc-member .nf-ui-btn:not(#nx-shield):not(#nx-shield) { border-radius: 5px; text-transform: none; letter-spacing: normal; box-shadow: none; } #nxc-member .nf-ui-chip:not(#nx-shield):not(#nx-shield), #nxc-member .nf-ui-badge:not(#nx-shield):not(#nx-shield) { border-radius: 4px; } #nxc-member a.nf-ui-btn:not(#nx-shield):not(#nx-shield), #nxc-member a.nf-ui-btn:hover:not(#nx-shield):not(#nx-shield) { text-decoration: none; } #nxc-member a.nf-ui-btn[data-variant="primary"]:not(#nx-shield):not(#nx-shield), #nxc-member a.nf-ui-btn[data-variant="primary"]:hover:not(#nx-shield):not(#nx-shield) { color: var(--nx-primary-ink); } #nxc-member a.nf-ui-btn[data-variant="secondary"]:not(#nx-shield):not(#nx-shield), #nxc-member a.nf-ui-btn[data-variant="ghost"]:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); } /* Points and badges. */ #nxc-member .nxc-tiles:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem; } #nxc-member .nxc-tile:not(#nx-shield):not(#nx-shield) { padding: 1rem 1.125rem; display: grid; gap: 0.375rem; } #nxc-member .nxc-metric--text:not(#nx-shield):not(#nx-shield) { font-family: var(--nx-font-sans); font-size: 1.125rem; } #nxc-member .nxc-metric__of:not(#nx-shield):not(#nx-shield) { font-size: 0.8125rem; color: var(--nx-text-muted); } #nxc-member .nxc-subhead:not(#nx-shield):not(#nx-shield) { margin-block: 1.5rem 0.75rem; } #nxc-member .nxc-badge-grid:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.75rem; } #nxc-member .nxc-badge:not(#nx-shield):not(#nx-shield) { padding: 1rem; display: grid; gap: 0.375rem; align-content: start; } #nxc-member .nxc-badge:not(.is-earned) img:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-badge:not(.is-earned) .nxc-badge-blank:not(#nx-shield):not(#nx-shield) { opacity: 0.45; filter: grayscale(1); } #nxc-member .nxc-badge img:not(#nx-shield):not(#nx-shield) { inline-size: 3rem; block-size: 3rem; } #nxc-member .nxc-badge__title:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); font-weight: 500; } #nxc-member .nxc-badge__desc:not(#nx-shield):not(#nx-shield) { font-size: 0.8125rem; color: var(--nx-text-secondary); } #nxc-member .nxc-badge .nf-ui-meta:not(#nx-shield):not(#nx-shield) { display: flex; align-items: center; gap: 0.375rem; } /* Profile view. */ #nxc-member .nxc-fields:not(#nx-shield):not(#nx-shield) { margin: 0; display: grid; } #nxc-member .nxc-field:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr); gap: 1rem; padding-block: 0.625rem; border-block-end: 1px solid var(--nx-border-hairline); } #nxc-member .nxc-field:last-child:not(#nx-shield):not(#nx-shield) { border-block-end: 0; } #nxc-member .nxc-field dt:not(#nx-shield):not(#nx-shield) { margin: 0; color: var(--nx-text-muted); font-size: 0.8125rem; } #nxc-member .nxc-field dd:not(#nx-shield):not(#nx-shield) { margin: 0; color: var(--nx-text-primary); overflow-wrap: anywhere; } #nxc-member .nxc-field dd p:not(#nx-shield):not(#nx-shield) { margin: 0; } @media (max-width: 40em) { #nxc-member .nxc-field:not(#nx-shield):not(#nx-shield) { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; } } /* Block themes hold page content to the reading width; on member screens BuddyPress's wrapper takes the theme's wide width instead, so the rail and the section sit side by side. Classic themes are not affected. */ body.nx-community-page .is-layout-constrained > #buddypress:not(#nx-shield):not(#nx-shield), body.nx-community-page .is-layout-constrained > .buddypress-wrap:not(#nx-shield):not(#nx-shield) { max-inline-size: min(var(--wp--style--global--wide-size, 80rem), 100%) !important; inline-size: 100%; } /* A gutter of its own on a phone, for themes that give their content none. */ @media (max-width: 40em) { #nxc-member:not(#nx-shield):not(#nx-shield) { padding-inline: 0.75rem; } } /* Identity chips beside the handle: institution, then member type and platform. */ #nxc-member .nxc-chips:not(#nx-shield):not(#nx-shield) { display: inline-flex; flex-wrap: wrap; gap: 0.375rem; font-family: var(--nx-font-sans); } #nxc-member .nxc-chips .nf-ui-chip:not(#nx-shield):not(#nx-shield) { font-size: 0.75rem; } #nxc-member .nxc-chip-inst:not(#nx-shield):not(#nx-shield) { font-family: var(--nx-font-mono); font-weight: 600; letter-spacing: 0.06em; border-color: var(--nxc-hue-a); } /* A member without a photo: initials on the site's colour (no image from an outside service). */ #nxc-member .nxc-initials:not(#nx-shield):not(#nx-shield) { display: grid; place-items: center; inline-size: 100%; block-size: 100%; border-radius: 5px; background: linear-gradient(135deg, var(--nxc-hue-a), var(--nxc-hue-b)); color: #000000; font-family: var(--nx-font-sans); font-weight: 600; font-size: 2.25rem; letter-spacing: -0.02em; line-height: 1; } #nxc-member .nxc-avatar40 .nxc-initials:not(#nx-shield):not(#nx-shield) { font-size: 0.875rem; } /* The trust level in the kit's status colours. */ #nxc-member .nxc-trust .nf-ui-badge:not(#nx-shield):not(#nx-shield) { font-weight: 600; } #nxc-member .nxc-trust .nf-ui-badge[data-tone="positive"]:not(#nx-shield):not(#nx-shield) { color: var(--nx-positive); border-color: var(--nx-positive); background: transparent; } #nxc-member .nxc-trust .nf-ui-badge[data-tone="caution"]:not(#nx-shield):not(#nx-shield) { color: var(--nx-caution); border-color: var(--nx-caution); background: transparent; } #nxc-member .nxc-trust .nf-ui-badge[data-tone="neutral"]:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); border-color: var(--nx-border-strong); } /* My requests and the points sparkline. */ #nxc-member .nxc-rows .nxc-req:not(#nx-shield):not(#nx-shield) { display: flex; flex-direction: column; min-inline-size: 0; } #nxc-member .nxc-rows .nxc-req strong:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); font-weight: 500; } #nxc-member .nxc-spark:not(#nx-shield):not(#nx-shield) { margin: 0.5rem 0 0; } #nxc-member .nxc-spark svg:not(#nx-shield):not(#nx-shield) { display: block; inline-size: 100%; } #nxc-member .nxc-spark__line:not(#nx-shield):not(#nx-shield) { stroke: var(--nxc-hue-b); stroke-width: 1.5; vector-effect: non-scaling-stroke; } #nxc-member .nxc-spark__area:not(#nx-shield):not(#nx-shield) { fill: color-mix(in srgb, var(--nxc-hue-a) 18%, transparent); stroke: none; } #nxc-member .nxc-spark figcaption:not(#nx-shield):not(#nx-shield) { margin-block-start: 0.375rem; } #nxc-member .nxc-rows li:has(.nxc-req):not(#nx-shield):not(#nx-shield) { flex-wrap: wrap; align-items: center; row-gap: 0.375rem; } #nxc-member .nxc-rows .nxc-req:not(#nx-shield):not(#nx-shield) { flex: 1 1 12rem; } #nxc-member .nxc-rows li:has(.nxc-req) .nf-ui-badge:not(#nx-shield):not(#nx-shield) { flex: none; max-inline-size: 100%; white-space: normal; } /* Directories (members, groups): header with the page's h1, search and sort, filter chips, cards, pages. */ #nxc-member .nxc-dir__head:not(#nx-shield):not(#nx-shield) { display: grid; gap: 0.5rem; margin-block: 1.5rem 1.25rem; } #nxc-member .nxc-dir__head .nf-ui-eyebrow:not(#nx-shield):not(#nx-shield) { margin: 0; } #nxc-member .nxc-dir__title:not(#nx-shield):not(#nx-shield) { margin: 0; font-size: 2rem; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; color: var(--nx-text-primary); } #nxc-member .nxc-dir__count:not(#nx-shield):not(#nx-shield) { margin: 0; } #nxc-member .nxc-dir__search:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; margin-block-start: 0.5rem; } #nxc-member .nxc-dir__search p:not(#nx-shield):not(#nx-shield) { margin: 0; } #nxc-member .nxc-dir__field:not(#nx-shield):not(#nx-shield) { display: grid; gap: 0.25rem; min-inline-size: 12rem; } #nxc-member .nxc-dir__field--grow:not(#nx-shield):not(#nx-shield) { flex: 1 1 18rem; } #nxc-member .nxc-dir__search label:not(#nx-shield):not(#nx-shield) { font-weight: 500; color: var(--nx-text-primary); } #nxc-member .nxc-dir__search input:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-dir__search select:not(#nx-shield):not(#nx-shield) { min-block-size: 2.5rem; padding: 0.5rem 0.75rem; border: 1px solid var(--nx-border-default); border-radius: var(--nx-radius-sm, 4px); background: var(--nx-bg-surface); color: var(--nx-text-primary); font: inherit; } #nxc-member .nxc-dir__action:not(#nx-shield):not(#nx-shield) { margin-block: 0 1rem; } #nxc-member .nxc-cards:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; } #nxc-member .nxc-cards > li:not(#nx-shield):not(#nx-shield) { margin: 0; display: flex; } #nxc-member .nxc-cards > li > *:not(#nx-shield):not(#nx-shield) { flex: 1; } #nxc-member .nxc-person:not(#nx-shield):not(#nx-shield) { display: flex; gap: 0.875rem; align-items: flex-start; padding: 1rem; text-decoration: none; } #nxc-member .nxc-person__text:not(#nx-shield):not(#nx-shield) { display: flex; flex-direction: column; gap: 0.25rem; min-inline-size: 0; } #nxc-member .nxc-person__text strong:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); font-weight: 600; font-size: 0.9375rem; } #nxc-member .nxc-person__text .nf-ui-chip:not(#nx-shield):not(#nx-shield) { align-self: flex-start; font-size: 0.75rem; } #nxc-member .nxc-avatar48:not(#nx-shield):not(#nx-shield) { flex: none; inline-size: 3rem; block-size: 3rem; border-radius: 5px; overflow: hidden; } #nxc-member .nxc-avatar48 img:not(#nx-shield):not(#nx-shield) { inline-size: 100%; block-size: 100%; border-radius: 5px; object-fit: cover; display: block; } #nxc-member .nxc-avatar48 .nxc-initials:not(#nx-shield):not(#nx-shield) { font-size: 1.0625rem; } #nxc-member .nxc-group:not(#nx-shield):not(#nx-shield) { display: flex; flex-direction: column; gap: 0.625rem; padding: 1rem; } #nxc-member .nxc-group__link:not(#nx-shield):not(#nx-shield) { display: flex; gap: 0.75rem; align-items: center; text-decoration: none; } #nxc-member .nxc-group__name:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); font-weight: 600; font-size: 0.9375rem; } #nxc-member .nxc-group__meta:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; gap: 0.375rem 0.5rem; align-items: center; margin: 0; } #nxc-member .nxc-group__meta .nf-ui-chip:not(#nx-shield):not(#nx-shield) { font-size: 0.75rem; } #nxc-member .nxc-group__desc:not(#nx-shield):not(#nx-shield) { margin: 0; color: var(--nx-text-secondary); } #nxc-member .nxc-group__action:not(#nx-shield):not(#nx-shield) { margin: auto 0 0; } #nxc-member .nxc-group__about:not(#nx-shield):not(#nx-shield) { margin: 0; color: var(--nx-text-secondary); max-inline-size: 72ch; } #nxc-member .nxc-avatar--group:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-avatar--group img:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-avatar--group .nxc-initials:not(#nx-shield):not(#nx-shield) { border-radius: 12px; } #nxc-member .nxc-pages:not(#nx-shield):not(#nx-shield) { margin-block: 1.5rem 0; } #nxc-member .nxc-pages ul:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; list-style: none; } #nxc-member .nxc-pages a:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-pages span:not(#nx-shield):not(#nx-shield) { display: inline-grid; place-items: center; min-inline-size: 2.5rem; min-block-size: 2.5rem; padding-inline: 0.625rem; border: 1px solid var(--nx-border-hairline-strong); border-radius: var(--nx-radius-sm, 4px); color: var(--nx-text-primary); text-decoration: none; } #nxc-member .nxc-pages .current:not(#nx-shield):not(#nx-shield) { background: var(--nx-primary-bg); color: var(--nx-primary-ink); border-color: var(--nx-primary-bg); font-weight: 600; } #nxc-member .nxc-pages .dots:not(#nx-shield):not(#nx-shield) { border: 0; } /* Settings → Privacy and data. */ #nxc-member .nxc-actions-row:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; gap: 0.75rem; } #nxc-member .nxc-actions-row form:not(#nx-shield):not(#nx-shield) { margin: 0; } #nxc-member .nxc-consent__list:not(#nx-shield):not(#nx-shield) { margin-block: 0.5rem; } #nxc-member .nxc-consent__list li:not(#nx-shield):not(#nx-shield) { align-items: flex-start; } /* BuddyPress's and the theme's small print inside the frame: the kit's muted text colour (4.5:1 in both modes). */ #nxc-member .nxc-bp .time-since:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp .item-meta:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp .activity-time-since:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp .last-activity:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-muted); } /* This plugin's reactions inside BuddyPress's activity items: quiet chips, the chosen one filled. */ #nxc-member .nxc-bp .nxf-cmt-reactions:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; margin-block: 0.5rem 0; } #nxc-member .nxc-bp .nxf-cmt-reactions button:not(#nx-shield):not(#nx-shield) { min-block-size: 2rem; padding: 0 0.75rem; border: 1px solid var(--nx-border-hairline-strong); border-radius: 5px; background: transparent; color: var(--nx-text-primary); font: 500 0.8125rem/1 var(--nx-font-sans); } #nxc-member .nxc-bp .nxf-cmt-reactions button[aria-pressed="true"]:not(#nx-shield):not(#nx-shield) { background: var(--nx-primary-bg); color: var(--nx-primary-ink); border-color: var(--nx-primary-bg); } #nxc-member .nxc-bp .nxf-cmt-reactions .nx-engine-meta:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-muted); font-size: 0.8125rem; } #nxc-member .nxc-consent__list li[hidden]:not(#nx-shield):not(#nx-shield) { display: none; } /* Links inside running text (BuddyPress's parts, account hub tabs): underlined, so they are found without colour. */ #nxc-member .nxc-bp p a:not(.nf-ui-btn):not([class*="button"]):not(#nx-shield):not(#nx-shield), #nxc-member .nxc-card p a:not(.nf-ui-btn):not(.nxc-link):not(#nx-shield):not(#nx-shield) { text-decoration: underline; text-underline-offset: 0.2em; } /* Links in a post's small print (time, site): a 24px target (WCAG 2.2 target size). */ #nxc-member .nxc-post__meta a:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; min-block-size: 24px; } /* Activity directory (1.4.4): scope tabs, then the member feed's composer, chips and cards, one readable column. */ #nxc-member .nxc-dir__main--feed:not(#nx-shield):not(#nx-shield) { max-inline-size: 46rem; } #nxc-member .nxc-tabs:not(#nx-shield):not(#nx-shield) { margin-block: 0 1rem; border-block-end: 1px solid var(--nx-border-default); overflow-x: auto; } #nxc-member .nxc-tabs ul:not(#nx-shield):not(#nx-shield) { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; } #nxc-member .nxc-tab:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; min-block-size: 2.75rem; padding-inline: 0.75rem; border-block-end: 2px solid transparent; color: var(--nx-text-secondary); text-decoration: none; white-space: nowrap; font-weight: 500; } #nxc-member .nxc-tab:hover:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); } #nxc-member .nxc-tab[aria-current="page"]:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); border-block-end-color: var(--nx-text-primary); } #nxc-member .nxc-tab:focus-visible:not(#nx-shield):not(#nx-shield) { outline: 2px solid var(--nx-focus, currentColor); outline-offset: -2px; } @media (forced-colors: active) { #nxc-member .nxc-tab[aria-current="page"]:not(#nx-shield):not(#nx-shield) { border-block-end-color: Highlight; } } /* ---- Activity, 1.4.6: three columns, rich cards, places and the map (tokens only, logical properties) ---- */ #nxc-member[data-nxc-dir="activity"]:not(#nx-shield):not(#nx-shield) { max-inline-size: none; } @media (min-width: 1600px) { #nxc-member .nxc-act:not(#nx-shield):not(#nx-shield) { grid-template-columns: 17rem minmax(0, 1fr) 21rem; } } #nxc-member .nxc-act__head:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; } /* the view switch is the estate segmented control (.nx-seg; kits/controls, block at the end of this file) */ #nxc-member .nxc-seg:not(#nx-shield):not(#nx-shield) { --nx-ctl-line: var(--nx-border-default); } #nxc-member .nx-engine-field:has(> :is(.nx-switch, .nx-radio, .nx-check)):not(#nx-shield):not(#nx-shield) { display: flex; align-items: center; gap: 0.625rem; } #nxc-member .nx-engine-field:has(> :is(.nx-switch, .nx-radio, .nx-check)) label:not(#nx-shield):not(#nx-shield) { display: inline; margin: 0; } #nxc-member .nxc-act:not(#nx-shield):not(#nx-shield) { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 900px) { #nxc-member .nxc-act:not(#nx-shield):not(#nx-shield) { grid-template-columns: 15.5rem minmax(0, 1fr); } #nxc-member .nxc-act__right:not(#nx-shield):not(#nx-shield) { grid-column: 2; } } @media (min-width: 1240px) { #nxc-member .nxc-act:not(#nx-shield):not(#nx-shield) { grid-template-columns: 15.5rem minmax(0, 1fr) 19rem; } #nxc-member .nxc-act__right:not(#nx-shield):not(#nx-shield) { grid-column: 3; grid-row: 1; } #nxc-member .nxc-act--map:not(#nx-shield):not(#nx-shield) { grid-template-columns: 15.5rem minmax(0, 1fr); } } #nxc-member .nxc-act--single:not(#nx-shield):not(#nx-shield) { grid-template-columns: minmax(0, 52rem) !important; } #nxc-member .nxc-act__left:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-act__right:not(#nx-shield):not(#nx-shield) { display: grid; gap: 1rem; position: sticky; inset-block-start: 1rem; } @media (max-width: 899px) { #nxc-member .nxc-act__left:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-act__right:not(#nx-shield):not(#nx-shield) { position: static; } #nxc-member .nxc-act__left .nxc-you .nxc-rail-links:not(#nx-shield):not(#nx-shield) { display: none; } } #nxc-member .nxc-act__main:not(#nx-shield):not(#nx-shield) { min-inline-size: 0; } #nxc-member .nxc-rail-card:not(#nx-shield):not(#nx-shield) { padding: 1rem; display: grid; gap: 0.75rem; } #nxc-member .nxc-rail-card__title:not(#nx-shield):not(#nx-shield) { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nx-text-secondary); font-family: var(--nx-font-mono, inherit); } #nxc-member .nxc-rail-card p:not(#nx-shield):not(#nx-shield) { margin: 0; } #nxc-member .nxc-rail-links:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-inline-size: 0; margin: 0; padding: 0; list-style: none; } #nxc-member .nxc-rail-links a:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-rail-links button:not(#nx-shield):not(#nx-shield) { display: flex; align-items: center; gap: 0.625rem; inline-size: 100%; box-sizing: border-box; min-inline-size: 0; min-block-size: 2.25rem; padding: 0.25rem 0.5rem; border: 0; border-radius: 6px; background: transparent; color: var(--nx-text-primary); text-decoration: none; font: inherit; text-align: start; cursor: pointer; } #nxc-member .nxc-rail-links a:hover:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-rail-links button:hover:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-rail-links a[aria-current]:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-elevated); } #nxc-member .nxc-rail-links a:focus-visible:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-rail-links button:focus-visible:not(#nx-shield):not(#nx-shield) { outline: 2px solid var(--nx-focus, currentColor); outline-offset: -2px; } #nxc-member .nxc-rail-links__label:not(#nx-shield):not(#nx-shield) { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #nxc-member .nxc-rail-links__n:not(#nx-shield):not(#nx-shield) { font-family: var(--nx-font-mono, inherit); font-size: 0.75rem; color: var(--nx-text-secondary); flex: none; } #nxc-member .nxc-dot:not(#nx-shield):not(#nx-shield) { inline-size: 0.625rem; block-size: 0.625rem; border-radius: 2px; flex: none; background: linear-gradient(135deg, var(--nxc-site-a, var(--nx-text-secondary)), var(--nxc-site-b, var(--nx-text-secondary))); } #nxc-member .nxc-person-row:not(#nx-shield):not(#nx-shield) { display: flex; align-items: center; gap: 0.5rem; } #nxc-member .nxc-person-row > a:not(#nx-shield):not(#nx-shield) { flex: 1; min-inline-size: 0; } #nxc-member .nxc-you__who:not(#nx-shield):not(#nx-shield) { display: flex; gap: 0.75rem; align-items: center; color: var(--nx-text-primary); text-decoration: none; } #nxc-member .nxc-you__who > span:last-child:not(#nx-shield):not(#nx-shield) { display: grid; gap: 2px; min-inline-size: 0; } #nxc-member .nxc-join__btns:not(#nx-shield):not(#nx-shield) { display: grid; gap: 0.5rem; } #nxc-member .nxc-avatar28:not(#nx-shield):not(#nx-shield) { flex: none; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 5px; overflow: hidden; display: inline-flex; } #nxc-member .nxc-avatar28 img:not(#nx-shield):not(#nx-shield) { inline-size: 100%; block-size: 100%; object-fit: cover; } #nxc-member .nxc-avatar28 .nxc-initials:not(#nx-shield):not(#nx-shield) { font-size: 0.6875rem; } #nxc-member .nxc-week:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem; } #nxc-member .nxc-week strong:not(#nx-shield):not(#nx-shield) { font-size: 1.75rem; font-weight: 600; line-height: 1; } #nxc-member .nxc-narrow:not(#nx-shield):not(#nx-shield) { margin-block-end: 1rem; } /* Cards */ #nxc-member .nxc-feed:not(#nx-shield):not(#nx-shield) { display: grid; gap: 1rem; } #nxc-member .nxc-post:not(#nx-shield):not(#nx-shield) { padding: 1.125rem 1.25rem; display: grid; gap: 0.875rem; } #nxc-member .nxc-post__meta:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; gap: 0.375rem 0.5rem; align-items: center; } #nxc-member .nxc-site:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-place:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; } #nxc-member .nxc-place:not(#nx-shield):not(#nx-shield) { text-decoration: none; color: var(--nx-text-secondary); } #nxc-member .nxc-article:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--nx-border-default); border-radius: 10px; overflow: hidden; color: var(--nx-text-primary); text-decoration: none; background: var(--nx-bg-surface); } @media (min-width: 640px) { #nxc-member .nxc-article:not(#nx-shield):not(#nx-shield) { grid-template-columns: 13rem minmax(0, 1fr); } } #nxc-member .nxc-article:hover:not(#nx-shield):not(#nx-shield) { border-color: var(--nx-text-secondary); } #nxc-member .nxc-article:focus-visible:not(#nx-shield):not(#nx-shield) { outline: 2px solid var(--nx-focus, currentColor); outline-offset: 2px; } #nxc-member .nxc-article__img:not(#nx-shield):not(#nx-shield) { display: block; aspect-ratio: 16 / 10; background: var(--nx-bg-elevated); } #nxc-member .nxc-article__img img:not(#nx-shield):not(#nx-shield) { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } #nxc-member .nxc-article__img--none:not(#nx-shield):not(#nx-shield) { background: linear-gradient(135deg, var(--nxc-site-a, var(--nx-bg-elevated)), var(--nxc-site-b, var(--nx-bg-surface))); } #nxc-member .nxc-article__text:not(#nx-shield):not(#nx-shield) { display: grid; gap: 0.375rem; align-content: start; padding: 0.875rem 1rem; } #nxc-member .nxc-article__site:not(#nx-shield):not(#nx-shield) { font-family: var(--nx-font-mono, inherit); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nx-text-secondary); } #nxc-member .nxc-article__title:not(#nx-shield):not(#nx-shield) { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; } #nxc-member .nxc-article__excerpt:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-secondary); font-size: 0.9375rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } #nxc-member .nxc-post__actions:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; padding-block-start: 0.5rem; border-block-start: 1px solid var(--nx-border-default); } #nxc-member .nxc-reactions:not(#nx-shield):not(#nx-shield) { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; margin-inline-start: auto; } #nxc-member .nxc-reactions .nx-engine-action:not(#nx-shield):not(#nx-shield) { min-block-size: 2rem; padding-inline: 0.5rem; border: 1px solid var(--nx-border-default); border-radius: 5px; background: transparent; color: var(--nx-text-primary); font-size: 0.8125rem; cursor: pointer; } #nxc-member .nxc-reactions .nx-engine-action[aria-pressed="true"]:not(#nx-shield):not(#nx-shield) { border-color: var(--nx-text-primary); font-weight: 600; } #nxc-member .nxc-reactions .nx-engine-meta:not(#nx-shield):not(#nx-shield) { display: none; } #nxc-member [data-nxc-share][data-done="true"]:not(#nx-shield):not(#nx-shield) { color: var(--nx-status-positive, var(--nx-text-primary)); } #nxc-member .nxc-post__talk:not(#nx-shield):not(#nx-shield) { display: grid; gap: 0.625rem; } #nxc-member .nxc-comments:not(#nx-shield):not(#nx-shield) { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; } #nxc-member .nxc-comment:not(#nx-shield):not(#nx-shield) { display: flex; gap: 0.625rem; } #nxc-member .nxc-comment__body:not(#nx-shield):not(#nx-shield) { flex: 1; min-inline-size: 0; padding: 0.5rem 0.75rem; border-radius: 10px; background: var(--nx-bg-elevated); } #nxc-member .nxc-comment__body p:not(#nx-shield):not(#nx-shield) { margin: 0; } #nxc-member .nxc-comment__who:not(#nx-shield):not(#nx-shield) { font-size: 0.8125rem; } #nxc-member .nxc-comments__more:not(#nx-shield):not(#nx-shield) { margin: 0; font-size: 0.8125rem; } #nxc-member .nxc-reply:not(#nx-shield):not(#nx-shield) { display: flex; gap: 0.5rem; align-items: center; } #nxc-member .nxc-reply .nf-ui-field:not(#nx-shield):not(#nx-shield) { flex: 1; min-inline-size: 0; min-block-size: 2.25rem; padding-inline: 0.75rem; border: 1px solid var(--nx-border-default); border-radius: 5px; background: var(--nx-bg-surface); color: var(--nx-text-primary); font: inherit; } #nxc-member .nxc-place-select:not(#nx-shield):not(#nx-shield) { max-inline-size: 11rem; } /* Map */ #nxc-member .nxc-map:not(#nx-shield):not(#nx-shield) { inline-size: 100%; border: 1px solid var(--nx-border-default); border-radius: 12px; overflow: hidden; background: var(--nx-bg-canvas); } #nxc-member .nxc-map--mini:not(#nx-shield):not(#nx-shield) { block-size: 11rem; } #nxc-member .nxc-map--full:not(#nx-shield):not(#nx-shield) { block-size: min(68vh, 38rem); } #nxc-member .nxc-map[data-nxc-map-off]:not(#nx-shield):not(#nx-shield) { display: none; } #nxc-member .nxc-mapview:not(#nx-shield):not(#nx-shield) { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); } @media (min-width: 1100px) { #nxc-member .nxc-mapview:not(#nx-shield):not(#nx-shield) { grid-template-columns: minmax(0, 1fr) 20rem; } #nxc-member .nxc-mapview__note:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-mapview .nxc-table:not(#nx-shield):not(#nx-shield) { grid-column: 1 / -1; } } #nxc-member .nxc-mapview__side:not(#nx-shield):not(#nx-shield) { display: grid; gap: 0.75rem; align-content: start; } #nxc-member .nxc-mapview__tools:not(#nx-shield):not(#nx-shield) { margin: 0; } #nxc-member .nxc-map-panel:not(#nx-shield):not(#nx-shield) { display: grid; gap: 0.5rem; padding: 1rem; border: 1px solid var(--nx-border-default); border-radius: 12px; } #nxc-member .nxc-map-panel h2:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-map-panel p:not(#nx-shield):not(#nx-shield) { margin: 0; } #nxc-member .nxc-map-items:not(#nx-shield):not(#nx-shield) { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } #nxc-member .nxc-map-items li:not(#nx-shield):not(#nx-shield) { display: flex; justify-content: space-between; gap: 0.75rem; } #nxc-member .nxc-table:not(#nx-shield):not(#nx-shield) { inline-size: 100%; border-collapse: collapse; font-size: 0.875rem; } #nxc-member .nxc-table th:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-table td:not(#nx-shield):not(#nx-shield) { padding: 0.5rem 0.75rem; border-block-end: 1px solid var(--nx-border-default); text-align: start; } #nxc-member .nxc-table td:not(#nx-shield):not(#nx-shield) { font-family: var(--nx-font-mono, inherit); text-align: end; } #nxc-member .maplibregl-ctrl-group:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-surface); border: 1px solid var(--nx-border-default); box-shadow: none; } #nxc-member .maplibregl-ctrl-group button:not(#nx-shield):not(#nx-shield) { inline-size: 2.25rem; block-size: 2.25rem; } @media (prefers-reduced-motion: reduce) { #nxc-member .nxc-article:not(#nx-shield):not(#nx-shield) { transition: none; } } /* Full width (1.4.6): the theme's page container (BuddyX's 1300px .container on directory pages) is released on community screens only, so the frame spans the window with its own gutters. */ body.nx-community-page .container:has(#nxc-member):not(#nx-shield):not(#nx-shield), body.nx-community-page .site-wrapper:has(#nxc-member):not(#nx-shield):not(#nx-shield) { max-inline-size: none !important; inline-size: 100% !important; padding-inline: 0 !important; } #nxc-member button.nxc-icon-btn:not(#nx-shield):not(#nx-shield) { background: transparent; color: var(--nx-text-secondary); border: 0; } #nxc-member button.nxc-icon-btn:hover:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-elevated); color: var(--nx-text-primary); } /* 1.4.7: author line, compact reactions, menus, feed search, phone order */ #nxc-member .nxc-post__headline:not(#nx-shield):not(#nx-shield) { margin: 0; font-size: 0.8125rem; color: var(--nx-text-secondary); display: flex; align-items: center; gap: 0.25rem; } #nxc-member .nxc-verified:not(#nx-shield):not(#nx-shield) { display: inline-flex; inline-size: 1rem; block-size: 1rem; align-items: center; justify-content: center; border-radius: 5px; background: var(--nx-status-positive, var(--nx-text-primary)); color: var(--nx-bg-canvas); } #nxc-member .nxc-act-btn:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; gap: 0.375rem; min-block-size: 2.25rem; padding-inline: 0.625rem; border: 0; border-radius: 6px; background: transparent; color: var(--nx-text-secondary); font: inherit; font-size: 0.875rem; font-weight: 500; text-decoration: none; cursor: pointer; list-style: none; } #nxc-member .nxc-act-btn:not(#nx-shield):not(#nx-shield)::-webkit-details-marker { display: none; } #nxc-member .nxc-act-btn:hover:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-act-btn[data-active="true"]:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-act-btn[aria-expanded="true"]:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-elevated); color: var(--nx-text-primary); } #nxc-member .nxc-act-btn:focus-visible:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-menu > summary:focus-visible:not(#nx-shield):not(#nx-shield) { outline: 2px solid var(--nx-focus, currentColor); outline-offset: 2px; } #nxc-member .nxc-react__n:not(#nx-shield):not(#nx-shield) { font-family: var(--nx-font-mono, inherit); font-size: 0.75rem; } #nxc-member .nxc-react:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-menu:not(#nx-shield):not(#nx-shield) { position: relative; } #nxc-member .nxc-menu:not(#nx-shield):not(#nx-shield) { margin-inline-start: auto; } #nxc-member .nxc-menu > summary:not(#nx-shield):not(#nx-shield) { list-style: none; cursor: pointer; } #nxc-member .nxc-menu > summary:not(#nx-shield):not(#nx-shield)::-webkit-details-marker { display: none; } #nxc-member .nxc-react__panel:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-menu__panel:not(#nx-shield):not(#nx-shield) { position: absolute; z-index: 20; inset-block-end: calc(100% + 6px); padding: 0.375rem; border-radius: 10px; min-inline-size: 12rem; } #nxc-member .nxc-react__panel:not(#nx-shield):not(#nx-shield) { inset-inline-start: 0; } #nxc-member .nxc-menu__panel:not(#nx-shield):not(#nx-shield) { inset-inline-end: 0; display: grid; } #nxc-member .nxc-react__picker > span[role="group"]:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; gap: 0.25rem; } #nxc-member .nxc-react__picker .nx-engine-action:not(#nx-shield):not(#nx-shield) { min-block-size: 2.25rem; padding-inline: 0.625rem; border: 1px solid var(--nx-border-default); border-radius: 5px; background: var(--nx-bg-surface); color: var(--nx-text-primary); font: inherit; font-size: 0.8125rem; cursor: pointer; } #nxc-member .nxc-react__picker .nx-engine-action[aria-pressed="true"]:not(#nx-shield):not(#nx-shield) { border-color: var(--nx-text-primary); font-weight: 600; } #nxc-member .nxc-react__picker .nx-engine-meta:not(#nx-shield):not(#nx-shield) { display: block; margin-block-start: 0.375rem; font-size: 0.75rem; color: var(--nx-text-secondary); } #nxc-member .nxc-menu__item:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-menu__panel summary:not(#nx-shield):not(#nx-shield) { display: flex; align-items: center; gap: 0.5rem; inline-size: 100%; min-block-size: 2.25rem; padding-inline: 0.625rem; border: 0; border-radius: 6px; background: transparent; color: var(--nx-text-primary); font: inherit; font-size: 0.875rem; text-align: start; text-decoration: none; cursor: pointer; list-style: none; } #nxc-member .nxc-menu__item:hover:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-menu__panel summary:hover:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-elevated); } #nxc-member .nxc-post__body a[href*="/members/"]:not(#nx-shield):not(#nx-shield) { font-weight: 600; text-decoration: none; color: var(--nxc-site-a, var(--nx-text-primary)); } #nxc-member .nxc-feed-search:not(#nx-shield):not(#nx-shield) { margin-block: 0 0.75rem; } #nxc-member .nxc-feed-search input:not(#nx-shield):not(#nx-shield) { inline-size: 100%; min-block-size: 2.5rem; padding-inline: 0.875rem; border: 1px solid var(--nx-border-default); border-radius: 5px; background: var(--nx-bg-surface); color: var(--nx-text-primary); font: inherit; } #nxc-member .nxc-rail-sub:not(#nx-shield):not(#nx-shield) { margin: 0.25rem 0 0; font-size: 0.75rem; font-weight: 600; color: var(--nx-text-secondary); } @media (max-width: 899px) { #nxc-member .nxc-act__main:not(#nx-shield):not(#nx-shield) { order: 1; } #nxc-member .nxc-act__left:not(#nx-shield):not(#nx-shield) { order: 2; } #nxc-member .nxc-act__right:not(#nx-shield):not(#nx-shield) { order: 3; } } #nxc-member .nxc-reply[hidden]:not(#nx-shield):not(#nx-shield) { display: none; } #nxc-member .nxc-tag:not(#nx-shield):not(#nx-shield) { font-weight: 600; text-decoration: none; color: var(--nxc-site-a, var(--nx-text-primary)); } #nxc-member .nxc-act > *:not(#nx-shield):not(#nx-shield) { min-inline-size: 0; } #nxc-member .nxc-rail-card:not(#nx-shield):not(#nx-shield) { min-inline-size: 0; box-sizing: border-box; overflow-wrap: anywhere; } #nxc-member .nxc-join__btns .nf-ui-btn:not(#nx-shield):not(#nx-shield) { white-space: normal; inline-size: 100%; box-sizing: border-box; justify-content: center; } /* 1.4.9: a post's kind and facts; a run of posts folded into one card as a row that scrolls */ #nxc-member .nxc-article__kind:not(#nx-shield):not(#nx-shield) { display: inline-block; margin-inline-end: 0.5rem; padding: 0.0625rem 0.375rem; border-radius: 4px; background: var(--nx-bg-elevated); color: var(--nx-text-primary); } #nxc-member .nxc-article__facts:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; color: var(--nx-text-secondary); font-size: 0.8125rem; } #nxc-member .nxc-article__facts span + span:not(#nx-shield):not(#nx-shield)::before { content: "·"; margin-inline-end: 0.75rem; color: var(--nx-text-tertiary, var(--nx-text-secondary)); } #nxc-member .nxc-rail:not(#nx-shield):not(#nx-shield) { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(13rem, 15rem); gap: 0.75rem; margin: 0; padding: 0 0 0.5rem; list-style: none; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: thin; } #nxc-member .nxc-rail > li:not(#nx-shield):not(#nx-shield) { scroll-snap-align: start; min-inline-size: 0; display: grid; } #nxc-member .nxc-rail:focus-visible:not(#nx-shield):not(#nx-shield) { outline: 2px solid var(--nx-focus, currentColor); outline-offset: 2px; } #nxc-member .nxc-article--mini:not(#nx-shield):not(#nx-shield) { grid-template-columns: minmax(0, 1fr) !important; } #nxc-member .nxc-article--mini .nxc-article__text:not(#nx-shield):not(#nx-shield) { padding: 0.625rem 0.75rem; } #nxc-member .nxc-article--mini .nxc-article__title:not(#nx-shield):not(#nx-shield) { font-size: 0.9375rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #nxc-member .nxc-article--mini .nxc-article__img:not(#nx-shield):not(#nx-shield) { aspect-ratio: 16 / 9; } /* nx-controls:begin */ .nx-switch:not(#nx-shield):not(#nx-shield), .nx-check:not(#nx-shield):not(#nx-shield), .nx-radio:not(#nx-shield):not(#nx-shield) { --_ink: var(--nx-ctl-ink, var(--nx-text-primary, CanvasText)); --_canvas: var(--nx-ctl-canvas, var(--nx-bg-canvas, Canvas)); --_line: var(--nx-ctl-line, var(--nx-border-hairline-strong, GrayText)); --_hover: var(--nx-ctl-hover, var(--nx-bg-hover, transparent)); --_focus: var(--nx-ctl-focus, var(--nx-focus, Highlight)); --_crit: var(--nx-ctl-critical, var(--nx-critical, CanvasText)); --_r: var(--nx-ctl-radius, var(--nx-radius-sm, 5px)); --_rs: var(--nx-ctl-radius-xs, var(--nx-radius-xs, 4px)); --_fast: var(--nx-ctl-fast, var(--nx-motion-fast, 120ms)); --_ease: var(--nx-ctl-ease, cubic-bezier(.2, 0, 0, 1)); } /* ---- checkbox: 18px box, 4px corners, a drawn tick; indeterminate is a bar. */ input[type="checkbox"].nx-check:not(#nx-shield):not(#nx-shield), input[type="radio"].nx-radio:not(#nx-shield):not(#nx-shield) { appearance: none; -webkit-appearance: none; position: relative; display: inline-block; flex: none; box-sizing: border-box; inline-size: 18px; block-size: 18px; min-inline-size: 18px; margin: 0; padding: 0; border: 1px solid var(--_line); border-radius: var(--_rs); background: transparent; box-shadow: none; cursor: pointer; vertical-align: middle; transition: background-color var(--_fast) var(--_ease), border-color var(--_fast) var(--_ease); } input[type="checkbox"].nx-check:not(#nx-shield):not(#nx-shield)::before { content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 5px; inline-size: 5px; block-size: 9px; margin: 0; border: solid var(--_canvas); border-width: 0 2px 2px 0; background: none; transform: rotate(45deg) scale(0); transition: transform var(--_fast) var(--_ease); filter: none; } input[type="checkbox"].nx-check:is(:checked, :indeterminate):not(#nx-shield):not(#nx-shield) { background: var(--_ink); border-color: var(--_ink); } input[type="checkbox"].nx-check:checked:not(#nx-shield):not(#nx-shield)::before { content: ""; transform: rotate(45deg) scale(1); } input[type="checkbox"].nx-check:indeterminate:not(#nx-shield):not(#nx-shield)::before { content: ""; inset-block-start: 7px; inset-inline-start: 3px; inline-size: 10px; block-size: 0; border-width: 2px 0 0; transform: none; } /* radio: the one circle in the set (a dot, as in the kit) */ input[type="radio"].nx-radio:not(#nx-shield):not(#nx-shield) { border-radius: 50%; } input[type="radio"].nx-radio:not(#nx-shield):not(#nx-shield)::before { content: ""; position: absolute; inset: 3px; margin: 0; inline-size: auto; block-size: auto; border-radius: 50%; background: var(--_canvas); transform: scale(0); transition: transform var(--_fast) var(--_ease); line-height: 0; } input[type="radio"].nx-radio:checked:not(#nx-shield):not(#nx-shield) { background: var(--_ink); border-color: var(--_ink); } input[type="radio"].nx-radio:checked:not(#nx-shield):not(#nx-shield)::before { content: ""; transform: scale(1); } input.nx-check:hover:not(:disabled):not(#nx-shield):not(#nx-shield), input.nx-radio:hover:not(:disabled):not(#nx-shield):not(#nx-shield) { border-color: var(--_ink); } input.nx-check:focus-visible:not(#nx-shield):not(#nx-shield), input.nx-radio:focus-visible:not(#nx-shield):not(#nx-shield) { outline: 2px solid var(--_focus); outline-offset: 2px; } input.nx-check:disabled:not(#nx-shield):not(#nx-shield), input.nx-radio:disabled:not(#nx-shield):not(#nx-shield) { opacity: .45; cursor: not-allowed; } input.nx-check[aria-invalid="true"]:not(#nx-shield):not(#nx-shield), input.nx-radio[aria-invalid="true"]:not(#nx-shield):not(#nx-shield) { border-color: var(--_crit); } /* the labelled row: box, then text; the whole row is the target */ .nx-ctl:not(#nx-shield):not(#nx-shield) { display: flex; align-items: flex-start; gap: 10px; min-block-size: 24px; color: var(--nx-ctl-ink, var(--nx-text-primary, CanvasText)); font: inherit; line-height: 1.4; cursor: pointer; } .nx-ctl > :is(.nx-check, .nx-radio):not(#nx-shield):not(#nx-shield) { margin-block-start: 1px; } .nx-ctl__hint:not(#nx-shield):not(#nx-shield) { display: block; color: var(--nx-ctl-muted, var(--nx-text-muted, GrayText)); font-size: .8125em; } /* ---- switch: an input[type=checkbox][role=switch] or a button[role=switch][aria-checked]. Off = line track and canvas thumb; on = ink track and canvas-coloured thumb; mixed = thumb centred over a half-ink track. */ :is(input, button).nx-switch:not(#nx-shield):not(#nx-shield) { appearance: none; -webkit-appearance: none; position: relative; display: inline-block; flex: none; box-sizing: border-box; inline-size: 40px; min-inline-size: 40px; block-size: 24px; margin: 0; padding: 0; border: 1px solid var(--_line); border-radius: var(--_r); background: var(--_line); color: inherit; box-shadow: none; cursor: pointer; vertical-align: middle; transition: background-color var(--_fast) var(--_ease), border-color var(--_fast) var(--_ease); } :is(input, button).nx-switch:not(#nx-shield):not(#nx-shield)::before { content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; inline-size: 18px; block-size: 18px; margin: 0; border: 0; border-radius: 3px; background: var(--_canvas); box-shadow: 0 1px 2px color-mix(in srgb, var(--_ink) 28%, transparent); transform: none; filter: none; transition: inset-inline-start var(--_fast) var(--_ease), background-color var(--_fast) var(--_ease); } /* a 44px-tall target around the 24px track (WCAG 2.5.8) without growing the layout */ :is(input, button).nx-switch:not(#nx-shield):not(#nx-shield)::after { content: ""; position: absolute; inset: -10px -4px; } :is(input, button).nx-switch:is(:checked, [aria-checked="true"]):not(#nx-shield):not(#nx-shield) { background: var(--_ink); border-color: var(--_ink); } :is(input, button).nx-switch:is(:checked, [aria-checked="true"]):not(#nx-shield):not(#nx-shield)::before { content: ""; inset-inline-start: calc(100% - 20px); background: var(--_canvas); transform: none; } :is(input, button).nx-switch:is([aria-checked="mixed"], :indeterminate):not(#nx-shield):not(#nx-shield) { background: color-mix(in srgb, var(--_ink) 45%, var(--_line)); border-color: color-mix(in srgb, var(--_ink) 45%, var(--_line)); } :is(input, button).nx-switch:is([aria-checked="mixed"], :indeterminate):not(#nx-shield):not(#nx-shield)::before { inset-inline-start: calc(50% - 10px); } :is(input, button).nx-switch:hover:not(:disabled):not(#nx-shield):not(#nx-shield) { border-color: var(--_ink); } :is(input, button).nx-switch:focus-visible:not(#nx-shield):not(#nx-shield) { outline: 2px solid var(--_focus); outline-offset: 2px; } :is(input, button).nx-switch:is(:disabled, [aria-disabled="true"]):not(#nx-shield):not(#nx-shield) { opacity: .45; cursor: not-allowed; } :is(input, button).nx-switch[aria-invalid="true"]:not(#nx-shield):not(#nx-shield) { border-color: var(--_crit); } /* compact: 34x20 */ :is(input, button).nx-switch.nx-switch--sm:not(#nx-shield):not(#nx-shield) { inline-size: 34px; min-inline-size: 34px; block-size: 20px; } :is(input, button).nx-switch.nx-switch--sm:not(#nx-shield):not(#nx-shield)::before { inline-size: 14px; block-size: 14px; } :is(input, button).nx-switch.nx-switch--sm:is(:checked, [aria-checked="true"]):not(#nx-shield):not(#nx-shield)::before { inset-inline-start: calc(100% - 16px); } :is(input, button).nx-switch.nx-switch--sm:is([aria-checked="mixed"], :indeterminate):not(#nx-shield):not(#nx-shield)::before { inset-inline-start: calc(50% - 8px); } @media (prefers-reduced-motion: reduce) { .nx-switch:not(#nx-shield):not(#nx-shield), .nx-switch:not(#nx-shield):not(#nx-shield)::before, .nx-check:not(#nx-shield):not(#nx-shield), .nx-check:not(#nx-shield):not(#nx-shield)::before, .nx-radio:not(#nx-shield):not(#nx-shield), .nx-radio:not(#nx-shield):not(#nx-shield)::before { transition: none; } } @media (forced-colors: active) { :is(input, button).nx-switch:not(#nx-shield):not(#nx-shield) { border-color: CanvasText; } :is(input, button).nx-switch:is(:checked, [aria-checked="true"]):not(#nx-shield):not(#nx-shield) { background: Highlight; border-color: Highlight; } :is(input, button).nx-switch:not(#nx-shield):not(#nx-shield)::before { background: ButtonText; } input.nx-check:checked:not(#nx-shield):not(#nx-shield), input.nx-radio:checked:not(#nx-shield):not(#nx-shield) { background: Highlight; border-color: Highlight; } } /* nx-controls:end */ /* nx-controls-extra:begin */ /* segmented control, slider and button; a consumer that uses them carries the block above as well */ .nx-seg:not(#nx-shield):not(#nx-shield), .nx-range:not(#nx-shield):not(#nx-shield), .nx-btn:not(#nx-shield):not(#nx-shield) { --_ink: var(--nx-ctl-ink, var(--nx-text-primary, CanvasText)); --_canvas: var(--nx-ctl-canvas, var(--nx-bg-canvas, Canvas)); --_line: var(--nx-ctl-line, var(--nx-border-hairline-strong, GrayText)); --_hover: var(--nx-ctl-hover, var(--nx-bg-hover, transparent)); --_focus: var(--nx-ctl-focus, var(--nx-focus, Highlight)); --_crit: var(--nx-ctl-critical, var(--nx-critical, CanvasText)); --_r: var(--nx-ctl-radius, var(--nx-radius-sm, 5px)); --_rs: var(--nx-ctl-radius-xs, var(--nx-radius-xs, 4px)); --_fast: var(--nx-ctl-fast, var(--nx-motion-fast, 120ms)); --_ease: var(--nx-ctl-ease, cubic-bezier(.2, 0, 0, 1)); } /* ---- segmented control: 2 to 4 mutually exclusive choices; 5px frame, hairline dividers, active segment inverted. Children are buttons (aria-pressed), links (aria-current) or tabs (aria-selected). */ .nx-seg:not(#nx-shield):not(#nx-shield) { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; box-sizing: border-box; border: 1px solid var(--_line); border-radius: var(--_r); overflow: hidden; background: transparent; } .nx-seg--fill:not(#nx-shield):not(#nx-shield) { display: grid; inline-size: 100%; } .nx-seg .nx-seg__btn:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; min-block-size: 36px; min-inline-size: 0; margin: 0; padding: 4px 12px; border: 0; border-inline-start: 1px solid var(--_line); border-radius: 0; background: transparent; color: var(--_ink); font-family: var(--nx-ctl-font, inherit); font-size: 13px; font-weight: 500; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; overflow-wrap: anywhere; transition: background-color var(--_fast) var(--_ease), color var(--_fast) var(--_ease); } .nx-seg .nx-seg__btn:first-child:not(#nx-shield):not(#nx-shield) { border-inline-start: 0; } .nx-seg .nx-seg__btn:hover:not(#nx-shield):not(#nx-shield) { background: var(--_hover); color: var(--_ink); } .nx-seg .nx-seg__btn:is([aria-pressed="true"], [aria-current]:not([aria-current="false"]), [aria-selected="true"], .is-active):not(#nx-shield):not(#nx-shield) { background: var(--_ink); color: var(--_canvas); } .nx-seg .nx-seg__btn:focus-visible:not(#nx-shield):not(#nx-shield) { outline: 2px solid var(--_focus); outline-offset: -3px; } .nx-seg .nx-seg__btn:is(:disabled, [aria-disabled="true"]):not(#nx-shield):not(#nx-shield) { opacity: .45; cursor: not-allowed; } .nx-seg.nx-seg--lg .nx-seg__btn:not(#nx-shield):not(#nx-shield) { min-block-size: 44px; } /* ---- slider: 4px track, 14x24 square thumb (3px corners), ink thumb. */ input[type="range"].nx-range:not(#nx-shield):not(#nx-shield) { -webkit-appearance: none; appearance: none; flex: 1; inline-size: 100%; min-inline-size: 0; block-size: 44px; margin: 0; background: none; cursor: pointer; } input[type="range"].nx-range:not(#nx-shield):not(#nx-shield)::-webkit-slider-runnable-track { block-size: 4px; border-radius: 2px; background: var(--_line); } input[type="range"].nx-range:not(#nx-shield):not(#nx-shield)::-moz-range-track { block-size: 4px; border-radius: 2px; background: var(--_line); } input[type="range"].nx-range:not(#nx-shield):not(#nx-shield)::-webkit-slider-thumb { -webkit-appearance: none; inline-size: 14px; block-size: 24px; margin-block-start: -10px; border: 0; border-radius: 3px; background: var(--_ink); box-shadow: 0 1px 2px color-mix(in srgb, var(--_ink) 28%, transparent); } input[type="range"].nx-range:not(#nx-shield):not(#nx-shield)::-moz-range-thumb { inline-size: 14px; block-size: 24px; border: 0; border-radius: 3px; background: var(--_ink); box-shadow: 0 1px 2px color-mix(in srgb, var(--_ink) 28%, transparent); } input[type="range"].nx-range:focus-visible:not(#nx-shield):not(#nx-shield) { outline: 2px solid var(--_focus); outline-offset: 2px; } input[type="range"].nx-range:disabled:not(#nx-shield):not(#nx-shield) { opacity: .45; cursor: not-allowed; } /* ---- button: secondary (hairline) by default; --primary inverted; --ghost unframed; --danger critical. */ .nx-btn:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; min-block-size: 36px; min-inline-size: 0; margin: 0; padding: 6px 14px; border: 1px solid var(--_line); border-radius: var(--_r); background: transparent; color: var(--_ink); font-family: var(--nx-ctl-font, inherit); font-size: 14px; font-weight: 500; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--_fast) var(--_ease), border-color var(--_fast) var(--_ease); } .nx-btn:hover:not(#nx-shield):not(#nx-shield) { background: var(--_hover); border-color: var(--_ink); color: var(--_ink); } .nx-btn.nx-btn--primary:not(#nx-shield):not(#nx-shield) { background: var(--_ink); border-color: var(--_ink); color: var(--_canvas); } .nx-btn.nx-btn--primary:hover:not(#nx-shield):not(#nx-shield) { background: color-mix(in srgb, var(--_ink) 86%, var(--_canvas)); border-color: color-mix(in srgb, var(--_ink) 86%, var(--_canvas)); color: var(--_canvas); } .nx-btn.nx-btn--ghost:not(#nx-shield):not(#nx-shield) { border-color: transparent; } .nx-btn.nx-btn--danger:not(#nx-shield):not(#nx-shield) { border-color: var(--_crit); color: var(--_crit); } .nx-btn.nx-btn--danger:hover:not(#nx-shield):not(#nx-shield) { background: var(--_crit); border-color: var(--_crit); color: var(--_canvas); } .nx-btn.nx-btn--lg:not(#nx-shield):not(#nx-shield) { min-block-size: 44px; } .nx-btn:focus-visible:not(#nx-shield):not(#nx-shield) { outline: 2px solid var(--_focus); outline-offset: 2px; } .nx-btn:is(:disabled, [aria-disabled="true"]):not(#nx-shield):not(#nx-shield) { opacity: .45; cursor: not-allowed; } @media (prefers-reduced-motion: reduce) { .nx-seg .nx-seg__btn:not(#nx-shield):not(#nx-shield), .nx-btn:not(#nx-shield):not(#nx-shield) { transition: none; } } @media (forced-colors: active) { .nx-seg .nx-seg__btn:is([aria-pressed="true"], [aria-current]:not([aria-current="false"]), [aria-selected="true"], .is-active):not(#nx-shield):not(#nx-shield) { outline: 2px solid Highlight; outline-offset: -3px; } } /* touch: the element itself is the 52 by 44 target (panels whose every control is 44px); the 40 by 24 track is drawn inside it by ::before and the thumb by ::after, so the look is the same */ :is(input, button).nx-switch.nx-switch--touch:not(#nx-shield):not(#nx-shield) { inline-size: 52px; min-inline-size: 52px; block-size: 44px; border: 0; background: none; } :is(input, button).nx-switch.nx-switch--touch:not(#nx-shield):not(#nx-shield)::before { inset-block-start: 10px; inset-inline-start: 6px; inline-size: 40px; block-size: 24px; border: 1px solid var(--_line); border-radius: var(--_r); background: var(--_line); box-shadow: none; transition: background-color var(--_fast) var(--_ease), border-color var(--_fast) var(--_ease); } :is(input, button).nx-switch.nx-switch--touch:not(#nx-shield):not(#nx-shield)::after { inset: 13px auto auto 9px; inset-inline-start: 9px; inline-size: 18px; block-size: 18px; border-radius: 3px; background: var(--_canvas); box-shadow: 0 1px 2px color-mix(in srgb, var(--_ink) 28%, transparent); transition: inset-inline-start var(--_fast) var(--_ease), background-color var(--_fast) var(--_ease); } :is(input, button).nx-switch.nx-switch--touch:is(:checked, [aria-checked="true"]):not(#nx-shield):not(#nx-shield) { background: none; } :is(input, button).nx-switch.nx-switch--touch:is(:checked, [aria-checked="true"]):not(#nx-shield):not(#nx-shield)::before { inset-inline-start: 6px; background: var(--_ink); border-color: var(--_ink); } :is(input, button).nx-switch.nx-switch--touch:is(:checked, [aria-checked="true"]):not(#nx-shield):not(#nx-shield)::after { inset-inline-start: 25px; } :is(input, button).nx-switch.nx-switch--touch:is([aria-checked="mixed"], :indeterminate):not(#nx-shield):not(#nx-shield) { background: none; } :is(input, button).nx-switch.nx-switch--touch:is([aria-checked="mixed"], :indeterminate):not(#nx-shield):not(#nx-shield)::before { inset-inline-start: 6px; background: color-mix(in srgb, var(--_ink) 45%, var(--_line)); border-color: color-mix(in srgb, var(--_ink) 45%, var(--_line)); } :is(input, button).nx-switch.nx-switch--touch:is([aria-checked="mixed"], :indeterminate):not(#nx-shield):not(#nx-shield)::after { inset-inline-start: 19px; } :is(input, button).nx-switch.nx-switch--touch:hover:not(:disabled):not(#nx-shield):not(#nx-shield) { border-color: transparent; } :is(input, button).nx-switch.nx-switch--touch:hover:not(:disabled):not(#nx-shield):not(#nx-shield)::before { border-color: var(--_ink); } @media (forced-colors: active) { :is(input, button).nx-switch.nx-switch--touch:not(#nx-shield):not(#nx-shield)::before { background: Canvas; border-color: CanvasText; } :is(input, button).nx-switch.nx-switch--touch:not(#nx-shield):not(#nx-shield)::after { background: ButtonText; } :is(input, button).nx-switch.nx-switch--touch:is(:checked, [aria-checked="true"]):not(#nx-shield):not(#nx-shield)::before { background: Highlight; border-color: Highlight; } } /* nx-controls-extra:end */