You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
427 lines
16 KiB
SCSS
427 lines
16 KiB
SCSS
@use '@angular/material' as mat;
|
|
@import "constants";
|
|
|
|
@mixin theme-mode-dark($theme) {
|
|
$primary: map-get($theme, primary);
|
|
$primary-color: mat.get-color-from-palette($primary);
|
|
$primary-lighter: mat.get-color-from-palette($primary, lighter);
|
|
$primary-darker: mat.get-color-from-palette($primary, darker);
|
|
$accent: map-get($theme, accent);
|
|
$accent-color: mat.get-color-from-palette($accent);
|
|
$warn: map-get($theme, warn);
|
|
$warn-color: mat.get-color-from-palette($warn);
|
|
$foreground: map-get($theme, foreground);
|
|
$foreground-base: mat.get-color-from-palette($foreground, base); // 1
|
|
$foreground-text: mat.get-color-from-palette($foreground, text); //.87
|
|
$foreground-secondary-text: mat.get-color-from-palette($foreground, secondary-text); // .54
|
|
$foreground-disabled: mat.get-color-from-palette($foreground, disabled); // .38
|
|
$foreground-divider: mat.get-color-from-palette($foreground, divider); // .12
|
|
$background: map-get($theme, background);
|
|
$background-color: mat.get-color-from-palette($background, card);
|
|
$hover-background: rgba(0, 0, 0, 0.04);
|
|
$hover-background-dark: rgba(255, 255, 255, 0.06);
|
|
|
|
.mat-primary {
|
|
color: $primary-darker !important;
|
|
}
|
|
|
|
.mat-sidenav-container .mat-sidenav-content {
|
|
background-color: $dark-background-color;
|
|
& .mat-mdc-card.mdc-card {
|
|
background-color: $dark-card-background-color;
|
|
}
|
|
}
|
|
.sidenav.mat-drawer {
|
|
background-color: $dark-card-background-color;
|
|
}
|
|
.rtl-top-toolbar {
|
|
border-bottom: 1px solid $background-color;
|
|
padding: 0 ($gap*5) 0 ($gap*2);
|
|
}
|
|
.bg-primary {
|
|
background-color: $primary-color;
|
|
color: $foreground-text;
|
|
}
|
|
.mat-mdc-button-base.mat-mdc-unelevated-button.mat-primary {
|
|
color: $foreground-text !important;
|
|
}
|
|
.mat-mdc-option:hover:not(.mdc-list-item--disabled), .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled) {
|
|
& .mdc-list-item__primary-text {
|
|
color: $primary-darker;
|
|
}
|
|
}
|
|
.mdc-tab__text-label {
|
|
&.mdc-tab__text-label-active {
|
|
color: $primary-darker;
|
|
& .tab-badge .mat-badge-content {
|
|
background: $primary-darker;
|
|
}
|
|
}
|
|
& .tab-badge .mat-badge-content {
|
|
color: $dark-card-background-color;
|
|
background: $foreground-secondary-text;
|
|
}
|
|
}
|
|
|
|
.rtl-snack-bar.mat-mdc-snack-bar-container {
|
|
max-width: 90vw !important;
|
|
font-weight: 700;
|
|
& .mdc-snackbar__surface {
|
|
max-width: 40vw;
|
|
background-color: $background-color;
|
|
}
|
|
& .mat-mdc-snack-bar-label.mdc-snackbar__label {
|
|
max-width: 40vw;
|
|
color: $foreground-text;
|
|
}
|
|
}
|
|
.rtl-warn-snack-bar.mat-mdc-snack-bar-container {
|
|
max-width: 90vw !important;
|
|
font-weight: 700;
|
|
& .mdc-snackbar__surface {
|
|
max-width: 40vw;
|
|
background-color: $background-color;
|
|
}
|
|
& .mat-mdc-snack-bar-label.mdc-snackbar__label {
|
|
max-width: 40vw;
|
|
color: $warn-color;
|
|
}
|
|
}
|
|
.rtl-accent-snack-bar.mat-mdc-snack-bar-container {
|
|
max-width: 90vw !important;
|
|
font-weight: 700;
|
|
& .mdc-snackbar__surface {
|
|
max-width: 40vw;
|
|
background-color: $background-color;
|
|
}
|
|
& .mat-mdc-snack-bar-label.mdc-snackbar__label {
|
|
max-width: 40vw;
|
|
color: $accent-color;
|
|
}
|
|
}
|
|
.mat-mdc-tab-group.mat-primary .mat-ink-bar, .mat-mdc-tab-nav-bar.mat-primary .mat-ink-bar {
|
|
background-color: $primary-darker;
|
|
}
|
|
.cc-data-block .cc-data-title {
|
|
color: $primary-darker;
|
|
}
|
|
.mat-stroked-button.mat-primary {
|
|
border-color: $primary-darker;
|
|
color: $primary-darker;
|
|
}
|
|
.mat-stroked-button.mat-primary:hover .mat-button-focus-overlay {
|
|
background-color: white;
|
|
opacity: 0.09;
|
|
}
|
|
.mat-stroked-button.mat-accent {
|
|
border-color: $accent-color;
|
|
}
|
|
.mat-stroked-button.mat-warn {
|
|
border-color: $warn-color;
|
|
}
|
|
.active-link, .active-link .fa-icon-small, .mat-select-panel .mat-option.mat-active, .mat-select-panel .mat-option.mat-active .fa-icon-small {
|
|
color: $primary-darker;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
fill: $primary-darker;
|
|
}
|
|
.help-expansion {
|
|
& .mat-expansion-panel-header, & .mat-expansion-panel-header-title {
|
|
font-weight: 500;
|
|
color: $foreground-base;
|
|
}
|
|
& .mat-expansion-indicator::after, & .mat-expansion-panel-content, & .mat-expansion-panel-header-description {
|
|
color: $foreground-base;
|
|
}
|
|
}
|
|
.mat-mdc-select-panel.mdc-menu-surface, .mat-mdc-menu-panel.mdc-menu-surface, .mat-expansion-panel, .mat-mdc-dialog-container.mdc-dialog,
|
|
.mat-mdc-dialog-container .mdc-dialog__container, .mat-mdc-dialog-surface.mdc-dialog__surface,
|
|
.mdc-data-table__header-cell, .mat-mdc-paginator, .mat-mdc-form-field-focus-overlay, .mdc-text-field--disabled.mdc-text-field--filled {
|
|
background-color: $dark-card-background-color;
|
|
}
|
|
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label, .mdc-text-field--filled:not(.mdc-text-field--disabled) {
|
|
background-color: $dark-card-background-color;
|
|
color: $primary-darker;
|
|
}
|
|
.cdk-overlay-pane.spinner-dialog-panel .mat-mdc-dialog-surface.mdc-dialog__surface,
|
|
.cdk-overlay-pane.spinner-dialog-panel .mat-mdc-dialog-container .mdc-dialog__container,
|
|
.cdk-overlay-pane.spinner-dialog-panel .mat-mdc-dialog-container.mdc-dialog {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.svg-donation {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.mat-mdc-menu-item:hover .mdc-list-item__primary-text .svg-donation {
|
|
color: $primary-darker !important;
|
|
}
|
|
|
|
.mat-mdc-option:hover:not(.mdc-list-item--disabled) .mdc-list-item__primary-text,
|
|
.mat-mdc-option:hover:not(.mdc-list-item--disabled) .fa-icon, .mat-mdc-option:hover:not(.mdc-list-item--disabled) .fa-icon-small,
|
|
.mat-mdc-option:focus:not(.mdc-list-item--disabled) .mdc-list-item__primary-text, .mat-mdc-option:focus:not(.mdc-list-item--disabled) .fa-icon,
|
|
.mat-mdc-option:focus:not(.mdc-list-item--disabled) .fa-icon-small, .mat-mdc-option.mat-mdc-option-active .mdc-list-item__primary-text,
|
|
.mat-mdc-option.mat-mdc-option-active .fa-icon, .mat-mdc-option.mat-mdc-option-active .fa-icon-small,
|
|
.mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled) .mdc-list-item__primary-text,
|
|
.mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled) .fa-icon,
|
|
.mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled) .fa-icon-small,
|
|
.mat-mdc-menu-item:hover:not([disabled]) .mdc-list-item__primary-text,
|
|
.mat-mdc-menu-item:hover:not([disabled]) .fa-icon, .mat-mdc-menu-item:hover:not([disabled]) .fa-icon-small,
|
|
.mat-mdc-menu-item.cdk-program-focused:not([disabled]) .mdc-list-item__primary-text,
|
|
.mat-mdc-menu-item.cdk-program-focused:not([disabled]) .fa-icon, .mat-mdc-menu-item.cdk-program-focused:not([disabled]) .fa-icon-small,
|
|
.mat-mdc-menu-item.cdk-keyboard-focused:not([disabled]) .mdc-list-item__primary-text, .mat-mdc-menu-item.cdk-keyboard-focused:not([disabled]) .fa-icon,
|
|
.mat-mdc-menu-item.cdk-keyboard-focused:not([disabled]) .fa-icon-small, .mat-mdc-menu-item-highlighted:not([disabled]) .mdc-list-item__primary-text,
|
|
.mat-mdc-menu-item-highlighted:not([disabled]) .fa-icon, .mat-mdc-menu-item-highlighted:not([disabled]) .fa-icon-small {
|
|
color: $primary-darker !important;
|
|
}
|
|
.mdc-text-field--filled .mdc-line-ripple::after {
|
|
border-bottom-color: $primary-darker;
|
|
}
|
|
.mdc-tab__text-label .tab-badge .mat-badge-content {
|
|
color: $foreground-base;
|
|
background: $primary-color;
|
|
}
|
|
a {
|
|
color: $primary-darker !important;
|
|
cursor: pointer;
|
|
}
|
|
button.mdc-button.mat-mdc-button-base.mat-mdc-outlined-button{
|
|
border-color: $foreground-disabled;
|
|
&.mat-warn {
|
|
border-color: $warn-color;
|
|
}
|
|
}
|
|
.mat-mdc-select-arrow svg {
|
|
fill: $foreground-base;
|
|
}
|
|
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input,
|
|
.mat-mdc-select-placeholder,
|
|
.mat-mdc-select-value, .mat-mdc-tab:not(.mat-mdc-tab-disabled) .mdc-tab__text-label, .mat-mdc-tab-link:not(.mat-mdc-tab-disabled) .mdc-tab__text-label {
|
|
color: $foreground-base;
|
|
}
|
|
.mat-mdc-tab:not(.mat-mdc-tab-disabled) .mdc-tab-indicator__content--underline, .mat-mdc-tab-link:not(.mat-mdc-tab-disabled) .mdc-tab-indicator__content--underline {
|
|
border-color: $primary-darker;
|
|
}
|
|
.mdc-list-item--selected .mdc-list-item__primary-text, .mdc-list-item--activated .mdc-list-item__primary-text,
|
|
.mat-mdc-tab:not(.mat-mdc-tab-disabled).mdc-tab--active .mdc-tab__text-label, .mat-mdc-tab-link:not(.mat-mdc-tab-disabled).mdc-tab--active .mdc-tab__text-label, .mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover):not(.mat-option-disabled),
|
|
.mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover),
|
|
.mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {
|
|
color: $primary-darker;
|
|
}
|
|
|
|
.mat-tree-node:hover, .mat-nested-tree-node-parent:hover, .mat-select-panel .mat-option:hover, .mat-menu-panel .mat-menu-content .mat-menu-item:hover,
|
|
.mat-autocomplete-panel .mat-option.mat-active,
|
|
.mat-autocomplete-panel .mat-option.mat-selected.mat-active,
|
|
.mat-autocomplete-panel .mat-option:hover:not(.mat-option-disabled),
|
|
.mat-autocomplete-panel .mat-option:focus:not(.mat-option-disabled) {
|
|
color: $primary-darker;
|
|
cursor: pointer;
|
|
background: $hover-background-dark;
|
|
& .ng-fa-icon, & .mat-icon {
|
|
color: $primary-darker;
|
|
}
|
|
& .sidenav-img svg, & .boltz-icon-fill {
|
|
fill: $primary-darker;
|
|
}
|
|
& .boltz-icon {
|
|
stroke: $primary-darker;
|
|
}
|
|
}
|
|
.mat-tree-node .sidenav-img, .mat-nested-tree-node .sidenav-img, .mat-nested-tree-node-parent .sidenav-img,
|
|
.page-title-container .page-title-img, svg.top-icon-small {
|
|
fill: $foreground-text;
|
|
}
|
|
.selected-color {
|
|
border-color: $primary-lighter;
|
|
}
|
|
.mat-progress-bar-fill::after {
|
|
background-color: mat.get-color-from-palette($primary, 600);
|
|
}
|
|
.chart-legend .legend-label:hover, .chart-legend .legend-label .active .legend-label-text {
|
|
color: $foreground-text !important;
|
|
}
|
|
.cdk-overlay-container {
|
|
& .cdk-overlay-dark-backdrop {
|
|
background: rgba(0, 0, 0, 0.6);
|
|
}
|
|
& .cdk-global-overlay-wrapper .mat-dialog-container .spinner-container {
|
|
color: $primary-darker;
|
|
}
|
|
& .mat-mdc-progress-spinner .mdc-circular-progress__determinate-circle,
|
|
& .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic {
|
|
stroke: $primary-darker;
|
|
}
|
|
}
|
|
.mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
|
|
color: $primary-darker;
|
|
}
|
|
.mat-select-panel {
|
|
background-color: $dark-card-background-color;
|
|
}
|
|
.mat-tree {
|
|
background: $dark-card-background-color;
|
|
}
|
|
h4 {
|
|
color: $primary-darker;
|
|
}
|
|
.dashboard-card .mat-mdc-card-header .mat-mdc-card-title {
|
|
color: $foreground-text;
|
|
& .ng-fa-icon {
|
|
color: $foreground-text;
|
|
}
|
|
}
|
|
.dashboard-info-title {
|
|
color: $primary-darker;
|
|
}
|
|
.dashboard-info-value {
|
|
color: $foreground-text;
|
|
}
|
|
.dashboard-capacity-header {
|
|
color: $foreground-text;
|
|
}
|
|
.mat-progress-bar.this-channel-bar .mat-progress-bar-fill::after {
|
|
background-color: mat.get-color-from-palette($accent, A200);
|
|
}
|
|
.mat-progress-bar.this-channel-bar .mat-progress-bar-buffer {
|
|
background-color: mat.get-color-from-palette($accent, 400);
|
|
}
|
|
.color-primary {
|
|
color: $primary-darker !important;
|
|
}
|
|
.dot-primary {
|
|
background-color: $primary-darker !important;
|
|
}
|
|
.dot-primary-lighter {
|
|
background-color: $primary-color !important;
|
|
}
|
|
.mat-stepper-vertical {
|
|
background-color: $dark-card-background-color;
|
|
}
|
|
.spinner-container h2 {
|
|
color: $primary-darker;
|
|
}
|
|
table.mat-mdc-table {
|
|
& thead tr th {
|
|
color: $foreground-base;
|
|
}
|
|
}
|
|
svg {
|
|
& .boltz-icon { stroke:#FFFFFF; stroke-width:4; }
|
|
& .boltz-icon-fill { fill: #FFFFFF; }
|
|
& .stroke-color-thicker { stroke:#B6B6B6; stroke-width: 15.3333; stroke-linecap:"round"; stroke-linejoin:"round"; }
|
|
& .stroke-color-thick { stroke:#B6B6B6; stroke-width: 13.4583; stroke-linecap:"round"; stroke-linejoin:"round"; }
|
|
& .stroke-color { stroke:#B6B6B6; stroke-width: 12.5; stroke-miterlimit: 10; stroke-linecap:"round"; stroke-linejoin:"round"; }
|
|
& .stroke-color-thin { stroke:#B6B6B6; stroke-width: 11.625; stroke-miterlimit: 10; stroke-linecap:"round"; stroke-linejoin:"round"; }
|
|
& .stroke-color-thiner { stroke:#B6B6B6; stroke-width: 10.125; stroke-linecap:"round"; stroke-linejoin:"round"; }
|
|
& .stroke-color-thinest { stroke:#B6B6B6; stroke-width: 9.40381; stroke-linecap:"round"; stroke-linejoin:"round"; }
|
|
& .stroke-color-primary-lighter { stroke: $primary-lighter; }
|
|
& .stroke-color-primary { stroke: $primary-color; }
|
|
& .fill-color-boltz-bk { fill: #171717; }
|
|
& .fill-color-0 { fill: #171717; }
|
|
& .fill-color-1 { fill: #232323; }
|
|
& .fill-color-2 { fill: #222222; }
|
|
& .fill-color-3 { fill: #3A3A3A; }
|
|
& .fill-color-4 { fill: #383838; }
|
|
& .fill-color-5 { fill: #555555; }
|
|
& .fill-color-6 { fill: #5B5B5B; }
|
|
& .fill-color-7 { fill: #202020; }
|
|
& .fill-color-8 { fill: #242424; }
|
|
& .fill-color-9 { fill: #262626; }
|
|
& .fill-color-10 { fill: #1A1A1A; }
|
|
& .fill-color-11 { fill: #171717; }
|
|
& .fill-color-12 { fill: #CCCCCC; }
|
|
& .fill-color-13 { fill: #ADADAD; }
|
|
& .fill-color-14 { fill: #ABABAB; }
|
|
& .fill-color-15 { fill: #B6B6B6; }
|
|
& .fill-color-16 { fill: #707070; }
|
|
& .fill-color-17 { fill: #7C7C7C; }
|
|
& .fill-color-18 { fill: #5A5A5A; }
|
|
& .fill-color-19 { fill: #4A4A4A; }
|
|
& .fill-color-20 { fill: #9F9F9F; }
|
|
& .fill-color-21 { fill: #CACACA; }
|
|
& .fill-color-22 { fill: #7F7F7F; }
|
|
& .fill-color-23 { fill: #777777; }
|
|
& .fill-color-24 { fill: #5E5E5E; }
|
|
& .fill-color-25 { fill: #252525; }
|
|
& .fill-color-26 { fill: #6F6F6F; }
|
|
& .fill-color-27 { fill: #000000; }
|
|
& .fill-color-28 { fill: #313131; }
|
|
& .fill-color-29 { fill: #E7E7E7; }
|
|
& .fill-color-30 { fill: #FFFFFF; }
|
|
& .fill-color-31 { fill: $primary-color; }
|
|
& .fill-color-green-light { fill: #6ECB48; }
|
|
& .fill-color-primary { fill: $primary-color; }
|
|
& .fill-color-primary-lighter { fill: $primary-lighter; }
|
|
& .fill-color-primary-darker { fill: $primary-darker; }
|
|
}
|
|
.mat-select-value, .mat-select-arrow {
|
|
color: $foreground-text;
|
|
}
|
|
|
|
.mat-form-field-disabled {
|
|
& .mat-form-field-underline{
|
|
background-color: transparent;
|
|
background-image: linear-gradient(90deg,rgba(0,0,0,.42) 0,rgba(0,0,0,.42) 33%,transparent 0);
|
|
background-size: 5px 100%;
|
|
height: 1.4px;
|
|
}
|
|
& .mat-form-field-flex {
|
|
background-color: $hover-background-dark;
|
|
}
|
|
}
|
|
|
|
.mat-slide-toggle-bar, .mat-step-header .mat-step-icon:not(.mat-step-icon-selected) {
|
|
background-color: mat.get-color-from-palette($background, lightest-background);
|
|
}
|
|
|
|
.mat-slide-toggle.mat-disabled {
|
|
opacity: 1;
|
|
& .mat-slide-toggle-content {
|
|
background-color: $hover-background-dark;
|
|
}
|
|
& .mat-slide-toggle-label {
|
|
cursor: not-allowed !important;
|
|
}
|
|
}
|
|
|
|
.mat-button.mat-primary, .mat-icon-button.mat-primary, .mat-stroked-button.mat-primary {
|
|
color: $primary-darker;
|
|
}
|
|
|
|
tr.alert.alert-warn {
|
|
& .mat-cell, .mat-header-cell, .mat-footer-cell {
|
|
color: $yellow-alert-color;
|
|
}
|
|
}
|
|
.material-icons {
|
|
&.info-icon {
|
|
font-size: 100%;
|
|
color: $primary-darker;
|
|
&.info-icon-primary {
|
|
color: $primary-darker;
|
|
}
|
|
&.info-icon-text {
|
|
color: $foreground-text;
|
|
}
|
|
}
|
|
}
|
|
ngx-charts-bar-vertical, ngx-charts-bar-vertical-2d {
|
|
& text {
|
|
fill: $foreground-text;
|
|
}
|
|
&.one-color {
|
|
& .ngx-charts .chart.bar-chart g g path {
|
|
fill: $primary-darker;
|
|
}
|
|
}
|
|
&.two-color {
|
|
& .ngx-charts .chart.bar-chart g g:nth-child(2n+1) path {
|
|
fill: mat.get-color-from-palette($primary, 800);
|
|
}
|
|
& .ngx-charts .chart.bar-chart g g:nth-child(2n+2) path {
|
|
fill: $primary-darker;
|
|
}
|
|
}
|
|
}
|
|
}
|