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 div,
  16 span,
  17 a {
  18   font: inherit;
  19 }
  20
  21 /**
  22  * Debugger toolbar
  23  */
  24
  25 #dbg-toolbar {
  26   /*padding: 2px;*/
  27 }
  28
  29 #dbg-toolbar > button {
  30   text-align: center;
  31 }
  32
  33 .devtools-closebutton {
  34   list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
  35 }
  36
  37 .devtools-closebutton:hover {
  38   list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
  39 }
  40
  41 /**
  42  * Debugger content
  43  */
  44
  45 #dbg-content {
  46   /* padding: 6px; */
  47 }
  48
  49 #dbg-content > * > .vbox {
  50   background-color: #000000;
  51   border: 1px solid #9C9CFF;
  52 }
  53
  54 #dbg-content > * > .title {
  55   /* text-shadow: 0 1px #fff; */
  56 }
  57
  58 .devtools-side-splitter {
  59   border: none;
  60 }
  61
  62 /**
  63  * Debugger statusbar
  64  */
  65
  66 #dbg-statusbar {
  67 /*  font: -moz-list; */
  68   padding: 2px;
  69   -moz-padding-start: 5px;
  70 }
  71
  72 /**
  73  * Lists and headers
  74  */
  75
  76 .list-item {
  77   padding: 2px;
  78 /*  font: -moz-list; */
  79 }
  80
  81 .list-item.selected {
  82   background: #008484;
  83   color: #FFCF00;
  84 }
  85
  86 .list-item.empty {
  87   color: #8050B0;
  88 }
  89
  90 /**
  91  * Stack frames
  92  */
  93
  94 #stackframes {
  95   /* background-color: white; */
  96 }
  97
  98 .dbg-stackframe {
  99   -moz-padding-start: 4px;
 100   -moz-padding-end: 4px;
 101 }
 102
 103 .dbg-stackframe-name {
 104   font-weight: 600;
 105 }
 106
 107 /**
 108  * Properties elements
 109  */
 110
 111 #variables {
 112 /*  background-color: white; */
 113 }
 114
 115 /**
 116  * Generic element details container
 117  */
 118
 119 .details {
 120   -moz-margin-start: 10px;
 121 }
 122
 123 /**
 124  * Scope element
 125  */
 126
 127 .scope > .title {
 128   margin-top: 1px;
 129   -moz-padding-start: 2px;
 130   background: #E7ADE7;
 131   border-radius: 5px;
 132   color: #000000;
 133 }
 134
 135 .scope > .title > .name {
 136   padding-top: 2px;
 137   padding-bottom: 2px;
 138 }
 139
 140 .scope > .details {
 141   -moz-margin-start: 2px;
 142   -moz-margin-end: 2px;
 143 }
 144
 145 /**
 146  * Variable element
 147  */
 148
 149 .variable {
 150   -moz-margin-start: 1px;
 151   -moz-margin-end: 1px;
 152   border-bottom: 1px dotted #008484;
 153 }
 154
 155 .variable > .title > .name {
 156   padding-top: 2px;
 157   padding-bottom: 2px;
 158   color: #FF9F00;
 159   font-weight: 600;
 160 }
 161
 162 /**
 163  * Property element
 164  */
 165
 166 .property > .title > .key {
 167   padding-top: 2px;
 168   padding-bottom: 2px;
 169   color: #E7ADE7;
 170 }
 171
 172 .property > .title > .value {
 173   padding-top: 2px;
 174   padding-bottom: 2px;
 175 }
 176
 177 /**
 178  * Property colors
 179  */
 180
 181 .token-undefined {
 182   -moz-padding-start: 6px;
 183   color: #8050B0;
 184 }
 185
 186 .token-null {
 187   -moz-padding-start: 6px;
 188   color: #008484;
 189 }
 190
 191 .token-boolean {
 192   -moz-padding-start: 6px;
 193   color: #FFCF00;
 194 }
 195
 196 .token-number {
 197   -moz-padding-start: 6px;
 198   color: #E7ADE7;
 199 }
 200
 201 .token-string {
 202   -moz-padding-start: 6px;
 203   color: #9C9CFF;
 204 }
 205
 206 .token-other {
 207   -moz-padding-start: 6px;
 208   color: #FF9F00;
 209 }
 210
 211 /**
 212  * Expand/collapse arrow
 213  */
 214
 215 .arrow {
 216   width: 9px;
 217   height: 9px;
 218   -moz-margin-start: 5px;
 219   -moz-margin-end: 5px;
 220   background: url("chrome://global/skin/tree/twisty-closed.gif") center center no-repeat;
 221 }
 222
 223 .arrow[open] {
 224   background-image: url("chrome://global/skin/tree/twisty-open.gif");
 225 }
 226
 227 .scope > .title > .arrow {
 228   background-image: url("chrome://global/skin/tree/twisty-closed-selected.gif");
 229 }
 230
 231 .scope > .title > .arrow[open] {
 232   background-image: url("chrome://global/skin/tree/twisty-open-selected.gif");
 233 }
 234
 235 /**
 236  * Animations
 237  */
 238
 239 .details[open] {
 240   -moz-animation-duration: 0.25s;
 241   -moz-animation-name: showblock;
 242 }
 243
 244 @-moz-keyframes showblock {
 245   from {
 246     opacity: 0;
 247     -moz-transform-origin: top;
 248     -moz-transform: scaleY(0);
 249   }
 250
 251   to {
 252     opacity: 1;
 253     -moz-transform-origin: top;
 254     -moz-transform: scaleY(1);
 255   }
 256 }
 257
 258 /**
 259  * Toolbar Controls
 260  */
 261
 262 #resume {
 263   list-style-image: url("chrome://browser/skin/devtools/debugger-pause.png");
 264   -moz-image-region: rect(0px, 16px, 16px, 0px);
 265 }
 266
 267 #resume[checked=true],
 268 #resume:hover {
 269   -moz-image-region: rect(0px, 32px, 16px, 16px);
 270 }
 271
 272 #step-over {
 273   list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
 274   -moz-image-region: rect(0px, 16px, 16px, 0px);
 275 }
 276 #step-over:hover {
 277   -moz-image-region: rect(0px, 32px, 16px, 16px);
 278 }
 279
 280 #step-in {
 281   list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png");
 282   -moz-image-region: rect(0px, 16px, 16px, 0px);
 283 }
 284 #step-in:hover {
 285   -moz-image-region: rect(0px, 32px, 16px, 16px);
 286 }
 287
 288 #step-out {
 289   list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png");
 290   -moz-image-region: rect(0px, 16px, 16px, 0px);
 291 }
 292 #step-out:hover {
 293   -moz-image-region: rect(0px, 32px, 16px, 16px);
 294 }
 295
 296 #debugger-controls > toolbarbutton {
 297 }
 298
 299 #debugger-controls > toolbarbutton:last-of-type {
 300 }
 301
 302 #debugger-controls {
 303 }
 304
 305 /**
 306  * Display helpers
 307  */
 308
 309 .unselectable {
 310   padding-top: 2px;
 311   padding-bottom: 2px;
 312 }
 313
 314 .info {
 315   padding-top: 2px;
 316   padding-bottom: 2px;
 317 }