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 /* Animation title gutter, contains the name, duration, iteration */
 103
 104 .animation-title {
 105   background-color: var(--theme-toolbar-background);
 106   border-bottom: 1px solid var(--theme-splitter-color);
 107   padding: 1px 4px;
 108   word-wrap: break-word;
 109   overflow: auto;
 110 }
 111
 112 .animation-title .meta-data {
 113   float: right;
 114 }
 115
 116 .animation-title strong {
 117   margin: 0 .5em;
 118 }
 119
 120 /* Timeline wiget */
 121
 122 .timeline {
 123   height: 20px;
 124   width: 100%;
 125   display: flex;
 126   flex-direction: row;
 127   border-bottom: 1px solid var(--theme-splitter-color);
 128 }
 129
 130 .timeline .playback-controls {
 131   display: flex;
 132   flex-direction: row;
 133 }
 134
 135 /* Playback control buttons */
 136
 137 .timeline .playback-controls button {
 138   flex-grow: 1;
 139   border-width: 0 1px 0 0;
 140 }
 141
 142 .timeline .toggle::before {
 143   background-image: url(debugger-pause.png);
 144 }
 145
 146 .paused .timeline .toggle::before,
 147 .finished .timeline .toggle::before {
 148   background-image: url(debugger-play.png);
 149 }
 150
 151 .timeline .ff::before {
 152   background-image: url(fast-forward.png);
 153 }
 154
 155 .timeline .rw::before {
 156   background-image: url(rewind.png);
 157 }
 158
 159 @media (min-resolution: 2dppx) {
 160   .timeline .toggle::before {
 161     background-image: url(debugger-pause@2x.png);
 162   }
 163
 164   .paused .timeline .toggle::before,
 165   .finished .timeline .toggle::before {
 166     background-image: url(debugger-play@2x.png);
 167   }
 168
 169   .timeline .ff::before {
 170     background-image: url(fast-forward@2x.png);
 171   }
 172
 173   .timeline .rw::before {
 174     background-image: url(rewind@2x.png);
 175   }
 176 }
 177
 178 .timeline .rate {
 179   -moz-appearance: none;
 180   text-align: center;
 181   border-right: 1px solid var(--theme-splitter-color);
 182 }
 183
 184 /* Slider (input type range) container */
 185
 186 .timeline .sliders-container {
 187   flex-grow: 1;
 188   height: 100%;
 189   position: relative;
 190   border-width: 1px 0;
 191 }
 192
 193 .timeline .sliders-container .current-time {
 194   position: absolute;
 195   padding: 0;
 196   margin: 0;
 197   left: 0;
 198   width: 100%;
 199   height: 100%;
 200 }
 201
 202 .timeline .sliders-container .current-time::-moz-range-thumb {
 203   height: 100%;
 204   width: 4px;
 205   border-radius: 0;
 206   border: none;
 207   background: var(--theme-highlight-blue);
 208 }
 209
 210 .timeline .sliders-container .current-time::-moz-range-track {
 211   width: 100%;
 212   height: 50px;
 213   background: transparent;
 214 }
 215
 216 /* Current time label */
 217
 218 .timeline .time-display {
 219   display: flex;
 220   align-items: center;
 221   justify-content: center;
 222   width: 50px;
 223   border-left: 1px solid var(--theme-splitter-color);
 224   background: var(--theme-toolbar-background);
 225 }