diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-21 11:44:51 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-21 11:44:51 +0000 |
commit | 9e3c08db40b8916968b9f30096c7be3f00ce9647 (patch) | |
tree | a68f146d7fa01f0134297619fbe7e33db084e0aa /devtools/client/themes/computed.css | |
parent | Initial commit. (diff) | |
download | thunderbird-upstream.tar.xz thunderbird-upstream.zip |
Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'devtools/client/themes/computed.css')
-rw-r--r-- | devtools/client/themes/computed.css | 250 |
1 files changed, 250 insertions, 0 deletions
diff --git a/devtools/client/themes/computed.css b/devtools/client/themes/computed.css new file mode 100644 index 0000000000..bf30d08666 --- /dev/null +++ b/devtools/client/themes/computed.css @@ -0,0 +1,250 @@ +/* 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/. */ + + .theme-dark { + --row-striped-background: rgba(255, 255, 255, 0.05); + } + +.theme-light { + --row-striped-background: rgba(247, 247, 247, 0.8); +} + +#sidebar-panel-computedview { + margin: 0; + display: flex; + flex-direction: column; + width: 100%; + height: 100%; +} + +/* Reset the global rotation of the icon done for RTL layout. + Computed view is always LTR */ +#sidebar-panel-computedview .theme-twisty:not(.open):dir(rtl), +#sidebar-panel-computedview .theme-twisty:not([open]):-moz-locale-dir(rtl) { + transform: rotate(-90deg); +} + +#computedview-panel .inspector-tabpanel { + min-width: 0; +} + +#computedview-panel #browser-style-checkbox-label { + overflow: hidden; + text-overflow: ellipsis; +} + +#computed-container { + overflow: 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. */ +#computed-container-focusable { + height: 100%; + outline: none; +} + +#computed-toolbar { + display: flex; + align-items: center; + user-select: none; +} + +#browser-style-checkbox { + /* Bug 1200073 - extra space before the browser styles checkbox so + they aren't squished together in a small window. Put also + an extra space after. */ + margin-inline-start: 5px; + margin-inline-end: 0; +} + +#browser-style-checkbox-label { + white-space: nowrap; + padding-inline-start: 5px; + margin-inline-end: 5px; +} + +#computed-property-container { + user-select: text; + overflow-y: auto; + overflow-x: hidden; + flex: auto; + border-top: 1px solid var(--theme-splitter-color); + margin-top: -1px; +} + +.row-striped { + background: var(--row-striped-background); +} + +.computed-property-hidden { + display: none; +} + +.computed-property-view { + padding: 2px 0px; + padding-inline-start: 5px; + display: flex; + flex-wrap: wrap; +} + +.computed-property-name-container { + width: 230px; +} + +.computed-property-value-container { + display: flex; + flex: 1 1 168px; + overflow: hidden; +} + +.computed-property-name-container > *, +.computed-property-value-container > * { + display: inline-block; + vertical-align: middle; +} + +.computed-property-name { + outline: 0 !important; +} + +.computed-other-property-value::before { + content: ""; + display: inline-block; + vertical-align: -0.5px; + width: 8px; + height: 8px; + margin: 0 1px; + background-image: url(images/arrow-e.svg); + background-repeat: no-repeat; + background-size: contain; + -moz-context-properties: fill; + fill: var(--theme-text-color-inactive); +} + +.computed-other-property-value:dir(rtl)::before { + transform: scaleX(-1); +} + +.computed-property-value { + padding-inline-start: 14px; + outline: 0 !important; +} + +.computed-property-content { + padding-inline-start: 17px; +} + +/* Bug 1360238 - getSelection displays an extra "\n" on multiple sibling block elements. + We rely on this behavior to add an extra "\n" between matched selectors (Bug 1222737). + Therefore we use <div> elements around matched selectors and need this class + to keep them inline. We do that to avoid doing any formatting logic in JS. + Once Bug 1360238 will be fixed, we'll probably have to change the behavior + and remove this class. */ +.fix-get-selection { + display: inline; +} + +.visually-hidden { + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + width: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; +} + +/* From skin */ +.computed-expander { + visibility: hidden; +} + +.computed-expandable { + visibility: visible; +} + +.match { + visibility: hidden; +} + +.matchedselectors > p { + clear: both; + margin: 0; + margin-inline-end: 2px; + padding: 2px; + overflow-x: hidden; + border-style: dotted; + border-color: var(--theme-splitter-color); + border-width: 1px 1px 0 1px; +} + +.matchedselectors > p:last-of-type { + border-bottom-width: 1px; +} + +.matched { + text-decoration: line-through; +} + +.parentmatch { + opacity: 0.5; +} + +#computed-no-results { + height: 100%; +} + +.onlyuserstyles { + cursor: pointer; +} + +.legendKey { + margin: 0 5px; +} + +.computed-link { + padding: 0 3px; + cursor: pointer; + float: inline-end; +} + +/* Take away these two :visited rules to get a core dumper */ +/* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */ + +.computed-link { + text-decoration: underline; + text-decoration-skip-ink: none; +} + +.computed-colorswatch { + border-radius: 50%; + width: 0.9em; + height: 0.9em; + vertical-align: middle; + margin-inline-end: 5px; + display: inline-block; + position: relative; +} + +.computed-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; +} |