/* * 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; } /* * Components shared by every themed surface: typography, buttons, dropdown menus, the theme picker, * DevExtreme editors and grids, modals and SweetAlert dialogs. Reads the tokens in sw-tokens.css. */ /* ------------------------------------------------------------------ base */ html[data-sw-theme] body { background: var(--sw-app); color: var(--sw-text); font-family: var(--sw-font); -webkit-font-smoothing: antialiased; } html[data-sw-theme] body, html[data-sw-theme] h1, html[data-sw-theme] h2, html[data-sw-theme] h3, html[data-sw-theme] h4, html[data-sw-theme] h5, html[data-sw-theme] h6, html[data-sw-theme] .dx-widget, html[data-sw-theme] .dx-widget input, html[data-sw-theme] .dx-widget textarea, html[data-sw-theme] .ui-widget, html[data-sw-theme] .ui-widget input, html[data-sw-theme] .ui-widget button, html[data-sw-theme] .btn, html[data-sw-theme] .swal2-popup { font-family: var(--sw-font); } html[data-sw-theme] h1, html[data-sw-theme] h2, html[data-sw-theme] h3, html[data-sw-theme] h4, html[data-sw-theme] h5, html[data-sw-theme] h6 { color: var(--sw-head); } html[data-sw-theme] a { color: var(--sw-accent-ink); } html[data-sw-theme] hr { border-top-color: var(--sw-border); } html[data-sw-theme] .text-muted, html[data-sw-theme] small { color: var(--sw-muted); } html[data-sw-theme] .text-danger { color: var(--sw-danger) !important; } /* ------------------------------------------------------------------ busy spinner */ /* * The one loading spinner: a ring in the theme's heading color with an accent segment, on a small card with an * optional caption. Markup: . Full-page waits use window.swBusy.show(text) / hide() (Views/Shared/_SwThemeHead.cshtml), * which puts it on a .sw-busy overlay. The editor's page-load .preloader and busy .loader hold the same markup, and * DevExtreme's load indicators draw the same ring. */ html[data-sw-theme] .sw-spinner { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px; border: 1px solid var(--sw-border); border-radius: calc(var(--sw-radius) + 6px); background: var(--sw-pane); box-shadow: var(--sw-menu-shadow); color: var(--sw-muted); font-family: var(--sw-font); font-size: 13px; line-height: 1.3; text-align: center; } html[data-sw-theme] .sw-spinner-text { padding: 0 4px; } html[data-sw-theme] .sw-spinner-text:empty { display: none; } html[data-sw-theme] .sw-spinner-ring, html[data-sw-theme] .dx-loadindicator-content::after { box-sizing: border-box; display: block; width: 36px; height: 36px; border: 3px solid color-mix(in srgb, var(--sw-head) 16%, transparent); border-top-color: var(--sw-head); border-right-color: var(--sw-accent); border-radius: 50%; animation: sw-spin 0.8s linear infinite; } @keyframes sw-spin { to { transform: rotate(360deg); } } /* full-page overlay: fades in after a moment, so quick waits don't flash */ html[data-sw-theme] .sw-busy { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--sw-app) 60%, transparent); animation: sw-busy-in 0.2s ease-out 0.12s both; } html[data-sw-theme] .sw-busy[hidden] { display: none; } @keyframes sw-busy-in { from { opacity: 0; } } /* DevExtreme load indicators (grids, the start page's drawing list): the ring instead of DevExtreme's segments */ html[data-sw-theme] .dx-loadindicator-icon { display: none; } html[data-sw-theme] .dx-loadindicator-wrapper.dx-loadindicator-image { background-image: none; } html[data-sw-theme] .dx-loadindicator-content::after { content: ""; width: 100%; height: 100%; } @media (prefers-reduced-motion: reduce) { html[data-sw-theme] .sw-spinner-ring, html[data-sw-theme] .dx-loadindicator-content::after { animation-duration: 2.4s; } html[data-sw-theme] .sw-busy { animation: none; } } /* ------------------------------------------------------------------ buttons */ html[data-sw-theme] .btn { border-radius: var(--sw-radius); box-shadow: none; } html[data-sw-theme] .btn-default, html[data-sw-theme] .btn-secondary, html[data-sw-theme] .btn-warning, html[data-sw-theme] .btn-info.btn-outline { background: var(--sw-btn-bg); border: 1px solid var(--sw-btn-border); color: var(--sw-btn-text); } html[data-sw-theme] .btn-default:hover, html[data-sw-theme] .btn-default:focus, html[data-sw-theme] .btn-secondary:hover, html[data-sw-theme] .btn-warning:hover, html[data-sw-theme] .btn-warning:focus, html[data-sw-theme] .btn-info.btn-outline:hover, html[data-sw-theme] .btn-info.btn-outline:focus { background: var(--sw-btn-hover); border-color: var(--sw-btn-border); color: var(--sw-btn-text); } html[data-sw-theme] .btn-info.btn-outline .fa, html[data-sw-theme] .btn-info.btn-outline .fas { color: var(--sw-muted); } html[data-sw-theme] .btn-primary, html[data-sw-theme] .btn-info, html[data-sw-theme] .btn-default.active, html[data-sw-theme] .btn-warning.active { background: var(--sw-accent); border: 1px solid var(--sw-accent); color: var(--sw-on-accent); } html[data-sw-theme] .btn-primary:hover, html[data-sw-theme] .btn-primary:focus, html[data-sw-theme] .btn-info:hover, html[data-sw-theme] .btn-info:focus { background: var(--sw-accent); border-color: var(--sw-accent); color: var(--sw-on-accent); filter: brightness(0.95); } html[data-sw-theme] .btn:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: 1px; } /* ------------------------------------------------------------------ dropdown menus */ html[data-sw-theme] .navbar .dropdown-menu, html[data-sw-theme] .dropdown-menu { background: var(--sw-menu-bg); border: 1px solid var(--sw-menu-border); border-radius: calc(var(--sw-radius) + 2px); box-shadow: var(--sw-menu-shadow); padding: 6px; font-size: 13px; } html[data-sw-theme] .dropdown-menu > li > a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--sw-radius); color: var(--sw-text); } html[data-sw-theme] .dropdown-menu > li > a i, html[data-sw-theme] .dropdown-menu > li > a span.mdi, html[data-sw-theme] .dropdown-menu > li > a .glyphicon { width: 16px; color: var(--sw-muted); text-align: center; } html[data-sw-theme] .dropdown-menu > li > a img { filter: var(--sw-icon-filter); } html[data-sw-theme] .dropdown-menu > li > a:hover, html[data-sw-theme] .dropdown-menu > li > a:focus { background: var(--sw-menu-hover); color: var(--sw-text); } html[data-sw-theme] .dropdown-menu > li > a:hover i, html[data-sw-theme] .dropdown-menu > li > a:hover span.mdi { color: var(--sw-accent-ink); } html[data-sw-theme] .dropdown-menu .divider { background: var(--sw-menu-border); margin: 5px 4px; } html[data-sw-theme] .dropdown-menu > .dropdown-header { padding: 8px 10px 4px; color: var(--sw-muted); font-family: var(--sw-font-head); font-size: var(--sw-head-size); font-weight: var(--sw-head-weight); letter-spacing: var(--sw-head-spacing); text-transform: var(--sw-head-case); } html[data-sw-theme] .dropdown-submenu > a:after { border-left-color: var(--sw-muted); margin-left: auto; } html[data-sw-theme] .dropdown-submenu > .dropdown-menu { margin-top: -7px; border-radius: calc(var(--sw-radius) + 2px); } /* theme picker in the avatar menu */ html[data-sw-theme] .sw-theme-option .sw-theme-swatch { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); flex-shrink: 0; } html[data-sw-theme] .sw-theme-option[data-sw-theme-option="workshop"] .sw-theme-swatch { background: linear-gradient(135deg, #2f323e 50%, #fed136 50%); } html[data-sw-theme] .sw-theme-option[data-sw-theme-option="paper"] .sw-theme-swatch { background: linear-gradient(135deg, #ffffff 50%, #2d5bd2 50%); } html[data-sw-theme] .sw-theme-option[data-sw-theme-option="studio"] .sw-theme-swatch { background: linear-gradient(135deg, #191c21 50%, #fed136 50%); } html[data-sw-theme] .sw-theme-option[data-sw-theme-option="blueprint"] .sw-theme-swatch { background: linear-gradient(135deg, #123b64 50%, #e0572b 50%); } html[data-sw-theme] .dropdown-menu > li > a.sw-theme-option .sw-theme-check { margin-left: auto; visibility: hidden; color: var(--sw-accent-ink); } html[data-sw-theme="workshop"] .dropdown-menu > li > a.sw-theme-option[data-sw-theme-option="workshop"] .sw-theme-check, html[data-sw-theme="paper"] .dropdown-menu > li > a.sw-theme-option[data-sw-theme-option="paper"] .sw-theme-check, html[data-sw-theme="studio"] .dropdown-menu > li > a.sw-theme-option[data-sw-theme-option="studio"] .sw-theme-check, html[data-sw-theme="blueprint"] .dropdown-menu > li > a.sw-theme-option[data-sw-theme-option="blueprint"] .sw-theme-check { visibility: visible; } /* Menus open the same way everywhere: a quick fade and a small rise. The editor and admin layouts used to spin theirs in with animate.css ("animated flipInY") while the dashboard, which does not load animate.css, just showed them. */ html[data-sw-theme] .dropdown-menu { animation: sw-menu-in 0.12s ease-out; } @keyframes sw-menu-in { from { opacity: 0; transform: translateY(-4px); } } @media (prefers-reduced-motion: reduce) { html[data-sw-theme] .dropdown-menu { animation: none; } } /* ------------------------------------------------------------------ DevExtreme editors */ html[data-sw-theme] .dx-texteditor { background: var(--sw-input-bg); border: 1px solid var(--sw-input-border); border-radius: var(--sw-radius); } html[data-sw-theme] .dx-texteditor.dx-state-hover { border-color: color-mix(in srgb, var(--sw-input-border) 60%, var(--sw-text)); } html[data-sw-theme] .dx-texteditor.dx-state-focused, html[data-sw-theme] .dx-texteditor.dx-state-active { border-color: var(--sw-accent); } html[data-sw-theme] .dx-texteditor-input, html[data-sw-theme] .dx-placeholder:before { color: var(--sw-text); font-size: 13px; } html[data-sw-theme] .dx-placeholder:before { color: var(--sw-muted); } html[data-sw-theme] .dx-numberbox .dx-texteditor-input, html[data-sw-theme] .dx-colorbox .dx-texteditor-input { font-family: var(--sw-font-mono); font-variant-numeric: tabular-nums; } html[data-sw-theme] .dx-dropdowneditor-button .dx-button-content, html[data-sw-theme] .dx-dropdowneditor-button, html[data-sw-theme] .dx-numberbox-spin-button { background: transparent !important; border: 0 !important; } html[data-sw-theme] .dx-dropdowneditor-icon, html[data-sw-theme] .dx-numberbox-spin-up-icon, html[data-sw-theme] .dx-numberbox-spin-down-icon { background: transparent; color: var(--sw-muted); } html[data-sw-theme] .dx-state-disabled.dx-widget, html[data-sw-theme] .dx-state-disabled .dx-widget { opacity: 0.55; } html[data-sw-theme] .dx-checkbox-text { color: var(--sw-text); font-size: 13px; } html[data-sw-theme] .dx-checkbox-icon { width: 16px; height: 16px; border: 1px solid var(--sw-input-border); border-radius: min(var(--sw-radius), 3px); background: var(--sw-input-bg); } /* the label sits beside the 16px box: DevExtreme's full-size themes (Workshop, Paper, Studio) pull it back by their own 22px box, which left a label that sizes itself 6px short, so it broke mid-word */ html[data-sw-theme] .dx-checkbox-text { margin-left: -16px; padding-left: 21px; } html[data-sw-theme] .dx-checkbox-checked .dx-checkbox-icon { background: var(--sw-accent); border-color: var(--sw-accent); color: var(--sw-on-accent); } /* the tick: a 12px box centred in ours. DevExtreme's full-size themes size this box for their 22px checkbox (16px wide, 16px line), which put the tick 2px right and 2px low; the compact theme's 10px box hid it */ html[data-sw-theme] .dx-checkbox-checked .dx-checkbox-icon:before { color: var(--sw-on-accent); width: 12px; height: 12px; font-size: 12px; line-height: 12px; text-align: center; margin-top: -6px; margin-left: -6px; } /* the mixed-state mark: DevExtreme sizes it for its own 22px box (12px, 4px in), which overflowed ours */ html[data-sw-theme] .dx-checkbox-indeterminate .dx-checkbox-icon:before { top: 3px; left: 3px; width: 8px; height: 8px; border-radius: 1px; background: var(--sw-muted); } html[data-sw-theme] .dx-switch-container { background: var(--sw-input-border); border-color: var(--sw-input-border); border-radius: 999px; } html[data-sw-theme] .dx-switch-on-value .dx-switch-container { background: var(--sw-accent); border-color: var(--sw-accent); } html[data-sw-theme] .dx-switch-handle:before { background: #ffffff; border-radius: 50%; } html[data-sw-theme] .dx-switch-on, html[data-sw-theme] .dx-switch-off { color: transparent; } html[data-sw-theme] .dx-radiobutton-icon:before { border-color: var(--sw-input-border); background: var(--sw-input-bg); } html[data-sw-theme] .dx-radiobutton-checked .dx-radiobutton-icon-dot { background: var(--sw-accent); } html[data-sw-theme] .dx-button { background: var(--sw-btn-bg); border: 1px solid var(--sw-btn-border); border-radius: var(--sw-radius); color: var(--sw-btn-text); box-shadow: none; } html[data-sw-theme] .dx-button .dx-icon { color: var(--sw-accent-ink); } html[data-sw-theme] .dx-button.dx-state-hover { background: var(--sw-btn-hover); } html[data-sw-theme] .dx-button-default, html[data-sw-theme] .dx-button-success { background: var(--sw-accent); border-color: var(--sw-accent); color: var(--sw-on-accent); } html[data-sw-theme] .dx-button-default .dx-icon, html[data-sw-theme] .dx-button-success .dx-icon { color: var(--sw-on-accent); } html[data-sw-theme] .dx-overlay-content.dx-popup-normal, html[data-sw-theme] .dx-dropdownlist-popup-wrapper .dx-overlay-content, html[data-sw-theme] .dx-colorbox-overlay .dx-overlay-content, html[data-sw-theme] .dx-context-menu .dx-overlay-content, html[data-sw-theme] .dx-context-menu.dx-overlay-content { background: var(--sw-menu-bg); border: 1px solid var(--sw-menu-border); border-radius: calc(var(--sw-radius) + 2px); box-shadow: var(--sw-menu-shadow); color: var(--sw-text); } html[data-sw-theme] .dx-list-item { color: var(--sw-text); border-top-color: var(--sw-grid-line); } html[data-sw-theme] .dx-list-item.dx-state-hover, html[data-sw-theme] .dx-menu-item.dx-state-hover { background: var(--sw-menu-hover); color: var(--sw-text); } html[data-sw-theme] .dx-list-item.dx-list-item-selected, html[data-sw-theme] .dx-list-item.dx-state-focused { background: var(--sw-accent-soft); color: var(--sw-text); } html[data-sw-theme] .dx-fileuploader-wrapper, html[data-sw-theme] #myTileView { border: 1px solid var(--sw-input-border); border-radius: var(--sw-radius); background: var(--sw-input-bg); } /* ------------------------------------------------------------------ DevExtreme grids */ html[data-sw-theme] .dx-datagrid { background: var(--sw-pane); color: var(--sw-text); font-size: 13px; } html[data-sw-theme] .dx-datagrid-header-panel { padding: 8px 12px; background: var(--sw-pane); border-bottom: 1px solid var(--sw-border); } html[data-sw-theme] .dx-datagrid-header-panel .dx-toolbar { background: transparent; margin: 0; } html[data-sw-theme] .dx-datagrid-group-panel, html[data-sw-theme] .dx-datagrid-group-panel .dx-group-panel-message { color: var(--sw-muted); font-size: 12px; } html[data-sw-theme] .dx-datagrid-group-panel .dx-group-panel-item { background: var(--sw-pane-alt); border: 1px solid var(--sw-border); border-radius: var(--sw-radius); color: var(--sw-text); } html[data-sw-theme] .dx-datagrid-headers { background: var(--sw-grid-head); color: var(--sw-head); border-bottom: 1px solid var(--sw-border) !important; font-weight: 600; font-size: 12px; } html[data-sw-theme="studio"] .dx-datagrid-headers, html[data-sw-theme="blueprint"] .dx-datagrid-headers { text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; } html[data-sw-theme] .dx-datagrid-headers .dx-header-row > td { border-color: var(--sw-grid-line); padding-top: 10px; padding-bottom: 10px; } html[data-sw-theme] .dx-datagrid-headers .dx-datagrid-filter-row, html[data-sw-theme] .dx-datagrid-filter-row { background: var(--sw-pane); } html[data-sw-theme] .dx-datagrid-filter-row .dx-editor-cell .dx-texteditor { border: 1px solid var(--sw-grid-line); } html[data-sw-theme] .dx-datagrid-rowsview { background: var(--sw-pane); border-color: var(--sw-grid-line) !important; } html[data-sw-theme] .dx-datagrid-rowsview .dx-row, html[data-sw-theme] .dx-datagrid-rowsview .dx-row > td { border-color: var(--sw-grid-line); } html[data-sw-theme] .dx-datagrid-rowsview .dx-data-row > td { padding-top: 7px; padding-bottom: 7px; vertical-align: middle; } html[data-sw-theme] .dx-datagrid .dx-row-alt > td, html[data-sw-theme] .dx-datagrid .dx-row-alt.dx-data-row { background: var(--sw-grid-stripe); } html[data-sw-theme] .dx-datagrid-rowsview .dx-row.dx-state-hover:not(.dx-row-focused) > td:not(.dx-focused) { background: var(--sw-pane-alt); color: var(--sw-text); } html[data-sw-theme] .dx-datagrid-rowsview .dx-selection.dx-row > td, html[data-sw-theme] .dx-datagrid-rowsview .dx-selection.dx-row:hover > td { background: var(--sw-accent-soft); color: var(--sw-text); } html[data-sw-theme] .dx-datagrid-rowsview .dx-group-row { background: var(--sw-pane-alt); color: var(--sw-head); } html[data-sw-theme] .dx-datagrid .dx-link, html[data-sw-theme] .dx-datagrid a { color: var(--sw-accent-ink); } html[data-sw-theme] .dx-datagrid .sw-readonly-cell { background: var(--sw-pane-alt); } html[data-sw-theme] .dx-datagrid-rowsview .dx-data-row > td { color: var(--sw-text); } html[data-sw-theme] .dx-datagrid .dx-data-row .dx-button { min-height: 0; height: 26px; } /* "Show Me" and similar Bootstrap buttons rendered by cell templates */ html[data-sw-theme] .dx-datagrid .dx-data-row .btn { padding: 2px 8px; font-size: 12px; line-height: 20px; white-space: nowrap; } /* cell templates put the button label inside the icon span, so give the text the UI font back */ html[data-sw-theme] .dx-datagrid .dx-data-row .btn > span.mdi:not(:empty), html[data-sw-theme] .dx-datagrid .dx-data-row .btn > span.fa:not(:empty) { font-family: var(--sw-font); font-size: 12px; font-weight: 500; line-height: 20px; } html[data-sw-theme] .dx-datagrid .dx-data-row .btn > span.mdi:not(:empty):before { font-family: "Material Design Icons"; font-size: 15px; vertical-align: -1px; color: var(--sw-accent-ink); } html[data-sw-theme] .dx-datagrid .dx-data-row .btn > span.fa:not(:empty):before { font-family: "Font Awesome 5 Pro"; font-weight: 900; margin-right: 2px; color: var(--sw-accent-ink); } html[data-sw-theme] .dx-datagrid .dx-data-row .dx-button .dx-button-content { padding: 3px 8px; font-size: 12px; } html[data-sw-theme] .dx-datagrid .dx-master-detail-row, html[data-sw-theme] .dx-datagrid .dx-master-detail-row > td { background: var(--sw-pane-alt); } html[data-sw-theme] .dx-datagrid-pager { padding: 8px 12px; background: var(--sw-pane); border-top: 1px solid var(--sw-border) !important; color: var(--sw-muted); } html[data-sw-theme] .dx-pager .dx-pages .dx-page, html[data-sw-theme] .dx-pager .dx-page-sizes .dx-page-size { border-radius: var(--sw-radius); color: var(--sw-text); } html[data-sw-theme] .dx-pager .dx-pages .dx-selection { background: var(--sw-accent); color: var(--sw-on-accent); } html[data-sw-theme] .dx-pager .dx-page-sizes .dx-selection { background: var(--sw-accent-soft); color: var(--sw-accent-ink); } html[data-sw-theme] .dx-pager .dx-info { color: var(--sw-muted); font-family: var(--sw-font-mono); font-variant-numeric: tabular-nums; } html[data-sw-theme] .dx-toolbar { background: transparent; color: var(--sw-text); } /* ------------------------------------------------------------------ modals and alerts */ html[data-sw-theme] .modal-content { background: var(--sw-pane); border: 1px solid var(--sw-border); border-radius: calc(var(--sw-radius) + 4px); box-shadow: var(--sw-menu-shadow); color: var(--sw-text); } html[data-sw-theme] .modal-header, html[data-sw-theme] .modal-footer { border-color: var(--sw-border); } html[data-sw-theme] .modal-title { color: var(--sw-head); font-weight: 600; } html[data-sw-theme] .modal .close { color: var(--sw-muted); text-shadow: none; opacity: 1; } html[data-sw-theme] .modal .nav-tabs { border-color: var(--sw-border); } html[data-sw-theme] .modal .nav-tabs > li > a { color: var(--sw-muted); } html[data-sw-theme] .modal .nav-tabs > li.active > a { background: var(--sw-pane); border-color: var(--sw-border) var(--sw-border) transparent; color: var(--sw-head); } html[data-sw-theme] .modal .form-control, html[data-sw-theme] .form-control { background: var(--sw-input-bg); border: 1px solid var(--sw-input-border); border-radius: var(--sw-radius); color: var(--sw-text); box-shadow: none; } html[data-sw-theme] .swal2-popup { background: var(--sw-pane); color: var(--sw-text); border-radius: calc(var(--sw-radius) + 4px); } html[data-sw-theme] .swal2-title { color: var(--sw-head); } html[data-sw-theme] .swal2-content, html[data-sw-theme] .swal2-html-container { color: var(--sw-muted); } html[data-sw-theme] .swal2-styled.swal2-confirm { background: var(--sw-accent) !important; color: var(--sw-on-accent) !important; border-radius: var(--sw-radius); } html[data-sw-theme] .swal2-styled.swal2-cancel { background: var(--sw-btn-bg) !important; color: var(--sw-btn-text) !important; border: 1px solid var(--sw-btn-border); border-radius: var(--sw-radius); } html[data-sw-theme] .swal2-input { background: var(--sw-input-bg); color: var(--sw-text); border-color: var(--sw-input-border); } html[data-sw-theme] .tooltip-inner { background: var(--sw-top); color: var(--sw-top-text); border-radius: var(--sw-radius); font-family: var(--sw-font); } /* tooltips with a heading (the dashboard pages' .myTooltips, "Tool Info"): a card in the theme's menu colours */ html[data-sw-theme] .tooltip.in { opacity: 1; } html[data-sw-theme] .tooltip:has(.tooltip-head) { filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.22)); } html[data-sw-theme] .tooltip-head { margin: 0; padding: 9px 12px 0; border: 1px solid var(--sw-menu-border); border-bottom: 0; border-radius: calc(var(--sw-radius) + 2px) calc(var(--sw-radius) + 2px) 0 0; background: var(--sw-menu-bg); color: var(--sw-muted); text-align: left; } html[data-sw-theme] .tooltip-head h3 { margin: 0; color: inherit; font-family: var(--sw-font-head); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } html[data-sw-theme] .tooltip-head h3 .fa { margin-right: 4px; color: var(--sw-accent-ink); } html[data-sw-theme] .tooltip-head + .tooltip-inner { max-width: 260px; padding: 4px 12px 10px; border: 1px solid var(--sw-menu-border); border-top: 0; border-radius: 0 0 calc(var(--sw-radius) + 2px) calc(var(--sw-radius) + 2px); background: var(--sw-menu-bg); color: var(--sw-text); font-size: 13px; line-height: 1.45; text-align: left; } html[data-sw-theme] .tooltip.top:has(.tooltip-head) .tooltip-arrow { border-top-color: var(--sw-menu-bg); } html[data-sw-theme] .tooltip.bottom:has(.tooltip-head) .tooltip-arrow { border-bottom-color: var(--sw-menu-bg); } html[data-sw-theme] .tooltip.left:has(.tooltip-head) .tooltip-arrow { border-left-color: var(--sw-menu-bg); } html[data-sw-theme] .tooltip.right:has(.tooltip-head) .tooltip-arrow { border-right-color: var(--sw-menu-bg); } /* ------------------------------------------------------------------ dark theme extras */ html[data-sw-theme="studio"] .table-responsive, html[data-sw-theme="studio"] .white-box .table { background: transparent; } /* ------------------------------------------------------------------ scrollbars */ /* One rule set; each theme styles it through the --sw-scroll-* tokens in sw-tokens.css, the thumb in its accent. */ html[data-sw-theme] { --sw-scroll-thumb: color-mix(in srgb, var(--sw-accent) var(--sw-scroll-mix), var(--sw-scroll-mute)); } html[data-sw-theme]::-webkit-scrollbar, html[data-sw-theme] ::-webkit-scrollbar { width: var(--sw-scroll-size); height: var(--sw-scroll-size); background: var(--sw-scroll-track); } html[data-sw-theme]::-webkit-scrollbar-corner, html[data-sw-theme] ::-webkit-scrollbar-corner { background: var(--sw-scroll-track); } html[data-sw-theme]::-webkit-scrollbar-button, html[data-sw-theme] ::-webkit-scrollbar-button { display: none; } html[data-sw-theme]::-webkit-scrollbar-thumb, html[data-sw-theme] ::-webkit-scrollbar-thumb { min-width: 24px; min-height: 24px; background-color: var(--sw-scroll-thumb); background-clip: padding-box; border: var(--sw-scroll-inset) solid transparent; border-radius: var(--sw-scroll-radius); box-shadow: inset 0 0 0 1px var(--sw-scroll-edge); } html[data-sw-theme]::-webkit-scrollbar-thumb:hover, html[data-sw-theme] ::-webkit-scrollbar-thumb:hover, html[data-sw-theme]::-webkit-scrollbar-thumb:active, html[data-sw-theme] ::-webkit-scrollbar-thumb:active { background-color: var(--sw-scroll-thumb-hover); } /* the library palettes and warehouses stay light in every theme */ html[data-sw-theme] #MainMenu .collapse { --sw-scroll-track: var(--sw-palette-scroll-track); --sw-scroll-thumb: color-mix(in srgb, var(--sw-accent) var(--sw-scroll-mix), var(--sw-palette-scroll-mute)); } /* DevExtreme draws its own scrollbars in grids and lists */ html[data-sw-theme] .dx-scrollable-scroll-content { background-color: var(--sw-scroll-thumb); border-radius: var(--sw-scroll-radius); box-shadow: inset 0 0 0 1px var(--sw-scroll-edge); } /* browsers without ::-webkit-scrollbar (Firefox) take the colours only */ @supports not selector(::-webkit-scrollbar) { html[data-sw-theme], html[data-sw-theme] * { scrollbar-color: var(--sw-scroll-thumb) var(--sw-scroll-track); } } @media (prefers-reduced-motion: reduce) { html[data-sw-theme] .dropdown-menu.animated { animation: none; } } /* ------------------------------------------------------------------ help panel (Views/Shared/_HelpPanel.cshtml) */ html[data-sw-theme] .sw-help-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1060; /* above Bootstrap modals, so F1 inside a dialog shows its help */ width: var(--sw-help-width, min(480px, 100vw)); /* --sw-help-width: set by dragging the left edge */ display: flex; flex-direction: column; background: var(--sw-pane); border-left: 1px solid var(--sw-border); box-shadow: var(--sw-menu-shadow); transform: translateX(105%); visibility: hidden; transition: transform 0.18s ease, visibility 0s linear 0.18s; font-family: var(--sw-font); } html[data-sw-theme] .sw-help-panel.sw-help-open { transform: translateX(0); visibility: visible; transition: transform 0.18s ease; } /* the left edge: drag to resize, double-click to reset, or focus it and use the arrow keys */ html[data-sw-theme] .sw-help-resize { position: absolute; top: 0; bottom: 0; left: -4px; z-index: 1; width: 8px; cursor: ew-resize; touch-action: none; } html[data-sw-theme] .sw-help-resize::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: transparent; transition: background 0.12s ease; } html[data-sw-theme] .sw-help-resize:hover::after, html[data-sw-theme] .sw-help-resize:focus-visible::after, html[data-sw-theme] .sw-help-resizing .sw-help-resize::after { background: var(--sw-accent); } html[data-sw-theme] .sw-help-resize:focus-visible { outline: none; } /* while dragging: no slide transition, no text selection, and the manual's frame can't swallow the pointer */ html[data-sw-theme] .sw-help-panel.sw-help-resizing { transition: none; user-select: none; } html[data-sw-theme] .sw-help-resizing .sw-help-frame { pointer-events: none; } html[data-sw-theme] .sw-help-head { display: flex; align-items: center; gap: 4px; height: 44px; flex-shrink: 0; padding: 0 8px 0 16px; background: var(--sw-top); border-bottom: 1px solid var(--sw-top-border); color: var(--sw-top-text); } html[data-sw-theme] .sw-help-title { flex: 1 1 auto; font-family: var(--sw-font-head); font-size: var(--sw-head-size); font-weight: var(--sw-head-weight); letter-spacing: var(--sw-head-spacing); text-transform: var(--sw-head-case); } html[data-sw-theme] .sw-help-action { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--sw-radius); background: transparent; color: var(--sw-top-muted); cursor: pointer; } html[data-sw-theme] .sw-help-action:hover, html[data-sw-theme] .sw-help-action:focus-visible { background: var(--sw-top-hover); color: var(--sw-top-text); outline: none; } html[data-sw-theme] .sw-help-frame { flex: 1 1 auto; width: 100%; border: 0; background: var(--sw-pane); } html[data-sw-theme] kbd { padding: 1px 5px; border: 1px solid var(--sw-border); border-radius: var(--sw-radius); background: var(--sw-pane-alt); color: var(--sw-muted); font-family: var(--sw-font-mono); font-size: 11px; box-shadow: none; } @media (prefers-reduced-motion: reduce) { html[data-sw-theme] .sw-help-panel, html[data-sw-theme] .sw-help-panel.sw-help-open { transition: none; } } /* * Dashboard layout (Views/Shared/_DashboardLayout.cshtml): projects dashboard, teams, billing, manage and * the other account pages. Overrides agency.css / team_style.css. Loaded after sw-tokens.css and sw-common.css. */ /* ------------------------------------------------------------------ base */ html[data-sw-theme] body { font-size: 14px; } html[data-sw-theme] h1, html[data-sw-theme] h2, html[data-sw-theme] h3, html[data-sw-theme] h4, html[data-sw-theme] h5, html[data-sw-theme] h6 { text-transform: none; letter-spacing: -0.005em; font-weight: 600; } html[data-sw-theme] .body-content > h2, html[data-sw-theme] .body-content > h3 { color: var(--sw-head); } /* the page ground must reach the bottom of the window, and the footer sits at the bottom on short pages */ html[data-sw-theme] { background: var(--sw-app); } html[data-sw-theme] body { display: flex; flex-direction: column; min-height: 100vh; } /* .body-content is a .container that this Bootstrap copy limits with max-width only. As a flex item with auto margins it would shrink to its content (collapsing the help iframe to 300px), so give it the full width back. */ html[data-sw-theme] body > .body-content { flex: 1 0 auto; width: 100%; padding-bottom: 40px; /* The layout used to carry margin-top:100px to clear a fixed navbar. The navbar's navbar-fixed-top is a Bootstrap 3 class and this is Bootstrap 4, so it never leaves the flow and that margin was 120px of empty page. */ padding-top: 32px; } html[data-sw-theme] .body-content h5 { font-family: var(--sw-font-head); font-size: var(--sw-head-size); font-weight: var(--sw-head-weight); letter-spacing: var(--sw-head-spacing); text-transform: var(--sw-head-case); color: var(--sw-muted); } html[data-sw-theme] .text-primary { color: var(--sw-text); } /* ------------------------------------------------------------------ top bar */ html[data-sw-theme] .navbar-default, html[data-sw-theme] .navbar-default.navbar-shrink { background: var(--sw-top); border: 0; border-bottom: 1px solid var(--sw-top-border); box-shadow: none; padding: 6px 0; } html[data-sw-theme] .navbar-default .navbar-brand { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 15px; color: var(--sw-brand-text, var(--sw-label)); } html[data-sw-theme] .navbar-default .navbar-brand img { height: 32px; width: auto; filter: var(--sw-brand-filter, none); } html[data-sw-theme] .navbar-default .navbar-brand span { font-size: 20px; color: var(--sw-brand-text, var(--sw-label)); } html[data-sw-theme] .navbar-default .nav > li > a { padding: 0 12px; line-height: 44px; color: var(--sw-top-text); font-family: var(--sw-font); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; text-transform: none; border-radius: var(--sw-radius); } html[data-sw-theme] .navbar-default .nav > li > a:hover, html[data-sw-theme] .navbar-default .nav > li > a:focus, html[data-sw-theme] .navbar-default .nav > li.open > a { background: var(--sw-top-hover); color: var(--sw-top-text); } html[data-sw-theme] .navbar-default .navbar-toggle { background: var(--sw-top-hover); border-color: var(--sw-top-muted); } html[data-sw-theme] .navbar-default .navbar-toggle .icon-bar { background: var(--sw-top-text); } html[data-sw-theme] .navbar-default .navbar-collapse { border-color: var(--sw-top-border); } /* avatar and user menu (_LoginPartial) */ html[data-sw-theme] .navbar-default .nav > li > a.sw-avatar-toggle { display: flex; align-items: center; height: 44px; padding: 0 6px 0 12px; background: transparent; } html[data-sw-theme] .avatar-circle { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--sw-avatar-bg); box-shadow: inset 0 0 0 1.5px var(--sw-avatar-ring); } html[data-sw-theme] .avatar-circle .initials { font-family: var(--sw-font); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; line-height: 1; color: var(--sw-avatar-text); } html[data-sw-theme] .navbar-default .dropdown-user { min-width: 240px; } html[data-sw-theme] .navbar-default .dropdown-user > li > a { color: var(--sw-text); text-transform: none; letter-spacing: 0; font-size: 13px; line-height: 1.4; } /* ------------------------------------------------------------------ stat cards (white-box / row-in) */ html[data-sw-theme] .white-box { background: var(--sw-pane); border: 1px solid var(--sw-border); border-radius: calc(var(--sw-radius) + 2px); box-shadow: none; color: var(--sw-text); } html[data-sw-theme] .row-in-br, html[data-sw-theme] .row-in .row-in-br { border-color: var(--sw-grid-line) !important; } html[data-sw-theme] .white-box h4, html[data-sw-theme] .white-box h5 { font-family: var(--sw-font-head); font-size: var(--sw-head-size); font-weight: var(--sw-head-weight); letter-spacing: var(--sw-head-spacing); text-transform: var(--sw-head-case); color: var(--sw-muted); } html[data-sw-theme] .white-box .counter { font-family: var(--sw-font-mono); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--sw-head); } html[data-sw-theme] .circle { background: var(--sw-accent-soft) !important; color: var(--sw-accent-ink); } html[data-sw-theme] .circle i { color: var(--sw-accent-ink); } html[data-sw-theme] .progress { height: 6px; background: var(--sw-grid-line); border-radius: 3px; box-shadow: none; } html[data-sw-theme] .progress-bar, html[data-sw-theme] .progress-bar-info, html[data-sw-theme] .progress-bar-danger, html[data-sw-theme] .progress-bar-warning, html[data-sw-theme] .progress-bar-success { background: var(--sw-accent); box-shadow: none; } /* ------------------------------------------------------------------ panels (collapsible sections) */ html[data-sw-theme] .panel { background: var(--sw-pane); border: 1px solid var(--sw-border); border-radius: calc(var(--sw-radius) + 2px); box-shadow: none; color: var(--sw-text); } html[data-sw-theme] .panel-inverse > .panel-heading, html[data-sw-theme] .panel-default > .panel-heading { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 16px; background: var(--sw-panel-head); border-bottom: 1px solid var(--sw-border); border-radius: calc(var(--sw-radius) + 2px) calc(var(--sw-radius) + 2px) 0 0; color: var(--sw-panel-head-text); font-family: var(--sw-font-head); font-size: var(--sw-head-size); font-weight: var(--sw-head-weight); letter-spacing: var(--sw-head-spacing); text-transform: var(--sw-head-case); } /* heading actions were right floats (collapse toggle first, then buttons in reverse visual order); as flex items, a spacer after the title pushes them right and `order` keeps the old left-to-right order */ html[data-sw-theme] .panel-inverse > .panel-heading::after { content: ""; flex: 1 1 auto; order: 1; } html[data-sw-theme] .panel-inverse > .panel-heading > .pull-right { float: none !important; margin: 0 !important; font-family: var(--sw-font); text-transform: none; letter-spacing: 0; } html[data-sw-theme] .panel-inverse > .panel-heading > button.pull-right:nth-of-type(3) { order: 2; } html[data-sw-theme] .panel-inverse > .panel-heading > button.pull-right:nth-of-type(2) { order: 3; } html[data-sw-theme] .panel-inverse > .panel-heading > button.pull-right:nth-of-type(1) { order: 4; } html[data-sw-theme] .panel-inverse > .panel-heading > div.pull-right { order: 5; margin-left: 4px !important; } html[data-sw-theme] .panel-inverse > .panel-heading a { color: var(--sw-panel-head-text); } html[data-sw-theme] .panel-body { background: var(--sw-pane); color: var(--sw-text); } /* many views draw a light-grey border inline on the panel body */ html[data-sw-theme] .panel-body[style*="border"] { border: 0 !important; } /* ------------------------------------------------------------------ Teams page (Views/Teams) */ /* a team: name, facts and actions, always open */ html[data-sw-theme] .sw-team { overflow: visible; } html[data-sw-theme] .sw-team-head { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px 16px; } html[data-sw-theme] .sw-team-id { flex: 1 1 auto; min-width: 0; } html[data-sw-theme] .sw-team-name { margin: 0; color: var(--sw-text); font-family: var(--sw-font-head); font-size: 20px; font-weight: 600; letter-spacing: 0; line-height: 1.25; text-transform: none; } html[data-sw-theme] .sw-team-desc { margin: 2px 0 0; color: var(--sw-muted); } html[data-sw-theme] .sw-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } html[data-sw-theme] .sw-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 12px; background: var(--sw-pane-alt); color: var(--sw-muted); font-size: 12px; font-variant-numeric: tabular-nums; } html[data-sw-theme] .sw-chip b { color: var(--sw-text); font-weight: 600; } html[data-sw-theme] .sw-team-actions { display: flex; flex: none; align-items: center; gap: 8px; } html[data-sw-theme] .sw-team-actions .btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; font-weight: 500; } html[data-sw-theme] .sw-team-actions .sw-icon-btn { justify-content: center; width: 34px; padding: 0; } /* the page loads Bootstrap 3.0.0, which has no dropdown-menu-right: open the menu leftwards from the button */ html[data-sw-theme] .sw-team-actions .dropdown { position: relative; } html[data-sw-theme] .sw-team-actions .dropdown-menu { right: 0; left: auto; } html[data-sw-theme] .sw-team-actions .dropdown-menu > li > a { display: flex; align-items: center; gap: 8px; padding: 8px 14px; } html[data-sw-theme] .sw-team-actions .dropdown-menu > li > a > i { width: 14px; text-align: center; } html[data-sw-theme] .sw-team-actions .dropdown-menu > li > a.sw-menu-danger { color: var(--sw-danger); } html[data-sw-theme] .sw-team-body { border-top: 1px solid var(--sw-border); } html[data-sw-theme] .sw-team-body > .panel-body { padding-top: 0; } /* the team's tabs carry their summaries: "Members" over "3 members ยท 1 Team Owner, 2 Users" */ html[data-sw-theme] .sw-team-tabs { display: flex; flex-wrap: wrap; margin-bottom: 14px; } html[data-sw-theme] .sw-team-tabs > li { float: none; margin-bottom: -1px; } html[data-sw-theme] .sw-team-tabs > li > a { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 12px 20px 9px 0; border-bottom-width: 3px !important; } html[data-sw-theme] .sw-team-tabs > li + li > a { padding-left: 20px; } html[data-sw-theme] .sw-tab-title { color: inherit; font-family: var(--sw-font-head); font-size: 15px; font-weight: 600; } html[data-sw-theme] .sw-tab-summary { color: var(--sw-muted); font-size: 12px; font-weight: 400; } html[data-sw-theme] .sw-team-tabs > li.active > a .sw-tab-title { color: var(--sw-text); } /* page tabs: Teams, Members, Projects, Roles, each with a count and a summary line; one panel shows at a time */ /* the bar's bottom line is drawn inside it (inset shadow), so the tabs' underlines cover it without spilling out: a tab pushed below the bar made its sideways scrolling show a vertical scrollbar */ html[data-sw-theme] .sw-page-tabs { display: flex; gap: 4px; margin: 8px 0 18px; overflow-x: auto; overflow-y: hidden; box-shadow: inset 0 -1px 0 var(--sw-border); } /* a slimmer themed bar for sideways scrolling (scrollbar-width would switch Chrome back to its own bar) */ html[data-sw-theme] .sw-page-tabs::-webkit-scrollbar { height: 6px; } html[data-sw-theme] .sw-page-tab { display: flex; flex: none; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 20px 10px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--sw-muted); text-align: left; cursor: pointer; } html[data-sw-theme] .sw-page-tab:first-child { padding-left: 2px; } html[data-sw-theme] .sw-page-tab:hover { color: var(--sw-text); } html[data-sw-theme] .sw-page-tab:focus { outline: none; } html[data-sw-theme] .sw-page-tab:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: -2px; } html[data-sw-theme] .sw-page-tab[aria-selected="true"] { border-bottom-color: var(--sw-accent); color: var(--sw-text); } html[data-sw-theme] .sw-page-tab .sw-tab-title { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; white-space: nowrap; } html[data-sw-theme] .sw-page-tab .sw-tab-summary { white-space: nowrap; } html[data-sw-theme] .sw-tab-count { padding: 1px 8px; border-radius: 10px; background: var(--sw-pane-alt); color: var(--sw-muted); font-family: var(--sw-font); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; } html[data-sw-theme] .sw-page-tab[aria-selected="true"] .sw-tab-count { background: var(--sw-accent-soft); color: var(--sw-accent-ink); } html[data-sw-theme] .sw-tabpanel[hidden] { display: none; } html[data-sw-theme] .sw-tab-toolbar { display: flex; justify-content: flex-end; margin: 0 0 12px; } html[data-sw-theme] .sw-tab-toolbar .btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; font-weight: 500; } html[data-sw-theme] .sw-tab-empty { padding: 24px 0; color: var(--sw-muted); } @media (max-width: 600px) { html[data-sw-theme] .sw-team-head { flex-wrap: wrap; } html[data-sw-theme] .sw-page-tab { padding: 10px 12px 8px; } html[data-sw-theme] .sw-page-tab .sw-tab-summary { display: none; } } /* ------------------------------------------------------------------ tables and lists */ html[data-sw-theme] .body-content .table { background: var(--sw-pane); color: var(--sw-text); font-size: 13px; } html[data-sw-theme] .body-content .table > thead > tr > th, html[data-sw-theme] .body-content .table > tbody > tr > th, html[data-sw-theme] .body-content .table > tr > th { background: var(--sw-grid-head); border-color: var(--sw-border); color: var(--sw-head); font-size: 12px; font-weight: 600; } html[data-sw-theme="studio"] .body-content .table th, html[data-sw-theme="blueprint"] .body-content .table th { text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; } html[data-sw-theme] .body-content .table th a { color: var(--sw-head); } html[data-sw-theme] .body-content .table > tbody > tr > td, html[data-sw-theme] .body-content .table > tr > td { border-color: var(--sw-grid-line); color: var(--sw-text); vertical-align: middle; } html[data-sw-theme] .body-content .table-bordered, html[data-sw-theme] .body-content .table-bordered > tbody > tr > td, html[data-sw-theme] .body-content .table-bordered > thead > tr > th { border-color: var(--sw-grid-line); } html[data-sw-theme] .body-content .table-striped > tbody > tr:nth-of-type(odd), html[data-sw-theme] .body-content .table-striped > tbody > tr:nth-of-type(odd) > td { background: var(--sw-grid-stripe); } html[data-sw-theme] .body-content .table > tbody > tr:hover > td { background: var(--sw-pane-alt); } html[data-sw-theme] .body-content .table .fa-2x { font-size: 16px; color: var(--sw-muted); } /* projects list: name link, stamp lines and row menu */ html[data-sw-theme] .body-content .table td > a[href^="javascript:openProject"] { color: var(--sw-accent-ink) !important; font-weight: 600; font-size: 14px; } html[data-sw-theme] .body-content .table td > div[style*="font-size:9px"] { font-size: 11px !important; line-height: 1.5; color: var(--sw-muted); font-family: var(--sw-font-mono); } html[data-sw-theme] .body-content .table td > div[style*="font-size:9px"] b { color: var(--sw-text); font-weight: 500; } html[data-sw-theme] .body-content .table .text-info { color: var(--sw-muted) !important; } html[data-sw-theme] .body-content .table .navbar-nav > li > a { padding: 6px 10px; } html[data-sw-theme] .body-content .table .navbar-nav > li > a:hover, html[data-sw-theme] .body-content .table .navbar-nav > li > a:focus, html[data-sw-theme] .body-content .table .navbar-nav > li.open > a { background: var(--sw-pane-alt); border-radius: var(--sw-radius); } html[data-sw-theme] .pic-container { justify-content: space-between; } html[data-sw-theme] .pic-container .pic-right { order: 2; margin-left: auto; } html[data-sw-theme] .dl-horizontal dt { color: var(--sw-muted); font-weight: 500; } html[data-sw-theme] .dl-horizontal dd { color: var(--sw-text); } /* ------------------------------------------------------------------ tabs, pagination, forms */ html[data-sw-theme] .nav-tabs, html[data-sw-theme] .customtab2 { border-bottom: 1px solid var(--sw-border); } html[data-sw-theme] .nav-tabs > li > a, html[data-sw-theme] .customtab2 li a { background: transparent; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0; color: var(--sw-muted); font-weight: 500; } html[data-sw-theme] .nav-tabs > li.active > a, html[data-sw-theme] .nav-tabs > li.active > a:hover, html[data-sw-theme] .nav-tabs > li.active > a:focus, html[data-sw-theme] .customtab2 li.active a, html[data-sw-theme] .customtab2 li.active a:hover, html[data-sw-theme] .customtab2 li.active a:focus { background: transparent; border-bottom-color: var(--sw-accent) !important; color: var(--sw-head); } html[data-sw-theme] .pagination > li > a, html[data-sw-theme] .pagination > li > span { background: var(--sw-btn-bg); border-color: var(--sw-btn-border); color: var(--sw-text); } html[data-sw-theme] .pagination > li > a:hover { background: var(--sw-btn-hover); color: var(--sw-text); } html[data-sw-theme] .pagination > .active > a, html[data-sw-theme] .pagination > .active > span, html[data-sw-theme] .pagination > .active > a:hover { background: var(--sw-accent); border-color: var(--sw-accent); color: var(--sw-on-accent); } html[data-sw-theme] .pagination > .disabled > a, html[data-sw-theme] .pagination > .disabled > span { background: var(--sw-pane-alt); color: var(--sw-muted); } html[data-sw-theme] .control-label, html[data-sw-theme] .form-horizontal .control-label { color: var(--sw-muted); font-weight: 500; } html[data-sw-theme] select.form-control, html[data-sw-theme] input.form-control, html[data-sw-theme] textarea.form-control { height: auto; min-height: 34px; } html[data-sw-theme] .form-control:focus { border-color: var(--sw-accent); box-shadow: 0 0 0 3px var(--sw-accent-soft); } html[data-sw-theme] .body-content select, html[data-sw-theme] .body-content input[type="text"], html[data-sw-theme] .body-content input[type="email"], html[data-sw-theme] .body-content input[type="number"], html[data-sw-theme] .body-content input[type="password"] { background: var(--sw-input-bg); border: 1px solid var(--sw-input-border); border-radius: var(--sw-radius); color: var(--sw-text); } /* ------------------------------------------------------------------ buttons specific to these pages */ html[data-sw-theme] .body-content .btn { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; } html[data-sw-theme] .btn-success { background: var(--sw-btn-bg); border: 1px solid var(--sw-btn-border); color: var(--sw-btn-text); } html[data-sw-theme] .btn-danger { background: var(--sw-danger); border: 1px solid var(--sw-danger); color: #ffffff; } /* round icon actions in the team tables */ html[data-sw-theme] .btn-circle, html[data-sw-theme] .btn-outline { background: transparent; border: 1px solid var(--sw-btn-border); color: var(--sw-muted); } html[data-sw-theme] .btn-circle:hover, html[data-sw-theme] .btn-outline:hover { background: var(--sw-btn-hover); border-color: var(--sw-btn-border); color: var(--sw-text); } html[data-sw-theme] .btn-circle.btn-danger, html[data-sw-theme] .btn-outline.btn-danger { color: var(--sw-danger); } html[data-sw-theme] .btn.fa, html[data-sw-theme] .btn.fas { font-family: var(--sw-font); font-weight: 500; } html[data-sw-theme] .btn.fa:before { font-family: "FontAwesome"; margin-right: 2px; } /* ------------------------------------------------------------------ alerts, billing FAQ, footer */ html[data-sw-theme] .alert { border-radius: calc(var(--sw-radius) + 2px); } html[data-sw-theme] .accordion-title { background: var(--sw-pane); border-left: 3px solid var(--sw-accent); box-shadow: none; border-radius: var(--sw-radius); color: var(--sw-text); font-size: 13px; font-weight: 600; } html[data-sw-theme] .accordion-icon::before, html[data-sw-theme] .accordion-icon::after { background-color: var(--sw-muted); } html[data-sw-theme] .accordion-body, html[data-sw-theme] .content_accordin { color: var(--sw-muted); font-size: 13px; line-height: 1.55; } html[data-sw-theme] .simplefooter { flex-shrink: 0; margin: 0; padding: 0; background: var(--sw-footer-bg); border-top: 1px solid var(--sw-border); color: var(--sw-footer-text); font-size: 11px; text-align: center; } html[data-sw-theme] .simplefooter .row { margin: 0; } html[data-sw-theme] .simplefooter .row > [class*="col-"] { float: none; width: auto; padding: 0; } html[data-sw-theme="studio"] .simplefooter, html[data-sw-theme="blueprint"] .simplefooter { border-top-color: var(--sw-top-border); } html[data-sw-theme] .simplefooter .footer_content p { margin: 0; padding: 8px 0; color: var(--sw-footer-text); }