Bug 1397133 - Adjust the sidebar and accordion background colors for the dark theme. r=bgrins

This commit is contained in:
Gabriel Luong 2017-09-06 17:27:31 -04:00
parent 3fc986fd80
commit 9cda299878
5 changed files with 22 additions and 9 deletions

View File

@ -3,17 +3,28 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/**
* This file should not be modified and is a duplicate from the debugger.html project.
* Any changes to this file should be imported from the upstream debugger.html project.
* This file is a duplicate from the debugger.html project and has diverged in terms of
* some of styles that are kept. Any changes to the styles in this file should be synced
* back to the appropriate styles in the debugger.html project.
* Create a pull request at https://github.com/devtools-html/debugger.html to sync
* any changes to the existing styles.
*/
:root {
--accordion-header-background: var(--theme-toolbar-background);
}
:root.theme-dark {
--accordion-header-background: #141416;
}
.accordion {
background-color: var(--theme-body-background);
background-color: var(--theme-sidebar-background);
width: 100%;
}
.accordion ._header {
background-color: var(--theme-toolbar-background);
background-color: var(--accordion-header-background);
border-bottom: 1px solid var(--theme-splitter-color);
cursor: pointer;
font-size: 12px;

View File

@ -9,7 +9,7 @@
<link rel="stylesheet" href="chrome://devtools/content/netmonitor/src/assets/styles/netmonitor.css"/>
<script src="chrome://devtools/content/shared/theme-switching.js"></script>
</head>
<body class="theme-sidebar" role="application">
<body class="theme-body" role="application">
<div id="mount"></div>
<script>
"use strict";

View File

@ -7,7 +7,7 @@
.tabs {
height: 100%;
background: var(--theme-body-background);
background: var(--theme-sidebar-background);
display: flex;
flex-direction: column;
}

View File

@ -6,11 +6,13 @@
.theme-light {
--rule-highlight-background-color: #ffee99;
--rule-overridden-item-border-color: var(--theme-content-color3);
--rule-header-background-color: var(--theme-toolbar-background);
}
.theme-dark {
--rule-highlight-background-color: #594724;
--rule-overridden-item-border-color: var(--theme-content-color1);
--rule-header-background-color: #141416;
}
.theme-firebug {
@ -18,6 +20,7 @@
--rule-property-name: darkgreen;
--rule-property-value: darkblue;
--rule-overridden-item-border-color: var(--theme-content-color2);
--rule-header-background-color: var(--theme-header-background);
}
/* Rule View Tabpanel */
@ -219,7 +222,7 @@
}
.ruleview-header {
background-color: var(--theme-toolbar-background);
background-color: var(--rule-header-background-color);
border-bottom: 1px solid var(--theme-splitter-color);
font-size: 12px;
padding: 4px;
@ -239,7 +242,6 @@
padding: 3px 4px 2px 4px;
line-height: inherit;
min-height: 0;
background: var(--theme-header-background);
}
:root[platform="win"] .ruleview-header,

View File

@ -93,7 +93,7 @@
:root.theme-dark {
--theme-body-background: var(--grey-80);
--theme-sidebar-background: var(--grey-80);
--theme-sidebar-background: var(--grey-90);
--theme-contrast-background: #ffb35b;
/* Toolbar */