UNPKG

chrome-devtools-frontend

Version:
157 lines (131 loc) 2.81 kB
/* * Copyright 2023 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. */ * { margin: 0; padding: 0; box-sizing: border-box; font-size: inherit; } *:focus, *:focus-visible { outline: none; } :host { overflow-x: auto; } :host, devtools-recording-view, devtools-create-recording-view { display: flex; flex-direction: column; flex: 1; min-height: 0; } .wrapper { display: flex; flex-direction: column; height: 100%; } .header { background-color: var(--color-background); display: flex; flex-direction: row; align-items: center; border-bottom: 1px solid var(--color-details-hairline); padding: 0 5px; min-height: 29px; max-height: 29px; gap: 3px; } .separator { background-color: var(--color-details-hairline); width: 1px; height: 17px; margin: 0; } select { border-radius: 2px; border: 1px solid transparent; height: 24px; max-width: 180px; min-width: 140px; padding: 0 5px; position: relative; color: var(--color-text-primary); background-color: var(--color-background); text-overflow: ellipsis; } select:disabled { color: var(--color-input-text-disabled); } select:not([disabled]):hover, select:not([disabled]):focus-visible, select:not([disabled]):active { background-color: var(--color-iconbutton-hover); } select:not([disabled]):focus-visible { box-shadow: 0 0 0 2px var(--color-button-outline-focus); } select option { background-color: var(--color-background-elevation-1); color: var(--color-text-primary); } devtools-menu { width: 0; height: 0; position: absolute; } devtools-recording-list-view { overflow: auto; } .error { color: var(--color-error-text); border: 1px solid var(--color-error-border); background-color: var(--color-error-background); padding: 4px; } .feedback { margin-left: auto; margin-right: 4px; } .feedback .x-link { letter-spacing: 0.03em; text-decoration-line: underline; font-size: 9px; line-height: 16px; color: var(--color-text-secondary); outline-offset: 3px; } .feedback .x-link:focus-visible { outline: -webkit-focus-ring-color auto 1px; } .continue-button { border: none; background-color: transparent; width: 24px; height: 24px; border-radius: 2px; } .continue-button devtools-icon { width: 24px; height: 24px; --icon-color: var(--color-primary); } .continue-button:hover, .continue-button:focus-visible { background-color: var(--color-iconbutton-hover); } .continue-button:disabled { background: var(--color-background); color: var(--color-text-disabled); cursor: not-allowed; } .continue-button:disabled devtools-icon { --icon-color: var(--icon-disabled); } devtools-shortcut-dialog { padding-right: 6px; }