mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-07 04:26:32 +08:00
Wolfgang Beyer
a09e88e8be
Update the icons used in the frame tree, such that the icons alone already convey info about the respective frames. 3 different icons are being used: top frame, embedded frame and blocked embedded frame. Screenshots: before: https://i.imgur.com/0aI5rLW.png after: https://i.imgur.com/8oziXxg.png Bug: chromium:1093247 Change-Id: Ib606230e8a501c42e8ccbc7d658a567fe4d97951 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2360022 Reviewed-by: Sigurd Schneider <sigurds@chromium.org> Commit-Queue: Wolfgang Beyer <wolfi@chromium.org>
64 lines
1.3 KiB
CSS
64 lines
1.3 KiB
CSS
/*
|
|
* Copyright 2016 The Chromium Authors. All rights reserved.
|
|
* Use of this source code is governed by a BSD-style license that can be
|
|
* found in the LICENSE file.
|
|
*/
|
|
|
|
.tree-outline {
|
|
padding-left: 0;
|
|
color: rgb(90 90 90);
|
|
}
|
|
|
|
.tree-outline > ol {
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.tree-outline li {
|
|
min-height: 20px;
|
|
}
|
|
|
|
li.storage-group-list-item {
|
|
padding: 10px 8px 6px 8px;
|
|
}
|
|
|
|
li.storage-group-list-item:not(:first-child) {
|
|
border-top: 1px solid rgb(230 230 230);
|
|
}
|
|
|
|
li.storage-group-list-item::before {
|
|
display: none;
|
|
}
|
|
|
|
.icons-container .red-icon {
|
|
background-color: rgb(235 57 65);
|
|
}
|
|
|
|
.navigator-file-tree-item {
|
|
background: linear-gradient(45deg, hsl(0deg 0% 50%), hsl(0deg 0% 70%));
|
|
}
|
|
|
|
.navigator-folder-tree-item {
|
|
background: linear-gradient(45deg, hsl(210deg 82% 65%), hsl(210deg 82% 80%));
|
|
}
|
|
|
|
.navigator-script-tree-item {
|
|
background: linear-gradient(45deg, hsl(48deg 70% 50%), hsl(48deg 70% 70%));
|
|
}
|
|
|
|
.navigator-stylesheet-tree-item {
|
|
background: linear-gradient(45deg, hsl(256deg 50% 50%), hsl(256deg 50% 70%));
|
|
}
|
|
|
|
.navigator-image-tree-item,
|
|
.navigator-font-tree-item {
|
|
background: linear-gradient(45deg, hsl(109deg 33% 50%), hsl(109deg 33% 70%));
|
|
}
|
|
|
|
.resource-tree-item {
|
|
background: rgb(90 90 90 / 70%);
|
|
}
|
|
|
|
.window-closed .tree-element-title {
|
|
text-decoration: line-through;
|
|
}
|