diff options
Diffstat (limited to 'js')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/images/icon-checkmark.png | bin | 0 -> 1083 bytes | |||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/images/icon-gear.png | bin | 0 -> 1397 bytes | |||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss | 370 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/scss/config.rb | 10 |
4 files changed, 380 insertions, 0 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/images/icon-checkmark.png b/js/panels/Timeline/TimelinePanel.reel/images/icon-checkmark.png new file mode 100644 index 00000000..64449a5a --- /dev/null +++ b/js/panels/Timeline/TimelinePanel.reel/images/icon-checkmark.png | |||
Binary files differ | |||
diff --git a/js/panels/Timeline/TimelinePanel.reel/images/icon-gear.png b/js/panels/Timeline/TimelinePanel.reel/images/icon-gear.png new file mode 100644 index 00000000..9b324f65 --- /dev/null +++ b/js/panels/Timeline/TimelinePanel.reel/images/icon-gear.png | |||
Binary files differ | |||
diff --git a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss new file mode 100644 index 00000000..5ff710a1 --- /dev/null +++ b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss | |||
@@ -0,0 +1,370 @@ | |||
1 | @charset "UTF-8"; | ||
2 | |||
3 | /* <copyright> | ||
4 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
5 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
6 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
7 | </copyright> */ | ||
8 | |||
9 | /* TimelinePanel.scss | ||
10 | * Main SCSS file for TimelinePanel component, compiled by SASS into the file css/TimelinePanel.css. | ||
11 | */ | ||
12 | |||
13 | // Import theme settings | ||
14 | @import "../../../../../scss/imports/themes/default/colors"; | ||
15 | // @import "../../../../../scss/imports/themes/default/fonts"; | ||
16 | @import "../../../../../scss/imports/themes/default/mixins"; | ||
17 | |||
18 | // Import generic mixins and styles | ||
19 | @import "../../../../../scss/imports/scss/mixins"; | ||
20 | // @import "../../../../../scss/imports/scss/Base"; | ||
21 | |||
22 | .tl_container{ | ||
23 | display: -webkit-box; | ||
24 | -webkit-box-orient: vertical; | ||
25 | height: 100%; | ||
26 | } | ||
27 | .maintimeline{ | ||
28 | -webkit-box-flex: 1; | ||
29 | display: -webkit-box; | ||
30 | -webkit-box-orient: horizontal; | ||
31 | height : 100%; | ||
32 | position: relative; | ||
33 | margin-top:1px; | ||
34 | } | ||
35 | .leftinside{ | ||
36 | height: 100%; | ||
37 | width: 100%; | ||
38 | display: -webkit-box; | ||
39 | -webkit-box-orient: vertical; | ||
40 | position:absolute; | ||
41 | overflow: hidden; | ||
42 | } | ||
43 | .rightinside{ | ||
44 | height: 100%; | ||
45 | width: 100%; | ||
46 | display: -webkit-box; | ||
47 | -webkit-box-orient: vertical; | ||
48 | position:absolute; | ||
49 | } | ||
50 | .tl_leftpane{ | ||
51 | min-width: 200px; | ||
52 | max-width: 500px; | ||
53 | position: relative; | ||
54 | overflow: hidden; | ||
55 | -webkit-box-flex: 0; | ||
56 | } | ||
57 | .tl_rightpane{ | ||
58 | width: 100%; | ||
59 | position: relative; | ||
60 | -webkit-box-flex: 1; | ||
61 | } | ||
62 | |||
63 | #bottomPanelContainer { | ||
64 | overflow: hidden !IMPORTANT; | ||
65 | } | ||
66 | |||
67 | .layout-tracks { | ||
68 | width: 100%; | ||
69 | height: 100%; | ||
70 | padding-bottom: 6px; | ||
71 | box-sizing: border-box; | ||
72 | overflow: auto; | ||
73 | position: relative; | ||
74 | } | ||
75 | .tl_layertracks{ | ||
76 | background-color: $color-tool-bg; | ||
77 | height: 100%; | ||
78 | width: 100%; | ||
79 | -webkit-box-flex: 1; | ||
80 | padding-top: 21px; | ||
81 | box-sizing: border-box; | ||
82 | } | ||
83 | .layerresizer{ | ||
84 | height: auto; | ||
85 | width:6px; | ||
86 | border-right-style: solid; | ||
87 | border-right-color: $color-divider-third; | ||
88 | border-right-width: thin; | ||
89 | border-left-style: solid; | ||
90 | border-left-color: $color-divider-second; | ||
91 | border-left-width: thin; | ||
92 | background-color: $color-divider-first; | ||
93 | cursor: col-resize; | ||
94 | -webkit-box-flex: 0; | ||
95 | } | ||
96 | .timelinecontroller{ | ||
97 | height:20px; | ||
98 | background-color: $color-panel-bg; | ||
99 | -webkit-box-flex: 0; | ||
100 | border-bottom-style: solid; | ||
101 | border-bottom-width: thin; | ||
102 | border-bottom-color: $color-divider-second; | ||
103 | } | ||
104 | .timelinecontrols{ | ||
105 | width: 100%; | ||
106 | padding-left: 6px; | ||
107 | padding-top: 2px; | ||
108 | height: 18px; | ||
109 | background-color: $color-panel-bg; | ||
110 | float: left; | ||
111 | } | ||
112 | .timetext{ | ||
113 | float: right; | ||
114 | padding-right: 10px; | ||
115 | color: white; | ||
116 | } | ||
117 | .rewindbutton{ | ||
118 | background-image: url('../images/play_prev.png'); | ||
119 | background-repeat: no-repeat; | ||
120 | height: 18px; | ||
121 | width: 18px; | ||
122 | float: left; | ||
123 | padding-right: 5px; | ||
124 | } | ||
125 | .playbutton{ | ||
126 | background-image: url('../images/play.png'); | ||
127 | background-repeat: no-repeat; | ||
128 | height: 18px; | ||
129 | width: 18px; | ||
130 | float: left; | ||
131 | padding-right: 5px; | ||
132 | } | ||
133 | .pausebutton{ | ||
134 | background-image: url('../images/pause.png'); | ||
135 | background-repeat: no-repeat; | ||
136 | height: 18px; | ||
137 | width: 18px; | ||
138 | float: left; | ||
139 | padding-right: 5px; | ||
140 | } | ||
141 | .forwardbutton{ | ||
142 | background-image: url('../images/play_next.png'); | ||
143 | background-repeat: no-repeat; | ||
144 | height: 18px; | ||
145 | width: 18px; | ||
146 | float: left; | ||
147 | padding-right: 5px; | ||
148 | } | ||
149 | .timelinemarkers{ | ||
150 | height: 20px; | ||
151 | width: 100%; | ||
152 | background-color: $color-panel-bg; | ||
153 | border-bottom-style: solid; | ||
154 | border-bottom-width: thin; | ||
155 | border-bottom-color: $color-divider-second; | ||
156 | -webkit-box-flex: 0; | ||
157 | position: absolute; | ||
158 | background-image: url("../images/timetick.jpg"); | ||
159 | overflow: visible; | ||
160 | } | ||
161 | .layout_markers { | ||
162 | position: absolute; | ||
163 | overflow: hidden; | ||
164 | top: 0px; | ||
165 | left: 0px; | ||
166 | height: 20px; | ||
167 | width: 100%; | ||
168 | border-bottom-style: solid; | ||
169 | } | ||
170 | |||
171 | .masterlayer{ | ||
172 | font-family: 'Droid Sans'; | ||
173 | font-size: 12px; | ||
174 | text-shadow: 1px 1px 1px black; | ||
175 | height: 18px; | ||
176 | background-color: $color-panel-bg; | ||
177 | border-bottom-style: solid; | ||
178 | border-bottom-width: thin; | ||
179 | border-bottom-color: $color-divider-third; | ||
180 | color: $color-panel-text; | ||
181 | padding-left: 15px; | ||
182 | padding-top: 2px; | ||
183 | } | ||
184 | .mastertrack{ | ||
185 | -webkit-box-flex: 0; | ||
186 | color: white; | ||
187 | height: 20px; | ||
188 | width: 100%; | ||
189 | border-bottom-style: solid; | ||
190 | border-bottom-width: thin; | ||
191 | border-bottom-color: $color-divider-third; | ||
192 | background-color: $color-divider-first; | ||
193 | background-image: url("../../Track.reel/images/gridline.jpg"); | ||
194 | } | ||
195 | |||
196 | .container-tracks, | ||
197 | .timelinemarkers, | ||
198 | .mastertrack { | ||
199 | width: 2000px; | ||
200 | } | ||
201 | .userlayers{ | ||
202 | width: 100%; | ||
203 | background-color: $color-tool-bg; | ||
204 | -webkit-box-flex: 1; | ||
205 | overflow: hidden; | ||
206 | border-bottom-style: solid; | ||
207 | border-bottom-width: thin; | ||
208 | border-bottom-color: $color-divider-second; | ||
209 | } | ||
210 | .timelinegutter{ | ||
211 | height: 16px; | ||
212 | padding-top: 1px; | ||
213 | padding-left: 6px; | ||
214 | -webkit-box-flex: 0; | ||
215 | background-color: $color-menu-bg; | ||
216 | border-top-style: solid; | ||
< |