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: 2dppx) { #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 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: 2dppx) { .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); }