From 2dd8fabacf115cf32e38115a472f3f2c59926135 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 12 Jul 2012 16:06:11 -0700 Subject: Improving Document Bar UI Setting up new document bar UI to then set up switching document view modes. Improving layout of component and cleaning up. Added icons and button UI. --- .../layout/document-bar.reel/document-bar.css | 88 ++++++++++++++++------ 1 file changed, 63 insertions(+), 25 deletions(-) (limited to 'js/components/layout/document-bar.reel/document-bar.css') diff --git a/js/components/layout/document-bar.reel/document-bar.css b/js/components/layout/document-bar.reel/document-bar.css index a356dd1a..cb9accdd 100755 --- a/js/components/layout/document-bar.reel/document-bar.css +++ b/js/components/layout/document-bar.reel/document-bar.css @@ -28,46 +28,84 @@ CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ -.documentBar { - position: relative; - overflow: hidden; - color: white; + +.timelineResizer { + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(19,19,19,1)), color-stop(50%,rgba(44,44,44,1)), color-stop(100%,rgba(19,19,19,1))) !important; } -.documentBar .active { - text-decoration: underline; - cursor: pointer; - color: #666666; +.documentBar { + background: rgb(40, 40, 40); + height: 20px !important; + color: #FFF; + font-size: 11px; } -.documentBar .active:hover { - color: #ffffff; +.documentBar section{ + background: rgb(60, 60, 60); + float: left; + height: 100%; + padding: 0px 4px; + border-right: 2px solid #000; } -.documentBar .selected { - text-decoration: underline; - cursor: default; - color: #ffffff; +.documentBar .zoomicon { + background-image: url('../../../../images/tools/Tool-Zoom.png'); + background-repeat: no-repeat; + background-position: center center; + background-size: 75%; + width: 18px; + height: 18px; + float: left; } -.documentBar .selected { - color: #ffffff; +.documentBar .zoomHotText { + font-size: 11px; + width: 40px; + margin: 0 0 0 2px; + text-align: center; } -.documentBar span{ - text-decoration: none; +.documentBar .btn_view { + display: block; + background: none; + margin: 3px 0 0 0; + padding: 0; + border: none; + color: #FFF; + width: 44px; + text-transform: uppercase; + text-align: left; + float: left; cursor: pointer; - color: #3a3a3a; } -.documentBar .zoomHotText span { - color: white; +.documentBar .viewicon { + background-repeat: no-repeat; + background-position: center center; + width: 16px; + height: 16px; + margin: 2px 4px 0 0; + float: left; } -.documentBar .enable{ - color: #d7d7d7; +.documentBar .viewcode { + background-image: url('../../../../images/optionsbar/text/AlignLeft.png'); + background-size: 80%; } -.documentBar .disable{ - color: #3a3a3a; +.documentBar .viewdesign { + background-image: url('../../../../js/panels/Color/colorpanelpopup.reel/img/icon_bitmap.png'); + background-size: 90%; } + +.documentBar section.inactive .viewicon{ + opacity: .5; +} + +.documentBar section.inactive button { + opacity: .5; +} + +.documentBar section.inactive button:hover { + opacity: 1; +} \ No newline at end of file -- cgit v1.2.3 From 2c5b9fac8a1085788ae00ecee527760e6c8953f6 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Fri, 13 Jul 2012 12:44:21 -0700 Subject: New: Added knob to timeline resizer Added visual feedback for the timeline resizer --- js/components/layout/document-bar.reel/document-bar.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'js/components/layout/document-bar.reel/document-bar.css') diff --git a/js/components/layout/document-bar.reel/document-bar.css b/js/components/layout/document-bar.reel/document-bar.css index cb9accdd..d92a3dd6 100755 --- a/js/components/layout/document-bar.reel/document-bar.css +++ b/js/components/layout/document-bar.reel/document-bar.css @@ -30,7 +30,10 @@ POSSIBILITY OF SUCH DAMAGE. */ .timelineResizer { - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(19,19,19,1)), color-stop(50%,rgba(44,44,44,1)), color-stop(100%,rgba(19,19,19,1))) !important; + background: -webkit-radial-gradient(center, ellipse cover, rgba(100, 100, 100, .9) 40%, rgba(100, 100, 100, .4) 50%, rgba(100, 100, 100, 0) 51%), -webkit-radial-gradient(center, ellipse cover, rgba(100, 100, 100, .9) 40%, rgba(100, 100, 100, .4) 50%, rgba(100, 100, 100, 0) 51%), -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(60, 60, 60)), color-stop(70%, rgb(30, 30, 30)), color-stop(100%, rgb(25, 25, 25))), -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(10, 10, 10)), color-stop(50%, rgb(20, 20, 20)), color-stop(100%, rgb(10, 10, 10))) !important; + background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important; + background-position: 49.5% center, 50.5% center, center center, left top !important; + background-size: 5px 5px, 5px 5px, 3% 100%, 100% 100%; } .documentBar { -- cgit v1.2.3 From ec3f0a848f264f466c3cd5dec60e27a84216d288 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Mon, 16 Jul 2012 10:38:50 -0700 Subject: CSS Fixes for Windows Font size is not inherited in Chrome for Windows, but does inherit in Mac, adding size for avoid inconsistency. --- js/components/layout/document-bar.reel/document-bar.css | 1 + 1 file changed, 1 insertion(+) (limited to 'js/components/layout/document-bar.reel/document-bar.css') diff --git a/js/components/layout/document-bar.reel/document-bar.css b/js/components/layout/document-bar.reel/document-bar.css index d92a3dd6..b86855b7 100755 --- a/js/components/layout/document-bar.reel/document-bar.css +++ b/js/components/layout/document-bar.reel/document-bar.css @@ -80,6 +80,7 @@ POSSIBILITY OF SUCH DAMAGE. text-align: left; float: left; cursor: pointer; + font-size: 11px; } .documentBar .viewicon { -- cgit v1.2.3