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.
ghostfolio/apps/client/src/styles.scss

605 lines
16 KiB

@import './styles/bootstrap';
@import './styles/table';
@import 'node_modules/svgmap/dist/svgMap';
:root {
--dark-background: rgb(25, 25, 25);
--font-family-sans-serif: 'Inter', 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;
}
}
}
}
.mat-mdc-menu-panel {
&.assistant {
max-width: unset !important;
.mat-mdc-menu-content {
padding: 0;
}
}
}
&.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-mdc-dialog-container {
--mdc-dialog-container-color: var(--dark-background);
.mdc-dialog__content {
--mdc-dialog-supporting-text-color: rgba(var(--light-primary-text));
}
}
.mat-mdc-fab,
.mat-mdc-unelevated-button {
&.mat-primary {
color: rgba(var(--dark-primary-text)) !important;
}
}
.mat-mdc-card {
--mdc-elevated-card-container-color: var(--dark-background);
--mdc-outlined-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-mdc-paginator {
background-color: rgba(var(--palette-foreground-base-dark), 0.02);
}
.mdc-button {
&.mat-accent,
&.mat-primary {
--mdc-filled-button-label-text-color: rgba(var(--dark-primary-text));
}
}
.page {
&.has-tabs {
.mat-mdc-tab-nav-bar {
--mat-tab-header-inactive-label-text-color: rgba(
var(--light-primary-text)
);
}
@media (min-width: 576px) {
.mat-mdc-tab-header {
background-color: rgba(var(--palette-foreground-base-dark), 0.02);
}
}
}
}
.svgMap-tooltip {
background: var(--dark-background);
.svgMap-tooltip-content table td span {
color: rgba(var(--light-primary-text));
}
}
.with-placeholder-as-option {
.mat-mdc-select-placeholder {
color: rgba(var(--light-primary-text));
}
&.mat-mdc-select-disabled {
.mat-mdc-select-placeholder {
color: rgba(var(--light-disabled-text));
}
}
}
}
}
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;
flex-wrap: nowrap;
padding: unset;
}
.breadcrumb-item {
flex-wrap: nowrap;
&.active {
color: unset;
}
}
.cdk-overlay-container {
.cdk-overlay-pane {
max-width: 95vw !important;
}
}
.cursor-default {
cursor: default;
}
.cursor-pointer {
cursor: pointer;
}
.gf-spacer {
flex: 1 1 auto;
}
.gf-table {
@include gf-table;
}
.has-info-message {
.page.has-tabs {
height: calc(100svh - 2 * var(--mat-toolbar-standard-height));
}
}
.hidden {
visibility: hidden;
}
.line-height-1 {
line-height: 1;
}
.lead {
font-weight: unset;
}
.mat-mdc-button-base {
.mdc-button__label {
align-items: center;
display: flex;
}
}
.mat-mdc-checkbox {
label {
margin-bottom: 0;
}
}
.mat-mdc-dialog-container {
.mdc-dialog__content {
--mdc-dialog-supporting-text-color: rgba(var(--dark-primary-text));
}
}
.mat-mdc-fab,
.mat-mdc-unelevated-button {
&.mat-primary {
color: rgba(var(--light-primary-text)) !important;
}
}
.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-form-field {
&.without-hint {
.mat-mdc-form-field-subscript-wrapper {
display: none;
}
}
}
.mat-mdc-menu-panel {
.mat-mdc-menu-item {
&.font-weight-bold {
.mat-mdc-menu-item-text {
--mat-menu-item-label-text-weight: 700;
}
}
.mdc-list-item__primary-text {
align-items: center;
display: flex;
}
}
}
.mat-mdc-paginator {
background-color: rgba(var(--palette-foreground-base-light), 0.02);
.mat-mdc-paginator-page-size,
.mat-mdc-paginator-page-size {
display: none;
}
}
/**
* Fix for https://github.com/angular/components/issues/26818
*/
.mat-mdc-slide-toggle {
.mdc-switch__track {
background-color: rgba(var(--palette-primary-500), 1);
}
}
.mat-stepper-vertical,
.mat-stepper-horizontal {
background: transparent !important;
}
.mdc-button {
&.mat-accent,
&.mat-primary {
--mdc-filled-button-label-text-color: rgba(var(--light-primary-text));
}
}
.mdc-dialog__actions {
padding: 12px 24px !important;
}
.mdc-dialog__title {
padding: 9px 24px !important;
}
.no-min-width {
min-width: unset !important;
}
.page {
display: flex;
flex-direction: column;
overflow-y: auto;
padding-bottom: env(safe-area-inset-bottom);
padding-bottom: constant(safe-area-inset-bottom);
.fab-container {
bottom: 2rem;
position: fixed;
right: 2rem;
z-index: 999;
}
&:not(.has-tabs) {
@media (min-width: 576px) {
padding: 2rem 0;
}
}
&.has-tabs {
height: calc(100svh - var(--mat-toolbar-standard-height));
.fab-container {
@media (max-width: 575.98px) {
bottom: 5rem;
}
}
.mat-mdc-tab-nav-bar {
--mat-tab-header-active-focus-indicator-color: transparent;
--mat-tab-header-active-hover-indicator-color: transparent;
--mat-tab-header-inactive-label-text-color: rgba(
var(--dark-primary-text)
);
--mdc-tab-indicator-active-indicator-color: transparent;
}
@media (max-width: 575.98px) {
.mat-mdc-tab-link {
--mdc-secondary-navigation-tab-container-height: 3rem;
}
}
@media (min-width: 576px) {
flex-direction: row-reverse;
.mat-mdc-tab-header {
background-color: rgba(var(--palette-foreground-base), 0.02);
padding: 2rem 0;
width: 14rem;
--mat-tab-header-label-text-tracking: normal;
--mdc-secondary-navigation-tab-container-height: 2rem;
.mat-mdc-tab-links {
flex-direction: column;
.mat-mdc-tab-link {
justify-content: flex-start;
}
}
}
.mat-mdc-tab-nav-panel {
padding: 2rem 0;
}
}
}
}
.svgMap-tooltip {
border-bottom: none;
.svgMap-tooltip-pointer {
display: none;
}
}
.text-decoration-underline {
text-decoration: underline !important;
}
.text-line-through {
text-decoration: line-through;
}
.with-placeholder-as-option {
.mat-mdc-select-placeholder {
color: rgba(var(--dark-primary-text));
}
&.mat-mdc-select-disabled {
.mat-mdc-select-placeholder {
color: rgba(var(--dark-disabled-text));
}
}
}