LCARStrek/devtools/rules.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 .theme-light,
   7 .theme-dark,
   8 .theme-firebug {
   9   --rule-highlight-background-color: #402000;
  10   --rule-filter-icon: url(images/magnifying-glass.png);
  11 }
  12
  13 /* Rule View Tabpanel */
  14
  15 .theme-firebug .ruleview {
  16 /*  font-family: monospace;
  17   font-size: 11px;*/
  18 }
  19
  20 #sidebar-panel-ruleview {
  21   margin: 0;
  22   display: flex;
  23   flex-direction: column;
  24   width: 100%;
  25   /* Bug 1243598 - Reduce the container height by the tab height to make room
  26      for the tabs above. */
  27   height: calc(100% - 24px);
  28   position: absolute;
  29 }
  30
  31 /* Rule View Toolbar */
  32
  33 #ruleview-toolbar-container {
  34   display: flex;
  35   flex-direction: column;
  36   height: auto;
  37 }
  38
  39 #ruleview-toolbar {
  40   display: flex;
  41   height: 23px;
  42 }
  43
  44 #ruleview-toolbar > .devtools-searchbox:first-child {
  45   padding-inline-start: 0px;
  46 }
  47
  48 #ruleview-command-toolbar {
  49   display: flex;
  50 }
  51
  52 #pseudo-class-panel {
  53   display: flex;
  54   height: 24px;
  55   overflow: hidden;
  56   transition: height 150ms ease;
  57 }
  58
  59 #pseudo-class-panel[hidden] {
  60   height: 0px;
  61 }
  62
  63 #pseudo-class-panel > label {
  64   -moz-user-select: none;
  65   flex-grow: 1;
  66   display: flex;
  67   align-items: center;
  68 }
  69
  70 /* Rule View Container */
  71
  72 #ruleview-container {
  73   -moz-user-select: text;
  74   overflow: auto;
  75   flex: auto;
  76 }
  77
  78 #ruleview-container.non-interactive {
  79   pointer-events: none;
  80   visibility: collapse;
  81   transition: visibility 0.25s;
  82 }
  83
  84 .ruleview-code {
  85   direction: ltr;
  86 }
  87
  88 .ruleview-property:not(:hover) > .ruleview-enableproperty {
  89   pointer-events: none;
  90 }
  91
  92 .ruleview-expandable-container[hidden] {
  93   display: none;
  94 }
  95
  96 .ruleview-expandable-container {
  97   display: block;
  98 }
  99
 100 .ruleview-namecontainer {
 101   cursor: text;
 102 }
 103
 104 .ruleview-propertyvaluecontainer {
 105   cursor: text;
 106   padding-right: 5px;
 107 }
 108
 109 .ruleview-propertyvaluecontainer a {
 110   cursor: pointer;
 111 }
 112
 113 .ruleview-computedlist,
 114 .ruleview-overridden-rule-filter[hidden],
 115 .ruleview-warning[hidden] {
 116   display: none;
 117 }
 118
 119 .ruleview-computedlist[user-open],
 120 .ruleview-computedlist[filter-open] {
 121   display: block;
 122 }
 123
 124 .ruleview-rule-source {
 125   text-align: end;
 126   float: right;
 127   -moz-user-select: none;
 128   margin-bottom: 2px;
 129 }
 130
 131 .ruleview-rule-source > label {
 132   cursor: pointer;
 133   margin: 0;
 134 }
 135
 136 .ruleview-rule-source[unselectable],
 137 .ruleview-rule-source[unselectable] > label {
 138   cursor: default;
 139 }
 140
 141 .theme-firebug .ruleview-rule-source label {
 142   font-family: var(--proportional-font-family);
 143   font-weight: bold;
 144   color: #0000FF;
 145 }
 146
 147 .ruleview-rule-source:not([unselectable]):hover {
 148   text-decoration: underline;
 149 }
 150
 151 .ruleview-header {
 152   border-top-width: 1px;
 153   border-bottom-width: 1px;
 154   border-top-style: solid;
 155   border-bottom-style: solid;
 156   padding: 1px 4px;
 157   -moz-user-select: none;
 158   word-wrap: break-word;
 159   vertical-align: middle;
 160   min-height: 1.5em;
 161   line-height: 1.5em;
 162   margin-top: -1px;
 163 }
 164
 165 .theme-firebug .theme-gutter.ruleview-header {
 166   font-family: var(--proportional-font-family);
 167   font-weight: bold;
 168   color: inherit;
 169   border: none;
 170   margin: 4px 0;
 171   padding: 3px 4px 2px 4px;
 172   line-height: inherit;
 173   min-height: 0;
 174   background: var(--theme-header-background);
 175 }
 176
 177 :root[platform="win"] .ruleview-header,
 178 :root[platform="linux"] .ruleview-header {
 179   margin-top: 4px;
 180 }
 181
 182 .ruleview-header.ruleview-expandable-header {
 183   cursor: pointer;
 184 }
 185
 186 .ruleview-rule-pseudo-element {
 187   padding-left:20px;
 188   border-left: solid 10px;
 189 }
 190
 191 .ruleview-rule,
 192 #noResults {
 193   padding: 2px 4px;
 194 }
 195
 196 /**
 197  * Display rules that don't match the current selected element and uneditable
 198  * user agent styles differently
 199  */
 200 .ruleview-rule[unmatched=true],
 201 .ruleview-rule[uneditable=true] {
 202   background: var(--theme-tab-toolbar-background);
 203 }
 204
 205 .ruleview-rule[uneditable=true] :focus {
 206   outline: none;
 207 }
 208
 209 .ruleview-rule[uneditable=true] .theme-link {
 210   color: var(--theme-highlight-bluegrey);
 211 }
 212
 213 .ruleview-rule[uneditable=true] .ruleview-enableproperty {
 214   visibility: hidden;
 215 }
 216
 217 .ruleview-rule[uneditable=true] .ruleview-swatch {
 218   cursor: default;
 219 }
 220
 221 .ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
 222 .ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer >
 223 .ruleview-propertyvalue {
 224   border-bottom-color: transparent;
 225 }
 226
 227 .theme-firebug .ruleview-namecontainer > .ruleview-propertyname,
 228 .theme-firebug .ruleview-propertycontainer > .ruleview-propertyvalue {
 229   border-bottom: none;
 230 }
 231
 232 .theme-firebug .ruleview-namecontainer > .ruleview-propertyname {
 233   color: var(--rule-property-name);
 234 }
 235
 236 .theme-firebug .ruleview-propertycontainer > .ruleview-propertyvalue {
 237   color: var(--rule-property-value);
 238 }
 239
 240 .theme-firebug .ruleview-overridden .ruleview-propertyname,
 241 .theme-firebug .ruleview-overridden .ruleview-propertyvalue {
 242   text-decoration: line-through;
 243 }
 244
 245 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-namecontainer,
 246 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-namecontainer *,
 247 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertycontainer,
 248 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertycontainer * {
 249   color: #A09090;
 250 }
 251
 252 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-computedlist * {
 253   color: #A09090;
 254 }
 255
 256 #noResults {
 257 /*  font: message-box;*/
 258   color: #A09090;
 259 }
 260
 261 .ruleview-rule + .ruleview-rule {
 262   border-top-width: 1px;
 263   border-top-style: dotted;
 264 }
 265
 266 .theme-firebug .ruleview-rule + .ruleview-rule {
 267   border-top: none;
 268 }
 269
 270 .ruleview-warning {
 271   background-image: url(images/alerticon-warning.png);
 272   background-size: 13px 12px;
 273   margin-inline-start: 5px;
 274   display: inline-block;
 275   width: 13px;
 276   height: 12px;
 277 }
 278
 279 @media (min-resolution: 1.1dppx) {
 280   .ruleview-warning {
 281     background-image: url(images/alerticon-warning@2x.png);
 282   }
 283 }
 284
 285 .ruleview-overridden-rule-filter {
 286   background-image: var(--rule-filter-icon);
 287   background-size: 11px 11px;
 288   margin-inline-start: 5px;
 289   display: inline-block;
 290   width: 11px;
 291   height: 11px;
 292 }
 293
 294 .ruleview-ruleopen {
 295   padding-inline-end: 5px;
 296 }
 297
 298 .ruleview-ruleclose {
 299   cursor: text;
 300   padding-right: 20px;
 301 }
 302
 303 .ruleview-propertylist {
 304   list-style: none;
 305   padding: 0;
 306   margin: 0;
 307 }
 308
 309 .ruleview-rule:not(:hover) .ruleview-enableproperty {
 310   visibility: hidden;
 311 }
 312
 313 .ruleview-expander {
 314   vertical-align: middle;
 315   display: inline-block;
 316 }
 317
 318 .ruleview-newproperty {
 319   /* (enable checkbox width: 12px) + (expander width: 15px) */
 320   margin-inline-start: 27px;
 321 }
 322
 323 .ruleview-namecontainer,
 324 .ruleview-propertyvaluecontainer,
 325 .ruleview-propertyname,
 326 .ruleview-propertyvalue {
 327   text-decoration: inherit;
 328 }
 329
 330 .ruleview-computedlist {
 331   list-style: none;
 332   padding: 0;
 333 }
 334
 335 .ruleview-computed {
 336   margin-inline-start: 35px;
 337 }
 338
 339 .ruleview-swatch {
 340   cursor: pointer;
 341   border-radius: 50%;
 342   width: 0.9em;
 343   height: 0.9em;
 344   vertical-align: middle;
 345   /* align the swatch with its value */
 346   margin-top: -1px;
 347   margin-inline-end: 5px;
 348   display: inline-block;
 349   position: relative;
 350 }
 351
 352 .ruleview-colorswatch::before {
 353   content: '';
 354   background-color: #9C9CFF;
 355   background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090),
 356                     linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090);
 357   background-size: 12px 12px;
 358   background-position: 0 0, 6px 6px;
 359   position: absolute;
 360   border-radius: 50%;
 361   top: 0;
 362   left: 0;
 363   right: 0;
 364   bottom: 0;
 365   z-index: -1;
 366 }
 367
 368 .ruleview-bezierswatch {
 369   background: url("chrome://devtools/skin/images/cubic-bezier-swatch.png");
 370   background-size: 1em;
 371 }
 372
 373 .ruleview-filterswatch {
 374   background: url("chrome://devtools/skin/images/filter-swatch.svg");
 375   background-size: 1em;
 376 }
 377
 378 .ruleview-angleswatch {
 379   background: url("chrome://devtools/skin/images/angle-swatch.svg");
 380   background-size: 1em;
 381 }
 382
 383 @media (min-resolution: 1.1dppx) {
 384   .ruleview-bezierswatch {
 385     background: url("chrome://devtools/skin/images/cubic-bezier-swatch@2x.png");
 386     background-size: 1em;
 387   }
 388 }
 389
 390 .ruleview-overridden {
 391   text-decoration: line-through;
 392 }
 393
 394 .theme-light .ruleview-overridden {
 395   text-decoration-color: var(--theme-content-color3);
 396 }
 397
 398 .styleinspector-propertyeditor {
 399   border: 1px solid #CCC;
 400   padding: 0;
 401   margin: -1px -3px -1px -1px;
 402 }
 403
 404 .theme-firebug .styleinspector-propertyeditor {
 405   border: 1px solid var(--theme-splitter-color);
 406   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
 407 }
 408
 409 .ruleview-property {
 410   border-left: 3px solid transparent;
 411   clear: right;
 412 }
 413
 414 .ruleview-propertycontainer  > * {
 415   vertical-align: middle;
 416 }
 417
 418 .ruleview-property[dirty] {
 419   border-left-color: var(--theme-highlight-green);
 420 }
 421
 422 .ruleview-highlight {
 423   background-color: var(--rule-highlight-background-color);
 424 }
 425
 426 .ruleview-namecontainer > .ruleview-propertyname,
 427 .ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
 428   border-bottom: 1px dashed transparent;
 429 }
 430
 431 .ruleview-namecontainer:hover > .ruleview-propertyname,
 432 .ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue {
 433   border-bottom-color: hsl(0,0%,50%);
 434 }
 435
 436 .ruleview-selectorcontainer {
 437   word-wrap: break-word;
 438   cursor: text;
 439 }
 440
 441 .ruleview-selector-separator, .ruleview-selector-unmatched {
 442   color: #888;
 443 }
 444
 445 .ruleview-selector-matched > .ruleview-selector-attribute {
 446   /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
 447 }
 448
 449 .ruleview-selector-matched > .ruleview-selector-pseudo-class {
 450   /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
 451 }
 452
 453 .ruleview-selector-matched > .ruleview-selector-pseudo-class-lock {
 454   font-weight: bold;
 455   color: var(--theme-highlight-orange);
 456 }
 457
 458 .theme-firebug .ruleview-selector > .ruleview-selector-matched,
 459 .theme-firebug .ruleview-selector > .ruleview-selector-separator,
 460 .theme-firebug .ruleview-selector > .ruleview-selector-unmatched {
 461   color: inherit;
 462 }
 463
 464 .ruleview-selectorhighlighter {
 465   background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
 466   padding-left: 16px;
 467   margin-left: 5px;
 468   cursor: pointer;
 469 }
 470
 471 .ruleview-selectorhighlighter:hover {
 472   filter: url(images/filters.svg#checked-icon-state);
 473 }
 474
 475 .ruleview-selectorhighlighter:active,
 476 .ruleview-selectorhighlighter.highlighted {
 477   filter: url(images/filters.svg#checked-icon-state) brightness(0.9);
 478 }
 479
 480 #ruleview-add-rule-button::before {
 481   background-image: url("chrome://devtools/skin/images/add.svg");
 482   background-size: cover;
 483 }
 484
 485 #pseudo-class-panel-toggle::before {
 486   background-image: url("chrome://devtools/skin/images/pseudo-class.svg");
 487   background-size: cover;
 488 }
 489
 490 .ruleview-overridden-rule-filter {
 491   opacity: 0.8;
 492 }
 493 .ruleview-overridden-rule-filter:hover {
 494   opacity: 1;
 495 }
 496
 497 .theme-firebug .ruleview-overridden {
 498   text-decoration: none;
 499 }
 500
 501 /* Firebug theme disable/enable CSS rule. Firebug theme uses its own
 502   icons to indicate when CSS rules can be disabled or enabled.
 503
 504 .theme-firebug .ruleview-rule .theme-checkbox {
 505   background-repeat: no-repeat;
 506   background-size: 12px 12px;
 507   background-image: url(chrome://devtools/skin/images/firebug/disable.svg);
 508   background-position: 0 0;
 509 }
 510
 511 .theme-firebug .ruleview-rule .theme-checkbox:not([checked]){
 512   filter: grayscale(1);
 513 }
 514
 515 .theme-firebug .ruleview-rule .theme-checkbox[checked] {
 516   background-position: 0 0;
 517 }
 518
 519 .theme-firebug .ruleview-property:not(:hover) .ruleview-enableproperty {
 520   visibility: hidden;
 521 }
 522  */