diff options
Diffstat (limited to 'searx/static/themes/simple/css/searxng.css')
| -rw-r--r-- | searx/static/themes/simple/css/searxng.css | 575 |
1 files changed, 315 insertions, 260 deletions
diff --git a/searx/static/themes/simple/css/searxng.css b/searx/static/themes/simple/css/searxng.css index cae7a11be..c7319320c 100644 --- a/searx/static/themes/simple/css/searxng.css +++ b/searx/static/themes/simple/css/searxng.css @@ -729,91 +729,6 @@ template { display: none; } -@font-face { - font-family: "ion"; - src: url("../fonts/ion.eot?31a1b735188db616a2142d17947e8a45"); - src: url("../fonts/ion.eot?31a1b735188db616a2142d17947e8a45#iefix") format("embedded-opentype"), url("../fonts/ion.woff2?31a1b735188db616a2142d17947e8a45") format("woff2"), url("../fonts/ion.woff?31a1b735188db616a2142d17947e8a45") format("woff"), url("../fonts/ion.ttf?31a1b735188db616a2142d17947e8a45") format("truetype"), url("../fonts/ion.svg?31a1b735188db616a2142d17947e8a45#ion") format("svg"); - font-weight: normal; - font-style: normal; -} -.ion-icon { - display: inline-block; - line-height: 1; - font-weight: normal; - font-style: normal; - speak: none; - text-decoration: inherit; - text-transform: none; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} -.ion-icon:before { - font-family: "ion"; -} -.ion-navicon-round:before { - content: "\f101"; -} -.ion-search:before { - content: "\f102"; -} -.ion-play:before { - content: "\f103"; -} -.ion-link:before { - content: "\f104"; -} -.ion-chevron-up:before { - content: "\f105"; -} -.ion-chevron-left:before { - content: "\f106"; -} -.ion-chevron-right:before { - content: "\f107"; -} -.ion-arrow-down-a:before { - content: "\f108"; -} -.ion-arrow-up-a:before { - content: "\f109"; -} -.ion-arrow-swap:before { - content: "\f10a"; -} -.ion-arrow-dropdown:before { - content: "\f10b"; -} -.ion-globe:before { - content: "\f10c"; -} -.ion-time:before { - content: "\f10d"; -} -.ion-location:before { - content: "\f10e"; -} -.ion-warning:before { - content: "\f10f"; -} -.ion-error:before { - content: "\f110"; -} -.ion-film-outline:before { - content: "\f111"; -} -.ion-music-note:before { - content: "\f112"; -} -.ion-more-vertical:before { - content: "\f113"; -} -.ion-magnet:before { - content: "\f114"; -} -.ion-close:before { - content: "\f115"; -} /* * SearXNG, A privacy-respecting, hackable metasearch engine * @@ -887,8 +802,10 @@ template { --color-toolkit-dialog-background: #fff; --color-toolkit-tabs-label-border: #fff; --color-toolkit-tabs-section-border: #ddd; + --color-toolkit-select-background: #f7f7f7; --color-toolkit-select-border: #ddd; - --color-toolkit-select-border-hover: #bbb; + --color-toolkit-select-background-hover: #bbb; + --color-toolkit-input-text-font: #222; --color-toolkit-checkbox-onoff-background: #ddd; --color-toolkit-checkbox-onoff-label-background: #3050ff; --color-toolkit-checkbox-onoff-checked-background: #aaa; @@ -901,7 +818,7 @@ template { --color-toolkit-loader-borderleft: rgba(255, 255, 255, 0); } @media (prefers-color-scheme: dark) { - :root { + :root.theme-auto { --color-base-font: #bbb; --color-base-font-rgb: 187, 187, 187; --color-base-background: #222; @@ -945,8 +862,8 @@ template { --color-result-link-font: #8af; --color-result-link-font-highlight: #8af; --color-result-link-visited-font: #96b; - --color-result-publishdate-font: #777; - --color-result-engines-font: #777; + --color-result-publishdate-font: #888; + --color-result-engines-font: #888; --color-result-search-url-border: #555; --color-result-search-url-font: #fff; --color-result-detail-font: #fff; @@ -969,8 +886,10 @@ template { --color-toolkit-dialog-background: #222; --color-toolkit-tabs-label-border: #222; --color-toolkit-tabs-section-border: #555; + --color-toolkit-select-background: #3c3b31; --color-toolkit-select-border: #555; - --color-toolkit-select-border-hover: #777; + --color-toolkit-select-background-hover: #333; + --color-toolkit-input-text-font: #fff; --color-toolkit-checkbox-onoff-background: #3c3b31; --color-toolkit-checkbox-onoff-label-background: #58f; --color-toolkit-checkbox-onoff-checked-background: #ddd; @@ -983,6 +902,89 @@ template { --color-toolkit-loader-borderleft: rgba(0, 0, 0, 0); } } +:root.theme-dark { + --color-base-font: #bbb; + --color-base-font-rgb: 187, 187, 187; + --color-base-background: #222; + --color-url-font: #8af; + --color-url-visited-font: #96b; + --color-header-background: #181818; + --color-header-border: #333; + --color-footer-background: #181818; + --color-footer-border: #333; + --color-sidebar-border: #555; + --color-sidebar-font: #fff; + --color-backtotop-font: #bbb; + --color-backtotop-border: #333; + --color-backtotop-background: #181818; + --color-btn-background: #58f; + --color-btn-font: #222; + --color-search-border: #555; + --color-search-background: #222; + --color-search-font: #fff; + --color-search-background-hover: #58f; + --color-error: #f55b5b; + --color-error-background: #390a0a; + --color-warning: #f1d561; + --color-warning-background: #39300a; + --color-success: #79f56e; + --color-success-background: #0e390a; + --color-categories-item-selected-font: #58f; + --color-categories-item-border-selected: #58f; + --color-autocomplete-font: #fff; + --color-autocomplete-border: #555; + --color-autocomplete-background: #222; + --color-autocomplete-background-hover: #181818; + --color-answer-border: #333; + --color-answer-font: #bbb; + --color-answer-background: #181818; + --color-result-border: #333; + --color-result-url-font: #fff; + --color-result-vim-selected: #181818; + --color-result-vim-arrow: #8af; + --color-result-description-highlight-font: #fff; + --color-result-link-font: #8af; + --color-result-link-font-highlight: #8af; + --color-result-link-visited-font: #96b; + --color-result-publishdate-font: #888; + --color-result-engines-font: #888; + --color-result-search-url-border: #555; + --color-result-search-url-font: #fff; + --color-result-detail-font: #fff; + --color-result-detail-label-font: lightgray; + --color-result-detail-background: #000; + --color-result-detail-hr: #555; + --color-result-detail-link: #8af; + --color-result-detail-loader-border: rgba(255, 255, 255, 0.2); + --color-result-detail-loader-borderleft: rgba(0, 0, 0, 0); + --color-result-image-span-background-hover: rgba(0, 0, 0, 0.6); + --color-result-image-span-font: #fff; + --color-result-image-background: #8af; + --color-settings-tr-hover: #2d2d2d; + --color-settings-engine-description-font: #909090; + --color-toolkit-badge-font: #fff; + --color-toolkit-badge-background: #777; + --color-toolkit-kbd-font: #000; + --color-toolkit-kbd-background: #fff; + --color-toolkit-dialog-border: #555; + --color-toolkit-dialog-background: #222; + --color-toolkit-tabs-label-border: #222; + --color-toolkit-tabs-section-border: #555; + --color-toolkit-select-background: #3c3b31; + --color-toolkit-select-border: #555; + --color-toolkit-select-background-hover: #333; + --color-toolkit-input-text-font: #fff; + --color-toolkit-checkbox-onoff-background: #3c3b31; + --color-toolkit-checkbox-onoff-label-background: #58f; + --color-toolkit-checkbox-onoff-checked-background: #ddd; + --color-toolkit-checkbox-label-background: #fff; + --color-toolkit-checkbox-label-border: #333; + --color-toolkit-checkbox-input-border: #58f; + --color-toolkit-engine-tooltip-border: #333; + --color-toolkit-engine-tooltip-background: #222; + --color-toolkit-loader-border: rgba(255, 255, 255, 0.2); + --color-toolkit-loader-borderleft: rgba(0, 0, 0, 0); +} /* * SearXNG, A privacy-respecting, hackable metasearch engine */ @@ -1415,8 +1417,6 @@ div.selectable_url { overflow: hidden; height: 1.2em; line-height: 1.2em; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; border-radius: 5px; } div.selectable_url pre { @@ -1431,24 +1431,16 @@ div.selectable_url pre { } .dialog-error { position: relative; - padding: 1em 1em 1em 2.7em; + display: flex; + padding: 1rem; margin: 0 0 1em 0; border: 1px solid var(--color-toolkit-dialog-border); text-align: left; - -webkit-border-radius: 10px; - -moz-border-radius: 10px; border-radius: 10px; color: var(--color-error); background: var(--color-error-background); border-color: var(--color-error); } -.dialog-error::before { - position: absolute; - top: 0.5em; - left: 0.5em; - font-family: "ion"; - font-size: 1.5em; -} .dialog-error .close { float: right; position: relative; @@ -1468,7 +1460,7 @@ div.selectable_url pre { vertical-align: text-top; } .dialog-error tr:hover { - background: transparent; + background: transparent !important; } .dialog-error td { padding: 0 1em 0 0; @@ -1477,29 +1469,18 @@ div.selectable_url pre { margin-top: 0.3em; margin-bottom: 0.3em; } -.dialog-error:before { - content: "\f110"; -} .dialog-warning { position: relative; - padding: 1em 1em 1em 2.7em; + display: flex; + padding: 1rem; margin: 0 0 1em 0; border: 1px solid var(--color-toolkit-dialog-border); text-align: left; - -webkit-border-radius: 10px; - -moz-border-radius: 10px; border-radius: 10px; color: var(--color-warning); background: var(--color-warning-background); border-color: var(--color-warning); } -.dialog-warning::before { - position: absolute; - top: 0.5em; - left: 0.5em; - font-family: "ion"; - font-size: 1.5em; -} .dialog-warning .close { float: right; position: relative; @@ -1519,7 +1500,7 @@ div.selectable_url pre { vertical-align: text-top; } .dialog-warning tr:hover { - background: transparent; + background: transparent !important; } .dialog-warning td { padding: 0 1em 0 0; @@ -1528,18 +1509,15 @@ div.selectable_url pre { margin-top: 0.3em; margin-bottom: 0.3em; } -.dialog-warning:before { - content: "\f10f"; -} .dialog-modal { position: relative; - padding: 1em 1em 1em 2.7em; + display: flex; + padding: 1rem; margin: 0 0 1em 0; border: 1px solid var(--color-toolkit-dialog-border); text-align: left; - -webkit-border-radius: 10px; - -moz-border-radius: 10px; border-radius: 10px; + display: block; background: var(--color-toolkit-dialog-background); position: fixed; top: 50%; @@ -1548,13 +1526,6 @@ div.selectable_url pre { transform: translate(-50%, -50%); z-index: 10000000; } -.dialog-modal::before { - position: absolute; - top: 0.5em; - left: 0.5em; - font-family: "ion"; - font-size: 1.5em; -} .dialog-modal .close { float: right; position: relative; @@ -1574,7 +1545,7 @@ div.selectable_url pre { vertical-align: text-top; } .dialog-modal tr:hover { - background: transparent; + background: transparent !important; } .dialog-modal td { padding: 0 1em 0 0; @@ -1583,6 +1554,9 @@ div.selectable_url pre { margin-top: 0.3em; margin-bottom: 0.3em; } +.dialog-modal h3 { + margin-top: 0; +} .btn-collapse { cursor: pointer; } @@ -1644,7 +1618,6 @@ div.selectable_url pre { border-bottom: 2px solid var(--color-categories-item-border-selected); background: var(--color-categories-item-selected); color: var(--color-categories-item-selected-font); - font-weight: bold; letter-spacing: -0.1px; } .tabs > section:last-of-type { @@ -1673,11 +1646,11 @@ html body .tabs > input:checked + label + section { } /* -- select -- */ select { - height: 28px; - margin: 0 1em 0 0; - padding: 2px 8px 2px 0 !important; + height: 2.4rem; + margin: 0 1rem 0 0; + padding: 0.2rem !important; color: var(--color-search-font); - font-size: 12px; + font-size: 0.9rem; z-index: 2; } select:hover, @@ -1689,26 +1662,33 @@ select:focus { appearance: none; -webkit-appearance: none; -moz-appearance: none; - border: none; - border-bottom: 1px solid var(--color-toolkit-select-border); + border-width: 0 2rem 0 0; + border-color: transparent; background: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%3Cg%3E%3Cpolygon%20points%3D%22128%2C192%20256%2C320%20384%2C192%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E") no-repeat; - background-position-x: 105%; - background-size: 2em; + background-position-x: calc(100% + 2rem); + background-size: 2rem; background-origin: content-box; + background-color: var(--color-toolkit-select-background); outline: medium none; + text-overflow: ellipsis; + border-radius: 5px; } select:hover, select:focus { - border-bottom: 1px solid var(--color-toolkit-select-border-hover); + background-color: var(--color-toolkit-select-background-hover); } select option { background-color: var(--color-base-background); } @media (prefers-color-scheme: dark) { - select { + html.theme-auto select, + html.theme-dark select { background-image: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%3Cg%3E%3Cpolygon%20fill%3D%22%23ddd%22%20points%3D%22128%2C192%20256%2C320%20384%2C192%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E"); } } + html.theme-dark select { + background-image: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%3Cg%3E%3Cpolygon%20fill%3D%22%23ddd%22%20points%3D%22128%2C192%20256%2C320%20384%2C192%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E"); + } } /* -- checkbox-onoff -- */ @supports (border-radius: 50px) { @@ -1756,8 +1736,6 @@ select:focus { top: 0; left: 0; background: var(--color-toolkit-checkbox-label-background); - -webkit-border-radius: 10px; - -moz-border-radius: 10px; border-radius: 10px; } .checkbox label::after { @@ -1848,8 +1826,6 @@ select:focus { font-weight: normal; z-index: 1000000; text-align: left; - -webkit-border-radius: 10px; - -moz-border-radius: 10px; border-radius: 10px; } th:hover .engine-tooltip, @@ -1926,8 +1902,6 @@ td:hover .engine-tooltip, max-height: 0; overflow-y: hidden; text-align: left; - -webkit-border-radius: 10px; - -moz-border-radius: 10px; border-radius: 10px; } .autocomplete:active, @@ -1992,7 +1966,7 @@ td:hover .engine-tooltip, } } #main_results #results.image-detail-open.only_template_images { - width: 59.25rem !important; + width: min(98%, 59.25rem) !important; } #main_results #results.only_template_images.image-detail-open #backToTop { left: 56.75rem !important; @@ -2007,7 +1981,7 @@ article.result-images .detail { position: fixed; left: 60rem; right: 0; - top: 7.5rem; + top: 7.75rem; transition: top 0.064s ease-in 0s; bottom: 0; background: var(--color-result-detail-background); @@ -2199,6 +2173,19 @@ article.result-images .detail { margin-right: 1rem; } } +.dialog-modal { + animation-name: dialogmodal; + animation-duration: 0.13s; +} +@keyframes dialogmodal { + 0% { + opacity: 0; + } + 50% { + opacity: 0.5; + transform: translate(-50%, -50%) scale(1.05); + } +} #main_index { margin-top: 26vh; } @@ -2219,7 +2206,8 @@ article.result-images .detail { font-size: 4em; visibility: hidden; } -.index #search { +.index #search, +.index #search_header { margin: 0 auto; background: inherit; border: inherit; @@ -2272,6 +2260,32 @@ article.result-images .detail { float: left; width: 15em; } +#main_preferences .value select, +#main_preferences .value input[type="text"] { + font-size: inherit !important; + margin: 0 1rem 0 0; +} +#main_preferences .value select { + width: 14rem; +} +#main_preferences .value input[type="text"] { + width: 13.25rem; + color: var(--color-toolkit-input-text-font); + border: none; + background: none repeat scroll 0 0 var(--color-toolkit-select-background); + padding: 0.2rem 0.4rem; + height: 2rem; + border-radius: 5px; +} +#main_preferences .value input[type="text"]:hover, +#main_preferences .value input[type="text"]:focus { + background-color: var(--color-toolkit-select-background-hover); +} +#main_preferences .value select:focus, +#main_preferences .value input:focus { + outline: none; + box-shadow: 0 0 1px 1px var(--color-btn-background); +} #main_preferences .description { margin: 0; padding: 5px 0 0 0; @@ -2280,10 +2294,6 @@ article.result-images .detail { color: var(--color-settings-engine-description-font); font-size: 90%; } -#main_preferences select { - width: 200px; - font-size: inherit !important; -} #main_preferences table { border-collapse: collapse; } @@ -2313,6 +2323,17 @@ article.result-images .detail { #main_preferences table.cookies > tbody > tr:nth-child(even) > td { background-color: var(--color-settings-tr-hover); } +#main_preferences .category { + margin-right: 0.5rem; +} +#main_preferences .category label { + border: 2px solid transparent; + padding: 0.2rem 0.4rem; + border-radius: 5px; +} +#main_preferences .category input[type="checkbox"]:checked + label { + border: 2px solid var(--color-categories-item-border-selected); +} #main_preferences .name, #main_preferences .shortcut { text-align: left; @@ -2321,8 +2342,6 @@ article.result-images .detail { background: none repeat scroll 0 0 var(--color-btn-background); color: var(--color-btn-font); border: 0 none; - -webkit-border-radius: 10px; - -moz-border-radius: 10px; border-radius: 10px; cursor: pointer; display: inline-block; @@ -2358,6 +2377,10 @@ article.result-images .detail { * SearXNG, A privacy-respecting, hackable metasearch engine */ #search { + padding: 0; + margin: 0; +} +#search_header { padding: 1.5em 2em 0 7rem; margin: 0; background: var(--color-header-background); @@ -2368,21 +2391,58 @@ article.result-images .detail { grid-template-columns: 3rem 1fr; grid-template-areas: "logo search" "spacer categories"; } +.category { + display: inline-block; + position: relative; + margin-right: 1rem; + padding: 0; +} +.category input { + display: none; +} +.category label { + cursor: pointer; + padding: 0.2rem 0; + display: inline-flex; + text-transform: capitalize; + font-size: 0.9em; + border-bottom: 2px solid transparent; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.category label svg { + padding-right: 0.2rem; +} +.category label div.category_name { + margin: auto 0; +} +.category input[type="checkbox"]:checked + label { + color: var(--color-categories-item-selected-font); + border-bottom: 2px solid var(--color-categories-item-border-selected); +} #search_logo { grid-area: logo; + display: flex; + align-items: center; + justify-content: center; } -.search_logo_img { - width: 40px; +#search_logo svg { + flex: 1; + width: 30px; + height: 30px; + margin: 0.5rem 0 auto 0; } .search_categories { grid-area: categories; } -#search_wrapper { +.search_box { + margin: 0; padding: 0; grid-area: search; -} -.search_box { - margin: 0 12px 0 0; display: inline-flex; flex-direction: row; white-space: nowrap; @@ -2417,7 +2477,7 @@ article.result-images .detail { border-collapse: separate; box-sizing: border-box; margin: 0; - padding: 8px; + padding: 10px; background: none repeat scroll 0 0 var(--color-search-background); border: 1px solid var(--color-search-border); border-radius: 0; @@ -2447,18 +2507,30 @@ article.result-images .detail { background-color: var(--color-search-background-hover); color: var(--color-search-background); } +.no-js #clear_search, .no-js #send_search { width: auto !important; + border-left: 1px solid var(--color-search-border); + padding: 10px; } .search_filters { - display: inline-block; - margin: 0.8rem 0 0 0; + margin: 0.6rem 0 0 10.6rem; +} +.search_filters select { + background-color: inherit; +} +.search_filters select:hover, +.search_filters select:focus { + color: var(--color-base-font); } @media screen and (max-width: 80em) { - #search { + #search_header { padding: 1.5em 0.5rem 0 0.5rem; column-gap: 0.5rem; } + .search_filters { + margin: 0.6rem 0 0 3.5rem; + } #categories { font-size: 90%; clear: both; @@ -2482,7 +2554,6 @@ article.result-images .detail { html.touch #main_index #categories, html.touch #main_results #categories { width: 100%; - margin: 0; text-align: left; overflow-x: scroll; overflow-y: hidden; @@ -2490,10 +2561,10 @@ article.result-images .detail { } } @media screen and (max-width: 50em) { - #search { + #search_header { width: 100%; margin: 0; - padding: 0.1em 0 0 0; + padding: 0.1rem 0 0 0; column-gap: 0; row-gap: 0; grid-template-areas: "logo search" "categories categories"; @@ -2501,19 +2572,13 @@ article.result-images .detail { .search_logo { padding: 0; } - #search_wrapper { - width: 100%; - padding: 0; - } .search_box { width: 99%; - margin: 0.1em; - padding: 0 0.1em 0 0; display: flex; flex-direction: row; } #q { - width: auto !important; + width: 100%; flex: 1; } #main_results #q:placeholder-shown ~ #send_search { @@ -2521,8 +2586,7 @@ article.result-images .detail { transition: margin-right 0.1s; } .search_filters { - display: block; - margin: 0.8em 0; + margin: 0; } .language, .time_range { @@ -2531,13 +2595,25 @@ article.result-images .detail { .category { display: block; width: 100%; + margin: 0; } .category label { - padding: 10px !important; + padding: 0.8rem !important; + margin: 0 !important; + } + .category label svg { + display: none; + } +} +@media screen and (max-width: 20rem) { + #search_header { + grid-template-areas: "search search" "categories categories"; + } + #search_logo { + display: none; } } #categories { - margin: 0 10px 0 0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; @@ -2549,52 +2625,30 @@ article.result-images .detail { width: 0; height: 0; } -.category { - display: inline-block; +#categories_container { position: relative; - margin: 0 3px; - padding: 0; -} -.category input { - display: none; -} -.category label { - cursor: pointer; - padding: 0.3rem 0.75rem 0.5rem 0.75rem; - margin: 0; - display: block; - text-transform: capitalize; - font-size: 0.9em; - border-bottom: 2px solid transparent; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; } -.category input[type="checkbox"]:checked + label { - color: var(--color-categories-item-selected-font); - border-bottom: 2px solid var(--color-categories-item-border-selected); +.ion-icon { + display: inline-block; + vertical-align: bottom; + line-height: 1; + text-decoration: inherit; } -#categories_container { - position: relative; +.ion-icon-small { + width: 1rem; + height: 1rem; + display: inline-block; + vertical-align: bottom; + line-height: 1; + text-decoration: inherit; } .ion-icon-big { + width: 1.5rem; + height: 1.5rem; display: inline-block; + vertical-align: bottom; line-height: 1; - font-weight: normal; - font-style: normal; - speak: none; text-decoration: inherit; - text-transform: none; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-size: 149%; -} -.ion-icon-big:before { - font-family: "ion"; } html { font-family: sans-serif; @@ -2660,8 +2714,6 @@ input[type="submit"], display: inline-block; background: var(--color-btn-background); color: var(--color-btn-font); - -webkit-border-radius: 10px; - -moz-border-radius: 10px; border-radius: 10px; border: 0; cursor: pointer; @@ -2679,15 +2731,11 @@ a:visited .highlight { article[data-vim-selected] { background: var(--color-result-vim-selected); border-left: 0.2rem solid var(--color-result-vim-arrow); - -webkit-border-radius: 0 10px 10px 0; - -moz-border-radius: 0 10px 10px 0; border-radius: 0 10px 10px 0; } article.result-images[data-vim-selected] { background: var(--color-result-vim-arrow); border: none; - -webkit-border-radius: 10px; - -moz-border-radius: 10px; border-radius: 10px; } article.result-images[data-vim-selected] .image_thumbnail { @@ -2700,8 +2748,6 @@ article[data-vim-selected].category-music, article[data-vim-selected].category-files, article[data-vim-selected].category-social { border: 1px solid var(--color-result-vim-arrow); - -webkit-border-radius: 10px; - -moz-border-radius: 10px; border-radius: 10px; } .result { @@ -2710,7 +2756,7 @@ article[data-vim-selected].category-social { border-left: 0.2rem solid transparent; } .result h3 { - font-size: 1.1em; + font-size: 1.2rem; word-wrap: break-word; margin: 0.4rem 0 0.4rem 0; padding: 0; @@ -2755,13 +2801,35 @@ article[data-vim-selected].category-social { background: inherit; font-weight: normal; } -.result .url { - font-size: 0.96em; - margin: 0 0 3px 0; - padding: 0; - max-width: 54em; - word-wrap: break-word; +.result .url_wrapper { + display: flex; + font-size: 1rem; color: var(--color-result-url-font); + flex-wrap: nowrap; + overflow: hidden; + flex-direction: row; + margin: 0; + padding: 0; +} +.result .url_wrapper .url_o1 { + white-space: nowrap; + flex-shrink: 1; +} +.result .url_wrapper .url_o1::after { + content: " "; + width: 1ch; + display: inline-block; +} +.result .url_wrapper .url_o2 { + overflow: hidden; + white-space: nowrap; + flex-basis: content; + flex-grow: 0; + flex-shrink: 1; + text-align: right; +} +.result .url_wrapper .url_o2 .url_i2 { + float: right; } .result .published_date { font-size: 0.8em; @@ -2769,16 +2837,14 @@ article[data-vim-selected].category-social { } .result img.thumbnail { float: left; - padding: 0 5px 10px 0; - width: 20em; - min-width: 20em; - min-height: 8em; + padding: 0.6rem 1rem 0 0; + width: 20rem; } .result img.image { float: left; - padding: 0 5px 10px 0; - width: 100px; - max-height: 100px; + padding: 0.6rem 1rem 0 0; + width: 7rem; + max-height: 7rem; object-fit: scale-down; object-position: right top; } @@ -2793,8 +2859,6 @@ article[data-vim-selected].category-social { .category-social { border: 1px solid var(--color-result-border); margin: 1rem 0; - -webkit-border-radius: 10px; - -moz-border-radius: 10px; border-radius: 10px; } .category-social .image { @@ -2821,6 +2885,9 @@ article[data-vim-selected].category-social { color: var(--color-result-link-font-highlight); background: inherit; } +.empty_element { + font-style: italic; +} .result-images { display: inline-block; margin: 0; @@ -2876,7 +2943,7 @@ article[data-vim-selected].category-social { display: none !important; } #results { - margin: 2rem 2rem 0 10rem; + margin: 1rem 2rem 0 10rem; display: grid; grid-template-columns: 45rem 25rem; grid-template-rows: min-content min-content 1fr min-content; @@ -2938,8 +3005,6 @@ article[data-vim-selected].category-social { } #corrections input[type="submit"] { font-size: 0.8rem; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; border-radius: 5px; } #suggestions .title, @@ -2953,11 +3018,9 @@ article[data-vim-selected].category-social { border: 1px solid var(--color-answer-border); background: var(--color-answer-background); padding: 1rem; - margin: 1rem 0.5rem; + margin: 1rem 0; margin-top: 0; color: var(--color-answer-font); - -webkit-border-radius: 10px; - -moz-border-radius: 10px; border-radius: 10px; } #answers h4 { @@ -2976,8 +3039,6 @@ article[data-vim-selected].category-social { border: 1px solid var(--color-sidebar-border); padding: 1rem; font-size: 0.9em; - -webkit-border-radius: 10px; - -moz-border-radius: 10px; border-radius: 10px; } #sidebar .infobox h2 { @@ -3023,7 +3084,7 @@ article[data-vim-selected].category-social { #linkto_preferences { position: absolute; right: 10px; - top: 2rem; + top: 2.2rem; padding: 0; border: 0; display: block; @@ -3057,8 +3118,6 @@ article[data-vim-selected].category-social { left: 56.3rem; transition: opacity 0.5s; opacity: 0; - -webkit-border-radius: 10px; - -moz-border-radius: 10px; border-radius: 10px; } #backToTop a { @@ -3140,7 +3199,7 @@ article[data-vim-selected].category-social { margin: 2rem 0 0 0 !important; } #main_results div#results { - margin: 2rem auto 0 auto; + margin: 1rem auto 0 auto; justify-content: center; display: grid; grid-template-columns: 45rem; @@ -3150,7 +3209,7 @@ article[data-vim-selected].category-social { } } #main_results div#results.only_template_images { - margin: 2rem 0.5rem 0 0.5rem; + margin: 1rem 0.5rem 0 0.5rem; display: grid; grid-template-columns: 100%; grid-template-rows: min-content min-content 1fr min-content min-content; @@ -3190,15 +3249,11 @@ article[data-vim-selected].category-social { } article[data-vim-selected] { border: 1px solid var(--color-result-vim-arrow); - -webkit-border-radius: 10px; - -moz-border-radius: 10px; border-radius: 10px; } .result { border: 1px solid var(--color-result-border); margin: 1rem 0; - -webkit-border-radius: 10px; - -moz-border-radius: 10px; border-radius: 10px; } .result-images { |