aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelinePanel.reel/css
diff options
context:
space:
mode:
authorValerio Virgillito2012-07-19 15:53:54 -0700
committerValerio Virgillito2012-07-19 15:53:54 -0700
commit6403ec6d21048c93138ddcbcc59fc4677121ed5e (patch)
tree43d371557e28383fb962cb86d1a478f3a35d7ff3 /js/panels/Timeline/TimelinePanel.reel/css
parentfc13ef1e806116bb7ece5bb06604fa4f5714a6ed (diff)
downloadninja-6403ec6d21048c93138ddcbcc59fc4677121ed5e.tar.gz
Timeline: updated livePreview to timeline play. Hide canvas and draw red outline
- Changed the play button to a toggle button - livePreview code in stage activated via bindings - Draw a red outline of the canvas when in play Signed-off-by: Valerio Virgillito <valerio@motorola.com>
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel/css')
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css81
1 files changed, 45 insertions, 36 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
index f9f5e98c..f82feb71 100644
--- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
+++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
@@ -68,107 +68,116 @@ POSSIBILITY OF SUCH DAMAGE.
68.rewindbutton { background-image: url("../images/play_prev.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; } 68.rewindbutton { background-image: url("../images/play_prev.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; }
69 69
70/* line 150, ../scss/TimelinePanel.scss */ 70/* line 150, ../scss/TimelinePanel.scss */
71.playbutton { background-image: url("../images/play.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; } 71.playbutton { background: transparent url("../images/play.png") no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; border: none; margin: 0; min-width: 0; opacity: 0.8; }
72 72
73/* line 158, ../scss/TimelinePanel.scss */ 73/* line 162, ../scss/TimelinePanel.scss */
74.pausebutton { background-image: url("../images/pause.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; } 74.playbutton:hover { background-color: #474747; opacity: 1; }
75 75
76/* line 166, ../scss/TimelinePanel.scss */ 76/* line 166, ../scss/TimelinePanel.scss */
77.playbutton.active:hover { background-color: #474747; opacity: 1; }
78
79/* line 170, ../scss/TimelinePanel.scss */
80.playbutton:focus { -webkit-box-shadow: none; }
81
82/* line 173, ../scss/TimelinePanel.scss */
83.pausebutton { background-image: url("../images/pause.png"); }
84
85/* line 176, ../scss/TimelinePanel.scss */
77.forwardbutton { background-image: url("../images/play_next.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; } 86.forwardbutton { background-image: url("../images/play_next.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; }
78 87
79/* line 174, ../scss/TimelinePanel.scss */ 88/* line 184, ../scss/TimelinePanel.scss */
80.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; } 89.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; }
81 90
82/* line 186, ../scss/TimelinePanel.scss */ 91/* line 196, ../scss/TimelinePanel.scss */
83.layout_markers { position: absolute; overflow: hidden; top: 0px; left: 0px; height: 20px; width: 100%; border-bottom-style: solid; } 92.layout_markers { position: absolute; overflow: hidden; top: 0px; left: 0px; height: 20px; width: 100%; border-bottom-style: solid; }
84 93
85/* line 196, ../scss/TimelinePanel.scss */ 94/* line 206, ../scss/TimelinePanel.scss */
86.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; } 95.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; }
87 96
88/* line 209, ../scss/TimelinePanel.scss */ 97/* line 219, ../scss/TimelinePanel.scss */
89.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"); } 98.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"); }
90 99
91/* line 223, ../scss/TimelinePanel.scss */ 100/* line 233, ../scss/TimelinePanel.scss */
92.container-tracks, .timelinemarkers, .mastertrack { width: 2000px; } 101.container-tracks, .timelinemarkers, .mastertrack { width: 2000px; }
93 102
94/* line 226, ../scss/TimelinePanel.scss */ 103/* line 236, ../scss/TimelinePanel.scss */
95.userlayers { width: 100%; background-color: #292929; -webkit-box-flex: 1; overflow: hidden; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: black; } 104.userlayers { width: 100%; background-color: #292929; -webkit-box-flex: 1; overflow: hidden; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: black; }
96 105
97/* line 235, ../scss/TimelinePanel.scss */ 106/* line 245, ../scss/TimelinePanel.scss */
98.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; } 107.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; }
99 108
100/* line 245, ../scss/TimelinePanel.scss */ 109/* line 255, ../scss/TimelinePanel.scss */
101.newlayerbutton { background-image: url("../images/plus.png"); background-repeat: no-repeat; height: 16px; width: 16px; float: left; padding-right: 5px; } 110.newlayerbutton { background-image: url("../images/plus.png"); background-repeat: no-repeat; height: 16px; width: 16px; float: left; padding-right: 5px; }
102 111
103/* line 253, ../scss/TimelinePanel.scss */ 112/* line 263, ../scss/TimelinePanel.scss */
104.deletelayerbutton { background-image: url("../images/trash.png"); background-repeat: no-repeat; height: 16px; width: 16px; float: left; padding-right: 5px; } 113.deletelayerbutton { background-image: url("../images/trash.png"); background-repeat: no-repeat; height: 16px; width: 16px; float: left; padding-right: 5px; }
105 114
106/* line 261, ../scss/TimelinePanel.scss */ 115/* line 271, ../scss/TimelinePanel.scss */
107.tracktick { height: 100%; width: 15px; border-right-color: #3a3a3a; border-right-style: solid; border-right-width: thin; float: left; } 116.tracktick { height: 100%; width: 15px; border-right-color: #3a3a3a; border-right-style: solid; border-right-width: thin; float: left; }
108 117
109/* line 269, ../scss/TimelinePanel.scss */ 118/* line 279, ../scss/TimelinePanel.scss */
110.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; } 119.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; }
111 120
112/* line 280, ../scss/TimelinePanel.scss */ 121/* line 290, ../scss/TimelinePanel.scss */
113.playhead { height: 14px; width: 6px; position: absolute; top: 6px; left: -3px; z-index: 92; background-color: #b50003; opacity: 0.5; visibility: hidden; } 122.playhead { height: 14px; width: 6px; position: absolute; top: 6px; left: -3px; z-index: 92; background-color: #b50003; opacity: 0.5; visibility: hidden; }
114 123
115/* line 291, ../scss/TimelinePanel.scss */ 124/* line 301, ../scss/TimelinePanel.scss */
116.playheadmarker { height: 100%; width: 1px; background-color: white; top: 0; left: 0; position: absolute; z-index: 91; opacity: 0.7; } 125.playheadmarker { height: 100%; width: 1px; background-color: white; top: 0; left: 0; position: absolute; z-index: 91; opacity: 0.7; }
117 126
118/* line 301, ../scss/TimelinePanel.scss */ 127/* line 311, ../scss/TimelinePanel.scss */
119.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; } 128.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; }
120 129
121/* line 311, ../scss/TimelinePanel.scss */ 130/* line 321, ../scss/TimelinePanel.scss */
122.timelinegutter .endhottext { float: right; font-family: 'Droid Sans'; font-size: 12px; text-shadow: 1px 1px 1px #3a3a3a; color: white; margin-top: 0%; } 131.timelinegutter .endhottext { float: right; font-family: 'Droid Sans'; font-size: 12px; text-shadow: 1px 1px 1px #3a3a3a; color: white; margin-top: 0%; }
123 132
124/* line 319, ../scss/TimelinePanel.scss */ 133/* line 329, ../scss/TimelinePanel.scss */
125.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; } 134.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; }
126 135
127/* line 330, ../scss/TimelinePanel.scss */ 136/* line 340, ../scss/TimelinePanel.scss */
128.timeline-dnd-helper { -webkit-transform: scale(0.9, 0.9); } 137.timeline-dnd-helper { -webkit-transform: scale(0.9, 0.9); }
129 138
130/* line 333, ../scss/TimelinePanel.scss */ 139/* line 343, ../scss/TimelinePanel.scss */
131.tl_slider { width: 65px; height: 5px; background: none; float: left; margin-left: 5%; } 140.tl_slider { width: 65px; height: 5px; background: none; float: left; margin-left: 5%; }
132 141
133/* Configuration menu */ 142/* Configuration menu */
134/* line 342, ../scss/TimelinePanel.scss */ 143/* line 352, ../scss/TimelinePanel.scss */
135.layer-master { position: relative; } 144.layer-master { position: relative; }
136 145
137/* line 345, ../scss/TimelinePanel.scss */ 146/* line 355, ../scss/TimelinePanel.scss */
138.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; } 147.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; }
139 148
140/* line 357, ../scss/TimelinePanel.scss */ 149/* line 367, ../scss/TimelinePanel.scss */
141.tl-configbutton:hover { width: 180px; } 150.tl-configbutton:hover { width: 180px; }
142 151
143/* line 361, ../scss/TimelinePanel.scss */ 152/* line 371, ../scss/TimelinePanel.scss */
144.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; } 153.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; }
145 154
146/* line 372, ../scss/TimelinePanel.scss */ 155/* line 382, ../scss/TimelinePanel.scss */
147.tl-configbutton.checked .tl-dropdown { display: block; } 156.tl-configbutton.checked .tl-dropdown { display: block; }
148 157
149/* line 376, ../scss/TimelinePanel.scss */ 158/* line 386, ../scss/TimelinePanel.scss */
150.tl-configbutton .checkable { padding-left: 20px; height: 20px; line-height: 20px; margin-top: 3px; } 159.tl-configbutton .checkable { padding-left: 20px; height: 20px; line-height: 20px; margin-top: 3px; }
151 160
152/* line 382, ../scss/TimelinePanel.scss */ 161/* line 392, ../scss/TimelinePanel.scss */
153.tl-configbutton .checkable:hover { background-color: #b2b2b2; color: #242424; text-shadow: none; } 162.tl-configbutton .checkable:hover { background-color: #b2b2b2; color: #242424; text-shadow: none; }
154 163
155/* line 387, ../scss/TimelinePanel.scss */ 164/* line 397, ../scss/TimelinePanel.scss */
156.tl-configbutton .checkable.checked { background-image: url(../images/icon-checkmark.png); background-repeat: no-repeat; background-position: 6px 4px; } 165.tl-configbutton .checkable.checked { background-image: url(../images/icon-checkmark.png); background-repeat: no-repeat; background-position: 6px 4px; }
157 166
158/* line 393, ../scss/TimelinePanel.scss */ 167/* line 403, ../scss/TimelinePanel.scss */
159.tl-configbutton .nj-divider { margin-top: 7px; } 168.tl-configbutton .nj-divider { margin-top: 7px; }
160 169
161/* line 397, ../scss/TimelinePanel.scss */ 170/* line 407, ../scss/TimelinePanel.scss */
162.layer-hidden { display: none; } 171.layer-hidden { display: none; }
163 172
164/* line 401, ../scss/TimelinePanel.scss */ 173/* line 411, ../scss/TimelinePanel.scss */
165.tl_slider { width: 127px; height: 5px; float: left; clear: none; margin: 2px 0px 0px 0px; } 174.tl_slider { width: 127px; height: 5px; float: left; clear: none; margin: 2px 0px 0px 0px; }
166 175
167/* line 409, ../scss/TimelinePanel.scss */ 176/* line 419, ../scss/TimelinePanel.scss */
168.tl_slider .slider-track { background: #29292; width: 127px; height: 4px; border: 1px solid #000; top: 3px; } 177.tl_slider .slider-track { background: #292929; width: 127px; height: 4px; border: 1px solid #000; top: 3px; }
169 178
170/* line 417, ../scss/TimelinePanel.scss */ 179/* line 427, ../scss/TimelinePanel.scss */
171.sliderClass { float: left; width: 127px; } 180.sliderClass { float: left; width: 127px; }
172 181
173/* line 422, ../scss/TimelinePanel.scss */ 182/* line 432, ../scss/TimelinePanel.scss */
174.sliderClass .knob { background: url(../images/kno