chrome-devtools-frontend/front_end/ui/inspectorStyle.css

Chrome DevTools UI

/*
 * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
 * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions
 * are met:
 *
 * 1.  Redistributions of source code must retain the above copyright
 *     notice, this list of conditions and the following disclaimer.
 * 2.  Redistributions in binary form must reproduce the above copyright
 *     notice, this list of conditions and the following disclaimer in the
 *     documentation and/or other materials provided with the distribution.
 * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
 *     its contributors may be used to endorse or promote products derived
 *     from this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
 * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

:root {
  height: 100%;
  overflow: hidden;
  /**
   * NOTE: please don't add to these colours!
   * We are migrating to a new set of theme colors (see below for details) and over time these colors will be deprecated / removed.
   * Chat to jacktfranklin@ or petermueller@ if you have questions.
   * https://crbug.com/1122511
   */
  --accent-color: #1a73e8;
  --accent-fg-color: #1a73e8;
  --accent-color-hover: #3b86e8;
  --accent-fg-color-hover: #1567d3;
  --active-control-bg-color: #5a5a5a;
  --focus-bg-color: hsl(214deg 40% 92%);
  --focus-ring-inactive-shadow-color: #e0e0e0;
  --input-validation-error: #db1600;
  --toolbar-bg-color: #f3f3f3;
  --toolbar-hover-bg-color: #eaeaea;
  --selection-fg-color: #fff;
  --selection-bg-color: var(--accent-color);
  --selection-inactive-fg-color: #5a5a5a;
  --selection-inactive-bg-color: #dadada;
  --tab-selected-fg-color: #333;
  --tab-selected-bg-color: var(--toolbar-bg-color);
  --divider-color: #d0d0d0;
  --divider-border: 1px solid var(--divider-color);
  --focus-ring-inactive-shadow: 0 0 0 1px var(--focus-ring-inactive-shadow-color);
  --focus-ring-active-shadow: 0 0 0 1px var(--accent-color);
  --item-selection-bg-color: #cfe8fc;
  --item-selection-inactive-bg-color: #e0e0e0;
  --item-hover-color: rgb(56 121 217 / 10%);
  --network-grid-default-color: rgb(255 255 255 / 100%);
  --network-grid-stripe-color: rgb(245 245 245 / 100%);
  --network-grid-navigation-color: rgb(221 238 255 / 100%);
  --network-grid-hovered-color: rgb(235 242 252 / 70%);
  --network-grid-initiator-path-color: rgb(58 217 58 / 40%);
  --network-grid-initiated-path-color: rgb(217 58 58 / 40%);
  --network-grid-selected-color: rgb(219 219 219 / 60%);
  --network-grid-focus-selected-color: var(--selection-bg-color);
  --network-grid-focus-selected-color-has-error: rgb(255 240 240 / 100%);
  --network-grid-from-frame-color: rgb(224 247 250 / 40%);
  --network-grid-is-product-color: rgb(255 252 225 / 60%);
  --network-frame-divider-color: #fccc49;
  --link-color: rgb(17 85 204);
}

.-theme-with-dark-background {
  /**
   * NOTE: please don't add to these colours!
   * We are migrating to a new set of theme colors (see below for details) and over time these colors will be deprecated / removed.
   * Chat to jacktfranklin@ or petermueller@ if you have questions.
   * https://crbug.com/1122511
   */
  --accent-color: #0e639c;
  --accent-fg-color: #ccc;
  --accent-fg-color-hover: #fff;
  --accent-color-hover: rgb(17 119 187);
  --active-control-bg-color: #cdcdcd;
  --focus-bg-color: hsl(214deg 19% 27%);
  --focus-ring-inactive-shadow-color: #5a5a5a;
  --toolbar-bg-color: #292a2d; /* --google-grey-900-white-4-percent */
  --toolbar-hover-bg-color: #202020;
  --selection-fg-color: #cdcdcd;
  --selection-inactive-fg-color: #cdcdcd;
  --selection-inactive-bg-color: hsl(0deg 0% 28%);
  --tab-selected-fg-color: #eaeaea;
  --tab-selected-bg-color: #000;
  --divider-color: #525252;
  --focus-ring-inactive-shadow: 0 0 0 1px var(--focus-ring-inactive-shadow-color);
  --item-selection-bg-color: hsl(207deg 88% 22%);
  --item-selection-inactive-bg-color: #454545;
  --network-grid-default-color: rgb(36 36 36 / 100%);
  --network-grid-stripe-color: rgb(41 41 41 / 100%);
  --network-grid-navigation-color: rgb(221 238 255 / 100%);
  --network-grid-hovered-color: rgb(20 37 63 / 70%);
  --network-grid-initiator-path-color: rgb(58 217 58 / 40%);
  --network-grid-initiated-path-color: rgb(217 58 58 / 40%);
  --network-grid-selected-color: rgb(57 57 57 / 60%);
  --network-grid-focus-selected-color: var(--selection-bg-color);
  --network-grid-focus-selected-color-has-error: rgb(217 58 58 / 15%);
  --network-grid-from-frame-color: rgb(224 247 250 / 40%);
  --network-grid-is-product-color: rgb(255 252 225 / 60%);
  --link-color: rgb(171 171 171);
}

body {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin: 0;
  cursor: default;
  font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
  font-size: 12px;
  tab-size: 4;
  user-select: none;
  color: #222; /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
  background: var(--color-background);
}

.platform-linux {
  color: rgb(48 57 66); /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
  font-family: Roboto, Ubuntu, Arial, sans-serif;
}

.platform-mac {
  color: rgb(48 57 66); /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
  font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
}

.platform-windows {
  font-family: 'Segoe UI', Tahoma, sans-serif;
}

.panel {
  display: flex;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background-color: var(--color-background);
}

.panel-sidebar {
  overflow-x: hidden;
  background-color: var(--toolbar-bg-color);
}

iframe.extension {
  flex: auto;
  width: 100%;
  height: 100%;
}

iframe.panel.extension {
  display: block;
  height: 100%;
}

@media (forced-colors: active) {
  :root {
    --accent-color: Highlight;
    --focus-ring-inactive-shadow-color: ButtonText;
  }
}