Bug 789364 - Light theme for markup panel, orion, and rule view, r=paul

This commit is contained in:
Heather Arthur 2012-10-01 19:34:05 +03:00
Родитель 3808bc2ff5
Коммит 02e4b11263
13 изменённых файлов: 168 добавлений и 137 удалений

Просмотреть файл

@ -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>&lt;</span><span save="${tag}" class="tagname"></span><span save="${attrList}"></span><span save="${newAttr}" class="newattr" tabindex="0"></span>&gt;</span>
<span id="template-element" save="${elt}" class="editor"><span>&lt;</span><span save="${tag}" class="tagname devtools-theme-tagname"></span><span save="${attrList}"></span><span save="${newAttr}" class="newattr" tabindex="0"></span>&gt;</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>=&quot;<span save="${val}" class="attrvalue"></span>&quot;</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>=&quot;<span save="${val}" class="attrvalue devtools-theme-attrvalue"></span>&quot;</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>&lt;!--</span><pre save="${value}" style="display:inline-block;" tabindex="0"></pre><span>--&gt;</span>
</span>
<span id="template-elementClose" save="${closeElt}">&lt;/<span save="${closeTag}" class="tagname"></span>&gt;</span>
<span id="template-elementClose" save="${closeElt}">&lt;/<span save="${closeTag}" class="tagname devtools-theme-tagname"></span>&gt;</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 {