Files
react-native-devtools-frontend/front_end/settings/settingsScreen.css
T
Luke Swiderski 0bb88ca7c1 Removed border-bottom from header, added border-top to container wrapper
In order to stop the contents of settings-container-wrapper from scrolling over its parent header div when minimum font size is set to huge, I removed the border-bottom from the header element and instead added the same border to the container-wrapper top.  It looks exactly the same and solves the issue.

Added my name to the AUTHORS file

R=mathias@chromium.org

Screenshot before: https://imgur.com/a/izuiGha
Screenshot after:  https://imgur.com/a/lctJKj3

Bug: 1133677
Change-Id: I79c99dd04baf34a9a6c9fe6f623cf7f4964965b1
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2491926
Commit-Queue: Mathias Bynens <mathias@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
2020-10-26 13:28:05 +00:00

201 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;
}
.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;
}