Commit 3a964a2a authored by Daniel J. Ramirez's avatar Daniel J. Ramirez

Cleaned up css, improved mobile layout and preferences.

parent 3730fb31
This diff is collapsed.
This diff is collapsed.
......@@ -12,68 +12,81 @@ body {
margin-bottom: 120px;
background-color: white;
font-family: 'Roboto', "Cantarell", Helvetica, Arial, sans-serif;
}
body.lock { overflow: hidden; }
body * {
font-family: 'Roboto', "Cantarell", Helvetica, Arial, sans-serif;
}
.text-muted {
color: @text-muted-color;
}
&.lock { overflow: hidden; }
.danger, .btn.danger {
color: @color_danger;
* {
font-family: sans-serif, "Cantarell", 'Roboto', Helvetica, Arial;
}
}
input, select {
box-shadow: none !important;
}
a { color: @link-color; }
a, a:hover, a:focus, a:active, select:hover, select:focus, select:active {
outline: none;
text-decoration: none;
a {
color: @link-color;
&:extend(.color-transition);
}
a, select {
&, &:focus, &:active, &:hover {
outline: none;
text-decoration: none;
}
}
label { color: @text-color-hl; }
.btn {
text-transform: uppercase;
padding: 8px 14px;
background-color: transparent;
border: 2px solid rgba(0, 0, 0, .2);
border-radius: @corner-radius;
text-align: center;
font-size: @fontsize_medium;
font-weight: bold;
color: @color_base-text-hl;
}
.btn.btn-block, .block {
display: block;
width: 100%;
box-sizing: border-box;
}
.btn.primary, input.btn[type="submit"] {
// border-color: @color_accent;
color: @color_accent;
}
.btn.btn-flat {
section { margin-bottom: @spacing_xx-large; }
ul > li { margin-bottom: @spacing_medium; }
fieldset {
border: none;
border-radius: 0;
padding: 0px;
}
.btn.btn-flat:hover {
background-color: transparent;
color: blue;
nav {
&:extend(.container-padding);
height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
text-transform: capitalize;
margin-bottom: 24px;
a {
color: #868686;
&:hover {
color: @color_accent;
}
}
#eelo_links > * { margin-right: 32px; }
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: auto;
text-align: center;
color: #c1c1c1;
padding-bottom: @spacing_medium;
}
.hidden, #icons { display: none; }
[disabled] {
opacity: 0.4;
&:extend(.disabled);
}
.hidden, #icons { display: none; }
#image_view_modal {
......@@ -124,37 +137,8 @@ a, a:hover, a:focus, a:active, select:hover, select:focus, select:active {
.options { margin-top: @spacing_medium; }
.btn {
.btn.plain-white();
display: inline-block;
border-color: rgba(255, 255, 255, .4);
color: rgba(255, 255, 255, .8);
background-color: rgba(0, 0, 0, .5);
margin-right: @spacing_medium;
}
}
.custom-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
font-weight: normal;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAQAAACR313BAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZ
cwAABFkAAARZAVnbJUkAAAAHdElNRQfgBxgLDwB20OFsAAAAbElEQVQY073OsQ3CMAAEwJMYwJGn
sAehpoXJItltBkmcdZBYgIIiQoLglnz3ui+eP+bk5uneteTMZJa6OJuIqvYzSJoqwqBq8gdmTTW8
6/dghxAUq4xsVYT9laBYXCw93Aajh7GPEF23t4fkBYevGFTANkPRAAAAJXRFWHRkYXRlOmNyZWF0
ZQAyMDE2LTA3LTI0VDExOjU1OjU4KzAyOjAwRFqFOQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNi0w
Ny0yNFQxMToxNTowMCswMjowMP7RDgQAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb
7jwaAAAAAElFTkSuQmCC) 96% no-repeat;
}
.custom-select.flat {
border: none;
}
.custom-select:not(.flat) {
border: 2px solid rgba(0, 0, 0, .2);
width: 100%;
border-radius: 50px;
padding: 4px 12px;
}
\ No newline at end of file
......@@ -45,3 +45,35 @@
@size-desktop: 1100px;
@size-mobile: 600px;
.container-padding {
padding-left: @spacing_container;
padding-right: @spacing_container;
}
@color-transition: color .2s ease-in-out;
@border-color-transition: border-color .2s ease-in-out;
.color-transition { transition: @color-transition; }
.border-color-transition { transition: @border-color-transition; }
.widget-border(@color: rgba(0, 0, 0, .2)) {
border: 2px solid @color;
}
.disabled { opacity: .4; }
// media queries
.tablet-mq(@rules) {
@media screen and (max-width: @size-desktop) { @rules(); }
}
.mobile-mq(@rules) {
@media screen and (max-width: @size-mobile) { @rules(); }
}
.mobile-landscape-mq(@rules) {
@media screen and (max-height: @size-mobile) and (orientation: landscape) { @rules(); }
}
\ No newline at end of file
@import "variables.less";
@import "defs.less";
@import "layout.less";
@import "widgets.less";
@import "base.less";
@import "navbar.less";
@import "footer.less";
@import "search.less";
@import "results.less";
@import "preferences.less";
\ No newline at end of file
footer {
position: absolute;
bottom: 0;
width: 100%;
height: auto;
text-align: center;
color: #c1c1c1;
padding-bottom: 16px;
}
\ No newline at end of file
.tablet-mq(@rules) {
@media screen and (max-width: @size-desktop) { @rules(); }
}
.mobile-mq(@rules) {
@media screen and (max-width: @size-mobile) { @rules(); }
}
#pagination {
display: flex;
justify-content: space-between;
......@@ -14,8 +6,7 @@
.container {
max-width: @size-desktop;
padding-left: @spacing_container;
padding-right: @spacing_container;
.container-padding();
display: flex;
justify-content: space-between;
......@@ -58,30 +49,12 @@
}
}
#index {
max-width: @size-content;
margin: auto;
img {
width: 300px;
display: block;
margin: auto;
margin-top: 64px;
margin-bottom: 64px;
}
}
.inline {
display: flex;
flex-direction: row;
}
.rtl {
flex-direction: row-reverse;
}
.tablet-mq({
.container {
......@@ -96,13 +69,9 @@
});
.mobile-mq({
body {
background-color: red;
}
.container {
max-width: 100%;
padding-left: @spacing_container;
padding-right: @spacing_container;
.container-padding();
> :first-child, > :last-child:not(:first-child) {
max-width: 100%;
......@@ -120,3 +89,33 @@
width: 100%;
}
});
// Move somewhere else?
#index {
max-width: @size-content;
margin: auto;
img {
width: 300px;
display: block;
margin: auto;
margin-top: 64px;
margin-bottom: 64px;
}
img#logo_inline { display: none; }
}
.mobile-mq({
#index img {
width: 50vmin;
margin-bottom: @spacing_x-large;
}
});
.mobile-landscape-mq({
#index img {
width: 70vmin;
margin-top: @spacing_xx-large;
display: none;
}
#index img#logo_inline { display: block; }
});
nav {
height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 16px;
padding-right: 16px;
text-transform: capitalize;
margin-bottom: 24px;
}
nav a {
color: #868686;
transition: color .2s ease-in-out;
text-decoration: none;
}
nav a:hover {
text-decoration: none;
color: @color_accent;
}
#eelo_links > * {
margin-right: 32px;
}
\ No newline at end of file
#preferences {
h1 {
margin-bottom: 32px;
}
.nav-tabs {
margin-bottom: 32px;
}
.options {
margin-top: 32px;
}
h1, .nav-tabs, #notice { margin-bottom: @spacing_x-large; }
label {
color: @text-color-hl;
}
div.row.form-group {
margin-bottom: 24px;
}
div.tab-content {
margin-bottom: 48px;
}
#notice {
margin-bottom: 32px;
}
.options { margin-top: @spacing_x-large; }
.tab-content {
margin-bottom: 48px;
display: none;
}
input.tab-radio[type="radio"] {
display: none;
}
input.tab-radio[type="radio"]:checked + .tab-content {
display: block;
}
input.tab-radio[type="radio"] { display: none; }
input.tab-radio[type="radio"]:checked + .tab-content { display: block; }
.preference {
margin-bottom: @spacing_large;
}
.preference.inline {
justify-content: space-between;
>:first-child {
flex: 2;
}
>:last-child {
flex: 1;
&.inline {
justify-content: space-between;
>:first-child { flex: 2; }
>:last-child { flex: 1; }
}
}
#tabs {
margin-bottom: @spacing_xx-large;
}
#tabs > * {
margin-right: @spacing_xx-large;
}
#tabs { margin-bottom: @spacing_xx-large; }
#tabs > * { margin-right: @spacing_xx-large; }
#controls {
display: flex;
......@@ -64,28 +31,41 @@
justify-content: flex-end;
}
#cookies_list { }
#cookies_list .cookie-value { word-wrap: break-word; }
section {
margin-bottom: @spacing_xx-large;
}
#action_buttons { margin-top: @spacing_x-huge; }
#action_buttons > div { margin-bottom: @spacing_x-large; }
#action_buttons > div > * { margin-bottom: @spacing_medium; }
ul > li {
margin-bottom: @spacing_medium;
}
#engines {
h3 {
text-transform: capitalize;
margin-top: 0;
}
.engine {
display: flex;
margin-bottom: @spacing_medium;
fieldset {
border: none;
padding: 0px;
}
.data {
width: 100%;
margin-left: @spacing_large;
margin-right: @spacing_large;
}
#cookies_list {
}
#cookies_list .cookie-value {
word-wrap: break-word;
input:checked ~ .data { &:extend(.disabled); }
input:checked ~ .data .danger { display: inline; }
input:not(:checked) ~ .data i.danger { display: none; }
}
}
}
#action_buttons { margin-top: @spacing_x-huge; }
#action_buttons > div { margin-bottom: @spacing_x-large; }
#action_buttons > div > * { margin-bottom: @spacing_medium; }
}
\ No newline at end of file
.mobile-mq({
.preference.inline {
flex-direction: column;
>:first-child { margin-bottom: @spacing_medium; }
}
});
\ No newline at end of file
......@@ -113,10 +113,6 @@
}
}
.extras {
margin-top: 48px;
}
.tablet-mq({
#results.image-gallery {
......
#q {
border: 2px solid rgba(0, 0, 0, 0.24);
border-radius: 50px;
height: 42px;
line-height: 42px;
width: 100%;
padding-left: @spacing_large;
font-size: @fontsize_medium;
#search_form {
@logo-link-size: 32px;
@input-size: 38px;
transition: border-color 0.2s ease-in-out;
}
#q:focus {
border-color: @color_accent;
}
#search_input_container {
position: relative;
display: flex;
align-items: center;
#search_input_container {
position: relative;
display: flex;
align-items: center;
.widget-border(rgba(0, 0, 0, 0.24));
border-radius: 50px;
height: @input-size;
&:hover, &:active { border-color: @color_accent; }
&:extend(.border-color-transition);
button[type="submit"] {
position: absolute;
right: 10px;
height: 24px;
border: none;
background: none;
padding: 0;
z-index: 2;
cursor: pointer;
// the actual input
#q {
font-size: @fontsize_medium;
.icon { transition: fill 0.2s ease-in-out; }
+ .circle { transition: transform 0.2s ease-in-out; }
}
button[type="submit"]:hover {
.icon { fill: white; }
+ .circle { transform: scale(1.6); }
}
.circle {
width: 32px;
height: 32px;
border-radius: 50px;
background-color: @color_accent;
position: absolute;
right: 6px;
transform: scale(0);
border: none;
height: 100%;
width: 100%;
min-width: 0;
margin-left: @spacing_large;
}
button[type="submit"] {
position: relative;
height: 100%;
width: @input-size;
min-width: @input-size;
border: none;
background: none;
padding: 0;
display: flex;
cursor: pointer;
.icon { transition: fill 0.2s ease-in-out, transform 0.1s ease-in-out; }
}
button[type="submit"]:hover {
.icon {
fill: @color_accent;
transform: scale(1.2);
}
}
}
}
#search_params {
display: flex;
justify-content: space-between;
font-size: @fontsize_x-small;
margin-bottom: @spacing_large;
margin-top: @spacing_large;
padding-left: @spacing_x-large;
padding-right: @spacing_x-large;
select, label {
font-size: @fontsize_small;
// inline search form
#logo, #logo_link {
height: @logo-link-size;
}
select {
color: rgba(0,0,0, .5);
text-align: right;
padding-right: 32px;
#logo_link {
padding-left: 4px;
}
#time_and_lang > :first-child {
margin-right: @spacing_large;
// some minor tweaks for RTL
#search_input_container.rtl {
#q {
margin-left: 0;
margin-right: @spacing_large;
}
#logo_link {
padding-left: 0;
padding-right: 4px;
}
}
}
.search_categories, #categories {
text-transform: capitalize;
display: flex;
flex-wrap: wrap;
flex-flow: row wrap;
align-content: stretch;
align-items: center;
label {
flex-grow: 1;
flex-basis: auto;
font-size: @fontsize_small;
font-weight: normal;
margin-right: @spacing_large;
}
// advanced search params, search topic, lang and time.
#search_params {
display: flex;
justify-content: space-between;
font-size: @fontsize_x-small;
padding-bottom: @spacing_large;
padding-top: @spacing_large;
padding-left: @spacing_x-large;
padding-right: @spacing_x-large;
input[type="checkbox"]:checked + label {
color: @color_accent;
font-weight: bold;
select, label { font-size: @fontsize_small; }
select {
color: rgba(0, 0, 0, .5);
text-align: right;
padding-right: 32px;
}
#time_and_lang > :first-child {
margin-right: @spacing_large;
}
}
}
// inline search form
#logo_link {
position: absolute;
left: 6px;
}
#logo, #logo_link {
height: 32px;
}
.inline-search #q {
padding-left: @spacing_search_bar_contents;
}
.search_categories, #categories {
text-transform: capitalize;
display: flex;
flex-wrap: wrap;
align-items: center;
label {
flex-grow: 1;
flex-basis: auto;
font-size: @fontsize_small;
font-weight: normal;
margin-right: @spacing_large;
}
input[type="checkbox"]:checked + label {
color: @color_accent;
font-weight: bold;
}
}
#main-logo{
margin-top: 12vh;
margin-bottom: 25px;
}
#main-logo > img {
max-width: 250px;
width: 80%;
}
// make advanced options scrollable on mobile
.mobile-mq({
#search_params {
overflow-x: scroll;
}
#search_params, #categories {
flex-wrap: nowrap;
}
#time_and_lang {
display: flex;
#search_form {
#search_params { overflow-x: scroll; }
#search_params, #categories { flex-wrap: nowrap; }
#time_and_lang { display: flex; }
}
});
\ No newline at end of file
.block {
display: block;
width: 100%;
box-sizing: border-box;
}
.text-muted { color: @text-muted-color; }
.danger { color: @color_danger; }
.widget {
.widget-border();
padding: 4px 12px;
background-color: transparent;
transition: @border-color-transition, @color-transition;
}
.btn {
&:extend(.widget);
padding: 8px 16px;
text-transform: uppercase;
background-color: transparent;
border-radius: @corner-radius;
text-align: center;
font-size: @fontsize_medium;
font-weight: bold;
color: @color_base-text-hl;