gecko-dev/devtools/client/themes/rules.css

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/* CSS Variables specific to this panel that aren't defined by the themes */
:root {
  --rule-highlight-background-color: var(--theme-highlight-yellow);
  --rule-overridden-item-border-color: var(--theme-content-color3);
  --rule-header-background-color: var(--theme-toolbar-background);
  --rule-flex-toggle-color: var(--grey-90);
  --rule-shape-toggle-color: var(--grey-90);
}

:root.theme-dark {
  --rule-highlight-background-color: #521C76;
  --rule-overridden-item-border-color: var(--theme-content-color1);
  --rule-header-background-color: #222225;
  --rule-flex-toggle-color: var(--grey-10);
  --rule-shape-toggle-color: var(--grey-10);
}

:root.theme-firebug {
  --rule-highlight-background-color: var(--theme-highlight-yellow);
  --rule-property-name: darkgreen;
  --rule-property-value: darkblue;
  --rule-overridden-item-border-color: var(--theme-content-color2);
  --rule-header-background-color: var(--theme-header-background);
}

/* Rule View Tabpanel */

#sidebar-panel-ruleview {
  margin: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  /* Override the min-width from .inspector-tabpanel, as the rule panel can support small
     widths */
  min-width: 100px;
}

/* Rule View Toolbar */

#ruleview-toolbar-container {
  display: flex;
  flex-direction: column;
  height: auto;
}

#ruleview-toolbar {
  display: flex;
}

#ruleview-toolbar > .devtools-searchbox:first-child {
  padding-inline-start: 0px;
}

#ruleview-command-toolbar {
  display: flex;
}

.ruleview-reveal-panel {
  display: flex;
  overflow: hidden;
}

.ruleview-reveal-panel[hidden] {
  display: none;
}

.ruleview-reveal-panel label {
  -moz-user-select: none;
  flex-grow: 1;
  display: flex;
  align-items: center;
}

/* Class toggle panel */
#ruleview-class-panel:not([hidden]) {
  /* The class panel can contain 0 to N classes, so we can't hardcode a height here like
     we do for the pseudo-class panel. Unfortunately, that means we don't get the height
     transition when toggling the panel */
  flex-direction: column;
}

#ruleview-class-panel .add-class {
  margin: 0;
  border-width: 0 0 1px 0;
  padding: 2px 6px;
  border-radius: 0;
}

#ruleview-class-panel .classes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#ruleview-class-panel .classes {
  max-height: 100px;
  overflow-y: auto;
}

#ruleview-class-panel .classes label {
  flex: 0 0;
  max-width: 50%;
}

#ruleview-class-panel .classes label span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

#ruleview-class-panel .no-classes {
  flex: 1;
  color: var(--theme-body-color-inactive);
  margin: 0;
  text-align: center;
}

/* Rule View Container */

#ruleview-container {
  -moz-user-select: text;
  overflow: auto;
  flex: auto;
  height: 100%;
}

/* This extra wrapper only serves as a way to get the content of the view focusable.
   So that when the user reaches it either via keyboard or mouse, we know that the view
   is focused and therefore can handle shortcuts.
   However, for accessibility reasons, tabindex is set to -1 to avoid having to tab
   through it, and the outline is hidden. */
#ruleview-container-focusable {
  height: 100%;
  outline: none;
}

#ruleview-container.non-interactive {
  pointer-events: none;
  visibility: collapse;
  transition: visibility 0.25s;
}

.ruleview-code {
  direction: ltr;
}

.ruleview-property:not(:hover) > .ruleview-enableproperty {
  pointer-events: none;
}

.ruleview-expandable-container {
  display: block;
}

.ruleview-namecontainer {
  cursor: text;
  margin-left: -25px;
}

.ruleview-propertyvaluecontainer {
  cursor: text;
  padding-right: 5px;
}

.ruleview-propertyvaluecontainer a {
  color: var(--theme-highlight-purple);
  cursor: pointer;
}

.ruleview-computedlist,
.ruleview-expandable-container[hidden],
.ruleview-overridden-items[hidden],
.ruleview-overridden-rule-filter[hidden],
.ruleview-warning[hidden],
.ruleview-overridden .ruleview-grid {
  display: none;
}

