mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-25 11:15:34 +00:00
3f07f4b7e3
Differential Revision: https://phabricator.services.mozilla.com/D42543 --HG-- extra : moz-landing-system : lando
814 lines
21 KiB
CSS
814 lines
21 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/. */
|
|
|
|
:root {
|
|
--accessibility-font-size: 12px;
|
|
--accessibility-toolbar-height: 24px;
|
|
--accessibility-toolbar-height-tall: 35px;
|
|
--accessibility-toolbar-focus: var(--blue-50);
|
|
--accessibility-toolbar-focus-alpha30: rgba(10, 132, 255, 0.3);
|
|
--accessibility-full-length-minus-splitter: calc(100% - 1px);
|
|
--accessibility-horizontal-padding: 5px;
|
|
--accessibility-horizontal-indent: 20px;
|
|
--accessibility-properties-item-width: calc(100% - var(--accessibility-horizontal-indent));
|
|
--accessibility-tree-height: calc(100vh - var(--accessibility-toolbar-height) * 2 - 1px);
|
|
--accessibility-arrow-horizontal-padding: 4px;
|
|
--accessibility-tree-row-height: 21px;
|
|
--accessibility-unfocused-tree-focused-node-background: var(--grey-20);
|
|
--accessibility-unfocused-tree-focused-node-twisty-fill: var(--theme-icon-dimmed-color);
|
|
--accessibility-link-color: var(--blue-60);
|
|
--accessibility-link-color-active: var(--blue-70);
|
|
--accessibility-body-background-a90: rgba(255, 255, 255, 0.9);
|
|
--accessibility-code-background: var(--grey-20);
|
|
}
|
|
|
|
:root.theme-dark {
|
|
--accessibility-unfocused-tree-focused-node-background: var(--grey-70);
|
|
--accessibility-unfocused-tree-focused-node-twisty-fill: var(--theme-selection-color);
|
|
--accessibility-link-color: var(--theme-highlight-blue);
|
|
--accessibility-link-color-active: var(--blue-40);
|
|
--accessibility-body-background-a90: rgba(42, 42, 46, 0.9);
|
|
--accessibility-code-background: var(--grey-70);
|
|
}
|
|
|
|
/* General */
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
:root .flash-out {
|
|
animation: flash-out 0.5s ease-out;
|
|
}
|
|
|
|
:root {
|
|
--theme-popup-border-radius: 0px;
|
|
}
|
|
:root[platform="mac"] {
|
|
--theme-popup-border-radius: 3.5px;
|
|
}
|
|
|
|
@keyframes flash-out {
|
|
from {
|
|
background: var(--theme-contrast-background);
|
|
}
|
|
}
|
|
|
|
.accessible .tree .node .theme-twisty {
|
|
width: var(--accessibility-horizontal-indent);
|
|
}
|
|
|
|
.accessible .tree .node .theme-twisty:not(.open):dir(rtl) {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.accessible .tree .node.focused .theme-twisty,
|
|
.treeTable .treeRow.selected .theme-twisty {
|
|
fill: var(--theme-selection-color);
|
|
}
|
|
|
|
.mainFrame {
|
|
height: 100%;
|
|
color: var(--theme-toolbar-color);
|
|
}
|
|
|
|
.main-panel {
|
|
/* To compenstate for 1px splitter between the tree and sidebar. */
|
|
width: var(--accessibility-full-length-minus-splitter);
|
|
}
|
|
|
|
.devtools-button,
|
|
.toggle-button {
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.mainFrame .devtools-button.devtools-throbber::before,
|
|
.mainFrame .toggle-button.devtools-throbber::before {
|
|
/* Default for .devtools-throbber is set to 1em which is too big for the
|
|
devtools toolbar. */
|
|
height: 8px;
|
|
width: 8px;
|
|
margin-block-end: 1px;
|
|
margin-inline-end: 2px;
|
|
}
|
|
|
|
.split-box.horz {
|
|
height: calc(100vh - var(--accessibility-toolbar-height));
|
|
}
|
|
|
|
.mainFrame .devtools-button,
|
|
.description .devtools-button {
|
|
padding: unset;
|
|
}
|
|
|
|
.mainFrame .devtools-button > .btn-content {
|
|
padding: 2px var(--accessibility-horizontal-padding);
|
|
}
|
|
|
|
.description .devtools-button > .btn-content {
|
|
padding: 7px var(--accessibility-horizontal-padding);
|
|
}
|
|
|
|
.devtools-button:focus,
|
|
.devtools-button > .btn-content:focus,
|
|
.devtools-button::-moz-focus-inner {
|
|
outline: none;
|
|
}
|
|
|
|
.devtools-button:focus > .btn-content:not(.devtools-throbber) {
|
|
outline: 2px solid var(--accessibility-toolbar-focus);
|
|
outline-offset: -2px;
|
|
box-shadow: 0 0 0 2px var(--accessibility-toolbar-focus-alpha30);
|
|
border-radius: 2px;
|
|
-moz-outline-radius: 2px;
|
|
}
|
|
|
|
.devtools-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
font: message-box;
|
|
font-size: var(--accessibility-font-size);
|
|
}
|
|
|
|
/* Similarly to webconsole, add more padding before the toolbar group. */
|
|
.devtools-toolbar .devtools-separator {
|
|
margin-inline: 5px;
|
|
}
|
|
|
|
.devtools-toolbar .accessibility-tree-filters {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
margin-inline-end: 5px;
|
|
}
|
|
|
|
.devtools-toolbar .toolbar-menu-button {
|
|
border-color: transparent;
|
|
padding: 0 3px;
|
|
}
|
|
|
|
.devtools-toolbar .toolbar-menu-button.filters {
|
|
max-width: 100px;
|
|
text-overflow: ellipsis;
|
|
overflow-x: hidden;
|
|
margin-inline-start: 3px;
|
|
}
|
|
|
|
.devtools-toolbar .toolbar-menu-button::after {
|
|
content: "";
|
|
display: inline-block;
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
margin-inline-start: 3px;
|
|
}
|
|
|
|
.devtools-toolbar .toolbar-menu-button.filters::after {
|
|
background: url("chrome://devtools/skin/images/select-arrow.svg") no-repeat;
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.devtools-toolbar .toolbar-menu-button.prefs {
|
|
background-color: transparent;
|
|
height: 18px;
|
|
padding: 0;
|
|
margin-inline-start: auto;
|
|
margin-inline-end: 3px;
|
|
}
|
|
|
|
.devtools-toolbar .toolbar-menu-button.prefs:active:hover {
|
|
background-color: var(--theme-selection-background-hover);
|
|
}
|
|
|
|
.devtools-toolbar .toolbar-menu-button.prefs::after {
|
|
display: none;
|
|
}
|
|
|
|
.devtools-toolbar .toolbar-menu-button.prefs::before {
|
|
background: url("chrome://devtools/skin/images/settings.svg") no-repeat;
|
|
width: 14px;
|
|
height: 14px;
|
|
background-size: contain;
|
|
margin: 0px 1px;
|
|
vertical-align: text-bottom;
|
|
}
|
|
|
|
.devtools-toolbar .badge.toggle-button[disabled],
|
|
.tooltip-container .menuitem > .command[disabled] {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
:root .theme-body .tooltip-container.tooltip-visible[type="doorhanger"] > .tooltip-panel,
|
|
:root .theme-body .tooltip-container.tooltip-visible[type="doorhanger"] > .tooltip-arrow::before {
|
|
border: 1px solid var(--theme-popup-border-color);
|
|
border-radius: var(--theme-popup-border-radius);
|
|
box-shadow: 0 0 4px hsla(210,4%,10%,.2);
|
|
}
|
|
|
|
.tooltip-container .menuitem > .command[role="link"] {
|
|
-moz-appearance: none;
|
|
border: none;
|
|
color: var(--theme-arrowpanel-color);
|
|
background-color: transparent;
|
|
text-align: start;
|
|
width: 100%;
|
|
}
|
|
|
|
/* @remove after release 68 (See Bug 1551574) */
|
|
.devtools-toolbar .beta {
|
|
color: var(--theme-highlight-blue);
|
|
font-size: 80%;
|
|
font-weight: 500;
|
|
margin-inline-end: 3px;
|
|
}
|
|
|
|
#audit-progress-container {
|
|
position: fixed;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 9999;
|
|
background: var(--accessibility-body-background-a90);
|
|
padding-block-start: 30vh;
|
|
font: message-box;
|
|
font-size: 12px;
|
|
font-style: italic;
|
|
}
|
|
|
|
.audit-progress-progressbar {
|
|
width: 30vw;
|
|
}
|
|
|
|
/* Description */
|
|
.description {
|
|
color: var(--theme-toolbar-color);
|
|
font: message-box;
|
|
font-size: calc(var(--accessibility-font-size) + 1px);
|
|
margin: auto;
|
|
padding-top: 15vh;
|
|
width: 50vw;
|
|
}
|
|
|
|
/* To ensure that the message does not look squished in vertical mode, increase its width
|
|
when the toolbox is narrow */
|
|
@media (max-width: 700px) {
|
|
.description {
|
|
width: 80vw;
|
|
}
|
|
}
|
|
|
|
.description .general {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.description img {
|
|
margin-inline-end: 12px;
|
|
flex-basis: 42px;
|
|
flex-shrink: 0;
|
|
-moz-context-properties: fill;
|
|
fill: var(--grey-40);
|
|
}
|
|
|
|
.description .devtools-button {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: auto;
|
|
}
|
|
|
|
.description .link {
|
|
color: var(--accessibility-link-color);
|
|
cursor: pointer;
|
|
outline: 0;
|
|
}
|
|
|
|
.description .link:hover:not(:focus) {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.description .link:focus:not(:active) {
|
|
box-shadow: 0 0 0 2px var(--accessibility-toolbar-focus), 0 0 0 4px var(--accessibility-toolbar-focus-alpha30);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.description .link:active {
|
|
color: var(--accessibility-link-color-active);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* TreeView Customization */
|
|
.treeTable thead, .treeTable tbody {
|
|
display: block;
|
|
}
|
|
|
|
.treeTable tr {
|
|
width: 100%;
|
|
display: table;
|
|
}
|
|
|
|
.treeTable tbody {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.split-box:not(.horz) .treeTable tbody {
|
|
height: var(--accessibility-tree-height);
|
|
}
|
|
|
|
.split-box.horz .treeTable tbody {
|
|
/* Accessibility tree height depends on the height of the controlled panel
|
|
(sidebar) when in horz mode and also has an additional separator. */
|
|
height: calc(var(--accessibility-tree-height) - var(--split-box-controlled-panel-size) - 1px);
|
|
}
|
|
|
|
.treeTable {
|
|
width: 100%;
|
|
}
|
|
|
|
.treeTable .treeRow.highlighted:not(.selected) {
|
|
background-color: var(--theme-selection-background-hover);
|
|
}
|
|
|
|
.treeTable.filtered .treeRow .treeLabelCell {
|
|
/* Unset row indentation when the tree is filtered. */
|
|
padding-inline-start: var(--accessibility-arrow-horizontal-padding);
|
|
}
|
|
|
|
/* When the accesibility tree is filtered, we flatten the tree and want to hide
|
|
the expander icon (▶) for expandable tree rows. */
|
|
.treeTable.filtered .treeRow .treeLabelCell .treeIcon {
|
|
display: none;
|
|
}
|
|
|
|
.treeTable .treeLabelCell {
|
|
min-width: 50%;
|
|
}
|
|
|
|
.treeTable:focus, .treeTable tbody:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
.treeTable::-moz-focus-inner {
|
|
border: 0;
|
|
}
|
|
|
|
.treeTable:not(:focus):not(:focus-within) .treeRow.selected {
|
|
background-color: var(--accessibility-unfocused-tree-focused-node-background);
|
|
}
|
|
|
|
.treeTable:not(:focus):not(:focus-within) .treeRow.selected .theme-twisty {
|
|
fill: var(--accessibility-unfocused-tree-focused-node-twisty-fill);
|
|
}
|
|
|
|
.treeTable:not(:focus):not(:focus-within) .treeRow.selected *,
|
|
.treeTable:not(:focus):not(:focus-within) .treeRow.selected .treeLabelCell:after {
|
|
color: inherit;
|
|
}
|
|
|
|
.treeTable:not(:focus):not(:focus-within) .treeRow.selected .objectBox-string {
|
|
color: var(--string-color);
|
|
}
|
|
|
|
.treeTable > thead {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.treeTable > tbody tr {
|
|
height: var(--accessibility-tree-row-height);
|
|
}
|
|
|
|
.treeTable > tbody td {
|
|
-moz-user-select: none;
|
|
}
|
|
|
|
.treeTable > tbody td > span {
|
|
-moz-user-select: text;
|
|
}
|
|
|
|
.mainFrame .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
|
|
cursor: unset;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.mainFrame .treeTable .treeHeaderRow > .treeHeaderCell:first-child > .treeHeaderCellBox,
|
|
.mainFrame .treeTable .treeHeaderRow > .treeHeaderCell > .treeHeaderCellBox {
|
|
padding: 0;
|
|
padding-inline-start: var(--accessibility-arrow-horizontal-padding);
|
|
}
|
|
|
|
.mainFrame .treeTable .treeHeaderCell {
|
|
width: 50%;
|
|
border-bottom: 1px solid var(--theme-splitter-color);
|
|
background: var(--theme-toolbar-background);
|
|
font: message-box;
|
|
font-size: var(--accessibility-font-size);
|
|
height: var(--accessibility-toolbar-height);
|
|
color: var(--theme-toolbar-color);
|
|
}
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
font: message-box;
|
|
font-size: var(--theme-body-font-size);
|
|
border-radius: 3px;
|
|
padding: 0px 3px;
|
|
margin-inline-start: 5px;
|
|
color: var(--badge-color);
|
|
background-color: var(--badge-background-color);
|
|
border: 1px solid var(--badge-border-color);
|
|
-moz-user-select: none;
|
|
}
|
|
|
|
.badge.audit-badge::before {
|
|
content: "";
|
|
display: inline-block;
|
|
vertical-align: -1px;
|
|
width: 10px;
|
|
height: 10px;
|
|
margin-inline-end: 1px;
|
|
background: url("chrome://devtools/skin/images/alert-tiny.svg") no-repeat;
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* improve alignment in high res (where we can use half pixels) */
|
|
@media (min-resolution: 1.5x) {
|
|
.badge.audit-badge::before {
|
|
vertical-align: -1.5px;
|
|
}
|
|
}
|
|
|
|
.badge.toggle-button {
|
|
color: var(--theme-body-color);
|
|
background-color: var(--badge-interactive-background-color);
|
|
border-color: transparent;
|
|
}
|
|
|
|
.devtools-toolbar .badge.toggle-button:focus,
|
|
.devtools-toolbar .toolbar-menu-button:focus {
|
|
outline: 2px solid var(--accessibility-toolbar-focus);
|
|
outline-offset: -2px;
|
|
box-shadow: 0 0 0 2px var(--accessibility-toolbar-focus-alpha30);
|
|
-moz-outline-radius: 2px;
|
|
}
|
|
|
|
.treeTable:focus-within .treeRow.selected .badges .badge {
|
|
background-color: var(--badge-active-background-color);
|
|
border-color: var(--accessible-active-border-color);
|
|
color: var(--theme-selection-color);
|
|
}
|
|
|
|
.treeTable:not(:focus):not(:focus-within) .treeRow.selected .badges .badge {
|
|
color: var(--badge-color);
|
|
}
|
|
|
|
.badge.toggle-button.checked {
|
|
background-color: var(--badge-active-background-color);
|
|
color: var(--theme-selection-color);
|
|
}
|
|
|
|
/* Avoid having a default dotted border on keyboard focus since we provide focus
|
|
styling*/
|
|
.badge.toggle-button::-moz-focus-inner {
|
|
border: none;
|
|
}
|
|
|
|
/* Right Sidebar */
|
|
.right-sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
white-space: nowrap;
|
|
font: message-box;
|
|
font-size: var(--accessibility-font-size);
|
|
}
|
|
|
|
.split-box:not(.horz) .right-sidebar {
|
|
position: fixed;
|
|
width: inherit;
|
|
height: calc(100vh - (var(--accessibility-toolbar-height)));
|
|
}
|
|
|
|
.right-sidebar ._header {
|
|
background-color: var(--theme-toolbar-background);
|
|
border-bottom: 1px solid var(--theme-splitter-color);
|
|
height: var(--accessibility-toolbar-height);
|
|
line-height: var(--accessibility-toolbar-height);
|
|
padding-inline-start: 14px;
|
|
padding-inline-end: var(--accessibility-arrow-horizontal-padding);
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.right-sidebar ._content {
|
|
font-size: var(--accessibility-font-size);
|
|
flex: 2 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
/* Tree customization */
|
|
.accessible .tree {
|
|
flex: 1;
|
|
height: 100%;
|
|
white-space: nowrap;
|
|
overflow: auto;
|
|
display: block;
|
|
/* Force the properties list to always be displayed in LTR (bug 1575002) */
|
|
direction: ltr;
|
|
}
|
|
|
|
.split-box.horz .accessible .tree {
|
|
width: 100vw;
|
|
}
|
|
|
|
.accessible .tree button {
|
|
display: block;
|
|
}
|
|
|
|
/* NOTE: total height of the node (height + padding + border + margin) must
|
|
be exactly the same as the value of TREE_ROW_HEIGHT constant in
|
|
devtools/client/accessibility/constants.js */
|
|
.accessible .tree .node {
|
|
padding: 0 var(--accessibility-horizontal-indent);
|
|
position: relative;
|
|
display: flex;
|
|
height: var(--accessibility-tree-row-height);
|
|
width: var(--accessibility-properties-item-width);
|
|
cursor: default;
|
|
align-items: center;
|
|
}
|
|
|
|
.accessible .tree:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
.accessible .tree::-moz-focus-inner {
|
|
border: 0;
|
|
}
|
|
|
|
/* Unset tree styles leaking from reps.css */
|
|
.accessible .tree .tree-node:not(.focused):hover {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.accessible .tree:not(:focus) .node.focused {
|
|
background-color: var(--accessibility-unfocused-tree-focused-node-background);
|
|
}
|
|
|
|
.accessible .tree:not(:focus) .node.focused .theme-twisty {
|
|
fill: var(--accessibility-unfocused-tree-focused-node-twisty-fill);
|
|
}
|
|
|
|
.accessible .tree .node:not(.focused):hover {
|
|
background-color: var(--theme-selection-background-hover);
|
|
}
|
|
|
|
.accessible .tree:focus .node.focused,
|
|
.accessible .tree .tree-node-active .node.focused {
|
|
background-color: var(--theme-selection-background);
|
|
}
|
|
|
|
.accessible .tree:focus .node.focused *,
|
|
.accessible .tree .tree-node-active .node.focused * {
|
|
color: var(--theme-selection-color);
|
|
}
|
|
|
|
/* Invert text selection color in selected rows */
|
|
.accessible .tree:focus .node.focused ::selection,
|
|
.accessible .tree .tree-node-active .node.focused ::selection {
|
|
color: var(--theme-selection-background);
|
|
background-color: var(--theme-selection-color);
|
|
}
|
|
|
|
.accessible .tree:focus .node.focused .open-inspector,
|
|
.accessible .tree .tree-node-active .node.focused .open-inspector {
|
|
background-color: var(--grey-30);
|
|
}
|
|
|
|
.accessible .tree:focus .node.focused:hover .open-inspector,
|
|
.accessible .tree .tree-node-active .node.focused:hover .open-inspector {
|
|
background-color: var(--theme-selection-color);
|
|
}
|
|
|
|
.accessible .tree .tree-node-active .node.focused .open-inspector:focus,
|
|
.accessible .tree .tree-node-active .node.focused:hover .open-inspector:focus {
|
|
background-color: var(--grey-40);
|
|
}
|
|
|
|
.accessible .tree .arrow {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.accessible .tree .object-value {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.accessible .tree .object-delimiter {
|
|
padding-inline-end: var(--accessibility-arrow-horizontal-padding);
|
|
}
|
|
|
|
.accessible .tree .object-label {
|
|
color: var(--theme-highlight-blue);
|
|
}
|
|
|
|
.accessible .tree .objectBox-accessible .accessible-role {
|
|
background-color: var(--badge-background-color);
|
|
color: var(--badge-color);
|
|
border: 1px solid var(--badge-border-color);
|
|
border-radius: 3px;
|
|
padding: 0px 2px;
|
|
margin-inline-start: 5px;
|
|
-moz-user-select: none;
|
|
}
|
|
|
|
.accessible .tree:focus .node.focused .objectBox-accessible .accessible-role,
|
|
.accessible .tree .tree-node-active .node.focused .objectBox-accessible .accessible-role {
|
|
background-color: var(--badge-active-background-color);
|
|
border-color: var(--badge-active-border-color);
|
|
color: var(--theme-selection-color);
|
|
}
|
|
|
|
.accessible .tree:focus .node.focused .open-accessibility-inspector,
|
|
.accessible .tree .tree-node-active .node.focused .open-accessibility-inspector {
|
|
background-color: var(--grey-30);
|
|
}
|
|
|
|
.accessible .tree:focus .node.focused:hover .open-accessibility-inspector,
|
|
.accessible .tree .tree-node-active .node.focused:hover .open-accessibility-inspector {
|
|
background-color: var(--theme-selection-color);
|
|
}
|
|
|
|
.accessible .tree .tree-node-active .node.focused .open-accessibility-inspector:focus,
|
|
.accessible .tree .tree-node-active .node.focused:hover .open-accessibility-inspector:focus {
|
|
background-color: var(--grey-40);
|
|
}
|
|
|
|
.accessible .tree .objectBox-accessible,
|
|
.accessible .tree .objectBox-node {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.accessible .tree .objectBox-accessible .accessible-name,
|
|
.accessible .tree .objectBox-node .attrName {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.accessible .tree .objectBox-accessible .open-accessibility-inspector,
|
|
.accessible .tree .objectBox-node .open-inspector {
|
|
width: 17px;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.accessible .tree .objectBox-object,
|
|
.accessible .tree .objectBox-string,
|
|
.accessible .tree .objectBox-text,
|
|
.accessible .tree .objectBox-table,
|
|
.accessible .tree .objectLink-textNode,
|
|
.accessible .tree .objectLink-event,
|
|
.accessible .tree .objectLink-eventLog,
|
|
.accessible .tree .objectLink-regexp,
|
|
.accessible .tree .objectLink-object,
|
|
.accessible .tree .objectLink-Date,
|
|
.theme-dark .accessible .tree .objectBox-object,
|
|
.theme-light .accessible .tree .objectBox-object {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Styling for accessible details panel when accessible is not available */
|
|
.accessible .info {
|
|
color: var(--theme-body-color);
|
|
font-size: 110%;
|
|
padding-inline-start: var(--accessibility-arrow-horizontal-padding);
|
|
height: var(--accessibility-toolbar-height-tall);
|
|
line-height: var(--accessibility-toolbar-height-tall);
|
|
}
|
|
|
|
.checks-empty {
|
|
font-style: italic;
|
|
padding: 0.5em 20px;
|
|
-moz-user-select: none;
|
|
font-size: 12px;
|
|
white-space: initial;
|
|
}
|
|
|
|
/* Checks */
|
|
.accessibility-check code {
|
|
background-color: var(--accessibility-code-background);
|
|
border-radius: 2px;
|
|
box-decoration-break: clone;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.accessibility-text-label-check .icon {
|
|
display: inline;
|
|
-moz-context-properties: fill;
|
|
vertical-align: top;
|
|
margin-block-start: 2px;
|
|
margin-inline-end: 4px;
|
|
}
|
|
|
|
.accessibility-text-label-check .icon.fail {
|
|
fill: var(--theme-icon-error-color);
|
|
}
|
|
|
|
.accessibility-text-label-check .icon.WARNING {
|
|
fill: var(--theme-icon-warning-color);
|
|
}
|
|
|
|
.accessibility-check,
|
|
.accessibility-color-contrast {
|
|
position: relative;
|
|
display: flex;
|
|
cursor: default;
|
|
height: inherit;
|
|
}
|
|
|
|
.accessibility-check {
|
|
flex-direction: column;
|
|
padding: 4px var(--accessibility-horizontal-indent);
|
|
line-height: 20px;
|
|
}
|
|
|
|
.accessibility-check-header {
|
|
margin: 0;
|
|
font-weight: bold;
|
|
font-size: var(--accessibility-font-size);
|
|
line-height: var(--accessibility-toolbar-height);
|
|
}
|
|
|
|
.accessibility-check-annotation {
|
|
display: inline;
|
|
margin: 0;
|
|
white-space: normal;
|
|
color: var(--badge-color);
|
|
}
|
|
|
|
.accessibility-check-annotation .link {
|
|
color: var(--accessibility-link-color);
|
|
cursor: pointer;
|
|
outline: 0;
|
|
white-space: nowrap;
|
|
font-style: normal;
|
|
}
|
|
|
|
.accessibility-check-annotation .link:hover:not(:focus) {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.accessibility-check-annotation .link:focus:not(:active) {
|
|
box-shadow: 0 0 0 2px var(--accessibility-toolbar-focus), 0 0 0 4px var(--accessibility-toolbar-focus-alpha30);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.accessibility-check-annotation .link:active {
|
|
color: var(--accessibility-link-color-active);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.accessibility-color-contrast .accessibility-contrast-value:not(:empty) {
|
|
margin-block-end: 4px;
|
|
}
|
|
|
|
.accessibility-color-contrast .accessibility-contrast-value:not(:empty):before {
|
|
content: "";
|
|
height: 14px;
|
|
width: 14px;
|
|
display: inline-flex;
|
|
background-color: var(--accessibility-contrast-color);
|
|
box-shadow: 0 0 0 1px var(--grey-40), 6px 5px var(--accessibility-contrast-bg), 6px 5px 0 1px var(--grey-40);
|
|
margin-inline-end: 11px;
|
|
}
|
|
|
|
.accessibility-color-contrast .accessibility-contrast-value:first-child:not(:empty):before {
|
|
margin-inline-start: 1px;
|
|
}
|
|
|
|
.accessibility-color-contrast .accessibility-contrast-value:not(:first-child):not(:empty):before {
|
|
margin-inline-start: 4px;
|
|
}
|
|
|
|
.accessibility-color-contrast .accessibility-color-contrast-label:after {
|
|
content: ":";
|
|
}
|
|
|
|
.accessibility-color-contrast .accessibility-color-contrast-label,
|
|
.accessibility-color-contrast .accessibility-color-contrast-separator:before {
|
|
margin-inline-end: 3px;
|
|
}
|