X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fdevtools%2Frules.css;fp=LCARStrek%2Fdevtools%2Frules.css;h=84a65baedfda3d25498433c875d47226e0d07814;hp=0000000000000000000000000000000000000000;hb=dc9d5d64a3f915cb832f43050545b432f33504f7;hpb=ecfc58b0361c617fa298d4b1bb69ea2484d37de2 diff --git a/LCARStrek/devtools/rules.css b/LCARStrek/devtools/rules.css new file mode 100644 index 00000000..84a65bae --- /dev/null +++ b/LCARStrek/devtools/rules.css @@ -0,0 +1,522 @@ +/* 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-filter-icon: url(images/magnifying-glass.png); +} + +/* Rule View Tabpanel */ + +.theme-firebug .ruleview { +/* font-family: monospace; + font-size: 11px;*/ +} + +#sidebar-panel-ruleview { + margin: 0; + display: flex; + flex-direction: column; + width: 100%; + /* Bug 1243598 - Reduce the container height by the tab height to make room + for the tabs above. */ + height: calc(100% - 24px); + position: absolute; +} + +/* Rule View Toolbar */ + +#ruleview-toolbar-container { + display: flex; + flex-direction: column; + height: auto; +} + +#ruleview-toolbar { + display: flex; + height: 23px; +} + +#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; +} + +#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, +#noResults { + 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[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; +} + +#noResults { +/* font: message-box;*/ + 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: var(--rule-filter-icon); + 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: #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: 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; +} + */