@ng-matero/extensions/prebuilt-themes/deeppurple-amber.css

Angular Material Extensions

.mat-button-loading .mdc-button__label,.mat-button-loading .mat-icon{visibility:hidden}.mat-button-loading .mat-mdc-progress-spinner{position:absolute;top:calc(50% - 12px);left:calc(50% - 12px)}html{--mtx-alert-container-shape: 4px}html{--mtx-alert-outline-color: transparent;--mtx-alert-background-color: #f5f5f5;--mtx-alert-text-color: rgba(0, 0, 0, 0.87);--mtx-alert-info-outline-color: transparent;--mtx-alert-info-background-color: #bbdefb;--mtx-alert-info-text-color: rgba(0, 0, 0, 0.87);--mtx-alert-success-outline-color: transparent;--mtx-alert-success-background-color: #c8e6c9;--mtx-alert-success-text-color: rgba(0, 0, 0, 0.87);--mtx-alert-warning-outline-color: transparent;--mtx-alert-warning-background-color: #ffecb3;--mtx-alert-warning-text-color: rgba(0, 0, 0, 0.87);--mtx-alert-danger-outline-color: transparent;--mtx-alert-danger-background-color: #ffcdd2;--mtx-alert-danger-text-color: rgba(0, 0, 0, 0.87)}html{--mtx-colorpicker-toggle-active-state-icon-color: #673ab7;--mtx-colorpicker-toggle-icon-color: rgba(0, 0, 0, 0.54)}.mtx-colorpicker-toggle-active.mat-accent{--mtx-colorpicker-toggle-active-state-icon-color: #ffd740;--mtx-colorpicker-toggle-icon-color: rgba(0, 0, 0, 0.54)}.mtx-colorpicker-toggle-active.mat-warn{--mtx-colorpicker-toggle-active-state-icon-color: #f44336;--mtx-colorpicker-toggle-icon-color: rgba(0, 0, 0, 0.54)}html{--mtx-datetimepicker-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);--mtx-datetimepicker-container-touch-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);--mtx-datetimepicker-container-shape: 4px;--mtx-datetimepicker-container-touch-shape: 4px;--mtx-datetimepicker-selector-container-shape: 4px}html{--mtx-datetimepicker-calendar-date-selected-state-text-color: white;--mtx-datetimepicker-calendar-date-selected-state-background-color: #673ab7;--mtx-datetimepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #673ab7 38%, transparent);--mtx-datetimepicker-calendar-date-today-selected-state-outline-color: white;--mtx-datetimepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #673ab7 12%, transparent);--mtx-datetimepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #673ab7 12%, transparent);--mtx-datetimepicker-toggle-active-state-icon-color: #673ab7;--mtx-datetimepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);--mtx-datetimepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);--mtx-datetimepicker-calendar-header-divider-color: transparent;--mtx-datetimepicker-calendar-header-text-color: white;--mtx-datetimepicker-calendar-body-week-number-text-color: rgba(0, 0, 0, 0.54);--mtx-datetimepicker-calendar-header-background-color: #673ab7;--mtx-datetimepicker-calendar-table-header-text-color: rgba(0, 0, 0, 0.54);--mtx-datetimepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);--mtx-datetimepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);--mtx-datetimepicker-calendar-date-outline-color: transparent;--mtx-datetimepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mtx-datetimepicker-container-background-color: white;--mtx-datetimepicker-container-text-color: rgba(0, 0, 0, 0.87);--mtx-datetimepicker-clock-dial-background-color: rgba(0, 0, 0, 0.12);--mtx-datetimepicker-clock-cell-text-color: rgba(0, 0, 0, 0.87);--mtx-datetimepicker-clock-cell-hover-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);--mtx-datetimepicker-clock-cell-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mtx-datetimepicker-clock-cell-selected-state-background-color: #673ab7;--mtx-datetimepicker-clock-hand-background-color: #673ab7;--mtx-datetimepicker-time-input-active-state-text-color: #673ab7;--mtx-datetimepicker-time-input-active-state-background-color: color-mix(in srgb, #673ab7 20%, transparent);--mtx-datetimepicker-time-input-focus-state-outline-color: #673ab7;--mtx-datetimepicker-time-input-focus-state-placeholder-text-color: color-mix(in srgb, #673ab7 60%, transparent);--mtx-datetimepicker-time-input-text-color: rgba(0, 0, 0, 0.87);--mtx-datetimepicker-time-input-background-color: rgba(0, 0, 0, 0.12);--mtx-datetimepicker-time-input-focus-state-background-color: #ede7f6;--mtx-datetimepicker-time-input-warn-state-outline-color: #f44336;--mtx-datetimepicker-time-ampm-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 75%, transparent);--mtx-datetimepicker-time-ampm-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mtx-datetimepicker-time-ampm-selected-state-text-color: rgba(0, 0, 0, 0.87);--mtx-datetimepicker-time-ampm-selected-state-background-color: color-mix(in srgb, #673ab7 20%, transparent)}.mtx-datetimepicker-content.mat-accent,.mtx-datetimepicker-toggle-active.mat-accent{--mtx-datetimepicker-calendar-date-selected-state-text-color: rgba(0, 0, 0, 0.87);--mtx-datetimepicker-calendar-date-selected-state-background-color: #ffd740;--mtx-datetimepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ffd740 38%, transparent);--mtx-datetimepicker-calendar-date-today-selected-state-outline-color: rgba(0, 0, 0, 0.87);--mtx-datetimepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ffd740 12%, transparent);--mtx-datetimepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ffd740 12%, transparent);--mtx-datetimepicker-toggle-active-state-icon-color: #ffd740;--mtx-datetimepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);--mtx-datetimepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);--mtx-datetimepicker-calendar-header-divider-color: transparent;--mtx-datetimepicker-calendar-header-text-color: white;--mtx-datetimepicker-calendar-body-week-number-text-color: rgba(0, 0, 0, 0.54);--mtx-datetimepicker-calendar-header-background-color: #ffd740;--mtx-datetimepicker-calendar-table-header-text-color: rgba(0, 0, 0, 0.54);--mtx-datetimepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);--mtx-datetimepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);--mtx-datetimepicker-calendar-date-outline-color: transparent;--mtx-datetimepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mtx-datetimepicker-container-background-color: white;--mtx-datetimepicker-container-text-color: rgba(0, 0, 0, 0.87);--mtx-datetimepicker-clock-dial-background-color: rgba(0, 0, 0, 0.12);--mtx-datetimepicker-clock-cell-text-color: rgba(0, 0, 0, 0.87);--mtx-datetimepicker-clock-cell-hover-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);--mtx-datetimepicker-clock-cell-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mtx-datetimepicker-clock-cell-selected-state-background-color: #ffd740;--mtx-datetimepicker-clock-hand-background-color: #ffd740;--mtx-datetimepicker-time-input-active-state-text-color: #ffd740;--mtx-datetimepicker-time-input-active-state-background-color: color-mix(in srgb, #ffd740 20%, transparent);--mtx-datetimepicker-time-input-focus-state-outline-color: #ffd740;--mtx-datetimepicker-time-input-focus-state-placeholder-text-color: color-mix(in srgb, #ffd740 60%, transparent);--mtx-datetimepicker-time-input-text-color: rgba(0, 0, 0, 0.87);--mtx-datetimepicker-time-input-background-color: rgba(0, 0, 0, 0.12);--mtx-datetimepicker-time-input-focus-state-background-color: #fff8e1;--mtx-datetimepicker-time-input-warn-state-outline-color: #f44336;--mtx-datetimepicker-time-ampm-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 75%, transparent);--mtx-datetimepicker-time-ampm-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mtx-datetimepicker-time-ampm-selected-state-text-color: rgba(0, 0, 0, 0.87);--mtx-datetimepicker-time-ampm-selected-state-background-color: color-mix(in srgb, #ffd740 20%, transparent)}.mtx-datetimepicker-content.mat-warn,.mtx-datetimepicker-toggle-active.mat-warn{--mtx-datetimepicker-calendar-date-selected-state-text-color: white;--mtx-datetimepicker-calendar-date-selected-state-background-color: #f44336;--mtx-datetimepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f44336 38%, transparent);--mtx-datetimepicker-calendar-date-today-selected-state-outline-color: white;--mtx-datetimepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f44336 12%, transparent);--mtx-datetimepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f44336 12%, transparent);--mtx-datetimepicker-toggle-active-state-icon-color: #f44336;--mtx-datetimepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);--mtx-datetimepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);--mtx-datetimepicker-calendar-header-divider-color: transparent;--mtx-datetimepicker-calendar-header-text-color: white;--mtx-datetimepicker-calendar-body-week-number-text-color: rgba(0, 0, 0, 0.54);--mtx-datetimepicker-calendar-header-background-color: #f44336;--mtx-datetimepicker-calendar-table-header-text-color: rgba(0, 0, 0, 0.54);--mtx-datetimepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);--mtx-datetimepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);--mtx-datetimepicker-calendar-date-outline-color: transparent;--mtx-datetimepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mtx-datetimepicker-container-background-color: white;--mtx-datetimepicker-container-text-color: rgba(0, 0, 0, 0.87);--mtx-datetimepicker-clock-dial-background-color: rgba(0, 0, 0, 0.12);--mtx-datetimepicker-clock-cell-text-color: rgba(0, 0, 0, 0.87);--mtx-datetimepicker-clock-cell-hover-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);--mtx-datetimepicker-clock-cell-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mtx-datetimepicker-clock-cell-selected-state-background-color: #f44336;--mtx-datetimepicker-clock-hand-background-color: #f44336;--mtx-datetimepicker-time-input-active-state-text-color: #f44336;--mtx-datetimepicker-time-input-active-state-background-color: color-mix(in srgb, #f44336 20%, transparent);--mtx-datetimepicker-time-input-focus-state-outline-color: #f44336;--mtx-datetimepicker-time-input-focus-state-placeholder-text-color: color-mix(in srgb, #f44336 60%, transparent);--mtx-datetimepicker-time-input-text-color: rgba(0, 0, 0, 0.87);--mtx-datetimepicker-time-input-background-color: rgba(0, 0, 0, 0.12);--mtx-datetimepicker-time-input-focus-state-background-color: #ffebee;--mtx-datetimepicker-time-input-warn-state-outline-color: #f44336;--mtx-datetimepicker-time-ampm-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 75%, transparent);--mtx-datetimepicker-time-ampm-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mtx-datetimepicker-time-ampm-selected-state-text-color: rgba(0, 0, 0, 0.87);--mtx-datetimepicker-time-ampm-selected-state-background-color: color-mix(in srgb, #f44336 20%, transparent)}html{--mtx-datetimepicker-calendar-text-font: Roboto, sans-serif;--mtx-datetimepicker-calendar-text-size: 13px;--mtx-datetimepicker-calendar-body-label-text-size: 14px;--mtx-datetimepicker-calendar-body-label-text-weight: 500;--mtx-datetimepicker-calendar-period-button-text-size: 14px;--mtx-datetimepicker-calendar-period-button-text-weight: 500;--mtx-datetimepicker-calendar-table-header-text-size: 11px;--mtx-datetimepicker-calendar-table-header-text-weight: 400;--mtx-datetimepicker-clock-text-size: 14px}html{--mtx-drawer-container-shape: 0;--mtx-drawer-container-elevation-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12)}html{--mtx-drawer-container-background-color: white;--mtx-drawer-container-text-color: rgba(0, 0, 0, 0.87)}html{--mtx-grid-container-shape: 0;--mtx-grid-table-cell-min-width: 80px}html{--mtx-grid-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 20%, transparent);--mtx-grid-column-menu-text-color: rgba(0, 0, 0, 0.87);--mtx-grid-column-menu-divider-color: rgba(0, 0, 0, 0.12);--mtx-grid-table-footer-background-color: white;--mtx-grid-table-row-striped-background-color: #f5f5f5;--mtx-grid-table-row-hover-background-color: #eee;--mtx-grid-table-row-selected-background-color: #eee;--mtx-grid-table-row-selected-hover-background-color: #e0e0e0;--mtx-grid-table-cell-selected-outline-color: #ffd740;--mtx-grid-resizable-handle-active-background-color: #673ab7;--mtx-grid-resizable-handle-hover-background-color: #673ab7;--mtx-grid-resizable-handle-disabled-background-color: rgba(0, 0, 0, 0.12)}html{--mtx-grid-row-expand-button-size: 48px}html{--mtx-loader-backdrop-background-color: color-mix(in srgb, white 75%, transparent)}html{--mtx-popover-container-shape: 4px;--mtx-popover-base-elevation-level: 8}html{--mtx-popover-outline-color: rgba(0, 0, 0, 0.12);--mtx-popover-background-color: white;--mtx-popover-text-color: rgba(0, 0, 0, 0.87)}html{--mtx-progress-container-shape: 4px}html{--mtx-progress-track-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);--mtx-progress-indicator-color: rgba(0, 0, 0, 0.12);--mtx-progress-text-color: rgba(0, 0, 0, 0.87);--mtx-progress-info-indicator-color: #2196f3;--mtx-progress-info-text-color: white;--mtx-progress-success-indicator-color: #4caf50;--mtx-progress-success-text-color: white;--mtx-progress-warning-indicator-color: #ff9800;--mtx-progress-warning-text-color: white;--mtx-progress-danger-indicator-color: #f44336;--mtx-progress-danger-text-color: white}html{--mtx-progress-text-size: 12px}html{--mtx-select-container-shape: 4px;--mtx-select-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)}html{--mtx-select-container-text-color: rgba(0, 0, 0, 0.87);--mtx-select-placeholder-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mtx-select-disabled-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mtx-select-multiple-value-background-color: rgba(0, 0, 0, 0.12);--mtx-select-multiple-value-outline-color: rgba(0, 0, 0, 0.12);--mtx-select-multiple-value-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.12) 38%, transparent);--mtx-select-multiple-value-icon-hover-background-color: rgba(0, 0, 0, 0.12);--mtx-select-clear-icon-color: rgba(0, 0, 0, 0.54);--mtx-select-clear-icon-hover-color: #f44336;--mtx-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);--mtx-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mtx-select-invalid-arrow-color: #f44336;--mtx-select-panel-background-color: white;--mtx-select-panel-divider-color: rgba(0, 0, 0, 0.12);--mtx-select-optgroup-label-text-color: rgba(0, 0, 0, 0.54);--mtx-select-option-label-text-color: rgba(0, 0, 0, 0.87);--mtx-select-option-selected-state-text-color: #673ab7;--mtx-select-option-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);--mtx-select-option-hover-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);--mtx-select-option-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent)}.ng-dropdown-panel.mat-accent{--mtx-select-container-text-color: rgba(0, 0, 0, 0.87);--mtx-select-placeholder-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mtx-select-disabled-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mtx-select-multiple-value-background-color: rgba(0, 0, 0, 0.12);--mtx-select-multiple-value-outline-color: rgba(0, 0, 0, 0.12);--mtx-select-multiple-value-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.12) 38%, transparent);--mtx-select-multiple-value-icon-hover-background-color: rgba(0, 0, 0, 0.12);--mtx-select-clear-icon-color: rgba(0, 0, 0, 0.54);--mtx-select-clear-icon-hover-color: #f44336;--mtx-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);--mtx-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mtx-select-invalid-arrow-color: #f44336;--mtx-select-panel-background-color: white;--mtx-select-panel-divider-color: rgba(0, 0, 0, 0.12);--mtx-select-optgroup-label-text-color: rgba(0, 0, 0, 0.54);--mtx-select-option-label-text-color: rgba(0, 0, 0, 0.87);--mtx-select-option-selected-state-text-color: #ffd740;--mtx-select-option-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);--mtx-select-option-hover-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);--mtx-select-option-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent)}.ng-dropdown-panel.mat-warn{--mtx-select-container-text-color: rgba(0, 0, 0, 0.87);--mtx-select-placeholder-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mtx-select-disabled-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mtx-select-multiple-value-background-color: rgba(0, 0, 0, 0.12);--mtx-select-multiple-value-outline-color: rgba(0, 0, 0, 0.12);--mtx-select-multiple-value-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.12) 38%, transparent);--mtx-select-multiple-value-icon-hover-background-color: rgba(0, 0, 0, 0.12);--mtx-select-clear-icon-color: rgba(0, 0, 0, 0.54);--mtx-select-clear-icon-hover-color: #f44336;--mtx-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);--mtx-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mtx-select-invalid-arrow-color: #f44336;--mtx-select-panel-background-color: white;--mtx-select-panel-divider-color: rgba(0, 0, 0, 0.12);--mtx-select-optgroup-label-text-color: rgba(0, 0, 0, 0.54);--mtx-select-option-label-text-color: rgba(0, 0, 0, 0.87);--mtx-select-option-selected-state-text-color: #f44336;--mtx-select-option-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);--mtx-select-option-hover-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);--mtx-select-option-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent)}html{--mtx-split-gutter-background-color: rgba(0, 0, 0, 0.12);--mtx-split-gutter-hover-state-background-color: #673ab7}.mtx-split>.mtx-split-gutter.mat-accent:hover{--mtx-split-gutter-background-color: rgba(0, 0, 0, 0.12);--mtx-split-gutter-hover-state-background-color: #ffd740}.mtx-split>.mtx-split-gutter.mat-warn:hover{--mtx-split-gutter-background-color: rgba(0, 0, 0, 0.12);--mtx-split-gutter-hover-state-background-color: #f44336}html{--mtx-tooltip-container-shape: 4px;--mtx-tooltip-supporting-text-line-height: 16px}html{--mtx-tooltip-container-color: #424242;--mtx-tooltip-supporting-text-color: white}html{--mtx-tooltip-supporting-text-font: Roboto, sans-serif;--mtx-tooltip-supporting-text-size: 12px;--mtx-tooltip-supporting-text-weight: 400;--mtx-tooltip-supporting-text-tracking: 0.0333333333em}