@charset "UTF-8"; /***** Normalize.css *****/ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ html { line-height: 1.15; -webkit-text-size-adjust: 100%; } body { margin: 0; } main { display: block; } h1 { font-size: 2em; margin: 0.67em 0; } hr { box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace, monospace; font-size: 1em; } a { background-color: transparent; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b, strong { font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border-style: none; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { vertical-align: baseline; } textarea { overflow: auto; } [type=checkbox], [type=radio] { box-sizing: border-box; padding: 0; } [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } [type=search] { -webkit-appearance: textfield; outline-offset: -2px; } [type=search]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details { display: block; } summary { display: list-item; } template { display: none; } [hidden] { display: none; } /***** RSI display font — Univia Pro (self-hosted; woff from legacy assets) *****/ /* @font-face for univia-pro is declared in document_head.hbs, where {{asset}} (Curlybars) resolves the real Zendesk asset URL. A relative url() in this compiled stylesheet cannot reach theme assets — Zendesk serves them at a fingerprinted path, not at the theme-root path a relative url() would target. */ /* Body/label font (Bai Jamjuree) is loaded via document_head.hbs from the RSI CDN. */ /* * Orion design tokens — VENDORED SNAPSHOT. Do not edit by hand. * Source: orion repo @ 45eb8bd5 (2.84.0-1-g45eb8bd5), foundation 2.84.0 * Generated: 2026-06-09 from design-system/foundation/src/styles * Included (231 --orion-* vars): color, color-semantic, layout (spacing/width), * border (radius), shadow, z-index, + star-citizen theme palette. * Excluded: typography (emits real font rules), fonts/grid/icons/shapes/scrollbar/ * motion/blur/duration/timing/easing. * NOTE: all blocks hoisted to :root so native Zendesk markup reads tokens globally * WITHOUT data-orion-skin on (which would pull in plt-client's * attribute-scoped reset/typography and break the page). star-citizen palette * is ordered last so it wins over the default skin palette. * Regenerate per docs/plans/task-2.1a-generate-orion-tokens.md */ /** deprecated **/ :root { --orion-color-primary-1-rgb: 10,29,41; --orion-color-primary-2-rgb: 15,44,62; --orion-color-primary-3-rgb: 20,58,82; --orion-color-primary-4-rgb: 25,73,103; --orion-color-primary-5-rgb: 30,87,123; --orion-color-primary-6-rgb: 40,117,164; --orion-color-primary-7-rgb: 111,178,220; --orion-color-primary-8-rgb: 173,211,235; --orion-color-neutral-1-rgb: 0,0,0; --orion-color-neutral-2-rgb: 88,103,116; --orion-color-neutral-3-rgb: 168,179,189; --orion-color-neutral-4-rgb: 255,255,255; --orion-color-accent-1-rgb: 84,173,247; --orion-color-accent-2-rgb: 109,185,248; --orion-color-accent-3-rgb: 158,208,250; --orion-color-accent-4-rgb: var(--orion-color-neutral-4-rgb); --orion-color-green-1-rgb: 51,255,231; --orion-color-green-2-rgb: 102,255,237; --orion-color-green-3-rgb: 153,255,243; --orion-color-green-4-rgb: var(--orion-color-neutral-4-rgb); --orion-color-orange-1-rgb: 233,148,73; --orion-color-orange-2-rgb: 238,175,119; --orion-color-orange-3-rgb: 244,201,164; --orion-color-orange-4-rgb: var(--orion-color-neutral-4-rgb); --orion-color-red-1-rgb: 255,128,128; --orion-color-red-2-rgb: 255,153,153; --orion-color-red-3-rgb: 255,179,179; --orion-color-red-4-rgb: var(--orion-color-neutral-4-rgb); --orion-color-purple-1-rgb: 172,153,255; --orion-color-purple-2-rgb: 193,178,255; --orion-color-purple-3-rgb: 213,204,255; --orion-color-purple-4-rgb: var(--orion-color-neutral-4-rgb); --orion-color-staff-1-rgb: 243,208,37; --orion-color-staff-2-rgb: 247,224,110; --orion-color-staff-3-rgb: 250,235,158; --orion-color-staff-4-rgb: var(--orion-color-neutral-4-rgb); --orion-color-transaction-1-rgb: 215,112,15; --orion-color-transaction-2-rgb: 240,137,40; --orion-color-transaction-3-rgb: 250,215,183; --orion-color-transaction-4-rgb: var(--orion-color-neutral-4-rgb); --orion-color-live-1-rgb: 153,51,51; --orion-color-live-2-rgb: 191,64,64; --orion-color-live-3-rgb: 217,140,140; --orion-color-live-4-rgb: var(--orion-color-neutral-4-rgb); --orion-color-premium-1-rgb: 102,70,26; --orion-color-premium-2-rgb: 122,85,31; --orion-color-premium-3-rgb: 143,98,36; --orion-color-premium-4-rgb: 184,126,46; --orion-color-premium-5-rgb: 209,152,71; --orion-color-premium-6-rgb: 219,175,112; --orion-color-premium-7-rgb: var(--orion-color-neutral-4-rgb); --orion-color-contrast-primary-rgb: var(--orion-color-neutral-4-rgb); --orion-color-contrast-neutral-rgb: var(--orion-color-neutral-1-rgb); --orion-color-contrast-accent-rgb: var(--orion-color-neutral-1-rgb); --orion-color-contrast-green-rgb: var(--orion-color-neutral-1-rgb); --orion-color-contrast-orange-rgb: var(--orion-color-neutral-1-rgb); --orion-color-contrast-red-rgb: var(--orion-color-neutral-1-rgb); --orion-color-contrast-purple-rgb: var(--orion-color-neutral-1-rgb); --orion-color-contrast-staff-rgb: var(--orion-color-neutral-1-rgb); --orion-color-contrast-transaction-rgb: var(--orion-color-neutral-1-rgb); --orion-color-contrast-live-rgb: var(--orion-color-neutral-4-rgb); --orion-color-contrast-premium-rgb: var(--orion-color-neutral-1-rgb); --orion-color-darkest-rgb: 0,0,0; --orion-color-lightest-rgb: 255,255,255; --orion-color-primary-1: rgb(var(--orion-color-primary-1-rgb)); --orion-color-primary-2: rgb(var(--orion-color-primary-2-rgb)); --orion-color-primary-3: rgb(var(--orion-color-primary-3-rgb)); --orion-color-primary-4: rgb(var(--orion-color-primary-4-rgb)); --orion-color-primary-5: rgb(var(--orion-color-primary-5-rgb)); --orion-color-primary-6: rgb(var(--orion-color-primary-6-rgb)); --orion-color-primary-7: rgb(var(--orion-color-primary-7-rgb)); --orion-color-primary-8: rgb(var(--orion-color-primary-8-rgb)); --orion-color-neutral-1: rgb(var(--orion-color-neutral-1-rgb)); --orion-color-neutral-2: rgb(var(--orion-color-neutral-2-rgb)); --orion-color-neutral-3: rgb(var(--orion-color-neutral-3-rgb)); --orion-color-neutral-4: rgb(var(--orion-color-neutral-4-rgb)); --orion-color-accent-1: rgb(var(--orion-color-accent-1-rgb)); --orion-color-accent-2: rgb(var(--orion-color-accent-2-rgb)); --orion-color-accent-3: rgb(var(--orion-color-accent-3-rgb)); --orion-color-accent-4: rgb(var(--orion-color-accent-4-rgb)); --orion-color-green-1: rgb(var(--orion-color-green-1-rgb)); --orion-color-green-2: rgb(var(--orion-color-green-2-rgb)); --orion-color-green-3: rgb(var(--orion-color-green-3-rgb)); --orion-color-green-4: rgb(var(--orion-color-green-4-rgb)); --orion-color-orange-1: rgb(var(--orion-color-orange-1-rgb)); --orion-color-orange-2: rgb(var(--orion-color-orange-2-rgb)); --orion-color-orange-3: rgb(var(--orion-color-orange-3-rgb)); --orion-color-orange-4: rgb(var(--orion-color-orange-4-rgb)); --orion-color-red-1: rgb(var(--orion-color-red-1-rgb)); --orion-color-red-2: rgb(var(--orion-color-red-2-rgb)); --orion-color-red-3: rgb(var(--orion-color-red-3-rgb)); --orion-color-red-4: rgb(var(--orion-color-red-4-rgb)); --orion-color-purple-1: rgb(var(--orion-color-purple-1-rgb)); --orion-color-purple-2: rgb(var(--orion-color-purple-2-rgb)); --orion-color-purple-3: rgb(var(--orion-color-purple-3-rgb)); --orion-color-purple-4: rgb(var(--orion-color-purple-4-rgb)); --orion-color-staff-1: rgb(var(--orion-color-staff-1-rgb)); --orion-color-staff-2: rgb(var(--orion-color-staff-2-rgb)); --orion-color-staff-3: rgb(var(--orion-color-staff-3-rgb)); --orion-color-staff-4: rgb(var(--orion-color-staff-4-rgb)); --orion-color-transaction-1: rgb(var(--orion-color-transaction-1-rgb)); --orion-color-transaction-2: rgb(var(--orion-color-transaction-2-rgb)); --orion-color-transaction-3: rgb(var(--orion-color-transaction-3-rgb)); --orion-color-transaction-4: rgb(var(--orion-color-transaction-4-rgb)); --orion-color-live-1: rgb(var(--orion-color-live-1-rgb)); --orion-color-live-2: rgb(var(--orion-color-live-2-rgb)); --orion-color-live-3: rgb(var(--orion-color-live-3-rgb)); --orion-color-live-4: rgb(var(--orion-color-live-4-rgb)); --orion-color-premium-1: rgb(var(--orion-color-premium-1-rgb)); --orion-color-premium-2: rgb(var(--orion-color-premium-2-rgb)); --orion-color-premium-3: rgb(var(--orion-color-premium-3-rgb)); --orion-color-premium-4: rgb(var(--orion-color-premium-4-rgb)); --orion-color-premium-5: rgb(var(--orion-color-premium-5-rgb)); --orion-color-premium-6: rgb(var(--orion-color-premium-6-rgb)); --orion-color-premium-7: rgb(var(--orion-color-neutral-4-rgb)); --orion-color-contrast-primary: rgb(var(--orion-color-contrast-primary-rgb)); --orion-color-contrast-neutral: rgb(var(--orion-color-contrast-neutral-rgb)); --orion-color-contrast-accent: rgb(var(--orion-color-contrast-accent-rgb)); --orion-color-contrast-green: rgb(var(--orion-color-contrast-green-rgb)); --orion-color-contrast-orange: rgb(var(--orion-color-contrast-orange-rgb)); --orion-color-contrast-red: rgb(var(--orion-color-contrast-red-rgb)); --orion-color-contrast-purple: rgb(var(--orion-color-contrast-purple-rgb)); --orion-color-contrast-staff: rgb(var(--orion-color-contrast-staff-rgb)); --orion-color-contrast-transaction: rgb(var(--orion-color-contrast-transaction-rgb)); --orion-color-contrast-live: rgb(var(--orion-color-contrast-live-rgb)); --orion-color-contrast-premium: rgb(var(--orion-color-contrast-premium-rgb)); --orion-color-darkest: rgb(var(--orion-color-darkest-rgb)); --orion-color-lightest: rgb(var(--orion-color-lightest-rgb)); } :root { --orion-color-primary-1-rgb: 10,29,41; --orion-color-primary-2-rgb: 15,44,62; --orion-color-primary-3-rgb: 20,58,82; --orion-color-primary-4-rgb: 25,73,103; --orion-color-primary-5-rgb: 30,87,123; --orion-color-primary-6-rgb: 40,117,164; --orion-color-primary-7-rgb: 111,178,220; --orion-color-primary-8-rgb: 173,211,235; --orion-color-neutral-1-rgb: 0,0,0; --orion-color-neutral-2-rgb: 88,103,116; --orion-color-neutral-3-rgb: 168,179,189; --orion-color-neutral-4-rgb: 255,255,255; --orion-color-accent-1-rgb: 84,173,247; --orion-color-accent-2-rgb: 109,185,248; --orion-color-accent-3-rgb: 158,208,250; --orion-color-accent-4-rgb: var(--orion-color-neutral-4-rgb); --orion-color-green-1-rgb: 51,255,231; --orion-color-green-2-rgb: 102,255,237; --orion-color-green-3-rgb: 153,255,243; --orion-color-green-4-rgb: var(--orion-color-neutral-4-rgb); --orion-color-orange-1-rgb: 233,148,73; --orion-color-orange-2-rgb: 238,175,119; --orion-color-orange-3-rgb: 244,201,164; --orion-color-orange-4-rgb: var(--orion-color-neutral-4-rgb); --orion-color-red-1-rgb: 255,128,128; --orion-color-red-2-rgb: 255,153,153; --orion-color-red-3-rgb: 255,179,179; --orion-color-red-4-rgb: var(--orion-color-neutral-4-rgb); --orion-color-purple-1-rgb: 172,153,255; --orion-color-purple-2-rgb: 193,178,255; --orion-color-purple-3-rgb: 213,204,255; --orion-color-purple-4-rgb: var(--orion-color-neutral-4-rgb); --orion-color-staff-1-rgb: 243,208,37; --orion-color-staff-2-rgb: 247,224,110; --orion-color-staff-3-rgb: 250,235,158; --orion-color-staff-4-rgb: var(--orion-color-neutral-4-rgb); --orion-color-transaction-1-rgb: 215,112,15; --orion-color-transaction-2-rgb: 240,137,40; --orion-color-transaction-3-rgb: 250,215,183; --orion-color-transaction-4-rgb: var(--orion-color-neutral-4-rgb); --orion-color-live-1-rgb: 153,51,51; --orion-color-live-2-rgb: 191,64,64; --orion-color-live-3-rgb: 217,140,140; --orion-color-live-4-rgb: var(--orion-color-neutral-4-rgb); --orion-color-premium-1-rgb: 102,70,26; --orion-color-premium-2-rgb: 122,85,31; --orion-color-premium-3-rgb: 143,98,36; --orion-color-premium-4-rgb: 184,126,46; --orion-color-premium-5-rgb: 209,152,71; --orion-color-premium-6-rgb: 219,175,112; --orion-color-premium-7-rgb: var(--orion-color-neutral-4-rgb); --orion-color-contrast-primary-rgb: var(--orion-color-neutral-4-rgb); --orion-color-contrast-neutral-rgb: var(--orion-color-neutral-1-rgb); --orion-color-contrast-accent-rgb: var(--orion-color-neutral-1-rgb); --orion-color-contrast-green-rgb: var(--orion-color-neutral-1-rgb); --orion-color-contrast-orange-rgb: var(--orion-color-neutral-1-rgb); --orion-color-contrast-red-rgb: var(--orion-color-neutral-1-rgb); --orion-color-contrast-purple-rgb: var(--orion-color-neutral-1-rgb); --orion-color-contrast-staff-rgb: var(--orion-color-neutral-1-rgb); --orion-color-contrast-transaction-rgb: var(--orion-color-neutral-1-rgb); --orion-color-contrast-live-rgb: var(--orion-color-neutral-4-rgb); --orion-color-contrast-premium-rgb: var(--orion-color-neutral-1-rgb); --orion-color-darkest-rgb: 0,0,0; --orion-color-lightest-rgb: 255,255,255; --orion-color-primary-1: rgb(var(--orion-color-primary-1-rgb)); --orion-color-primary-2: rgb(var(--orion-color-primary-2-rgb)); --orion-color-primary-3: rgb(var(--orion-color-primary-3-rgb)); --orion-color-primary-4: rgb(var(--orion-color-primary-4-rgb)); --orion-color-primary-5: rgb(var(--orion-color-primary-5-rgb)); --orion-color-primary-6: rgb(var(--orion-color-primary-6-rgb)); --orion-color-primary-7: rgb(var(--orion-color-primary-7-rgb)); --orion-color-primary-8: rgb(var(--orion-color-primary-8-rgb)); --orion-color-neutral-1: rgb(var(--orion-color-neutral-1-rgb)); --orion-color-neutral-2: rgb(var(--orion-color-neutral-2-rgb)); --orion-color-neutral-3: rgb(var(--orion-color-neutral-3-rgb)); --orion-color-neutral-4: rgb(var(--orion-color-neutral-4-rgb)); --orion-color-accent-1: rgb(var(--orion-color-accent-1-rgb)); --orion-color-accent-2: rgb(var(--orion-color-accent-2-rgb)); --orion-color-accent-3: rgb(var(--orion-color-accent-3-rgb)); --orion-color-accent-4: rgb(var(--orion-color-accent-4-rgb)); --orion-color-green-1: rgb(var(--orion-color-green-1-rgb)); --orion-color-green-2: rgb(var(--orion-color-green-2-rgb)); --orion-color-green-3: rgb(var(--orion-color-green-3-rgb)); --orion-color-green-4: rgb(var(--orion-color-green-4-rgb)); --orion-color-orange-1: rgb(var(--orion-color-orange-1-rgb)); --orion-color-orange-2: rgb(var(--orion-color-orange-2-rgb)); --orion-color-orange-3: rgb(var(--orion-color-orange-3-rgb)); --orion-color-orange-4: rgb(var(--orion-color-orange-4-rgb)); --orion-color-red-1: rgb(var(--orion-color-red-1-rgb)); --orion-color-red-2: rgb(var(--orion-color-red-2-rgb)); --orion-color-red-3: rgb(var(--orion-color-red-3-rgb)); --orion-color-red-4: rgb(var(--orion-color-red-4-rgb)); --orion-color-purple-1: rgb(var(--orion-color-purple-1-rgb)); --orion-color-purple-2: rgb(var(--orion-color-purple-2-rgb)); --orion-color-purple-3: rgb(var(--orion-color-purple-3-rgb)); --orion-color-purple-4: rgb(var(--orion-color-purple-4-rgb)); --orion-color-staff-1: rgb(var(--orion-color-staff-1-rgb)); --orion-color-staff-2: rgb(var(--orion-color-staff-2-rgb)); --orion-color-staff-3: rgb(var(--orion-color-staff-3-rgb)); --orion-color-staff-4: rgb(var(--orion-color-staff-4-rgb)); --orion-color-transaction-1: rgb(var(--orion-color-transaction-1-rgb)); --orion-color-transaction-2: rgb(var(--orion-color-transaction-2-rgb)); --orion-color-transaction-3: rgb(var(--orion-color-transaction-3-rgb)); --orion-color-transaction-4: rgb(var(--orion-color-transaction-4-rgb)); --orion-color-live-1: rgb(var(--orion-color-live-1-rgb)); --orion-color-live-2: rgb(var(--orion-color-live-2-rgb)); --orion-color-live-3: rgb(var(--orion-color-live-3-rgb)); --orion-color-live-4: rgb(var(--orion-color-live-4-rgb)); --orion-color-premium-1: rgb(var(--orion-color-premium-1-rgb)); --orion-color-premium-2: rgb(var(--orion-color-premium-2-rgb)); --orion-color-premium-3: rgb(var(--orion-color-premium-3-rgb)); --orion-color-premium-4: rgb(var(--orion-color-premium-4-rgb)); --orion-color-premium-5: rgb(var(--orion-color-premium-5-rgb)); --orion-color-premium-6: rgb(var(--orion-color-premium-6-rgb)); --orion-color-premium-7: rgb(var(--orion-color-neutral-4-rgb)); --orion-color-contrast-primary: rgb(var(--orion-color-contrast-primary-rgb)); --orion-color-contrast-neutral: rgb(var(--orion-color-contrast-neutral-rgb)); --orion-color-contrast-accent: rgb(var(--orion-color-contrast-accent-rgb)); --orion-color-contrast-green: rgb(var(--orion-color-contrast-green-rgb)); --orion-color-contrast-orange: rgb(var(--orion-color-contrast-orange-rgb)); --orion-color-contrast-red: rgb(var(--orion-color-contrast-red-rgb)); --orion-color-contrast-purple: rgb(var(--orion-color-contrast-purple-rgb)); --orion-color-contrast-staff: rgb(var(--orion-color-contrast-staff-rgb)); --orion-color-contrast-transaction: rgb(var(--orion-color-contrast-transaction-rgb)); --orion-color-contrast-live: rgb(var(--orion-color-contrast-live-rgb)); --orion-color-contrast-premium: rgb(var(--orion-color-contrast-premium-rgb)); --orion-color-darkest: rgb(var(--orion-color-darkest-rgb)); --orion-color-lightest: rgb(var(--orion-color-lightest-rgb)); } :root { --orion-semantic-background: #0a1d29; } :root { --orion-semantic-background: var(--orion-color-primary-1); --orion-semantic-background_opacity: rgba(var(--orion-color-primary-1-rgb), 0.4); --orion-semantic-background_opacity_2: rgba(var(--orion-color-primary-1-rgb), 0.8); --orion-semantic-surface_0: var(--orion-color-primary-1); --orion-semantic-surface_0_opacity: rgba(var(--orion-color-primary-1-rgb), 0.4); --orion-semantic-surface_0_opacity_2: rgba(var(--orion-color-primary-1-rgb), 0.8); --orion-semantic-surface_1: var(--orion-color-primary-2); --orion-semantic-surface_1_opacity: rgba(var(--orion-color-primary-2-rgb), 0.4); --orion-semantic-surface_1_opacity_2: rgba(var(--orion-color-primary-2-rgb), 0.8); --orion-semantic-surface_1_premium: var(--orion-color-premium-2); --orion-semantic-surface_1_premium_opacity: rgba(var(--orion-color-premium-2-rgb), 0.4); --orion-semantic-surface_1_premium_opacity_2: rgba(var(--orion-color-premium-2-rgb), 0.8); --orion-semantic-surface_2: var(--orion-color-primary-3); --orion-semantic-surface_2_opacity: rgba(var(--orion-color-primary-3-rgb), 0.4); --orion-semantic-surface_2_opacity_2: rgba(var(--orion-color-primary-3-rgb), 0.8); --orion-semantic-surface_3: var(--orion-color-primary-4); --orion-semantic-surface_3_opacity: rgba(var(--orion-color-primary-4-rgb), 0.4); --orion-semantic-surface_3_opacity_2: rgba(var(--orion-color-primary-4-rgb), 0.8); --orion-semantic-surface_4: var(--orion-color-primary-5); --orion-semantic-surface_4_opacity: rgba(var(--orion-color-primary-5-rgb), 0.4); --orion-semantic-surface_4_opacity_2: rgba(var(--orion-color-primary-5-rgb), 0.8); --orion-semantic-overlay: rgba(var(--orion-color-darkest-rgb), 0.7); --orion-semantic-overlay_image: linear-gradient(rgba(var(--orion-color-darkest-rgb), 0), rgba(var(--orion-color-darkest-rgb), 0.2)); --orion-semantic-overlay_image_reversed: linear-gradient(0deg, rgba(var(--orion-color-darkest-rgb), 0), rgba(var(--orion-color-darkest-rgb), 0.2)); --orion-semantic-gradient_left: linear-gradient(90deg, rgba(var(--orion-color-primary-1-rgb), 0.8), rgba(var(--orion-color-primary-1-rgb), 0)); --orion-semantic-gradient_right: linear-gradient(270deg, rgba(var(--orion-color-primary-1-rgb), 0.8), rgba(var(--orion-color-primary-1-rgb), 0)); --orion-semantic-foreground: var(--orion-color-neutral-4); --orion-semantic-foreground_weak: var(--orion-color-primary-8); --orion-semantic-foreground_weaker: var(--orion-color-neutral-3); --orion-semantic-foreground_premium: var(--orion-color-premium-6); --orion-semantic-foreground_staff: var(--orion-color-staff-2); --orion-semantic-foreground_transaction: var(--orion-color-transaction-3); --orion-semantic-foreground_highlight: var(--orion-color-primary-7); --orion-semantic-focus: var(--orion-color-accent-2); --orion-semantic-currency_store: var(--orion-color-orange-2); --orion-semantic-currency_rec: var(--orion-color-purple-2); --orion-semantic-currency_uec: var(--orion-color-green-2); --orion-semantic-weak-default: var(--orion-color-primary-4); --orion-semantic-weak-hover: var(--orion-color-primary-5); --orion-semantic-weak-pressed: var(--orion-color-primary-7); --orion-semantic-weak-selected: var(--orion-color-primary-6); --orion-semantic-weak-border: var(--orion-color-primary-6); --orion-semantic-weak_contrast: var(--orion-color-neutral-4); --orion-semantic-weak_opacity: rgba(var(--orion-color-neutral-1-rgb), 0.3); --orion-semantic-default-default: var(--orion-color-primary-8); --orion-semantic-default-hover: var(--orion-color-primary-7); --orion-semantic-default-pressed: var(--orion-color-neutral-3); --orion-semantic-default-selected: var(--orion-color-neutral-4); --orion-semantic-default-border: var(--orion-color-primary-5); --orion-semantic-default_contrast: var(--orion-color-neutral-1); --orion-semantic-default_opacity: rgba(var(--orion-color-neutral-1-rgb), 0.3); --orion-semantic-interaction-default: var(--orion-color-accent-1); --orion-semantic-interaction-hover: var(--orion-color-accent-3); --orion-semantic-interaction-pressed: var(--orion-color-accent-2); --orion-semantic-interaction-selected: var(--orion-color-neutral-4); --orion-semantic-interaction-border: var(--orion-color-accent-2); --orion-semantic-interaction_opacity: rgba(var(--orion-color-neutral-1-rgb), 0.3); --orion-semantic-interaction_contrast: var(--orion-color-contrast-accent); --orion-semantic-transaction-default: var(--orion-color-transaction-1); --orion-semantic-transaction-hover: var(--orion-color-transaction-3); --orion-semantic-transaction-pressed: var(--orion-color-transaction-2); --orion-semantic-transaction-selected: var(--orion-color-transaction-4); --orion-semantic-transaction-border: var(--orion-color-transaction-2); --orion-semantic-transaction_contrast: var(--orion-color-contrast-transaction); --orion-semantic-transaction_opacity: rgba(var(--orion-color-neutral-1-rgb), 0.3); --orion-semantic-destructive-default: var(--orion-color-red-1); --orion-semantic-destructive-hover: var(--orion-color-red-3); --orion-semantic-destructive-pressed: var(--orion-color-red-2); --orion-semantic-destructive-selected: var(--orion-color-red-4); --orion-semantic-destructive-border: var(--orion-color-red-2); --orion-semantic-destructive_contrast: var(--orion-color-contrast-red); --orion-semantic-destructive_opacity: rgba(var(--orion-color-neutral-1-rgb), 0.3); --orion-semantic-success-default: var(--orion-color-green-1); --orion-semantic-success-hover: var(--orion-color-green-3); --orion-semantic-success-pressed: var(--orion-color-green-2); --orion-semantic-success-selected: var(--orion-color-green-4); --orion-semantic-success-border: var(--orion-color-green-2); --orion-semantic-success_contrast: var(--orion-color-contrast-green); --orion-semantic-success_opacity: rgba(var(--orion-color-neutral-1-rgb), 0.3); --orion-semantic-warning-default: var(--orion-color-orange-1); --orion-semantic-warning-hover: var(--orion-color-orange-3); --orion-semantic-warning-pressed: var(--orion-color-orange-2); --orion-semantic-warning-selected: var(--orion-color-orange-4); --orion-semantic-warning-border: var(--orion-color-orange-2); --orion-semantic-warning_contrast: var(--orion-color-contrast-orange); --orion-semantic-warning_opacity: rgba(var(--orion-color-neutral-1-rgb), 0.3); --orion-semantic-premium-default: var(--orion-color-premium-4); --orion-semantic-premium-hover: var(--orion-color-premium-6); --orion-semantic-premium-pressed: var(--orion-color-premium-5); --orion-semantic-premium-selected: var(--orion-color-premium-7); --orion-semantic-premium-border: var(--orion-color-premium-5); --orion-semantic-premium_contrast: var(--orion-color-contrast-premium); --orion-semantic-premium_opacity: rgba(var(--orion-color-neutral-1-rgb), 0.3); --orion-semantic-neutral-default: var(--orion-color-neutral-4); --orion-semantic-neutral-hover: var(--orion-color-neutral-3); --orion-semantic-neutral-pressed: var(--orion-color-neutral-4); --orion-semantic-neutral-selected: var(--orion-color-neutral-4); --orion-semantic-neutral-border: var(--orion-color-neutral-3); --orion-semantic-neutral_contrast: var(--orion-color-contrast-neutral); --orion-semantic-neutral_opacity: rgba(var(--orion-color-neutral-1-rgb), 0.3); --orion-semantic-staff-default: var(--orion-color-staff-1); --orion-semantic-staff-hover: var(--orion-color-staff-3); --orion-semantic-staff-pressed: var(--orion-color-staff-2); --orion-semantic-staff-selected: var(--orion-color-staff-4); --orion-semantic-staff-border: var(--orion-color-staff-2); --orion-semantic-staff_contrast: var(--orion-color-contrast-staff); --orion-semantic-staff_opacity: rgba(var(--orion-color-neutral-1-rgb), 0.3); --orion-semantic-status_informative: var(--orion-color-primary-7); --orion-semantic-status_informative_fill: var(--orion-color-primary-6); --orion-semantic-status_informative_contrast: var(--orion-color-contrast-primary); --orion-semantic-status_live: var(--orion-color-live-2); --orion-semantic-status_live_fill: var(--orion-color-live-1); --orion-semantic-status_live_contrast: var(--orion-color-contrast-live); --orion-semantic-status_negative: var(--orion-color-red-3); --orion-semantic-status_negative_fill: var(--orion-color-red-2); --orion-semantic-status_negative_contrast: var(--orion-color-contrast-red); --orion-semantic-status_neutral: var(--orion-color-neutral-3); --orion-semantic-status_neutral_fill: var(--orion-color-neutral-2); --orion-semantic-status_neutral_contrast: var(--orion-color-neutral-4); --orion-semantic-status_notice: var(--orion-color-orange-3); --orion-semantic-status_notice_fill: var(--orion-color-orange-2); --orion-semantic-status_notice_contrast: var(--orion-color-contrast-orange); --orion-semantic-status_positive: var(--orion-color-green-3); --orion-semantic-status_positive_fill: var(--orion-color-green-2); --orion-semantic-status_positive_contrast: var(--orion-color-contrast-green); --orion-semantic-status_premium: var(--orion-color-premium-6); --orion-semantic-status_premium_fill: var(--orion-color-premium-5); --orion-semantic-status_premium_contrast: var(--orion-color-contrast-premium); --orion-semantic-status_transaction: var(--orion-color-transaction-3); --orion-semantic-status_transaction_fill: var(--orion-color-transaction-2); --orion-semantic-status_transaction_contrast: var(--orion-color-contrast-transaction); --orion-semantic-status_highlight: var(--orion-color-accent-3); --orion-semantic-status_highlight_fill: var(--orion-color-accent-1); --orion-semantic-status_highlight_contrast: var(--orion-color-contrast-accent); --orion-semantic-presence_online: var(--orion-color-green-1); --orion-semantic-presence_away: var(--orion-color-orange-1); --orion-semantic-presence_dnd: var(--orion-color-red-1); --orion-semantic-presence_playing: var(--orion-color-purple-1); --orion-semantic-presence_invisible: var(--orion-color-neutral-3); } :root { --orion-layout-spacing-0: 0; --orion-layout-spacing-0125: 0.125rem; --orion-layout-spacing-025: 0.25rem; --orion-layout-spacing-050: 0.5rem; --orion-layout-spacing-0625: 0.625rem; --orion-layout-spacing-075: 0.75rem; --orion-layout-spacing-100: 1rem; --orion-layout-spacing-125: 1.25rem; --orion-layout-spacing-150: 1.5rem; --orion-layout-spacing-200: 2rem; --orion-layout-spacing-250: 2.5rem; --orion-layout-spacing-300: 3rem; --orion-layout-spacing-350: 3.5rem; --orion-layout-spacing-400: 4rem; --orion-layout-spacing-450: 4.5rem; --orion-layout-spacing-500: 5rem; --orion-layout-spacing-750: 7.5rem; } :root { --orion-border-radius-0: 0; --orion-border-radius-025: 0.25rem; --orion-border-radius-050: 0.5rem; --orion-border-radius-100: 1rem; --orion-border-radius-150: 1.5rem; --orion-border-radius-rounded: 9999px; --orion-border-radius-circle: 50%; } :root { --orion-shadow-0: unset; --orion-shadow-050: 0 0 0.5rem rgba(var(--orion-color-darkest-rgb), 0.4); --orion-shadow-100: 0 0 1rem rgba(var(--orion-color-darkest-rgb), 0.4); --orion-shadow-150: 0 0 1.5rem rgba(var(--orion-color-darkest-rgb), 0.4); } :root { --orion-zIndex-portal-root: 1000; --orion-zIndex-toast-root: 1200; } :root { --orion-border-width-0px: 0; --orion-border-width-1px: 0.0625rem; --orion-border-width-2px: 0.125rem; --orion-border-width-4px: 0.25rem; --orion-border-width-8px: 0.5rem; } :root { --orion-color-primary-1-rgb: 0,31,51; --orion-color-primary-2-rgb: 0,47,77; --orion-color-primary-3-rgb: 0,63,102; --orion-color-primary-4-rgb: 0,79,128; --orion-color-primary-5-rgb: 0,94,153; --orion-color-primary-6-rgb: 0,110,178; --orion-color-primary-7-rgb: 77,186,255; --orion-color-primary-8-rgb: 153,216,255; --orion-color-neutral-1-rgb: 0,0,0; --orion-color-neutral-2-rgb: 78,108,126; --orion-color-neutral-3-rgb: 161,183,197; --orion-color-neutral-4-rgb: 255,255,255; --orion-color-accent-1-rgb: 88,180,246; --orion-color-accent-2-rgb: 134,201,248; --orion-color-accent-3-rgb: 182,222,251; --orion-color-green-1-rgb: 117,214,156; --orion-color-green-2-rgb: 157,226,184; --orion-color-green-3-rgb: 196,237,213; --orion-color-orange-1-rgb: 237,170,69; --orion-color-orange-2-rgb: 241,191,116; --orion-color-orange-3-rgb: 246,212,162; --orion-color-red-1-rgb: 249,140,134; --orion-color-red-2-rgb: 250,163,158; --orion-color-red-3-rgb: 251,186,182; --orion-color-staff-1-rgb: 243,208,37; --orion-color-staff-2-rgb: 247,224,110; --orion-color-staff-3-rgb: 250,235,158; --orion-color-transaction-1-rgb: 215,112,15; --orion-color-transaction-2-rgb: 240,137,40; --orion-color-transaction-3-rgb: 250,215,183; --orion-color-live-1-rgb: 163,41,41; --orion-color-live-2-rgb: 204,51,51; --orion-color-live-3-rgb: 224,133,133; --orion-color-premium-1-rgb: 109,71,19; --orion-color-premium-2-rgb: 130,85,23; --orion-color-premium-3-rgb: 152,100,27; --orion-color-premium-4-rgb: 195,128,35; --orion-color-premium-5-rgb: 220,154,60; --orion-color-premium-6-rgb: 228,176,103; } /***** Base *****/ * { box-sizing: border-box; } html { min-height: 100%; background-color: var(--orion-semantic-background); background-image: url("https://cdn.robertsspaceindustries.com/static/images/orion/foundation/bg-authentication-flow.svg"); background-repeat: no-repeat; background-position: 50% 0%; background-size: cover; background-attachment: fixed; } body { background-color: transparent; color: var(--orion-semantic-foreground); font-family: "Bai Jamjuree", arial, sans-serif; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } @media (min-width: 1024px) { body > main { min-height: 65vh; } } h1, h2, h3, h4, h5, h6 { font-family: "univia-pro", arial, sans-serif; margin-top: 0; } h1 { font-size: 32px; } h2 { font-size: 22px; } h3 { font-size: 18px; font-weight: 600; } h4 { font-size: 16px; } a { color: var(--orion-semantic-interaction-default); text-decoration: none; } a:visited { color: var(--orion-semantic-foreground_highlight); } a:hover, a:active, a:focus { text-decoration: underline; } .hbs-form input, .hbs-form textarea, .search input, .search textarea { color: var(--orion-semantic-foreground); font-size: 14px; } .hbs-form input, .search input { max-width: 100%; box-sizing: border-box; transition: border 0.12s ease-in-out; /* We use the :where selector to not increase the specificity of the selector */ } .hbs-form input:where(:not([type=checkbox])), .search input:where(:not([type=checkbox])) { outline: none; background-color: var(--orion-semantic-surface_1); } .hbs-form input:where(:not([type=checkbox])):focus, .search input:where(:not([type=checkbox])):focus { border: 1px solid var(--orion-semantic-interaction-default); } .hbs-form input[disabled], .search input[disabled] { background-color: var(--orion-semantic-surface_2); } .hbs-form select, .search select { -webkit-appearance: none; -moz-appearance: none; background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23CCC' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A") no-repeat var(--orion-semantic-surface_1); background-position: right 10px center; border: 1px solid var(--orion-semantic-default-border); border-radius: 4px; padding: 8px 30px 8px 10px; outline: none; color: var(--orion-semantic-foreground); width: 100%; } .hbs-form select:focus, .search select:focus { border: 1px solid var(--orion-semantic-interaction-default); } .hbs-form select::-ms-expand, .search select::-ms-expand { display: none; } .hbs-form textarea, .search textarea { background-color: var(--orion-semantic-surface_1); border: 1px solid var(--orion-semantic-default-border); border-radius: 2px; resize: vertical; width: 100%; outline: none; padding: 10px; } .hbs-form textarea:focus, .search textarea:focus { border: 1px solid var(--orion-semantic-interaction-default); } .container { max-width: 1160px; margin: 0 auto; padding: 0 5%; } @media (min-width: 1160px) { .container { padding: 0; width: 90%; } } .container-divider { border-top: 1px solid var(--orion-semantic-weak-default); margin-bottom: 20px; } ul { list-style: none; margin: 0; padding: 0; } .error-page { max-width: 1160px; margin: 0 auto; padding: 0 5%; } @media (min-width: 1160px) { .error-page { padding: 0; width: 90%; } } .visibility-hidden { border: 0; clip: rect(0 0 0 0); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; } /***** RSI background — steel-navy base + DS pattern + ambient azure glow *****/ /* Base fill lives on the token (see _variables.scss #001F33). The DS grid + glow sit in fixed negative-z layers so all content and the plt-client header/footer paint above them. */ .orion-bg-art { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--rsi-bg-pattern) center/cover no-repeat; opacity: 0.4; } body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(900px 480px at 50% -120px, rgba(84, 173, 247, 0.08), transparent 70%); } /***** Buttons *****/ .button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button { background-color: transparent; border: 1px solid var(--orion-semantic-interaction-default); border-radius: 4px; font-family: "univia-pro", arial, sans-serif; text-transform: uppercase; letter-spacing: 0.6px; color: var(--orion-semantic-interaction-default); cursor: pointer; display: inline-block; font-size: 12px; line-height: 2.34; margin: 0; padding: 1px 20px 0; text-align: center; transition: background-color 0.12s ease-in-out, border-color 0.12s ease-in-out, color 0.15s ease-in-out; user-select: none; white-space: nowrap; width: 100%; -webkit-touch-callout: none; } @media (min-width: 768px) { .button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button { width: auto; } } .button:visited, .pagination-next-link:visited, .pagination-prev-link:visited, .pagination-first-link:visited, .pagination-last-link:visited, .subscriptions-subscribe button:visited, .requests-table-toolbar .organization-subscribe button:visited, .community-follow button:visited, .article-subscribe button:visited, .section-subscribe button:visited, .split-button button:visited { color: var(--orion-semantic-interaction-default); } .button:hover, .pagination-next-link:hover, .pagination-prev-link:hover, .pagination-first-link:hover, .pagination-last-link:hover, .subscriptions-subscribe button:hover, .requests-table-toolbar .organization-subscribe button:hover, .community-follow button:hover, .article-subscribe button:hover, .section-subscribe button:hover, .split-button button:hover, .button:active, .pagination-next-link:active, .pagination-prev-link:active, .pagination-first-link:active, .pagination-last-link:active, .subscriptions-subscribe button:active, .requests-table-toolbar .organization-subscribe button:active, .community-follow button:active, .article-subscribe button:active, .section-subscribe button:active, .split-button button:active, .button:focus, .pagination-next-link:focus, .pagination-prev-link:focus, .pagination-first-link:focus, .pagination-last-link:focus, .subscriptions-subscribe button:focus, .requests-table-toolbar .organization-subscribe button:focus, .community-follow button:focus, .article-subscribe button:focus, .section-subscribe button:focus, .split-button button:focus, .button.button-primary, .button-primary.pagination-next-link, .button-primary.pagination-prev-link, .button-primary.pagination-first-link, .button-primary.pagination-last-link, .subscriptions-subscribe button.button-primary, .subscriptions-subscribe button[data-selected=true], .requests-table-toolbar .organization-subscribe button.button-primary, .requests-table-toolbar .organization-subscribe button[data-selected=true], .community-follow button.button-primary, .article-subscribe button.button-primary, .article-subscribe button[data-selected=true], .section-subscribe button.button-primary, .section-subscribe button[data-selected=true], .split-button button.button-primary { background-color: var(--orion-semantic-interaction-default); color: var(--orion-semantic-interaction_contrast); text-decoration: none; } .button.button-primary:hover, .button-primary.pagination-next-link:hover, .button-primary.pagination-prev-link:hover, .button-primary.pagination-first-link:hover, .button-primary.pagination-last-link:hover, .subscriptions-subscribe button.button-primary:hover, .subscriptions-subscribe button[data-selected=true]:hover, .requests-table-toolbar .organization-subscribe button.button-primary:hover, .requests-table-toolbar .organization-subscribe button[data-selected=true]:hover, .community-follow button.button-primary:hover, .article-subscribe button.button-primary:hover, .article-subscribe button[data-selected=true]:hover, .section-subscribe button.button-primary:hover, .section-subscribe button[data-selected=true]:hover, .split-button button:hover, .button.button-primary:focus, .button-primary.pagination-next-link:focus, .button-primary.pagination-prev-link:focus, .button-primary.pagination-first-link:focus, .button-primary.pagination-last-link:focus, .subscriptions-subscribe button.button-primary:focus, .subscriptions-subscribe button[data-selected=true]:focus, .requests-table-toolbar .organization-subscribe button.button-primary:focus, .requests-table-toolbar .organization-subscribe button[data-selected=true]:focus, .community-follow button.button-primary:focus, .article-subscribe button.button-primary:focus, .article-subscribe button[data-selected=true]:focus, .section-subscribe button.button-primary:focus, .section-subscribe button[data-selected=true]:focus, .split-button button.button-primary:focus, .button.button-primary:active, .button-primary.pagination-next-link:active, .button-primary.pagination-prev-link:active, .button-primary.pagination-first-link:active, .button-primary.pagination-last-link:active, .subscriptions-subscribe button.button-primary:active, .subscriptions-subscribe button[data-selected=true]:active, .requests-table-toolbar .organization-subscribe button.button-primary:active, .requests-table-toolbar .organization-subscribe button[data-selected=true]:active, .community-follow button.button-primary:active, .article-subscribe button.button-primary:active, .article-subscribe button[data-selected=true]:active, .section-subscribe button.button-primary:active, .section-subscribe button[data-selected=true]:active, .split-button button.button-primary:active { background-color: var(--orion-semantic-interaction-hover); border-color: var(--orion-semantic-interaction-hover); } .button[data-disabled], [data-disabled].pagination-next-link, [data-disabled].pagination-prev-link, [data-disabled].pagination-first-link, [data-disabled].pagination-last-link, .subscriptions-subscribe button[data-disabled], .requests-table-toolbar .organization-subscribe button[data-disabled], .community-follow button[data-disabled], .article-subscribe button[data-disabled], .section-subscribe button[data-disabled], .split-button button[data-disabled] { cursor: default; } .button-large, .hbs-form input[type=submit] { cursor: pointer; background-color: var(--orion-semantic-interaction-default); border: 0; border-radius: 4px; font-family: "univia-pro", arial, sans-serif; text-transform: uppercase; letter-spacing: 0.6px; color: var(--orion-semantic-interaction_contrast); font-size: 14px; line-height: 2.72; min-width: 190px; padding: 1px 1.9286em 0; width: 100%; } @media (min-width: 768px) { .button-large, .hbs-form input[type=submit] { width: auto; } } .button-large:visited, .hbs-form input[type=submit]:visited { color: var(--orion-semantic-interaction_contrast); } .button-large:hover, .button-large:active, .button-large:focus, .hbs-form input[type=submit]:hover, .hbs-form input[type=submit]:active, .hbs-form input[type=submit]:focus { background-color: var(--orion-semantic-interaction-hover); } .button-large[disabled], .hbs-form input[type=submit][disabled] { background-color: var(--orion-semantic-surface_2); } .button-secondary { color: var(--orion-semantic-foreground_weaker); border: 1px solid var(--orion-semantic-default-border); background-color: transparent; font-family: "univia-pro", arial, sans-serif; text-transform: uppercase; letter-spacing: 0.6px; } .button-secondary:visited { color: var(--orion-semantic-foreground_weaker); } .button-secondary:hover, .button-secondary:focus, .button-secondary:active { color: var(--orion-semantic-foreground); border: 1px solid var(--orion-semantic-default-border); background-color: var(--orion-semantic-surface_1); } /***** Split button *****/ .split-button { display: flex; } .split-button button { background-color: var(--orion-semantic-interaction-default); border: 0; color: var(--orion-semantic-interaction_contrast); height: 32px; line-height: 16px; outline-color: var(--orion-semantic-interaction-default); } [dir=rtl] .split-button button:not(:only-child):first-child { border-left: 1px solid var(--orion-semantic-interaction_contrast); border-top-left-radius: unset; border-bottom-left-radius: unset; } [dir=ltr] .split-button button:not(:only-child):first-child { border-right: 1px solid var(--orion-semantic-interaction_contrast); border-top-right-radius: unset; border-bottom-right-radius: unset; } .split-button button:not(:only-child):last-child { display: flex; justify-content: center; align-items: center; width: 26px; min-width: 26px; max-width: 26px; padding: 0; } [dir=rtl] .split-button button:not(:only-child):last-child { border-top-right-radius: unset; border-bottom-right-radius: unset; } [dir=ltr] .split-button button:not(:only-child):last-child { border-top-left-radius: unset; border-bottom-left-radius: unset; } /***** Tables *****/ .table { width: 100%; table-layout: fixed; border-collapse: collapse; border-spacing: 0; } @media (min-width: 768px) { .table { table-layout: auto; } } .table th, .table th a { color: var(--orion-semantic-foreground_weaker); font-size: 13px; text-align: left; } [dir=rtl] .table th, [dir=rtl] .table th a { text-align: right; } .table tr { border-bottom: 1px solid var(--orion-semantic-weak-default); display: block; padding: 20px 0; } @media (min-width: 768px) { .table tr { display: table-row; } } .table td { display: block; } @media (min-width: 768px) { .table td { display: table-cell; } } @media (min-width: 1024px) { .table td, .table th { padding: 20px 30px; } } @media (min-width: 768px) { .table td, .table th { padding: 10px 20px; height: 60px; } } /***** Forms *****/ .form { max-width: 650px; } .form-field ~ .form-field { margin-top: 25px; } .form-field label { display: block; font-size: 13px; margin-bottom: 5px; } .form-field input { border: 1px solid var(--orion-semantic-default-border); border-radius: 4px; padding: 10px; width: 100%; } .form-field input:focus { border: 1px solid var(--orion-semantic-interaction-default); } .form-field input[type=text] { border: 1px solid var(--orion-semantic-default-border); border-radius: 4px; } .form-field input[type=text]:focus { border: 1px solid var(--orion-semantic-interaction-default); } .form-field input[type=checkbox] { width: auto; } .form-field .nesty-input { border-radius: 4px; border: 1px solid var(--orion-semantic-default-border); height: 40px; line-height: 40px; outline: none; vertical-align: middle; } .form-field .nesty-input:focus { border: 1px solid var(--orion-semantic-interaction-default); text-decoration: none; } .form-field .hc-multiselect-toggle { border: 1px solid var(--orion-semantic-default-border); } .form-field .hc-multiselect-toggle:focus { outline: none; border: 1px solid var(--orion-semantic-interaction-default); text-decoration: none; } .form-field textarea { vertical-align: middle; } .form-field input[type=checkbox] + label { margin: 0 0 0 10px; } .form-field .optional { color: var(--orion-semantic-foreground_weaker); margin-left: 4px; } .form-field p { color: var(--orion-semantic-foreground_weaker); font-size: 12px; margin: 5px 0; } .form footer { margin-top: 40px; padding-top: 30px; } .form footer a { color: var(--orion-semantic-foreground_weaker); cursor: pointer; margin-right: 15px; } .form .suggestion-list { font-size: 13px; margin-top: 30px; } .form .suggestion-list label { border-bottom: 1px solid var(--orion-semantic-weak-default); display: block; padding-bottom: 5px; } .form .suggestion-list li { padding: 10px 0; } .form .suggestion-list li a:visited { color: var(--orion-semantic-foreground_highlight); } /***** Header *****/ .header { max-width: 1160px; margin: 0 auto; padding: 0 5%; position: relative; z-index: 2; align-items: center; display: flex; height: 71px; justify-content: flex-end; } @media (min-width: 1160px) { .header { padding: 0; width: 90%; } } .user-nav { display: inline-block; position: absolute; white-space: nowrap; } @media (min-width: 768px) { .user-nav { position: relative; } } .user-nav[aria-expanded=true] { background-color: var(--orion-semantic-surface_1); box-shadow: 0 0 4px 0 rgba(var(--orion-color-darkest-rgb), 0.4), 0 4px 10px 0 rgba(var(--orion-color-darkest-rgb), 0.4); border: solid 1px var(--orion-semantic-surface_3); right: 0; left: 0; top: 71px; z-index: 1; } .user-nav[aria-expanded=true] > a { display: block; margin: 20px; } .user-nav[aria-expanded=true] > .user-nav-list li { display: block; } .user-nav[aria-expanded=true] > .user-nav-list a { display: block; margin: 20px; } .user-nav-list { display: block; list-style: none; } .user-nav-list > li { display: inline-block; } @media (max-width: 768px) { .nav-wrapper-desktop { display: none; } } @media (min-width: 768px) { .nav-wrapper-desktop { display: none; } } @media (min-width: 1024px) { .nav-wrapper-desktop { display: inline-block; } } .nav-wrapper-desktop a { border: 0; color: var(--orion-semantic-interaction-default); display: none; font-size: 14px; padding: 0 20px 0 0; width: auto; } @media (min-width: 768px) { .nav-wrapper-desktop a { display: inline-block; } } [dir=rtl] .nav-wrapper-desktop a { padding: 0 0 0 20px; } .nav-wrapper-desktop a:hover, .nav-wrapper-desktop a:focus, .nav-wrapper-desktop a:active { background-color: transparent; color: var(--orion-semantic-interaction-default); text-decoration: underline; } @media (min-width: 1024px) { .nav-wrapper-mobile { display: none; } } .nav-wrapper-mobile .menu-button-mobile { background: none; border: 0; width: auto; min-width: 71px; cursor: pointer; color: var(--orion-semantic-foreground); } .nav-wrapper-mobile .menu-button-mobile .icon-menu { padding: 7px; vertical-align: middle; width: 30px; height: 30px; border-radius: 50%; } .nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu { background: var(--orion-semantic-surface_2); } .nav-wrapper-mobile .menu-list-mobile { position: absolute; background-color: var(--orion-semantic-surface_1); box-shadow: 0 0 16px rgba(var(--orion-color-darkest-rgb), 0.4); border-top: solid 1px var(--orion-semantic-surface_3); border-bottom: solid 1px var(--orion-semantic-surface_3); right: 0; left: 0; top: 71px; z-index: 2; } .nav-wrapper-mobile .menu-list-mobile[aria-expanded=false] { display: none; } .nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] { display: block; } .nav-wrapper-mobile .menu-list-mobile-items .item { margin: 4px 0; } .nav-wrapper-mobile .menu-list-mobile-items li:empty:not(.nav-divider) { display: none; } .nav-wrapper-mobile .menu-list-mobile-items .nav-divider { border-bottom: 0.1px solid var(--orion-semantic-surface_3); padding: 0; } .nav-wrapper-mobile .menu-list-mobile-items .nav-divider:last-child { display: none; } .nav-wrapper-mobile .menu-list-mobile-items button { background: none; border: none; padding: 8px 24px; width: 100%; height: 100%; color: var(--orion-semantic-foreground); cursor: pointer; text-align: start; } .nav-wrapper-mobile .menu-list-mobile-items button:active, .nav-wrapper-mobile .menu-list-mobile-items button:focus, .nav-wrapper-mobile .menu-list-mobile-items button:hover { background-color: var(--orion-semantic-surface_2); text-decoration: underline; } .nav-wrapper-mobile .menu-list-mobile-items a { display: block; padding: 8px 24px; width: 100%; height: 100%; color: var(--orion-semantic-foreground); } .nav-wrapper-mobile .menu-list-mobile-items a:active, .nav-wrapper-mobile .menu-list-mobile-items a:focus, .nav-wrapper-mobile .menu-list-mobile-items a:hover { background-color: var(--orion-semantic-surface_2); } .nav-wrapper-mobile .menu-list-mobile-items .my-profile { display: flex; line-height: 1.5; } .nav-wrapper-mobile .menu-list-mobile-items .my-profile .my-profile-tooltip { font-size: 12px; color: var(--orion-semantic-foreground_weaker); } .nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar { height: 20px; width: 20px; border-radius: 50%; display: inline-block; margin-right: 8px; margin-top: 1px; } [dir=rtl] .nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar { margin-right: 0; margin-left: 8px; } .skip-navigation { align-items: center; background-color: var(--orion-semantic-surface_1); color: var(--orion-semantic-foreground); display: flex; font-size: 14px; justify-content: center; left: -999px; margin: 20px; padding: 20px; overflow: hidden; position: absolute; top: auto; z-index: -999; } [dir=rtl] .skip-navigation { left: initial; right: -999px; } .skip-navigation:focus, .skip-navigation:active { left: auto; overflow: auto; text-align: center; text-decoration: none; top: auto; z-index: 999; } [dir=rtl] .skip-navigation:focus, [dir=rtl] .skip-navigation:active { left: initial; right: auto; } #zd-modal-container ~ .skip-navigation { display: none; } .ask-ai { align-items: center; background-color: var(--orion-semantic-interaction-default); border: 1px solid var(--orion-semantic-interaction-default); border-radius: 4px; color: var(--orion-semantic-interaction_contrast); display: inline-flex; font-size: 14px; font-weight: 600; gap: 6px; line-height: 1.4286; padding: 6px 14px; } .ask-ai:visited { color: var(--orion-semantic-interaction_contrast); } .ask-ai .ask-ai-icon { flex-shrink: 0; } .nav-wrapper-desktop .ask-ai { margin-inline-end: 16px; padding: 6px 14px; } .nav-wrapper-desktop .ask-ai, .nav-wrapper-desktop .ask-ai:visited { color: var(--orion-semantic-interaction_contrast); } .nav-wrapper-desktop .ask-ai:hover, .nav-wrapper-desktop .ask-ai:focus, .nav-wrapper-desktop .ask-ai:active { background-color: var(--orion-semantic-interaction-hover); border-color: var(--orion-semantic-interaction-hover); color: var(--orion-semantic-interaction_contrast); text-decoration: none; } .nav-wrapper-mobile .ask-ai { margin: 4px 24px; padding: 6px 14px; width: auto; height: auto; } .nav-wrapper-mobile .ask-ai, .nav-wrapper-mobile .ask-ai:visited { color: var(--orion-semantic-interaction_contrast); } .nav-wrapper-mobile .ask-ai:hover, .nav-wrapper-mobile .ask-ai:focus, .nav-wrapper-mobile .ask-ai:active { background-color: var(--orion-semantic-interaction-hover); border-color: var(--orion-semantic-interaction-hover); color: var(--orion-semantic-interaction_contrast); text-decoration: none; } /***** User info in header *****/ .user-info { display: inline-block; } .user-info .dropdown-toggle::after { display: none; } @media (min-width: 768px) { .user-info .dropdown-toggle::after { display: inline-block; } } .user-info > button { border: 0; color: var(--orion-semantic-interaction-default); min-width: 0; padding: 0; white-space: nowrap; } .user-info > button:hover, .user-info > button:focus { color: var(--orion-semantic-interaction-default); background-color: transparent; } .user-info > button::after { color: var(--orion-semantic-interaction-default); padding-right: 15px; } [dir=rtl] .user-info > button::after { padding-left: 15px; padding-right: 0; } #user #user-name { display: none; font-size: 14px; } @media (min-width: 768px) { #user #user-name { display: inline-block; } } #user #user-name:hover { text-decoration: underline; } /***** User avatar *****/ .user-avatar { height: 25px; width: 25px; border-radius: 50%; display: inline-block; vertical-align: middle; } .avatar { display: inline-block; position: relative; } .avatar img { height: 40px; width: 40px; } .avatar .icon-agent { color: var(--orion-semantic-interaction-default); border: 2px solid var(--orion-semantic-surface_3); border-radius: 50%; bottom: -4px; background-color: var(--orion-semantic-interaction_contrast); font-size: 17px; height: 17px; line-height: 17px; position: absolute; right: -2px; text-align: center; width: 17px; } /***** Footer *****/ /* The main footer is the Orion PlatformFooter rendered via the plt-client portal (templates/footer.hbs) and is self-styled. Only the Zendesk locale switcher that sits above it needs theme styling. */ .footer-language-selector { max-width: 1160px; margin: 0 auto; padding: 0 5%; display: flex; justify-content: flex-end; margin-top: 40px; } @media (min-width: 1160px) { .footer-language-selector { padding: 0; width: 90%; } } .footer-language-selector button { color: var(--orion-semantic-foreground_weaker); display: inline-block; } .powered-by-zendesk a, .powered-by-zendesk a:visited { color: var(--orion-semantic-foreground_weaker); } /***** Breadcrumbs *****/ .breadcrumbs { margin: 0 0 15px 0; padding: 0; display: flex; } @media (min-width: 768px) { .breadcrumbs { margin: 0; } } .breadcrumbs li { display: inline-block; color: var(--orion-semantic-foreground_weaker); font-size: 13px; max-width: 450px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .breadcrumbs li + li::before { content: ">"; margin: 0 4px; } .breadcrumbs li a:visited { color: var(--orion-semantic-interaction-default); } /***** Search field *****/ .search-container { position: relative; } .search { border-color: var(--orion-semantic-default-border); border-radius: 30px; border-style: solid; border-width: 1px; display: flex; position: relative; transition: border 0.12s ease-in-out; } .search:focus-within { border-color: var(--orion-semantic-interaction-default); } .search input[type=search], .search .clear-button { background-color: var(--orion-semantic-surface_1); border-radius: 30px; border: none; } .search-full input[type=search], .search-full .clear-button { border-color: var(--orion-semantic-surface_1); } .search input[type=search] { appearance: none; -webkit-appearance: none; box-sizing: border-box; color: var(--orion-semantic-foreground_weaker); flex: 1 1 auto; height: 40px; width: 100%; } .search input[type=search]:focus { color: var(--orion-semantic-foreground); } .search input[type=search]::-webkit-search-decoration, .search input[type=search]::-webkit-search-cancel-button, .search input[type=search]::-webkit-search-results-button, .search input[type=search]::-webkit-search-results-decoration { -webkit-appearance: none; } .search input[type=search]:-webkit-autofill, .search input[type=search]:-webkit-autofill:hover, .search input[type=search]:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--orion-semantic-surface_1) inset; } .search .clear-button { align-items: center; box-sizing: border-box; color: var(--orion-semantic-foreground_weaker); cursor: pointer; display: none; flex: none; justify-content: center; padding: 0 15px; } .search .clear-button:hover { background-color: var(--orion-semantic-interaction-default); color: var(--orion-semantic-foreground); } .search .clear-button:focus { outline: 0; box-shadow: 0 0 0 3px var(--orion-semantic-interaction-default); } .search-has-value .clear-button { display: flex; } [dir=ltr] .search input[type=search] { padding-left: 40px; padding-right: 20px; } [dir=ltr] .search-has-value input[type=search] { border-bottom-right-radius: 0; border-top-right-radius: 0; border-right-color: transparent; } [dir=ltr] .search-has-value input[type=search]:focus { border-right-color: var(--orion-semantic-interaction-default); } [dir=ltr] .search .clear-button { border-bottom-left-radius: 0; border-top-left-radius: 0; border-left-color: transparent; } [dir=ltr] .search .clear-button:focus { border-left-color: var(--orion-semantic-interaction-default); } [dir=rtl] .search input[type=search] { padding-left: 20px; padding-right: 40px; } [dir=rtl] .search-has-value input[type=search] { border-bottom-left-radius: 0; border-top-left-radius: 0; border-left-color: transparent; } [dir=rtl] .search-has-value input[type=search]:focus { border-left-color: var(--orion-semantic-interaction-default); } [dir=rtl] .search .clear-button { border-bottom-right-radius: 0; border-top-right-radius: 0; border-right-color: transparent; } [dir=rtl] .search .clear-button:focus { border-right-color: var(--orion-semantic-interaction-default); } .search-icon { position: relative; top: 50%; transform: translateY(-50%); position: absolute; left: 15px; z-index: 1; width: 18px; height: 18px; color: var(--orion-semantic-foreground_weaker); pointer-events: none; } [dir=rtl] .search-icon { left: auto; right: 15px; } /* Home hero search — larger bounded rounded-rect variant (~60px tall, 18px text, 8px radius, weak-border resting → accent on focus). Scoped to the home hero wrapper so the pill-shaped search elsewhere (community hero, results) is unaffected. */ .hero-search-field .search { border-radius: 8px; border-color: var(--orion-semantic-weak-border); } .hero-search-field .search input[type=search], .hero-search-field .search .clear-button { border-radius: 8px; } .hero-search-field .search input[type=search] { height: 60px; font-size: 18px; padding-inline-start: 48px; } .hero-search-field .search-icon { left: 18px; width: 20px; height: 20px; } [dir=rtl] .hero-search-field .search-icon { left: auto; right: 18px; } /***** Hero component *****/ .hero { padding: 40px 20px 16px; width: 100%; } .hero.section { margin-bottom: 24px; } /* Single-column hero. Shared by the home page (centered search treatment) and the community topic/post list pages (`.community-hero` modifier). Gives the absolutely-positioned .search-icon a positioned ancestor so it anchors inside the input. */ .hero-inner { position: relative; max-width: 610px; margin: 0 auto; } /* Home hero: full centered single column — generous space, large field, no animation (galactapedia-style). Scoped away from `.community-hero` so the community search placement is unaffected. */ .hero:not(.community-hero) { position: relative; isolation: isolate; margin-top: -71px; padding: calc(clamp(88px, 12vw, 150px) + 71px) 20px clamp(120px, 14vw, 200px); text-align: center; /* Galactapedia-style atmospheric image behind the search. Sits in the hero's own stacking context (below the headline/search, above the page bg). Bleeds to the top edge and fades at the sides + bottom so it melts into the steel-navy page. */ /* Scrim: darken toward the bottom so the "Other ways" pills and the cards below keep their contrast, blending into the page background color. */ } .hero:not(.community-hero)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--rsi-hero-image) center/cover no-repeat; opacity: 0.7; -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%), linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, #000 62%, transparent 100%), linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-composite: intersect; } .hero:not(.community-hero)::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(var(--orion-color-primary-1-rgb, 10, 29, 41), 0) 35%, rgba(var(--orion-color-primary-1-rgb, 10, 29, 41), 0.85) 100%); } .hero:not(.community-hero) .hero-inner { max-width: 720px; } /* Headline — Univia Pro display, white, with an accent-blue phrase. */ .hero-headline { margin: 0 auto 28px; font-family: "univia-pro", arial, sans-serif; font-weight: 700; font-size: clamp(32px, 5vw, 44px); line-height: 1.1; color: var(--orion-semantic-foreground); } .hero-headline-accent { color: var(--orion-semantic-interaction-default); } /* Search field wrapper — centered, bounded. The larger sizing lives in the `.search-full` hero variant in _search.scss. */ .hero-search-field { max-width: 640px; margin: 0 auto; text-align: left; } /* OTHER WAYS row — muted uppercase label above a row of outline pills. */ .hero-ways { margin-top: 28px; } .hero-ways-label { margin: 0 0 12px; color: var(--orion-semantic-foreground_weaker); font-size: 12px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; } .hero-ways-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; } .hero-way { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--orion-semantic-weak-border); border-radius: 999px; color: var(--orion-semantic-foreground); font-weight: 600; text-decoration: none; transition: border-color 0.2s cubic-bezier(0.5, 0, 1, 1), background-color 0.2s; } .hero-way:visited { color: var(--orion-semantic-foreground); } .hero-way:hover, .hero-way:active { background-color: var(--orion-semantic-surface_2); border-color: var(--orion-semantic-interaction-default); color: var(--orion-semantic-foreground); text-decoration: none; } .hero-way:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--orion-semantic-interaction-default); } .hero-way-icon { flex: none; width: 16px; height: 16px; color: var(--orion-semantic-interaction-default); } /***** "Other ways to find help" panel *****/ /* Self-contained panel reused on the home hero (right column) and at the top of the section page. Styled with Orion tokens; no dependence on the hero grid so the two placements stay decoupled. */ .help-links { padding: 24px; background: var(--orion-semantic-surface_1); border: 0; border-radius: 8px; } .help-links-title { margin: 0 0 16px; font-size: 18px; font-weight: 600; } .help-links-list { display: flex; flex-direction: column; gap: 4px; } .help-links-list li a { display: block; padding: 10px 12px; border-radius: 6px; color: var(--orion-semantic-foreground); text-decoration: none; transition: background-color 0.12s ease-in-out; } .help-links-list li a:visited { color: var(--orion-semantic-foreground); } .help-links-list li a:hover, .help-links-list li a:focus, .help-links-list li a:active { background-color: var(--orion-semantic-surface_2); text-decoration: none; } .help-links-heading { display: block; font-weight: 600; color: var(--orion-semantic-foreground); } .help-links-desc { display: block; font-size: 13px; color: var(--orion-semantic-foreground_weaker); } .help-links-cta { display: block; margin-top: 16px; text-align: center; } .page-header { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; margin: 10px 0; } @media (min-width: 768px) { .page-header { align-items: baseline; flex-direction: row; flex-wrap: wrap; gap: 16px; margin: 0; } } .page-header .section-subscribe { flex-shrink: 0; margin-bottom: 10px; } @media (min-width: 768px) { .page-header .section-subscribe { margin-bottom: 0; } } .page-header h1 { flex-grow: 1; margin-bottom: 10px; } .page-header-description { font-style: italic; margin: 0 0 30px 0; word-break: break-word; } @media (min-width: 1024px) { .page-header-description { flex-basis: 100%; } } .page-header .icon-lock { height: 20px; width: 20px; position: relative; left: -5px; vertical-align: baseline; } .sub-nav { align-items: baseline; display: flex; flex-direction: column; flex-wrap: wrap; gap: 15px 30px; justify-content: space-between; margin-bottom: 55px; } @media (min-width: 768px) { .sub-nav { flex-direction: row; } } .sub-nav .breadcrumbs { margin: 0; } .sub-nav .search-container { max-width: 300px; width: 100%; } @media (min-width: 768px) { .sub-nav .search-container { flex: 0 1 300px; } } .sub-nav input[type=search]::after { font-size: 15px; } /***** Blocks *****/ /* Used in Homepage#categories and Community#topics */ .blocks-list { display: flex; flex-wrap: wrap; justify-content: flex-start; list-style: none; padding: 0; } @media (min-width: 768px) { .blocks-list { margin: 0 -15px; } } .blocks-item { border: 2px solid transparent; border-radius: 8px; box-sizing: border-box; background-color: var(--orion-semantic-surface_1); color: var(--orion-semantic-interaction-default); display: flex; flex: 1 0 340px; margin: 0 0 30px; max-width: 100%; text-align: center; transition: border-color 0.2s cubic-bezier(0.5, 0, 1, 1), background-color 0.2s; } @media (min-width: 768px) { .blocks-item { margin: 0 15px 30px; } } .blocks-item:hover, .blocks-item:focus, .blocks-item:active { border-color: var(--orion-semantic-interaction-hover); background-color: var(--orion-semantic-surface_2); } .blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * { text-decoration: none; } .blocks-item-internal { background-color: transparent; border: 1px solid var(--orion-semantic-weak-default); } .blocks-item-internal .icon-lock { height: 15px; width: 15px; bottom: 5px; position: relative; } .blocks-item-internal a { color: var(--orion-semantic-foreground); } .blocks-item-link { color: var(--orion-semantic-interaction-default); padding: 20px 30px; display: flex; flex-direction: column; flex: 1; justify-content: center; border-radius: inherit; } .blocks-item-link:visited, .blocks-item-link:hover, .blocks-item-link:active { color: inherit; text-decoration: none; } .blocks-item-link:focus { outline: 0; box-shadow: 0 0 0 3px var(--orion-semantic-interaction-default); text-decoration: none; } .blocks-item-title { position: relative; width: fit-content; margin: 0 auto; font-size: 16px; } .blocks-item-title::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--orion-semantic-interaction-hover); transition: width 0.2s ease-out; } .blocks-item:hover .blocks-item-title::after, .blocks-item:focus .blocks-item-title::after, .blocks-item:active .blocks-item-title::after { width: 100%; } .blocks-item-description { margin: 0; } .blocks-item-description:not(:empty) { margin-top: 10px; } /***** Home "Browse by category" cards *****/ /* Native Zendesk category links (`.categories.blocks`, SSR + no-JS fallback) restyled as RSI AccountMenuCard-style cards via the Orion token bridge, and laid out in a responsive grid. src/orionCategoryCards.js injects a per-category icon into each `.blocks-item-link`; the card styling below does NOT depend on that JS, so the links still render as working cards (minus icon) if it fails. Scoped to `.categories.blocks` so the shared `.blocks` community-topics grid is untouched. Mirrors platform-client AccountMenuCard/_AccountMenuCard.scss. */ .categories.blocks .blocks-list { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); margin: 0; } @media (min-width: 768px) { .categories.blocks .blocks-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .categories.blocks .blocks-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .categories.blocks .blocks-item { margin: 0; text-align: left; } .categories.blocks .blocks-item:hover, .categories.blocks .blocks-item:focus-within, .categories.blocks .blocks-item:active { border-color: var(--orion-semantic-surface_4); background-color: var(--orion-semantic-surface_4_opacity); } @media (min-width: 768px) { .categories.blocks .blocks-item { margin: 0; } } .categories.blocks .blocks-item-link { align-items: flex-start; flex-direction: column; gap: 8px; justify-content: flex-start; padding: 24px; text-align: left; } .categories.blocks .category-card-icon { display: inline-flex; color: var(--orion-semantic-foreground_weak); } .categories.blocks .category-card-icon svg { width: 28px; height: 28px; } .categories.blocks .blocks-item-title { margin: 0; max-width: max-content; color: var(--orion-semantic-foreground); font-weight: 600; } .categories.blocks .blocks-item-title::after { left: 0; margin: 0; } .categories.blocks .blocks-item-description { color: var(--orion-semantic-foreground_highlight); text-align: left; } /***** Homepage *****/ .section { margin-bottom: 40px; } @media (min-width: 768px) { .section { margin-bottom: 60px; } } .section.knowledge-base { margin-bottom: 48px; } @media (min-width: 768px) { .section.knowledge-base { margin-bottom: 72px; } } .home-section h2 { margin-bottom: 10px; text-align: center; } .home-columns { display: grid; gap: 40px; } @media (min-width: 1024px) { .home-columns { grid-template-columns: 1fr 1fr; align-items: start; } } .home-columns > .section { margin-bottom: 0; } /***** Promoted articles *****/ .promoted-articles { padding: 0; } .promoted-articles-item { border-bottom: 1px solid var(--orion-semantic-weak-default); overflow: auto; padding: 20px 0; } .promoted-articles-item .icon-lock { vertical-align: baseline; } .promoted-articles-item-title { display: inline-block; width: 100%; margin: 6px 0; font-size: 16px; font-weight: 600; } @media (min-width: 768px) { .promoted-articles-item-title { width: 70%; margin: 0; } } .promoted-articles-item-location { display: inline-block; width: 100%; margin: 6px 0 0; font-size: 14px; } @media (min-width: 768px) { .promoted-articles-item-location { width: 70%; margin: 0; } } .promoted-articles-item-location a { color: var(--orion-semantic-foreground); } .promoted-articles-item-location-sep { margin: 0 4px; color: var(--orion-semantic-foreground); } .promoted-articles-item-meta { display: inline-block; margin: 15px 0 0 0; color: var(--orion-semantic-foreground); font-size: 13px; } @media (min-width: 768px) { .promoted-articles-item-meta { margin: 0; float: right; } [dir=rtl] .promoted-articles-item-meta { float: left; } } .activity { padding-bottom: 30px; } .knowledge-base-title, .articles > h2, .activity .recent-activity-header { font-family: univia-pro, arial, sans-serif; font-size: 40px; font-weight: 600; line-height: 48px; letter-spacing: 0.4px; text-transform: none; color: var(--orion-semantic-foreground); text-align: left; } .knowledge-base-title { margin: 0 0 24px; } .articles > h2, .activity .recent-activity-header { margin: 0 0 10px; } /***** Recent activity *****/ .recent-activity-header { margin-bottom: 10px; text-align: center; } .recent-activity-list { padding: 0; } .recent-activity-item { border-bottom: 1px solid var(--orion-semantic-weak-default); overflow: auto; padding: 20px 0; } .recent-activity-item h3 { margin: 0; } .recent-activity-item-parent { font-size: 16px; font-weight: 600; } .recent-activity-item-parent, .recent-activity-item-link { margin: 6px 0; display: inline-block; width: 100%; } @media (min-width: 768px) { .recent-activity-item-parent, .recent-activity-item-link { width: 70%; margin: 0; } } .recent-activity-item-link { font-size: 14px; overflow: hidden; text-overflow: ellipsis; } .recent-activity-item-meta { color: var(--orion-semantic-foreground); margin: 15px 0 0 0; float: none; } @media (min-width: 768px) { .recent-activity-item-meta { margin: 0; float: right; } [dir=rtl] .recent-activity-item-meta { float: left; } } .recent-activity-item-time, .recent-activity-item-comment { display: inline-block; font-size: 13px; } .recent-activity-item-comment { padding-left: 5px; } [dir=rtl] .recent-activity-item-comment { padding: 0 5px 0 0; } .recent-activity-item-comment::before { display: inline-block; } .recent-activity-controls { padding-top: 15px; } .recent-activity-controls a { color: var(--orion-semantic-interaction-default); text-decoration: underline; } .recent-activity-controls a:visited { color: var(--orion-semantic-foreground_highlight); } .recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus { color: var(--orion-semantic-interaction-hover); } .recent-activity-accessibility-label { border: 0; clip: rect(0 0 0 0); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; } .recent-activity-comment-icon { display: none; } /***** Category pages *****/ .category-container { display: flex; justify-content: center; } .category-content { flex: 1; max-width: 100%; } .section-tree { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; } @media (min-width: 768px) { .section-tree { flex-direction: row; } } .section-tree .section { flex: initial; max-width: 100%; } @media (min-width: 768px) { .section-tree .section { flex: 0 0 45%; /* Two columns for tablet and desktop. Leaving 5% separation between columns */ } } .section-tree-title { margin-bottom: 0; font-size: 18px; font-weight: 600; } .section-tree-title a { color: var(--orion-semantic-foreground); } .section-tree .see-all-articles { display: block; padding: 15px 0; } .article-list-item { font-size: 16px; padding: 15px 0; text-overflow: ellipsis; overflow: hidden; } .article-list-item a { color: var(--orion-semantic-foreground); } .icon-star { color: var(--orion-semantic-interaction-default); font-size: 18px; } /***** Section pages *****/ .section-container { display: flex; flex-direction: column; gap: 30px; } @media (min-width: 1024px) { .section-container { flex-direction: row; align-items: flex-start; gap: 40px; } } .section-content { flex: 1 1 auto; min-width: 0; max-width: 100%; } @media (min-width: 1024px) { .section-aside { flex: 0 0 300px; } } .section-list { margin: 40px 0; } .section-list-item { border-bottom: 1px solid var(--orion-semantic-weak-default); font-size: 16px; padding: 15px 0; } .section-list-item:first-child { border-top: 1px solid var(--orion-semantic-weak-default); } .section-list-item a { align-items: center; color: var(--orion-semantic-foreground); display: flex; justify-content: space-between; } .see-all-sections-trigger { cursor: pointer; display: block; padding: 15px; text-align: center; } .see-all-sections-trigger[aria-hidden=true] { display: none; } /***** Article *****/ .article { /* * Two-column layout: article content on the left, sidebar on the right. * Content | Sidebar */ flex: 1 0 auto; } @media (min-width: 1024px) { .article { flex: 1 1 auto; min-width: 0; padding: 0; } } .article-container { display: flex; flex-direction: column; } @media (min-width: 1024px) { .article-container { flex-direction: row; align-items: flex-start; gap: 40px; } } .article-header { align-items: flex-start; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; margin-bottom: 40px; margin-top: 20px; } @media (min-width: 768px) { .article-header { flex-direction: row; margin-top: 0; } } .article-avatar { margin-right: 10px; } .article-author { margin-bottom: 10px; } .article-title { overflow: hidden; text-overflow: ellipsis; max-width: 100%; } @media (min-width: 768px) { .article-title { flex-basis: 100%; /* Take entire row */ } } .article-title .icon-lock { position: relative; left: -5px; vertical-align: baseline; } .article [role=button] { flex-shrink: 0; /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored)*/ width: 100%; } @media (min-width: 768px) { .article [role=button] { width: auto; } } .article-info { max-width: 100%; } .article-meta { display: inline-block; vertical-align: middle; } .article-body { display: flow-root; } .article-body a { color: var(--orion-semantic-interaction-default); text-decoration: underline; } .article-body a:visited { color: var(--orion-semantic-foreground_highlight); } .article-body a:hover, .article-body a:active, .article-body a:focus { color: var(--orion-semantic-interaction-hover); } .article-body img { height: auto; max-width: 100%; } .article-body p > img.image-style-align-left { float: left; margin: 8px 20px 6px 0; } .article-body p > img.image-style-align-right { float: right; margin: 8px 0px 6px 20px; } .article-body p > img.image-style-block-align-right { margin-left: auto; margin-right: 0; } .article-body p > img.image-style-block-align-left { margin-left: 0; margin-right: auto; } .article-body figure.image { display: table; margin: 0 auto; } .article-body figure.image > img { display: block; width: 100%; } .article-body figure.image.image-style-align-left { float: left; margin: 8px 20px 6px 0; } .article-body figure.image.image-style-align-right { float: right; margin: 8px 0px 6px 20px; } .article-body figure.image.image-style-block-align-right { margin-left: auto; margin-right: 0; } .article-body figure.image.image-style-block-align-left { margin-left: 0; margin-right: auto; } .article-body figcaption { padding: 10px 0; font-size: 12px; text-align: center; background-color: var(--orion-semantic-surface_2); } .article-body ul, .article-body ol { padding-left: 20px; list-style-position: outside; margin: 20px 0 20px 20px; } [dir=rtl] .article-body ul, [dir=rtl] .article-body ol { padding-right: 20px; padding-left: 0; margin-left: 0; margin-right: 20px; } .article-body ul > ul, .article-body ol > ol, .article-body ol > ul, .article-body ul > ol, .article-body li > ul, .article-body li > ol { margin: 0; } .article-body ul { list-style-type: disc; } .article-body :not(pre) > code { background: var(--orion-semantic-surface_1); border: 1px solid var(--orion-semantic-weak-default); border-radius: 3px; padding: 0 5px; margin: 0 2px; } .article-body pre { background: var(--orion-semantic-surface_1); border: 1px solid var(--orion-semantic-weak-default); border-radius: 3px; padding: 10px 15px; overflow: auto; white-space: pre; direction: ltr; } .article-body blockquote { border-left: 1px solid var(--orion-semantic-weak-default); color: var(--orion-semantic-foreground_weaker); font-style: italic; padding: 0 15px; } .article-body > p:last-child { margin-bottom: 0; } .article-body img[alt*=New-Issue-Icon i] { filter: invert(1); } .article-content { line-height: 1.6; margin: 40px 0; word-wrap: break-word; } .article-footer { align-items: center; display: flex; justify-content: space-between; padding-bottom: 20px; } .article-comment-count { color: var(--orion-semantic-foreground_weaker); } .article-comment-count:hover { text-decoration: none; } .article-comment-count-icon { vertical-align: middle; color: var(--orion-semantic-interaction-default); width: 18px; height: 18px; } .article-sidebar { order: 2; border-bottom: 1px solid var(--orion-semantic-weak-default); border-top: 1px solid var(--orion-semantic-weak-default); flex: 1 0 auto; margin-bottom: 20px; padding: 0; } @media (min-width: 1024px) { .article-sidebar { border: 0; flex: 0 0 300px; height: auto; max-width: 300px; } } .article-sidebar .help-links { margin-bottom: 24px; } .article-relatives { border-top: 1px solid var(--orion-semantic-weak-default); display: flex; flex-direction: column; padding: 20px 0; } @media (min-width: 768px) { .article-relatives { flex-direction: row; } } .article-relatives > * { flex: 1 0 50%; min-width: 50%; overflow-wrap: break-word; margin-right: 0; } .article-relatives > *:last-child { padding: 0; } @media (min-width: 768px) { .article-relatives > * { padding-right: 20px; } } .article-votes { border-top: 1px solid var(--orion-semantic-weak-default); padding: 30px 0; text-align: center; } .article-votes-question { font-size: 15px; font-weight: normal; margin-bottom: 0; } .article-vote { margin: 10px 5px; min-width: 90px; width: auto; } .article-more-questions { margin: 10px 0 20px; text-align: center; } .article-more-questions a { color: var(--orion-semantic-interaction-default); text-decoration: underline; } .article-more-questions a:visited { color: var(--orion-semantic-foreground_highlight); } .article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus { color: var(--orion-semantic-interaction-hover); } .article-return-to-top { border-top: 1px solid var(--orion-semantic-default-border); } @media (min-width: 1024px) { .article-return-to-top { display: none; } } .article-return-to-top a { color: var(--orion-semantic-foreground); display: block; padding: 20px 0; } .article-return-to-top a:hover, .article-return-to-top a:focus { text-decoration: none; } .article-return-to-top-icon { transform: rotate(0.5turn); } .article td > p:first-child, .article th > p:first-child { margin-top: 0; } .article td > p:last-child, .article th > p:last-child { margin-bottom: 0; } .sidenav-title { font-size: 15px; position: relative; font-weight: 600; } .sidenav-item { display: block; margin-top: 10px; margin-bottom: 16px; overflow: hidden; text-overflow: ellipsis; } .recent-articles li, .related-articles li { margin-bottom: 15px; } /***** Attachments *****/ /* Styles attachments inside posts, articles and comments */ .attachments .attachment-item { padding-left: 20px; position: relative; margin-bottom: 10px; } .attachments .attachment-item:last-child { margin-bottom: 0; } .attachments .attachment-item .attachment-icon { color: var(--orion-semantic-foreground); left: 0; position: absolute; top: 5px; } [dir=rtl] .attachments .attachment-item { padding-left: 0; padding-right: 20px; } [dir=rtl] .attachments .attachment-item .attachment-icon { left: auto; right: 0; } .upload-dropzone span { color: var(--orion-semantic-foreground_weaker); } /***** Social share links *****/ .share { padding: 0; white-space: nowrap; } .share li, .share a { display: inline-block; } .share li { height: 25px; width: 25px; } .share a { color: var(--orion-semantic-foreground_weaker); } .share a:hover { text-decoration: none; color: var(--orion-semantic-interaction-default); } .share a svg { height: 18px; width: 18px; display: block; } /***** Comments *****/ /* Styles comments inside articles, posts and requests */ .comment { border-bottom: 1px solid var(--orion-semantic-weak-default); padding: 20px 0; } .comment-heading, .recent-articles-title, .related-articles-title { margin-bottom: 5px; margin-top: 0; font-size: 18px; font-weight: 600; } .comment-overview { border-bottom: 1px solid var(--orion-semantic-weak-default); border-top: 1px solid var(--orion-semantic-weak-default); padding: 20px 0; } .comment-overview p { margin-top: 0; } .comment-callout { color: var(--orion-semantic-foreground_weaker); display: inline-block; font-size: 13px; margin-bottom: 0; } .comment-callout a { color: var(--orion-semantic-interaction-default); text-decoration: underline; } .comment-callout a:visited { color: var(--orion-semantic-foreground_highlight); } .comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus { color: var(--orion-semantic-interaction-hover); } .comment-sorter { display: inline-block; float: right; } .comment-sorter .dropdown-toggle { color: var(--orion-semantic-foreground_weaker); font-size: 13px; } [dir=rtl] .comment-sorter { float: left; } .comment-wrapper { display: flex; position: relative; } .comment-wrapper.comment-official { border: 1px solid var(--orion-semantic-interaction-default); padding: 40px 20px 20px; } @media (min-width: 768px) { .comment-wrapper.comment-official { padding-top: 20px; } } .comment-info { min-width: 0; padding-right: 20px; width: 100%; } [dir=rtl] .comment-info { padding-right: 0; padding-left: 20px; } .comment-author { align-items: flex-end; display: flex; flex-wrap: wrap; margin-bottom: 20px; } @media (min-width: 768px) { .comment-author { justify-content: space-between; } } .comment-avatar { margin-right: 10px; } [dir=rtl] .comment-avatar { margin-left: 10px; margin-right: 0; } .comment-meta { flex: 1 1 auto; } .comment-labels { flex-basis: 100%; } @media (min-width: 768px) { .comment-labels { flex-basis: auto; } } .comment .status-label:not(.status-label-official) { margin-top: 10px; } @media (min-width: 768px) { .comment .status-label:not(.status-label-official) { margin-top: 0; } } .comment-form { display: flex; padding-top: 30px; word-wrap: break-word; } .comment-container { width: 100%; } .comment-form-controls { display: none; margin-top: 10px; text-align: left; } @media (min-width: 768px) { [dir=ltr] .comment-form-controls { text-align: right; } } .comment-form-controls input[type=submit] { margin-top: 15px; } @media (min-width: 1024px) { .comment-form-controls input[type=submit] { margin-left: 15px; } [dir=rtl] .comment-form-controls input[type=submit] { margin-left: 0; margin-right: 15px; } } .comment-form-controls input[type=checkbox] { margin-right: 5px; } .comment-form-controls input[type=checkbox] [dir=rtl] { margin-left: 5px; } .comment-ccs { display: none; } .comment-ccs + textarea { margin-top: 10px; } .comment-attachments { margin-top: 10px; } .comment-attachments a { color: var(--orion-semantic-interaction-default); } .comment-body { -moz-hyphens: auto; -ms-hyphens: auto; -webkit-hyphens: auto; word-break: break-word; word-wrap: break-word; display: flow-root; font-family: "Bai Jamjuree", arial, sans-serif; line-height: 1.6; overflow-x: auto; } .comment-body a { color: var(--orion-semantic-interaction-default); text-decoration: underline; } .comment-body a:visited { color: var(--orion-semantic-foreground_highlight); } .comment-body a:hover, .comment-body a:active, .comment-body a:focus { color: var(--orion-semantic-interaction-hover); } .comment-body img { height: auto; max-width: 100%; } .comment-body p > img.image-style-align-left { float: left; margin: 8px 20px 6px 0; } .comment-body p > img.image-style-align-right { float: right; margin: 8px 0px 6px 20px; } .comment-body p > img.image-style-block-align-right { margin-left: auto; margin-right: 0; } .comment-body p > img.image-style-block-align-left { margin-left: 0; margin-right: auto; } .comment-body figure.image { display: table; margin: 0 auto; } .comment-body figure.image > img { display: block; width: 100%; } .comment-body figure.image.image-style-align-left { float: left; margin: 8px 20px 6px 0; } .comment-body figure.image.image-style-align-right { float: right; margin: 8px 0px 6px 20px; } .comment-body figure.image.image-style-block-align-right { margin-left: auto; margin-right: 0; } .comment-body figure.image.image-style-block-align-left { margin-left: 0; margin-right: auto; } .comment-body figcaption { padding: 10px 0; font-size: 12px; text-align: center; background-color: var(--orion-semantic-surface_2); } .comment-body ul, .comment-body ol { padding-left: 20px; list-style-position: outside; margin: 20px 0 20px 20px; } [dir=rtl] .comment-body ul, [dir=rtl] .comment-body ol { padding-right: 20px; padding-left: 0; margin-left: 0; margin-right: 20px; } .comment-body ul > ul, .comment-body ol > ol, .comment-body ol > ul, .comment-body ul > ol, .comment-body li > ul, .comment-body li > ol { margin: 0; } .comment-body ul { list-style-type: disc; } .comment-body :not(pre) > code { background: var(--orion-semantic-surface_1); border: 1px solid var(--orion-semantic-weak-default); border-radius: 3px; padding: 0 5px; margin: 0 2px; } .comment-body pre { background: var(--orion-semantic-surface_1); border: 1px solid var(--orion-semantic-weak-default); border-radius: 3px; padding: 10px 15px; overflow: auto; white-space: pre; direction: ltr; } .comment-body blockquote { border-left: 1px solid var(--orion-semantic-weak-default); color: var(--orion-semantic-foreground_weaker); font-style: italic; padding: 0 15px; } .comment-mark-as-solved { display: inline-block; } /***** Vote *****/ /* Used in article comments, post comments and post */ .vote { display: flex; flex-direction: column; text-align: center; } .vote a:active, .vote a:hover, .vote a:focus { text-decoration: none; } .vote-sum { color: var(--orion-semantic-foreground_weaker); display: block; margin: 3px 0; } [dir=rtl] .vote-sum { direction: ltr; unicode-bidi: bidi-override; } .vote-up svg { transform: scale(1, -1); } .vote-up:hover, .vote-down:hover { color: var(--orion-semantic-interaction-default); } .vote-up, .vote-down { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; border: none; color: var(--orion-semantic-foreground_weaker); cursor: pointer; min-height: 35px; min-width: 35px; display: flex; align-items: center; justify-content: center; } .vote-voted { color: var(--orion-semantic-interaction-default); } .vote-voted:hover { color: var(--orion-semantic-interaction-hover); } /***** Actions *****/ /* Styles admin and en user actions(edit, delete, change status) in comments and posts */ .actions { text-align: center; flex-shrink: 0; /*Avoid collapsing elements in Safari*/ } .actions button { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; border: none; cursor: pointer; min-height: 35px; min-width: 35px; display: flex; align-items: center; justify-content: center; } /***** Community *****/ .community-hero { background-image: url(/hc/theming_assets/01KY0EKY0NQQHJGF5GCT0EC0E3); margin-bottom: 10px; } .community-footer { padding-top: 50px; text-align: center; } .community-footer-title { font-size: 16px; margin-bottom: 20px; } .community-featured-posts .title { font-size: 18px; font-weight: 600; } .community-featured-posts, .community-activity { padding-top: 40px; width: 100%; } .community-header { margin-bottom: 30px; } .community-header .title { margin-bottom: 0; font-size: 16px; } .post-to-community { margin-top: 10px; } @media (min-width: 768px) { .post-to-community { margin: 0; } } /* Community topics grid */ .topics { max-width: none; width: 100%; } .topics-item .meta-group { justify-content: center; margin-top: 20px; } /* Community topic page */ .topic-header { border-bottom: 1px solid var(--orion-semantic-weak-default); font-size: 13px; } @media (min-width: 768px) { .topic-header { padding-bottom: 10px; } } .topic-header .dropdown { display: block; border-top: 1px solid var(--orion-semantic-weak-default); padding: 10px 0; } @media (min-width: 768px) { .topic-header .dropdown { border-top: 0; display: inline-block; margin-right: 20px; padding: 0; } } .no-posts-with-filter { margin-top: 20px; margin-bottom: 20px; } /* Topic, post and user follow button */ .community-follow { margin-bottom: 10px; width: 100%; } @media (min-width: 768px) { .community-follow { margin-bottom: 0; width: auto; } } .community-follow button { line-height: 30px; padding: 0 10px 0 15px; position: relative; width: 100%; } @media (min-width: 768px) { .community-follow button { width: auto; } } .community-follow button:hover { background-color: var(--orion-semantic-interaction-default); } .community-follow button:hover::after, .community-follow button:focus::after { border-color: var(--orion-semantic-interaction_contrast); color: var(--orion-semantic-interaction_contrast); } .community-follow button[data-selected=true] { background-color: var(--orion-semantic-interaction-default); color: var(--orion-semantic-interaction_contrast); } .community-follow button[data-selected=true]::after { border-left: 1px solid var(--orion-semantic-interaction_contrast); color: var(--orion-semantic-interaction_contrast); } .community-follow button[data-selected=true]:hover { background-color: var(--orion-semantic-interaction-hover); border-color: var(--orion-semantic-interaction-hover); } .community-follow button::after { border-left: 1px solid var(--orion-semantic-interaction-default); content: attr(data-follower-count); color: var(--orion-semantic-interaction-default); display: inline-block; font-family: "univia-pro", arial, sans-serif; margin-left: 15px; padding-left: 10px; position: absolute; right: 10px; } @media (min-width: 768px) { .community-follow button::after { position: static; } } [dir=rtl] .community-follow button::after { border-left: 0; border-right: 1px solid var(--orion-semantic-interaction-default); margin: 0 10px 0 0; padding: 0 10px 0 0; } /***** Striped list *****/ /* Used in community posts list and requests list */ .striped-list { padding: 0; } .striped-list-item { align-items: flex-start; border-bottom: 1px solid var(--orion-semantic-weak-default); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px 0; } @media (min-width: 768px) { .striped-list-item { align-items: center; flex-direction: row; } } .striped-list-info { flex: 2; } .striped-list-title { color: var(--orion-semantic-interaction-default); margin-bottom: 10px; margin-right: 5px; } .striped-list-title:hover, .striped-list-title:focus, .striped-list-title:active { text-decoration: underline; } .striped-list-title:visited { color: var(--orion-semantic-foreground_highlight); } .striped-list .meta-group { margin: 5px 0; } .striped-list-count { color: var(--orion-semantic-foreground_weaker); font-size: 13px; justify-content: flex-start; text-transform: capitalize; } @media (min-width: 768px) { .striped-list-count { display: flex; flex: 1; justify-content: space-around; } } .striped-list-count-item::after { content: "·"; display: inline-block; padding: 0 5px; } @media (min-width: 768px) { .striped-list-count-item::after { display: none; } } .striped-list-count-item:last-child::after { display: none; } .striped-list-number { text-align: center; } @media (min-width: 768px) { .striped-list-number { color: var(--orion-semantic-foreground); display: block; } } /***** Status labels *****/ /* Styles labels used in posts, articles and requests */ .status-label { background-color: var(--orion-semantic-success-default); border-radius: 4px; color: var(--orion-semantic-foreground); font-size: 12px; font-weight: 600; margin-right: 2px; padding: 3px 10px; vertical-align: middle; white-space: nowrap; display: inline-block; } .status-label:hover, .status-label:active, .status-label:focus { text-decoration: none; } .status-label-pinned, .status-label-featured, .status-label-official { background-color: var(--orion-semantic-interaction-default); } .status-label-official { border-radius: 0; margin-right: 0; position: absolute; right: 0; text-align: center; top: 0; width: 100%; } @media (min-width: 768px) { .status-label-official { border-radius: 0 0 4px 4px; right: 30px; width: auto; } } [dir=rtl] .status-label-official { left: 30px; right: auto; } .status-label-not-planned, .status-label-closed { background-color: var(--orion-semantic-surface_3); color: var(--orion-semantic-foreground_weaker); } .status-label-pending, .status-label-pending-moderation { background-color: var(--orion-semantic-interaction-default); text-align: center; } .status-label-open { background-color: var(--orion-semantic-destructive-default); } .status-label-solved { background-color: rgb(var(--orion-color-neutral-2-rgb)); } .status-label-new { background-color: var(--orion-semantic-warning-default); color: var(--orion-semantic-warning_contrast); } .status-label-hold { background-color: var(--orion-semantic-surface_4); } .status-label-request { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 768px) { .status-label-request { max-width: 150px; } } /***** Post *****/ /* * The post grid is defined this way: * Content | Sidebar * 70% | 30% */ .post { flex: 1; margin-bottom: 10px; } @media (min-width: 1024px) { .post { flex: 1 0 70%; max-width: 70%; } } .post-container { display: flex; flex-direction: column; } @media (min-width: 1024px) { .post-container { flex-direction: row; } } .post-header { align-items: center; display: flex; flex-direction: column; justify-content: space-between; margin-bottom: 10px; } @media (min-width: 768px) { .post-header { align-items: baseline; flex-direction: row; } } .post-header .status-label { vertical-align: super; } .post-title { margin-bottom: 20px; width: 100%; } @media (min-width: 768px) { .post-title { margin-bottom: 0; padding-right: 10px; } } .post-title h1 { display: inline; vertical-align: middle; } @media (min-width: 768px) { .post-title h1 { margin-right: 5px; } } .post-author { align-items: flex-start; display: flex; justify-content: space-between; } .post-avatar { margin-bottom: 30px; } .post-content { font-family: "Bai Jamjuree", arial, sans-serif; line-height: 1.6; word-break: break-word; } .post-info-container { display: flex; margin-bottom: 40px; } .post-info { min-width: 0; padding-right: 20px; width: 100%; } [dir=rtl] .post-info { padding-right: 0; padding-left: 20px; } .post-meta { display: inline-block; flex: 1; margin-left: 10px; vertical-align: middle; } [dir=rtl] .post-meta { margin-left: 0; margin-right: 10px; } .post-body { display: flow-root; } .post-body a { color: var(--orion-semantic-interaction-default); text-decoration: underline; } .post-body a:visited { color: var(--orion-semantic-foreground_highlight); } .post-body a:hover, .post-body a:active, .post-body a:focus { color: var(--orion-semantic-interaction-hover); } .post-body img { height: auto; max-width: 100%; } .post-body p > img.image-style-align-left { float: left; margin: 8px 20px 6px 0; } .post-body p > img.image-style-align-right { float: right; margin: 8px 0px 6px 20px; } .post-body p > img.image-style-block-align-right { margin-left: auto; margin-right: 0; } .post-body p > img.image-style-block-align-left { margin-left: 0; margin-right: auto; } .post-body figure.image { display: table; margin: 0 auto; } .post-body figure.image > img { display: block; width: 100%; } .post-body figure.image.image-style-align-left { float: left; margin: 8px 20px 6px 0; } .post-body figure.image.image-style-align-right { float: right; margin: 8px 0px 6px 20px; } .post-body figure.image.image-style-block-align-right { margin-left: auto; margin-right: 0; } .post-body figure.image.image-style-block-align-left { margin-left: 0; margin-right: auto; } .post-body figcaption { padding: 10px 0; font-size: 12px; text-align: center; background-color: var(--orion-semantic-surface_2); } .post-body ul, .post-body ol { padding-left: 20px; list-style-position: outside; margin: 20px 0 20px 20px; } [dir=rtl] .post-body ul, [dir=rtl] .post-body ol { padding-right: 20px; padding-left: 0; margin-left: 0; margin-right: 20px; } .post-body ul > ul, .post-body ol > ol, .post-body ol > ul, .post-body ul > ol, .post-body li > ul, .post-body li > ol { margin: 0; } .post-body ul { list-style-type: disc; } .post-body :not(pre) > code { background: var(--orion-semantic-surface_1); border: 1px solid var(--orion-semantic-weak-default); border-radius: 3px; padding: 0 5px; margin: 0 2px; } .post-body pre { background: var(--orion-semantic-surface_1); border: 1px solid var(--orion-semantic-weak-default); border-radius: 3px; padding: 10px 15px; overflow: auto; white-space: pre; direction: ltr; } .post-body blockquote { border-left: 1px solid var(--orion-semantic-weak-default); color: var(--orion-semantic-foreground_weaker); font-style: italic; padding: 0 15px; } .post-footer { align-items: center; display: flex; justify-content: space-between; padding-bottom: 20px; } .post-comment-count { color: var(--orion-semantic-foreground_weaker); } .post-comment-count:hover { text-decoration: none; } .post-comment-count .icon-comments { color: var(--orion-semantic-interaction-default); display: inline-block; width: 18px; height: 18px; margin: 5px; vertical-align: middle; } .post-sidebar { border-top: 1px solid var(--orion-semantic-weak-default); flex: 1; padding: 30px 0; text-align: center; } @media (min-width: 1024px) { .post-sidebar { border: 0; flex: 1 0 30%; padding: 0 0 0 50px; text-align: initial; } [dir=rtl] .post-sidebar { padding: 0 50px 0 0; } } .post-sidebar-title { font-size: 18px; font-weight: 600; } .post-comments { margin-bottom: 20px; } @media (min-width: 1024px) { .post-comments { margin-bottom: 0; } } /***** Community Badges *****/ /* Styles labels used next to the authors of article comments, community posts, and community comments */ .community-badge-title { background-color: var(--orion-semantic-surface_3); border-radius: 4px; color: var(--orion-semantic-foreground); font-size: 12px; font-weight: 600; padding: 0px 8px; vertical-align: top; white-space: nowrap; display: inline-block; line-height: 18px; vertical-align: middle; } .community-badge-titles { display: inline; } .community-badge-achievement { display: block; height: 16px; white-space: nowrap; width: 16px; } .community-badge-achievement img { width: 100%; height: 100%; } .community-badge-achievements { display: flex; } .community-badge-achievements-rest { font-size: 12px; font-weight: 600; line-height: 20px; text-align: center; vertical-align: top; } .community-badge { margin: 2px; } .profile-info .community-badge-title { padding: 2px 8px; line-height: 20px; } .profile-info .community-badge-achievement { height: 40px; width: 40px; } .profile-info .community-badge-achievements-rest { line-height: 40px; font-size: 20px; } /* Navigation element that collapses on mobile */ .collapsible-nav { flex-direction: column; font-size: 14px; position: relative; } @media (min-width: 768px) { .collapsible-nav { flex-direction: row; } } .collapsible-nav-border { border-bottom: 1px solid var(--orion-semantic-weak-default); border-top: 1px solid var(--orion-semantic-weak-default); } @media (min-width: 768px) { .collapsible-nav-border { border-top: 0; } } .collapsible-nav-toggle { top: 22.5px; transform: translateY(-50%); position: absolute; right: 0; padding: 0; border: 0; background: none; width: 25px; height: 25px; border-radius: 50%; } @media (min-width: 768px) { .collapsible-nav-toggle { display: none; } } [dir=rtl] .collapsible-nav-toggle { left: 0; right: auto; } .collapsible-nav-toggle-icon { display: none; } .collapsible-nav-toggle[aria-expanded=false] .chevron-icon { display: inline-block; } .collapsible-nav-toggle[aria-expanded=true] .x-icon { display: inline-block; } .collapsible-nav-toggle:focus { outline: none; border: 1px solid var(--orion-semantic-interaction-default); } .collapsible-nav-list { display: flex; flex-direction: column; } @media (min-width: 768px) { .collapsible-nav-list { flex-direction: row; } } .collapsible-nav-list li { color: var(--orion-semantic-foreground); line-height: 45px; order: 1; } @media (min-width: 768px) { .collapsible-nav-list li { line-height: normal; margin-right: 30px; } [dir=rtl] .collapsible-nav-list li { margin-left: 30px; margin-right: 0; } .collapsible-nav-list li a { text-decoration: none; padding: 15px 0; } } .collapsible-nav-list li a { color: var(--orion-semantic-foreground); display: block; } @media (min-width: 768px) { .collapsible-nav-list li:hover { border-bottom: 4px solid var(--orion-semantic-surface_3); } .collapsible-nav-list li:hover a:not([aria-current=page]) { padding: 15px 0 11px 0; text-decoration: none; } } .collapsible-nav-list li:not([aria-selected=true]), .collapsible-nav-list li:not(.current) { display: none; } @media (min-width: 768px) { .collapsible-nav-list li:not([aria-selected=true]), .collapsible-nav-list li:not(.current) { display: block; } } @media (min-width: 768px) { .collapsible-nav-list li[aria-selected=true] { padding: 15px 0 11px 0; } } .collapsible-nav-list li[aria-selected=true], .collapsible-nav-list li.current { order: 0; position: relative; } @media (min-width: 768px) { .collapsible-nav-list li[aria-selected=true], .collapsible-nav-list li.current { border-bottom: 4px solid var(--orion-semantic-interaction-default); order: 1; } } .collapsible-nav-list li[aria-selected=true] a, .collapsible-nav-list li.current a { color: var(--orion-semantic-foreground); } .collapsible-nav[aria-expanded=true] li:not([aria-selected=true]), .collapsible-nav[aria-expanded=true] li:not(.current) { display: block; } /* Sidebar navigation that collapses on mobile */ .collapsible-sidebar { flex: 1; max-height: 45px; overflow: hidden; padding: 10px 0; position: relative; } @media (min-width: 1024px) { .collapsible-sidebar { max-height: none; padding: 0; } } .collapsible-sidebar-title { margin-top: 0; } .collapsible-sidebar-toggle { position: absolute; top: 22.5px; transform: translateY(-50%); right: 0; padding: 0; border: 0; background: none; color: var(--orion-semantic-foreground); width: 25px; height: 25px; border-radius: 50%; } @media (min-width: 1024px) { .collapsible-sidebar-toggle { display: none; } } [dir=rtl] .collapsible-sidebar-toggle { left: 0; right: auto; } .collapsible-sidebar-toggle-icon { display: none; } .collapsible-sidebar-toggle[aria-expanded=false] .chevron-icon { display: inline-block; } .collapsible-sidebar-toggle[aria-expanded=true] .x-icon { display: inline-block; } .collapsible-sidebar-toggle:focus { outline: none; border: 1px solid var(--orion-semantic-interaction-default); } .collapsible-sidebar-body { display: none; } @media (min-width: 1024px) { .collapsible-sidebar-body { display: block; } } .collapsible-sidebar[aria-expanded=true] { max-height: none; } .collapsible-sidebar[aria-expanded=true] .collapsible-sidebar-body { display: block; } /***** My activities *****/ .my-activities-nav { background-color: var(--orion-semantic-surface_2); margin-bottom: 20px; } .my-activities-sub-nav { margin-bottom: 30px; } .my-activities-table .striped-list-title { /* My activities tables */ display: block; margin-bottom: 10px; max-width: 350px; white-space: normal; } @media (min-width: 1024px) { .my-activities-table .striped-list-title { margin-bottom: 0; max-width: 500px; min-width: 350px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .my-activities-table thead { display: none; } @media (min-width: 768px) { .my-activities-table thead { display: table-header-group; } } .my-activities-table th:first-child, .my-activities-table td:first-child { padding-left: 0; } @media (min-width: 1024px) { .my-activities-table th:first-child, .my-activities-table td:first-child { width: 500px; } } .my-activities-table th:last-child, .my-activities-table td:last-child { padding-right: 0; } .my-activities-table td:not(:first-child) { display: none; } @media (min-width: 768px) { .my-activities-table td:not(:first-child) { display: table-cell; } } /* Requests table */ .requests-search { width: 100%; } .requests-table-toolbar { align-items: flex-end; display: flex; flex-direction: column; } @media (min-width: 768px) { .requests-table-toolbar { flex-direction: row; } } .requests-table-toolbar .search { flex: 1; width: 100%; } .requests-table-toolbar .request-table-filter { width: 100%; } @media (min-width: 768px) { .requests-table-toolbar .request-table-filter { width: auto; } } .requests-table-toolbar .request-filter { display: block; } @media (min-width: 768px) { .requests-table-toolbar .request-filter { margin: 0 0 0 30px; } [dir=rtl] .requests-table-toolbar .request-filter { margin: 0 30px 0 0; } } .requests-table-toolbar .request-filter-label { font-size: 13px; margin-top: 30px; } @media (min-width: 768px) { .requests-table-toolbar .request-filter-label { margin-top: 0; } } .requests-table-toolbar select { max-height: 40px; margin-bottom: 30px; width: 100%; } @media (min-width: 768px) { .requests-table-toolbar select { margin-bottom: 0; max-width: 300px; width: auto; } } @media (min-width: 768px) { .requests-table-toolbar .organization-subscribe { margin-left: 10px; } [dir=rtl] .requests-table-toolbar .organization-subscribe { margin: 0 10px 0 0; } } .requests-table-toolbar .organization-subscribe button { line-height: 40px; max-height: 40px; padding: 0 20px; } .requests-table-toolbar + .requests-search-info { margin-top: 15px; } .requests-table-toolbar + .requests-search-info.meta-data::after { content: ""; margin: 0; } .requests-table-toolbar + .requests-search-info + .requests { margin-top: 20px; } .requests-table-toolbar + .requests { margin-top: 40px; } .requests .requests-table-meta { display: block; } @media (min-width: 768px) { .requests .requests-table-meta { display: none; } } .requests .requests-table thead { display: none; } @media (min-width: 768px) { .requests .requests-table thead { display: table-header-group; } } .requests .requests-table-info { display: block; } @media (min-width: 768px) { .requests .requests-table-info { display: table-cell; vertical-align: middle; width: auto; } } .requests .requests-table .requests-link { position: relative; } .requests .requests-table .requests-sort-symbol { position: absolute; left: calc(100% + 3px); bottom: 0; font-size: 10px; } /* Following table */ @media (min-width: 768px) { .subscriptions-subscribe button { width: auto; } } .subscriptions-table td:last-child { display: block; } @media (min-width: 768px) { .subscriptions-table td:last-child { display: table-cell; } } .subscriptions-table td:first-child { display: flex; align-items: center; } .subscriptions-table .user-avatar { margin-right: 10px; } .subscriptions .striped-list-title { display: inline-block; vertical-align: middle; } /* Contributions table */ .contributions-table td:last-child { color: var(--orion-semantic-foreground_weaker); font-size: 13px; } @media (min-width: 768px) { .contributions-table td:last-child { color: inherit; font-size: inherit; font-weight: inherit; } } .no-activities { color: var(--orion-semantic-foreground_weaker); } /***** Request *****/ .request-container { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; } @media (min-width: 1024px) { .request-container { align-items: flex-start; flex-direction: row; } } .request-container .comment-container { min-width: 0; } .request-breadcrumbs { margin-bottom: 40px; } @media (min-width: 1024px) { .request-breadcrumbs { margin-bottom: 60px; } } .request-main { flex: 1 0 auto; max-width: 100%; order: 1; } .request-main .comment-fields, .request-main .request-submit-comment { display: none; } .request-main .comment-fields.shown { display: block; } .request-main .request-submit-comment.shown { display: inline; } @media (min-width: 1024px) { .request-main { flex: 0 0 66%; order: 0; min-width: 0; } } .request-main .comment-form-controls { display: block; } .request-main .comment-ccs { display: block; } .request-main .comment-show-container { background-color: var(--orion-semantic-surface_1); border-radius: 2px; border: 1px solid var(--orion-semantic-weak-default); color: var(--orion-semantic-foreground_weaker); text-align: inherit; padding: 8px 25px; width: 100%; } .request-main .comment-show-container.hidden { display: none; } .request-main .form-field.comment-ccs > ul { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; } .request-main .form-field.comment-ccs > ul[data-hc-focus=true] { border: 1px solid var(--orion-semantic-interaction-default); } .request-main .form-field.comment-ccs > input[type=text] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; } .request-main .comment-ccs + textarea { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: 0; } .request-main .comment-ccs + textarea:focus { border-top: 1px solid var(--orion-semantic-interaction-default); } .request-main input#mark_as_solved { display: none; } .request-title { width: 100%; } @media (min-width: 1024px) { .request-title { border-bottom: 1px solid var(--orion-semantic-weak-default); margin-bottom: 0; max-width: 66%; padding-bottom: 20px; } } .request-sidebar { border-bottom: 1px solid var(--orion-semantic-weak-default); border-top: 1px solid var(--orion-semantic-weak-default); flex: 1 0 auto; order: 0; } @media (min-width: 1024px) { .request-sidebar { background-color: var(--orion-semantic-surface_1); border: 0; font-size: 13px; flex: 0 0 auto; padding: 0 20px; width: 30%; } } .request-sidebar h2 { font-size: 15px; font-weight: 600; position: relative; } @media (min-width: 1024px) { .request-sidebar h2 { display: none; } } .request-details { border-bottom: 1px solid var(--orion-semantic-weak-default); font-size: 0; margin: 0; padding-bottom: 20px; } .request-details:last-child { border: 0; } .request-details dt, .request-details dd { display: inline-block; vertical-align: top; font-size: 13px; margin: 20px 0 0 0; } .request-details dd { padding: 0 10px; width: 60%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .request-details dd::after { content: "\a"; white-space: pre; } .request-details dt { line-break: strict; color: var(--orion-semantic-foreground_weaker); width: 40%; } .request-details .request-collaborators { display: inline-block; } .request-attachments dt, .request-attachments dd { width: 100%; } .request-attachments dd { margin: 10px 0 0 0; } .request-form textarea { min-height: 120px; } .request-follow-up { padding-top: 20px; } /***** Pagination *****/ .pagination { margin: 20px 0; text-align: center; } .pagination-next, .pagination-prev, .pagination-first, .pagination-last { display: inline-block; } .pagination-first-link, .pagination-last-link { padding: 0 10px; } .pagination-first-text, .pagination-last-text { border: 0; clip: rect(0 0 0 0); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; } .pagination-next-link { padding-right: 10px; } .pagination-next-text { margin-right: 10px; } [dir=rtl] .pagination-next-link { padding-left: 10px; } [dir=rtl] .pagination-next-text { margin-left: 10px; } .pagination-prev-link { padding-left: 10px; } .pagination-prev-text { margin-left: 10px; } [dir=rtl] .pagination-prev-link { padding-right: 10px; } [dir=rtl] .pagination-prev-text { margin-right: 10px; } /***** Metadata *****/ .meta-group { display: block; } .meta-group-opposite { float: right; } [dir=rtl] .meta-group-opposite { float: left; } .meta-group * { display: inline; } .meta-data { color: var(--orion-semantic-foreground_weaker); font-size: 13px; } .meta-data:not(:last-child)::after { content: "·"; margin: 0 5px; } /* User Profiles */ .profile-header { padding: 30px 0; background-color: var(--orion-semantic-surface_1); } .profile-header .container { display: flex; flex-wrap: wrap; } @media (min-width: 768px) { .profile-header .container { flex-wrap: nowrap; } } .profile-header .profile-info { flex-basis: 100%; display: flex; flex-wrap: wrap; min-width: 0; } .profile-avatar { position: relative; line-height: 0; align-self: center; margin-right: 10px; } [dir=rtl] .profile-avatar { margin-left: 10px; margin-right: 0; } .profile-avatar .user-avatar { width: 80px; height: 80px; } .profile-avatar .icon-agent { bottom: 0; right: 0; } .profile-header .basic-info { -moz-hyphens: auto; -ms-hyphens: auto; -webkit-hyphens: auto; word-break: break-word; word-wrap: break-word; display: flex; flex-direction: column; justify-content: center; flex-grow: 1; flex-basis: 0; min-width: 0; } .profile-header .basic-info .name { margin: 0; line-height: 25px; vertical-align: middle; display: inline; } .profile-header .options { display: flex; flex-basis: 100%; margin-top: 12px; align-items: flex-start; flex-wrap: wrap; } @media (min-width: 768px) { .profile-header .options { flex-wrap: nowrap; flex-basis: auto; margin-top: 0; margin-left: 10px; } [dir=rtl] .profile-header .options { margin-left: 0; margin-right: 10px; } .profile-header .options > :not(:last-child) { margin-bottom: 0; margin-right: 10px; } [dir=rtl] .profile-header .options > :not(:last-child) { margin-left: 10px; margin-right: 0; } } .user-profile-actions { width: 100%; margin-bottom: 15px; } .profile-header .description { -moz-hyphens: auto; -ms-hyphens: auto; -webkit-hyphens: auto; word-break: break-word; word-wrap: break-word; margin: 15px 0; flex-basis: 100%; } .profile-stats { font-size: 13px; display: flex; flex-direction: column; flex-basis: 100%; } .profile-stats .stat { display: flex; margin-bottom: 10px; } .profile-stats .stat-label { color: var(--orion-semantic-foreground_weaker); flex: 0 0 100px; margin-right: 10px; } [dir=rtl] .profile-stats .stat-label { margin-left: 10px; margin-right: 0; } .profile-stats-activity { border-top: solid 1px var(--orion-semantic-surface_3); margin-top: 15px; } @media (min-width: 768px) { .profile-stats-activity { border-top: 0; flex-direction: row; } } @media (min-width: 768px) { .profile-stats-activity .stat { flex-direction: column; } } .profile-stats-activity .stat:first-child { margin-top: 10px; } @media (min-width: 768px) { .profile-stats-activity .stat:first-child { margin-top: 0; } } @media (min-width: 768px) { .profile-stats-activity .stat:not(:last-child) { margin-right: 40px; } [dir=rtl] .profile-stats-activity .stat:not(:last-child) { margin-left: 40px; margin-right: 0; } } @media (min-width: 768px) { .profile-stats-activity .stat-label { flex: 0 1 auto; } } .profile-stats-counters { border-bottom: solid 1px var(--orion-semantic-surface_3); } @media (min-width: 768px) { .profile-stats-counters { flex: 0 0 200px; border-bottom: 0; margin-left: 40px; } [dir=rtl] .profile-stats-counters { margin-left: 0; margin-right: 40px; } } @media (min-width: 1024px) { .profile-stats-counters { flex: 0 0 270px; margin-left: 60px; } [dir=rtl] .profile-stats-counters { margin-right: 60px; margin-left: 0; } } @media (min-width: 768px) { .profile-stats-counters .stat { flex-direction: column; } } @media (min-width: 1024px) { .profile-stats-counters .stat { flex-direction: row; } } @media (min-width: 768px) { .profile-stats-counters .stat:not(:last-child) { margin-bottom: 15px; } } @media (min-width: 768px) { .profile-stats-counters .stat-label { flex: 0 1 auto; } } @media (min-width: 1024px) { .profile-stats-counters .stat-label { flex: 0 0 100px; } } .profile-private-badge { flex-basis: 100%; border: solid 1px var(--orion-semantic-interaction-default); border-radius: 4px; color: var(--orion-semantic-interaction-default); padding: 5px 20px; font-size: 12px; text-align: center; } .profile-private-badge .profile-private-icon { margin-left: 5px; line-height: 15px; } @media (min-width: 768px) { .profile-private-badge { flex-basis: auto; } } .profile-nav { background-color: var(--orion-semantic-surface_2); margin-bottom: 37px; } .profile-section { width: 100%; } @media (min-width: 1024px) { .profile-section { width: calc(100% - 330px); } } .profile-section-header { display: flex; flex-wrap: wrap; } .profile-section-title { flex-basis: 100%; margin-bottom: 0; } .profile-section-description { flex-basis: 100%; padding: 10px 0; color: var(--orion-semantic-foreground_weaker); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 768px) { .profile-section-description { flex: 1 0 50%; padding-bottom: 0; } } .profile-section-sorter { flex-basis: 100%; border-top: solid 1px var(--orion-semantic-surface_3); font-size: 13px; } .profile-section-sorter .dropdown-toggle { padding: 10px 0; width: 100%; } .profile-section-sorter .dropdown-toggle::after { position: absolute; right: 0; } [dir=rtl] .profile-section-sorter .dropdown-toggle::after { left: 0; right: initial; } @media (min-width: 768px) { .profile-section-sorter .dropdown-toggle::after { position: relative; } } @media (min-width: 768px) { .profile-section-sorter { flex: 0 1 auto; padding-top: 0; border-top: 0; margin-left: 20px; } [dir=rtl] .profile-section-sorter { margin-left: 0; margin-right: 20px; } } .profile-badges-items { margin-top: 25px; } .profile-badges-item { border-top: 1px solid var(--orion-semantic-weak-default); display: flex; flex: 1; flex-direction: row; justify-content: flex-start; padding: 27px 12px; } .profile-badges-item > div { padding-right: 12px; padding-left: 12px; } .profile-badges-item-image { height: 40px; width: 40px; margin-right: 12px; } .profile-badges-item-image img { max-height: 40px; } [dir=rtl] .profile-badges-item-image { margin-left: 12px; margin-right: 0; } .profile-badges-item-title, .profile-badges-item-metadata-title { font-size: 15px; margin-bottom: 10px; } .profile-badges-item-title { font-weight: 600; } .profile-badges-item-description, .profile-badges-item-metadata-description { color: var(--orion-semantic-foreground_weaker); font-size: 13px; margin: 0; } .profile-badges-item-metadata { margin-left: auto; text-align: right; } [dir=rtl] .profile-badges-item-metadata { margin-left: 0; margin-right: auto; text-align: left; } .profile-contribution { -moz-hyphens: auto; -ms-hyphens: auto; -webkit-hyphens: auto; word-break: break-word; word-wrap: break-word; padding: 20px 0; position: relative; } .profile-contribution-header { margin-bottom: 5px; } .profile-contribution-title { margin: 0 0 5px 0; display: inline; line-height: 21px; font-size: 15px; vertical-align: middle; } .profile-contribution-body { margin: 10px 0; } .profile-contribution-list > .profile-contribution { border-top: 1px solid var(--orion-semantic-surface_3); } @media (min-width: 768px) { .profile-contribution-list > .profile-contribution { padding-left: 30px; } [dir=rtl] .profile-contribution-list > .profile-contribution { padding-right: 30px; padding-left: 0; } } .profile-contribution-list > .profile-contribution:last-child { border-bottom: 1px solid var(--orion-semantic-surface_3); } .profile-contribution-icon { left: 0; position: absolute; color: var(--orion-semantic-foreground_weaker); line-height: 25px; } [dir=rtl] .profile-contribution-icon { right: 0; } .profile-contribution-icon svg { vertical-align: middle; } .profile-contribution-list .profile-contribution-header { margin-left: 30px; } [dir=rtl] .profile-contribution-list .profile-contribution-header { padding-right: 30px; padding-left: 0; } @media (min-width: 768px) { .profile-contribution-list .profile-contribution-header { margin-left: 0; } [dir=rtl] .profile-contribution-list .profile-contribution-header { padding-right: 0; } } .profile-comments .profile-contribution-breadcrumbs { margin-left: 30px; } [dir=rtl] .profile-comments .profile-contribution-breadcrumbs { padding-right: 30px; padding-left: 0; } @media (min-width: 768px) { .profile-comments .profile-contribution-breadcrumbs { margin-left: 0; } [dir=rtl] .profile-comments .profile-contribution-breadcrumbs { padding-right: 0; } } .profile-section .no-activity, .profile-section .private-activity { display: block; margin-top: 40px; color: var(--orion-semantic-foreground_weaker); } .private-activity-icon { margin-right: 10px; } [dir=rtl] .private-activity-icon { margin-right: 0; margin-left: 10px; } .profile-activity-list { margin-top: 25px; } .profile-activity { position: relative; padding-bottom: 30px; } @media (min-width: 768px) { .profile-activity { padding-left: 20px; } [dir=rtl] .profile-activity { padding-right: 20px; padding-left: 0; } } @media (min-width: 768px) { .profile-activity:not(:last-child) { border-left: 1px solid var(--orion-semantic-surface_3); } [dir=rtl] .profile-activity:not(:last-child) { border-left: 0; border-right: 1px solid var(--orion-semantic-surface_3); } } .profile-activity-header { display: flex; align-items: center; margin-left: 35px; } [dir=rtl] .profile-activity-header { margin-left: 0; margin-right: 35px; } @media (min-width: 768px) { .profile-activity-header { margin-left: 0; } [dir=rtl] .profile-activity-header { margin-right: 0; } } .profile-activity-header .user-avatar { width: 40px; height: 40px; margin-right: 10px; min-width: 40px; align-self: flex-start; } [dir=rtl] .profile-activity-header .user-avatar { margin-left: 10px; margin-right: 0; } .profile-activity-description { -moz-hyphens: auto; -ms-hyphens: auto; -webkit-hyphens: auto; word-break: break-word; word-wrap: break-word; margin: 0; min-width: 0; width: 100%; } .profile-activity-description span:first-child { font-weight: 600; display: inline; } .profile-activity-contribution { padding: 20px; margin-top: 10px; border-radius: 8px; background-color: var(--orion-semantic-surface_1); } @media (min-width: 768px) { .profile-activity-contribution { margin-top: 0; margin-left: 50px; } [dir=rtl] .profile-activity-contribution { margin-left: 0; margin-right: 50px; } } .profile-activity-icon { position: absolute; left: 0; width: 28px; height: 28px; border-radius: 50%; background-size: 14px 14px; background-repeat: no-repeat; background-color: var(--orion-semantic-background); background-position: 50% 50%; text-align: center; color: var(--orion-semantic-foreground_weaker); } [dir=rtl] .profile-activity-icon { right: 0; } @media (min-width: 768px) { .profile-activity-icon { left: -14px; } [dir=rtl] .profile-activity-icon { right: -14px; } } .profile-activity-icon svg { position: relative; top: 50%; transform: translateY(-50%); width: 1em; height: 1em; margin: auto; } /***** Search results *****/ .search-results { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; } @media (min-width: 1024px) { .search-results { flex-direction: row; } } .search-results-column { flex: 1; } @media (min-width: 1024px) { .search-results-column { flex: 0 0 75%; } } .search-results-sidebar { border-top: 1px solid var(--orion-semantic-weak-default); flex: 1 0 auto; margin-bottom: 20px; padding: 0; } @media (min-width: 1024px) { .search-results-sidebar { border: 0; flex: 0 0 20%; height: auto; } } .search-results-sidebar .sidenav-item { border-radius: 4px; padding: 10px 36px; margin-bottom: 4px; color: var(--orion-semantic-foreground); } .search-results-sidebar .sidenav-item:hover, .search-results-sidebar .sidenav-item.current { background-color: var(--orion-semantic-surface_2); text-decoration: none; } .search-results-sidebar .sidenav-subitem { unicode-bidi: embed; } .search-results-sidebar .sidenav-tag { display: flex; flex-direction: row; align-items: flex-start; flex-grow: 0; } .search-results-sidebar .sidenav-tag .content-tag { background: var(--orion-semantic-surface_2); border-radius: 4px; padding: 4px 12px; text-decoration: none; } .search-results-sidebar .sidenav-tag .content-tag .label { font-style: normal; font-weight: 600; font-size: 12px; line-height: 24px; text-align: center; letter-spacing: -0.000427656px; color: var(--orion-semantic-foreground_weaker); flex-grow: 0; vertical-align: middle; display: inline-block; } .search-results-sidebar .sidenav-tag .content-tag .close-icon { color: var(--orion-semantic-foreground_weaker); vertical-align: middle; display: inline-block; } .search-results-sidebar .collapsible-sidebar { margin-bottom: 30px; } .search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list { display: none; } @media (min-width: 1024px) { .search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list { display: block; } } .search-results-sidebar .multibrand-filter-list--collapsed li:nth-child(1n+6) { display: none; } .search-results-sidebar .multibrand-filter-list .doc-count { color: var(--orion-semantic-foreground_weaker); } .search-results-sidebar .see-all-filters { background: none; border: none; cursor: pointer; display: block; padding: 10px; color: var(--orion-semantic-interaction-default); } .search-results-sidebar .see-all-filters[aria-hidden=true] { display: none; } .search-results-sidebar .see-all-filters:hover { text-decoration: underline; } .search-results-sidebar .see-all-filters::after { content: " ⌄"; font-weight: bold; } .search-results-subheading { font-size: 18px; font-weight: 600; } .search-results-list { margin-bottom: 25px; } .search-results-list > li { padding: 20px 0; } .search-results-list > li:first-child { border-top: 1px solid var(--orion-semantic-weak-default); } .search-results .no-results { display: flex; flex-direction: column; align-items: center; padding-top: 4rem; } .search-results .no-results .headline { color: var(--orion-semantic-foreground); font-weight: 400; font-size: 18px; line-height: 24px; letter-spacing: -0.45px; } .search-results .no-results .action-prompt { color: var(--orion-semantic-foreground_weaker); font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: -0.154px; } .search-results .no-results .action-prompt a { color: var(--orion-semantic-interaction-default); } .search-results .no-results .action-prompt a:visited { color: var(--orion-semantic-interaction-default); } .search-result-title-container { display: flex; justify-content: space-between; align-items: center; } .search-result-title { font-size: 16px; margin-bottom: 0; } .search-result-votes, .search-result-meta-count { color: var(--orion-semantic-foreground_weaker); font-size: 13px; } .search-result-votes-icon, .search-result-meta-count-icon { color: var(--orion-semantic-interaction-default); vertical-align: middle; width: 13px; height: 13px; } [dir=ltr] .search-result-votes, [dir=ltr] .search-result-meta-count { margin-left: 20px; } [dir=rtl] .search-result-votes, [dir=rtl] .search-result-meta-count { margin-right: 20px; } .search-result-meta-container { color: var(--orion-semantic-foreground_weaker); display: flex; flex-direction: column; } @media (min-width: 1024px) { .search-result-meta-container { flex-direction: row; align-items: center; } } @media (min-width: 1024px) { .search-result-meta-container nav { flex: 1; } } @media (min-width: 1024px) { [dir=ltr] .search-result-meta-container .meta-data { margin-left: 20px; } } @media (min-width: 1024px) { [dir=rtl] .search-result-meta-container .meta-data { margin-right: 20px; } } .search-result-meta-container .meta-data::after { content: none; } .search-result-breadcrumbs { margin: 0; } .search-result-description { margin-top: 10px; margin-bottom: 0; word-break: break-word; } /* By default use bold instead of italic to highlight */ .search-results-description em { font-style: normal; font-weight: bold; } /* Add a yellow background for Chinese */ html[lang|=zh] .search-results-description em { font-style: normal; background: yellow; } /***** Notifications *****/ /* Banner message = solid surface_1 bg + 8px colored LEFT bar in the status element color (skill). NOT a tinted-background wash. Body text stays neutral; the left bar + status icon carry the color. */ .notification { background: var(--orion-semantic-surface_1); border: 0; border-left: 8px solid var(--orion-semantic-interaction-default); border-radius: 8px; display: table; font-family: sans-serif; font-size: 12px; padding: 13px 15px; transition: height 0.2s; width: 100%; color: var(--orion-semantic-foreground); } .notification a { color: var(--orion-semantic-interaction-default); } .notification-inner { margin: 0 auto; padding: 0 20px; max-width: 980px; } .notification-icon, .notification-inline.notification-error::before, .notification-text, .notification-dismiss { display: table-cell; vertical-align: middle; } .notification-text { padding: 0 15px; width: 100%; } .notification + .notification { margin-bottom: -1px; position: relative; top: -1px; } /* Error */ .notification-error { border-left-color: var(--orion-semantic-destructive-default); } .notification-error .notification-icon::before, .notification-error .notification-inline.notification-error::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23ff8080'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23ff8080'/%3E%3C/svg%3E"); } /* Notice */ .notification-notice { border-left-color: var(--orion-semantic-interaction-default); } .notification-notice .notification-icon::before, .notification-notice .notification-inline.notification-error::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%2354adf7'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l2 2L9 4.5'/%3E%3Ccircle cx='6' cy='6' r='5.5'/%3E%3C/g%3E%3C/svg%3E"); } /* Alert / Lock */ .notification-alert { border-left-color: var(--orion-semantic-warning-default); } .notification-alert .notification-icon::before, .notification-alert .notification-inline.notification-error::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23e99449' stroke-linecap='round' d='M5.06 1.27l-4.5 8.5c-.18.33.06.73.44.73h9c.38 0 .62-.4.44-.73l-4.5-8.5a.494.494 0 00-.88 0zM5.5 4v2'/%3E%3Ccircle cx='5.5' cy='8' r='.8' fill='%23e99449'/%3E%3C/svg%3E"); } .notification-icon::before, .notification-inline.notification-error::before { background-size: cover; content: ""; display: inline-block; height: 14px; width: 14px; vertical-align: middle; } /* Dismiss button */ .notification-dismiss, a.notification-dismiss { color: var(--orion-semantic-foreground_weaker); cursor: pointer; opacity: 0.6; transition: opacity 100ms ease; text-decoration: none !important; } .notification-dismiss:hover { opacity: 1; } /* Inline notifications */ .notification-inline { border-radius: 4px; line-height: 14px; margin-top: 5px; padding: 5px; position: relative; text-align: left; vertical-align: middle; } [dir=rtl] .notification-inline { text-align: right; } .notification-inline[aria-hidden=true] { display: none; } .notification-inline.notification-error::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23e35b66'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23e35b66'/%3E%3C/svg%3E"); margin: -2px 5px 0 0; } [dir=rtl] .notification-inline.notification-error::before { margin: 0 0 0 5px; } .notification-inline.notification-error { background-color: rgba(var(--orion-color-red-1-rgb), 0.15); border: 1px solid var(--orion-semantic-destructive-default); color: var(--orion-semantic-destructive-default); } .notification-inline.notification-large { padding: 13px 15px; margin-bottom: 25px; } .notification-left-aligned { text-align: left; padding-left: 0; } html[dir=rtl] .notification-left-aligned { text-align: right; padding-left: auto; padding-right: 0; } .dropdown { position: relative; display: inline-block; } .dropdown-toggle { cursor: pointer; background: none; border: 0; color: var(--orion-semantic-foreground); display: inline-block; padding: 0; text-align: initial; vertical-align: middle; } .dropdown-toggle:hover { text-decoration: none; } .dropdown-toggle > * { display: inline-block; } .dropdown-toggle[aria-expanded=true] + .dropdown-menu { display: block; } .dropdown-menu { background: var(--orion-semantic-surface_1); border: 1px solid var(--orion-semantic-default-border); border-radius: 3px; box-shadow: 0 0 24px rgba(var(--orion-color-darkest-rgb), 0.4); display: none; font-size: 14px; font-style: normal; font-weight: normal; left: 0; margin-top: 1px; min-width: 170px; padding: 10px 0; position: absolute; text-align: left; z-index: 1000; } [dir=rtl] .dropdown-menu { text-align: right; } .dropdown-menu [role=separator] { border-bottom: 1px solid var(--orion-semantic-surface_2); margin: 4px 0; } .dropdown-menu [role=menuitem], .dropdown-menu [role=menuitemradio] { color: var(--orion-semantic-foreground); cursor: pointer; display: block; padding: 7px 40px 7px 20px; white-space: nowrap; background-color: transparent; border: 0; -webkit-appearance: none; text-align: start; line-height: inherit; width: 100%; } [dir=rtl] .dropdown-menu [role=menuitem], [dir=rtl] .dropdown-menu [role=menuitemradio] { padding: 7px 20px 7px 40px; } .dropdown-menu [role=menuitem]:hover, .dropdown-menu [role=menuitem]:focus, .dropdown-menu [role=menuitemradio]:hover, .dropdown-menu [role=menuitemradio]:focus { background: var(--orion-semantic-surface_2); text-decoration: none; color: var(--orion-semantic-foreground); } .dropdown-menu [role=menuitem][aria-selected=true], .dropdown-menu [role=menuitem][aria-checked=true], .dropdown-menu [role=menuitemradio][aria-selected=true], .dropdown-menu [role=menuitemradio][aria-checked=true] { cursor: default; } .dropdown-menu [role=menuitem][aria-selected=true]::after, .dropdown-menu [role=menuitem][aria-checked=true]::after, .dropdown-menu [role=menuitemradio][aria-selected=true]::after, .dropdown-menu [role=menuitemradio][aria-checked=true]::after { content: ""; background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 7l3 3 7-7'%3E%3C/path%3E%3C/svg%3E"); display: inline-block; height: 12px; margin-left: 10px; width: 12px; } [dir=rtl] .dropdown-menu [role=menuitem][aria-selected=true]::after, [dir=rtl] .dropdown-menu [role=menuitem][aria-checked=true]::after, [dir=rtl] .dropdown-menu [role=menuitemradio][aria-selected=true]::after, [dir=rtl] .dropdown-menu [role=menuitemradio][aria-checked=true]::after { margin-left: 0; margin-right: 10px; float: left; } .dropdown-menu [role=menuitem][hidden], .dropdown-menu [role=menuitem][aria-hidden=true], .dropdown-menu [role=menuitemradio][hidden], .dropdown-menu [role=menuitemradio][aria-hidden=true] { display: none !important; } .dropdown-menu-end { left: auto; right: 0; } .dropdown-menu-top { bottom: 100%; margin-bottom: 1px; } [dir=rtl] .dropdown-menu { left: auto; right: 0; text-align: right; } [dir=rtl] .dropdown-menu-end { left: 0; right: auto; } .dropdown-chevron-icon { vertical-align: middle; } .content-tags > p { color: var(--orion-semantic-foreground_weaker); margin-top: 32px; margin-bottom: 4px; } .content-tags-add-hint { color: var(--orion-semantic-foreground_weaker); font-size: 14px; } .content-tag-list { display: flex; flex-wrap: wrap; word-break: break-word; } .content-tag-list li { border-right: 1px solid var(--orion-semantic-surface_3); margin-bottom: 4px; } [dir=ltr] .content-tag-list li { padding-right: 8px; margin-right: 8px; } [dir=rtl] .content-tag-list li { padding-left: 8px; margin-left: 8px; } .content-tag-list li:last-child { border: none; } /***** WYSIWYG Editor *****/ #hc-wysiwyg { border: 1px solid var(--orion-semantic-default-border); } /* CKEditor 5 dark theming. The rich-text editor (Description field on the request form) ships its own light surface: the editable area defaults to a white background with dark text via CKEditor's `--ck-color-*` custom properties. CKEditor injects those defaults onto `:root` at RUNTIME (after our style.css loads), so a plain `:root` override loses on source order — hence `!important`, which trumps source order for custom-property declarations. These vars are CKEditor-only, so forcing them has no blast radius. Repointed to Orion tokens; this also reaches the toolbar dropdowns / link balloons CKEditor renders in a body-level portal (outside the `.ck-editor` element). */ :root { --ck-color-base-background: var(--orion-semantic-background) !important; --ck-color-base-foreground: var(--orion-semantic-surface_1) !important; --ck-color-base-border: var(--orion-semantic-default-border) !important; --ck-color-base-text: var(--orion-semantic-foreground) !important; --ck-color-text: var(--orion-semantic-foreground) !important; --ck-color-toolbar-background: var(--orion-semantic-surface_1) !important; --ck-color-toolbar-border: var(--orion-semantic-default-border) !important; --ck-color-button-default-hover-background: var(--orion-semantic-surface_2) !important; --ck-color-button-default-active-background: var(--orion-semantic-surface_2) !important; --ck-color-button-on-background: var(--orion-semantic-surface_2) !important; --ck-color-button-on-hover-background: var(--orion-semantic-surface_2) !important; --ck-color-button-on-active-background: var(--orion-semantic-surface_2) !important; --ck-color-button-default-color: var(--orion-semantic-foreground) !important; --ck-color-button-on-color: var(--orion-semantic-foreground) !important; --ck-color-button-default-disabled-color: var(--orion-semantic-foreground_weaker) !important; --ck-color-button-on-disabled-color: var(--orion-semantic-foreground_weaker) !important; --ck-color-focus-border: var(--orion-semantic-interaction-default) !important; --ck-color-focus-outer-shadow: var(--orion-semantic-surface_2) !important; --ck-color-engine-placeholder-text: var(--orion-semantic-foreground_weaker) !important; --ck-color-panel-background: var(--orion-semantic-surface_1) !important; --ck-color-panel-border: var(--orion-semantic-default-border) !important; --ck-color-dropdown-panel-background: var(--orion-semantic-surface_1) !important; --ck-color-dropdown-panel-border: var(--orion-semantic-default-border) !important; --ck-color-list-background: var(--orion-semantic-surface_1) !important; --ck-color-list-button-hover-background: var(--orion-semantic-surface_2) !important; --ck-color-input-background: var(--orion-semantic-background) !important; --ck-color-input-border: var(--orion-semantic-default-border) !important; --ck-color-input-text: var(--orion-semantic-foreground) !important; } /* The editable surface sets its own colors, so override them explicitly. CKEditor ships a content stylesheet that colors `.ck-content` text BLACK (so authored copy previews as it will on a white article page) — that paints the typed `

`/headings/list/quote text black-on-navy (invisible as you type). Force the text-bearing content elements to the foreground token. Links are excluded so they keep the accent color. Scoped to `.ck-editor__editable`, so it only affects the live editor, never rendered/published article bodies. */ .ck.ck-content.ck-editor__editable { background: var(--orion-semantic-background) !important; color: var(--orion-semantic-foreground) !important; } .ck.ck-content.ck-editor__editable p, .ck.ck-content.ck-editor__editable li, .ck.ck-content.ck-editor__editable h1, .ck.ck-content.ck-editor__editable h2, .ck.ck-content.ck-editor__editable h3, .ck.ck-content.ck-editor__editable h4, .ck.ck-content.ck-editor__editable h5, .ck.ck-content.ck-editor__editable h6, .ck.ck-content.ck-editor__editable blockquote, .ck.ck-content.ck-editor__editable td, .ck.ck-content.ck-editor__editable th, .ck.ck-content.ck-editor__editable figcaption, .ck.ck-content.ck-editor__editable span:not(.ck-placeholder) { color: var(--orion-semantic-foreground) !important; } /* The dropdown arrows ship a `` with NO `fill` attribute that falls back to UA-default black — invisible on navy. CKEditor's own `:not([fill]) { fill: currentColor }` rule doesn't reach them. Two arrow flavours: `.ck-dropdown__arrow` (Heading) and `.ck-splitbutton__arrow` (Code block split button). Scope the force to those only: a blanket `.ck-icon :not([fill])` rule also hits the Insert-image icon, whose frame paths are intentionally `fill: none` and would turn into a solid white block. */ .ck .ck-dropdown__arrow :not([fill]), .ck .ck-dropdown__arrow:not([fill]), .ck .ck-splitbutton__arrow .ck-icon :not([fill]) { fill: currentColor !important; } /***** Upload Dropzone *****/ .upload-dropzone { border: 1px solid var(--orion-semantic-default-border); } /***** Summary component *****/ zd-summary-block { background: var(--orion-semantic-surface_1); } [dir=ltr] zd-summary-block { border-left-color: var(--orion-semantic-surface_3); } [dir=rtl] zd-summary-block { border-right-color: var(--orion-semantic-surface_3); } .service-catalog-hero { background-image: url(/hc/theming_assets/01KY0EKYZGE71JC3JQC4R5PT61); margin-bottom: 10px; height: 320px; } .service-catalog-description { display: flow-root; } .service-catalog-description a { color: var(--orion-semantic-interaction-default); text-decoration: underline; } .service-catalog-description a:visited { color: var(--orion-semantic-foreground_highlight); } .service-catalog-description a:hover, .service-catalog-description a:active, .service-catalog-description a:focus { color: var(--orion-semantic-interaction-hover); } .service-catalog-description img { height: auto; max-width: 100%; } .service-catalog-description p > img.image-style-align-left { float: left; margin: 8px 20px 6px 0; } .service-catalog-description p > img.image-style-align-right { float: right; margin: 8px 0px 6px 20px; } .service-catalog-description p > img.image-style-block-align-right { margin-left: auto; margin-right: 0; } .service-catalog-description p > img.image-style-block-align-left { margin-left: 0; margin-right: auto; } .service-catalog-description figure.image { display: table; margin: 0 auto; } .service-catalog-description figure.image > img { display: block; width: 100%; } .service-catalog-description figure.image.image-style-align-left { float: left; margin: 8px 20px 6px 0; } .service-catalog-description figure.image.image-style-align-right { float: right; margin: 8px 0px 6px 20px; } .service-catalog-description figure.image.image-style-block-align-right { margin-left: auto; margin-right: 0; } .service-catalog-description figure.image.image-style-block-align-left { margin-left: 0; margin-right: auto; } .service-catalog-description figcaption { padding: 10px 0; font-size: 12px; text-align: center; background-color: var(--orion-semantic-surface_2); } .service-catalog-description ul, .service-catalog-description ol { padding-left: 20px; list-style-position: outside; margin: 20px 0 20px 20px; } [dir=rtl] .service-catalog-description ul, [dir=rtl] .service-catalog-description ol { padding-right: 20px; padding-left: 0; margin-left: 0; margin-right: 20px; } .service-catalog-description ul > ul, .service-catalog-description ol > ol, .service-catalog-description ol > ul, .service-catalog-description ul > ol, .service-catalog-description li > ul, .service-catalog-description li > ol { margin: 0; } .service-catalog-description ul { list-style-type: disc; } .service-catalog-description :not(pre) > code { background: var(--orion-semantic-surface_1); border: 1px solid var(--orion-semantic-weak-default); border-radius: 3px; padding: 0 5px; margin: 0 2px; } .service-catalog-description pre { background: var(--orion-semantic-surface_1); border: 1px solid var(--orion-semantic-weak-default); border-radius: 3px; padding: 10px 15px; overflow: auto; white-space: pre; direction: ltr; } .service-catalog-description blockquote { border-left: 1px solid var(--orion-semantic-weak-default); color: var(--orion-semantic-foreground_weaker); font-style: italic; padding: 0 15px; } .service-catalog-main-content { display: flex; gap: 32px; } .service-catalog-list { width: 100%; } .service-catalog-breadcrumbs { display: flex; align-items: center; gap: 20px; } .is-service-catalog-preview #navbar-container, .is-service-catalog-preview .navbar-container, .is-service-catalog-preview .assembly-bar, .is-service-catalog-preview [data-garden-id="chrome.subnav"] { display: none !important; }