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: 1.25dppx) {
  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 target node gutter, contains a preview of the dom node */
 103
 104 .animation-target {
 105   background-color: var(--theme-toolbar-background);
 106   padding: 1px 4px;
 107   box-sizing: border-box;
 108   overflow: hidden;
 109   text-overflow: ellipsis;
 110   white-space: nowrap;
 111 }
 112
 113 .animation-target .attribute-name {
 114   padding-left: 4px;
 115 }
 116
 117 .animation-target .node-selector {
 118   background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
 119   padding-left: 16px;
 120   margin-right: 5px;
 121   cursor: pointer;
 122 }
 123
 124 .animation-target .node-selector:hover {
 125   background-position: -32px 0;
 126 }
 127
 128 .animation-target .node-selector:active {
 129   background-position: -16px 0;
 130 }
 131
 132 /* Animation title gutter, contains the name, duration, iteration */
 133
 134 .animation-title {
 135   background-color: var(--theme-toolbar-background);
 136   border-bottom: 1px solid var(--theme-splitter-color);
 137   padding: 1px 4px;
 138   word-wrap: break-word;
 139   overflow: auto;
 140 }
 141
 142 .animation-title .meta-data {
 143   float: right;
 144 }
 145
 146 .animation-title strong {
 147   margin: 0 .5em;
 148 }
 149
 150 /* Timeline wiget */
 151
 152 .timeline {
 153   height: 20px;
 154   width: 100%;
 155   display: flex;
 156   flex-direction: row;
 157   border-bottom: 1px solid var(--theme-splitter-color);
 158 }
 159
 160 .timeline .playback-controls {
 161   display: flex;
 162   flex-direction: row;
 163 }
 164
 165 /* Playback control buttons */
 166
 167 .timeline .playback-controls button {
 168   flex-grow: 1;
 169   border-width: 0 1px 0 0;
 170 }
 171
 172 .timeline .toggle::before {
 173   background-image: url(debugger-pause.png);
 174 }
 175
 176 .paused .timeline .toggle::before,
 177 .finished .timeline .toggle::before {
 178   background-image: url(debugger-play.png);
 179 }
 180
 181 .timeline .ff::before {
 182   background-image: url(fast-forward.png);
 183 }
 184
 185 .timeline .rw::before {
 186   background-image: url(rewind.png);
 187 }
 188
 189 @media (min-resolution: 1.25dppx) {
 190   .timeline .toggle::before {
 191     background-image: url(debugger-pause@2x.png);
 192   }
 193
 194   .paused .timeline .toggle::before,
 195   .finished .timeline .toggle::before {
 196     background-image: url(debugger-play@2x.png);
 197   }
 198
 199   .timeline .ff::before {
 200     background-image: url(fast-forward@2x.png);
 201   }
 202
 203   .timeline .rw::before {
 204     background-image: url(rewind@2x.png);
 205   }
 206 }
 207
 208 .timeline .rate {
 209   -moz-appearance: none;
 210   text-align: center;
 211   color: var(--theme-body-color);
 212   border-right: 1px solid var(--theme-splitter-color);
 213 }
 214
 215 /* Slider (input type range) container */
 216
 217 .timeline .sliders-container {
 218   flex-grow: 1;
 219   height: 100%;
 220   position: relative;
 221   border-width: 1px 0;
 222 }
 223
 224 .timeline .sliders-container .current-time {
 225   position: absolute;
 226   padding: 0;
 227   margin: 0;
 228   left: 0;
 229   width: 100%;
 230   height: 100%;
 231 }
 232
 233 .timeline .sliders-container .current-time::-moz-range-thumb {
 234   height: 100%;
 235   width: 4px;
 236   border-radius: 0;
 237   border: none;
 238   background: var(--theme-highlight-blue);
 239 }
 240
 241 .timeline .sliders-container .current-time::-moz-range-track {
 242   width: 100%;
 243   height: 50px;
 244   background: transparent;
 245 }
 246
 247 /* Current time label */
 248
 249 .timeline .time-display {
 250   display: flex;
 251   align-items: center;
 252   justify-content: center;
 253   width: 50px;
 254   border-left: 1px solid var(--theme-splitter-color);
 255   background: var(--theme-toolbar-background);
 256 }