packages/devtools_app/web/styles_dark.css

/* Copyright 2019 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. */

/* If you add a CSS variable here, be sure to also add it to styles.css */
:root {
    --border-color-dark: #484848;
    --border-color: #484848;
    --button-selected-color: #3a4556;
    --chart-bar-color: #4078c0;
    --counter-color: #999;
    --link-color: #9ebef9;
    --dark-shadow-color: #999;
    --default-background-rgb: 32, 33, 36;
    --default-background: rgba(var(--default-background-rgb), 1);
    --default-button-text-color: #89b5f8;
    --default-color-thumb: #888;
    --default-color: #fff;
    --disabled-background: #555;
    --error-background: rgb(65, 33, 36);
    --error-summary-color: #ff6b68;
    --inspector-info-color: #909090;
    --inspector-hint-color: #bbb;
    --light-text-color: #aaaaaa;
    --even-row-background: #383636;
    --footer-color: #858585;
    --footer-link-hover: wheat;
    --footer-strong: #ccc;
    --button-background: #202225;
    --header-background: #282828;
    --header-color: #bbbbbb;
    --header-item-rgb: 255, 255, 255;
    --header-item: rgba(var(--header-item-rgb), 1);
    --hint-background: #383636;
    --light-background: #585858;
    --light-text-color: #fafbfc;
    --masthead-background: #394959;
    --list-background: #2b2c2b;
    --list-color: #abb2ba;
    --match-color: #fff;
    --menu-item-border: #484541;
    --popup-border-color: #586069;
    --row-hover-background: #2b2d2e;
    --selected-background: #626d7a;
    --selected-line: #626d7b;
    --shadow-color: #585858;
    --shaded-background-lighter: #2d2e31;
    --shaded-background-darker: var(--default-background);
    --subtle: #888;
    --subtle-selected: #151515;
    --table-border: #484848;
    --toast-background: #212121;
    --toast-border: #585551;
}

body {
    /* Disable the background image from the github-dark theme as it is too */
    /* busy for this tool. */
    background-image: none !important;
}

.gutter {
    /* The white gutter icon image looks too bright with opacity 1  */
    opacity: 0.5;
}

.menu {
    background-color: var(--list-background);
}

nav.menu .menu-item {
    color: #89b5f8;
    font-weight: bold;
}

.rangeslider-mask-min, .rangeslider-mask-max {
    /* Override the non-visible selection area of Plotly's rangeslider. */
    fill: rgba(255, 255, 255, .6) !important;
    fill-opacity: 0.6 !important;
}

/* Set defaults for buttons (inc removing Primer styles) */
.btn, .btn[disabled], .btn:hover, .btn.hover, .btn:active, .btn.selected {
    background-color: transparent;
    background-image: none;
    border-width: 1px;
    border: 1px solid #5f6368;
    box-shadow: none;
    color: #89b5f8;
    font-weight: normal;
    position: relative;
}

.btn[disabled], .form-select[disabled] {
    /* !important to override all other states (like hover) */
    opacity: 0.5 !important;
    background-color: transparent !important;
    border: 1px solid #5f6368 !important;
    color: #89b5f8 !important;
}

.btn:active, .btn.selected {
    background-color: var(--button-selected-color);
    border-color: var(--button-selected-color);
}

.btn:hover, .btn.hover {
    background-color: var(--button-selected-color);
}

.btn:hover:active, .btn.hover:active, .btn.selected:hover, .btn.selected.hover {
    background-color: #3b3b3e;
}

.btn.btn-primary {
    background-color: #89b5f8;
    border-color: #89b5f8;
    color: #202124;
}

.btn.btn-primary[disabled] {
    /* !important to override all other states (like hover) */
    opacity: 0.5 !important;
    background-color: #89b5f8 !important;
    border-color: #89b5f8 !important;
    color: #202124 !important;
}

.btn.btn-primary:active, .btn.btn-primary.selected, .btn.btn-primary:hover, .btn.btn-primary.hover {
    background-color: #7aa2de; /* Not picked from material design spec */
}

.btn.btn-primary:hover:active, .btn.btn-primary.hover:active, .btn.btn-primary.selected:hover, .btn.btn-primary.selected.hover {
    background-color: #6c8fc4; /* Not picked material design from spec */
}

.flash-warn {
    background-color: #fffbdd;
    color: #735c0f;
}

/* The default body color for the primer dark theme is way too bright for a dark theme. */
body {
    color: #bbbbbb;
}