mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-25 11:15:34 +00:00
ac9c3d58a3
Differential Revision: https://phabricator.services.mozilla.com/D43217 --HG-- extra : moz-landing-system : lando
242 lines
5.1 KiB
CSS
242 lines
5.1 KiB
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/. */
|
|
|
|
#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);
|
|
}
|
|
|
|
#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(--theme-body-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 {
|
|
overflow-x: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
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 {
|
|
overflow-x: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
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 {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* 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: rgba(128,128,128,0.4);
|
|
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: right;
|
|
}
|
|
|
|
/* Workaround until float: inline-end; is enabled by default */
|
|
.computed-link:dir(rtl) {
|
|
float: left;
|
|
}
|
|
|
|
/* Take away these two :visited rules to get a core dumper */
|
|
/* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */
|
|
|
|
.computed-link,
|
|
.computed-link:visited {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.computed-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.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;
|
|
}
|