aboutsummaryrefslogtreecommitdiff
path: root/arc-firefox-theme/chrome/browser/devtools/animationinspector.css
diff options
context:
space:
mode:
authorHorst31802015-08-19 19:38:44 +0200
committerHorst31802015-08-19 19:38:44 +0200
commit1d5f9f7aa7ac0bfe6a091b7c1395cafa33d52c43 (patch)
tree99efccaeba25e26aa03bdefcb83fb874b5061acc /arc-firefox-theme/chrome/browser/devtools/animationinspector.css
parentc5fee00815d47f0d3970c6c4761ef1c15e5ee16f (diff)
downloadsolarc-firefox-theme-1d5f9f7aa7ac0bfe6a091b7c1395cafa33d52c43.tar.gz
solarc-firefox-theme-1d5f9f7aa7ac0bfe6a091b7c1395cafa33d52c43.tar.xz
solarc-firefox-theme-1d5f9f7aa7ac0bfe6a091b7c1395cafa33d52c43.zip
add firefox theme40.20150819
Diffstat (limited to 'arc-firefox-theme/chrome/browser/devtools/animationinspector.css')
-rw-r--r--arc-firefox-theme/chrome/browser/devtools/animationinspector.css256
1 files changed, 256 insertions, 0 deletions
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);
+}