front_end/panels/css_overview/cssOverviewStartView.css

/**
 * 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: 24px;
    display: flex;
    flex-direction: column;
    background-color: var(--sys-color-cdt-base-container);
    overflow: auto;
  }

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

  .preview-feature {
    padding: 12px 16px;
    border: 1px solid var(--sys-color-neutral-outline);
    color: var(--sys-color-on-surface);
    font-size: 13px;
    line-height: 20px;
    border-radius: 12px;
    margin: 42px 0;
    letter-spacing: 0.01em;
  }

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

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

  .feedback-prompt {
    margin-bottom: 24px;
  }

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

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

  .thumbnail-wrapper {
    width: 144px;
    height: 92px;
    margin-right: 20px;
  }

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

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

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