mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 1102369 - Convert existing devtools colors to CSS variables - part 2;r=vporof
This commit is contained in:
Brian Grinstead
parent
91d9792e56
commit
94b0d4767d
@ -574,7 +574,10 @@ CssHtmlTree.prototype = {
|
||||
let mozProps = [];
|
||||
for (let i = 0, numStyles = styles.length; i < numStyles; i++) {
|
||||
let prop = styles.item(i);
|
||||
if (prop.charAt(0) == "-") {
|
||||
if (prop.startsWith("--")) {
|
||||
// Skip any CSS variables used inside of browser CSS files
|
||||
continue;
|
||||
} else if (prop.startsWith("-")) {
|
||||
mozProps.push(prop);
|
||||
} else {
|
||||
CssHtmlTree.propertyNames.push(prop);
|
||||
|
||||
@ -15,16 +15,8 @@
|
||||
.notice-container {
|
||||
margin-top: -50vh;
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
.theme-dark .notice-container {
|
||||
background-color: #343c45; /* Toolbars */
|
||||
color: #f5f7fa; /* Light foreground text */
|
||||
}
|
||||
|
||||
.theme-light .notice-container {
|
||||
background-color: #f0f1f2; /* Toolbars */
|
||||
color: #585959; /* Grey foreground text */
|
||||
background-color: var(--theme-toolbar-background);
|
||||
color: var(--theme-body-color-alt);
|
||||
}
|
||||
|
||||
#empty-notice > button {
|
||||
@ -112,14 +104,9 @@
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.theme-dark .snapshot-item-calls,
|
||||
.theme-dark .snapshot-item-save {
|
||||
color: #b6babf; /* Foreground (Text) - Grey */
|
||||
}
|
||||
|
||||
.theme-light .snapshot-item-calls,
|
||||
.theme-light .snapshot-item-save {
|
||||
color: #585959; /* Foreground (Text) - Grey */
|
||||
.snapshot-item-calls,
|
||||
.snapshot-item-save {
|
||||
color: var(--theme-body-color-alt);
|
||||
}
|
||||
|
||||
.snapshot-item-save {
|
||||
@ -282,36 +269,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
.theme-dark .call-item-gutter {
|
||||
background-color: #181d20;
|
||||
color: #5f7387;
|
||||
border-color: #000;
|
||||
}
|
||||
|
||||
.theme-light .call-item-gutter {
|
||||
background-color: #f7f7f7;
|
||||
color: #667380;
|
||||
border-color: #aaa;
|
||||
.call-item-gutter {
|
||||
background-color: var(--theme-sidebar-background);
|
||||
color: var(--theme-content-color3);
|
||||
border-color: var(--theme-splitter-color);
|
||||
}
|
||||
|
||||
.call-item-index {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.theme-dark .call-item-context {
|
||||
color: #eb5368; /* Highlight Orange */
|
||||
.call-item-context {
|
||||
color: var(--theme-highlight-orange);
|
||||
}
|
||||
|
||||
.theme-light .call-item-context {
|
||||
color: #f13c00; /* Highlight Orange */
|
||||
}
|
||||
|
||||
.theme-dark .call-item-name {
|
||||
color: #46afe3; /* Highlight Blue */
|
||||
}
|
||||
|
||||
.theme-light .call-item-name {
|
||||
color: #0088cc; /* Highlight Blue */
|
||||
.call-item-name {
|
||||
color: var(--theme-highlight-blue);
|
||||
}
|
||||
|
||||
.call-item-location {
|
||||
@ -319,14 +292,11 @@
|
||||
-moz-padding-end: 6px;
|
||||
text-align: end;
|
||||
cursor: pointer;
|
||||
color: var(--theme-highlight-bluegrey);
|
||||
}
|
||||
|
||||
.theme-dark .call-item-location:hover {
|
||||
color: #0088cc; /* Highlight Blue */
|
||||
}
|
||||
|
||||
.theme-light .call-item-location:hover {
|
||||
color: #46afe3; /* Highlight Blue */
|
||||
.call-item-location:hover {
|
||||
color: var(--theme-highlight-blue);
|
||||
}
|
||||
|
||||
.call-item-view:hover .call-item-location,
|
||||
@ -336,12 +306,10 @@
|
||||
|
||||
.theme-dark .call-item-location {
|
||||
border-color: #111;
|
||||
color: #5e88b0; /* Highlight Blue-Grey */
|
||||
}
|
||||
|
||||
.theme-light .call-item-location {
|
||||
border-color: #eee;
|
||||
color: #5f88b0; /* Highlight Blue-Grey */
|
||||
}
|
||||
|
||||
.call-item-stack {
|
||||
@ -370,28 +338,16 @@
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.theme-dark .call-item-stack-fn-name {
|
||||
color: #a9bacb; /* Content (Text) - Light */
|
||||
.call-item-stack-fn-name {
|
||||
color: var(--theme-content-color3);
|
||||
}
|
||||
|
||||
.theme-light .call-item-stack-fn-name {
|
||||
color: #667380; /* Content (Text) - Dark Grey */
|
||||
.call-item-stack-fn-location {
|
||||
color: var(--theme-highlight-bluegrey);
|
||||
}
|
||||
|
||||
.theme-dark .call-item-stack-fn-location {
|
||||
color: #5e88b0; /* Highlight Blue-Grey */
|
||||
}
|
||||
|
||||
.theme-light .call-item-stack-fn-location {
|
||||
color: #5e88b0; /* Highlight Blue-Grey */
|
||||
}
|
||||
|
||||
.theme-dark .call-item-stack-fn-location:hover {
|
||||
color: #0088cc; /* Highlight Blue */
|
||||
}
|
||||
|
||||
.theme-light .call-item-stack-fn-location:hover {
|
||||
color: #46afe3; /* Highlight Blue */
|
||||
.call-item-stack-fn-location:hover {
|
||||
color: var(--theme-highlight-blue);
|
||||
}
|
||||
|
||||
#calls-list .selected .call-item-contents > label:not(.call-item-gutter) {
|
||||
@ -465,12 +421,12 @@
|
||||
|
||||
.theme-dark #snapshot-filmstrip {
|
||||
border-top: 1px solid #000;
|
||||
color: #f5f7fa; /* Light foreground text */
|
||||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
.theme-light #snapshot-filmstrip {
|
||||
border-top: 1px solid #aaa;
|
||||
color: #585959; /* Grey foreground text */
|
||||
color: var(--theme-body-color-alt);
|
||||
}
|
||||
|
||||
.filmstrip-thumbnail {
|
||||
@ -498,25 +454,13 @@
|
||||
background-color: @lightCheckerboardBackground@;
|
||||
}
|
||||
|
||||
.theme-dark .filmstrip-thumbnail {
|
||||
-moz-border-end: 1px solid #000;
|
||||
.filmstrip-thumbnail {
|
||||
-moz-border-end: 1px solid var(--theme-splitter-color)
|
||||
}
|
||||
|
||||
.theme-light .filmstrip-thumbnail {
|
||||
-moz-border-end: 1px solid #aaa;
|
||||
}
|
||||
|
||||
.theme-dark #snapshot-filmstrip > .filmstrip-thumbnail:hover,
|
||||
.theme-dark #snapshot-filmstrip:not(:hover) > .filmstrip-thumbnail[highlighted] {
|
||||
border: 1px solid #46afe3; /* Highlight Blue */
|
||||
margin: 0 0 0 -1px;
|
||||
padding: 0;
|
||||
opacity: 0.66;
|
||||
}
|
||||
|
||||
.theme-light #snapshot-filmstrip > .filmstrip-thumbnail:hover,
|
||||
.theme-light #snapshot-filmstrip:not(:hover) > .filmstrip-thumbnail[highlighted] {
|
||||
border: 1px solid #0088cc; /* Highlight Blue */
|
||||
#snapshot-filmstrip > .filmstrip-thumbnail:hover,
|
||||
#snapshot-filmstrip:not(:hover) > .filmstrip-thumbnail[highlighted] {
|
||||
border: 1px solid var(--theme-highlight-blue);
|
||||
margin: 0 0 0 -1px;
|
||||
padding: 0;
|
||||
opacity: 0.66;
|
||||
|
||||
@ -18,14 +18,9 @@
|
||||
-moz-border-end: 1px solid;
|
||||
}
|
||||
|
||||
.theme-dark #sources-pane > tabs,
|
||||
.theme-dark #sources-pane .devtools-toolbar {
|
||||
-moz-border-end-color: black; /* Match the splitter color. */
|
||||
}
|
||||
|
||||
.theme-light #sources-pane > tabs,
|
||||
.theme-light #sources-pane .devtools-toolbar {
|
||||
-moz-border-end-color: #aaa; /* Match the splitter color. */
|
||||
#sources-pane > tabs,
|
||||
#sources-pane .devtools-toolbar {
|
||||
-moz-border-end-color: var(--theme-splitter-color);
|
||||
}
|
||||
|
||||
/* Sources and breakpoints list */
|
||||
@ -189,28 +184,16 @@
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.theme-dark .dbg-classic-stackframe-details-url {
|
||||
color: #a9bacb; /* Light content text */
|
||||
.dbg-classic-stackframe-details-url {
|
||||
color: var(--theme-content-color1);
|
||||
}
|
||||
|
||||
.theme-light .dbg-classic-stackframe-details-url {
|
||||
color: #667380; /* Dark grey content text */
|
||||
.dbg-classic-stackframe-details-sep {
|
||||
color: var(--theme-body-color-alt)
|
||||
}
|
||||
|
||||
.theme-dark .dbg-classic-stackframe-details-sep {
|
||||
color: #b6babf; /* Grey foreground text */
|
||||
}
|
||||
|
||||
.theme-light .dbg-classic-stackframe-details-sep {
|
||||
color: #585959; /* Grey foreground text */
|
||||
}
|
||||
|
||||
.theme-dark .dbg-classic-stackframe-details-line {
|
||||
color: #5e88b0; /* Highlight blue grey */
|
||||
}
|
||||
|
||||
.theme-light .dbg-classic-stackframe-details-line {
|
||||
color: #5f88b0; /* Highlight blue grey */
|
||||
.dbg-classic-stackframe-details-line {
|
||||
color: var(--theme-highlight-bluegrey);
|
||||
}
|
||||
|
||||
#callstack-list .selected label {
|
||||
@ -252,7 +235,7 @@
|
||||
/* Tracer dark theme */
|
||||
|
||||
.theme-dark .trace-item {
|
||||
color: #f5f7fa; /* Light foreground text */
|
||||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
.theme-dark .trace-item.black-boxed {
|
||||
@ -267,31 +250,30 @@
|
||||
background-color: rgba(29,79,115,.6); /* Select highlight blue at 60% alpha */
|
||||
}
|
||||
|
||||
.theme-dark .trace-call {
|
||||
color: #46afe3; /* Highlight blue */
|
||||
.trace-call {
|
||||
color: var(--theme-highlight-blue);
|
||||
}
|
||||
|
||||
.theme-dark .trace-return,
|
||||
.theme-dark .trace-yield {
|
||||
color: #70bf53; /* Highlight green */
|
||||
.trace-return,
|
||||
.trace-yield {
|
||||
color: var(--theme-highlight-green);
|
||||
}
|
||||
|
||||
.theme-dark .trace-throw {
|
||||
color: #eb5368; /* Highlight red */
|
||||
.trace-throw {
|
||||
color: var(--theme-highlight-red);
|
||||
}
|
||||
|
||||
.theme-dark .trace-param {
|
||||
color: #a9bacb; /* Content text light */
|
||||
.trace-param {
|
||||
color: var(--theme-content-color1);
|
||||
}
|
||||
|
||||
.theme-dark .trace-syntax {
|
||||
color: #8fa1b2; /* Content text grey */
|
||||
color: var(--theme-content-color2);
|
||||
}
|
||||
|
||||
/* Tracer light theme */
|
||||
|
||||
.theme-light .trace-item {
|
||||
color: #292e33; /* Dark foreground text */
|
||||
color: var(--theme-content-color1);
|
||||
}
|
||||
|
||||
.theme-light .trace-item.black-boxed {
|
||||
@ -306,27 +288,6 @@
|
||||
background-color: rgba(76,158,217,.6); /* Select highlight blue at 60% alpha */
|
||||
}
|
||||
|
||||
.theme-light .trace-call {
|
||||
color: #0088cc; /* Highlight blue */
|
||||
}
|
||||
|
||||
.theme-light .trace-return,
|
||||
.theme-light .trace-yield {
|
||||
color: #2cbb0f; /* Highlight green */
|
||||
}
|
||||
|
||||
.theme-light .trace-throw {
|
||||
color: #ed2655; /* Highlight red */
|
||||
}
|
||||
|
||||
.theme-light .trace-param {
|
||||
color: #667380; /* Content text dark grey */
|
||||
}
|
||||
|
||||
.theme-light .trace-syntax {
|
||||
color: #8fa1b2; /* Content text grey */
|
||||
}
|
||||
|
||||
#tracer-traces .selected label {
|
||||
/* Text inside a selected item should not be custom colored. */
|
||||
color: inherit !important;
|
||||
@ -371,12 +332,8 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.theme-dark .dbg-expression-button {
|
||||
color: #46afe3; /* Blue highlight color */
|
||||
}
|
||||
|
||||
.theme-light .dbg-expression-button {
|
||||
color: #0088cc; /* Blue highlight color */
|
||||
.dbg-expression-button {
|
||||
color: var(--theme-highlight-blue);
|
||||
}
|
||||
|
||||
/* Event listeners view */
|
||||
@ -385,28 +342,16 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.theme-dark .dbg-event-listener-location {
|
||||
color: #a9bacb; /* Light content text */
|
||||
.dbg-event-listener-location {
|
||||
color: var(--theme-content-color1);
|
||||
}
|
||||
|
||||
.theme-light .dbg-event-listener-location {
|
||||
color: #667380; /* Dark grey content text */
|
||||
.dbg-event-listener-separator {
|
||||
color: var(--theme-body-color-alt);
|
||||
}
|
||||
|
||||
.theme-dark .dbg-event-listener-separator {
|
||||
color: #b6babf; /* Grey foreground text */
|
||||
}
|
||||
|
||||
.theme-light .dbg-event-listener-separator {
|
||||
color: #585959; /* Grey foreground text */
|
||||
}
|
||||
|
||||
.theme-dark .dbg-event-listener-targets {
|
||||
color: #5e88b0; /* Highlight blue grey */
|
||||
}
|
||||
|
||||
.theme-light .dbg-event-listener-targets {
|
||||
color: #5f88b0; /* Highlight blue grey */
|
||||
.dbg-event-listener-targets {
|
||||
color: var(--theme-highlight-bluegrey);
|
||||
}
|
||||
|
||||
.theme-dark #event-listeners .selected {
|
||||
@ -475,27 +420,19 @@
|
||||
}
|
||||
|
||||
.theme-dark .results-panel-item-label {
|
||||
color: #f5f7fa; /* Light foreground text */
|
||||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
.theme-light .results-panel-item-label {
|
||||
color: #18191a; /* Dark foreground text */
|
||||
color: var(--theme-body-color);
|
||||
}
|
||||
|
||||
.theme-dark .results-panel-item-label-before {
|
||||
color: #5e88b0; /* Highlight blue grey */
|
||||
.results-panel-item-label-before {
|
||||
color: var(--theme-highlight-bluegrey);
|
||||
}
|
||||
|
||||
.theme-light .results-panel-item-label-before {
|
||||
color: #5f88b0; /* Highlight blue grey */
|
||||
}
|
||||
|
||||
.theme-dark .results-panel-item-label-below {
|
||||
color: #5f7387; /* Dark grey content text */
|
||||
}
|
||||
|
||||
.theme-light .results-panel-item-label-below {
|
||||
color: #667380; /* Dark grey content text */
|
||||
.results-panel-item-label-below {
|
||||
color: var(--theme-content-color3);
|
||||
}
|
||||
|
||||
#results-panel .selected label {
|
||||
@ -551,22 +488,20 @@
|
||||
transform: scale(1.75, 1.75);
|
||||
}
|
||||
|
||||
.theme-dark .dbg-source-results:not(.selected):hover {
|
||||
background-color: #181d20; /* Sidebar background */
|
||||
.dbg-source-results:not(.selected):hover {
|
||||
background-color: var(--theme-sidebar-background);
|
||||
}
|
||||
|
||||
.theme-light .dbg-source-results:not(.selected):hover {
|
||||
background-color: #f7f7f7; /* Sidebar background */
|
||||
.dbg-results-header {
|
||||
background-color: var(--theme-tab-toolbar-background);
|
||||
}
|
||||
|
||||
.theme-dark .dbg-results-header {
|
||||
background-color: #252c33; /* Tab toolbar */
|
||||
color: #a9bacb; /* Light content text */
|
||||
color: var(--theme-content-color1);
|
||||
}
|
||||
|
||||
.theme-light .dbg-results-header {
|
||||
background-color: #ebeced; /* Tab toolbar */
|
||||
color: #667380; /* Dark grey content text */
|
||||
color: var(--theme-content-color3);
|
||||
}
|
||||
|
||||
.theme-dark .dbg-search-result:hover {
|
||||
@ -577,38 +512,25 @@
|
||||
background-color: rgba(76,158,217,.2); /* Select highlight blue at 40% alpha */
|
||||
}
|
||||
|
||||
.theme-dark .dbg-results-header-match-count {
|
||||
color: #5f7387; /* Dark grey content text */
|
||||
.dbg-results-header-match-count {
|
||||
color: var(--theme-content-color3);
|
||||
}
|
||||
|
||||
.theme-light .dbg-results-header-match-count {
|
||||
color: #667380; /* Dark grey content text */
|
||||
.dbg-results-line-number {
|
||||
background-color: var(--theme-tab-toolbar-background);
|
||||
color: var(--theme-body-color-alt);
|
||||
}
|
||||
|
||||
.theme-dark .dbg-results-line-number {
|
||||
background-color: #252c33; /* Tab toolbars */
|
||||
color: #b6babf; /* Grey foreground text */
|
||||
}
|
||||
|
||||
.theme-light .dbg-results-line-number {
|
||||
background-color: #ebeced; /* Tab toolbars */
|
||||
color: #585959; /* Grey foreground text */
|
||||
}
|
||||
|
||||
.theme-dark .dbg-results-line-contents-string {
|
||||
color: #b6babf; /* Grey foreground text */
|
||||
}
|
||||
|
||||
.theme-light .dbg-results-line-contents-string {
|
||||
color: #585959; /* Grey foreground text */
|
||||
.dbg-results-line-contents-string {
|
||||
color: var(--theme-body-color-alt);
|
||||
}
|
||||
|
||||
.theme-dark .dbg-results-line-contents-string[match=true] {
|
||||
color: #f5f7fa; /* Light foreground text */
|
||||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
.theme-light .dbg-results-line-contents-string[match=true] {
|
||||
color: #18191a; /* Dark foreground text */
|
||||
color: var(--theme-body-color);
|
||||
}
|
||||
|
||||
/* Toolbar controls */
|
||||
|
||||
@ -105,11 +105,6 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.theme-dark .event-tooltip-attributes-box {
|
||||
background-color: #B6BABF;
|
||||
color: #343C45;
|
||||
}
|
||||
|
||||
.event-tooltip-attributes-container {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
@ -124,6 +119,8 @@
|
||||
border-radius: 3px;
|
||||
padding: 2px;
|
||||
-moz-margin-start: 5px;
|
||||
background-color: var(--theme-body-color-alt);
|
||||
color: var(--theme-toolbar-background);
|
||||
}
|
||||
|
||||
.event-tooltip-attributes {
|
||||
@ -131,8 +128,3 @@
|
||||
font-size: 9px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.theme-light .event-tooltip-attributes-box {
|
||||
background-color: #585959;
|
||||
color: #F0F1F2;
|
||||
}
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
.theme-selected ~ .editor .theme-fg-color5,
|
||||
.theme-selected ~ .editor .theme-fg-color6,
|
||||
.theme-selected ~ .editor .theme-fg-color7 {
|
||||
color: #f5f7fa; /* Light foreground text */
|
||||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
/* In case a node isn't displayed in the page, we fade the syntax highlighting */
|
||||
@ -53,14 +53,9 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.theme-dark #previewbar {
|
||||
background: #252c33; /* Tab Toolbar */
|
||||
border-color: #000; /* Splitters */
|
||||
}
|
||||
|
||||
.theme-light #previewbar {
|
||||
background: #ebeced; /* Tab Toolbar */
|
||||
border-color: #aaa; /* Splitters */
|
||||
#previewbar {
|
||||
background: var(--theme-tab-toolbar-background);
|
||||
border-color: var(--theme-splitter-color);
|
||||
}
|
||||
|
||||
#preview {
|
||||
@ -99,12 +94,7 @@
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
.theme-dark .markupview-events {
|
||||
background-color: #b6babf;
|
||||
color: #14171a;
|
||||
}
|
||||
|
||||
.theme-light .markupview-events {
|
||||
background-color: #585959;
|
||||
color: #fcfcfc;
|
||||
.markupview-events {
|
||||
background-color: var(--theme-body-color-alt);
|
||||
color: var(--theme-body-background);
|
||||
}
|
||||
|
||||
@ -9,14 +9,6 @@
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
.theme-dark #requests-menu-empty-notice {
|
||||
color: #f5f7fa; /* Light foreground text */
|
||||
}
|
||||
|
||||
.theme-light #requests-menu-empty-notice {
|
||||
color: #585959; /* Grey foreground text */
|
||||
}
|
||||
|
||||
#notice-perf-message {
|
||||
margin-top: 2px;
|
||||
}
|
||||
@ -288,30 +280,30 @@ label.requests-menu-status-code {
|
||||
}
|
||||
|
||||
.theme-dark .requests-menu-timings-division[division-scale=millisecond] {
|
||||
-moz-border-start-color: #f5f7fa !important; /* Light foreground text */
|
||||
-moz-border-start-color: var(--theme-selection-color) !important;
|
||||
}
|
||||
|
||||
.theme-light .requests-menu-timings-division[division-scale=millisecond] {
|
||||
-moz-border-start-color: #585959 !important; /* Grey foreground text */
|
||||
-moz-border-start-color: var(--theme-body-color-alt) !important;
|
||||
}
|
||||
|
||||
.theme-dark .requests-menu-timings-division[division-scale=second] {
|
||||
-moz-border-start-color: #f5f7fa !important; /* Light foreground text */
|
||||
-moz-border-start-color: var(--theme-selection-color) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.theme-light .requests-menu-timings-division[division-scale=second] {
|
||||
-moz-border-start-color: #585959 !important; /* Grey foreground text */
|
||||
-moz-border-start-color: var(--theme-body-color-alt) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.theme-dark .requests-menu-timings-division[division-scale=minute] {
|
||||
-moz-border-start-color: #f5f7fa !important; /* Light foreground text */
|
||||
-moz-border-start-color: var(--theme-selection-color) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.theme-light .requests-menu-timings-division[division-scale=minute] {
|
||||
-moz-border-start-color: #585959 !important; /* Grey foreground text */
|
||||
-moz-border-start-color: var(--theme-body-color-alt) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@ -449,8 +441,8 @@ label.requests-menu-status-code {
|
||||
/* Network request details tabpanels */
|
||||
|
||||
.theme-dark .tabpanel-content {
|
||||
background-color: #343c45; /* Toolbars */
|
||||
color: #f5f7fa; /* Light foreground text */
|
||||
background-color: var(--theme-toolbar-background);
|
||||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
/* Summary tabpanel */
|
||||
@ -499,16 +491,8 @@ label.requests-menu-status-code {
|
||||
#response-content-info-header {
|
||||
margin: 0;
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
.theme-dark #response-content-info-header {
|
||||
background-color: #eb5368; /* Red highlight */
|
||||
color: #f5f7fa; /* Light foreground text */
|
||||
}
|
||||
|
||||
.theme-light #response-content-info-header {
|
||||
background-color: #ed2655; /* Red highlight */
|
||||
color: #f5f7fa; /* Light foreground text */
|
||||
background-color: var(--theme-highlight-red);
|
||||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
#response-content-image-box {
|
||||
@ -572,13 +556,13 @@ label.requests-menu-status-code {
|
||||
.theme-dark #requests-menu-footer {
|
||||
border-top: 1px solid @table_itemDarkStartBorder@;
|
||||
box-shadow: 0 1px 0 @table_itemDarkEndBorder@ inset;
|
||||
background-color: #343c45; /* Toolbars */
|
||||
background-color: var(--theme-toolbar-background);
|
||||
}
|
||||
|
||||
.theme-light #requests-menu-footer {
|
||||
border-top: 1px solid @table_itemLightStartBorder@;
|
||||
box-shadow: 0 1px 0 @table_itemLightEndBorder@ inset;
|
||||
background-color: #f0f1f2; /* Toolbars */
|
||||
background-color: var(--theme-toolbar-background);
|
||||
}
|
||||
|
||||
.requests-menu-footer-button,
|
||||
@ -591,12 +575,12 @@ label.requests-menu-status-code {
|
||||
|
||||
.theme-dark .requests-menu-footer-button,
|
||||
.theme-dark .requests-menu-footer-label {
|
||||
color: #f5f7fa; /* Light foreground text */
|
||||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
.theme-light .requests-menu-footer-button,
|
||||
.theme-light .requests-menu-footer-label {
|
||||
color: #18191a; /* Dark foreground text */
|
||||
color: var(--theme-body-color);
|
||||
}
|
||||
|
||||
.requests-menu-footer-spacer {
|
||||
@ -696,12 +680,8 @@ label.requests-menu-status-code {
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.theme-dark #network-statistics-charts {
|
||||
background-color: #343c45; /* Toolbars */
|
||||
}
|
||||
|
||||
.theme-light #network-statistics-charts {
|
||||
background-color: #f0f1f2; /* Toolbars */
|
||||
#network-statistics-charts {
|
||||
background-color: var(--theme-toolbar-background);
|
||||
}
|
||||
|
||||
#network-statistics-charts .pie-chart-container {
|
||||
@ -714,84 +694,44 @@ label.requests-menu-status-code {
|
||||
-moz-margin-end: 3vw;
|
||||
}
|
||||
|
||||
.theme-dark .chart-colored-blob[name=html] {
|
||||
fill: #5e88b0; /* Blue-Grey highlight */
|
||||
background: #5e88b0;
|
||||
.chart-colored-blob[name=html] {
|
||||
fill: var(--theme-highlight-bluegrey);
|
||||
background: var(--theme-highlight-bluegrey);
|
||||
}
|
||||
|
||||
.theme-light .chart-colored-blob[name=html] {
|
||||
fill: #5f88b0; /* Blue-Grey highlight */
|
||||
background: #5f88b0;
|
||||
.chart-colored-blob[name=css] {
|
||||
fill: var(--theme-highlight-blue);
|
||||
background: var(--theme-highlight-blue);
|
||||
}
|
||||
|
||||
.theme-dark .chart-colored-blob[name=css] {
|
||||
fill: #46afe3; /* Blue highlight */
|
||||
background: #46afe3;
|
||||
.chart-colored-blob[name=js] {
|
||||
fill: var(--theme-highlight-lightorange);
|
||||
background: var(--theme-highlight-lightorange);
|
||||
}
|
||||
|
||||
.theme-light .chart-colored-blob[name=css] {
|
||||
fill: #0088cc; /* Blue highlight */
|
||||
background: #0088cc;
|
||||
.chart-colored-blob[name=xhr] {
|
||||
fill: var(--theme-highlight-orange);
|
||||
background: var(--theme-highlight-orange);
|
||||
}
|
||||
|
||||
.theme-dark .chart-colored-blob[name=js] {
|
||||
fill: #d99b28; /* Light Orange highlight */
|
||||
background: #d99b28;
|
||||
.chart-colored-blob[name=fonts] {
|
||||
fill: var(--theme-highlight-purple);
|
||||
background: var(--theme-highlight-purple);
|
||||
}
|
||||
|
||||
.theme-light .chart-colored-blob[name=js] {
|
||||
fill: #d97e00; /* Light Orange highlight */
|
||||
background: #d97e00;
|
||||
.chart-colored-blob[name=images] {
|
||||
fill: var(--theme-highlight-pink);
|
||||
background: var(--theme-highlight-pink);
|
||||
}
|
||||
|
||||
.theme-dark .chart-colored-blob[name=xhr] {
|
||||
fill: #d96629; /* Orange highlight */
|
||||
background: #d96629;
|
||||
.chart-colored-blob[name=media] {
|
||||
fill: var(--theme-highlight-green);
|
||||
background: var(--theme-highlight-green);
|
||||
}
|
||||
|
||||
.theme-light .chart-colored-blob[name=xhr] {
|
||||
fill: #f13c00; /* Orange highlight */
|
||||
background: #f13c00;
|
||||
}
|
||||
|
||||
.theme-dark .chart-colored-blob[name=fonts] {
|
||||
fill: #6b7abb; /* Purple highlight */
|
||||
background: #6b7abb;
|
||||
}
|
||||
|
||||
.theme-light .chart-colored-blob[name=fonts] {
|
||||
fill: #5b5fff; /* Purple highlight */
|
||||
background: #5b5fff;
|
||||
}
|
||||
|
||||
.theme-dark .chart-colored-blob[name=images] {
|
||||
fill: #df80ff; /* Pink highlight */
|
||||
background: #df80ff;
|
||||
}
|
||||
|
||||
.theme-light .chart-colored-blob[name=images] {
|
||||
fill: #b82ee5; /* Pink highlight */
|
||||
background: #b82ee5;
|
||||
}
|
||||
|
||||
.theme-dark .chart-colored-blob[name=media] {
|
||||
fill: #70bf53; /* Green highlight */
|
||||
background: #70bf53;
|
||||
}
|
||||
|
||||
.theme-light .chart-colored-blob[name=media] {
|
||||
fill: #2cbb0f; /* Green highlight */
|
||||
background: #2cbb0f;
|
||||
}
|
||||
|
||||
.theme-dark .chart-colored-blob[name=flash] {
|
||||
fill: #eb5368; /* Red highlight */
|
||||
background: #eb5368;
|
||||
}
|
||||
|
||||
.theme-light .chart-colored-blob[name=flash] {
|
||||
fill: #ed2655; /* Red highlight */
|
||||
background: #ed2655;
|
||||
.chart-colored-blob[name=flash] {
|
||||
fill: var(--theme-highlight-red);
|
||||
background: var(--theme-highlight-red);
|
||||
}
|
||||
|
||||
.table-chart-row-label[name=cached] {
|
||||
|
||||
@ -8,16 +8,8 @@
|
||||
.notice-container {
|
||||
margin-top: -50vh;
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
.theme-dark .notice-container {
|
||||
background: #343c45; /* Toolbars */
|
||||
color: #f5f7fa; /* Light foreground text */
|
||||
}
|
||||
|
||||
.theme-light .notice-container {
|
||||
background: #f0f1f2; /* Toolbars */
|
||||
color: #585959; /* Grey foreground text */
|
||||
background-color: var(--theme-toolbar-background);
|
||||
color: var(--theme-body-color-alt);
|
||||
}
|
||||
|
||||
#empty-notice button,
|
||||
@ -55,14 +47,9 @@
|
||||
-moz-border-end-width: 1px;
|
||||
}
|
||||
|
||||
.theme-dark #recordings-pane > tabs,
|
||||
.theme-dark #recordings-pane .devtools-toolbar {
|
||||
-moz-border-end-color: #000; /* Splitters */
|
||||
}
|
||||
|
||||
.theme-light #recordings-pane > tabs,
|
||||
.theme-light #recordings-pane .devtools-toolbar {
|
||||
-moz-border-end-color: #aaa; /* Splitters */
|
||||
#recordings-pane > tabs,
|
||||
#recordings-pane .devtools-toolbar {
|
||||
-moz-border-end-color: var(--theme-splitter-color);
|
||||
}
|
||||
|
||||
#record-button {
|
||||
@ -97,14 +84,9 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.theme-dark .recording-item-duration,
|
||||
.theme-dark .recording-item-save {
|
||||
color: #b6babf; /* Foreground (Text) - Grey */
|
||||
}
|
||||
|
||||
.theme-light .recording-item-duration,
|
||||
.theme-light .recording-item-save {
|
||||
color: #585959; /* Foreground (Text) - Grey */
|
||||
.recording-item-duration,
|
||||
.recording-item-save {
|
||||
color: var(--theme-body-color-alt);
|
||||
}
|
||||
|
||||
#recordings-list .selected label {
|
||||
@ -132,12 +114,8 @@
|
||||
transition-property: opacity, transform;
|
||||
}
|
||||
|
||||
.theme-dark #profile-content tab {
|
||||
color: #8fa1b2; /* Body Text */
|
||||
}
|
||||
|
||||
.theme-light #profile-content tab {
|
||||
color: #18191a; /* Body Text */
|
||||
#profile-content tab {
|
||||
color: var(--theme-body-color);
|
||||
}
|
||||
|
||||
#profile-content tab:not([selected]) {
|
||||
@ -149,14 +127,9 @@
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.theme-dark #profile-content tab {
|
||||
#profile-content tab {
|
||||
-moz-appearance: none;
|
||||
-moz-border-end: 1px solid #000; /* Splitters */
|
||||
}
|
||||
|
||||
.theme-light #profile-content tab {
|
||||
-moz-appearance: none;
|
||||
-moz-border-end: 1px solid #aaa; /* Splitters */
|
||||
-moz-border-end: 1px solid var(--theme-splitter-color);
|
||||
}
|
||||
|
||||
.theme-dark #profile-content tab:hover {
|
||||
@ -167,14 +140,9 @@
|
||||
background-color: rgba(255,255,255,0.8);
|
||||
}
|
||||
|
||||
.theme-dark #profile-content tab[selected] {
|
||||
background-color: #1d4f73; /* Select Highlight Blue */
|
||||
color: #f5f7fa; /* Light foreground text */
|
||||
}
|
||||
|
||||
.theme-light #profile-content tab[selected] {
|
||||
background-color: #4c9ed9; /* Select Highlight Blue */
|
||||
color: #f5f7fa; /* Light foreground text */
|
||||
#profile-content tab[selected] {
|
||||
background-color: var(--theme-selection-background);
|
||||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
#profile-content tabpanel {
|
||||
@ -229,12 +197,8 @@
|
||||
|
||||
/* Profile call tree */
|
||||
|
||||
.theme-dark .call-tree-headers-container {
|
||||
border-top: 1px solid #000;
|
||||
}
|
||||
|
||||
.theme-light .call-tree-headers-container {
|
||||
border-top: 1px solid #aaa;
|
||||
.call-tree-headers-container {
|
||||
border-top: 1px solid var(--theme-splitter-color);
|
||||
}
|
||||
|
||||
.call-tree-cells-container {
|
||||
@ -276,6 +240,7 @@
|
||||
-moz-box-align: center;
|
||||
overflow: hidden;
|
||||
padding: 1px 4px;
|
||||
color: var(--theme-body-color);
|
||||
}
|
||||
|
||||
.call-tree-header:not(:last-child),
|
||||
@ -286,13 +251,11 @@
|
||||
.theme-dark .call-tree-header,
|
||||
.theme-dark .call-tree-cell {
|
||||
-moz-border-end-color: rgba(255,255,255,0.15);
|
||||
color: #8fa1b2; /* Body Text */
|
||||
}
|
||||
|
||||
.theme-light .call-tree-header,
|
||||
.theme-light .call-tree-cell {
|
||||
-moz-border-end-color: rgba(0,0,0,0.15);
|
||||
color: #18191a; /* Body Text */
|
||||
}
|
||||
|
||||
.call-tree-header:not(:last-child) {
|
||||
@ -303,12 +266,8 @@
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.theme-dark .call-tree-header {
|
||||
background-color: #252c33; /* Tab Toolbar */
|
||||
}
|
||||
|
||||
.theme-light .call-tree-header {
|
||||
background-color: #ebeced; /* Tab Toolbar */
|
||||
.call-tree-header {
|
||||
background-color: var(--theme-tab-toolbar-background);
|
||||
}
|
||||
|
||||
.theme-dark .call-tree-item:last-child:not(:focus) {
|
||||
@ -335,16 +294,12 @@
|
||||
background-color: rgba(76,158,217,0.2);
|
||||
}
|
||||
|
||||
.theme-dark .call-tree-item:focus {
|
||||
background-color: #1d4f73; /* Select Highlight Blue */
|
||||
}
|
||||
|
||||
.theme-light .call-tree-item:focus {
|
||||
background-color: #4c9ed9; /* Select Highlight Blue */
|
||||
.call-tree-item:focus {
|
||||
background-color: var(--theme-selection-background);
|
||||
}
|
||||
|
||||
.call-tree-item:focus label {
|
||||
color: #f5f7fa !important; /* Light foreground text */
|
||||
color: var(--theme-selection-color) !important;
|
||||
}
|
||||
|
||||
.theme-dark .call-tree-item:focus .call-tree-cell {
|
||||
@ -371,33 +326,19 @@
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.theme-dark .call-tree-url {
|
||||
color: #46afe3;
|
||||
.call-tree-url {
|
||||
color: var(--theme-highlight-blue);
|
||||
}
|
||||
|
||||
.theme-light .call-tree-url {
|
||||
color: #0088cc;
|
||||
}
|
||||
|
||||
.theme-dark .call-tree-line {
|
||||
color: #d96629;
|
||||
}
|
||||
|
||||
.theme-light .call-tree-line {
|
||||
color: #f13c00;
|
||||
.call-tree-line {
|
||||
color: var(--theme-highlight-orange);
|
||||
}
|
||||
|
||||
.call-tree-host {
|
||||
-moz-margin-start: 8px !important;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.theme-dark .call-tree-host {
|
||||
color: #8fa1b2;
|
||||
}
|
||||
|
||||
.theme-light .call-tree-host {
|
||||
color: #8fa1b2;
|
||||
color: var(--theme-content-color2);
|
||||
}
|
||||
|
||||
.call-tree-url[value=""],
|
||||
|
||||
@ -51,12 +51,8 @@
|
||||
}
|
||||
|
||||
/* User agent styles are not editable, display them differently */
|
||||
.theme-light .ruleview-rule[uneditable=true] {
|
||||
background: #ebeced; /* Tab Toolbar */
|
||||
}
|
||||
|
||||
.theme-dark .ruleview-rule[uneditable=true] {
|
||||
background: #252c33; /* Tab Toolbar */
|
||||
.ruleview-rule[uneditable=true] {
|
||||
background: var(--theme-tab-toolbar-background);
|
||||
}
|
||||
|
||||
.ruleview-rule[uneditable=true] :focus {
|
||||
@ -64,7 +60,7 @@
|
||||
}
|
||||
|
||||
.ruleview-rule[uneditable=true] .theme-link {
|
||||
color: #5f88b0; /* Blue - Grey */
|
||||
color: var(--theme-highlight-bluegrey);
|
||||
}
|
||||
|
||||
.ruleview-rule[uneditable=true] .ruleview-enableproperty {
|
||||
@ -198,7 +194,7 @@
|
||||
}
|
||||
|
||||
.theme-light .ruleview-overridden {
|
||||
text-decoration-color: #667380; /* Content (Text) - Dark Grey */
|
||||
text-decoration-color: var(--theme-content-color3);
|
||||
}
|
||||
|
||||
.styleinspector-propertyeditor {
|
||||
@ -215,12 +211,8 @@
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.theme-dark .ruleview-property[dirty] {
|
||||
border-left-color: #70bf53; /* Green */
|
||||
}
|
||||
|
||||
.theme-light .ruleview-property[dirty] {
|
||||
border-left-color: #2cbb0f; /* Green */
|
||||
.ruleview-property[dirty] {
|
||||
border-left-color: var(--theme-highlight-green);
|
||||
}
|
||||
|
||||
.ruleview-namecontainer > .ruleview-propertyname,
|
||||
|
||||
@ -6,16 +6,8 @@
|
||||
|
||||
.notice-container {
|
||||
margin-top: -50vh;
|
||||
}
|
||||
|
||||
.theme-dark .notice-container {
|
||||
background-color: #343c45; /* Toolbars */
|
||||
color: #f5f7fa; /* Light foreground text */
|
||||
}
|
||||
|
||||
.theme-light .notice-container {
|
||||
background-color: #f0f1f2; /* Toolbars */
|
||||
color: #585959; /* Grey foreground text */
|
||||
background-color: var(--theme-toolbar-background);
|
||||
color: var(--theme-body-color-alt);
|
||||
}
|
||||
|
||||
#reload-notice {
|
||||
@ -99,26 +91,15 @@
|
||||
border-top: 1px solid;
|
||||
}
|
||||
|
||||
.theme-dark .editor-label {
|
||||
background: #343c45; /* Dark toolbars */
|
||||
border-color: #000; /* Match the splitter color. */
|
||||
color: #f5f7fa; /* Light foreground text */
|
||||
.editor-label {
|
||||
background: var(--theme-toolbar-background);
|
||||
border-color: var(--theme-splitter-color);
|
||||
color: var(--theme-body-color-alt);
|
||||
}
|
||||
|
||||
.theme-light .editor-label {
|
||||
background: #f0f1f2; /* Light toolbars */
|
||||
border-color: #aaa; /* Match the splitter color. */
|
||||
color: #585959; /* Grey foreground text */
|
||||
}
|
||||
|
||||
.theme-dark .editor-label[selected] {
|
||||
background-color: #1d4f73; /* Select Highlight Blue */
|
||||
color: #f5f7fa; /* Light foreground text */
|
||||
}
|
||||
|
||||
.theme-light .editor-label[selected] {
|
||||
background-color: #4c9ed9; /* Select Highlight Blue */
|
||||
color: #f5f7fa; /* Light foreground text */
|
||||
.editor-label[selected] {
|
||||
background-color: var(--theme-selection-background);
|
||||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
/* Responsive sidebar */
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
}
|
||||
|
||||
.theme-dark .splitview-nav-container {
|
||||
background-color: #343c45; /* Toolbars */
|
||||
background-color: var(--theme-toolbar-background);
|
||||
}
|
||||
|
||||
.splitview-nav {
|
||||
|
||||
@ -14,24 +14,24 @@
|
||||
|
||||
.theme-dark .stylesheet-title,
|
||||
.theme-dark .stylesheet-name {
|
||||
color: #f5f7fa;
|
||||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
.theme-dark .stylesheet-rule-count,
|
||||
.theme-dark .stylesheet-linked-file,
|
||||
.theme-dark .stylesheet-saveButton {
|
||||
color: #b6babf;
|
||||
color: var(--theme-body-color-alt);
|
||||
}
|
||||
|
||||
.theme-light .stylesheet-title,
|
||||
.theme-light .stylesheet-name {
|
||||
color: #585959;
|
||||
color: var(--theme-body-color-alt);
|
||||
}
|
||||
|
||||
.theme-light .stylesheet-rule-count,
|
||||
.theme-light .stylesheet-linked-file,
|
||||
.theme-light .stylesheet-saveButton {
|
||||
color: #18191a;
|
||||
color: var(--theme-body-color);
|
||||
}
|
||||
|
||||
.stylesheet-saveButton {
|
||||
@ -44,7 +44,7 @@
|
||||
.theme-light .splitview-active .stylesheet-rule-count,
|
||||
.theme-light .splitview-active .stylesheet-linked-file,
|
||||
.theme-light .splitview-active .stylesheet-saveButton {
|
||||
color: #f5f7fa;
|
||||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
.splitview-nav:focus {
|
||||
@ -205,12 +205,8 @@ h3 {
|
||||
}
|
||||
}
|
||||
|
||||
.theme-light .csscoverage-report {
|
||||
background-color: #f0f1f2; /* Toolbars */
|
||||
}
|
||||
|
||||
.theme-dark .csscoverage-report {
|
||||
background-color: #343c45; /* Toolbars */
|
||||
.csscoverage-report {
|
||||
background-color: var(--theme-toolbar-background);
|
||||
}
|
||||
|
||||
.csscoverage-report-container {
|
||||
@ -274,34 +270,19 @@ h3 {
|
||||
-moz-border-start: none;
|
||||
}
|
||||
|
||||
.theme-dark .chart-colored-blob[name="Used Preload"] {
|
||||
fill: #df80ff; /* Pink highlight */
|
||||
background: #df80ff;
|
||||
.chart-colored-blob[name="Used Preload"] {
|
||||
fill: var(--theme-highlight-pink);
|
||||
background: var(--theme-highlight-pink);;
|
||||
}
|
||||
|
||||
.theme-light .chart-colored-blob[name="Used Preload"] {
|
||||
fill: #b82ee5; /* Pink highlight */
|
||||
background: #b82ee5;
|
||||
.chart-colored-blob[name=Used] {
|
||||
fill: var(--theme-highlight-green);
|
||||
background: var(--theme-highlight-green);
|
||||
}
|
||||
|
||||
.theme-dark .chart-colored-blob[name=Used] {
|
||||
fill: #70bf53; /* Green highlight */
|
||||
background: #70bf53;
|
||||
}
|
||||
|
||||
.theme-light .chart-colored-blob[name=Used] {
|
||||
fill: #2cbb0f; /* Green highlight */
|
||||
background: #2cbb0f;
|
||||
}
|
||||
|
||||
.theme-dark .chart-colored-blob[name=Unused] {
|
||||
fill: #d99b28; /* Light Orange highlight */
|
||||
background: #d99b28;
|
||||
}
|
||||
|
||||
.theme-light .chart-colored-blob[name=Unused] {
|
||||
fill: #d97e00; /* Light Orange highlight */
|
||||
background: #d97e00;
|
||||
.chart-colored-blob[name=Unused] {
|
||||
fill: var(--theme-highlight-lightorange);
|
||||
background: var(--theme-highlight-lightorange);
|
||||
}
|
||||
|
||||
/* Undo 'largest' customization */
|
||||
|
||||
@ -57,6 +57,8 @@
|
||||
margin: 2px 3px;
|
||||
color: inherit;
|
||||
transition: background 0.05s ease-in-out;
|
||||
color: var(--theme-content-color1);
|
||||
background-color: var(--theme-toolbar-background);
|
||||
}
|
||||
|
||||
.devtools-menulist:-moz-focusring,
|
||||
@ -141,14 +143,10 @@
|
||||
|
||||
.theme-dark .devtools-menulist,
|
||||
.theme-dark .devtools-toolbarbutton {
|
||||
color: #a9bacb; /* Body text - high contrast */
|
||||
background-color: #343c45; /* Toolbars */
|
||||
border-color: rgba(0, 0, 0, .4); /* Splitters */
|
||||
}
|
||||
.theme-light .devtools-menulist,
|
||||
.theme-light .devtools-toolbarbutton {
|
||||
color: #292e33; /* Body text - high contrast */
|
||||
background-color: #f0f1f2; /* Toolbars */
|
||||
border-color: rgba(170, 170, 170, .5); /* Splitters */
|
||||
}
|
||||
|
||||
@ -189,7 +187,7 @@
|
||||
.theme-dark .devtools-toolbarbutton[checked=true],
|
||||
.theme-dark #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] {
|
||||
background: rgba(29, 79, 115, .7); /* Select highlight blue */
|
||||
color: #f5f7fa;
|
||||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
.theme-light .devtools-toolbarbutton[checked=true],
|
||||
@ -203,7 +201,7 @@
|
||||
.theme-dark .devtools-toolbarbutton[open=true]:hover:active,
|
||||
.theme-dark .devtools-toolbarbutton[checked=true]:hover {
|
||||
background: rgba(29, 79, 115, .8); /* Select highlight blue */
|
||||
color: #f5f7fa;
|
||||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
.theme-light .devtools-menulist[open=true],
|
||||
@ -259,16 +257,7 @@
|
||||
border-radius: 2px;
|
||||
%endif
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
.theme-dark .devtools-textinput,
|
||||
.theme-dark .devtools-searchinput {
|
||||
border-color: rgb(88, 94, 101);
|
||||
}
|
||||
|
||||
.theme-light .devtools-textinput,
|
||||
.theme-light .devtools-searchinput {
|
||||
border-color: #aaa; /* Match the splitter color */
|
||||
border-color: var(--theme-splitter-color);
|
||||
}
|
||||
|
||||
.devtools-searchinput {
|
||||
@ -310,7 +299,7 @@
|
||||
}
|
||||
|
||||
.devtools-no-search-result {
|
||||
border-color: #eb5368 !important;
|
||||
border-color: var(--theme-highlight-red) !important;
|
||||
}
|
||||
|
||||
/* Close button */
|
||||
@ -349,7 +338,6 @@
|
||||
}
|
||||
|
||||
/* In-tools sidebar */
|
||||
|
||||
.devtools-sidebar-tabs {
|
||||
-moz-appearance: none;
|
||||
margin: 0;
|
||||
@ -363,8 +351,8 @@
|
||||
}
|
||||
|
||||
.theme-light .devtools-sidebar-tabs > tabpanels {
|
||||
background: #f7f7f7;
|
||||
color: #18191a;
|
||||
background: var(--theme-sidebar-background);
|
||||
color: var(--theme-body-color);
|
||||
}
|
||||
|
||||
.devtools-sidebar-tabs > tabs {
|
||||
@ -434,7 +422,7 @@
|
||||
|
||||
.theme-dark .devtools-sidebar-tabs > tabs > tab[selected],
|
||||
.theme-dark .devtools-sidebar-tabs > tabs > tab[selected]:hover:active {
|
||||
color: #f5f7fa;
|
||||
color: var(--theme-selection-color);
|
||||
background: #1d4f73;
|
||||
border-image: @solidSeparatorDark@ 1 1;
|
||||
}
|
||||
@ -464,7 +452,7 @@
|
||||
|
||||
.theme-light .devtools-sidebar-tabs > tabs > tab[selected],
|
||||
.theme-light .devtools-sidebar-tabs > tabs > tab[selected]:hover:active {
|
||||
color: #f5f7fa;
|
||||
color: var(--theme-selection-color);
|
||||
background: #4c9ed9;
|
||||
border-image: @solidSeparatorLight@;
|
||||
}
|
||||
@ -663,18 +651,16 @@
|
||||
border: 0px solid;
|
||||
border-bottom-width: 1px;
|
||||
padding: 0;
|
||||
background: var(--theme-tab-toolbar-background);
|
||||
border-bottom-color: var(--theme-splitter-color);
|
||||
}
|
||||
|
||||
.theme-light .devtools-tabbar {
|
||||
box-shadow: 0 -2px 0 rgba(170,170,170,.1) inset;
|
||||
background: #ebeced;
|
||||
border-bottom-color: #aaa;
|
||||
}
|
||||
|
||||
.theme-dark .devtools-tabbar {
|
||||
box-shadow: 0 -2px 0 rgba(0,0,0,.1) inset;
|
||||
background: #252c33;
|
||||
border-bottom-color: #000;
|
||||
}
|
||||
|
||||
#toolbox-tabs {
|
||||
@ -697,13 +683,13 @@
|
||||
}
|
||||
|
||||
.theme-dark .devtools-tab {
|
||||
color: #b6babf;
|
||||
color: var(--theme-body-color-alt);
|
||||
border-color: #42484f;
|
||||
}
|
||||
|
||||
.theme-light .devtools-tab {
|
||||
color: #18191a;
|
||||
border-color: #aaa;
|
||||
color: var(--theme-body-color);
|
||||
border-color: var(--theme-splitter-color);
|
||||
}
|
||||
|
||||
.theme-dark .devtools-tab:hover {
|
||||
@ -717,7 +703,7 @@
|
||||
|
||||
.theme-dark .devtools-tab:hover:active {
|
||||
background-color: hsla(206,37%,4%,.4);
|
||||
color: #f5f7fa;
|
||||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
.theme-light .devtools-tab:hover:active {
|
||||
@ -755,17 +741,18 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.devtools-tabbar .devtools-tab[selected] {
|
||||
color: var(--theme-selection-color);
|
||||
background-color: var(--theme-selection-background);
|
||||
}
|
||||
|
||||
.theme-dark .devtools-tabbar .devtools-tab[selected] {
|
||||
color: #f5f7fa;
|
||||
background-color: #1a4666;
|
||||
box-shadow: 0 2px 0 #d7f1ff inset,
|
||||
0 8px 3px -5px #2b82bf inset,
|
||||
0 -2px 0 rgba(0,0,0,.2) inset;
|
||||
}
|
||||
|
||||
.theme-light .devtools-tabbar .devtools-tab[selected] {
|
||||
color: #f5f7fa;
|
||||
background-color: #4c9ed9;
|
||||
box-shadow: 0 2px 0 #d7f1ff inset,
|
||||
0 8px 3px -5px #2b82bf inset,
|
||||
0 -2px 0 rgba(0,0,0,.06) inset;
|
||||
|
||||
@ -5,16 +5,8 @@
|
||||
/* Reload and waiting notices */
|
||||
.notice-container {
|
||||
margin-top: -50vh;
|
||||
}
|
||||
|
||||
.theme-dark .notice-container {
|
||||
background-color: #343c45; /* Toolbars */
|
||||
color: #f5f7fa; /* Light foreground text */
|
||||
}
|
||||
|
||||
.theme-light .notice-container {
|
||||
background-color: #f0f1f2; /* Toolbars */
|
||||
color: #585959; /* Grey foreground text */
|
||||
background-color: var(--theme-toolbar-background);
|
||||
color: var(--theme-body-color-alt);
|
||||
}
|
||||
|
||||
#reload-notice {
|
||||
@ -75,7 +67,7 @@ g.edgePath.param-connection {
|
||||
fill: #fcfcfc; /* Background - Editor */
|
||||
}
|
||||
.theme-dark g.edgeLabel tspan {
|
||||
fill: #b6babf; /* Grey foreground text */
|
||||
fill: var(--theme-body-color-alt);
|
||||
}
|
||||
.theme-light g.edgeLabel tspan {
|
||||
fill: #585959; /* Grey foreground text */
|
||||
@ -87,22 +79,13 @@ g.edgePath.param-connection {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.theme-dark .nodes rect {
|
||||
stroke: #252c33; /* Tab toolbar */
|
||||
fill: #343c45; /* Toolbars */
|
||||
.nodes rect {
|
||||
stroke: var(--theme-tab-toolbar-background);
|
||||
fill: var(--theme-toolbar-background);
|
||||
}
|
||||
|
||||
.theme-light .nodes rect {
|
||||
stroke: #ebeced; /* Tab toolbar */
|
||||
fill: #f0f1f2; /* Toolbar */
|
||||
}
|
||||
|
||||
.theme-dark .nodes g.selected rect {
|
||||
fill: #1d4f73; /* Select Highlight Blue */
|
||||
}
|
||||
|
||||
.theme-light .nodes g.selected rect {
|
||||
fill: #4c9ed9; /* Select Highlight Blue */
|
||||
.nodes g.selected rect {
|
||||
fill: var(--theme-selection-background);
|
||||
}
|
||||
|
||||
/* Text in nodes and edges */
|
||||
@ -113,14 +96,12 @@ text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.theme-dark text {
|
||||
fill: #b6babf; /* Grey foreground text */
|
||||
}
|
||||
.theme-light text {
|
||||
fill: #585959; /* Grey foreground text */
|
||||
text {
|
||||
fill: var(--theme-body-color-alt);
|
||||
}
|
||||
|
||||
.theme-light g.selected text {
|
||||
fill: #f0f1f2; /* Toolbars */
|
||||
fill: var(--theme-toolbar-background);
|
||||
}
|
||||
|
||||
.nodes text {
|
||||
|
||||
@ -160,12 +160,8 @@ a {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theme-dark #output-container.hideTimestamps > .message > .indent {
|
||||
background-color: #14171a; /* .theme-body */
|
||||
}
|
||||
|
||||
.theme-light #output-container.hideTimestamps > .message > .indent {
|
||||
background-color: #fcfcfc; /* .theme-body */
|
||||
#output-container.hideTimestamps > .message > .indent {
|
||||
background-color: var(--theme-body-background);
|
||||
}
|
||||
|
||||
.filtered-by-type,
|
||||
@ -219,12 +215,8 @@ a {
|
||||
background-color: rgba(235, 83, 104, 0.17);
|
||||
}
|
||||
|
||||
.theme-dark .console-string {
|
||||
color: #d99b28;
|
||||
}
|
||||
|
||||
.theme-light .console-string {
|
||||
color: hsl(24,85%,39%);
|
||||
.console-string {
|
||||
color: var(--theme-highlight-lightorange);
|
||||
}
|
||||
|
||||
.theme-selected .console-string,
|
||||
@ -499,22 +491,21 @@ a {
|
||||
background-position: -16px 0;
|
||||
}
|
||||
|
||||
/* Replace these values with CSS variables as available */
|
||||
.theme-dark .jsterm-input-container {
|
||||
background-color: #252c33; /* tabToolbarBackgroundColor */
|
||||
border-color: #14171a; /* mainBackgroundColor */
|
||||
.jsterm-input-container {
|
||||
background-color: var(--theme-tab-toolbar-background);
|
||||
border-color: var(--theme-body-background);
|
||||
}
|
||||
|
||||
.theme-dark .jsterm-input-node {
|
||||
color: #a9bacb; /* textColor */
|
||||
.jsterm-input-node {
|
||||
color: var(--theme-content-color1);
|
||||
}
|
||||
|
||||
.theme-dark .jsterm-complete-node {
|
||||
color: #5c6773; /* commentColor */
|
||||
.jsterm-complete-node {
|
||||
color: var(--theme-comment);
|
||||
}
|
||||
|
||||
.theme-dark .navigation-marker .url {
|
||||
background: #14171a; /* mainBackgroundColor */
|
||||
.navigation-marker .url {
|
||||
background: var(--theme-body-background);
|
||||
}
|
||||
|
||||
.theme-dark .inlined-variables-view iframe {
|
||||
@ -526,20 +517,13 @@ a {
|
||||
}
|
||||
|
||||
.theme-light .jsterm-input-container {
|
||||
background-color: #fff; /* mainBackgroundColor */
|
||||
/* For light theme use a white background for the input - it looks better
|
||||
than off-white */
|
||||
background-color: #fff;
|
||||
border-color: ThreeDShadow;
|
||||
}
|
||||
|
||||
.theme-light .jsterm-input-node {
|
||||
color: black; /* textColor */
|
||||
}
|
||||
|
||||
.theme-light .jsterm-complete-node {
|
||||
color: hsl(90,2%,46%); /* commentColor */
|
||||
}
|
||||
|
||||
.theme-light .navigation-marker .url {
|
||||
background: #fff; /* mainBackgroundColor */
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.theme-light .inlined-variables-view iframe {
|
||||
|
||||
@ -122,14 +122,14 @@
|
||||
.scrollbutton-down:-moz-locale-dir(rtl) {
|
||||
border-right: solid 1px rgba(255, 255, 255, .1);
|
||||
border-left: solid 1px transparent;
|
||||
box-shadow: 3px 0px 3px -3px #181d20;
|
||||
box-shadow: 3px 0px 3px -3px var(--theme-sidebar-background);
|
||||
}
|
||||
|
||||
.scrollbutton-down:-moz-locale-dir(ltr),
|
||||
.scrollbutton-up:-moz-locale-dir(rtl) {
|
||||
border-right: solid 1px transparent;
|
||||
border-left: solid 1px rgba(255, 255, 255, .1);
|
||||
box-shadow: -3px 0px 3px -3px #181d20;
|
||||
box-shadow: -3px 0px 3px -3px var(--theme-sidebar-background);
|
||||
}
|
||||
|
||||
.scrollbutton-up[disabled],
|
||||
@ -161,24 +161,14 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.theme-dark #breadcrumb-separator-before,
|
||||
.theme-dark #breadcrumb-separator-after:after {
|
||||
background: #1d4f73; /* Select Highlight Blue */
|
||||
#breadcrumb-separator-before,
|
||||
#breadcrumb-separator-after:after {
|
||||
background: var(--theme-selection-background);
|
||||
}
|
||||
|
||||
.theme-dark #breadcrumb-separator-after,
|
||||
.theme-dark #breadcrumb-separator-before:after {
|
||||
background: #343c45; /* Toolbars */
|
||||
}
|
||||
|
||||
.theme-light #breadcrumb-separator-before,
|
||||
.theme-light #breadcrumb-separator-after:after {
|
||||
background: #4c9ed9; /* Select Highlight Blue */
|
||||
}
|
||||
|
||||
.theme-light #breadcrumb-separator-after,
|
||||
.theme-light #breadcrumb-separator-before:after {
|
||||
background: #f0f1f2; /* Toolbars */
|
||||
#breadcrumb-separator-after,
|
||||
#breadcrumb-separator-before:after {
|
||||
background: var(--theme-toolbar-background);
|
||||
}
|
||||
|
||||
/* This chevron arrow cannot be replicated easily in CSS, so we are using
|
||||
@ -231,12 +221,8 @@
|
||||
background: -moz-element(#breadcrumb-separator-before) no-repeat 0 0;
|
||||
}
|
||||
|
||||
.theme-dark .breadcrumbs-widget-item[checked] {
|
||||
background-color: #1d4f73; /* Select Highlight Blue */
|
||||
}
|
||||
|
||||
.theme-light .breadcrumbs-widget-item[checked] {
|
||||
background-color: #4c9ed9; /* Select Highlight Blue */
|
||||
.breadcrumbs-widget-item[checked] {
|
||||
background-color: var(--theme-selection-background);
|
||||
}
|
||||
|
||||
.breadcrumbs-widget-item:first-child {
|
||||
@ -270,39 +256,27 @@
|
||||
.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
|
||||
.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes,
|
||||
.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes {
|
||||
color: #f5f7fa; /* Foreground (Text) - Light */
|
||||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
.theme-dark .breadcrumbs-widget-item {
|
||||
color: #f5f7fa; /* Foreground (Text) - Light */
|
||||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
.theme-light .breadcrumbs-widget-item {
|
||||
color: #18191a; /* Foreground (Text) - Dark */
|
||||
color: var(--theme-body-color);
|
||||
}
|
||||
|
||||
.theme-dark .breadcrumbs-widget-item-id {
|
||||
color: #b6babf; /* Foreground (Text) - Grey */
|
||||
.breadcrumbs-widget-item-id {
|
||||
color: var(--theme-body-color-alt);
|
||||
}
|
||||
|
||||
.theme-light .breadcrumbs-widget-item-id {
|
||||
color: #585959; /* Foreground (Text) - Grey */
|
||||
.breadcrumbs-widget-item-classes {
|
||||
color: var(--theme-content-color1);
|
||||
}
|
||||
|
||||
.theme-dark .breadcrumbs-widget-item-classes {
|
||||
color: #a9bacb; /* Content (Text) - Light */
|
||||
}
|
||||
|
||||
.theme-light .breadcrumbs-widget-item-classes {
|
||||
color: #667380; /* Content (Text) - Dark Grey */
|
||||
}
|
||||
|
||||
.theme-dark .breadcrumbs-widget-item-pseudo-classes {
|
||||
color: #d99b28; /* Light Orange */
|
||||
}
|
||||
|
||||
.theme-light .breadcrumbs-widget-item-pseudo-classes {
|
||||
color: #d97e00; /* Light Orange */
|
||||
.breadcrumbs-widget-item-pseudo-classes {
|
||||
color: var(--theme-highlight-lightorange);
|
||||
}
|
||||
|
||||
.theme-dark .breadcrumbs-widget-item:not([checked]):hover label {
|
||||
@ -320,14 +294,9 @@
|
||||
transform: translateZ(1px);
|
||||
}
|
||||
|
||||
.theme-dark .simple-list-widget-item.selected {
|
||||
background-color: #1d4f73; /* Select Highlight Blue */
|
||||
color: #f5f7fa; /* Light foreground text */
|
||||
}
|
||||
|
||||
.theme-light .simple-list-widget-item.selected {
|
||||
background-color: #4c9ed9; /* Select Highlight Blue */
|
||||
color: #f5f7fa; /* Light foreground text */
|
||||
.simple-list-widget-item.selected {
|
||||
background-color: var(--theme-selection-background);
|
||||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
.theme-dark .simple-list-widget-item:not(.selected):hover {
|
||||
@ -343,14 +312,9 @@
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.theme-dark .simple-list-widget-empty-text,
|
||||
.theme-dark .simple-list-widget-perma-text {
|
||||
color: #b6babf; /* Light foreground text */
|
||||
}
|
||||
|
||||
.theme-light .simple-list-widget-empty-text,
|
||||
.theme-light .simple-list-widget-perma-text {
|
||||
color: #585959; /* Grey foreground text */
|
||||
.simple-list-widget-empty-text,
|
||||
.simple-list-widget-perma-text {
|
||||
color: var(--theme-body-color-alt);
|
||||
}
|
||||
|
||||
/* FastListWidget */
|
||||
@ -364,12 +328,8 @@
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.theme-dark .fast-list-widget-empty-text {
|
||||
color: #b6babf; /* Light foreground text */
|
||||
}
|
||||
|
||||
.theme-light .fast-list-widget-empty-text {
|
||||
color: #585959; /* Grey foreground text */
|
||||
.fast-list-widget-empty-text {
|
||||
color: var(--theme-body-color-alt);
|
||||
}
|
||||
|
||||
/* SideMenuWidget */
|
||||
@ -381,11 +341,6 @@
|
||||
|
||||
/* SideMenuWidget container */
|
||||
|
||||
.theme-dark .side-menu-widget-container,
|
||||
.theme-dark .side-menu-widget-empty-text {
|
||||
background-color: #343c45; /* Toolbars */
|
||||
}
|
||||
|
||||
.theme-dark .side-menu-widget-container:-moz-locale-dir(ltr),
|
||||
.theme-dark .side-menu-widget-empty-text:-moz-locale-dir(ltr) {
|
||||
box-shadow: inset -1px 0 0 @smw_marginDark@;
|
||||
@ -420,16 +375,15 @@
|
||||
|
||||
.side-menu-widget-group-title {
|
||||
padding: 4px;
|
||||
background-color: var(--theme-tab-toolbar-background);
|
||||
}
|
||||
|
||||
.theme-dark .side-menu-widget-group-title {
|
||||
background-color: #252c33; /* Tab toolbar */
|
||||
color: #a9bacb; /* Light content text */
|
||||
color: var(--theme-content-color1);
|
||||
}
|
||||
|
||||
.theme-light .side-menu-widget-group-title {
|
||||
background-color: #ebeced; /* Tab toolbar */
|
||||
color: #667380; /* Dark grey content text */
|
||||
color: var(--theme-content-color3);
|
||||
}
|
||||
|
||||
/* SideMenuWidget items */
|
||||
@ -444,7 +398,7 @@
|
||||
.theme-dark .side-menu-widget-item {
|
||||
border-top: 1px solid @smw_itemDarkTopBorder@;
|
||||
border-bottom: 1px solid @smw_itemDarkBottomBorder@;
|
||||
color: #f5f7fa; /* Light foreground text */
|
||||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
.theme-dark .side-menu-widget-item:last-of-type {
|
||||
@ -454,21 +408,16 @@
|
||||
.theme-light .side-menu-widget-item {
|
||||
border-top: 1px solid @smw_itemLightTopBorder@;
|
||||
border-bottom: 1px solid @smw_itemLightBottomBorder@;
|
||||
color: #18191a; /* Dark foreground text */
|
||||
color: var(--theme-body-color);
|
||||
}
|
||||
|
||||
.theme-light .side-menu-widget-item:last-of-type {
|
||||
box-shadow: inset 0 -1px 0 @smw_itemLightTopBorder@;
|
||||
}
|
||||
|
||||
.theme-dark .side-menu-widget-item.selected {
|
||||
background-color: #1d4f73; /* Select Highlight Blue */
|
||||
color: #f5f7fa; /* Light foreground text */
|
||||
}
|
||||
|
||||
.theme-light .side-menu-widget-item.selected {
|
||||
background-color: #4c9ed9; /* Select Highlight Blue */
|
||||
color: #f5f7fa; /* Light foreground text */
|
||||
.side-menu-widget-item.selected {
|
||||
background-color: var(--theme-selection-background);
|
||||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
.side-menu-widget-item-arrow {
|
||||
@ -542,22 +491,17 @@
|
||||
|
||||
.theme-dark .side-menu-widget-item.selected .side-menu-widget-item-other {
|
||||
background-color: rgba(0,0,0,.2); /* Darken the selection by 20% */
|
||||
color: #f5f7fa; /* Light foreground text */
|
||||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
.theme-light .side-menu-widget-item.selected .side-menu-widget-item-other {
|
||||
background-color: rgba(255,255,255,.8); /* Lighten the selection by 20% */
|
||||
color: #18191a; /* Dark foreground text */
|
||||
color: var(--theme-body-color);
|
||||
}
|
||||
|
||||
.theme-dark .side-menu-widget-item.selected .side-menu-widget-item-other.selected {
|
||||
.side-menu-widget-item.selected .side-menu-widget-item-other.selected {
|
||||
background-color: transparent;
|
||||
color: #f5f7fa; /* Light foreground text */
|
||||
}
|
||||
|
||||
.theme-light .side-menu-widget-item.selected .side-menu-widget-item-other.selected {
|
||||
background-color: transparent;
|
||||
color: #f5f7fa; /* Light foreground text */
|
||||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
/* SideMenuWidget checkboxes */
|
||||
@ -574,20 +518,15 @@
|
||||
|
||||
/* SideMenuWidget misc */
|
||||
|
||||
.theme-dark .side-menu-widget-container,
|
||||
.theme-dark .side-menu-widget-empty-text {
|
||||
background-color: var(--theme-toolbar-background);
|
||||
}
|
||||
|
||||
.side-menu-widget-empty-text {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.theme-dark .side-menu-widget-empty-text {
|
||||
background-color: #343c45; /* Toolbars */
|
||||
color: #b6babf; /* Foreground (Text) - Grey */
|
||||
}
|
||||
|
||||
.theme-light .side-menu-widget-empty-text {
|
||||
background: #f7f7f7; /* Toolbars */
|
||||
color: #585959; /* Grey foreground text */
|
||||
}
|
||||
|
||||
/* VariablesView */
|
||||
|
||||
.variables-view-container {
|
||||
@ -599,24 +538,14 @@
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.theme-dark .variables-view-empty-notice {
|
||||
color: #b6babf; /* Foreground (Text) - Grey */
|
||||
.variables-view-empty-notice {
|
||||
color: var(--theme-body-color-alt);
|
||||
}
|
||||
|
||||
.theme-light .variables-view-empty-notice {
|
||||
color: #585959; /* Grey foreground text */
|
||||
}
|
||||
|
||||
.theme-dark .variables-view-scope:focus > .title,
|
||||
.theme-dark .variable-or-property:focus > .title {
|
||||
background-color: #1d4f73; /* Selection colors */
|
||||
color: #f5f7fa;
|
||||
}
|
||||
|
||||
.theme-light .variables-view-scope:focus > .title,
|
||||
.theme-light .variable-or-property:focus > .title {
|
||||
background-color: #4c9ed9; /* Selection colors */
|
||||
color: #f5f7fa;
|
||||
.variables-view-scope:focus > .title,
|
||||
.variable-or-property:focus > .title {
|
||||
background-color: var(--theme-selection-background);
|
||||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
.variables-view-scope > .title {
|
||||
@ -1106,21 +1035,16 @@
|
||||
}
|
||||
|
||||
.theme-dark .generic-chart-container {
|
||||
color: #f5f7fa; /* Light foreground text */
|
||||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
.theme-light .generic-chart-container {
|
||||
color: #585959; /* Grey foreground text */
|
||||
color: var(--theme-body-color-alt);
|
||||
}
|
||||
|
||||
.theme-dark .chart-colored-blob {
|
||||
fill: #a9bacb; /* Light content text */
|
||||
background: #a9bacb;
|
||||
}
|
||||
|
||||
.theme-light .chart-colored-blob {
|
||||
fill: #8fa1b2; /* Grey content text */
|
||||
background: #8fa1b2;
|
||||
.chart-colored-blob {
|
||||
fill: var(--theme-content-color2);
|
||||
background: var(--theme-content-color2);
|
||||
}
|
||||
|
||||
/* Charts: Pie */
|
||||
@ -1218,12 +1142,8 @@
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.theme-dark .table-chart-totals {
|
||||
border-top: 1px solid #b6babf; /* Grey foreground text */
|
||||
}
|
||||
|
||||
.theme-light .table-chart-totals {
|
||||
border-top: 1px solid #585959; /* Grey foreground text */
|
||||
.table-chart-totals {
|
||||
border-top: 1px solid var(--theme-body-color-alt); /* Grey foreground text */
|
||||
}
|
||||
|
||||
.table-chart-summary-label {
|
||||
@ -1232,11 +1152,11 @@
|
||||
}
|
||||
|
||||
.theme-dark .table-chart-summary-label {
|
||||
color: #f5f7fa; /* Light foreground text */
|
||||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
.theme-light .table-chart-summary-label {
|
||||
color: #18191a; /* Dark foreground text */
|
||||
color: var(--theme-body-color);
|
||||
}
|
||||
|
||||
/* Table Widget */
|
||||
@ -1252,12 +1172,12 @@
|
||||
}
|
||||
|
||||
.theme-light .table-widget-body {
|
||||
background: #F7F7F7; /* Background-Sidebar */
|
||||
background: var(--theme-sidebar-background);
|
||||
}
|
||||
|
||||
.theme-dark .table-widget-body,
|
||||
.theme-dark .table-widget-empty-text {
|
||||
background-color: #343c45; /* Toolbars */
|
||||
background-color: var(--theme-toolbar-background);
|
||||
}
|
||||
|
||||
.theme-dark .table-widget-body:-moz-locale-dir(ltr) {
|
||||
@ -1347,7 +1267,7 @@
|
||||
.theme-dark .table-widget-cell {
|
||||
border-top: 1px solid @smw_itemDarkTopBorder@;
|
||||
border-bottom: 1px solid @smw_itemDarkBottomBorder@;
|
||||
color: #f5f7fa; /* Light foreground text */
|
||||
color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
.theme-dark:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
|
||||
@ -1365,7 +1285,7 @@
|
||||
}
|
||||
|
||||
.theme-light .table-widget-cell:not(.theme-selected) {
|
||||
color: #18191a; /* Dark foreground text */
|
||||
color: var(--theme-body-color);
|
||||
}
|
||||
|
||||
.theme-light:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
|
||||
@ -1377,23 +1297,13 @@
|
||||
box-shadow: inset 0 -1px 0 @smw_itemLightTopBorder@;
|
||||
}
|
||||
|
||||
.theme-light .table-widget-cell.flash-out {
|
||||
animation: light-flash-out 0.5s ease-in;
|
||||
.table-widget-cell.flash-out {
|
||||
animation: flash-out 0.5s ease-in;
|
||||
}
|
||||
|
||||
@keyframes light-flash-out {
|
||||
@keyframes flash-out {
|
||||
to {
|
||||
background: #E8B671;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-dark .table-widget-cell.flash-out {
|
||||
animation: dark-flash-out 0.5s ease-in;
|
||||
}
|
||||
|
||||
@keyframes dark-flash-out {
|
||||
to {
|
||||
background: #B28025;
|
||||
background: var(--theme-contrast-background);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user