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   text-align: end;
  17   float: right;
  18   -moz-user-select: none;
  19   margin-bottom: 2px;
  20 }
  21
  22 .ruleview-rule-source > label {
  23   cursor: pointer;
  24   margin: 0;
  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 /**
  53  * Display rules that don't match the current selected element and uneditable
  54  * user agent styles differently
  55  */
  56 .ruleview-rule[unmatched=true],
  57 .ruleview-rule[uneditable=true] {
  58   background: var(--theme-toolbar-background);
  59 }
  60
  61 .ruleview-rule[uneditable=true] :focus {
  62   outline: none;
  63 }
  64
  65 .ruleview-rule[uneditable=true] .theme-link {
  66   color: var(--theme-text-blue);
  67 }
  68
  69 .ruleview-rule[uneditable=true] .ruleview-enableproperty {
  70   visibility: hidden;
  71 }
  72
  73 .ruleview-rule[uneditable=true] .ruleview-colorswatch,
  74 .ruleview-rule[uneditable=true] .ruleview-bezierswatch {
  75   cursor: default;
  76 }
  77
  78 .ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
  79 .ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer >
  80 .ruleview-propertyvalue {
  81   border-bottom-color: transparent;
  82 }
  83
  84 #noResults {
  85   font: message-box;
  86   color: #8050B0;
  87 }
  88
  89 .ruleview-rule + .ruleview-rule {
  90   border-top-width: 1px;
  91   border-top-style: dotted;
  92 }
  93
  94 .ruleview-warning {
  95   background: url("alerticon-warning.png");
  96   -moz-margin-start: 5px;
  97   display: inline-block;
  98   vertical-align: top;
  99   width: 13px;
 100   height: 12px;
 101 }
 102
 103 @media (min-resolution: 1.1dppx) {
 104   .ruleview-warning {
 105     background-image: url("alerticon-warning@2x.png");
 106   }
 107 }
 108
 109 .ruleview-ruleopen {
 110   -moz-padding-end: 5px;
 111 }
 112
 113 .ruleview-ruleclose {
 114   cursor: text;
 115   padding-right: 20px;
 116 }
 117
 118 .ruleview-propertylist {
 119   list-style: none;
 120   padding: 0;
 121   margin: 0;
 122 }
 123
 124 .ruleview-rule:not(:hover) .ruleview-enableproperty {
 125   visibility: hidden;
 126 }
 127
 128 .ruleview-expander {
 129   display: inline-block;
 130 }
 131
 132 .ruleview-newproperty {
 133   /* (enable checkbox width: 12px) + (expander width: 15px) */
 134   -moz-margin-start: 27px;
 135 }
 136
 137 .ruleview-namecontainer,
 138 .ruleview-propertyvaluecontainer,
 139 .ruleview-propertyname,
 140 .ruleview-propertyvalue {
 141   text-decoration: inherit;
 142 }
 143
 144 .ruleview-computedlist {
 145   list-style: none;
 146   padding: 0;
 147 }
 148
 149 .ruleview-computed {
 150   -moz-margin-start: 35px;
 151 }
 152
 153 .ruleview-swatch {
 154   cursor: pointer;
 155   border-radius: 50%;
 156   width: 0.9em;
 157   height: 0.9em;
 158   vertical-align: middle;
 159   -moz-margin-end: 5px;
 160   display: inline-block;
 161   position: relative;
 162 }
 163
 164 .ruleview-colorswatch::before {
 165   content: '';
 166   background-color: #9C9CFF;
 167   background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090),
 168                     linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090);
 169   background-size: 12px 12px;
 170   background-position: 0 0, 6px 6px;
 171   position: absolute;
 172   border-radius: 50%;
 173   top: 0;
 174   left: 0;
 175   right: 0;
 176   bottom: 0;
 177   z-index: -1;
 178 }
 179
 180 .ruleview-bezierswatch {
 181   background: url("chrome://browser/skin/devtools/cubic-bezier-swatch.png");
 182   background-size: 1em;
 183 }
 184
 185 @media (min-resolution: 1.1dppx) {
 186   .ruleview-bezierswatch {
 187     background: url("chrome://browser/skin/devtools/cubic-bezier-swatch@2x.png");
 188     background-size: 1em;
 189   }
 190 }
 191
 192 .ruleview-overridden {
 193   text-decoration: line-through;
 194 }
 195
 196 .styleinspector-propertyeditor {
 197   border: 1px solid #A09090;
 198   padding: 0;
 199 }
 200
 201 .ruleview-property {
 202   border-left: 3px solid transparent;
 203   clear: right;
 204 }
 205
 206 .ruleview-propertycontainer > * {
 207   vertical-align: middle;
 208 }
 209
 210 .ruleview-property[dirty] {
 211   border-left-color: var(--theme-highlight-green);
 212 }
 213
 214 .ruleview-highlight {
 215   background-color: var(--rule-highlight-background-color);
 216 }
 217
 218 .ruleview-namecontainer > .ruleview-propertyname,
 219 .ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
 220   border-bottom: 1px dashed transparent;
 221 }
 222
 223 .ruleview-namecontainer:hover > .ruleview-propertyname,
 224 .ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue {
 225   border-bottom-color: #008484;
 226 }
 227
 228 .ruleview-selectorcontainer {
 229   word-wrap: break-word;
 230   cursor: text;
 231 }
 232
 233 .ruleview-selector-separator, .ruleview-selector-unmatched {
 234   color: #8050B0;
 235 }
 236
 237 .ruleview-selector-matched > .ruleview-selector-attribute {
 238   /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
 239 }
 240
 241 .ruleview-selector-matched > .ruleview-selector-pseudo-class {
 242   /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
 243 }
 244
 245 .ruleview-selector-matched > .ruleview-selector-pseudo-class-lock {
 246   font-weight: bold;
 247   color: var(--theme-highlight-orange);
 248 }
 249
 250 .ruleview-selectorhighlighter {
 251   background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
 252   padding-left: 16px;
 253   margin-left: 5px;
 254   cursor: pointer;
 255 }
 256
 257 .ruleview-selectorhighlighter:hover {
 258   background-position: -32px 0;
 259 }
 260
 261 .ruleview-selectorhighlighter:active,
 262 .ruleview-selectorhighlighter.highlighted {
 263   background-position: -16px 0;
 264 }
 265
 266 #pseudo-class-panel:not([hidden]) {
 267   border-bottom: 1px solid var(--theme-splitter-color);
 268 }
 269
 270 #ruleview-add-rule-button::before {
 271   background-image: url("chrome://browser/skin/devtools/add.svg#add");
 272   background-size: cover;
 273 }
 274 #ruleview-add-rule-button:hover::before {
 275   background-image: url("chrome://browser/skin/devtools/add.svg#add-checked");
 276 }
 277
 278 #pseudo-class-panel-toggle::before {
 279   background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class");
 280   background-size: cover;
 281 }
 282 #pseudo-class-panel-toggle:hover::before,
 283 #pseudo-class-panel-toggle[checked]::before {
 284   background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class-checked");
 285   filter: none !important;
 286 }
 287
 288 /**
 289  * These buttons are using opacity instead of background color to indicate
 290  * the state
 291  */
 292 /*
 293 #ruleview-add-rule-button,
 294 #pseudo-class-panel-toggle {
 295   opacity: 0.8;
 296 }
 297
 298 #ruleview-add-rule-button:not([disabled]):hover,
 299 #pseudo-class-panel-toggle:hover,
 300 #pseudo-class-panel-toggle[checked] {
 301   opacity: 1;
 302 }
 303
 304 #ruleview-add-rule-button,
 305 #pseudo-class-panel-toggle,
 306 #pseudo-class-panel-toggle:hover,
 307 #pseudo-class-panel-toggle[checked]::before {
 308   background-color: transparent !important;
 309 }
 310 */