LCARStrek/browser/devtools/ruleview.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 this panel that aren't defined by the themes */
   6
   7 .theme-light {
   8   --rule-highlight-background-color: #402800;
   9 }
  10
  11 .ruleview {
  12   height: 100%;
  13 }
  14
  15 .ruleview-rule-source {
  16   -moz-padding-start: 5px;
  17   text-align: end;
  18   float: right;
  19   -moz-user-select: none;
  20 }
  21
  22 .ruleview-rule-source,
  23 .ruleview-rule-source > label {
  24   cursor: pointer;
  25 }
  26
  27 .ruleview-rule-source[unselectable],
  28 .ruleview-rule-source[unselectable] > label {
  29   cursor: default;
  30 }
  31
  32 .ruleview-rule-source:not([unselectable]):hover {
  33   text-decoration: underline;
  34 }
  35
  36 .ruleview-header {
  37   border-top-width: 1px;
  38   border-bottom-width: 1px;
  39   border-top-style: solid;
  40   border-bottom-style: solid;
  41   padding: 1px 4px;
  42   margin-top: 4px;
  43   -moz-user-select: none;
  44   word-wrap: break-word;
  45 }
  46
  47 .ruleview-rule,
  48 #noResults {
  49   padding: 2px 4px;
  50 }
  51
  52 /* User agent styles are not editable, display them differently */
  53 .ruleview-rule[uneditable=true] {
  54   background: var(--theme-toolbar-background);
  55 }
  56
  57 .ruleview-rule[uneditable=true] :focus {
  58   outline: none;
  59 }
  60
  61 .ruleview-rule[uneditable=true] .theme-link {
  62   color: var(--theme-text-blue);
  63 }
  64
  65 .ruleview-rule[uneditable=true] .ruleview-enableproperty {
  66   visibility: hidden;
  67 }
  68
  69 .ruleview-rule[uneditable=true] .ruleview-colorswatch,
  70 .ruleview-rule[uneditable=true] .ruleview-bezierswatch {
  71   cursor: default;
  72 }
  73
  74 .ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
  75 .ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer >
  76 .ruleview-propertyvalue {
  77   border-bottom-color: transparent;
  78 }
  79
  80 #noResults {
  81   font: message-box;
  82   color: #8050B0;
  83 }
  84
  85 .ruleview-rule + .ruleview-rule {
  86   border-top-width: 1px;
  87   border-top-style: dotted;
  88 }
  89
  90 .ruleview-warning {
  91   background: url("alerticon-warning.png");
  92   -moz-margin-start: 5px;
  93   display: inline-block;
  94   vertical-align: top;
  95   width: 13px;
  96   height: 12px;
  97 }
  98
  99 @media (min-resolution: 1.25dppx) {
 100   .ruleview-warning {
 101     background-image: url("alerticon-warning@2x.png");
 102   }
 103 }
 104
 105 .ruleview-ruleopen {
 106   -moz-padding-end: 5px;
 107 }
 108
 109 .ruleview-ruleclose {
 110   cursor: text;
 111   padding-right: 20px;
 112 }
 113
 114 .ruleview-propertylist {
 115   list-style: none;
 116   padding: 0;
 117   margin: 0;
 118 }
 119
 120 .ruleview-rule:not(:hover) .ruleview-enableproperty {
 121   visibility: hidden;
 122 }
 123
 124 .ruleview-expander {
 125   display: inline-block;
 126 }
 127
 128 .ruleview-newproperty {
 129   /* (enable checkbox width: 12px) + (expander width: 15px) */
 130   -moz-margin-start: 27px;
 131 }
 132
 133 .ruleview-namecontainer,
 134 .ruleview-propertyvaluecontainer,
 135 .ruleview-propertyname,
 136 .ruleview-propertyvalue {
 137   text-decoration: inherit;
 138 }
 139
 140 .ruleview-computedlist {
 141   list-style: none;
 142   padding: 0;
 143 }
 144
 145 .ruleview-computed {
 146   -moz-margin-start: 35px;
 147 }
 148
 149 .ruleview-colorswatch,
 150 .ruleview-bezierswatch {
 151   cursor: pointer;
 152   border-radius: 50%;
 153   width: 1em;
 154   height: 1em;
 155   vertical-align: text-top;
 156   -moz-margin-end: 5px;
 157   display: inline-block;
 158   position: relative;
 159 }
 160
 161 .ruleview-colorswatch::before {
 162   content: '';
 163   background-color: #9C9CFF;
 164   background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090),
 165                     linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090);
 166   background-size: 12px 12px;
 167   background-position: 0 0, 6px 6px;
 168   position: absolute;
 169   border-radius: 50%;
 170   top: 0;
 171   left: 0;
 172   right: 0;
 173   bottom: 0;
 174   z-index: -1;
 175 }
 176
 177 .ruleview-bezierswatch {
 178   background: url("chrome://browser/skin/devtools/cubic-bezier-swatch.png");
 179   background-size: 1em;
 180 }
 181
 182 @media (min-resolution: 1.25dppx) {
 183   .ruleview-bezierswatch {
 184     background: url("chrome://browser/skin/devtools/cubic-bezier-swatch@2x.png");
 185     background-size: 1em;
 186   }
 187 }
 188
 189 .ruleview-overridden {
 190   text-decoration: line-through;
 191 }
 192
 193 .styleinspector-propertyeditor {
 194   border: 1px solid #A09090;
 195   padding: 0;
 196 }
 197
 198 .ruleview-property {
 199   border-left: 3px solid transparent;
 200   clear: right;
 201 }
 202
 203 .ruleview-propertycontainer > * {
 204   vertical-align: middle;
 205 }
 206
 207 .ruleview-property[dirty] {
 208   border-left-color: var(--theme-highlight-green);
 209 }
 210
 211 .ruleview-highlight {
 212   background-color: var(--rule-highlight-background-color);
 213 }
 214
 215 .ruleview-namecontainer > .ruleview-propertyname,
 216 .ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
 217   border-bottom: 1px dashed transparent;
 218 }
 219
 220 .ruleview-namecontainer:hover > .ruleview-propertyname,
 221 .ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue {
 222   border-bottom-color: #008484;
 223 }
 224
 225 .ruleview-selector {
 226   word-wrap: break-word;
 227 }
 228
 229 .ruleview-selector-separator, .ruleview-selector-unmatched {
 230   color: #8050B0;
 231 }
 232
 233 .ruleview-selectorhighlighter {
 234   background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
 235   padding-left: 16px;
 236   margin-left: 5px;
 237   cursor: pointer;
 238 }
 239
 240 .ruleview-selectorhighlighter:hover {
 241   background-position: -32px 0;
 242 }
 243
 244 .ruleview-selectorhighlighter:active,
 245 .ruleview-selectorhighlighter.highlighted {
 246   background-position: -16px 0;
 247 }
 248
 249 #pseudo-class-panel:not([hidden]) {
 250   border-bottom: 1px solid var(--theme-splitter-color);
 251 }
 252
 253 #ruleview-add-rule-button::before {
 254   background-image: url("chrome://browser/skin/devtools/add.svg#add");
 255   background-size: cover;
 256 }
 257 #ruleview-add-rule-button:hover::before {
 258   background-image: url("chrome://browser/skin/devtools/add.svg#add-checked");
 259 }
 260
 261 #pseudo-class-panel-toggle::before {
 262   background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class");
 263   background-size: cover;
 264 }
 265 #pseudo-class-panel-toggle:hover::before,
 266 #pseudo-class-panel-toggle[checked]::before {
 267   background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class-checked");
 268   filter: none !important;
 269 }