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