X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fsearchbar.css;h=01d2d130d6fd9e9e77173129ce8a4aec0f63238c;hp=dc54dbb4cadb60980a5aea64009da56d0272ed80;hb=d23bf94a3357d30cf7300a6eb9c051f0a225b02a;hpb=36759a51bcc412b1c08d2cad716a8898243c404c diff --git a/LCARStrek/browser/searchbar.css b/LCARStrek/browser/searchbar.css index dc54dbb4..01d2d130 100644 --- a/LCARStrek/browser/searchbar.css +++ b/LCARStrek/browser/searchbar.css @@ -1,6 +1,16 @@ -.searchbar-textbox { - width: 6em; - min-width: 6em; +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +#PopupSearchAutoComplete { + /* JS code forces the panel to have the width of the searchbar rather than + * the width of the textfield. Alignment of the panel with the searchbar is + * obtained with negative margins here: margin-inline-start when the text + * field is in the same direction as the rest of the UI, margin-inline-end + * when the textfield's direction has been reversed. + * (eg. using ctrl+shift+X) */ + margin-inline-start: -25px; + margin-inline-end: -18px; } .autocomplete-textbox-container { @@ -16,70 +26,247 @@ .searchbar-engine-image { height: 16px; width: 16px; - list-style-image: url("chrome://global/skin/filepicker/file.gif"); - -moz-margin-start: 2px; + list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); + margin-inline-start: -1px; } -.searchbar-engine-button { - min-width: 0; - margin: 0; - padding: 0; - -moz-padding-end: 2px; +/* ::::: search-go-button ::::: */ + +.search-go-container { + -moz-box-align: center; +} + +.search-go-button { + padding: 1px; + list-style-image: url("chrome://browser/skin/reload-stop-go.png"); + -moz-image-region: rect(0, 42px, 14px, 28px); + width: 14px; +} + +.search-go-button:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +.search-go-button:hover { + -moz-image-region: rect(14px, 42px, 28px, 28px); +} + +.search-go-button:hover:active { + -moz-image-region: rect(14px, 42px, 28px, 28px); +} + +.searchbar-search-button-container { -moz-box-align: center; - background: none; +} + +.searchbar-search-button { + list-style-image: url("chrome://browser/skin/search-indicator.png"); + -moz-image-region: rect(0, 20px, 20px, 0); + margin-top: 1px; + margin-bottom: 1px; + margin-inline-start: 4px; + border-radius: 3px; +} + +.searchbar-search-button[addengines="true"] { + list-style-image: url("chrome://browser/skin/search-indicator-badge-add.png"); +} + +.searchbar-search-button:hover, +.searchbar-search-button:hover:active { + -moz-image-region: rect(0, 40px, 20px, 20px); + background-color: #FFCF00; +} + +@media (min-resolution: 1.1dppx) { + .search-go-button { + list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png"); + -moz-image-region: rect(0, 84px, 28px, 56px); + } + + .search-go-button:hover { + -moz-image-region: rect(28px, 84px, 56px, 56px); + } + + .search-go-button:hover:active { + -moz-image-region: rect(56px, 84px, 84px, 56px); + } +} + +.search-panel-current-engine { + border-top: none !important; + -moz-box-align: center; + + border-bottom: none; +} + +.search-panel-tree { + border-top: 1px solid var(--panel-separator-color) !important; +} + +.search-panel-header { + font-weight: normal; + background-color: #A09090; + border-top: 1px solid #000000; + margin: 0; + padding: 3px 6px; + color: #000000; +} + +.search-panel-current-input > label { + margin: 0 0 !important; +} + +.search-panel-input-value { + color: #E7ADE7; +} + +.search-panel-one-offs { + margin: 0 !important; + border-top: 1px solid #000000; + line-height: 0; +} + +.searchbar-engine-one-off-item { + display: inline-block; border: none; - border-radius: 3px 0px 0px 3px; + border-radius: 0; + min-width: 48px; + height: 32px; + margin: 0; + padding: 0; + background: linear-gradient(transparent 15%, var(--panel-separator-color) 15%, var(--panel-separator-color) 85%, transparent 85%); + background-size: 1px auto; + background-repeat: no-repeat; + background-position: right center; + color: #A09090; +} + +.searchbar-engine-one-off-item:-moz-locale-dir(rtl) { + background-position: left center; +} + +.searchbar-engine-one-off-item:not(.last-row) { + box-sizing: content-box; + border-bottom: 1px solid var(--panel-separator-color); } -.searchbar-engine-button:-moz-locale-dir(rtl) { - border-radius: 0px 3px 3px 0px; +.search-setting-button-compact { + border-bottom: none !important; } -.searchbar-engine-button[open="true"] { - background-color: #FF9F00; +.search-panel-one-offs:not([compact=true]) > .searchbar-engine-one-off-item.last-of-row, +.search-panel-one-offs[compact=true] > .searchbar-engine-one-off-item.last-of-row:not(.dummy), +.search-panel-one-offs[compact=true] > .searchbar-engine-one-off-item.dummy:not(.last-of-row), +.search-panel-one-offs[compact=true] > .searchbar-engine-one-off-item.last-engine, +.search-setting-button-compact { + background-image: none; } -.searchbar-engine-button > .button-box { +.searchbar-engine-one-off-item[selected] { + background-color: #008484; + background-image: none; + color: #000000; +} + +.searchbar-engine-one-off-item > .button-box { + border: none; padding: 0; - border: 0; } -.searchbar-dropmarker-image { - list-style-image: url("chrome://global/skin/arrow/arrow-down.gif"); +.searchbar-engine-one-off-item > .button-box > .button-text { + display: none; } -.searchbar-engine-button[open="true"] > .searchbar-dropmarker-image { - list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif"); +.searchbar-engine-one-off-item > .button-box > .button-icon { + width: 16px; + height: 16px; +} + +.addengine-item { + border: none; +/* height: 32px;*/ + margin: 0; + padding: 0 10px; + border-radius: 0; } +.addengine-item > .button-box { + -moz-box-pack: start; +} -/* ::::: search-go-button ::::: */ +.addengine-item:first-of-type { + border-top: 1px solid #000000; +} -.search-go-container { - -moz-box-align: center; +.addengine-item[selected] { + background-color: #FFCF00; + color: #000000; } -.search-go-button { - padding: 1px; - list-style-image: url("chrome://global/skin/icons/search.png"); - -moz-image-region: rect(0, 16px, 16px, 0); +.addengine-icon { + height: 16px; + width: 16px; } -.search-go-button:-moz-system-metric(touch-enabled) { - -moz-padding-start: 5px; - -moz-padding-end: 3px; +.addengine-badge { + width: 16px; + height: 16px; + margin: -7px -9px 7px 9px; + list-style-image: url("chrome://browser/skin/badge-add-engine.png"); } -.search-go-button:-moz-locale-dir(rtl) { - transform: scaleX(-1); +.addengine-item > .button-box > .button-text { + -moz-box-flex: 1; + text-align: start; + padding-inline-start: 10px; } -.search-go-button:hover { +.addengine-item:not([image]) { + list-style-image: url("chrome://browser/skin/search-engine-placeholder.png"); } -.search-go-button:hover:active { +.search-panel-tree > .autocomplete-treebody::-moz-tree-cell { + padding-inline-start: 15px; + border-top: none !important; +} + +.search-panel-tree > .autocomplete-treebody::-moz-tree-cell-text { + padding-inline-start: 4px; +} + +.search-panel-tree > .autocomplete-treebody::-moz-tree-image { + padding-inline-start: 5px; + width: 14px; + height: 14px; +} + +.search-panel-tree > .autocomplete-treebody::-moz-tree-image(fromhistory) { + list-style-image: url("chrome://browser/skin/search-history-icon.svg#search-history-icon"); +} + +.search-panel-tree > .autocomplete-treebody::-moz-tree-image(fromhistory, selected) { + list-style-image: url("chrome://browser/skin/search-history-icon.svg#search-history-icon-active"); +} + +.search-setting-button { + border-radius: 0; + background-color: #C09070; +/* min-height: 32px;*/ +} + +.search-setting-button[selected] { + background-color: #FFCF00; + border-top-color: #000000; +} + +.search-setting-button-compact > .button-box > .button-icon { + list-style-image: url("chrome://browser/skin/gear.svg"); + filter: url(chrome://browser/skin/filters.svg#fill); + fill: currentColor; } -.searchbar-engine-menuitem[selected="true"] > .menu-iconic-text { - font-weight: bold; +.search-setting-button-compact:hover { + background-color: #FFCF00; + color: #000000; }