SearchInput.css (4777B)
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 .search-outline { 6 border: 1px solid var(--theme-toolbar-background); 7 border-bottom: 1px solid var(--theme-splitter-color); 8 transition: border-color 200ms ease-in-out; 9 display: flex; 10 flex-direction: column; 11 } 12 13 .search-field { 14 position: relative; 15 display: flex; 16 align-items: center; 17 flex-shrink: 0; 18 min-height: 24px; 19 width: 100%; 20 } 21 22 .search-field .dbg-img.dbg-img-search { 23 --icon-mask-size: 12px; 24 --icon-inset-inline-start: 6px; 25 position: absolute; 26 z-index: 1; 27 top: calc(50% - 8px); 28 mask-size: var(--icon-mask-size); 29 background-color: var(--theme-icon-dimmed-color); 30 pointer-events: none; 31 } 32 33 .search-field.big .dbg-img.dbg-img-search { 34 --icon-mask-size: 16px; 35 --icon-inset-inline-start: 12px; 36 } 37 38 [dir="ltr"] .search-field .dbg-img.dbg-img-search { 39 left: var(--icon-inset-inline-start); 40 } 41 42 [dir="rtl"] .search-field .dbg-img.dbg-img-search { 43 right: var(--icon-inset-inline-start); 44 } 45 46 .search-field .dbg-img.dbg-img-loader { 47 width: 24px; 48 height: 24px; 49 margin-inline-end: 4px; 50 } 51 52 .search-field input { 53 align-self: stretch; 54 flex-grow: 1; 55 height: 24px; 56 width: 40px; 57 border: none; 58 padding: 4px; 59 padding-inline-start: 28px; 60 line-height: 16px; 61 font-family: inherit; 62 font-size: inherit; 63 color: var(--theme-body-color); 64 background-color: transparent; 65 outline-offset: -1px; 66 67 &:focus-visible { 68 /* Don't show the box-shadow focus indicator, only keep the outline, otherwise the 69 shadow overlap the first item in the result list */ 70 box-shadow: none; 71 } 72 } 73 74 .exclude-patterns-field { 75 position: relative; 76 display: flex; 77 align-items: flex-start; 78 flex-direction: column; 79 flex-shrink: 0; 80 min-height: 24px; 81 width: 100%; 82 border-top: 1px solid var(--theme-splitter-color); 83 margin-top: 1px; 84 outline-offset: -1px; 85 } 86 87 .exclude-patterns-field label { 88 padding-inline-start: 8px; 89 padding-top: 5px; 90 padding-bottom: 3px; 91 align-self: stretch; 92 background-color: var(--theme-toolbar-alternate-background); 93 font-size: 12px; 94 } 95 96 .exclude-patterns-field input { 97 align-self: stretch; 98 height: 24px; 99 border: none; 100 padding-top: 14px; 101 padding-bottom: 14px; 102 padding-inline-start: 10px; 103 line-height: 16px; 104 font-family: inherit; 105 font-size: inherit; 106 color: var(--theme-body-color); 107 background-color: transparent; 108 border-top: 1px solid var(--theme-splitter-color); 109 min-height: 24px; 110 outline-offset: -1px; 111 } 112 113 .exclude-patterns-field input::placeholder { 114 color: var(--theme-text-color-alt); 115 opacity: 1; 116 } 117 118 .search-field.big input { 119 height: 40px; 120 padding-top: 10px; 121 padding-bottom: 10px; 122 padding-inline-start: 40px; 123 font-size: 14px; 124 line-height: 20px; 125 } 126 127 .search-field input::placeholder { 128 color: var(--theme-text-color-alt); 129 opacity: 1; 130 } 131 132 .search-field-summary { 133 align-self: center; 134 padding: 2px 4px; 135 white-space: nowrap; 136 text-align: center; 137 user-select: none; 138 color: var(--theme-text-color-alt); 139 /* Avoid layout jumps when we increment the result count quickly. With tabular 140 numbers, layout will only jump between 9 and 10, 99 and 100, etc. */ 141 font-variant-numeric: tabular-nums; 142 } 143 144 .search-field.big .search-field-summary { 145 margin-inline-end: 4px; 146 } 147 148 .search-field .search-nav-buttons { 149 display: flex; 150 user-select: none; 151 } 152 153 .search-field .search-nav-buttons .nav-btn { 154 display: flex; 155 justify-content: center; 156 align-items: center; 157 height: 100%; 158 padding: 4px; 159 background: transparent; 160 outline-offset: -2px; 161 } 162 163 .search-field .search-nav-buttons .nav-btn:hover { 164 background-color: var(--theme-toolbar-background-hover); 165 } 166 167 .search-field .close-btn { 168 margin-inline-end: 4px; 169 } 170 171 .search-field.big .close-btn { 172 margin-inline-end: 8px; 173 } 174 175 .search-buttons-bar .pipe-divider { 176 flex: none; 177 align-self: stretch; 178 width: 1px; 179 vertical-align: middle; 180 margin: 4px; 181 background-color: var(--theme-splitter-color); 182 } 183 184 .search-buttons-bar * { 185 user-select: none; 186 } 187 188 .search-buttons-bar { 189 display: flex; 190 flex-shrink: 0; 191 justify-content: flex-end; 192 align-items: center; 193 padding: 0; 194 } 195 196 .search-buttons-bar .search-type-toggles { 197 display: flex; 198 align-items: center; 199 max-width: 68%; 200 } 201 202 .search-buttons-bar .search-type-name { 203 margin: 0 4px; 204 border: none; 205 background: transparent; 206 color: var(--theme-comment); 207 } 208 209 .search-buttons-bar .search-type-toggles .search-type-btn.active { 210 color: var(--theme-selection-background); 211 } 212 213 .theme-dark .search-buttons-bar .search-type-toggles .search-type-btn.active { 214 color: white; 215 } 216 217 .search-buttons-bar .close-btn { 218 margin-inline-end: 3px; 219 }