OpenC3/cosmos

// This is for global overrides only. If it's contained to a component put it there.
// Also use the variables created by vueify and astro like var(--v-primary-darken2)
// or var(--color-background-base-default) rather than something absolute.
// See vuetify.js and https://www.astrouxds.com/design-tokens/system/ for the colors
// and note the variations are: base, lighten[1-5], and darken[1-4]

.openc3-green {
  color: #56f000 !important;
}
.openc3-yellow {
  color: #fce83a !important;
}
.openc3-red {
  color: #ff3838 !important;
}
.openc3-blue {
  color: #2dccff !important;
}
.openc3-purple {
  color: rgb(200, 0, 200) !important;
}
.openc3-black {
  color: black !important;
}
.openc3-white {
  color: white !important;
}

// The naming convention for Astro background colors is as follows:
// --color-background-<TYPE>-<ACTION> where TYPE is base, surface, interactive
// and ACTION is default, header, hover, selected

// .v-application .primary {
//   background-color: var(--color-background-interactive-default) !important;
// }
.theme--dark.v-btn:not(
    .v-btn--outlined,
    .v-btn--icon,
    .v-btn--round,
    .v-btn--text
  ) {
  background-color: var(--button-color-background-primary-default) !important;
  color: var(--color-text-inverse) !important;
}
.theme--dark.v-btn:not(
    .v-btn--outlined,
    .v-btn--icon,
    .v-btn--round,
    .v-btn--text
  ):hover {
  background-color: var(--button-color-background-primary-hover) !important;
}
.theme--dark.v-btn--outlined:not(.v-btn--icon, .v-btn--round, .v-btn--text) {
  border-color: var(--button-color-border-primary-default) !important;
  color: var(--color-text-interactive-default) !important;
}
.theme--dark.v-btn--outlined.v-btn--disabled {
  border-color: var(--button-color-border-primary-default) !important;
  color: var(--color-text-interactive-default) !important;
  opacity: 0.4 !important;
}
.theme--dark.v-btn--outlined:not(
    .v-btn--icon,
    .v-btn--round,
    .v-btn--text
  ):hover {
  border-color: var(--button-color-border-primary-hover) !important;
}

.theme--dark.v-system-bar {
  background-color: var(--color-background-surface-header) !important;
}
.theme--dark.v-system-bar.active {
  background-color: var(--color-background-surface-selected) !important;
}
body,
.theme--dark.v-application,
.theme--dark.v-main,
.theme--dark.v-content {
  background-color: var(--color-background-base-default) !important;
}

.theme--dark.v-tabs > .v-tabs-bar .v-tab--disabled,
.theme--dark.v-tabs > .v-tabs-bar .v-tab:not(.v-tab--active),
.theme--dark.v-tabs > .v-tabs-bar .v-tab:not(.v-tab--active) > .v-btn,
.theme--dark.v-tabs > .v-tabs-bar .v-tab:not(.v-tab--active) > .v-icon {
  color: var(--color-text-interactive-default) !important;
}
.v-tab--active {
  background-color: var(--color-background-surface-selected) !important;
  color: white !important;
}
.theme--dark.v-tabs .v-tab:hover {
  background-color: var(--color-background-surface-hover) !important;
}

.v-card__title,
.v-card__subtitle,
.theme--dark.v-tab,
.theme--dark.v-tabs-bar,
.v-expansion-panel-header,
.v-navigation-drawer,
.theme--dark.v-toolbar,
.theme--dark.v-date-picker-header {
  background-color: var(--color-background-surface-header) !important;
}

.mdi-magnify {
  color: var(--color-text-interactive-default) !important;
}

.v-stepper,
.v-expansion-panel-content,
.theme--dark.v-data-table,
.theme--dark.v-dialog,
.theme--dark.v-card,
.theme--dark.v-date-picker-table,
.theme--dark.v-time-picker-clock__container,
.theme--dark.v-expansion-panel,
.theme--dark.v-expansion-panels,
.theme--dark.p-menubar {
  background-color: var(--color-background-surface-default) !important;
}
.theme--dark.v-list {
  background-color: var(--color-background-base-default) !important;
}
.theme--dark.v-list div:nth-child(odd) .v-list-item {
  background-color: var(--color-background-base-selected) !important;
}

.theme--dark.v-list-item:hover,
.theme--dark.v-treeview--hoverable .v-treeview-node__root:hover,
.theme--dark.v-treeview .v-treeview-node--click > .v-treeview-node__root:hover,
.theme--dark.v-data-table
  > .v-data-table__wrapper
  > table
  > tbody
  > tr:hover:not(.v-data-table__expanded__content):not(
    .v-data-table__empty-wrapper
  ) {
  background-color: var(--color-background-surface-hover) !important;
}

// Most tables have a search box
.search {
  max-width: 350px;
  border-color: var(--color-border-interactive-muted);
  background-color: var(--color-background-base-default);
}

// The next several styles effectively styles like an Astro select
.theme--dark.v-select fieldset {
  border: 1px solid var(--color-border-interactive-muted);
  background-color: var(--color-background-base-default);
}
.theme--dark.v-select input {
  color: var(--color-background-interactive-default) !important;
}
.theme--dark.v-select input:disabled {
  color: var(--color-background-interactive-muted) !important;
}
.theme--dark.v-select .v-select__selections {
  color: var(--color-text-interactive-default) !important;
}

// This formats the icon with a box around it but I don't really like it
// .v-select .v-input__slot {
//   padding-right: 0px !important;
// }
// .v-select .v-input__icon {
//   width: auto;
// }
// .v-select i {
//   background-color: var(--color-background-surface-selected) !important;
//   border: 1px solid var(--color-border-interactive-muted) !important;
//   border-radius: 3px !important;
//   height: 40px !important;
//   width: 40px !important;
// }

// Astro has a much higher app-bar
.v-main {
  padding-top: 96px !important;
}
.v-app-bar {
  height: 96px !important;
}

// Astro underlines links but I don't like it
body a:hover {
  text-decoration: none;
}
// Astro recommends sentence case on tabs
.v-tab,
.v-btn.v-size--default,
.v-btn.v-size--large {
  text-transform: none;
  font-size: 1rem;
}
// Astro recommends their Heading 5 for card titles
.v-card__title {
  font-size: 1.125rem;
}
// Astro recommends 1rem for text abd table items
.v-card__text,
.v-data-table > .v-data-table__wrapper > table > tbody > tr > th,
.v-data-table > .v-data-table__wrapper > table > tfoot > tr > th,
.v-data-table > .v-data-table__wrapper > table > thead > tr > th,
.v-data-table > .v-data-table__wrapper > table > tbody > tr > td,
.v-data-table > .v-data-table__wrapper > table > tfoot > tr > td,
.v-data-table > .v-data-table__wrapper > table > thead > tr > td {
  font-size: 1rem;
}

input {
  // This causes the browser to style input icons for a dark background
  color-scheme: dark;
  // Make the caret color be white instead of a dark blue
  caret-color: auto;
}

// Fix the single spa debug panel so the text is readable
.imo-modal-container input {
  color: black;
}