diff --git a/app.js b/app.js
deleted file mode 100644
index f1737e9b..00000000
--- a/app.js
+++ /dev/null
@@ -1,149 +0,0 @@
-$(function() {
- _init('.keymap--edit');
-
- $('.notification').on('click', '.notification__dismiss', function(e) {
- $('.notification').hide();
- }).on('click', '.notification__action--undo', function(e) {
- $('.notification').hide();
- $('.sidebar__level-2--item:hidden').show().click();
- });;
-
- $(function () {
- $('[data-toggle="tooltip"]').tooltip()
- });
-
- // =======================
- // Menu-item functionality LEGACY TODO remove
- // =======================
- $('.pane-title__name, .pane-title__abbrev').on('mouseover', function() {
- $(this).addClass('active');
- }).on('mouseout', function() {
- if (!$(this).is(':focus')) {
- $(this).removeClass('active');
- }
- }).on('focusout', function() {
- $(this).removeClass('active');
- });
-
- $('.keymap__is-default').on('click', function() {
- $(this).toggleClass('fa-star-o');
- });
-
- // ========================
- // Keymap related settings.
- // ========================
- $('button.uhk__layer-switcher').on('click', function(e) {
- var button = $(this),
- layerOrder = ['base', 'mod', 'fn', 'mouse'],
- currentButton = $('button.uhk__layer-switcher.current'),
- slideLayer = button.data('layer'),
- slideNumber = layerOrder.indexOf(slideLayer),
- currentSlideLayer = currentButton.data('layer'),
- currentSlideNumber = layerOrder.indexOf(currentSlideLayer),
- slide = $('.uhk__layer-wrapper--' + slideLayer),
- currentSlide = $('.uhk__layer-wrapper.current'),
- slideWidth = currentSlide.width() + 'px';
-
- if (slideNumber < currentSlideNumber) {
- // From left to right
- currentSlide.css('left', 0);
- slide.css('left', '-' + slideWidth);
-
- currentSlide.animate({left: slideWidth}, function() {
- $(this).removeClass('current');
- });
- slide.animate({left: 0}, function() {
- $(this).addClass('current');
- });
-
- currentButton.removeClass('current btn-primary').addClass('btn-default');
- button.addClass('current btn-primary').removeClass('btn-default').blur();
- } else if (slideNumber != currentSlideNumber) {
- // From right to left
- currentSlide.css({left: 0});
- slide.css({left: slideWidth});
-
- currentSlide.animate({left: '-' + slideWidth}, function() {
- $(this).removeClass('current');
- });
- slide.animate({left: 0}, function() {
- $(this).addClass('current');
- });
-
- currentButton.removeClass('current btn-primary').addClass('btn-default');
- button.addClass('current btn-primary').addClass('btn-default').blur();
- }
- });
-
- $('.keymap__remove').on('click', function(e) {
- // Mimic the removal of a keymap with undo option.
- $('.sidebar__level-2--item:hidden').remove();
- $('.sidebar__level-2--item.active').hide();
-
- // Show the factory keymap after removal of a keymap.
- $('.sidebar__level-2--item:first').click();
- $('.notification').show();
- });
-
- // Based on: http://stackoverflow.com/a/24933495
- $('img.uhk').each(function(){
- var $img = $(this);
- var imgID = $img.attr('id');
- var imgClass = $img.attr('class');
- var imgURL = $img.attr('src');
- var imgSelector = '.' + imgClass.replace(' ', '.')
-
- $.get(imgURL, function(data) {
- // Get the SVG tag, ignore the rest
- var $svg = $(data).find('svg');
-
- // Add replaced image's ID to the new SVG
- if(typeof imgID !== 'undefined') {
- $svg = $svg.attr('id', imgID);
- }
- // Add replaced image's classes to the new SVG
- if(typeof imgClass !== 'undefined') {
- $svg = $svg.attr('class', imgClass+' replaced-svg');
- }
-
- // Remove any invalid XML tags as per http://validator.w3.org
- $svg = $svg.removeAttr('xmlns:a');
-
- // Check if the viewport is set, else we gonna set it if we can.
- if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
- $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
- }
-
- // Replace image with new SVG
- $img.replaceWith($svg);
- $('.keyboard-slider').height($svg.height());
-
- // Quick fix as jQuery 2.1.4 addClass() method is not working on SVG elements.
- var finalClasses = $svg.attr('class');
-
- $('#left-parts rect, #right-parts rect', imgSelector).on('click', function() {
- var _popup = $('.key-editor__popup'),
- rectB7 = $('rect#b7', $svg);
- if (_popup.is(':hidden')) {
- $svg.attr('class', finalClasses + ' faded');
- _popup.show();
- rectB7.attr('class', 'active');
- } else {
- $svg.attr('class', finalClasses);
- _popup.hide();
- rectB7.attr('class', '');
- }
- });
-
- }, 'xml');
- });
-});
-
-function _init(view) {
- switch (view) {
- case '.keymap--edit':
- var h = $('.uhk--base-layer').height();
- $('.keyboard-slider').height(h + 'px');
- break;
- }
-}
diff --git a/assets/compiled_sprite.svg b/assets/compiled_sprite.svg
index 90a59839..625da678 100644
--- a/assets/compiled_sprite.svg
+++ b/assets/compiled_sprite.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/css/app.css b/css/app.css
deleted file mode 100644
index 0d273ea9..00000000
--- a/css/app.css
+++ /dev/null
@@ -1,195 +0,0 @@
-.main-content {
- margin-left: 250px; }
-
-.sidebar-menu {
- background-color: #f5f5f5;
- border-right: 1px solid #ccc;
- position: fixed;
- overflow-y: auto;
- width: 250px;
- height: 100%; }
-
-ul {
- padding: 0;
- margin: 0; }
- ul li {
- list-style: none;
- padding: 0; }
-
-.sidebar__level-1 {
- padding: 0.5rem 1rem;
- font-size: 2rem;
- line-height: 3rem; }
- .sidebar__level-1--item {
- margin-top: 0; }
- .sidebar__level-1--item:nth-child(1) {
- margin: 0; }
- .sidebar__level-1 .fa-chevron-up,
- .sidebar__level-1 .fa-chevron-down {
- margin-right: 1rem;
- font-size: 1.5rem;
- position: relative;
- top: 0.5rem;
- display: none; }
- .sidebar__level-1:hover .fa-chevron-up,
- .sidebar__level-1:hover .fa-chevron-down {
- display: inline-block; }
-
-.sidebar__level-1, .sidebar__level-2 {
- padding-left: 15px; }
-
-.sidebar__level-2 {
- margin-left: 15px; }
- .sidebar__level-2--item {
- padding: 0 20px 0 0; }
- .sidebar__level-2--item.active {
- background-color: #555;
- color: #fff; }
- .sidebar__level-2--item.active .fa-star {
- color: #fff; }
- .sidebar__level-2--item.active:hover {
- background-color: #555; }
- .sidebar__level-2--item .fa.pull-right {
- position: relative;
- top: 2px; }
- .sidebar__level-2--item .fa-star {
- color: #666; }
-
-.sidebar__level-1:hover, .sidebar__level-2--item:hover {
- cursor: pointer;
- background-color: rgba(0, 0, 0, 0.05); }
-
-.menu--bottom {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%; }
- .menu--bottom .sidebar__level-1 {
- background-color: transparent;
- padding: 1rem; }
-
-.pane-title {
- margin-bottom: 1em; }
- .pane-title__name[contenteditable=true], .pane-title__abbrev[contenteditable=true] {
- border: none;
- border-bottom: 2px dotted #999;
- padding: 0 0.5rem;
- margin: 0 0.25rem; }
- .pane-title__name[contenteditable=true].active, .pane-title__abbrev[contenteditable=true].active {
- box-shadow: 0 0 0 1px #ccc, 0 0 5px 0 #ccc;
- border-color: transparent; }
-
-.keymap__is-default.fa-star {
- color: #333; }
-
-.keymap__is-default.fa-star-o {
- color: #333; }
-
-.keymap__is-default:hover {
- color: #555;
- cursor: pointer; }
-
-.keymap__remove {
- font-size: 0.75em;
- top: 0.3em; }
- .keymap__remove:hover {
- cursor: pointer;
- color: #900; }
-
-.notification {
- padding: 1rem 1.5rem;
- box-shadow: 0 0 0 1px #000;
- border-radius: 0.5rem;
- position: absolute;
- top: 2rem;
- right: 2rem;
- z-index: 2000;
- background-color: #333;
- color: #eee; }
- .notification__action {
- margin-left: 1rem;
- margin-right: 1rem;
- color: #5bc0de;
- text-transform: uppercase;
- font-weight: bold; }
- .notification__action:focus, .notification__action:active, .notification__action:hover {
- text-decoration: none;
- color: #5bc0de; }
- .notification__dismiss {
- position: relative;
- bottom: 1px;
- color: #ccc; }
- .notification__dismiss:hover {
- cursor: pointer;
- color: #fff; }
-
-.uhk__layer-switcher--wrapper {
- position: relative; }
- .uhk__layer-switcher--wrapper:before {
- content: attr(data-title);
- display: inline-block;
- position: absolute;
- bottom: -0.3em;
- right: 100%;
- font-size: 2.4rem;
- padding-right: 0.25em;
- margin: 0; }
-
-.keyboard-slider {
- position: relative;
- overflow: hidden;
- width: 100%;
- height: auto; }
- .keyboard-slider .uhk__layer-wrapper {
- width: 100%;
- height: auto;
- text-align: center;
- position: absolute;
- left: 100%; }
- .keyboard-slider .uhk__layer-wrapper.current {
- left: 0; }
- .keyboard-slider .uhk__layer-wrapper .uhk {
- max-width: 100%;
- width: 98%; }
-
-.key-editor__popup {
- border: none;
- width: 0;
- height: 0;
- position: absolute;
- top: 215px;
- left: 50%;
- margin-left: -310px; }
-
-svg.uhk rect.active {
- fill: #337ab7; }
-
-/* GitHub ribbon */
-.github-fork-ribbon {
- background-color: #a00;
- overflow: hidden;
- white-space: nowrap;
- position: fixed;
- right: -50px;
- bottom: 40px;
- z-index: 2000;
- /* stylelint-disable indentation */
- -webkit-transform: rotate(-45deg);
- -moz-transform: rotate(-45deg);
- -ms-transform: rotate(-45deg);
- -o-transform: rotate(-45deg);
- transform: rotate(-45deg);
- -webkit-box-shadow: 0 0 10px #888;
- -moz-box-shadow: 0 0 10px #888;
- box-shadow: 0 0 10px #888;
- /* stylelint-enable indentation */ }
- .github-fork-ribbon a {
- border: 1px solid #faa;
- color: #fff;
- display: block;
- font: bold 81.25% 'Helvetica Neue', Helvetica, Arial, sans-serif;
- margin: 1px 0;
- padding: 10px 50px;
- text-align: center;
- text-decoration: none;
- text-shadow: 0 0 5px #444; }
diff --git a/css/macro.css b/css/macro.css
deleted file mode 100644
index f35d89d6..00000000
--- a/css/macro.css
+++ /dev/null
@@ -1,76 +0,0 @@
-.main-wrapper {
- width: 500px; }
-
-h1 {
- margin-bottom: 3rem; }
-
-.action--item {
- padding-left: 8px; }
-
-.action--item.active,
-.action--item.active:hover {
- background-color: white;
- font-weight: bold;
- color: black;
- border-color: black;
- z-index: 10; }
-
-.macro-settings {
- border: 1px solid black;
- border-top-color: #999;
- z-index: 100; }
-
-.macro-settings .helper {
- position: absolute;
- display: block;
- height: 13px;
- background: #fff;
- width: 100%;
- left: 0;
- top: -14px; }
-
-.action--item.active.callout,
-.macro-settings.callout {
- box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5); }
-
-.list-group-item .move-handle:hover {
- cursor: move; }
-
-.action--edit {
- float: right; }
-
-.action--edit:hover {
- color: #337ab7;
- cursor: pointer; }
-
-.action--trash {
- float: right;
- margin-right: 1rem; }
-
-.action--trash:hover {
- color: #d9534f;
- cursor: pointer; }
-
-.action--edit__form {
- background-color: whtie;
- margin-left: -0.5rem;
- margin-right: -15px;
- margin-top: 15px;
- padding-top: 15px;
- border-top: 1px solid #ddd; }
-
-.flex-button-wrapper {
- display: flex;
- flex-direction: row-reverse; }
-
-.flex-button {
- align-self: flex-end; }
-
-.add-new__action-item:hover {
- cursor: pointer; }
-
-.add-new__action-item--link,
-.add-new__action-item--link:active,
-.add-new__action-item--link:hover {
- text-decoration: none;
- color: #337ab7; }
diff --git a/css/style.css b/css/style.css
deleted file mode 100644
index e71f5f3e..00000000
--- a/css/style.css
+++ /dev/null
@@ -1,127 +0,0 @@
-.popover {
- padding: 0; }
- .popover.bottom > .arrow {
- border-bottom-color: #000; }
- .popover.bottom > .arrow:after {
- border-bottom-color: #f7f7f7; }
-
-.popover-content {
- padding: 10px 24px; }
-
-.popover-title.menu-tabs {
- padding: 0.5rem 0.5rem 0;
- display: block; }
- .popover-title.menu-tabs .nav-tabs {
- position: relative;
- top: 1px; }
-
-.popover-title.menu-button-group {
- display: none; }
-
-.popover-actions {
- padding: 8px 14px;
- margin: 0;
- font-size: 14px;
- background-color: #f7f7f7;
- border-top: 1px solid #ebebeb;
- border-radius: 0 0 5px 5px;
- text-align: right; }
-
-.select2-container {
- z-index: 100; }
-
-.nav-tabs > li > a {
- cursor: pointer; }
-
-.scancode--searchterm {
- color: lightgray;
- float: right; }
-
-.layout-abbreviation {
- font-weight: bold;
- color: #fff;
- background: #333;
- padding: 4px 8px;
- font-family: monospace;
- margin-right: 0.5em; }
-
-.layout-preview img {
- max-width: 100%;
- margin-top: 10px; }
-
-.key-editor--none__description p {
- padding: 2rem 0;
- margin: 0;
- text-align: center; }
-
-.select2-item {
- position: relative;
- font-size: 1.5rem; }
- .select2-item.keymap-name--wrapper {
- padding-left: 50px; }
- .select2-item .layout-segment-code {
- height: 2rem;
- position: absolute;
- left: 0;
- top: 50%;
- margin-top: -1rem; }
-
-.preview-wrapper img {
- max-width: 100%; }
-
-.global-key-setup.disabled {
- opacity: 0; }
- .global-key-setup.disabled .setting-label {
- color: #999; }
-
-.setting-label.disabled {
- color: #999; }
-
-.global-key-setup--wrapper {
- position: relative; }
- .global-key-setup--wrapper .disabled-state--text {
- position: absolute;
- top: 50%;
- margin-top: -4rem; }
-
-.mouse.popover-content {
- padding: 10px;
- display: flex;
- align-items: center; }
-
-.mouse__action--type .nav {
- border-right: 1px solid #ccc; }
- .mouse__action--type .nav li a {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0; }
- .mouse__action--type .nav li a.selected {
- font-style: italic; }
- .mouse__action--type .nav li.active a.selected {
- font-style: normal; }
- .mouse__action--type .nav li.active a:after {
- content: '';
- display: block;
- position: absolute;
- width: 0;
- height: 0;
- top: 0;
- right: -4rem;
- border-color: transparent transparent transparent #337ab7;
- border-style: solid;
- border-width: 2rem; }
-
-.mouse__action--config .btn-placeholder {
- visibility: hidden; }
-
-.help-text--mouse-speed {
- margin-bottom: 2rem;
- font-size: 0.9em;
- color: #666; }
- .help-text--mouse-speed p {
- margin: 0; }
-
-.select2-results {
- text-align: center; }
-
-.select2-container--default .select2-selection--single .select2-selection__rendered {
- line-height: 26px; }
diff --git a/images/icons/kbd__mouse--scroll-right.svg b/images/icons/kbd__mouse--scroll-right.svg
new file mode 100644
index 00000000..5a019e8d
--- /dev/null
+++ b/images/icons/kbd__mouse--scroll-right.svg
@@ -0,0 +1,126 @@
+
+
+
+
diff --git a/index.html b/index.html
index af98caa0..e1ca0cca 100644
--- a/index.html
+++ b/index.html
@@ -26,9 +26,7 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-
-