devtools/client/themes/light-theme.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
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 @import url(chrome://devtools/skin/variables.css);
   6 @import url(chrome://devtools/skin/common.css);
   7 @import url(chrome://devtools/skin/toolbars.css);
   8 @import url(chrome://devtools/skin/tooltips.css);
   9
  10 body {
  11   margin: 0;
  12 }
  13
  14 .theme-body {
  15   background: var(--theme-body-background);
  16   color: var(--theme-body-color);
  17 }
  18
  19 .theme-sidebar {
  20   background: var(--theme-sidebar-background);
  21   color: var(--theme-body-color);
  22 }
  23
  24 .theme-selected,
  25 .CodeMirror-hint-active {
  26   background-color: var(--theme-selection-background);
  27   color: var(--theme-selection-color);
  28 }
  29
  30 .variable-or-property:not([overridden])[changed] {
  31   background: var(--theme-contrast-background);
  32 }
  33
  34 .theme-link,
  35 .cm-s-mozilla .cm-link,
  36 .cm-editor .tok-link,
  37 .CodeMirror-Tern-type {
  38   color: var(--theme-comment);
  39 }
  40
  41 /*
  42  * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion
  43  * failures in debug builds.
  44  */
  45 :is(
  46   .theme-link,
  47   .cm-s-mozilla .cm-link,
  48   .cm-editor .tok-link
  49 ):visited {
  50   color: var(--theme-link-color);
  51 }
  52
  53 .theme-comment,
  54 .cm-s-mozilla .cm-meta,
  55 .cm-s-mozilla .cm-hr,
  56 .cm-s-mozilla .cm-comment
  57 .cm-editor :is(
  58   .tok-meta,
  59   .tok-comment
  60 ),
  61 .variable-or-property .token-undefined,
  62 .variable-or-property .token-null,
  63 .CodeMirror-Tern-completion-unknown:before {
  64   color: var(--theme-comment);
  65 }
  66
  67 .cm-s-mozilla .cm-unused-line {
  68   text-decoration: line-through;
  69   text-decoration-color: var(--theme-highlight-bluegrey);
  70 }
  71
  72 .cm-s-mozilla .cm-executed-line {
  73   background-color: #fcfffc;
  74 }
  75
  76 .cm-s-mozilla .cm-number,
  77 .cm-editor .tok-number,
  78 .variable-or-property .token-number,
  79 .variable-or-property[return] > .title > .name,
  80 .variable-or-property[scope] > .title > .name {
  81   color: var(--theme-highlight-purple);
  82 }
  83
  84 .CodeMirror-Tern-completion-number:before {
  85   background-color: hsl(72,100%,27%);
  86 }
  87
  88 .theme-fg-color1,
  89 .cm-s-mozilla .cm-attribute,
  90 .cm-s-mozilla .cm-builtin,
  91 .cm-s-mozilla .cm-keyword,
  92 .cm-editor .tok-keyword,
  93 .variables-view-variable > .title > .name {
  94   color: var(--theme-highlight-red);
  95 }
  96
  97 .cm-s-mozilla .cm-def,
  98 .cm-s-mozilla .cm-variable-2,
  99 .cm-editor :is(
 100   .tok-variableName.tok-definition,
 101   .tok-variableName
 102 ) {
 103   color: var(--blue-55);
 104 }
 105
 106 .cm-s-mozilla .cm-variable,
 107 .cm-editor .tok-variableName2 {
 108   color: var(--purple-60);
 109 }
 110
 111 .cm-s-mozilla .cm-property,
 112 .cm-editor .tok-propertyName {
 113   color: var(--theme-highlight-green);
 114 }
 115
 116 .CodeMirror-Tern-completion-object:before {
 117   background-color: hsl(208,56%,40%);
 118 }
 119
 120 .theme-fg-color3,
 121 .cm-s-mozilla .cm-tag,
 122 .cm-s-mozilla .cm-header,
 123 .cm-s-mozilla .cm-bracket,
 124 .cm-s-mozilla .cm-qualifier,
 125 .cm-editor .tok-heading,
 126 .variables-view-property > .title > .name {
 127   color: var(--theme-highlight-blue);
 128 }
 129
 130 .CodeMirror-Tern-completion-array:before {
 131   background-color: var(--theme-highlight-bluegrey);
 132 }
 133
 134 .theme-fg-color2,
 135 .cm-s-mozilla .cm-string,
 136 .cm-s-mozilla .cm-string-2,
 137 .cm-editor .tok-string,
 138 .variable-or-property .token-string,
 139 .CodeMirror-Tern-farg {
 140   color: var(--theme-highlight-purple);
 141 }
 142
 143 .CodeMirror-Tern-completion-string:before,
 144 .CodeMirror-Tern-completion-fn:before {
 145   background-color: hsl(24,85%,39%);
 146 }
 147
 148 .cm-s-mozilla .cm-atom,
 149 .cm-s-mozilla .cm-quote,
 150 .cm-s-mozilla .cm-error,
 151 .cm-editor :is(
 152   .tok-atom,
 153   .tok-bool,
 154   .tok-invalid
 155 ),
 156 .variable-or-property .token-boolean,
 157 .variable-or-property .token-domnode,
 158 .variable-or-property[exception] > .title > .name {
 159   color: var(--theme-highlight-red);
 160 }
 161
 162 .CodeMirror-Tern-completion-bool:before {
 163   background-color: #bf5656;
 164 }
 165
 166 .variable-or-property .token-domnode {
 167   font-weight: bold;
 168 }
 169
 170 .theme-toolbar,
 171 .devtools-toolbar,
 172 .devtools-sidebar-tabs tabs,
 173 .devtools-sidebar-alltabs,
 174 .cm-s-mozilla .CodeMirror-dialog { /* General toolbar styling */
 175   color: var(--theme-body-color);
 176   background-color: var(--theme-toolbar-background);
 177   border-color: var(--theme-splitter-color);
 178 }
 179
 180 .theme-bg-contrast {
 181   background: var(--theme-contrast-background);
 182 }
 183
 184 .theme-fg-contrast {
 185   color: var(--theme-contrast-color);
 186 }
 187
 188 .ruleview-swatch,
 189 .computed-colorswatch {
 190   box-shadow: 0 0 0 1px #c4c4c4;
 191 }
 192
 193 /* CodeMirror specific styles.
 194  * Best effort to match the existing theme, some of the colors
 195  * are duplicated here to prevent weirdness in the main theme. */
 196
 197 .CodeMirror.cm-s-mozilla { /* Inherit platform specific font sizing and styles */
 198   font-family: inherit;
 199   font-size: inherit;
 200   background: transparent;
 201 }
 202
 203 .CodeMirror.cm-s-mozilla  pre,
 204 .CodeMirror.cm-s-mozilla  pre.CodeMirror-line,
 205 .CodeMirror.cm-s-mozilla  pre.CodeMirror-line-like,
 206 .cm-s-mozilla .cm-variable-3,
 207 .cm-s-mozilla .cm-operator,
 208 .cm-s-mozilla .cm-special,
 209 .cm-editor :is(
 210   .tok-punctuation,
 211   .tok-operator
 212 ) {
 213   color: var(--theme-body-color);
 214 }
 215
 216 .cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor:not(.CodeMirror-secondarycursor),
 217 .cm-editor .cm-cursor {
 218   border-left: solid 1px black;
 219 }
 220
 221 .cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
 222   background: rgb(185, 215, 253);
 223 }
 224
 225 .cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */
 226   background: rgb(210, 210, 210);
 227 }
 228
 229 .cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
 230   background: rgba(185, 215, 253, .35);
 231 }
 232
 233 div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */
 234   outline: solid 1px rgba(0, 0, 0, .25);
 235   color: black;
 236 }
 237
 238 /* Highlight for a line that contains an error. */
 239 div.CodeMirror div.error-line {
 240   background: rgba(255,0,0,0.2);
 241 }
 242
 243 /* Generic highlighted text */
 244 div.CodeMirror span.marked-text {
 245   background: rgba(255,255,0,0.2);
 246   border: 1px dashed rgba(192,192,0,0.6);
 247   margin-inline-start: -1px;
 248   margin-inline-end: -1px;
 249 }
 250
 251 .cm-s-mozilla .empty-line .CodeMirror-linenumber {
 252   color: var(--grey-40);
 253 }
 254
 255 /* Blackboxing lines */
 256 .CodeMirror-lines .blackboxed-line :is(span, .cm-comment, .CodeMirror-gutter-elt) {
 257   color: #806414cc;
 258 }
 259
 260 /* Highlight for evaluating current statement. */
 261 div.CodeMirror span.eval-text {
 262   background-color: #ccd;
 263 }
 264
 265 .cm-s-mozilla .CodeMirror-linenumber { /* line number text */
 266   color: var(--grey-50);
 267 }
 268
 269 .cm-s-mozilla .CodeMirror-gutters,
 270 .cm-editor .cm-gutters { /* vertical line next to line numbers */
 271   border-right-color: var(--theme-splitter-color);
 272   background-color: var(--theme-sidebar-background);
 273 }
 274
 275 .CodeMirror-hints,
 276 .CodeMirror-Tern-tooltip {
 277   box-shadow: 0 0 4px rgba(128, 128, 128, .5);
 278   background-color: var(--theme-sidebar-background);
 279 }