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.
561 lines
14 KiB
SCSS
561 lines
14 KiB
SCSS
@import "constants";
|
|
|
|
@mixin change-theme($theme) {
|
|
$primary: map-get($theme, primary);
|
|
$primary-color: mat-color($primary);
|
|
$primary-lighter: mat-color($primary, lighter);
|
|
$primary-darker: mat-color($primary, darker);
|
|
$accent: map-get($theme, accent);
|
|
$accent-color: mat-color($accent);
|
|
$warn: map-get($theme, warn);
|
|
$warn-color: mat-color($warn);
|
|
$foreground: map-get($theme, foreground);
|
|
$foreground-base: mat-color($foreground, base); // 1
|
|
$foreground-text: mat-color($foreground, text); //.87
|
|
$foreground-secondary-text: mat-color($foreground, secondary-text); // .54
|
|
$foreground-disabled: mat-color($foreground, disabled); // .38
|
|
$foreground-divider: mat-color($foreground, divider); // .12
|
|
$background: map-get($theme, background);
|
|
$background-color: mat-color($background, card);
|
|
$hover-background: rgba(0, 0, 0, 0.04);
|
|
$hover-background-white: rgba(255, 255, 255, 0.06);
|
|
|
|
.bg-primary {
|
|
@include _mat-toolbar-color($primary);
|
|
}
|
|
|
|
.bg-accent {
|
|
@include _mat-toolbar-color($accent);
|
|
}
|
|
|
|
.bg-warn {
|
|
@include _mat-toolbar-color($warn);
|
|
}
|
|
|
|
&.night {
|
|
.rtl-top-toolbar {
|
|
border-bottom: 1px solid $background-color;
|
|
}
|
|
.mat-tab-label {
|
|
&.mat-tab-label-active {
|
|
color: $primary-darker;
|
|
& .tab-badge .mat-badge-content {
|
|
background: $primary-darker;
|
|
}
|
|
}
|
|
& .tab-badge .mat-badge-content {
|
|
color: mat-color($background, dialog);
|
|
background: $foreground-secondary-text;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
.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 {
|
|
color: $primary-darker;
|
|
cursor: pointer;
|
|
background: $hover-background-white;
|
|
& .ng-fa-icon, & .mat-icon {
|
|
color: $primary-darker;
|
|
}
|
|
& .sidenav-img svg {
|
|
fill: $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-color($primary, 600);
|
|
}
|
|
.chart-legend .legend-label:hover, .chart-legend .legend-label .active .legend-label-text {
|
|
color: $foreground-text !important;
|
|
}
|
|
.cdk-overlay-dark-backdrop {
|
|
background: rgba(255, 255, 255, 0.32);
|
|
}
|
|
.mat-tree {
|
|
background: mat-color($background, dialog);
|
|
}
|
|
.mat-tab-label, .mat-tab-link {
|
|
color: $foreground-secondary-text;
|
|
}
|
|
.dashboard-card .mat-card-header .mat-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-color($accent, A200);
|
|
}
|
|
.mat-progress-bar.this-channel-bar .mat-progress-bar-buffer {
|
|
background-color: mat-color($accent, 400);
|
|
}
|
|
.color-primary {
|
|
color: $primary-darker !important;
|
|
}
|
|
.mat-expansion-panel {
|
|
|
|
}
|
|
}
|
|
|
|
&.day {
|
|
.mat-progress-bar.this-channel-bar .mat-progress-bar-fill::after {
|
|
background-color: mat-color($accent, 700);
|
|
}
|
|
.mat-progress-bar.this-channel-bar .mat-progress-bar-buffer {
|
|
background-color: mat-color($accent, 200);
|
|
}
|
|
.rtl-top-toolbar {
|
|
border-bottom: 1px solid white;
|
|
}
|
|
.mat-tab-label {
|
|
&.mat-tab-label-active {
|
|
color: $primary-color;
|
|
& .tab-badge .mat-badge-content {
|
|
background: $primary-color;
|
|
}
|
|
}
|
|
& .tab-badge .mat-badge-content {
|
|
background: $foreground-secondary-text;
|
|
}
|
|
}
|
|
.ng-fa-icon, .mat-nested-tree-node-parent .mat-icon, .mat-form-field-suffix {
|
|
color: $foreground-secondary-text;
|
|
}
|
|
.mat-stroked-button.mat-primary {
|
|
border-color: $primary-color;
|
|
}
|
|
.mat-stroked-button.mat-accent {
|
|
border-color: $accent-color;
|
|
}
|
|
.mat-stroked-button.mat-warn {
|
|
border-color: $warn-color;
|
|
}
|
|
.selected-color {
|
|
border-color: $primary-lighter;
|
|
}
|
|
.mat-stroked-button.mat-primary:hover .mat-button-focus-overlay {
|
|
opacity: 0.06;
|
|
}
|
|
.page-title-container, .page-sub-title-container {
|
|
& .page-title-img {
|
|
color: $foreground-disabled;
|
|
}
|
|
color: $foreground-secondary-text;
|
|
}
|
|
.cc-data-block .cc-data-title {
|
|
color: $primary-color;
|
|
}
|
|
.active-link, .active-link .fa-icon-small {
|
|
color: $primary-color;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
fill: $primary-color;
|
|
}
|
|
.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 {
|
|
color: $primary-color;
|
|
cursor: pointer;
|
|
background: $hover-background;
|
|
& .ng-fa-icon, & .mat-icon {
|
|
color: $primary-color;
|
|
}
|
|
& .sidenav-img svg {
|
|
fill: $primary-color;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
.mat-progress-bar-fill::after {
|
|
background-color: mat-color($primary, 900);
|
|
}
|
|
.modal-qr-code-container {
|
|
background: $foreground-divider;
|
|
}
|
|
.mat-tab-label, .mat-tab-link {
|
|
color: $foreground-secondary-text;
|
|
}
|
|
.mat-card, .mat-card:not([class*='mat-elevation-z']){
|
|
box-shadow: none;
|
|
border: 1px solid $foreground-divider;
|
|
}
|
|
.dashboard-card .mat-card-header .mat-card-title {
|
|
color: $foreground-disabled;
|
|
& .ng-fa-icon {
|
|
color: $foreground-disabled;
|
|
}
|
|
}
|
|
& .dashboard-info-title {
|
|
color: $primary-color;
|
|
}
|
|
& .dashboard-info-value {
|
|
color: $foreground-secondary-text;
|
|
}
|
|
.color-primary {
|
|
color: $primary-color !important;
|
|
}
|
|
.mat-expansion-panel.flat-expansion-panel {
|
|
border: 1px solid $foreground-divider;
|
|
}
|
|
}
|
|
|
|
.mat-expansion-panel.flat-expansion-panel {
|
|
box-shadow: none;
|
|
padding: 0;
|
|
border-radius: 4px;
|
|
background: none;
|
|
}
|
|
|
|
.mat-progress-bar-buffer {
|
|
background-color: mat-color($primary, 100);
|
|
}
|
|
|
|
.foreground-text {
|
|
color: $foreground-text !important;
|
|
white-space: pre-line;
|
|
overflow-wrap: break-word;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.foreground-secondary-text {
|
|
color: $foreground-secondary-text !important;
|
|
white-space: pre-line;
|
|
overflow-wrap: break-word;
|
|
word-break: break-all;
|
|
min-height: 2rem;
|
|
}
|
|
|
|
.foreground.mat-progress-spinner circle, .foreground.mat-spinner circle {
|
|
stroke: $foreground-text;
|
|
}
|
|
|
|
.mat-toolbar-row, .mat-toolbar-single-row {
|
|
height: $toolbar-height;
|
|
}
|
|
|
|
.lnd-info{
|
|
border-bottom: 1px solid $foreground-divider;
|
|
}
|
|
|
|
a {
|
|
color: $primary-color;
|
|
}
|
|
|
|
.horizontal-button .fa-icon-small {
|
|
fill: white;
|
|
color: white;
|
|
}
|
|
|
|
.h-active-link {
|
|
border-bottom: 2px solid white;
|
|
}
|
|
|
|
.mat-icon-36 {
|
|
color: $foreground-secondary-text;
|
|
}
|
|
|
|
.mat-primary .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple),
|
|
.mat-primary .mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {
|
|
background: none;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.validation-error-icon {
|
|
position: relative;
|
|
top: 2px;
|
|
left: 0.4rem;
|
|
}
|
|
|
|
.genseed-message {
|
|
width:10%;
|
|
color: $primary-color;
|
|
}
|
|
|
|
.page-title-container, .page-sub-title-container {
|
|
color: $foreground-text;
|
|
}
|
|
|
|
.material-icons.primary { color: $primary-color; }
|
|
|
|
.material-icons.accent { color: $accent-color; }
|
|
|
|
.validation-error-message {
|
|
position: relative;
|
|
margin-top: 0.5rem;
|
|
width:100%;
|
|
color: $warn-color;
|
|
}
|
|
|
|
.mat-vertical-content {
|
|
padding: 0 0.4rem 0 1.2rem;
|
|
}
|
|
|
|
.row-disabled {
|
|
background-color: gray;
|
|
.mat-icon {
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
.mat-menu-panel {
|
|
min-width: 6.4rem;
|
|
}
|
|
|
|
.horizontal-button {
|
|
height: $toolbar-height;
|
|
border-radius: 0;
|
|
&:hover {
|
|
background: $primary-lighter;
|
|
color: $accent-color;
|
|
}
|
|
}
|
|
|
|
.mat-stroked-button.mat-primary.horizontal-button-show {
|
|
line-height: 2.4rem;
|
|
border-radius: 12rem;
|
|
background-color: white;
|
|
color: $primary-color;
|
|
&:hover {
|
|
@include mat-elevation(4);
|
|
}
|
|
&:hover .mat-button-focus-overlay {
|
|
opacity: 0.09;
|
|
}
|
|
}
|
|
|
|
.cc-data-block {
|
|
& .cc-data-title {
|
|
font-size: 80%;
|
|
font-weight: 500;
|
|
}
|
|
& .cc-data-value {
|
|
font-size: 120%;
|
|
color: $foreground-secondary-text;
|
|
margin-right: 4rem;
|
|
min-width: 7rem;
|
|
}
|
|
}
|
|
|
|
.mat-cell, .mat-header-cell, .mat-footer-cell {
|
|
border-bottom-width: 1px;
|
|
border-bottom-style: solid;
|
|
border-bottom-color: $foreground-divider;
|
|
}
|
|
|
|
table.mat-table {
|
|
border: 1px solid $foreground-divider;
|
|
border-radius: 4px;
|
|
background: none;
|
|
thead tr th {
|
|
color: $foreground-base;
|
|
}
|
|
}
|
|
|
|
.bordered-box {
|
|
border: 1px solid $foreground-divider;
|
|
border-radius: 4px;
|
|
background: none;
|
|
}
|
|
|
|
.mat-expansion-panel {
|
|
border: 1px solid $foreground-divider;
|
|
}
|
|
|
|
.more-button {
|
|
color: $foreground-disabled;
|
|
}
|
|
|
|
.dashboard-tabs-group {
|
|
& .mat-tab-label:last-child {
|
|
padding-right: 0;
|
|
& .more-button {
|
|
position: absolute;
|
|
right: 0
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-info-header {
|
|
color: $foreground-text;
|
|
font-weight: 500;
|
|
& .page-title-img svg {
|
|
color: $foreground-text;
|
|
}
|
|
}
|
|
|
|
.tab-badge {
|
|
& .mat-badge-content {
|
|
width: $dot-size * 1.5;
|
|
height: $dot-size * 1.5;
|
|
border-radius: $dot-size * 1.5;
|
|
line-height: $dot-size * 1.5;
|
|
margin-top: 1.2rem;
|
|
font-size: 80%;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.table-actions-select {
|
|
padding: 0.5rem 1rem;
|
|
margin: 0.7rem 0;
|
|
& .mat-select-placeholder {
|
|
color: $foreground-text;
|
|
}
|
|
}
|
|
|
|
// .rtl-snack-bar {
|
|
// &.mat-snack-bar-container {
|
|
// background-color: $warn-color;
|
|
// }
|
|
// & .mat-simple-snackbar {
|
|
// justify-content: center;
|
|
// align-content: center;
|
|
// align-items: center;
|
|
// background-color: $warn-color;
|
|
// }
|
|
// }
|
|
|
|
.mat-select-panel .mat-option.mat-active {
|
|
background: none;
|
|
}
|
|
|
|
.mat-tab-label {
|
|
opacity: 1;
|
|
}
|
|
|
|
.mat-drawer-inner-container {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.balances-info-pie-chart {
|
|
& .legend-label:nth-child(1) .legend-label-color {
|
|
background-color: mat-color($primary, 200) !important;
|
|
}
|
|
|
|
& .legend-label:nth-child(2) .legend-label-color {
|
|
background-color: mat-color($primary, 600) !important;
|
|
}
|
|
}
|
|
|
|
.dashboard-card {
|
|
& .dashboard-divider {
|
|
border-top-width: 2px;
|
|
}
|
|
& .mat-card-header .mat-card-title {
|
|
font-size: 180%;
|
|
margin-bottom: 2.4rem;
|
|
}
|
|
& .dashboard-info-value {
|
|
font-weight: 700;
|
|
}
|
|
& .dashboard-info-title {
|
|
font-weight: 500;
|
|
}
|
|
& .dashboard-node-dot {
|
|
margin: 0 0 -2px 1rem;
|
|
border: 1px solid $foreground-secondary-text;
|
|
}
|
|
& .dashboard-node-square {
|
|
display: inline-flex;
|
|
width: $dot-size;
|
|
height: $dot-size;
|
|
margin-right: 1rem;
|
|
}
|
|
& .dashboard-capacity-header {
|
|
font-size: 130%;
|
|
font-weight: 700;
|
|
color: $foreground-secondary-text;
|
|
&.this-channel-capacity {
|
|
font-size: 120%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.alert {
|
|
&.alert-info {
|
|
border: 1px solid $blue-color;
|
|
background-color: $blue-background-color;
|
|
color: $blue-color;
|
|
& .alert-icon.ng-fa-icon {
|
|
color: $blue-color;
|
|
}
|
|
}
|
|
|
|
&.alert-warn {
|
|
border: 1px solid $yellow-alert-color;
|
|
background-color: $yellow-background-color;
|
|
color: $yellow-alert-color;
|
|
& .alert-icon.ng-fa-icon {
|
|
color: $yellow-alert-color;
|
|
}
|
|
& a {
|
|
color: $yellow-alert-color;
|
|
}
|
|
}
|
|
|
|
&.alert-danger {
|
|
border: 1px solid $red-color;
|
|
background-color: $red-background-color;
|
|
color: $red-color;
|
|
& .alert-icon.ng-fa-icon {
|
|
color: $red-color;
|
|
}
|
|
}
|
|
|
|
&.alert-success {
|
|
border: 1px solid $green-color;
|
|
background-color: $green-background-color;
|
|
color: $green-color;
|
|
& .alert-icon.ng-fa-icon {
|
|
color: $green-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.help-expansion {
|
|
& .mat-expansion-panel-header, & .mat-expansion-panel-header-title {
|
|
font-weight: 500;
|
|
color: $foreground-secondary-text;
|
|
}
|
|
& .mat-expansion-indicator::after, & .mat-expansion-panel-content, & .mat-expansion-panel-header-description {
|
|
color: $foreground-secondary-text;
|
|
}
|
|
}
|
|
}
|