ProjectSearch.css (4908B)
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-container { 6 position: absolute; 7 top: var(--editor-header-height); 8 left: 0; 9 width: calc(100% - 1px); 10 height: calc(100% - var(--editor-header-height)); 11 display: flex; 12 flex-direction: column; 13 z-index: 20; 14 overflow-y: hidden; 15 16 /* Using the same colors as the Netmonitor's --table-selection-background-hover */ 17 --search-result-background-hover: rgba(209, 232, 255, 0.8); 18 } 19 20 .theme-dark .search-container { 21 --search-result-background-hover: rgba(53, 59, 72, 1); 22 } 23 24 .project-text-search { 25 flex-grow: 1; 26 display: flex; 27 flex-direction: column; 28 overflow-y: hidden; 29 height: 100%; 30 } 31 32 .project-text-search .result { 33 display: contents; 34 cursor: default; 35 line-height: 16px; 36 font-size: 11px; 37 font-family: var(--monospace-font-family); 38 } 39 40 .project-text-search .result:hover > * { 41 background-color: var(--search-result-background-hover); 42 } 43 44 .project-text-search .result .line-number { 45 grid-column: 1; 46 padding-block: 1px; 47 padding-inline-start: 4px; 48 padding-inline-end: 6px; 49 text-align: end; 50 color: var(--theme-text-color-alt); 51 } 52 53 .unavailable-source { 54 white-space: pre; 55 56 .tooltip-panel { 57 padding: 1em; 58 } 59 } 60 61 .project-text-search .result .line-value { 62 grid-column: 2; 63 padding-block: 1px; 64 padding-inline-end: 4px; 65 text-overflow: ellipsis; 66 overflow-x: hidden; 67 outline-offset: -2px; 68 } 69 70 .project-text-search .result .query-match { 71 border-bottom: 1px solid var(--theme-search-results-border-color); 72 color: var(--theme-search-results-color); 73 background-color: var(--theme-search-results-background); 74 } 75 76 .project-text-search .tree-indent { 77 display: none; 78 } 79 80 .project-search-results-toolbar { 81 display: grid; 82 grid-template-columns: 1fr auto; 83 background-color: var(--theme-toolbar-alternate-background); 84 border-bottom: 1px solid var(--theme-splitter-color); 85 padding: 2px 8px; 86 align-items: center; 87 gap: 4px; 88 } 89 90 .project-text-search .refresh-btn { 91 background-color: transparent; 92 padding: 2px; 93 display: grid; 94 --size: 16px; 95 --highlight-size: 5px; 96 --remain-size: calc(var(--size) - var(--highlight-size)); 97 width: var(--size); 98 aspect-ratio: 1; 99 box-sizing: content-box; 100 grid-template-rows: var(--highlight-size) var(--remain-size); 101 grid-template-columns: var(--remain-size) var(--highlight-size); 102 103 &.devtools-button:focus-visible { 104 outline: var(--theme-focus-outline); 105 } 106 107 &.highlight::after { 108 content: ""; 109 display: block; 110 grid-row: 1 / 2; 111 grid-column: 2 / 3; 112 height: 5px; 113 width: 5px; 114 background-color: var(--blue-40); 115 border-radius: 100%; 116 outline: 1px solid var(--theme-sidebar-background); 117 z-index: 1; 118 } 119 120 .dbg-img { 121 grid-row: 1 / -1; 122 grid-column: 1 / -1; 123 transition: rotate 0.2s; 124 width: 14px; 125 height: 14px; 126 127 .highlight & { 128 rotate: 0.75turn; 129 } 130 } 131 } 132 133 .project-text-search .no-result-msg { 134 color: var(--theme-text-color-inactive); 135 font-size: 24px; 136 padding: 15px; 137 max-width: 100%; 138 align-self: center; 139 } 140 141 .project-text-search .file-result { 142 grid-column: 1/3; 143 display: flex; 144 align-items: center; 145 width: 100%; 146 min-height: 24px; 147 padding: 2px 4px; 148 font-weight: bold; 149 font-size: 12px; 150 line-height: 16px; 151 cursor: default; 152 } 153 154 .project-text-search .file-result .dbg-img { 155 margin-inline: 2px; 156 } 157 158 .project-text-search .file-result .dbg-img.dbg-img-file { 159 margin-inline-end: 4px; 160 } 161 162 .project-text-search .file-path { 163 flex: 0 1 auto; 164 padding-inline-end: 4px; 165 display: block; 166 overflow: hidden; 167 text-overflow: ellipsis; 168 white-space: nowrap; 169 } 170 171 .project-text-search .file-path:empty { 172 display: none; 173 } 174 175 .project-text-search .search-field { 176 display: flex; 177 align-self: stretch; 178 flex-grow: 1; 179 width: 100%; 180 border-bottom: none; 181 } 182 183 .project-text-search .tree { 184 overflow-x: hidden; 185 overflow-y: auto; 186 height: 100%; 187 display: grid; 188 min-width: 100%; 189 white-space: nowrap; 190 user-select: none; 191 align-content: start; 192 /* Align the second column to the search input's text value */ 193 grid-template-columns: minmax(40px, auto) 1fr; 194 padding-top: 4px; 195 } 196 197 /* Fake padding-bottom using a pseudo-element because Gecko doesn't render the 198 padding-bottom in a scroll container */ 199 .project-text-search .tree::after { 200 content: ""; 201 display: block; 202 height: 4px; 203 } 204 205 .project-text-search .tree .tree-node { 206 display: contents; 207 } 208 209 /* Focus values */ 210 211 .project-text-search .file-result.focused, 212 .project-text-search .result.focused .line-value, 213 .project-text-search .result.focused .line-number { 214 color: var(--theme-selection-color); 215 background-color: var(--theme-selection-background); 216 } 217 218 .project-text-search .file-result.focused .dbg-img { 219 background-color: currentColor; 220 }