changes.css (5614B)
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 /* CSS Variables specific to the Changes panel that aren't defined by the themes */ 6 :root { 7 --diff-add-background-color: #f1feec; 8 --diff-add-text-color: #54983f; 9 --diff-remove-background-color: #fbf2f5; 10 --diff-remove-text-color: #bf7173; 11 --diff-source-background: var(--theme-toolbar-background); 12 --diff-level: 0; 13 --diff-level-offset: 10px; 14 /* 15 Minimum padding so content on the first level (zero) isn't touching the edge. Added 16 and removed lines will re-declare this to add extra padding to clear the +/- icons. 17 */ 18 --diff-level-min-offset: 5px; 19 } 20 21 :root.theme-dark { 22 --diff-add-background-color: rgba(18, 188, 0, 0.15); 23 --diff-add-text-color: #12bc00; 24 --diff-remove-background-color: rgba(255, 0, 57, 0.15); 25 --diff-remove-text-color: #ff0039; 26 --diff-source-background: #222225; 27 } 28 29 :root[dir="rtl"] { 30 /* Increase minimum offset on right-to-left layout to clear the floating scrollbar. */ 31 --diff-level-min-offset: 15px; 32 } 33 34 :root[dir="rtl"] #sidebar-panel-changes .source { 35 /* Enforce left-to-right code rendering on right-to-left layout. */ 36 direction: ltr; 37 } 38 39 #sidebar-panel-changes { 40 margin: 0; 41 padding: 0; 42 width: 100%; 43 height: 100%; 44 overflow: auto; 45 background: var(--theme-sidebar-background); 46 } 47 48 #sidebar-panel-changes .href { 49 display: flex; 50 align-items: center; 51 color: var(--theme-toolbar-color); 52 background: var(--diff-source-background); 53 border-top: 1px solid var(--theme-splitter-color); 54 border-bottom: 1px solid var(--theme-splitter-color); 55 padding: 4px; 56 padding-inline-start: var(--diff-level-min-offset); 57 font-size: 12px; 58 } 59 60 #sidebar-panel-changes .source:first-child .href { 61 border-top: unset; 62 } 63 64 #sidebar-panel-changes .href span { 65 /* Allows trimming of flex item with overflow ellipsis within the flex container */ 66 min-width: 0; 67 white-space: nowrap; 68 text-overflow: ellipsis; 69 overflow: hidden; 70 } 71 72 #sidebar-panel-changes .level { 73 padding-top: 3px; 74 padding-right: 5px; 75 padding-bottom: 3px; 76 padding-left: calc(var(--diff-level-min-offset) + var(--diff-level-offset) * var(--diff-level)); 77 } 78 79 #sidebar-panel-changes .changes__toolbar { 80 background: var(--theme-sidebar-background); 81 border-bottom: 1px solid var(--theme-splitter-color); 82 padding: 2px 5px; 83 position: sticky; 84 top: 0; 85 z-index: 1; 86 } 87 88 /* Remove the top border of the first source to avoid double border from sticky toolbar */ 89 #sidebar-panel-changes .changes__toolbar + .source .href { 90 border-top: none; 91 } 92 93 .changes__copy-all-changes-button { 94 -moz-context-properties: fill; 95 /* Use the Firefox copy icon (16px) instead of the smaller DevTools one (12px) */ 96 background: url(chrome://global/skin/icons/edit-copy.svg) no-repeat; 97 background-position: 4px 3px; 98 background-size: 16px; 99 border: none; 100 border-radius: 3px; 101 color: var(--theme-body-color); 102 fill: currentColor; 103 padding-block: 4px; 104 padding-inline: 25px 5px; 105 } 106 107 .changes__copy-all-changes-button:dir(rtl) { 108 background-position-x: right 4px; 109 } 110 111 .changes__copy-all-changes-button:hover, 112 .changes__copy-all-changes-button:focus { 113 background-color: var(--theme-button-background); 114 } 115 116 .changes__copy-all-changes-button:active { 117 background-color: var(--theme-button-active-background); 118 } 119 120 /* Hide the Copy Rule button by default. */ 121 .changes__copy-rule-button { 122 /** 123 * The rgba() format of the background colors makes the button see-through and it looks 124 * bad when stacked on top of long selectors. 125 * 126 * To solve this and not change the color format which is inherited from the Photon 127 * color guide in `client/themes/variables.css`, we use a blending trick to overlay the 128 * rgba() color value onto a solid color used for the panel background (achieved with 129 * a linear gradient with no transition). This keeps the rgba() color, but prevents the 130 * see-through effect. 131 */ 132 background-blend-mode: overlay; 133 background-color: var(--theme-button-background); 134 background-image: linear-gradient(var(--theme-sidebar-background), var(--theme-sidebar-background)); 135 border-radius: 8px; 136 border: none; 137 color: var(--theme-body-color); 138 display: none; 139 padding: 1px 7px; 140 position: absolute; 141 right: 5px; 142 top: 2px; 143 } 144 145 .changes__copy-rule-button:active { 146 background-color: var(--theme-button-active-background); 147 } 148 149 .changes__rule { 150 position: relative; 151 } 152 153 .changes__selector { 154 word-wrap: break-word; 155 } 156 157 /* Show the Copy Rule button when hovering over the rule's selector elements */ 158 .changes__selector:hover + .changes__copy-rule-button, 159 .changes__selector:hover + .changes__selector + .changes__copy-rule-button, 160 .changes__copy-rule-button:hover { 161 display: block; 162 } 163 164 .changes__declaration { 165 overflow-wrap: break-word; 166 white-space: pre-wrap; 167 } 168 169 .changes__declaration-name { 170 margin-left: 10px; 171 } 172 173 .diff-add, 174 .diff-remove { 175 --diff-level-min-offset: 15px; 176 position: relative; 177 } 178 179 .diff-add::before, 180 .diff-remove::before { 181 position: absolute; 182 left: 5px; 183 } 184 185 .diff-add { 186 background-color: var(--diff-add-background-color); 187 } 188 189 .diff-add::before { 190 content: "+"; 191 color: var(--diff-add-text-color); 192 } 193 194 .diff-remove { 195 background-color: var(--diff-remove-background-color); 196 } 197 198 .diff-remove::before { 199 content: "-"; 200 color: var(--diff-remove-text-color); 201 } 202 203 #sidebar-panel-changes .devtools-sidepanel-no-result :not(:first-child) { 204 font-style: normal; 205 } 206 207 #sidebar-panel-changes.inspector-tabpanel { 208 min-width: 0; 209 }