You are here

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
  1. /**
  2. * Custom search override styles.
  3. */
  4. /**
  5. * Search filters
  6. */
  7. /* The container for the search filters */
  8. aside {
  9. background-color: #f6f6f6;
  10. }
  11. /* Search filters */
  12. /* Mobile search button / Desktop sidebar title */
  13. /* Search filters clear button */
  14. .search-filters__trigger,
  15. .search-filters__title {
  16. color: #333;
  17. font-size: 1.1em;
  18. line-height: 1.46667em;
  19. }
  20. .search-filters__reset {
  21. background-color: #e5e5e5;
  22. border: 1px solid #ccc;
  23. border-radius: 3px;
  24. font-size: .8em;
  25. line-height: 1.83333em;
  26. }
  27. .search-filters__reset:active,
  28. .search-filters__reset:hover,
  29. .search-filters__reset:focus {
  30. background-color: #d8d8d8;
  31. border-color: #b5b5b5;
  32. text-decoration: underline;
  33. }
  34. /* Search filter accordion */
  35. .search-accordion {
  36. color: #333;
  37. /* Top level accordion links */
  38. }
  39. .search-accordion__title {
  40. color: #0d57aa;
  41. border-bottom: 1px solid #e5e5e5;
  42. font-size: .8em;
  43. }
  44. .search-accordion__title:active,
  45. .search-accordion__title:hover {
  46. color: #002a5b;
  47. background-color: #e5e5e5;
  48. border-color: #b5b5b5;
  49. text-decoration: none;
  50. }
  51. .search-accordion__title:focus,
  52. .search-accordion__title.js-search-accordion-open {
  53. color: #0d57aa;
  54. border-color: #b5b5b5;
  55. text-decoration: none;
  56. }
  57. /**
  58. * Search form
  59. */
  60. .search-form__label {
  61. color: #222;
  62. font-size: .8em;
  63. line-height: 1.83333em;
  64. }
  65. .search-form__input {
  66. border-radius: 3px 0 0 3px;
  67. border: 1px solid #e5e5e5;
  68. }
  69. .search-form__input:focus {
  70. border: 1px solid #555;
  71. outline: 0;
  72. }
  73. .search-form__submit {
  74. background-color: #ffcb05;
  75. border-radius: 0 3px 3px 0;
  76. border: 1px solid #e5e5e5;
  77. border-left: 0;
  78. }
  79. .search-form__submit svg {
  80. fill: #222;
  81. }
  82. .search-form__submit:active,
  83. .search-form__submit:hover,
  84. .search-form__submit:focus {
  85. background-color: #f4bb06;
  86. border-color: #e5e5e5;
  87. }
  88. .search-form__submit:active svg,
  89. .search-form__submit:hover svg,
  90. .search-form__submit:focus svg {
  91. fill: #222;
  92. }
  93. /**
  94. * Applied Filters
  95. */
  96. .applied-filters__filter {
  97. border-bottom: solid 2px #ffcb05;
  98. font-size: .8em;
  99. line-height: 1.46667em;
  100. padding-bottom: .29333em;
  101. }
  102. /**
  103. * Search results list
  104. */
  105. /* Search results eyebrow (i.e. the content type). */
  106. /* Search results metadata (i.e. the site + date) */
  107. /* Search result snippet text */
  108. /* highlighted text in snippet */
  109. .search-results__heading a {
  110. background-color: transparent;
  111. color: #0d57aa;
  112. text-decoration: none;
  113. border-bottom: 2px dashed #0d57aa;
  114. }
  115. .search-results__heading a:active,
  116. .search-results__heading a:hover {
  117. outline-width: 0;
  118. color: #002a5b;
  119. background-color: #e5e5e5;
  120. border-bottom: 2px solid #002a5b;
  121. }
  122. .search-results__label {
  123. color: #555;
  124. font-size: .8em;
  125. }
  126. .search-results__meta {
  127. color: #555;
  128. font-size: .8em;
  129. line-height: 1.46667em;
  130. }
  131. .search-results__teaser {
  132. font-size: 18px;
  133. line-height: 1.3;
  134. }
  135. .search-results em {
  136. font-weight: 700;
  137. background-color: rgba(255, 242, 192, 0.85);
  138. }
  139. /**
  140. * Pagination component
  141. */
  142. .search-pager {
  143. background-color: transparent;
  144. /** pagination component **/
  145. /** inactive page links **/
  146. /** active page link **/
  147. }
  148. .search-pager__items {
  149. border-radius: 3px;
  150. background-color: #eff0f1;
  151. }
  152. @media (min-width: 450px) {
  153. .search-pager__items {
  154. background-color: transparent;
  155. }
  156. }
  157. @media (min-width: 450px) {
  158. .search-pager__item a {
  159. background-color: #ffcb05;
  160. border-radius: 3px;
  161. }
  162. }
  163. .search-pager__item a:hover,
  164. .search-pager__item a:active {
  165. text-decoration: underline;
  166. color: #00274c;
  167. background-color: #ffcb05;
  168. }
  169. @media (min-width: 450px) {
  170. .search-pager__item a:hover,
  171. .search-pager__item a:active {
  172. background-color: #f4bb06;
  173. }
  174. }
  175. .search-pager__item a:hover svg,
  176. .search-pager__item a:active svg {
  177. fill: #00274c;
  178. }
  179. @media (min-width: 450px) {
  180. .search-pager__item.is-active a {
  181. background-color: #0d57aa;
  182. color: #fff;
  183. }
  184. .search-pager__item.is-active a:hover,
  185. .search-pager__item.is-active a:active {
  186. background-color: #002a5b;
  187. }
  188. }
  189. /**
  190. DatePicker widget
  191. */
  192. .PresetDateRangePicker_button {
  193. border: 2px solid #4696f1;
  194. color: #4696f1;
  195. }
  196. .PresetDateRangePicker_button__selected {
  197. color: #fff;
  198. background: #4696f1;
  199. }
  200. .DayPickerKeyboardShortcuts_show__bottomRight {
  201. border-top: 26px solid transparent;
  202. border-right: 33px solid #0d57aa;
  203. }
  204. .DayPickerKeyboardShortcuts_show__bottomRight:hover {
  205. border-right: 33px solid #083363;
  206. }
  207. .DayPickerKeyboardShortcuts_show__topRight {
  208. border-bottom: 26px solid transparent;
  209. border-right: 33px solid #0d57aa;
  210. }
  211. .DayPickerKeyboardShortcuts_show__topRight:hover {
  212. border-right: 33px solid #083363;
  213. }
  214. .DayPickerKeyboardShortcuts_show__topLeft {
  215. border-bottom: 26px solid transparent;
  216. border-left: 33px solid #4696f1;
  217. }
  218. .DayPickerKeyboardShortcuts_show__topLeft:hover {
  219. border-left: 33px solid #00274c;
  220. }
  221. .CalendarDay__selected_span {
  222. background: #ebf4fe;
  223. border: 1px solid #75b1f4;
  224. color: #0d57aa;
  225. }
  226. .CalendarDay__selected_span:active,
  227. .CalendarDay__selected_span:hover {
  228. background: #d8d8d8;
  229. border: 1px solid #b5b5b5;
  230. color: #fff;
  231. }
  232. .CalendarDay__last_in_range {
  233. border-right: #4696f1;
  234. }
  235. .CalendarDay__selected,
  236. .CalendarDay__selected:active,
  237. .CalendarDay__selected:hover {
  238. background: #0d57aa;
  239. border: 1px solid #0d57aa;
  240. color: #fff;
  241. }
  242. .CalendarDay__hovered_span,
  243. .CalendarDay__hovered_span:hover {
  244. background: #ebf4fe;
  245. border: 1px solid #75b1f4;
  246. color: #0d57aa;
  247. }
  248. .CalendarDay__hovered_span:active {
  249. background: #ebf4fe;
  250. border: 1px solid #75b1f4;
  251. color: #0d57aa;
  252. }
  253. .DateInput_input__focused {
  254. border-bottom: 2px solid #0d57aa;
  255. }
  256. .CalendarDay__highlighted_calendar {
  257. background: #fff2c0;
  258. color: #555;
  259. }
  260. .CalendarDay__highlighted_calendar:active,
  261. .CalendarDay__highlighted_calendar:hover {
  262. background: #ffcb05;
  263. color: #555;
  264. }
  265. .DateInput_input::placeholder {
  266. color: #555;
  267. }
  268. .DayPicker_weekHeader_li {
  269. display: inline-block !important;
  270. }
  271. .DateRangePickerInput_clearDates_default:focus,
  272. .DateRangePickerInput_clearDates_default:hover {
  273. border-radius: 0;
  274. }
  275. @media only screen and (max-width: 1350px) and (min-width: 901px) {
  276. .DateInput_input__small {
  277. font-size: 12px;
  278. line-height: 18px;
  279. padding: 8px 4px 6px;
  280. }
  281. .DateInput__small {
  282. width: 70px;
  283. }
  284. }
  285. .KeyboardShortcutRow_keyContainer {
  286. display: inline-block;
  287. white-space: nowrap;
  288. text-align: right;
  289. margin-right: 6px;
  290. }
  291. .KeyboardShortcutRow_key {
  292. font-family: monospace;
  293. font-size: 12px;
  294. text-transform: uppercase;
  295. background: #f6f6f6;
  296. padding: 2px 6px;
  297. }
  298. .KeyboardShortcutRow_action {
  299. display: inline;
  300. word-break: break-word;
  301. margin-left: 8px;
  302. }