/* NowMetrix Custom Styles */ :root { margin-left: 0 !important; } /* Scrollbar-Platz konstant reservieren — verhindert, dass die Seite beim Oeffnen/Schliessen eines Modals horizontal springt. Bootstrap ergaenzt sonst `padding-right` am , was sich sichtbar "schnipst". */ html { scrollbar-gutter: stable; } /* KPI-Charts: Pending-Hinweis wenn noch keine historischen Daten vorhanden */ .chart-pending { display: flex; align-items: center; justify-content: center; height: 60px; color: var(--tblr-secondary); font-size: .75rem; line-height: normal; } /* KPI-Charts: SVG an Card-Ecken unten abrunden, Whitespace eliminieren */ [id^="chart-historical"] { margin-bottom: -1px; line-height: 0; font-size: 0; } [id^="chart-historical"] .apexcharts-tooltip { line-height: normal; font-size: .765625rem; } [id^="chart-historical"] .apexcharts-canvas>svg { border-bottom-left-radius: var(--tblr-card-border-radius, 4px); border-bottom-right-radius: var(--tblr-card-border-radius, 4px); overflow: hidden; display: block; } /* * KPI-Card-Body bei aktivem Filter (Chart versteckt). * Das Standard-Layout nutzt `pb-0`, weil direkt darunter der Chart sitzt. * Ist der Chart versteckt, fehlt das Bottom-Padding — zusammen mit `row-deck` * (gleiche Kartenhöhe) klebt die KPI-Zahl dann oben, unten bleibt Leerraum. * Diese Klasse stellt das Padding wieder her und zentriert den Inhalt vertikal. */ .card-body.card-body-no-chart { padding-bottom: var(--tblr-card-padding-y, 1.25rem) !important; display: flex; flex-direction: column; justify-content: center; } #nowmetrix_logo { width: 105px; filter: invert(0); cursor: pointer; } @media (max-width: 600px) { #nowmetrix_logo { width: 115px; } } [data-bs-theme=dark] #nowmetrix_logo { filter: invert(1); } /* Spike-Farbe (für Realtime-Highlights) */ :root, [data-bs-theme=light] { --bs-spike: #fff700; } .nm-sticky-navbar { position: sticky; top: 0; z-index: 1035; background: var(--tblr-bg-surface); } /* Touch-Geräte: unsere eigenen Motion-Effekte abschalten. iPhone Safari reagiert deutlich besser, wenn die UI nicht permanent Transitionen und Flash-Animationen nachführt. */ @media (hover: none) and (pointer: coarse) { .realtime-row, .tile-card, #pace-slider-dot { transition: none !important; } .spike-flash { animation: none !important; } } /* Statischer Modus: reduziert Motion auf Low-End-Geräten und bei aktiviertem "Reduce Motion". */ .nm-static-motion .realtime-row, .nm-static-motion .tile-card, .nm-static-motion #pace-slider-dot { transition: none !important; } .nm-static-motion .status-dot-animated, .nm-static-motion .spike-flash, .nm-static-motion .placeholder-glow .placeholder { animation: none !important; } [data-bs-theme=dark] { --bs-spike: #2d4360; } .bg-spike { --tblr-bg-opacity: 1; background-color: var(--bs-spike) !important; } .nm-tracking-status-dot { width: .625rem; height: .625rem; border-radius: 50%; display: inline-block; flex: 0 0 .625rem; box-shadow: 0 0 0 2px var(--tblr-bg-surface); } .nm-code-copy-wrap { position: relative; } .nm-code-copy-wrap pre { padding-right: 3.5rem !important; } .nm-code-copy-btn { position: absolute; top: .5rem; right: .5rem; z-index: 2; width: 2rem; height: 2rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; opacity: .9; } .nm-code-copy-btn:hover, .nm-code-copy-btn:focus { opacity: 1; } /* * Performance-Panel im Footer (nur local/staging). * Dezent, monospace-lastig — soll nicht ablenken, aber sofort lesbar sein. * Das Summary aktualisiert sich live, sobald neue fetch-Calls eingehen. */ .nm-perf { display: inline-flex; align-items: center; gap: .35rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .75rem; color: var(--tblr-secondary); } .nm-perf-sep { margin: 0 .35rem; color: var(--tblr-border-color); } .nm-perf-icon { opacity: .8; font-size: .85em; } .nm-perf-link { color: var(--tblr-primary); text-decoration: none; margin-left: .25rem; border-bottom: 1px dotted currentColor; } .nm-perf-link:hover { text-decoration: none; opacity: .85; } /* Modal-Tabellen etwas kompakter und monospace in Wert-Spalten */ .nm-perf-table td, .nm-perf-table th { font-size: .8125rem; padding-top: .3rem; padding-bottom: .3rem; } .nm-perf-table code { font-size: .8125rem; color: var(--tblr-body-color); background: transparent; padding: 0; } /* Mobile: Panel wird ueber mehrere Zeilen umbrechen, bleibt aber lesbar */ @media (max-width: 540px) { .nm-perf { display: inline-block; max-width: 100%; white-space: normal; } } /* ─── Traffic-Mix-Bar-Liste ──────────────────────────────────────────────── Kompakte sortierte Bar-Liste pro Traffic-Kanal (Organic/Discover/Social/ Referral/Direct). Wird auf der Quellen-Seite und in der Sidebar der Realtime-Seite verwendet. Bar-Pattern: absolut positioniertes Fill unter dem Inhalt -> Bar-Laenge unabhaengig vom Label. */ .nm-medium-list { display: flex; flex-direction: column; gap: .35rem; } .nm-medium-row { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem; padding: .35rem .5rem; border-radius: 4px; font-size: .8125rem; overflow: hidden; } .nm-medium-row .nm-medium-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--_fill, rgba(128, 128, 128, .15)); border-radius: 4px; transition: width .35s ease-out; z-index: 0; } .nm-medium-row>* { position: relative; z-index: 1; } .nm-medium-label { display: flex; align-items: center; gap: .5rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nm-medium-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--_color, var(--tblr-secondary)); } .nm-medium-values { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .75rem; } .nm-medium-values .nm-medium-pct { color: var(--tblr-secondary); margin-left: .35rem; } /* Connectors: Service-Liste und Setup-Wizard */ .nm-connector-brand-icon { color: #0f62c8; background: linear-gradient(135deg, #d9ecff 0%, #eff7ff 100%); font-weight: 700; } [data-bs-theme=dark] .nm-connector-brand-icon { color: #84c5ff; background: rgba(32, 107, 196, .18); } .nm-connector-meta { display: flex; flex-wrap: wrap; gap: .5rem .9rem; color: var(--tblr-secondary); font-size: .8125rem; } .nm-connector-meta span { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; } .nm-connector-service-actions { min-width: 12rem; } #connectors-bluesky-actions .dropdown-menu { min-width: max-content; max-width: min(22rem, calc(100vw - 2rem)); } #connectors-bluesky-actions .dropdown-item { white-space: normal; } .nm-connector-test-icon { width: 2.5rem; height: 2.5rem; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 2.5rem; } .nm-connector-test-panel { border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); background: var(--tblr-bg-surface-secondary); } .nm-connector-post { border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); background: var(--tblr-bg-surface); } .nm-connector-post-avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 2.5rem; color: var(--tblr-primary); background: var(--tblr-primary-lt); } .nm-connector-post-text { position: relative; min-height: 4rem; white-space: normal; overflow-wrap: anywhere; } .nm-connector-post-text::after { content: "EXAMPLE"; position: absolute; top: .2rem; left: 50%; z-index: 1; pointer-events: none; transform: translateX(-50%) rotate(-14deg); color: var(--tblr-secondary); font-size: clamp(2rem, 8vw, 3.5rem); font-weight: 800; letter-spacing: .14em; line-height: 1; opacity: 0.1; white-space: nowrap; } .nm-connector-link-card { overflow: hidden; border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); } .nm-connector-link-image { aspect-ratio: 1.91 / 1; background: var(--tblr-bg-surface-secondary); overflow: hidden; } .nm-connector-link-image img { display: block; width: 100%; height: 100%; object-fit: cover; } .nm-connector-link-title { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; } #connectors-bluesky-modal .modal-content { overflow: hidden; } #connectors-bluesky-modal .modal-body { overflow-x: hidden; } #connectors-bluesky-modal .nm-connector-edit-dialog { max-width: 600px; } #connectors-bluesky-modal .steps { max-width: 100%; min-width: 0; margin-left: 0; padding-left: 0; border-left: 0; overflow-x: hidden; } #connectors-bluesky-modal .step-item, .nm-connector-wizard-step { min-width: 0; } #connectors-bluesky-modal .step-item { flex: 1 1 0; } #connectors-bluesky-modal .step-item, #connectors-bluesky-step-preview .text-secondary { overflow-wrap: anywhere; white-space: normal; } @media (max-width: 767.98px) { .nm-connector-service-actions { width: 100%; } .nm-connector-meta { display: grid; gap: .5rem; } #connectors-bluesky-modal .modal-footer { align-items: stretch; } #connectors-bluesky-modal .modal-footer .btn { width: 100%; } #connectors-bluesky-back-btn { margin-right: 0 !important; } }