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/. */
5 /* CSS Variables specific to the Changes panel that aren't defined by the themes */
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
);
13 --diff-level-offset: 10px;
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.
18 --diff-level-min-offset: 5px;
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;
30 /* Increase minimum offset on right-to-left layout to clear the floating scrollbar. */
31 --diff-level-min-offset: 15px;
34 :root
[dir
="rtl"] #sidebar-panel-changes
.source
{
35 /* Enforce left-to-right code rendering on right-to-left layout. */
39 #sidebar-panel-changes {
45 background: var
(--theme-sidebar-background
);
48 #sidebar-panel-changes .href
{
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
);
56 padding-inline-start: var
(--diff-level-min-offset
);
60 #sidebar-panel-changes .source:first-child
.href
{
64 #sidebar-panel-changes .href span
{
65 /* Allows trimming of flex item with overflow ellipsis within the flex container */
68 text-overflow: ellipsis
;
72 #sidebar-panel-changes .level
{
76 padding-left: calc
(var
(--diff-level-min-offset
) +
77 var
(--diff-level-offset
) * var
(--diff-level
));
80 #sidebar-panel-changes .changes__toolbar
{
81 background: var
(--theme-sidebar-background
);
82 border-bottom: 1px solid var
(--theme-splitter-color
);
89 /* Remove the top border of the first source to avoid double border from sticky toolbar */
90 #sidebar-panel-changes .changes__toolbar
+ .source
.href
{
94 .changes__copy-all-changes-button {
95 -moz-context-properties: fill
;
96 /* Use the Firefox copy icon (16px) instead of the smaller DevTools one (12px) */
97 background: url
(chrome://global
/skin
/icons
/edit-copy
.svg
) no-repeat
;
98 background-position: 4px 3px;
99 background-size: 16px;
102 color: var
(--theme-body-color
);
105 padding-inline: 25px 5px;
108 .changes__copy-all-changes-button:dir(rtl) {
109 background-position-x: right
4px;
112 .changes__copy-all-changes-button:hover
,
113 .changes__copy-all-changes-button:focus {
114 background-color: var
(--theme-button-background
);
117 .changes__copy-all-changes-button:active {
118 background-color: var
(--theme-button-active-background
);
121 /* Hide the Copy Rule button by default. */
122 .changes__copy-rule-button {
124 * The rgba() format of the background colors makes the button see-through and it looks
125 * bad when stacked on top of long selectors.
127 * To solve this and not change the color format which is inherited from the Photon
128 * color guide in `client/themes/variables.css`, we use a blending trick to overlay the
129 * rgba() color value onto a solid color used for the panel background (achieved with
130 * a linear gradient with no transition). This keeps the rgba() color, but prevents the
131 * see-through effect.
133 background-blend-mode: overlay
;
134 background-color: var
(--theme-button-background
);
136 linear-gradient
(var
(--theme-sidebar-background
), var
(--theme-sidebar-background
));
139 color: var
(--theme-body-color
);
147 .changes__copy-rule-button:active {
148 background-color: var
(--theme-button-active-background
);
156 word-wrap: break-word
;
159 /* Show the Copy Rule button when hovering over the rule's selector elements */
160 .changes__selector:hover
+ .changes__copy-rule-button
,
161 .changes__selector:hover
+ .changes__selector
+ .changes__copy-rule-button
,
162 .changes__copy-rule-button:hover {
166 .changes__declaration {
167 overflow-wrap: break-word
;
168 white-space: pre-wrap
;
171 .changes__declaration-name {
177 --diff-level-min-offset: 15px;
182 .diff-remove::before {
188 background-color: var
(--diff-add-background-color
);
193 color: var
(--diff-add-text-color
);
197 background-color: var
(--diff-remove-background-color
);
200 .diff-remove::before {
202 color: var
(--diff-remove-text-color
);
205 #sidebar-panel-changes .devtools-sidepanel-no-result :not
(:first-child
) {
209 #sidebar-panel-changes.inspector-tabpanel
{