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

fixed resultpage searchbar color

parent 94f7defb
......@@ -27,24 +27,30 @@
z-index: 0;
padding-right: 8px;
padding-left: 8px;
h1 {
.logo;
margin: 0px;
font-size: 1.5em;
display: inline-block;
> img {
>img {
width: 100px;
}
}
.screen-small {
display: none;
}
@media (max-width: @logo-size-breakpoint) {
.screen-large {
display: none;
}
.screen-small {
display: initial;
img {
width: 20px;
}
......@@ -57,6 +63,7 @@ body {
background-image: inherit;
background-color: @resultpage-background-color;
}
&.quicktips {
background-color: @quicktip-background-color;
}
......@@ -65,6 +72,7 @@ body {
.navbar {
border-bottom: 3px solid @metager-orange;
box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);
&.navbar-resultpage {
border-bottom: 2px solid @metager-orange;
box-shadow: none;
......@@ -108,6 +116,7 @@ body {
.alert ul {
list-style-type: none;
padding-left: 49px;
@media (max-width: @screen-mobile) {
padding-left: 0px;
}
......@@ -147,6 +156,7 @@ nav .input-group {
a {
&#donation {
&,
&:visited {
color: inherit;
......@@ -165,8 +175,10 @@ a {
font-style: italic;
color: @spruch-author-color;
}
&>p {
margin-bottom: 0;
&+p {
margin-top: 4px;
}
......@@ -176,6 +188,7 @@ a {
.saver-options {
display: flex;
padding-bottom: 15px;
&>input {
min-width: 35%;
max-width: 80%;
......@@ -209,6 +222,7 @@ a {
text-align: center;
margin-bottom: 10px;
margin: 5px;
.img {
box-shadow: 0px 0px 10px 2px fade(@color-black, 30%);
}
......@@ -217,33 +231,38 @@ a {
.image-container {
display: flex;
flex-flow: row wrap;
> div.image {
>div.image {
flex: auto;
margin: 8px;
text-align: center;
> a > div {
>a>div {
display: inline-block;
background-color: white;
text-align: center;
.card;
padding: 4px;
> img {
>img {
max-width: 150px;
}
@media(max-width: 370px){
> img {
@media(max-width: 370px) {
>img {
max-width: 100%;
}
}
> div {
>div {
font-size: .9em;
color: #777;
margin-top: 4px;
}
}
> a > div:hover {
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
>a>div:hover {
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 {
.loader {
text-align: center;
margin-top: 20px;
&>img {
width: 30px;
}
......@@ -261,6 +281,7 @@ a {
.mg-pager {
display: flex;
justify-content: center;
&>div {
border: #aaa solid 1px;
border-radius: 10px;
......@@ -268,6 +289,7 @@ a {
margin-left: 10px;
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);
&:first-child {
margin-left: 0px;
}
......@@ -315,6 +337,7 @@ a {
#mark {
font-size: 13px;
a {
margin-left: 3px;
}
......@@ -324,6 +347,7 @@ a {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
......@@ -341,16 +365,18 @@ a {
margin-top: 0;
display: grid;
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-row-gap: @padding-small-default;
justify-items: stretch;
align-items: stretch;
/**/
background-color: @resultpage-background-color;
#whitespace {
grid-area: whitespace;
}
#research-bar-container {
grid-area: searchbar;
padding-top: @padding-small-default;
......@@ -359,40 +385,49 @@ a {
border-width: 0px 0px 2px 0px;
position: sticky;
}
#foki {
grid-area: foki;
/**/
max-width: @results-width-max;
}
#results-container {
grid-area: results;
/**/
max-width: @results-width-max;
.alert {
margin-bottom: @padding-small-default;
}
#results .alteration {
margin: (@padding-small-default * 2) 0px;
margin-top: 0;
padding: 0px 8px;
font-weight: 400;
a i {
font-size: .9em;
}
.original {
font-size: .9em;
}
@media(max-width: @screen-mobile){
@media(max-width: @screen-mobile) {
.card;
margin: @padding-small-default 0px;
margin-top: 0;
}
}
#backtotop {
text-align: center;
margin: 1em 0;
}
}
#additions-container {
grid-area: additions;
/**/
......@@ -400,32 +435,39 @@ a {
max-width: @additions-width-max;
width: 100%;
height: 100%;
#search-settings {
display: none;
}
#quicktips {
height: 100%;
width: 100%;
min-height: 500px;
iframe{
iframe {
height: 100%;
width: 100%;
}
}
}
footer {
grid-area: footer;
}
@media (max-width: @resultpage-breakpoint-max) {
@supports (display: grid) {
grid-template-columns:~"calc(60% - 8px)"~"calc(40% - 8px)";
grid-template-areas: "searchbar ." "foki ." "options ." "results additions" "footer .";
grid-template-columns: ~"calc(60% - 8px)"~"calc(40% - 8px)";
grid-template-areas: "searchbar .""foki .""options .""results additions""footer .";
}
}
@media (max-width: @resultpage-breakpoint-min) {
margin-left: @padding-small-default;
grid-template-columns: 100%;
grid-template-areas: "searchbar" "foki" "options" "results" "footer";
grid-template-areas: "searchbar""foki""options""results""footer";
#additions-container {
display: none;
}
......@@ -439,6 +481,7 @@ a {
left: 0;
background-color: @resultpage-background-color;
max-width: @results-width-max;
#research-bar {
background-color: @resultpage-background-color;
border: 1px solid @border-color;
......@@ -447,21 +490,27 @@ a {
display: flex;
align-items: center;
padding: 4px;
.resultpage-searchbar {
.search-input-submit .search-input input {
border-bottom: 1px solid @border-color;
}
@media (max-width: @sidebar-opener-breakpoint) {
.search-focus-selector {
border-top: none;
border-radius: 5px;
}
.search-input-submit {
border-radius: 5px;
background-color: @background-color
}
>* {
border-radius: 5px;
min-height: 40px;
&:not(:first-child) {
border-left: 1px solid #aaa;
}
......@@ -474,6 +523,7 @@ a {
#foki {
display: flex;
justify-content: left;
#foki-box {
display: -webkit-box;
display: -ms-flexbox;
......@@ -484,26 +534,33 @@ a {
overflow-x: auto;
padding: 8px;
border-bottom: 1px solid @border-color;
@media (max-width: @screen-mobile) {
.card;
margin: 0;
}
&>div {
padding-right: 16px;
&>a {
color: @text-color;
}
&.active>a {
border-bottom: 1px solid @text-color;
color: @text-color;
}
&:last-child {
padding-right: 20px
}
}
.edit-focus {
margin-left: 7px;
}
/* Scrollbar Style */
&::-webkit-scrollbar {
height: 0px;
......@@ -519,42 +576,52 @@ a {
background-color: @resultpage-background-color;
max-width: @results-width-max;
padding: 0 8px;
@media(max-width: @screen-mobile){
@media(max-width: @screen-mobile) {
.card;
margin: 0;
}
input[type=checkbox]{
input[type=checkbox] {
display: none;
}
.scrollbox {
max-height: 0;
transform-origin: top;
transform: scaleY(0);
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);
}
#toggle-box {
display: flex;
align-items: center;
margin-left: -8px;
@media(max-width: 350px){
@media(max-width: 350px) {
flex-direction: row-reverse;
flex-wrap: wrap-reverse;
justify-content: space-around;
> div {
>div {
margin-top: 8px;
margin-bottom: 8px;
}
#filter-toggle {
flex-direction: column;
}
}
> div {
>div {
margin-left: 8px;
}
#filter-toggle {
display: flex;
flex-wrap: wrap;
......@@ -562,17 +629,21 @@ a {
justify-content: center;
flex-grow: 0;
margin-left: 0px;
>div {
margin-left: 8px;
}
}
#result-count {
flex-grow: 1;
text-align: right;
}
.option-toggle {
text-align: center;
label{
label {
font-weight: normal;
margin-bottom: 0;
display: flex;
......@@ -580,17 +651,20 @@ a {
}
}
}
#options-box{
#options-box {
width: 100%;
display: flex;
justify-content: left;
overflow: hidden;
overflow-x: auto;
padding-top: 8px;
#options-items {
display: -ms-flexbox;
display: flex;
align-items: center;
.option-selector {
display: flex;
flex-direction: column;
......@@ -598,50 +672,62 @@ a {
justify-content: center;
align-items: center;
font-size: .9em;
label {
margin-bottom: 0;
font-weight: normal;
}
select {
background-color: white;
border: 1px solid #77777780;
padding: 3px;
border-radius: 5px;
}
label[for="custom-date"] {
cursor: pointer;
&:hover {
color: red;
}
}
#bing-from-to {
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;
}
}
.option-selector:nth-child(1){
.option-selector:nth-child(1) {
margin-left: 0;
}
}
}
#settings {
text-align: center;
a {
display: flex;
align-items: center;
color: @text-color;
&:hover {
color: red;
span.badge {
background-color: red;
}
}
span.badge {
margin-top: -12px;
font-size: .7em;
......@@ -653,6 +739,7 @@ a {
#spendenaufruf {
margin-bottom: 10px;
a {
background-color: white;
display: inline-block;
......@@ -662,6 +749,7 @@ a {
footer.resultPageFooter {
max-width: @results-width-max;
@media (max-width: (2 * @results-margin-left + @results-width-max - 1px)) {
margin: 20px 0 0 0;
}
......@@ -678,6 +766,7 @@ footer.resultPageFooter {
#resultpage-container>.sidebar-opener {
display: none;
}
#research-bar>.sidebar-opener {
display: initial;
}
......@@ -688,13 +777,16 @@ footer.resultPageFooter {
#resultpage-container {
#results-container {
float: left;
@media (max-width: @resultpage-breakpoint-min) {
float:none;
float: none;
}
}
#additions-container {
float: left;
margin-left: 20px;
@supports (display: grid) {
float: none;
margin-left: 0px;
......@@ -714,6 +806,7 @@ footer.resultPageFooter {
position: fixed;
width: 100%;
padding: 8px;
@media (max-width: @screen-mobile) {
padding: 5px;
}
......@@ -723,6 +816,7 @@ footer.resultPageFooter {
.metager3-unstable-warning;
top: 0;
padding-right: 50px;
@media (max-width: @screen-mobile) {
padding: 5px;
padding-right: 50px;
......
......@@ -9,7 +9,7 @@
@color-almost-black: mix(@color-white, @color-black, 10%);
@color-black: black;
// Default Background Color
@background-color: rgb(245, 245, 245);
@background-color: mix(@color-white, @color-black, 98%);
@background-color-mobile: #FAFAFA;
@sidebar-list-hover-color: @color-almost-white;
// Default Font
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment