mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-10 21:54:47 +08:00
Jack Franklin
ba5e30c6ac
The new components weren't getting the scrollbar styles because of ShadowDOM, so I've split them into a file that can then be adopted from within a component. See bug for before, and https://imgur.com/a/ba7W4xL for after. Checked also that this still works in scrollbars not in a ShadowDOM. Fixed: chromium:1176554 Change-Id: I823ed80335c73ae681b172823ea72053e2d3a2ae Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2687495 Commit-Queue: Jack Franklin <jacktfranklin@chromium.org> Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
585 lines
15 KiB
CSS
585 lines
15 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.
|
|
*/
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
/* This is required for correct sizing of flex items because we rely
|
|
* on an old version of the flexbox spec. */
|
|
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
:root {
|
|
--monospace-font-size: 10px;
|
|
--monospace-font-family: monospace;
|
|
--source-code-font-size: 11px;
|
|
--source-code-font-family: monospace;
|
|
}
|
|
|
|
:focus {
|
|
outline-width: 0;
|
|
}
|
|
|
|
.platform-mac,
|
|
:host-context(.platform-mac) {
|
|
--monospace-font-size: 11px;
|
|
--monospace-font-family: menlo, monospace;
|
|
--source-code-font-size: 11px;
|
|
--source-code-font-family: menlo, monospace;
|
|
}
|
|
|
|
.platform-windows,
|
|
:host-context(.platform-windows) {
|
|
--monospace-font-size: 12px;
|
|
--monospace-font-family: consolas, lucida console, courier new, monospace;
|
|
--source-code-font-size: 12px;
|
|
--source-code-font-family: consolas, lucida console, courier new, monospace;
|
|
}
|
|
|
|
.platform-linux,
|
|
:host-context(.platform-linux) {
|
|
--monospace-font-size: 11px;
|
|
--monospace-font-family: dejavu sans mono, monospace;
|
|
--source-code-font-size: 11px;
|
|
--source-code-font-family: dejavu sans mono, monospace;
|
|
}
|
|
|
|
.monospace {
|
|
font-family: var(--monospace-font-family);
|
|
font-size: var(--monospace-font-size) !important;
|
|
}
|
|
|
|
.source-code {
|
|
font-family: var(--source-code-font-family);
|
|
font-size: var(--source-code-font-size) !important;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
img {
|
|
-webkit-user-drag: none;
|
|
}
|
|
|
|
iframe,
|
|
a img {
|
|
border: none;
|
|
}
|
|
|
|
.fill {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
iframe.fill {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.widget {
|
|
position: relative;
|
|
flex: auto;
|
|
contain: style;
|
|
}
|
|
|
|
.hbox {
|
|
display: flex;
|
|
flex-direction: row !important;
|
|
position: relative;
|
|
}
|
|
|
|
.vbox {
|
|
display: flex;
|
|
flex-direction: column !important;
|
|
position: relative;
|
|
}
|
|
|
|
.view-container > .toolbar {
|
|
border-bottom: 1px solid #eee; /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
}
|
|
|
|
.flex-auto {
|
|
flex: auto;
|
|
}
|
|
|
|
.flex-none {
|
|
flex: none;
|
|
}
|
|
|
|
.flex-centered {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.overflow-auto {
|
|
overflow: auto;
|
|
}
|
|
|
|
iframe.widget {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.highlighted-search-result {
|
|
border-radius: 1px;
|
|
background-color: rgb(255 255 0 / 80%); /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
outline: 1px solid rgb(255 255 0 / 80%);
|
|
}
|
|
|
|
.-theme-with-dark-background .highlighted-search-result,
|
|
:host-context(.-theme-with-dark-background) .highlighted-search-result {
|
|
background-color: hsl(133deg 100% 30%);
|
|
color: #333;
|
|
}
|
|
|
|
.link {
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
color: var(--color-link);
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select {
|
|
/* Form elements do not automatically inherit font style from ancestors. */
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
}
|
|
|
|
select option,
|
|
select optgroup,
|
|
input {
|
|
background-color: var(--color-background);
|
|
}
|
|
|
|
input {
|
|
color: inherit;
|
|
}
|
|
|
|
input::placeholder {
|
|
color: rgb(0 0 0 / 54%); /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
}
|
|
|
|
:host-context(.-theme-with-dark-background) input[type="checkbox"]:not(.-theme-preserve) {
|
|
filter: invert(80%);
|
|
}
|
|
|
|
.harmony-input:not([type]),
|
|
.harmony-input[type=number],
|
|
.harmony-input[type=text] {
|
|
padding: 3px 6px;
|
|
height: 24px;
|
|
border: none;
|
|
box-shadow: var(--focus-ring-inactive-shadow);
|
|
}
|
|
|
|
.harmony-input:not([type]).error-input,
|
|
.harmony-input[type=number].error-input,
|
|
.harmony-input[type=text].error-input,
|
|
.harmony-input:not([type]):invalid,
|
|
.harmony-input[type=number]:invalid,
|
|
.harmony-input[type=text]:invalid {
|
|
box-shadow: 0 0 0 1px #ff1a00; /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
}
|
|
|
|
.harmony-input:not([type]):not(.error-input):not(:invalid):hover,
|
|
.harmony-input[type=number]:not(.error-input):not(:invalid):hover,
|
|
.harmony-input[type=text]:not(.error-input):not(:invalid):hover {
|
|
box-shadow: var(--focus-ring-inactive-shadow);
|
|
}
|
|
|
|
.harmony-input:not([type]):not(.error-input):not(:invalid):focus,
|
|
.harmony-input[type=number]:not(.error-input):not(:invalid):focus,
|
|
.harmony-input[type=text]:not(.error-input):not(:invalid):focus {
|
|
box-shadow: var(--focus-ring-active-shadow);
|
|
}
|
|
|
|
.highlighted-search-result.current-search-result {
|
|
border-radius: 1px;
|
|
padding: 1px;
|
|
margin: -1px;
|
|
background-color: rgb(255 127 0 / 80%); /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
}
|
|
|
|
.dimmed {
|
|
opacity: 60%;
|
|
}
|
|
|
|
.editing {
|
|
box-shadow: var(--drop-shadow);
|
|
background-color: var(--color-background);
|
|
text-overflow: clip !important;
|
|
padding-left: 2px;
|
|
margin-left: -2px;
|
|
padding-right: 2px;
|
|
margin-right: -2px;
|
|
margin-bottom: -1px;
|
|
padding-bottom: 1px;
|
|
opacity: 100% !important;
|
|
}
|
|
|
|
.editing,
|
|
.editing * {
|
|
color: #222 !important; /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.chrome-select {
|
|
appearance: none;
|
|
user-select: none;
|
|
border: 1px solid rgb(0 0 0 / 20%); /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
border-radius: 2px;
|
|
color: #333; /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
font: inherit;
|
|
margin: 0;
|
|
outline: none;
|
|
padding-right: 20px;
|
|
padding-left: 6px;
|
|
background-image: url(Images/chromeSelect.svg);
|
|
background-color: hsl(0deg 0% 98%); /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
background-position: right center;
|
|
background-repeat: no-repeat;
|
|
min-height: 24px;
|
|
min-width: 80px;
|
|
background-size: 15px;
|
|
}
|
|
|
|
.chrome-select:disabled {
|
|
opacity: 38%;
|
|
}
|
|
|
|
:host-context(.-theme-with-dark-background) .chrome-select {
|
|
background-image: url(Images/chromeSelectDark.svg);
|
|
}
|
|
|
|
.chrome-select:enabled:active,
|
|
.chrome-select:enabled:focus,
|
|
.chrome-select:enabled:hover {
|
|
background-color: hsl(0deg 0% 96%); /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
box-shadow: 0 1px 2px rgb(0 0 0 / 10%); /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
}
|
|
|
|
.chrome-select:enabled:active {
|
|
background-color: #f2f2f2; /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
}
|
|
|
|
.chrome-select:enabled:focus {
|
|
border-color: transparent;
|
|
box-shadow: 0 1px 2px rgb(0 0 0 / 10%), 0 0 0 2px rgb(66 133 244 / 40%); /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
}
|
|
|
|
.chrome-select-label {
|
|
margin: 0 22px;
|
|
flex: none;
|
|
}
|
|
|
|
.chrome-select-label p {
|
|
margin-top: 0;
|
|
color: #808080; /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
}
|
|
|
|
.chrome-select optgroup,
|
|
.chrome-select option {
|
|
background-color: #eee; /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
color: #222; /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
}
|
|
|
|
.gray-info-message {
|
|
text-align: center;
|
|
font-style: italic;
|
|
padding: 6px;
|
|
color: #888; /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
white-space: nowrap;
|
|
}
|
|
|
|
span[is=dt-icon-label] {
|
|
flex: none;
|
|
}
|
|
|
|
.full-widget-dimmed-banner a {
|
|
color: inherit;
|
|
}
|
|
|
|
.full-widget-dimmed-banner {
|
|
color: #777; /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
background-color: var(--color-background);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: 20px;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
font-size: 13px;
|
|
overflow: auto;
|
|
z-index: 500;
|
|
}
|
|
|
|
[is=ui-icon] {
|
|
display: inline-block;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.-theme-with-dark-background [is=ui-icon].icon-invert,
|
|
:host-context(.-theme-with-dark-background) [is=ui-icon].icon-invert {
|
|
filter: invert(80%) hue-rotate(180deg);
|
|
}
|
|
|
|
[is=ui-icon].icon-mask {
|
|
background-color: rgb(110 110 110); /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
-webkit-mask-position: var(--spritesheet-position);
|
|
}
|
|
|
|
[is=ui-icon]:not(.icon-mask) {
|
|
background-position: var(--spritesheet-position);
|
|
}
|
|
|
|
.spritesheet-smallicons:not(.icon-mask) {
|
|
background-image: url(Images/smallIcons.svg);
|
|
}
|
|
|
|
.spritesheet-smallicons.icon-mask {
|
|
-webkit-mask-image: url(Images/smallIcons.svg);
|
|
}
|
|
|
|
.spritesheet-largeicons:not(.icon-mask) {
|
|
background-image: url(Images/largeIcons.svg);
|
|
}
|
|
|
|
.spritesheet-largeicons.icon-mask {
|
|
-webkit-mask-image: url(Images/largeIcons.svg);
|
|
}
|
|
|
|
.spritesheet-mediumicons:not(.icon-mask) {
|
|
background-image: url(Images/mediumIcons.svg);
|
|
}
|
|
|
|
.spritesheet-mediumicons.icon-mask {
|
|
-webkit-mask-image: url(Images/mediumIcons.svg);
|
|
}
|
|
|
|
.spritesheet-arrowicons {
|
|
background-image: url(Images/popoverArrows.png);
|
|
}
|
|
|
|
.force-white-icons [is=ui-icon].spritesheet-smallicons,
|
|
:host-context(.force-white-icons) [is=ui-icon].spritesheet-smallicons,
|
|
[is=ui-icon].force-white-icons.spritesheet-smallicons,
|
|
.-theme-preserve {
|
|
-webkit-mask-image: url(Images/smallIcons.svg);
|
|
-webkit-mask-position: var(--spritesheet-position);
|
|
background: #fafafa !important; /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
}
|
|
|
|
.force-white-icons [is=ui-icon].spritesheet-largeicons,
|
|
:host-context(.force-white-icons) [is=ui-icon].spritesheet-largeicons,
|
|
[is=ui-icon].force-white-icons.spritesheet-largeicons,
|
|
.-theme-preserve {
|
|
-webkit-mask-image: url(Images/largeIcons.svg);
|
|
-webkit-mask-position: var(--spritesheet-position);
|
|
background: #fafafa !important; /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
}
|
|
|
|
.force-white-icons [is=ui-icon].spritesheet-mediumicons,
|
|
:host-context(.force-white-icons) [is=ui-icon].spritesheet-mediumicons,
|
|
[is=ui-icon].force-white-icons.spritesheet-mediumicons,
|
|
.-theme-preserve {
|
|
-webkit-mask-image: url(Images/mediumIcons.svg);
|
|
-webkit-mask-position: var(--spritesheet-position);
|
|
background: #fafafa !important; /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
}
|
|
|
|
.expandable-inline-button {
|
|
background-color: #dedede; /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
color: #333; /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
cursor: pointer;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.undisplayable-text,
|
|
.expandable-inline-button {
|
|
padding: 1px 3px;
|
|
margin: 0 2px;
|
|
font-size: 11px;
|
|
font-family: sans-serif;
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
}
|
|
|
|
.undisplayable-text::after,
|
|
.expandable-inline-button::after {
|
|
content: attr(data-text);
|
|
}
|
|
|
|
.undisplayable-text {
|
|
color: rgb(128 128 128); /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
font-style: italic;
|
|
}
|
|
|
|
.expandable-inline-button:hover {
|
|
background-color: #d5d5d5; /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
}
|
|
|
|
.expandable-inline-button:focus-visible {
|
|
background-color: #bbb; /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
}
|
|
|
|
::selection {
|
|
background-color: rgb(141 199 248 / 60%); /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
}
|
|
|
|
.-theme-with-dark-background *::selection,
|
|
:host-context(.-theme-with-dark-background) *::selection {
|
|
background-color: rgb(93 93 93 / 60%);
|
|
}
|
|
|
|
.reload-warning {
|
|
align-self: center;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
button.link {
|
|
border: none;
|
|
background: none;
|
|
padding: 3px;
|
|
}
|
|
|
|
button.link:focus-visible {
|
|
background-color: rgb(0 0 0 / 8%); /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
border-radius: 2px;
|
|
}
|
|
/* See ARIAUtils.js */
|
|
|
|
[data-aria-utils-animation-hack] {
|
|
animation: ANIMATION-HACK 0s;
|
|
}
|
|
|
|
@keyframes ANIMATION-HACK {
|
|
/* empty keyframe to trigger the animation hack above */
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
.dimmed,
|
|
.chrome-select:disabled {
|
|
opacity: 100%;
|
|
}
|
|
|
|
[is=ui-icon].icon-mask,
|
|
.force-white-icons [is=ui-icon].spritesheet-smallicons,
|
|
:host-context(.force-white-icons) [is=ui-icon].spritesheet-smallicons,
|
|
[is=ui-icon].force-white-icons.spritesheet-smallicons,
|
|
.force-white-icons [is=ui-icon].spritesheet-largeicons,
|
|
:host-context(.force-white-icons) [is=ui-icon].spritesheet-largeicons,
|
|
[is=ui-icon].force-white-icons.spritesheet-largeicons,
|
|
.force-white-icons [is=ui-icon].spritesheet-mediumicons,
|
|
:host-context(.force-white-icons) [is=ui-icon].spritesheet-mediumicons,
|
|
[is=ui-icon].force-white-icons.spritesheet-mediumicons,
|
|
.-theme-preserve {
|
|
forced-color-adjust: none;
|
|
background-color: ButtonText;
|
|
}
|
|
|
|
.harmony-input:not([type]),
|
|
.harmony-input[type=number],
|
|
.harmony-input[type=text] {
|
|
border: 1px solid ButtonText;
|
|
}
|
|
}
|
|
/* search input with customized styling */
|
|
input.custom-search-input::-webkit-search-cancel-button {
|
|
appearance: none;
|
|
cursor: pointer;
|
|
width: 16px;
|
|
height: 15px;
|
|
margin-right: 0;
|
|
background: -32px 32px url(Images/mediumIcons.svg);
|
|
}
|
|
/* loading spinner */
|
|
.spinner::before {
|
|
display: block;
|
|
width: var(--dimension, 24px);
|
|
height: var(--dimension, 24px);
|
|
border: var(--spinner-size, 3px) solid var(--spinner-color, #808080); /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */ /* stylelint-disable-line plugin/use_theme_colors */
|
|
/* See: crbug.com/1152736 for color variable migration. */
|
|
border-radius: 12px;
|
|
clip: rect(0, var(--clip-size, 15px), var(--clip-size, 15px), 0);
|
|
content: "";
|
|
position: absolute;
|
|
animation: spinner-animation 1s linear infinite;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
@keyframes spinner-animation {
|
|
from { transform: rotate(0); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
/** Adorner */
|
|
.adorner-container {
|
|
display: inline-block;
|
|
}
|
|
|
|
.adorner-container.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.adorner-container devtools-adorner {
|
|
margin-left: 3px;
|
|
}
|
|
|
|
:host-context(.-theme-with-dark-background) devtools-adorner {
|
|
--adorner-text-color: #ffffffde;
|
|
--adorner-background-color: #5db0d726;
|
|
--adorner-border: 1px solid #5db0d780;
|
|
--adorner-border-focus: 1px solid #5db0d7;
|
|
--adorner-text-color-active: #242424;
|
|
--adorner-background-color-active: #5db0d7;
|
|
}
|