From 1d5f9f7aa7ac0bfe6a091b7c1395cafa33d52c43 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Wed, 19 Aug 2015 19:38:44 +0200 Subject: add firefox theme --- .../chrome/browser/devtools/animationinspector.css | 256 +++++++++++++++++++++ 1 file changed, 256 insertions(+) create mode 100644 arc-firefox-theme/chrome/browser/devtools/animationinspector.css (limited to 'arc-firefox-theme/chrome/browser/devtools/animationinspector.css') diff --git a/arc-firefox-theme/chrome/browser/devtools/animationinspector.css b/arc-firefox-theme/chrome/browser/devtools/animationinspector.css new file mode 100644 index 0000000..6cc0bdb --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/animationinspector.css @@ -0,0 +1,256 @@ +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); +} -- cgit v1.2.3