projects
/
themes.git
/ blobdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
make identity box work correctly
[themes.git]
/
LCARStrek
/
browser
/
devtools
/
animationinspector.css
diff --git
a/LCARStrek/browser/devtools/animationinspector.css
b/LCARStrek/browser/devtools/animationinspector.css
index a48e4e7673588eab69c9c8cbdc114ef1da3e0131..b3c78305cd0d28f0d97543d8d225bd303f51f06c 100644
(file)
--- a/
LCARStrek/browser/devtools/animationinspector.css
+++ b/
LCARStrek/browser/devtools/animationinspector.css
@@
-32,9
+32,12
@@
body {
color: var(--theme-content-color3);
}
color: var(--theme-content-color3);
}
-/* The top toolbar, containing the toggle-all button */
+/* The top toolbar, containing the toggle-all button. And the timeline toolbar,
+ containing playback control buttons, shown only when there are animations
+ displayed in the timeline */
-#toolbar {
+#global-toolbar,
+#timeline-toolbar {
border-bottom: 1px solid var(--theme-splitter-color);
display: flex;
flex-direction: row;
border-bottom: 1px solid var(--theme-splitter-color);
display: flex;
flex-direction: row;
@@
-43,13
+46,20
@@
body {
height: var(--toolbar-height);
}
height: var(--toolbar-height);
}
-#t
oolbar .label
{
-
padding: 1px 4px
;
+#t
imeline-toolbar
{
+
display: none
;
}
}
-#toggle-all {
- border-width: 0 0 0 1px;
- min-height: var(--toolbar-height);
+[timeline] #global-toolbar {
+ display: none;
+}
+
+[timeline] #timeline-toolbar {
+ display: flex;
+}
+
+#global-toolbar .label {
+ padding: 1px 4px;
}
/* The main animations container */
}
/* The main animations container */
@@
-59,6
+69,10
@@
body {
overflow: auto;
}
overflow: auto;
}
+[empty] #players {
+ display: none;
+}
+
/* The error message, shown when an invalid/unanimated element is selected */
#error-message {
/* The error message, shown when an invalid/unanimated element is selected */
#error-message {
@@
-71,15
+85,23
@@
body {
display: none;
}
display: none;
}
-/* Element picker and toggle-all buttons */
+[empty] #error-message {
+ display: block;
+}
+
+/* Element picker, toggle-all buttons, timeline pause button, ... */
-#element-picker,
-#toggle-all {
+#global-toolbar .devtools-button,
+#timeline-toolbar .devtools-button {
+ border-width: 0 0 0 1px;
+ min-height: var(--toolbar-height);
+}
+
+.devtools-button {
position: relative;
}
position: relative;
}
-#element-picker::before,
-#toggle-all::before {
+.devtools-button::before {
content: "";
display: block;
width: 16px;
content: "";
display: block;
width: 16px;
@@
-88,10
+110,13
@@
body {
left: 50%;
top: 50%;
margin: -8px 0 0 -8px;
left: 50%;
top: 50%;
margin: -8px 0 0 -8px;
+}
+
+#element-picker::before {
background-image: url("chrome://browser/skin/devtools/command-pick.png");
}
background-image: url("chrome://browser/skin/devtools/command-pick.png");
}
-
#toggle-all
::before {
+
.pause-button
::before {
background-image: url("debugger-pause.png");
}
background-image: url("debugger-pause.png");
}
@@
-100,7
+125,7
@@
body {
filter: none; /* Icon is blue when checked, don't invert for light theme */
}
filter: none; /* Icon is blue when checked, don't invert for light theme */
}
-
#toggle-all
.paused::before {
+
.pause-button
.paused::before {
background-image: url("debugger-play.png");
}
background-image: url("debugger-play.png");
}
@@
-110,11
+135,11
@@
body {
background-size: 64px;
}
background-size: 64px;
}
-
#toggle-all
::before {
+
.pause-button
::before {
background-image: url("debugger-pause@2x.png");
}
background-image: url("debugger-pause@2x.png");
}
-
#toggle-all
.paused::before {
+
.pause-button
.paused::before {
background-image: url("debugger-play@2x.png");
}
}
background-image: url("debugger-play@2x.png");
}
}
@@
-124,6
+149,7
@@
body {
.animation-timeline {
height: 100%;
overflow: hidden;
.animation-timeline {
height: 100%;
overflow: hidden;
+ position: relative;
/* The timeline gets its background-image from a canvas element created in
/browser/devtools/animationinspector/utils.js drawGraphElementBackground
thanks to document.mozSetImageElement("time-graduations", canvas)
/* The timeline gets its background-image from a canvas element created in
/browser/devtools/animationinspector/utils.js drawGraphElementBackground
thanks to document.mozSetImageElement("time-graduations", canvas)