browser/themes/shared/searchbar.inc.css

   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 {
  14   -moz-box-orient: vertical;
  15   width: 100%;
  16 }
  17
  18 .search-panel-header {
  19   font-weight: normal;
  20   margin: 0;
  21 }
  22
  23 .search-panel-header > label {
  24   margin-top: 2px;
  25   margin-bottom: 1px;
  26   opacity: .6;
  27 }
  28
  29 /**
  30  * The borders of the various elements are specified as follows.
  31  *
  32  * The current engine always has a bottom border.
  33  * The search results never have a border.
  34  *
  35  * When the search results are not collapsed:
  36  * - The elements underneath the search results all have a top border.
  37  *
  38  * When the search results are collapsed:
  39  * - The elements underneath the search results all have a bottom border, except
  40  *   the lowest one: search-setting-button.
  41  */
  42
  43 .search-panel-current-engine {
  44   -moz-box-align: center;
  45   border-top: none !important;
  46   padding-inline: 8px;
  47 }
  48
  49 @media not (-moz-proton) {
  50 .search-panel-header {
  51   padding-block: 3px;
  52 }
  53
  54 .search-panel-current-engine {
  55   border-bottom: 1px solid var(--panel-separator-color);
  56 }
  57
  58 .search-panel-tree:not([collapsed=true]) ~ .search-one-offs {
  59   border-top: 1px solid var(--panel-separator-color);
  60 }
  61 } /*** END !proton ***/
  62
  63 .search-panel-one-offs:not([hidden]),
  64 .search-panel-one-offs-container {
  65   display: flex;
  66   flex-direction: row;
  67   flex-grow: 1;
  68 }
  69
  70 .search-panel-one-offs {
  71   margin: 0 !important;
  72   /* Bug 1108841: prevent font-size from affecting the layout */
  73   line-height: 0;
  74   flex-wrap: wrap;
  75   /* Show at least 3 buttons */
  76   min-width: calc(48px * 3);
  77 }
  78
  79 .searchbar-engine-one-off-item {
  80   appearance: none;
  81   display: inline-block;
  82   min-width: 32px;
  83   height: 32px;
  84   margin: var(--arrowpanel-menuitem-margin);
  85   padding: 0;
  86   color: inherit;
  87   border-radius: var(--toolbarbutton-border-radius);
  88 }
  89
  90 @media not (-moz-proton) {
  91 .searchbar-engine-one-off-item {
  92   border-radius: 0;
  93   min-width: 48px;
  94 }
  95 } /*** END !proton ***/
  96
  97 .searchbar-engine-one-off-item:not([selected]):hover,
  98 .addengine-item:hover {
  99   background-color: var(--arrowpanel-dimmed);
 100   color: inherit;
 101 }
 102
 103 .searchbar-engine-one-off-item[selected] {
 104   background-color: var(--autocomplete-popup-highlight-background);
 105   color: var(--autocomplete-popup-highlight-color);
 106 }
 107
 108 .searchbar-engine-one-off-item > .button-box {
 109   padding: 0;
 110 }
 111
 112 .searchbar-engine-one-off-item > .button-box > .button-text {
 113   display: none;
 114 }
 115
 116 .searchbar-engine-one-off-item > .button-box > .button-icon {
 117   margin-inline-start: 0;
 118   margin-inline-end: 0;
 119   width: 16px;
 120   height: 16px;
 121 }
 122
 123 .addengine-item {
 124   appearance: none;
 125   color: inherit;
 126   height: 32px;
 127   margin: var(--arrowpanel-menuitem-margin);
 128   border-radius: var(--toolbarbutton-border-radius);
 129   padding: 0 10px;
 130 }
 131
 132 @media not (-moz-proton) {
 133 .addengine-item {
 134   border-radius: 0;
 135 }
 136
 137 .addengine-item:first-of-type {
 138   border-top: 1px solid var(--panel-separator-color);
 139 }
 140 } /*** END !proton ***/
 141
 142 .addengine-item[selected] {
 143   background-color: var(--autocomplete-popup-highlight-background);
 144   color: var(--autocomplete-popup-highlight-color);
 145 }
 146
 147 .addengine-item[type=menu][selected] {
 148   color: inherit;
 149   background-color: var(--arrowpanel-dimmed-further);
 150 }
 151
 152 .addengine-item > .toolbarbutton-badge-stack > .toolbarbutton-icon {
 153   width: 16px;
 154   height: 16px;
 155 }
 156
 157 .addengine-item > .toolbarbutton-badge-stack > .toolbarbutton-badge {
 158   display: -moz-box;
 159   background: url(chrome://browser/skin/search-indicator-badge-add.svg) no-repeat center;
 160   box-shadow: none;
 161   /* "!important" is necessary to override the rule in toolbarbutton.css */
 162   margin: -4px 0 0 !important;
 163   margin-inline-end: -4px !important;
 164   width: 11px;
 165   height: 11px;
 166   min-width: 11px;
 167   min-height: 11px;
 168 }
 169
 170 .addengine-item > .toolbarbutton-text {
 171   text-align: start;
 172   padding-inline-start: 10px;
 173 }
 174
 175 .addengine-item:not([image]) {
 176   list-style-image: url("chrome://browser/skin/search-engine-placeholder.png");
 177 }
 178
 179 @media (min-resolution: 1.1dppx) {
 180   .addengine-item:not([image]) {
 181     list-style-image: url("chrome://browser/skin/search-engine-placeholder@2x.png");
 182   }
 183 }
 184
 185 .addengine-item[type=menu] > .toolbarbutton-menu-dropmarker {
 186   display: -moz-box;
 187   appearance: auto !important;
 188   -moz-default-appearance: menuarrow !important;
 189   list-style-image: none;
 190 }
 191
 192 .search-panel-tree {
 193   background: transparent;
 194   color: inherit;
 195 }
 196
 197 .search-panel-tree > .autocomplete-richlistitem {
 198   padding: 1px 3px;
 199 }
 200
 201 .search-panel-tree > .autocomplete-richlistitem > .ac-type-icon {
 202   display: -moz-box;
 203   width: 14px;
 204   height: 14px;
 205   margin-inline-end: 7px;
 206 }
 207
 208 .search-panel-tree > .autocomplete-richlistitem[originaltype="fromhistory"] > .ac-type-icon {
 209   list-style-image: url("chrome://browser/skin/history.svg");
 210   -moz-context-properties: fill;
 211   fill: currentColor;
 212   fill-opacity: 0.6;
 213 }
 214
 215 .search-panel-tree > .autocomplete-richlistitem[originaltype="fromhistory"][selected] > .ac-type-icon {
 216   fill-opacity: 1;
 217 }
 218
 219 .search-setting-button {
 220   appearance: none;
 221   margin: var(--arrowpanel-menuitem-margin);
 222   min-height: 32px;
 223   color: inherit !important; /* Overriding toolbarbutton.css on Linux. */
 224   border-radius: var(--toolbarbutton-border-radius);
 225 }
 226
 227 .searchbar-separator {
 228   appearance: none;
 229   margin: var(--panel-separator-margin);
 230   padding: 0;
 231   border: 0;
 232   border-top: 1px solid var(--panel-separator-color);
 233   color: inherit;
 234 }
 235
 236 .search-panel-tree[collapsed=true] + .searchbar-separator {
 237   display: none;
 238 }
 239
 240 @media not (-moz-proton) {
 241 .search-setting-button {
 242   border-top: 1px solid var(--panel-separator-color);
 243   border-radius: 0;
 244 }
 245
 246 .searchbar-separator {
 247   display: none;
 248 }
 249 } /*** END !proton ***/
 250
 251 .search-setting-button-compact {
 252   max-height: 32px;
 253   align-self: end;
 254 }
 255
 256 .search-setting-button:not([selected]):hover {
 257   background-color: var(--arrowpanel-dimmed);
 258   color: inherit;
 259 }
 260
 261 .search-setting-button[selected] {
 262   background-color: var(--autocomplete-popup-highlight-background);
 263   color: var(--autocomplete-popup-highlight-color) !important;
 264 }
 265 .search-setting-button[selected]:hover {
 266   color: var(--autocomplete-popup-highlight-color) !important;
 267 }
 268
 269 .search-setting-button-compact > .button-box > .button-icon {
 270   list-style-image: url("chrome://global/skin/icons/settings.svg");
 271   -moz-context-properties: fill, fill-opacity;
 272   fill: currentColor;
 273   fill-opacity: .6;
 274 }