User:JDrewniak (WMF)/exploreSimilarSearchResults.css

/* 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, "); 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); }