search_theme_override.css in Search API Federated Solr 8

/**
 * Custom search override styles.
 */

/**
 * Search filters
 */
/* The container for the search filters */
aside {
  background-color: #f6f6f6;
}

/* Search filters */
/* Mobile search button / Desktop sidebar title */
/* Search filters clear button */
.search-filters__trigger,
.search-filters__title {
  color: #333;
  font-size: 1.1em;
  line-height: 1.46667em;
}
.search-filters__reset {
  background-color: #e5e5e5;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: .8em;
  line-height: 1.83333em;
}
.search-filters__reset:active,
.search-filters__reset:hover,
.search-filters__reset:focus {
  background-color: #d8d8d8;
  border-color: #b5b5b5;
  text-decoration: underline;
}

/* Search filter accordion */
.search-accordion {
  color: #333;
  /* Top level accordion links */
}
.search-accordion__title {
  color: #0d57aa;
  border-bottom: 1px solid #e5e5e5;
  font-size: .8em;
}
.search-accordion__title:active,
.search-accordion__title:hover {
  color: #002a5b;
  background-color: #e5e5e5;
  border-color: #b5b5b5;
  text-decoration: none;
}
.search-accordion__title:focus,
.search-accordion__title.js-search-accordion-open {
  color: #0d57aa;
  border-color: #b5b5b5;
  text-decoration: none;
}

/**
 * Search form
 */
.search-form__label {
  color: #222;
  font-size: .8em;
  line-height: 1.83333em;
}

.search-form__input {
  border-radius: 3px 0 0 3px;
  border: 1px solid #e5e5e5;
}
.search-form__input:focus {
  border: 1px solid #555;
  outline: 0;
}

.search-form__submit {
  background-color: #ffcb05;
  border-radius: 0 3px 3px 0;
  border: 1px solid #e5e5e5;
  border-left: 0;
}
.search-form__submit svg {
  fill: #222;
}
.search-form__submit:active,
.search-form__submit:hover,
.search-form__submit:focus {
  background-color: #f4bb06;
  border-color: #e5e5e5;
}
.search-form__submit:active svg,
.search-form__submit:hover svg,
.search-form__submit:focus svg {
  fill: #222;
}

/**
 * Applied Filters
 */
.applied-filters__filter {
  border-bottom: solid 2px #ffcb05;
  font-size: .8em;
  line-height: 1.46667em;
  padding-bottom: .29333em;
}

/**
 * Search results list
 */
/* Search results eyebrow (i.e. the content type). */
/* Search results metadata (i.e. the site + date) */
/* Search result snippet text */
/* highlighted text in snippet */
.search-results__heading a {
  background-color: transparent;
  color: #0d57aa;
  text-decoration: none;
  border-bottom: 2px dashed #0d57aa;
}
.search-results__heading a:active,
.search-results__heading a:hover {
  outline-width: 0;
  color: #002a5b;
  background-color: #e5e5e5;
  border-bottom: 2px solid #002a5b;
}
.search-results__label {
  color: #555;
  font-size: .8em;
}
.search-results__meta {
  color: #555;
  font-size: .8em;
  line-height: 1.46667em;
}
.search-results__teaser {
  font-size: 18px;
  line-height: 1.3;
}
.search-results em {
  font-weight: 700;
  background-color: rgba(255, 242, 192, 0.85);
}

/**
 * Pagination component
 */
.search-pager {
  background-color: transparent;
  /** pagination component **/
  /** inactive page links **/
  /** active page link **/
}
.search-pager__items {
  border-radius: 3px;
  background-color: #eff0f1;
}
@media (min-width: 450px) {
  .search-pager__items {
    background-color: transparent;
  }
}
@media (min-width: 450px) {
  .search-pager__item a {
    background-color: #ffcb05;
    border-radius: 3px;
  }
}
.search-pager__item a:hover,
.search-pager__item a:active {
  text-decoration: underline;
  color: #00274c;
  background-color: #ffcb05;
}
@media (min-width: 450px) {
  .search-pager__item a:hover,
  .search-pager__item a:active {
    background-color: #f4bb06;
  }
}
.search-pager__item a:hover svg,
.search-pager__item a:active svg {
  fill: #00274c;
}
@media (min-width: 450px) {
  .search-pager__item.is-active a {
    background-color: #0d57aa;
    color: #fff;
  }
  .search-pager__item.is-active a:hover,
  .search-pager__item.is-active a:active {
    background-color: #002a5b;
  }
}

/**
 DatePicker widget
 */
.PresetDateRangePicker_button {
  border: 2px solid #4696f1;
  color: #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-bottom: 26px solid transparent;
  border-right: 33px solid #0d57aa;
}

.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 {
  background: #ebf4fe;
  border: 1px solid #75b1f4;
  color: #0d57aa;
}

.CalendarDay__selected_span:active,
.CalendarDay__selected_span:hover {
  background: #d8d8d8;
  border: 1px solid #b5b5b5;
  color: #fff;
}

.CalendarDay__last_in_range {
  border-right: #4696f1;
}

.CalendarDay__selected,
.CalendarDay__selected:active,
.CalendarDay__selected:hover {
  background: #0d57aa;
  border: 1px solid #0d57aa;
  color: #fff;
}

.CalendarDay__hovered_span,
.CalendarDay__hovered_span:hover {
  background: #ebf4fe;
  border: 1px solid #75b1f4;
  color: #0d57aa;
}

.CalendarDay__hovered_span:active {
  background: #ebf4fe;
  border: 1px solid #75b1f4;
  color: #0d57aa;
}

.DateInput_input__focused {
  border-bottom: 2px solid #0d57aa;
}

.CalendarDay__highlighted_calendar {
  background: #fff2c0;
  color: #555;
}

.CalendarDay__highlighted_calendar:active,
.CalendarDay__highlighted_calendar:hover {
  background: #ffcb05;
  color: #555;
}

.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 {
    font-size: 12px;
    line-height: 18px;
    padding: 8px 4px 6px;
  }
  .DateInput__small {
    width: 70px;
  }
}

.KeyboardShortcutRow_keyContainer {
  display: inline-block;
  white-space: nowrap;
  text-align: right;
  margin-right: 6px;
}

.KeyboardShortcutRow_key {
  font-family: monospace;
  font-size: 12px;
  text-transform: uppercase;
  background: #f6f6f6;
  padding: 2px 6px;
}

.KeyboardShortcutRow_action {
  display: inline;
  word-break: break-word;
  margin-left: 8px;
}