main.scss

@charset "utf-8";

$color-mode-type: data; // Make the default behaviour explicit

// From https://github.com/system-fonts/modern-font-stacks
$font-family-sans-serif: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
$font-family-monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
$headings-font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;

// Lighter text color to increase contrast
$body-color-dark: #ced4da; // $gray-400 instead of 500

$primary: #b83e51;
$secondary: #DC926E;
$success: #81a65e;
$info: #242331;
$warning: #ea7d18;
$danger: #f44336;
$light: #F4F4F0;
$dark: #262432;

$navbar-nav-link-padding-x: 1rem;
$headings-line-height: 2;
$headings-margin-bottom: 0;

@import "node_modules/bootstrap/scss/bootstrap";

.card-header, .accordion-button {
  @extend h6;
}

.navbar-brand {
  font-family: $headings-font-family;
}

svg.icon {
  width: 1.25em;
  height: 1.25em;
  stroke-width: 1.5;
  display: inline-block;
  vertical-align: sub;
}

svg.button-icon {
  margin-left: -1 * map-get($spacers, 1);
  margin-right: map-get($spacers, 1);
}

main li:not(.nav-item) {
  margin-bottom: 0.25rem;
}

.btn-success, .btw-success:hover, .btn-outline-success:hover {
  color: $white !important;
}

.navbar-brand img {
  width: 3rem;
  height: 3rem;
}

@include media-breakpoint-up(md) {
  .navbar-brand img {
    width: 5rem;
    height: 5rem;
    margin: -0.5rem 0 -2.5rem 0rem;
  }
}

// Injected by htmx.js, but adding for noscript users
.htmx-indicator {
  opacity: 0;
}

form cond-visible {
  display: block;
  padding-left: $form-check-padding-start;
}

form label[title] {
  cursor: help;
  text-decoration: underline dashed !important;
}

form div.input-group button[class*="btn-outline-"] {
  --bs-btn-bg: var(--bs-body-bg);
}

// Firefox's default yellow does not work in dark mode
form input:autofill {
  color: $warning-text-emphasis;
  background: $warning-bg-subtle;
}

// Hack until we rework the color palette
html[data-bs-theme="dark"] .btn-dark, html[data-bs-theme="dark"] .btn-outline-dark {
  filter: invert(90%) !important;
}

.avatar-row {
  display: block;
  flex-direction: row;
}

.avatar-row img {
  position: relative;
  display: inline-flex;
  border-radius: 50%;
  object-fit: cover;
  background: $card-bg;
  border: solid 2px $card-border-color;
  margin: 0 -12px 6px 0;
  width: 48px;
  height: 48px;
}

.avatar-row img:hover {
  z-index: 5;
  border-color: $input-focus-border-color;
  box-shadow: $input-focus-box-shadow;
}

#htmx-alert {
  @extend .sticky-top;
  top: 1em;
}