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.request-blocking-panel { 6 position: relative; 7 display: flex; 8 flex-direction: column; 9 height: 100%; 10 overflow: hidden; 11} 12 13/* Override the devtools-checkbox style to improve hit area and alignment */ 14.request-blocking-panel .devtools-checkbox-label { 15 display: inline-flex; 16 align-items: center; 17 gap: 4px; 18 margin: 0; 19 padding: 2px 4px; 20 /* checkbox can be 13px, 14px or 16px depending on the platform */ 21 line-height: 16px; 22 user-select: none; 23 cursor: default; 24} 25 26.request-blocking-panel .devtools-checkbox-label > input { 27 flex: none; 28 margin: 0; 29} 30 31.request-blocking-label { 32 flex: 1 1 auto; 33 display: block; 34 white-space: nowrap; 35 overflow: hidden; 36 text-overflow: ellipsis; 37} 38 39.request-blocking-editable-label { 40 cursor: text 41} 42 43/* The "Enable Blocking Requests" bar */ 44.request-blocking-enable-bar { 45 flex: none; 46 background: var(--theme-tab-toolbar-background); 47 height: calc(var(--theme-toolbar-height) + 1px); 48 padding-block: 2px; 49 padding-inline: 16px 4px; 50 align-items: center; 51 overflow: hidden; 52 white-space: nowrap; 53 border-bottom: 1px solid var(--theme-splitter-color); 54} 55 56.request-blocking-enable-form { 57 flex-grow: 1; 58} 59 60.request-blocking-contents { 61 flex: 0 1 auto; 62 overflow-y: auto; 63 border-bottom: 1px solid var(--theme-splitter-color); 64} 65 66/* Blocked request list */ 67.request-blocking-list { 68 margin: 0; 69 padding: 4px 0; 70} 71 72.request-blocking-list.disabled { 73 background-color: var(--theme-toolbar-hover); 74 opacity: 0.6; 75} 76 77.request-blocking-list li { 78 display: flex; 79 align-items: center; 80 min-height: 20px; 81 padding-inline: 16px 8px; 82} 83 84.request-blocking-list li.request-blocking-edit-item { 85 padding: 0; 86 /* Text input is 24px but we want it to occupy the same space as our 20px rows */ 87 margin-block: -2px; 88} 89 90.request-blocking-list li.request-blocking-edit-item form { 91 width: 100%; 92} 93 94.request-blocking-list .devtools-checkbox-label { 95 flex: 1 1 auto; 96 /* Can't seem to make the flex-shrink reduce the element's width when the 97 content is a long URL, even if the URL container has text-overflow: ellipsis. 98 DevTools shows that "the item was clamped to its minimum size" and the shrink 99 part is thus ignored. So we're reserving 20px for the delete button. */ 100 max-width: calc(100% - 20px); 101} 102 103.request-blocking-remove-button { 104 /* Visually hide but stay focusable in keyboard navigation */ 105 opacity: 0; 106 flex: none; 107 width: 20px; 108 height: 20px; 109 margin: 0; 110 padding: 2px; 111 border: none; 112 outline: none; 113 background-color: transparent; 114} 115 116.request-blocking-remove-button::-moz-focus-inner { 117 border: none; 118} 119 120.request-blocking-list li:hover .request-blocking-remove-button { 121 opacity: 1; 122} 123 124.request-blocking-remove-button::before { 125 content: ""; 126 display: block; 127 width: 16px; 128 height: 16px; 129 border-radius: 2px; 130 background: url("chrome://devtools/skin/images/close.svg") no-repeat center; 131 background-size: 12px; 132 -moz-context-properties: fill; 133 fill: var(--theme-icon-color); 134} 135 136.request-blocking-remove-button:hover::before { 137 fill: var(--theme-selection-color); 138 background-color: var(--theme-selection-background); 139} 140 141/* Footer content, progressively pushed by pattern rows in the main list and 142 * remaining "fixed" at the bottom when there is enough content to scroll, 143 * thanks to the magic of flexbox */ 144.request-blocking-footer { 145 position: relative; 146 flex: none; 147} 148 149/* Draw a border 1px below the form, so that it disappears out of view when 150 * there are many pattern rows in the main container and the footer is pushed 151 * to the bottom */ 152.request-blocking-footer::after { 153 content: ""; 154 position: absolute; 155 left: 0; 156 right: 0; 157 top: 100%; 158 border-bottom: 1px solid var(--theme-splitter-color); 159} 160 161/* Text input for the addition and edition forms */ 162.request-blocking-add-form input, 163.request-blocking-edit-item input { 164 width: calc(100% - 1px); 165 height: 24px; 166 padding-block: 4px; 167 padding-inline: 20px 8px; 168 background: none; 169} 170 171.request-blocking-list-empty-notice { 172 margin: 0; 173 flex: 1; 174 overflow-x: hidden; 175} 176 177.request-blocking-notice-element { 178 padding-top: 12px; 179 padding-inline: 12px; 180} 181 182.request-blocking-notice-element::before { 183 content:"• "; 184} 185