mirror of
https://github.com/HeyPuter/firefox.git
synced 2026-11-15 05:00:02 -10:00
Alexandre Poirot
e162022851
This css rules comes from ancient time and couldn't find the reason why this was added. This is actually the immediate children of the project root which are misaligned. That get an extra padding that make them look like they are in a sub folder. I do not see the value of adding an extra padding. We still have some margin even after removing it. Differential Revision: https://phabricator.services.mozilla.com/D150545
86 lines
2.0 KiB
CSS
86 lines
2.0 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/. */
|
|
|
|
/* We can remove the outline since we do add our own focus style on nodes */
|
|
.tree:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.tree.inline {
|
|
display: inline-block;
|
|
}
|
|
|
|
.tree.nowrap {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tree.noselect {
|
|
user-select: none;
|
|
}
|
|
|
|
.tree .tree-node {
|
|
display: flex;
|
|
}
|
|
|
|
.tree .tree-node:not(.focused):hover {
|
|
background-color: var(--theme-selection-background-hover);
|
|
}
|
|
|
|
.tree-indent {
|
|
display: inline-block;
|
|
width: 12px;
|
|
margin-inline-start: 3px;
|
|
border-inline-start: 1px solid #a2d1ff;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tree-node[data-expandable="false"] .tree-last-indent {
|
|
/* The 13px value is taken from the total width and margins of the arrow
|
|
element of expandables nodes (10px width + 3px margins). That way the
|
|
node's text are indented the same for both expandable and non-expandable
|
|
nodes */
|
|
margin-inline-end: 13px;
|
|
}
|
|
|
|
.tree .tree-node[data-expandable="true"] {
|
|
cursor: default;
|
|
}
|
|
|
|
.tree-node button.arrow {
|
|
mask: url("chrome://devtools/content/debugger/images/arrow.svg") no-repeat center;
|
|
mask-size: 10px;
|
|
vertical-align: -1px;
|
|
width: 10px;
|
|
height: 10px;
|
|
border: 0;
|
|
padding: 0;
|
|
margin-inline-end: 4px;
|
|
transform-origin: center center;
|
|
transition: transform 125ms var(--animation-curve);
|
|
background-color: var(--theme-icon-dimmed-color);
|
|
}
|
|
|
|
.tree-node button.arrow:not(.expanded) {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
html[dir="rtl"] .tree-node button.arrow:not(.expanded) {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.tree .tree-node.focused {
|
|
color: var(--theme-selection-color);
|
|
background-color: var(--theme-selection-background);
|
|
}
|
|
|
|
/* Invert text selection color in selected rows */
|
|
.tree .tree-node.focused ::selection {
|
|
color: var(--theme-selection-background);
|
|
background-color: var(--theme-selection-color);
|
|
}
|
|
|
|
.tree-node.focused button.arrow {
|
|
background-color: currentColor;
|
|
}
|