robotcoral/coral-app

@use "themes" as themes;
@import "~ngx-toastr/toastr";
 
/* Importing Bootstrap SCSS file. */
@import "~bootstrap/scss/bootstrap";
 
// Theme loading
@media (prefers-color-scheme: light) {
  html[light-color-scheme="light"] {
Syntax Error: Invalid CSS after "...@include themes": expected "}", was ".theme-light;"
    @include themes.theme-light;
  }
 
  html[light-color-scheme="dark"] {
    @include themes.theme-dark;
  }
 
  html[light-color-scheme="midnight"] {
    @include themes.theme-midnight;
  }
}
 
@media (prefers-color-scheme: dark) {
  html[dark-color-scheme="light"] {
    @include themes.theme-light;
  }
 
  html[dark-color-scheme="dark"] {
    @include themes.theme-dark;
  }
 
  html[dark-color-scheme="midnight"] {
    @include themes.theme-midnight;
  }
}
 
html {
  height: 100%;
  box-sizing: border-box;
 
  --theme-transition-time: 0s;
  --shadow-transition-time: 0.05s;
}
 
#main-header {
  display: none;
}
 
*,
*:before,
*:after {
  box-sizing: inherit;
}
 
* {
  scrollbar-width: thin;
  scrollbar-color: var(--theme-highlight-3) transparent;
}
 
*::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}
 
*::-webkit-scrollbar-track {
  background: transparent;
}
 
*::-webkit-scrollbar-corner {
  background-color: transparent;
}
 
*::-webkit-scrollbar-thumb {
  background-color: var(--theme-highlight-3);
}
 
body {
  height: 100%;
  margin: 0;
  overscroll-behavior: none;
  background-color: var(--theme-main-bg-color);
  @include themes.bg-color-transition;
}
 
app-root {
  height: 100%;
  display: flex;
  flex-direction: column;
}