browser/devtools/orion.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
   3  * You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 .viewContainer {
   6   background: #000000; /* This will be seen as the continuation of the ruler */
   7   font-family: "Liberation Mono", Consolas, "Courier New", monospace;
   8   /* font-size: inherit; * inherit browser's default monospace font size */
   9   font-size: 11px; /* use typical LCARStrek font size */
  10 }
  11
  12 .view {
  13   color: #FF9F00; /* Default text color */
  14   background: #000000; /* Background of the editor */
  15   padding-left: 4px;
  16 }
  17
  18 .readonly > .view {
  19   background: #000000; /* super light green */
  20 }
  21
  22 .ruler {
  23   background: #402800;
  24   color: #E7ADE7;
  25 }
  26 .ruler.annotations {
  27   width: 16px;
  28   padding-left: 4px;
  29 }
  30 .ruler.lines {
  31   border-right: 1px solid #794900;
  32   min-width: 1.4em;
  33   padding-left: 4px;
  34   padding-right: 4px;
  35   text-align: end;
  36 }
  37
  38 .ruler.linesWithAnnotations {
  39   min-width: 0;
  40   padding-left: 0;
  41 }
  42
  43 .ruler.overview {
  44   border-left: 1px solid #794900;
  45   width: 14px;
  46   text-align: start;
  47 }
  48
  49 /* Styles for the annotation ruler (first line) */
  50 .annotationHTML {
  51   cursor: pointer;
  52   width: 16px;
  53   height: 16px;
  54   display: inline-block;
  55   vertical-align: middle;
  56   background-position: center;
  57   background-repeat: no-repeat;
  58 }
  59 .annotation.task .annotationHTML {
  60   background-image: url("chrome://browser/skin/devtools/orion-task.png");
  61 }
  62 .annotation.breakpoint .annotationHTML {
  63   background-image: url("chrome://browser/skin/devtools/orion-breakpoint.png");
  64 }
  65 .annotation.debugLocation .annotationHTML {
  66   background-image: url("chrome://browser/skin/devtools/orion-debug-location.png");
  67 }
  68 .annotation.breakpoint.debugLocation .annotationHTML,
  69 .annotation.task.debugLocation .annotationHTML {
  70   background-position: center, center;
  71   background-repeat: no-repeat, no-repeat;
  72   background-size: 75%, 100%;
  73 }
  74 .annotation.breakpoint.debugLocation .annotationHTML {
  75   background-image: url("chrome://browser/skin/devtools/orion-debug-location.png"),
  76                     url("chrome://browser/skin/devtools/orion-breakpoint.png");
  77 }
  78
  79 .annotation.task.debugLocation .annotationHTML {
  80   background-image: url("chrome://browser/skin/devtools/orion-debug-location.png"),
  81                     url("chrome://browser/skin/devtools/orion-task.png");
  82 }
  83
  84 /* Styles for the overview ruler  */
  85 .annotationOverview {
  86   cursor: pointer;
  87   border-radius: 2px;
  88   left: 2px;
  89   width: 8px;
  90 }
  91 .annotationOverview.task {
  92   background-color: #004000;
  93   border: 1px solid #33FF33;
  94 }
  95 .annotationOverview.breakpoint {
  96   background-color: #262640;
  97   border: 1px solid #9C9CFF;
  98 }
  99 .annotationOverview.debugLocation {
 100   background-color: #404000;
 101   border: 1px solid #33FF33;
 102 }
 103 .annotationOverview.currentBracket {
 104   background-color: #808080;
 105   border: 1px solid #FF0000;
 106 }
 107 .annotationOverview.matchingBracket {
 108   background-color: #808080;
 109   border: 1px solid #FF0000;
 110 }
 111
 112 /* Styles for text range */
 113 .annotationRange {
 114   background-repeat: repeat-x;
 115   background-position: left bottom;
 116 }
 117 .annotationRange.task {
 118   outline: 1px dashed rgba(0, 255, 0, 0.5);
 119 }
 120 .annotationRange.matchingBracket {
 121   outline: 1px solid #008484;
 122 }
 123
 124 .token_singleline_comment,
 125 .token_multiline_comment,
 126 .token_doc_comment {
 127   color: #33CC33;  /* grey */
 128 }
 129
 130 .token_doc_html_markup {
 131   color: #E7ADE7; /* purple */
 132 }
 133
 134 .token_doc_tag {
 135   color: #E7ADE7; /* purple */
 136 }
 137
 138 .token_task_tag { /* "TODO" */
 139   color: black;
 140   background: #FFCF00;
 141 }
 142
 143 .token_string {
 144   color: #9C9CFF; /* green */
 145   font-style: italic;
 146 }
 147
 148 .token_keyword {
 149   color: #E7ADE7; /* purple */
 150 }
 151
 152 .token_space {
 153   /* images/white_space.png */
 154   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAABnRSTlMA/wAAAACkwsAdAAAAIUlEQVR4nGP4z8CAC+GUIEXuABhgkTuABEiRw2cmae4EAH05X7xDolNRAAAAAElFTkSuQmCC");
 155   background-repeat: no-repeat;
 156   background-position: center center;
 157 }
 158
 159 .token_tab {
 160   /* images/white_tab.png */
 161   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAJCAIAAACJ2loDAAAABnRSTlMA/wD/AP83WBt9AAAAMklEQVR4nGP4TwRgoK6i52c3bz5w6zMSA6tJn28d2Lx589nnCAYu63AaSLxJRLoJPwAAeNk0aG4opfMAAAAASUVORK5CYII=");
 162   background-repeat: no-repeat;
 163   background-position: left center;
 164 }
 165
 166 .line_caret,
 167 .annotationLine.currentLine { /* Current line */
 168   background: #402800;
 169 }
 170
 171 .readonly .line_caret,
 172 .readonly .annotationLine.currentLine {
 173   background: #402800;
 174 }
 175
 176 /* Styling for html syntax highlighting */
 177 .entity-name-tag {
 178   color: #E7ADE7; /* blue */
 179 }
 180
 181 .entity-other-attribute-name {
 182   color: #E7ADE7; /* blue */
 183 }
 184
 185 .punctuation-definition-comment {
 186   color: #33CC33; /* grey */
 187 }
 188
 189 .comment {
 190   color: #33CC33; /* grey */
 191 }
 192
 193 .string-quoted {
 194   color: #9C9CFF; /* orange */
 195 }
 196
 197 .invalid {
 198   color: red;
 199   font-weight: bold;
 200 }