diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel/css')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css | 251 |
1 files changed, 251 insertions, 0 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css new file mode 100644 index 00000000..cbae49c8 --- /dev/null +++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css | |||
@@ -0,0 +1,251 @@ | |||
1 | .tl_container{ | ||
2 | display: -webkit-box; | ||
3 | -webkit-box-orient: vertical; | ||
4 | height: 100%; | ||
5 | } | ||
6 | .maintimeline{ | ||
7 | border-style: double; | ||
8 | -webkit-box-flex: 1; | ||
9 | display: -webkit-box; | ||
10 | -webkit-box-orient: horizontal | ||
11 | height : 100%; | ||
12 | } | ||
13 | .leftinside{ | ||
14 | height: 100%; | ||
15 | width: 100%; | ||
16 | display: -webkit-box; | ||
17 | -webkit-box-orient: vertical; | ||
18 | position:absolute; | ||
19 | overflow: hidden; | ||
20 | } | ||
21 | .rightinside{ | ||
22 | height: 100%; | ||
23 | width: 100%; | ||
24 | display: -webkit-box; | ||
25 | -webkit-box-orient: vertical; | ||
26 | position:absolute; | ||
27 | } | ||
28 | .tl_leftpane{ | ||
29 | min-width: 200px; | ||
30 | max-width: 500px; | ||
31 | position: relative; | ||
32 | overflow: hidden; | ||
33 | -webkit-box-flex: 0; | ||
34 | } | ||
35 | .tl_rightpane{ | ||
36 | width: 100%; | ||
37 | position: relative; | ||
38 | -webkit-box-flex: 1; | ||
39 | } | ||
40 | |||
41 | #bottomPanelContainer { | ||
42 | overflow: hidden !IMPORTANT; | ||
43 | } | ||
44 | |||
45 | .layout-tracks { | ||
46 | width: 100%; | ||
47 | height: 100%; | ||
48 | padding-bottom: 6px; | ||
49 | box-sizing: border-box; | ||
50 | overflow: auto; | ||
51 | position: relative; | ||
52 | } | ||
53 | .tl_layertracks{ | ||
54 | background-color: #222; | ||
55 | height: 100%; | ||
56 | width: 100%; | ||
57 | -webkit-box-flex: 1; | ||
58 | padding-top: 21px; | ||
59 | box-sizing: border-box; | ||
60 | } | ||
61 | .layerresizer{ | ||
62 | height: auto; | ||
63 | width:6px; | ||
64 | border-right-style: solid; | ||
65 | border-right-color: #333; | ||
66 | border-right-width: thin; | ||
67 | border-left-style: solid; | ||
68 | border-left-color: #000; | ||
69 | border-left-width: thin; | ||
70 | background-color: #222; | ||
71 | cursor: col-resize; | ||
72 | -webkit-box-flex: 0; | ||
73 | } | ||
74 | .timelinecontroller{ | ||
75 | height:20px; | ||
76 | background-color: #222; | ||
77 | -webkit-box-flex: 0; | ||
78 | border-bottom-style: solid; | ||
79 | border-bottom-width: thin; | ||
80 | border-bottom-color: #000; | ||
81 | } | ||
82 | .timelinecontrols{ | ||
83 | width: 100%; | ||
84 | padding-left: 6px; | ||
85 | padding-top: 2px; | ||
86 | height: 18px; | ||
87 | background-color: #222; | ||
88 | float: left; | ||
89 | } | ||
90 | .timetext{ | ||
91 | float: right; | ||
92 | padding-right: 10px; | ||
93 | color: white; | ||
94 | } | ||
95 | .rewindbutton{ | ||
96 | background-image: url('../images/play_prev.png'); | ||
97 | background-repeat: no-repeat; | ||
98 | height: 18px; | ||
99 | width: 18px; | ||
100 | float: left; | ||
101 | padding-right: 5px; | ||
102 | } | ||
103 | .playbutton{ | ||
104 | background-image: url('../images/play.png'); | ||
105 | background-repeat: no-repeat; | ||
106 | height: 18px; | ||
107 | width: 18px; | ||
108 | float: left; | ||
109 | padding-right: 5px; | ||
110 | } | ||
111 | .pausebutton{ | ||
112 | background-image: url('../images/pause.png'); | ||
113 | background-repeat: no-repeat; | ||
114 | height: 18px; | ||
115 | width: 18px; | ||
116 | float: left; | ||
117 | padding-right: 5px; | ||
118 | } | ||
119 | .forwardbutton{ | ||
120 | background-image: url('../images/play_next.png'); | ||
121 | background-repeat: no-repeat; | ||
122 | height: 18px; | ||
123 | width: 18px; | ||
124 | float: left; | ||
125 | padding-right: 5px; | ||
126 | } | ||
127 | .timelinemarkers{ | ||
128 | height: 20px; | ||
129 | width: 100%; | ||
130 | background-color: #222; | ||
131 | border-bottom-style: solid; | ||
132 | border-bottom-width: thin; | ||
133 | border-bottom-color: #000; | ||
134 | -webkit-box-flex: 0; | ||
135 | position: absolute; | ||
136 | background-image: url("../images/timetick.jpg"); | ||
137 | overflow: visible; | ||
138 | } | ||
139 | .layout_markers { | ||
140 | position: absolute; | ||
141 | overflow: hidden; | ||
142 | top: 0px; | ||
143 | left: 0px; | ||
144 | height: 20px; | ||
145 | width: 100%; | ||
146 | border-bottom-style: solid; | ||
147 | } | ||
148 | |||
149 | .masterlayer{ | ||
150 | font-family: 'Droid Sans'; | ||
151 | font-size: 12px; | ||
152 | text-shadow: 1px 1px 1px black; | ||
153 | height: 18px; | ||
154 | background-color: #474747; | ||
155 | border-bottom-style: solid; | ||
156 | border-bottom-width: thin; | ||
157 | border-bottom-color: #555; | ||
158 | color: white; | ||
159 | padding-left: 15px; | ||
160 | padding-top: 2px; | ||
161 | } | ||
162 | .mastertrack{ | ||
163 | -webkit-box-flex: 0; | ||
164 | color: white; | ||
165 | height: 20px; | ||
166 | width: 100%; | ||
167 | border-bottom-style: solid; | ||
168 | border-bottom-width: thin; | ||
169 | border-bottom-color: #444; | ||
170 | background-color: #222; | ||
171 | background-image: url("../../Track.reel/images/gridline.jpg"); | ||
172 | } | ||
173 | |||
174 | .container-tracks, | ||
175 | .timelinemarkers, | ||
176 | .mastertrack { | ||
177 | width: 2000px; | ||
178 | } | ||
179 | .userlayers{ | ||
180 | width: 100%; | ||
181 | background-color: #222; | ||
182 | -webkit-box-flex: 1; | ||
183 | overflow: hidden; | ||
184 | border-bottom-style: solid; | ||
185 | border-bottom-width: thin; | ||
186 | border-bottom-color: #000; | ||
187 | } | ||
188 | .timelinegutter{ | ||
189 | height: 16px; | ||
190 | padding-top: 1px; | ||
191 | padding-left: 6px; | ||
192 | -webkit-box-flex: 0; | ||
193 | background-color: #222; | ||
194 | border-top-style: solid; | ||
195 | border-top-width: thin; | ||
196 | border-top-color: #444; | ||
197 | } | ||
198 | .newlayerbutton{ | ||
199 | background-image: url('../images/plus.png'); | ||
200 | background-repeat: no-repeat; | ||
201 | height: 16px; | ||
202 | width: 16px; | ||
203 | float: left; | ||
204 | padding-right: 5px; | ||
205 | } | ||
206 | .deletelayerbutton{ | ||
207 | background-image: url('../images/trash.png'); | ||
208 | background-repeat: no-repeat; | ||
209 | height: 16px; | ||
210 | width: 16px; | ||
211 | float: left; | ||
212 | padding-right: 5px; | ||
213 | } | ||
214 | .tracktick{ | ||
215 | height: 100%; | ||
216 | width: 15px; | ||
217 | border-right-color: #444; | ||
218 | border-right-style: solid; | ||
219 | border-right-width: thin; | ||
220 | float: left; | ||
221 | } | ||
222 | .timemark{ | ||
223 | font-family: 'Droid Sans'; | ||
224 | font-size: 12px; | ||
225 | text-shadow: 1px 1px 1px black; | ||
226 | width: 76px; | ||