search_theme_override.css in Search API Federated Solr 7.2
/**
* 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;
}
File
docs/assets/search_theme_override.css
View source
- /**
- * 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;
- }