mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-08 20:58:24 +08:00
Erik Luo
358c5494a9
- Console Sidebar's icons are now masks, use the same background color as other navigator icons. - Inactive selections used to have the exact same color as toolbar backgrounds, which made them invisible. Now inactive selections in dark theme are brighter. Light (l in hsl) values in dark theme for: ElementsTreeOutline > Navigators/Sidebars > Inactive tree selections Before: 14% > 20% > 20% After: 14% > 20% > 29% Screenshot: https://imgur.com/a/Dn4e1Hv Bug: none Change-Id: I1caf8e53a58352a92d3efc143c55b274246253b6 Reviewed-on: https://chromium-review.googlesource.com/1229196 Reviewed-by: Joel Einbinder <einbinder@chromium.org> Commit-Queue: Erik Luo <luoe@chromium.org> Cr-Original-Commit-Position: refs/heads/master@{#591921} Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src Cr-Mirrored-Commit: d465724a64d535cfcf53176bb68860810a3a7e3b
59 lines
1.1 KiB
CSS
59 lines
1.1 KiB
CSS
/*
|
|
* Copyright (c) 2017 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.
|
|
*/
|
|
|
|
:host {
|
|
overflow: auto;
|
|
background-color: var(--toolbar-bg-color);
|
|
}
|
|
|
|
.tree-outline-disclosure {
|
|
max-width: 100%;
|
|
padding-left: 6px;
|
|
}
|
|
|
|
.count {
|
|
flex: none;
|
|
margin: 0 8px;
|
|
}
|
|
|
|
[is=ui-icon] {
|
|
margin: 0 5px;
|
|
}
|
|
|
|
[is=ui-icon].icon-mask {
|
|
background-color: #555;
|
|
}
|
|
|
|
[is=ui-icon].icon-warning {
|
|
background: linear-gradient(45deg, hsla(48, 100%, 50%, 1), hsla(48, 70%, 50%, 1));
|
|
}
|
|
|
|
li {
|
|
height: 24px;
|
|
}
|
|
|
|
li .largeicon-navigator-file {
|
|
background: linear-gradient(45deg, hsl(48, 70%, 50%), hsl(48, 70%, 70%));
|
|
margin: 0;
|
|
}
|
|
|
|
li .largeicon-navigator-folder {
|
|
background: linear-gradient(45deg, hsl(210, 82%, 65%), hsl(210, 82%, 80%));
|
|
margin: -3px -3px 0 -5px;
|
|
}
|
|
|
|
.tree-element-title {
|
|
flex-shrink: 100;
|
|
flex-grow: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.tree-outline li:hover:not(.selected) .selection {
|
|
display: block;
|
|
background-color: rgba(56, 121, 217, 0.1);
|
|
}
|