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-rule .ruleview-expander.theme-twisty:dir(rtl) {
 330   /* for preventing .theme-twisty's wrong direction in rtl; Bug 1296648 */
 331   transform: none;
 332 }
 333
 334 .ruleview-newproperty {
 335   /* (enable checkbox width: 12px) + (expander width: 15px) */
 336   margin-inline-start: 27px;
 337 }
 338
 339 .ruleview-namecontainer,
 340 .ruleview-propertyvaluecontainer,
 341 .ruleview-propertyname,
 342 .ruleview-propertyvalue {
 343   text-decoration: inherit;
 344 }
 345
 346 .ruleview-computedlist {
 347   list-style: none;
 348   padding: 0;
 349 }
 350
 351 .ruleview-computed {
 352   margin-inline-start: 35px;
 353 }
 354
 355 .ruleview-swatch {
 356   cursor: pointer;
 357   border-radius: 50%;
 358   width: 0.9em;
 359   height: 0.9em;
 360   vertical-align: middle;
 361   /* align the swatch with its value */
 362   margin-top: -1px;
 363   margin-inline-end: 5px;
 364   display: inline-block;
 365   position: relative;
 366 }
 367
 368 .ruleview-colorswatch::before {
 369   content: '';
 370   background-color: #9C9CFF;
 371   background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090),
 372                     linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090);
 373   background-size: 12px 12px;
 374   background-position: 0 0, 6px 6px;
 375   position: absolute;
 376   border-radius: 50%;
 377   top: 0;
 378   left: 0;
 379   right: 0;
 380   bottom: 0;
 381   z-index: -1;
 382 }
 383
 384 .ruleview-bezierswatch {
 385   background: url("chrome://devtools/skin/images/cubic-bezier-swatch.png");
 386   background-size: 1em;
 387 }
 388
 389 .ruleview-filterswatch {
 390   background: url("chrome://devtools/skin/images/filter-swatch.svg");
 391   background-size: 1em;
 392 }
 393
 394 .ruleview-angleswatch {
 395   background: url("chrome://devtools/skin/images/angle-swatch.svg");
 396   background-size: 1em;
 397 }
 398
 399 @media (min-resolution: 1.1dppx) {
 400   .ruleview-bezierswatch {
 401     background: url("chrome://devtools/skin/images/cubic-bezier-swatch@2x.png");
 402     background-size: 1em;
 403   }
 404 }
 405
 406 .ruleview-overridden {
 407   text-decoration: line-through;
 408 }
 409
 410 .theme-light .ruleview-overridden {
 411   text-decoration-color: var(--theme-content-color3);
 412 }
 413
 414 .styleinspector-propertyeditor {
 415   border: 1px solid #CCC;
 416   padding: 0;
 417   margin: -1px -3px -1px -1px;
 418 }
 419
 420 .theme-firebug .styleinspector-propertyeditor {
 421   border: 1px solid var(--theme-splitter-color);
 422   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
 423 }
 424
 425 .ruleview-property {
 426   border-left: 3px solid transparent;
 427   clear: right;
 428 }
 429
 430 .ruleview-propertycontainer  > * {
 431   vertical-align: middle;
 432 }
 433
 434 .ruleview-property[dirty] {
 435   border-left-color: var(--theme-highlight-green);
 436 }
 437
 438 .ruleview-highlight {
 439   background-color: var(--rule-highlight-background-color);
 440 }
 441
 442 .ruleview-namecontainer > .ruleview-propertyname,
 443 .ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
 444   border-bottom: 1px dashed transparent;
 445 }
 446
 447 .ruleview-namecontainer:hover > .ruleview-propertyname,
 448 .ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue {
 449   border-bottom-color: hsl(0,0%,50%);
 450 }
 451
 452 .ruleview-selectorcontainer {
 453   word-wrap: break-word;
 454   cursor: text;
 455 }
 456
 457 .ruleview-selector-separator,
 458 .ruleview-selector-unmatched {
 459   color: var(--theme-comment);
 460 }
 461
 462 .ruleview-selector-matched > .ruleview-selector-attribute {
 463   /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
 464 }
 465
 466 .ruleview-selector-matched > .ruleview-selector-pseudo-class {
 467   /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
 468 }
 469
 470 .ruleview-selector-matched > .ruleview-selector-pseudo-class-lock {
 471   font-weight: bold;
 472   color: var(--theme-highlight-orange);
 473 }
 474
 475 .theme-firebug .ruleview-selector > .ruleview-selector-matched,
 476 .theme-firebug .ruleview-selector > .ruleview-selector-separator,
 477 .theme-firebug .ruleview-selector > .ruleview-selector-unmatched {
 478   color: inherit;
 479 }
 480
 481 .ruleview-selectorhighlighter {
 482   background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
 483   padding-left: 16px;
 484   margin-left: 5px;
 485   cursor: pointer;
 486 }
 487
 488 .ruleview-selectorhighlighter:hover {
 489   filter: url(images/filters.svg#checked-icon-state);
 490 }
 491
 492 .ruleview-selectorhighlighter:active,
 493 .ruleview-selectorhighlighter.highlighted {
 494   filter: url(images/filters.svg#checked-icon-state) brightness(0.9);
 495 }
 496
 497 #ruleview-add-rule-button::before {
 498   background-image: url("chrome://devtools/skin/images/add.svg");
 499   background-size: cover;
 500 }
 501
 502 #pseudo-class-panel-toggle::before {
 503   background-image: url("chrome://devtools/skin/images/pseudo-class.svg");
 504   background-size: cover;
 505 }
 506
 507 .ruleview-overridden-rule-filter {
 508   opacity: 0.8;
 509 }
 510 .ruleview-overridden-rule-filter:hover {
 511   opacity: 1;
 512 }
 513
 514 .theme-firebug .ruleview-overridden {
 515   text-decoration: none;
 516 }
 517
 518 /* Firebug theme disable/enable CSS rule. Firebug theme uses its own
 519   icons to indicate when CSS rules can be disabled or enabled.
 520
 521 .theme-firebug .ruleview-rule .theme-checkbox {
 522   background-repeat: no-repeat;
 523   background-size: 12px 12px;
 524   background-image: url(chrome://devtools/skin/images/firebug/disable.svg);
 525   background-position: 0 0;
 526 }
 527
 528 .theme-firebug .ruleview-rule .theme-checkbox:not([checked]){
 529   filter: grayscale(1);
 530 }
 531
 532 .theme-firebug .ruleview-rule .theme-checkbox[checked] {
 533   background-position: 0 0;
 534 }
 535
 536 .theme-firebug .ruleview-property:not(:hover) .ruleview-enableproperty {
 537   visibility: hidden;
 538 }
 539  */