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