Commit | Line | Data |
---|---|---|
20752032 RK |
1 | html { |
2 | height: 100%; | |
3 | } | |
4 | ||
5 | body { | |
6 | margin: 0; | |
7 | padding: 0; | |
8 | display : flex; | |
9 | flex-direction: column; | |
10 | height: 100%; | |
11 | overflow: hidden; | |
12 | color: var(--theme-content-color3); | |
13 | } | |
14 | ||
15 | /* The top toolbar, containing the toggle-all button */ | |
16 | ||
17 | #toolbar { | |
18 | border-bottom: 1px solid var(--theme-splitter-color); | |
19 | display: flex; | |
20 | flex-direction: row; | |
21 | align-items: center; | |
22 | justify-content: flex-end; | |
23 | height: 20px; | |
24 | } | |
25 | ||
26 | #toolbar .label { | |
27 | padding: 1px 4px; | |
28 | } | |
29 | ||
30 | #toggle-all { | |
31 | border-width: 0 0 0 1px; | |
32 | min-height: 20px; | |
33 | } | |
34 | ||
35 | /* The error message, shown when an invalid/unanimated element is selected */ | |
36 | ||
37 | #error-message { | |
38 | padding-top: 10%; | |
39 | text-align: center; | |
40 | flex: 1; | |
41 | overflow: auto; | |
42 | ||
43 | /* The error message is hidden by default */ | |
44 | display: none; | |
45 | } | |
46 | ||
47 | /* The animation players container */ | |
48 | ||
49 | #players { | |
50 | flex: 1; | |
51 | overflow: auto; | |
52 | } | |
53 | ||
54 | /* Element picker and toggle-all buttons */ | |
55 | ||
56 | #element-picker, | |
57 | #toggle-all { | |
58 | position: relative; | |
59 | } | |
60 | ||
61 | #element-picker::before, | |
62 | #toggle-all::before { | |
63 | content: ""; | |
64 | display: block; | |
65 | width: 16px; | |
66 | height: 16px; | |
67 | position: absolute; | |
68 | left: 50%; | |
69 | top: 50%; | |
70 | margin: -8px 0 0 -8px; | |
71 | background-image: url("chrome://browser/skin/devtools/command-pick.png"); | |
72 | } | |
73 | ||
74 | #toggle-all::before { | |
75 | background-image: url("debugger-pause.png"); | |
76 | } | |
77 | ||
78 | #element-picker[checked]::before { | |
79 | background-position: -48px 0; | |
80 | filter: none; /* Icon is blue when checked, don't invert for light theme */ | |
81 | } | |
82 | ||
83 | #toggle-all.paused::before { | |
84 | background-image: url("debugger-play.png"); | |
85 | } | |
86 | ||
d74db938 | 87 | @media (min-resolution: 1.25dppx) { |
20752032 RK |
88 | #element-picker::before { |
89 | background-image: url("chrome://browser/skin/devtools/command-pick@2x.png"); | |
90 | background-size: 64px; | |
91 | } | |
92 | ||
93 | #toggle-all::before { | |
94 | background-image: url("debugger-pause@2x.png"); | |
95 | } | |
96 | ||
97 | #toggle-all.paused::before { | |
98 | background-image: url("debugger-play@2x.png"); | |
99 | } | |
100 | } | |
101 | ||
d74db938 RK |
102 | /* Animation target node gutter, contains a preview of the dom node */ |
103 | ||
104 | .animation-target { | |
105 | background-color: var(--theme-toolbar-background); | |
106 | padding: 1px 4px; | |
107 | box-sizing: border-box; | |
108 | overflow: hidden; | |
109 | text-overflow: ellipsis; | |
110 | white-space: nowrap; | |
111 | } | |
112 | ||
113 | .animation-target .attribute-name { | |
114 | padding-left: 4px; | |
115 | } | |
116 | ||
117 | .animation-target .node-selector { | |
118 | background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0; | |
119 | padding-left: 16px; | |
120 | margin-right: 5px; | |
121 | cursor: pointer; | |
122 | } | |
123 | ||
124 | .animation-target .node-selector:hover { | |
125 | background-position: -32px 0; | |
126 | } | |
127 | ||
128 | .animation-target .node-selector:active { | |
129 | background-position: -16px 0; | |
130 | } | |
131 | ||
20752032 RK |
132 | /* Animation title gutter, contains the name, duration, iteration */ |
133 | ||
134 | .animation-title { | |
135 | background-color: var(--theme-toolbar-background); | |
136 | border-bottom: 1px solid var(--theme-splitter-color); | |
137 | padding: 1px 4px; | |
138 | word-wrap: break-word; | |
139 | overflow: auto; | |
140 | } | |
141 | ||
142 | .animation-title .meta-data { | |
143 | float: right; | |
144 | } | |
145 | ||
146 | .animation-title strong { | |
147 | margin: 0 .5em; | |
148 | } | |
149 | ||
150 | /* Timeline wiget */ | |
151 | ||
152 | .timeline { | |
153 | height: 20px; | |
154 | width: 100%; | |
155 | display: flex; | |
156 | flex-direction: row; | |
157 | border-bottom: 1px solid var(--theme-splitter-color); | |
158 | } | |
159 | ||
160 | .timeline .playback-controls { | |
161 | display: flex; | |
162 | flex-direction: row; | |
163 | } | |
164 | ||
165 | /* Playback control buttons */ | |
166 | ||
167 | .timeline .playback-controls button { | |
168 | flex-grow: 1; | |
169 | border-width: 0 1px 0 0; | |
170 | } | |
171 | ||
172 | .timeline .toggle::before { | |
173 | background-image: url(debugger-pause.png); | |
174 | } | |
175 | ||
176 | .paused .timeline .toggle::before, | |
177 | .finished .timeline .toggle::before { | |
178 | background-image: url(debugger-play.png); | |
179 | } | |
180 | ||
181 | .timeline .ff::before { | |
182 | background-image: url(fast-forward.png); | |
183 | } | |
184 | ||
185 | .timeline .rw::before { | |
186 | background-image: url(rewind.png); | |
187 | } | |
188 | ||
d74db938 | 189 | @media (min-resolution: 1.25dppx) { |
20752032 RK |
190 | .timeline .toggle::before { |
191 | background-image: url(debugger-pause@2x.png); | |
192 | } | |
193 | ||
194 | .paused .timeline .toggle::before, | |
195 | .finished .timeline .toggle::before { | |
196 | background-image: url(debugger-play@2x.png); | |
197 | } | |
198 | ||
199 | .timeline .ff::before { | |
200 | background-image: url(fast-forward@2x.png); | |
201 | } | |
202 | ||
203 | .timeline .rw::before { | |
204 | background-image: url(rewind@2x.png); | |
205 | } | |
206 | } | |
207 | ||
208 | .timeline .rate { | |
209 | -moz-appearance: none; | |
210 | text-align: center; | |
a5cb6e53 | 211 | color: var(--theme-body-color); |
20752032 RK |
212 | border-right: 1px solid var(--theme-splitter-color); |
213 | } | |
214 | ||
215 | /* Slider (input type range) container */ | |
216 | ||
217 | .timeline .sliders-container { | |
218 | flex-grow: 1; | |
219 | height: 100%; | |
220 | position: relative; | |
221 | border-width: 1px 0; | |
222 | } | |
223 | ||
224 | .timeline .sliders-container .current-time { | |
225 | position: absolute; | |
226 | padding: 0; | |
227 | margin: 0; | |
228 | left: 0; | |
229 | width: 100%; | |
230 | height: 100%; | |
231 | } | |
232 | ||
233 | .timeline .sliders-container .current-time::-moz-range-thumb { | |
234 | height: 100%; | |
235 | width: 4px; | |
236 | border-radius: 0; | |
237 | border: none; | |
238 | background: var(--theme-highlight-blue); | |
239 | } | |
240 | ||
241 | .timeline .sliders-container .current-time::-moz-range-track { | |
242 | width: 100%; | |
243 | height: 50px; | |
244 | background: transparent; | |
245 | } | |
246 | ||
247 | /* Current time label */ | |
248 | ||
249 | .timeline .time-display { | |
250 | display: flex; | |
251 | align-items: center; | |
252 | justify-content: center; | |
253 | width: 50px; | |
254 | border-left: 1px solid var(--theme-splitter-color); | |
255 | background: var(--theme-toolbar-background); | |
256 | } |