From a39bad832722a10f6556f91e94c3301a41f59bd5 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 6 Feb 2012 13:30:49 -0800 Subject: merge new timeline Signed-off-by: Jonathan Duran --- .../TimelinePanel.reel/css/TimelinePanel.css | 249 +++++++++++++++++++++ 1 file changed, 249 insertions(+) create mode 100644 js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css (limited to 'js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css') 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..0a73705a --- /dev/null +++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css @@ -0,0 +1,249 @@ +.tl_container{ + display: -webkit-box; + -webkit-box-orient: vertical; + height: 100%; +} +.maintimeline{ + border-style: double; + -webkit-box-flex: 1; + display: -webkit-box; + -webkit-box-orient: horizontal + height : 100%; +} +.leftinside{ + height: 100%; + width: 100%; + display: -webkit-box; + -webkit-box-orient: vertical; + position:absolute; + overflow: hidden; +} +.rightinside{ + height: 100%; + width: 100%; + display: -webkit-box; + -webkit-box-orient: vertical; + position:absolute; +} +.tl_leftpane{ + min-width: 200px; + position: relative; + overflow: hidden; + -webkit-box-flex: 0; +} +.tl_rightpane{ + width: 100%; + position: relative; + -webkit-box-flex: 1; +} + +#bottomPanelContainer { + overflow: hidden !IMPORTANT; +} + +.layout-tracks { + width: 100%; + height: 100%; + padding-bottom: 6px; + box-sizing: border-box; + overflow: auto; + position: relative; +} +.tl_layertracks{ + background-color: #222; + height: 100%; + width: 100%; + -webkit-box-flex: 1; + padding-top: 21px; + box-sizing: border-box; +} +.layerresizer{ + height: auto; + width:6px; + border-right-style: solid; + border-right-color: #333; + border-right-width: thin; + border-left-style: solid; + border-left-color: #000; + border-left-width: thin; + background-color: #222; + cursor: col-resize; + -webkit-box-flex: 0; +} +.timelinecontroller{ + height:20px; + background-color: #222; + -webkit-box-flex: 0; + border-bottom-style: solid; + border-bottom-width: thin; + border-bottom-color: #000; +} +.timelinecontrols{ + width: 100%; + padding-left: 6px; + padding-top: 2px; + height: 18px; + background-color: #222; + float: left; +} +.timetext{ + float: right; + padding-right: 10px; + color: white; +} +.rewindbutton{ + background-image: url('../images/play_prev.png'); + background-repeat: no-repeat; + height: 18px; + width: 18px; + float: left; + padding-right: 5px; +} +.playbutton{ + background-image: url('../images/play.png'); + background-repeat: no-repeat; + height: 18px; + width: 18px; + float: left; + padding-right: 5px; +} +.pausebutton{ + background-image: url('../images/pause.png'); + background-repeat: no-repeat; + height: 18px; + width: 18px; + float: left; + padding-right: 5px; +} +.forwardbutton{ + background-image: url('../images/play_next.png'); + background-repeat: no-repeat; + height: 18px; + width: 18px; + float: left; + padding-right: 5px; +} +.timelinemarkers{ + height: 20px; + width: 100%; + background-color: #222; + border-bottom-style: solid; + border-bottom-width: thin; + border-bottom-color: #000; + -webkit-box-flex: 0; + position: absolute; + background-image: url("../images/timetick.jpg"); + overflow: visible; +} +.layout_markers { + position: absolute; + overflow: hidden; + top: 0px; + left: 0px; + height: 20px; + width: 100%; +} + +.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: #555; + color: white; + padding-left: 15px; + padding-top: 2px; +} +.mastertrack{ + -webkit-box-flex: 0; + color: white; + height: 20px; + width: 100%; + border-bottom-style: solid; + border-bottom-width: thin; + border-bottom-color: #444; + background-color: #222; + background-image: url("../../Track.reel/images/gridline.jpg"); +} + +.container-tracks, +.timelinemarkers, +.mastertrack { + width: 2000px; +} +.userlayers{ + width: 100%; + background-color: #222; + -webkit-box-flex: 1; + overflow: hidden; + border-bottom-style: solid; + border-bottom-width: thin; + border-bottom-color: #000; +} +.timelinegutter{ + height: 16px; + padding-top: 1px; + padding-left: 6px; + -webkit-box-flex: 0; + background-color: #222; + border-top-style: solid; + border-top-width: thin; + border-top-color: #444; +} +.newlayerbutton{ + background-image: url('../images/plus.png'); + background-repeat: no-repeat; + height: 16px; + width: 16px; + float: left; + padding-right: 5px; +} +.deletelayerbutton{ + background-image: url('../images/trash.png'); + background-repeat: no-repeat; + height: 16px; + width: 16px; + float: left; + padding-right: 5px; +} +.tracktick{ + height: 100%; + width: 15px; + border-right-color: #444; + border-right-style: solid; + border-right-width: thin; + float: left; +} +.timemark{ + font-family: 'Droid Sans'; + font-size: 12px; + text-shadow: 1px 1px 1px black; + width: 76px; + color: #808080; + float: left; + padding-top: 6px; + padding-left: 4px; + text-align: left; +} +.playhead{ + height: 14px; + width: 6px; + position: absolute; + top: 6px; + left: -3px; + z-index: 912; + background-color: #b50003; + opacity: 0.5; +} +.playheadmarker{ + height: 100%; + width: 1px; + background-color: #cccccc; + top: 0px; + left: 0px; + position: absolute; + z-index: 913; +} \ No newline at end of file -- cgit v1.2.3 From 68f6af70818652821507881daf0abd2e8b6d5d27 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 6 Feb 2012 21:09:25 -0800 Subject: Fix resized going off screen by giving layer gutter a max width of 500 Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css | 1 + 1 file changed, 1 insertion(+) (limited to 'js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css') diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css index 0a73705a..f5fb9378 100644 --- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css +++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css @@ -27,6 +27,7 @@ } .tl_leftpane{ min-width: 200px; + max-width: 500px; position: relative; overflow: hidden; -webkit-box-flex: 0; -- cgit v1.2.3 From 8cb53b7ec3b4f34fd77945256ad80bc1ae54b887 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 7 Feb 2012 21:28:14 -0800 Subject: Add Span color highlight for animated spans and restyle keyframes Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css | 1 + 1 file changed, 1 insertion(+) (limited to 'js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css') diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css index f5fb9378..cbae49c8 100644 --- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css +++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css @@ -143,6 +143,7 @@ left: 0px; height: 20px; width: 100%; + border-bottom-style: solid; } .masterlayer{ -- cgit v1.2.3