color comes from ombase.css (#525f7f) which reads barely visible on dark. Force primary text so it pops. */ html.om-dark .om-surface-card h2, html.om-dark .com-onemarketer-social-client-SimpleGrid_BinderImpl_GenCss_style-panel h2 { color: var(--om-text-primary) !important; font-weight: 700 !important; } /* ---- TopPanel (navbar) ------------------------------------------ `.bg-om` is the brand blue gradient. In dark mode we keep brand blue but flatten to a single slate-blue tone that reads as "dark mode chrome" rather than the bright daytime gradient. */ html.om-dark .bg-om, html.om-dark .navbar.bg-om { /* Same subtle brand-tinted gradient as .sidebar but diagonal so it reads on a wide-and-short bar (TopPanel is 90px tall; footer is 28px — both also use .bg-om). Brand blue corner fading into the unified dark surface keeps OneMarketer identity without breaking the rest of the dark chrome. */ background: linear-gradient(135deg, #1e3c72 0%, #1e293b 35%, #1e293b 100%) !important; border-color: rgba(255, 255, 255, 0.06) !important; } /* Navbar inner text + anchors stay readable. */ html.om-dark .navbar .nav-link, html.om-dark .navbar .nav-link span, html.om-dark .navbar .nav-link i, html.om-dark .navbar .navbar-nav .nav-link, html.om-dark .navbar-text { color: rgba(255, 255, 255, 0.92) !important; } /* User account / status menu trigger area inside the navbar. */ html.om-dark .navbar .media-body span, html.om-dark .navbar .badge-dot .status, html.om-dark .navbar .badge-dot .timeStatus { color: rgba(255, 255, 255, 0.95) !important; } /* TopPanel user-account dropdown. The legacy onemarketer.css has: .bg-om .dropdown-menu, .bg-om .dropdown-menu *, .bg-om .dropdown-menu a, .bg-om .dropdown-menu h6 { color: #172b4d !important; } That rule sets EVERY descendant to dark navy (#172b4d) and on a dark card background that's the dark-on-dark invisibility the user is reporting. We override with higher specificity: html.om-dark .bg-om .dropdown-menu (0,3,2) > legacy (0,2,1) */ html.om-dark .bg-om .dropdown-menu, html.om-dark .bg-om .dropdown-menu *, html.om-dark .bg-om .dropdown-menu a, html.om-dark .bg-om .dropdown-menu a span, html.om-dark .bg-om .dropdown-menu .gwt-Anchor, html.om-dark .bg-om .dropdown-menu .dropdown-item, html.om-dark .bg-om .dropdown-menu .dropdown-item span, html.om-dark .bg-om .dropdown-menu .dropdown-item i, html.om-dark .bg-om .dropdown-menu h6, html.om-dark .bg-om .dropdown-menu h3, html.om-dark .bg-om .dropdown-menu h3 span, html.om-dark .dropdown-menu, html.om-dark .dropdown-menu *, html.om-dark .dropdown-menu a, html.om-dark .dropdown-menu .gwt-Anchor, html.om-dark .dropdown-menu h6, html.om-dark .dropdown-menu h3, html.om-dark .dropdown-menu h3 span { color: var(--om-text-primary) !important; } /* Dropdown background + border. Bumped a notch lighter than --om-bg-card so the floating menu visibly detaches from the rest of the dark chrome (the user wants it not to blend with the page background). */ html.om-dark .bg-om .dropdown-menu, html.om-dark .dropdown-menu { background-color: #334155 !important; border-color: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.25) !important; } /* Hover state recalibrated against the lighter menu background. */ html.om-dark .bg-om .dropdown-menu .dropdown-item:hover, html.om-dark .bg-om .dropdown-menu .dropdown-item:focus, html.om-dark .bg-om .dropdown-menu a:hover, html.om-dark .bg-om .dropdown-menu .gwt-Anchor:hover, html.om-dark .dropdown-menu a:hover, html.om-dark .dropdown-menu .gwt-Anchor:hover, html.om-dark .dropdown-menu .dropdown-item:hover { background-color: rgba(255, 255, 255, 0.08) !important; color: var(--om-text-primary) !important; } /* Dropdown-header (the "Welcome / nombre asesor" block at the top). */ html.om-dark .bg-om .dropdown-menu .dropdown-header, html.om-dark .dropdown-menu .dropdown-header { color: var(--om-text-secondary) !important; background-color: transparent !important; } /* Hover + focus on the lighter dropdown bg. The legacy onemarketer.css has `.bg-om .dropdown-menu .dropdown-item:hover { background: #f6f9fc !important; color: #1e3c72 !important; }` which we beat via the `html.om-dark` prefix (higher specificity at same !important). Highlight pattern: very light pill background with brand-blue text so the hovered item reads as a tappable target on the dark menu. */ html.om-dark .bg-om .dropdown-menu .dropdown-item:hover, html.om-dark .bg-om .dropdown-menu .dropdown-item:focus, html.om-dark .bg-om .dropdown-menu a:hover, html.om-dark .bg-om .dropdown-menu a:focus, html.om-dark .bg-om .dropdown-menu .gwt-Anchor:hover, html.om-dark .bg-om .dropdown-menu .gwt-Anchor:focus, html.om-dark .dropdown-menu .dropdown-item:hover, html.om-dark .dropdown-menu .dropdown-item:focus, html.om-dark .dropdown-menu a:hover, html.om-dark .dropdown-menu a:focus, html.om-dark .dropdown-menu .gwt-Anchor:hover, html.om-dark .dropdown-menu .gwt-Anchor:focus { background-color: #f1f5f9 !important; color: #1e3c72 !important; } /* Also paint the descendants (spans, icons) so they don't keep the white text inherited from the menulink CssResource class. */ html.om-dark .bg-om .dropdown-menu .dropdown-item:hover *, html.om-dark .bg-om .dropdown-menu a:hover *, html.om-dark .bg-om .dropdown-menu .gwt-Anchor:hover *, html.om-dark .dropdown-menu .dropdown-item:hover *, html.om-dark .dropdown-menu a:hover *, html.om-dark .dropdown-menu .gwt-Anchor:hover * { color: #1e3c72 !important; } /* ----- Sidebar (containerSidebar DockLayoutPanel) ---------- Mail.ui.xml puts `styleName="sidebar"` but no CSS rule defines a background for it -- the visual gradient comes from each inner stack panel. In dark mode the container shows the white panelBackground through, so we paint it dark explicitly. */ html.om-dark .sidebar { /* Subtle vertical brand-tinted gradient: a hint of the OneMarketer blue at the top fading into the unified dark surface. Makes the sidebar feel like a deliberate panel instead of flat black. */ background: linear-gradient(180deg, #1e3c72 0%, #1e293b 35%, #1e293b 100%) !important; } /* The center column behind everything (was #ffffff in global.css). */ html.om-dark .panelBackground { background-color: var(--om-bg-app) !important; } /* ----- ChatElement system-message chip (.chat_forDate) ---- global.css gives it a white-translucent chip with slate text. On dark the chip blends and text reads as too light. Repaint with a dark chip + bright primary text so day separators and "Transferred to..." style messages pop. */ html.om-dark .chat_forDate { background: rgba(15, 23, 42, 0.75) !important; color: var(--om-text-primary) !important; border-color: rgba(255, 255, 255, 0.10) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.40) !important; } /* ----- ChatElement bubbles (global.css classes) -------------- - chat_forRemote: incoming private (client → operator) - chat_forLocal: outgoing private (operator → client) - chat_forRemotePublic / chat_forLocalPublic: social comments The Public variants already use the brand blue gradient so they read fine on dark; only the private ones need surface flipping. */ html.om-dark .chat_forRemote { /* Slightly lighter than the unified --om-bg-card (#1e293b) so the bubble reads as elevated on the matching Chat/Conversacion2 bg. */ background: #2d3b54 !important; color: var(--om-text-primary) !important; border-color: rgba(255, 255, 255, 0.10) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.40) !important; } html.om-dark .chat_forLocal { background: #128c7e !important; /* WhatsApp green outgoing */ color: #ffffff !important; border-color: rgba(255, 255, 255, 0.10) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.40) !important; } /* Meta line (timestamps / status icons inside bubbles). */ html.om-dark .chat_forRemote .chat_meta, html.om-dark .chat_forLocal .chat_meta { color: rgba(255, 255, 255, 0.65) !important; } /* Text content inside bubbles — global.css doesn't always paint a text color on inner spans/divs; force readable. */ html.om-dark .chat_forRemote *, html.om-dark .chat_forLocal * { color: inherit !important; } /* Chat root container (.detail from Chat.ui.xml). Tagged with om-surface-card from Chat.java. */ html.om-dark .om-surface-card.gwt-DockLayoutPanel, html.om-dark .om-surface-card { background-color: var(--om-bg-card) !important; color: var(--om-text-primary) !important; } /* Chat header strip (.panel inside Chat.ui.xml renders white-to-light gradient). The CssResource class is obfuscated so target via the dev-mode pretty name plus a generic descendant rule. */ html.om-dark .com-onemarketer-social-client-Chat_BinderImpl_GenCss_style-panel, html.om-dark .om-surface-card > [class*="GenCss_style-panel"] { background: var(--om-bg-card) !important; background-image: none !important; border-bottom-color: var(--om-border) !important; } html.om-dark .com-onemarketer-social-client-Chat_BinderImpl_GenCss_style-headerItem { color: var(--om-blue) !important; } html.om-dark .com-onemarketer-social-client-Chat_BinderImpl_GenCss_style-lastSeen { color: var(--om-text-muted) !important; } html.om-dark .com-onemarketer-social-client-Chat_BinderImpl_GenCss_style-sp { background-color: var(--om-bg-elev) !important; } html.om-dark .com-onemarketer-social-client-Chat_BinderImpl_GenCss_style-textbox, html.om-dark .com-onemarketer-social-client-Chat_BinderImpl_GenCss_style-listsuggest, html.om-dark .com-onemarketer-social-client-Chat_BinderImpl_GenCss_style-listsmall { background-color: var(--om-bg-card) !important; color: var(--om-text-primary) !important; border-color: var(--om-border-strong) !important; } html.om-dark .com-onemarketer-social-client-Chat_BinderImpl_GenCss_style-btnsmall { background-color: var(--om-bg-elev) !important; color: var(--om-text-primary) !important; border-color: var(--om-border-strong) !important; } html.om-dark .com-onemarketer-social-client-Chat_BinderImpl_GenCss_style-btnsmall:hover { background-color: var(--om-bg-inset) !important; } html.om-dark .com-onemarketer-social-client-Chat_BinderImpl_GenCss_style-lblsmall { color: var(--om-text-muted) !important; } html.om-dark .com-onemarketer-social-client-Chat_BinderImpl_GenCss_style-lblsesion, html.om-dark .com-onemarketer-social-client-Chat_BinderImpl_GenCss_style-lblsesion2 { color: var(--om-text-primary) !important; } /* ----- Chat header session-state badge (.badge-dot) ------------ The "Caso abierto" / "Caso cerrado" pill in the chat header is an

with a child. Bootstrap ombase.css paints the strong dark navy (#32325d) which on a dark surface reads as invisible. */ html.om-dark .badge-dot, html.om-dark .badge-dot strong, html.om-dark h6.badge, html.om-dark h6.badge strong, html.om-dark .om-surface-card .badge, html.om-dark .om-surface-card .badge strong, html.om-dark .om-surface-card h6 { color: var(--om-text-primary) !important; } /* ============================================================= SendMessage (composer at the bottom) The textarea + toolbar live there. The textarea uses contenteditable or .gwt-TextArea. Buttons may be unstyled. ============================================================= */ html.om-dark .sendmessage, html.om-dark .send-message, html.om-dark [class*="sendMessage"], html.om-dark [class*="send-message"] { background-color: var(--om-bg-card) !important; color: var(--om-text-primary) !important; border-color: var(--om-border) !important; } html.om-dark .sendmessage textarea, html.om-dark .sendmessage [contenteditable="true"] { background-color: var(--om-bg-card) !important; color: var(--om-text-primary) !important; } /* ============================================================= Sidebar stack panels (Mailboxes / Tasks / Adjusts / etc.) The sidebar gradient already reads dark; we just need to make sure nested labels, dropdowns and inputs stay readable. ============================================================= */ html.om-dark .sidebar .form-control, html.om-dark .sidebar input, html.om-dark .sidebar select { background-color: rgba(255, 255, 255, 0.06) !important; color: rgba(255, 255, 255, 0.92) !important; border-color: rgba(255, 255, 255, 0.18) !important; } /* GWT Tree (used by Mailboxes) — items are styled inline; this is a safety net for default tree colors. */ html.om-dark .gwt-Tree .gwt-TreeItem { color: rgba(255, 255, 255, 0.92) !important; } /* ============================================================= Generic catch-all: any inline white background written from Java. Java code that does setProperty("background", "#ffffff") or "background-color: #fff" ends up as inline style. Catch the common literals here so legacy widgets that hadn't been migrated still flip. Covers #fff, #ffffff, #FFF, #FFFFFF, "white", rgb(255,255,255) and rgba(255,255,255,1). ============================================================= */ html.om-dark [style*="background-color: #fff"], html.om-dark [style*="background-color:#fff"], html.om-dark [style*="background-color: #FFF"], html.om-dark [style*="background-color:#FFF"], html.om-dark [style*="background-color: white"], html.om-dark [style*="background-color:white"], html.om-dark [style*="background: #fff"], html.om-dark [style*="background:#fff"], html.om-dark [style*="background: #FFF"], html.om-dark [style*="background:#FFF"], html.om-dark [style*="background: white"], html.om-dark [style*="background:white"], html.om-dark [style*="background-color: rgb(255"], html.om-dark [style*="background-color: rgba(255, 255, 255, 1"] { background-color: var(--om-bg-card) !important; background-image: none !important; } /* Inline near-white backgrounds (legacy hex palette: #f8fafc, #f5f5f5, #f1f5f9, #fafbfd, #f8f9fe, #fcfcfc, etc.). They appear in dozens of setProperty calls across legacy screens. Catch each one explicitly so the corresponding card / panel goes dark inset. */ html.om-dark [style*="background-color: #f8fafc"], html.om-dark [style*="background-color: #fafbfd"], html.om-dark [style*="background-color: #f8f9fe"], html.om-dark [style*="background-color: #f1f5f9"], html.om-dark [style*="background-color: #f5f5f5"], html.om-dark [style*="background-color: #f4f6fb"], html.om-dark [style*="background-color: #eef2fa"], html.om-dark [style*="background-color: #f0f0f0"], html.om-dark [style*="background:#f8fafc"], html.om-dark [style*="background:#fafbfd"], html.om-dark [style*="background:#f8f9fe"], html.om-dark [style*="background:#f1f5f9"] { background-color: var(--om-bg-inset) !important; background-image: none !important; } /* Dark text on light surfaces — inline color: #525f7f / #344054 / #1e293b etc. would stay dark on dark in dark mode. Flip them to primary text. */ html.om-dark [style*="color: #525f7f"], html.om-dark [style*="color:#525f7f"], html.om-dark [style*="color: #344054"], html.om-dark [style*="color:#344054"], html.om-dark [style*="color: #1e293b"], html.om-dark [style*="color:#1e293b"], html.om-dark [style*="color: #0f172a"], html.om-dark [style*="color:#0f172a"], html.om-dark [style*="color: #334155"], html.om-dark [style*="color:#334155"], html.om-dark [style*="color: #1f3041"], html.om-dark [style*="color:#1f3041"], html.om-dark [style*="color: #212529"], html.om-dark [style*="color:#212529"], html.om-dark [style*="color: #000"], html.om-dark [style*="color:#000"], html.om-dark [style*="color: black"], html.om-dark [style*="color:black"] { color: var(--om-text-primary) !important; } /* Mid-tone text (#475569 / #6b7c93 / #64748b) → secondary so still readable but with hierarchy. */ html.om-dark [style*="color: #475569"], html.om-dark [style*="color:#475569"], html.om-dark [style*="color: #6b7c93"], html.om-dark [style*="color:#6b7c93"], html.om-dark [style*="color: #64748b"], html.om-dark [style*="color:#64748b"] { color: var(--om-text-secondary) !important; } /* Brand blue / primary blue (#1e3c72 / #2a5298) used as accent text → flip to lighter blue token in dark for legibility. */ html.om-dark [style*="color: #1e3c72"], html.om-dark [style*="color:#1e3c72"], html.om-dark [style*="color: #2a5298"], html.om-dark [style*="color:#2a5298"], html.om-dark [style*="color: #0085da"], html.om-dark [style*="color:#0085da"], html.om-dark [style*="color: #0085DA"], html.om-dark [style*="color:#0085DA"] { color: var(--om-blue) !important; } /* Inline borders: rgba(30, 60, 114, 0.X) → token border. */ html.om-dark [style*="border: 1px solid rgba(30, 60, 114"], html.om-dark [style*="border: 1px solid #e2e8f0"], html.om-dark [style*="border:1px solid #e2e8f0"], html.om-dark [style*="border: 1px solid #f1f5f9"], html.om-dark [style*="border-color: #e2e8f0"], html.om-dark [style*="border-color:#e2e8f0"], html.om-dark [style*="border-color: #f1f5f9"], html.om-dark [style*="border-bottom: 1px solid #f1f5f9"], html.om-dark [style*="border-top: 1px solid #f1f5f9"] { border-color: var(--om-border) !important; } /* ============================================================= Bootstrap / Argon "btn-*" + general button surfaces. Many Java widgets call setClassName("btn btn-sm btn-default") etc.; the default + light variants render white in dark. ============================================================= */ html.om-dark .btn-default, html.om-dark .btn-light, html.om-dark .btn-secondary, html.om-dark .btn-outline-default, html.om-dark .btn-outline-light, html.om-dark .btn-outline-secondary { background-color: var(--om-bg-elev) !important; color: var(--om-text-primary) !important; border-color: var(--om-border-strong) !important; } html.om-dark .btn-default i, html.om-dark .btn-light i, html.om-dark .btn-secondary i, html.om-dark .btn-outline-default i, html.om-dark .btn-outline-light i, html.om-dark .btn-outline-secondary i { color: var(--om-text-primary) !important; } /* Cards & wells. */ html.om-dark .card-header, html.om-dark .card-footer, html.om-dark .card-body { background-color: var(--om-bg-card) !important; color: var(--om-text-primary) !important; border-color: var(--om-border) !important; } /* Bootstrap badges: pure-color badges keep their hue, but light ones need contrast tweaks. */ html.om-dark .badge-light, html.om-dark .badge-secondary, html.om-dark .badge-default { background-color: var(--om-bg-elev) !important; color: var(--om-text-primary) !important; } /* Dropdowns. */ html.om-dark .dropdown-menu { background-color: var(--om-bg-card) !important; border-color: var(--om-border) !important; } html.om-dark .dropdown-item, html.om-dark .dropdown-menu .gwt-Anchor, html.om-dark .dropdown-menu a { color: var(--om-text-primary) !important; } html.om-dark .dropdown-item:hover, html.om-dark .dropdown-item:focus, html.om-dark .dropdown-menu a:hover { background-color: var(--om-bg-elev) !important; color: var(--om-text-primary) !important; } html.om-dark .dropdown-divider { border-color: var(--om-border) !important; } html.om-dark .dropdown-header, html.om-dark .dropdown-header.noti-title, html.om-dark .dropdown-header h6 { color: var(--om-text-secondary) !important; background-color: transparent !important; } /* TopPanel dropdowns nest a media-body with status pills (pause / online). The "status" span text is part of the dropdown menu, force readable. */ html.om-dark .dropdown-menu .status, html.om-dark .dropdown-menu .timeStatus, html.om-dark .dropdown-menu .badge-dot span { color: var(--om-text-primary) !important; } /* GWT split bars (the drag handle between center / east / south of the main split layout). They render as a tiny div with no class but inline gradient. Force a dark sliver. */ html.om-dark .gwt-SplitLayoutPanel-HDragger, html.om-dark .gwt-SplitLayoutPanel-VDragger { background-color: var(--om-border) !important; } /* GWT TabPanel content area (not just our .om-tabs). */ html.om-dark .gwt-TabPanel, html.om-dark .gwt-TabPanelBottom { background-color: var(--om-bg-card) !important; color: var(--om-text-primary) !important; } html.om-dark .gwt-TabBar { background-color: var(--om-bg-card) !important; } html.om-dark .gwt-TabBarItem { color: var(--om-text-secondary) !important; } html.om-dark .gwt-TabBarItem-selected { color: var(--om-text-primary) !important; } /* ToggleButton (Adjusts menu items). */ html.om-dark .gwt-ToggleButton { color: var(--om-text-primary) !important; } /* DataGrid (used in some admin tables alongside CellTable). */ html.om-dark .gwt-DataGrid, html.om-dark .gwt-DataGrid th, html.om-dark .gwt-DataGrid td { background-color: var(--om-bg-card) !important; color: var(--om-text-primary) !important; border-color: var(--om-border) !important; } html.om-dark .gwt-DataGrid thead th { background-color: var(--om-bg-elev) !important; } /* Smooth swap — restricted to the key surfaces only. Applying the transition to every element (`body *`) made the dark-mode toggle stall under heavy DOMs (hundreds of bubbles, table rows, etc.): the browser tried to animate every background-color change in parallel, click events queued, and the user had to click 3 times for the toggle to register. Scoping to the chrome containers keeps the visual fade without the layout thrash. */ body, .om-surface-card, .om-surface-inset, .om-surface-elev, .bg-om, .sidebar, .dropdown-menu, .card, .modal-content { transition-property: background-color, color, border-color; transition-duration: 140ms; transition-timing-function: ease; } /* ============================================================= Tenant login logo (chip container). El logo del cliente es un asset externo con colores propios; hay que preservarlos y asegurar contraste contra card blanca (light) o card slate (dark). Sin backdrop, un PNG con fondo blanco se ve invisible sobre la card blanca ("cuadro blanco"). ============================================================= */ .om-login-tenant-logo img { background: #ffffff; padding: 8px 12px; border-radius: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06); } html.om-dark .om-login-tenant-logo img { /* Dark mode: backdrop blanco para que el logo (colorido o transparente) se vea sobre la card oscura. Sombra reducida para que no compita con el glow del card ring. */ background: rgba(255, 255, 255, 0.96); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); } /* CRITICAL: la regla generica `html.om-dark .om-login-shell .card img` aplica un filter brightness(0) invert(1) drop-shadow que rompe los colores del logo del tenant (convierte a silueta blanca). Excluimos explicitamente el tenant logo -- queremos preservar la paleta del cliente. La del OneMarketer y powered-by siguen invirtiendose. */ html.om-dark .om-login-shell .card .om-login-tenant-logo img { filter: none !important; } /* Class marker que se agrega desde Login.java cuando hay tenant logo -- fuerza display:none con specificity 3 clases (0-0-3-0) + !important para ganarle a `.om-login-shell .om-login-logo { display: inline-block !important; }` que aplica el mobile media query. */ .om-login-shell .om-login-logo.om-login-logo--hidden, .om-login-logo--hidden { display: none !important; } /* ============================================================= "Powered by OneMarketer" mini-badge al pie del card. Solo se pinta cuando el tenant tiene logo propio (Login.java maneja la logica). Muy sutil -- opacity baja + font chico. En dark mode la img se invierte via la regla existente de .card img. ============================================================= */ .om-login-powered-by { margin-top: 10px; } .om-login-powered-by-inner { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 500; letter-spacing: 0.5px; color: #94a3b8; opacity: 0.75; text-transform: uppercase; } .om-login-powered-by-inner img { height: 14px; width: auto; display: inline-block; vertical-align: middle; opacity: 0.85; } .om-login-powered-by-inner:hover { opacity: 1; } /* Dark mode: el texto se ve mejor un poco mas claro contra la card slate. La img la maneja `.card img` filter existente. */ html.om-dark .om-login-powered-by-inner { color: #cbd5e1; opacity: 0.7; } /* ============================================================= Login background photo layer. `.om-login-bg` es un
que Login.java inserta al inicio del root loginBody. El server (getPublicSsoConfig) devuelve `loginBgUrl` = Bing Image of the Day (rota una vez por dia). Java setea background-image inline. Si el server devuelve "" -> Java no toca la propiedad -> el div queda vacio, transparente, y solo se ve el gradient azul detras. ============================================================= */ .om-login-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: center center; background-repeat: no-repeat; opacity: 0.22; pointer-events: none; z-index: 0; } /* ============================================================= Login screen — dark variant. The Login UiBinder bakes brand-blue hexes into obfuscated CssResource class names, so we can't reskin those classes from here. Instead, Login.java tags the root with the static marker class `om-login-shell` and we override via structural selectors anchored on that marker. Mail.jsp pre-paint sets `html.om-dark` before any stylesheet matches, so this paints on the first frame with no flash. ============================================================= */ html.om-dark .om-login-shell { background: radial-gradient(ellipse at top left, #1d2a4a 0%, transparent 55%), radial-gradient(ellipse at bottom right, #1a3a52 0%, transparent 55%), linear-gradient(135deg, #0a0e1a 0%, #0f172a 50%, #0a0e1a 100%) !important; background-size: 200% 200%, 200% 200%, 200% 200% !important; color: #e2e8f0; } /* Subtle dot-grid stays, but on dark we make it slightly cooler. Doble selector: (a) `.om-login-bg + div` -> cuando Login.java inyecto el div de foto, el dot-grid quedo como segundo hijo; lo targetamos por sibling. (b) `> div:first-child:not(.om-login-bg)` -> fallback para cuando el div de foto NO existe (fetch de Bing fallo temprano, o versiones anteriores del client). Preserva la semantica original. */ html.om-dark .om-login-shell > .om-login-bg + div, html.om-dark .om-login-shell > div:first-child:not(.om-login-bg) { background-image: radial-gradient(circle at 18% 30%, rgba(96, 165, 250, 0.10) 1.5px, transparent 2px), radial-gradient(circle at 78% 22%, rgba(96, 165, 250, 0.08) 1.5px, transparent 2px), radial-gradient(circle at 62% 70%, rgba(167, 139, 250, 0.08) 1.5px, transparent 2px), radial-gradient(circle at 28% 78%, rgba(34, 211, 238, 0.08) 1.5px, transparent 2px), radial-gradient(circle at 88% 56%, rgba(167, 139, 250, 0.08) 1.5px, transparent 2px) !important; } /* Floating social icons — brighten just enough on dark for them to read against the deeper navy without being noisy. */ html.om-dark .om-login-shell .fab, html.om-dark .om-login-shell .fas { color: rgba(148, 184, 255, 0.13) !important; text-shadow: 0 0 22px rgba(96, 165, 250, 0.18) !important; } /* The auth card itself — slate panel + cyan glow ring. */ html.om-dark .om-login-shell .card { background-color: rgba(15, 23, 42, 0.78) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(96, 165, 250, 0.18) !important; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(96, 165, 250, 0.06) inset !important; } html.om-dark .om-login-shell .card * { color: #e2e8f0; } html.om-dark .om-login-shell .card p { color: #cbd5e1 !important; } /* Title + subtitle override the inline hex values from the obfuscated CssResource. */ html.om-dark .om-login-shell .card p:first-of-type { color: #f1f5f9 !important; } html.om-dark .om-login-shell .card p:nth-of-type(2) { color: #94a3b8 !important; } /* Logo lockup — the brand mark is dark blue letters on transparent, which disappears on the dark card. Invert to pure white so the wordmark still reads. (Same trick used for the spinner via inline filter in Login.java.) */ html.om-dark .om-login-shell .card img { filter: brightness(0) invert(1) drop-shadow(0 0 18px rgba(96,165,250,0.35)); } /* Form inputs — borderless dark inset that blends with the card. Border-color matches the input's own background so the 1px frame is invisible at rest; only the focus state lights up a cyan ring to show the active field. */ html.om-dark .om-login-shell input[type='text'], html.om-dark .om-login-shell input[type='email'], html.om-dark .om-login-shell input[type='password'] { background-color: #0f1a2c !important; color: #e2e8f0 !important; border: 1px solid #0f1a2c !important; box-shadow: none !important; } html.om-dark .om-login-shell input[type='text']:focus, html.om-dark .om-login-shell input[type='email']:focus, html.om-dark .om-login-shell input[type='password']:focus { border-color: #60a5fa !important; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.20) !important; background-color: #0f1a2c !important; } html.om-dark .om-login-shell input::placeholder { color: #64748b !important; } /* Input-group addons (icons left of email/password). Border matches the input fill so the group reads as one chip. */ html.om-dark .om-login-shell .input-group-text, html.om-dark .om-login-shell .input-group-prepend .input-group-text, html.om-dark .om-login-shell .input-group-append .input-group-text { background-color: #0f1a2c !important; border-color: #0f1a2c !important; color: #94a3b8 !important; } /* Bootstrap wraps inputs in .input-group / .form-group; some themes also paint a border on those wrappers. Neutralize. */ html.om-dark .om-login-shell .input-group, html.om-dark .om-login-shell .form-group { border: 0 !important; box-shadow: none !important; } /* Form labels + small text. */ html.om-dark .om-login-shell label, html.om-dark .om-login-shell .text-muted, html.om-dark .om-login-shell small { color: #94a3b8 !important; } /* Primary submit button — brighter cyan/indigo gradient on dark. */ html.om-dark .om-login-shell button.btn-primary, html.om-dark .om-login-shell input[type='submit'], html.om-dark .om-login-shell .btn-info, html.om-dark .om-login-shell .btn-success { background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%) !important; border: 0 !important; color: #ffffff !important; box-shadow: 0 6px 18px rgba(59, 130, 246, 0.42) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } html.om-dark .om-login-shell button.btn-primary:hover, html.om-dark .om-login-shell input[type='submit']:hover { background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important; box-shadow: 0 10px 26px rgba(59, 130, 246, 0.55) !important; } /* Anchor links inside the card (forgot password, register, etc.) */ html.om-dark .om-login-shell .card a { color: #93c5fd !important; text-decoration: none; } html.om-dark .om-login-shell .card a:hover { color: #bfdbfe !important; text-decoration: underline; } /* Top-right language nav — keep visible on dark. */ html.om-dark .om-login-shell .navbar .nav-link { color: #cbd5e1 !important; } html.om-dark .om-login-shell .navbar .dropdown-menu { background-color: #1e293b !important; border: 1px solid rgba(96, 165, 250, 0.18) !important; } html.om-dark .om-login-shell .navbar .dropdown-item { color: #e2e8f0 !important; } html.om-dark .om-login-shell .navbar .dropdown-item:hover { background-color: rgba(96, 165, 250, 0.10) !important; color: #ffffff !important; } /* Footer cert badges + links — tone down brightness on dark. */ html.om-dark .om-login-shell footer a, html.om-dark .om-login-shell footer span { color: #cbd5e1 !important; } html.om-dark .om-login-shell footer span[title] { background-color: rgba(96, 165, 250, 0.08) !important; border-color: rgba(96, 165, 250, 0.22) !important; } html.om-dark .om-login-shell footer a:hover { color: #ffffff !important; } /* Error message strip. */ html.om-dark .om-login-shell .alert, html.om-dark .om-login-shell .alert-danger { background-color: rgba(239, 68, 68, 0.12) !important; border-color: rgba(239, 68, 68, 0.35) !important; color: #fecaca !important; } /* ============================================================ Login screen -- Mobile treatment. Producto: gradient azul oscuro limpio, sin nada mas. Sin foto, sin iconos flotantes, sin dot-grid, sin aurora. En dark solo cambia la paleta a un navy mas profundo. Cualquier decoracion heredada de desktop la matamos aca con !important. ============================================================ */ @media (max-width: 768px) { /* Nuke a cualquier decoracion que se pudiera colar desde desktop o ui:style. Foto Bing, dot-grid, y los avatares de RRSS flotantes -- todos apagados desde este stylesheet externo (que se puede refrescar sin recompilar GWT). */ .om-login-bg { display: none !important; } /* bgConnections = primer div despues de om-login-bg (o el primer child si no hay bgDiv). bgDecor = segundo div despues de om-login-bg (o segundo child sin bgDiv). Contiene los avatares fab/fas de las RRSS. Ambos ocultos completo -- display:none tumba tambien background-image, asi no hace falta la regla vieja. */ .om-login-shell > .om-login-bg + div, .om-login-shell > .om-login-bg + div + div, .om-login-shell > div:first-child:not(.om-login-bg), .om-login-shell > div:first-child:not(.om-login-bg) + div { display: none !important; } /* Mobile + dark: gradient navy simple, sin blobs ni animacion. */ html.om-dark .om-login-shell { background: linear-gradient(160deg, #050914 0%, #0a1024 50%, #04070f 100%) !important; animation: none !important; } /* Padding + flex-start del card-body para que el logo pinne arriba (dejar espacio para bajar el bloque de inputs sin re-centrar toda la stack de vlogin). Sin mover el logo de su posicion top. */ html .om-login-shell .om-login-cardbody, html .om-login-shell .card-body { padding-top: 32px !important; justify-content: flex-start !important; } /* Bajar SOLO el bloque de inputs + login button en mobile. VerticalPanel de Login.java renderiza como

) ---------------- The list name above the toolbar. Default