chrome-devtools-frontend

Version:
Chrome DevTools UI
devtools.chrome.com
91 lines (75 loc) • 1.81 kB
CSS
/*
 * Copyright 2017 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

.drop-down {
  box-shadow: var(--drop-shadow);
  background: var(--sys-color-cdt-base-container);
}

.preview-item {
  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);

  &:first-child {
    border-top: var(--sys-size-1) solid var(--sys-color-divider);
  }

  padding: var(--sys-size-4) 10px;
  position: relative;

  .metadata {
    margin-left: 3px;
  }

  /* done this way because if we have a border it
   * awkwardly merges in a diagonal with the top and
   * bottom border */
  &.selected::before {
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--sys-size-2);
    background-color: var(--sys-color-primary);
  }
}

.preview-item canvas {
  width: 100%;
  height: 100%;
}

.text-details {
  flex-wrap: wrap;
  justify-content: space-between;
}

.text-details > span {
  padding-left: var(--sys-size-5);
  padding-right: var(--sys-size-5);
}

.text-details .name {
  font: var(--sys-typescale-body4-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: var(--sys-size-28);
}

.text-details .metadata {
  color: var(--sys-color-token-subtle);
  font: var(--sys-typescale-body4-regular);
  text-align: right;
}

.screenshot-thumb {
  display: flex;
  border: var(--sys-size-1) solid var(--sys-color-surface3);
  margin: var(--sys-size-2) var(--sys-size-3);
}

.screenshot-thumb img {
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

.landing-page-item {
  font: var(--sys-typescale-body4-regular);
  display: flex;
  align-items: center;
  gap: var(--sys-size-5);
}

.back-arrow:hover {
  background: var(--sys-color-state-hover-on-subtle);
}