diff --git a/metager/resources/less/metager/pages/resultpage/result-page.less b/metager/resources/less/metager/pages/resultpage/result-page.less index 3f0961415d4abba94642b9e24aa9c544ee564bdb..aee2f7c133113f4f87e2ac5e626c3e0c63987c12 100644 --- a/metager/resources/less/metager/pages/resultpage/result-page.less +++ b/metager/resources/less/metager/pages/resultpage/result-page.less @@ -10,20 +10,13 @@ @additions-width-min: 500px; @additions-width-max: 500px; // Breakpoints for the 2 resultpage columns -@resultpage-breakpoint-max: ( - @results-width-max + @additions-width-max + @padding-small-default * 2 + - @padding-small-default * 4 + 6 -); -@resultpage-breakpoint-min: ( - @results-width-min + @additions-width-min + @padding-small-default * 4 -); +@resultpage-breakpoint-max: (@results-width-max + @additions-width-max + @padding-small-default * 2 + @padding-small-default * 4 + 6); +@resultpage-breakpoint-min: (@results-width-min + @additions-width-min + @padding-small-default * 4); @product-shop-color: green; // The point upon which a .screen-large logo is displayed @logo-size-breakpoint: (@results-width-min + @padding-small-default * 2); // The point upon which the sidebar opener switches place -@sidebar-opener-breakpoint: ( - @results-width-max + @padding-small-default * 2 + 60px -); +@sidebar-opener-breakpoint: (@results-width-max + @padding-small-default * 2 + 60px); // Quicktip background color @quicktip-background-color: @resultpage-background-color; // Color of the Spruch author @@ -43,7 +36,7 @@ font-size: 1.5em; display: inline-block; - > img { + >img { width: 100px; } } @@ -105,8 +98,8 @@ body { } } -.lSPrev > span, -.lSNext > span { +.lSPrev>span, +.lSNext>span { color: @metager-orange; } @@ -115,7 +108,7 @@ body { display: flex; } -.nav-tabs > li > a { +.nav-tabs>li>a { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; @@ -186,6 +179,7 @@ nav .input-group { a { &#donation { + &, &:visited { color: inherit; @@ -205,10 +199,10 @@ a { color: @spruch-author-color; } - & > p { + &>p { margin-bottom: 0; - & + p { + &+p { margin-top: 4px; } } @@ -218,7 +212,7 @@ a { display: flex; padding-bottom: 15px; - & > input { + &>input { min-width: 35%; max-width: 80%; } @@ -301,8 +295,8 @@ a { grid-template-columns: 100%; } - > .image-container { - > .images { + >.image-container { + >.images { display: grid; grid-template-columns: repeat(6, 1fr); @@ -329,20 +323,20 @@ a { grid-template-rows: masonry; gap: 1rem; - > .image { + >.image { overflow: hidden; border-radius: 10px 10px 0 0; margin: 0; background-color: @highlight-color; cursor: pointer; - > div { + >div { &.image { display: flex; justify-content: center; height: 100%; - > img { + >img { width: 100%; height: 100%; min-height: 100px; @@ -367,28 +361,28 @@ a { } } - > .image-details { + >.image-details { @media (max-width: @full-screen-details-breakpoint) { overflow: hidden; z-index: 27; } - > input, - > .details { + >input, + >.details { display: none; } @media (min-width: (@full-screen-details-breakpoint + 1)) { - > input:not(:checked) ~ .default { + >input:not(:checked)~.default { display: block; } - > input:checked ~ .default { + >input:checked~.default { display: none; } } - > input:checked + .details { + >input:checked+.details { display: block; @media (max-width: @full-screen-details-breakpoint) { @@ -399,7 +393,7 @@ a { } } - > .details { + >.details { width: 100%; position: sticky; top: 5rem; @@ -421,38 +415,38 @@ a { max-height: none; } - > div.image-container { + >div.image-container { display: grid; place-items: center; - > img { + >img { max-width: 100%; max-height: 100%; } } - > .details { + >.details { padding: 1rem; @media (max-width: @full-screen-details-breakpoint) { padding: 0 1rem; } - > h3 { + >h3 { line-height: 1.1; margin: 0; } - > .actions { + >.actions { display: flex; justify-content: space-between; padding: 0.5rem 0; - > a.btn { + >a.btn { height: max-content; } - > .result-hoster { + >.result-hoster { color: inherit; font-size: 0.8rem; @@ -460,7 +454,7 @@ a { border: 1px solid @background-color; } - > ul { + >ul { top: 1.5rem; list-style-type: none; margin: 0; @@ -469,11 +463,11 @@ a { } } - > .copyright { + >.copyright { font-size: 0.7rem; } - > button { + >button { display: none; width: 100%; margin-top: 1rem; @@ -486,7 +480,7 @@ a { } } - > #external-search { + >#external-search { width: @results-width-max; max-width: 100%; margin: 0 auto; @@ -498,26 +492,26 @@ a { grid-column: auto; } - > h3 { + >h3 { margin: 0; line-height: 1; font-size: clamp(1.2rem, 6vw, 1.3rem); } - > div.external-links { + >div.external-links { display: grid; grid-template-columns: repeat(3, max-content); gap: 0.5rem; justify-content: space-between; place-items: center; - > a.btn.btn-primary { + >a.btn.btn-primary { background-color: inherit; border-color: #ff8000; color: @text-color; } - > .divider { + >.divider { display: flex; gap: 0.5rem; @@ -527,21 +521,21 @@ a { } } - > .spacer { + >.spacer { grid-column: span 2; } - > .external-engines { + >.external-engines { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } - > div.input-group { + >div.input-group { text-align: center; position: relative; - > label { + >label { font-weight: normal; font-size: 0.8rem; cursor: pointer; @@ -551,7 +545,7 @@ a { @media (max-width: 600px) { grid-template-columns: 1fr; - > .spacer { + >.spacer { display: none; grid-column: initial; } @@ -559,7 +553,7 @@ a { } } - > #engine-footer { + >#engine-footer { grid-column: span 2; @media (max-width: @full-screen-details-breakpoint) { @@ -567,7 +561,7 @@ a { } } - > #backtotop { + >#backtotop { grid-column: span 2; @media (max-width: @full-screen-details-breakpoint) { @@ -591,34 +585,34 @@ a { } .nachrichten { - #results-container > #results { - > .result[data-index] > .result-header { + #results-container>#results { + >.result[data-index]>.result-header { display: flex; flex-flow: column-reverse; align-items: center; row-gap: 0.25rem; - > .result-subheadline { + >.result-subheadline { line-height: 1; - > img.favicon { + >img.favicon { height: 1em; background-color: white; } - > a.result-link { + >a.result-link { color: fade(@text-color, 70%); } - > span.date, - > span.date-string { + >span.date, + >span.date-string { line-height: 0.8; color: fade(@text-color, 70%); font-size: 0.8em; } } - > .result-headline > .result-title > a { + >.result-headline>.result-title>a { color: @link-color; } } @@ -631,7 +625,7 @@ a { text-align: center; margin-top: 20px; - & > img { + &>img { width: 30px; } } @@ -641,7 +635,7 @@ a { justify-content: center; padding: 1rem 0; - & > div { + &>div { border: #aaa solid 1px; border-radius: 10px; padding: 5px; @@ -689,8 +683,8 @@ a { margin-bottom: 10px; } -.lSPrev > i, -.lSNext > i { +.lSPrev>i, +.lSNext>i { background-color: @color-black; padding: 5px; } @@ -760,7 +754,7 @@ a { gap: 0.5rem; padding-top: 1rem; - > span[name="top"] { + >span[name="top"] { display: none; } @@ -773,7 +767,7 @@ a { @supports not (selector(:first-child)) { gap: 0; - > * { + >* { padding: 0.6rem 0; } } @@ -821,30 +815,30 @@ a { flex-wrap: wrap; justify-content: space-around; - > div { + >div { border-radius: 3px; - > h3 { + >h3 { font-size: 0.9rem; margin: 0; color: fade(@text-color, 70%); - border-bottom: 1px dotted fade(@metager-orange, 70%); + border-bottom: 1px dotted @metager-orange; - > a { - color: fade(@metager-orange, 70%); + >a { + color: @metager-orange; } text-align: center; } - > .engines { + >.engines { display: flex; gap: 0.5rem; justify-content: center; padding: 0.5rem 1rem; flex-wrap: wrap; - > .engine { + >.engine { color: fade(@text-color, 70%); font-size: 0.8rem; border-radius: 10px; @@ -854,7 +848,7 @@ a { cursor: copy; } - > a { + >a { cursor: inherit; } } @@ -943,6 +937,7 @@ a { border-radius: 5px; input { + &::-webkit-search-cancel-button, &::-webkit-search-decoration { appearance: none; @@ -957,7 +952,7 @@ a { border-radius: 5px; } - > * { + >* { border-radius: 5px; min-height: 40px; @@ -990,14 +985,14 @@ a { margin: 0; } - & > div { + &>div { padding-right: 16px; - & > a { + &>a { color: @text-color; } - &.active > a { + &.active>a { border-bottom: 1px solid @text-color; color: @text-color; } @@ -1037,7 +1032,7 @@ a { display: none; } - input[type="checkbox"]:not(:checked) + .scrollbox { + input[type="checkbox"]:not(:checked)+.scrollbox { display: none; } @@ -1055,7 +1050,7 @@ a { gap: 0.5rem; } - input[type="checkbox"]:checked + div.scrollbox { + input[type="checkbox"]:checked+div.scrollbox { max-height: 200px; transform: scaleY(1); } @@ -1065,7 +1060,7 @@ a { align-items: center; margin-left: -8px; - > div { + >div { margin-left: 8px; } @@ -1077,7 +1072,7 @@ a { flex-grow: 0; margin-left: 0px; - > div { + >div { margin-left: 8px; } } @@ -1145,11 +1140,11 @@ a { display: none; } - #custom-date:checked + select { + #custom-date:checked+select { display: none; } - #custom-date:checked + select + #bing-from-to { + #custom-date:checked+select+#bing-from-to { display: flex; } } @@ -1162,6 +1157,7 @@ a { #settings { text-align: center; + a { display: flex; align-items: center; @@ -1204,18 +1200,18 @@ footer.resultPageFooter { } /* Searchbar Opener */ -#research-bar > .sidebar-opener { +#research-bar>.sidebar-opener { display: none; margin-right: 10px; margin-left: 20px; } @media (max-width: @sidebar-opener-breakpoint) { - #resultpage-container > .sidebar-opener { + #resultpage-container>.sidebar-opener { display: none; } - #research-bar > .sidebar-opener { + #research-bar>.sidebar-opener { display: initial; } } @@ -1303,4 +1299,4 @@ footer.resultPageFooter { .settings-checkbox .settings-icon { margin-left: 5px; font-size: 1em; -} +} \ No newline at end of file diff --git a/metager/resources/less/metager/variables-dark.less b/metager/resources/less/metager/variables-dark.less index 2a7224410d6ac73addd87d0cbb772fbddc8a4b26..f94a04475c21727c81f5f2fd0094f2856db2884d 100644 --- a/metager/resources/less/metager/variables-dark.less +++ b/metager/resources/less/metager/variables-dark.less @@ -1,6 +1,6 @@ @import "./variables.less"; -@metager-orange: darken(#ff8000, 15%); +@metager-orange: darken(#ff8000, 10%); // Default Background Color @background-color: @color-almost-black; @@ -9,7 +9,7 @@ @text-color: @color-almost-white; @highlight-color: #333; // Default textual link color. -@link-color: #fd8307; +@link-color: @metager-orange; // Sidebar styles @sidebar-list-hover-color: @color-strong-grey; // Card styles