mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-01 01:38:07 +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>
108 lines
2.4 KiB
CSS
108 lines
2.4 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.
|
|
*/
|
|
|
|
:host {
|
|
user-select: none;
|
|
padding: 4px 12px 12px 12px;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.shadow-editor-field:last-of-type {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.shadow-editor-field {
|
|
height: 24px;
|
|
margin-top: 8px;
|
|
font-size: 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.shadow-editor-flex-field {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.shadow-editor-field.shadow-editor-blur-field {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.shadow-editor-2D-slider {
|
|
position: absolute;
|
|
height: 88px;
|
|
width: 88px;
|
|
border: 1px solid rgba(0, 0, 0, 0.14);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.shadow-editor-label {
|
|
display: inline-block;
|
|
width: 52px;
|
|
height: 24px;
|
|
line-height: 24px;
|
|
margin-right: 8px;
|
|
text-align: right;
|
|
}
|
|
|
|
.shadow-editor-button-left, .shadow-editor-button-right {
|
|
width: 74px;
|
|
height: 24px;
|
|
padding: 3px 7px;
|
|
line-height: 16px;
|
|
border: 1px solid rgba(0, 0, 0, 0.14);
|
|
color: #333;
|
|
background-color: #ffffff;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.shadow-editor-button-left {
|
|
border-radius: 2px 0 0 2px;
|
|
}
|
|
|
|
.shadow-editor-button-right {
|
|
border-radius: 0 2px 2px 0;
|
|
border-left-width: 0;
|
|
}
|
|
|
|
.shadow-editor-button-left:hover, .shadow-editor-button-right:hover {
|
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.shadow-editor-button-left:focus, .shadow-editor-button-right:focus {
|
|
background-color: #eeeeee;
|
|
}
|
|
|
|
.shadow-editor-button-left.enabled, .shadow-editor-button-right.enabled, -theme-preserve {
|
|
background-color: #4285F4;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.shadow-editor-button-left.enabled:focus, .shadow-editor-button-right.enabled:focus, -theme-preserve {
|
|
background-color: #3B78E7;
|
|
}
|
|
|
|
.shadow-editor-text-input {
|
|
width: 52px;
|
|
margin-right: 8px;
|
|
text-align: right;
|
|
box-shadow: var(--focus-ring-inactive-shadow);
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
.shadow-editor-button-left:hover,
|
|
.shadow-editor-button-right:hover
|
|
.shadow-editor-button-left.enabled,
|
|
.shadow-editor-button-right.enabled,
|
|
.shadow-editor-button-left.enabled:focus,
|
|
.shadow-editor-button-right.enabled:focus {
|
|
forced-color-adjust: none;
|
|
background-color: Highlight;
|
|
color: HighlightText;
|
|
}
|
|
}
|