chrome-devtools-frontend/front_end/panels/css_overview/cssOverviewStartView.css

Chrome DevTools UI

/**
 * Copyright 2019 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

@scope to (devtools-widget > *) {
  h1 {
    font-weight: normal;
  }

  .css-overview-start-view {
    padding: var(--sys-size-11);
    display: flex;
    flex-direction: column;
    background-color: var(--sys-color-cdt-base-container);
    overflow: auto;
  }

  .start-capture-wrapper {
    width: fit-content;
  }

  .preview-feature {
    padding: var(--sys-size-6) var(--sys-size-8);
    border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
    color: var(--sys-color-on-surface);
    font-size: var(--sys-typescale-body3-size);
    line-height: var(--sys-typescale-body3-line-height);
    border-radius: var(--sys-shape-corner-medium-small);
    margin: 42px 0;
    letter-spacing: 0.01em;
  }

  .preview-header {
    color: var(--sys-color-primary);
    font-size: var(--sys-typescale-body3-size);
    line-height: var(--sys-typescale-body3-line-height);
    letter-spacing: 0.01em;
    margin: 9px 0 var(--sys-size-7);
  }

  .preview-icon {
    vertical-align: middle;
  }

  .feedback-prompt {
    margin-bottom: var(--sys-size-11);
  }

  .feedback-prompt .devtools-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
  }

  .resources {
    display: flex;
    flex-direction: row;
  }

  .thumbnail-wrapper {
    width: var(--sys-size-22);
    height: 92px;
    margin-right: var(--sys-size-9);
  }

  .video-doc-header {
    font-size: var(--sys-typescale-body3-size);
    line-height: var(--sys-typescale-body3-line-height);
    letter-spacing: 0.04em;
    color: var(--sys-color-on-surface);
    margin-bottom: var(--sys-size-2);
  }

  devtools-feedback-button {
    align-self: flex-end;
  }

  .resources .devtools-link {
    font-size: var(--sys-typescale-body2-size);
    line-height: var(--sys-size-10);
    letter-spacing: 0.04em;
    text-decoration-line: underline;
    color: var(--sys-color-primary);
  }
}