Commit 3aa8b8a0 authored by Dominik Hebeler's avatar Dominik Hebeler

Changed Style according to user feedback

parent a895c650
...@@ -3,8 +3,7 @@ ...@@ -3,8 +3,7 @@
border: 1px solid #ccc; border: 1px solid #ccc;
background-color: white; background-color: white;
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);
margin: 8px; padding: 8px;
padding: 15px;
} }
.card-heavy { .card-heavy {
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
@modal-content-box-shadow-color: fade(@color-black, 30%); @modal-content-box-shadow-color: fade(@color-black, 30%);
@body-background-color: @background-color; @body-background-color: @background-color;
@body-background-color-mobile: @background-color-mobile;
@a-hover-color: red; @a-hover-color: red;
body { body {
font-family: @metager-font; font-family: @metager-font;
...@@ -31,6 +32,9 @@ body { ...@@ -31,6 +32,9 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0; margin: 0;
@media(max-width: @screen-mobile){
background-color: @body-background-color-mobile
}
} }
.wrapper { .wrapper {
...@@ -65,7 +69,7 @@ body { ...@@ -65,7 +69,7 @@ body {
&right { &right {
position: absolute; position: absolute;
width: 20px; width: 20px;
height: 40px; height: 95%;
top: 1px; top: 1px;
pointer-events: none; pointer-events: none;
} }
......
...@@ -6,8 +6,8 @@ ...@@ -6,8 +6,8 @@
@results-margin-left: 16px; @results-margin-left: 16px;
// Min and max widths of the 2 resultpage columns // Min and max widths of the 2 resultpage columns
@results-width-min: 500px; @results-width-min: 500px;
@results-width-max: 700px; @results-width-max: 800px;
@additions-width-min: 400px; @additions-width-min: 300px;
@additions-width-max: 500px; @additions-width-max: 500px;
// Breakpoints for the 2 resultpage columns // Breakpoints for the 2 resultpage columns
@resultpage-breakpoint-max: (@results-width-max + @additions-width-max + @padding-small-default * 4); @resultpage-breakpoint-max: (@results-width-max + @additions-width-max + @padding-small-default * 4);
...@@ -25,7 +25,8 @@ ...@@ -25,7 +25,8 @@
#header-logo { #header-logo {
z-index: 0; z-index: 0;
padding-right: 10px; padding-right: 8px;
padding-left: 8px;
h1 { h1 {
.logo; .logo;
margin: 0px; margin: 0px;
...@@ -218,7 +219,8 @@ a { ...@@ -218,7 +219,8 @@ a {
display: inline-block; display: inline-block;
background-color: white; background-color: white;
text-align: center; text-align: center;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); .card;
padding: 4px;
> img { > img {
max-width: 150px; max-width: 150px;
} }
...@@ -230,6 +232,7 @@ a { ...@@ -230,6 +232,7 @@ a {
> div { > div {
font-size: 12px; font-size: 12px;
color: #777; color: #777;
margin-top: 4px;
} }
} }
...@@ -407,7 +410,7 @@ a { ...@@ -407,7 +410,7 @@ a {
#research-bar { #research-bar {
background-color: white; background-color: white;
border: 1px solid #ccc; border: 1px solid #ccc;
border-bottom: 2px solid @metager-orange; border-bottom: 1px solid @metager-orange;
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);
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -446,13 +449,11 @@ a { ...@@ -446,13 +449,11 @@ a {
width: 100%; width: 100%;
max-width: @results-width-max; max-width: @results-width-max;
background-color: white; background-color: white;
border: 1px solid #ccc; overflow-x: auto;
-webkit-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);
overflow-x: visible;
padding: 8px; padding: 8px;
@media (max-width: 700px) { border-bottom: 1px solid #ccc;
overflow-x: auto; @media (max-width: @screen-mobile) {
.card;
} }
&>div { &>div {
padding: 0px 10px; padding: 0px 10px;
...@@ -501,8 +502,10 @@ a { ...@@ -501,8 +502,10 @@ a {
width: 100%; width: 100%;
max-width: 700px; max-width: 700px;
background-color: white; background-color: white;
border: 1px solid #ccc; border-bottom: 1px solid #ccc;
box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24); @media(max-width: @screen-mobile){
.card;
}
overflow: hidden; overflow: hidden;
overflow-x: auto; overflow-x: auto;
padding: 8px; padding: 8px;
...@@ -516,8 +519,10 @@ a { ...@@ -516,8 +519,10 @@ a {
margin: 0 8px; margin: 0 8px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 12px;
label { label {
margin-bottom: 0; margin-bottom: 0;
font-weight: normal;
} }
select { select {
background-color: white; background-color: white;
......
...@@ -10,7 +10,9 @@ ...@@ -10,7 +10,9 @@
&:nth-child(1) { &:nth-child(1) {
margin-top: 0; margin-top: 0;
} }
.card; @media(max-width: @screen-mobile){
.card;
}
margin: @padding-small-default 0px; margin: @padding-small-default 0px;
padding: 8px 15px 5px 15px; padding: 8px 15px 5px 15px;
width: 100%; width: 100%;
...@@ -222,13 +224,19 @@ ...@@ -222,13 +224,19 @@
overflow: initial; overflow: initial;
opacity: 1; opacity: 1;
} }
li { ul {
font-size: @result-font-small; display: flex;
text-transform: uppercase; li {
margin: 10px 0; font-size: @result-font-small;
} margin: 8px;
li>a { }
color: black; li:nth-child(1){
margin-left: 0;
}
li>a {
color: @link-color;
}
} }
} }
} }
\ No newline at end of file
...@@ -9,7 +9,8 @@ ...@@ -9,7 +9,8 @@
@color-almost-black: mix(@color-white, @color-black, 10%); @color-almost-black: mix(@color-white, @color-black, 10%);
@color-black: black; @color-black: black;
// Default Background Color // Default Background Color
@background-color: #FAFAFA; @background-color: white;
@background-color-mobile: #FAFAFA;
// Default Font // Default Font
@metager-font: Arimo, @metager-font: Arimo,
"Liberation Sans", "Liberation Sans",
......
...@@ -67,6 +67,7 @@ ...@@ -67,6 +67,7 @@
<div class="result-options"> <div class="result-options">
<input type="checkbox" id="result-toggle-{{$result->number}}" class="result-toggle" style="display: none"> <input type="checkbox" id="result-toggle-{{$result->number}}" class="result-toggle" style="display: none">
<div class="options"> <div class="options">
<div>
<ul class="option-list list-unstyled small"> <ul class="option-list list-unstyled small">
<li class="js-only"> <li class="js-only">
<a href="javascript:resultSaver({{ $result->number }});" class="saver"> <a href="javascript:resultSaver({{ $result->number }});" class="saver">
......
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