From 24186d5aec2672b9611acb8df0b37d1e15e19148 Mon Sep 17 00:00:00 2001
From: jdescottes <julian.descottes@gmail.com>
Date: Fri, 4 Jul 2014 19:17:02 +0200
Subject: [PATCH 1/6] Added keyboard shortcuts

---
 src/js/controller/AnimatedPreviewController.js | 7 +++++++
 src/js/controller/DrawingController.js         | 9 +++++----
 src/js/controller/LayersListController.js      | 7 +++++++
 src/js/service/keyboard/CheatsheetService.js   | 4 +++-
 src/js/utils/UserSettings.js                   | 6 ++++--
 5 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/js/controller/AnimatedPreviewController.js b/src/js/controller/AnimatedPreviewController.js
index 959f486e..28b79e94 100644
--- a/src/js/controller/AnimatedPreviewController.js
+++ b/src/js/controller/AnimatedPreviewController.js
@@ -19,6 +19,8 @@
     this.updateZoom_();
     $.subscribe(Events.FRAME_SIZE_CHANGED, this.onFrameSizeChange_.bind(this));
     $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
+
+    pskl.app.shortcutService.addShortcut('alt+O', this.toggleOnionSkin_.bind(this));
   };
 
   ns.AnimatedPreviewController.prototype.onUserSettingsChange_ = function () {
@@ -122,4 +124,9 @@
     containerEl.style.marginLeft = ((PREVIEW_SIZE - width) / 2) + "px";
     containerEl.style.marginRight = ((PREVIEW_SIZE - width) / 2) + "px";
   };
+
+  ns.AnimatedPreviewController.prototype.toggleOnionSkin_ = function () {
+    var currentValue = pskl.UserSettings.get(pskl.UserSettings.ONION_SKIN);
+    pskl.UserSettings.set(pskl.UserSettings.ONION_SKIN, !currentValue);
+  };
 })();
\ No newline at end of file
diff --git a/src/js/controller/DrawingController.js b/src/js/controller/DrawingController.js
index 9ccdb1c4..7c6fec4e 100644
--- a/src/js/controller/DrawingController.js
+++ b/src/js/controller/DrawingController.js
@@ -113,7 +113,7 @@
   ns.DrawingController.prototype.onUserSettingsChange_ = function (evt, settingsName, settingsValue) {
     if(settingsName == pskl.UserSettings.SHOW_GRID) {
       console.warn('DrawingController:onUserSettingsChange_ not implemented !');
-    } else if (settingsName == pskl.UserSettings.OVERLAY) {
+    } else if (settingsName == pskl.UserSettings.ONION_SKIN || settingsName == pskl.UserSettings.LAYER_PREVIEW) {
       this.onionSkinRenderer.clear();
       this.onionSkinRenderer.flush();
       this.layersRenderer.clear();
@@ -319,10 +319,11 @@
       this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(currentFrame);
     }
 
-    var overlaySetting = pskl.UserSettings.get(pskl.UserSettings.OVERLAY);
-    if (overlaySetting === Constants.OVERLAY_ONION_SKIN) {
+    if (pskl.UserSettings.get(pskl.UserSettings.ONION_SKIN)) {
       this.onionSkinRenderer.render();
-    } else if (overlaySetting === Constants.OVERLAY_LAYER_PREVIEW) {
+    }
+
+    if (pskl.UserSettings.get(pskl.UserSettings.LAYER_PREVIEW)) {
       this.layersRenderer.render();
     }
 
diff --git a/src/js/controller/LayersListController.js b/src/js/controller/LayersListController.js
index 27246926..b851e0e3 100644
--- a/src/js/controller/LayersListController.js
+++ b/src/js/controller/LayersListController.js
@@ -14,6 +14,8 @@
 
     $.subscribe(Events.PISKEL_RESET, this.renderLayerList_.bind(this));
 
+    pskl.app.shortcutService.addShortcut('alt+L', this.toggleLayerPreview_.bind(this));
+
     this.renderLayerList_();
   };
 
@@ -69,4 +71,9 @@
       this.piskelController.removeCurrentLayer();
     }
   };
+
+  ns.LayersListController.prototype.toggleLayerPreview_ = function () {
+    var currentValue = pskl.UserSettings.get(pskl.UserSettings.LAYER_PREVIEW);
+    pskl.UserSettings.set(pskl.UserSettings.LAYER_PREVIEW, !currentValue);
+  };
 })();
\ No newline at end of file
diff --git a/src/js/service/keyboard/CheatsheetService.js b/src/js/service/keyboard/CheatsheetService.js
index 58dd4a07..f0952e76 100644
--- a/src/js/service/keyboard/CheatsheetService.js
+++ b/src/js/service/keyboard/CheatsheetService.js
@@ -103,7 +103,9 @@
       this.toDescriptor_('N', 'Create new frame'),
       this.toDescriptor_('shift + N', 'Duplicate selected frame'),
       this.toDescriptor_('shift + ?', 'Open/Close this popup'),
-      this.toDescriptor_('alt + P', 'Open the Palette Manager')
+      this.toDescriptor_('alt + P', 'Open the Palette Manager'),
+      this.toDescriptor_('alt + O', 'Toggle Onion Skin'),
+      this.toDescriptor_('alt + L', 'Toggle Layer Preview')
     ];
 
     this.initMarkupAbstract_(descriptors, '.cheatsheet-misc-shortcuts');
diff --git a/src/js/utils/UserSettings.js b/src/js/utils/UserSettings.js
index f9cd3a5c..82f4aa5a 100644
--- a/src/js/utils/UserSettings.js
+++ b/src/js/utils/UserSettings.js
@@ -6,14 +6,16 @@
     CANVAS_BACKGROUND : 'CANVAS_BACKGROUND',
     SELECTED_PALETTE : 'SELECTED_PALETTE',
     TILED_PREVIEW : 'TILED_PREVIEW',
