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   padding: 2px 4px;
 203 }
 204
 205 /**
 206  * Display rules that don't match the current selected element and uneditable
 207  * user agent styles differently
 208  */
 209 .ruleview-rule[unmatched=true],
 210 .ruleview-rule[uneditable=true] {
 211   background: var(--theme-tab-toolbar-background);
 212 }
 213
 214 .ruleview-rule[unmatched=true] {
 215   opacity: 0.5;
 216 }
 217
 218 .ruleview-rule[uneditable=true] :focus {
 219   outline: none;
 220 }
 221
 222 .ruleview-rule[uneditable=true] .theme-link {
 223   color: var(--theme-highlight-bluegrey);
 224 }
 225
 226 .ruleview-rule[uneditable=true] .ruleview-enableproperty {
 227   visibility: hidden;
 228 }
 229
 230 .ruleview-rule[uneditable=true] .ruleview-swatch {
 231   cursor: default;
 232 }
 233
 234 .ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
 235 .ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer >
 236 .ruleview-propertyvalue {
 237   border-bottom-color: transparent;
 238 }
 239
 240 .theme-firebug .ruleview-namecontainer > .ruleview-propertyname,
 241 .theme-firebug .ruleview-propertycontainer > .ruleview-propertyvalue {
 242   border-bottom: none;
 243 }
 244
 245 .theme-firebug .ruleview-namecontainer > .ruleview-propertyname {
 246   color: var(--rule-property-name);
 247 }
 248
 249 .theme-firebug .ruleview-propertycontainer > .ruleview-propertyvalue {
 250   color: var(--rule-property-value);
 251 }
 252
 253 .theme-firebug .ruleview-overridden .ruleview-propertyname,
 254 .theme-firebug .ruleview-overridden .ruleview-propertyvalue {
 255   text-decoration: line-through;
 256 }
 257
 258 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-namecontainer,
 259 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-namecontainer *,
 260 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertycontainer,
 261 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertycontainer * {
 262   color: #A09090;
 263 }
 264
 265 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-computedlist * {
 266   color: #A09090;
 267 }
 268
 269 .ruleview-rule + .ruleview-rule {
 270   border-top-width: 1px;
 271   border-top-style: dotted;
 272 }
 273
 274 .theme-firebug .ruleview-rule + .ruleview-rule {
 275   border-top: none;
 276 }
 277
 278 .ruleview-warning {
 279   background-image: url(images/alerticon-warning.png);
 280   background-size: 13px 12px;
 281   margin-inline-start: 5px;
 282   display: inline-block;
 283   width: 13px;
 284   height: 12px;
 285 }
 286
 287 @media (min-resolution: 1.1dppx) {
 288   .ruleview-warning {
 289     background-image: url(images/alerticon-warning@2x.png);
 290   }
 291 }
 292
 293 .ruleview-overridden-rule-filter {
 294   background-image: url(images/filter.svg#filterinput);
 295   background-size: 11px 11px;
 296   margin-inline-start: 5px;
 297   display: inline-block;
 298   width: 11px;
 299   height: 11px;
 300 }
 301
 302 .ruleview-ruleopen {
 303   padding-inline-end: 5px;
 304 }
 305
 306 .ruleview-ruleclose {
 307   cursor: text;
 308   padding-right: 20px;
 309 }
 310
 311 .ruleview-propertylist {
 312   list-style: none;
 313   padding: 0;
 314   margin: 0;
 315 }
 316
 317 .ruleview-rule:not(:hover) .ruleview-enableproperty {
 318   visibility: hidden;
 319 }
 320
 321 .ruleview-expander {
 322   vertical-align: middle;
 323   display: inline-block;
 324 }
 325
 326 .ruleview-newproperty {
 327   /* (enable checkbox width: 12px) + (expander width: 15px) */
 328   margin-inline-start: 27px;
 329 }
 330
 331 .ruleview-namecontainer,
 332 .ruleview-propertyvaluecontainer,
 333 .ruleview-propertyname,
 334 .ruleview-propertyvalue {
 335   text-decoration: inherit;
 336 }
 337
 338 .ruleview-computedlist {
 339   list-style: none;
 340   padding: 0;
 341 }
 342
 343 .ruleview-computed {
 344   margin-inline-start: 35px;
 345 }
 346
 347 .ruleview-swatch {
 348   cursor: pointer;
 349   border-radius: 50%;
 350   width: 0.9em;
 351   height: 0.9em;
 352   vertical-align: middle;
 353   /* align the swatch with its value */
 354   margin-top: -1px;
 355   margin-inline-end: 5px;
 356   display: inline-block;
 357   position: relative;
 358 }
 359
 360 .ruleview-colorswatch::before {
 361   content: '';
 362   background-color: #9C9CFF;
 363   background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090),
 364                     linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090);
 365   background-size: 12px 12px;
 366   background-position: 0 0, 6px 6px;
 367   position: absolute;
 368   border-radius: 50%;
 369   top: 0;
 370   left: 0;
 371   right: 0;
 372   bottom: 0;
 373   z-index: -1;
 374 }
 375
 376 .ruleview-bezierswatch {
 377   background: url("chrome://devtools/skin/images/cubic-bezier-swatch.png");
 378   background-size: 1em;
 379 }
 380
 381 .ruleview-filterswatch {
 382   background: url("chrome://devtools/skin/images/filter-swatch.svg");
 383   background-size: 1em;
 384 }
 385
 386 .ruleview-angleswatch {
 387   background: url("chrome://devtools/skin/images/angle-swatch.svg");
 388   background-size: 1em;
 389 }
 390
 391 @media (min-resolution: 1.1dppx) {
 392   .ruleview-bezierswatch {
 393     background: url("chrome://devtools/skin/images/cubic-bezier-swatch@2x.png");
 394     background-size: 1em;
 395   }
 396 }
 397
 398 .ruleview-overridden {
 399   text-decoration: line-through;
 400 }
 401
 402 .theme-light .ruleview-overridden {
 403   text-decoration-color: var(--theme-content-color3);
 404 }
 405
 406 .styleinspector-propertyeditor {
 407   border: 1px solid #CCC;
 408   padding: 0;
 409   margin: -1px -3px -1px -1px;
 410 }
 411
 412 .theme-firebug .styleinspector-propertyeditor {
 413   border: 1px solid var(--theme-splitter-color);
 414   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
 415 }
 416
 417 .ruleview-property {
 418   border-left: 3px solid transparent;
 419   clear: right;
 420 }
 421
 422 .ruleview-propertycontainer  > * {
 423   vertical-align: middle;
 424 }
 425
 426 .ruleview-property[dirty] {
 427   border-left-color: var(--theme-highlight-green);
 428 }
 429
 430 .ruleview-highlight {
 431   background-color: var(--rule-highlight-background-color);
 432 }
 433
 434 .ruleview-namecontainer > .ruleview-propertyname,
 435 .ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
 436   border-bottom: 1px dashed transparent;
 437 }
 438
 439 .ruleview-namecontainer:hover > .ruleview-propertyname,
 440 .ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue {
 441   border-bottom-color: hsl(0,0%,50%);
 442 }
 443
 444 .ruleview-selectorcontainer {
 445   word-wrap: break-word;
 446   cursor: text;
 447 }
 448
 449 .ruleview-selector-separator,
 450 .ruleview-selector-unmatched {
 451   color: var(--theme-comment);
 452 }
 453
 454 .ruleview-selector-matched > .ruleview-selector-attribute {
 455   /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
 456 }
 457
 458 .ruleview-selector-matched > .ruleview-selector-pseudo-class {
 459   /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
 460 }
 461
 462 .ruleview-selector-matched > .ruleview-selector-pseudo-class-lock {
 463   font-weight: bold;
 464   color: var(--theme-highlight-orange);
 465 }
 466
 467 .theme-firebug .ruleview-selector > .ruleview-selector-matched,
 468 .theme-firebug .ruleview-selector > .ruleview-selector-separator,
 469 .theme-firebug .ruleview-selector > .ruleview-selector-unmatched {
 470   color: inherit;
 471 }
 472
 473 .ruleview-selectorhighlighter {
 474   background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
 475   padding-left: 16px;
 476   margin-left: 5px;
 477   cursor: pointer;
 478 }
 479
 480 .ruleview-selectorhighlighter:hover {
 481   filter: url(images/filters.svg#checked-icon-state);
 482 }
 483
 484 .ruleview-selectorhighlighter:active,
 485 .ruleview-selectorhighlighter.highlighted {
 486   filter: url(images/filters.svg#checked-icon-state) brightness(0.9);
 487 }
 488
 489 #ruleview-add-rule-button::before {
 490   background-image: url("chrome://devtools/skin/images/add.svg");
 491   background-size: cover;
 492 }
 493
 494 #pseudo-class-panel-toggle::before {
 495   background-image: url("chrome://devtools/skin/images/pseudo-class.svg");
 496   background-size: cover;
 497 }
 498
 499 .ruleview-overridden-rule-filter {
 500   opacity: 0.8;
 501 }
 502 .ruleview-overridden-rule-filter:hover {
 503   opacity: 1;
 504 }
 505
 506 .theme-firebug .ruleview-overridden {
 507   text-decoration: none;
 508 }
 509
 510 /* Firebug theme disable/enable CSS rule. Firebug theme uses its own
 511   icons to indicate when CSS rules can be disabled or enabled.
 512
 513 .theme-firebug .ruleview-rule .theme-checkbox {
 514   background-repeat: no-repeat;
 515   background-size: 12px 12px;
 516   background-image: url(chrome://devtools/skin/images/firebug/disable.svg);
 517   background-position: 0 0;
 518 }
 519
 520 .theme-firebug .ruleview-rule .theme-checkbox:not([checked]){
 521   filter: grayscale(1);
 522 }
 523
 524 .theme-firebug .ruleview-rule .theme-checkbox[checked] {
 525   background-position: 0 0;
 526 }
 527
 528 .theme-firebug .ruleview-property:not(:hover) .ruleview-enableproperty {
 529   visibility: hidden;
 530 }
 531  */