/* Dashboard CSS - NDI Bridge */ /* Animations */ @keyframes animated-gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Body and Base Styles */ body { font-family: 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif; background-color: #031120; background-image: linear-gradient(135deg, #031120 0%, #0a1a2e 50%, #031120 100%); background-attachment: fixed; background-size: 200% 200%; animation: animated-gradient 25s ease infinite; } /* Ensure the main column can scroll inside h-screen flex layout */ .flex.h-screen > main { min-height: 0; } /* ============================================ * Admin-pushed alert banner * Rendered at the very top of , starts collapsed with 0 height. * When active, JS sets --sb-alert-height to the banner's measured height * and the layout below consumes the remaining viewport so the logo and * sidebar aren't covered, with a smooth push-down animation. * ============================================ */ :root { --sb-alert-height: 0px; } #dashboard-layout-root { height: calc(100vh - var(--sb-alert-height)); height: calc(100dvh - var(--sb-alert-height)); transition: height 320ms cubic-bezier(0.22, 1, 0.36, 1); } .sb-alert-banner { position: relative; z-index: 60; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(-8px); transition: max-height 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; color: #f8fafc; background: linear-gradient(90deg, rgba(14, 165, 233, 0.18), rgba(14, 165, 233, 0.08)); border-bottom: 1px solid rgba(14, 165, 233, 0.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .sb-alert-banner.is-visible { max-height: 240px; opacity: 1; transform: translateY(0); pointer-events: auto; } .sb-alert-banner__inner { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem; max-width: 1400px; margin: 0 auto; } .sb-alert-banner__icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; align-self: center; } .sb-alert-banner__body { flex: 1; min-width: 0; font-size: 0.9rem; line-height: 1.35; word-break: break-word; } .sb-alert-banner__title { font-weight: 600; margin-bottom: 0.125rem; } .sb-alert-banner__title:empty { display: none; } .sb-alert-banner__message { opacity: 0.95; } .sb-alert-banner__dismiss { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.08); color: inherit; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .sb-alert-banner__dismiss:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.28); } .sb-alert-banner[data-dismissible="false"] .sb-alert-banner__dismiss { display: none; } /* Type variants: tweak tint + accent border */ .sb-alert-banner--info { background: linear-gradient(90deg, rgba(14, 165, 233, 0.22), rgba(14, 165, 233, 0.08)); border-bottom-color: rgba(14, 165, 233, 0.45); } .sb-alert-banner--warning { background: linear-gradient(90deg, rgba(245, 158, 11, 0.22), rgba(245, 158, 11, 0.08)); border-bottom-color: rgba(245, 158, 11, 0.55); color: #fff7ed; } .sb-alert-banner--error { background: linear-gradient(90deg, rgba(244, 63, 94, 0.24), rgba(244, 63, 94, 0.10)); border-bottom-color: rgba(244, 63, 94, 0.55); color: #fff1f2; } .sb-alert-banner--success { background: linear-gradient(90deg, rgba(16, 185, 129, 0.22), rgba(16, 185, 129, 0.08)); border-bottom-color: rgba(16, 185, 129, 0.5); color: #ecfdf5; } .sb-alert-banner--maintenance { background: linear-gradient(90deg, rgba(168, 85, 247, 0.22), rgba(168, 85, 247, 0.08)); border-bottom-color: rgba(168, 85, 247, 0.5); color: #faf5ff; } /* Glass Effects */ .glass-sidebar { background-color: rgba(26, 35, 51, 0.5); backdrop-filter: blur(24px); border-right: 1px solid rgba(255, 255, 255, 0.1); } .glass-card { background: radial-gradient(circle at 100% 0%, rgba(63, 131, 248, 0.08), transparent 40%), rgba(37, 53, 72, 0.4); backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.2s ease-in-out; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); width: 100%; } /* Device cards - standard width */ .device-card { max-width: 350px; } /* Stream cards - 10% wider */ .stream-card { max-width:450px; } /* Stream status area styling */ .stream-status-area { min-height: 36px; } .glass-card:hover { border: 1px solid rgba(255, 255, 255, 0.25); background-color: rgba(37, 53, 72, 0.6); } /* Remove hover effect from device cards */ .device-card:hover { border: 1px solid rgba(255, 255, 255, 0.1); background: radial-gradient(circle at 100% 0%, rgba(63, 131, 248, 0.08), transparent 40%), rgba(37, 53, 72, 0.4); } /* Remove hover effect from stream cards */ .stream-card:hover { border: 1px solid rgba(255, 255, 255, 0.1); background: radial-gradient(circle at 100% 0%, rgba(63, 131, 248, 0.08), transparent 40%), rgba(37, 53, 72, 0.4); } /* Navigation */ .nav-link.active { background-color: rgba(63, 131, 248, 0.2); color: #ffffff; } .nav-link { color: #d1d5db; } .nav-link:hover { background-color: rgba(255, 255, 255, 0.05); color: #ffffff; } /* Modal */ .modal-backdrop { background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(10px); } /* Modal popup buttons - 4% larger for better mobile readability */ .modal-backdrop button { font-size: 1.04rem; } .password-requirements-modal { font-size: 0.6875rem; color: #95a5a6; margin-top: 0.5rem; padding-left: 0.25rem; } .password-requirements-modal p { margin: 0.25rem 0; font-weight: 500; } .password-requirements-modal ul { margin: 0.25rem 0; padding-left: 1rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.125rem; } .password-requirements-modal li { margin: 0.0625rem 0; font-size: 0.6875rem; } .password-requirements-modal li.valid { color: #2ecc71; } .password-requirements-modal li.invalid { color: #e74c3c; } /* Enhanced Modal Styles */ #downloadModal .glass-card { background: radial-gradient(circle at 0% 0%, rgba(63, 131, 248, 0.15), transparent 50%), radial-gradient(circle at 100% 100%, rgba(63, 131, 248, 0.1), transparent 50%), rgba(15, 23, 42, 0.4); backdrop-filter: blur(24px) saturate(180%); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); } #downloadModal .bg-white\/5 { background-color: rgba(255, 255, 255, 0.03); } #downloadModal .border-white\/10 { border-color: rgba(255, 255, 255, 0.08); } /* Global Scrollbar Hide - Hide scrollbars site-wide but keep scrolling functionality */ * { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } *::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } /* Toggle Content Animations */ .toggle-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-out, margin-top 0.3s ease-out, padding-top 0.3s ease-out, padding-bottom 0.3s ease-out; overflow: hidden; } .toggle-content > div { min-height: 0; opacity: 0; transition: opacity 0.3s ease-out, visibility 0.3s; visibility: hidden; } .toggle-content.expanded { grid-template-rows: 1fr; } .toggle-content.expanded > div { opacity: 1; visibility: visible; } .toggle-content.expanded.mt-3 { margin-top: 0.75rem; } .toggle-content.expanded.space-y-3 > div > *:not(:first-child) { margin-top: 0.75rem; } /* Viewer Options Container Animation */ #viewer-options-container { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.4s ease-out, opacity 0.3s ease-out; overflow: hidden; } #viewer-options-container.collapsed { grid-template-rows: 0fr; margin-top: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; margin-bottom: 0 !important; height: 0 !important; min-height: 0 !important; } #viewer-options-container.collapsed.space-y-4 > * + * { margin-top: 0 !important; } #viewer-options-container > * { min-height: 0; overflow: hidden; } #viewer-options-container.collapsed > * { opacity: 0; visibility: hidden; transition: opacity 0.2s ease-out, visibility 0.2s; } #viewer-options-container:not(.collapsed) > * { opacity: 1; visibility: visible; transition: opacity 0.3s ease-out 0.1s, visibility 0.3s; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 10px; } /* Hide scrollbar but keep scrolling functionality */ .scrollbar-hide { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .scrollbar-hide::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } /* Create viewer modal: start compact (fit content), expand when "Viewer Options" is shown - applies on all screen sizes */ #editViewerModal .glass-card { max-height: 90vh; transition: max-height 0.3s ease-out; } /* Ensure button container centers buttons properly */ #editViewerModal form > div:last-child { display: flex; justify-content: center; align-items: center; } #editViewerModal form > div:last-child button { min-width: 120px !important; /* Ensure both buttons are same width for proper centering */ flex: 0 0 auto; } #editViewerModal .glass-card.viewer-modal-compact { max-height: 352px !important; /* Increased from 320px by 10% */ height: auto; overflow: hidden; display: flex; flex-direction: column; flex-shrink: 0; padding: 1rem 1.5rem !important; } #editViewerModal .glass-card.viewer-modal-compact h2 { margin-bottom: 0.5rem !important; font-size: 1.25rem !important; } #editViewerModal .glass-card.viewer-modal-compact #viewer-url-display-section p { margin-top: 0.125rem !important; } #editViewerModal .glass-card.viewer-modal-compact #show-viewer-options-btn-wrapper { padding-top: 0.25rem !important; } #editViewerModal .glass-card.viewer-modal-compact #viewer-options-container.collapsed { max-height: 0 !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } #editViewerModal .glass-card.viewer-modal-compact form.space-y-4 > * + * { margin-top: 0.5rem !important; } #editViewerModal .glass-card.viewer-modal-compact form.space-y-4 > #viewer-options-container.collapsed { margin-top: 0 !important; } #editViewerModal .glass-card.viewer-modal-compact #show-viewer-options-btn { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } #editViewerModal .glass-card.viewer-modal-compact form > div:last-child { margin-top: 1rem !important; /* Increased spacing to utilize extra modal height */ padding-top: 0.75rem !important; border-top: 1px solid rgba(255, 255, 255, 0.1); } #editViewerModal .glass-card.viewer-modal-compact form > div:last-child button { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; min-width: 120px !important; /* Ensure both buttons are same width for proper centering */ flex: 0 0 auto; } /* Create viewer modal URL row: defined background like dashboard viewer links */ #editViewerModal .viewer-url-create-row { border: 1px solid rgba(255, 255, 255, 0.1); } #editViewerModal .viewer-url-copy-btn { min-height: 28px; min-width: 28px; background: rgba(255, 255, 255, 0.05); } #editViewerModal .viewer-url-copy-btn:hover { background: rgba(255, 255, 255, 0.1); } #editViewerModal .viewer-url-copy-btn [data-lucide] { width: 0.875rem; height: 0.875rem; } #editViewerModal .viewer-url-copy-btn.viewer-url-copy-copied { background: rgba(34, 197, 94, 0.5); } ::-webkit-scrollbar-thumb:hover { background: #6b7280; } /* Page Visibility */ .page { display: block; } .page.hidden { display: none; } /* Utility Classes */ .status-online { color: #10b981; } .status-offline { color: #ef4444; } .status-connecting { color: #f59e0b; } .status-active { color: #10b981; } .status-inactive { color: #f59e0b; } /* Progress Bars */ .progress-bar-container { width: 100%; background-color: #374151; border-radius: 9999px; height: 0.625rem; } .progress-bar-fill { height: 100%; border-radius: 9999px; transition: width 0.3s ease; } .progress-bar-fill.green { background-color: #10b981; } .progress-bar-fill.orange { background-color: #f59e0b; } .progress-bar-fill.red { background-color: #ef4444; } /* Button Styles */ .btn-primary { background-color: #2563eb; color: white; font-weight: 600; padding: 0.5rem 1rem; border-radius: 0.5rem; transition: background-color 0.2s; border: none; cursor: pointer; } .btn-primary:hover { background-color: #1d4ed8; } .btn-secondary { background-color: #4b5563; color: white; font-weight: 600; padding: 0.5rem 1rem; border-radius: 0.5rem; transition: background-color 0.2s; border: none; cursor: pointer; } .btn-secondary:hover { background-color: #374151; } .btn-danger { background-color: #dc2626; color: white; font-weight: 600; padding: 0.5rem 1rem; border-radius: 0.5rem; transition: background-color 0.2s; border: none; cursor: pointer; } .btn-danger:hover { background-color: #b91c1c; } .btn-success { background-color: #16a34a; color: white; font-weight: 600; padding: 0.5rem 1rem; border-radius: 0.5rem; transition: background-color 0.2s; border: none; cursor: pointer; } .btn-success:hover { background-color: #15803d; } /* Form Controls */ input[type="text"], input[type="password"], input[type="url"], select { width: 100%; background-color: rgba(28, 25, 23, 0.5); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0.5rem; padding: 0.75rem; font-size: 0.875rem; color: #d1d5db; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } input[type="text"]:focus, input[type="password"]:focus, input[type="url"]:focus, select:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } input[readonly]:not(#profile-email):not(#help-search) { background-color: transparent; border: none; padding: 0; } /* Copy Button */ .copy-btn { background-color: #264060; color: #d1d5db; border-radius: 0.375rem; border: none; cursor: pointer; transition: background-color 0.2s; position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .copy-btn:hover { background-color: #2e4f77; } /* Remove browser focus outline (blue ring) from copy buttons */ .copy-btn:focus, .copy-btn:focus-visible, .connection-key-display button:focus, .connection-key-display button:focus-visible { outline: none; box-shadow: none; } /* Stream card copy buttons - exact match from original HTML */ /* Original: class="copy-btn text-gray-200 p-1 rounded" with w-3 h-3 icon */ .copy-btn:not(.device-card .copy-btn) { padding: 0.25rem; /* p-1 = 4px padding - matches original exactly */ /* Button naturally matches input height due to flex items-center in container */ } /* Ensure icons inside copy button maintain consistent size */ /* Stream card copy buttons use w-3 h-3 (12px) - matching original exactly */ .copy-btn:not(.device-card .copy-btn) [data-lucide] { width: 0.75rem; /* w-3 = 12px - matches original */ height: 0.75rem; /* h-3 = 12px - matches original */ flex-shrink: 0; transition: none; /* Prevent icon size transitions */ } /* Device card connection key copy buttons use larger icons for visibility */ .device-card .copy-btn { padding: 0.5rem; /* p-2 = 8px padding */ min-width: 2.5rem; min-height: 2.5rem; } .device-card .copy-btn [data-lucide] { width: 0.8rem; /* 20% smaller than 16px */ height: 0.8rem; /* 20% smaller than 16px */ } /* Inline Source Edit - looks like text until clicked */ .inline-source-edit { outline: none; border: none !important; background: transparent !important; cursor: text; /* Fixed height to prevent table resize */ min-height: 32px; box-sizing: border-box; } .inline-source-edit:focus { background-color: #202e3f !important; border-radius: 0.375rem; padding: 0.375rem 0.5rem !important; /* Negative margin to keep same position */ margin: -0.375rem -0.5rem; } .inline-source-edit::placeholder { color: #6b7280; font-style: italic; } /* Bridge output modals — standard blue toggles (not Tailwind peer utilities) */ .sb-modal-toggle-track { width: 2.25rem; height: 1.25rem; background-color: #4b5563; border-radius: 9999px; position: relative; cursor: pointer; transition: background-color 0.2s; } .sb-modal-toggle-track::after { content: ''; position: absolute; top: 0.125rem; left: 0.125rem; width: 1rem; height: 1rem; background-color: #fff; border-radius: 9999px; transition: transform 0.2s; } input.sb-modal-toggle:checked + .sb-modal-toggle-track { background-color: rgb(31, 64, 102); } input.sb-modal-toggle:checked + .sb-modal-toggle-track::after { transform: translateX(1rem); } input.sb-modal-toggle:disabled + .sb-modal-toggle-track { opacity: 0.4; cursor: not-allowed; } #bridgeNdiModal .btn-primary, #bridgeOmtModal .btn-primary, #bridgeCardModal .btn-primary { background-color: rgb(31, 64, 102); } #bridgeNdiModal .btn-primary:hover, #bridgeOmtModal .btn-primary:hover, #bridgeCardModal .btn-primary:hover { background-color: rgb(25, 51, 82); } #bridgeCardModal .bridge-card-port-option { cursor: pointer; text-align: left; } #bridgeCardModal .bridge-card-port-heading-row { display: flex; justify-content: center; width: 100%; } #bridgeCardModal .bridge-card-device-panel { display: flex; flex-direction: column; height: 100%; min-height: 13.75rem; } #bridgeCardModal #bridge-card-enable-row { flex: 1 1 0; min-height: 0; width: 100%; margin-top: calc(1rem + 5px); padding-top: 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.1); align-items: center; align-self: stretch; box-sizing: border-box; } #bridgeCardModal #bridge-card-device-image { filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35)); } /* Toggle Switch */ input[type="checkbox"].toggle-switch { width: 2.75rem; height: 1.5rem; background-color: #4b5563; border-radius: 9999px; position: relative; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color 0.2s; } input[type="checkbox"].toggle-switch:checked { background-color: #2563eb; } input[type="checkbox"].toggle-switch::after { content: ''; position: absolute; top: 0.125rem; left: 0.125rem; width: 1.25rem; height: 1.25rem; background-color: white; border-radius: 9999px; transition: transform 0.2s; } input[type="checkbox"].toggle-switch:checked::after { transform: translateX(1.25rem); } /* Device Card Specific */ .device-card-status-indicator { width: 0.625rem; height: 0.625rem; border-radius: 9999px; } .device-card-status-indicator.online { background-color: #10b981; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .device-card-status-indicator.offline { background-color: #ef4444; } .device-card-status-indicator.connecting { background-color: #f59e0b; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Connection Key Display */ .connection-key-display { background-color: rgba(28, 25, 23, 0.5); padding: 0.5rem; border-radius: 0.5rem; display: flex; align-items: center; gap: 0.5rem; } /* Device Cards - Keep current width */ #device-cards-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 350px)); gap: 1.5rem; justify-content: start; } /* Stream Cards - Allow up to 450px width */ #stream-cards-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 450px)); gap: 1.5rem; justify-content: start; align-items: start; /* Each card sizes to its own content, not stretched to row height */ } /* Stream source title: one line; default size from Tailwind — JS shrinks only when overflowing */ .stream-card .stream-card-source-title { min-width: 0; max-width: 100%; line-height: 1.25; overflow: hidden; white-space: nowrap; transition: none; /* avoid animating inline font-size tweaks from inherited transitions */ } /* Stream Card Collapse/Expand */ .stream-card-header-clickable { cursor: pointer; } .stream-viewers-section { overflow: hidden; } /* Enable transitions only when card has 'ready' class (added after initial render) */ .stream-card.ready .stream-viewers-section { transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), padding-top 0.35s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.35s cubic-bezier(0.4, 0, 0.2, 1); } /* Expanded state */ .stream-viewers-section.expanded { max-height: 2000px; opacity: 1; } /* Collapsed state */ .stream-viewers-section.collapsed { max-height: 0 !important; opacity: 0; padding-top: 0 !important; margin-top: 0 !important; border-top-width: 0 !important; } /* Responsive Grid */ @media (max-width: 768px) { .glass-sidebar { width: 100%; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } #device-cards-container, #stream-cards-container { grid-template-columns: 1fr; justify-content: center; } } /* ==================== MOBILE OPTIMIZATIONS ==================== */ /* Tablet breakpoint (768px) */ @media (max-width: 768px) { .glass-sidebar { width: 100%; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } #device-cards-container, #stream-cards-container { grid-template-columns: 1fr; justify-content: center; } } /* Mobile breakpoint - Compact design */ @media (max-width: 600px) { /* ===== BASE STYLES ===== */ body { font-size: 13px; line-height: 1.4; } /* Hide desktop sidebar */ .glass-sidebar.desktop-only { display: none !important; } /* ===== MOBILE HEADER ===== */ header { padding: 0.5rem 0.75rem; } header img { width: 1.125rem !important; height: 1.125rem !important; } header span { font-size: 0.875rem !important; } /* ===== TYPOGRAPHY - MORE COMPACT ===== */ h1 { display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.25rem !important; line-height: 1.2; margin-bottom: 0.5rem; gap: 0.5rem !important; text-align: center; width: 100%; margin-left: auto; margin-right: auto; } h1 .page-header-icon { margin: 0; } h2 { font-size: 1rem !important; line-height: 1.2; } h3 { font-size: 0.875rem !important; } p { font-size: 0.8125rem; } /* ===== ICON SIZING - SMALLER ===== */ .page-header-icon { width: 1.25rem !important; height: 1.25rem !important; } h1 i[data-lucide], h2 i[data-lucide] { width: 1.125rem !important; height: 1.125rem !important; } .mobile-nav-link i[data-lucide] { width: 1rem !important; height: 1rem !important; } button i[data-lucide] { width: 0.75rem !important; height: 0.75rem !important; } .copy-btn [data-lucide] { width: 0.75rem !important; height: 0.75rem !important; } .empty-state i[data-lucide] { width: 2rem !important; height: 2rem !important; } /* Icon size classes */ i[data-lucide].w-3, i[data-lucide].w-4 { width: 0.75rem !important; height: 0.75rem !important; } i[data-lucide].w-5 { width: 0.875rem !important; height: 0.875rem !important; } i[data-lucide].w-6 { width: 1rem !important; height: 1rem !important; } i[data-lucide].w-8 { width: 1.25rem !important; height: 1.25rem !important; } i[data-lucide].w-12 { width: 1.5rem !important; height: 1.5rem !important; } /* ===== MAIN CONTENT - TIGHTER PADDING ===== */ main { padding: 0.75rem !important; padding-bottom: 1.5rem !important; } /* ===== BUTTONS - COMPACT ===== */ button { min-height: 36px; font-size: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 0.375rem; } .btn-primary, .btn-secondary, .btn-danger, .btn-success { padding: 0.5rem 0.75rem; font-size: 0.75rem; } /* Action buttons */ .start-stream-btn, .stop-stream-btn, .edit-stream-btn, .delete-stream-btn, .create-viewer-for-stream-btn { min-height: 32px; font-size: 0.6875rem; padding: 0.375rem 0.5rem; } /* Copy button */ .copy-btn { min-height: 32px; min-width: 32px; padding: 0.375rem !important; } /* Device tab: keep copy icons readable on mobile */ .device-card .copy-btn { min-height: 40px; min-width: 40px; padding: 0.5rem !important; } .device-card .copy-btn [data-lucide] { width: 1rem !important; height: 1rem !important; } /* ===== CARDS - COMPACT ===== */ .glass-card { border-radius: 0.5rem; margin-bottom: 0.75rem; padding: 0.75rem !important; background: radial-gradient(circle at 100% 0%, rgba(63, 131, 248, 0.05), transparent 40%), rgba(37, 53, 72, 0.6); backdrop-filter: blur(16px); } /* Remove bottom padding from stream cards specifically */ .stream-card.glass-card { padding-bottom: 0 !important; } /* Device cards */ #device-cards-container { grid-template-columns: 1fr !important; gap: 0.75rem !important; padding: 0; } .device-card { max-width: 100% !important; width: 100%; padding: 0.75rem !important; } .device-card .grid.grid-cols-2 { gap: 0.5rem !important; } .device-card .grid.grid-cols-2 button { font-size: 0.6875rem; padding: 0.375rem 0.5rem; min-height: 32px; } /* Stream cards */ #stream-cards-container { grid-template-columns: 1fr !important; gap: 0.75rem !important; padding: 0; } .stream-card { max-width: 100% !important; width: 100%; } .stream-card-header-clickable { padding: 0.75rem; } /* Remove all padding from chevron container on mobile */ .stream-card .stream-card-header-clickable { padding: 0 !important; padding-top: 0.25rem !important; } .stream-viewers-section { padding: 0 0.75rem 0.75rem; } .stream-card .flex.space-x-2 button { font-size: 0.6875rem; padding: 0.375rem 0.5rem; } /* ===== MOBILE STREAM CARD LAYOUT ===== */ .stream-title-large { font-size: 1.5rem; line-height: 1.25; min-width: 0; max-width: 100%; } /* Reduce padding on stream cards */ .stream-card > div { padding-bottom: 0 !important; } .stream-card .p-4 { padding-bottom: 0.01rem !important; padding-top: 0.75rem !important; } /* Minimal padding for chevron container */ .stream-card .stream-card-header-clickable { padding-bottom: 0 !important; /* No bottom padding */ } /* Reduce margins in stream card content */ .stream-card .mb-3 { margin-bottom: 0.5rem !important; } .stream-card .mt-2 { margin-top: 0.5rem !important; } .stream-card .mt-1 { margin-top: 0.25rem !important; } /* Reduce sizing of bitrate and info section */ .stream-card .space-y-1 p { font-size: 0.75rem !important; /* Reduced from text-sm */ } /* Make start/stop button bigger */ .start-stream-btn, .stop-stream-btn { font-size: 0.875rem !important; /* Increased from text-sm */ padding: 0.625rem 1.25rem !important; /* Increased padding */ } /* Settings and trash icons - pure white, no background, bigger */ .edit-stream-btn, .delete-stream-btn { background: transparent !important; padding: 0.5rem !important; border: none !important; box-shadow: none !important; } .edit-stream-btn:hover, .delete-stream-btn:hover { background: transparent !important; opacity: 0.8; } .edit-stream-btn i[data-lucide], .delete-stream-btn i[data-lucide], .edit-stream-btn svg, .delete-stream-btn svg { color: white !important; width: 1.15rem !important; /* 15% increase from w-4 (1rem) = 1.15rem */ height: 1.15rem !important; } .stream-card-header-clickable { cursor: pointer; } .stream-card-chevron { transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .stream-card-chevron.rotated { transform: rotate(180deg); } /* Pulsing heartbeat dot sizing */ .status-dot.animate-pulse { width: 0.625rem; height: 0.625rem; box-shadow: none !important; /* Remove glow effect on mobile */ } /* ===== MOBILE VIEWER LINKS SECTION ===== */ /* Unified button sizing for mobile viewer links */ .copy-btn, .viewer-action-btn { min-width: 32px !important; max-width: 32px !important; height: 32px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; } .viewer-item { margin-left: -0.5rem; /* Negative margins to push content to card edges */ margin-right: -0.5rem; padding: 0.625rem !important; background: #202e3f; border-radius: 0.5rem; } /* Placeholder-style text for viewer URL input */ .viewer-url-input-placeholder { color: #9ca3af; /* gray-400 */ } .viewer-url-input-placeholder:focus { color: #ffffff; /* white when focused */ } .viewer-url-input { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Forces URL and Copy icon to stay on one line */ font-family: monospace; font-size: 11px; } /* Hide scrollbar for viewer status */ .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; } /* Viewer cards */ .viewer-card { padding: 0.75rem; } .viewer-card .flex.space-x-2 button { font-size: 0.6875rem; padding: 0.375rem 0.5rem; } /* ===== FORM CONTROLS - COMPACT ===== */ input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="number"], select { min-height: 36px; font-size: 14px; /* Prevent iOS zoom */ padding: 0.5rem 0.625rem; border-radius: 0.375rem; } input[readonly]:not(#profile-email):not(#help-search) { font-size: 0.6875rem !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } label { font-size: 0.75rem; margin-bottom: 0.25rem; } .text-xs.text-gray-400, .text-xs.text-gray-500 { font-size: 0.625rem; line-height: 1.3; } /* ===== TOGGLE SWITCHES - SMALLER ===== */ input[type="checkbox"].toggle-switch { width: 2rem; height: 1rem; } input[type="checkbox"].toggle-switch::after { width: 0.75rem; height: 0.75rem; top: 0.125rem; left: 0.125rem; } input[type="checkbox"].toggle-switch:checked::after { transform: translateX(1rem); } /* Peer toggles */ .peer:checked ~ div::after { transform: translateX(100%); } .w-11 { width: 2.25rem !important; } .h-6 { height: 1.25rem !important; } .after\\:h-5::after { height: 1rem !important; } .after\\:w-5::after { width: 1rem !important; } /* ===== STATUS INDICATORS ===== */ .device-card-status-indicator { width: 0.5rem; height: 0.5rem; } /* Hide status dot on device cards for mobile */ .device-card .status-dot { display: none !important; } .w-2\.5, .h-2\.5 { width: 0.375rem !important; height: 0.375rem !important; } /* Progress bars */ .progress-bar-container { height: 0.375rem; } /* ===== CONNECTION KEY DISPLAY ===== */ .connection-key-display { flex-direction: row; /* Back to row for better layout */ align-items: center; justify-content: center; gap: 0.4rem; padding: 0.35rem; max-width: 82% !important; /* Slightly wider */ margin: 0.25rem auto 0; /* Center it */ border: none !important; } .connection-key-input { font-size: 1.75rem !important; /* +5px approx (from 1.45rem) */ font-weight: 900; text-align: center; padding: 0 !important; letter-spacing: 0.08em; color: #ffffff !important; } .connection-key-display button { min-height: 36px; min-width: 36px; padding: 0.375rem !important; border: none !important; /* Remove any internal border */ background: rgba(255, 255, 255, 0.05) !important; } .connection-key-display button [data-lucide] { width: 0.85rem !important; height: 0.85rem !important; opacity: 0.85; } /* ===== VIEWER LINK DISPLAY (Mobile) ===== */ .viewer-card .bg-\[\\#202e3f\] { border: 1px solid rgba(255, 255, 255, 0.1) !important; padding: 0.5rem !important; gap: 0.5rem; } .viewer-card .bg-\[\\#202e3f\] input[readonly] { font-size: 0.75rem !important; font-weight: 500; color: #ffffff !important; } /* Override readonly styles for profile email input */ #profile-email { font-size: 0.875rem !important; overflow: visible !important; text-overflow: clip !important; white-space: normal !important; word-break: break-all !important; padding: 0.625rem 1rem !important; text-align: left !important; background-color: rgba(15, 23, 42, 0.3) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: 0.75rem !important; display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .viewer-card .bg-\[\\#202e3f\] button.copy-btn { min-height: 36px; min-width: 36px; padding: 0.5rem !important; background: rgba(255, 255, 255, 0.05) !important; border-radius: 0.375rem; } .viewer-card .bg-\[\\#202e3f\] button.copy-btn [data-lucide] { width: 0.875rem !important; height: 0.875rem !important; } /* ===== MODALS - COMPACT ===== */ .modal-backdrop { padding: 0.5rem; align-items: flex-start; padding-top: 3.5rem; padding-bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important; /* Account for mobile nav bar */ } .modal-backdrop .glass-card { width: 100%; max-width: none; margin: 0; padding: 1rem !important; max-height: calc(100vh - 4rem - 100px - env(safe-area-inset-bottom, 0)) !important; /* Account for nav bar with extra buffer */ overflow-y: auto; border-radius: 0.75rem; -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */ padding-bottom: calc(1rem + 100px + env(safe-area-inset-bottom, 0)) !important; /* Extra padding at bottom for buttons */ transition: max-height 0.3s ease-out; } /* Compact mode for create viewer modal - fits content initially */ .modal-backdrop .glass-card.viewer-modal-compact { max-height: 352px !important; /* Increased from 320px by 10% - Fits compact content: title + URL + button + footer */ height: auto; overflow: hidden; padding: 1rem !important; } /* When expanded, restore full scrollable behavior */ .modal-backdrop .glass-card:not(.viewer-modal-compact) { overflow-y: auto; } /* Ensure buttons stay accessible when content expands */ .modal-backdrop .glass-card form { display: flex; flex-direction: column; } .modal-backdrop .glass-card form > div:last-child { margin-top: auto; padding-top: 1rem; } #changePasswordModal .glass-card form { display: block; } #changePasswordModal .glass-card { padding: 1.3rem !important; padding-bottom: 1.3rem !important; max-width: min(95vw, 25.25rem); } #changeEmailModal .glass-card { padding: 1.3rem !important; max-width: min(95vw, 25.25rem); } #addDeviceModal .glass-card { padding: 1.125rem !important; padding-bottom: 1.125rem !important; max-width: min(95vw, 22rem); } #addDeviceModal .glass-card form { display: block; } #addDeviceModal .glass-card form > div:last-child { margin-top: 0; padding-top: 0.75rem; } #changePasswordModal .glass-card form > div:last-child { margin-top: 0; padding-top: 0.75rem; } /* Un-expanded create viewer: buttons must stay under modal content, not at page bottom */ .modal-backdrop .glass-card.viewer-modal-compact form { flex: 0 0 auto; min-height: 0; } .modal-backdrop .glass-card.viewer-modal-compact #viewer-options-container.collapsed { max-height: 0 !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .modal-backdrop .glass-card.viewer-modal-compact form > div:last-child { margin-top: 1rem !important; /* Increased spacing to utilize extra modal height */ padding-top: 0.75rem !important; } /* Show Viewer Options button - smaller on mobile */ #show-viewer-options-btn { padding: 0.5rem 0.75rem !important; font-size: 0.8125rem !important; } #show-viewer-options-btn [data-lucide] { width: 0.875rem !important; height: 0.875rem !important; } /* Viewer options - consistent padding between toggles and to button row */ #viewer-options-container > * { padding-top: 0.75rem !important; } #viewer-options-container > *:last-child { padding-bottom: 0 !important; margin-bottom: 0 !important; } #editViewerModal form > div:last-child { margin-top: 0.75rem !important; padding-top: 0.75rem !important; } /* Confirmation modals - compact mobile layout, no excessive empty space */ #confirmationModal .glass-card, #encodingChangeModal .glass-card, #deleteAccountModal .glass-card, #deleteBridgeModal .glass-card, #usernameChangeModal .glass-card, #alertModal .glass-card, #changeEmailModal .glass-card, #sessionLimitModal .glass-card { padding: 1rem !important; max-width: min(95vw, 22rem); } #confirmationModal .glass-card > div:first-child, #encodingChangeModal .glass-card > div:first-child, #deleteAccountModal .glass-card > div:first-child, #deleteBridgeModal .glass-card > div:first-child, #usernameChangeModal .glass-card > div:first-child, #alertModal .glass-card > div:first-child, #sessionLimitModal .glass-card > div:first-child { margin-bottom: 0.75rem !important; } #deleteAccountModal .space-y-4, #changeEmailModal .space-y-4 { margin-bottom: 0.75rem !important; } #confirmationModal p, #encodingChangeModal p, #deleteAccountModal p, #deleteBridgeModal p, #usernameChangeModal p, #alertModal #alert-message { margin-bottom: 0.75rem !important; word-break: normal; overflow-wrap: break-word; } #confirmationModal p:last-of-type, #encodingChangeModal p:last-of-type, #deleteAccountModal p:last-of-type, #deleteBridgeModal p:last-of-type, #usernameChangeModal p:last-of-type { margin-bottom: 1rem !important; } /* Button rows - stack vertically on mobile */ #confirmationModal .glass-card > div:last-child, #encodingChangeModal .glass-card > div:last-child, #deleteAccountModal .glass-card > div:last-child, #deleteBridgeModal .glass-card > div:last-child, #usernameChangeModal .glass-card > div:last-child, #changeEmailModal .glass-card > div:last-child, #sessionLimitModal .glass-card > div:last-child { flex-direction: column !important; gap: 0.5rem !important; width: 100%; } #confirmationModal .glass-card button, #encodingChangeModal .glass-card button, #deleteAccountModal .glass-card button, #deleteBridgeModal .glass-card button, #usernameChangeModal .glass-card button, #changeEmailModal .glass-card button, #alertModal .glass-card button, #sessionLimitModal .glass-card button { width: 100% !important; } .modal-backdrop h2 { font-size: 1.125rem !important; margin-bottom: 0.75rem; } .modal-backdrop .space-y-4 > * + * { margin-top: 0.75rem; } #changePasswordModal .password-requirements-modal { font-size: 0.625rem; margin-top: 0.25rem; } #changePasswordModal .password-requirements-modal ul { grid-template-columns: 1fr; margin: 0.25rem 0 0; gap: 0; } #changePasswordModal .password-requirements-modal li { margin: 0.0625rem 0; font-size: 0.625rem; } /* ===== MOBILE NAVIGATION ===== */ #mobileNavOverlay nav { width: 260px; max-width: 75vw; } .mobile-nav-link { min-height: 40px; font-size: 0.8125rem; padding: 0.625rem 0.75rem; } .mobile-nav-link.active { background-color: transparent !important; /* Remove background box */ color: #ffffff !important; } /* ===== SPACING UTILITIES ===== */ .space-y-4 > * + * { margin-top: 0.75rem; } .space-y-6 > * + * { margin-top: 1rem; } .space-x-4 { gap: 0.5rem; } .space-x-2 { gap: 0.375rem; } .space-x-1 { gap: 0.25rem; } .gap-3 { gap: 0.5rem !important; } .gap-4 { gap: 0.75rem !important; } .mb-4 { margin-bottom: 0.75rem !important; } .mb-6 { margin-bottom: 1rem !important; } .p-4 { padding: 0.75rem !important; } .p-6 { padding: 1rem !important; } .px-4 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } .py-3 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } /* ===== FLEX LAYOUTS ===== */ .flex.space-x-4 { flex-direction: column; gap: 0.5rem; } .flex.space-x-4 button { width: 100%; } .flex.items-center.space-x-2 { flex-wrap: wrap; gap: 0.375rem; } button.flex.items-center.justify-center { gap: 0.25rem; } /* ===== GRID LAYOUTS ===== */ .grid.grid-cols-1 { gap: 0.75rem; } .grid.grid-cols-2 { gap: 0.5rem; } /* ===== BRIDGE PAGE SPECIFICS ===== */ .bridge-card { padding: 0.75rem !important; } .bridge-card i[data-lucide] { width: 0.875rem !important; height: 0.875rem !important; } .info-banner { padding: 0.625rem !important; } .info-banner i[data-lucide] { width: 0.875rem !important; height: 0.875rem !important; } .info-banner ul { font-size: 0.6875rem; } /* ===== LOADING & TOASTS ===== */ .loading-spinner { width: 1rem; height: 1rem; } .toast { left: 0.5rem; right: 0.5rem; top: auto; bottom: 1rem; min-width: auto; padding: 0.625rem 0.75rem; font-size: 0.75rem; } /* ===== SCROLLBAR - HIDE ON MOBILE ===== */ ::-webkit-scrollbar { width: 0px; } /* ===== SAFE AREAS ===== */ @supports (padding: max(0px)) { main { padding-left: max(0.75rem, env(safe-area-inset-left)); padding-right: max(0.75rem, env(safe-area-inset-right)); padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); } header { padding-left: max(0.75rem, env(safe-area-inset-left)); padding-right: max(0.75rem, env(safe-area-inset-right)); } } /* ===== OVERFLOW PREVENTION ===== */ .bg-\[#202e3f\] { overflow: hidden; } .bg-\[#202e3f\] .flex.items-center { gap: 0.375rem; } } /* Extra small screens (under 360px) */ @media (max-width: 360px) { body { font-size: 12px; } h1 { font-size: 1.125rem !important; } h2 { font-size: 0.9375rem !important; } main { padding: 0.5rem !important; } .glass-card { padding: 0.5rem !important; } button { min-height: 32px; font-size: 0.6875rem; padding: 0.375rem 0.5rem; } input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="number"], select { min-height: 32px; padding: 0.375rem 0.5rem; } .modal-backdrop .glass-card { padding: 0.75rem !important; } #mobileNavOverlay nav { width: 240px; } } /* Loading State */ .loading-spinner { border: 3px solid rgba(255, 255, 255, 0.1); border-top: 3px solid #3b82f6; border-radius: 50%; width: 1.5rem; height: 1.5rem; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Toast Notification (for future use) */ .toast { position: fixed; top: 1rem; right: 1rem; background-color: rgba(37, 53, 72, 0.95); backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.5rem; padding: 1rem; min-width: 250px; z-index: 9999; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); } .toast.success { border-left: 4px solid #10b981; } .toast.error { border-left: 4px solid #ef4444; } .toast.warning { border-left: 4px solid #f59e0b; } .toast.info { border-left: 4px solid #3b82f6; } /* Color Picker - Full Fill */ .color-picker-full { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; cursor: pointer; overflow: hidden; border-radius: 6px; } .color-picker-full::-webkit-color-swatch-wrapper { padding: 0; } .color-picker-full::-webkit-color-swatch { border: none; border-radius: 6px; } .color-picker-full::-moz-color-swatch { border: none; border-radius: 6px; } /* Source Manager Toggle Switch */ .source-toggle-switch { position: relative; width: 36px; height: 20px; background: #4b5563; border-radius: 20px; cursor: pointer; transition: background 0.2s; } .source-toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: white; border-radius: 50%; transition: transform 0.2s; } .source-toggle-switch.active { background: #16a34a; } .source-toggle-switch.active::after { transform: translateX(16px); } /* ==================== BRIDGE DRAG & DROP STYLES ==================== */ /* Drag cursor styles - fix the "not allowed" cursor */ .bridge-stream-item { cursor: grab; user-select: none; -webkit-user-drag: element; } .bridge-stream-item:active { cursor: grabbing; } /* Pointer events none on child elements to ensure drag works on parent */ .bridge-stream-item .pointer-events-none { pointer-events: none; } /* During drag - apply copy cursor globally (shows + icon) */ body.bridge-dragging { cursor: copy !important; } body.bridge-dragging .bridge-drop-zone { cursor: copy !important; } body.bridge-dragging .bridge-drop-inner { cursor: copy !important; } /* Drop zone styles */ .bridge-drop-zone { transition: all 0.2s ease; } /* Drop zone active state during drag */ .bridge-drop-zone.drop-zone-active .bridge-drop-inner { border-color: rgba(99, 102, 241, 0.4); background: rgba(99, 102, 241, 0.08); } /* Drop zone hover state - stable highlight, no animation */ .bridge-drop-zone.drag-over .bridge-drop-inner { border-color: #6366f1 !important; background: rgba(99, 102, 241, 0.2) !important; transform: scale(1.02); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); animation: none !important; } /* Smooth scale transition for drop zone inner */ .bridge-drop-inner { transition: all 0.2s ease-out; } /* New stream fade-in animation */ @keyframes bridgeStreamFadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .bridge-stream-new { animation: bridgeStreamFadeIn 0.3s ease-out forwards; } /* Device card expansion animation */ .bridge-device-content { transition: all 0.3s ease-out; } .bridge-device-content.hidden { max-height: 0; opacity: 0; overflow: hidden; padding: 0 !important; } /* Device card during drag - visual feedback */ #bridge-devices-list.drag-active .bridge-device-card { transition: all 0.2s ease; } #bridge-devices-list.drag-active .bridge-device-card:hover { border-color: rgba(99, 102, 241, 0.5); box-shadow: 0 0 25px rgba(99, 102, 241, 0.25); } /* Stream being dragged */ .bridge-stream-item.opacity-50 { opacity: 0.5; transform: scale(0.98); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .bridge-stream-item.scale-95 { transform: scale(0.95); } /* Chevron rotation transition */ .bridge-chevron { transition: transform 0.3s ease; } /* Bridge row: NDI / OMT / CARD output pills (spacing; visual style is Tailwind in JS) */ .bridge-output-pills { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; } /* Drag handle visual */ .drag-handle { cursor: grab; } .drag-handle:active { cursor: grabbing; } /* ==================== PAGE HEADER ICON GLOW STYLES ==================== */ .page-header-icon { filter: drop-shadow(0 0 8px currentColor); } .page-header-glow { text-shadow: 0 0 20px currentColor; } /* ==================== MOBILE BOTTOM NAVIGATION & MORE MENU ==================== */ #mobileBottomNav { background: rgba(10, 20, 38, 0.95); /* Slightly darker/more solid to prevent bleed */ backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); padding-bottom: env(safe-area-inset-bottom, 0); border: none !important; box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.6); /* Reduced offset, increased spread for smoother look */ } .mobile-nav-link { transition: all 0.2s ease; position: relative; z-index: 1; background: transparent !important; /* Ensure no background box ever */ } /* Enhanced Glow for active item - Disabled on mobile */ .mobile-nav-link.active::before { display: none !important; } .mobile-nav-link.active { background: transparent !important; color: #ffffff !important; } .mobile-nav-link.active i { color: #3b82f6 !important; filter: none !important; /* Remove glow effect */ } .mobile-nav-link.active span { color: #ffffff !important; text-shadow: none !important; /* Remove glow effect */ font-weight: 700; } #mobileMoreMenu.show { display: flex !important; opacity: 1; } #mobileMoreMenu.show > div { transform: translateY(0); } .more-menu-item { background: rgba(10, 25, 47, 0.85); border: 1px solid rgba(59, 130, 246, 0.2); } .more-menu-item:active { background: rgba(59, 130, 246, 0.15); } /* Ensure main content doesn't get covered by bottom nav */ @media (max-width: 1023px) { :root { --mobile-bottom-nav-height: 190px; } main { /* Use padding-bottom on the main content area itself */ padding-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0)) !important; scroll-padding-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0)); -webkit-overflow-scrolling: touch; } .flex.h-screen { height: 100vh; height: -webkit-fill-available; } } .scrolling-touch { -webkit-overflow-scrolling: touch; } /* pb-safe utility */ .pb-safe { padding-bottom: env(safe-area-inset-bottom, 0); } /* ===== GLOBAL BUTTON STYLING - CENTER ALIGNED ===== */ /* Center align all button containers in modals */ .modal-backdrop .flex.justify-end, .modal-backdrop .flex.flex-col.justify-end, .modal-backdrop .flex.flex-row.justify-end, .modal-backdrop div.flex.justify-end { justify-content: center !important; } /* Reduce button size by 10% while maintaining proportions */ .modal-backdrop button[type="button"]:not([class*="copy"]):not([class*="icon"]):not([id*="add-audio"]):not([id*="add-conference"]):not([id*="toggle"]):not([class*="color-picker"]):not([id*="copy-viewer"]):not([id*="show-viewer"]), .modal-backdrop button[type="submit"]:not([class*="copy"]):not([class*="icon"]):not([id*="add-audio"]):not([id*="add-conference"]):not([id*="toggle"]):not([class*="color-picker"]) { transform: scale(0.9); transform-origin: center; } /* Profile Condensed Styles */ #profile input:focus { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); } /* User profile input prefix alignment */ #profile .relative .pl-8 { padding-left: 2rem !important; } #profile .relative .left-0 { width: 2rem; justify-content: center; } #username-status { margin-top: 0.25rem; } #openChangePasswordBtn:hover { background-color: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.4); }