HTTPCustomRequestPanel.css (11282B)
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 .network-monitor .tabpanel-summary-container:is(.http-custom-section, .http-custom-method-and-url, .http-custom-input) { 6 padding-inline-start: 0; 7 margin: 0; 8 } 9 10 .network-monitor .tabpanel-summary-container.http-custom-method-and-url { 11 display: grid; 12 grid-template-columns: auto 1fr; 13 width: 100%; 14 } 15 16 .network-monitor .http-custom-method-and-url .http-custom-method-value { 17 grid-column: 1 / 1; 18 grid-row: 1 / 1; 19 align-self: start; 20 margin-inline-start: 10px; 21 padding-top: 4px; 22 font-size: 11px; 23 line-height: 13px; 24 } 25 26 .auto-growing-textarea { 27 display: grid; 28 width: 100%; 29 } 30 31 .auto-growing-textarea:focus-within::after { 32 content: attr(data-replicated-value) " "; 33 white-space: pre-wrap; 34 visibility: hidden; 35 word-wrap: break-word; 36 } 37 38 .auto-growing-textarea > textarea { 39 resize: none; 40 overflow: hidden; 41 /* Force the content in a single line */ 42 text-overflow: ellipsis; 43 white-space: nowrap; 44 } 45 46 /* When editing a textarea, restore the multiline display */ 47 .auto-growing-textarea > textarea:focus { 48 text-overflow: unset; 49 white-space: unset; 50 } 51 52 .auto-growing-textarea > textarea, 53 .auto-growing-textarea:focus-within::after { 54 grid-area: 1 / 1 / 2 / 2; 55 border: 0; 56 font-weight: normal; 57 min-width: 9ch; 58 padding: 4px; 59 padding-inline-start: 7px; 60 /* Adding this to have maximo 5 lines */ 61 max-height: 70px; 62 overflow-y: auto; 63 } 64 65 .network-monitor .http-custom-method-and-url .http-custom-method-value, 66 .tabpanel-summary-container.http-custom-section .tabpanel-summary-input { 67 border: 0; 68 } 69 70 .tabpanel-summary-container .http-custom-section .tabpanel-summary-input-value { 71 font-weight: normal; 72 min-width: 9ch; 73 padding: 4px; 74 padding-inline-start: 7px; 75 } 76 77 .network-monitor .http-custom-method-and-url input ::placeholder { 78 color: var(--grey-50); 79 font-size: 11px; 80 line-height: 13px; 81 margin-inline-end: 8px; 82 } 83 84 .network-monitor .tabpanel-summary-container .http-custom-request-label { 85 padding: 6px 13px; 86 font-size: 12px; 87 line-height: 14px; 88 } 89 90 .network-monitor .http-custom-request-panel textarea { 91 color: var(--grey-50); 92 font-weight: normal; 93 font-size: 11px; 94 line-height: 13px; 95 direction: ltr; 96 } 97 98 .network-monitor .http-custom-request-panel { 99 display: flex; 100 flex-direction: column; 101 height: 100%; 102 } 103 104 .network-monitor .http-custom-request-panel .http-custom-request-panel-content { 105 flex: 1 1 auto; 106 height: auto; 107 overflow: auto; 108 } 109 110 .network-monitor .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) { 111 position: relative; 112 display: flex; 113 flex-wrap: nowrap; 114 align-items: flex-start; 115 width: 100%; 116 overflow: hidden; 117 padding: 0 13px; 118 padding-inline-end: 0; 119 } 120 121 .network-monitor .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .tabpanel-summary-input-name { 122 width: 25%; 123 align-self: stretch; 124 min-width: min-content; 125 } 126 127 .network-monitor .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .tabpanel-summary-input-value { 128 width: 75%; 129 align-self: stretch; 130 } 131 132 .map-add-new-inputs { 133 padding-bottom: 2px; 134 } 135 136 #http-custom-postdata-value.tabpanel-summary-input { 137 padding-inline-start: 14px; 138 } 139 140 .http-custom-delete-button { 141 opacity: 0; 142 flex: none; 143 width: 20px; 144 height: 20px; 145 margin: 0; 146 padding: 2px; 147 border: none; 148 outline: none; 149 background-color: transparent; 150 position: absolute; 151 right: 0; 152 } 153 154 .tabpanel-summary-container.http-custom-input:hover .http-custom-delete-button { 155 opacity: 1; 156 } 157 158 .tabpanel-summary-container.http-custom-input .http-custom-delete-button::before { 159 content: ""; 160 display: block; 161 width: 16px; 162 height: 16px; 163 border-radius: 2px; 164 background: url("chrome://devtools/skin/images/close.svg") no-repeat center; 165 background-size: 12px; 166 -moz-context-properties: fill; 167 fill: var(--theme-icon-color); 168 } 169 170 .tabpanel-summary-container.http-custom-input .http-custom-delete-button:hover::before { 171 fill: var(--theme-selection-color); 172 background-color: var(--theme-selection-background); 173 } 174 175 .network-monitor .http-custom-request-button-container { 176 display: flex; 177 justify-content: end; 178 flex-wrap: wrap-reverse; 179 gap: 8px; 180 padding: 10px 16px; 181 border-block-start: 1px solid var(--theme-splitter-color); 182 } 183 184 .network-monitor .http-custom-request-panel .http-custom-request-label { 185 font-weight: 400; 186 white-space: nowrap; 187 } 188 189 .network-monitor .http-custom-request-button-container button { 190 height: 24px; 191 padding-inline: 8px; 192 width: auto; 193 } 194 195 .network-monitor .http-custom-request-button-container button:focus { 196 box-shadow: 197 0 0 0 1px #0a84ff inset, 198 0 0 0 1px #0a84ff, 199 0 0 0 4px rgba(10, 132, 255, 0.3); 200 } 201 202 .network-monitor .http-custom-request-button-container #http-custom-request-send-button { 203 background-color: var(--blue-60); 204 color: white; 205 } 206 207 .network-monitor .http-custom-request-button-container #http-custom-request-send-button:active { 208 background-color: var(--blue-80); 209 } 210 211 .network-monitor .http-custom-request-button-container #http-custom-request-send-button:hover { 212 background-color: var(--blue-70); 213 } 214 215 .network-monitor .http-custom-header { 216 border-style: solid; 217 border-width: 0; 218 flex: none; 219 height: calc(var(--theme-toolbar-height) + 1px); 220 padding: 4px 16px; 221 } 222 223 /* Dark theme */ 224 :root.theme-dark .network-details-bar .http-custom-request-panel { 225 background-color: var(--grey-85); 226 } 227 228 :root.theme-dark .network-monitor .tabpanel-summary-container:is(.http-custom-method-and-url, .http-custom-section), 229 :root.theme-dark .network-monitor .tabpanel-summary-container .http-custom-request-label { 230 border-bottom: 1px solid var(--grey-60); 231 } 232 233 :root.theme-dark .network-monitor .http-custom-method-and-url :is(.http-custom-method-value, .http-custom-url-value), 234 :root.theme-dark .network-monitor .tabpanel-summary-container .tabpanel-summary-input, 235 :root.theme-dark .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .http-custom-input-name, 236 :root.theme-dark .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .http-custom-input-value { 237 background-color: var(--grey-85); 238 color: white; 239 } 240 241 :root.theme-dark .network-monitor .http-custom-method-and-url .http-custom-url-value, 242 :root.theme-dark .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) #http-custom-input-value { 243 border-inline-start: 1px solid var(--grey-60); 244 } 245 246 :root.theme-dark .network-monitor .http-custom-method-and-url .http-custom-url-value:focus { 247 outline: 2px solid var(--blue-50); 248 width: calc(100% - 8px); 249 } 250 251 :root.theme-dark .network-monitor .tabpanel-summary-container .tabpanel-summary-input:focus { 252 outline: 2px solid var(--blue-50); 253 margin-inline-start: 2px; 254 width: calc(100% - 5px); 255 } 256 257 :root.theme-dark .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .http-custom-input-name:focus { 258 outline: 2px solid var(--blue-50); 259 margin-inline-end: 1px; 260 } 261 262 :root.theme-dark .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .http-custom-input-value:focus { 263 outline: 2px solid var(--blue-50); 264 width: calc(100% - 20px); 265 } 266 267 :root.theme-dark .http-custom-input-and-map-form .map-add-new-inputs .tabpanel-summary-input-value, 268 :root.theme-dark #http-custom-query .http-custom-input-and-map-form .tabpanel-summary-input-value:focus { 269 margin-inline-end: 1px; 270 } 271 272 :root.theme-dark .network-monitor #http-custom-request-clear-button { 273 background-color: var(--toolbarbutton-background); 274 border: 1px solid var(--theme-splitter-color); 275 } 276 277 :root.theme-dark .network-monitor #http-custom-request-clear-button:hover:active { 278 background-color: var(--theme-selection-background-hover); 279 } 280 281 :root.theme-dark .network-monitor #http-custom-request-clear-button:focus { 282 background-color: var(--theme-selection-focus-background); 283 } 284 285 :root.theme-dark .network-monitor .http-custom-request-label.http-custom-header { 286 background-color: var(--grey-80); 287 border-bottom: 1px solid var(--theme-splitter-color); 288 } 289 290 :root.theme-dark .network-details-bar .http-custom-request-panel input, 291 :root.theme-dark .network-details-bar .http-custom-request-panel textarea { 292 background-color: var(--grey-70); 293 border: 1px solid var(--grey-85); 294 color: white; 295 } 296 297 :root.theme-dark .network-monitor .http-custom-request-label { 298 color: var(--grey-40); 299 } 300 301 /* Light theme */ 302 :root.theme-light .network-monitor .tabpanel-summary-container:is(.http-custom-method-and-url, .http-custom-section), 303 :root.theme-light .network-monitor .tabpanel-summary-container .http-custom-request-label { 304 border-bottom: 1px solid var(--grey-30); 305 } 306 307 :root.theme-light .network-monitor .http-custom-method-and-url .http-custom-method-value { 308 background-color: white; 309 } 310 311 :root.theme-light .network-monitor .http-custom-method-and-url .http-custom-url-value, 312 :root.theme-light .tabpanel-summary-container .tabpanel-summary-input-value { 313 border-inline-start: 1px solid var(--grey-30); 314 } 315 316 :root.theme-light .network-monitor .http-custom-method-and-url .http-custom-url-value:focus { 317 outline: 2px solid var(--blue-50); 318 width: calc(100% - 8px); 319 } 320 321 :root.theme-light .network-monitor .tabpanel-summary-container .tabpanel-summary-input:focus { 322 outline: 2px solid var(--blue-50); 323 margin-inline-start: 2px; 324 width: calc(100% - 5px); 325 } 326 327 :root.theme-light .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .http-custom-input-name:focus { 328 outline: 2px solid var(--blue-50); 329 margin-inline-end: 1px; 330 } 331 332 :root.theme-light .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .http-custom-input-value:focus { 333 outline: 2px solid var(--blue-50); 334 width: calc(100% - 20px); 335 } 336 337 :root.theme-light .http-custom-input-and-map-form .map-add-new-inputs .tabpanel-summary-input-value:focus, 338 :root.theme-light #http-custom-query .http-custom-input-and-map-form .tabpanel-summary-input-value:focus { 339 margin-inline-end: 3px; 340 } 341 342 :root.theme-light .network-monitor .tabpanel-summary-container .http-custom-request-label { 343 background-color: var(--grey-10); 344 color: var(--grey-90); 345 } 346 347 :root.theme-light .network-details-bar .http-custom-request-label.http-custom-header { 348 background-color: var(--grey-10); 349 border-bottom: 1px solid var(--grey-25); 350 } 351 352 :root.theme-light .network-monitor #http-custom-request-clear-button { 353 background-color: var(--grey-25); 354 border: var(--theme-splitter-color); 355 } 356 357 :root.theme-light .network-monitor #http-custom-request-clear-button:hover:active { 358 background-color: var(--theme-selection-background-hover); 359 } 360 361 :root.theme-light .network-monitor #http-custom-request-clear-button:focus { 362 outline: 2px solid var(--blue-50); 363 outline-offset: -2px; 364 box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.3); 365 border-radius: 2px; 366 } 367 368 :root.theme-light .network-details-bar .http-custom-request-panel input, 369 :root.theme-light .network-details-bar .http-custom-request-panel textarea { 370 background-color: white; 371 border: 1px solid var(--grey-25); 372 color: var(--grey-90); 373 } 374 375 :root.theme-light .network-monitor .http-custom-request-label { 376 color: var(--grey-60); 377 }