diff --git a/css/preview-animation-section.less b/css/preview-animation-section.less deleted file mode 100644 index dd3c93fc..00000000 --- a/css/preview-animation-section.less +++ /dev/null @@ -1,17 +0,0 @@ - - -.preview-container { - background : white; - border : 0px Solid black; - border-radius:5px 0px 0px 5px; - box-shadow : 0px 0px 2px rgba(0,0,0,0.2); - font-size: 0; -} - -.preview-container canvas { - border : 0px Solid transparent; -} - -#preview-fps { - width : 200px; -} diff --git a/css/preview-film-section.less b/css/preview-film-section.less index 56a158cb..bd80b6d7 100644 --- a/css/preview-film-section.less +++ b/css/preview-film-section.less @@ -98,6 +98,11 @@ border-style: solid; } + +/** + * Drag n drop styles. + */ + .preview-tile.ui-draggable-dragging { opacity: 0.3; } diff --git a/css/style.less b/css/style.less index 0e82f0c1..13ab44e9 100644 --- a/css/style.less +++ b/css/style.less @@ -3,6 +3,7 @@ body { background: -webkit-radial-gradient(circle, #000, #373737); } + /** * Application layout */ @@ -46,7 +47,6 @@ body { .right-column { display: inline-block; vertical-align: top; - background: blue; margin-left: 10px; } @@ -81,6 +81,39 @@ body { z-index: 10; } + +/** + * Animated preview styles. + */ + +.preview-container { + border : 0px Solid black; + border-radius:5px 0px 0px 5px; + box-shadow : 0px 0px 2px rgba(0,0,0,0.2); + font-size: 0; +} + +.preview-container canvas { + border : 0px Solid transparent; +} + +.display-fps { + float: left; + color: #aaa; + font-size: 12px; + min-width: 55px; + vertical-align: bottom; + line-height: 24px; +} + +.range-fps { + overflow: hidden; +} + +.application-actions { + margin-top: 35px; +} + /** * User messages */ diff --git a/css/tools.less b/css/tools.less index 956822f0..86fbc40b 100644 --- a/css/tools.less +++ b/css/tools.less @@ -17,8 +17,8 @@ margin: 1px; background-color: rgba(200,200,200, .1); background-repeat: no-repeat; - background-position: 9px 9px; - background-size: 28px; + background-position: 12px 12px; + background-size: 24px 24px; } .tool-icon.selected { @@ -41,7 +41,9 @@ } .tool-icon.tool-vertical-mirror-pen { - background-image: url(../img/tools_legacy/vertical-mirror-pen.png); + background-image: url(../img/tools/mirror.png); + background-position: 0px 10px; + background-size: 38px 27px; } .tool-icon.tool-paint-bucket { @@ -49,15 +51,17 @@ } .tool-icon.tool-eraser { - background-image: url(../img/tools_legacy/eraser.png); + background-image: url(../img/tools/eraser.png); } .tool-icon.tool-stroke { - background-image: url(../img/tools_legacy/stroke.png); + background-image: url(../img/tools/stroke.png); } .tool-icon.tool-rectangle { - background-image: url(../img/tools_legacy/rectangle.png); + background-image: url(../img/tools/rectangle.png); + background-position: 12px 14px; + background-size: 24px 20px; } .tool-icon.tool-circle { @@ -66,10 +70,14 @@ .tool-icon.tool-move { background-image: url(../img/tools/hand.png); + background-position: 12px 12px; + background-size: 24px 24px; } .tool-icon.tool-rectangle-select { - background-image: url(../img/tools_legacy/select.png); + background-image: url(../img/tools/rectangle_selection.png); + background-position: 12px 14px; + background-size: 24px 20px; } .tool-icon.tool-shape-select { @@ -78,6 +86,8 @@ .tool-icon.tool-colorpicker { background-image: url(../img/tools/eyedropper.png); + background-position: 12px 12px; + background-size: 23px 23px; } /* diff --git a/img/transparent_background.png b/img/light_canvas_background.png old mode 100755 new mode 100644 similarity index 100% rename from img/transparent_background.png rename to img/light_canvas_background.png diff --git a/img/tools/eraser-dark.png b/img/tools/eraser-dark.png new file mode 100644 index 00000000..05b49d61 Binary files /dev/null and b/img/tools/eraser-dark.png differ diff --git a/img/tools/eraser.png b/img/tools/eraser.png new file mode 100644 index 00000000..2df7c84b Binary files /dev/null and b/img/tools/eraser.png differ diff --git a/img/tools/mirror.png b/img/tools/mirror.png new file mode 100644 index 00000000..272a37c4 Binary files /dev/null and b/img/tools/mirror.png differ diff --git a/img/tools/rectangle-dark.png b/img/tools/rectangle-dark.png new file mode 100644 index 00000000..37487c8e Binary files /dev/null and b/img/tools/rectangle-dark.png differ diff --git a/img/tools/rectangle.png b/img/tools/rectangle.png index a5a4ffe6..2898f4f8 100644 Binary files a/img/tools/rectangle.png and b/img/tools/rectangle.png differ diff --git a/img/tools/rectangle_selection-dark.png b/img/tools/rectangle_selection-dark.png new file mode 100644 index 00000000..3b5b827d Binary files /dev/null and b/img/tools/rectangle_selection-dark.png differ diff --git a/img/tools/rectangle_selection.png b/img/tools/rectangle_selection.png new file mode 100644 index 00000000..af8c635d Binary files /dev/null and b/img/tools/rectangle_selection.png differ diff --git a/img/tools/stroke.png b/img/tools/stroke.png new file mode 100644 index 00000000..80aad556 Binary files /dev/null and b/img/tools/stroke.png differ diff --git a/index.html b/index.html index 1b87fccc..86869ee1 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,6 @@ - @@ -64,18 +63,22 @@
- - 12 FPS +
+ 12 FPS + +
+ + -