Commit f6342f34 authored by Dominik Hebeler's avatar Dominik Hebeler
Browse files

fixed resultpage searchbar color

parent 94f7defb
...@@ -27,24 +27,30 @@ ...@@ -27,24 +27,30 @@
z-index: 0; z-index: 0;
padding-right: 8px; padding-right: 8px;
padding-left: 8px; padding-left: 8px;
h1 { h1 {
.logo; .logo;
margin: 0px; margin: 0px;
font-size: 1.5em; font-size: 1.5em;
display: inline-block; display: inline-block;
> img {
>img {
width: 100px; width: 100px;
} }
} }
.screen-small { .screen-small {
display: none; display: none;
} }
@media (max-width: @logo-size-breakpoint) { @media (max-width: @logo-size-breakpoint) {
.screen-large { .screen-large {
display: none; display: none;
} }
.screen-small { .screen-small {
display: initial; display: initial;
img { img {
width: 20px; width: 20px;
} }
...@@ -57,6 +63,7 @@ body { ...@@ -57,6 +63,7 @@ body {
background-image: inherit; background-image: inherit;
background-color: @resultpage-background-color; background-color: @resultpage-background-color;
} }
&.quicktips { &.quicktips {
background-color: @quicktip-background-color; background-color: @quicktip-background-color;
} }
...@@ -65,6 +72,7 @@ body { ...@@ -65,6 +72,7 @@ body {
.navbar { .navbar {
border-bottom: 3px solid @metager-orange; border-bottom: 3px solid @metager-orange;
box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);
&.navbar-resultpage { &.navbar-resultpage {
border-bottom: 2px solid @metager-orange; border-bottom: 2px solid @metager-orange;
box-shadow: none; box-shadow: none;
...@@ -108,6 +116,7 @@ body { ...@@ -108,6 +116,7 @@ body {
.alert ul { .alert ul {
list-style-type: none; list-style-type: none;
padding-left: 49px; padding-left: 49px;
@media (max-width: @screen-mobile) { @media (max-width: @screen-mobile) {
padding-left: 0px; padding-left: 0px;
} }
...@@ -147,6 +156,7 @@ nav .input-group { ...@@ -147,6 +156,7 @@ nav .input-group {
a { a {
&#donation { &#donation {
&, &,
&:visited { &:visited {
color: inherit; color: inherit;
...@@ -165,8 +175,10 @@ a { ...@@ -165,8 +175,10 @@ a {
font-style: italic; font-style: italic;
color: @spruch-author-color; color: @spruch-author-color;
} }
&>p { &>p {
margin-bottom: 0; margin-bottom: 0;
&+p { &+p {
margin-top: 4px; margin-top: 4px;
} }
...@@ -176,6 +188,7 @@ a { ...@@ -176,6 +188,7 @@ a {
.saver-options { .saver-options {
display: flex; display: flex;
padding-bottom: 15px; padding-bottom: 15px;
&>input { &>input {
min-width: 35%; min-width: 35%;
max-width: 80%; max-width: 80%;
...@@ -209,6 +222,7 @@ a { ...@@ -209,6 +222,7 @@ a {
text-align: center; text-align: center;
margin-bottom: 10px; margin-bottom: 10px;
margin: 5px; margin: 5px;
.img { .img {
box-shadow: 0px 0px 10px 2px fade(@color-black, 30%); box-shadow: 0px 0px 10px 2px fade(@color-black, 30%);
} }
...@@ -217,33 +231,38 @@ a { ...@@ -217,33 +231,38 @@ a {
.image-container { .image-container {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
> div.image {
>div.image {
flex: auto; flex: auto;
margin: 8px; margin: 8px;
text-align: center; text-align: center;
> a > div {
>a>div {
display: inline-block; display: inline-block;
background-color: white; background-color: white;
text-align: center; text-align: center;
.card; .card;
padding: 4px; padding: 4px;
> img {
>img {
max-width: 150px; max-width: 150px;
} }
@media(max-width: 370px){
> img { @media(max-width: 370px) {
>img {
max-width: 100%; max-width: 100%;
} }
} }
> div {
>div {
font-size: .9em; font-size: .9em;
color: #777; color: #777;
margin-top: 4px; margin-top: 4px;
} }
} }
> a > div:hover { >a>div:hover {
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
} }
} }
} }
...@@ -253,6 +272,7 @@ a { ...@@ -253,6 +272,7 @@ a {
.loader { .loader {
text-align: center; text-align: center;
margin-top: 20px; margin-top: 20px;
&>img { &>img {
width: 30px; width: 30px;
} }
...@@ -261,6 +281,7 @@ a { ...@@ -261,6 +281,7 @@ a {
.mg-pager { .mg-pager {
display: flex; display: flex;
justify-content: center; justify-content: center;
&>div { &>div {
border: #aaa solid 1px; border: #aaa solid 1px;
border-radius: 10px; border-radius: 10px;
...@@ -268,6 +289,7 @@ a { ...@@ -268,6 +289,7 @@ a {
margin-left: 10px; margin-left: 10px;
background-color: @resultpage-background-color; background-color: @resultpage-background-color;
box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24); box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
&:first-child { &:first-child {
margin-left: 0px; margin-left: 0px;
} }
...@@ -315,6 +337,7 @@ a { ...@@ -315,6 +337,7 @@ a {
#mark { #mark {
font-size: 13px; font-size: 13px;
a { a {
margin-left: 3px; margin-left: 3px;
} }
...@@ -324,6 +347,7 @@ a { ...@@ -324,6 +347,7 @@ a {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
} }
to { to {
transform: rotate(180deg); transform: rotate(180deg);
} }
...@@ -341,16 +365,18 @@ a { ...@@ -341,16 +365,18 @@ a {
margin-top: 0; margin-top: 0;
display: grid; display: grid;
grid-template-columns: minmax(0px, 150px) @results-width-max @additions-width-max; grid-template-columns: minmax(0px, 150px) @results-width-max @additions-width-max;
grid-template-areas: "whitespace searchbar ." "whitespace foki ." "whitespace options ." "whitespace results additions" "whitespace footer ."; grid-template-areas: "whitespace searchbar .""whitespace foki .""whitespace options .""whitespace results additions""whitespace footer .";
grid-column-gap: (@padding-small-default * 2); grid-column-gap: (@padding-small-default * 2);
grid-row-gap: @padding-small-default; grid-row-gap: @padding-small-default;
justify-items: stretch; justify-items: stretch;
align-items: stretch; align-items: stretch;
/**/ /**/
background-color: @resultpage-background-color; background-color: @resultpage-background-color;
#whitespace { #whitespace {
grid-area: whitespace; grid-area: whitespace;
} }
#research-bar-container { #research-bar-container {
grid-area: searchbar; grid-area: searchbar;
padding-top: @padding-small-default; padding-top: @padding-small-default;
...@@ -359,40 +385,49 @@ a { ...@@ -359,40 +385,49 @@ a {
border-width: 0px 0px 2px 0px; border-width: 0px 0px 2px 0px;
position: sticky; position: sticky;
} }
#foki { #foki {
grid-area: foki; grid-area: foki;
/**/ /**/
max-width: @results-width-max; max-width: @results-width-max;
} }
#results-container { #results-container {
grid-area: results; grid-area: results;
/**/ /**/
max-width: @results-width-max; max-width: @results-width-max;
.alert { .alert {
margin-bottom: @padding-small-default; margin-bottom: @padding-small-default;
} }
#results .alteration { #results .alteration {
margin: (@padding-small-default * 2) 0px; margin: (@padding-small-default * 2) 0px;
margin-top: 0; margin-top: 0;
padding: 0px 8px; padding: 0px 8px;
font-weight: 400; font-weight: 400;
a i { a i {
font-size: .9em; font-size: .9em;
} }
.original { .original {
font-size: .9em; font-size: .9em;
} }
@media(max-width: @screen-mobile){
@media(max-width: @screen-mobile) {
.card; .card;
margin: @padding-small-default 0px; margin: @padding-small-default 0px;
margin-top: 0; margin-top: 0;
} }
} }
#backtotop { #backtotop {
text-align: center; text-align: center;
margin: 1em 0; margin: 1em 0;
} }
} }
#additions-container { #additions-container {
grid-area: additions; grid-area: additions;
/**/ /**/
...@@ -400,32 +435,39 @@ a { ...@@ -400,32 +435,39 @@ a {
max-width: @additions-width-max; max-width: @additions-width-max;
width: 100%; width: 100%;
height: 100%; height: 100%;
#search-settings { #search-settings {
display: none; display: none;
} }
#quicktips { #quicktips {
height: 100%; height: 100%;
width: 100%; width: 100%;
min-height: 500px; min-height: 500px;
iframe{
iframe {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
} }
} }
footer { footer {
grid-area: footer; grid-area: footer;
} }
@media (max-width: @resultpage-breakpoint-max) { @media (max-width: @resultpage-breakpoint-max) {
@supports (display: grid) { @supports (display: grid) {
grid-template-columns:~"calc(60% - 8px)"~"calc(40% - 8px)"; grid-template-columns: ~"calc(60% - 8px)"~"calc(40% - 8px)";
grid-template-areas: "searchbar ." "foki ." "options ." "results additions" "footer ."; grid-template-areas: "searchbar .""foki .""options .""results additions""footer .";
} }
} }
@media (max-width: @resultpage-breakpoint-min) { @media (max-width: @resultpage-breakpoint-min) {
margin-left: @padding-small-default; margin-left: @padding-small-default;
grid-template-columns: 100%; grid-template-columns: 100%;
grid-template-areas: "searchbar" "foki" "options" "results" "footer"; grid-template-areas: "searchbar""foki""options""results""footer";
#additions-container { #additions-container {
display: none; display: none;
} }
...@@ -439,6 +481,7 @@ a { ...@@ -439,6 +481,7 @@ a {
left: 0; left: 0;
background-color: @resultpage-background-color; background-color: @resultpage-background-color;
max-width: @results-width-max; max-width: @results-width-max;
#research-bar { #research-bar {
background-color: @resultpage-background-color; background-color: @resultpage-background-color;
border: 1px solid @border-color; border: 1px solid @border-color;
...@@ -447,21 +490,27 @@ a { ...@@ -447,21 +490,27 @@ a {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 4px; padding: 4px;
.resultpage-searchbar { .resultpage-searchbar {
.search-input-submit .search-input input { .search-input-submit .search-input input {
border-bottom: 1px solid @border-color; border-bottom: 1px solid @border-color;
} }
@media (max-width: @sidebar-opener-breakpoint) { @media (max-width: @sidebar-opener-breakpoint) {
.search-focus-selector { .search-focus-selector {
border-top: none; border-top: none;
border-radius: 5px; border-radius: 5px;
} }
.search-input-submit { .search-input-submit {
border-radius: 5px; border-radius: 5px;
background-color: @background-color
} }
>* { >* {
border-radius: 5px; border-radius: 5px;
min-height: 40px; min-height: 40px;
&:not(:first-child) { &:not(:first-child) {
border-left: 1px solid #aaa; border-left: 1px solid #aaa;
} }
...@@ -474,6 +523,7 @@ a { ...@@ -474,6 +523,7 @@ a {
#foki { #foki {
display: flex; display: flex;
justify-content: left; justify-content: left;
#foki-box { #foki-box {
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -484,26 +534,33 @@ a { ...@@ -484,26 +534,33 @@ a {
overflow-x: auto; overflow-x: auto;
padding: 8px; padding: 8px;
border-bottom: 1px solid @border-color; border-bottom: 1px solid @border-color;
@media (max-width: @screen-mobile) { @media (max-width: @screen-mobile) {
.card; .card;
margin: 0; margin: 0;
} }
&>div { &>div {
padding-right: 16px; padding-right: 16px;
&>a { &>a {
color: @text-color; color: @text-color;
} }
&.active>a { &.active>a {
border-bottom: 1px solid @text-color; border-bottom: 1px solid @text-color;
color: @text-color; color: @text-color;
} }
&:last-child { &:last-child {
padding-right: 20px padding-right: 20px
} }
} }
.edit-focus { .edit-focus {
margin-left: 7px; margin-left: 7px;
} }
/* Scrollbar Style */ /* Scrollbar Style */
&::-webkit-scrollbar { &::-webkit-scrollbar {
height: 0px; height: 0px;
...@@ -519,42 +576,52 @@ a { ...@@ -519,42 +576,52 @@ a {
background-color: @resultpage-background-color; background-color: @resultpage-background-color;
max-width: @results-width-max; max-width: @results-width-max;
padding: 0 8px; padding: 0 8px;
@media(max-width: @screen-mobile){
@media(max-width: @screen-mobile) {
.card; .card;
margin: 0; margin: 0;
} }
input[type=checkbox]{
input[type=checkbox] {
display: none; display: none;
} }
.scrollbox { .scrollbox {
max-height: 0; max-height: 0;
transform-origin: top; transform-origin: top;
transform: scaleY(0); transform: scaleY(0);
transition: transform .5s, max-height .5s; transition: transform .5s, max-height .5s;
} }
input[type=checkbox]:checked + div.scrollbox{
max-height:200px; input[type=checkbox]:checked+div.scrollbox {
max-height: 200px;
transform: scaleY(1); transform: scaleY(1);
} }
#toggle-box { #toggle-box {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: -8px; margin-left: -8px;
@media(max-width: 350px){
@media(max-width: 350px) {
flex-direction: row-reverse; flex-direction: row-reverse;
flex-wrap: wrap-reverse; flex-wrap: wrap-reverse;
justify-content: space-around; justify-content: space-around;
> div {
>div {
margin-top: 8px; margin-top: 8px;
margin-bottom: 8px; margin-bottom: 8px;
} }
#filter-toggle { #filter-toggle {
flex-direction: column; flex-direction: column;
} }