LCARStrek/browser/devtools/animationinspector.css

   1 html {
   2   height: 100%;
   3 }
   4
   5 body {
   6   margin: 0;
   7   padding: 0;
   8   display : flex;
   9   flex-direction: column;
  10   height: 100%;
  11   overflow: hidden;
  12   color: var(--theme-content-color3);
  13 }
  14
  15 /* The top toolbar, containing the toggle-all button */
  16
  17 #toolbar {
  18   border-bottom: 1px solid var(--theme-splitter-color);
  19   display: flex;
  20   flex-direction: row;
  21   align-items: center;
  22   justify-content: flex-end;
  23   height: 20px;
  24 }
  25
  26 #toolbar .label {
  27   padding: 1px 4px;
  28 }
  29
  30 #toggle-all {
  31   border-width: 0 0 0 1px;
  32   min-height: 20px;
  33 }
  34
  35 /* The error message, shown when an invalid/unanimated element is selected */
  36
  37 #error-message {
  38   padding-top: 10%;
  39   text-align: center;
  40   flex: 1;
  41   overflow: auto;
  42
  43   /* The error message is hidden by default */
  44   display: none;
  45 }
  46
  47 /* The animation players container */
  48
  49 #players {
  50   flex: 1;
  51   overflow: auto;
  52 }
  53
  54 /* Element picker and toggle-all buttons */
  55
  56 #element-picker,
  57 #toggle-all {
  58   position: relative;
  59 }
  60
  61 #element-picker::before,
  62 #toggle-all::before {
  63   content: "";
  64   display: block;
  65   width: 16px;
  66   height: 16px;
  67   position: absolute;
  68   left: 50%;
  69   top: 50%;
  70   margin: -8px 0 0 -8px;
  71   background-image: url("chrome://browser/skin/devtools/command-pick.png");
  72 }
  73
  74 #toggle-all::before {
  75   background-image: url("debugger-pause.png");
  76 }
  77
  78 #element-picker[checked]::before {
  79   background-position: -48px 0;
  80   filter: none; /* Icon is blue when checked, don't invert for light theme */
  81 }
  82
  83 #toggle-all.paused::before {
  84   background-image: url("debugger-play.png");
  85 }
  86
  87 @media (min-resolution: 2dppx) {
  88   #element-picker::before {
  89     background-image: url("chrome://browser/skin/devtools/command-pick@2x.png");
  90     background-size: 64px;
  91   }
  92
  93   #toggle-all::before {
  94     background-image: url("debugger-pause@2x.png");
  95   }
  96
  97   #toggle-all.paused::before {
  98     background-image: url("debugger-play@2x.png");
  99   }
 100 }
 101
 102 /* Disabled playerWidget when the animation has ended */
 103
 104 .finished {
 105   pointer-events: none;
 106   opacity: .5;
 107 }
 108
 109 /* Animation title gutter, contains the name, duration, iteration */
 110
 111 .animation-title {
 112   background-color: var(--theme-toolbar-background);
 113   border-bottom: 1px solid var(--theme-splitter-color);
 114   padding: 1px 4px;
 115   word-wrap: break-word;
 116   overflow: auto;
 117 }
 118
 119 .animation-title .meta-data {
 120   float: right;
 121 }
 122
 123 .animation-title strong {
 124   margin: 0 .5em;
 125 }
 126
 127 /* Timeline wiget */
 128
 129 .timeline {
 130   height: 20px;
 131   width: 100%;
 132   display: flex;
 133   flex-direction: row;
 134   border-bottom: 1px solid var(--theme-splitter-color);
 135 }
 136
 137 .timeline .playback-controls {
 138   display: flex;
 139   flex-direction: row;
 140 }
 141
 142 /* Playback control buttons */
 143
 144 .timeline .playback-controls button {
 145   flex-grow: 1;
 146   border-width: 0 1px 0 0;
 147 }
 148
 149 .timeline .toggle::before {
 150   background-image: url(debugger-pause.png);
 151 }
 152
 153 .paused .timeline .toggle::before,
 154 .finished .timeline .toggle::before {
 155   background-image: url(debugger-play.png);
 156 }
 157
 158 .timeline .ff::before {
 159   background-image: url(fast-forward.png);
 160 }
 161
 162 .timeline .rw::before {
 163   background-image: url(rewind.png);
 164 }
 165
 166 @media (min-resolution: 2dppx) {
 167   .timeline .toggle::before {
 168     background-image: url(debugger-pause@2x.png);
 169   }
 170
 171   .paused .timeline .toggle::before,
 172   .finished .timeline .toggle::before {
 173     background-image: url(debugger-play@2x.png);
 174   }
 175
 176   .timeline .ff::before {
 177     background-image: url(fast-forward@2x.png);
 178   }
 179
 180   .timeline .rw::before {
 181     background-image: url(rewind@2x.png);
 182   }
 183 }
 184
 185 .timeline .rate {
 186   -moz-appearance: none;
 187   text-align: center;
 188   border-right: 1px solid var(--theme-splitter-color);
 189 }
 190
 191 /* Slider (input type range) container */
 192
 193 .timeline .sliders-container {
 194   flex-grow: 1;
 195   height: 100%;
 196   position: relative;
 197   border-width: 1px 0;
 198 }
 199
 200 .timeline .sliders-container .current-time {
 201   position: absolute;
 202   padding: 0;
 203   margin: 0;
 204   left: 0;
 205   width: 100%;
 206   height: 100%;
 207 }
 208
 209 .timeline .sliders-container .current-time::-moz-range-thumb {
 210   height: 100%;
 211   width: 4px;
 212   border-radius: 0;
 213   border: none;
 214   background: var(--theme-highlight-blue);
 215 }
 216
 217 .timeline .sliders-container .current-time::-moz-range-track {
 218   width: 100%;
 219   height: 50px;
 220   background: transparent;
 221 }
 222
 223 /* Current time label */
 224
 225 .timeline .time-display {
 226   display: flex;
 227   align-items: center;
 228   justify-content: center;
 229   width: 50px;
 230   border-left: 1px solid var(--theme-splitter-color);
 231   background: var(--theme-toolbar-background);
 232 }