diff options
Diffstat (limited to 'devtools/client/themes/rules.css')
| -rw-r--r-- | devtools/client/themes/rules.css | 839 |
1 files changed, 839 insertions, 0 deletions
diff --git a/devtools/client/themes/rules.css b/devtools/client/themes/rules.css new file mode 100644 index 0000000000..ae06b09991 --- /dev/null +++ b/devtools/client/themes/rules.css @@ -0,0 +1,839 @@ +/* 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-header-background-color: var(--theme-toolbar-background); + --rule-pseudo-class-text-color: var(--yellow-70) ; + --rule-unused-name-text-color: var(--grey-50); + --rule-unused-value-text-color: var(--grey-45); + --rule-overridden-name-text-color: var(--grey-50); + --rule-overridden-value-text-color: var(--grey-45); +} + +:root.theme-dark { + --rule-highlight-background-color: #521C76; + --rule-header-background-color: #222225; + --rule-pseudo-class-text-color: var(--yellow-50); + + --rule-unused-name-text-color: var(--grey-45); + --rule-unused-value-text-color: #787878; + --rule-overridden-name-text-color: var(--grey-45); + --rule-overridden-value-text-color: #787878; +} + +/* 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 { + line-height: var(--theme-toolbar-height); +} + +#ruleview-toolbar { + flex-wrap: wrap; + height: auto; +} + +#ruleview-toolbar .devtools-searchbox { + flex-basis: 7em; + height: var(--theme-toolbar-height); +} + +#ruleview-command-toolbar { + display: flex; +} + +.ruleview-reveal-panel { + border-bottom: 1px solid var(--theme-splitter-color); + display: flex; + overflow: hidden; + flex-wrap: wrap; + margin: 2px; +} + +.ruleview-reveal-panel[hidden] { + display: none; +} + +.ruleview-reveal-panel .add-class { + height: var(--theme-toolbar-height); + line-height: normal; +} + +.ruleview-reveal-panel label { + user-select: none; + display: flex; + align-items: center; +} + +#pseudo-class-panel, +#ruleview-class-panel .classes { + padding: 0 3px; +} + +/* Pseudo Class toggle panel */ + +#pseudo-class-panel { + grid-template-columns: repeat(auto-fit, minmax(100px, max-content)); +} + +#pseudo-class-panel:not([hidden]) { + display: grid; +} + +/* Class toggle panel */ + +#ruleview-class-panel { + flex-direction: column; +} + +#ruleview-class-panel .classes { + border-top: 1px solid var(--theme-splitter-color); + display: flex; + flex-direction: row; + flex-wrap: wrap; + max-height: 100px; + overflow-y: auto; +} + +#ruleview-class-panel .classes label { + flex: 0 0; + max-width: 50%; + min-width: 100px; +} + +#ruleview-class-panel .classes label span { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +#ruleview-class-panel .no-classes { + flex: 1; + color: var(--theme-text-color-inactive); + margin: 0; + text-align: center; +} + +/* Rule View Container */ + +#ruleview-container { + 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-container .accordion ._content { + padding: 0; +} + +.ruleview-property:not(:hover) > .ruleview-enableproperty { + pointer-events: none; +} + +.ruleview-expandable-container { + display: block; +} + +.ruleview-namecontainer { + cursor: text; + margin-left: -35px; +} + +.ruleview-computed > .ruleview-namecontainer { + margin: 0; +} + +.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-unused-warning[hidden], +.ruleview-compatibility-warning[hidden], +.ruleview-used[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; + + user-select: none; + margin-bottom: 2px; + margin-left: 1ch; +} + +.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.disabled > .ruleview-rule-source-label, +.ruleview-rule-source[unselectable] > .ruleview-rule-source-label { + cursor: default; +} + +.ruleview-rule-source:not([unselectable]) { + text-decoration: underline; + text-decoration-skip-ink: none; +} + +.ruleview-header { + background: var(--rule-header-background-color); + border-bottom: 1px solid var(--theme-splitter-color); + color: var(--theme-toolbar-color); + font-size: 12px; + line-height: 16px; + padding: 4px; + width: 100%; + align-items: center; + display: flex; + user-select: none; +} + +.ruleview-expandable-header { + cursor: pointer; +} + +.ruleview-expandable-header:hover { + background-color: var(--theme-accordion-header-hover); +} + +.ruleview-expandable-header .theme-twisty { + margin-inline-start: 0; + margin-inline-end: 2px; +} + +.ruleview-rule-pseudo-element { + padding-left: 20px; + border-left: solid 10px; +} + +.ruleview-rule { + border-bottom: 1px solid var(--theme-splitter-color); + padding: 2px 4px; + direction: ltr; +} + +#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, +.ruleview-rule.uneditable, +.ruleview-rule[unmatched=true], +.ruleview-rule[uneditable=true] { + background: var(--theme-tab-toolbar-background); +} + +.ruleview-rule.unmatched, +.ruleview-rule[unmatched=true] { + opacity: 0.5; +} + +.ruleview-rule.uneditable :focus, +.ruleview-rule[uneditable=true] :focus { + outline: none; +} + +.ruleview-rule.uneditable .theme-link, +.ruleview-rule[uneditable=true] .theme-link { + color: var(--theme-highlight-bluegrey); +} + +.ruleview-rule.uneditable .ruleview-enableproperty, +.ruleview-rule[uneditable=true] .ruleview-enableproperty { + visibility: hidden; +} + +.ruleview-rule.uneditable .ruleview-swatch, +.ruleview-rule[uneditable=true] .ruleview-swatch { + cursor: default; +} + +.ruleview-rule.uneditable .ruleview-namecontainer > .ruleview-propertyname, +.ruleview-rule.uneditable .ruleview-propertyvaluecontainer > +.ruleview-propertyvalue, +.ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname, +.ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer > +.ruleview-propertyvalue { + border-bottom-color: transparent; +} + +.ruleview-property.unused .ruleview-propertyname { + color: var(--rule-unused-name-text-color); +} + +.ruleview-property.unused .ruleview-propertyvalue { + color: var(--rule-unused-value-text-color); +} + +.ruleview-overridden-rule-filter { + display: inline-block; + width: 14px; + height: 14px; + margin-inline-start: 3px; + background-image: url(chrome://devtools/skin/images/filter-small.svg); + background-position: center; + background-repeat: no-repeat; + background-size: 12px; + -moz-context-properties: fill; + fill: var(--theme-icon-dimmed-color); +} + +.ruleview-overridden-rule-filter:hover { + fill: var(--theme-icon-color); +} + +.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; + margin-top: 0; + margin-bottom: 0; +} + +:root[platform="mac"] .ruleview-enableproperty { + left: -29px; + box-sizing: border-box; + margin-inline-start: 3px; + margin-inline-end: 9px; + width: 12px; + height: 12px; +} + +/* The SVG checkbox on Windows and Linux */ +:root[platform="win"] .ruleview-enableproperty, +:root[platform="linux"] .ruleview-enableproperty { + appearance: none; + float: left; + left: -27px; + box-sizing: content-box; + margin-inline-start: 0; + margin-inline-end: 10px; + display: inline-block; + width: 14px; + height: 14px; + border: 0; + padding: 0; + outline: none; + background: url("chrome://devtools/skin/images/checkbox.svg") center no-repeat content-box; + /* Using fill to paint the border, and stroke for the tick */ + -moz-context-properties: fill, stroke; + fill: rgba(0,0,0,.3); + stroke: transparent; +} + +:root[platform="win"].theme-dark .ruleview-enableproperty, +:root[platform="linux"].theme-dark .ruleview-enableproperty { + fill: rgba(255,255,255,.4); +} + +:root[platform="win"] .ruleview-enableproperty:checked, +:root[platform="linux"] .ruleview-enableproperty:checked { + stroke: rgba(0,0,0,.6); +} + +:root[platform="win"].theme-dark .ruleview-enableproperty:checked, +:root[platform="linux"].theme-dark .ruleview-enableproperty:checked { + stroke: rgba(255,255,255,.8); +} + +:root[platform="mac"] .ruleview-enableproperty { + appearance: auto; + -moz-default-appearance: checkbox; +} + +.ruleview-warning, +.ruleview-unused-warning, +.ruleview-compatibility-warning { + display: inline-block; + width: 12px; + height: 12px; + background-size: 12px; + background-repeat: no-repeat; + -moz-context-properties: fill; +} + +.ruleview-warning { + background-image: url(chrome://devtools/skin/images/alert-small.svg); + fill: var(--yellow-60); +} + +.ruleview-unused-warning { + background-image: url(chrome://devtools/skin/images/info-small.svg); + background-color: var(--theme-sidebar-background); + fill: var(--theme-icon-dimmed-color); +} + +.ruleview-compatibility-warning { + background-image: url(chrome://devtools/skin/images/report.svg); + background-color: var(--theme-sidebar-background); + fill: var(--theme-icon-dimmed-color); +} + +.ruleview-unused-warning:hover, +.ruleview-compatibility-warning:hover { + fill: var(--theme-icon-color); + stroke: var(--theme-icon-color); +} + +.ruleview-rule:not(:hover) .ruleview-enableproperty:not(:focus) { + /* Use opacity to hide the checkbox instead of visibility:hidden, + so that it's possible to focus it with the keyboard. */ + opacity: 0; +} + +.ruleview-expander { + vertical-align: middle; +} + +.ruleview-propertycontainer .ruleview-expander { + margin-left: -6px; +} + +.ruleview-propertycontainer .ruleview-expander:dir(rtl):not([open]) { + /* for preventing .theme-twisty's wrong direction in rtl; Bug 1296648 */ + transform: rotate(-90deg); +} + +.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, +.ruleview-overridden-item::after { + content: ""; + position: absolute; + display: block; + border: 0 solid var(--theme-text-color-alt); +} + +.ruleview-overridden-item::before { + top: 0; + left: -15px; + height: 0.8em; + width: 10px; + border-left-width: 0.5px; + border-bottom-width: 0.5px; +} + +.ruleview-overridden-item::after { + left: -15px; + bottom: -7px; + height: 100%; + border-left-width: 0.5px; +} + +.ruleview-overridden-item:last-child::after { + display: none; +} + +.ruleview-overridden-item .ruleview-namecontainer { + margin-left: 0; +} + +/* All swatches */ + +.ruleview-flex, +.ruleview-grid, +.ruleview-shapeswatch, +.ruleview-swatch { + cursor: pointer; + 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; +} + +/* Icon swatches not using the .ruleview-swatch class (flex, grid, shape) */ + +.ruleview-flex, +.ruleview-grid, +.ruleview-shapeswatch { + -moz-context-properties: stroke; + stroke: var(--theme-icon-color); +} + +.ruleview-flex.active, +.ruleview-grid.active, +.ruleview-shapeswatch.active { + stroke: var(--theme-icon-checked-color); +} + +.ruleview-flex { + background-image: url("chrome://devtools/skin/images/flexbox-swatch.svg"); + background-size: 13px 11px; + width: 13px; + height: 11px; +} + +.ruleview-grid { + background-image: url("chrome://devtools/skin/images/grid.svg"); +} + +.ruleview-grid[disabled] { + cursor: default; + opacity: 0.5; +} + +.ruleview-shapeswatch { + background-image: url("chrome://devtools/skin/images/shape-swatch.svg"); + background-size: 110%; + width: 1.45em; + height: 1.45em; +} + +.ruleview-shape-point.active, +.ruleview-shapeswatch.active + .ruleview-shape > .ruleview-shape-point:hover { + background-color: var(--rule-highlight-background-color); +} + +/* Round swatches using the .ruleview-swatch class (color, bezier, filter and angle) */ + +.ruleview-swatch { + background-size: 1em; + border-radius: 50%; +} + +.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-swatch.ruleview-colorswatch { + border: none; + padding: 0; +} + +.ruleview-bezierswatch { + background-image: url("chrome://devtools/skin/images/cubic-bezier-swatch.svg"); +} + +.ruleview-filterswatch { + background-image: url("chrome://devtools/skin/images/filter-swatch.svg"); +} + +.ruleview-angleswatch { + background-image: url("chrome://devtools/skin/images/angle-swatch.svg"); +} + +.ruleview-lineareasingswatch { + background-image: url("chrome://devtools/skin/images/linear-easing-swatch.svg"); +} + +.ruleview-overridden { + text-decoration: line-through solid var(--theme-text-color-alt); +} + +.ruleview-property.ruleview-overridden .ruleview-propertyname { + color: var(--rule-overridden-name-text-color); +} + +.ruleview-property.ruleview-overridden .ruleview-propertyvalue { + color: var(--rule-overridden-value-text-color); +} + +/** + * 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-shapeswatch, +.ruleview-overridden .ruleview-swatch { + display: none; +} + +.ruleview-font-family.used-font { + text-decoration: underline; +} + +.styleinspector-propertyeditor { + border: 1px solid #CCC; + padding: 0; + margin: -1px -3px -1px -1px; +} + +.ruleview-property { + border-left: 3px solid transparent; + clear: both; + padding-left: 28px; + overflow-wrap: break-word; +} + +.ruleview-propertycontainer > * { + vertical-align: middle; +} + +.ruleview-property.ruleview-changed, +.ruleview-property[dirty] { + border-left-color: var(--theme-highlight-green); +} + +.ruleview-highlight > .ruleview-expander, +.ruleview-highlight > .ruleview-namecontainer, +.ruleview-highlight > .ruleview-propertyvaluecontainer, +.ruleview-highlight > .ruleview-rule-source-label, +.ruleview-highlight > .ruleview-selector, +.ruleview-rule-ancestor-data li.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%); +} + +/* @media and @layer rule info element */ +ul.ruleview-rule-ancestor-data { + max-width: 100%; + display: inline-block; + list-style: none; + padding: 0; + margin: 0; +} + +.ruleview-rule-ancestor-data li { + /* When there's a search and this element is highlighted, this prevents the background + color to be applied to the whole width of the parent ul block */ + max-width: max-content; +} + +.ruleview-rule-ancestor-data li.has-tooltip:hover .container-query-declaration { + text-decoration: underline; + text-decoration-color: var(--theme-highlight-blue); + text-decoration-style: dotted; + text-decoration-skip-ink: none; + text-decoration-thickness: 2px; + text-underline-offset: 2px; +} + +.ruleview-rule-ancestor-data li button.open-inspector { + /* There's a space character after the button, so add a 1ch margin-inline-start to be consistent */ + margin-inline: 1ch 0; +} + +.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 { + color: var(--rule-pseudo-class-text-color); +} + +.ruleview-selectorhighlighter { + display: inline-block; + vertical-align: top; + width: 15px; + height: 15px; + margin-left: 5px; + background: url("chrome://devtools/skin/images/highlight-selector.svg") no-repeat 0 0; + background-size: contain; + cursor: pointer; + -moz-context-properties: fill; + fill: var(--theme-icon-dimmed-color); +} + +.ruleview-selectorhighlighter:hover { + fill: var(--theme-icon-color); +} + +.ruleview-selectorhighlighter:active, +.ruleview-selectorhighlighter.highlighted { + fill: var(--theme-icon-checked-color); + /* Since the icon is quite thin, it can be hard to differentiate it + from its regular state. Adding some background helps make it pop a bit */ + background-color: var(--dimmed-highlighter-box-content-color); +} + +#ruleview-add-rule-button::before { + background-image: url("chrome://devtools/skin/images/add.svg"); + background-size: 14px; +} + +#pseudo-class-panel-toggle::before { + content: ":hov"; +} + +#class-panel-toggle::before { + content: ".cls"; +} + +#pseudo-class-panel-toggle::before, +#class-panel-toggle::before { + display: flex; + align-items: center; + justify-content: center; + font-weight: 600; + direction: ltr; +} + +#print-simulation-toggle::before { + background-image: url("chrome://devtools/skin/images/rules-view-print-simulation.svg"); +} + +#color-scheme-simulation-light-toggle::before { + background-image: url("chrome://devtools/skin/images/rules-view-light-mode-simulation.svg"); + -moz-context-properties: fill, stroke; + stroke: currentColor; +} + +#color-scheme-simulation-dark-toggle::before { + background-image: url("chrome://devtools/skin/images/rules-view-dark-mode-simulation.svg"); +} + +.flash-out { + transition: background 1s; +} + +.ruleview-propertyvalue-draggable { + cursor: col-resize; +} + +.ruleview-propertyvalue-dragging { + user-select: none; +} + +.ruleview-propertyvalue-break-spaces { + white-space: break-spaces; +} |