.ruleview-computedlist[user-open],
.ruleview-computedlist[filter-open],
.ruleview-overridden-items {
  display: block;
}

.ruleview-rule-source {
  text-align: end;
  float: right;
  max-width: 100%;

  /* Force RTL direction to crop the source link at the beginning. */
  direction: rtl;
  overflow: hidden;
  text-overflow: ellipsis;

  -moz-user-select: none;
  margin-bottom: 2px;
}

.ruleview-rule-source-label {
  white-space: nowrap;
  margin: 0;
  cursor: pointer;

  /* Create an LTR embed to avoid special characters being shifted to the start due to the
     parent node direction: rtl; */
  direction: ltr;
  unicode-bidi: embed
}

.ruleview-rule-source[unselectable],
.ruleview-rule-source[unselectable] > .ruleview-rule-source-label {
  cursor: default;
}

.theme-firebug .ruleview-rule-source-label {
  font-family: var(--proportional-font-family);
  font-weight: bold;
  color: #0000FF;
}

.ruleview-rule-source:not([unselectable]):hover {
  text-decoration: underline;
}

.ruleview-header {
  background: var(--rule-header-background-color);
  border-bottom: 1px solid var(--theme-splitter-color);
  color: var(--theme-toolbar-color);
  font-size: 12px;
  padding: 4px;
  width: 100%;
  align-items: center;
  display: flex;

  -moz-user-select: none;
}

.theme-firebug .ruleview-header {
  font-family: var(--proportional-font-family);
  font-weight: bold;
  color: inherit;
  border: none;
  margin: 4px 0;
  padding: 3px 4px 2px 4px;
  line-height: inherit;
  min-height: 0;
}

.ruleview-expandable-header {
  cursor: pointer;
}

.ruleview-expandable-header:hover {
  background-color: var(--theme-toolbar-background-hover);
}

.ruleview-rule-pseudo-element {
  padding-left:20px;
  border-left: solid 10px;
}

.ruleview-rule {
  border-bottom: 1px solid var(--theme-splitter-color);
  padding: 2px 4px;
}

#ruleview-container-focusable > .ruleview-rule:last-child {
  border-bottom: none;
}

/**
 * Display rules that don't match the current selected element and uneditable
 * user agent styles differently
 */
.ruleview-rule[unmatched=true],
.ruleview-rule[uneditable=true] {
  background: var(--theme-tab-toolbar-background);
}

.ruleview-rule[unmatched=true] {
  opacity: 0.5;
}

.ruleview-rule[uneditable=true] :focus {
  outline: none;
}

.ruleview-rule[uneditable=true] .theme-link {
  color: var(--theme-highlight-bluegrey);
}

.ruleview-rule[uneditable=true] .ruleview-enableproperty {
  visibility: hidden;
}

.ruleview-rule[uneditable=true] .ruleview-swatch {
  cursor: default;
}

.ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
.ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer >
.ruleview-propertyvalue {
  border-bottom-color: transparent;
}

.theme-firebug .ruleview-namecontainer > .ruleview-propertyname,
.theme-firebug .ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
  border-bottom: none;
}

.theme-firebug .ruleview-namecontainer > .ruleview-propertyname {
  color: var(--rule-property-name);
}

.theme-firebug .ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
  color: var(--rule-property-value);
}

.theme-firebug .ruleview-overridden .ruleview-propertyname,
.theme-firebug .ruleview-overridden .ruleview-propertyvalue {
  text-decoration: line-through;
}

.theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-namecontainer,
.theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-namecontainer *,
.theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertyvaluecontainer,
.theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertyvaluecontainer *,
.theme-firebug .ruleview-overridden > * > .ruleview-computed:not(.ruleview-overridden),
.theme-firebug .ruleview-overridden > * > .ruleview-computed:not(.ruleview-overridden) * {
  color: #CCCCCC;
}

.theme-firebug .ruleview-rule + .ruleview-rule {
  border-bottom: none;
}

.ruleview-warning {
  background-image: url(images/alerticon-warning.png);
  background-size: 13px 12px;
  margin-inline-start: 5px;
  display: inline-block;
  width: 13px;
  height: 12px;
}

