html {
height: 100%;
}
body {
margin: 0;
padding: 0;
display : flex;
flex-direction: column;
height: 100%;
overflow: hidden;
color: var(--theme-content-color3);
}
/* The top toolbar, containing the toggle-all button */
#toolbar {
border-bottom: 1px solid var(--theme-splitter-color);
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
height: 20px;
}
#toolbar .label {
padding: 1px 4px;
}
#toggle-all {
border-width: 0 0 0 1px;
min-height: 20px;
}
/* The error message, shown when an invalid/unanimated element is selected */
#error-message {
padding-top: 10%;
text-align: center;
flex: 1;
overflow: auto;
/* The error message is hidden by default */
display: none;
}
/* The animation players container */
#players {
flex: 1;
overflow: auto;
}
/* Element picker and toggle-all buttons */
#element-picker,
#toggle-all {
position: relative;
}
#element-picker::before,
#toggle-all::before {
content: "";
display: block;
width: 16px;
height: 16px;
position: absolute;
left: 50%;
top: 50%;
margin: -8px 0 0 -8px;
background-image: url("chrome://browser/skin/devtools/command-pick.png");
}
#toggle-all::before {
background-image: url("debugger-pause.png");
}
#element-picker[checked]::before {
background-position: -48px 0;
filter: none; /* Icon is blue when checked, don't invert for light theme */
}
#toggle-all.paused::before {
background-image: url("debugger-play.png");
}
@media (min-resolution: 1.25dppx) {
#element-picker::before {
background-image: url("chrome://browser/skin/devtools/command-pick@2x.png");
background-size: 64px;
}
#toggle-all::before {
background-image: url("debugger-pause@2x.png");
}
#toggle-all.paused::before {
background-image: url("debugger-play@2x.png");
}
}
/* Animation target node gutter, contains a preview of the dom node */
.animation-target {
background-color: var(--theme-toolbar-background);
padding: 1px 4px;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.animation-target .attribute-name {
padding-left: 4px;
}
.animation-target .node-selector {
background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
padding-left: 16px;
margin-right: 5px;
cursor: pointer;
}
.animation-target .node-selector:hover {
background-position: -32px 0;
}
.animation-target .node-selector:active {
background-position: -16px 0;
}
/* Animation title gutter, contains the name, duration, iteration */
.animation-title {
background-color: var(--theme-toolbar-background);
border-bottom: 1px solid var(--theme-splitter-color);
padding: 1px 4px;
word-wrap: break-word;
overflow: auto;
}
.animation-title .meta-data {
float: right;
}
.animation-title strong {
margin: 0 .5em;
}
/* Timeline wiget */
.timeline {
height: 20px;
width: 100%;
display: flex;
flex-direction: row;
border-bottom: 1px solid var(--theme-splitter-color);
}
.timeline .playback-controls {
display: flex;
flex-direction: row;
}
/* Playback control buttons */
.timeline .playback-controls button {
flex-grow: 1;
border-width: 0 1px 0 0;
}
.timeline .toggle::before {
background-image: url(debugger-pause.png);
}
.paused .timeline .toggle::before,
.finished .timeline .toggle::before {
background-image: url(debugger-play.png);
}
.timeline .ff::before {
background-image: url(fast-forward.png);
}
.timeline .rw::before {
background-image: url(rewind.png);
}
@media (min-resolution: 1.25dppx) {
.timeline .toggle::before {
background-image: url(debugger-pause@2x.png);
}
.paused .timeline .toggle::before,
.finished .timeline .toggle::before {
background-image: url(debugger-play@2x.png);
}
.timeline .ff::before {
background-image: url(fast-forward@2x.png);
}
.timeline .rw::before {
background-image: url(rewind@2x.png);
}
}
.timeline .rate {
-moz-appearance: none;
text-align: center;
color: var(--theme-body-color);
border-right: 1px solid var(--theme-splitter-color);
}
/* Slider (input type range) container */
.timeline .sliders-container {
flex-grow: 1;
height: 100%;
position: relative;
border-width: 1px 0;
}
.timeline .sliders-container .current-time {
position: absolute;
padding: 0;
margin: 0;
left: 0;
width: 100%;
height: 100%;
}
.timeline .sliders-container .current-time::-moz-range-thumb {
height: 100%;
width: 4px;
border-radius: 0;
border: none;
background: var(--theme-highlight-blue);
}
.timeline .sliders-container .current-time::-moz-range-track {
width: 100%;
height: 50px;
background: transparent;
}
/* Current time label */
.timeline .time-display {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
border-left: 1px solid var(--theme-splitter-color);
background: var(--theme-toolbar-background);
}