/* ============================================================ Flux brand — ThingsBoard 4.x override Served via Cloudflare Worker, injected into as Base: #452774 ============================================================ */ :root { --flux-purple: #452774; --flux-purple-dark: #371F5C; --flux-purple-light: #5E3A9C; --flux-purple-tint: rgba(69, 39, 116, 0.08); --flux-on-purple: #ffffff; } /* ============================================================ Toolbar ============================================================ */ .tb-default .mat-toolbar.mat-primary { --mat-toolbar-container-background-color: var(--flux-purple); --mat-toolbar-container-text-color: var(--flux-on-purple); } /* Hide the "Star us on GitHub" badge in the toolbar. !important required because TB sets a Tailwind `lt-md:!hidden` utility on the host element. */ .tb-default tb-github-badge { display: none !important; } /* ============================================================ Side navigation ============================================================ */ .tb-default .tb-side-menu .mat-mdc-list-item.tb-active, .tb-default .tb-side-menu .mat-mdc-list-item.active { --mdc-list-list-item-label-text-color: var(--flux-purple); --mdc-list-list-item-leading-icon-color: var(--flux-purple); background-color: var(--flux-purple-tint); border-left: 3px solid var(--flux-purple); } /* ============================================================ Buttons — filled (raised / flat / fab) White text on purple ============================================================ */ .tb-default .mat-mdc-raised-button.mat-primary, .tb-default .mat-mdc-unelevated-button.mat-primary, .tb-default .mat-mdc-fab.mat-primary, .tb-default .mat-mdc-mini-fab.mat-primary { --mdc-protected-button-container-color: var(--flux-purple); --mdc-filled-button-container-color: var(--flux-purple); --mdc-fab-container-color: var(--flux-purple); --mdc-protected-button-label-text-color: var(--flux-on-purple); --mdc-filled-button-label-text-color: var(--flux-on-purple); --mat-fab-foreground-color: var(--flux-on-purple); } /* ============================================================ Buttons — text / outlined / icon Purple text on transparent ============================================================ */ .tb-default .mat-mdc-button.mat-primary, .tb-default .mat-mdc-outlined-button.mat-primary, .tb-default .mat-mdc-icon-button.mat-primary { --mdc-text-button-label-text-color: var(--flux-purple); --mdc-outlined-button-label-text-color: var(--flux-purple); --mdc-outlined-button-outline-color: var(--flux-purple); --mat-icon-button-state-layer-color: var(--flux-purple); } /* ============================================================ Form fields — focused label + underline + outline ============================================================ */ .tb-default .mat-mdc-form-field.mat-focused.mat-primary { --mdc-filled-text-field-focus-active-indicator-color: var(--flux-purple); --mdc-filled-text-field-focus-label-text-color: var(--flux-purple); --mdc-outlined-text-field-focus-outline-color: var(--flux-purple); --mdc-outlined-text-field-focus-label-text-color: var(--flux-purple); --mat-form-field-focus-select-arrow-color: var(--flux-purple); } /* ============================================================ Checkboxes / radios / slide toggles ============================================================ */ .tb-default .mat-mdc-checkbox.mat-primary { --mdc-checkbox-selected-icon-color: var(--flux-purple); --mdc-checkbox-selected-focus-icon-color: var(--flux-purple-dark); --mdc-checkbox-selected-hover-icon-color: var(--flux-purple-light); --mdc-checkbox-selected-pressed-icon-color: var(--flux-purple-dark); } .tb-default .mat-mdc-radio-button.mat-primary { --mdc-radio-selected-focus-icon-color: var(--flux-purple); --mdc-radio-selected-hover-icon-color: var(--flux-purple); --mdc-radio-selected-icon-color: var(--flux-purple); --mdc-radio-selected-pressed-icon-color: var(--flux-purple); } .tb-default .mat-mdc-slide-toggle.mat-primary { --mdc-switch-selected-track-color: var(--flux-purple-light); --mdc-switch-selected-handle-color: var(--flux-purple); --mdc-switch-selected-focus-track-color: var(--flux-purple-light); --mdc-switch-selected-hover-track-color: var(--flux-purple-light); --mdc-switch-selected-pressed-track-color: var(--flux-purple-light); --mdc-switch-selected-focus-handle-color: var(--flux-purple-dark); --mdc-switch-selected-hover-handle-color: var(--flux-purple-dark); --mdc-switch-selected-pressed-handle-color: var(--flux-purple-dark); } /* ============================================================ Tabs ============================================================ */ .tb-default .mat-mdc-tab-group.mat-primary, .tb-default .mat-mdc-tab-nav-bar.mat-primary { --mdc-tab-indicator-active-indicator-color: var(--flux-purple); --mat-tab-header-active-label-text-color: var(--flux-purple); --mat-tab-header-active-ripple-color: var(--flux-purple); --mat-tab-header-inactive-ripple-color: var(--flux-purple); --mat-tab-header-active-focus-label-text-color: var(--flux-purple); --mat-tab-header-active-hover-label-text-color: var(--flux-purple); } /* ============================================================ Progress indicators ============================================================ */ .tb-default .mat-mdc-progress-bar.mat-primary { --mdc-linear-progress-active-indicator-color: var(--flux-purple); } .tb-default .mat-mdc-progress-spinner.mat-primary { --mdc-circular-progress-active-indicator-color: var(--flux-purple); } /* ============================================================ Links ============================================================ */ .tb-default a:not(.mat-mdc-button-base) { color: var(--flux-purple); } .tb-default a:not(.mat-mdc-button-base):hover { color: var(--flux-purple-light); } /* ============================================================ Login page ============================================================ */ .tb-default .tb-login-content .mat-mdc-raised-button.mat-primary { background-color: var(--flux-purple); } /* ============================================================ Pre-Angular loading splash ============================================================ */ .tb-default .tb-global-loading-spinner { border-top-color: var(--flux-purple) !important; }