mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-13 01:54:52 +08:00
Kham Udom
82fae3cc60
The patch fixes the toggle buttons for animation speed and the box shadow type, inside the shadow editor. Set opacity on disabled color. They are dimmed in places like the text prompt in the Coverage panel and inputs and button in the Sensors panel. Fixed the hover state in the Request blocking panel. Where the hover gradient is removed and background is set to Highlight. Before: https://imgur.com/a/JHAzhS5 After: https://imgur.com/a/RTbiYad Bug: 1048378 Change-Id: I5996548ee43dd8e866e466860dcf601d232f9e5c Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2070664 Commit-Queue: Kham Udom <khamu@microsoft.com> Reviewed-by: Kalon Hinds <kahinds@microsoft.com>
120 lines
2.2 KiB
CSS
120 lines
2.2 KiB
CSS
/*
|
|
* Copyright 2015 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.
|
|
*/
|
|
|
|
.list {
|
|
flex: auto 0 1;
|
|
overflow-y: auto;
|
|
border: 1px solid rgb(231, 231, 231);
|
|
flex-direction: column;
|
|
}
|
|
|
|
.list-separator {
|
|
background: rgb(231, 231, 231);
|
|
height: 1px;
|
|
}
|
|
|
|
.list-item {
|
|
flex: none;
|
|
min-height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.list-item:hover {
|
|
background: hsl(0, 0%, 96%);
|
|
}
|
|
|
|
.list-widget-input-validation-error {
|
|
color: var(--input-validation-error);
|
|
margin: 0 5px;
|
|
}
|
|
|
|
.controls-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
align-items: stretch;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.controls-gradient {
|
|
flex: 0 1 50px;
|
|
}
|
|
|
|
.list-item:hover .controls-gradient {
|
|
background-image: linear-gradient(90deg, transparent, hsl(0, 0%, 96%));
|
|
}
|
|
|
|
.controls-buttons {
|
|
flex: none;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
pointer-events: auto;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.list-item:hover .controls-buttons {
|
|
background-color: hsl(0, 0%, 96%);
|
|
visibility: visible;
|
|
}
|
|
|
|
.editor-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
flex: none;
|
|
background: hsl(0, 0%, 96%);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.editor-content {
|
|
flex: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.editor-buttons {
|
|
flex: none;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
padding: 5px;
|
|
}
|
|
|
|
.editor-buttons > button {
|
|
flex: none;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.editor-content input {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.editor-content input.error-input {
|
|
background-color: white;
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
.list-item:hover .controls-buttons {
|
|
background-color: Canvas;
|
|
}
|
|
.list-item:hover {
|
|
forced-color-adjust: none;
|
|
background: Highlight;
|
|
}
|
|
.list-item:hover * {
|
|
color: HighlightText;
|
|
}
|
|
.list-item:hover .controls-gradient {
|
|
background-image: unset;
|
|
}
|
|
}
|