diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less index 529eb2b81..9df9019f2 100644 --- a/searx/static/themes/simple/src/less/definitions.less +++ b/searx/static/themes/simple/src/less/definitions.less @@ -209,7 +209,8 @@ html { @results-offset: 10rem; @results-tablet-offset: 0.5rem; @results-gap: 5rem; -@results-margin: 2rem; +@results-margin: 0.125rem; +@result-padding: 1rem; @search-width: 40rem; // heigh of #search, see detail.less @search-height: 7.5rem; diff --git a/searx/static/themes/simple/src/less/mixins.less b/searx/static/themes/simple/src/less/mixins.less index 74831e676..19955675b 100644 --- a/searx/static/themes/simple/src/less/mixins.less +++ b/searx/static/themes/simple/src/less/mixins.less @@ -16,6 +16,12 @@ border-radius: @radius; } +.rounded-right-corners (@radius: 0 10px 10px 0) { + -webkit-border-radius: @radius; + -moz-border-radius: @radius; + border-radius: @radius; +} + // disable user selection .disable-user-select () { -webkit-touch-callout: none; diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less index 88a8626f2..90a6a299e 100644 --- a/searx/static/themes/simple/src/less/search.less +++ b/searx/static/themes/simple/src/less/search.less @@ -3,12 +3,12 @@ */ #search { - padding: 1.5em 2em 0 @results-offset - 4rem; + padding: 1.5em 2em 0 @results-offset - 3rem; margin: 0; background: var(--color-header-background); border-bottom: 1px solid var(--color-header-border); display: grid; - column-gap: 1rem; + column-gap: 1.2rem; row-gap: 1rem; grid-template-columns: 3rem 1fr; grid-template-areas: diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less index d2c3bba92..e80b12991 100644 --- a/searx/static/themes/simple/src/less/style.less +++ b/searx/static/themes/simple/src/less/style.less @@ -126,33 +126,24 @@ a { article[data-vim-selected] { background: var(--color-result-vim-selected); -} - -article[data-vim-selected]::before { - position: absolute; - left: (@results-offset - 2rem); - padding: 2px; - content: ">"; - font-weight: bold; - color: var(--color-result-vim-arrow); + border-left: 0.2rem solid var(--color-result-vim-arrow); + .rounded-right-corners; } article.result-images[data-vim-selected] { background: var(--color-result-vim-arrow); + border: none; + .rounded-corners; .image_thumbnail { filter: opacity(60%); } } -article.result-images[data-vim-selected]::before { - display: none; - content: ""; -} - .result { margin: @results-margin 0; - padding: 0; + padding: @result-padding; + border-left: 0.2rem solid transparent; h3 { font-size: 1.1em; @@ -284,6 +275,7 @@ article.result-images[data-vim-selected]::before { padding: 0; position: relative; max-height: 200px; + border: none; img { float: inherit; @@ -464,7 +456,7 @@ article.result-images[data-vim-selected]::before { .infobox { margin: 10px 0 10px; border: 1px solid var(--color-sidebar-border); - padding: 0.9em; + padding: 1rem; font-size: 0.9em; .rounded-corners; @@ -752,13 +744,17 @@ article.result-images[data-vim-selected]::before { } .result { - padding: 8px 10px 6px 10px; - margin: @results-tablet-offset; + margin: 1rem @results-tablet-offset; border: 1px solid var(--color-result-border); box-shadow: 0 0 5px var(--color-result-shadow); .rounded-corners; } + article[data-vim-selected] { + border: 1px solid var(--color-result-border); + .rounded-corners; + } + .result-images { margin: 0; padding: 0;