Altitude/AltitudeWeb
5
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor Angular Material table styles to use global theme-based CSS variables and remove redundant component-specific overrides.

Browse Source
This commit is contained in:
akastijn 2025-11-24 01:19:19 +01:00
parent 2bc5c41435
commit bdad0ff0ae
2 changed files with 39 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/app/pages/head-mod/staff-pt/staff-pt.component.scss
View File

@ -21,22 +21,6 @@
width: 100%;
}
/* Ensure good contrast in dark/light modes */
.table-theme th.mat-mdc-header-cell,
.table-theme td.mat-mdc-cell,
.table-theme .mat-mdc-header-row,
.table-theme .mat-mdc-row {
color: var(--font-color);
}
/* Apply class to table via HTML's class attribute if needed; here we style all mat tables in this component */
table.mat-mdc-table {
color: var(--font-color);
}
.mat-sort-header-arrow {
color: var(--font-color);
}
.no-data td {
text-align: center;

39
frontend/src/styles.scss
View File

@ -483,3 +483,42 @@ main .container {
.margin-auto {
margin: auto
}
/* Angular Material global theme bridge to app CSS variables */
.theme-light, .theme-dark {
/* Ensure Material table text and headers follow theme font color */
.mat-mdc-table,
.mat-mdc-header-cell,
.mat-mdc-cell,
.mat-mdc-header-row,
.mat-mdc-row {
color: var(--font-color);
}
/* Sort arrow color */
.mat-sort-header-arrow {
color: var(--font-color);
}
}
/* Dark theme overrides for Angular Material tables to ensure readable backgrounds */
.theme-dark {
/* Set a dark surface for the table container */
.mat-mdc-table {
background-color: var(--color-secondary);
}
/* Ensure rows and cells don't bring back white backgrounds from the prebuilt theme */
.mat-mdc-header-row,
.mat-mdc-row,
.mat-mdc-header-cell,
.mat-mdc-cell {
background-color: transparent;
}
/* Optional: keep sort header arrow readable (already set in the bridge, but safe here) */
.mat-sort-header-arrow {
color: var(--font-color);
}
}