mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-09 05:08:28 +08:00
This CL turns on the use_theme_colors stylelint rule which enforces that any colors use variables defined in our codebase. There are many, many violations, unsurprisingly (about 1500), so for now I have disabled every single violation. The goal of the dark mode migration will be in part to remove all violations of this rule. Additionally, new code going forwards should adhere to the rule and not add the comment to disable the warning. Bug: 1152736 Change-Id: I51372724ea51485daef3d4f75b7d3f60a7c8016f No-Presubmit: true Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2671323 Commit-Queue: Jack Franklin <jacktfranklin@chromium.org> Reviewed-by: Paul Lewis <aerotwist@chromium.org>
191 lines
3.3 KiB
CSS
191 lines
3.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 overrides */
|
|
|
|
:host {
|
|
padding: 0;
|
|
}
|
|
|
|
ol.tree-outline {
|
|
overflow: auto;
|
|
flex: auto;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.tree-outline li {
|
|
height: 36px;
|
|
padding-right: 5px;
|
|
margin-top: 1px;
|
|
line-height: 34px;
|
|
border-top: 1px solid transparent;
|
|
}
|
|
|
|
.tree-outline li:not(.parent)::before {
|
|
display: none;
|
|
}
|
|
|
|
:host-context(.some-expandable) .tree-outline li:not(.parent) {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.tree-outline li.profiles-tree-section {
|
|
height: 18px;
|
|
padding: 0 10px;
|
|
white-space: nowrap;
|
|
margin-top: 1px;
|
|
color: rgb(92 110 129); /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
text-shadow: rgb(255 255 255 / 75%) 0 1px 0; /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
line-height: 18px;
|
|
}
|
|
|
|
.tree-outline li.profiles-tree-section::before {
|
|
display: none;
|
|
}
|
|
|
|
.tree-outline ol {
|
|
overflow: hidden;
|
|
}
|
|
/* Generic items styling */
|
|
|
|
.title-container > .save-link {
|
|
text-decoration: underline;
|
|
margin-left: auto;
|
|
display: none;
|
|
}
|
|
|
|
li.selected .title-container > .save-link {
|
|
display: block;
|
|
cursor: pointer;
|
|
}
|
|
|
|
li .icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
margin-top: 1px;
|
|
margin-right: 3px;
|
|
flex: none;
|
|
}
|
|
|
|
.tree-outline > .icon {
|
|
margin-left: 16px;
|
|
}
|
|
|
|
li.wait .spinner::before {
|
|
margin: 4px;
|
|
}
|
|
|
|
li.wait.small .spinner::before {
|
|
--dimension: 14px;
|
|
--clip-size: 9px;
|
|
--spinner-size: 2px;
|
|
|
|
margin: 1px;
|
|
}
|
|
|
|
li.wait.selected .spinner::before {
|
|
--spinner-color: #fff;
|
|
}
|
|
|
|
@keyframes spinner-animation {
|
|
from { transform: rotate(0); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
li.small {
|
|
height: 20px;
|
|
}
|
|
|
|
li .titles {
|
|
display: flex;
|
|
flex-direction: column;
|
|
top: 5px;
|
|
line-height: 12px;
|
|
padding-bottom: 1px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
flex: auto;
|
|
}
|
|
|
|
li .titles > .title-container {
|
|
display: flex;
|
|
}
|
|
|
|
li.small .titles {
|
|
top: 2px;
|
|
line-height: normal;
|
|
}
|
|
|
|
li:not(.small) .title::after {
|
|
content: "\A";
|
|
white-space: pre;
|
|
}
|
|
|
|
li .subtitle {
|
|
font-size: 80%;
|
|
}
|
|
|
|
li.small .subtitle {
|
|
display: none;
|
|
}
|
|
/* Launcher */
|
|
|
|
.profile-launcher-view-tree-item {
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
.profile-launcher-view-tree-item > .icon {
|
|
width: 8px !important;
|
|
visibility: hidden;
|
|
}
|
|
/* Heap profiles and CPU profiles */
|
|
|
|
.heap-snapshot-sidebar-tree-item .icon {
|
|
content: url(Images/profileIcon.png);
|
|
}
|
|
|
|
.profile-sidebar-tree-item .icon {
|
|
content: url(Images/profileIcon.png);
|
|
}
|
|
|
|
.profile-group-sidebar-tree-item .icon {
|
|
content: url(Images/profileGroupIcon.png);
|
|
}
|
|
|
|
li.small .icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
li.wait .icon {
|
|
content: none;
|
|
}
|
|
|
|
.heap-snapshot-sidebar-tree-item.small .icon {
|
|
content: url(Images/profileSmallIcon.png);
|
|
}
|
|
|
|
.profile-sidebar-tree-item.small .icon {
|
|
content: url(Images/profileSmallIcon.png);
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
.tree-outline li,
|
|
.tree-outline li.profiles-tree-section,
|
|
.tree-outline li:hover .tree-element-title {
|
|
forced-color-adjust: none;
|
|
color: ButtonText;
|
|
text-shadow: unset;
|
|
}
|
|
|
|
.tree-outline:not(.hide-selection-when-blurred) li.selected {
|
|
color: HighlightText;
|
|
}
|
|
}
|