LCARStrek/browser/devtools/debugger.css

   1 /* -*- Mode: javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
   2 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
   3 /* This Source Code Form is subject to the terms of the Mozilla Public
   4  * License, v. 2.0. If a copy of the MPL was not distributed with this
   5  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   6
   7 window {
   8   padding: 0;
   9 }
  10
  11 #body {
  12   /* background: #000000; */
  13 }
  14
  15 /**
  16  * Debugger content
  17  */
  18
  19 #dbg-content {
  20   /* padding: 6px; */
  21 }
  22
  23 .devtools-side-splitter {
  24   border: none;
  25 }
  26
  27 /**
  28  * Lists and headers
  29  */
  30
  31 .list-item {
  32   padding: 2px;
  33 /*  font: -moz-list; */
  34 }
  35
  36 .list-item.selected {
  37   background: #008484;
  38   color: #FFCF00;
  39 }
  40
  41 .list-item.empty {
  42   color: #8050B0;
  43 }
  44
  45 /**
  46  * Stack frames
  47  */
  48
  49 #stackframes {
  50   /* background-color: white; */
  51 }
  52
  53 .dbg-stackframe {
  54   -moz-padding-start: 4px;
  55   -moz-padding-end: 4px;
  56 }
  57
  58 .dbg-stackframe-name {
  59   font-weight: 600;
  60 }
  61
  62 /**
  63  * Properties elements
  64  */
  65
  66 #variables {
  67 /*  background-color: white; */
  68 }
  69
  70 /**
  71  * Generic element details container
  72  */
  73
  74 .details {
  75   -moz-margin-start: 10px;
  76 }
  77
  78 /**
  79  * Scope element
  80  */
  81
  82 .scope > .title {
  83   margin-top: 1px;
  84   -moz-padding-start: 2px;
  85   background: #E7ADE7;
  86   border-radius: 5px;
  87   color: #000000;
  88 }
  89
  90 .scope > .title > .name {
  91   padding-top: 2px;
  92   padding-bottom: 2px;
  93 }
  94
  95 .scope > .details {
  96   -moz-margin-start: 2px;
  97   -moz-margin-end: 2px;
  98 }
  99
 100 /**
 101  * Variable element
 102  */
 103
 104 .variable {
 105   -moz-margin-start: 1px;
 106   -moz-margin-end: 1px;
 107   margin-top: 2px;
 108   border-bottom: 1px dotted #008484;
 109   border-radius: 8px;
 110   -moz-transition: background 1s ease-in-out;
 111   background: #000000;
 112 }
 113
 114 .variable[changed] {
 115   -moz-transition-duration: 0.4s;
 116   background: #FFCF00;
 117 }
 118
 119 .variable[added] {
 120   -moz-transition-duration: 0.4s;
 121   background: #008484;
 122 }
 123
 124 .variable > .title > .arrow {
 125   margin-top: -2px;
 126 }
 127
 128 .variable > .title > .name {
 129   color: #FF9F00;
 130   font-weight: 600;
 131 }
 132
 133 /**
 134  * Property element
 135  */
 136
 137 .property > .title > .arrow {
 138   margin-top: -2px;
 139 }
 140
 141 .property > .title > .key {
 142   color: #E7ADE7;
 143 }
 144
 145 /**
 146  * Property colors
 147  */
 148
 149 .token-undefined {
 150   -moz-padding-start: 6px;
 151   color: #8050B0;
 152 }
 153
 154 .token-null {
 155   -moz-padding-start: 6px;
 156   color: #008484;
 157 }
 158
 159 .token-boolean {
 160   -moz-padding-start: 6px;
 161   color: #FFCF00;
 162 }
 163
 164 .token-number {
 165   -moz-padding-start: 6px;
 166   color: #E7ADE7;
 167 }
 168
 169 .token-string {
 170   -moz-padding-start: 6px;
 171   color: #9C9CFF;
 172 }
 173
 174 .token-other {
 175   -moz-padding-start: 6px;
 176   color: #FF9F00;
 177 }
 178
 179 /**
 180  * Expand/collapse arrow
 181  */
 182
 183 .arrow {
 184   width: 9px;
 185   height: 9px;
 186   -moz-margin-start: 5px;
 187   -moz-margin-end: 5px;
 188   margin-top: -2px;
 189   background: url("chrome://global/skin/tree/twisty-closed.gif") center center no-repeat;
 190 }
 191
 192 .arrow[open] {
 193   background-image: url("chrome://global/skin/tree/twisty-open.gif");
 194 }
 195
 196 .scope > .title > .arrow {
 197   background-image: url("chrome://global/skin/tree/twisty-closed-selected.gif");
 198 }
 199
 200 .scope > .title > .arrow[open] {
 201   background-image: url("chrome://global/skin/tree/twisty-open-selected.gif");
 202 }
 203
 204 /**
 205  * Animations
 206  */
 207
 208 .details[open] {
 209   -moz-animation-duration: 0.25s;
 210   -moz-animation-name: showblock;
 211 }
 212
 213 @-moz-keyframes showblock {
 214   from {
 215     opacity: 0;
 216     -moz-transform-origin: top;
 217     -moz-transform: scaleY(0);
 218   }
 219
 220   to {
 221     opacity: 1;
 222     -moz-transform-origin: top;
 223     -moz-transform: scaleY(1);
 224   }
 225 }
 226
 227 /**
 228  * Toolbar Controls
 229  */
 230
 231 #resume {
 232   list-style-image: url("chrome://browser/skin/devtools/debugger-pause.png");
 233   -moz-image-region: rect(0px, 16px, 16px, 0px);
 234 }
 235
 236 #resume[checked=true],
 237 #resume:hover {
 238   -moz-image-region: rect(0px, 32px, 16px, 16px);
 239 }
 240
 241 #step-over {
 242   list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
 243   -moz-image-region: rect(0px, 16px, 16px, 0px);
 244 }
 245 #step-over:hover {
 246   -moz-image-region: rect(0px, 32px, 16px, 16px);
 247 }
 248
 249 #step-in {
 250   list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png");
 251   -moz-image-region: rect(0px, 16px, 16px, 0px);
 252 }
 253 #step-in:hover {
 254   -moz-image-region: rect(0px, 32px, 16px, 16px);
 255 }
 256
 257 #step-out {
 258   list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png");
 259   -moz-image-region: rect(0px, 16px, 16px, 0px);
 260 }
 261 #step-out:hover {
 262   -moz-image-region: rect(0px, 32px, 16px, 16px);
 263 }
 264
 265 #debugger-controls > toolbarbutton {
 266 }
 267
 268 #debugger-controls > toolbarbutton:last-of-type {
 269 }
 270
 271 #debugger-controls {
 272 }