_custom.scss

body {
  // Global theme colors are defined in macao/themes/macao-hugo-theme/assets/_defaults.scss and go to @mixin theme-tetras
  --quizz-backgourd-color: #00000;
  --feedback-sucess-color: lightgreen;
  --feedback-error-color: #ef5d5d;

  // To edit SurveyJs colors see TODO create custom theme for SurveyJs
}

// ***********************************
// Global
// ***********************************
.btn-play{
  cursor: pointer;
  background-color: var(--macao-primary-color);
  border-radius: 5px;
  border: none;
  padding: 5px 10px;
}

p#gapfill-container {
  white-space: pre-wrap;
  line-height: 3em;
}

// Tweak the existing SurveyJS styles to have "inline" dropdown menus
// and text fields that don't take too much space
select.sd-dropdown.inline-dropdown, input.sd-input.inline-input {
  display: inline-block;
  width: fit-content;
  padding: 8px;
}

// ***********************************
// User Feedback in quizz
// ***********************************
#correct-indic.incorrect{
  background-color: var(--feedback-error-color);
}

#correct-indic.correct{
  background-color: var(--feedback-sucess-color);
}

#correct-indic {
  border-radius: 8px;
  padding: 16px;

  p {
    margin: 0;
  }
}

// ***********************************
// Hide disabled checkboxes in some quizz
// ***********************************
.hide-disabled-checkboxes {
  .sd-checkbox--readonly {
    span.sd-checkbox__decorator {
      display: none;
    }
  }
}

// ***********************************
// Align one line radio buttons
// ***********************************

.one-line {
  display: flex;
  align-items: center;

  .sd-question__header {
    margin-top: 0;
  }
}

// ***********************************
// General look and feel
// ***********************************
.book-page > article{
  background-color: var(--secondary-background-color);
  border-radius: 15px;
}
.book-page > article {
  padding: 16px;
  margin-top: 16px;
}

.book-search {
  border-radius: 10px;
  padding: 0px 5px;
  background-color: var(--secondary-background-color);
}

a {
  color: var(--macao-primary-color);
}

a.active {
  color: var(--macao-secondary-font-color) !important;
  background-color: var(--macao-primary-color);
  border-radius: 5px;
  padding: 5px;
}

// ***********************************
// Comment on page
// ***********************************

.comment-trigger {
  cursor: pointer;
  color: var(--macao-primary-color);
  text-decoration: underline;
}

.commentaireInfo {
  padding: 10px;
  border-radius: 10px;
  background-color: var(--secondary-background-color);
  border: 1px solid var(--macao-primary-color);
  color: black;
  max-width: 500px;
}