X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fsearchbar.css;h=e457a75608cb948ff15de62491ce38975fa081a3;hp=b690cc1c2f6b8aa3e98a76ff7008570161a72cbc;hb=fa981c35026cc094054c9f158969b12ad343f22f;hpb=df1d9c69484bd51df7dbc1c665555ae481b35733 diff --git a/LCARStrek/browser/searchbar.css b/LCARStrek/browser/searchbar.css index b690cc1c..e457a756 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,75 +26,286 @@ .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; +} + +/* ::::: 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; +} + +.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-engine-button { - min-width: 0; +.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 { + -moz-box-align: center; +} + +/** + * The borders of the various elements are specified as follows. + * + * The current engine always has a bottom border. + * The search results never have a border. + * + * When the search results are not collapsed: + * - The elements underneath the search results all have a top border. + * + * When the search results are collapsed: + * - The elements underneath the search results all have a bottom border, except + * the lowest one: search-setting-button. + */ + +.search-panel-current-engine { + border-top: none !important; + border-bottom: 1px solid var(--panel-separator-color) !important; +} + +.search-panel-tree[collapsed=true] + .search-one-offs > .search-panel-header, +.search-panel-tree[collapsed=true] + .search-one-offs > .search-panel-one-offs, +.search-panel-tree[collapsed=true] + .search-one-offs > vbox > .addengine-item:first-of-type { + border-top: none !important; +} + +.search-panel-tree[collapsed=true] + .search-one-offs > .searchbar-engine-one-off-item, +.search-panel-tree[collapsed=true] + .search-one-offs > .search-panel-current-input, +.search-panel-tree[collapsed=true] + .search-one-offs > .search-panel-one-offs, +.search-panel-tree[collapsed=true] + .search-one-offs > vbox > .addengine-item:last-of-type { + border-bottom: 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; + background-color: #000000; + padding: 1px 2px; +} + +.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: 0; + min-width: 48px; + height: 32px; margin: 0; padding: 0; - -moz-padding-end: 2px; - -moz-box-align: center; - background: none; + 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); +} + +.search-setting-button-compact { + border-bottom: none !important; +} + +.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-one-off-item[selected] { + background-color: #008484; + background-image: none; + color: #000000; +} + +.searchbar-engine-one-off-item > .button-box { + border: none; + padding: 0; +} + +.searchbar-engine-one-off-item > .button-box > .button-text { + display: none; +} + +.searchbar-engine-one-off-item > .button-box > .button-icon { + width: 16px; + height: 16px; +} + +.addengine-item { border: none; - border-radius: 3px 0px 0px 3px; +/* height: 32px;*/ + margin: 0; + padding: 0 10px; + border-radius: 0; +} + +.addengine-item > .button-box { + -moz-box-pack: start; } -.searchbar-engine-button:-moz-locale-dir(rtl) { - border-radius: 0px 3px 3px 0px; +.addengine-item:first-of-type { + border-top: 1px solid #000000; } -.searchbar-engine-button:hover { +.addengine-item[selected] { background-color: #FFCF00; + color: #000000; } -.searchbar-engine-button[open="true"] { - background-color: #FF9F00; +.addengine-item[type=menu][selected] { + color: inherit; + background-color: var(--arrowpanel-dimmed-further); } -.searchbar-engine-button > .button-box { - padding: 0; - border: 0; +.addengine-icon { + height: 16px; + width: 16px; } -.searchbar-dropmarker-image { - list-style-image: url("chrome://global/skin/arrow/arrow-down.gif"); +.addengine-badge { + width: 16px; + height: 16px; + margin: -7px -9px 7px 9px; + list-style-image: url("chrome://browser/skin/badge-add-engine.png"); } -.searchbar-engine-button:hover > .searchbar-dropmarker-image, -.searchbar-engine-button[open="true"] > .searchbar-dropmarker-image { - list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif"); +.addengine-item > .button-box > .button-text, +.addengine-item[type=menu] > .button-box > .box-inherit > .button-text { + -moz-box-flex: 1; + text-align: start; + padding-inline-start: 10px; } +.addengine-item:not([image]) { + list-style-image: url("chrome://browser/skin/search-engine-placeholder.png"); +} -/* ::::: search-go-button ::::: */ +.addengine-item[type=menu] > .button-box > .button-menu-dropmarker { + display: -moz-box; +/* -moz-appearance: menuarrow !important;*/ + list-style-image: none; +} -.search-go-container { - -moz-box-align: center; +.search-panel-tree > .autocomplete-treebody::-moz-tree-cell { + padding-inline-start: 15px; + border-top: none !important; } -.search-go-button { - padding: 1px; - list-style-image: url("chrome://global/skin/icons/search.png"); - -moz-image-region: rect(0, 16px, 16px, 0); +.search-panel-tree > .autocomplete-treebody::-moz-tree-cell-text { + padding-inline-start: 4px; } -.search-go-button:-moz-system-metric(touch-enabled) { - -moz-padding-start: 5px; - -moz-padding-end: 3px; +.search-panel-tree > .autocomplete-treebody::-moz-tree-image { + padding-inline-start: 5px; + width: 14px; + height: 14px; } -.search-go-button:-moz-locale-dir(rtl) { - transform: scaleX(-1); +.search-panel-tree > .autocomplete-treebody::-moz-tree-image(fromhistory) { + list-style-image: url("chrome://browser/skin/search-history-icon.svg#search-history-icon"); } -.search-go-button:hover { +.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-go-button:hover:active { +.search-setting-button { + border-radius: 0; + background-color: #C09070; +/* min-height: 32px;*/ } -.searchbar-engine-menuitem[selected="true"] > .menu-iconic-text { - font-weight: bold; +.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://global/skin/filters.svg#fill); + fill: currentColor; +} + +.search-setting-button-compact:hover { + background-color: #FFCF00; + color: #000000; }