LCARStrek/devtools/animationinspector.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 /* Animation-inspector specific theme variables */
   6
   7 .theme-dark,
   8 .theme-light {
   9   --even-animation-timeline-background-color: rgba(160,144,144,0.03);
  10 }
  11
  12 :root {
  13   /* How high should toolbars be */
  14   --toolbar-height: 20px;
  15   /* How wide should the sidebar be */
  16   --timeline-sidebar-width: 150px;
  17   /* How high should animations displayed in the timeline be */
  18   --timeline-animation-height: 20px;
  19 }
  20
  21 html {
  22   height: 100%;
  23 }
  24
  25 body {
  26   margin: 0;
  27   padding: 0;
  28   display : flex;
  29   flex-direction: column;
  30   height: 100%;
  31   overflow: hidden;
  32   color: var(--theme-content-color3);
  33 }
  34
  35 /* The top toolbar, containing the toggle-all button. And the timeline toolbar,
  36    containing playback control buttons, shown only when there are animations
  37    displayed in the timeline */
  38
  39 #global-toolbar,
  40 #timeline-toolbar {
  41   border-bottom: 1px solid var(--theme-splitter-color);
  42   display: flex;
  43   flex-direction: row;
  44   align-items: center;
  45   justify-content: flex-end;
  46   height: var(--toolbar-height);
  47 }
  48
  49 #timeline-toolbar {
  50  display: none;
  51 }
  52
  53 [timeline] #global-toolbar {
  54   display: none;
  55 }
  56
  57 [timeline] #timeline-toolbar {
  58   display: flex;
  59 }
  60
  61 #global-toolbar .label {
  62   padding: 1px 4px;
  63 }
  64
  65 /* The main animations container */
  66
  67 #players {
  68   height: calc(100% - var(--toolbar-height));
  69   overflow: auto;
  70 }
  71
  72 [empty] #players {
  73   display: none;
  74 }
  75
  76 /* The error message, shown when an invalid/unanimated element is selected */
  77
  78 #error-message {
  79   padding-top: 10%;
  80   text-align: center;
  81   flex: 1;
  82   overflow: auto;
  83
  84   /* The error message is hidden by default */
  85   display: none;
  86 }
  87
  88 [empty] #error-message {
  89   display: block;
  90 }
  91
  92 /* Element picker, toggle-all buttons, timeline pause button, ... */
  93
  94 #global-toolbar .devtools-button,
  95 #timeline-toolbar .devtools-button {
  96   border-width: 0 0 0 1px;
  97   min-height: var(--toolbar-height);
  98 }
  99
 100 .devtools-button {
 101   position: relative;
 102 }
 103
 104 .devtools-button::before {
 105   content: "";
 106   display: block;
 107   width: 16px;
 108   height: 16px;
 109   position: absolute;
 110   left: 50%;
 111   top: 50%;
 112   margin: -8px 0 0 -8px;
 113 }
 114
 115 #element-picker::before {
 116   background-image: url("chrome://devtools/skin/command-pick.png");
 117 }
 118
 119 .pause-button::before {
 120   background-image: url("debugger-pause.png");
 121 }
 122
 123 #element-picker[checked]::before {
 124   background-position: -48px 0;
 125   filter: none; /* Icon is blue when checked, don't invert for light theme */
 126 }
 127
 128 .pause-button.paused::before {
 129   background-image: url("debugger-play.png");
 130 }
 131
 132 @media (min-resolution: 1.1dppx) {
 133   #element-picker::before {
 134     background-image: url("chrome://devtools/skin/command-pick@2x.png");
 135     background-size: 64px;
 136   }
 137
 138   .pause-button::before {
 139     background-image: url("debugger-pause@2x.png");
 140   }
 141
 142   .pause-button.paused::before {
 143     background-image: url("debugger-play@2x.png");
 144   }
 145 }
 146
 147 /* Animation timeline component */
 148
 149 .animation-timeline {
 150   height: 100%;
 151   overflow: hidden;
 152   position: relative;
 153   /* The timeline gets its background-image from a canvas element created in
 154      /browser/devtools/animationinspector/utils.js drawGraphElementBackground
 155      thanks to document.mozSetImageElement("time-graduations", canvas)
 156      This is done so that the background can be built dynamically from script */
 157   background-image: -moz-element(#time-graduations);
 158   background-repeat: repeat-y;
 159   /* The animations are drawn 150px from the left edge so that animated nodes
 160      can be displayed in a sidebar */
 161   background-position: var(--timeline-sidebar-width) 0;
 162   display: flex;
 163   flex-direction: column;
 164 }
 165
 166 .animation-timeline .scrubber {
 167   position: absolute;
 168   height: 100%;
 169   width: var(--timeline-sidebar-width);
 170   border-right: 1px solid #FF0000;
 171   box-sizing: border-box;
 172   z-index: 1;
 173   pointer-events: none;
 174 }
 175
 176 .animation-timeline .scrubber::before {
 177   content: "";
 178   position: absolute;
 179   top: 0;
 180   width: 1px;
 181   right: -6px;
 182   border-top: 5px solid #FF0000;
 183   border-left: 5px solid transparent;
 184   border-right: 5px solid transparent;
 185 }
 186
 187 .animation-timeline .time-header {
 188   margin-left: var(--timeline-sidebar-width);
 189   height: var(--toolbar-height);
 190   overflow: hidden;
 191   position: relative;
 192   /* This is the same color as the time graduations in
 193      browser/devtools/animationinspector/utils.js */
 194   border-bottom: 1px solid var(--theme-splitter-color);
 195   cursor: col-resize;
 196   -moz-user-select: none;
 197 }
 198
 199 .animation-timeline .time-header .time-tick {
 200   position: absolute;
 201   top: 3px;
 202 }
 203
 204 .animation-timeline .animations {
 205   width: 100%;
 206   overflow-y: auto;
 207   overflow-x: hidden;
 208   margin: 0;
 209   padding: 0;
 210   list-style-type: none;
 211 }
 212
 213 /* Animation block widgets */
 214
 215 .animation-timeline .animation {
 216   margin: 4px 0;
 217   height: var(--timeline-animation-height);
 218   position: relative;
 219 }
 220
 221 .animation-timeline .animation:nth-child(2n) {
 222   background-color: var(--even-animation-timeline-background-color);
 223 }
 224
 225 .animation-timeline .animation .target {
 226   width: var(--timeline-sidebar-width);
 227   overflow: hidden;
 228   height: 100%;
 229 }
 230
 231 .animation-timeline .animation-target {
 232   background-color: transparent;
 233 }
 234
 235 .animation-timeline .animation .time-block {
 236   position: absolute;
 237   top: 0;
 238   left: var(--timeline-sidebar-width);
 239   right: 0;
 240   height: 100%;
 241 }
 242
 243 /* Animation iterations */
 244
 245 .animation-timeline .animation .iterations {
 246   position: relative;
 247   height: 100%;
 248   box-sizing: border-box;
 249   --timelime-border-color: var(--theme-body-color);
 250   --timeline-background-color: var(--theme-splitter-color);
 251
 252   /* Iterations of the animation are displayed with a repeating linear-gradient
 253      which size is dynamically changed from JS. The gradient only draws 1px
 254      borders between each iteration. These borders must have the same color as
 255      the border of this element */
 256   background-image:
 257     linear-gradient(to right,
 258                     var(--timelime-border-color) 0,
 259                     var(--timelime-border-color) 1px,
 260                     transparent 1px,
 261                     transparent 2px);
 262   background-repeat: repeat-x;
 263   background-position: -1px 0;
 264   border: 1px solid var(--timelime-border-color);
 265
 266   /* The background color is set independently */
 267   background-color: var(--timeline-background-color);
 268 }
 269
 270 .animation-timeline .animation .cssanimation {
 271   --timelime-border-color: var(--theme-highlight-lightorange);
 272   --timeline-background-color: var(--theme-contrast-background);
 273 }
 274
 275 .animation-timeline .animation .csstransition {
 276   --timelime-border-color: var(--theme-highlight-bluegrey);
 277   --timeline-background-color: var(--theme-highlight-blue);
 278 }
 279
 280 .animation-timeline .animation .iterations.infinite {
 281   border-right-width: 0;
 282 }
 283
 284 .animation-timeline .animation .iterations.infinite::before,
 285 .animation-timeline .animation .iterations.infinite::after {
 286   content: "";
 287   position: absolute;
 288   top: 0;
 289   right: 0;
 290   width: 0;
 291   height: 0;
 292   border-right: 4px solid var(--theme-body-background);
 293   border-top: 4px solid transparent;
 294   border-bottom: 4px solid transparent;
 295 }
 296
 297 .animation-timeline .animation .iterations.infinite::after {
 298   bottom: 0;
 299   top: unset;
 300 }
 301
 302 .animation-timeline .animation .name {
 303   color: var(--theme-selection-color);
 304   height: 100%;
 305   width: 100%;
 306   overflow: hidden;
 307   text-overflow: ellipsis;
 308   white-space: nowrap;
 309   line-height: 150%;
 310   padding: 0 2px;
 311 }
 312
 313 .animation-timeline .animation .delay {
 314   position: absolute;
 315   top: 0;
 316   /* Make sure the delay covers up the animation border */
 317   transform: translate(-1px, -1px);
 318   box-sizing: border-box;
 319   height: calc(100% + 2px);
 320
 321   border: 1px solid var(--timelime-border-color);
 322   border-width: 1px 0 1px 1px;
 323   background-image: repeating-linear-gradient(45deg,
 324                                               transparent,
 325                                               transparent 1px,
 326                                               var(--theme-selection-color) 1px,
 327                                               var(--theme-selection-color) 4px);
 328   background-color: var(--timelime-border-color);
 329 }
 330
 331 .animation-timeline .animation .delay.negative {
 332   /* Negative delays are displayed on top of the animation, so they need a
 333      right border. Whereas normal delays are displayed just before the
 334      animation, so there's already the animation's left border that serves as
 335      a separation. */
 336   border-width: 1px;
 337 }
 338
 339 .animation-timeline .animation .delay::before {
 340   position: absolute;
 341   content: "";
 342   left: 0;
 343   width: 2px;
 344   height: 8px;
 345   top: 50%;
 346   margin-top: -4px;
 347   background: var(--timelime-border-color);
 348 }
 349
 350 /* Animation target node gutter, contains a preview of the dom node */
 351
 352 .animation-target {
 353   background-color: var(--theme-toolbar-background);
 354   padding: 1px 4px;
 355   box-sizing: border-box;
 356   overflow: hidden;
 357   text-overflow: ellipsis;
 358   white-space: nowrap;
 359 }
 360
 361 .animation-target .attribute-name {
 362   padding-left: 4px;
 363 }
 364
 365 .animation-target .node-selector {
 366   background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
 367   padding-left: 16px;
 368   margin-right: 5px;
 369   cursor: pointer;
 370 }
 371
 372 .animation-target .node-selector:hover {
 373   background-position: -32px 0;
 374 }
 375
 376 .animation-target .node-selector:active {
 377   background-position: -16px 0;
 378 }
 379
 380 /* Animation title gutter, contains the name, duration, iteration */
 381
 382 .animation-title {
 383   background-color: var(--theme-toolbar-background);
 384   border-bottom: 1px solid var(--theme-splitter-color);
 385   padding: 1px 4px;
 386   word-wrap: break-word;
 387   overflow: auto;
 388 }
 389
 390 .animation-title .meta-data {
 391   float: right;
 392 }
 393
 394 .animation-title strong {
 395   margin: 0 .5em;
 396 }
 397
 398 .animation-title .meta-data .compositor-icon {
 399     display: none;
 400     background-image: url("animation-fast-track.svg");
 401     background-repeat: no-repeat;
 402     padding-left: 12px;
 403     /* Make sure the icon is positioned above the timeline range input so that
 404        its tooltip appears on hover */
 405     z-index: 1;
 406     position: relative;
 407 }
 408
 409 /* Timeline wiget */
 410
 411 .timeline {
 412   height: var(--timeline-animation-height);
 413   width: 100%;
 414   display: flex;
 415   flex-direction: row;
 416   border-bottom: 1px solid var(--theme-splitter-color);
 417 }
 418
 419 .timeline .playback-controls {
 420   display: flex;
 421   flex-direction: row;
 422 }
 423
 424 /* Playback control buttons */
 425
 426 .timeline .playback-controls button {
 427   flex-grow: 1;
 428   border-width: 0 1px 0 0;
 429 }
 430
 431 .timeline .toggle::before {
 432   background-image: url(debugger-pause.png);
 433 }
 434
 435 .paused .timeline .toggle::before,
 436 .finished .timeline .toggle::before {
 437   background-image: url(debugger-play.png);
 438 }
 439
 440 .timeline .ff::before {
 441   background-image: url(fast-forward.png);
 442 }
 443
 444 .timeline .rw::before {
 445   background-image: url(rewind.png);
 446 }
 447
 448 @media (min-resolution: 1.1dppx) {
 449   .timeline .toggle::before {
 450     background-image: url(debugger-pause@2x.png);
 451   }
 452
 453   .paused .timeline .toggle::before,
 454   .finished .timeline .toggle::before {
 455     background-image: url(debugger-play@2x.png);
 456   }
 457
 458   .timeline .ff::before {
 459     background-image: url(fast-forward@2x.png);
 460   }
 461
 462   .timeline .rw::before {
 463     background-image: url(rewind@2x.png);
 464   }
 465 }
 466
 467 .timeline .rate {
 468   -moz-appearance: none;
 469   text-align: center;
 470   color: var(--theme-body-color);
 471   border-right: 1px solid var(--theme-splitter-color);
 472 }
 473
 474 /* Slider (input type range) container */
 475
 476 .timeline .sliders-container {
 477   flex-grow: 1;
 478   height: 100%;
 479   position: relative;
 480   border-width: 1px 0;
 481 }
 482
 483 .timeline .sliders-container .current-time {
 484   position: absolute;
 485   padding: 0;
 486   margin: 0;
 487   left: 0;
 488   width: 100%;
 489   height: 100%;
 490 }
 491
 492 .timeline .sliders-container .current-time::-moz-range-thumb {
 493   height: 100%;
 494   width: 4px;
 495   border-radius: 0;
 496   border: none;
 497   background: var(--theme-highlight-blue);
 498 }
 499
 500 .timeline .sliders-container .current-time::-moz-range-track {
 501   width: 100%;
 502   height: 50px;
 503   background: transparent;
 504 }
 505
 506 /* Current time label */
 507
 508 .timeline .time-display {
 509   display: flex;
 510   align-items: center;
 511   justify-content: center;
 512   width: 50px;
 513   border-left: 1px solid var(--theme-splitter-color);
 514   background: var(--theme-toolbar-background);
 515 }