|
|
|
/*
|
|
|
|
* SearXNG, A privacy-respecting, hackable metasearch engine
|
|
|
|
*
|
|
|
|
* To convert "style.less" to "style.css" run: $make styles
|
|
|
|
*/
|
|
|
|
|
[stylelint] disable role 'no-descending-specificity'
This patch disables role 'no-descending-specificity'. IMO it is better to have
this rule active (see below [1]), but it is hard to rewrite the less files to
pass this rule, so for the first I chose to disable this rule.
---
Source order is important in CSS, and when two selectors have the same
specificity, the one that occurs last will take priority. However, the situation
is different when one of the selectors has a higher specificity. In that case,
source order does not matter: the selector with higher specificity will win out
even if it comes first.
The clashes of these two mechanisms for prioritization, source order and
specificity, can cause some confusion when reading stylesheets. If a selector
with higher specificity comes before the selector it overrides, we have to think
harder to understand it, because it violates the source order
expectation. Stylesheets are most legible when overriding selectors always come
after the selectors they override. That way both mechanisms, source order and
specificity, work together nicely.
This rule enforces that practice as best it can, reporting fewer errors than it
should. It cannot catch every actual overriding selector, but it can catch
certain common mistakes.
[1] https://stylelint.io/user-guide/rules/list/no-descending-specificity/
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
3 years ago
|
|
|
// stylelint-disable no-descending-specificity
|
|
|
|
|
|
|
|
@import "../../__common__/less/new_issue.less";
|
|
|
|
@import "../../__common__/less/stats.less";
|
|
|
|
@import "../../__common__/less/result_templates.less";
|
|
|
|
@import (inline) "../../node_modules/normalize.css/normalize.css";
|
|
|
|
@import "../generated/ion.less";
|
|
|
|
@import "definitions.less";
|
|
|
|
@import "mixins.less";
|
|
|
|
@import "code.less";
|
|
|
|
@import "toolkit.less";
|
|
|
|
@import "autocomplete.less";
|
|
|
|
@import "detail.less";
|
|
|
|
|
|
|
|
// for index.html template
|
|
|
|
@import "index.less";
|
|
|
|
|
|
|
|
// for preferences.html template
|
|
|
|
@import "preferences.less";
|
|
|
|
|
|
|
|
// Search-Field
|
|
|
|
@import "search.less";
|
|
|
|
|
|
|
|
// ion-icon
|
|
|
|
.ion-icon-big {
|
|
|
|
.ion-icon;
|
|
|
|
|
|
|
|
font-size: 149%;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Main LESS-Code
|
|
|
|
html {
|
|
|
|
font-family: sans-serif;
|
|
|
|
font-size: 0.9em;
|
|
|
|
.text-size-adjust;
|
|
|
|
|
|
|
|
color: var(--color-base-font);
|
|
|
|
background-color: var(--color-base-background);
|
|
|
|
padding: 0;
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
body,
|
|
|
|
main {
|
|
|
|
padding: 0;
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
body {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
height: 100vh;
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
main {
|
|
|
|
width: 100%;
|
|
|
|
margin-bottom: 2rem;
|
|
|
|
flex: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
#main_preferences,
|
|
|
|
#main_about,
|
|
|
|
#main_stats {
|
|
|
|
margin: 2em auto;
|
|
|
|
width: 85em;
|
|
|
|
}
|
|
|
|
|
|
|
|
footer {
|
|
|
|
clear: both;
|
|
|
|
min-height: 4rem;
|
|
|
|
padding: 1rem 0;
|
|
|
|
width: 100%;
|
|
|
|
text-align: center;
|
|
|
|
background-color: var(--color-footer-background);
|
|
|
|
border-top: 1px solid var(--color-footer-border);
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
p {
|
|
|
|
font-size: 0.9em;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
#main_preferences h1,
|
|
|
|
#main_stats h1 {
|
|
|
|
background: url('../img/searxng.png') no-repeat;
|
|
|
|
background-size: contain;
|
|
|
|
min-height: 40px;
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
|
|
span {
|
|
|
|
visibility: hidden;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
input[type="submit"],
|
|
|
|
#results button[type="submit"] {
|
|
|
|
padding: 0.7rem;
|
|
|
|
display: inline-block;
|
|
|
|
background: var(--color-btn-background);
|
|
|
|
color: var(--color-btn-font);
|
|
|
|
.rounded-corners;
|
|
|
|
|
|
|
|
border: 0;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
|
|
|
a {
|
|
|
|
text-decoration: none;
|
|
|
|
color: var(--color-url-font);
|
|
|
|
|
|
|
|
&:visited {
|
|
|
|
color: var(--color-url-visited-font);
|
|
|
|
|
|
|
|
.highlight {
|
|
|
|
color: var(--color-url-visited-font);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
article[data-vim-selected] {
|
|
|
|
background: var(--color-result-vim-selected);
|
|
|
|
border-left: 0.2rem solid var(--color-result-vim-arrow);
|
|
|
|
.rounded-right-corners;
|
|
|
|
}
|
|
|
|
|
|
|
|
article.result-images[data-vim-selected] {
|
|
|
|
background: var(--color-result-vim-arrow);
|
|
|
|
border: none;
|
|
|
|
.rounded-corners;
|
|
|
|
|
|
|
|
.image_thumbnail {
|
|
|
|
filter: opacity(60%);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.result {
|
|
|
|
margin: @results-margin 0;
|
|
|
|
padding: @result-padding;
|
|
|
|
border-left: 0.2rem solid transparent;
|
|
|
|
|
|
|
|
h3 {
|
|
|
|
font-size: 1.1em;
|
|
|
|
word-wrap: break-word;
|
|
|
|
margin: 0.4rem 0 0.4rem 0;
|
|
|
|
padding: 0;
|
|
|
|
|
|
|
|
a {
|
|
|
|
color: var(--color-result-link-font);
|
|
|
|
font-weight: normal;
|
|
|
|
font-size: 1.1em;
|
|
|
|
|
|
|
|
&:visited {
|
|
|
|
color: var(--color-result-link-visited-font);
|
|
|
|
}
|
|
|
|
|
|
|
|
&:focus,
|
|
|
|
&:hover {
|
|
|
|
text-decoration: underline;
|
|
|
|
border: none;
|
|
|
|
-webkit-box-shadow: none;
|
|
|
|
box-shadow: none;
|
|
|
|
outline: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.cache_link,
|
|
|
|
.proxyfied_link {
|
|
|
|
font-size: 0.9em !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.content,
|
|
|
|
.stat,
|
|
|
|
.altlink {
|
|
|
|
font-size: 0.9em;
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
max-width: 54em;
|
|
|
|
word-wrap: break-word;
|
|
|
|
line-height: 1.24;
|
|
|
|
|
|
|
|
.highlight {
|
|
|
|
color: var(--color-result-description-highlight-font);
|
|
|
|
background: inherit;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.codelines {
|
|
|
|
.highlight {
|
|
|
|
color: inherit;
|
|
|
|
background: inherit;
|
|
|
|
font-weight: normal;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.url {
|
|
|
|
font-size: 0.96em;
|
|
|
|
margin: 0 0 3px 0;
|
|
|
|
padding: 0;
|
|
|
|
max-width: 54em;
|
|
|
|
word-wrap: break-word;
|
|
|
|
color: var(--color-result-url-font);
|
|
|
|
}
|
|
|
|
|
|
|
|
.published_date {
|
|
|
|
font-size: 0.8em;
|
|
|
|
color: var(--color-result-publishdate-font);
|
|
|
|
}
|
|
|
|
|
|
|
|
img {
|
|
|
|
&.thumbnail {
|
|
|
|
float: left;
|
|
|
|
padding: 0 5px 10px 0;
|
|
|
|
width: 20em;
|
|
|
|
min-width: 20em;
|
|
|
|
min-height: 8em;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.image {
|
|
|
|
float: left;
|
|
|
|
padding: 0 5px 10px 0;
|
|
|
|
width: 100px;
|
|
|
|
max-height: 100px;
|
|
|
|
object-fit: scale-down;
|
|
|
|
object-position: right top;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.break {
|
|
|
|
clear: both;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.category-social .image {
|
|
|
|
width: auto !important;
|
|
|
|
min-width: 48px;
|
|
|
|
min-height: 48px;
|
|
|
|
padding: 0 5px 25px 0 !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.result-videos .content {
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
.engines {
|
|
|
|
float: right;
|
|
|
|
color: var(--color-result-engines-font);
|
|
|
|
|
|
|
|
span {
|
|
|
|
font-size: smaller;
|
|
|
|
margin: 0 0.5em 0 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.small_font {
|
|
|
|
font-size: 0.8em;
|
|
|
|
}
|
|
|
|
|
|
|
|
.highlight {
|
|
|
|
color: var(--color-result-link-font-highlight);
|
|
|
|
background: inherit;
|
|
|
|
}
|
|
|
|
|
|
|
|
.result-images {
|
|
|
|
display: inline-block;
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
position: relative;
|
|
|
|
max-height: 200px;
|
|
|
|
border: none;
|
|
|
|
|
|
|
|
img {
|
|
|
|
float: inherit;
|
|
|
|
margin: 0.125rem;
|
|
|
|
padding: 0;
|
|
|
|
border: none;
|
|
|
|
max-height: 200px;
|
|
|
|
background: var(--color-result-image-background);
|
|
|
|
}
|
|
|
|
|
|
|
|
span.title {
|
|
|
|
display: none;
|
|
|
|
color: var(--color-result-image-span-font);
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover span.title {
|
|
|
|
display: block;
|
|
|
|
position: absolute;
|
|
|
|
bottom: 0;
|
|
|
|
right: 0;
|
|
|
|
padding: 4px;
|
|
|
|
margin: 0 0 4px 4px;
|
|
|
|
// color: @color-result-image-span-font;
|
|
|
|
background-color: var(--color-result-image-span-background-hover);
|
|
|
|
font-size: 0.7em;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.result-map {
|
|
|
|
img.image {
|
|
|
|
float: right !important;
|
|
|
|
height: 100px !important;
|
|
|
|
width: auto !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
table {
|
|
|
|
font-size: 0.9em;
|
|
|
|
width: auto;
|
|
|
|
border-collapse: separate;
|
|
|
|
border-spacing: 0 0.35rem;
|
|
|
|
|
|
|
|
th {
|
|
|
|
font-weight: inherit;
|
|
|
|
width: 17rem;
|
|
|
|
vertical-align: top;
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
|
|
|
|
td {
|
|
|
|
vertical-align: top;
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.hidden {
|
|
|
|
display: none !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
#results {
|
|
|
|
margin: 2rem 2rem 0 @results-offset;
|
|
|
|
display: grid;
|
|
|
|
grid-template-columns: @results-width 25rem;
|
|
|
|
grid-template-rows: min-content min-content 1fr min-content;
|
|
|
|
gap: 0 @results-gap;
|
|
|
|
grid-template-areas:
|
|
|
|
"corrections sidebar"
|
|
|
|
"answers sidebar"
|
|
|
|
"urls sidebar"
|
|
|
|
"pagination sidebar";
|
|
|
|
}
|
|
|
|
|
|
|
|
#results #answers *:first-child,
|
|
|
|
#results #sidebar *:first-child,
|
|
|
|
#results #urls *:first-child {
|
|
|
|
margin-top: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
#urls {
|
|
|
|
padding: 0;
|
|
|
|
grid-area: urls;
|
|
|
|
}
|
|
|
|
|
|
|
|
#suggestions {
|
|
|
|
.wrapper {
|
|
|
|
display: flex;
|
|
|
|
flex-flow: row wrap;
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
|
|
|
form {
|
|
|
|
display: inline-block;
|
|
|
|
flex: 1 1 50%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
#suggestions,
|
|
|
|
#answers,
|
|
|
|
#infoboxes,
|
|
|
|
#corrections {
|
|
|
|
input {
|
|
|
|
padding: 0;
|
|
|
|
margin: 3px;
|
|
|
|
font-size: 0.9em;
|
|
|
|
display: inline-block;
|
|
|
|
background: transparent;
|
|
|
|
color: var(--color-result-search-url-font);
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
|
|
|
input[type="submit"],
|
|
|
|
.infobox .url a {
|
|
|
|
color: var(--color-result-link-font);
|
|
|
|
text-decoration: none;
|
|
|
|
font-size: 0.9rem;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
#corrections {
|
|
|
|
grid-area: corrections;
|
|
|
|
display: flex;
|
|
|
|
flex-flow: row wrap;
|
|
|
|
margin: 0 0 1em 0;
|
|
|
|
|
|
|
|
h4,
|
|
|
|
input[type="submit"] {
|
|
|
|
display: inline-block;
|
|
|
|
margin: 0 0.5em 0 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
input[type="submit"]::after {
|
|
|
|
content: ", ";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
#suggestions .title,
|
|
|
|
#search_url .title,
|
|
|
|
#apis .title {
|
|
|
|
margin: 2em 0 0.5em 0;
|
|
|
|
color: var(--color-base-font);
|
|
|
|
}
|
|
|
|
|
|
|
|
#answers {
|
|
|
|
grid-area: answers;
|
|
|
|
border: 1px solid var(--color-answer-border);
|
|
|
|
background: var(--color-answer-background);
|
|
|
|
padding: 0.9em;
|
|
|
|
margin-bottom: @results-margin;
|
|
|
|
color: var(--color-answer-font);
|
|
|
|
.rounded-corners;
|
|
|
|
|
|
|
|
h4 {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.answer {
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
#answers,
|
|
|
|
#infoboxes {
|
|
|
|
form {
|
|
|
|
min-width: 210px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
#sidebar {
|
|
|
|
grid-area: sidebar;
|
|
|
|
word-wrap: break-word;
|
|
|
|
color: var(--color-sidebar-font);
|
|
|
|
|
|
|
|
.infobox {
|
|
|
|
margin: 10px 0 10px;
|
|
|
|
border: 1px solid var(--color-sidebar-border);
|
|
|
|
padding: 1rem;
|
|
|
|
font-size: 0.9em;
|
|
|
|
.rounded-corners;
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
margin: 0 0 0.5em 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
img {
|
|
|
|
max-width: 100%;
|
|
|
|
max-height: 12em;
|
|
|
|
display: block;
|
|
|
|
margin: 0 auto;
|
|
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
dl {
|
|
|
|
margin: 0.5em 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
dt {
|
|
|
|
display: inline;
|
|
|
|
margin: 0.5em 0.25em 0.5em 0;
|
|
|
|
padding: 0;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
|
|
|
|
dd {
|
|
|
|
display: inline;
|
|
|
|
margin: 0.5em 0;
|
|
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
input {
|
|
|
|
font-size: 1em;
|
|
|
|
}
|
|
|
|
|
|
|
|
br {
|
|
|
|
clear: both;
|
|
|
|
}
|
|
|
|
|
|
|
|
.attributes,
|
|
|
|
.urls {
|
|
|
|
clear: both;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
#search_url {
|
|
|
|
margin-top: 8px;
|
|
|
|
|
|
|
|
div.selectable_url {
|
|
|
|
pre {
|
|
|
|
width: 200em;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
#linkto_preferences {
|
|
|
|
position: absolute;
|
|
|
|
right: 10px;
|
|
|
|
top: 2rem;
|
|
|
|
padding: 0;
|
|
|
|
border: 0;
|
|
|
|
display: block;
|
|
|
|
font-size: 1.2em;
|
|
|
|
color: var(--color-search-font);
|
|
|
|
|
|
|
|
a:link *,
|
|
|
|
a:hover *,
|
|
|
|
a:visited *,
|
|
|
|
a:active * {
|
|
|
|
color: var(--color-search-font);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
#pagination {
|
|
|
|
grid-area: pagination;
|
|
|
|
|
|
|
|
br {
|
|
|
|
clear: both;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
#apis {
|
|
|
|
margin-top: 8px;
|
|
|
|
clear: both;
|
|
|
|
}
|
|
|
|
|
|
|
|
#backToTop {
|
|
|
|
border: 1px solid var(--color-backtotop-border);
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
font-size: 1em;
|
|
|
|
box-shadow: 0 0 5px var(--color-backtotop-shadow);
|
|
|
|
background: var(--color-backtotop-background);
|
|
|
|
position: fixed;
|
|
|
|
bottom: 8rem;
|
|
|
|
left: @results-width + @results-offset + (0.5 * @results-gap - 1.2em);
|
|
|
|
transition: opacity 0.5s;
|
|
|
|
opacity: 0;
|
|
|
|
.rounded-corners;
|
|
|
|
|
|
|
|
a {
|
|
|
|
display: block;
|
|
|
|
margin: 0;
|
|
|
|
padding: 0.7em;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
#results.scrolling #backToTop {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: @tablet) {
|
|
|
|
#main_preferences,
|
|
|
|
#main_about,
|
|
|
|
#main_stats {
|
|
|
|
margin: 2rem 0.5rem;
|
|
|
|
width: auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
#infoboxes {
|
|
|
|
position: inherit;
|
|
|
|
max-width: inherit;
|
|
|
|
|
|
|
|
.infobox {
|
|
|
|
clear: both;
|
|
|
|
|
|
|
|
img {
|
|
|
|
float: left;
|
|
|
|
max-width: 10em;
|
|
|
|
margin: 0.5em 0.5em 0.5em 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
#sidebar {
|
|
|
|
margin-bottom: @results-margin;
|
|
|
|
padding: 0;
|
|
|
|
float: none;
|
|
|
|
border: none;
|
|
|
|
width: auto;
|
|
|
|
|
|
|
|
input {
|
|
|
|
border: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
#apis {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
#search_url {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.result {
|
|
|
|
.thumbnail {
|
|
|
|
max-width: 98%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.url {
|
|
|
|
span.url {
|
|
|
|
display: block;
|
|
|
|
white-space: nowrap;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
overflow: hidden;
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.engines {
|
|
|
|
float: right;
|
|
|
|
padding: 0 0 3px 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.result-images {
|
|
|
|
border-bottom: none !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.image_result {
|
|
|
|
max-width: 98%;
|
|
|
|
|
|
|
|
img {
|
|
|
|
max-width: 98%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
#backToTop {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
#pagination {
|
|
|
|
margin: 2rem 0 0 0 !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
#main_results div#results {
|
|
|
|
margin: 2rem auto 0 auto;
|
|
|
|
justify-content: center;
|
|
|
|
display: grid;
|
|
|
|
grid-template-columns: @results-width;
|
|
|
|
grid-template-rows: min-content min-content min-content 1fr min-content min-content;
|
|
|
|
gap: 0;
|
|
|
|
grid-template-areas:
|
|
|
|
"corrections"
|
|
|
|
"answers"
|
|
|
|
"sidebar"
|
|
|
|
"urls"
|
|
|
|
"pagination";
|
|
|
|
}
|
|
|
|
|
|
|
|
article[data-vim-selected]::before {
|
|
|
|
left: calc(((100% - @results-width) / 2) - 20px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
#main_results div#results.only_template_images {
|
|
|
|
margin: 2rem @results-tablet-offset 0 @results-tablet-offset;
|
|
|
|
display: grid;
|
|
|
|
grid-template-columns: 100%;
|
|
|
|
grid-template-rows: min-content min-content 1fr min-content min-content;
|
|
|
|
gap: 0;
|
|
|
|
grid-template-areas:
|
|
|
|
"corrections"
|
|
|
|
"urls"
|
|
|
|
"answers"
|
|
|
|
"sidebar"
|
|
|
|
"pagination";
|
|
|
|
|
|
|
|
#urls {
|
|
|
|
width: inherit;
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
#backToTop {
|
|
|
|
left: auto;
|
|
|
|
right: 1rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
#pagination {
|
|
|
|
margin-right: 4rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: @phone) {
|
|
|
|
#main_results div#results {
|
|
|
|
grid-template-columns: 100%;
|
|
|
|
margin: 2rem 0 0 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
article[data-vim-selected]::before {
|
|
|
|
display: none;
|
|
|
|
content: "";
|
|
|
|
}
|
|
|
|
|
|
|
|
#linkto_preferences {
|
|
|
|
display: none;
|
|
|
|
position: fixed !important;
|
|
|
|
top: 100px;
|
|
|
|
right: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
#sidebar {
|
|
|
|
margin: 0 5px 2px 5px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.infobox {
|
|
|
|
box-shadow: 0 0 5px var(--color-result-shadow);
|
|
|
|
}
|
|
|
|
|
|
|
|
#corrections,
|
|
|
|
#answers {
|
|
|
|
margin: 1rem @results-tablet-offset;
|
|
|
|
box-shadow: 0 0 5px var(--color-result-shadow);
|
|
|
|
}
|
|
|
|
|
|
|
|
#results {
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
#pagination {
|
|
|
|
margin: 2rem 1rem 0 1rem !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.result {
|
|
|
|
margin: 1rem @results-tablet-offset;
|
|
|
|
border: 1px solid var(--color-result-border);
|
|
|
|
box-shadow: 0 0 5px var(--color-result-shadow);
|
|
|
|
.rounded-corners;
|
|
|
|
}
|
|
|
|
|
|
|
|
article[data-vim-selected] {
|
|
|
|
border: 1px solid var(--color-result-border);
|
|
|
|
.rounded-corners;
|
|
|
|
}
|
|
|
|
|
|
|
|
.result-images {
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
border: none;
|
|
|
|
box-shadow: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: @small-phone) {
|
|
|
|
.result-videos {
|
|
|
|
img.thumbnail {
|
|
|
|
float: none !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.content {
|
|
|
|
overflow: inherit;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
pre code {
|
|
|
|
white-space: pre-wrap;
|
|
|
|
}
|