-    OVERLAY : 'OVERLAY',
+    ONION_SKIN : 'ONION_SKIN',
+    LAYER_PREVIEW : 'LAYER_PREVIEW',
 
     KEY_TO_DEFAULT_VALUE_MAP_ : {
       'GRID_WIDTH' : 0,
       'CANVAS_BACKGROUND' : 'lowcont-dark-canvas-background',
       'SELECTED_PALETTE' : Constants.CURRENT_COLORS_PALETTE_ID,
       'TILED_PREVIEW' : false,
-      'OVERLAY' : Constants.OVERLAY_ONION_SKIN
+      'ONION_SKIN' : false,
+      'LAYER_PREVIEW' : true
     },
 
     /**

From a77168986aa42390175a264f2edc73e4960eae6e Mon Sep 17 00:00:00 2001
From: jdescottes <julian.descottes@gmail.com>
Date: Sat, 5 Jul 2014 11:27:11 +0200
Subject: [PATCH 2/6] Enhancement : Shortcuts for onion kin + layer prev

Added 2 new icons :
- Animated Preview Panel : toggle onion skin
- Layers Toolbox : toggle layer preview

Added an icon font generated with icomoon.

SVGs for both icons have been made under Inkscape and are kept under
misc/svg.

All reference SVGs have been moved to misc/svg.

Added 2 keyboard shortcuts for toggling onion skin / layer preview :
- alt L : toggle layer preview
- alt O : toggle onion skin
---
 misc/icons/SVG/eye.svg                        |  68 ++++++++++++
 misc/icons/{ => SVG}/import-icon.svg          |   0
 misc/icons/SVG/onion.svg                      |  99 ++++++++++++++++++
 misc/icons/{ => SVG}/swap-arrow-square.svg    |   0
 misc/icons/{ => SVG}/swap-arrow.svg           |   0
 src/css/font-icon.css                         |  33 ++++++
 src/css/fonts/piskel.eot                      | Bin 0 -> 2320 bytes
 src/css/fonts/piskel.svg                      |  12 +++
 src/css/fonts/piskel.ttf                      | Bin 0 -> 2156 bytes
 src/css/fonts/piskel.woff                     | Bin 0 -> 1692 bytes
 src/css/style.css                             |  51 ---------
 src/css/toolbox-animated-preview.css          |  74 +++++++++++++
 src/css/toolbox-layers-list.css               |  22 ++++
 .../controller/AnimatedPreviewController.js   |  45 +++++---
 src/js/controller/LayersListController.js     |  24 ++++-
 src/js/utils/UserSettings.js                  |   8 +-
 src/piskel-style-list.js                      |   2 +
 src/templates/layers-list.html                |   7 +-
 src/templates/preview.html                    |   4 +
 19 files changed, 380 insertions(+), 69 deletions(-)
 create mode 100644 misc/icons/SVG/eye.svg
 rename misc/icons/{ => SVG}/import-icon.svg (100%)
 create mode 100644 misc/icons/SVG/onion.svg
 rename misc/icons/{ => SVG}/swap-arrow-square.svg (100%)
 rename misc/icons/{ => SVG}/swap-arrow.svg (100%)
 create mode 100644 src/css/font-icon.css
 create mode 100644 src/css/fonts/piskel.eot
 create mode 100644 src/css/fonts/piskel.svg
 create mode 100644 src/css/fonts/piskel.ttf
 create mode 100644 src/css/fonts/piskel.woff
 create mode 100644 src/css/toolbox-animated-preview.css

diff --git a/misc/icons/SVG/eye.svg b/misc/icons/SVG/eye.svg
new file mode 100644
index 00000000..9b7ed589
--- /dev/null
+++ b/misc/icons/SVG/eye.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="300"
+   height="140.00085"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="eye.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.98994949"
+     inkscape:cx="-6.0052729"
+     inkscape:cy="93.159467"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1148"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-223.21875,-469.24915)">
+    <path
+       style="fill:#ffffff;fill-opacity:1;stroke:none"
+       d="m 373.21875,469.25 c -63.15236,-0.28299 -150,70 -150,70 0,0 78.75568,70 150,70 62.82091,0 150,-70 150,-70 0,0 -87.47199,-69.71981 -150,-70 z m -1.5,22.3125 c 27.44855,0 49.6875,22.23895 49.6875,49.6875 0,27.44855 -22.23895,49.6875 -49.6875,49.6875 C 344.2702,590.9375 322,568.69855 322,541.25 c 0,-27.44855 22.2702,-49.6875 49.71875,-49.6875 z m 0.0312,18.34375 c -17.85254,0 -32.34375,14.49121 -32.34375,32.34375 0,17.85254 14.49121,32.3125 32.34375,32.3125 17.85254,0 32.3125,-14.45996 32.3125,-32.3125 0,-17.85254 -14.45996,-32.34375 -32.3125,-32.34375 z"
+       id="path2987"
+       inkscape:export-filename="C:\Development\git\piskel\misc\icons\eye.png"
+       inkscape:export-xdpi="28.799999"
+       inkscape:export-ydpi="28.799999"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>
diff --git a/misc/icons/import-icon.svg b/misc/icons/SVG/import-icon.svg
similarity index 100%
rename from misc/icons/import-icon.svg
rename to misc/icons/SVG/import-icon.svg
diff --git a/misc/icons/SVG/onion.svg b/misc/icons/SVG/onion.svg
new file mode 100644
index 00000000..7ef63a84
--- /dev/null
+++ b/misc/icons/SVG/onion.svg
@@ -0,0 +1,99 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="484.83377"
+   height="430.80322"
+   id="svg3775"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="New document 3">
+  <defs
+     id="defs3777" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.04375"
+     inkscape:cx="-429.81362"
+     inkscape:cy="-202.97901"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1148"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <metadata
+     id="metadata3780">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-108.38875,-334.08796)">
+    <g
+       id="g4409">
+      <g
+         id="g4402" />
+      <g
+         transform="translate(0,0.82903262)"
+         id="g4395">
+        <path
+           style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#000000;fill-opacity:1;stroke:none;stroke-width:25;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
+           d="m 395.27679,333.25893 -27.75,24.625 -1.65625,-9 -15.87054,4.59375 0,30.6875 1.02679,21.75 16.5625,-14.6875 13.6875,-12.15625 c -0.38933,5.52995 -0.57204,11.36571 -0.1875,17.84375 0.60884,10.25666 3.42535,19.47486 9.03125,26.6875 5.6059,7.21264 13.15778,11.83264 21.53125,15.65625 16.74693,7.64722 37.6168,20.19024 63.19196,41.4465 48.42535,40.24771 54.41585,60.33492 63.14228,95.72811 8.30827,46.0064 -4.89609,79.1393 -23.94924,107.24539 -13.61329,20.08154 -30.46397,37.90172 -67.50554,45.41482 -37.04157,7.5131 -71.72672,9.9375 -96.53125,9.9375 l 0,25 c 26.40206,0 62.17269,-2.46078 101.5,-10.4375 39.32731,-7.97672 78.11592,-20.77325 101.8125,-45.5625 25.65093,-26.83371 50.16969,-75.46693 35.5,-151.5 l -0.0312,-0.125 -0.0312,-0.125 c -6.53497,-30.32511 -26.37349,-75.86993 -103.9375,-109.59375 -32.08342,-13.94946 -49.48883,-22.95257 -62.57589,-28.92857 -6.54353,-2.988 -10.31288,-6.85833 -12.36607,-9.5 -2.05319,-2.64167 -3.40095,-5.87935 -3.8125,-12.8125 -0.92607,-15.60085 1.34241,-27.46751 3.71875,-35.3125 2.37634,-7.84499 4.375,-10.875 4.375,-10.875 l -18.875,-16 z"
+           id="path3783-2"
+           inkscape:connector-curvature="0"
+           sodipodi:nodetypes="ccccccccsssscssccsscccsssssccc" />
+        <path
+           style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#000000;fill-opacity:1;stroke:none;stroke-width:25;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
+           d="m 368.02679,382.44643 c 0,0 -18.02679,-4.71234 -18.02679,1.3125 0,33.38646 -0.45698,39.28362 10.99554,62.875 11.45252,23.59138 26.22845,47.86253 48.53571,68.45982 42.18558,38.95183 38.76978,44.87254 45.77232,64.91071 2.57793,7.37689 3.66466,24.51253 1.875,37.96875 -1.78965,13.45623 -6.8081,31.21802 -13.40625,41.3125 -10.36811,15.86211 -18.71831,32.07642 -38.55357,43.09375 C 384.4983,713.88847 366.62548,716.375 350,716.375 l 0,25 c 20.82486,0 44.52967,-5.01706 69.5625,-15.125 25.03283,-10.10794 49.12742,-25.27054 63.71875,-47.59375 9.77369,-14.95272 20.06105,-37.72017 22.33202,-55.91561 2.27097,-18.19544 6.78209,-33.89274 -5.08281,-58.40387 -18.26325,-37.72918 -42.54947,-49.06002 -72.19845,-74.15863 -18.35479,-15.5378 -34.85805,-33.83125 -44.86772,-54.45046 -10.00967,-20.61921 -14.81706,-41.55822 -15.4375,-53.28125 z"
+           id="path3783-9-4-2"
+           inkscape:connector-curvature="0"
+           sodipodi:nodetypes="csssszssccssssssc" />
+        <path
+           style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#000000;fill-opacity:1;stroke:none;stroke-width:25;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
+           d="M 364.71429,398.50893 350,399.85268 c 0.74677,14.10988 0,43.14662 0,70.71875 0,13.09078 2.17726,28.99404 4.22321,39.97321 3.9423,21.15552 10.51352,34.8833 14.63393,48.16965 3.27485,10.5598 6.94665,25.34012 9.3884,31.02232 6.61244,15.3878 7.52886,34.1921 0.75446,55.84375 -6.86056,21.92704 -17.55684,42.94479 -35.42857,49.84375 L 350,716.625 c 25.86119,-9.9831 62.03992,-38.1333 71.93512,-69.75936 8.9188,-28.50537 3.28613,-54.26844 -4.84375,-73.1875 -4.92941,-11.47123 -9.61575,-19.37277 -14.86607,-28.9375 -6.46007,-11.76857 -20.1885,-26.52209 -24.11895,-38.53817 -3.57466,-10.92835 -7.82736,-24.14439 -8.92331,-37.66229 -2.1919,-27.03581 -3.63369,-54.77948 -4.46875,-70.03125 z"
+           id="path3783-9-4-4-8-8"
+           inkscape:connector-curvature="0"
+           sodipodi:nodetypes="ccsssssccsssssc" />
+      </g>
+    </g>
+    <path
+       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#000000;fill-opacity:1;stroke:none;stroke-width:25;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
+       d="m 306.33447,334.11887 27.75,24.625 1.65625,-9 15.87054,4.59375 0,30.6875 -1.02679,21.75 -16.5625,-14.6875 -13.6875,-12.15625 c 0.38933,5.52995 0.57204,11.36571 0.1875,17.84375 -0.60884,10.25666 0.61526,20.48501 -4.99064,27.69765 -5.6059,7.21264 -12.14763,16.88341 -20.5211,20.70702 -16.74693,7.64722 -36.60664,20.19024 -62.1818,41.4465 -48.42535,40.24771 -47.34479,51.24354 -56.07122,86.63673 -3.25751,47.01655 -5.92183,46.3581 4.75635,78.96112 6.45302,19.70261 22.38275,38.91187 59.42432,56.52649 34.13302,16.23151 85.86885,30.14056 110.67338,30.14056 l 0,25 c -26.40206,0 -62.17269,-2.46078 -101.5,-10.4375 -39.32731,-7.97672 -78.11592,-20.77325 -101.8125,-45.5625 -25.65093,-26.83371 -50.169693,-75.46693 -35.5,-151.5 l 0.0312,-0.125 0.0312,-0.125 c 6.53497,-30.32511 26.37349,-75.86993 103.9375,-109.59375 32.08342,-13.94946 49.48883,-22.95257 62.57589,-28.92857 6.54353,-2.988 10.31288,-6.85833 12.36607,-9.5 2.05319,-2.64167 3.40095,-5.87935 3.8125,-12.8125 0.92607,-15.60085 -1.34241,-27.46751 -3.71875,-35.3125 -2.37634,-7.84499 -4.375,-10.875 -4.375,-10.875 l 18.875,-16 z"
+       id="path3783-2-4"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccccsssscssccsscccsssssccc" />
+    <path
+       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#000000;fill-opacity:1;stroke:none;stroke-width:25;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
+       d="m 343.97613,380.44701 9.00001,12.77232 c -0.74677,14.10988 0,43.14662 0,70.71875 0,13.09078 3.53703,30.42261 1.49108,41.40178 -3.9423,21.15552 -3.37067,28.45473 -7.49108,41.74108 -3.27485,10.5598 -6.94665,28.91155 -9.3884,34.59375 -6.61244,15.3878 -8.24315,50.62067 -1.46875,72.27232 6.86056,21.92704 11.12828,50.08764 21.85715,66.27232 l 3.98985,41.15013 C 338.24766,729.2435 314.3133,692.32754 304.4181,660.70148 c -8.9188,-28.50537 -8.28613,-78.55416 -0.15625,-97.47322 4.92941,-11.47123 9.61575,-22.9442 14.86607,-32.50893 6.46007,-11.76857 10.13774,-23.49163 13.05804,-36.51786 2.51528,-11.21964 6.93976,-29.49102 8.03571,-43.00892 2.1919,-27.03581 2.9194,-55.49377 3.75446,-70.74554 z"
+       id="path3783-9-4-4-8-8-7"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccsssssccsssssc" />
+  </g>
+</svg>
diff --git a/misc/icons/swap-arrow-square.svg b/misc/icons/SVG/swap-arrow-square.svg
similarity index 100%
rename from misc/icons/swap-arrow-square.svg
rename to misc/icons/SVG/swap-arrow-square.svg
diff --git a/misc/icons/swap-arrow.svg b/misc/icons/SVG/swap-arrow.svg
similarity index 100%
rename from misc/icons/swap-arrow.svg
rename to misc/icons/SVG/swap-arrow.svg
diff --git a/src/css/font-icon.css b/src/css/font-icon.css
new file mode 100644
index 00000000..d0031924
--- /dev/null
+++ b/src/css/font-icon.css
@@ -0,0 +1,33 @@
+@font-face {
+  font-family: 'piskel';
+  src:url('fonts/piskel.eot?-3olv93');
+  src:url('fonts/piskel.eot?#iefix-3olv93') format('embedded-opentype'),
+    url('fonts/piskel.woff?-3olv93') format('woff'),
+    url('fonts/piskel.ttf?-3olv93') format('truetype'),
+    url('fonts/piskel.svg?-3olv93#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^="piskel-icon-"], [class*=" piskel-icon-"] {
+  font-family: 'piskel';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.piskel-icon-eye:before {
+  content: "\e600";
+}
+
+.piskel-icon-onion:before {
+  content: "\e601";
+}
+
diff --git a/src/css/fonts/piskel.eot b/src/css/fonts/piskel.eot
new file mode 100644
index 0000000000000000000000000000000000000000..9779c3932551c2192d36d78b1859dca560ac23cb
GIT binary patch
literal 2320
zcmaJ@O>9(E6h7zPcklcEpZ8`uoz6^$wxbkkr?wqX(?BtjCM5+-(UmxqLXnm>fC;!D
zCc4m=7}h3k#JC}GMdCs?B${YqLZYcV6A}{^uH3N0)N|jPQl=nx-n;kwpYPl^x#tEZ
zz^Va&z@T>^+(adrKi(@>w)wd8%l9Ac)&Y2M0hVAL*63Y_OJv}|Nmz#S@II_U2QHH&
zg;ONC3|Gij+0>y0V=$iC?)E03N@&A}z+rsh&6g&O#-r~@@&mo^F0FMo%8S3gO-2>s
z=g)VpY|t7Ize1~Ve)amfdxab4h$p%BXl1!`mN%jnfLta0^a=^&s79&f*TfI4tX;jP
ze+q*5pNTK6t}k`iH}E;}_lft`I@dP9!Ow{Qhxq!X&f4<pr8|EB=ql&IjrA*62`3F>
zUg?1|z?&)_&Lg3Kquuo(^ufo<?umgEqIVnucz}3+i+*^YqEVP93=|L9hf^5~lvimB
zpuquJEigz&>7o7rxBlJQA{h`38I4<im9?%%rl1J{$;!{7<TCnGv=3$}ck(`8Mo6|c
zwK?1*952EQ1#NgNnXIyQIz#IiYwFWgmJ~dukMXI=8CFa@o)mKZl+v@|x9;A0@64A!
zo;h{*tBV(J-CdL;v#o)F*6hgkS{kj#aecJZH(HOP`e+|+E_99~o;ZD?J1uk;@FZ5p
zj|?{tPgD>q6Nj6_N5-o-i_zfTa&cd+fLN&QE0*^TMp<bB#MUNzm2kfUx8ZM`!%qmi
z-qe#~yOIGcR(bbH3B1SY*^^Anu=Wh6r`a0g&FyDuM2XpCtErEVp-d`R#cg*cso<yF
z+cP*hvg7Y#A(aKSE!%Ebkjkm3lHnNcn9?pbi|t~fHwk71J<MZgGeyb$Urrjdvl+a0
zE5n<ko|?|Yt#%D%1yf3hg>8SPd~2wjaB@1g?|R|lAd7K`an704b#8=F;v{9?)Hs^1
zDZRKa2y4}{?ey0Mqi|2H-?mlN+^y{2<E4=&x!@eTgCR1O)^$VYLI}qTtvI$wO>*R#
z;KH<A(~JV&Fbhd)+i4u?nyCwN(}WSHCD-shM-x&oEmAR=QV50wk6uD)*siWS<x(s(
z#_1KBMnc0tRe{R$Mph58OiHO4L6q2O(UF=8#I3Lt`a{F@ZZ(a%s>bD#d;L^RF?_lj
z#B{%%SH~Ek$$=<5Lh3@ZlE~N8py(MO+6uy%J8TZva;RKaTS1l6o^VNq+;n^^s+7w?
zVW?Jd%+Rwb7{@B3Vz}jow$s>mpy3TR8iBOPD=VJ1Pvg34nQ9v`euXk{KlXjgPLhHd
zrh#j6+i|7zTu0MA&lW=0u*x-E6E=MZ8HSNz1VL<v#W=EcKL{=LAw<k%oc1}=acyA*
zt}8X$GMOF(k!3}J!~3)_>GzycS}>^wLlcf;OJO<WQA%R{SZ|F6eGDm8je!~UrD>3q
z!q7LvFfa(bd`6AF{(m*L{T!L=I>K^oOA5!fxSo_smX##2G454sRnHw99594snL=1L
zA#+`ikQF0+`|P{@`)^;I_FsDlcHS57{kig!Iui4>d&1En|F~_^A)?M{>M?W5j^>>c
zQwgYH<V!v)rLts)RBxbR(Ro>g57-T&l~Q8Xg^1eSm`Ow}_1kWIBs%v{mL44K$~n<P
zU0Nf0u}ceTzFwD>pu<F$w%`S7+tficlO!r;PUkUmI**ytdCZ*7W9GCZ--BJ>JZ5i0
ze|F>VvAM9czP7%8Y1ciX_YTqHKt(UpEkfNWI&hWNvrvaKaGmD4>@ITb@m++FJ$L*E
D_eSY0

literal 0
HcmV?d00001

diff --git a/src/css/fonts/piskel.svg b/src/css/fonts/piskel.svg
new file mode 100644
index 00000000..78f687c3
--- /dev/null
+++ b/src/css/fonts/piskel.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="512">
+<font-face units-per-em="512" ascent="480" descent="-32" />
+<missing-glyph horiz-adv-x="512" />
+<glyph unicode="&#x20;" d="" horiz-adv-x="256" />
+<glyph unicode="&#xe600;" d="M548.568 469.33c-230.956 1.035-548.568-255.999-548.568-255.999s288.019-255.998 548.568-255.998c229.744 0 548.568 255.998 548.568 255.998s-319.896 254.974-548.568 255.999zM543.082 387.731c100.382 0 181.713-81.33 181.713-181.713s-81.331-181.713-181.713-181.713c-100.382 0-181.827 81.331-181.827 181.713s81.445 181.713 181.827 181.713zM543.197 320.645c-65.289 0-118.285-52.996-118.285-118.285s52.996-118.171 118.285-118.171c65.289 0 118.17 52.882 118.17 118.171s-52.882 118.285-118.17 118.285z" horiz-adv-x="1097" />
+<glyph unicode="&#xe601;" d="M340.96 469.333l-32.981-29.267-1.969 10.697-18.862-5.459v-36.471l1.221-25.849 35.952 31.903c-0.462-6.572-0.68-13.508-0.223-21.207 0.724-12.19 4.071-23.146 10.733-31.718s15.637-14.063 25.589-18.607c19.904-9.088 44.707-23.995 75.102-49.258 57.553-47.833 64.672-71.707 75.043-113.771 9.874-54.678-5.819-94.055-28.463-127.459-16.179-23.866-36.205-45.046-80.229-53.974s-85.245-11.81-114.725-11.81v-29.712c31.378 0 73.891 2.924 120.63 12.404s92.839 24.688 121.002 54.15c30.486 31.892 59.625 89.691 42.191 180.054l-0.074 0.297c-7.766 36.041-31.345 90.17-123.528 130.25-38.13 16.578-58.817 27.279-74.37 34.381-7.777 3.551-12.257 8.151-14.697 11.29s-4.042 6.988-4.531 15.228c-1.101 18.541 1.596 32.644 4.42 41.968s5.2 12.925 5.2 12.925l-22.433 19.015zM308.574 410.875c0 0-21.425 5.601-21.425-1.56 0-39.679-0.543-46.688 13.068-74.726s31.172-56.883 57.683-81.363c50.137-46.294 46.077-53.33 54.399-77.145 3.064-8.767 4.356-29.132 2.228-45.125s-8.091-37.102-15.933-49.099c-12.322-18.852-22.247-38.122-45.82-51.216-24.626-13.678-45.867-16.634-65.626-16.634v-29.712c24.75 0 52.923 5.962 82.673 17.976s58.387 30.034 75.728 56.564c11.616 17.771 23.842 44.829 26.541 66.454s8.060 40.281-6.041 69.411c-21.705 44.841-50.569 58.307-85.806 88.136-21.815 18.466-41.428 40.207-53.325 64.713s-17.61 49.391-18.347 63.324zM304.637 391.785l-17.488-1.597c0.887-16.769 0-51.279 0-84.047 0-15.558 2.587-34.459 5.019-47.508 4.685-25.143 12.495-41.458 17.392-57.248 3.892-12.55 8.256-30.116 11.158-36.87 7.858-18.288 8.948-40.637 0.897-66.369-8.154-26.060-20.866-51.039-42.106-59.238l7.64-25.197c30.736 11.865 73.733 45.32 85.493 82.907 10.6 33.878 3.906 64.497-5.757 86.981-5.858 13.634-11.428 23.024-17.668 34.392-7.678 13.987-23.993 31.521-28.665 45.802-4.248 12.988-9.303 28.695-10.605 44.761-2.605 32.132-4.319 65.104-5.311 83.231zM235.254 469.297l32.98-29.267 1.969 10.697 18.862-5.459v-36.471l-1.221-25.85-35.952 31.903c0.463-6.572 0.68-13.508 0.223-21.207-0.724-12.19 0.731-24.346-5.931-32.918s-14.437-20.066-24.389-24.61c-19.904-9.088-43.506-23.995-73.901-49.258-57.553-47.833-56.268-60.902-66.639-102.966-3.871-55.878-7.038-55.096 5.653-93.844 7.669-23.416 26.602-46.246 70.624-67.18 40.566-19.291 102.053-35.822 131.533-35.822v-29.712c-31.378 0-73.891 2.924-120.63 12.404s-92.839 24.688-121.002 54.15c-30.485 31.892-59.626 89.691-42.191 180.054l0.074 0.297c7.766 36.041 31.345 90.17 123.528 130.25 38.13 16.578 58.816 27.279 74.37 34.381 7.777 3.551 12.256 8.151 14.697 11.29s4.042 6.988 4.531 15.228c1.101 18.541-1.595 32.644-4.419 41.968s-5.2 12.925-5.2 12.925l22.433 19.015zM279.99 414.237l10.697-15.18c-0.887-16.769 0-51.279 0-84.047 0-15.558 4.204-36.156 1.772-49.205-4.685-25.143-4.006-33.818-8.903-49.609-3.892-12.55-8.256-34.361-11.158-41.114-7.858-18.288-9.797-60.161-1.745-85.894 8.154-26.060 13.226-59.528 25.976-78.763l4.742-48.906c-28.188 38.181-56.634 82.055-68.394 119.642-10.6 33.878-9.848 93.36-0.185 115.844 5.858 13.634 11.428 27.269 17.668 38.636 7.678 13.987 12.048 27.92 15.519 43.401 2.99 13.334 8.248 35.049 9.55 51.115 2.605 32.131 3.469 65.953 4.462 84.079z" horiz-adv-x="576" />
+</font></defs></svg>
\ No newline at end of file
diff --git a/src/css/fonts/piskel.ttf b/src/css/fonts/piskel.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..49fc45d24e545f3d1c6b4d74c20fecf8211f9bb0
GIT binary patch
literal 2156
zcmaJ?OK4nG82<lr?m74Ue#|42naMQCXw$|_Ofs!X=tC@lme@+FE9*2(o7$uawnFQo
zxNxBe;#zQH#ZAGL;Kog%f(xOb#GOzOx^U&DyGs1ey*DJG>Y01b`5)*1{_i^j=K=zN
z4IcuBsl_*5m^M03zo*C#^uDvaKG>`;{rnaHHpoAHWpHDY)`0v~T8%4fw=X|T?p!9H
z;@Z>ImBA(6iFyEXjq-D=6p$0z6!~A1Kf1bp^OpVz2=ad-zq+=uJYe6zXXHO3-&-Ht
z+5`tbCI2t-+t&x{E3a0+`wc)>J&$f~+_*_RX&9$f9ykO1T;btqBo=V0T%SM<K2rPk
z3?zvC;~2nW#7Eoo!$*WhFncyAAAr%TIwmx$Yyuh_q16I|a?~E$k8%6&?QMzy*^t|~
z{YPCZEAj+Q2uQp99Hod6cK>MJa<}jQ$B4=HmbQRf#N&CGC(w?^(wQdfXY;g9vaUYY
zWNG3teUi`4%(F`B@iZy&vntQV-n@VJ-HTs7xOo2lSJ$rHy}u;KPxOX|dnd+s*6Kt%
zj@uK}+C)2w+7mV0S{%HNc=p2Ca#|cL;yG+iogC{PpKc&FrjK{WPEIxP1V$qV>y<;T
z1TkqHs?-mTM7cBpVtb3dOuXNQd+;YN;K#&W@9Jr#-^dA8n!J26BJXi}4y4obtUu4`
z>GmdhcjuWMS7A2O>*`aJDANWuai^R~68ubge;#MXck6vjGMT7j*(t+Bs-lW&hLgCv
zl}@o+=~q&{OEeqkVS$~`gi_SMn0Dx7b9((=&bMGaJC}!h{T9jwX4DXqoqDEfTd0a~
zX0F&@R^ieJi*b~3&Y9G8ZiG?lq;=oaIGV00y|@;Ht!CYJhFT+0c%U_8+e$Te8;1{g
zS>#DBILC4@M8>kVZs=SH;dr4H#}=h2j$9L5n3ijrQQ#Y9l4iD@#i6d5x}Y*m7;#p0
z4c~J#AqCSSg~?PxFeG~P5=+B&b=|2~W1%rluh29K8U`u_s?Te=9&(wKQZs@mwX=#N
zH3h`2up0WKW9?E+r>)euTyk%S)KtP})gWev?Lr-6#HJvk_z0;B%}OI*Q-jcRLUa_w
zvnbdaw&iHOt&W0})0uEd8@cKDR@A81gJiVTaLmxN35;Wtkr-~dq3v`I9qD)@olYPv
zs>;RF@o8LlEmIvM#xGF^?#I4w*=d@XVHUV1w;fkX&vi82^K2n>4VzrkHDS~LAj2>+
zj39{Zuo6eM?gycz{s<8>8D}*|I<76Oz;&f&TPD+kAhN6|aCl7%(;?5PW{F7}3{5zW
zErsP!MKz7}Gy63f^k+z^GzMl=%d#M?hM{kUVPFt>`7auM{l7H!{eqe6I>K^oOA5!f
zxSm$4mX)TlG37N|P0t+}88(DvnL=1LF>_sym{lTu=kB}r>n~qi@LzcXwz^&c9{#@i
z<L+ACaCFJ%x35ajC8F+W`o=6Mm*(9YQw8XQQ7px*l4>VAroIg{EV?h7@BzC+wn|FO
zzd~dc1jyJkJovW6NAM_K^kQV6Ds4{oXlZL?FO{}{jJ#sM1RbVJ+k)p{S$z*QlOhVU
zunWw>E-(wbz%1+nv#=%A9xZDN%&UaE0qgW`z;!qeEASrNfUCLJh8|496nT60TwUH+
z-`KdmKM3cj@Cv*SYcL>yeFY?Xg`gGi0B+KH3EFTGZqvMw1D`3I=c@J`<Fn>JKYiFF

literal 0
HcmV?d00001

diff --git a/src/css/fonts/piskel.woff b/src/css/fonts/piskel.woff
new file mode 100644
index 0000000000000000000000000000000000000000..6302ca0c8341caed74fdd9156a7ccebe765a10f9
GIT binary patch
literal 1692
zcmZ`(ZERCj7=CZt+g&DZ<D-NxO+!d9F~N-=#1emyD8muVK(>Wsl2Nv~4{1xk)^05=
z>&N<W+PiMO?b@+cCJSTha4t;wP?M2B3=w0ZV*Ftf5+lZ6`y**%G4(z779EM6d*Amw
z?{nVsy!V{kb8O9xjm<4B%>c?Ns0M7x7V7`2z1i5PM*a@~`A%v|-Ov5aCtlkJpr}Ls
zG&OG5(;J;S?K$Mo;3&22tq)H2Xw8)S0%NXXb-mr%F68cFyq}tU*T#lkB$0cH@os9$
zR~7ZWI*T2ERb#xBT2%;Goz{+e?CTgSMN=LFy;j$a+(7_FL+!1t%Rinom@Sy%#2mF~
zavTAL0vLwj`Z^6dgFz3B47mfvowDK%d2y@a<!ab=qD;uMeti`={b#;tVP8T8XD#)^
z8>nB0PQGa)RH0VwhD}>`s4I$<&RTD6u<on39@<|ox&{Cl69NS&X+Z^4;f}uuCYk4{
zP$Ru1p{AHG-YWK~N{&eByHbK+D=e3ULYfo?N#Xl~K$+4Hg?Pyx;rs_wt0b=>d&nM*
z1|8Al$tqdR=T`|w-c}tUZEd8999e05Kpv2l6?EUUtsEg-&DVwBu|~f>l(hRvPsF&G
zV~LMG5f?u^?iuq4BZ-j@Ju}XE)7|!Qb5bj`Iy)`>4zq2b!_(n86Vzb=9h)Pc^0yPW
zg<F%eb91??_lADu2w}a8mOFcwyD!?3j&Uy^hz0o&9~vd`a5kFe1wIkw3E`|+_JiXp
zLaZ??+eLgSL)tK<zhe6GRKOQE^PZ?J<On+a13tIQK5VzROy>uJHnHdonH`&(n46f*
zWUeGL6Ib|4{B$gP{;Kt+KGi#C&Df{iGw#d&8ItA#cGX~rjSPkRNI!A%_NXgnj5}fu
z-W?m{{c(H5>NR?dZqtC58#l4@6Q3<iEF~8F^TQwcQ~rcM=}Qk~0_l;|$Ygjbm<un2
zGu)w{R15lOGK<?5HulhMi}=F6uq*2JdHo*mh2asK$L!RZj<-i$7qo#B!APnrZpm71
z3|zP0AG#{8;4C@Kzn3^AoSM|n>2mseQ{uM87cbxW?fTNxrR3yzoF9$xe3XykwnekS
zbWjK;LUh}vv+T_lRnp0Zhaz-Qj!|3C6)+J`z!7kdSc5*_U`QJ`#*MN5l#Ls0XAMh+
z8}3goT#I~_m>x^VQezYGbS%wJ@~PN#^kOs@xfaQAHAP`_QBaZf)gZ@TGX^Z4lB3M~
z_>Uj1^iN<L_%L4En7XwQ#RmZ%Gt8qhKFlNW#4&49)FPIl$5RNK(bLh*coOJ2uEv`|
zh7SYk$4vRJav3>53?gRAzid}jW{3mm7+^4~R#d^z`}zIlj@mb#zzehlz_<C{d;j+3
zhl(cVA;z?d)UZ1JR=jVTD1m<M*HVh!E&nt+NHb*z>HZvhHd+H8SLQKLgDH}R4DsO#
zmLuL>!3xB!70kjGjHG-e-Uj<BxEfx8PP$gbI%KG(ge6T0OPUgvG$kx)N?3_=HI=!N
zW*_PrK!;`kJ+whLn7|BuVx)!!*bDU-t;u<IMLtKuyEw52tZ){zDDeE)VI0$o!dkFk
X-vw$o1B2+BMB#TT#l=;j`~UVgNyX%g

literal 0
HcmV?d00001

diff --git a/src/css/style.css b/src/css/style.css
index 0cb64084..16f7aa14 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -162,58 +162,7 @@ body {
 .canvas.onion-skin-canvas    {z-index: 10;}
 .canvas.canvas-overlay       {z-index: 11;}
 
-/**
- * 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-container {
-  overflow : hidden;
-}
-
-.preview-container canvas {
-  border : 0px Solid transparent;
-}
-
-#animated-preview-container {
-  background: #333;
-  border-radius : 0 0 2px 2px;
-  overflow : hidden;
-}
-
-#animated-preview-canvas-container {
-  height :200px;
-  width : 200px;
-}
-
-.tiled-frame-container {
-  height: 100%;
-  width: 100%;
-  position: relative;
-  background-repeat : repeat;
-}
-
-.display-fps {
-  float: left;
-  color: #aaa;
-  font-size: 12px;
-  min-width: 55px;
-  vertical-align: bottom;
-  line-height: 24px;
-}
-
-.range-fps {
-  overflow: hidden;
-  width: 120px;
-  height : 24px;
-  margin : 0;
-}
 
 /**
  * User messages
diff --git a/src/css/toolbox-animated-preview.css b/src/css/toolbox-animated-preview.css
new file mode 100644
index 00000000..04ac857e
--- /dev/null
+++ b/src/css/toolbox-animated-preview.css
@@ -0,0 +1,74 @@
+/**
+ * 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-container {
+  overflow : hidden;
+}
+
+.preview-container canvas {
+  border : 0px Solid transparent;
+}
+
+#animated-preview-container {
+  background: #333;
+  border-radius : 0 0 2px 2px;
+  overflow : hidden;
+}
+
+#animated-preview-canvas-container {
+  height :200px;
+  width : 200px;
+}
+
+.tiled-frame-container {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  background-repeat : repeat;
+}
+
+.display-fps {
+  float: left;
+  color: #aaa;
+  font-size: 12px;
+  min-width: 55px;
+  vertical-align: bottom;
+  line-height: 24px;
+}
+
+.range-fps {
+  overflow: hidden;
+  width: 100px;
+  height : 24px;
+  margin : 0;
+}
+
+.preview-toggle-onion-skin {
+  font-size: 1.6rem;
+  color: #aaa;
+  float: left;
+  line-height: 24px;
+  height: 100%;
+  padding-left: 5px;
+  padding-right: 5px;
+  border-right: 1px solid #222;
+  transition: 0.2s linear;
+  cursor:pointer;
+}
+
+.preview-toggle-onion-skin:hover {
+  color : white;
+}
+
+.preview-toggle-onion-skin-enabled,
+.preview-toggle-onion-skin-enabled:hover {
+  color : gold;
+}
\ No newline at end of file
diff --git a/src/css/toolbox-layers-list.css b/src/css/toolbox-layers-list.css
index ae0892f0..662274fb 100644
--- a/src/css/toolbox-layers-list.css
+++ b/src/css/toolbox-layers-list.css
@@ -10,6 +10,28 @@
   background-size: 22px;
   background-repeat: no-repeat;
   background-position: 97%;
+  position: relative;
+}
+
+.layers-toggle-preview {
+  position: absolute;
+  top : 0.9em;
+  right: 3.3em;
+
+  color: #999;
+  font-size: 0.8em;
+  cursor: pointer;
+
+  transition: 0.2s linear;
+}
+
+.layers-toggle-preview:hover {
+  color: white;
+}
+
+.layers-toggle-preview-enabled,
+.layers-toggle-preview-enabled:hover {
+  color : gold;
 }
 
 .layers-list {
diff --git a/src/js/controller/AnimatedPreviewController.js b/src/js/controller/AnimatedPreviewController.js
index 28b79e94..c0cdd3b5 100644
--- a/src/js/controller/AnimatedPreviewController.js
+++ b/src/js/controller/AnimatedPreviewController.js
@@ -16,16 +16,43 @@
     var frame = this.piskelController.getCurrentFrame();
 
     this.renderer = new pskl.rendering.frame.TiledFrameRenderer(this.container);
-    this.updateZoom_();
+  };
+
+  ns.AnimatedPreviewController.prototype.init = function () {
+    // the oninput event won't work on IE10 unfortunately, but at least will provide a
+    // consistent behavior across all other browsers that support the input type range
+    // see https://bugzilla.mozilla.org/show_bug.cgi?id=853670
+    $("#preview-fps")[0].addEventListener('change', this.onFPSSliderChange.bind(this));
+    document.querySelector(".right-column").style.width = Constants.ANIMATED_PREVIEW_WIDTH + 'px';
+
+    this.toggleOnionSkinEl = document.querySelector(".preview-toggle-onion-skin");
+    this.toggleOnionSkinEl.addEventListener('click', this.toggleOnionSkin_.bind(this));
+
+    pskl.app.shortcutService.addShortcut('alt+O', this.toggleOnionSkin_.bind(this));
+
     $.subscribe(Events.FRAME_SIZE_CHANGED, this.onFrameSizeChange_.bind(this));
     $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
 
-    pskl.app.shortcutService.addShortcut('alt+O', this.toggleOnionSkin_.bind(this));
+    this.updateZoom_();
+    this.updateOnionSkinPreview_();
   };
 
-  ns.AnimatedPreviewController.prototype.onUserSettingsChange_ = function () {
-    this.updateZoom_();
-    this.updateContainerDimensions_();
+  ns.AnimatedPreviewController.prototype.onUserSettingsChange_ = function (evt, name, value) {
+    if (name == pskl.UserSettings.ONION_SKIN) {
+      this.updateOnionSkinPreview_();
+    } else {
+      this.updateZoom_();
+      this.updateContainerDimensions_();
+    }
+  };
+
+  ns.AnimatedPreviewController.prototype.updateOnionSkinPreview_ = function () {
+    var enabledClassname = 'preview-toggle-onion-skin-enabled';
+    if (pskl.UserSettings.get(pskl.UserSettings.ONION_SKIN)) {
+      this.toggleOnionSkinEl.classList.add(enabledClassname);
+    } else {
+      this.toggleOnionSkinEl.classList.remove(enabledClassname);
+    }
   };
 
   ns.AnimatedPreviewController.prototype.updateZoom_ = function () {
@@ -49,14 +76,6 @@
     };
   };
 
-  ns.AnimatedPreviewController.prototype.init = function () {
-    // the oninput event won't work on IE10 unfortunately, but at least will provide a
-    // consistent behavior across all other browsers that support the input type range
-    // see https://bugzilla.mozilla.org/show_bug.cgi?id=853670
-    $("#preview-fps")[0].addEventListener('change', this.onFPSSliderChange.bind(this));
-    document.querySelector(".right-column").style.width = Constants.ANIMATED_PREVIEW_WIDTH + 'px';
-  };
-
   ns.AnimatedPreviewController.prototype.onFPSSliderChange = function (evt) {
     this.setFPS(parseInt($("#preview-fps")[0].value, 10));
   };
diff --git a/src/js/controller/LayersListController.js b/src/js/controller/LayersListController.js
index b851e0e3..48b6e3e7 100644
--- a/src/js/controller/LayersListController.js
+++ b/src/js/controller/LayersListController.js
@@ -7,16 +7,21 @@
 
   ns.LayersListController.prototype.init = function () {
     this.layerItemTemplate_ = pskl.utils.Template.get('layer-item-template');
-    this.rootEl = document.querySelectorAll('.layers-list-container')[0];
-    this.layersListEl = document.querySelectorAll('.layers-list')[0];
+    this.rootEl = document.querySelector('.layers-list-container');
+    this.layersListEl = document.querySelector('.layers-list');
+    this.toggleLayerPreviewEl = document.querySelector('.layers-toggle-preview');
 
     this.rootEl.addEventListener('click', this.onClick_.bind(this));
+    this.toggleLayerPreviewEl.addEventListener('click', this.toggleLayerPreview_.bind(this));
 
     $.subscribe(Events.PISKEL_RESET, this.renderLayerList_.bind(this));
 
     pskl.app.shortcutService.addShortcut('alt+L', this.toggleLayerPreview_.bind(this));
 
     this.renderLayerList_();
+    this.updateToggleLayerPreview_();
+
+    $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
   };
 
   ns.LayersListController.prototype.renderLayerList_ = function () {
@@ -25,6 +30,21 @@
     layers.forEach(this.addLayerItem.bind(this));
   };
 
+  ns.LayersListController.prototype.updateToggleLayerPreview_ = function () {
+    var enabledClassname = 'layers-toggle-preview-enabled';
+    if (pskl.UserSettings.get(pskl.UserSettings.LAYER_PREVIEW)) {
+      this.toggleLayerPreviewEl.classList.add(enabledClassname);
+    } else {
+      this.toggleLayerPreviewEl.classList.remove(enabledClassname);
+    }
+  };
+
+  ns.LayersListController.prototype.onUserSettingsChange_ = function (evt, name, value) {
+    if (name == pskl.UserSettings.LAYER_PREVIEW) {
+      this.updateToggleLayerPreview_();
+    }
+  };
+
   ns.LayersListController.prototype.addLayerItem = function (layer, index) {
     var isSelected = this.piskelController.getCurrentLayer() === layer;
     var layerItemHtml = pskl.utils.Template.replace(this.layerItemTemplate_, {
diff --git a/src/js/utils/UserSettings.js b/src/js/utils/UserSettings.js
index 82f4aa5a..d603b1de 100644
--- a/src/js/utils/UserSettings.js
+++ b/src/js/utils/UserSettings.js
@@ -30,8 +30,12 @@
     get : function (key) {
       this.checkKeyValidity_(key);
       if (!(key in this.cache_)) {
-        this.cache_[key] =
-          this.readFromLocalStorage_(key) || this.readFromDefaults_(key);
+        var storedValue = this.readFromLocalStorage_(key);
+        if (typeof storedValue !== 'undefined' && storedValue !== null) {
+          this.cache_[key] = storedValue;
+        } else {
+          this.cache_[key] = this.readFromDefaults_(key);
+        }
       }
       return this.cache_[key];
     },
diff --git a/src/piskel-style-list.js b/src/piskel-style-list.js
index 3af9950d..fd8c0a23 100644
--- a/src/piskel-style-list.js
+++ b/src/piskel-style-list.js
@@ -3,6 +3,7 @@
 (typeof exports != "undefined" ? exports : pskl_exports).styles = [
   "css/reset.css",
   "css/style.css",
+  "css/font-icon.css",
   "css/forms.css",
   "css/settings.css",
   "css/tools.css",
@@ -13,6 +14,7 @@
   "css/toolbox.css",
   "css/toolbox-layers-list.css",
   "css/toolbox-palettes-list.css",
+  "css/toolbox-animated-preview.css",
   "css/spectrum/spectrum.css",
   "css/spectrum/spectrum-overrides.css",
   "css/bootstrap/bootstrap.css",
diff --git a/src/templates/layers-list.html b/src/templates/layers-list.html
index cd7baf04..7208e10d 100644
--- a/src/templates/layers-list.html
+++ b/src/templates/layers-list.html
@@ -1,5 +1,10 @@
 <div class="toolbox-container layers-list-container">
-  <h3 class="toolbox-title layers-title">Layers</h3>
+  <h3 class="toolbox-title layers-title">Layers
+    <div title="Toggle layer preview (alt+L)"
+         rel="tooltip"
+         data-placement="top"
+         class="layers-toggle-preview piskel-icon-eye"></div>
+  </h3>
   <div class="toolbox-button-container layers-button-container">
     <button class="button toolbox-button" data-action="add"  >Add</button>
     <button class="button toolbox-button" data-action="delete"  >Delete</button>
diff --git a/src/templates/preview.html b/src/templates/preview.html
index 2a7509a2..d7129d62 100644
--- a/src/templates/preview.html
+++ b/src/templates/preview.html
@@ -3,6 +3,10 @@
     <div class="canvas-background"></div>
   </div>
   <div>
+    <div title="Toggle onion skin (alt+O)"
+         rel="tooltip"
+         data-placement="bottom"
+         class="piskel-icon-onion preview-toggle-onion-skin"></div>
     <span id="display-fps" class="display-fps"></span>
     <input id="preview-fps" class="range-fps" type="range" min="1" max="24"/>
   </div>

From 2c235e659bd81880bed8908a5a581401ec10658f Mon Sep 17 00:00:00 2001
From: jdescottes <julian.descottes@gmail.com>
Date: Sat, 5 Jul 2014 11:39:02 +0200
Subject: [PATCH 3/6] Fixed layout on FF, removed options in drawer

---
 src/css/toolbox-animated-preview.css                  |  7 ++++---
 .../settings/ApplicationSettingsController.js         |  9 ---------
 src/templates/settings/application.html               | 11 -----------
 3 files changed, 4 insertions(+), 23 deletions(-)

diff --git a/src/css/toolbox-animated-preview.css b/src/css/toolbox-animated-preview.css
index 04ac857e..559e0ddf 100644
--- a/src/css/toolbox-animated-preview.css
+++ b/src/css/toolbox-animated-preview.css
@@ -41,21 +41,22 @@
   font-size: 12px;
   min-width: 55px;
   vertical-align: bottom;
-  line-height: 24px;
+  line-height: 26px;
 }
 
 .range-fps {
   overflow: hidden;
   width: 100px;
-  height : 24px;
+  height : 26px;
   margin : 0;
+  box-sizing: border-box;
 }
 
 .preview-toggle-onion-skin {
   font-size: 1.6rem;
   color: #aaa;
   float: left;
-  line-height: 24px;
+  line-height: 26px;
   height: 100%;
   padding-left: 5px;
   padding-right: 5px;
diff --git a/src/js/controller/settings/ApplicationSettingsController.js b/src/js/controller/settings/ApplicationSettingsController.js
index 746dc66e..4364005f 100644
--- a/src/js/controller/settings/ApplicationSettingsController.js
+++ b/src/js/controller/settings/ApplicationSettingsController.js
@@ -18,10 +18,6 @@
     $('#grid-width').val(gridWidth);
     $('#grid-width').change(this.onGridWidthChange.bind(this));
 
-    var overlay = pskl.UserSettings.get(pskl.UserSettings.OVERLAY);
-    $('#overlay').val(overlay);
-    $('#overlay').change(this.onOverlayChange.bind(this));
-
     // Handle canvas background changes:
     $('#background-picker-wrapper').click(this.onBackgroundClick.bind(this));
   };
@@ -31,11 +27,6 @@
     pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, parseInt(width, 10));
   };
 
-  ns.ApplicationSettingsController.prototype.onOverlayChange = function (evt) {
-    var overlay = $('#overlay').val();
-    pskl.UserSettings.set(pskl.UserSettings.OVERLAY, overlay);
-  };
-
   ns.ApplicationSettingsController.prototype.onBackgroundClick = function (evt) {
     var target = $(evt.target).closest('.background-picker');
     if (target.length) {
diff --git a/src/templates/settings/application.html b/src/templates/settings/application.html
index 77f6ca06..22c72076 100644
--- a/src/templates/settings/application.html
+++ b/src/templates/settings/application.html
@@ -30,17 +30,6 @@
     </select>
   </div>
 
-  <div class="settings-title">
-    Overlay:
-  </div>
-  <div class="settings-item">
-    <label for="overlay">Display :</label>
-    <select id="overlay">
-      <option value="no-overlay">No overlay</option>
-      <option value="onion-skin">Onion skin</option>
-      <option value="layer-preview">Layer preview</option>
-    </select>
-  </div>
   <!-- <div class="settings-item">
     <label for="tiled-preview">Display tiled preview :</label>
     <input type="checkbox" value="1" id="tiled-preview" name="tiled-preview-checkbox"/>

From bf9be5de2d65a03232bf69d5be776f909d003521 Mon Sep 17 00:00:00 2001
From: jdescottes <julian.descottes@gmail.com>
Date: Sat, 5 Jul 2014 11:41:40 +0200
Subject: [PATCH 4/6] Fixed input range style on IE11

---
 src/css/toolbox-animated-preview.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/css/toolbox-animated-preview.css b/src/css/toolbox-animated-preview.css
index 559e0ddf..452a48d8 100644
--- a/src/css/toolbox-animated-preview.css
+++ b/src/css/toolbox-animated-preview.css
@@ -50,6 +50,7 @@
   height : 26px;
   margin : 0;
   box-sizing: border-box;
+  padding:0;
 }
 
 .preview-toggle-onion-skin {

From 8e425c64d458db93acd15ea215bd4ccd6651e907 Mon Sep 17 00:00:00 2001
From: jdescottes <julian.descottes@gmail.com>
Date: Sat, 5 Jul 2014 11:45:10 +0200
Subject: [PATCH 5/6] Add fonts to copy task

---
 Gruntfile.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Gruntfile.js b/Gruntfile.js
index 6fab6404..ffb677e1 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -134,6 +134,7 @@ module.exports = function(grunt) {
           {src: ['src/logo.png'], dest: 'dest/logo.png'},
           {src: ['src/js/lib/iframeLoader.js'], dest: 'dest/js/lib/iframeLoader.js'},
           {expand: true, src: ['img/**'], cwd: 'src/', dest: 'dest/', filter: 'isFile'},
+          {expand: true, src: ['css/fonts/**'], cwd: 'src/', dest: 'dest/', filter: 'isFile'},
           {expand: true, src: ['**/*.html'], cwd: 'src/', dest: 'dest/', filter: 'isFile'}
         ]
       }

