/* * Simple Wires UI theme tokens: Workshop, Paper, Studio, Blueprint. * * The theme is resolved server-side by simplewires.SwTheme (HelperClasses/SwTheme.cs) and stamped on * . Every themed rule reads these --sw-* tokens. GoJS reads a few through * window.swTheme.color(): selection, selection-fill, canvas-text, page-edge, page-shadow. * * Load order: sw-tokens.css, sw-common.css, then the surface stylesheet (sw-designsurface.css or sw-dashboard.css). */ /* ------------------------------------------------------------------ tokens */ /* * Palettes: the library palettes and warehouses in the west pane sit on --sw-palette-bg, which stays light in * every theme so parts read as they do on a drawing's page. Their text, lines and controls use these tokens, which * follow the theme's own colors unless a theme overrides them (Studio, whose own text is light). * GoJS palettes read them through window.swTheme.color("palette-text") and so on. */ html[data-sw-theme] { --sw-palette-text: var(--sw-text); --sw-palette-muted: var(--sw-muted); --sw-palette-head: var(--sw-head); --sw-palette-border: var(--sw-border); --sw-palette-card: var(--sw-pane); --sw-palette-hover: var(--sw-pane-alt); --sw-palette-control: var(--sw-input-bg); --sw-palette-control-border: var(--sw-input-border); --sw-palette-accent-soft: var(--sw-accent-soft); --sw-palette-accent-ink: var(--sw-accent-ink); /* * Scrollbars (rules in sw-common.css): each theme picks the size, track and shape. The thumb is the theme's * accent toned down with --sw-scroll-mute, a neutral that suits the ground, and shows the full accent on * hover. --sw-scroll-edge can outline the thumb. The palettes stay light in every theme, so they have their * own track and neutral. */ --sw-scroll-size: 10px; --sw-scroll-track: transparent; --sw-scroll-mute: #b3b9c2; --sw-scroll-mix: 45%; --sw-scroll-thumb-hover: var(--sw-accent); --sw-scroll-edge: transparent; --sw-scroll-radius: 999px; --sw-scroll-inset: 2px; --sw-palette-scroll-track: var(--sw-scroll-track); --sw-palette-scroll-mute: var(--sw-scroll-mute); } html[data-sw-theme="workshop"] { color-scheme: light; --sw-font: 'Rubik', 'Segoe UI', Tahoma, sans-serif; --sw-font-head: 'Rubik', 'Segoe UI', sans-serif; --sw-font-mono: 'Rubik', 'Segoe UI', sans-serif; --sw-head-case: none; --sw-head-size: 12px; --sw-head-spacing: 0; --sw-head-weight: 500; --sw-top: #2f323e; --sw-top-border: #2f323e; --sw-top-text: #e4e6eb; --sw-top-muted: #9ea3b0; --sw-top-hover: rgba(255, 255, 255, 0.08); --sw-label: #fed136; --sw-label-muted: #fed136; --sw-logo-filter: invert(1); --sw-brand-text: #fed136; --sw-brand-filter: none; --sw-app: #e6e9ee; --sw-pane: #ffffff; --sw-pane-alt: #f5f6f8; --sw-border: #dde1e7; --sw-text: #373b47; --sw-muted: #7d8391; --sw-head: #2f323e; --sw-accent: #fed136; --sw-on-accent: #2f323e; --sw-accent-soft: #fff6d6; --sw-accent-ink: #9a7400; --sw-input-bg: #ffffff; --sw-input-border: #d3d8df; --sw-radius: 4px; --sw-canvas: #a9aeb7; --sw-canvas-pattern: none; --sw-canvas-pattern-size: auto; --sw-palette-bg: #f5f6f8; --sw-scroll-size: 12px; --sw-scroll-track: #eceef1; --sw-scroll-mix: 55%; --sw-selection: #f5b400; --sw-selection-fill: #2f323e; --sw-canvas-text: #2f323e; --sw-page-edge: #8a909b; --sw-page-shadow: rgba(30, 33, 43, 0.45); --sw-resizer: #e6e9ee; --sw-grip: #b9bfc9; --sw-handle-line: #cdd2da; --sw-handle-hover: #f5b400; --sw-toggler: #2f323e; --sw-toggler-icon: #fed136; --sw-toggler-hover: #fed136; --sw-toggler-hover-icon: #2f323e; --sw-footer-bg: #ffffff; --sw-footer-text: #8a8f9b; --sw-danger: #d64545; --sw-grid-head: #f5f6f8; --sw-grid-stripe: #fafbfc; --sw-grid-line: #e9ecf0; --sw-menu-bg: #ffffff; --sw-menu-border: #dde1e7; --sw-menu-shadow: 0 8px 24px rgba(30, 33, 43, 0.18); --sw-menu-hover: #fff6d6; --sw-avatar-bg: #fed136; --sw-avatar-text: #2f323e; --sw-avatar-ring: transparent; --sw-panel-head: #2f323e; --sw-panel-head-text: #ffffff; --sw-panel-head-btn: rgba(255, 255, 255, 0.10); --sw-panel-head-btn-border: rgba(255, 255, 255, 0.20); --sw-btn-bg: #ffffff; --sw-btn-text: #373b47; --sw-btn-border: #d3d8df; --sw-btn-hover: #f5f6f8; --sw-icon-filter: none; } html[data-sw-theme="paper"] { color-scheme: light; --sw-font: 'Public Sans', 'Segoe UI', Helvetica, sans-serif; --sw-font-head: 'Public Sans', 'Segoe UI', sans-serif; --sw-font-mono: 'Public Sans', 'Segoe UI', sans-serif; --sw-head-case: none; --sw-head-size: 13px; --sw-head-spacing: -0.005em; --sw-head-weight: 600; --sw-top: #ffffff; --sw-top-border: #e3e5ea; --sw-top-text: #1c2230; --sw-top-muted: #687080; --sw-top-hover: #f1f3f6; --sw-label: #1c2230; --sw-label-muted: #687080; --sw-logo-filter: none; --sw-brand-text: #1c2230; --sw-brand-filter: brightness(0) saturate(100%); --sw-app: #f2f3f5; --sw-pane: #ffffff; --sw-pane-alt: #f7f8fa; --sw-border: #e3e5ea; --sw-text: #1c2230; --sw-muted: #687080; --sw-head: #1c2230; --sw-accent: #2d5bd2; --sw-on-accent: #ffffff; --sw-accent-soft: #eaf0fd; --sw-accent-ink: #2d5bd2; --sw-input-bg: #ffffff; --sw-input-border: #d6dae1; --sw-radius: 6px; --sw-canvas: #e7e9ed; --sw-canvas-pattern: none; --sw-canvas-pattern-size: auto; --sw-palette-bg: #f7f8fa; --sw-scroll-size: 8px; --sw-scroll-radius: 4px; --sw-scroll-inset: 1px; --sw-selection: #2d5bd2; --sw-selection-fill: #ffffff; --sw-canvas-text: #687080; --sw-page-edge: #d6dae1; --sw-page-shadow: rgba(16, 24, 40, 0.22); --sw-resizer: #f2f3f5; --sw-grip: #cdd2da; --sw-handle-line: #dfe2e7; --sw-handle-hover: #2d5bd2; --sw-toggler: #cdd2da; --sw-toggler-icon: #ffffff; --sw-toggler-hover: #2d5bd2; --sw-toggler-hover-icon: #ffffff; --sw-footer-bg: #f2f3f5; --sw-footer-text: #8b92a0; --sw-danger: #c93a3a; --sw-grid-head: #ffffff; --sw-grid-stripe: #f9fafb; --sw-grid-line: #eceef2; --sw-menu-bg: #ffffff; --sw-menu-border: #e3e5ea; --sw-menu-shadow: 0 12px 32px rgba(16, 24, 40, 0.14); --sw-menu-hover: #eaf0fd; --sw-avatar-bg: #eaf0fd; --sw-avatar-text: #2d5bd2; --sw-avatar-ring: transparent; --sw-panel-head: #ffffff; --sw-panel-head-text: #1c2230; --sw-panel-head-btn: #ffffff; --sw-panel-head-btn-border: #d6dae1; --sw-btn-bg: #ffffff; --sw-btn-text: #1c2230; --sw-btn-border: #d6dae1; --sw-btn-hover: #f7f8fa; --sw-icon-filter: none; } html[data-sw-theme="studio"] { color-scheme: dark; --sw-font: 'Barlow', 'Segoe UI', sans-serif; --sw-font-head: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif; --sw-font-mono: 'Barlow', 'Segoe UI', sans-serif; --sw-head-case: uppercase; --sw-head-size: 12px; --sw-head-spacing: 0.08em; --sw-head-weight: 600; --sw-top: #111317; --sw-top-border: #23272e; --sw-top-text: #e3e6eb; --sw-top-muted: #8b919c; --sw-top-hover: #1f2329; --sw-label: #fed136; --sw-label-muted: #fed136; --sw-logo-filter: invert(1); --sw-brand-text: #fed136; --sw-brand-filter: none; --sw-app: #0b0d10; --sw-pane: #191c21; --sw-pane-alt: #20242a; --sw-border: #2a2f37; --sw-text: #d3d7de; --sw-muted: #8b919c; --sw-head: #aeb4be; --sw-accent: #fed136; --sw-on-accent: #14161a; --sw-accent-soft: rgba(254, 209, 54, 0.12); --sw-accent-ink: #fed136; --sw-input-bg: #111317; --sw-input-border: #30353e; --sw-radius: 3px; --sw-canvas: #23272d; --sw-canvas-pattern: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.2px); --sw-canvas-pattern-size: 20px 20px; --sw-palette-bg: #e9ebef; --sw-scroll-track: #111418; --sw-scroll-mute: #4a505a; --sw-scroll-mix: 40%; --sw-palette-scroll-track: #dcdfe4; --sw-palette-scroll-mute: #aab0b9; --sw-selection: #fed136; --sw-selection-fill: #14161a; --sw-canvas-text: #aeb4be; --sw-page-edge: #3a4049; --sw-page-shadow: rgba(0, 0, 0, 0.7); --sw-resizer: #0b0d10; --sw-grip: #3a4049; --sw-handle-line: #23272e; --sw-handle-hover: #fed136; --sw-toggler: #2b3038; --sw-toggler-icon: #8b919c; --sw-toggler-hover: #fed136; --sw-toggler-hover-icon: #14161a; --sw-footer-bg: #111317; --sw-footer-text: #6d737e; --sw-danger: #ff6b5e; --sw-grid-head: #20242a; --sw-grid-stripe: #1c1f24; --sw-grid-line: #262a31; --sw-menu-bg: #20242a; --sw-menu-border: #30353e; --sw-menu-shadow: 0 14px 36px rgba(0, 0, 0, 0.5); --sw-menu-hover: rgba(254, 209, 54, 0.12); --sw-avatar-bg: transparent; --sw-avatar-text: #fed136; --sw-avatar-ring: #fed136; --sw-panel-head: #20242a; --sw-panel-head-text: #e3e6eb; --sw-panel-head-btn: #23272e; --sw-panel-head-btn-border: #353a43; --sw-btn-bg: #23272e; --sw-btn-text: #d3d7de; --sw-btn-border: #353a43; --sw-btn-hover: #2b3038; --sw-icon-filter: invert(0.85); /* dark ink on the light palette ground */ --sw-palette-text: #1c2027; --sw-palette-muted: #5b616c; --sw-palette-head: #3a404a; --sw-palette-border: #c9cdd4; --sw-palette-card: #f7f8fa; --sw-palette-hover: #dde0e5; --sw-palette-control: #ffffff; --sw-palette-control-border: #c3c8d0; --sw-palette-accent-soft: #fbefc2; --sw-palette-accent-ink: #7a5c00; } html[data-sw-theme="blueprint"] { color-scheme: light; --sw-font: 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif; --sw-font-head: 'IBM Plex Mono', Consolas, monospace; --sw-font-mono: 'IBM Plex Mono', Consolas, monospace; --sw-head-case: uppercase; --sw-head-size: 11px; --sw-head-spacing: 0.08em; --sw-head-weight: 500; --sw-top: #0b2340; --sw-top-border: #0b2340; --sw-top-text: #dbe6f3; --sw-top-muted: #86a2c2; --sw-top-hover: rgba(255, 255, 255, 0.08); --sw-label: #8fc4ff; --sw-label-muted: #86a2c2; --sw-logo-filter: invert(1); --sw-brand-text: #dbe6f3; --sw-brand-filter: brightness(0) invert(1); --sw-app: #d9e2ec; --sw-pane: #f4f7fa; --sw-pane-alt: #e9eff5; --sw-border: #c7d4e2; --sw-text: #16283b; --sw-muted: #56708b; --sw-head: #34516f; --sw-accent: #e0572b; --sw-on-accent: #ffffff; --sw-accent-soft: #fbe5dc; --sw-accent-ink: #c2451d; --sw-input-bg: #ffffff; --sw-input-border: #b9c8d8; --sw-radius: 2px; --sw-canvas: #123b64; --sw-canvas-pattern: linear-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.10) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); --sw-canvas-pattern-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; --sw-palette-bg: #f4f7fa; --sw-scroll-track: #e3e9f0; --sw-scroll-radius: 0; --sw-selection: #e0572b; --sw-selection-fill: #ffffff; --sw-canvas-text: #8fc4ff; --sw-page-edge: #5f8fbf; --sw-page-shadow: rgba(3, 15, 30, 0.6); --sw-resizer: #d9e2ec; --sw-grip: #9fb3c8; --sw-handle-line: #9fb3c8; --sw-handle-hover: #e0572b; --sw-toggler: #0b2340; --sw-toggler-icon: #8fc4ff; --sw-toggler-hover: #e0572b; --sw-toggler-hover-icon: #ffffff; --sw-footer-bg: #0b2340; --sw-footer-text: #86a2c2; --sw-danger: #c2451d; --sw-grid-head: #e9eff5; --sw-grid-stripe: #f7f9fc; --sw-grid-line: #dbe4ee; --sw-menu-bg: #ffffff; --sw-menu-border: #b9c8d8; --sw-menu-shadow: 0 10px 24px rgba(11, 35, 64, 0.22); --sw-menu-hover: #e9eff5; --sw-avatar-bg: #e0572b; --sw-avatar-text: #ffffff; --sw-avatar-ring: transparent; --sw-panel-head: #0b2340; --sw-panel-head-text: #dbe6f3; --sw-panel-head-btn: rgba(255, 255, 255, 0.08); --sw-panel-head-btn-border: rgba(255, 255, 255, 0.18); --sw-btn-bg: #ffffff; --sw-btn-text: #16283b; --sw-btn-border: #b9c8d8; --sw-btn-hover: #e9eff5; --sw-icon-filter: none; } /* * Account pages (sign in, register, password reset) - the split layout used by _AccountLayout.cshtml. * * Reads the --sw-* tokens from sw-tokens.css, so these pages follow whatever theme SwTheme resolves. * Signed-out visitors get the default, Blueprint. Load order: sw-tokens.css then this file * (~/Content/themes/account-bundle, see BundleConfig.cs). */ * { box-sizing: border-box; } /* No height:100% on html/body: that pins the body to the viewport, so a page taller than the window overflows instead of growing and the footer lands short of the bottom. min-height alone lets the column stretch on a short page and grow on a long one. */ body { margin: 0; background: var(--sw-pane); color: var(--sw-text); font: 400 17px/1.65 var(--sw-font); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; } /* headings use the body face: --sw-font-head is the small-label face (mono on Blueprint) */ h1, h2, h3 { margin: 0; font-family: var(--sw-font); font-weight: 600; text-wrap: balance; } a { color: var(--sw-accent-ink); } .sw-wrap { max-width: 1160px; margin: 0 auto; padding-inline: 24px; width: 100%; } /* ---------------------------------------------------------------- top bar */ .sw-top { background: var(--sw-top); color: var(--sw-top-text); flex: none; } .sw-top .sw-wrap { display: flex; align-items: center; gap: 30px; min-height: 60px; } .sw-brand { display: flex; align-items: center; gap: 10px; color: var(--sw-brand-text); text-decoration: none; white-space: nowrap; font-family: var(--sw-font-head); font-size: 17px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .sw-brand:hover, .sw-brand:focus { color: var(--sw-brand-text); text-decoration: none; } .sw-brand img { height: 26px; width: auto; filter: var(--sw-brand-filter); } .sw-top nav { display: flex; gap: 24px; margin-left: auto; align-items: center; } .sw-top nav a { color: var(--sw-top-muted); text-decoration: none; font-family: var(--sw-font-head); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; } .sw-top nav a:hover { color: #fff; } .sw-top nav a.sw-top-cta { background: var(--sw-accent); color: var(--sw-on-accent); padding: 9px 18px; border-radius: var(--sw-radius); } /* ---------------------------------------------------------------- split layout */ .sw-auth { flex: 1 0 auto; display: flex; flex-wrap: wrap; } .sw-auth-aside, .sw-auth-form { flex: 1 1 420px; min-width: 0; } .sw-auth-aside { background: var(--sw-canvas); background-image: var(--sw-canvas-pattern); background-size: var(--sw-canvas-pattern-size); color: #fff; padding: 60px 56px; display: flex; flex-direction: column; justify-content: center; } .sw-auth-aside h2 { font-size: 34px; line-height: 1.15; margin-bottom: 18px; color: #fff; } .sw-auth-aside h2 em { font-style: normal; color: var(--sw-canvas-text); } .sw-auth-aside p { margin: 0; max-width: 40ch; color: rgba(255, 255, 255, .78); } .sw-auth-aside ul { list-style: none; margin: 28px 0 0; padding: 0; color: rgba(255, 255, 255, .78); } .sw-auth-aside li { padding: 7px 0 7px 26px; position: relative; } .sw-auth-aside li::before { content: ""; position: absolute; left: 0; top: 15px; width: 12px; height: 2px; background: var(--sw-accent); } .sw-auth-shot { margin-top: 34px; border-radius: var(--sw-radius); overflow: hidden; border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 20px 44px rgba(3, 14, 28, .4); } .sw-auth-shot img { display: block; width: 100%; } .sw-auth-form { display: flex; align-items: center; justify-content: center; padding: 56px 24px; } .sw-card { width: 100%; max-width: 430px; } .sw-card h1 { font-size: 32px; margin-bottom: 8px; } .sw-card .sw-sub { color: var(--sw-muted); margin: 0 0 30px; } /* ---------------------------------------------------------------- form controls */ .sw-field { margin-bottom: 18px; } .sw-field > label, .sw-field .control-label { display: block; margin-bottom: 7px; font-family: var(--sw-font-head); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--sw-head); } .sw-field input[type="text"], .sw-field input[type="email"], .sw-field input[type="tel"], .sw-field input[type="password"] { width: 100%; padding: 12px 14px; border: 1px solid var(--sw-input-border); border-radius: var(--sw-radius); background: var(--sw-input-bg); font: 400 17px/1.4 var(--sw-font); color: var(--sw-text); } .sw-field input:focus { outline: 2px solid var(--sw-accent); outline-offset: 1px; border-color: var(--sw-accent); } .sw-field .sw-hint { margin: 7px 0 0; font-size: 14px; color: var(--sw-muted); } /* jQuery unobtrusive validation marks the input .input-validation-error and the message .field-validation-error */ .sw-field input.input-validation-error { border-color: var(--sw-danger); } .field-validation-error, .sw-field .text-danger { display: block; margin: 7px 0 0; font-size: 14px; color: var(--sw-danger); } .field-validation-valid:empty { display: none; } .sw-check { display: flex; align-items: flex-start; gap: 9px; font-size: 15px; color: var(--sw-muted); } .sw-check input[type="checkbox"] { width: 16px; height: 16px; margin: 4px 0 0; flex: none; } .sw-check label { margin: 0; font-weight: 400; } .sw-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 6px 0 24px; font-size: 15px; } .sw-btn { display: inline-block; border: 0; cursor: pointer; text-decoration: none; text-align: center; padding: 13px 24px; border-radius: var(--sw-radius); background: var(--sw-accent); color: var(--sw-on-accent); font-family: var(--sw-font-head); font-size: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; } .sw-btn:hover, .sw-btn:focus { background: var(--sw-accent-ink); color: var(--sw-on-accent); text-decoration: none; } .sw-btn[disabled] { opacity: .45; cursor: not-allowed; } .sw-btn-outline { background: var(--sw-btn-bg, #fff); color: var(--sw-text); border: 1px solid var(--sw-border); } .sw-btn-outline:hover, .sw-btn-outline:focus { background: var(--sw-pane-alt); color: var(--sw-text); } .sw-btn-block { display: block; width: 100%; } .sw-alt { margin: 24px 0 0; font-size: 15px; color: var(--sw-muted); text-align: center; } /* a validation summary or TempData flash above the form */ .sw-notice { display: flex; gap: 14px; padding: 14px 18px; border-radius: var(--sw-radius); margin-bottom: 24px; background: var(--sw-accent-soft); border-left: 3px solid var(--sw-accent); font-size: 15px; } .sw-notice p, .sw-notice ul { margin: 0; } .sw-notice ul { padding-left: 18px; } .sw-notice.sw-notice-bad { background: #fdeaea; border-left-color: var(--sw-danger); color: #7d1f1f; } .validation-summary-errors { margin-bottom: 24px; color: var(--sw-danger); font-size: 15px; } .validation-summary-errors ul { margin: 0; padding-left: 18px; } .validation-summary-valid { display: none; } /* recaptcha sits between the last field and the button */ .sw-captcha { margin: 0 0 20px; } /* ---------------------------------------------------------------- centered confirmation pages */ .sw-centered { max-width: 560px; margin: 0 auto; padding-block: 90px; text-align: center; } .sw-centered .sw-mark { width: 72px; height: 72px; margin: 0 auto 26px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; background: var(--sw-accent-soft); color: var(--sw-accent-ink); } .sw-centered h1 { font-size: 34px; margin-bottom: 12px; } .sw-centered p { color: var(--sw-muted); margin: 0 auto 28px; max-width: 46ch; } /* ---------------------------------------------------------------- footer */ .sw-foot { background: var(--sw-top); color: var(--sw-top-muted); margin-top: auto; flex: none; } .sw-foot .sw-wrap { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; padding-block: 18px; font-size: 14px; } .sw-foot nav { display: flex; flex-wrap: wrap; gap: 20px; margin-left: auto; } .sw-foot a { color: inherit; text-decoration: none; } .sw-foot a:hover { color: #fff; } .sw-foot .sw-build { font-family: var(--sw-font-mono); font-size: 12px; letter-spacing: .06em; } /* ---------------------------------------------------------------- error pages */ /* Set on the wrapper with ViewBag.PageClass = "sw-page-dark" so the state reads as a stop, not a form. */ .sw-page-dark { background: var(--sw-canvas); background-image: var(--sw-canvas-pattern); background-size: var(--sw-canvas-pattern-size); } .sw-page-dark .sw-centered { color: #fff; } .sw-page-dark .sw-centered h1 { color: #fff; } .sw-page-dark .sw-centered p { color: rgba(255, 255, 255, .78); } .sw-err-code { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; margin-bottom: 24px; border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--sw-radius); color: #fff; font-family: var(--sw-font-head); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; } .sw-err-code b { color: var(--sw-accent); font-weight: 500; } .sw-err-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .sw-page-dark .sw-btn-outline { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; } .sw-page-dark .sw-btn-outline:hover { background: rgba(255, 255, 255, .1); color: #fff; } .sw-err-ref { margin: 32px auto 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); font-family: var(--sw-font-mono); font-size: 13px; line-height: 1.7; letter-spacing: .04em; color: rgba(255, 255, 255, .6); max-width: 52ch; } .sw-err-ref b { color: #fff; font-weight: 400; } /* a cable left unterminated, drawn in the product's own vocabulary */ .sw-err-sketch { display: block; margin: 0 auto 30px; } .sw-err-sketch .wire { stroke: var(--sw-accent); stroke-width: 2; fill: none; } .sw-err-sketch .box { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.5; } .sw-err-sketch .port { fill: var(--sw-accent); } .sw-err-sketch .ghost { stroke: rgba(255, 255, 255, .28); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; } .sw-err-sketch text { fill: rgba(255, 255, 255, .65); font-family: var(--sw-font-mono); font-size: 10px; letter-spacing: .1em; } /* ---------------------------------------------------------------- flash messages */ /* Views/Shared/Alert.cshtml emits Bootstrap alert markup and these pages do not load Bootstrap. */ /* :not(.cookiealert) matters - cookiealert.css loads first and this would otherwise take its position:fixed away, dropping the cookie bar into the page as a block below the footer. */ .alert:not(.cookiealert) { padding: 14px 18px; border-radius: var(--sw-radius); margin-bottom: 24px; background: var(--sw-accent-soft); border-left: 3px solid var(--sw-accent); font-size: 15px; position: relative; } .alert:not(.cookiealert) .close { position: absolute; top: 10px; right: 12px; border: 0; background: none; cursor: pointer; font-size: 20px; line-height: 1; color: inherit; opacity: .5; } .alert:not(.cookiealert) .close:hover { opacity: 1; } .alert-success:not(.cookiealert) { background: #e8f4ed; border-left-color: var(--sw-ok, #2e7d52); } .alert-info:not(.cookiealert) { background: var(--sw-pane-alt); border-left-color: var(--sw-head); } .alert-danger:not(.cookiealert), .alert-warning:not(.cookiealert) { background: #fdeaea; border-left-color: var(--sw-danger); color: #7d1f1f; } /* ---------------------------------------------------------------- cookie alert */ /* cookiealert.css positions the bar; its markup uses Bootstrap button classes, and these pages deliberately do not load Bootstrap, so give it the theme's own padding and button. */ .cookiealert { padding: 14px 24px; text-align: center; font-size: 14px; line-height: 1.5; } .cookiealert a { color: var(--sw-accent); } .cookiealert .acceptcookies { display: inline-block; margin: 8px 0 0 10px; padding: 7px 18px; border: 0; cursor: pointer; border-radius: var(--sw-radius); background: var(--sw-accent); color: var(--sw-on-accent); font-family: var(--sw-font-head); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; } .cookiealert .acceptcookies:hover { background: var(--sw-accent-ink); } @media (max-width: 860px) { .sw-auth-aside { display: none; } .sw-auth-form { padding-block: 44px; } .sw-foot nav { margin-left: 0; } } /* * Document pages: the legal texts (terms, privacy, plain-English terms) and Recent Changes. * * Loaded by _PageLayout.cshtml through ~/Content/themes/pages-bundle, after sw-tokens.css and * sw-account.css - the page chrome, buttons and footer come from there. * * The legal views keep their own markup (.head / .badge / h3 / p / .callout / .defs); this file * restyles it in the theme rather than rewriting the text. */ /* ---------------------------------------------------------------- page header */ .sw-doc-head { background: var(--sw-app); border-bottom: 1px solid var(--sw-border); } .sw-doc-head .sw-wrap { padding-block: 46px 0; } .sw-doc-head h1 { font-size: 40px; line-height: 1.12; margin-bottom: 10px; } .sw-doc-head .sw-lede { margin: 0; color: var(--sw-muted); max-width: 62ch; } .sw-doc-meta { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 22px; font-family: var(--sw-font-head); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--sw-head); } .sw-doc-meta b { color: var(--sw-accent-ink); font-weight: 500; } /* tabs across the four legal documents, which were previously unlinked pages */ .sw-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 26px 0 -1px; } .sw-tabs a { padding: 11px 18px; text-decoration: none; color: var(--sw-muted); border: 1px solid transparent; border-bottom: 0; border-radius: var(--sw-radius) var(--sw-radius) 0 0; font-family: var(--sw-font-head); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; } .sw-tabs a:hover { color: var(--sw-text); } .sw-tabs a.sw-on { background: var(--sw-pane); border-color: var(--sw-border); color: var(--sw-text); } /* ---------------------------------------------------------------- two-column document */ .sw-doc { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 48px; padding-block: 44px 72px; } .sw-doc-wide { display: block; padding-block: 44px 72px; } .sw-toc { position: sticky; top: 20px; align-self: start; max-height: calc(100vh - 40px); overflow: auto; } .sw-toc-label { display: block; margin-bottom: 14px; } .sw-toc ol { list-style: none; margin: 0; padding: 0; font-size: 15px; } .sw-toc a { display: flex; gap: 10px; padding: 7px 10px; text-decoration: none; color: var(--sw-muted); border-left: 2px solid var(--sw-line, var(--sw-border)); border-radius: 0 var(--sw-radius) var(--sw-radius) 0; } .sw-toc a .sw-toc-n { font-family: var(--sw-font-mono); font-size: 12px; color: var(--sw-accent); min-width: 17px; } .sw-toc a:hover { background: var(--sw-pane-alt); color: var(--sw-text); } .sw-toc a.sw-on { border-left-color: var(--sw-accent); background: var(--sw-pane-alt); color: var(--sw-text); font-weight: 500; } /* ---------------------------------------------------------------- prose */ .sw-prose { max-width: 74ch; font-size: 17px; color: var(--sw-text); } .sw-prose p { margin: 0 0 16px; } .sw-prose ul, .sw-prose ol { margin: 0 0 18px; padding-left: 22px; } .sw-prose li { margin-bottom: 7px; } .sw-prose a { color: var(--sw-accent-ink); } /* the legal views mark each section with
n

..

*/ .sw-prose .head { display: flex; align-items: baseline; gap: 14px; margin: 46px 0 14px; padding-top: 18px; border-top: 1px solid var(--sw-border); scroll-margin-top: 20px; } .sw-prose .head:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .sw-prose .head .badge { flex: none; min-width: 26px; height: 26px; padding: 0 7px; display: grid; place-items: center; background: var(--sw-accent); color: var(--sw-on-accent); border-radius: var(--sw-radius); font-family: var(--sw-font-mono); font-size: 13px; font-weight: 500; } .sw-prose .head h2 { font-size: 26px; line-height: 1.2; margin: 0; } .sw-prose h3 { font-size: 18px; margin: 26px 0 8px; color: var(--sw-head); scroll-margin-top: 20px; } .sw-prose .callout { background: var(--sw-accent-soft); border-left: 3px solid var(--sw-accent); padding: 18px 20px; border-radius: 0 var(--sw-radius) var(--sw-radius) 0; margin: 0 0 30px; font-size: 16px; } .sw-prose .divider { height: 1px; background: var(--sw-border); border: 0; margin: 34px 0; } .sw-prose .defs { font-size: 16px; } .sw-prose .defs dt, .sw-prose b, .sw-prose strong { color: var(--sw-head); } /* a pointer to the other version of the same document */ .sw-doc-switch { background: var(--sw-pane-alt); border: 1px solid var(--sw-border); border-radius: var(--sw-radius); padding: 16px 20px; margin: 0 0 30px; font-size: 16px; } .sw-doc-switch b { display: block; margin-bottom: 5px; font-family: var(--sw-font-head); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--sw-head); } /* ---------------------------------------------------------------- recent changes */ .sw-releases { border-top: 1px solid var(--sw-border); max-width: 940px; } .sw-release { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 36px; padding-block: 30px; border-bottom: 1px solid var(--sw-border); } .sw-release-when { position: sticky; top: 20px; align-self: start; } .sw-release-date { font-family: var(--sw-font); font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sw-text); } .sw-release-tag { display: inline-block; margin-top: 10px; padding: 3px 9px; border-radius: var(--sw-radius); font-family: var(--sw-font-head); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; } .sw-release-tag.sw-fix { background: var(--sw-pane-alt); color: var(--sw-head); } .sw-release-tag.sw-new { background: var(--sw-accent-soft); color: var(--sw-accent-ink); } /* the change body is HTML authored in the admin area, so keep the rules forgiving */ .sw-release-body { font-size: 17px; color: var(--sw-text); } .sw-release-body p { margin: 0 0 12px; } .sw-release-body p:last-child { margin-bottom: 0; } .sw-release-body ul, .sw-release-body ol { margin: 0 0 12px; padding-left: 22px; } .sw-release-body li { margin-bottom: 6px; } .sw-release-body img { max-width: 100%; height: auto; } .sw-release-body h1, .sw-release-body h2, .sw-release-body h3, .sw-release-body h4 { font-size: 19px; margin: 0 0 8px; color: var(--sw-head); } .sw-empty { color: var(--sw-muted); padding-block: 40px; } @media (max-width: 900px) { .sw-doc { grid-template-columns: 1fr; gap: 26px; } .sw-toc { position: static; max-height: none; } .sw-release { grid-template-columns: 1fr; gap: 12px; } .sw-release-when { position: static; } .sw-doc-head h1 { font-size: 32px; } }