devtools/client/themes/changes.css

   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) +
  77                      var(--diff-level-offset) * var(--diff-level));
  78 }
  79
  80 #sidebar-panel-changes .changes__toolbar {
  81   background: var(--theme-sidebar-background);
  82   border-bottom: 1px solid var(--theme-splitter-color);
  83   padding: 2px 5px;
  84   position: sticky;
  85   top: 0;
  86   z-index: 1;
  87 }
  88
  89 /* Remove the top border of the first source to avoid double border from sticky toolbar */
  90 #sidebar-panel-changes .changes__toolbar + .source .href {
  91   border-top: none;
  92 }
  93
  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;
 100   border: none;
 101   border-radius: 3px;
 102   color: var(--theme-body-color);
 103   fill: currentColor;
 104   padding-block: 4px;
 105   padding-inline: 25px 5px;
 106 }
 107
 108 .changes__copy-all-changes-button:dir(rtl) {
 109   background-position-x: right 4px;
 110 }
 111
 112 .changes__copy-all-changes-button:hover,
 113 .changes__copy-all-changes-button:focus {
 114   background-color: var(--theme-button-background);
 115 }
 116
 117 .changes__copy-all-changes-button:active {
 118   background-color: var(--theme-button-active-background);
 119 }
 120
 121 /* Hide the Copy Rule button by default. */
 122 .changes__copy-rule-button {
 123   /**
 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.
 126    *
 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.
 132    */
 133   background-blend-mode: overlay;
 134   background-color: var(--theme-button-background);
 135   background-image:
 136     linear-gradient(var(--theme-sidebar-background), var(--theme-sidebar-background));
 137   border-radius: 8px;
 138   border: none;
 139   color: var(--theme-body-color);
 140   display: none;
 141   padding: 1px 7px;
 142   position: absolute;
 143   right: 5px;
 144   top: 2px;
 145 }
 146
 147 .changes__copy-rule-button:active {
 148   background-color: var(--theme-button-active-background);
 149 }
 150
 151 .changes__rule {
 152   position: relative;
 153 }
 154
 155 .changes__selector {
 156   word-wrap: break-word;
 157 }
 158
 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 {
 163   display: block;
 164 }
 165
 166 .changes__declaration {
 167   overflow-wrap: break-word;
 168   white-space: pre-wrap;
 169 }
 170
 171 .changes__declaration-name {
 172   margin-left: 10px;
 173 }
 174
 175 .diff-add,
 176 .diff-remove {
 177   --diff-level-min-offset: 15px;
 178   position: relative;
 179 }
 180
 181 .diff-add::before,
 182 .diff-remove::before {
 183   position: absolute;
 184   left: 5px;
 185 }
 186
 187 .diff-add {
 188   background-color: var(--diff-add-background-color);
 189 }
 190
 191 .diff-add::before {
 192   content: "+";
 193   color: var(--diff-add-text-color);
 194 }
 195
 196 .diff-remove {
 197   background-color: var(--diff-remove-background-color);
 198 }
 199
 200 .diff-remove::before {
 201   content: "-";
 202   color: var(--diff-remove-text-color);
 203 }
 204
 205 #sidebar-panel-changes .devtools-sidepanel-no-result :not(:first-child) {
 206   font-style: normal;
 207 }
 208
 209 #sidebar-panel-changes.inspector-tabpanel {
 210   min-width: 0;
 211 }