packages/devtools/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 {
    --chart-bar-color: #4078c0;
    --border-color-dark: #484848;
    --border-color: #484848;
    --counter-color: #999;
    --dark-shadow-color: #999;
    --default-background-rgb: 47, 43, 43;
    --default-background: rgba(var(--default-background-rgb), 1);
    --default-color-thumb: #888;
    --default-color: #fff;
    --disabled-background: #555;
    --error-background: #7c1c05;
    --even-row-background: #383636;
    --footer-color: #858585;
    --footer-link-hover: wheat;
    --footer-strong: #ccc;
    --header-background: #282828;
    --header-color: #ccc;
    --header-item-rgb: 255, 255, 255;
    --header-item: rgba(var(--header-item-rgb), 1);
    --hint-background: #4b4b3f;
    --light-background: #585858;
    --masthead-background: #525050;
    --list-background: #3f3f3f;
    --menu-item-border: #484541;
    --row-hover-background: #2b2d2e;
    --selected-background: #545454;
    --selected-line: #626d7b;
    --shadow-color: #585858;
    --shaded-background-lighter: #323232;
    --shaded-background-darker: var(--default-background);
    --subtle: #888;
    --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: wheat;
    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;
}

/* Tweak how buttons look in the dark theme to not be so dark */
.btn:not(.btn-primary), .btn:not(.btn-primary)[disabled] {
    border: 1px solid #222222;
    border-radius: 3px;
    background: linear-gradient(#5f5f5f 5%, #535353 10%, #4f4f4f 100%);
    box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}
.btn.selected:not(.btn-primary), .btn.selected:not(.btn-primary)[disabled] {
    color: #ffffff;
    background: linear-gradient(#1C547C 5%, #104870 90%, #0C446C 100%);
}
/* /Tweak how buttons look in the dark theme to not be so dark */

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