second and final part of syncing LCARStrek with Firefox 49/50 devtools theme changes

[themes.git] / LCARStrek / devtools / 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 */
.theme-light,
.theme-dark,
.theme-firebug {
  --rule-highlight-background-color: #402000;
}

/* Rule View Tabpanel */

.theme-firebug .ruleview {
/*  font-family: monospace;
  font-size: 11px;*/
}

#sidebar-panel-ruleview {
  margin: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* 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;
}

#pseudo-class-panel {
  display: flex;
  height: 24px;
  overflow: hidden;
  transition: height 150ms ease;
}

#pseudo-class-panel[hidden] {
  height: 0px;
}

#pseudo-class-panel > label {
  -moz-user-select: none;
  flex-grow: 1;
  display: flex;
  align-items: 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[hidden] {
  display: none;
}

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

.ruleview-namecontainer {
  cursor: text;
}

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

.ruleview-propertyvaluecontainer a {
  cursor: pointer;
}

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

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

.ruleview-rule-source {
  text-align: end;
  float: right;
  -moz-user-select: none;
  margin-bottom: 2px;
}

.ruleview-rule-source > label {
  cursor: pointer;
  margin: 0;
}

.ruleview-rule-source[unselectable],
.ruleview-rule-source[unselectable] > 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 {
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-top-style: solid;
  border-bottom-style: solid;
  padding: 1px 4px;
  -moz-user-select: none;
  word-wrap: break-word;
  vertical-align: middle;
  min-height: 1.5em;
  line-height: 1.5em;
  margin-top: -1px;
}

.theme-firebug .theme-gutter.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;
  background: var(--theme-header-background);
}

:root[platform="win"] .ruleview-header,
:root[platform="linux"] .ruleview-header {
  margin-top: 4px;
}

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

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

.ruleview-rule {
  padding: 2px 4px;
}

/**
 * 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-propertycontainer > .ruleview-propertyvalue {
  border-bottom: none;
}

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

.theme-firebug .ruleview-propertycontainer > .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-propertycontainer,
.theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertycontainer * {
  color: #A09090;
}

.theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-computedlist * {
  color: #A09090;
}

.ruleview-rule + .ruleview-rule {
  border-top-width: 1px;
  border-top-style: dotted;
}

.theme-firebug .ruleview-rule + .ruleview-rule {
  border-top: 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(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 {
  cursor: text;
  padding-right: 20px;
}

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

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

.ruleview-expander {
  vertical-align: middle;
  display: inline-block;
}

.ruleview-newproperty {
  /* (enable checkbox width: 12px) + (expander width: 15px) */
  margin-inline-start: 27px;
}

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

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

.ruleview-computed {
  margin-inline-start: 35px;
}

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

.ruleview-colorswatch::before {
  content: '';
  background-color: #9C9CFF;
  background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090),
                    linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090);
  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;
}

@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;
}

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

.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: right;
}

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

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

.ruleview-highlight {
  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 {
  color: var(--theme-comment);
}

.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: url(images/filters.svg#checked-icon-state);
}

.ruleview-selectorhighlighter:active,
.ruleview-selectorhighlighter.highlighted {
  filter: url(images/filters.svg#checked-icon-state) brightness(0.9);
}

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

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

.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;
}
 */