/* ============================================================ micro-sentry.css — single static stylesheet, no dependencies Replaces pico.min.css. Theme: system prefers-color-scheme by default, overridable via (see app.js theme toggle). Tokens use light-dark() so each color is defined exactly once; :root sets color-scheme:light dark so light-dark() follows the system preference in "auto" mode, and [data-theme] forces color-scheme to pin one side regardless of the system setting. Spec: "Micro-sentry design spec" v1 · Fluvion-derived tokens ============================================================ */ /* ---- 0 · Fonts (self-hosted woff2, embedded via go:embed) ---- DM Sans 600/700, Manrope 400/600, JetBrains Mono 400/600 — latin + latin-ext subsets. Google serves the same variable-font file for both static weights of a family, so each family needs only 2 files (latin, latin-ext) shared across its two weights. */ @font-face { font-family: "DM Sans"; font-weight: 600; font-display: swap; src: url("dmsans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "DM Sans"; font-weight: 600; font-display: swap; src: url("dmsans-latinext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "DM Sans"; font-weight: 700; font-display: swap; src: url("dmsans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "DM Sans"; font-weight: 700; font-display: swap; src: url("dmsans-latinext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url("manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url("manrope-latinext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Manrope"; font-weight: 600; font-display: swap; src: url("manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; font-weight: 600; font-display: swap; src: url("manrope-latinext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("jbmono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("jbmono-latinext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "JetBrains Mono"; font-weight: 600; font-display: swap; src: url("jbmono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "JetBrains Mono"; font-weight: 600; font-display: swap; src: url("jbmono-latinext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---- 1 · Tokens ---- light-dark(light-value, dark-value) — resolves per the used color-scheme (see color-scheme rules below the token list). */ :root { color-scheme: light dark; --ms-bg: light-dark(#F4F2EC, #06161B); --ms-surface-1: light-dark(#FFFFFF, #0A1F26); --ms-surface-2: light-dark(#ECE8DD, #0E2A32); --ms-surface-3: light-dark(#E4DFD2, #133540); --ms-code-bg: light-dark(#172D35, #041014); /* stack trace stays dark in both modes */ --ms-fg-1: light-dark(#172D35, #E8F1F3); --ms-fg-2: light-dark(#2B3E44, #A8BEC4); --ms-fg-3: light-dark(#5B6F76, #6E878E); --ms-fg-4: light-dark(#9AA8AC, #3E5862); --ms-hairline: light-dark(rgba(23, 45, 53, 0.14), rgba(168, 228, 238, 0.10)); --ms-hairline-2: light-dark(rgba(23, 45, 53, 0.26), rgba(168, 228, 238, 0.18)); --ms-hairline-3: light-dark(rgba(23, 45, 53, 0.40), rgba(168, 228, 238, 0.28)); --ms-ok: light-dark(#0E7A4F, #7CE7B7); --ms-warn: light-dark(#8F7000, #FCE300); --ms-down: light-dark(#BF3B2C, #FF6B5B); --ms-accent: light-dark(#8F7000, #FCE300); --ms-accent-ink: light-dark(#FFFFFF, #06161B); /* text on accent / ok buttons */ --ms-down-tint: light-dark(rgba(191, 59, 44, 0.06), rgba(255, 107, 91, 0.07)); --ms-warn-tint: light-dark(rgba(143, 112, 0, 0.06), rgba(252, 227, 0, 0.07)); --ms-down-border: light-dark(rgba(191, 59, 44, 0.45), rgba(255, 107, 91, 0.40)); --ms-warn-border: light-dark(rgba(143, 112, 0, 0.40), rgba(252, 227, 0, 0.35)); --ms-font-display: "DM Sans", ui-sans-serif, system-ui, sans-serif; --ms-font-body: "Manrope", ui-sans-serif, system-ui, sans-serif; --ms-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --ms-r-1: 2px; --ms-r-2: 4px; --ms-r-3: 6px; --ms-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* Manual override (app.js theme toggle, persisted in localStorage as data-theme on ): pin color-scheme so light-dark() ignores prefers-color-scheme. */ :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } /* ---- 2 · Reset + base ---- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ms-bg); color: var(--ms-fg-1); font-family: var(--ms-font-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } h1, h2, h3, p { margin: 0; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } svg { display: block; } ::selection { background: var(--ms-accent); color: var(--ms-accent-ink); } :focus-visible { outline: 2px solid var(--ms-hairline-3); outline-offset: 2px; } /* ---- 3 · Layout ---- */ .ms-header { display: flex; align-items: center; gap: 24px; height: 56px; padding: 0 20px; border-bottom: 1px solid var(--ms-hairline); } @media (min-width: 1024px) { .ms-header { height: 64px; padding: 0 32px; } } .ms-brand { display: flex; align-items: center; gap: 8px; font-family: var(--ms-font-display); font-weight: 600; font-size: 15px; letter-spacing: -0.015em; } .ms-brand::before { content: ""; width: 8px; height: 8px; background: var(--ms-accent); border-radius: var(--ms-r-1); } .ms-header-meta { margin-left: auto; display: flex; align-items: center; gap: 20px; } .ms-main { max-width: 1200px; margin: 0 auto; padding: 16px 16px 32px; } @media (min-width: 1024px) { .ms-main { padding: 28px 32px 48px; } } .ms-back { font-family: var(--ms-font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ms-fg-2); } .ms-back:hover { color: var(--ms-fg-1); } /* Mobilní spodní navigace — 3 ikony, jen pod 640px */ .ms-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; display: flex; /* Ikony se centrují přes celou výšku včetně safe-area — vyhrazený padding pro home bar je tlačil k hornímu okraji. Home indikátoru se nedotknou, je až u kraje. */ height: calc(32px + env(safe-area-inset-bottom)); background: var(--ms-surface-1); border-top: 1px solid var(--ms-hairline); } .ms-bottom-nav a, .ms-bottom-nav button { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--ms-fg-2); background: none; border: 0; } .ms-bottom-nav form { flex: 1; display: flex; margin: 0; } @media (max-width: 639.9px) { .ms-header-meta .ms-label, .ms-header-meta .ms-chip, .ms-header-meta form { display: none; } body { padding-bottom: calc(32px + env(safe-area-inset-bottom)); } } @media (min-width: 640px) { .ms-bottom-nav { display: none; } } /* ---- 4 · Components ---- */ /* Mono section label: 01 / PROJECTS */ .ms-label { font-family: var(--ms-font-mono); font-size: 12px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ms-fg-3); } .ms-section-head { display: flex; justify-content: space-between; align-items: baseline; margin: 24px 0 8px; } .ms-mono { font-family: var(--ms-font-mono); letter-spacing: 0.02em; } /* Status dot — always pair with a text label */ .ms-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ms-fg-4); flex: none; } .ms-dot.is-ok { background: var(--ms-ok); } .ms-dot.is-warn { background: var(--ms-warn); } .ms-dot.is-down { background: var(--ms-down); } .ms-dot.is-unknown { background: var(--ms-fg-4); } /* Status chip: DOWN · 12 MIN */ .ms-chip { font-family: var(--ms-font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--ms-hairline-2); border-radius: var(--ms-r-1); padding: 3px 7px; color: var(--ms-fg-2); } .ms-chip.is-down { color: var(--ms-down); border-color: var(--ms-down-border); } .ms-chip.is-warn { color: var(--ms-warn); border-color: var(--ms-warn-border); } .ms-chip.is-ok { color: var(--ms-ok); border-color: var(--ms-hairline-2); } /* OS badge: decentní štítek "Win" vedle názvu serveru (linux zůstává bez badge) */ .ms-os-badge { font-family: var(--ms-font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--ms-hairline-2); border-radius: var(--ms-r-1); padding: 1px 6px; color: var(--ms-fg-3); } /* Dashboard summary strip */ .ms-summary { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid var(--ms-hairline); } .ms-summary > div { padding: 14px 20px; } .ms-summary > div + div { border-left: 1px solid var(--ms-hairline); } .ms-summary strong { display: block; font-family: var(--ms-font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; } .ms-summary .is-zero strong, .ms-summary .is-zero .ms-label { color: var(--ms-fg-4); } .ms-summary .is-down strong, .ms-summary .is-down .ms-label { color: var(--ms-down); } .ms-summary .is-warn strong, .ms-summary .is-warn .ms-label { color: var(--ms-warn); } .ms-summary .is-ok strong, .ms-summary .is-ok .ms-label { color: var(--ms-ok); } .ms-summary .is-unknown strong, .ms-summary .is-unknown .ms-label { color: var(--ms-fg-4); } /* Card */ .ms-card { background: var(--ms-surface-1); border: 1px solid var(--ms-hairline); border-radius: var(--ms-r-3); padding: 14px 16px; transition: border-color 220ms var(--ms-ease), transform 220ms var(--ms-ease); } @media (min-width: 1024px) { .ms-card { padding: 18px 20px; } } a.ms-card:hover, .ms-card.is-link:hover { border-color: var(--ms-hairline-2); transform: translateY(-1px); } .ms-card.is-down { background: var(--ms-down-tint); border-color: var(--ms-down-border); } .ms-card.is-warn { border-color: var(--ms-warn-border); } /* Grid of tiles */ .ms-grid { display: grid; grid-template-columns: 1fr; gap: 10px; } @media (min-width: 640px) { .ms-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } @media (min-width: 1024px) { .ms-grid { grid-template-columns: repeat(3, 1fr); } } .ms-grid .is-down { grid-column: 1 / -1; } /* burning tile always full width */ /* Entity row (inside a card list) */ .ms-list { background: var(--ms-surface-1); border: 1px solid var(--ms-hairline); border-radius: var(--ms-r-3); } .ms-row { display: flex; align-items: center; gap: 10px; padding: 13px 14px; min-height: 44px; color: inherit; } .ms-row + .ms-row { border-top: 1px solid var(--ms-hairline); } .ms-row:hover { background: var(--ms-surface-2); } .ms-row-name { font-family: var(--ms-font-display); font-weight: 600; font-size: 14.5px; } .ms-row-meta { font-family: var(--ms-font-mono); font-size: 12px; color: var(--ms-fg-3); letter-spacing: 0.02em; } /* Sparkline — server-rendered , colored via currentColor */ .ms-spark { width: 76px; height: 20px; flex: none; color: var(--ms-fg-4); } .ms-spark.is-ok { color: var(--ms-ok); } .ms-spark.is-down { color: var(--ms-down); } .ms-spark.is-warn { color: var(--ms-warn); } .ms-spark polyline { fill: none; stroke: currentColor; stroke-width: 1.5; } .ms-spark-wide { width: 100%; height: 22px; } .ms-spark-wide circle:hover { fill: currentColor; } /* Metric bar (CPU/RAM/DISK) */ .ms-bar { width: 100%; } .ms-bar-label { display: flex; justify-content: space-between; font-family: var(--ms-font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ms-fg-3); margin-bottom: 3px; } .ms-bar-track { height: 3px; background: var(--ms-hairline); } .ms-bar-fill { height: 100%; background: var(--ms-fg-2); } .ms-bar.is-warn .ms-bar-fill { background: var(--ms-warn); } .ms-bar.is-warn .ms-bar-label { color: var(--ms-warn); } .ms-bar.is-down .ms-bar-fill { background: var(--ms-down); } .ms-bar.is-down .ms-bar-label { color: var(--ms-down); } /* Big stat (uptime trio, VPS quartet) */ .ms-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--ms-hairline); } .ms-stats.cols-4 { grid-template-columns: repeat(4, 1fr); } .ms-stats > div { padding: 12px 20px; } .ms-stats > div + div { border-left: 1px solid var(--ms-hairline); } .ms-stats strong { display: block; font-family: var(--ms-font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; } .ms-stats .is-down strong { color: var(--ms-down); } .ms-stats .is-warn strong, .ms-stats .is-warn .ms-label { color: var(--ms-warn); } /* Table (incidents, services) — always inside .ms-scroll */ .ms-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .ms-table { width: 100%; min-width: 360px; border-collapse: collapse; font-family: var(--ms-font-mono); font-size: 13px; } .ms-table th { text-align: left; padding: 10px 14px; font-weight: 400; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ms-fg-3); border-bottom: 1px solid var(--ms-hairline); } .ms-table td { padding: 11px 14px; color: var(--ms-fg-2); border-bottom: 1px solid var(--ms-hairline); } .ms-table tr:last-child td { border-bottom: 0; } .ms-table .is-down { color: var(--ms-down); font-weight: 600; } .ms-table td a { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; } .ms-table td a:hover { color: var(--ms-fg-1); text-decoration-style: solid; } /* Stack trace */ .ms-trace { background: var(--ms-code-bg); border: 1px solid var(--ms-hairline); border-radius: var(--ms-r-2); padding: 12px; overflow-x: auto; } .ms-trace pre { margin: 0; font-family: var(--ms-font-mono); font-size: 12px; line-height: 1.6; color: #A8BEC4; } .ms-trace .msg { color: #FF6B5B; } /* literal — trace bg is always dark */ /* Error issue (details/summary) */ .ms-issue summary { display: flex; align-items: baseline; gap: 8px; padding: 13px 14px; cursor: pointer; list-style: none; min-height: 44px; } .ms-issue summary::-webkit-details-marker { display: none; } .ms-issue + .ms-issue { border-top: 1px solid var(--ms-hairline); } .ms-issue-title { font-family: var(--ms-font-mono); font-size: 13.5px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ms-issue[open] .ms-issue-title { white-space: normal; } .ms-issue.is-down .ms-issue-title, .ms-issue.is-down .ms-issue-count { color: var(--ms-down); } .ms-issue.is-warn .ms-issue-title, .ms-issue.is-warn .ms-issue-count { color: var(--ms-warn); } .ms-issue-count { font-family: var(--ms-font-mono); font-size: 12px; color: var(--ms-fg-2); flex: none; } .ms-issue-body { padding: 0 14px 14px; } .ms-issue-meta { font-family: var(--ms-font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ms-fg-3); margin: 0 0 10px; } /* Buttons */ .ms-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; font-weight: 600; font-size: 13.5px; color: var(--ms-fg-2); background: transparent; border: 1px solid var(--ms-hairline-2); border-radius: var(--ms-r-2); transition: border-color 120ms var(--ms-ease), filter 50ms linear; } .ms-btn:hover { border-color: var(--ms-hairline-3); } .ms-btn:active { filter: brightness(0.9); } .ms-btn.primary { background: var(--ms-accent); border-color: transparent; color: var(--ms-accent-ink); } .ms-btn.resolve { background: var(--ms-ok); border-color: transparent; color: var(--ms-accent-ink); } @media (min-width: 1024px) { .ms-btn { min-height: 36px; } } /* Forms */ .ms-field { display: grid; gap: 6px; } .ms-field > label { font-family: var(--ms-font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ms-fg-3); } .ms-input, input.ms-input, select.ms-input { width: 100%; background: var(--ms-surface-3); border: 1px solid var(--ms-hairline); border-radius: var(--ms-r-2); padding: 12px; font: inherit; font-size: 16px; /* prevents iOS zoom */ color: var(--ms-fg-1); transition: border-color 120ms var(--ms-ease); } .ms-input:focus { outline: none; border-color: var(--ms-hairline-3); } .ms-input.mono { font-family: var(--ms-font-mono); font-size: 14px; } .ms-form { display: grid; gap: 14px; } .ms-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ms-form-actions { display: flex; justify-content: flex-end; gap: 8px; } /* One-time token reveal */ .ms-token-label { color: var(--ms-warn); } .ms-token { background: var(--ms-code-bg); border: 1px solid var(--ms-warn-border); border-radius: var(--ms-r-2); padding: 11px 12px; overflow-x: auto; font-family: var(--ms-font-mono); font-size: 12px; white-space: nowrap; color: #E8F1F3; /* literal — token bg is always dark */ } .ms-token-hint { font-size: 12.5px; color: var(--ms-fg-3); margin-top: 6px; } /* Toggle (square, not pill) */ .ms-toggle { position: relative; width: 44px; height: 26px; border-radius: var(--ms-r-2); background: var(--ms-hairline); border: 1px solid var(--ms-hairline-2); flex: none; cursor: pointer; transition: background 120ms var(--ms-ease); } .ms-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 3px; background: var(--ms-fg-3); transition: transform 120ms var(--ms-ease), background 120ms var(--ms-ease); } .ms-toggle.is-on, input:checked + .ms-toggle { background: color-mix(in srgb, var(--ms-ok) 18%, transparent); border-color: var(--ms-ok); } .ms-toggle.is-on::after, input:checked + .ms-toggle::after { transform: translateX(18px); background: var(--ms-ok); } /* Empty state */ .ms-empty { text-align: center; padding: 26px 20px; } .ms-empty .ms-label { display: block; margin-bottom: 6px; } .ms-empty p { font-size: 13.5px; color: var(--ms-fg-2); } .ms-empty small { display: block; font-size: 12px; color: var(--ms-fg-4); margin-top: 4px; } /* Footer sync line */ .ms-sync { font-family: var(--ms-font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ms-fg-4); padding: 18px 20px 0; } /* Login */ .ms-login { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; max-width: 380px; margin: 0 auto; padding: 32px; } /* ---- 5 · Utilities ---- */ .u-down { color: var(--ms-down); } .u-warn { color: var(--ms-warn); } .u-ok { color: var(--ms-ok); } .u-dim { color: var(--ms-fg-3); } /* ---- 6 · Motion preferences ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* Modal akcí (nativní ). Tokeny ověřené proti micro-sentry.css: --ms-surface-1 (pozadí), --ms-fg-1/2 (text), --ms-hairline (okraj), --ms-accent. */ .ms-modal { padding: 0; border: none; border-radius: var(--ms-r-3); max-width: 520px; width: 92vw; background: var(--ms-surface-1); color: var(--ms-fg-1); box-shadow: 0 12px 48px rgb(0 0 0 / 0.35); } .ms-modal::backdrop { background: rgb(0 0 0 / 0.45); } .ms-modal-inner { padding: 20px 22px 22px; } .ms-modal-head { display: flex; align-items: center; justify-content: space-between; } .ms-modal-head strong { font-family: var(--ms-font-display); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; } .ms-modal-x { background: none; border: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--ms-fg-3); padding: 2px 6px; border-radius: var(--ms-r-1); } .ms-modal-x:hover { color: var(--ms-fg-1); } .ms-tabs { display: flex; gap: 2px; margin: 14px 0 16px; border-bottom: 1px solid var(--ms-hairline); } .ms-tab { background: none; border: none; padding: 8px 12px; cursor: pointer; margin-bottom: -1px; font-family: var(--ms-font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ms-fg-3); border-bottom: 2px solid transparent; } .ms-tab:hover { color: var(--ms-fg-2); } .ms-tab.is-active { color: var(--ms-fg-1); border-bottom-color: var(--ms-accent); } /* akční řádek: sdílený .ms-row v .ms-list; chip za názvem, tlačítko/„nedostupné" vpravo */ .ms-action .ms-btn, .ms-action .ms-label { margin-left: auto; flex: none; } .ms-action .ms-chip { flex: none; } /* krok flow (Opravdu? / heslo / výsledek) */ .ms-step { display: flex; flex-direction: column; gap: 10px; } .ms-step-name { font-family: var(--ms-font-display); font-weight: 600; font-size: 15px; } .ms-step-desc { margin: 0; color: var(--ms-fg-2); font-size: 13.5px; } .ms-step .ms-warn { margin: 0; background: var(--ms-warn-tint); border: 1px solid var(--ms-warn-border); border-radius: var(--ms-r-2); padding: 10px 12px; color: var(--ms-fg-2); font-size: 13.5px; } .ms-step .ms-input { width: 100%; box-sizing: border-box; min-height: 40px; padding: 9px 11px; background: var(--ms-surface-2); border: 1px solid var(--ms-hairline-2); border-radius: var(--ms-r-2); color: var(--ms-fg-1); font-size: 13.5px; } .ms-step .ms-input:focus { outline: none; border-color: var(--ms-hairline-3); } .ms-step-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; } .ms-btn.ghost { background: transparent; border: 1px solid var(--ms-hairline); } .ms-pager { display: flex; gap: 8px; justify-content: space-between; margin-top: 14px; }