/* ============================================================= vBoxx Meetings — light theme overlay (matches vBoxxCloud app) Loads AFTER all MiroTalk stylesheets so it wins via specificity. Scope: every selector targets a MiroTalk-specific id, class, or container — no naked `body`, `button`, `*` rules that could bleed into pages we did not redesign. Pages that opt in add class `vb-light` on or (set automatically below via :root when this stylesheet is loaded). ============================================================= */ /* ---------- Global base for MiroTalk views ---------- */ html, body { background: var(--vb-bg) !important; color: var(--vb-fg) !important; font-family: var(--vb-font) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body, .body-wrap, main, .container { color: var(--vb-fg); } /* Headings inside MiroTalk views */ .hero-title, .site-header h1, h1.hero-title, .vb-card h1, .vb-card h2 { color: var(--vb-fg-strong); font-family: var(--vb-font); font-weight: 700; letter-spacing: -0.02em; } /* ============================================================ 1. Shared vBoxx card template ============================================================ */ .vb-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--vb-bg); } .vb-topbar { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: var(--vb-surface); border-bottom: 1px solid var(--vb-border); position: sticky; top: 0; z-index: 40; } .vb-topbar__brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 16px; color: var(--vb-fg-strong); text-decoration: none; } .vb-topbar__brand img, .vb-topbar__brand svg { height: 28px; width: auto; } .vb-topbar__nav { display: flex; align-items: center; gap: 8px; } .vb-topbar__nav a { color: var(--vb-fg-muted); font-size: 14px; font-weight: 500; padding: 8px 12px; border-radius: var(--vb-radius); text-decoration: none; transition: color var(--vb-duration) var(--vb-ease), background var(--vb-duration) var(--vb-ease); } .vb-topbar__nav a:hover { color: var(--vb-fg); background: var(--vb-surface-2); } .vb-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 24px; } .vb-card { width: 100%; max-width: 440px; background: var(--vb-surface); border: 1px solid var(--vb-border); border-radius: var(--vb-radius-xl); box-shadow: var(--vb-shadow-lg); padding: 40px 36px; text-align: center; } .vb-card--wide { max-width: 720px; text-align: left; } .vb-card__icon { width: 56px; height: 56px; margin: 0 auto 20px; display: inline-flex; align-items: center; justify-content: center; background: var(--vb-primary-soft); color: var(--vb-primary); border-radius: var(--vb-radius-lg); } .vb-card__icon svg { width: 28px; height: 28px; } .vb-card h1 { font-size: 28px; line-height: 1.2; margin: 0 0 8px; } .vb-card__lead { color: var(--vb-fg-muted); font-size: 15px; line-height: 1.55; margin: 0 0 28px; } .vb-card__field { text-align: left; margin-bottom: 16px; } .vb-card__field label { display: block; font-size: 13px; font-weight: 500; color: var(--vb-fg); margin-bottom: 6px; } .vb-footer { padding: 24px; text-align: center; color: var(--vb-fg-subtle); font-size: 13px; border-top: 1px solid var(--vb-border); background: var(--vb-surface); } .vb-footer a { color: var(--vb-fg-muted); text-decoration: none; margin: 0 8px; } .vb-footer a:hover { color: var(--vb-primary); } /* ============================================================ 2. Buttons (.vb-btn) + reskin MiroTalk .button ============================================================ */ .vb-btn, .button, button.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--vb-radius); border: 1px solid transparent; font-family: var(--vb-font); font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; text-decoration: none; transition: background var(--vb-duration) var(--vb-ease), border-color var(--vb-duration) var(--vb-ease), color var(--vb-duration) var(--vb-ease), box-shadow var(--vb-duration) var(--vb-ease), transform var(--vb-duration) var(--vb-ease); } .vb-btn--primary, .button.button-primary, .button-primary { background: var(--vb-primary); color: var(--vb-fg-inverse); box-shadow: var(--vb-shadow-sm); } .vb-btn--primary:hover, .button.button-primary:hover, .button-primary:hover { background: var(--vb-primary-hover); box-shadow: var(--vb-shadow-md); } .vb-btn--primary:active, .button-primary:active { background: var(--vb-primary-active); } .vb-btn--ghost { background: transparent; color: var(--vb-fg); border-color: var(--vb-border); } .vb-btn--ghost:hover { background: var(--vb-surface-2); border-color: var(--vb-border-strong); } .vb-btn--danger { background: var(--vb-danger); color: var(--vb-fg-inverse); } .vb-btn--danger:hover { background: var(--vb-danger-hover); } .vb-btn--block, .button-block { width: 100%; } .vb-btn:focus-visible, .button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--vb-primary-ring); } /* ============================================================ 3. Form controls ============================================================ */ .form-input, .form-select, input[type="text"]:not([class*="swal"]):not(.flatpickr-input), input[type="email"]:not([class*="swal"]), input[type="password"]:not([class*="swal"]), input[type="name"]:not([class*="swal"]), input[type="number"]:not([class*="swal"]), textarea:not([class*="swal"]):not(.ql-editor), select:not([class*="swal"]) { display: block; width: 100%; height: 42px; padding: 0 14px; background: var(--vb-surface-input); color: var(--vb-fg); border: 1px solid var(--vb-border); border-radius: var(--vb-radius); font-family: var(--vb-font); font-size: 14px; transition: border-color var(--vb-duration) var(--vb-ease), box-shadow var(--vb-duration) var(--vb-ease); } textarea:not([class*="swal"]):not(.ql-editor) { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.5; } .form-input:focus, .form-select:focus, select:not([class*="swal"]):focus, textarea:not([class*="swal"]):not(.ql-editor):focus, input:not([class*="swal"]):not(.flatpickr-input):focus { outline: none; border-color: var(--vb-border-focus); box-shadow: 0 0 0 3px var(--vb-primary-ring); background: var(--vb-surface); } ::placeholder { color: var(--vb-fg-subtle); } /* ============================================================ 4. MiroTalk Room — top bar, toolbar, panels ============================================================ */ #mainContainer, #videoMediaContainer, #videoPinMediaContainer { background: var(--vb-bg) !important; } /* Top bar inside Room */ #bottomButtons, #buttonsBar, .MiroTalk-toolbar { background: var(--vb-surface) !important; border: 1px solid var(--vb-border) !important; border-radius: var(--vb-radius-pill) !important; box-shadow: var(--vb-shadow-lg) !important; backdrop-filter: none !important; padding: 8px !important; gap: 4px !important; color: var(--vb-fg) !important; } /* Scope strictly to the actual toolbars — do NOT apply this 44x44 round style to every `button[id$="Button"]` on the page (that bled into dropdown menu items like "Video-instellingen openen" and the tabs inside #mySettings, breaking both layout and click handlers). */ #bottomButtons > button, #buttonsBar > button, .MiroTalk-toolbar > button { width: 44px !important; height: 44px !important; border-radius: 50% !important; background: transparent !important; border: none !important; color: var(--vb-fg); align-items: center; justify-content: center; transition: background var(--vb-duration) var(--vb-ease), color var(--vb-duration) var(--vb-ease); } /* Explicit override: buttons inside dropdown menus and the settings panel must keep their native layout (rectangular menu rows / tabs). */ #bottomButtons .dropdown-menu button, #bottomButtons .dropdown-menu button[id$="Button"], #startVideoDeviceMenu button, #startAudioDeviceMenu button, #settingsExtraMenu button, #mySettings button, #mySettings button[id$="Button"] { width: auto !important; height: auto !important; border-radius: var(--vb-radius-sm) !important; } /* Keep MiroTalk's .hidden mechanism working — do NOT force display */ #bottomButtons button:not(.hidden), #buttonsBar button:not(.hidden), .MiroTalk-toolbar button:not(.hidden) { display: inline-flex; } .hidden { display: none !important; } #bottomButtons button:hover, #buttonsBar button:hover, .MiroTalk-toolbar button:hover { background: var(--vb-surface-2) !important; color: var(--vb-primary) !important; } #bottomButtons button.active, #buttonsBar button.active, button.button-on { background: var(--vb-primary) !important; color: var(--vb-fg-inverse) !important; } /* Off / disabled state — red like native */ button.button-off, #startAudioButton, #startVideoButton, #initAudioButton.fa-microphone-slash, #initVideoButton.fa-video-slash, #initAudioVideoButton.fa-eye-slash, button .fa-microphone-slash, button .fa-video-slash, i.red, .fas.red { color: var(--vb-danger) !important; } #startAudioButton:not(.hidden), #startVideoButton:not(.hidden), button.button-off { background: var(--vb-danger-soft) !important; } /* Split-btn (mic / cam / settings with chevron) — keep as one control */ #bottomButtons .split-btn { display: inline-flex; align-items: center; gap: 0; background: transparent; } #bottomButtons .split-btn > button:first-child { border-radius: 50% !important; } #bottomButtons .split-btn .device-dropdown-toggle, #bottomButtons .split-btn .dropdown-toggle { width: 22px !important; height: 44px !important; border-radius: 0 !important; background: transparent !important; color: #111827 !important; font-size: 12px !important; opacity: 1 !important; visibility: visible !important; } /* Room.css forces `#bottomButtons .device-dropdown-toggle i { color:#fff }` which is invisible on our white toolbar — force dark with higher specificity. */ #bottomButtons .split-btn .device-dropdown-toggle i, #bottomButtons .split-btn .dropdown-toggle i, #bottomButtons .split-btn .device-dropdown-toggle i.fas, #bottomButtons .split-btn .device-dropdown-toggle i.fa-solid, #bottomButtons .split-btn .device-dropdown-toggle i.fa-chevron-up { color: #111827 !important; font-size: 12px !important; opacity: 1 !important; visibility: visible !important; } #bottomButtons .split-btn .dropdown-toggle:hover, #bottomButtons .split-btn .device-dropdown-toggle:hover { color: var(--vb-primary) !important; background: rgba(0, 0, 0, 0.05) !important; } #bottomButtons .split-btn .dropdown-toggle:hover i, #bottomButtons .split-btn .device-dropdown-toggle:hover i { color: var(--vb-primary) !important; } /* Note: MiroTalk toggles `.hidden` on the .dropdown.dropup wrapper once devices are enumerated — we intentionally don't force-show it here. */ /* Exit button — always destructive */ #exitButton, #leaveRoomButton, button#exitButton { background: var(--vb-danger) !important; color: var(--vb-fg-inverse) !important; } #exitButton:hover { background: var(--vb-danger-hover) !important; } /* Top room info bar */ #tabRoom, #mySettings, .MiroTalk-room-info { background: var(--vb-surface) !important; border: 1px solid var(--vb-border) !important; border-radius: var(--vb-radius-pill) !important; box-shadow: var(--vb-shadow) !important; color: var(--vb-fg) !important; } /* Participants count badge */ #participantsCountBadge, .MiroTalk-badge { background: var(--vb-primary) !important; color: var(--vb-fg-inverse) !important; border-radius: var(--vb-radius-pill) !important; padding: 2px 8px !important; font-size: 12px !important; font-weight: 600 !important; } /* ============================================================ 5. Video tiles ============================================================ */ .Camera, .video-wrap, .videoWrap { background: var(--vb-bg-2) !important; border: 1px solid var(--vb-border) !important; border-radius: var(--vb-radius-lg) !important; box-shadow: var(--vb-shadow) !important; overflow: hidden; } .Camera.dominant-speaker, .video-wrap.dominant-speaker, .videoWrap.dominant-speaker { border-color: var(--vb-primary) !important; box-shadow: 0 0 0 2px var(--vb-primary), var(--vb-shadow-lg) !important; } .video-name, .peer-name, .MiroTalk-peer-name { background: hsl(0 0% 100% / 0.92) !important; color: var(--vb-fg-strong) !important; border-radius: var(--vb-radius) !important; font-size: 13px !important; font-weight: 500 !important; padding: 4px 10px !important; box-shadow: var(--vb-shadow-sm) !important; } /* ============================================================ 6. Side panels (chat / participants / settings / whiteboard / editor) ============================================================ */ #msgerDraggable, #participantsDraggable, #mySettings, #tabRoom + div, .MiroTalk-panel, #whiteboard, #editorContainer, #captionDraggable, #tabPolls, #tabTranscription { background: var(--vb-surface) !important; color: var(--vb-fg) !important; border: 1px solid var(--vb-border) !important; border-radius: var(--vb-radius-lg) !important; box-shadow: var(--vb-shadow-lg) !important; } .msger-header, .msger-inputarea, .participants-header, .MiroTalk-panel-header { background: var(--vb-surface) !important; border-bottom: 1px solid var(--vb-border) !important; color: var(--vb-fg-strong) !important; } .msger-chat, .msger-inputarea input, .msger-inputarea textarea { background: var(--vb-surface) !important; color: var(--vb-fg) !important; } .msg-bubble, .msger-message .msg-bubble { background: var(--vb-surface-2) !important; color: var(--vb-fg) !important; border-radius: var(--vb-radius-lg) !important; border: 1px solid var(--vb-border) !important; } .msger-message.right .msg-bubble, .msg-bubble.right { background: var(--vb-primary) !important; color: var(--vb-fg-inverse) !important; border-color: transparent !important; } /* Tabs inside panels */ .tab, .MiroTalk-tab { color: var(--vb-fg-muted) !important; border-bottom: 2px solid transparent !important; font-weight: 500; } .tab.active, .MiroTalk-tab.active { color: var(--vb-primary) !important; border-bottom-color: var(--vb-primary) !important; } /* Participant rows */ .participant-row, #participantsList li { background: transparent !important; color: var(--vb-fg) !important; border-bottom: 1px solid var(--vb-border) !important; padding: 10px 12px !important; border-radius: var(--vb-radius) !important; } .participant-row:hover, #participantsList li:hover { background: var(--vb-surface-2) !important; } /* ============================================================ 7. Lobby overlay ============================================================ */ #lobby, .lobby-screen, #lobbyRoom { background: var(--vb-bg) !important; color: var(--vb-fg) !important; } #lobbyRoom .lobby-card, #lobby > div { background: var(--vb-surface); border: 1px solid var(--vb-border); border-radius: var(--vb-radius-xl); box-shadow: var(--vb-shadow-lg); } /* ============================================================ 8. Dropdowns / context menus / emoji ============================================================ */ #settingsExtraMenu, #startAudioDeviceMenu, #startVideoDeviceMenu, #chatEmoji, #room-emoji-mart, .dropdown-menu, .MiroTalk-dropdown { background: var(--vb-surface) !important; color: var(--vb-fg) !important; border: 1px solid var(--vb-border) !important; border-radius: var(--vb-radius-lg) !important; box-shadow: var(--vb-shadow-xl) !important; padding: 6px !important; } #settingsExtraMenu li, #startAudioDeviceMenu li, #startVideoDeviceMenu li, .dropdown-menu a, .dropdown-menu button { color: var(--vb-fg) !important; border-radius: var(--vb-radius-sm) !important; padding: 8px 12px !important; background: transparent !important; } #settingsExtraMenu li:hover, #startAudioDeviceMenu li:hover, #startVideoDeviceMenu li:hover, .dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--vb-accent) !important; color: var(--vb-accent-fg) !important; } /* ============================================================ 9. SweetAlert (light vBoxx skin) ============================================================ */ .swal2-popup { background: var(--vb-surface) !important; color: var(--vb-fg) !important; border: 1px solid var(--vb-border) !important; border-radius: var(--vb-radius-xl) !important; box-shadow: var(--vb-shadow-xl) !important; font-family: var(--vb-font) !important; } .swal2-title, .swal2-html-container, .swal2-content { color: var(--vb-fg) !important; } .swal2-html-container, .swal2-content { color: var(--vb-fg-muted) !important; font-size: 14px !important; } .swal2-input, .swal2-select, .swal2-textarea, .swal2-file { background: var(--vb-surface-input) !important; color: var(--vb-fg) !important; border: 1px solid var(--vb-border) !important; border-radius: var(--vb-radius) !important; box-shadow: none !important; } .swal2-input:focus, .swal2-select:focus, .swal2-textarea:focus { border-color: var(--vb-border-focus) !important; box-shadow: 0 0 0 3px var(--vb-primary-ring) !important; } .swal2-confirm, .swal2-styled.swal2-confirm { background: var(--vb-primary) !important; color: var(--vb-fg-inverse) !important; border-radius: var(--vb-radius) !important; font-weight: 600 !important; box-shadow: var(--vb-shadow-sm) !important; } .swal2-confirm:hover { background: var(--vb-primary-hover) !important; } .swal2-cancel, .swal2-styled.swal2-cancel { background: var(--vb-surface-2) !important; color: var(--vb-fg) !important; border: 1px solid var(--vb-border) !important; border-radius: var(--vb-radius) !important; font-weight: 600 !important; } .swal2-cancel:hover { background: var(--vb-surface-3) !important; } .swal2-deny, .swal2-styled.swal2-deny { background: var(--vb-danger) !important; color: var(--vb-fg-inverse) !important; border-radius: var(--vb-radius) !important; } /* ============================================================ 10. Tooltip / kbd / progress / volume bar ============================================================ */ .tooltip, [role="tooltip"] { background: var(--vb-fg-strong) !important; color: var(--vb-fg-inverse) !important; border-radius: var(--vb-radius-sm) !important; font-size: 12px !important; padding: 4px 8px !important; box-shadow: var(--vb-shadow) !important; } kbd { background: var(--vb-surface-2); color: var(--vb-fg); border: 1px solid var(--vb-border); border-bottom-width: 2px; border-radius: var(--vb-radius-sm); padding: 2px 6px; font-family: var(--vb-font-mono); font-size: 12px; } #myAudioVolumeBar, .volume-bar, progress { accent-color: var(--vb-primary); background: var(--vb-surface-2) !important; border-radius: var(--vb-radius-pill) !important; overflow: hidden; } #myAudioVolumeBar::-webkit-meter-bar { background: var(--vb-surface-2); } #myAudioVolumeBar::-webkit-meter-optimum-value { background: linear-gradient(90deg, var(--vb-primary), hsl(213 60% 60%)); } /* ============================================================ 11. WhoAreYou / init video preview ============================================================ */ #initVideoContainer, .who-are-you, #whoAreYouContainer { background: var(--vb-surface) !important; border: 1px solid var(--vb-border) !important; border-radius: var(--vb-radius-xl) !important; box-shadow: var(--vb-shadow-lg) !important; } /* Preview video itself must stay transparent/black so the stream shows */ #initVideo { background: #000 !important; border-radius: var(--vb-radius-lg) !important; } /* Init lobby buttons — red when off, like native */ #initUser .initComands button, .init-user button { color: var(--vb-fg) !important; background: transparent !important; border: 1px solid var(--vb-border) !important; } #initUser .initComands button:hover, .init-user button:hover { background: var(--vb-surface-2) !important; color: var(--vb-primary) !important; } #initAudioButton.fa-microphone-slash, #initVideoButton.fa-video-slash, #initAudioVideoButton.fa-eye-slash { color: var(--vb-danger) !important; background: var(--vb-danger-soft) !important; border-color: transparent !important; } #initExitButton { color: var(--vb-danger) !important; border-color: transparent !important; } /* ============================================================ 12. Active rooms list ============================================================ */ .active-room-card, #activeRoomsList > div, #activeRoomsList li { background: var(--vb-surface) !important; border: 1px solid var(--vb-border) !important; border-radius: var(--vb-radius-lg) !important; box-shadow: var(--vb-shadow-sm) !important; padding: 16px !important; margin-bottom: 12px !important; color: var(--vb-fg) !important; } /* ============================================================ 13. Hand raise / status pills ============================================================ */ .user-hand, .hand-raise-indicator { background: var(--vb-warning) !important; color: var(--vb-fg-strong) !important; border-radius: var(--vb-radius-pill) !important; } /* ============================================================ 14. Loading spinner ============================================================ */ .loading, .spinner, .loader { border-color: var(--vb-surface-2) !important; border-top-color: var(--vb-primary) !important; } /* ============================================================ 15. Old landing.html legacy classes — neutralize dark theme ============================================================ */ .site-header, .site-footer { background: var(--vb-surface) !important; border-color: var(--vb-border) !important; } .site-header-inner, .site-footer-inner { color: var(--vb-fg); } .has-animations .hero-figure-box, .hero-figure-box { /* Disable the legacy dark-theme rotating boxes — they clash with the light layout. Replaced by our own newroom hero. */ display: none !important; } /* Legacy form-input override on login.html etc */ .mb-12, .mt-24, .mb-32 { margin-bottom: 12px; } .mt-24 { margin-top: 24px; } .mb-32 { margin-bottom: 32px; } /* ============================================================ Inline Lucide icon helper (used as ) ============================================================ */ .vb-ic { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; vertical-align: -0.15em; line-height: 0; color: currentColor; } .vb-ic svg { width: 1em; height: 1em; display: block; } /* ============================================================ 16. Per-tile top bar (.videoMenuBar) — in-meeting ============================================================ */ .videoMenuBar, .videoMenuBarShare { background: var(--vb-surface) !important; border: 1px solid var(--vb-border) !important; border-radius: var(--vb-radius) !important; color: var(--vb-fg) !important; box-shadow: var(--vb-shadow-sm) !important; backdrop-filter: none !important; } .videoMenuBar .peer-name, .videoMenuBar .peer-name-header, .videoMenuBar .peer-name-container { color: var(--vb-fg) !important; } .videoMenuBar button, .videoMenuBarShare button { background: transparent !important; color: var(--vb-fg-muted) !important; } .videoMenuBar button:hover, .videoMenuBarShare button:hover { color: var(--vb-primary) !important; background: var(--vb-surface-2) !important; } /* ============================================================ 17. Share-room SweetAlert popup ("Deel de kamer") Room.js injects inline color:white / rgb(8,189,89) — override. ============================================================ */ .swal2-html-container p, .swal2-html-container p[style*="color: white"], .swal2-html-container p[style*="rgb(8, 189, 89)"] { color: var(--vb-fg) !important; background: transparent !important; font-family: var(--vb-font) !important; } .swal2-html-container #qrRoomContainer ~ p:last-of-type, .swal2-html-container p[style*="rgb(8, 189, 89)"]:last-of-type { color: var(--vb-primary) !important; word-break: break-all; font-weight: 500; } /* Sub-heading "Join from your mobile device" — keep accent green-ish but readable */ .swal2-html-container p[style*="rgb(8, 189, 89)"]:first-of-type { color: var(--vb-success, #16a34a) !important; font-weight: 600; } /* ============================================================ 18. Lobby (init-user) — dark backdrop behind camera ============================================================ */ #initVideoContainer { background: #0f172a !important; border-radius: var(--vb-radius-lg) !important; padding: 0 !important; overflow: hidden; position: relative; } #initVideo { background: #000 !important; width: 100% !important; height: 280px !important; object-fit: cover !important; border-radius: 0 !important; display: block; } /* ============================================================ 18b. Virtual-background grids — native MiroTalk layout met onze styling. Lichte/grijze achtergrond zodat de witte silhouet-iconen op de eerste rij goed zichtbaar zijn. ============================================================ */ #imageGrid.image-grid, #imageGridVideo.image-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important; gap: 10px !important; padding: 12px !important; background: #e5e7eb !important; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: var(--vb-radius-lg) !important; max-height: 220px !important; overflow-y: auto !important; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.35) transparent; } /* Lobby virtual-background-grid: NIET meer als overlay bovenop de camera. Het grid staat in normale flow onder de video met een donkere "cube"-frame zodat het matcht met #initVideoContainer. */ #initVideoContainer #imageGrid.image-grid, #imageGrid.image-grid { position: static !important; margin-top: 12px !important; background: #0f172a !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: var(--vb-radius-lg) !important; z-index: auto !important; } /* Tegels: lichte achtergrond zodat de witte MiroTalk-iconen contrast houden. Hover krijgt onze primary ring. */ #imageGrid.image-grid img, #imageGridVideo.image-grid img, #imageGrid.image-grid .image-wrapper img, #imageGridVideo.image-grid .image-wrapper img { width: 100% !important; max-width: none !important; height: 64px !important; object-fit: cover !important; background: #6b7280 !important; border: 1px solid rgba(0, 0, 0, 0.15) !important; border-radius: 8px !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); cursor: pointer; transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease; } #imageGrid.image-grid img:hover, #imageGridVideo.image-grid img:hover { opacity: 1 !important; border-color: var(--vb-primary) !important; box-shadow: 0 0 0 2px var(--vb-primary-ring, rgba(59,130,246,0.35)); transform: translateY(-1px); } /* Uploaded-image wrapper + delete badge */ #imageGridVideo .image-wrapper, #imageGrid .image-wrapper { position: relative; } #imageGridVideo .image-wrapper .delete-icon, #imageGrid .image-wrapper .delete-icon { position: absolute; top: 2px; right: 4px; background: rgba(0, 0, 0, 0.65); color: #fff; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; cursor: pointer; } /* ============================================================ 19. In-meeting "more" menu — laat het écht als dropdown ogen. De generieke `button[id$="Button"]` regel (44x44 ronde knop) wordt door deze regels overschreven voor menu-items. ============================================================ */ #settingsExtraMenu { min-width: 240px !important; padding: 6px !important; } #settingsExtraMenu button, #settingsExtraMenu button[id$="Button"] { width: 100% !important; height: auto !important; min-height: 36px !important; border-radius: var(--vb-radius-sm) !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; padding: 8px 12px !important; margin: 0 !important; background: transparent !important; color: var(--vb-fg) !important; font-size: 14px !important; font-weight: 500 !important; gap: 0 !important; } #settingsExtraMenu button:hover { background: var(--vb-accent) !important; color: var(--vb-accent-fg) !important; } #settingsExtraMenu button > i, #settingsExtraMenu button > i.fas, #settingsExtraMenu button > i.fa-solid { display: inline-flex !important; align-items: center; justify-content: center; visibility: visible !important; opacity: 1 !important; color: var(--vb-fg-muted) !important; width: 20px !important; min-width: 20px !important; text-align: center !important; margin-right: 12px !important; font-size: 1rem !important; } #settingsExtraMenu button:hover > i { color: var(--vb-accent-fg) !important; } #settingsExtraMenu button > i.red, #settingsExtraMenu button > i.cr { color: var(--vb-danger) !important; } /* ============================================================ 20. Exit-meeting button — wit icoon op rode pil. Room.css zet `.fa-phone-slash { color: red !important; }`, dus we hebben hogere specificity (id + class) nodig. ============================================================ */ #exitButton { width: 44px !important; height: 44px !important; padding: 0 !important; margin-left: 8px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: var(--vb-danger) !important; border: none !important; box-shadow: var(--vb-shadow-sm) !important; } #exitButton:hover { background: var(--vb-danger-hover) !important; transform: none !important; } #exitButton i, #exitButton i.fas, #exitButton i.fa-solid, #exitButton i.red, #exitButton i.fa-phone-slash, #exitButton .fa-phone-slash, button#exitButton i, button#exitButton i.fa-phone-slash { color: #ffffff !important; font-size: 1.15rem !important; margin: 0 !important; line-height: 1 !important; } /* Sommige FA builds zetten color op ::before — die ook wit */ #exitButton i::before, #exitButton .fa-phone-slash::before { color: #ffffff !important; } /* ============================================================ 21. Initial #loadingDiv (Room.html) — vBoxx skin i.p.v. MiroTalk-grijs met spirograph-gif. ============================================================ */ #loadingDiv { background: var(--vb-bg) !important; color: var(--vb-fg) !important; font-family: var(--vb-font) !important; border-radius: var(--vb-radius-xl) !important; border: 1px solid var(--vb-border) !important; box-shadow: var(--vb-shadow-lg) !important; padding: 40px 36px !important; max-width: 440px; } #loadingDiv h1 { color: var(--vb-fg-strong) !important; font-family: var(--vb-font) !important; font-weight: 700 !important; font-size: 24px !important; letter-spacing: -0.02em; margin: 0 0 16px !important; } #loadingDiv pre { color: var(--vb-fg-muted) !important; font-family: var(--vb-font) !important; font-size: 14px !important; line-height: 1.55 !important; white-space: pre-wrap !important; text-align: center; margin: 12px 0 0 !important; } #loadingDiv .loading-img { max-width: 160px; height: auto; margin: 0 auto; display: block; opacity: 0.85; }