From 26a463c4b485563ddb5a61d825caaecfc91a9185 Mon Sep 17 00:00:00 2001
From: jdescottes <julian.descottes@gmail.com>
Date: Sat, 5 Jul 2014 14:16:53 +0200
Subject: [PATCH 6/6] Updated font-icon with a better grid

---
 src/css/font-icon.css                |   2 +-
 src/css/fonts/piskel.eot             | Bin 2320 -> 2588 bytes
 src/css/fonts/piskel.svg             |   5 +++--
 src/css/fonts/piskel.ttf             | Bin 2156 -> 2424 bytes
 src/css/fonts/piskel.woff            | Bin 1692 -> 1848 bytes
 src/css/toolbox-animated-preview.css |   2 +-
 src/css/toolbox-layers-list.css      |   6 +++---
 7 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/css/font-icon.css b/src/css/font-icon.css
index d0031924..ec44f24a 100644
--- a/src/css/font-icon.css
+++ b/src/css/font-icon.css
@@ -24,7 +24,7 @@
 }
 
 .piskel-icon-eye:before {
-  content: "\e600";
+  content: "\e602";
 }
 
 .piskel-icon-onion:before {
diff --git a/src/css/fonts/piskel.eot b/src/css/fonts/piskel.eot
index 9779c3932551c2192d36d78b1859dca560ac23cb..b60a84549a9c77b82ef50dc344ea667430df9b0b 100644
GIT binary patch
literal 2588
zcma)8&2Jk;6o2!vGqYc_>;16f+Hu?@jUlO=I89=zR#BBARgoG|ic;VLb<?ydZJMYJ
zQY)mY2M$zR`Uk*;-T-mpfGRGPI3mG`0}?0_s6vPfhn^@3Z+7h@ju2wJo_X)h?|tpe
z&b+DvaK{E9K%u`8cu0)o?74oq!RGDfU$2x7&H-q+1}m@u>-gV*n+VWw9#-KhybCv=
z1Gi98gbOIS1-B7vFm-4_6Q(lkL2VQohc4U)22-!RHaV?^pMQmtukn9zWxca`X!+YW
z5mZI~?A6ZgO&mky*Kkx<Z`{2y9+y8w9_50st#&T6;kmy6<QC4)t)W0n@D}o)BR{&f
zzIDfb0F%gnk9_sU#!82N#6Cd&59Gu3&Yey0$%n{4N4|cuv%dQBz?VOuEA&r}Z*JV)
z!Z@+nZ<u*t6v#ucaPBO*f|4`c@fnoieS_QA2!`F?P60fnWP1mHWE-uanSB7mL$+|n
zV}gFoYyuo!!qEYRbLbxGPwCFzJ3A-?q#>ip&M${}S0kIijsQVakXgxPxGCDlGnadQ
z|67KU>}>Nzj5dK6VIGYRYucKs(PPu|I5z2soUYL{(R5_ENoQx~>9G_MX_6ymXAnV;
zy#D0TJC{EG=F){HpIpEG=*hAeTWAdqwid>E<G@5cj_VTx<%xO})hEhi``pEIyU+P*
z>-3Qx^vLN}^|ZkZ95vXZnGUYVBnVm{kKrx&41Onz1lO3zhD=NCDl_4fYOMPdHI<s-
zGm>Hw?Rkbzqt#@M-ZOiW%#-#!ooO}X)Yz~{tE5JH`ZURv`}N!NWM*v7KtPI#NcOv>
z!l;#uGtwk`$R?X@l-i|KHj-kM$STof*S^#wDdv9htu|?{)ox`G=W%1GnYC7Xh~#<p
zv~$%VVv-^=b2%LQS$xP+m4;-9Fh;2*1QR-poT%ta&Zu;i<%Ox%m2%N>1`bt&V6alM
zoycW^dZoso7l)oj5lOOU1{zm{6x8CD<7qn#6=V4v=Zs6+RZ44LszMYwb{qy4my)9v
z=Q4~FSNfjAxy30Dj20T?oD)jX17(C!CY39NQ%XW3wot%1rBaD5hL96^I;cx27Z$E<
z5ZQ6!Sj;$~wobJ_G*mg54s$UbKMoG2Lr6Sk=b>N-7y<sVW84y)+lA2M3|k%snkN~;
z;2)Q5K2)rj7eToak}`{N!j$8yV4zs?qgtip%D}UYJ}F~xjM=VsoWZflL9aSE=nJJx
z(B|bb#;I^^i6bN7G)CfwzHi%6p`e0DyNW5-wJgtdxbR$;bAcu)zDJIWpo9(rDSaK<
zIw=IU@O2<ns68GM5yYu$xsJn?_8g1b=)>}ZK-qzISju%&@|-jd6;~1yb{vDj&Pk(C
zEcB%)F-0M)JjF1L5<g0Uz*9QV!fd4fm7>D!Vp5#+tuRiVEF<OFwuP=0v*ILGDn{4i
zez{Wi+-kKfxvdl~g@YK^bA^+{p~%kZQ+Pn$$Fu5Hz|+~BRkFs+QPpm;5%VSG-+lL6
z%09;Fxwg&@2m>?cRij3xizT`LNHa$qf$^n<*(jP_SQ_7>?s-XEkg^abp03po7Yc{#
zHN7XxwzFByWTaWCG)IzbY0W2dPx%GMDfp^4lKZ9c6QiRi#!J0%8O^4yo1z0-+m?mh
zp2Tc7%XM90tQzYA8Oulq_FFa9&Dq~Q@BjSm^p9@`C!c|v*9YJI^xlw}&d2UakC$I|
z3w8C(eFeZ54U7HW&0z$1apptbn@NMDr(klo0&#FXYH*8gnadLak~}asD7IZl#^s%c
zFS<SmmKwdtDbi=Ua)$J1m*z+>cWDa?5#6N)#x>og9e4pt7`#onjS^!sr*oS*o!iXm
z+-6SaHgj5_?(wc}ZnM9*`S&8I4|8p0V|`=e=7E~3zn<z-z@%5PqB7N02exp$40X5!
Vcd=j0>awNXx-8rO`(ETh@*g{y`?~-D

delta 1310
zcmZ`(O=z4&7@l|jznSlEzQ5gUw%=yA8-q1nlag$#%F;GfC@QgHK~HswEjc7MU=PJZ
z_uxqcF)UuxWAWliEO^k1h)_W&DBGLh(W4h{LVdq)V|&qI{+@Z~o%ea(VdnGf<3z?D
zA^ZAB4*A`mzI}iCmClY{-*w**LcYWH*6zXhuyy6<H;(SLC-<}4*9n0`Lipc%*T!$N
zUb0Sz+{b;xJzS7a@ioME5cl^EZr)NK5P|p};^zL1-7)=we1!OS#NomC)*<oXL&Sd~
zUV3MIaP4CA?gK(pj4{q0-gx&WVQ3-x<;qSNo$kUpfax9B#{LgD7|r-4n30S;Nk-_>
z3u(Sl(yd~I<AAQHVM+5Wq-wx6H%7FPhb+(L_RY#Z{e*73G}{@!3UK-A<>PK=yaTU6
zxwgH$a{f#kpnc~2%JTMF2^S#go@zB#I~hRMS#7jVbrY!Q2_hcO=yNceQuadm#E5Q<
z=*IerS{s1O+fYKIWOb!7pI&GEBr9ZA5&3r=vgv26%i1iTe$Un?L!>rf>suX=Z76Uf
zWGZBJr3LzQV8B)eurb^ku}5_iu5@V%eaaZ4QYofglKXip@;C!8@MM@S#I94etiRal
zChlZs(OOK1VnO@#$*@R5$pm8nFu?{uvC?8mX~l#Pe&|e^8noj&FfN$zOyGG*9BD7h
z3u}wiDeftOZd~ZJXa+h8eJ-S+JeePe20;P&VMChQ21@y@W-2&k*aYXesPzOY4OO5Q
zYefjDl#=T>$!*c_C9gs-<C-q&FE1VI=`B@y0w!6wh<Y0Ck)A4eEeD`DZEJ+m=sZeI
zh6$+zH+d3qEEA5$*OV|D$aL;8J7HzNwNxbowPRM8<haT6Ba^gStvKs<+P>#P%P@^l
zQk26?;H=+UeWn+7d%aj1^s41!0y$HG@v1~Z`Yc9ZQ5r?Y=6U8#ToDHzvwk3D82DU;
zp%p@LC>d8=SiB19T%vUxr`9#n#HuKErn(D}QkfPDzVrhtOdJG~TjNm`$B8jX?6U>#
z^2N|^7MX`4G#9>ar7%8vH1kxwQi+^AR;lqqq^wlNUb0XWao%(;@|=q`(wG0CGE)Di
zax0os3j$x5z#1uhYnaNLO=I#r)oWqdDZ`-Ky>LPcV>}^@MQ%Y5BDY4ONd49b`SRCa
zKD`<}{}-{edVJ*mZ+kyJ9v{{}!t|nk`mC(Y$6e*jFA+k|RUZ--gTF>e-lMm1UKu6S
QUlq>i6ioW{5Bg2`2j>%t!~g&Q

diff --git a/src/css/fonts/piskel.svg b/src/css/fonts/piskel.svg
index 78f687c3..e7d9704a 100644
--- a/src/css/fonts/piskel.svg
+++ b/src/css/fonts/piskel.svg
@@ -7,6 +7,7 @@
 <font-face units-per-em="512" ascent="480" descent="-32" />
 <missing-glyph horiz-adv-x="512" />
 <glyph unicode="&#x20;" d="" horiz-adv-x="256" />
-<glyph unicode="&#xe600;" d="M548.568 469.33c-230.956 1.035-548.568-255.999-548.568-255.999s288.019-255.998 548.568-255.998c229.744 0 548.568 255.998 548.568 255.998s-319.896 254.974-548.568 255.999zM543.082 387.731c100.382 0 181.713-81.33 181.713-181.713s-81.331-181.713-181.713-181.713c-100.382 0-181.827 81.331-181.827 181.713s81.445 181.713 181.827 181.713zM543.197 320.645c-65.289 0-118.285-52.996-118.285-118.285s52.996-118.171 118.285-118.171c65.289 0 118.17 52.882 118.17 118.171s-52.882 118.285-118.17 118.285z" horiz-adv-x="1097" />
-<glyph unicode="&#xe601;" d="M340.96 469.333l-32.981-29.267-1.969 10.697-18.862-5.459v-36.471l1.221-25.849 35.952 31.903c-0.462-6.572-0.68-13.508-0.223-21.207 0.724-12.19 4.071-23.146 10.733-31.718s15.637-14.063 25.589-18.607c19.904-9.088 44.707-23.995 75.102-49.258 57.553-47.833 64.672-71.707 75.043-113.771 9.874-54.678-5.819-94.055-28.463-127.459-16.179-23.866-36.205-45.046-80.229-53.974s-85.245-11.81-114.725-11.81v-29.712c31.378 0 73.891 2.924 120.63 12.404s92.839 24.688 121.002 54.15c30.486 31.892 59.625 89.691 42.191 180.054l-0.074 0.297c-7.766 36.041-31.345 90.17-123.528 130.25-38.13 16.578-58.817 27.279-74.37 34.381-7.777 3.551-12.257 8.151-14.697 11.29s-4.042 6.988-4.531 15.228c-1.101 18.541 1.596 32.644 4.42 41.968s5.2 12.925 5.2 12.925l-22.433 19.015zM308.574 410.875c0 0-21.425 5.601-21.425-1.56 0-39.679-0.543-46.688 13.068-74.726s31.172-56.883 57.683-81.363c50.137-46.294 46.077-53.33 54.399-77.145 3.064-8.767 4.356-29.132 2.228-45.125s-8.091-37.102-15.933-49.099c-12.322-18.852-22.247-38.122-45.82-51.216-24.626-13.678-45.867-16.634-65.626-16.634v-29.712c24.75 0 52.923 5.962 82.673 17.976s58.387 30.034 75.728 56.564c11.616 17.771 23.842 44.829 26.541 66.454s8.060 40.281-6.041 69.411c-21.705 44.841-50.569 58.307-85.806 88.136-21.815 18.466-41.428 40.207-53.325 64.713s-17.61 49.391-18.347 63.324zM304.637 391.785l-17.488-1.597c0.887-16.769 0-51.279 0-84.047 0-15.558 2.587-34.459 5.019-47.508 4.685-25.143 12.495-41.458 17.392-57.248 3.892-12.55 8.256-30.116 11.158-36.87 7.858-18.288 8.948-40.637 0.897-66.369-8.154-26.060-20.866-51.039-42.106-59.238l7.64-25.197c30.736 11.865 73.733 45.32 85.493 82.907 10.6 33.878 3.906 64.497-5.757 86.981-5.858 13.634-11.428 23.024-17.668 34.392-7.678 13.987-23.993 31.521-28.665 45.802-4.248 12.988-9.303 28.695-10.605 44.761-2.605 32.132-4.319 65.104-5.311 83.231zM235.254 469.297l32.98-29.267 1.969 10.697 18.862-5.459v-36.471l-1.221-25.85-35.952 31.903c0.463-6.572 0.68-13.508 0.223-21.207-0.724-12.19 0.731-24.346-5.931-32.918s-14.437-20.066-24.389-24.61c-19.904-9.088-43.506-23.995-73.901-49.258-57.553-47.833-56.268-60.902-66.639-102.966-3.871-55.878-7.038-55.096 5.653-93.844 7.669-23.416 26.602-46.246 70.624-67.18 40.566-19.291 102.053-35.822 131.533-35.822v-29.712c-31.378 0-73.891 2.924-120.63 12.404s-92.839 24.688-121.002 54.15c-30.485 31.892-59.626 89.691-42.191 180.054l0.074 0.297c7.766 36.041 31.345 90.17 123.528 130.25 38.13 16.578 58.816 27.279 74.37 34.381 7.777 3.551 12.256 8.151 14.697 11.29s4.042 6.988 4.531 15.228c1.101 18.541-1.595 32.644-4.419 41.968s-5.2 12.925-5.2 12.925l22.433 19.015zM279.99 414.237l10.697-15.18c-0.887-16.769 0-51.279 0-84.047 0-15.558 4.204-36.156 1.772-49.205-4.685-25.143-4.006-33.818-8.903-49.609-3.892-12.55-8.256-34.361-11.158-41.114-7.858-18.288-9.797-60.161-1.745-85.894 8.154-26.060 13.226-59.528 25.976-78.763l4.742-48.906c-28.188 38.181-56.634 82.055-68.394 119.642-10.6 33.878-9.848 93.36-0.185 115.844 5.858 13.634 11.428 27.269 17.668 38.636 7.678 13.987 12.048 27.92 15.519 43.401 2.99 13.334 8.248 35.049 9.55 51.115 2.605 32.131 3.469 65.953 4.462 84.079z" horiz-adv-x="576" />
+<glyph unicode="&#xe600;" d="M548.568 479.997c-230.956 1.035-548.568-255.999-548.568-255.999s288.019-255.998 548.568-255.998c229.744 0 548.568 255.999 548.568 255.999s-319.896 254.974-548.568 255.999zM543.082 398.397c100.382 0 181.713-81.33 181.713-181.713s-81.331-181.713-181.713-181.713c-100.382 0-181.827 81.331-181.827 181.713s81.445 181.713 181.827 181.713zM543.197 331.312c-65.289 0-118.285-52.996-118.285-118.285s52.996-118.171 118.285-118.171c65.289 0 118.17 52.882 118.17 118.171s-52.882 118.285-118.17 118.285z" horiz-adv-x="1097" />
+<glyph unicode="&#xe601;" d="M333.139 442.196l-28.111-24.945-1.682 9.117-16.077-4.654v-31.086l1.038-22.032 30.642 27.192c-0.394-5.602-0.579-11.514-0.189-18.076 0.616-10.389 3.469-19.727 9.148-27.036s13.329-11.986 21.812-15.858c16.965-7.745 38.105-20.45 64.012-41.986 49.053-40.769 55.122-61.117 63.962-96.969 8.416-46.603-4.959-80.166-24.261-108.637-13.789-20.344-30.859-38.395-68.38-46.004s-72.657-10.067-97.784-10.067v-25.324c26.745 0 62.98 2.493 102.815 10.574s79.13 21.041 103.132 46.154c25.984 27.183 50.821 76.445 35.96 153.464l-0.063 0.253c-6.619 30.719-26.716 76.854-105.285 111.015-32.5 14.131-50.132 23.25-63.389 29.304-6.628 3.027-10.442 6.947-12.524 9.622s-3.445 5.956-3.862 12.978c-0.939 15.803 1.36 27.825 3.767 35.771s4.432 11.015 4.432 11.015l-19.12 16.209zM305.535 392.371c0 0-18.259 4.773-18.259-1.332 0-33.82-0.462-39.793 11.136-63.691s26.568-48.483 49.166-69.349c42.733-39.459 39.275-45.454 46.367-65.753 2.611-7.473 3.713-24.832 1.899-38.462s-6.896-31.623-13.579-41.846c-10.502-16.069-18.963-32.495-39.053-43.653-20.991-11.659-39.094-14.177-55.936-14.177v-25.324c21.094 0 45.108 5.082 70.464 15.322s49.766 25.601 64.546 48.212c9.899 15.147 20.321 38.209 22.622 56.641s6.87 34.332-5.148 59.162c-18.5 38.219-43.101 49.697-73.135 75.121-18.592 15.74-35.31 34.27-45.45 55.156s-15.009 42.098-15.636 53.973zM302.18 376.1l-14.906-1.362c0.757-14.293 0-43.707 0-71.637 0-13.26 2.204-29.37 4.278-40.492 3.993-21.428 10.649-35.336 14.823-48.794 3.317-10.697 7.035-25.671 9.51-31.424 6.695-15.587 7.627-34.636 0.765-56.569-6.95-22.212-17.785-43.502-35.888-50.49l6.513-21.476c26.197 10.113 62.845 38.626 72.867 70.666 9.036 28.875 3.329 54.971-4.906 74.137-4.993 11.622-9.74 19.624-15.059 29.314-6.544 11.921-20.45 26.866-24.431 39.038-3.621 11.070-7.929 24.458-9.038 38.151-2.22 27.384-3.681 55.489-4.526 70.94zM243.043 442.167l28.111-24.945 1.682 9.117 16.077-4.654v-31.086l-1.038-22.031-30.642 27.192c0.394-5.601 0.579-11.514 0.189-18.076-0.616-10.391 0.623-20.75-5.055-28.057s-12.305-17.102-20.787-20.976c-16.965-7.747-37.083-20.449-62.988-41.986-49.053-40.769-47.959-51.909-56.799-87.761-3.299-47.627-5.999-46.959 4.819-79.986 6.537-19.959 22.674-39.417 60.195-57.258 34.577-16.442 86.982-30.531 112.107-30.531v-25.324c-26.745 0-62.98 2.493-102.815 10.57s-79.129 21.041-103.132 46.154c-25.983 27.182-50.821 76.447-35.959 153.464l0.063 0.253c6.618 30.719 26.715 76.854 105.288 111.015 32.499 14.131 50.131 23.25 63.386 29.302 6.629 3.026 10.442 6.948 12.528 9.622s3.445 5.956 3.862 12.978c0.939 15.803-1.36 27.825-3.767 35.771s-4.431 11.015-4.431 11.015l19.12 16.207zM281.173 395.236l9.119-12.938c-0.757-14.293 0-43.707 0-71.637 0-13.261 3.582-30.816 1.509-41.939-3.993-21.428-3.416-28.824-7.589-42.282-3.317-10.697-7.035-29.287-9.51-35.043-6.695-15.587-8.351-51.277-1.488-73.21 6.95-22.212 11.272-50.74 22.139-67.131l4.043-41.683c-24.026 32.543-48.269 69.938-58.294 101.975-9.036 28.875-8.394 79.572-0.158 98.736 4.993 11.622 9.74 23.244 15.059 32.931 6.544 11.922 10.268 23.796 13.227 36.99 2.548 11.365 7.031 29.873 8.139 43.568 2.22 27.387 2.957 56.213 3.804 71.663z" horiz-adv-x="576" />
+<glyph unicode="&#xe602;" d="M256 384c-111.659 0-208.441-65.021-256-160 47.559-94.979 144.341-160 256-160 111.657 0 208.439 65.021 256 160-47.558 94.979-144.343 160-256 160zM382.225 299.148c30.081-19.187 55.571-44.887 74.717-75.148-19.146-30.261-44.637-55.961-74.718-75.149-37.797-24.108-81.445-36.851-126.224-36.851-44.78 0-88.428 12.743-126.225 36.852-30.080 19.186-55.57 44.886-74.717 75.148 19.146 30.262 44.637 55.962 74.717 75.148 1.959 1.25 3.938 2.461 5.929 3.65-4.979-13.664-7.704-28.411-7.704-43.798 0-70.692 57.308-128 128-128s128 57.308 128 128c0 15.387-2.725 30.134-7.704 43.799 1.99-1.189 3.969-2.401 5.929-3.651zM256 275c0-26.51-21.49-48-48-48s-48 21.49-48 48 21.49 48 48 48 48-21.49 48-48z" />
 </font></defs></svg>
\ No newline at end of file
diff --git a/src/css/fonts/piskel.ttf b/src/css/fonts/piskel.ttf
index 49fc45d24e545f3d1c6b4d74c20fecf8211f9bb0..a6836b3585712666a034e53dd39253e7d4e39cad 100644
GIT binary patch
literal 2424
zcma)7&1+m$6hHUl-Fx5HeQ(~!Or|rLOp`Rxq)aktlCiXek_sizV6CL;MmtT@rnYH9
z8=*xgUAVBg@ek0A-Kn^8A>yXsQqYwPK?n#%#Epxtti*HQoph3d;+;G9eB5(>=bU%n
zI~NE5_;4Q>OuzEl)QlQ_`Za34#s9_CjqcW=mG9pKAa#__UhUrALK>sIj#OQ}areqZ
zTKx=V)C<18*1gPz=l=qb+qgf!jtVi!+bDm5^62`;_8s>DOriWE%JmzYt6lmr`vB!X
zP>wgcceWrTAENve<>t-q#@fpRU;TukFg`iHwRw9R^Tgr4VfKMhARmE)duPcN)ST(j
zCs2j=jorRMFztim6u@Ijc6RYcb`T9=_8Ax%fa2do%y2ck8E|+BsRs)8Fg!FL)7`&!
zcToq(L&1~XUk~w~N3nqm0fJUhfns%t-8o)_?8p6Y9cHq-!<R7I3|@o<1Rd72J>8(k
zW)_gP=!l$Y&^*(0WVl7=W*6wO94+$9TFlL&1wHcmqlfQY`sBMy7ao0j{rba4D`IT1
zJvi829NVJ<lg%`3P7YKjn@Q4~tdgB`7tcML=j-j$NA^sQoNm`o8=HZn#`b98gC{Zt
zf|kfP@D_Xyzmp|`XH4X{%qyKbGwD<stT)S=O3iSN<XA*!f#Do)x7hgJoI6PtNN0i0
zw#Vi4*s#d!q(S!lX=a@d`gaz{>{uTlBIQhE`@>RU+$ts*X_3BVi_MK!I+a|GXXQGP
zb)v~Le5pxRwsG;Pwy5>$w2O>w-k55E*6s`uTj!p)bsZw6C^9>5&2gQ>NtWw0CPRcV
zN*y7X&~f4=<xp})rLUYI&b6*p%bquIs2)XwwTkN{J`*&kj1LBB95@s$NihteX-!B$
z9qxF6cH>wvX7@N}T)MteT8C1VlEib<IC8j@9KAS~ahmxu3_Q*qPI+X!5Rh|DD8&er
z5k{F*z7$?1i;dbr1?QAXC3-f5oUrAfFQr^Kc(zgErkUq36NI`t*Wu7m?fG(;kL84E
z^n5vlq+_m41yjHb@Q(}Qj^Nxa#Q|qHY#Inp3JYWZP1WT?<(hdAlq(@Aa~LN~d7+91
z%9Su_)GEG=0@wJHDkjI6>ub*&9Ge;p>Vt!!P|7529xh{?3g4AT8Hr~wlQ0fL*G)<#
z6(!nNO!>a!1ir^b;QO2lgrxW!IUa%%I*OzWb?oY_6uBbQkyNn`cuYi;=Dy>59#=Z>
z9PVNaCyXNHM%rUJ*GVPt@-$XlNi5j&j14Ycp2TADK#3Ad6vDA3#(9#3Nft$c(vcSC
zMfzVQDtui`iBq8yr@2>DqypD<FtlP$n&nER7<wYC)~bPDuU92^mBOR&(8dpZ;bmzo
zimrJI8{~cLRj&eeXVa@>gPB&<X|WOWCE4%3_bnA4<IH?V7Y)LgnSM3iAT#BP+~3kn
ziz6_xyf~L6bBoIpeePb6r6nm#X%^^4^KhwjxY^KsUGX}b)67O%wOVT=D~{HDGWS$i
z^1M>0_9(eunK&^zdSaroM^_Lw_x&6LxY~6bT>2XGx;eh@3xjIV1qzPQ4(vxY=%)Ag
z`u(53o&Ndl=;Rad%{2q?!!Pd*^=Yru<K<V}LS_T~%zXvGmyC#O|K>0Xyf`hftJyS`
z^b}0l2&nMzJQ{F|Zkx*!Wl0{G8x+SglR~nKhA(?D2xwH<cog|FJ)R*y+T%I$D?Q$U
zGD_B7U|usl-h&rl)!dETMUBC<yv4M<#k9P|w7kW%yg=XMJztA?4RJSN1OJ<F6E46S
z+=AP1t&p0~h89etw9n?+>gLAg=FNjjIFF83;a#`^T?9DbfJLt%v;pqIHqy(`giCN2
S*QEk@xfi^s%09t=S^oiTj_VWv

literal 2156
zcmaJ?OK4nG82<lr?m74Ue#|42naMQCXw$|_Ofs!X=tC@lme@+FE9*2(o7$uawnFQo
zxNxBe;#zQH#ZAGL;Kog%f(xOb#GOzOx^U&DyGs1ey*DJG>Y01b`5)*1{_i^j=K=zN
z4IcuBsl_*5m^M03zo*C#^uDvaKG>`;{rnaHHpoAHWpHDY)`0v~T8%4fw=X|T?p!9H
z;@Z>ImBA(6iFyEXjq-D=6p$0z6!~A1Kf1bp^OpVz2=ad-zq+=uJYe6zXXHO3-&-Ht
z+5`tbCI2t-+t&x{E3a0+`wc)>J&$f~+_*_RX&9$f9ykO1T;btqBo=V0T%SM<K2rPk
z3?zvC;~2nW#7Eoo!$*WhFncyAAAr%TIwmx$Yyuh_q16I|a?~E$k8%6&?QMzy*^t|~
z{YPCZEAj+Q2uQp99Hod6cK>MJa<}jQ$B4=HmbQRf#N&CGC(w?^(wQdfXY;g9vaUYY
zWNG3teUi`4%(F`B@iZy&vntQV-n@VJ-HTs7xOo2lSJ$rHy}u;KPxOX|dnd+s*6Kt%
zj@uK}+C)2w+7mV0S{%HNc=p2Ca#|cL;yG+iogC{PpKc&FrjK{WPEIxP1V$qV>y<;T
z1TkqHs?-mTM7cBpVtb3dOuXNQd+;YN;K#&W@9Jr#-^dA8n!J26BJXi}4y4obtUu4`
z>GmdhcjuWMS7A2O>*`aJDANWuai^R~68ubge;#MXck6vjGMT7j*(t+Bs-lW&hLgCv
zl}@o+=~q&{OEeqkVS$~`gi_SMn0Dx7b9((=&bMGaJC}!h{T9jwX4DXqoqDEfTd0a~
zX0F&@R^ieJi*b~3&Y9G8ZiG?lq;=oaIGV00y|@;Ht!CYJhFT+0c%U_8+e$Te8;1{g
zS>#DBILC4@M8>kVZs=SH;dr4H#}=h2j$9L5n3ijrQQ#Y9l4iD@#i6d5x}Y*m7;#p0
z4c~J#AqCSSg~?PxFeG~P5=+B&b=|2~W1%rluh29K8U`u_s?Te=9&(wKQZs@mwX=#N
zH3h`2up0WKW9?E+r>)euTyk%S)KtP})gWev?Lr-6#HJvk_z0;B%}OI*Q-jcRLUa_w
zvnbdaw&iHOt&W0})0uEd8@cKDR@A81gJiVTaLmxN35;Wtkr-~dq3v`I9qD)@olYPv
zs>;RF@o8LlEmIvM#xGF^?#I4w*=d@XVHUV1w;fkX&vi82^K2n>4VzrkHDS~LAj2>+
zj39{Zuo6eM?gycz{s<8>8D}*|I<76Oz;&f&TPD+kAhN6|aCl7%(;?5PW{F7}3{5zW
zErsP!MKz7}Gy63f^k+z^GzMl=%d#M?hM{kUVPFt>`7auM{l7H!{eqe6I>K^oOA5!f
zxSm$4mX)TlG37N|P0t+}88(DvnL=1LF>_sym{lTu=kB}r>n~qi@LzcXwz^&c9{#@i
z<L+ACaCFJ%x35ajC8F+W`o=6Mm*(9YQw8XQQ7px*l4>VAroIg{EV?h7@BzC+wn|FO
zzd~dc1jyJkJovW6NAM_K^kQV6Ds4{oXlZL?FO{}{jJ#sM1RbVJ+k)p{S$z*QlOhVU
zunWw>E-(wbz%1+nv#=%A9xZDN%&UaE0qgW`z;!qeEASrNfUCLJh8|496nT60TwUH+
z-`KdmKM3cj@Cv*SYcL>yeFY?Xg`gGi0B+KH3EFTGZqvMw1D`3I=c@J`<Fn>JKYiFF

diff --git a/src/css/fonts/piskel.woff b/src/css/fonts/piskel.woff
index 6302ca0c8341caed74fdd9156a7ccebe765a10f9..895352254dcb47cb469ef36bc5921da6f511db1d 100644
GIT binary patch
delta 1137
zcmYLJTTCNW7@k50X2mTmQkQtiZZ_)@0}1ZN5FuV3TsPVnA&Mj`1nF`q;ucCv+v)u_
z)9Lh|nO<gkXG;}YE<#*D6UY+718>%tY>d$abWMCPyASYUXk-&T!#;R&zVDp>J16Iy
z|4aTedv;6JWbM9jqr11a8^dZ}!=A!Wt2q*VHO;ZMI?o1%Rc~~quKeEpQTsIvQ!b&^
zAsNJ_$6LdCtpUSu0>$skc<$r!O`X;xYrQCzbr}ugquLRq4WN04jOt4rC*w#&nuOxZ
zGHP0tSI6};B+|A}{DO=#>@}=iuO;OJe?mgdDQbJLNv(bqY5N$a=#+82`J0~&Q>Gb|
zL38Y{w_g7IpM%N_{vz7$ua}uQC-WIZ)ys_-p->R@=bm}?`HL@!-HHoW&F^%)f^w@;
zuo#ZjR$&TEiPa(_&SJ(Ye|5uSN%f?kNUF*~WxFyXrWGxoPW2%ibU_PT>FjDjL+3sm
z!QsLFArSDcS_6H3paIQpUm41<yNjsYx2pj{_5JZ5l@HWYMpkk#aGNu)lyIQKG)IG1
z@W-fFAkIk4Y@pyST6S*5tddR~a8Fn#-B!D8G%!Z#LPm6f5%-kfYkpJQ6gSfI#bRk;
z$N38ZfKw~h?KjpYGWLWkMhi@Y<ynChARf-~DM92#UH~A-9B#O&1|XwA!)HJzO(|2>
z^rhw7kq{lX2oz^y-K;BUqkKMx-){9<yta`2^wt8*M~jJt#6r%K`67``&hvNpJJFnH
zfm}DG^b2Ipp7+i93c&)T2*#myhH=gro`flI^A5oqF~?jHcf>0=1v>8JNXkr^y=EIl
z#4LC*ad$DXDlO8*z+5mH6oUym<;pTCCds73nb2Z*F`OlOeo!wOc`1jC^MuW}OE_{3
zc?Vw3M^nK7<qt6SfW>XJd~%EP`gKe{%Oxjb)*QKRTeI)F7EW_8fQ}y)hsBY!sW@FS
z?qpAmi?7UW|GKuCnN4J3F(DG+d0s$f#km}t3W=<UOavmI!`BDYk{bt?2jsL|5j*Q;
z%s?@&kdGl*nsTzbxH)c)OeP&fM2nkNO?Q1?`Iorw#C$XrO-2*(l#mkALNb!)GC~QK
zxGbSMmMTr^6D722`rGccJ<=R20rf}adk^~`wwBQXaopIUUM7pvc|ED0p4OA2W2PbZ
zAPmA#dURf&pDvQi`Q>79InQ(G<y_Dea)Oh9>w6#Ghx@R%hbSA$1~Yt^XZbL3(r8kH
z!D2Ch0W1Y5L8(wc1O*Ei2vtRDsz_>h8vO-ggYs=fmDqdAY2~Yz&yW52+o$!f|BcmE
rp_0O|9}gTC{vZE+pnOm9Ks-{mD{94y`1!i_C%bx3Wp2KS4=VlxaE#GS

delta 998
zcmYLIe`p(39Dmp5(sOR<enp2)Hpigiz|A3IL~x)ETZDG3ErVLyxR$2TOP1f)B+E6I
zOLED(d%ff?KbOR2D{a$s)Y59Zxj_djGOYO5M8y0lDhT~c3|i24QS`m{`Mmf2yvO_U
zK78M%p>*J=ulM4`-v0hx0Q4oW58$TnSDx>9I(240dmMoF<9hlBYwzW==K;_i#Ji&!
zs8f3zS84M#tYLunG(0n~b7jKp(zJUxrvAl2%eZ+AYY%b!s)qJchhMf}5o>!mKCMB2
zMt9CayBPq;lQ=%6p(Ak~khGb>7m}}GLEnPD57^A~IMyxzK$tYVeQf>PYj&3#9|@*@
ze)EOVKN?Lp`5ZnT?9@1XNaH6kwI4YQItYU5Japu#XHP19#EBOHXd@Cp2lQ=#z*7gd
z-~e#8aeJ!apYf+^Xf~R6nv=>b(Z#-Q+=UGj?1Eh;6DDYCz+Jf8XzW4?zH97(gM+Xe
z_G}IAz#X`?h3V_TtsY1jzWV)_=A_YTOJtcSoDdx=brSMg7egqV=2Dy*%fvq6=7LMk
zheK&s)~pT$uez-Pm(M%Gjc^|dG)_R1Y#n}v?q=?)cZv(OT77Zb|04w<8Ch{Zcxiq7
zhA$gPM^IcAPy!`pppvXe1*D>kgdn6m74oA?MhHDJ&N~MAyuDyA+2)=1hvU5BLY(AF
z1cX4;%d;US%(z3&>t4av$~p%ZQng$yw@_xw^VxE49?hbvT)DpJ*|g;?HBXtTvUBXM
z=o~CiamF~6AVq(25?WypF;Yl&C;>TuSa}LX6-M+#9Gru7dLvZYNiO9+U(T&&mZMAI
zo6&qU6V37ke>q-=<zvNUNvJ26lV$3i?~KbfDO<tDu}Q~-=A6hU`D939`AC$DOowAW
z&K0DcmxiR!v^joR5c6Y-yW-yPt}&1Ni>)_&3`f!XnPGLfXsgk6+jgmCoU(H3!B1<e
zrP*vTt)LkhAqh#?IH@8O1Xai+G~=oja<ku<4U$R!fT%qyFyj+KaVO;BfjArU2s}TP
zFe?tlAzSl4YG#PEui7`*Pp5B-UuLSQf}Bs~l!9D9MU<DT(haFD-WJQ0p{X8isz$hf
zpR%ZXiy)L=TYQdu<#gnWN9!Y<Z~O+HY{Qicz&8!c_W$!=k9FO|V?`j(p3wfpe~rK^
VT{kZ13xEWm4}XWX@5v8{zX5Legq8pR

diff --git a/src/css/toolbox-animated-preview.css b/src/css/toolbox-animated-preview.css
index 452a48d8..1d5bbc15 100644
--- a/src/css/toolbox-animated-preview.css
+++ b/src/css/toolbox-animated-preview.css
@@ -54,7 +54,7 @@
 }
 
 .preview-toggle-onion-skin {
-  font-size: 1.6rem;
+  font-size: 2rem;
   color: #aaa;
   float: left;
   line-height: 26px;
diff --git a/src/css/toolbox-layers-list.css b/src/css/toolbox-layers-list.css
index 662274fb..052a5013 100644
--- a/src/css/toolbox-layers-list.css
+++ b/src/css/toolbox-layers-list.css
@@ -15,11 +15,11 @@
 
 .layers-toggle-preview {
   position: absolute;
-  top : 0.9em;
-  right: 3.3em;
+  top: 0.3em;
+  right: 2em;
 
   color: #999;
-  font-size: 0.8em;
+  font-size: 1.3em;
   cursor: pointer;
 
   transition: 0.2s linear;