mirror of https://github.com/ghostfolio/ghostfolio
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
498 lines
13 KiB
498 lines
13 KiB
@import './styles/bootstrap';
|
|
@import './styles/table';
|
|
|
|
@import 'node_modules/svgmap/dist/svgMap';
|
|
|
|
:root {
|
|
--dark-background: rgb(25, 25, 25);
|
|
--font-family-sans-serif: Roboto, 'Helvetica Neue', sans-serif;
|
|
--light-background: rgb(255, 255, 255);
|
|
|
|
--dark-primary-text: 0, 0, 0, 0.87;
|
|
--dark-secondary-text: 0, 0, 0, 0.54;
|
|
--dark-accent-text: 0, 0, 0, 0.87;
|
|
--dark-warn-text: 0, 0, 0, 0.87;
|
|
--dark-disabled-text: 0, 0, 0, 0.38;
|
|
--dark-dividers: 0, 0, 0, 0.12;
|
|
--dark-focused: 0, 0, 0, 0.12;
|
|
--light-primary-text: 255, 255, 255, 1;
|
|
--light-secondary-text: 255, 255, 255, 0.7;
|
|
--light-accent-text: 255, 255, 255, 1;
|
|
--light-warn-text: 255, 255, 255, 1;
|
|
--light-disabled-text: 255, 255, 255, 0.5;
|
|
--light-dividers: 255, 255, 255, 0.12;
|
|
--light-focused: 255, 255, 255, 0.12;
|
|
--palette-background-status-bar: 224, 224, 224;
|
|
--palette-background-app-bar: 245, 245, 245;
|
|
--palette-background-background: 250, 250, 250;
|
|
--palette-background-hover: 0, 0, 0;
|
|
--palette-background-hover-alpha: 0.04;
|
|
--palette-background-card: 255, 255, 255;
|
|
--palette-background-dialog: 255, 255, 255;
|
|
--palette-background-disabled-button: 0, 0, 0;
|
|
--palette-background-disabled-button-alpha: 0.12;
|
|
--palette-background-raised-button: 255, 255, 255;
|
|
--palette-background-focused-button: 0, 0, 0;
|
|
--palette-background-focused-button-alpha: 0.12;
|
|
--palette-background-selected-button: 224, 224, 224;
|
|
--palette-background-selected-disabled-button: 189, 189, 189;
|
|
--palette-background-disabled-button-toggle: 238, 238, 238;
|
|
--palette-background-unselected-chip: 224, 224, 224;
|
|
--palette-background-disabled-list-option: 238, 238, 238;
|
|
--palette-background-tooltip: 97, 97, 97;
|
|
--palette-background-status-bar-dark: 0, 0, 0;
|
|
--palette-background-app-bar-dark: 33, 33, 33;
|
|
--palette-background-background-dark: 48, 48, 48;
|
|
--palette-background-hover-dark: 255, 255, 255;
|
|
--palette-background-hover-dark-alpha: 0.04;
|
|
--palette-background-card-dark: 66, 66, 66;
|
|
--palette-background-dialog-dark: 66, 66, 66;
|
|
--palette-background-disabled-button-dark: 255, 255, 255;
|
|
--palette-background-disabled-button-dark-alpha: 0.12;
|
|
--palette-background-raised-button-dark: 66, 66, 66;
|
|
--palette-background-focused-button-dark: 255, 255, 255;
|
|
--palette-background-focused-button-dark-alpha: 0.12;
|
|
--palette-background-selected-button-dark: 33, 33, 33;
|
|
--palette-background-selected-disabled-button-dark: 66, 66, 66;
|
|
--palette-background-disabled-button-toggle-dark: 0, 0, 0;
|
|
--palette-background-unselected-chip-dark: 97, 97, 97;
|
|
--palette-background-disabled-list-option-dark: 0, 0, 0;
|
|
--palette-background-tooltip-dark: 97, 97, 97;
|
|
--palette-foreground-base: 0, 0, 0;
|
|
--palette-foreground-divider: 0, 0, 0;
|
|
--palette-foreground-divider-alpha: 0.12;
|
|
--palette-foreground-dividers: 0, 0, 0;
|
|
--palette-foreground-dividers-alpha: 0.12;
|
|
--palette-foreground-disabled: 0, 0, 0;
|
|
--palette-foreground-disabled-alpha: 0.38;
|
|
--palette-foreground-disabled-button: 0, 0, 0;
|
|
--palette-foreground-disabled-button-alpha: 0.26;
|
|
--palette-foreground-disabled-text: 0, 0, 0;
|
|
--palette-foreground-disabled-text-alpha: 0.38;
|
|
--palette-foreground-hint-text: 0, 0, 0;
|
|
--palette-foreground-hint-text-alpha: 0.38;
|
|
--palette-foreground-secondary-text: 0, 0, 0;
|
|
--palette-foreground-secondary-text-alpha: 0.54;
|
|
--palette-foreground-icon: 0, 0, 0;
|
|
--palette-foreground-icon-alpha: 0.54;
|
|
--palette-foreground-icons: 0, 0, 0;
|
|
--palette-foreground-icons-alpha: 0.54;
|
|
--palette-foreground-text: 0, 0, 0;
|
|
--palette-foreground-text-alpha: 0.87;
|
|
--palette-foreground-slider-min: 0, 0, 0;
|
|
--palette-foreground-slider-min-alpha: 0.87;
|
|
--palette-foreground-slider-off: 0, 0, 0;
|
|
--palette-foreground-slider-off-alpha: 0.26;
|
|
--palette-foreground-slider-off-active: 0, 0, 0;
|
|
--palette-foreground-slider-off-active-alpha: 0.38;
|
|
--palette-foreground-base-dark: 255, 255, 255;
|
|
--palette-foreground-divider-dark: 255, 255, 255;
|
|
--palette-foreground-divider-dark-alpha: 0.12;
|
|
--palette-foreground-dividers-dark: 255, 255, 255;
|
|
--palette-foreground-dividers-dark-alpha: 0.12;
|
|
--palette-foreground-disabled-dark: 255, 255, 255;
|
|
--palette-foreground-disabled-dark-alpha: 0.5;
|
|
--palette-foreground-disabled-button-dark: 255, 255, 255;
|
|
--palette-foreground-disabled-button-dark-alpha: 0.3;
|
|
--palette-foreground-disabled-text-dark: 255, 255, 255;
|
|
--palette-foreground-disabled-text-dark-alpha: 0.5;
|
|
--palette-foreground-hint-text-dark: 255, 255, 255;
|
|
--palette-foreground-hint-text-dark-alpha: 0.5;
|
|
--palette-foreground-secondary-text-dark: 255, 255, 255;
|
|
--palette-foreground-secondary-text-dark-alpha: 0.7;
|
|
--palette-foreground-icon-dark: 255, 255, 255;
|
|
--palette-foreground-icon-dark-alpha: 1;
|
|
--palette-foreground-icons-dark: 255, 255, 255;
|
|
--palette-foreground-icons-dark-alpha: 1;
|
|
--palette-foreground-text-dark: 255, 255, 255;
|
|
--palette-foreground-text-dark-alpha: 1;
|
|
--palette-foreground-slider-min-dark: 255, 255, 255;
|
|
--palette-foreground-slider-min-dark-alpha: 1;
|
|
--palette-foreground-slider-off-dark: 255, 255, 255;
|
|
--palette-foreground-slider-off-dark-alpha: 0.3;
|
|
--palette-foreground-slider-off-active-dark: 255, 255, 255;
|
|
--palette-foreground-slider-off-active-dark-alpha: 0.38;
|
|
|
|
--palette-primary-50: 231, 249, 249;
|
|
--palette-primary-100: 195, 241, 240;
|
|
--palette-primary-200: 155, 231, 230;
|
|
--palette-primary-300: 114, 221, 219;
|
|
--palette-primary-400: 84, 214, 212;
|
|
--palette-primary-500: 54, 207, 204;
|
|
--palette-primary-600: 48, 202, 199;
|
|
--palette-primary-700: 41, 195, 192;
|
|
--palette-primary-800: 34, 189, 185;
|
|
--palette-primary-900: 22, 178, 173;
|
|
--palette-primary-A100: 229, 255, 254;
|
|
--palette-primary-A200: 178, 255, 253;
|
|
--palette-primary-A400: 127, 255, 251;
|
|
--palette-primary-A700: 101, 255, 250;
|
|
--palette-primary-contrast-50: 0, 0, 0, 0.87;
|
|
--palette-primary-contrast-100: 0, 0, 0, 0.87;
|
|
--palette-primary-contrast-200: 0, 0, 0, 0.87;
|
|
--palette-primary-contrast-300: 0, 0, 0, 0.87;
|
|
--palette-primary-contrast-400: 0, 0, 0, 0.87;
|
|
--palette-primary-contrast-500: 0, 0, 0, 0.87;
|
|
--palette-primary-contrast-600: 0, 0, 0, 0.87;
|
|
--palette-primary-contrast-700: 0, 0, 0, 0.87;
|
|
--palette-primary-contrast-800: 0, 0, 0, 0.87;
|
|
--palette-primary-contrast-900: 0, 0, 0, 0.87;
|
|
--palette-accent-50: 231, 240, 249;
|
|
--palette-accent-100: 195, 219, 241;
|
|
--palette-accent-200: 155, 195, 231;
|
|
--palette-accent-300: 114, 170, 221;
|
|
--palette-accent-400: 84, 152, 214;
|
|
--palette-accent-500: 54, 134, 207;
|
|
--palette-accent-600: 48, 126, 202;
|
|
--palette-accent-700: 41, 115, 195;
|
|
--palette-accent-800: 34, 105, 189;
|
|
--palette-accent-900: 22, 86, 178;
|
|
--palette-accent-A100: 229, 239, 255;
|
|
--palette-accent-A200: 178, 207, 255;
|
|
--palette-accent-A400: 127, 175, 255;
|
|
--palette-accent-A700: 101, 159, 255;
|
|
--palette-accent-contrast-50: 0, 0, 0, 0.87;
|
|
--palette-accent-contrast-100: 0, 0, 0, 0.87;
|
|
--palette-accent-contrast-200: 0, 0, 0, 0.87;
|
|
--palette-accent-contrast-300: 0, 0, 0, 0.87;
|
|
--palette-accent-contrast-400: 0, 0, 0, 0.87;
|
|
--palette-accent-contrast-500: 255, 255, 255, 1;
|
|
--palette-accent-contrast-600: 255, 255, 255, 1;
|
|
--palette-accent-contrast-700: 255, 255, 255, 1;
|
|
--palette-accent-contrast-800: 255, 255, 255, 1;
|
|
--palette-accent-contrast-900: 255, 255, 255, 1;
|
|
--palette-warn-50: 251, 231, 233;
|
|
--palette-warn-100: 245, 194, 199;
|
|
--palette-warn-200: 238, 154, 162;
|
|
--palette-warn-300: 231, 114, 125;
|
|
--palette-warn-400: 225, 83, 97;
|
|
--palette-warn-500: 220, 53, 69;
|
|
--palette-warn-600: 216, 48, 62;
|
|
--palette-warn-700: 211, 40, 54;
|
|
--palette-warn-800: 206, 34, 46;
|
|
--palette-warn-900: 197, 22, 31;
|
|
--palette-warn-A100: 255, 246, 247;
|
|
--palette-warn-A200: 255, 195, 198;
|
|
--palette-warn-A400: 255, 144, 149;
|
|
--palette-warn-A700: 255, 119, 124;
|
|
--palette-warn-contrast-50: 0, 0, 0, 0.87;
|
|
--palette-warn-contrast-100: 0, 0, 0, 0.87;
|
|
--palette-warn-contrast-200: 0, 0, 0, 0.87;
|
|
--palette-warn-contrast-300: 0, 0, 0, 0.87;
|
|
--palette-warn-contrast-400: 255, 255, 255, 1;
|
|
--palette-warn-contrast-500: 255, 255, 255, 1;
|
|
--palette-warn-contrast-600: 255, 255, 255, 1;
|
|
--palette-warn-contrast-700: 255, 255, 255, 1;
|
|
--palette-warn-contrast-800: 255, 255, 255, 1;
|
|
--palette-warn-contrast-900: 255, 255, 255, 1;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-family-sans-serif);
|
|
margin: 0;
|
|
min-height: 100%;
|
|
|
|
a {
|
|
color: var(--dark-primary-text);
|
|
|
|
&:hover {
|
|
color: unset;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.blog {
|
|
a {
|
|
&:not(.mdc-button) {
|
|
color: rgba(var(--palette-primary-500), 1) !important;
|
|
font-weight: 500;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.is-dark-theme {
|
|
background: var(--dark-background);
|
|
color: rgba(var(--light-primary-text));
|
|
|
|
a {
|
|
color: var(--light-primary-text);
|
|
}
|
|
|
|
hr {
|
|
border-top-color: rgba(var(--light-dividers));
|
|
}
|
|
|
|
ngx-skeleton-loader {
|
|
.skeleton-loader {
|
|
background-color: #323232;
|
|
}
|
|
}
|
|
|
|
.gf-table {
|
|
@include gf-table(true);
|
|
}
|
|
|
|
.mat-card {
|
|
background: var(--dark-background);
|
|
|
|
&:not([class*='mat-elevation-z']) {
|
|
border-color: rgba(var(--light-dividers));
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.mat-dialog-container {
|
|
background: var(--dark-background);
|
|
}
|
|
|
|
.mat-fab,
|
|
.mat-flat-button {
|
|
&.mat-primary {
|
|
color: rgba(var(--dark-primary-text)) !important;
|
|
}
|
|
}
|
|
|
|
.mat-mdc-card {
|
|
--mdc-elevated-card-container-color: var(--dark-background);
|
|
}
|
|
|
|
.mat-mdc-fab {
|
|
&.mat-primary {
|
|
--mdc-fab-icon-color: rgba(var(--dark-primary-text));
|
|
--mat-mdc-fab-color: rgba(var(--dark-primary-text));
|
|
}
|
|
}
|
|
|
|
.mat-paginator {
|
|
background-color: rgba(var(--palette-foreground-base-dark), 0.02);
|
|
}
|
|
|
|
.mdc-button {
|
|
&.mat-primary {
|
|
--mdc-filled-button-label-text-color: rgba(var(--dark-primary-text));
|
|
}
|
|
}
|
|
|
|
.svgMap-tooltip {
|
|
background: var(--dark-background);
|
|
|
|
.svgMap-tooltip-content table td span {
|
|
color: rgba(var(--light-primary-text));
|
|
}
|
|
}
|
|
|
|
.with-placeholder-as-option {
|
|
.mat-select-placeholder {
|
|
color: rgba(var(--light-primary-text));
|
|
}
|
|
|
|
&.mat-select-disabled {
|
|
.mat-select-placeholder {
|
|
color: rgba(
|
|
var(--palette-foreground-disabled-text-dark),
|
|
var(--palette-foreground-disabled-text-dark-alpha)
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
button:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
hr {
|
|
border-top: 1px solid rgba(var(--dark-dividers));
|
|
}
|
|
|
|
ion-icon {
|
|
pointer-events: none;
|
|
}
|
|
|
|
ngx-skeleton-loader {
|
|
display: block;
|
|
line-height: 0;
|
|
outline: 0;
|
|
|
|
.skeleton-loader {
|
|
display: flex;
|
|
margin: 0 !important;
|
|
outline: 0;
|
|
}
|
|
}
|
|
|
|
[hidden] {
|
|
display: flex !important;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.breadcrumb {
|
|
background-color: unset;
|
|
padding: unset;
|
|
}
|
|
|
|
.breadcrumb-item {
|
|
&.active {
|
|
color: unset;
|
|
}
|
|
}
|
|
|
|
.cdk-overlay-container {
|
|
.cdk-overlay-pane {
|
|
max-width: 95vw !important;
|
|
}
|
|
}
|
|
|
|
.cursor-default {
|
|
cursor: default;
|
|
}
|
|
|
|
.cursor-pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.gf-table {
|
|
@include gf-table;
|
|
}
|
|
|
|
.hidden {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.line-height-1 {
|
|
line-height: 1;
|
|
}
|
|
|
|
.lead {
|
|
font-weight: unset;
|
|
}
|
|
|
|
.mat-card {
|
|
&:not([class*='mat-elevation-z']) {
|
|
border: 1px solid rgba(var(--dark-dividers));
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.mat-card-header-text {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.mat-fab,
|
|
.mat-flat-button {
|
|
&.mat-primary {
|
|
color: rgba(var(--light-primary-text)) !important;
|
|
}
|
|
}
|
|
|
|
.mat-form-field {
|
|
&.compact-with-outline {
|
|
.mat-form-field-wrapper {
|
|
margin: 0.5rem 0 0.25rem;
|
|
padding-bottom: 1rem;
|
|
|
|
.mat-form-field-infix {
|
|
border-top-width: 0;
|
|
padding: 1rem 0 0.75rem;
|
|
|
|
.mat-form-field-label {
|
|
margin-top: 0.1rem;
|
|
}
|
|
|
|
.mat-select-arrow-wrapper {
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
.mat-form-field-prefix {
|
|
top: 0;
|
|
}
|
|
|
|
.mat-form-field-suffix {
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.without-hint {
|
|
.mat-form-field-wrapper {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mat-mdc-fab {
|
|
color: var(--mat-mdc-fab-color, inherit) !important;
|
|
|
|
&.mat-primary {
|
|
--mdc-fab-icon-color: rgba(var(--light-primary-text));
|
|
--mat-mdc-fab-color: rgba(var(--light-primary-text));
|
|
}
|
|
}
|
|
|
|
.mat-mdc-menu-panel {
|
|
.mat-mdc-menu-item {
|
|
.mdc-list-item__primary-text {
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mat-paginator {
|
|
background-color: rgba(var(--palette-foreground-base-light), 0.02);
|
|
|
|
.mat-paginator-page-size {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.mdc-button {
|
|
&.mat-primary {
|
|
--mdc-filled-button-label-text-color: rgba(var(--light-primary-text));
|
|
}
|
|
}
|
|
|
|
.no-min-width {
|
|
min-width: unset !important;
|
|
}
|
|
|
|
.page {
|
|
padding-bottom: 5rem;
|
|
}
|
|
|
|
.svgMap-tooltip {
|
|
border-bottom: none;
|
|
|
|
.svgMap-tooltip-pointer {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.text-decoration-underline {
|
|
text-decoration: underline !important;
|
|
}
|
|
|
|
.with-info-message {
|
|
height: calc(100vh - 5rem - 3.5rem) !important;
|
|
}
|
|
|
|
.with-placeholder-as-option {
|
|
.mat-select-placeholder {
|
|
color: rgba(var(--dark-primary-text));
|
|
}
|
|
|
|
&.mat-select-disabled {
|
|
.mat-select-placeholder {
|
|
color: rgba(
|
|
var(--palette-foreground-disabled-text),
|
|
var(--palette-foreground-disabled-text-alpha)
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|