diff --git a/resources/assets/less/metager/result-page.less b/resources/assets/less/metager/result-page.less index 467199d70102af22dedc9fe800a47a202b48f41e..5267f3f1ef72d934648f8492951bbe6fb1238b4c 100644 --- a/resources/assets/less/metager/result-page.less +++ b/resources/assets/less/metager/result-page.less @@ -7,7 +7,7 @@ // @resultpage-background-color: #FAFAFA; // -@results-margin-left: @resultpage-leftbox-big-screen-margin-left; +@results-margin-left: 16px; // @result-page-body-background-color: @background-color; @result-page-a-hover-color: red; @@ -31,7 +31,6 @@ @resultpage-leftbox-max-width: @results-width-max; @resultpage-leftbox-min-dist-left-right: @padding-small-default; @resultpage-leftbox-min-dist-top-bottom: @padding-small-default; -@resultpage-leftbox-big-screen-margin-left: 50px; // @logo-size-breakpoint: (@results-width-min + @padding-small-default * 2); // @@ -355,6 +354,7 @@ a { #resultpage-container { margin: @padding-small-default; + margin-left: @results-margin-left; display: grid; grid-template-columns: @results-width-max @additions-width-max; grid-template-areas: "searchbar ." "foki ." "results additions"; @@ -366,9 +366,6 @@ a { background-color: @resultpage-background-color; #research-bar-container { grid-area: searchbar; - /**/ - width: (@results-width-max + @padding-small-default * 2); - max-width: (@results-width-max + @padding-small-default * 2); } #research-bar-placeholder { grid-area: searchbar; @@ -399,17 +396,12 @@ a { } @media (max-width: @resultpage-breakpoint-large) { @supports (display: grid) { - #research-bar-container { - width: ~"calc(60% - 1px)"; - } grid-template-columns:~"calc(60% - 8px)"~"calc(40% - 8px)"; grid-template-areas: "searchbar ." "foki ." "results additions"; } } @media (max-width: @resultpage-breakpoint-small) { - #research-bar-container { - width: 100%; - } + margin-left: @padding-small-default; grid-template-columns: 100%; grid-template-areas: "searchbar" "foki" "results"; #additions-container { @@ -419,12 +411,24 @@ a { } #research-bar-container { + margin-left: (@results-margin-left - @padding-small-default); position: fixed; z-index: 100; top: 0; left: 0; background-color: @resultpage-background-color; - padding: 8px 8px 0px 8px; + padding: @padding-small-default @padding-small-default 0px @padding-small-default; + width: (@results-width-max + 2 * @padding-small-default); + max-width: (@results-width-max + 2 * @padding-small-default); + @media (max-width: @resultpage-breakpoint-large) { + @supports (display: grid) { + width: ~"calc(60% - 6px)"; + } + } + @media (max-width: @resultpage-breakpoint-small) { + width: 100%; + margin-left: 0px; + } #research-bar { background-color: white; border: 1px solid #ccc;