client/src/theme.scss - master - tisit/FUXA_SCADA

client/src/theme.scss
221 строка7 KB
Umberto Nocelli
Upgrade Angular from v16 to v17 (#2113)
08 янв 2026, 21:56
08 янв 2026, 21:56905235d
@use '@angular/material' as mat;

// TODO: As of v15 mat.legacy-core no longer includes default typography styles.
// If you specify typography styles for the components you use elsewhere, you should delete this line.
// If you don't need the default component typographies but still want the hierarchy styles,
// you can delete this line and instead use:
// `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
@include mat.core();

// tipografie
$app-font-family: '"Segoe UI","Helvetica Neue","Arial",sans-serif';
$my-typography: mat.define-typography-config(
  $font-family: $app-font-family,
  $body-1:  mat.define-typography-level($font-size: 13px, $line-height: 18px, $font-weight: 400),
  $body-2:  mat.define-typography-level($font-size: 14px, $line-height: 20px, $font-weight: 400),
  $button:  mat.define-typography-level($font-size: 12px, $line-height: 20px, $font-weight: 600),
  $caption: mat.define-typography-level($font-size: 12px, $line-height: 16px, $font-weight: 400)
);

@include mat.typography-hierarchy($my-typography);

// Header theme
$my-header-primary: mat.define-palette(mat.$grey-palette, 100);
$my-header-accent: mat.define-palette(mat.$pink-palette);
$my-header-warn: mat.define-palette(mat.$red-palette);
$my-header-theme: mat.define-light-theme((
  color: (
    primary: $my-header-primary,
    accent: $my-header-accent,
    warn: $my-header-warn,
  ),
  typography: $my-typography,
  density: 0,
));
@include mat.menu-theme($my-header-theme);

// Checkbox theme
$my-checkbox-primary: mat.define-palette(mat.$grey-palette, 800);
$my-checkbox-accent: mat.define-palette(mat.$grey-palette, 800);
$my-checkbox-warn: mat.define-palette(mat.$red-palette);
$my-checkbox-theme: mat.define-light-theme((
  color: (
    primary: $my-checkbox-primary,
    accent: $my-checkbox-accent,
    warn: $my-checkbox-warn,
  ),
  typography: $my-typography,
  density: 0,
));
@include mat.checkbox-theme($my-checkbox-theme);
@include mat.pseudo-checkbox-theme($my-checkbox-theme);

// Radio theme
$my-radio-primary: mat.define-palette(mat.$grey-palette, 800);
$my-radio-accent: mat.define-palette(mat.$grey-palette, 800);
$my-radio-warn: mat.define-palette(mat.$red-palette);
$my-radio-theme: mat.define-light-theme((
  color: (
    primary: $my-radio-primary,
    accent: $my-radio-accent,
    warn: $my-radio-warn,
  ),
  typography: $my-typography,
  density: 0,
));
@include mat.radio-theme($my-radio-theme);

// Button theme
$my-button-primary: mat.define-palette(mat.$blue-palette, A200);
$my-button-accent: mat.define-palette(mat.$red-palette, 600);
$my-button-warn: mat.define-palette(mat.$red-palette, 600);
$my-button-theme: mat.define-light-theme((
  color: (
    primary: $my-button-primary,
    accent: $my-button-accent,
    warn: $my-button-warn,
  ),
  typography: $my-typography,
  density: 0,
));
@include mat.button-theme($my-button-theme);

// Slide-toggle theme
$my-slide-toggle-primary: mat.define-palette(mat.$blue-palette, 700);
$my-slide-toggle-accent: mat.define-palette(mat.$green-palette, 600);
$my-slide-toggle-warn: mat.define-palette(mat.$red-palette, 600);
$my-slide-toggle-theme: mat.define-light-theme((
  color: (
    primary: $my-slide-toggle-primary,
    accent: $my-slide-toggle-accent,
    warn: $my-slide-toggle-warn,
  ),
  typography: $my-typography,
  density: 0,
));
@include mat.slide-toggle-theme($my-slide-toggle-theme);

// Slider theme
$my-slider-primary: mat.define-palette(mat.$blue-palette, 700);
$my-slider-accent: mat.define-palette(mat.$green-palette, 600);
$my-slider-warn: mat.define-palette(mat.$red-palette, 600);
$my-slider-theme: mat.define-light-theme((
  color: (
    primary: $my-slider-primary,
    accent: $my-slider-accent,
    warn: $my-slider-warn,
  ),
  typography: $my-typography,
  density: 0,
));
@include mat.slider-theme($my-slider-theme);

// Define a dark theme
$dark-primary: mat.define-palette(mat.$blue-palette);
$dark-accent: mat.define-palette(mat.$amber-palette, A200, A100, A400);
$dark-warn: mat.define-palette(mat.$deep-orange-palette);
$dark-theme: mat.define-dark-theme((
  color: (
    primary: $dark-primary,
    accent: $dark-accent,
    warn: $dark-warn,
  ),
  typography: $my-typography,
  density: 0,
));

// Themes will be switched based on class names. Angular will switch classes which will trigger the theme change.
.dark-theme {
  @include mat.all-component-themes($dark-theme);
}

@import 'codemirror/lib/codemirror';
@import 'codemirror/theme/material';
@import 'codemirror/addon/lint/lint';
@import 'codemirror/addon/hint/show-hint';


/* ===== Token overrides: label/tab/icon ===== */

/* Variante DARK (wrapper con .dark-theme sul root o su app-root) */
.dark-theme {
  /* icone usano currentColor */
  color: #fff;

  /* Tabs */
  --mat-tab-header-label-text-color: #fff;
  --mat-tab-header-label-text-color-hover: #fff;
  --mat-tab-header-active-label-text-color: #fff;
  --mat-tab-header-inactive-label-text-color: #fff;
  --mat-tab-header-disabled-label-text-color: rgba(255,255,255,0.5);

  /* Form field / helper */
  --mat-form-field-label-text-color: #fff;
  --mat-form-field-focus-label-text-color: #fff;
  --mat-form-field-subscript-text-color: #fff;

  /* Input / Select / Option */
  --mat-input-text-color: #fff;
  --mat-input-placeholder-text-color: rgba(255,255,255,0.7);
  --mat-select-enabled-trigger-text-color: #fff;
  --mat-option-label-text-color: #fff;

  mat-icon { color: inherit; }
}

/* Variante LIGHT (default della pagina senza .dark-theme) */
:root {
  color: #111;

  --mat-tab-header-label-text-color: #111;
  --mat-tab-header-label-text-color-hover: #111;
  --mat-tab-header-active-label-text-color: #111;
  --mat-tab-header-inactive-label-text-color: #444;
  --mat-tab-header-disabled-label-text-color: rgba(0,0,0,0.38);

  --mat-form-field-label-text-color: #111;
  --mat-form-field-focus-label-text-color: #111;
  --mat-form-field-subscript-text-color: #333;

  --mat-input-text-color: #111;
  --mat-input-placeholder-text-color: rgba(0,0,0,0.6);
  --mat-select-enabled-trigger-text-color: #111;
  --mat-option-label-text-color: #111;

  mat-icon { color: inherit; }
}

.dark-theme .mat-mdc-tab .mdc-tab__text-label { color: #fff !important; opacity: 1; }
.dark-theme .mat-mdc-tab-header { --mdc-tab-indicator-active-indicator-color: #fff; }
.dark-theme .mat-mdc-dialog-container .mat-mdc-dialog-title,
.dark-theme .mat-mdc-dialog-container [mat-dialog-title] {
  color: #fff;
  opacity: 1;
}

.dark-theme .mat-mdc-dialog-container {
  /* Dialog content text (Angular Material v17 / MDC) */
  --mdc-dialog-supporting-text-color: rgba(255, 255, 255, 0.87);
  --mdc-dialog-subhead-color: #fff;
  color: rgba(255, 255, 255, 0.87);
}

.dark-theme .mat-mdc-dialog-container .mat-mdc-icon-button {
  --mdc-icon-button-icon-color: #fff;
  --mdc-icon-button-disabled-icon-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.dark-theme .mat-mdc-icon-button[disabled],
.dark-theme .mat-mdc-icon-button.mat-mdc-button-disabled,
.dark-theme .mat-mdc-icon-button.mdc-icon-button--disabled {
  color: rgba(255, 255, 255, 0.28) !important;
  opacity: 0.6;
  cursor: not-allowed;
}

.dark-theme .mat-mdc-icon-button {
  // --mdc-icon-button-icon-color: #fff;
  // --mdc-icon-button-disabled-icon-color: rgba(255,255,255,0.38);
  // color: #fff;
}