mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-01 17:57:36 +08:00
This patch changes the styles for the “Emulated Devices” h1 to prevent it from wrapping to the next line and clashing with the "Add custom device” button when the DevTools window is resized. Before: https://i.gyazo.com/62dd0014097d6c9dc6246fa9f6aaae1a.png After: https://i.gyazo.com/0b67cba2d380b3b73b5b56ed755670a9.png R=mathias@chromium.org Fixed: 1137733 Change-Id: Ic5ba53d5434da309327d9cf8101d916aa3c2761f Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2493185 Commit-Queue: Mathias Bynens <mathias@chromium.org> Reviewed-by: Mathias Bynens <mathias@chromium.org>
202 lines
3.1 KiB
CSS
202 lines
3.1 KiB
CSS
/*
|
|
* Copyright (c) 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.
|
|
*/
|
|
|
|
.settings-window-main {
|
|
color: rgb(48 57 66);
|
|
background-color: white;
|
|
padding: 11px 0 0 0;
|
|
}
|
|
|
|
.settings-content {
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
margin: 8px 8px 8px 0;
|
|
padding: 0 4px;
|
|
flex: auto;
|
|
}
|
|
|
|
.settings-footnote {
|
|
border-top: 1px solid #eee;
|
|
margin: 0;
|
|
padding: 12px;
|
|
}
|
|
|
|
.settings-container {
|
|
width: 100%;
|
|
column-width: 288px;
|
|
}
|
|
|
|
.settings-block {
|
|
display: block;
|
|
padding-bottom: 9px;
|
|
width: 288px;
|
|
break-inside: avoid;
|
|
}
|
|
|
|
.settings-tab.settings-container {
|
|
column-width: 308px;
|
|
}
|
|
|
|
.settings-tab .settings-block {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.settings-line {
|
|
padding-bottom: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.settings-key-cell {
|
|
display: inline-block;
|
|
width: 153px;
|
|
white-space: nowrap;
|
|
text-align: right;
|
|
vertical-align: middle;
|
|
padding-right: 6px;
|
|
}
|
|
|
|
.settings-cell {
|
|
display: inline-block;
|
|
width: 135px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.settings-section-title {
|
|
font-size: 120%;
|
|
text-align: left;
|
|
}
|
|
|
|
.settings-key {
|
|
padding: 0.1em 0.6em;
|
|
border: 1px solid #ccc;
|
|
font-size: 11px;
|
|
background-color: #f7f7f7;
|
|
color: #333;
|
|
box-shadow: 0 1px 0 rgb(0 0 0 / 20%), 0 0 0 2px #fff inset;
|
|
border-radius: 3px;
|
|
display: inline-block;
|
|
margin: 0 0.1em;
|
|
text-shadow: 0 1px 0 #fff;
|
|
line-height: 1.5;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.settings-combine-keys,
|
|
.settings-key-delimiter {
|
|
font-size: 9px;
|
|
}
|
|
|
|
.settings-combine-keys {
|
|
margin: 0 0.3em;
|
|
}
|
|
|
|
.settings-key-delimiter {
|
|
margin: 0 0.5em;
|
|
display: none;
|
|
}
|
|
|
|
fieldset {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
}
|
|
|
|
.settings-tab label {
|
|
padding-right: 4px;
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.settings-tab p {
|
|
margin: 12px 0;
|
|
}
|
|
|
|
.settings-block p p {
|
|
padding-left: 30px;
|
|
}
|
|
|
|
.settings-experiments-warning-subsection-warning {
|
|
color: rgb(200 0 0);
|
|
}
|
|
|
|
.settings-experiments-warning-subsection-message {
|
|
color: inherit;
|
|
}
|
|
|
|
.settings-content input[type=checkbox] {
|
|
margin: 1px 7px 1px 2px;
|
|
}
|
|
|
|
.settings-window-title {
|
|
font-size: 18px;
|
|
color: rgb(48 57 66);
|
|
padding: 0 0 5px 13px;
|
|
}
|
|
|
|
.settings-container-wrapper {
|
|
position: absolute;
|
|
top: 31px;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
overflow: auto;
|
|
padding-top: 9px;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
|
|
.settings-tab.settings-content {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.settings-tab-container {
|
|
flex: auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.settings-tab-container header {
|
|
padding: 0 0 6px;
|
|
}
|
|
|
|
#experiments-tab-content .settings-container {
|
|
column-width: 470px;
|
|
}
|
|
|
|
#experiments-tab-content .settings-block {
|
|
width: 470px;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.settings-tab-container header > h1 {
|
|
font-size: 18px;
|
|
font-weight: normal;
|
|
margin: 0;
|
|
padding-bottom: 3px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.settings-tab .settings-section-title {
|
|
margin-left: -20px;
|
|
color: #222;
|
|
}
|
|
|
|
.settings-tab .settings-block label:hover {
|
|
color: #222;
|
|
}
|
|
|
|
.settings-tab .settings-block fieldset:disabled label:hover {
|
|
color: inherit;
|
|
}
|
|
|
|
.settings-tab select {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.settings-experiment-unstable {
|
|
display: block;
|
|
color: #888;
|
|
}
|