diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css | 424 |
1 files changed, 138 insertions, 286 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css index 067285ae..29bf8d38 100644 --- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css +++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css | |||
@@ -1,286 +1,138 @@ | |||
1 | /* <copyright> | 1 | @charset "UTF-8"; |
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | 2 | /* <copyright> This file contains proprietary software owned by Motorola Mobility, Inc.<br/> No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. </copyright> */ |
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | 3 | /* TimelinePanel.scss Main SCSS file for TimelinePanel component, compiled by SASS into the file css/TimelinePanel.css. */ |
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | 4 | /* line 22, ../scss/TimelinePanel.scss */ |
5 | </copyright> */ | 5 | .tl_container { display: -webkit-box; -webkit-box-orient: vertical; height: 100%; } |
6 | 6 | ||
7 | .tl_container{ | 7 | /* line 27, ../scss/TimelinePanel.scss */ |
8 | display: -webkit-box; | 8 | .maintimeline { -webkit-box-flex: 1; display: -webkit-box; -webkit-box-orient: horizontal; height: 100%; position: relative; margin-top: 1px; } |
9 | -webkit-box-orient: vertical; | 9 | |
10 | height: 100%; | 10 | /* line 35, ../scss/TimelinePanel.scss */ |
11 | } | 11 | .leftinside { height: 100%; width: 100%; display: -webkit-box; -webkit-box-orient: vertical; position: absolute; overflow: hidden; } |
12 | .maintimeline{ | 12 | |
13 | -webkit-box-flex: 1; | 13 | /* line 43, ../scss/TimelinePanel.scss */ |
14 | display: -webkit-box; | 14 | .rightinside { height: 100%; width: 100%; display: -webkit-box; -webkit-box-orient: vertical; position: absolute; } |
15 | -webkit-box-orient: horizontal; | 15 | |
16 | height : 100%; | 16 | /* line 50, ../scss/TimelinePanel.scss */ |
17 | position: relative; | 17 | .tl_leftpane { min-width: 200px; max-width: 500px; position: relative; overflow: hidden; -webkit-box-flex: 0; } |
18 | margin-top:1px; | 18 | |
19 | } | 19 | /* line 57, ../scss/TimelinePanel.scss */ |
20 | .leftinside{ | 20 | .tl_rightpane { width: 100%; position: relative; -webkit-box-flex: 1; } |
21 | height: 100%; | 21 | |
22 | width: 100%; | 22 | /* line 63, ../scss/TimelinePanel.scss */ |
23 | display: -webkit-box; | 23 | #bottomPanelContainer { overflow: hidden !IMPORTANT; } |
24 | -webkit-box-orient: vertical; | 24 | |
25 | position:absolute; | 25 | /* line 67, ../scss/TimelinePanel.scss */ |
26 | overflow: hidden; | 26 | .layout-tracks { width: 100%; height: 100%; padding-bottom: 6px; box-sizing: border-box; overflow: auto; position: relative; } |
27 | } | 27 | |
28 | .rightinside{ | 28 | /* line 75, ../scss/TimelinePanel.scss */ |
29 | height: 100%; | 29 | .tl_layertracks { background-color: #292929; height: 100%; width: 100%; -webkit-box-flex: 1; padding-top: 21px; box-sizing: border-box; } |
30 | width: 100%; | 30 | |
31 | display: -webkit-box; | 31 | /* line 83, ../scss/TimelinePanel.scss */ |
32 | -webkit-box-orient: vertical; | 32 | .layerresizer { height: auto; width: 6px; border-right-style: solid; border-right-color: #3a3a3a; border-right-width: thin; border-left-style: solid; border-left-color: black; border-left-width: thin; background-color: #232323; cursor: col-resize; -webkit-box-flex: 0; } |
33 | position:absolute; | 33 | |
34 | } | 34 | /* line 96, ../scss/TimelinePanel.scss */ |
35 | .tl_leftpane{ | 35 | .timelinecontroller { height: 20px; background-color: #474747; -webkit-box-flex: 0; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: black; } |
36 | min-width: 200px; | 36 | |
37 | max-width: 500px; | 37 | /* line 104, ../scss/TimelinePanel.scss */ |
38 | position: relative; | 38 | .timelinecontrols { width: 100%; padding-left: 6px; padding-top: 2px; height: 18px; background-color: #474747; float: left; } |
39 | overflow: hidden; | 39 | |
40 | -webkit-box-flex: 0; | 40 | /* line 112, ../scss/TimelinePanel.scss */ |
41 | } | 41 | .timetext { float: right; padding-right: 10px; color: white; } |
42 | .tl_rightpane{ | 42 | |
43 | width: 100%; | 43 | /* line 117, ../scss/TimelinePanel.scss */ |
44 | position: relative; | 44 | .rewindbutton { background-image: url("../images/play_prev.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; } |
45 | -webkit-box-flex: 1; | 45 | |
46 | } | 46 | /* line 125, ../scss/TimelinePanel.scss */ |
47 | 47 | .playbutton { background-image: url("../images/play.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; } | |
48 | #bottomPanelContainer { | 48 | |
49 | overflow: hidden !IMPORTANT; | 49 | /* line 133, ../scss/TimelinePanel.scss */ |
50 | } | 50 | .pausebutton { background-image: url("../images/pause.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; } |
51 | 51 | ||
52 | .layout-tracks { | 52 | /* line 141, ../scss/TimelinePanel.scss */ |
53 | width: 100%; | 53 | .forwardbutton { background-image: url("../images/play_next.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; } |
54 | height: 100%; | 54 | |
55 | padding-bottom: 6px; | 55 | /* line 149, ../scss/TimelinePanel.scss */ |
56 | box-sizing: border-box; | 56 | .timelinemarkers { height: 20px; width: 100%; background-color: #474747; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: black; -webkit-box-flex: 0; position: absolute; background-image: url("../images/timetick.jpg"); overflow: visible; } |
57 | overflow: auto; | 57 | |
58 | position: relative; | 58 | /* line 161, ../scss/TimelinePanel.scss */ |
59 | } | 59 | .layout_markers { position: absolute; overflow: hidden; top: 0px; left: 0px; height: 20px; width: 100%; border-bottom-style: solid; } |
60 | .tl_layertracks{ | 60 | |
61 | background-color: #222; | 61 | /* line 171, ../scss/TimelinePanel.scss */ |
62 | height: 100%; | 62 | .masterlayer { font-family: 'Droid Sans'; font-size: 12px; text-shadow: 1px 1px 1px black; height: 18px; background-color: #474747; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #3a3a3a; color: white; padding-left: 15px; padding-top: 2px; } |
63 | width: 100%; | 63 | |
64 | -webkit-box-flex: 1; | 64 | /* line 184, ../scss/TimelinePanel.scss */ |
65 | padding-top: 21px; | 65 | .mastertrack { -webkit-box-flex: 0; color: white; height: 20px; width: 100%; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #3a3a3a; background-color: #232323; background-image: url("../../Track.reel/images/gridline.jpg"); } |
66 | box-sizing: border-box; | 66 | |
67 | } | 67 | /* line 198, ../scss/TimelinePanel.scss */ |
68 | .layerresizer{ | 68 | .container-tracks, .timelinemarkers, .mastertrack { width: 2000px; } |
69 | height: auto; | 69 | |
70 | width:6px; | 70 | /* line 201, ../scss/TimelinePanel.scss */ |
71 | border-right-style: solid; | 71 | .userlayers { width: 100%; background-color: #292929; -webkit-box-flex: 1; overflow: hidden; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: black; } |
72 | border-right-color: #333; | 72 | |
73 | border-right-width: thin; | 73 | /* line 210, ../scss/TimelinePanel.scss */ |
74 | border-left-style: solid; | 74 | .timelinegutter { height: 16px; padding-top: 1px; padding-left: 6px; -webkit-box-flex: 0; background-color: #474747; border-top-style: solid; border-top-width: thin; border-top-color: #3a3a3a; } |
75 | border-left-color: #000; | 75 | |
76 | border-left-width: thin; | 76 | /* line 220, ../scss/TimelinePanel.scss */ |
77 | background-color: #222; | 77 | .newlayerbutton { background-image: url("../images/plus.png"); background-repeat: no-repeat; height: 16px; width: 16px; float: left; padding-right: 5px; } |
78 | cursor: col-resize; | 78 | |
79 | -webkit-box-flex: 0; | 79 | /* line 228, ../scss/TimelinePanel.scss */ |
80 | } | 80 | .deletelayerbutton { background-image: url("../images/trash.png"); background-repeat: no-repeat; height: 16px; width: 16px; float: left; padding-right: 5px; } |
81 | .timelinecontroller{ | 81 | |
82 | height:20px; | 82 | /* line 236, ../scss/TimelinePanel.scss */ |
83 | background-color: #222; | 83 | .tracktick { height: 100%; width: 15px; border-right-color: #3a3a3a; border-right-style: solid; border-right-width: thin; float: left; } |
84 | -webkit-box-flex: 0; | 84 | |
85 | border-bottom-style: solid; | 85 | /* line 244, ../scss/TimelinePanel.scss */ |
86 | border-bottom-width: thin; | 86 | .timemark { font-family: 'Droid Sans'; font-size: 12px; text-shadow: 1px 1px 1px #3a3a3a; width: 76px; color: gray; float: left; padding-top: 6px; padding-left: 4px; text-align: left; } |
87 | border-bottom-color: #000; | 87 | |
88 | } | 88 | /* line 255, ../scss/TimelinePanel.scss */ |
89 | .timelinecontrols{ | 89 | .playhead { height: 14px; width: 6px; position: absolute; top: 6px; left: -3px; z-index: 92; background-color: #b50003; opacity: 0.5; } |
90 | width: 100%; | 90 | |
91 | padding-left: 6px; | 91 | /* line 265, ../scss/TimelinePanel.scss */ |
92 | padding-top: 2px; | 92 | .playheadmarker { height: 100%; width: 1px; background-color: white; top: 0; left: 0; position: absolute; z-index: 91; opacity: 0.7; } |
93 | height: 18px; | 93 | |
94 | background-color: #222; | 94 | /* line 275, ../scss/TimelinePanel.scss */ |
95 | float: left; | 95 | .timebar { height: 3px; width: 0; background-color: #ff0003; opacity: 0.3; top: 10px; position: absolute; border-top: #c7a19f thin solid; border-right: #ffffff thin solid; } |
96 | } | 96 | |
97 | .timetext{ | 97 | /* line 285, ../scss/TimelinePanel.scss */ |
98 | float: right; | 98 | .endhottext { float: right; font-family: 'Droid Sans'; font-size: 12px; text-shadow: 1px 1px 1px #3a3a3a; color: white; margin-top: 0%; } |
99 | padding-right: 10px; | 99 | |
100 | color: white; | 100 | /* line 293, ../scss/TimelinePanel.scss */ |
101 | } | 101 | .timeline-disabled { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(30, 30, 30, 0.796); z-index: 100; display: none; box-shadow: #111111 0px 0px 14px inset; } |
102 | .rewindbutton{ | 102 | |
103 | background-image: url('../images/play_prev.png'); | 103 | /* line 304, ../scss/TimelinePanel.scss */ |
104 | background-repeat: no-repeat; | 104 | .timeline-dnd-helper { -webkit-transform: scale(0.9, 0.9); } |
105 | height: 18px; | 105 | |
106 | width: 18px; | 106 | /* line 307, ../scss/TimelinePanel.scss */ |
107 | float: left; | 107 | .tl_slider { width: 65px; height: 5px; background: none; float: left; margin-left: 5%; } |
108 | padding-right: 5px; | 108 | |
109 | } | 109 | /* Configuration menu */ |
110 | .playbutton{ | 110 | /* line 316, ../scss/TimelinePanel.scss */ |
111 | background-image: url('../images/play.png'); | 111 | .layer-master { position: relative; } |
112 | background-repeat: no-repeat; | 112 | |
113 | height: 18px; | 113 | /* line 319, ../scss/TimelinePanel.scss */ |
114 | width: 18px; | 114 | .tl-configbutton { position: absolute; top: 0px; right: 2px; width: 20px; height: 20px; background-image: url(../images/icon-gear.png); background-repeat: no-repeat; cursor: pointer; z-index: 100; background-position: 100% 0px; } |
115 | float: left; | 115 | |
116 | padding-right: 5px; | 116 | /* line 331, ../scss/TimelinePanel.scss */ |
117 | } | 117 | .tl-configbutton:hover { width: 180px; } |
118 | .pausebutton{ | 118 | |
119 | background-image: url('../images/pause.png'); | 119 | /* line 335, ../scss/TimelinePanel.scss */ |
120 | background-repeat: no-repeat; | 120 | .tl-configbutton .tl-dropdown { position: absolute; border: 1px solid black; top: 16px; right: 2px; width: 180px; padding-bottom: 7px; background-color: #474747; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); display: none; } |
121 | height: 18px; | 121 | |
122 | width: 18px; | 122 | /* line 346, ../scss/TimelinePanel.scss */ |
123 | float: left; | 123 | .tl-configbutton.checked .tl-dropdown { display: block; } |
124 | padding-right: 5px; | 124 | |
125 | } | 125 | /* line 350, ../scss/TimelinePanel.scss */ |
126 |