diff --git a/searx/static/themes/eelo/css/eelo.css b/searx/static/themes/eelo/css/eelo.css index 41620eb52eaf054179e5c514f1b291b220cfddcc..4dcab0401d97a9ce65cc89b81d4236706368c09e 100644 --- a/searx/static/themes/eelo/css/eelo.css +++ b/searx/static/themes/eelo/css/eelo.css @@ -1,3 +1,21 @@ +.container-padding, +nav { + padding-left: 16px; + padding-right: 16px; +} +.color-transition, +a { + transition: color 0.2s ease-in-out; +} +.border-color-transition, +#search_form #search_input_container { + transition: border-color 0.2s ease-in-out; +} +.disabled, +[disabled], +#preferences #engines .engine input:checked ~ .data { + opacity: .4; +} #pagination { display: flex; justify-content: space-between; @@ -41,24 +59,10 @@ max-width: 600px; margin: auto; } -#index { - max-width: 600px; - margin: auto; -} -#index img { - width: 300px; - display: block; - margin: auto; - margin-top: 64px; - margin-bottom: 64px; -} .inline { display: flex; flex-direction: row; } -.rtl { - flex-direction: row-reverse; -} @media screen and (max-width: 1100px) { .container { flex-direction: column-reverse; @@ -72,9 +76,6 @@ } } @media screen and (max-width: 600px) { - body { - background-color: red; - } .container { max-width: 100%; padding-left: 16px; @@ -94,6 +95,111 @@ width: 100%; } } +#index { + max-width: 600px; + margin: auto; +} +#index img { + width: 300px; + display: block; + margin: auto; + margin-top: 64px; + margin-bottom: 64px; +} +#index img#logo_inline { + display: none; +} +@media screen and (max-width: 600px) { + #index img { + width: 50vmin; + margin-bottom: 24px; + } +} +@media screen and (max-height: 600px) and (orientation: landscape) { + #index img { + width: 70vmin; + margin-top: 32px; + display: none; + } + #index img#logo_inline { + display: block; + } +} +.block, +.btn.btn-block { + display: block; + width: 100%; + box-sizing: border-box; +} +.text-muted { + color: rgba(0, 0, 0, 0.4); +} +.danger, +.btn.danger { + color: #e06572; +} +.widget, +.btn, +.custom-select:not(.flat) { + border: 2px solid rgba(0, 0, 0, 0.2); + padding: 4px 12px; + background-color: transparent; + transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out; +} +.btn { + padding: 8px 16px; + text-transform: uppercase; + background-color: transparent; + border-radius: 8px; + text-align: center; + font-size: 16px; + font-weight: bold; + color: #5c6469; +} +.btn.primary, +input.btn[type="submit"] { + color: #5068dd; +} +.btn:hover { + border-color: #5068dd; +} +.btn.danger:hover { + border-color: #e06572; +} +.btn.btn-flat { + border: none; + border-radius: 0; + background-color: transparent; +} +.btn.btn-flat:hover { + color: #5068dd; +} +.btn.plain-white { + border-color: rgba(255, 255, 255, 0.4); + color: rgba(255, 255, 255, 0.8); + background-color: rgba(0, 0, 0, 0.5); +} +.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) { + width: 100%; + border-radius: 50px; +} html { position: relative; min-height: 100%; @@ -111,14 +217,7 @@ body.lock { overflow: hidden; } body * { - font-family: 'Roboto', "Cantarell", Helvetica, Arial, sans-serif; -} -.text-muted { - color: rgba(0, 0, 0, 0.4); -} -.danger, -.btn.danger { - color: #e06572; + font-family: sans-serif, "Cantarell", 'Roboto', Helvetica, Arial; } input, select { @@ -128,51 +227,59 @@ a { color: #1f6ed7; } a, -a:hover, +select, a:focus, -a:active, -select:hover, select:focus, -select:active { +a:active, +select:active, +a:hover, +select:hover { outline: none; text-decoration: none; } -.btn { - text-transform: uppercase; - padding: 8px 14px; - background-color: transparent; - border: 2px solid rgba(0, 0, 0, 0.2); - border-radius: 8px; - text-align: center; - font-size: 16px; - font-weight: bold; +label { color: #5c6469; } -.btn.btn-block, -.block { - display: block; - width: 100%; - box-sizing: border-box; +section { + margin-bottom: 32px; } -.btn.primary, -input.btn[type="submit"] { - color: #5068dd; +ul > li { + margin-bottom: 8px; } -.btn.btn-flat { +fieldset { border: none; - border-radius: 0; + padding: 0px; } -.btn.btn-flat:hover { - background-color: transparent; - color: blue; +nav { + height: 48px; + display: flex; + align-items: center; + justify-content: space-between; + text-transform: capitalize; + margin-bottom: 24px; +} +nav a { + color: #868686; +} +nav a:hover { + color: #5068dd; +} +nav #eelo_links > * { + margin-right: 32px; +} +footer { + position: absolute; + bottom: 0; + width: 100%; + height: auto; + text-align: center; + color: #c1c1c1; + padding-bottom: 8px; } .hidden, #icons { display: none; } -[disabled] { - opacity: 0.4; -} #image_view_modal { position: absolute; top: 0; @@ -219,186 +326,115 @@ input.btn[type="submit"] { margin-top: 8px; } #image_view_modal .btn { - display: inline-block; border-color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.8); background-color: rgba(0, 0, 0, 0.5); + display: inline-block; margin-right: 8px; } -.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, 0.2); - width: 100%; - border-radius: 50px; - padding: 4px 12px; -} -nav { - height: 48px; +#search_form #search_input_container { + position: relative; 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 0.2s ease-in-out; - text-decoration: none; -} -nav a:hover { - text-decoration: none; - color: #5068dd; -} -#eelo_links > * { - margin-right: 32px; -} -footer { - position: absolute; - bottom: 0; - width: 100%; - height: auto; - text-align: center; - color: #c1c1c1; - padding-bottom: 16px; -} -#q { border: 2px solid rgba(0, 0, 0, 0.24); border-radius: 50px; - height: 42px; - line-height: 42px; - width: 100%; - padding-left: 16px; - font-size: 16px; - transition: border-color 0.2s ease-in-out; + height: 38px; } -#q:focus { +#search_form #search_input_container:hover, +#search_form #search_input_container:active { border-color: #5068dd; } -#search_input_container { - position: relative; - display: flex; - align-items: center; +#search_form #search_input_container #q { + font-size: 16px; + border: none; + height: 100%; + width: 100%; + min-width: 0; + margin-left: 16px; } -#search_input_container button[type="submit"] { - position: absolute; - right: 10px; - height: 24px; +#search_form #search_input_container button[type="submit"] { + position: relative; + height: 100%; + width: 38px; + min-width: 38px; border: none; background: none; padding: 0; - z-index: 2; + display: flex; cursor: pointer; } -#search_input_container button[type="submit"] .icon { - transition: fill 0.2s ease-in-out; +#search_form #search_input_container button[type="submit"] .icon { + transition: fill 0.2s ease-in-out, transform 0.1s ease-in-out; } -#search_input_container button[type="submit"] + .circle { - transition: transform 0.2s ease-in-out; +#search_form #search_input_container button[type="submit"]:hover .icon { + fill: #5068dd; + transform: scale(1.2); } -#search_input_container button[type="submit"]:hover .icon { - fill: white; +#search_form #logo, +#search_form #logo_link { + height: 32px; } -#search_input_container button[type="submit"]:hover + .circle { - transform: scale(1.6); +#search_form #logo_link { + padding-left: 4px; } -#search_input_container .circle { - width: 32px; - height: 32px; - border-radius: 50px; - background-color: #5068dd; - position: absolute; - right: 6px; - transform: scale(0); +#search_form #search_input_container.rtl #q { + margin-left: 0; + margin-right: 16px; } -#search_params { +#search_form #search_input_container.rtl #logo_link { + padding-left: 0; + padding-right: 4px; +} +#search_form #search_params { display: flex; justify-content: space-between; font-size: 11px; - margin-bottom: 16px; - margin-top: 16px; + padding-bottom: 16px; + padding-top: 16px; padding-left: 24px; padding-right: 24px; } -#search_params select, -#search_params label { +#search_form #search_params select, +#search_form #search_params label { font-size: 14px; } -#search_params select { +#search_form #search_params select { color: rgba(0, 0, 0, 0.5); text-align: right; padding-right: 32px; } -#search_params #time_and_lang > :first-child { +#search_form #search_params #time_and_lang > :first-child { margin-right: 16px; } -.search_categories, -#categories { +#search_form .search_categories, +#search_form #categories { text-transform: capitalize; display: flex; flex-wrap: wrap; - flex-flow: row wrap; - align-content: stretch; align-items: center; } -.search_categories label, -#categories label { +#search_form .search_categories label, +#search_form #categories label { flex-grow: 1; flex-basis: auto; font-size: 14px; font-weight: normal; margin-right: 16px; } -.search_categories input[type="checkbox"]:checked + label, -#categories input[type="checkbox"]:checked + label { +#search_form .search_categories input[type="checkbox"]:checked + label, +#search_form #categories input[type="checkbox"]:checked + label { color: #5068dd; font-weight: bold; } -#logo_link { - position: absolute; - left: 6px; -} -#logo, -#logo_link { - height: 32px; -} -.inline-search #q { - padding-left: 56px; -} -#main-logo { - margin-top: 12vh; - margin-bottom: 25px; -} -#main-logo > img { - max-width: 250px; - width: 80%; -} @media screen and (max-width: 600px) { - #search_params { + #search_form #search_params { overflow-x: scroll; } - #search_params, - #categories { + #search_form #search_params, + #search_form #categories { flex-wrap: nowrap; } - #time_and_lang { + #search_form #time_and_lang { display: flex; } } @@ -492,9 +528,6 @@ footer { width: 100%; margin-top: 16px; } -.extras { - margin-top: 48px; -} @media screen and (max-width: 1100px) { #results.image-gallery { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); @@ -504,28 +537,16 @@ footer { max-height: 140px; } } -#preferences h1 { - margin-bottom: 32px; -} -#preferences .nav-tabs { - margin-bottom: 32px; -} -#preferences .options { - margin-top: 32px; -} -#preferences label { - color: #5c6469; -} -#preferences div.row.form-group { +#preferences h1, +#preferences .nav-tabs, +#preferences #notice { margin-bottom: 24px; } -#preferences div.tab-content { - margin-bottom: 48px; -} -#preferences #notice { - margin-bottom: 32px; +#preferences .options { + margin-top: 24px; } #preferences .tab-content { + margin-bottom: 48px; display: none; } #preferences input.tab-radio[type="radio"] { @@ -557,16 +578,6 @@ footer { flex-direction: column-reverse; justify-content: flex-end; } -#preferences section { - margin-bottom: 32px; -} -#preferences ul > li { - margin-bottom: 8px; -} -#preferences fieldset { - border: none; - padding: 0px; -} #preferences #cookies_list .cookie-value { word-wrap: break-word; } @@ -579,3 +590,30 @@ footer { #preferences #action_buttons > div > * { margin-bottom: 8px; } +#preferences #engines h3 { + text-transform: capitalize; + margin-top: 0; +} +#preferences #engines .engine { + display: flex; + margin-bottom: 8px; +} +#preferences #engines .engine .data { + width: 100%; + margin-left: 16px; + margin-right: 16px; +} +#preferences #engines .engine input:checked ~ .data .danger { + display: inline; +} +#preferences #engines .engine input:not(:checked) ~ .data i.danger { + display: none; +} +@media screen and (max-width: 600px) { + .preference.inline { + flex-direction: column; + } + .preference.inline > :first-child { + margin-bottom: 8px; + } +} diff --git a/searx/static/themes/eelo/css/eelo.min.css b/searx/static/themes/eelo/css/eelo.min.css index b70327d8db308ba88757085eb263f5a92a1f583e..75d4faa5249bd045ebb4b725f112f40602a94ea8 100644 Binary files a/searx/static/themes/eelo/css/eelo.min.css and b/searx/static/themes/eelo/css/eelo.min.css differ diff --git a/searx/static/themes/eelo/img/logo_eelo_inline.png b/searx/static/themes/eelo/img/logo_eelo_inline.png new file mode 100644 index 0000000000000000000000000000000000000000..b051ff84bf79a26b0616d02785c97e2e306ec651 Binary files /dev/null and b/searx/static/themes/eelo/img/logo_eelo_inline.png differ diff --git a/searx/static/themes/eelo/less/eelo/base.less b/searx/static/themes/eelo/less/eelo/base.less index 909c11e36a6cc52b7f992eca297735052909063a..38e08526d74f7e158481e96899ecd2fa8dcf459d 100644 --- a/searx/static/themes/eelo/less/eelo/base.less +++ b/searx/static/themes/eelo/less/eelo/base.less @@ -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 diff --git a/searx/static/themes/eelo/less/eelo/variables.less b/searx/static/themes/eelo/less/eelo/defs.less similarity index 56% rename from searx/static/themes/eelo/less/eelo/variables.less rename to searx/static/themes/eelo/less/eelo/defs.less index dd5ebbb246b7df26749bdb98ff701bfc628689b9..4e42888203a6cf35454f67bdbcb573e66da9ac94 100644 --- a/searx/static/themes/eelo/less/eelo/variables.less +++ b/searx/static/themes/eelo/less/eelo/defs.less @@ -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 diff --git a/searx/static/themes/eelo/less/eelo/eelo.less b/searx/static/themes/eelo/less/eelo/eelo.less index c5a08f3ba6e2f57523c0e1f93039c7b71a4d1aa0..7b3e584a68ebd7ddbf98608a5bd0788d7d0ea56d 100644 --- a/searx/static/themes/eelo/less/eelo/eelo.less +++ b/searx/static/themes/eelo/less/eelo/eelo.less @@ -1,8 +1,9 @@ -@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 diff --git a/searx/static/themes/eelo/less/eelo/footer.less b/searx/static/themes/eelo/less/eelo/footer.less deleted file mode 100644 index e0c1f23d5daeb29cb0b24a901a6b4956faa35b92..0000000000000000000000000000000000000000 --- a/searx/static/themes/eelo/less/eelo/footer.less +++ /dev/null @@ -1,9 +0,0 @@ -footer { - position: absolute; - bottom: 0; - width: 100%; - height: auto; - text-align: center; - color: #c1c1c1; - padding-bottom: 16px; -} \ No newline at end of file diff --git a/searx/static/themes/eelo/less/eelo/layout.less b/searx/static/themes/eelo/less/eelo/layout.less index c40f2de93392ba09a1dbebe482899ca8f812f832..a40e8c4f8035dcde11a00ce6de299be5971a2e7c 100644 --- a/searx/static/themes/eelo/less/eelo/layout.less +++ b/searx/static/themes/eelo/less/eelo/layout.less @@ -1,12 +1,4 @@ -.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; } +}); diff --git a/searx/static/themes/eelo/less/eelo/navbar.less b/searx/static/themes/eelo/less/eelo/navbar.less index 8f96df44de6ab250cb56a1aa0b86ff6a9cdd7364..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644 --- a/searx/static/themes/eelo/less/eelo/navbar.less +++ b/searx/static/themes/eelo/less/eelo/navbar.less @@ -1,25 +0,0 @@ -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 diff --git a/searx/static/themes/eelo/less/eelo/preferences.less b/searx/static/themes/eelo/less/eelo/preferences.less index 1a1cfd8472bf2171badd3cc66d1528bd21ea8877..ba2345551d8ae44afb04e7f0b8559c744b8d8daa 100644 --- a/searx/static/themes/eelo/less/eelo/preferences.less +++ b/searx/static/themes/eelo/less/eelo/preferences.less @@ -1,62 +1,29 @@ #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 diff --git a/searx/static/themes/eelo/less/eelo/results.less b/searx/static/themes/eelo/less/eelo/results.less index d3bab1cdd4fd077705763b66a3fc88b64757d834..7fa4e087a8a730a647c2a38fedf6849e1c641644 100644 --- a/searx/static/themes/eelo/less/eelo/results.less +++ b/searx/static/themes/eelo/less/eelo/results.less @@ -113,10 +113,6 @@ } } -.extras { - margin-top: 48px; -} - .tablet-mq({ #results.image-gallery { diff --git a/searx/static/themes/eelo/less/eelo/search.less b/searx/static/themes/eelo/less/eelo/search.less index f04f80049f1c475cdbcbbb39bca324bfad23facd..dd0c4ecc8a0c7dddf096b6308f06681f073558ab 100644 --- a/searx/static/themes/eelo/less/eelo/search.less +++ b/searx/static/themes/eelo/less/eelo/search.less @@ -1,127 +1,123 @@ -#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 diff --git a/searx/static/themes/eelo/less/eelo/widgets.less b/searx/static/themes/eelo/less/eelo/widgets.less new file mode 100644 index 0000000000000000000000000000000000000000..aaafbfcbf489bdd7a3389f486df459ee2b867838 --- /dev/null +++ b/searx/static/themes/eelo/less/eelo/widgets.less @@ -0,0 +1,84 @@ +.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; + + &.primary, input&[type="submit"] { + color: @color_accent; + } + &:hover { border-color: @color_accent; } + &.danger { &:extend(.danger); } + &.danger:hover { border-color: @color_danger; } + + &.btn-flat { + border: none; + border-radius: 0; + background-color: transparent; + } + + &.btn-flat:hover { + color: @color_accent; + } + + &.btn-block { &:extend(.block); } + + // used in dark backgrounds + &.plain-white { + border-color: rgba(255, 255, 255, .4); + color: rgba(255, 255, 255, .8); + background-color: rgba(0, 0, 0, .5); + } +} + + +.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; + + + &.flat { border: none; } + + &:not(.flat) { + &:extend(.widget); + width: 100%; + border-radius: 50px; + } +} \ No newline at end of file diff --git a/searx/templates/eelo/index.html b/searx/templates/eelo/index.html index ecd030162df745ca0d88a27bf77e47fbb66876de..8c2e0e83e80bd0acbc886dd2cb6e2b9a2c10bb50 100644 --- a/searx/templates/eelo/index.html +++ b/searx/templates/eelo/index.html @@ -2,6 +2,7 @@ {% block content %}