/*
DPEMS · Lớp phủ giao diện cho ThingsBoard CE
Hạng mục B01b trong docs/12_Roadmap-Platform-V1.0.md
ThingsBoard CE KHÔNG có tính năng White Labeling (đó là bản PE), và khung giao diện
nằm trong bundle Angular đã biên dịch bên trong JAR. Cách duy nhất không fork: chèn
file CSS này vào cuối bằng Nginx sub_filter — xem deploy/nginx/dpems-theme.conf.
─────────────────────────────────────────────────────────────────────────────
VÌ SAO MỌI QUY TẮC ĐỀU CÓ !important — KHÔNG PHẢI LƯỜI
─────────────────────────────────────────────────────────────────────────────
Style của ThingsBoard dùng emulated encapsulation của Angular. Quy tắc thật trong
bundle trông như thế này (đã đo từ chính bản 4.2.1.1 đang chạy):
[_nghost-%COMP%] mat-sidenav.tb-site-sidenav[_ngcontent-%COMP%]
.tb-nav-header[_ngcontent-%COMP%] .tb-nav-header-toolbar[_ngcontent-%COMP%]
> div[_ngcontent-%COMP%] { height: 64px }
Chuỗi chọn đó có 4 lớp + 5 thuộc tính. File CSS ngoài KHÔNG có thuộc tính
`_ngcontent-*` (chúng do trình biên dịch sinh kèm hash, đổi sau mỗi lần nâng cấp)
nên không thể đấu độ ưu tiên bằng cách viết selector dài hơn — cách đó vừa mong
manh vừa vỡ khi nâng cấp. `!important` là lối duy nhất bền vững.
─────────────────────────────────────────────────────────────────────────────
CHỈ NHẮM VÀO TÊN LỚP ỔN ĐỊNH
─────────────────────────────────────────────────────────────────────────────
`tb-nav-header-toolbar`, `tb-logo-title`, `tb-primary-toolbar`, `mat-toolbar-tools`
là tên lớp NGỮ NGHĨA do ThingsBoard và Angular Material đặt, không bị minify.
TUYỆT ĐỐI KHÔNG nhắm vào tên lớp băm (`_ngcontent-ng-c123456789`, `ng-tns-c…`) —
chúng đổi sau mỗi lần build.
Hỏng an toàn: tắt file này thì giao diện quay về mặc định ThingsBoard, vẫn dùng
được bình thường. Không có phần nào của DPEMS phụ thuộc cứng vào file này.
*/
:root {
/* ── Chiều cao logo trên header ──────────────────────────────────────────
Mặc định ThingsBoard: 36px trong khối chứa cao 64px — logo trông nhỏ và
lọt thỏm, thừa 14px trống mỗi bên.
48px chừa 8px trên/dưới: đủ thoáng để không chạm mép, mà logo to hơn 33%.
TRẦN CỨNG LÀ 64px và không được vượt: quy tắc gốc có `max-height: 100%`,
đặt cao hơn khối chứa thì trình duyệt tự ép nhỏ lại — cài đặt sẽ không có
tác dụng và trông như file CSS không được nạp. Muốn logo lớn hơn 64px thì
BẮT BUỘC phải tăng chiều cao header (xem mục cuối file). */
--dpems-logo-height: 48px;
}
/* ── Logo trên header ────────────────────────────────────────────────────────
Quy tắc gốc đo từ bản 4.2.1.1 đang chạy:
width:auto; max-width:100%; height:36px; max-height:100%; margin:auto
CHỈ đổi `height`. Ba thuộc tính kia phải giữ nguyên và đều có lý do:
· `width:auto` giữ đúng tỷ lệ logo — đặt width cứng là bóp méo
· `margin:auto` giữ logo căn giữa khối chứa
· `max-width:100%` chặn logo tràn ngang khi thu hẹp cửa sổ
*/
.tb-logo-title {
height: var(--dpems-logo-height) !important;
}
/*
─────────────────────────────────────────────────────────────────────────────
KHÔNG ĐỔI CHIỀU CAO HEADER — CÓ Ý
─────────────────────────────────────────────────────────────────────────────
Giữ nguyên 64px mặc định của ThingsBoard CE. Đổi chiều cao header đòi phải sửa
đồng thời BA chỗ, nếu sót một chỗ thì hai nửa header lệch nhau thành bậc thang:
.tb-nav-header-toolbar { min-height: 64px } khối logo bên trái
.tb-nav-header-toolbar > div { height: 64px } (gốc dùng height:inherit)
.tb-primary-toolbar .mat-toolbar-tools { height: 64px } thanh công cụ bên phải
Và `.mat-toolbar-tools` là lớp dùng chung cho MỌI thanh công cụ Angular Material
trong ứng dụng, nên bắt buộc phải giới hạn trong `.tb-primary-toolbar` — sửa ở
phạm vi toàn cục sẽ đội chiều cao cả hộp thoại lẫn thanh widget.
Ba dòng trên đã đo và kiểm chứng, để sẵn ở đây; cần thì bỏ chú thích và đặt cùng
một biến `--dpems-header-height`.
*/
/* ===== BEGIN AUTO · sinh bởi scripts/build_theme_colors.py — ĐỪNG SỬA TAY ===== */
/*
Nguồn: https://dpems.dangphongetc.com/styles-H63CV44O.css
Sinh lại bằng: python3 scripts/build_theme_colors.py
104 quy tắc · 343 khai báo — chép từ bundle thật, không viết tay.
Ánh xạ (kèm mọi dạng rgba() của các màu này — ripple, nhãn focus, track):
#305680 → #032278
#527dad → #0F3CBB
#dd2c00 → #0C3B8D
#f4511e → #1952B5
#ff5722 → #1155CC
#ff8a65 → #3276EE
primary = nền thẻ đăng nhập · thanh tiêu đề · tab đang chọn · ô nhập đang focus
accent = nút Login · checkbox đã chọn · chỉ báo focus · thanh tiến trình
SAU KHI NÂNG CẤP THINGSBOARD: chạy lại script này. Bundle có hash nội dung nên
tên file đổi, và danh sách quy tắc có thể đổi theo — không chạy lại thì màu cũ
quay lại ở đúng những chỗ ThingsBoard vừa sửa, HỎNG LẶNG LẼ.
*/
.tb-default {
--mat-option-selected-state-label-text-color: #032278 !important;
--mat-full-pseudo-checkbox-selected-icon-color: #1155CC !important;
--mat-minimal-pseudo-checkbox-selected-checkmark-color: #1155CC !important;
--mdc-filled-text-field-caret-color: #032278 !important;
--mdc-filled-text-field-focus-active-indicator-color: #032278 !important;
--mdc-filled-text-field-focus-label-text-color: rgba(3, 34, 120, .87) !important;
--mdc-outlined-text-field-caret-color: #032278 !important;
--mdc-outlined-text-field-focus-outline-color: #032278 !important;
--mdc-outlined-text-field-focus-label-text-color: rgba(3, 34, 120, .87) !important;
--mat-form-field-focus-select-arrow-color: rgba(3, 34, 120, .87) !important;
--mat-select-focused-arrow-color: rgba(3, 34, 120, .87) !important;
--mdc-switch-selected-focus-state-layer-color: #0F3CBB !important;
--mdc-switch-selected-handle-color: #0F3CBB !important;
--mdc-switch-selected-hover-state-layer-color: #0F3CBB !important;
--mdc-switch-selected-pressed-state-layer-color: #0F3CBB !important;
--mdc-slider-handle-color: #032278 !important;
--mdc-slider-focus-handle-color: #032278 !important;
--mdc-slider-hover-handle-color: #032278 !important;
--mdc-slider-active-track-color: #032278 !important;
--mdc-slider-inactive-track-color: #032278 !important;
--mdc-slider-with-tick-marks-inactive-container-color: #032278 !important;
--mat-slider-ripple-color: #032278 !important;
--mat-slider-hover-state-layer-color: rgba(3, 34, 120, .05) !important;
--mat-slider-focus-state-layer-color: rgba(3, 34, 120, .2) !important;
--mdc-checkbox-selected-focus-icon-color: #1155CC !important;
--mdc-checkbox-selected-hover-icon-color: #1155CC !important;
--mdc-checkbox-selected-icon-color: #1155CC !important;
--mdc-checkbox-selected-pressed-icon-color: #1155CC !important;
--mdc-checkbox-selected-focus-state-layer-color: #1155CC !important;
--mdc-checkbox-selected-hover-state-layer-color: #1155CC !important;
--mdc-checkbox-selected-pressed-state-layer-color: #1155CC !important;
--mat-snack-bar-button-color: #1155CC !important;
--mdc-circular-progress-active-indicator-color: #032278 !important;
--mat-badge-background-color: #032278 !important;
--mat-datepicker-calendar-date-selected-state-background-color: #032278 !important;
--mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(3, 34, 120, .4) !important;
--mat-datepicker-calendar-date-focus-state-background-color: rgba(3, 34, 120, .3) !important;
--mat-datepicker-calendar-date-hover-state-background-color: rgba(3, 34, 120, .3) !important;
--mat-datepicker-toggle-active-state-icon-color: #032278 !important;
--mat-datepicker-calendar-date-in-range-state-background-color: rgba(3, 34, 120, .2) !important;
--mat-stepper-header-selected-state-icon-background-color: #032278 !important;
--mat-stepper-header-done-state-icon-background-color: #032278 !important;
--mat-stepper-header-edit-state-icon-background-color: #032278 !important;
}
.tb-default .mat-accent {
--mat-option-selected-state-label-text-color: #1155CC !important;
}
.tb-default .mat-primary {
--mat-full-pseudo-checkbox-selected-icon-color: #032278 !important;
--mat-minimal-pseudo-checkbox-selected-checkmark-color: #032278 !important;
}
.tb-default .mat-accent {
--mat-full-pseudo-checkbox-selected-icon-color: #1155CC !important;
--mat-minimal-pseudo-checkbox-selected-checkmark-color: #1155CC !important;
}
.tb-default .mat-mdc-progress-bar {
--mdc-linear-progress-active-indicator-color: #032278 !important;
--mdc-linear-progress-track-color: rgba(3, 34, 120, .25) !important;
}
.tb-default .mat-mdc-progress-bar.mat-accent {
--mdc-linear-progress-active-indicator-color: #1155CC !important;
--mdc-linear-progress-track-color: rgba(17, 85, 204, .25) !important;
}
.tb-default .mat-mdc-form-field.mat-accent {
--mdc-filled-text-field-caret-color: #1155CC !important;
--mdc-filled-text-field-focus-active-indicator-color: #1155CC !important;
--mdc-filled-text-field-focus-label-text-color: rgba(17, 85, 204, .87) !important;
--mdc-outlined-text-field-caret-color: #1155CC !important;
--mdc-outlined-text-field-focus-outline-color: #1155CC !important;
--mdc-outlined-text-field-focus-label-text-color: rgba(17, 85, 204, .87) !important;
--mat-form-field-focus-select-arrow-color: rgba(17, 85, 204, .87) !important;
}
.tb-default .mat-mdc-form-field.mat-accent {
--mat-select-focused-arrow-color: rgba(17, 85, 204, .87) !important;
}
.tb-default .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.tb-default .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
--mdc-chip-elevated-container-color: #032278 !important;
--mdc-chip-elevated-selected-container-color: #032278 !important;
--mdc-chip-elevated-disabled-container-color: #032278 !important;
--mdc-chip-flat-disabled-selected-container-color: #032278 !important;
}
.tb-default .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.tb-default .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
--mdc-chip-elevated-container-color: #1155CC !important;
--mdc-chip-elevated-selected-container-color: #1155CC !important;
--mdc-chip-elevated-disabled-container-color: #1155CC !important;
--mdc-chip-flat-disabled-selected-container-color: #1155CC !important;
}
.tb-default .mat-mdc-slide-toggle.mat-accent {
--mdc-switch-selected-focus-state-layer-color: #1952B5 !important;
--mdc-switch-selected-handle-color: #1952B5 !important;
--mdc-switch-selected-hover-state-layer-color: #1952B5 !important;
--mdc-switch-selected-pressed-state-layer-color: #1952B5 !important;
--mdc-switch-selected-focus-track-color: #3276EE !important;
--mdc-switch-selected-hover-track-color: #3276EE !important;
--mdc-switch-selected-pressed-track-color: #3276EE !important;
--mdc-switch-selected-track-color: #3276EE !important;
}
.tb-default .mat-mdc-radio-button.mat-primary {
--mdc-radio-selected-focus-icon-color: #032278 !important;
--mdc-radio-selected-hover-icon-color: #032278 !important;
--mdc-radio-selected-icon-color: #032278 !important;
--mdc-radio-selected-pressed-icon-color: #032278 !important;
--mat-radio-checked-ripple-color: #032278 !important;
}
.tb-default .mat-mdc-radio-button.mat-accent {
--mdc-radio-selected-focus-icon-color: #1155CC !important;
--mdc-radio-selected-hover-icon-color: #1155CC !important;
--mdc-radio-selected-icon-color: #1155CC !important;
--mdc-radio-selected-pressed-icon-color: #1155CC !important;
--mat-radio-checked-ripple-color: #1155CC !important;
}
.tb-default .mat-accent {
--mdc-slider-handle-color: #1155CC !important;
--mdc-slider-focus-handle-color: #1155CC !important;
--mdc-slider-hover-handle-color: #1155CC !important;
--mdc-slider-active-track-color: #1155CC !important;
--mdc-slider-inactive-track-color: #1155CC !important;
--mdc-slider-with-tick-marks-inactive-container-color: #1155CC !important;
--mat-slider-ripple-color: #1155CC !important;
--mat-slider-hover-state-layer-color: rgba(17, 85, 204, .05) !important;
--mat-slider-focus-state-layer-color: rgba(17, 85, 204, .2) !important;
}
.tb-default .mdc-list-item__start,
.tb-default .mdc-list-item__end {
--mdc-radio-selected-focus-icon-color: #032278 !important;
--mdc-radio-selected-hover-icon-color: #032278 !important;
--mdc-radio-selected-icon-color: #032278 !important;
--mdc-radio-selected-pressed-icon-color: #032278 !important;
}
.tb-default .mat-accent .mdc-list-item__start,
.tb-default .mat-accent .mdc-list-item__end {
--mdc-radio-selected-focus-icon-color: #1155CC !important;
--mdc-radio-selected-hover-icon-color: #1155CC !important;
--mdc-radio-selected-icon-color: #1155CC !important;
--mdc-radio-selected-pressed-icon-color: #1155CC !important;
}
.tb-default .mat-mdc-list-option {
--mdc-checkbox-selected-focus-icon-color: #032278 !important;
--mdc-checkbox-selected-hover-icon-color: #032278 !important;
--mdc-checkbox-selected-icon-color: #032278 !important;
--mdc-checkbox-selected-pressed-icon-color: #032278 !important;
--mdc-checkbox-selected-focus-state-layer-color: #032278 !important;
--mdc-checkbox-selected-hover-state-layer-color: #032278 !important;
--mdc-checkbox-selected-pressed-state-layer-color: #032278 !important;
}
.tb-default .mat-mdc-list-option.mat-accent {
--mdc-checkbox-selected-focus-icon-color: #1155CC !important;
--mdc-checkbox-selected-hover-icon-color: #1155CC !important;
--mdc-checkbox-selected-icon-color: #1155CC !important;
--mdc-checkbox-selected-pressed-icon-color: #1155CC !important;
--mdc-checkbox-selected-focus-state-layer-color: #1155CC !important;
--mdc-checkbox-selected-hover-state-layer-color: #1155CC !important;
--mdc-checkbox-selected-pressed-state-layer-color: #1155CC !important;
}
.tb-default .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.tb-default .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.tb-default .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.tb-default .mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
color: #032278 !important;
}
.tb-default .mat-mdc-tab-group,
.tb-default .mat-mdc-tab-nav-bar {
--mdc-tab-indicator-active-indicator-color: #032278 !important;
--mat-tab-header-active-label-text-color: #032278 !important;
--mat-tab-header-active-ripple-color: #032278 !important;
--mat-tab-header-inactive-ripple-color: #032278 !important;
--mat-tab-header-active-focus-label-text-color: #032278 !important;
--mat-tab-header-active-hover-label-text-color: #032278 !important;
--mat-tab-header-active-focus-indicator-color: #032278 !important;
--mat-tab-header-active-hover-indicator-color: #032278 !important;
}
.tb-default .mat-mdc-tab-group.mat-accent,
.tb-default .mat-mdc-tab-nav-bar.mat-accent {
--mdc-tab-indicator-active-indicator-color: #1155CC !important;
--mat-tab-header-active-label-text-color: #1155CC !important;
--mat-tab-header-active-ripple-color: #1155CC !important;
--mat-tab-header-inactive-ripple-color: #1155CC !important;
--mat-tab-header-active-focus-label-text-color: #1155CC !important;
--mat-tab-header-active-hover-label-text-color: #1155CC !important;
--mat-tab-header-active-focus-indicator-color: #1155CC !important;
--mat-tab-header-active-hover-indicator-color: #1155CC !important;
}
.tb-default .mat-mdc-tab-group.mat-background-primary,
.tb-default .mat-mdc-tab-nav-bar.mat-background-primary {
--mat-tab-header-with-background-background-color: #032278 !important;
}
.tb-default .mat-mdc-tab-group.mat-background-accent,
.tb-default .mat-mdc-tab-nav-bar.mat-background-accent {
--mat-tab-header-with-background-background-color: #1155CC !important;
}
.tb-default .mat-mdc-checkbox.mat-primary {
--mdc-checkbox-selected-focus-icon-color: #032278 !important;
--mdc-checkbox-selected-hover-icon-color: #032278 !important;
--mdc-checkbox-selected-icon-color: #032278 !important;
--mdc-checkbox-selected-pressed-icon-color: #032278 !important;
--mdc-checkbox-selected-focus-state-layer-color: #032278 !important;
--mdc-checkbox-selected-hover-state-layer-color: #032278 !important;
--mdc-checkbox-selected-pressed-state-layer-color: #032278 !important;
}
.tb-default .mat-mdc-button.mat-primary {
--mdc-text-button-label-text-color: #032278 !important;
--mat-text-button-state-layer-color: #032278 !important;
--mat-text-button-ripple-color: rgba(3, 34, 120, .1) !important;
}
.tb-default .mat-mdc-button.mat-accent {
--mdc-text-button-label-text-color: #1155CC !important;
--mat-text-button-state-layer-color: #1155CC !important;
--mat-text-button-ripple-color: rgba(17, 85, 204, .1) !important;
}
.tb-default .mat-mdc-unelevated-button.mat-primary {
--mdc-filled-button-container-color: #032278 !important;
}
.tb-default .mat-mdc-unelevated-button.mat-accent {
--mdc-filled-button-container-color: #1155CC !important;
}
.tb-default .mat-mdc-raised-button.mat-primary {
--mdc-protected-button-container-color: #032278 !important;
}
.tb-default .mat-mdc-raised-button.mat-accent {
--mdc-protected-button-container-color: #1155CC !important;
}
.tb-default .mat-mdc-outlined-button.mat-primary {
--mdc-outlined-button-label-text-color: #032278 !important;
--mat-outlined-button-state-layer-color: #032278 !important;
--mat-outlined-button-ripple-color: rgba(3, 34, 120, .1) !important;
}
.tb-default .mat-mdc-outlined-button.mat-accent {
--mdc-outlined-button-label-text-color: #1155CC !important;
--mat-outlined-button-state-layer-color: #1155CC !important;
--mat-outlined-button-ripple-color: rgba(17, 85, 204, .1) !important;
}
.tb-default .mat-mdc-icon-button.mat-primary {
--mdc-icon-button-icon-color: #032278 !important;
--mat-icon-button-state-layer-color: #032278 !important;
--mat-icon-button-ripple-color: rgba(3, 34, 120, .1) !important;
}
.tb-default .mat-mdc-icon-button.mat-accent {
--mdc-icon-button-icon-color: #1155CC !important;
--mat-icon-button-state-layer-color: #1155CC !important;
--mat-icon-button-ripple-color: rgba(17, 85, 204, .1) !important;
}
.tb-default .mat-mdc-fab.mat-primary {
--mdc-fab-container-color: #032278 !important;
}
.tb-default .mat-mdc-fab.mat-accent {
--mdc-fab-container-color: #1155CC !important;
}
.tb-default .mat-mdc-mini-fab.mat-primary {
--mdc-fab-small-container-color: #032278 !important;
}
.tb-default .mat-mdc-mini-fab.mat-accent {
--mdc-fab-small-container-color: #1155CC !important;
}
.tb-default .mat-accent {
--mdc-circular-progress-active-indicator-color: #1155CC !important;
}
.tb-default .mat-badge-accent {
--mat-badge-background-color: #1155CC !important;
}
.tb-default .mat-datepicker-content.mat-accent {
--mat-datepicker-calendar-date-selected-state-background-color: #1155CC !important;
--mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(17, 85, 204, .4) !important;
--mat-datepicker-calendar-date-focus-state-background-color: rgba(17, 85, 204, .3) !important;
--mat-datepicker-calendar-date-hover-state-background-color: rgba(17, 85, 204, .3) !important;
--mat-datepicker-calendar-date-in-range-state-background-color: rgba(17, 85, 204, .2) !important;
}
.tb-default .mat-datepicker-toggle-active.mat-accent {
--mat-datepicker-toggle-active-state-icon-color: #1155CC !important;
}
.tb-default .mat-icon.mat-primary {
--mat-icon-color: #032278 !important;
}
.tb-default .mat-icon.mat-accent {
--mat-icon-color: #1155CC !important;
}
.tb-default .mat-step-header.mat-accent {
--mat-stepper-header-selected-state-icon-background-color: #1155CC !important;
--mat-stepper-header-done-state-icon-background-color: #1155CC !important;
--mat-stepper-header-edit-state-icon-background-color: #1155CC !important;
}
.tb-default .mat-toolbar.mat-primary {
--mat-toolbar-container-background-color: #032278 !important;
}
.tb-default .mat-toolbar.mat-accent {
--mat-toolbar-container-background-color: #1155CC !important;
}
.tb-default .mat-datetimepicker-calendar-header,
.tb-default .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected {
background-color: #032278 !important;
}
.tb-default .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-disabled>.mat-datetimepicker-calendar-body-selected {
background-color: #03227866 !important;
}
.tb-default .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-today:not(.mat-datetimepicker-calendar-body-selected) {
border-color: #032278 !important;
}
.tb-default .mat-datetimepicker-clock-center,
.tb-default .mat-datetimepicker-clock-hand {
background-color: #032278 !important;
}
.tb-default .mat-datetimepicker-clock-hand:before {
background-color: #032278 !important;
}
.tb-default .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected {
background-color: hsl(from #032278 h s calc(l + 5%)) !important;
}
.tb-default mat-fab-toolbar.mat-primary .mat-fab-toolbar-background {
background: #032278 !important;
}
.tb-default mat-fab-toolbar.mat-accent .mat-fab-toolbar-background {
background: #1155CC !important;
}
.tb-default div.tb-dashboard-page.mobile-app mat-fab-toolbar mat-toolbar.mat-primary button.mat-mdc-icon-button .mat-icon {
color: #032278 !important;
}
.tb-default div.tb-dashboard-page.mobile-app mat-fab-toolbar .mat-mdc-fab.mat-primary {
color: #032278 !important;
}
.tb-default .mat-mdc-form-field.mat-form-field-appearance-fill .mdc-text-field--filled:before,
.tb-default .mat-mdc-form-field.mat-form-field-appearance-fill .mat-mdc-form-field-focus-overlay:before {
background-color: #032278 !important;
}
.tb-dark {
--mat-full-pseudo-checkbox-selected-icon-color: #1155CC !important;
--mat-full-pseudo-checkbox-selected-checkmark-color: #032278 !important;
--mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #032278 !important;
--mat-minimal-pseudo-checkbox-selected-checkmark-color: #1155CC !important;
--mat-app-background-color: #032278 !important;
--mdc-elevated-card-container-color: #032278 !important;
--mdc-outlined-card-container-color: #032278 !important;
--mat-select-panel-background-color: #032278 !important;
--mat-autocomplete-background-color: #032278 !important;
--mdc-dialog-container-color: #032278 !important;
--mdc-switch-selected-focus-track-color: #0F3CBB !important;
--mdc-switch-selected-hover-track-color: #0F3CBB !important;
--mdc-switch-selected-pressed-track-color: #0F3CBB !important;
--mdc-switch-selected-track-color: #0F3CBB !important;
--mat-menu-container-color: #032278 !important;
--mat-paginator-container-background-color: #032278 !important;
--mdc-checkbox-selected-focus-icon-color: #1155CC !important;
--mdc-checkbox-selected-hover-icon-color: #1155CC !important;
--mdc-checkbox-selected-icon-color: #1155CC !important;
--mdc-checkbox-selected-pressed-icon-color: #1155CC !important;
--mdc-checkbox-selected-focus-state-layer-color: #1155CC !important;
--mdc-checkbox-selected-hover-state-layer-color: #1155CC !important;
--mdc-checkbox-selected-pressed-state-layer-color: #1155CC !important;
--mdc-filled-button-container-color: #032278 !important;
--mdc-protected-button-container-color: #032278 !important;
--mdc-fab-container-color: #032278 !important;
--mdc-fab-small-container-color: #032278 !important;
--mdc-snackbar-supporting-text-color: rgba(3, 34, 120, .87) !important;
--mat-table-background-color: #032278 !important;
--mat-bottom-sheet-container-background-color: #032278 !important;
--mat-legacy-button-toggle-disabled-selected-state-background-color: #032278 !important;
--mat-standard-button-toggle-background-color: #032278 !important;
--mat-standard-button-toggle-disabled-state-background-color: #032278 !important;
--mat-standard-button-toggle-disabled-selected-state-background-color: #032278 !important;
--mat-datepicker-calendar-container-background-color: #032278 !important;
--mat-expansion-container-background-color: #032278 !important;
--mat-sidenav-container-background-color: #032278 !important;
--mat-sidenav-content-background-color: #032278 !important;
--mat-stepper-container-color: #032278 !important;
--mat-tree-container-background-color: #032278 !important;
}
.tb-dark .mat-accent {
--mat-option-selected-state-label-text-color: #1155CC !important;
}
.tb-dark .mat-primary {
--mat-full-pseudo-checkbox-selected-checkmark-color: #032278 !important;
--mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #032278 !important;
}
.tb-dark .mat-accent {
--mat-full-pseudo-checkbox-selected-icon-color: #1155CC !important;
--mat-full-pseudo-checkbox-selected-checkmark-color: #032278 !important;
--mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #032278 !important;
--mat-minimal-pseudo-checkbox-selected-checkmark-color: #1155CC !important;
}
.tb-dark .mat-warn {
--mat-full-pseudo-checkbox-selected-checkmark-color: #032278 !important;
--mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #032278 !important;
}
.tb-dark .mat-mdc-progress-bar.mat-accent {
--mdc-linear-progress-active-indicator-color: #1155CC !important;
--mdc-linear-progress-track-color: rgba(17, 85, 204, .25) !important;
}
.tb-dark .mat-mdc-form-field.mat-accent {
--mdc-filled-text-field-caret-color: #1155CC !important;
--mdc-filled-text-field-focus-active-indicator-color: #1155CC !important;
--mdc-filled-text-field-focus-label-text-color: rgba(17, 85, 204, .87) !important;
--mdc-outlined-text-field-caret-color: #1155CC !important;
--mdc-outlined-text-field-focus-outline-color: #1155CC !important;
--mdc-outlined-text-field-focus-label-text-color: rgba(17, 85, 204, .87) !important;
--mat-form-field-focus-select-arrow-color: rgba(17, 85, 204, .87) !important;
}
.tb-dark .mat-mdc-form-field.mat-accent {
--mat-select-panel-background-color: #032278 !important;
--mat-select-focused-arrow-color: rgba(17, 85, 204, .87) !important;
}
.tb-dark .mat-mdc-form-field.mat-warn {
--mat-select-panel-background-color: #032278 !important;
}
.tb-dark .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.tb-dark .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
--mdc-chip-elevated-container-color: #1155CC !important;
--mdc-chip-elevated-selected-container-color: #1155CC !important;
--mdc-chip-elevated-disabled-container-color: #1155CC !important;
--mdc-chip-flat-disabled-selected-container-color: #1155CC !important;
}
.tb-dark .mat-mdc-slide-toggle.mat-accent {
--mdc-switch-selected-focus-state-layer-color: #3276EE !important;
--mdc-switch-selected-handle-color: #3276EE !important;
--mdc-switch-selected-hover-state-layer-color: #3276EE !important;
--mdc-switch-selected-pressed-state-layer-color: #3276EE !important;
--mdc-switch-selected-focus-track-color: #1952B5 !important;
--mdc-switch-selected-hover-track-color: #1952B5 !important;
--mdc-switch-selected-pressed-track-color: #1952B5 !important;
--mdc-switch-selected-track-color: #1952B5 !important;
}
.tb-dark .mat-mdc-radio-button.mat-accent {
--mdc-radio-selected-focus-icon-color: #1155CC !important;
--mdc-radio-selected-hover-icon-color: #1155CC !important;
--mdc-radio-selected-icon-color: #1155CC !important;
--mdc-radio-selected-pressed-icon-color: #1155CC !important;
--mat-radio-checked-ripple-color: #1155CC !important;
}
.tb-dark .mat-accent {
--mdc-slider-handle-color: #1155CC !important;
--mdc-slider-focus-handle-color: #1155CC !important;
--mdc-slider-hover-handle-color: #1155CC !important;
--mdc-slider-active-track-color: #1155CC !important;
--mdc-slider-inactive-track-color: #1155CC !important;
--mdc-slider-with-tick-marks-inactive-container-color: #1155CC !important;
--mat-slider-ripple-color: #1155CC !important;
--mat-slider-hover-state-layer-color: rgba(17, 85, 204, .05) !important;
--mat-slider-focus-state-layer-color: rgba(17, 85, 204, .2) !important;
}
.tb-dark .mat-accent .mdc-list-item__start,
.tb-dark .mat-accent .mdc-list-item__end {
--mdc-radio-selected-focus-icon-color: #1155CC !important;
--mdc-radio-selected-hover-icon-color: #1155CC !important;
--mdc-radio-selected-icon-color: #1155CC !important;
--mdc-radio-selected-pressed-icon-color: #1155CC !important;
}
.tb-dark .mat-mdc-list-option.mat-accent {
--mdc-checkbox-selected-focus-icon-color: #1155CC !important;
--mdc-checkbox-selected-hover-icon-color: #1155CC !important;
--mdc-checkbox-selected-icon-color: #1155CC !important;
--mdc-checkbox-selected-pressed-icon-color: #1155CC !important;
--mdc-checkbox-selected-focus-state-layer-color: #1155CC !important;
--mdc-checkbox-selected-hover-state-layer-color: #1155CC !important;
--mdc-checkbox-selected-pressed-state-layer-color: #1155CC !important;
}
.tb-dark .mat-mdc-tab-group.mat-accent,
.tb-dark .mat-mdc-tab-nav-bar.mat-accent {
--mdc-tab-indicator-active-indicator-color: #1155CC !important;
--mat-tab-header-active-label-text-color: #1155CC !important;
--mat-tab-header-active-ripple-color: #1155CC !important;
--mat-tab-header-inactive-ripple-color: #1155CC !important;
--mat-tab-header-active-focus-label-text-color: #1155CC !important;
--mat-tab-header-active-hover-label-text-color: #1155CC !important;
--mat-tab-header-active-focus-indicator-color: #1155CC !important;
--mat-tab-header-active-hover-indicator-color: #1155CC !important;
}
.tb-dark .mat-mdc-tab-group.mat-background-accent,
.tb-dark .mat-mdc-tab-nav-bar.mat-background-accent {
--mat-tab-header-with-background-background-color: #1155CC !important;
}
.tb-dark .mat-mdc-button.mat-accent {
--mdc-text-button-label-text-color: #1155CC !important;
--mat-text-button-state-layer-color: #1155CC !important;
--mat-text-button-ripple-color: rgba(17, 85, 204, .1) !important;
}
.tb-dark .mat-mdc-unelevated-button.mat-accent {
--mdc-filled-button-container-color: #1155CC !important;
}
.tb-dark .mat-mdc-raised-button.mat-accent {
--mdc-protected-button-container-color: #1155CC !important;
}
.tb-dark .mat-mdc-outlined-button.mat-accent {
--mdc-outlined-button-label-text-color: #1155CC !important;
--mat-outlined-button-state-layer-color: #1155CC !important;
--mat-outlined-button-ripple-color: rgba(17, 85, 204, .1) !important;
}
.tb-dark .mat-mdc-icon-button.mat-accent {
--mdc-icon-button-icon-color: #1155CC !important;
--mat-icon-button-state-layer-color: #1155CC !important;
--mat-icon-button-ripple-color: rgba(17, 85, 204, .1) !important;
}
.tb-dark .mat-mdc-fab.mat-accent {
--mdc-fab-container-color: #1155CC !important;
}
.tb-dark .mat-mdc-mini-fab.mat-accent {
--mdc-fab-small-container-color: #1155CC !important;
}
.tb-dark .mat-accent {
--mdc-circular-progress-active-indicator-color: #1155CC !important;
}
.tb-dark .mat-badge-accent {
--mat-badge-background-color: #1155CC !important;
}
.tb-dark .mat-datepicker-content.mat-accent {
--mat-datepicker-calendar-date-selected-state-background-color: #1155CC !important;
--mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(17, 85, 204, .4) !important;
--mat-datepicker-calendar-date-focus-state-background-color: rgba(17, 85, 204, .3) !important;
--mat-datepicker-calendar-date-hover-state-background-color: rgba(17, 85, 204, .3) !important;
--mat-datepicker-calendar-date-in-range-state-background-color: rgba(17, 85, 204, .2) !important;
}
.tb-dark .mat-datepicker-toggle-active.mat-accent {
--mat-datepicker-toggle-active-state-icon-color: #1155CC !important;
}
.tb-dark .mat-icon.mat-accent {
--mat-icon-color: #1155CC !important;
}
.tb-dark .mat-step-header.mat-accent {
--mat-stepper-header-selected-state-icon-background-color: #1155CC !important;
--mat-stepper-header-done-state-icon-background-color: #1155CC !important;
--mat-stepper-header-edit-state-icon-background-color: #1155CC !important;
}
.tb-dark .mat-toolbar.mat-accent {
--mat-toolbar-container-background-color: #1155CC !important;
}
label.tb-title.tb-error {
color: #0C3B8D !important;
}
label.tb-title.tb-error.tb-required:after {
color: #0C3B8D !important;
}
.tb-prompt.required {
color: #0C3B8D !important;
}
.tb-error-message {
color: #0C3B8D !important;
}
.tb-default mat-label.tb-title.tb-error,
.tb-dark mat-label.tb-title.tb-error {
color: #0C3B8D !important;
}
.tb-default mat-label.tb-title.tb-error.tb-required:after,
.tb-dark mat-label.tb-title.tb-error.tb-required:after {
color: #0C3B8D !important;
}
.tb-default mat-icon.tb-error,
.tb-dark mat-icon.tb-error {
color: #0C3B8D !important;
}
.tb-default .tb-primary-background,
.tb-dark .tb-primary-background {
background-color: #032278 !important;
}
.tb-default .tb-no-data-bg:before,
.tb-dark .tb-no-data-bg:before {
background: #032278 !important;
}
.tb-default .tb-primary-fill:before,
.tb-dark .tb-primary-fill:before {
background: #032278 !important;
}
.tb-map-layout .tb-map.leaflet-touch .leaflet-bar a:not(.leaflet-disabled):hover,
.tb-map-layout .tb-map.leaflet-touch .leaflet-bar a:not(.leaflet-disabled).active {
color: var(--tb-map-control-active-color, #032278) !important;
}
.tb-map-layout .tb-map.leaflet-touch .leaflet-bar a.tb-control-button:not(.leaflet-disabled).active>div:not(.tb-control-text):not(.tb-close),
.tb-map-layout .tb-map.leaflet-touch .leaflet-bar a.tb-control-button:not(.leaflet-disabled):hover>div:not(.tb-control-text):not(.tb-close) {
background-color: var(--tb-map-control-active-color, #032278) !important;
}
.tb-map-layout .tb-map.leaflet-touch .leaflet-bar a.tb-control-button:not(.leaflet-disabled).active>div:not(.tb-control-text):not(.tb-close) svg,
.tb-map-layout .tb-map.leaflet-touch .leaflet-bar a.tb-control-button:not(.leaflet-disabled):hover>div:not(.tb-control-text):not(.tb-close) svg {
fill: var(--tb-map-control-active-color, #032278) !important;
}
.tb-map-layout .tb-map-sidebar .tb-layers .tb-layers-container .tb-layer-card input.tb-layer-button:checked+label.tb-layer-label,
.tb-map-layout .tb-map-sidebar .tb-groups .tb-layers-container .tb-layer-card input.tb-layer-button:checked+label.tb-layer-label {
border: 3px solid #032278 !important;
}
.tb-map-layout .tb-map-sidebar .tb-layers .tb-layers-container .tb-layer-card label.tb-layer-label:hover,
.tb-map-layout .tb-map-sidebar .tb-groups .tb-layers-container .tb-layer-card label.tb-layer-label:hover {
border: 3px solid #032278 !important;
}
/* ===== END AUTO ===== */
/* ─────────────────────────────────────────────────────────────────────────────
HUY HIỆU GITHUB CỦA THINGSBOARD → NHÃN DPEMS
Viết tay, nằm SAU khối AUTO nên `build_theme_colors.py` giữ nguyên khi sinh lại
(script chỉ thay phần giữa BEGIN AUTO … END AUTO).
─────────────────────────────────────────────────────────────────────────────
ThingsBoard CE gắn sẵn một huy hiệu ⭐ «Star 22.152» ở cuối thanh trên cùng bên
phải, link tới github.com/thingsboard/thingsboard. Component `tb-github-badge`,
chỉ hiện với TENANT_ADMIN và SYS_ADMIN — nên khách xem dashboard không thấy, còn
người quản trị thì thấy suốt. Trên một sản phẩm đã white-label thì đây là chỗ rò
thương hiệu rõ nhất còn lại.
PHÂN CÔNG GIỮA CSS VÀ sub_filter — cố ý, không phải làm hai nơi cho vui:
· sub_filter (dpems-whitelabel.conf) đổi ĐÍCH LINK và BIỂU TƯỢNG — hai chuỗi
hằng, mỗi chuỗi xuất hiện đúng 1 lần trong bundle nên khớp chính xác.
· CSS (khối này) đổi CHỮ và giấu SỐ ĐẾM SAO — vì số đếm là một *text node* do
Angular ghi lúc chạy (`H(f(9,1,p.githubStar))`), không phải phần tử, nên CSS
không chọn riêng nó được và sub_filter thì phải khớp vào tên biến đã rút gọn
— thứ ĐỔI SAU MỖI LẦN NÂNG CẤP ThingsBoard.
Mẹo dùng ở đây: đặt `font-size: 0` cho cả nhãn (nuốt cả chữ "Star" lẫn số đếm),
rồi vẽ lại chữ bằng `::before`. Không đụng tới tên biến rút gọn nào.
HỎNG AN TOÀN: nếu bản ThingsBoard sau đổi tên lớp `.button-label`, quy tắc này
không khớp và huy hiệu trở lại nguyên trạng — hiện lại chữ "Star" và số đếm chứ
không vỡ giao diện. Kiểm bằng mắt sau mỗi lần nâng cấp.
───────────────────────────────────────────────────────────────────────────── */
tb-github-badge .button-label {
font-size: 0 !important;
gap: 0 !important;
}
/* Vạch ngăn giữa chữ và số đếm — số đã bị nuốt nên vạch thành thừa. */
tb-github-badge .button-label mat-divider {
display: none !important;
}
/* Bo bieu tuong: nhan chu la du, va mot bieu tuong tia set canh chu "Platform" doc ra
nhu mot nut hanh dong chu khong phai nhan thuong hieu.
VAN GIU quy tac doi icon `mdi:github` -> `mdi:lightning-bolt` ben Nginx du o day da
an di: hai tang doc lap nhau, va neu CSS chua tai kip (cache toi da 1 gio) thi thu
hien ra phai la tia set chu khong phai dau GitHub cua ThingsBoard. */
tb-github-badge a tb-icon,
tb-github-badge a .mat-mdc-button-touch-target + tb-icon {
display: none !important;
}
tb-github-badge .button-label::before {
content: "DPEMS Platform";
/* 15px: yeu cau la BANG HOAC LON HON tieu de dashboard tren thanh ngang, do duoc la
14px / weight 500 (vd «Tổng Quan Hệ Thống»). Lay 15px + weight 600 de chac chan lon
hon o ca hai chieu.
TRAN TREN LA ~16px: nut cao co dinh 30px (--mdc-outlined-button-container-height),
va thanh cong cu con chuong thong bao + avatar ben phai — do duoc khoang ho chi con
~10px o 15px. To hon nua la cham nhau tren man hinh hep. */
font-size: 15px;
font-weight: 600;
letter-spacing: .6px;
line-height: 1;
}
/* Bo khung nut va bo lien ket: day la NHAN THUONG HIEU, khong phai nut bam.
ThingsBoard dung `mat-stroked-button` nen mac dinh co vien 1px + nen mo 12%;
de nguyen thi nguoi dung tuong bam duoc ra dau do. `pointer-events: none` chan
ca cu bam lan con tro hinh ban tay — bo moi mot cai thi van con cai kia. */
tb-github-badge a.mdc-button {
border: none !important;
background: transparent !important;
min-width: 0 !important;
padding: 0 !important;
pointer-events: none !important;
cursor: default !important;
}
/* Nut «x» an hien khi tro chuot (hideGithubStar) — khong con nghia khi day chi la nhan. */
tb-github-badge .mdc-icon-button {
display: none !important;
}
/* ─────────────────────────────────────────────────────────────────────────────
"Powered by ThingsBoard v.4.2.1.1" o CUOI trang dashboard → "Powered by Dang Phong"
─────────────────────────────────────────────────────────────────────────────
DOM that:
Chu "Powered by " giu nguyen; chi phan trong phai doi.
Vi sao lai la `font-size: 0` + `::before` chu khong sub_filter chuoi:
noi dung the do Angular noi lai luc chay — `C("ThingsBoard v.",o.thingsboardVersion,"")`
— nen no la MOT text node duy nhat gom ca ten lan so phien ban. Muon bo so phien ban
thi phai khop vao `o.thingsboardVersion`, tuc TEN BIEN DA RUT GON, thu doi sau moi lan
nang cap ThingsBoard. Con `.tb-powered-by-footer` la ten lop that trong ma nguon
(consts[72]) — on dinh hon nhieu.
HREF thi doi ben Nginx: no la chuoi hang, xuat hien dung 1 lan tren toan bo 47 file JS.
Nho vay chu "Dang Phong" VAN BAM DUOC va di dung dia chi.
───────────────────────────────────────────────────────────────────────────── */
.tb-powered-by-footer a {
font-size: 0 !important;
}
.tb-powered-by-footer a::before {
content: "Dang Phong";
font-size: 12px;
font-weight: 700;
}
/* ═══════════════════════════════════════════════════════════════════════════
BẢN IN — cho nút «⎙ In / PDF» ở bảng ⑤ (widget dpems-report-toolbar)
═══════════════════════════════════════════════════════════════════════════
ThingsBoard CE không có xuất PDF (tính năng bản Professional). Đường ra PDF
thật sự và duy nhất trên CE là hộp thoại in của trình duyệt — mục «Lưu thành
PDF» có sẵn ở Chrome, Edge, Safari, Firefox. Nút trong widget gọi
window.print(); phần còn lại là việc của khối này.
KHÔNG có khối này thì bản in gồm cả thanh bên, thanh tiêu đề, hàng nút điều
hướng và chính hàng nút xuất — tức một ảnh chụp màn hình in ra giấy, không
phải một báo cáo. Đó là khác biệt giữa "có nút PDF" và "PDF dùng được".
Vì sao dùng visibility/position chứ không display:none cho vùng dashboard:
biểu đồ ở đây là SVG do widget tự vẽ theo kích thước đo được lúc chạy
(fitViewBox). `display:none` làm vùng vẽ về 0×0 ngay trước khi in → biểu đồ
ra trang trắng. Ẩn phần thừa mà GIỮ vùng dashboard trong luồng bố cục thì
kích thước không đổi và biểu đồ in ra đúng như đang thấy. */
@media print {
/* Khung ứng dụng: thanh bên, thanh tiêu đề, chân trang, nút nổi */
tb-home tb-sidenav,
tb-home .tb-nav-sidebar,
tb-home mat-sidenav,
.tb-main-toolbar,
tb-home > mat-sidenav-container > mat-sidenav,
tb-powered-by-footer, .tb-powered-by-footer,
tb-github-badge,
.tb-dashboard-toolbar,
.tb-fullscreen-button-style,
mat-tooltip-component,
.cdk-overlay-container { display: none !important; }
/* Vùng nội dung chiếm hết trang, bỏ mọi thanh cuộn */
mat-sidenav-content, .mat-drawer-content,
tb-dashboard-page, .tb-dashboard-content {
margin: 0 !important; padding: 0 !important;
overflow: visible !important; height: auto !important;
}
/* Nền in phải TRẮNG dù đang xem ở chế độ tối: in nền navy tốn mực, và máy in
đen trắng biến nó thành mảng xám nuốt hết chữ. Widget tự đổi sang bảng màu
nền sáng nhờ dpemsApplyContrastClass đọc nền thực tế. */
html, body, .tb-dashboard-content, .tb-dashboard-layout,
tb-dashboard, .gridster, .gridster-item {
background: #FFFFFF !important;
box-shadow: none !important;
}
/* Hàng nút điều hướng và nút chọn mẫu không thuộc về bản in */
.tb-widget-button, tb-action-button-widget { display: none !important; }
/* Không cắt một widget làm đôi giữa hai trang */
.gridster-item, tb-widget { break-inside: avoid; page-break-inside: avoid; }
@page { margin: 10mm; }
}