ghostfolio/apps/client/src/styles.scss

/* You can add global styles to this file, and also import other style files */

@import './styles/bootstrap';
@import './styles/table';

@import 'node_modules/angular-material-css-vars/src/lib/main';

@import 'node_modules/svgmap/dist/svgMap';

$mat-css-dark-theme-selector: '.is-dark-theme';
$mat-css-light-theme-selector: '.is-light-theme';

@include init-material-css-vars() {
  // If your app has any theme mixins, call them here.
  // $mat-css-theme gets set to an appropriate value before this content is called.
  // @include your-custom-component-theme($mat-css-theme);
}

:root {
  --dark-background: rgb(25, 25, 25);
  --font-family-sans-serif: Roboto, 'Helvetica Neue', sans-serif;
  --light-background: rgb(255, 255, 255);
}

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(.mat-flat-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 {
      .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-paginator {
      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-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;

  .loader {
    display: flex;
    margin: 0 !important;
    outline: 0;
  }
}

[hidden] {
  display: flex !important;
  visibility: hidden;
}

.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;
}

.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-paginator {
  background-color: rgba(var(--palette-foreground-base-light), 0.02);

  .mat-paginator-page-size {
    display: none;
  }
}

.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)
      );
    }
  }
}