App.scss

@import "assets/scss/custom";
@import "~bootstrap/dist/css/bootstrap.min.css";

body {
  margin: 0;
  font-family: "IBM Plex Sans", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
  background-color: var(--background-color);
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

:root {
  --background-color: #{$white};
  --secondary-background-color: #{$gray-200};

  --checker-even-color: #{$gray-100};
  --checker-odd-color: #{$gray-200};

  --primary-text-color: #{$black};
  --secondary-text-color: #{$gray-700};
  --tertiary-text-color: #{$gray-500};

  --primary-text-color-inverse: #{$white};
  --background-color-inverse: #{$black};

  --border-color: #{$gray-200};
  --border-color-hover: #{$gray-300};
  --border-color-focus: #{$gray-300};

  --primary-button: #{$gray-100};
  --primary-button-hover: #{$gray-200};
  --primary-button-active: #{$black};

  --primary-button-text: #{$black};
  --primary-button-text-active: #{$white};
  --primary-button-text-inactive: #{$gray-300};

  --secondary-button: #{$white};
  --secondary-button-hover: #{$gray-100};
  --secondary-button-active: #{$gray-200};

  --secondary-button-text: #{$gray-400};
  --secondary-button-text-active: #{$gray-500};

  --tertiary-button: #{$gray-100};
  --tertiary-button-hover: #{$gray-200};
  --tertiary-button-active: #{$gray-300};

  --tertiary-button-text: #{$gray-400};
  --tertiary-button-text-hover: #{$gray-500};

  --input-bar: #{$gray-100};
  --input-bar-placeholder: #{$gray-400};
  --input-bar-focus: #{$white};

  --image-invert: 0%;
  --box-shadow-color: rgba(0, 0, 0, 0.1);

  --scrollbar: #{$gray-400};
  --email-text: #{$blue-500};

  --lecture-background: #{rgba($blue-100, 0.5)};
  --labs-background: #{rgba($pink-100, 0.5)};
  --deadline-background: #{rgba($teal-100, 0.5)};
  --tutorial-background: #{scale-color($blue-100, $lightness: +50%)};
  --coursework-background: #{scale-color($teal-100, $lightness: +50%)};

  --lecture-text: #{$blue-700};
  --labs-text: #{$pink-700};
  --deadline-text: #{$teal-700};
  --tutorial-text: #{$blue-700};
  --coursework-text: #{$teal-700};

  --day-indicator-column: #{rgba($gray-500, 0.25)};
}

[data-theme="dark"] {
  --background-color: #{$gray-900};
  --secondary-background-color: #{$gray-800};

  --checker-even-color: #{$gray-800};
  --checker-odd-color: #{rgba($gray-800, 0.5)};

  --primary-text-color: #{$white};
  --secondary-text-color: #{$gray-300};
  --tertiary-text-color: #{$gray-500};

  --primary-text-color-inverse: #{$black};
  --background-color-inverse: #{$white};

  --border-color: #{$gray-700};
  --border-color-hover: #{$gray-600};
  --border-color-focus: #{$gray-600};

  --primary-button: #{$gray-800};
  --primary-button-hover: #{$gray-700};
  --primary-button-active: #{$white};

  --primary-button-text: #{$white};
  --primary-button-text-active: #{$black};
  --primary-button-text-inactive: #{$gray-900};

  --secondary-button: #{$gray-900};
  --secondary-button-hover: #{$gray-800};
  --seconary-button-active: #{$gray-200};

  --secondary-button-text: #{$gray-400};
  --secondary-button-text-active: #{$gray-500};

  --tertiary-button: #{$gray-800};
  --tertiary-button-hover: #{$gray-700};
  --tertiary-button-active: #{$gray-600};

  --tertiary-button-text: #{$gray-600};
  --tertiary-button-text-hover: #{$gray-500};

  --input-bar: #{$gray-800};
  --input-bar-placeholder: #{$gray-600};
  --input-bar-focus: #{$gray-900};

  --image-invert: 100%;
  --box-shadow-color: rgba(0, 0, 0, 0.5);

  --scrollbar: #{$gray-700};
  --email-text: #{$blue-400};

  --lecture-background: #{rgba($blue-800, 0.5)};
  --labs-background: #{rgba($pink-800, 0.5)};
  --deadline-background: #{rgba($teal-800, 0.5)};
  --tutorial-background: #{scale-color($blue-800, $lightness: -10%)};
  --coursework-background: #{scale-color($teal-800, $lightness: -10%)};

  --lecture-text: #{$blue-300};
  --labs-text: #{$pink-300};
  --deadline-text: #{$teal-300};
  --tutorial-text: #{$blue-300};
  --coursework-text: #{$teal-300};

  --day-indicator-column: #{rgba($gray-500, 0.25)};
}

.btn-primary.focus,
.btn-primary:focus {
  color: #000;
  background-color: #f8f9fa !important;
  border-color: #0062cc !important;
  box-shadow: none;
}

.btn-primary {
  margin-bottom: 0.625rem;

  color: var(--primary-button-text);
  background: var(--primary-button);

  font-size: 1.05rem;
  letter-spacing: 0;
  line-height: 1.375rem;
  text-align: left;

  height: 2.25rem;
  width: 100%;

  border-width: 0rem;
  border-radius: 0.5rem !important;

  display: flex;
  justify-content: space-between;
  align-items: center;

  transition: 0.2s background;
  -webkit-transition: 0.2s background;
  -moz-transition: 0.2s background;
}

.btn-primary.active,
.btn-primary:active {
  color: var(--primary-button-text-active) !important;
  background: var(--primary-button-active) !important;
  font-weight: 500;
  text-align: left;
  border-width: 0rem;
  height: 2.25rem;
  line-height: 1.375rem;
}

.btn-primary:hover {
  background: var(--primary-button-hover);
  color: var(--primary-button-text);
}

.modal-backdrop {
  z-index: 9000;
}