User:JDrewniak (WMF)/exploreSimilarSearchResults.css

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

/* stylelint-disable selector-no-vendor-prefix, at-rule-no-unknown */
/* stylelint-enable selector-no-vendor-prefix, at-rule-no-unknown */
.mw-search-results > li {
  padding: 0.5em;
  position: relative;
  left: -0.5em;
  top: -0.5em;
  padding-bottom: 0;
  margin-bottom: 0.8em;
  width: 100%;
}
.mw-search-results > li .ext-cirrus__xplr__buttons,
.mw-search-results > li .mw-cirrus__xplr__buttons {
  display: inline;
}
.mw-search-results li.ext-cirrus__xplr--active,
.mw-search-results li.mw-cirrus__xplr--active {
  box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 0, 0, 0.5);
  z-index: 2;
}
.mw-search-result-data {
  line-height: 1.6em;
  white-space: nowrap;
}
.ext-cirrus__xplr__content-wrapper,
.mw-cirrus__xplr__content-wrapper {
  color: #222222;
  width: 100%;
  position: absolute;
  background-color: #fff;
  box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 0, 0, 0.5);
  padding: 0 0.5rem 0.5rem 0.5rem;
  border-radius: 0 0 2px 2px;
  left: 0;
  top: 97%;
  z-index: 1;
  font-size: inherit;
  box-sizing: border-box;
  clip: rect(0, 6000px, 6000px, -100px);
  white-space: normal;
}
.ext-cirrus__xplr__buttons,
.mw-cirrus__xplr__buttons {
  display: none;
  padding-left: 1em;
}
.ext-cirrus__xplr__button,
.mw-cirrus__xplr__button {
  color: #72777d;
  padding-left: 0.2em;
}
.ext-cirrus__xplr__button[data-es-content='languages']:before,
.mw-cirrus__xplr__button[data-es-content='languages']:before {
  content: '';
  display: inline-block;
  height: 15px;
  width: 19px;
  margin-right: 4px;
  background-image: linear-gradient(transparent, transparent), url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13%2019l.8-3h5.3l.9%203h2.2l-4.2-13h-3l-4.2%2013h2.2zm3.5-11l2%206h-4l2-6z%22%20fill%3D%22%23707070%22%2F%3E%3Cpath%20d%3D%22M5%204l.938%201.906h-4.938v2.094h1.594c.6%201.8%201.406%203.206%202.406%204.406-1.1.7-4.313%201.781-4.313%201.781l1.313%201.813s3.487-1.387%204.688-2.188c1%20.7%202.319%201.188%203.719%201.688l.594-2c-1-.3-1.988-.688-2.688-1.188%201.1-1.1%201.9-2.506%202.5-4.406h2.188l.5-2h-5.563l-.938-1.906h-2zm-.188%204h3.781c-.4%201.3-.906%202-1.906%203-1.1-1-1.475-1.7-1.875-3z%22%20fill%3D%22%23707070%22%2F%3E%3C%2Fsvg%3E%0A);
}
.ext-cirrus__xplr__button__icon,
.mw-cirrus__xplr__button__icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  margin-right: 0.5em;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"><path fill=\"%2372777d\" d=\"M11 7.974l-.965 1.052L6 5.168 2.053 9.026 1 7.974l5-5 5 5\"/></svg>");
  transition: transform 160ms ease-out;
  transform: rotate(0);
}
.ext-cirrus__xplr__content,
.mw-cirrus__xplr__content {
  margin: 0;
  padding: 0;
  padding-bottom: 1rem;
}
.ext-cirrus__xplr__content:after,
.mw-cirrus__xplr__content:after {
  content: '';
  display: table;
  clear: both;
}
.ext-cirrus__xplr__categories a,
.mw-cirrus__xplr__categories a {
  display: inline-block;
  line-height: 1.2em;
  margin-bottom: 0.5em;
}
.ext-cirrus__xplr__content__title,
.mw-cirrus__xplr__content__title {
  float: left;
  width: 100%;
  clear: both;
  margin: 0.5em 0;
}
.ext-cirrus__xplr__related-page,
.mw-cirrus__xplr__related-page {
  width: 32.33%;
  height: 4em;
  padding: 0.5em;
  line-height: 1.2em;
  float: left;
  box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.5);
  color: #222222;
  box-sizing: border-box;
  overflow: hidden;
  margin-right: 1.5%;
}
.ext-cirrus__xplr__related-page:hover,
.mw-cirrus__xplr__related-page:hover {
  text-decoration: none;
  background-color: #eaf3ff;
}
.ext-cirrus__xplr__related-page:last-child,
.mw-cirrus__xplr__related-page:last-child {
  margin-right: 0;
}
.ext-cirrus__xplr__related-page__thumb,
.mw-cirrus__xplr__related-page__thumb {
  width: 3.14em;
  height: 3.14em;
  background-size: cover;
  background-position: center center;
  float: left;
  border-radius: 2px;
  margin-right: 0.5em;
  margin-bottom: 1em;
  font-size: 14px;
}
.ext-cirrus__xplr__related-page:hover .ext-cirrus__xplr__related-page__title,
.mw-cirrus__xplr__related-page:hover .mw-cirrus__xplr__related-page__title, {
  color: #3366cc;
  text-decoration: underline;
}
.ext-cirrus__xplr__related-page p,
.mw-cirrus__xplr__related-page p, {
  margin: 0;
  font-size: 0.82em;
  color: #54595d;
}
.ext-cirrus__xplr__related-page:hover p,
.mw-cirrus__xplr__related-page:hover p, {
  text-decoration: none;
}
.ext-cirrus__xplr__content__columns,
.mw-cirrus__xplr__content__columns, {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  -moz-columns: 3;
  -webkit-columns: 3;
  columns: 3;
}
.ext-cirrus__xplr__content--languages__link,
.mw-cirrus__xplr__content--languages__link, {
  float: left;
  width: 33.333%;
  line-height: 1.2em;
  margin-bottom: 0.5em;
}
.ext-cirrus__xplr__content--languages__link div,
.mw-cirrus__xplr__content--languages__link div, {
  color: #54595d;
}
.ext-cirrus__xplr__content--languages li,
.mw-cirrus__xplr__content--languages li, {
  padding: 0 1.5rem 0.5rem 0;
  display: block;
  line-height: 1.3;
}
.ext-cirrus__xplr__button--active-slow .ext-cirrus__xplr__button__icon,
.mw-cirrus__xplr__button--active-slow .mw-cirrus__xplr__button__icon, {
  transition: transform 350ms ease-out;
  transform: rotate(180deg);
}
.ext-cirrus__xplr__button--active .ext-cirrus__xplr__button__icon,
.mw-cirrus__xplr__button--active .mw-cirrus__xplr__button__icon, {
  transform: rotate(180deg);
}