search_theme_override.css in Search API Federated Solr 8.3

/**
 * Custom search override styles.
*/

/*
 * Begin search override styles
 * Apply all styles to be scoped globally within the Federated Search app inside the #fs-root ID.
 */

/**
 * Search filters
 */

/* The container for the search filters */
aside.fs-aside {
  background-color: #f6f6f6;
}
/* Search filters */
.fs-search-filters {
  /* Mobile search button / Desktop sidebar title */
  /* Search filters clear button */
}
.fs-search-filters__trigger,
.fs-search-filters__title {
  color: #333;
  font-size: 1.1em;
  line-height: 1.46667em;
}
.fs-search-filters__reset {
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #e5e5e5;
  font-size: 0.8em;
  line-height: 1.83333em;
}
.fs-search-filters__reset:active,
.fs-search-filters__reset:hover,
.fs-search-filters__reset:focus {
  text-decoration: underline;
  border-color: #b5b5b5;
  background-color: #d8d8d8;
}
/* Search filter accordion */
.fs-search-accordion {
  color: #333;
  /* Top level accordion links */
}
.fs-search-accordion__title {
  color: #0d57aa;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.8em;
}
.fs-search-accordion__title:active,
.fs-search-accordion__title:hover {
  text-decoration: none;
  color: #002a5b;
  border-color: #b5b5b5;
  background-color: #e5e5e5;
}
.fs-search-accordion__title:focus,
.fs-search-accordion__title.js-search-accordion-open {
  text-decoration: none;
  color: #0d57aa;
  border-color: #b5b5b5;
}
/*** Search form*/
.fs-search-form__label {
  color: #222;
  font-size: 0.8em;
  line-height: 1.83333em;
}
.fs-search-form__input {
  border: 1px solid #e5e5e5;
  border-radius: 3px 0 0 3px;
}
.fs-search-form__input:focus {
  border: 1px solid #555;
  outline: 0;
}
.fs-search-form__submit {
  border: 1px solid #e5e5e5;
  border-left: 0;
  border-radius: 0 3px 3px 0;
  background-color: #ffcb05;
}
.fs-search-form__submit svg {
  fill: #222;
}
.fs-search-form__submit:active,
.fs-search-form__submit:hover,
.fs-search-form__submit:focus {
  border-color: #e5e5e5;
  background-color: #f4bb06;
}
.fs-search-form__submit:active svg,
.fs-search-form__submit:hover svg,
.fs-search-form__submit:focus svg {
  fill: #222;
}
/*** Applied Filters*/
.fs-applied-filters__filter {
  padding-bottom: 0.29333em;
  border-bottom: solid 2px #ffcb05;
  font-size: 0.8em;
  line-height: 1.46667em;
}
/*** Search results list*/
.fs-search-results {
  /* Search results eyebrow (i.e. the content type). */
  /* Search results metadata (i.e. the site + date) */
  /* Search result snippet text */
  /* highlighted text in snippet */
}
.fs-search-results__heading a {
  text-decoration: none;
  color: #0d57aa;
  border-bottom: 2px dashed #0d57aa;
  background-color: transparent;
}
.fs-search-results__heading a:active,
.fs-search-results__heading a:hover {
  color: #002a5b;
  border-bottom: 2px solid #002a5b;
  outline-width: 0;
  background-color: #e5e5e5;
}
.fs-search-results__label {
  color: #555;
  font-size: 0.8em;
}
.fs-search-results__meta {
  color: #555;
  font-size: 0.8em;
  line-height: 1.46667em;
}
.fs-search-results__teaser {
  font-size: 18px;
  line-height: 1.3;
}
.fs-search-results em {
  background-color: rgba(255, 242, 192, 0.85);
  font-weight: 700;
}
/*** Pagination component*/
.fs-search-pager {
  background-color: transparent;
  /** pagination component **/
  /** inactive page links **/
  /** active page link **/
}
.fs-search-pager__items {
  border-radius: 3px;
  background-color: #eff0f1;
}
@media (min-width: 450px) {
  .fs-search-pager__items {
    background-color: transparent;
  }
}
@media (min-width: 450px) {
  .fs-search-pager__item a {
    border-radius: 3px;
    background-color: #ffcb05;
  }
}
.fs-search-pager__item a:hover,
.fs-search-pager__item a:active {
  text-decoration: underline;
  color: #00274c;
  background-color: #ffcb05;
}
@media (min-width: 450px) {
  .fs-search-pager__item a:hover,
  .fs-search-pager__item a:active {
    background-color: #f4bb06;
  }
}
.fs-search-pager__item a:hover svg,
.fs-search-pager__item a:active svg {
  fill: #00274c;
}
@media (min-width: 450px) {
  .fs-search-pager__item.is-active a {
    color: #fff;
    background-color: #0d57aa;
  }
  .fs-search-pager__item.is-active a:hover,
  .fs-search-pager__item.is-active a:active {
    background-color: #002a5b;
  }
}
/**DatePicker widget*/
.PresetDateRangePicker_button {
  color: #4696f1;
  border: 2px solid #4696f1;
}
.PresetDateRangePicker_button__selected {
  color: #fff;
  background: #4696f1;
}
.DayPickerKeyboardShortcuts_show__bottomRight {
  border-top: 26px solid transparent;
  border-right: 33px solid #0d57aa;
}
.DayPickerKeyboardShortcuts_show__bottomRight:hover {
  border-right: 33px solid #083363;
}
.DayPickerKeyboardShortcuts_show__topRight {
  border-right: 33px solid #0d57aa;
  border-bottom: 26px solid transparent;
}
.DayPickerKeyboardShortcuts_show__topRight:hover {
  border-right: 33px solid #083363;
}
.DayPickerKeyboardShortcuts_show__topLeft {
  border-bottom: 26px solid transparent;
  border-left: 33px solid #4696f1;
}
.DayPickerKeyboardShortcuts_show__topLeft:hover {
  border-left: 33px solid #00274c;
}
.CalendarDay__selected_span {
  color: #0d57aa;
  border: 1px solid #75b1f4;
  background: #ebf4fe;
}
.CalendarDay__selected_span:active,
.CalendarDay__selected_span:hover {
  color: #fff;
  border: 1px solid #b5b5b5;
  background: #d8d8d8;
}
.CalendarDay__last_in_range {
  border-right: #4696f1;
}
.CalendarDay__selected,
.CalendarDay__selected:active,
.CalendarDay__selected:hover {
  color: #fff;
  border: 1px solid #0d57aa;
  background: #0d57aa;
}
.CalendarDay__hovered_span,
.CalendarDay__hovered_span:hover {
  color: #0d57aa;
  border: 1px solid #75b1f4;
  background: #ebf4fe;
}
.CalendarDay__hovered_span:active {
  color: #0d57aa;
  border: 1px solid #75b1f4;
  background: #ebf4fe;
}
.DateInput_input__focused {
  border-bottom: 2px solid #0d57aa;
}
.CalendarDay__highlighted_calendar {
  color: #555;
  background: #fff2c0;
}
.CalendarDay__highlighted_calendar:active,
.CalendarDay__highlighted_calendar:hover {
  color: #555;
  background: #ffcb05;
}
.DateInput_input::placeholder {
  color: #555;
}
.DayPicker_weekHeader_li {
  display: inline-block !important;
}
.DateRangePickerInput_clearDates_default:focus,
.DateRangePickerInput_clearDates_default:hover {
  border-radius: 0;
}
@media only screen and (max-width: 1350px) and (min-width: 901px) {
  .DateInput_input__small {
    padding: 8px 4px 6px;
    font-size: 12px;
    line-height: 18px;
  }
  .DateInput__small {
    width: 70px;
  }
}
.KeyboardShortcutRow_keyContainer {
  display: inline-block;
  margin-right: 6px;
  text-align: right;
  white-space: nowrap;
}
.KeyboardShortcutRow_key {
  padding: 2px 6px;
  text-transform: uppercase;
  background: #f6f6f6;
  font-family: monospace;
  font-size: 12px;
}
.KeyboardShortcutRow_action {
  display: inline;
  margin-left: 8px;
  word-break: break-word;
}