diff --git a/css/bootstrap/bootstrap-tooltip-custom.css b/css/bootstrap/bootstrap-tooltip-custom.css new file mode 100644 index 00000000..8b1add44 --- /dev/null +++ b/css/bootstrap/bootstrap-tooltip-custom.css @@ -0,0 +1,8 @@ +.tooltip.in { + opacity: 0.95; + filter: alpha(opacity=95); +} + +.tooltip { + line-height: 20px; +} \ No newline at end of file diff --git a/css/bootstrap/bootstrap.css b/css/bootstrap/bootstrap.css new file mode 100755 index 00000000..724ca00b --- /dev/null +++ b/css/bootstrap/bootstrap.css @@ -0,0 +1,112 @@ +/*! + * Bootstrap v2.1.1 + * + * Copyright 2012 Twitter, Inc + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Designed and built with all the love in the world @twitter by @mdo and @fat. + */ +.clearfix { + *zoom: 1; +} +.clearfix:before, +.clearfix:after { + display: table; + content: ""; + line-height: 0; +} +.clearfix:after { + clear: both; +} +.hide-text { + font: 0/0 a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; +} +.input-block-level { + display: block; + width: 100%; + min-height: 30px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.tooltip { + position: absolute; + z-index: 1030; + display: block; + visibility: visible; + padding: 5px; + font-size: 11px; + opacity: 0; + filter: alpha(opacity=0); +} +.tooltip.in { + opacity: 0.8; + filter: alpha(opacity=80); +} +.tooltip.top { + margin-top: -3px; +} +.tooltip.right { + margin-left: 3px; +} +.tooltip.bottom { + margin-top: 3px; +} +.tooltip.left { + margin-left: -3px; +} +.tooltip-inner { + max-width: 200px; + padding: 3px 8px; + color: #ffffff; + text-align: center; + text-decoration: none; + background-color: #000000; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} +.tooltip.top .tooltip-arrow { + bottom: 0; + left: 50%; + margin-left: -5px; + border-width: 5px 5px 0; + border-top-color: #000000; +} +.tooltip.right .tooltip-arrow { + top: 50%; + left: 0; + margin-top: -5px; + border-width: 5px 5px 5px 0; + border-right-color: #000000; +} +.tooltip.left .tooltip-arrow { + top: 50%; + right: 0; + margin-top: -5px; + border-width: 5px 0 5px 5px; + border-left-color: #000000; +} +.tooltip.bottom .tooltip-arrow { + top: 0; + left: 50%; + margin-left: -5px; + border-width: 0 5px 5px; + border-bottom-color: #000000; +} + +.tooltip { + line-height: 20px; +} diff --git a/css/bootstrap/readme.txt b/css/bootstrap/readme.txt new file mode 100644 index 00000000..2a24c100 --- /dev/null +++ b/css/bootstrap/readme.txt @@ -0,0 +1 @@ +Bootstrap custom build containing only the tooltip component \ No newline at end of file diff --git a/css/preview-animation-section.css b/css/preview-animation-section.css new file mode 100644 index 00000000..d970b9c0 --- /dev/null +++ b/css/preview-animation-section.css @@ -0,0 +1,20 @@ + +.preview-container { + position : absolute; + bottom : 0; right : 0; + height : 256px; + width : 256px; + background : white; + border : 0px Solid black; + border-radius:5px 0px 0px 5px; + box-shadow : 0px 0px 2px rgba(0,0,0,0.2); +} + +.preview-container canvas { + border : 0px Solid transparent; + border-radius:5px 0px 0px 5px; +} + +#preview-fps { + width : 200px; +} \ No newline at end of file diff --git a/css/preview-film-section.css b/css/preview-film-section.css index 0c9a397b..f6836592 100644 --- a/css/preview-film-section.css +++ b/css/preview-film-section.css @@ -1,12 +1,32 @@ +.preview-list-wrapper { + overflow-y: scroll; + position: absolute; + top: 30px; + right:0; + bottom: 0; + left: 0; +} + .preview-list { list-style-type: none; + padding-left: 7px; + padding-right: 7px; } .preview-tile { padding : 10px; overflow: hidden; background-color: gray; + border-radius: 2px; + + -webkit-box-shadow: 0 0 7px 0 rgba(0, 0, 0, 1); + box-shadow: 0 0 7px 0 rgba(0, 0, 0, 1); +} + +.preview-tile:hover { + -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 1); + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 1); } .preview-tile .canvas-container { @@ -15,18 +35,33 @@ .preview-tile .tile-view { float: left; - border: blue 1px solid; + border: #ccc 1px solid; } .preview-tile .tile-action { display: none; float: right; + cursor: pointer; + width: 30px; + height: 30px; + background-color: transparent; + background-repeat: no-repeat; + background-position: 7px 7px; + border: none; } .preview-tile:hover .tile-action { display: block; } +.preview-tile .tile-action.duplicate-frame-action { + background-image: url(../img/actions/duplicate.png); +} + +.preview-tile .tile-action.delete-frame-action { + background-image: url(../img/actions/delete.png); +} + .preview-tile:hover { background-color: lightgray; } diff --git a/css/reset.css b/css/reset.css index 19738719..30a499a0 100644 --- a/css/reset.css +++ b/css/reset.css @@ -17,4 +17,17 @@ ul, li { margin : 0; padding : 0; list-style-type: none; +} + + +/* Force apparition of scrollbars on leopard */ +::-webkit-scrollbar { + -webkit-appearance: none; + width: 10px; +} + +::-webkit-scrollbar-thumb { + border-radius: 4px; + background-color: rgba(180,180,180,.7); + -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); } \ No newline at end of file diff --git a/css/style.css b/css/style.css index cd278e6a..84f908f7 100644 --- a/css/style.css +++ b/css/style.css @@ -1,58 +1,59 @@ + + +/** + * Top menubars + */ .menubar { - position: absolute; - top: 0; left: 0; - width: 100%; height: 30px; + background-color: #fff; + width: 100%; + height: 30px; } -.left-nav { - position:absolute; - top : 30px; bottom : 0; - width : 200px; - overflow-y: scroll; - background : #000; - padding : 10px; + +/** + * Application layout + */ + +.left-section { + position: absolute; + top: 0; + bottom: 0; + width: 220px; + background: #666; } .main-panel { - position:absolute; - top : 30px; bottom : 0; left : 220px; right : 0; - background : #ccc; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 220px; + background: #ccc; } -.preview-container { - position : absolute; - bottom : 0; right : 0; - height : 256px; - width : 256px; - background : white; - border : 0px Solid black; - border-radius:5px 0px 0px 5px; - box-shadow : 0px 0px 2px rgba(0,0,0,0.2); + +/** + * CSS Helpers + */ + +.overlay-total { + position: absolute; + top: 0; + right:0; + bottom: 0; + left: 0; } -.preview-container canvas { - border : 0px Solid transparent; - border-radius:5px 0px 0px 5px; -} -#cursorInfo { - position : fixed; - cursor : default; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} +/** + * Canvases layout + */ -.action-button { - background-color : white; - width : 150px; - display : inline-block; +.canvas { + position: relative; + z-index: 1; } - .canvas-container { position: relative; display: block; @@ -67,42 +68,35 @@ left: 0; } -.canvas { - position: relative; - z-index: 1; -} - -.drawing-canvas { - float: left; -} - -.canvas-overlay { +.canvas.canvas-overlay { position: absolute; top: 0; left: 0; z-index: 10; } +.drawing-canvas { + float: left; +} + .drawing-canvas-container { float: left; } -#preview-fps { - width : 200px; -} + /** * User messages */ .user-message { position: absolute; - top: 2px; - right: 0; + bottom: 0; + left: 25%; background-color: #F9EDBE; padding: 4px 12px; padding-right: 20px; border-top-left-radius: 7px; - border-bottom-left-radius: 7px; + border-top-right-radius: 7px; border-right: 0; color: #222; border: #F0C36D 1px solid; @@ -124,15 +118,3 @@ .user-message .close:hover { color: black; } - -/* Force apparition of scrollbars on leopard */ -::-webkit-scrollbar { - -webkit-appearance: none; - width: 7px; -} - -::-webkit-scrollbar-thumb { - border-radius: 4px; - background-color: rgba(180,180,180,.7); - -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); -} \ No newline at end of file diff --git a/css/tools.css b/css/tools.css index 48abd183..b31b333e 100644 --- a/css/tools.css +++ b/css/tools.css @@ -1,7 +1,7 @@ .tools-group { float: left; height: 30px; - border-right: 1px solid #ccc; + border-left: 1px solid #ccc; padding: 0 3px; } @@ -19,11 +19,11 @@ * Framesheet level actions: */ .tool-icon.tool-save { - background-image: url(../img/tools/icons/save.png); + background-image: url(../img/actions/save.png); } .tool-icon.tool-add-frame { - background-image: url(../img/tools/icons/add-frame.png); + background-image: url(../img/actions/add.png); } @@ -31,47 +31,47 @@ * Tool icons: */ .tool-icon.tool-pen { - background-image: url(../img/tools/icons/pen.png); + background-image: url(../img/tools/pen.png); } .tool-icon.tool-vertical-mirror-pen { - background-image: url(../img/tools/icons/vertical-mirror-pen.png); + background-image: url(../img/tools/vertical-mirror-pen.png); } .tool-icon.tool-paint-bucket { - background-image: url(../img/tools/icons/paint-bucket.png); + background-image: url(../img/tools/paint-bucket.png); } .tool-icon.tool-eraser { - background-image: url(../img/tools/icons/eraser.png); + background-image: url(../img/tools/eraser.png); } .tool-icon.tool-stroke { - background-image: url(../img/tools/icons/stroke.png); + background-image: url(../img/tools/stroke.png); } .tool-icon.tool-rectangle { - background-image: url(../img/tools/icons/rectangle.png); + background-image: url(../img/tools/rectangle.png); } .tool-icon.tool-circle { - background-image: url(../img/tools/cursors/circle.png); + background-image: url(../img/tools/circle.png); } .tool-icon.tool-move { - background-image: url(../img/tools/icons/hand.png); + background-image: url(../img/tools/hand.png); } .tool-icon.tool-rectangle-select { - background-image: url(../img/tools/icons/select.png); + background-image: url(../img/tools/select.png); } .tool-icon.tool-shape-select { - background-image: url(../img/tools/icons/wand.png); + background-image: url(../img/tools/wand.png); } /*.tool-icon.tool-palette { - background-image: url(../img/tools/icons/color-palette.png); + background-image: url(../img/tools/color-palette.png); }*/ /* @@ -79,43 +79,43 @@ */ .tool-paint-bucket .drawing-canvas-container:hover { - cursor: url(../img/tools/cursors/paint-bucket.png) 14 12, pointer; + cursor: url(../img/tools/paint-bucket.png) 14 12, pointer; } .tool-vertical-mirror-pen .drawing-canvas-container:hover { - cursor: url(../img/tools/cursors/vertical-mirror-pen.png) 14 12, pointer; + cursor: url(../img/tools/vertical-mirror-pen.png) 14 12, pointer; } .tool-pen .drawing-canvas-container:hover { - cursor: url(../img/tools/cursors/pen.png) 2 21, pointer; + cursor: url(../img/tools/pen.png) 2 21, pointer; } .tool-eraser .drawing-canvas-container:hover { - cursor: url(../img/tools/cursors/eraser.png) 2 21, pointer; + cursor: url(../img/tools/eraser.png) 2 21, pointer; } .tool-stroke .drawing-canvas-container:hover { - cursor: url(../img/tools/cursors/pen.png) 2 21, pointer; + cursor: url(../img/tools/pen.png) 2 21, pointer; } .tool-rectangle .drawing-canvas-container:hover { - cursor: url(../img/tools/cursors/rectangle.png) 4 21, pointer; + cursor: url(../img/tools/rectangle.png) 4 21, pointer; } .tool-circle .drawing-canvas-container:hover { - cursor: url(../img/tools/cursors/circle.png) 4 21, pointer; + cursor: url(../img/tools/circle.png) 4 21, pointer; } .tool-move .drawing-canvas-container:hover { - cursor: url(../img/tools/cursors/hand.png) 14 12, pointer; + cursor: url(../img/tools/hand.png) 14 12, pointer; } .tool-rectangle-select .drawing-canvas-container:hover { - cursor: url(../img/tools/cursors/select.png) 14 12, pointer; + cursor: url(../img/tools/select.png) 14 12, pointer; } .tool-shape-select .drawing-canvas-container:hover { - cursor: url(../img/tools/cursors/wand.png) 14 12, pointer; + cursor: url(../img/tools/wand.png) 14 12, pointer; } .tool-grid, @@ -136,6 +136,7 @@ .tool-color-picker { padding: 5px 0 0 5px; + height: 25px; cursor : default; } @@ -148,7 +149,7 @@ position : relative; } -#secondary-color-picker { +.secondary-color-picker { top : 8px; } diff --git a/img/tools/icons/add-frame.png b/img/actions/add.png similarity index 100% rename from img/tools/icons/add-frame.png rename to img/actions/add.png diff --git a/img/actions/delete.png b/img/actions/delete.png new file mode 100755 index 00000000..08f24936 Binary files /dev/null and b/img/actions/delete.png differ diff --git a/img/actions/duplicate.png b/img/actions/duplicate.png new file mode 100755 index 00000000..195dc6d6 Binary files /dev/null and b/img/actions/duplicate.png differ diff --git a/img/tools/icons/save.png b/img/actions/save.png similarity index 100% rename from img/tools/icons/save.png rename to img/actions/save.png diff --git a/img/tools/circle.png b/img/tools/circle.png new file mode 100644 index 00000000..a186a26b Binary files /dev/null and b/img/tools/circle.png differ diff --git a/img/tools/color-palette.png b/img/tools/color-palette.png new file mode 100755 index 00000000..6e6e8521 Binary files /dev/null and b/img/tools/color-palette.png differ diff --git a/img/tools/eraser.png b/img/tools/eraser.png new file mode 100755 index 00000000..e0d4b020 Binary files /dev/null and b/img/tools/eraser.png differ diff --git a/img/tools/hand.png b/img/tools/hand.png new file mode 100644 index 00000000..7b47be2d Binary files /dev/null and b/img/tools/hand.png differ diff --git a/img/tools/mirror-pen.png b/img/tools/mirror-pen.png new file mode 100644 index 00000000..f5148946 Binary files /dev/null and b/img/tools/mirror-pen.png differ diff --git a/img/tools/paint-bucket.png b/img/tools/paint-bucket.png new file mode 100755 index 00000000..f82a8865 Binary files /dev/null and b/img/tools/paint-bucket.png differ diff --git a/img/tools/pen.png b/img/tools/pen.png new file mode 100755 index 00000000..0bfecd50 Binary files /dev/null and b/img/tools/pen.png differ diff --git a/img/tools/rectangle.png b/img/tools/rectangle.png new file mode 100755 index 00000000..d28dc6b1 Binary files /dev/null and b/img/tools/rectangle.png differ diff --git a/img/tools/select.png b/img/tools/select.png new file mode 100644 index 00000000..bf2b724d Binary files /dev/null and b/img/tools/select.png differ diff --git a/img/tools/stroke.png b/img/tools/stroke.png new file mode 100755 index 00000000..0bfecd50 Binary files /dev/null and b/img/tools/stroke.png differ diff --git a/img/tools/vertical-mirror-pen.png b/img/tools/vertical-mirror-pen.png new file mode 100644 index 00000000..cf2157d8 Binary files /dev/null and b/img/tools/vertical-mirror-pen.png differ diff --git a/img/tools/wand.png b/img/tools/wand.png new file mode 100755 index 00000000..44ccbf81 Binary files /dev/null and b/img/tools/wand.png differ diff --git a/index.html b/index.html index 0e0f466a..e6979f6f 100644 --- a/index.html +++ b/index.html @@ -12,57 +12,51 @@ + + - +
- - - -