/* ========================================================= SATEC UI Branding externo sobre ThingsBoard CE ========================================================= */ :root { --satec-orange: #F16D1D; --satec-orange-hover: #D85D14; --satec-dark: #20242A; --satec-dark-2: #2B3038; --satec-dark-3: #343A43; --satec-bg: #F3F4F6; --satec-white: #FFFFFF; --satec-border: rgba(255,255,255,0.12); } /* ========================================================= LOGIN ========================================================= */ .tb-login-content { background: linear-gradient( 135deg, #171A1F 0%, #252A31 55%, #20242A 100% ) !important; } /* Tarjeta central login */ .tb-login-content mat-card, .tb-login-content .mat-mdc-card { background: var(--satec-dark-2) !important; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px !important; box-shadow: 0 20px 50px rgba(0,0,0,0.30) !important; } /* Textos login */ .tb-login-content, .tb-login-content .title, .tb-login-content mat-label, .tb-login-content input, .tb-login-content mat-icon, .tb-login-content .forgot-password, .tb-login-content .tb-reset-password { color: var(--satec-white) !important; } /* Campos login */ .tb-login-content mat-form-field { --mdc-outlined-text-field-outline-color: rgba(255,255,255,0.30); --mdc-outlined-text-field-hover-outline-color: rgba(255,255,255,0.55); --mdc-outlined-text-field-focus-outline-color: var(--satec-orange); --mdc-outlined-text-field-input-text-color: var(--satec-white); --mdc-outlined-text-field-label-text-color: rgba(255,255,255,0.80); --mdc-outlined-text-field-focus-label-text-color: var(--satec-orange); } /* Botón principal */ .tb-login-content .tb-action-button { background: var(--satec-orange) !important; color: #FFFFFF !important; border-radius: 6px !important; font-weight: 600 !important; } .tb-login-content .tb-action-button:hover { background: var(--satec-orange-hover) !important; } /* Recuperar contraseña */ .tb-login-content .tb-reset-password { color: rgba(255,255,255,0.90) !important; } .tb-login-content .tb-reset-password:hover { color: var(--satec-orange) !important; } /* ========================================================= BARRA LATERAL ========================================================= */ .tb-site-sidenav { background: var(--satec-dark) !important; color: var(--satec-white) !important; } .tb-nav-header-toolbar { background: var(--satec-dark) !important; color: var(--satec-white) !important; border-right-color: var(--satec-border) !important; } .tb-side-menu-toolbar { background: var(--satec-dark) !important; color: var(--satec-white) !important; border-right-color: var(--satec-border) !important; --mat-toolbar-container-background-color: var(--satec-dark); --mat-toolbar-container-text-color: var(--satec-white); } /* Texto e iconos menú */ .tb-site-sidenav tb-side-menu, .tb-site-sidenav tb-side-menu *, .tb-site-sidenav tb-user-menu, .tb-site-sidenav tb-user-menu * { color: var(--satec-white); } /* ========================================================= BARRA SUPERIOR ========================================================= */ .tb-primary-toolbar { background: var(--satec-dark-2) !important; color: var(--satec-white) !important; border-bottom-color: rgba(0,0,0,0.20) !important; --mat-toolbar-container-background-color: var(--satec-dark-2); --mat-toolbar-container-text-color: var(--satec-white); } .tb-primary-toolbar mat-icon, .tb-primary-toolbar button { color: var(--satec-white) !important; } /* ========================================================= ACENTOS SATEC ========================================================= */ .mat-mdc-unelevated-button.mat-accent, .mat-mdc-raised-button.mat-accent, .mat-mdc-button.mat-accent { --mdc-filled-button-container-color: var(--satec-orange); --mdc-filled-button-label-text-color: #FFFFFF; } /* Progress bars */ mat-progress-bar { --mdc-linear-progress-active-indicator-color: var(--satec-orange) !important; } /* ========================================================= FONDO GENERAL ========================================================= */ .tb-main-content { background: var(--satec-bg) !important; } /* ========================================================= SCROLLBAR SATEC ========================================================= */ ::-webkit-scrollbar-thumb { background: rgba(241,109,29,0.45) !important; } ::-webkit-scrollbar-thumb:hover { background: rgba(241,109,29,0.75) !important; } /* ========================================================= SATEC - ACENTOS GENERALES V2 ========================================================= */ /* Botones principales Angular Material */ .mat-mdc-raised-button.mat-primary, .mat-mdc-unelevated-button.mat-primary { --mdc-protected-button-container-color: #F16D1D !important; --mdc-filled-button-container-color: #F16D1D !important; --mdc-protected-button-label-text-color: #FFFFFF !important; --mdc-filled-button-label-text-color: #FFFFFF !important; background-color: #F16D1D !important; color: #FFFFFF !important; } /* Botones de texto / outlined primary */ .mat-mdc-button.mat-primary, .mat-mdc-outlined-button.mat-primary { --mdc-text-button-label-text-color: #F16D1D !important; --mdc-outlined-button-label-text-color: #F16D1D !important; color: #F16D1D !important; } /* FAB y botones flotantes */ .mat-mdc-fab.mat-primary, .mat-mdc-mini-fab.mat-primary { --mdc-fab-container-color: #F16D1D !important; background-color: #F16D1D !important; color: #FFFFFF !important; } /* Links de la aplicación */ .tb-main-content a:not(.mat-mdc-button):not(.mat-mdc-raised-button) { color: #D85D14; } /* Menú lateral: hover */ .tb-site-sidenav a:hover { background-color: rgba(241, 109, 29, 0.10) !important; } /* Menú lateral: elemento activo */ .tb-site-sidenav a.active, .tb-site-sidenav .active > a, .tb-site-sidenav .mat-mdc-list-item.mdc-list-item--activated { background-color: rgba(241, 109, 29, 0.18) !important; box-shadow: inset 4px 0 0 #F16D1D !important; } /* Icono/texto activo */ .tb-site-sidenav a.active *, .tb-site-sidenav .active > a *, .tb-site-sidenav .mdc-list-item--activated * { color: #FFFFFF !important; } /* Checkboxes / radios / switches */ .mat-mdc-checkbox.mat-primary, .mat-mdc-radio-button.mat-primary, .mat-mdc-slide-toggle.mat-primary { --mdc-checkbox-selected-icon-color: #F16D1D; --mdc-checkbox-selected-hover-icon-color: #F16D1D; --mdc-radio-selected-icon-color: #F16D1D; --mdc-switch-selected-track-color: #F16D1D; } /* Spinner y progress */ .mat-mdc-progress-spinner { --mdc-circular-progress-active-indicator-color: #F16D1D !important; } .mat-mdc-progress-bar { --mdc-linear-progress-active-indicator-color: #F16D1D !important; }