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.
330 lines
7.6 KiB
SCSS
330 lines
7.6 KiB
SCSS
@import "constants";
|
|
|
|
@mixin change-theme($theme, $alternate-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);
|
|
$foreground: map-get($theme, foreground);
|
|
$foreground-color: mat-color($foreground);
|
|
$foreground-text: mat-color($foreground, text);
|
|
$foreground-divider: mat-color($foreground, divider);
|
|
$background: map-get($theme, background);
|
|
$alternate-primary: map-get($alternate-theme, primary);
|
|
|
|
.bg-primary {
|
|
@include _mat-toolbar-color($primary);
|
|
}
|
|
|
|
.bg-accent {
|
|
@include _mat-toolbar-color($accent);
|
|
}
|
|
|
|
.bg-warn {
|
|
@include _mat-toolbar-color($warn);
|
|
}
|
|
|
|
.btn-primary-darker {
|
|
background-color: $primary-darker;
|
|
color: $accent-color;
|
|
border-radius: 1.6rem;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.bg-alternate-primary {
|
|
@include _mat-toolbar-color($alternate-primary);
|
|
}
|
|
|
|
.toolbar-dropdown-menu {
|
|
@include _mat-toolbar-color($alternate-primary);
|
|
}
|
|
|
|
&.night {
|
|
.selected-color {
|
|
border-color: $primary-lighter;
|
|
}
|
|
}
|
|
&.day {
|
|
.ng-fa-icon, .mat-nested-tree-node-parent .mat-icon {
|
|
color: rgba(0, 0, 0, 0.6);
|
|
}
|
|
.selected-color {
|
|
border-color: $primary-darker;
|
|
}
|
|
.page-title-container {
|
|
& .page-title-img {
|
|
color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
color: rgba(0, 0, 0, 0.6);
|
|
}
|
|
}
|
|
|
|
&.small-font {
|
|
.mr-4 {
|
|
margin-right: 1rem !important;
|
|
}
|
|
.mat-menu-item, .mat-tree .mat-tree-node, .mat-tree .mat-nested-tree-node-parent {
|
|
min-height: $tree-node-height * 0.7;
|
|
height: $tree-node-height * 0.7;
|
|
}
|
|
.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) {
|
|
font-size: 1.2rem * 1.1;
|
|
}
|
|
.validation-error-icon {
|
|
font-size: 1.2rem * 1.2;
|
|
}
|
|
.genseed-message {
|
|
font-size: 1.2rem * 1.2;
|
|
}
|
|
.insecure-message {
|
|
font-size: 1.2rem * 1.2;
|
|
}
|
|
.page-title-container {
|
|
font-size: 1.2rem * 1.1;
|
|
& .page-title-img {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
font-size: 1.6rem * 1.1;
|
|
}
|
|
}
|
|
.fa-icon-small, .top-icon-small {
|
|
font-size: 1.4rem;
|
|
}
|
|
.mat-icon-button .top-toolbar-icon.icon-pinned {
|
|
padding-top: 1rem;
|
|
}
|
|
.top-toolbar-icon .top-toolbar-img, .sidenav-img svg {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
font-size: 1.5rem;
|
|
}
|
|
.horizontal-button .sidenav-img svg {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
font-size: 2.2rem;
|
|
}
|
|
}
|
|
&.regular-font {
|
|
.inner-sidenav-content {
|
|
padding-top: 1.5rem;
|
|
}
|
|
.mat-tree .mat-tree-node, .mat-tree .mat-nested-tree-node-parent {
|
|
height: $tree-node-height;
|
|
}
|
|
.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) {
|
|
font-size: 1.4rem * 1.1;
|
|
}
|
|
.validation-error-icon {
|
|
font-size: 1.4rem * 1.2;
|
|
}
|
|
.genseed-message {
|
|
font-size: 1.4rem * 1.2;
|
|
}
|
|
.insecure-message {
|
|
font-size: 1.4rem * 1.2;
|
|
}
|
|
.page-title-container {
|
|
font-size: 1.4rem * 1.1;
|
|
& .page-title-img {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
font-size: 1.6rem * 1.1;
|
|
}
|
|
}
|
|
.mat-button .mat-icon-button .top-toolbar-icon.icon-pinned {
|
|
font-size: 1.4rem;
|
|
}
|
|
.fa-icon-small, .top-icon-small {
|
|
font-size: 1.8rem;
|
|
}
|
|
.top-toolbar-icon.icon-pinned {
|
|
font-size: 1.8rem;
|
|
}
|
|
.top-toolbar-icon .top-toolbar-img, .sidenav-img svg {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
font-size: 1.8rem;
|
|
}
|
|
.horizontal-button .sidenav-img svg {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
font-size: 2.5rem;
|
|
}
|
|
}
|
|
&.large-font {
|
|
.mat-tree .mat-tree-node, .mat-tree .mat-nested-tree-node-parent {
|
|
height: $tree-node-height;
|
|
}
|
|
.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) {
|
|
font-size: 1.6rem * 1.1;
|
|
}
|
|
.validation-error-icon {
|
|
font-size: 1.6rem * 1.2;
|
|
}
|
|
.genseed-message {
|
|
font-size: 1.6rem * 1.2;
|
|
}
|
|
.insecure-message {
|
|
font-size: 1.6rem * 1.2;
|
|
}
|
|
.page-title-container {
|
|
margin-top: 0.5rem;
|
|
font-size: 1.6rem * 1.1;
|
|
& .page-title-img {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
font-size: 2.5rem * 1.1;
|
|
}
|
|
}
|
|
.fa-icon-small, .top-icon-small {
|
|
font-size: 2.2rem;
|
|
}
|
|
.top-toolbar-icon.icon-pinned {
|
|
font-size: 2rem;
|
|
}
|
|
.top-toolbar-icon .top-toolbar-img, .sidenav-img svg {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
font-size: 2rem;
|
|
}
|
|
.horizontal-button .sidenav-img svg {
|
|
width: 3.5rem;
|
|
height: 3.5rem;
|
|
font-size: 3rem;
|
|
}
|
|
}
|
|
|
|
.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, .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 {
|
|
color: $primary-color;
|
|
cursor: pointer;
|
|
background: rgba(0, 0, 0, 0.04);
|
|
& .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, .horizontal-button .sidenav-img svg, svg.top-icon-small {
|
|
fill: $foreground-text;
|
|
}
|
|
|
|
.h-active-link {
|
|
border-bottom: 2px solid $accent-color;
|
|
}
|
|
|
|
.ngx-charts {
|
|
fill: $foreground-text;
|
|
.bar {
|
|
fill: $primary-color !important;
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
.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: $accent-color;
|
|
}
|
|
|
|
.insecure-message {
|
|
width:100%;
|
|
color: $accent-color;
|
|
}
|
|
|
|
.page-title-container {
|
|
color: $foreground-color;
|
|
}
|
|
|
|
.material-icons.primary { color: $primary-color; }
|
|
|
|
.material-icons.accent { color: $accent-color; }
|
|
|
|
.validation-error-message {
|
|
position: relative;
|
|
margin-top: 0.5rem;
|
|
width:100%;
|
|
color: $accent-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-darker;
|
|
color: $accent-color;
|
|
}
|
|
}
|
|
|
|
.horizontal-button-show {
|
|
color: $accent-color;
|
|
background: $primary-lighter;
|
|
border-radius: 12rem;
|
|
&:hover {
|
|
background: $accent-color;
|
|
color: $primary-darker;
|
|
}
|
|
}
|
|
|
|
.mat-tab-label.mat-tab-label-active {
|
|
color: $primary-darker;
|
|
}
|
|
}
|