mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-02-26 20:30:41 +00:00
Bug 789364 - Light theme for markup panel, orion, and rule view, r=paul
This commit is contained in:
Heather Arthur
parent
3808bc2ff5
commit
02e4b11263
@ -9,6 +9,7 @@
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="stylesheet" href="chrome://browser/content/devtools/markup-view.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="chrome://browser/skin/devtools/markup-view.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="chrome://browser/skin/devtools/common.css" type="text/css"/>
|
||||
</head>
|
||||
<body role="application">
|
||||
<div id="root"></div>
|
||||
@ -17,19 +18,19 @@
|
||||
<li id="template-container" save="${elt}" class="container"><span save="${expander}" class="expander"></span><span save="${codeBox}" class="codebox"><ul save="${children}" class="children"></ul></span></li>
|
||||
</ul>
|
||||
|
||||
<span id="template-element" save="${elt}" class="editor"><span><</span><span save="${tag}" class="tagname"></span><span save="${attrList}"></span><span save="${newAttr}" class="newattr" tabindex="0"></span>></span>
|
||||
<span id="template-element" save="${elt}" class="editor"><span><</span><span save="${tag}" class="tagname devtools-theme-tagname"></span><span save="${attrList}"></span><span save="${newAttr}" class="newattr" tabindex="0"></span>></span>
|
||||
|
||||
<span id="template-attribute" save="${attr}" data-attr="${attrName}" class="attreditor" style="display:none"> <span class="editable" save="${inner}" tabindex="0"><span save="${name}" class="attrname"></span>="<span save="${val}" class="attrvalue"></span>"</span></span>
|
||||
<span id="template-attribute" save="${attr}" data-attr="${attrName}" class="attreditor" style="display:none"> <span class="editable" save="${inner}" tabindex="0"><span save="${name}" class="attrname devtools-theme-attrname"></span>="<span save="${val}" class="attrvalue devtools-theme-attrvalue"></span>"</span></span>
|
||||
|
||||
<span id="template-text" save="${elt}" class="editor">
|
||||
<span id="template-text" save="${elt}" class="editor text">
|
||||
<pre save="${value}" style="display:inline-block;" tabindex="0"></pre>
|
||||
</span>
|
||||
|
||||
<span id="template-comment" save="${elt}" class="editor comment">
|
||||
<span id="template-comment" save="${elt}" class="editor comment devtools-theme-comment">
|
||||
<span><!--</span><pre save="${value}" style="display:inline-block;" tabindex="0"></pre><span>--></span>
|
||||
</span>
|
||||
|
||||
<span id="template-elementClose" save="${closeElt}"></<span save="${closeTag}" class="tagname"></span>></span>
|
||||
<span id="template-elementClose" save="${closeElt}"></<span save="${closeTag}" class="tagname devtools-theme-tagname"></span>></span>
|
||||
</div>
|
||||
<div id="previewbar" class="disabled">
|
||||
<div id="preview"/>
|
||||
|
||||
@ -174,3 +174,33 @@
|
||||
-moz-margin-end: -3px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Theme */
|
||||
|
||||
.devtools-theme-background {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.devtools-theme-comment {
|
||||
color: hsl(90,2%,46%); /* grey */
|
||||
}
|
||||
|
||||
.devtools-theme-keyword {
|
||||
color: hsl(276,44%,45%); /* purple */
|
||||
}
|
||||
|
||||
.devtools-theme-string {
|
||||
color: hsl(72,100%,27%); /* green */
|
||||
}
|
||||
|
||||
.devtools-theme-tagname {
|
||||
color: hsl(208,81%,21%); /* dark blue */
|
||||
}
|
||||
|
||||
.devtools-theme-attrname {
|
||||
color: hsl(208,56%,40%); /* blue */
|
||||
}
|
||||
|
||||
.devtools-theme-attrvalue {
|
||||
color: hsl(24,85%,39%); /* orange */
|
||||
}
|
||||
|
||||
@ -144,7 +144,7 @@
|
||||
}
|
||||
|
||||
.ruleview-rule-source {
|
||||
color: hsl(121,42%,43%); /* green */
|
||||
color: hsl(90,2%,46%); /* grey */
|
||||
-moz-padding-start: 5px;
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
@ -231,7 +231,7 @@
|
||||
|
||||
.ruleview-propertyname {
|
||||
padding: 1px 0;
|
||||
color: hsl(210,100%,38%); /* blue */
|
||||
color: hsl(276,44%,45%); /* purple */
|
||||
}
|
||||
|
||||
.ruleview-propertyvalue {
|
||||
|
||||
@ -9,32 +9,19 @@
|
||||
|
||||
body {
|
||||
font: message-box;
|
||||
background-color: #131c26;
|
||||
color: #8fa1b2;
|
||||
color: hsl(0,0%,50%);
|
||||
}
|
||||
|
||||
.tagname {
|
||||
color: #a673bf;
|
||||
}
|
||||
|
||||
.attrname {
|
||||
color: #b26b47;
|
||||
}
|
||||
|
||||
.attrvalue {
|
||||
color: #3689b2;
|
||||
.text {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.newattr {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.comment {
|
||||
color: #5c6773;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background-color: #253847;
|
||||
background-color: hsl(0,0%,90%);
|
||||
}
|
||||
|
||||
/* Give some padding to focusable elements to match the editor input
|
||||
|
||||
@ -3,24 +3,24 @@
|
||||
* You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
.viewContainer {
|
||||
background: #cddae5; /* This will be seen as the continuation of the ruler */
|
||||
background: hsl(0,0%,89%); /* This will be seen as the continuation of the ruler */
|
||||
font-family: monospace;
|
||||
font-size: inherit; /* inherit browser's default monospace font size */
|
||||
}
|
||||
|
||||
.view {
|
||||
color: black; /* Default text color */
|
||||
background: #f0f0ff; /* Background of the editor */
|
||||
background: white; /* Background of the editor */
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.readonly > .view {
|
||||
background: #f0f0ff;
|
||||
background: #fdfefd; /* super light green */
|
||||
}
|
||||
|
||||
.ruler {
|
||||
background: #cddae5;
|
||||
color: #7a8a99;
|
||||
background: hsl(0,0%,89%);
|
||||
color: hsl(0,0%,55%);
|
||||
}
|
||||
.ruler.annotations {
|
||||
width: 16px;
|
||||
@ -105,16 +105,10 @@
|
||||
outline: 1px solid grey;
|
||||
}
|
||||
|
||||
.token_singleline_comment {
|
||||
color: #45a946; /* green */
|
||||
}
|
||||
|
||||
.token_multiline_comment {
|
||||
color: #45a946; /* green */
|
||||
}
|
||||
|
||||
.token_doc_comment {
|
||||
color: #45a946; /* green */
|
||||
.token_singleline_comment,
|
||||
.token_multiline_comment,
|
||||
.token_doc_comment {
|
||||
color: hsl(90,2%,50%); /* grey */
|
||||
}
|
||||
|
||||
.token_doc_html_markup {
|
||||
@ -131,12 +125,12 @@
|
||||
}
|
||||
|
||||
.token_string {
|
||||
color: #1e66b1; /* blue */
|
||||
color: hsl(72,100%,27%); /* green */
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token_keyword {
|
||||
color: #dd0058; /* purple */
|
||||
color: hsl(276,44%,45%); /* purple */
|
||||
}
|
||||
|
||||
.token_space {
|
||||
@ -155,34 +149,33 @@
|
||||
|
||||
.line_caret,
|
||||
.annotationLine.currentLine { /* Current line */
|
||||
background: #dae2ee; /* lighter than the background */
|
||||
background: hsl(208, 93%, 94%);
|
||||
}
|
||||
|
||||
.readonly .line_caret,
|
||||
.readonly .annotationLine.currentLine {
|
||||
background: #cddae5; /* a bit darker than the background */
|
||||
background: hsl(208, 80%, 90%);
|
||||
}
|
||||
|
||||
/* Styling for html syntax highlighting */
|
||||
.entity-name-tag {
|
||||
color: #dd0058; /* purple */
|
||||
color: hsl(208,48%,40%); /* blue */
|
||||
}
|
||||
|
||||
.entity-other-attribute-name {
|
||||
color: #dd0058; /* purple */
|
||||
color: hsl(208,48%,40%); /* blue */
|
||||
}
|
||||
|
||||
.punctuation-definition-comment {
|
||||
color: #45a946; /* green */
|
||||
color: hsl(90,2%,50%); /* grey */
|
||||
}
|
||||
|
||||
.comment {
|
||||
color: #45a946; /* green */
|
||||
color: hsl(90,2%,50%); /* grey */
|
||||
}
|
||||
|
||||
.string-quoted {
|
||||
color: #1e66b1; /* blue */
|
||||
font-style: italic;
|
||||
color: hsl(24,85%,39%); /* orange */
|
||||
}
|
||||
|
||||
.invalid {
|
||||
|
||||
@ -189,3 +189,33 @@
|
||||
-moz-margin-end: -3px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Theme */
|
||||
|
||||
.devtools-theme-background {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.devtools-theme-comment {
|
||||
color: hsl(90,2%,46%); /* grey */
|
||||
}
|
||||
|
||||
.devtools-theme-keyword {
|
||||
color: hsl(276,44%,45%); /* purple */
|
||||
}
|
||||
|
||||
.devtools-theme-string {
|
||||
color: hsl(72,100%,27%); /* green */
|
||||
}
|
||||
|
||||
.devtools-theme-tagname {
|
||||
color: hsl(208,81%,21%); /* dark blue */
|
||||
}
|
||||
|
||||
.devtools-theme-attrname {
|
||||
color: hsl(208,56%,40%); /* blue */
|
||||
}
|
||||
|
||||
.devtools-theme-attrvalue {
|
||||
color: hsl(24,85%,39%); /* orange */
|
||||
}
|
||||
|
||||
@ -146,7 +146,7 @@
|
||||
}
|
||||
|
||||
.ruleview-rule-source {
|
||||
color: hsl(121,42%,43%); /* green */
|
||||
color: hsl(90,2%,46%); /* grey */
|
||||
-moz-padding-start: 5px;
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
@ -233,7 +233,7 @@
|
||||
|
||||
.ruleview-propertyname {
|
||||
padding: 1px 0;
|
||||
color: hsl(210,100%,38%); /* blue */
|
||||
color: hsl(276,44%,45%); /* purple */
|
||||
}
|
||||
|
||||
.ruleview-propertyvalue {
|
||||
|
||||
@ -9,32 +9,19 @@
|
||||
|
||||
body {
|
||||
font: message-box;
|
||||
background-color: #131c26;
|
||||
color: #8fa1b2;
|
||||
color: hsl(0,0%,50%);
|
||||
}
|
||||
|
||||
.tagname {
|
||||
color: #a673bf;
|
||||
}
|
||||
|
||||
.attrname {
|
||||
color: #b26b47;
|
||||
}
|
||||
|
||||
.attrvalue {
|
||||
color: #3689b2;
|
||||
.text {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.newattr {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.comment {
|
||||
color: #5c6773;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background-color: #253847;
|
||||
background-color: hsl(0,0%,90%);
|
||||
}
|
||||
|
||||
/* Give some padding to focusable elements to match the editor input
|
||||
|
||||
@ -3,24 +3,24 @@
|
||||
* You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
.viewContainer {
|
||||
background: #cddae5; /* This will be seen as the continuation of the ruler */
|
||||
background: hsl(0,0%,89%); /* This will be seen as the continuation of the ruler */
|
||||
font-family: monospace;
|
||||
font-size: inherit; /* inherit browser's default monospace font size */
|
||||
}
|
||||
|
||||
.view {
|
||||
color: black; /* Default text color */
|
||||
background: #f0f0ff; /* Background of the editor */
|
||||
background: white; /* Background of the editor */
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.readonly > .view {
|
||||
background: #f0f0ff;
|
||||
background: #fdfefd; /* super light green */
|
||||
}
|
||||
|
||||
.ruler {
|
||||
background: #cddae5;
|
||||
color: #7a8a99;
|
||||
background: hsl(0,0%,89%);
|
||||
color: hsl(0,0%,55%);
|
||||
}
|
||||
.ruler.annotations {
|
||||
width: 16px;
|
||||
@ -105,16 +105,10 @@
|
||||
outline: 1px solid grey;
|
||||
}
|
||||
|
||||
.token_singleline_comment {
|
||||
color: #45a946; /* green */
|
||||
}
|
||||
|
||||
.token_multiline_comment {
|
||||
color: #45a946; /* green */
|
||||
}
|
||||
|
||||
.token_doc_comment {
|
||||
color: #45a946; /* green */
|
||||
.token_singleline_comment,
|
||||
.token_multiline_comment,
|
||||
.token_doc_comment {
|
||||
color: hsl(90,2%,50%); /* grey */
|
||||
}
|
||||
|
||||
.token_doc_html_markup {
|
||||
@ -131,12 +125,12 @@
|
||||
}
|
||||
|
||||
.token_string {
|
||||
color: #1e66b1; /* blue */
|
||||
color: hsl(72,100%,27%); /* green */
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token_keyword {
|
||||
color: #dd0058; /* purple */
|
||||
color: hsl(276,44%,45%); /* purple */
|
||||
}
|
||||
|
||||
.token_space {
|
||||
@ -155,34 +149,33 @@
|
||||
|
||||
.line_caret,
|
||||
.annotationLine.currentLine { /* Current line */
|
||||
background: #dae2ee; /* lighter than the background */
|
||||
background: hsl(208, 93%, 94%);
|
||||
}
|
||||
|
||||
.readonly .line_caret,
|
||||
.readonly .annotationLine.currentLine {
|
||||
background: #cddae5; /* a bit darker than the background */
|
||||
background: hsl(208, 80%, 90%);
|
||||
}
|
||||
|
||||
/* Styling for html syntax highlighting */
|
||||
.entity-name-tag {
|
||||
color: #dd0058; /* purple */
|
||||
color: hsl(208,48%,40%); /* blue */
|
||||
}
|
||||
|
||||
.entity-other-attribute-name {
|
||||
color: #dd0058; /* purple */
|
||||
color: hsl(208,48%,40%); /* blue */
|
||||
}
|
||||
|
||||
.punctuation-definition-comment {
|
||||
color: #45a946; /* green */
|
||||
color: hsl(90,2%,50%); /* grey */
|
||||
}
|
||||
|
||||
.comment {
|
||||
color: #45a946; /* green */
|
||||
color: hsl(90,2%,50%); /* grey */
|
||||
}
|
||||
|
||||
.string-quoted {
|
||||
color: #1e66b1; /* blue */
|
||||
font-style: italic;
|
||||
color: hsl(24,85%,39%); /* orange */
|
||||
}
|
||||
|
||||
.invalid {
|
||||
|
||||
@ -195,3 +195,33 @@
|
||||
-moz-margin-end: -3px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Theme */
|
||||
|
||||
.devtools-theme-background {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.devtools-theme-comment {
|
||||
color: hsl(90,2%,46%); /* grey */
|
||||
}
|
||||
|
||||
.devtools-theme-keyword {
|
||||
color: hsl(276,44%,45%); /* purple */
|
||||
}
|
||||
|
||||
.devtools-theme-string {
|
||||
color: hsl(72,100%,27%); /* green */
|
||||
}
|
||||
|
||||
.devtools-theme-tagname {
|
||||
color: hsl(208,81%,21%); /* dark blue */
|
||||
}
|
||||
|
||||
.devtools-theme-attrname {
|
||||
color: hsl(208,56%,40%); /* blue */
|
||||
}
|
||||
|
||||
.devtools-theme-attrvalue {
|
||||
color: hsl(24,85%,39%); /* orange */
|
||||
}
|
||||
|
||||
@ -146,7 +146,7 @@
|
||||
}
|
||||
|
||||
.ruleview-rule-source {
|
||||
color: hsl(121,42%,43%); /* green */
|
||||
color: hsl(90,2%,46%); /* grey */
|
||||
-moz-padding-start: 5px;
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
@ -233,7 +233,7 @@
|
||||
|
||||
.ruleview-propertyname {
|
||||
padding: 1px 0;
|
||||
color: hsl(210,100%,38%); /* blue */
|
||||
color: hsl(276,44%,45%); /* purple */
|
||||
}
|
||||
|
||||
.ruleview-propertyvalue {
|
||||
|
||||
@ -9,32 +9,19 @@
|
||||
|
||||
body {
|
||||
font: message-box;
|
||||
background-color: #131c26;
|
||||
color: #8fa1b2;
|
||||
color: hsl(0,0%,50%);
|
||||
}
|
||||
|
||||
.tagname {
|
||||
color: #a673bf;
|
||||
}
|
||||
|
||||
.attrname {
|
||||
color: #b26b47;
|
||||
}
|
||||
|
||||
.attrvalue {
|
||||
color: #3689b2;
|
||||
.text {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.newattr {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.comment {
|
||||
color: #5c6773;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background-color: #253847;
|
||||
background-color: hsl(0,0%,90%);
|
||||
}
|
||||
|
||||
/* Give some padding to focusable elements to match the editor input
|
||||
|
||||
@ -3,24 +3,24 @@
|
||||
* You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
.viewContainer {
|
||||
background: #cddae5; /* This will be seen as the continuation of the ruler */
|
||||
background: hsl(0,0%,89%); /* This will be seen as the continuation of the ruler */
|
||||
font-family: monospace;
|
||||
font-size: inherit; /* inherit browser's default monospace font size */
|
||||
}
|
||||
|
||||
.view {
|
||||
color: black; /* Default text color */
|
||||
background: #f0f0ff; /* Background of the editor */
|
||||
background: white; /* Background of the editor */
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.readonly > .view {
|
||||
background: #f0f0ff;
|
||||
background: #fdfefd; /* super light green */
|
||||
}
|
||||
|
||||
.ruler {
|
||||
background: #cddae5;
|
||||
color: #7a8a99;
|
||||
background: hsl(0,0%,89%);
|
||||
color: hsl(0,0%,55%);
|
||||
}
|
||||
.ruler.annotations {
|
||||
width: 16px;
|
||||
@ -105,16 +105,10 @@
|
||||
outline: 1px solid grey;
|
||||
}
|
||||
|
||||
.token_singleline_comment {
|
||||
color: #45a946; /* green */
|
||||
}
|
||||
|
||||
.token_multiline_comment {
|
||||
color: #45a946; /* green */
|
||||
}
|
||||
|
||||
.token_doc_comment {
|
||||
color: #45a946; /* green */
|
||||
.token_singleline_comment,
|
||||
.token_multiline_comment,
|
||||
.token_doc_comment {
|
||||
color: hsl(90,2%,50%); /* grey */
|
||||
}
|
||||
|
||||
.token_doc_html_markup {
|
||||
@ -131,12 +125,12 @@
|
||||
}
|
||||
|
||||
.token_string {
|
||||
color: #1e66b1; /* blue */
|
||||
color: hsl(72,100%,27%); /* green */
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token_keyword {
|
||||
color: #dd0058; /* purple */
|
||||
color: hsl(276,44%,45%); /* purple */
|
||||
}
|
||||
|
||||
.token_space {
|
||||
@ -155,34 +149,33 @@
|
||||
|
||||
.line_caret,
|
||||
.annotationLine.currentLine { /* Current line */
|
||||
background: #dae2ee; /* lighter than the background */
|
||||
background: hsl(208, 93%, 94%);
|
||||
}
|
||||
|
||||
.readonly .line_caret,
|
||||
.readonly .annotationLine.currentLine {
|
||||
background: #cddae5; /* a bit darker than the background */
|
||||
background: hsl(208, 80%, 90%);
|
||||
}
|
||||
|
||||
/* Styling for html syntax highlighting */
|
||||
.entity-name-tag {
|
||||
color: #dd0058; /* purple */
|
||||
color: hsl(208,48%,40%); /* blue */
|
||||
}
|
||||
|
||||
.entity-other-attribute-name {
|
||||
color: #dd0058; /* purple */
|
||||
color: hsl(208,48%,40%); /* blue */
|
||||
}
|
||||
|
||||
.punctuation-definition-comment {
|
||||
color: #45a946; /* green */
|
||||
color: hsl(90,2%,50%); /* grey */
|
||||
}
|
||||
|
||||
.comment {
|
||||
color: #45a946; /* green */
|
||||
color: hsl(90,2%,50%); /* grey */
|
||||
}
|
||||
|
||||
.string-quoted {
|
||||
color: #1e66b1; /* blue */
|
||||
font-style: italic;
|
||||
color: hsl(24,85%,39%); /* orange */
|
||||
}
|
||||
|
||||
.invalid {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user