searchbar.css (4244B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 .searchbar-engine-image { 6 width: 16px; 7 height: 16px; 8 list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg"); 9 -moz-context-properties: fill; 10 fill: currentColor; 11 } 12 13 .search-one-offs:not([hidden]) { 14 display: block; 15 width: 100%; 16 } 17 18 .search-panel-one-offs-header { 19 display: block; 20 } 21 22 .search-panel-header { 23 font-weight: normal; 24 margin: 0; 25 } 26 27 .search-panel-header > label { 28 margin-top: 2px; 29 margin-bottom: 1px; 30 opacity: 0.6; 31 } 32 33 /* Make the contrast stronger in dark mode */ 34 :root[lwt-toolbar-field-focus="dark"] .search-panel-header > label { 35 opacity: 1; 36 } 37 38 /** 39 * The borders of the various elements are specified as follows. 40 * 41 * The current engine always has a bottom border. 42 * The search results never have a border. 43 * 44 * When the search results are not collapsed: 45 * - The elements underneath the search results all have a top border. 46 * 47 * When the search results are collapsed: 48 * - The elements underneath the search results all have a bottom border. 49 */ 50 51 .search-panel-current-engine { 52 align-items: center; 53 border-top: none !important; 54 padding-inline: 8px; 55 } 56 57 .search-panel-one-offs:not([hidden]), 58 .search-panel-one-offs-container { 59 display: flex; 60 flex-direction: row; 61 flex: 1; 62 } 63 64 .search-panel-one-offs { 65 margin: 0 !important; 66 /* Bug 1108841: prevent font-size from affecting the layout */ 67 line-height: 0; 68 flex-wrap: wrap; 69 } 70 71 .searchbar-engine-one-off-item { 72 appearance: none; 73 display: inline-flex; 74 background-color: transparent; 75 border: none; 76 min-width: 32px; 77 height: 32px; 78 margin-inline-end: 8px; 79 margin-block: 0; 80 padding: 0; 81 color: inherit; 82 border-radius: var(--toolbarbutton-border-radius); 83 } 84 85 @media (-moz-platform: windows) { 86 .searchbar-engine-one-off-item:focus-visible { 87 outline: none; 88 } 89 } 90 91 /* We don't handle `:active` because it doesn't work on the search or settings 92 buttons due to event.preventDefault() in SearchOneOffs._on_mousedown(). */ 93 .searchbar-engine-one-off-item:not([selected]):hover { 94 background-color: var(--urlbarView-hover-background); 95 color: inherit; 96 } 97 98 .searchbar-engine-one-off-item[selected] { 99 background-color: var(--urlbarView-highlight-background); 100 color: var(--urlbarView-highlight-color); 101 } 102 103 .searchbar-engine-one-off-item > .button-box > .button-text { 104 display: none; 105 } 106 107 .searchbar-engine-one-off-item > .button-box > .button-icon { 108 margin-inline: 0; 109 width: 16px; 110 height: 16px; 111 } 112 113 .search-panel-tree { 114 background: transparent; 115 color: inherit; 116 } 117 118 .search-panel-tree > .autocomplete-richlistitem { 119 padding: 1px 3px; 120 } 121 122 .search-panel-tree > .autocomplete-richlistitem:hover { 123 background-color: var(--urlbarView-hover-background); 124 } 125 126 .search-panel-tree > .autocomplete-richlistitem > .ac-type-icon { 127 display: flex; 128 width: 14px; 129 height: 14px; 130 margin-inline-end: 7px; 131 } 132 133 .search-panel-tree > .autocomplete-richlistitem[originaltype="fromhistory"] > .ac-type-icon { 134 list-style-image: url("chrome://browser/skin/history.svg"); 135 -moz-context-properties: fill; 136 fill: currentColor; 137 fill-opacity: 0.6; 138 } 139 140 .search-panel-tree > .autocomplete-richlistitem[originaltype="fromhistory"][selected] > .ac-type-icon { 141 fill-opacity: 1; 142 } 143 144 .searchbar-separator { 145 appearance: none; 146 margin: var(--panel-separator-margin); 147 padding: 0; 148 border: 0; 149 border-top: 1px solid var(--urlbarView-separator-color); 150 color: inherit; 151 } 152 153 .search-panel-tree[collapsed] + .searchbar-separator { 154 display: none; 155 } 156 157 .search-setting-button { 158 max-height: 32px; 159 align-self: end; 160 margin-inline: 0; 161 } 162 163 .search-setting-button > .button-box > .button-icon { 164 list-style-image: url("chrome://global/skin/icons/settings.svg"); 165 -moz-context-properties: fill, fill-opacity; 166 fill: currentColor; 167 fill-opacity: var(--urlbar-icon-fill-opacity); 168 } 169 170 @media (-moz-platform: windows) { 171 #PopupSearchAutoComplete { 172 --panel-border-radius: var(--arrowpanel-border-radius); 173 } 174 } 175 176 @media (-moz-platform: macos) { 177 #PopupSearchAutoComplete { 178 border-radius: var(--border-radius-small); 179 } 180 }