CustomRequestPanel.css (4657B)
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 .custom-method-and-url .custom-method-value-label { 6 grid-column: 1 / 1; 7 grid-row: 1 / 1; 8 } 9 10 .network-monitor .custom-method-and-url .custom-url-value { 11 grid-column: 2 / 2; 12 grid-row: 2 / 2; 13 margin-inline-start: 12px; 14 } 15 16 .network-monitor .custom-method-and-url .custom-method-value { 17 grid-column: 1 / 1; 18 grid-row: 2 / 2; 19 } 20 21 .network-monitor .custom-method-and-url .custom-url-value-label { 22 grid-column: 2 / 2; 23 grid-row: 1 / 1; 24 margin-inline-start: 12px; 25 } 26 27 .network-monitor .tabpanel-summary-container.custom-method-and-url { 28 display: grid; 29 grid-template-columns: auto 1fr; 30 } 31 32 .network-monitor .custom-method-and-url input { 33 font-weight: 400; 34 margin-top: 4px; 35 min-width: 9ch; 36 padding: 2px 3px; 37 } 38 39 .network-monitor .custom-request-panel textarea { 40 font-weight: 400; 41 margin-top: 4px; 42 padding: 8px; 43 direction: ltr; 44 } 45 46 .network-monitor .custom-request-panel { 47 display: flex; 48 flex-direction: column; 49 height: 100%; 50 } 51 52 .network-monitor .custom-request-panel .custom-request-panel-content { 53 flex: 1 1 auto; 54 height: auto; 55 overflow: auto; 56 } 57 58 .network-monitor .custom-request-panel-content > div:not(.custom-request) { 59 margin-bottom: 12px; 60 padding-inline: 16px; 61 } 62 63 .network-monitor .custom-request { 64 display: block; 65 padding: 0; 66 } 67 68 .network-monitor .custom-request .custom-request-button-container { 69 display: flex; 70 flex-wrap: wrap-reverse; 71 gap: 8px; 72 margin-block: 16px 12px; 73 margin-inline: 16px; 74 } 75 76 .network-monitor .custom-request-panel .custom-request-label { 77 font-weight: 400; 78 white-space: nowrap; 79 } 80 81 .network-monitor .custom-request button { 82 height: 24px; 83 margin-bottom: 4px; 84 padding-inline: 8px; 85 width: auto; 86 } 87 88 .network-monitor .custom-request button:focus { 89 box-shadow: 90 0 0 0 1px #0a84ff inset, 91 0 0 0 1px #0a84ff, 92 0 0 0 4px rgba(10, 132, 255, 0.3); 93 } 94 95 .network-monitor .custom-request #custom-request-send-button { 96 background-color: var(--blue-60); 97 color: white; 98 } 99 100 .network-monitor .custom-request #custom-request-send-button:active { 101 background-color: var(--blue-80); 102 } 103 104 .network-monitor .custom-request #custom-request-send-button:hover { 105 background-color: var(--blue-70); 106 } 107 108 .network-monitor .custom-request #custom-request-close-button { 109 margin-inline-end: 4px; 110 } 111 112 .network-monitor .custom-header { 113 border-style: solid; 114 border-width: 0; 115 flex: none; 116 height: calc(var(--theme-toolbar-height) + 1px); 117 padding: 4px 16px; 118 } 119 120 :root.theme-dark .network-details-bar .custom-request-panel { 121 background-color: var(--grey-85); 122 } 123 124 :root.theme-dark .network-monitor #custom-request-close-button { 125 background-color: var(--toolbarbutton-background); 126 border: 1px solid var(--theme-splitter-color); 127 } 128 129 :root.theme-dark .network-monitor #custom-request-close-button:hover:active { 130 background-color: var(--theme-selection-background-hover); 131 } 132 133 :root.theme-dark .network-monitor #custom-request-close-button:focus { 134 background-color: var(--theme-selection-focus-background); 135 } 136 137 :root.theme-dark .network-monitor .custom-request-label.custom-header { 138 background-color: var(--grey-80); 139 border-bottom: 1px solid var(--theme-splitter-color); 140 } 141 142 :root.theme-dark .network-details-bar .custom-request-panel input, 143 :root.theme-dark .network-details-bar .custom-request-panel textarea { 144 background-color: var(--grey-70); 145 border: 1px solid var(--grey-85); 146 color: white; 147 } 148 149 :root.theme-dark .network-monitor .custom-request-label { 150 color: var(--grey-40); 151 } 152 153 :root.theme-light .network-details-bar .custom-request-label.custom-header { 154 background-color: var(--grey-10); 155 border-bottom: 1px solid var(--grey-25); 156 } 157 158 :root.theme-light .network-monitor #custom-request-close-button { 159 background-color: var(--grey-20); 160 border: var(--theme-splitter-color); 161 } 162 163 :root.theme-light .network-monitor #custom-request-close-button:hover:active { 164 background-color: var(--theme-selection-background-hover); 165 } 166 167 :root.theme-light .network-monitor #custom-request-close-button:focus { 168 outline: 2px solid var(--blue-50); 169 outline-offset: -2px; 170 box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.3); 171 border-radius: 2px; 172 } 173 174 :root.theme-light .network-details-bar .custom-request-panel input, 175 :root.theme-light .network-details-bar .custom-request-panel textarea { 176 background-color: white; 177 border: 1px solid var(--grey-25); 178 color: var(--grey-90); 179 } 180 181 :root.theme-light .network-monitor .custom-request-label { 182 color: var(--grey-60); 183 }