@media (min-resolution: 1.1dppx) {
  .ruleview-warning {
    background-image: url(images/alerticon-warning@2x.png);
  }
}

.ruleview-overridden-rule-filter {
  background-image: url(chrome://devtools/skin/images/filter.svg#filterinput);
  background-size: 11px 11px;
  margin-inline-start: 5px;
  display: inline-block;
  width: 11px;
  height: 11px;
}

.ruleview-ruleopen {
  padding-inline-end: 5px;
}

.ruleview-ruleclose {
  clear: both;
  cursor: text;
  padding-right: 20px;
}

.ruleview-propertylist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ruleview-enableproperty {
  position: relative;
  float: left;
  left: -28px;
}

.ruleview-rule:not(:hover) .ruleview-enableproperty {
  visibility: hidden;
}

.ruleview-expander {
  vertical-align: middle;
}

.ruleview-propertycontainer .ruleview-expander {
  margin-left: -6px;
}

.ruleview-rule .ruleview-expander.theme-twisty:dir(rtl) {
  /* for preventing .theme-twisty's wrong direction in rtl; Bug 1296648 */
  transform: none;
}

.ruleview-newproperty {
  margin-inline-start: -10px;
}

.ruleview-namecontainer,
.ruleview-propertyvaluecontainer,
.ruleview-propertyname,
.ruleview-propertyvalue {
  text-decoration: inherit;
}

.ruleview-computedlist {
  list-style: none;
  padding: 0;
}

.ruleview-overridden-items {
  margin-inline-start: -25px;
  list-style: none;
  line-height: 1.5em;
}

.ruleview-overridden-item {
  position: relative;
}

.ruleview-overridden-item::before {
  position: absolute;
  left: -15px;
  top: 0px;
  content: '';
  display: block;
  border-left: 0.5px solid var(--rule-overridden-item-border-color);
  height: 0.8em;
  border-bottom: 0.5px solid var(--rule-overridden-item-border-color);
  width: 10px;
}

.ruleview-overridden-item::after {
  position: absolute;
  left: -15px;
  bottom: -7px;
  content: '';
  display: block;
  border-left: 0.5px solid var(--rule-overridden-item-border-color);
  height: 100%;
}

.ruleview-overridden-item:last-child:after {
  display: none;
}

.ruleview-flex,
.ruleview-grid,
.ruleview-swatch {
  cursor: pointer;
  border-radius: 50%;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  /* align the swatch with its value */
  margin-top: -1px;
  margin-inline-end: 5px;
  display: inline-block;
  position: relative;
}

.ruleview-flex {
  background: url("chrome://devtools/skin/images/command-frames.svg");
  -moz-context-properties: fill;
  fill: var(--rule-shape-toggle-color);
  border-radius: 0;
  background-size: 1em;
}

.ruleview-grid {
  background: url("chrome://devtools/skin/images/grid.svg");
  border-radius: 0;
}

.ruleview-shape-point.active {
  background-color: var(--rule-highlight-background-color);
}

.ruleview-colorswatch::before {
  content: '';
  background-color: #eee;
  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
                    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
  position: absolute;
  border-radius: 50%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.ruleview-bezierswatch {
  background: url("chrome://devtools/skin/images/cubic-bezier-swatch.png");
  background-size: 1em;
}

.ruleview-filterswatch {
  background: url("chrome://devtools/skin/images/filter-swatch.svg");
  background-size: 1em;
}

.ruleview-angleswatch {
  background: url("chrome://devtools/skin/images/angle-swatch.svg");
  background-size: 1em;
}

.ruleview-shapeswatch {
  background: url("chrome://devtools/skin/images/tool-shadereditor.svg");
  -moz-context-properties: fill;
  fill: var(--rule-shape-toggle-color);
  border-radius: 0;
  background-size: 1em;
  box-shadow: none;
}

@media (min-resolution: 1.1dppx) {
  .ruleview-bezierswatch {
    background: url("chrome://devtools/skin/images/cubic-bezier-swatch@2x.png");
    background-size: 1em;
  }
}

.ruleview-overridden {
  text-decoration: line-through;
}

/**
 * Hide swatches (tool icons) from properties that are overwritten by higher specificity * rules.
 * .ruleview-swatch is a base class for many tool swatches (shapes, color, bezier curves)
 * .ruleview-flex and .ruleview-grid are custom
 */
.ruleview-overridden .ruleview-flex,
.ruleview-overridden .ruleview-grid,
.ruleview-overridden .ruleview-swatch {
  display: none;
}

.theme-light .ruleview-overridden {
  text-decoration-color: var(--theme-content-color3);
}

.ruleview-font-family.used-font {
  text-decoration: underline;
}

.styleinspector-propertyeditor {
  border: 1px solid #CCC;
  padding: 0;
  margin: -1px -3px -1px -1px;
}

.theme-firebug .styleinspector-propertyeditor {
  border: 1px solid var(--theme-splitter-color);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.ruleview-property {
  border-left: 3px solid transparent;
  clear: both;
  padding-left: 28px;
}

.ruleview-propertycontainer  > * {
  vertical-align: middle;
}

.ruleview-property[dirty] {
  border-left-color: var(--theme-highlight-green);
}

.ruleview-highlight > .ruleview-namecontainer,
.ruleview-highlight > .ruleview-propertyvaluecontainer {
  background-color: var(--rule-highlight-background-color);
}

.ruleview-namecontainer > .ruleview-propertyname,
.ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
  border-bottom: 1px dashed transparent;
}

.ruleview-namecontainer:hover > .ruleview-propertyname,
.ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue {
  border-bottom-color: hsl(0,0%,50%);
}

.ruleview-selectorcontainer {
  word-wrap: break-word;
  cursor: text;
}

.ruleview-selector-separator,
.ruleview-selector-unmatched,
.ruleview-unmatched-variable {
  color: #888;
}

.ruleview-selector-matched > .ruleview-selector-attribute {
  /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
}

.ruleview-selector-matched > .ruleview-selector-pseudo-class {
  /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
}

.ruleview-selector-matched > .ruleview-selector-pseudo-class-lock {
  font-weight: bold;
  color: var(--theme-highlight-orange);
}

.theme-firebug .ruleview-selector > .ruleview-selector-matched,
.theme-firebug .ruleview-selector > .ruleview-selector-separator,
.theme-firebug .ruleview-selector > .ruleview-selector-unmatched {
  color: inherit;
}

.ruleview-selectorhighlighter {
  background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
  padding-left: 16px;
  margin-left: 5px;
  cursor: pointer;
}

.ruleview-selectorhighlighter:hover {
  filter: var(--theme-icon-checked-filter);
}

.ruleview-flex.active,
.ruleview-grid.active,
.ruleview-selectorhighlighter:active,
.ruleview-selectorhighlighter.highlighted,
.ruleview-shapeswatch.active {
  filter: var(--theme-icon-checked-filter) brightness(0.9);
}

#ruleview-add-rule-button::before {
  background-image: url("chrome://devtools/skin/images/add.svg");
}

#pseudo-class-panel-toggle::before {
  background-image: url("chrome://devtools/skin/images/pseudo-class.svg");
}

#class-panel-toggle::before {
  content: ".cls";
}

.ruleview-overridden-rule-filter {
  opacity: 0.8;
}
.ruleview-overridden-rule-filter:hover {
  opacity: 1;
}

.theme-firebug .ruleview-overridden {
  text-decoration: none;
}

/* Firebug theme disable/enable CSS rule. Firebug theme uses its own
  icons to indicate when CSS rules can be disabled or enabled. */

.theme-firebug .ruleview-rule .theme-checkbox {
  background-repeat: no-repeat;
  background-size: 12px 12px;
  background-image: url(chrome://devtools/skin/images/firebug/disable.svg);
  background-position: 0 0;
}

.theme-firebug .ruleview-rule .theme-checkbox:not([checked]){
  filter: grayscale(1);
}

.theme-firebug .ruleview-rule .theme-checkbox[checked] {
  background-position: 0 0;
}

.theme-firebug .ruleview-property:not(:hover) .ruleview-enableproperty {
  visibility: hidden;
}