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