/* NowMetrix Custom Styles */ :root { margin-left: 0 !important; } /* App-Feedback nach wiederholter Nutzung */ .app-voting-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; } .app-voting-option { align-items: center; background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius-lg); cursor: pointer; display: flex; flex-direction: column; gap: .35rem; justify-content: center; min-height: 88px; padding: .65rem .25rem; text-align: center; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .app-voting-option:hover { border-color: var(--tblr-primary); transform: translateY(-2px); } .btn-check:focus-visible + .app-voting-option { box-shadow: 0 0 0 .25rem rgba(var(--tblr-primary-rgb), .25); outline: 0; } .btn-check:checked + .app-voting-option { background: rgba(var(--tblr-primary-rgb), .1); border-color: var(--tblr-primary); box-shadow: inset 0 0 0 1px var(--tblr-primary); } .app-voting-emoji, .app-voting-success-emoji { font-size: 2rem; line-height: 1; } .app-voting-label { font-size: .72rem; line-height: 1.15; } .app-voting-success-emoji { font-size: 3rem; } @media (max-width: 575.98px) { .app-voting-options { gap: .3rem; } .app-voting-option { min-height: 78px; padding: .5rem .15rem; } .app-voting-emoji { font-size: 1.6rem; } .app-voting-label { font-size: .62rem; } } /* 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; } /* Modals deutlicher vom abgedunkelten Seiteninhalt abheben. */ .modal { --tblr-modal-box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .24); } /* Canvas-Hintergrund nach dem Prepaint wieder an Tablers Seitenfarbe koppeln. */ :root, :root[data-bs-theme="dark"] { background: var(--tblr-body-bg); } /* Pure behaelt klare Schwarz-/Weiss-Endpunkte, der Seiten-Canvas bleibt im Lightmode aber leicht grau und setzt sich so von weissen Karten ab. */ :root[data-bs-theme-base="pure"] { --tblr-gray-50: #fafafa; --tblr-gray-100: #f5f5f5; --tblr-gray-200: #e5e5e5; --tblr-gray-300: #d4d4d4; --tblr-gray-400: #a3a3a3; --tblr-gray-500: #737373; --tblr-gray-600: #525252; --tblr-gray-700: #404040; --tblr-gray-800: #171717; --tblr-gray-900: #000000; --tblr-gray-950: #000000; } /* 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; } /* Ohne Messwert im Slot auch den leeren ApexCharts-Rahmen ausblenden. */ #chart-historical-pv .apexcharts-tooltip:empty, #chart-historical-visits .apexcharts-tooltip:empty { display: none; } /* * Pageviews/Visits enthalten unterschiedlich lange und teils lueckenhafte * Vergleichsreihen. ApexCharts 4.0 animiert einen nicht mehr vorhandenen * Hover-Marker sonst 150 ms lang zur SVG-Ecke (0,0). Der aktive Punkt bleibt * sichtbar und folgt der Kurve, nur die fehlerhafte Rueckflug-Animation entfällt. */ #chart-historical-pv .apexcharts-marker, #chart-historical-visits .apexcharts-marker { transition: none !important; } [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; } /* Test: grosse Realtime-KPI-Zahlen mit synthetisch fetterer NowMetrix-Schrift. */ #kpi-active-users, #kpi-pageviews-today, #kpi-visits-today { font-weight: 600; } #kpi-pageviews-today, #kpi-visits-today { position: relative; top: -4px; } #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); } /* Kompakter, diskreter Regler fuer den Eckenradius im Theme-Drawer. */ #offcanvasSettings { max-width: 100vw; width: 27rem; } #offcanvasSettings .offcanvas-body { overflow: hidden; } #offcanvasSettings .nm-theme-color-inverted { background-color: #e5e7eb; background-image: linear-gradient(135deg, #1f2937 0 50%, #e5e7eb 50% 100%); border: 0; box-shadow: none; } #offcanvasSettings .form-colorinput-input:focus ~ .nm-theme-color-inverted { box-shadow: 0 0 0 .25rem rgba(var(--tblr-primary-rgb), .25); } .form-colorinput-input:checked ~ .nm-theme-color-inverted::before { filter: drop-shadow(0 0 1px rgba(0, 0, 0, .85)); } .nm-theme-settings-scroll { min-height: 0; flex: 1 1 auto; overflow-y: auto; margin-right: -.5rem; padding-right: .5rem; } .nm-theme-settings-actions { flex: 0 0 auto; } .nm-theme-radius-range { display: block; margin: 0; } .nm-theme-radius-scale { display: flex; justify-content: space-between; margin-top: -.125rem; color: var(--tblr-secondary); font-size: .6875rem; font-variant-numeric: tabular-nums; } /* 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); } .nm-site-domain { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nm-site-switcher-toggle { display: flex; align-items: center; min-width: 0; } @media (max-width: 767.98px) { .nm-sticky-navbar > .container-xl { column-gap: .5rem; } .nm-navbar-actions { flex: 1 1 0; flex-wrap: nowrap; justify-content: flex-end; min-width: 0; } .nm-navbar-actions > .nm-site-switcher, .nm-navbar-actions > .nm-site-domain { flex: 0 1 auto; min-width: 0; } .nm-site-switcher-toggle { max-width: 100%; } .nm-navbar-actions > .nav-item:last-child { flex: 0 0 auto; } } .nm-user-menu-text { line-height: 1.15; } .nm-pwa-install-banner { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 1040; display: flex; align-items: center; gap: 1rem; width: min(31rem, calc(100vw - 2rem)); padding: .75rem .875rem; border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); background: var(--tblr-bg-surface); box-shadow: var(--tblr-box-shadow-lg); color: var(--tblr-body-color); opacity: 0; transform: translateY(.75rem); transition: opacity .18s ease, transform .18s ease; } .nm-pwa-install-banner--visible { opacity: 1; transform: translateY(0); } .nm-pwa-install-banner__content { display: flex; align-items: center; gap: .75rem; min-width: 0; flex: 1 1 auto; } .nm-pwa-install-banner__icon { width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; border-radius: .625rem; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); } .nm-pwa-install-banner__text { min-width: 0; } .nm-pwa-install-banner__title { font-size: .875rem; font-weight: 600; line-height: 1.25; } .nm-pwa-install-banner__body { margin-top: .125rem; color: var(--tblr-secondary); font-size: .75rem; line-height: 1.35; } .nm-pwa-install-banner__actions { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; } @media (max-width: 575.98px) { .nm-pwa-install-banner { right: .75rem; left: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); width: auto; align-items: flex-start; gap: .75rem; } .nm-pwa-install-banner__content { align-items: flex-start; } .nm-pwa-install-banner__actions { flex-direction: column-reverse; align-items: flex-end; } } /* 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) { a, button, .btn, .dropdown-item, .page-link, .realtime-row, .tile-card, [role="button"] { touch-action: manipulation; } .realtime-row, .tile-card, #pulse-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 #pulse-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; } .pulse-info-button { align-items: center; background: transparent; border: 0; color: var(--tblr-secondary-color); display: inline-flex; flex: 0 0 1.5rem; height: 1.5rem; justify-content: center; margin-inline-end: -.5rem; padding: 0; position: relative; width: 1.5rem; } .pulse-info-button:hover { color: var(--tblr-body-color); } .pulse-info-button:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: 2px; border-radius: 50%; } .pulse-debug-link-wrap { margin-bottom: -5px; } @media (pointer: coarse) { .pulse-info-button::before { content: ""; position: absolute; inset: -.625rem; } } .pulse-metric-delta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .0625rem; min-height: 0; padding: .5rem .25rem .35rem; border-radius: var(--tblr-border-radius); background: var(--tblr-bg-surface-secondary); text-align: center; } .pulse-metric-label { color: var(--tblr-body-color); font-size: .6875rem; line-height: 1.25; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; } .pulse-metric-value { font-size: inherit; font-variant-numeric: tabular-nums; font-weight: 400; line-height: 1.25; } .pulse-debug-metric-card { padding: 1rem 1rem .75rem; } @media (max-width: 360px) { .pulse-metric-label { font-size: .625rem; } } [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); } .admin-article-reader-preview { /* Artikeltext mit Theme-Kontrast und lesbaren Absatzumbruechen darstellen. */ color: var(--tblr-body-color); background-color: var(--tblr-bg-surface-secondary); font-family: var(--tblr-font-sans-serif); font-size: 1rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; } .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; } /* Sprachwahl: Bei vielen Sprachen bleibt das Menü kompakt und scrollbar. */ .settings-language-menu { max-height: min(18rem, calc(100vh - 2rem)); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } /* Connectors: Marketplace-Übersicht und Setup-Wizard */ #connectors-card { position: relative; z-index: 2; border: 0; background: transparent; box-shadow: none; } #connectors-recent-card { position: relative; z-index: 1; } #connectors-card .list-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; overflow: visible; } #connectors-card .list-group-item { display: flex; min-width: 0; padding: 1.25rem; border: 1px solid var(--tblr-border-color); border-radius: 8px; background: var(--tblr-bg-surface); box-shadow: 0 .125rem .375rem rgba(var(--tblr-body-color-rgb), .04); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; overflow: visible; } #connectors-card .list-group-item:hover { border-color: rgba(var(--tblr-primary-rgb), .35); box-shadow: 0 .35rem 1rem rgba(var(--tblr-body-color-rgb), .08); transform: translateY(-1px); } /* Offene Menüs müssen über später gerenderten Kacheln bleiben. */ #connectors-card .list-group-item:has(.dropdown-menu.show) { z-index: 1; } #connectors-card .list-group-item > .row { flex: 1 1 auto; width: 100%; align-items: flex-start !important; } #connectors-card .card-title { font-size: 1rem; } .nm-connector-brand-icon { display: inline-flex; align-items: center; justify-content: center; background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color); } .nm-connector-service-icon { align-self: flex-start; } .nm-connector-brand-icon svg, .nm-connector-brand-icon img { display: block; width: 1.75rem; height: 1.75rem; object-fit: contain; } .nm-connector-brand-icon.avatar-sm svg, .nm-connector-brand-icon.avatar-sm img { width: 1.1rem; height: 1.1rem; } .nm-connector-brand-icon--bluesky { color: #1185fe; background: #edf7ff; border-color: #cfe9ff; } .nm-connector-brand-icon--telegram { background: #eef9ff; border-color: #c8edff; } .nm-connector-brand-icon--slack { background: #fff; border-color: #e5e7eb; } [data-bs-theme=dark] .nm-connector-brand-icon--bluesky { background: rgba(17, 133, 254, .14); border-color: rgba(17, 133, 254, .28); } [data-bs-theme=dark] .nm-connector-brand-icon--telegram { background: rgba(38, 165, 228, .14); border-color: rgba(38, 165, 228, .28); } [data-bs-theme=dark] .nm-connector-brand-icon--slack { background: #fff; border-color: rgba(255, 255, 255, .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-slack-uses { margin-top: 1rem; } .nm-slack-use-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem 0; border-top: 1px solid var(--tblr-border-color); } .nm-slack-use-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; flex: 0 0 auto; } #connectors-slack-card-item .nm-slack-use-row { align-items: flex-start; flex-direction: column; } #connectors-slack-card-item .nm-slack-use-actions { justify-content: flex-start; } .nm-slack-connection-panel { padding: 1rem; border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius-lg); background: var(--tblr-bg-surface-secondary, rgba(var(--tblr-body-color-rgb), .025)); } .nm-slack-connection-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; } .nm-connector-service-actions { min-width: 12rem; } #connectors-card .nm-connector-service-actions { align-self: flex-end; flex: 0 0 100%; width: 100%; max-width: 100%; min-width: 0; margin-top: auto; padding-top: 1rem; } #connectors-card .nm-connector-service-actions .btn { justify-content: center; } #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-color-input { width: 3rem; min-width: 3rem; padding: .25rem; } .nm-connector-color-custom.d-none { display: none !important; } .nm-connector-recent-item, .nm-connector-recent-main { min-width: 0; } .nm-connector-recent-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: start; min-width: 0; } .nm-connector-recent-badge, .nm-connector-recent-actions { min-width: 0; } .nm-connector-log-brand { align-self: start; } .nm-connector-recent-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; } .nm-connector-recent-title, .nm-connector-recent-url { display: block; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nm-connector-recent-reason { overflow-wrap: anywhere; } .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, #connectors-telegram-modal .modal-content, #connectors-slack-modal .modal-content { overflow: hidden; } #connectors-bluesky-modal .modal-body, #connectors-telegram-modal .modal-body, #connectors-slack-modal .modal-body { overflow-x: hidden; } #connectors-bluesky-modal .nm-connector-edit-dialog, #connectors-telegram-modal .nm-connector-edit-dialog, #connectors-slack-modal .nm-connector-edit-dialog { max-width: 600px; } #connectors-bluesky-modal .steps, #connectors-telegram-modal .steps, #connectors-slack-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; } .nm-connector-logs-search { width: min(18rem, 100%); } .nm-slack-channel-menu { max-height: 16rem; overflow-y: auto; } #connectors-slack-modal .modal-content, #connectors-slack-modal .modal-body { overflow-x: hidden; } #connectors-slack-modal .modal-content { overflow-y: hidden; } #connectors-slack-modal .modal-body { overflow-y: auto; } @media (max-width: 991.98px) { #connectors-card .list-group { grid-template-columns: 1fr; } } @media (max-width: 767.98px) { #connectors-card .list-group-item { padding: 1rem; } .nm-connector-logs-search { width: 100%; margin-left: 0 !important; } .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, #connectors-slack-modal .modal-footer .btn { width: 100%; } #connectors-slack-modal .modal-footer { align-items: stretch; } #connectors-slack-back-btn { margin-right: 0 !important; } .nm-slack-use-row, .nm-slack-use-actions, .nm-slack-connection-actions { align-items: stretch; flex-direction: column; } .nm-slack-use-actions .btn, .nm-slack-connection-actions .btn { min-height: 40px; width: 100%; } #connectors-bluesky-back-btn { margin-right: 0 !important; } } @media (max-width: 575.98px) { #connectors-recent-card .card-body { overflow: hidden; } .nm-connector-recent-row { grid-template-columns: auto minmax(0, 1fr); gap: .5rem .75rem; } .nm-connector-recent-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; min-width: 0; } .nm-connector-recent-title, .nm-connector-recent-url { display: -webkit-box; overflow-wrap: anywhere; white-space: normal; -webkit-box-orient: vertical; } .nm-connector-recent-title { line-clamp: 2; -webkit-line-clamp: 2; } .nm-connector-recent-url { line-clamp: 3; -webkit-line-clamp: 3; word-break: break-word; } }