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.
1112 lines
23 KiB
SCSS
1112 lines
23 KiB
SCSS
@use '@angular/material' as mat;
|
|
@use 'sass:math' as math;
|
|
@import "constants";
|
|
@import "mixins";
|
|
|
|
@mixin theme-color($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-expansion-panel.flat-expansion-panel {
|
|
box-shadow: none;
|
|
padding: 0;
|
|
border-radius: 2px;
|
|
background: none;
|
|
}
|
|
|
|
.mat-progress-bar-buffer {
|
|
background-color: mat.get-color-from-palette($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;
|
|
}
|
|
|
|
.border-primary {
|
|
border: 1px solid $primary-color;
|
|
}
|
|
|
|
.border-accent {
|
|
border: 1px solid $accent-color;
|
|
}
|
|
|
|
.border-warn {
|
|
border: 1px solid $warn-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: $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;
|
|
}
|
|
}
|
|
|
|
.mat-dialog-container {
|
|
padding: 0;
|
|
overflow: hidden;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.mat-button, .mat-icon-button, .mat-stroked-button, .mat-flat-button {
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.cc-data-block {
|
|
& .cc-data-title {
|
|
font-size: 80%;
|
|
font-weight: 500;
|
|
min-width: 14rem;
|
|
}
|
|
& .cc-data-value {
|
|
font-size: 120%;
|
|
color: $foreground-secondary-text;
|
|
}
|
|
}
|
|
|
|
.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: 2px;
|
|
background: none;
|
|
thead tr th {
|
|
color: $foreground-base;
|
|
}
|
|
&.error-border {
|
|
border: 1px solid red;
|
|
box-shadow: 0 3px 1px -2px rgba(255,0,0,.2), 0 2px 2px 0 rgba(255,0,0,.14), 0 1px 5px 0 rgba(255,0,0,.12) !important;
|
|
}
|
|
}
|
|
|
|
.bordered-box {
|
|
border: 1px solid $foreground-divider;
|
|
border-radius: 2px;
|
|
background: none;
|
|
&.read-only {
|
|
background-color: $hover-background;
|
|
}
|
|
}
|
|
|
|
.mat-expansion-panel {
|
|
border: 1px solid $foreground-divider;
|
|
}
|
|
|
|
.more-button {
|
|
color: $foreground-disabled;
|
|
}
|
|
|
|
.mat-icon-button.more-button-short {
|
|
height: 1.6rem;
|
|
line-height: 1.6rem;
|
|
& .material-icons {
|
|
font-size: 1.6rem;
|
|
}
|
|
& .mat-icon {
|
|
line-height: 1.6rem;
|
|
}
|
|
}
|
|
|
|
.dashboard-tabs-group {
|
|
& .mat-tab-label:last-child {
|
|
padding-right: 0;
|
|
& .more-button {
|
|
position: absolute;
|
|
right: 0.4rem;
|
|
top: 0.4rem;
|
|
max-width: 2rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-info-header {
|
|
color: $foreground-text;
|
|
font-weight: 500;
|
|
& .page-title-img svg {
|
|
color: $foreground-text;
|
|
}
|
|
}
|
|
|
|
.mat-badge-medium.mat-badge-above .mat-badge-content {
|
|
top: 1px;
|
|
}
|
|
|
|
.tab-badge {
|
|
& .mat-badge-content {
|
|
width: auto;
|
|
min-width: $badge-size;
|
|
height: $badge-size;
|
|
line-height: $badge-size;
|
|
border-radius: $badge-size * 1.2;
|
|
margin: auto;
|
|
padding: 0.5rem;
|
|
font-size: 80%;
|
|
font-weight: 500;
|
|
overflow: visible;
|
|
text-overflow: inherit;
|
|
}
|
|
}
|
|
|
|
.mat-badge-medium.mat-badge-after .mat-badge-content {
|
|
right: unset;
|
|
margin-left: 1rem !important;
|
|
@include for_screensize(phone) {
|
|
margin-left: 0 !important;
|
|
}
|
|
}
|
|
|
|
.table-actions-select {
|
|
padding: 0.5rem 1rem;
|
|
margin: 0.7rem 0;
|
|
min-width: 10rem;
|
|
width: 10rem;
|
|
float: right;
|
|
& .mat-select-placeholder {
|
|
color: $foreground-text;
|
|
}
|
|
}
|
|
|
|
.mat-select-panel .mat-option.mat-active {
|
|
background: none;
|
|
}
|
|
|
|
.mat-tab-label {
|
|
opacity: 1;
|
|
padding: 0;
|
|
min-width: 18rem;
|
|
}
|
|
|
|
.mat-drawer-inner-container {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mat-fa-icon-button {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
line-height: 2rem;
|
|
}
|
|
|
|
.balances-info-pie-chart {
|
|
& .legend-label:nth-child(1) .legend-label-color {
|
|
background-color: mat.get-color-from-palette($primary, 200) !important;
|
|
}
|
|
|
|
& .legend-label:nth-child(2) .legend-label-color {
|
|
background-color: mat.get-color-from-palette($primary, 600) !important;
|
|
}
|
|
}
|
|
|
|
.dashboard-card {
|
|
& .dashboard-divider {
|
|
border-top-width: 2px;
|
|
}
|
|
& .mat-card-header .mat-card-title {
|
|
min-height: 4rem;
|
|
font-size: 180%;
|
|
margin-bottom: 0 0 0.8rem 0;
|
|
}
|
|
& .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%;
|
|
}
|
|
}
|
|
& .mat-icon-button.more-button {
|
|
width: 2rem;
|
|
max-width: 2rem;
|
|
}
|
|
}
|
|
|
|
.color-warn {
|
|
color: $warn-color;
|
|
}
|
|
|
|
.fill-warn {
|
|
fill: $warn-color;
|
|
}
|
|
|
|
.alert {
|
|
border: 1px solid $foreground-secondary-text;
|
|
color: $foreground-secondary-text;
|
|
background-color: $hover-background;
|
|
|
|
&.alert-info {
|
|
border: 1px solid $blue-color;
|
|
background-color: $blue-background-color;
|
|
color: $blue-color;
|
|
& .alert-icon.ng-fa-icon {
|
|
color: $blue-color;
|
|
}
|
|
& a {
|
|
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;
|
|
overflow-wrap: break-word;
|
|
& .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;
|
|
}
|
|
}
|
|
|
|
.mat-form-field-appearance-legacy .mat-form-field-prefix .mat-datepicker-toggle-default-icon,
|
|
.mat-form-field-appearance-legacy .mat-form-field-suffix .mat-datepicker-toggle-default-icon {
|
|
width: 1.8rem;
|
|
}
|
|
|
|
.button-link-dashboard {
|
|
line-height: 0px;
|
|
font-weight: 600;
|
|
text-decoration: underline;
|
|
padding: 0;
|
|
}
|
|
|
|
.failed-status {
|
|
color: $warn-color;
|
|
}
|
|
|
|
.material-icons.icon-failed-status {
|
|
font-size: 1.8rem;
|
|
fill: $warn-color;
|
|
height: 2rem;
|
|
}
|
|
|
|
.svg-fill-primary {
|
|
fill: $primary-color;
|
|
}
|
|
|
|
.svg-fill-primary-lighter {
|
|
fill: $primary-lighter;
|
|
}
|
|
|
|
.mat-expansion-panel-header[aria-disabled='true'] {
|
|
color: $foreground-text;
|
|
}
|
|
|
|
& .mat-chip-list-wrapper input.mat-input-element, .mat-chip-list-wrapper .mat-standard-chip {
|
|
margin: $gap math.div($gap, 4);
|
|
font-size: 80%;
|
|
min-height: 2.4rem;
|
|
}
|
|
|
|
ngx-charts-bar-vertical, ngx-charts-bar-vertical-2d {
|
|
& text {
|
|
fill: $foreground-text;
|
|
}
|
|
.ngx-charts .grid-panel.odd rect {
|
|
fill: none;
|
|
}
|
|
}
|
|
.mat-paginator-container {
|
|
padding: 0;
|
|
}
|
|
|
|
.invoice-animation-container {
|
|
position: relative;
|
|
width: 100%;
|
|
-moz-transform: translateY(0%);
|
|
-ms-transform: translateY(0%);
|
|
-webkit-transform: translateY(0%);
|
|
transform: translateY(0%);
|
|
}
|
|
|
|
.invoice-animation-div {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.invoice-animation-div .particles-circle {
|
|
position: absolute;
|
|
background-color: $primary-color;
|
|
width: 30px;
|
|
height: 30px;
|
|
top: 10px;
|
|
left: 50%;
|
|
margin-top: -13px;
|
|
margin-left: -45%;
|
|
z-index: -1;
|
|
-moz-border-radius: 50%;
|
|
-webkit-border-radius: 50%;
|
|
border-radius: 50%;
|
|
-moz-transform: scale(0);
|
|
-ms-transform: scale(0);
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(odd) {
|
|
border: solid 2px $primary-color;
|
|
background-color: transparent;
|
|
}
|
|
@keyframes particles-1 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: 199px;
|
|
top: 201px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(1) {
|
|
animation: particles-1 2.5s 0.025s;
|
|
}
|
|
@keyframes particles-2 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: -40px;
|
|
top: 82px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(2) {
|
|
animation: particles-2 2.5s 0.05s;
|
|
}
|
|
@keyframes particles-3 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: 162px;
|
|
top: 109px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(3) {
|
|
animation: particles-3 2.5s 0.075s;
|
|
}
|
|
@keyframes particles-4 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: 223px;
|
|
top: 78px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(4) {
|
|
animation: particles-4 2.5s 0.1s;
|
|
}
|
|
@keyframes particles-5 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: 184px;
|
|
top: 113px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(5) {
|
|
animation: particles-5 2.5s 0.125s;
|
|
}
|
|
@keyframes particles-6 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: -42px;
|
|
top: -238px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(6) {
|
|
animation: particles-6 2.5s 0.15s;
|
|
}
|
|
@keyframes particles-7 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: 150px;
|
|
top: -98px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(7) {
|
|
animation: particles-7 2.5s 0.175s;
|
|
}
|
|
@keyframes particles-8 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: 62px;
|
|
top: 225px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(8) {
|
|
animation: particles-8 2.5s 0.2s;
|
|
}
|
|
@keyframes particles-9 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: 113px;
|
|
top: 86px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(9) {
|
|
animation: particles-9 2.5s 0.225s;
|
|
}
|
|
@keyframes particles-10 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: 229px;
|
|
top: -127px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(10) {
|
|
animation: particles-10 2.5s 0.25s;
|
|
}
|
|
@keyframes particles-11 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: 243px;
|
|
top: -106px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(11) {
|
|
animation: particles-11 2.5s 0.275s;
|
|
}
|
|
@keyframes particles-12 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: -168px;
|
|
top: 138px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(12) {
|
|
animation: particles-12 2.5s 0.3s;
|
|
}
|
|
@keyframes particles-13 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: -124px;
|
|
top: 62px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(13) {
|
|
animation: particles-13 2.5s 0.325s;
|
|
}
|
|
@keyframes particles-14 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: 246px;
|
|
top: 30px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(14) {
|
|
animation: particles-14 2.5s 0.35s;
|
|
}
|
|
@keyframes particles-15 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: -22px;
|
|
top: -171px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(15) {
|
|
animation: particles-15 2.5s 0.375s;
|
|
}
|
|
@keyframes particles-16 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: -144px;
|
|
top: 115px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(16) {
|
|
animation: particles-16 2.5s 0.4s;
|
|
}
|
|
@keyframes particles-17 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: 209px;
|
|
top: 84px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(17) {
|
|
animation: particles-17 2.5s 0.425s;
|
|
}
|
|
@keyframes particles-18 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: 84px;
|
|
top: -190px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(18) {
|
|
animation: particles-18 2.5s 0.45s;
|
|
}
|
|
@keyframes particles-19 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: -94px;
|
|
top: 208px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(19) {
|
|
animation: particles-19 2.5s 0.475s;
|
|
}
|
|
@keyframes particles-20 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: 147px;
|
|
top: 203px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(20) {
|
|
animation: particles-20 2.5s 0.5s;
|
|
}
|
|
@keyframes particles-21 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: 178px;
|
|
top: 206px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(21) {
|
|
animation: particles-21 2.5s 0.525s;
|
|
}
|
|
@keyframes particles-22 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: -10px;
|
|
top: -226px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(22) {
|
|
animation: particles-22 2.5s 0.55s;
|
|
}
|
|
@keyframes particles-23 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: 3px;
|
|
top: 222px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(23) {
|
|
animation: particles-23 2.5s 0.575s;
|
|
}
|
|
@keyframes particles-24 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: -182px;
|
|
top: -44px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(24) {
|
|
animation: particles-24 2.5s 0.6s;
|
|
}
|
|
@keyframes particles-25 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: -146px;
|
|
top: 166px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(25) {
|
|
animation: particles-25 2.5s 0.625s;
|
|
}
|
|
@keyframes particles-26 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: 144px;
|
|
top: 218px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(26) {
|
|
animation: particles-26 2.5s 0.65s;
|
|
}
|
|
@keyframes particles-27 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: 48px;
|
|
top: 222px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(27) {
|
|
animation: particles-27 2.5s 0.675s;
|
|
}
|
|
@keyframes particles-28 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: -48px;
|
|
top: 50px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(28) {
|
|
animation: particles-28 2.5s 0.7s;
|
|
}
|
|
@keyframes particles-29 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: -228px;
|
|
top: -15px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(29) {
|
|
animation: particles-29 2.5s 0.725s;
|
|
}
|
|
@keyframes particles-30 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: 91px;
|
|
top: -199px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(30) {
|
|
animation: particles-30 2.5s 0.75s;
|
|
}
|
|
@keyframes particles-31 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: -40px;
|
|
top: 104px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(31) {
|
|
animation: particles-31 2.5s 0.775s;
|
|
}
|
|
@keyframes particles-32 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: -102px;
|
|
top: 4px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(32) {
|
|
animation: particles-32 2.5s 0.8s;
|
|
}
|
|
@keyframes particles-33 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: -26px;
|
|
top: -89px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(33) {
|
|
animation: particles-33 2.5s 0.825s;
|
|
}
|
|
@keyframes particles-34 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: -151px;
|
|
top: -149px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(34) {
|
|
animation: particles-34 2.5s 0.85s;
|
|
}
|
|
@keyframes particles-35 {
|
|
from {
|
|
transform: scale(1);
|
|
visibility: visible;
|
|
}
|
|
to {
|
|
left: 186px;
|
|
top: 200px;
|
|
transform: scale(0);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.invoice-animation-div .particles-circle:nth-of-type(35) {
|
|
animation: particles-35 2.5s 0.875s;
|
|
}
|
|
|
|
.wiggle {
|
|
animation: 0.5s wiggle ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes wiggle {
|
|
0% {
|
|
transform: rotate(-3deg);
|
|
}
|
|
20% {
|
|
transform: rotate(20deg);
|
|
}
|
|
40% {
|
|
transform: rotate(-15deg);
|
|
}
|
|
60% {
|
|
transform: rotate(5deg);;
|
|
}
|
|
90% {
|
|
transform: rotate(-1deg);;
|
|
}
|
|
100% {
|
|
transform: rotate(0deg);;
|
|
}
|
|
}
|
|
|
|
.shockwave {
|
|
animation: shockwaveJump 1s ease-out infinite;
|
|
|
|
&:after {
|
|
@include afterBg;
|
|
animation: shockwave 1s .65s ease-out infinite;
|
|
}
|
|
|
|
&:before {
|
|
@include afterBg;
|
|
animation: shockwave 1s .5s ease-out infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes shockwaveJump {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
40% {
|
|
transform: scale(1.08);
|
|
}
|
|
50% {
|
|
transform: scale(0.98);
|
|
}
|
|
55% {
|
|
transform: scale(1.02);
|
|
}
|
|
60% {
|
|
transform: scale(0.98);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes shockwave {
|
|
0% {
|
|
transform: scale(1);
|
|
box-shadow: 0 0 2px rgba(0,0,0,0.15), inset 0 0 1px rgba(0,0,0,0.15);
|
|
}
|
|
95% {
|
|
box-shadow: 0 0 50px rgba(0,0,0,0), inset 0 0 30px rgba(0,0,0,0);
|
|
}
|
|
100% {
|
|
transform: scale(2.25);
|
|
|
|
}
|
|
}
|
|
|
|
}
|