', {id: 'nav-container'});
- this.$el.css({padding: 0});
-
- this.embeddedPanels = [
- PipelineIndexPanel,
- ExecutionIndexPanel
- ];
- this.nextPanelIndex = 0;
- this._lm = layoutManager;
- this._params = params;
- this.$el.append(this.$nav);
- this._initialize();
-
- this.logger.debug('ctor finished');
- };
-
- //inherit from PanelBaseWithHeader
- _.extend(MainViewPanel.prototype, PanelBaseWithHeader.prototype);
- _.extend(MainViewPanel.prototype, IActivePanel.prototype);
-
- MainViewPanel.prototype._initialize = function () {
- //set Widget title
- this.setTitle('');
-
- this.widget = new MainViewWidget(this.logger, this.$nav);
-
- this.control = new MainViewControl({
- logger: this.logger,
- client: this._client,
- embedded: this._embedded,
- widget: this.widget
- });
-
- this.control.toggleEmbeddedPanel = this.toggleEmbeddedPanel.bind(this);
- var selectedObjectChanged = this.control.selectedObjectChanged;
- this.control.selectedObjectChanged = id => {
- this.getEmbeddedNode().then(nodeId =>
- this.embeddedPanel.control.selectedObjectChanged(nodeId));
- selectedObjectChanged.call(this.control, id);
- };
-
- this.toggleEmbeddedPanel(true);
- this.onActivate();
- };
-
- MainViewPanel.prototype.getEmbeddedNode = function() {
- if (this.nextPanelIndex === 1) {
- return DeepForge.places.MyPipelines();
- } else {
- return DeepForge.places.MyExecutions();
- }
- };
-
- MainViewPanel.prototype.toggleEmbeddedPanel = function (silent) {
- var Panel = this.embeddedPanels[this.nextPanelIndex];
- this.nextPanelIndex = (this.nextPanelIndex + 1) % this.embeddedPanels.length;
-
- if (this.embeddedPanel) { // Remove current
- this.embeddedPanel.destroy();
- this.$embedded.remove();
- }
-
- this.embeddedPanel = new Panel(this._lm, this._params);
- this.$embedded = this.embeddedPanel.$el;
- this.$embedded.addClass('main-view-embedded');
- this.$el.append(this.$embedded);
-
- // Call on Resize and selectedObjectChanged
- this.onResize(this.width, this.height);
- if (!silent) {
- this.getEmbeddedNode().then(nodeId =>
- this.embeddedPanel.control.selectedObjectChanged(nodeId));
- }
- };
-
- /* OVERRIDE FROM WIDGET-WITH-HEADER */
- /* METHOD CALLED WHEN THE WIDGET'S READ-ONLY PROPERTY CHANGES */
- MainViewPanel.prototype.onReadOnlyChanged = function (isReadOnly) {
- //apply parent's onReadOnlyChanged
- PanelBaseWithHeader.prototype.onReadOnlyChanged.call(this, isReadOnly);
-
- };
-
- MainViewPanel.prototype.onResize = function (width, height) {
- var navWidth,
- embeddedWidth;
-
- this.logger.debug('onResize --> width: ' + width + ', height: ' + height);
- this.widget.onWidgetContainerResize(width, height);
- navWidth = this.widget.width();
- embeddedWidth = width-navWidth;
- this.$embedded.css({
- width: embeddedWidth,
- height: height,
- left: navWidth,
- margin: 'inherit'
- });
- this.embeddedPanel.onResize(embeddedWidth, height);
- this.width = width;
- this.height = height;
- };
-
- /* * * * * * * * Visualizer life cycle callbacks * * * * * * * */
- MainViewPanel.prototype.destroy = function () {
- this.control.destroy();
- this.widget.destroy();
-
- PanelBaseWithHeader.prototype.destroy.call(this);
- WebGMEGlobal.KeyboardManager.setListener(undefined);
- WebGMEGlobal.Toolbar.refresh();
- };
-
- MainViewPanel.prototype.onActivate = function () {
- this.widget.onActivate();
- this.control.onActivate();
- WebGMEGlobal.KeyboardManager.setListener(this.widget);
- WebGMEGlobal.Toolbar.refresh();
- };
-
- MainViewPanel.prototype.onDeactivate = function () {
- this.widget.onDeactivate();
- this.control.onDeactivate();
- WebGMEGlobal.KeyboardManager.setListener(undefined);
- WebGMEGlobal.Toolbar.refresh();
- };
-
- return MainViewPanel;
-});
diff --git a/src/visualizers/panels/PipelineEditor/PipelineEditorControl.js b/src/visualizers/panels/PipelineEditor/PipelineEditorControl.js
index 0ed5ddc..eef5e96 100644
--- a/src/visualizers/panels/PipelineEditor/PipelineEditorControl.js
+++ b/src/visualizers/panels/PipelineEditor/PipelineEditorControl.js
@@ -4,7 +4,7 @@
define([
'deepforge/Constants',
'js/Constants',
- 'panels/EasyDAG/EasyDAGControl',
+ 'deepforge/viz/panels/ThumbnailControl',
'deepforge/viz/PipelineControl',
'deepforge/viz/Execute',
'deepforge/globals',
@@ -15,7 +15,7 @@ define([
], function (
CONSTANTS,
GME_CONSTANTS,
- EasyDAGControl,
+ ThumbnailControl,
PipelineControl,
Execute,
DeepForge,
@@ -40,7 +40,7 @@ define([
DECORATORS[CONSTANTS.OP.INPUT] = 'ArtifactOpDecorator';
PipelineEditorControl = function (options) {
- EasyDAGControl.call(this, options);
+ ThumbnailControl.call(this, options);
Execute.call(this, this._client, this._logger);
this.addedIds = {};
this.executionTerritory = {};
@@ -52,7 +52,7 @@ define([
_.extend(
PipelineEditorControl.prototype,
- EasyDAGControl.prototype,
+ ThumbnailControl.prototype,
PipelineControl.prototype,
Execute.prototype
);
@@ -138,12 +138,11 @@ define([
};
PipelineEditorControl.prototype._initWidgetEventHandlers = function () {
- EasyDAGControl.prototype._initWidgetEventHandlers.call(this);
+ ThumbnailControl.prototype._initWidgetEventHandlers.call(this);
this._widget.getExistingPortMatches = this.getExistingPortMatches.bind(this);
this._widget.createConnection = this.createConnection.bind(this);
this._widget.removeConnection = this.removeConnection.bind(this);
this._widget.getDecorator = this.getDecorator.bind(this);
- this._widget.updateThumbnail = this.updateThumbnail.bind(this);
};
PipelineEditorControl.prototype.isContainedInActive = function (gmeId) {
@@ -159,7 +158,7 @@ define([
this.addedIds[desc.id] = true;
// Validate any connections
if (this.isValid(desc)) {
- return EasyDAGControl.prototype._onLoad.call(this, gmeId);
+ return ThumbnailControl.prototype._onLoad.call(this, gmeId);
}
} else if (desc.parentId !== null &&
this.isContainedInActive(desc.parentId) && desc.isDataPort) {
@@ -198,7 +197,7 @@ define([
if(this.addedIds[gmeId]) {
delete this.addedIds[gmeId];
- return EasyDAGControl.prototype._onUnload.call(this, gmeId);
+ return ThumbnailControl.prototype._onUnload.call(this, gmeId);
}
};
@@ -587,7 +586,7 @@ define([
if (this.executionUI) {
this._client.removeUI(this, this.executionEvents.bind(this));
}
- EasyDAGControl.prototype._detachClientEventListeners.call(this);
+ ThumbnailControl.prototype._detachClientEventListeners.call(this);
};
////////////////////// Execution Support END //////////////////////
@@ -637,28 +636,6 @@ define([
}
};
- PipelineEditorControl.prototype.updateThumbnail = function (svg) {
- var node = this._client.getNode(this._currentNodeId),
- name,
- attrs,
- currentThumbnail,
- attrName = 'thumbnail',
- msg;
-
- if (node) { // may have been deleted
- name = node.getAttribute('name');
- attrs = node.getValidAttributeNames();
- currentThumbnail = node.getAttribute(attrName);
- msg = `Updating pipeline thumbnail for "${name}"`;
-
- if (attrs.indexOf(attrName) > -1 && currentThumbnail !== svg) {
- this._client.startTransaction(msg);
- this._client.setAttributes(this._currentNodeId, attrName, svg);
- this._client.completeTransaction();
- }
- }
- };
-
////////////////////// Criterion Support //////////////////////
PipelineEditorControl.prototype._getValidTargetsFor = function (id, ptr) {
// Check if the pointer is a Criterion pointer -> if so, only show the meta types
@@ -681,7 +658,7 @@ define([
};
});
} else {
- return EasyDAGControl.prototype._getValidTargetsFor.apply(this, arguments);
+ return ThumbnailControl.prototype._getValidTargetsFor.apply(this, arguments);
}
};
diff --git a/src/visualizers/panels/PipelineIndex/PipelineIndexControl.js b/src/visualizers/panels/PipelineIndex/PipelineIndexControl.js
index b7ce476..b880b82 100644
--- a/src/visualizers/panels/PipelineIndex/PipelineIndexControl.js
+++ b/src/visualizers/panels/PipelineIndex/PipelineIndexControl.js
@@ -102,20 +102,20 @@ define([
// This next function retrieves the relevant node information for the widget
PipelineIndexControl.prototype._getObjectDescriptor = function (nodeId) {
var node = this._client.getNode(nodeId),
+ base,
objDescriptor;
if (node) {
+ base = this._client.getNode(node.getBaseId());
objDescriptor = {
- id: undefined,
- name: undefined,
- parentId: undefined,
+ id: node.getId(),
+ name: node.getAttribute(nodePropertyNames.Attributes.name),
+ parentId: node.getParentId(),
thumbnail: node.getAttribute('thumbnail'),
+ type: base.getAttribute('name'),
executionCount: node.getMemberIds('executions').length
};
- objDescriptor.id = node.getId();
- objDescriptor.name = node.getAttribute(nodePropertyNames.Attributes.name);
- objDescriptor.parentId = node.getParentId();
}
return objDescriptor;
diff --git a/src/visualizers/panels/Sidebar/SidebarPanel.js b/src/visualizers/panels/Sidebar/SidebarPanel.js
new file mode 100644
index 0000000..3807c24
--- /dev/null
+++ b/src/visualizers/panels/Sidebar/SidebarPanel.js
@@ -0,0 +1,159 @@
+/*globals define, WebGMEGlobal*/
+/*jshint browser: true*/
+
+define([
+ 'js/Constants',
+ 'js/PanelBase/PanelBase',
+ 'panels/AutoViz/AutoVizPanel',
+ 'widgets/Sidebar/SidebarWidget',
+ 'deepforge/globals',
+ 'q'
+], function (
+ CONSTANTS,
+ PanelBase,
+ AutoVizPanel,
+ SidebarWidget,
+ DeepForge,
+ Q
+) {
+ 'use strict';
+
+ var SidebarPanel,
+ CATEGORY_TO_PLACE = {
+ pipelines: 'MyPipelines',
+ executions: 'MyExecutions',
+ architectures: 'MyArchitectures',
+ artifacts: 'MyArtifacts'
+ };
+
+ SidebarPanel = function (layoutManager, params) {
+ var opts = {};
+ opts[PanelBase.OPTIONS.LOGGER_INSTANCE_NAME] = 'SidebarPanel';
+ PanelBase.call(this, opts);
+
+ this._client = params.client;
+ this._embedded = params.embedded;
+
+ this._lm = layoutManager;
+ this._params = params;
+ this._panels = {};
+ this._initialize();
+
+ this.logger.debug('ctor finished');
+ };
+
+ SidebarPanel.prototype = Object.create(PanelBase.prototype);
+ SidebarPanel.prototype._initialize = function () {
+ this.widget = new SidebarWidget(this.logger, this.$el);
+ this.widget.getProjectName = this.getProjectName.bind(this);
+ this.widget.updateLibraries = this.updateLibraries.bind(this);
+ this.widget.checkLibUpdates = this.checkLibUpdates.bind(this);
+ this.widget.setEmbeddedPanel = this.setEmbeddedPanel.bind(this);
+
+ this.setEmbeddedPanel('pipelines');
+ this.onActivate();
+ };
+
+ SidebarPanel.prototype.setEmbeddedPanel = function (category) {
+ var placeName = CATEGORY_TO_PLACE[category];
+
+ return DeepForge.places[placeName]()
+ .then(nodeId => WebGMEGlobal.State.registerActiveObject(nodeId));
+ };
+
+ SidebarPanel.prototype.selectedObjectChanged = function (nodeId) {
+ var categories,
+ category,
+ place;
+
+ if (typeof nodeId === 'string') {
+ categories = Object.keys(CATEGORY_TO_PLACE);
+
+ Q.all(categories.map(category => {
+ place = CATEGORY_TO_PLACE[category];
+ return DeepForge.places[place]();
+ }))
+ .then(nodeIdPrefixes => {
+ for (var i = nodeIdPrefixes.length; i--;) {
+ if (nodeId.indexOf(nodeIdPrefixes[i]) > -1) {
+ category = categories[i];
+ return this.widget.highlight(category);
+ }
+ }
+ });
+ }
+ };
+
+ /* OVERRIDE FROM WIDGET-WITH-HEADER */
+ SidebarPanel.prototype.onResize = function (width, height) {
+ var navWidth,
+ embeddedWidth;
+
+ this.logger.debug('onResize --> width: ' + width + ', height: ' + height);
+ navWidth = this.widget.width();
+ embeddedWidth = width-navWidth;
+ if (this.embeddedPanel) {
+ this.$embedded.css({
+ width: embeddedWidth,
+ height: height,
+ left: navWidth,
+ margin: 'inherit'
+ });
+ this.embeddedPanel.onResize(embeddedWidth, height);
+ }
+ this.width = width;
+ this.height = height;
+ };
+
+ /* * * * * * * * Visualizer life cycle callbacks * * * * * * * */
+ SidebarPanel.prototype.destroy = function () {
+ this.widget.destroy();
+ this.$el.remove();
+ WebGMEGlobal.KeyboardManager.setListener(undefined);
+ WebGMEGlobal.Toolbar.refresh();
+ };
+
+ SidebarPanel.prototype._stateActiveObjectChanged = function (model, activeObjectId) {
+ this.selectedObjectChanged(activeObjectId);
+ };
+
+ SidebarPanel.prototype.onActivate = function () {
+ WebGMEGlobal.State.on('change:' + CONSTANTS.STATE_ACTIVE_OBJECT, this._stateActiveObjectChanged, this);
+ this.widget.onActivate();
+ WebGMEGlobal.KeyboardManager.setListener(this.widget);
+ WebGMEGlobal.Toolbar.refresh();
+ };
+
+ SidebarPanel.prototype.onDeactivate = function () {
+ WebGMEGlobal.State.off('change:' + CONSTANTS.STATE_ACTIVE_OBJECT, this._stateActiveObjectChanged);
+ this.widget.onDeactivate();
+ WebGMEGlobal.KeyboardManager.setListener(undefined);
+ WebGMEGlobal.Toolbar.refresh();
+ };
+
+ /* * * * * * * * Library Updates * * * * * * * */
+
+ SidebarPanel.prototype.getProjectName = function () {
+ var projectId = this._client.getActiveProjectId();
+ return projectId && projectId.split('+')[1];
+ };
+
+ SidebarPanel.prototype.checkLibUpdates = function () {
+ var pluginId = 'CheckLibraries',
+ context = this._client.getCurrentPluginContext(pluginId);
+
+ return Q.ninvoke(this._client, 'runServerPlugin', pluginId, context)
+ .then(res => {
+ return res.messages.map(msg => msg.message.split(' '));
+ });
+ };
+
+ SidebarPanel.prototype.updateLibraries = function (libraries) {
+ var promises = libraries
+ .map(lib => Q.ninvoke(this._client, 'updateLibrary', lib[0], lib[1]));
+
+ return Q.all(promises);
+ };
+
+ return SidebarPanel;
+});
diff --git a/src/visualizers/panels/WorkerHeader/NodePathNavWithHiddenNodes.js b/src/visualizers/panels/WorkerHeader/NodePathNavWithHiddenNodes.js
new file mode 100644
index 0000000..0daaae3
--- /dev/null
+++ b/src/visualizers/panels/WorkerHeader/NodePathNavWithHiddenNodes.js
@@ -0,0 +1,80 @@
+/* globals define, WebGMEGlobal*/
+define([
+ 'js/Constants',
+ 'panels/BreadcrumbHeader/NodePathNavigator'
+], function(
+ CONSTANTS,
+ NodePathNavigator
+) {
+ var NodePathWithHidden = function() {
+ NodePathNavigator.apply(this, arguments);
+ };
+
+ NodePathWithHidden.prototype = Object.create(NodePathNavigator.prototype);
+
+ NodePathWithHidden.prototype.getNodePath = function() {
+ var nodeIds = NodePathNavigator.prototype.getNodePath.apply(this, arguments),
+ lastRootChildIndex = -1,
+ node,
+ i;
+
+ // Treat any nodeIds in the root object as the same node then remove them
+ // Hide any nodeIds in the root object
+ for (i = nodeIds.length; i-- && lastRootChildIndex === -1;) {
+ node = this.client.getNode(nodeIds[i]);
+ if (node.getParentId() === CONSTANTS.PROJECT_ROOT_ID) {
+ lastRootChildIndex = i;
+ }
+ }
+
+ if (lastRootChildIndex > -1) {
+ for (i = 1; i <= lastRootChildIndex; i++) {
+ delete this.territories[nodeIds[i]];
+ }
+ nodeIds.splice(1, lastRootChildIndex);
+ }
+
+ return nodeIds;
+ };
+
+ NodePathWithHidden.prototype.addNode = function(id, isActive) {
+ if (id === CONSTANTS.PROJECT_ROOT_ID && !isActive) {
+ var item = document.createElement('li'),
+ anchor = document.createElement('a');
+
+ this._nodes[id] = anchor;
+ item.appendChild(anchor);
+ item.addEventListener('click', () => {
+ var nodeId = this._nodeHistory[1],
+ node;
+
+ if (nodeId) {
+ // Get the id for the child of the root node
+ node = this.client.getNode(nodeId);
+ if (node.getParentId() !== CONSTANTS.PROJECT_ROOT_ID) {
+ nodeId = node.getParentId();
+ }
+ } else {
+ // Try to load the 'MyPipelines' child of the root node
+ node = this.client.getNode(CONSTANTS.PROJECT_ROOT_ID)
+ // Get the child nodes
+ .getChildrenIds().map(id => this.client.getNode(id))
+ // Find the child named 'MyPipelines'
+ .find(child => child && child.getAttribute('name') === 'MyPipelines');
+
+ if (node) {
+ nodeId = node.getId();
+ }
+ }
+ // If none are loaded, try to register MyPipelines
+ WebGMEGlobal.State.registerActiveObject(nodeId || id);
+ });
+ this.territories[id] = {children: 0};
+ this.pathContainer.append(item);
+ } else {
+ return NodePathNavigator.prototype.addNode.apply(this, arguments);
+ }
+ };
+
+ return NodePathWithHidden;
+});
diff --git a/src/visualizers/panels/WorkerHeader/WorkerHeaderPanel.js b/src/visualizers/panels/WorkerHeader/WorkerHeaderPanel.js
index ff1403a..c89b3f9 100644
--- a/src/visualizers/panels/WorkerHeader/WorkerHeaderPanel.js
+++ b/src/visualizers/panels/WorkerHeader/WorkerHeaderPanel.js
@@ -1,20 +1,22 @@
-/*globals define, angular, _,*/
+/*globals define, angular, _, $, WebGMEGlobal*/
/*jshint browser: true*/
define([
+ 'js/Panels/Header/HeaderPanel',
'panels/BreadcrumbHeader/BreadcrumbHeaderPanel',
'js/Widgets/UserProfile/UserProfileWidget',
'js/Widgets/ConnectedUsers/ConnectedUsersWidget',
'js/Panels/Header/DefaultToolbar',
- 'panels/BreadcrumbHeader/NodePathNavigator',
+ './NodePathNavWithHiddenNodes',
'js/Toolbar/Toolbar',
'./ProjectNavigatorController'
], function (
+ HeaderBase,
BreadcrumbHeader,
UserProfileWidget,
ConnectedUsersWidget,
DefaultToolbar,
- NodePathNavigator,
+ NodePathNavWithHiddenNodes,
Toolbar,
ProjectNavigatorController
) {
@@ -30,11 +32,22 @@ define([
_.extend(HeaderPanel.prototype, BreadcrumbHeader.prototype);
HeaderPanel.prototype._initialize = function () {
- BreadcrumbHeader.prototype._initialize.call(this);
- var app = angular.module('gmeApp');
+ HeaderBase.prototype._initialize.call(this);
+ var app = angular.module('gmeApp'),
+ nodePath = new NodePathNavWithHiddenNodes({
+ container: $('
', {class: 'toolbar-container'}),
+ client: this._client,
+ logger: this.logger
+ });
app.controller('ProjectNavigatorController', ['$scope', 'gmeClient', '$timeout', '$window', '$http',
ProjectNavigatorController]);
+
+ this.$el.find('.toolbar-container').remove();
+ this.$el.append(nodePath.$el);
+
+ WebGMEGlobal.Toolbar = Toolbar.createToolbar($('
'));
+ new DefaultToolbar(this._client);
};
return HeaderPanel;
diff --git a/src/visualizers/widgets/ArchEditor/ArchEditorWidget.js b/src/visualizers/widgets/ArchEditor/ArchEditorWidget.js
index b89cd0f..9df9a73 100644
--- a/src/visualizers/widgets/ArchEditor/ArchEditorWidget.js
+++ b/src/visualizers/widgets/ArchEditor/ArchEditorWidget.js
@@ -3,7 +3,7 @@
define([
'deepforge/globals',
- 'widgets/EasyDAG/EasyDAGWidget',
+ 'deepforge/viz/widgets/Thumbnail',
'widgets/EasyDAG/AddNodeDialog',
'./SelectionManager',
'./Layer',
@@ -12,7 +12,7 @@ define([
'css!./styles/ArchEditorWidget.css'
], function (
DeepForge,
- EasyDAGWidget,
+ ThumbnailWidget,
AddNodeDialog,
SelectionManager,
Layer,
@@ -26,12 +26,12 @@ define([
WIDGET_CLASS = 'arch-editor';
ArchEditorWidget = function (logger, container) {
- EasyDAGWidget.call(this, logger, container);
+ ThumbnailWidget.call(this, logger, container);
this.$el.addClass(WIDGET_CLASS);
this._emptyMsg = 'Click to add a new layer';
};
- _.extend(ArchEditorWidget.prototype, EasyDAGWidget.prototype);
+ _.extend(ArchEditorWidget.prototype, ThumbnailWidget.prototype);
ArchEditorWidget.prototype.ItemClass = Layer;
ArchEditorWidget.prototype.SelectionManager = SelectionManager;
diff --git a/src/visualizers/widgets/ArchIndex/ArchIndexWidget.js b/src/visualizers/widgets/ArchIndex/ArchIndexWidget.js
new file mode 100644
index 0000000..a1f72c5
--- /dev/null
+++ b/src/visualizers/widgets/ArchIndex/ArchIndexWidget.js
@@ -0,0 +1,22 @@
+/*globals define */
+/*jshint browser: true*/
+
+define([
+ 'widgets/PipelineIndex/PipelineIndexWidget'
+], function (
+ PipelineIndexWidget
+) {
+ 'use strict';
+
+ var ArchIndexWidget = function () {
+ PipelineIndexWidget.apply(this, arguments);
+ };
+
+ ArchIndexWidget.prototype = Object.create(PipelineIndexWidget.prototype);
+
+ ArchIndexWidget.prototype.getEmptyMsg = function() {
+ return 'No Existing Architectures...';
+ };
+
+ return ArchIndexWidget;
+});
diff --git a/src/visualizers/widgets/ArchIndex/styles/ArchIndexWidget.css b/src/visualizers/widgets/ArchIndex/styles/ArchIndexWidget.css
new file mode 100644
index 0000000..d8a654a
--- /dev/null
+++ b/src/visualizers/widgets/ArchIndex/styles/ArchIndexWidget.css
@@ -0,0 +1,10 @@
+/**
+ * This file is for any css that you may want for this visualizer.
+ *
+ * Ideally, you would use the scss file also provided in this directory
+ * and then generate this file automatically from that. However, you can
+ * simply write css if you prefer
+ */
+
+.arch-index {
+ outline: none; }
diff --git a/src/visualizers/widgets/ArchIndex/styles/ArchIndexWidget.scss b/src/visualizers/widgets/ArchIndex/styles/ArchIndexWidget.scss
new file mode 100644
index 0000000..d5c86e1
--- /dev/null
+++ b/src/visualizers/widgets/ArchIndex/styles/ArchIndexWidget.scss
@@ -0,0 +1,7 @@
+/**
+ * This file is for any scss that you may want for this visualizer.
+ */
+
+.arch-index {
+ outline: none;
+}
diff --git a/src/visualizers/widgets/ArtifactIndex/ArtifactIndexWidget.js b/src/visualizers/widgets/ArtifactIndex/ArtifactIndexWidget.js
new file mode 100644
index 0000000..169903f
--- /dev/null
+++ b/src/visualizers/widgets/ArtifactIndex/ArtifactIndexWidget.js
@@ -0,0 +1,88 @@
+/*globals define, $*/
+/*jshint browser: true*/
+
+define([
+ './ModelItem',
+ 'text!./Table.html',
+ 'css!./styles/ArtifactIndexWidget.css'
+], function (
+ ModelItem,
+ TABLE_HTML
+) {
+ 'use strict';
+
+ var ArtifactIndexWidget,
+ WIDGET_CLASS = 'artifact-index',
+ nop = function(){};
+
+ ArtifactIndexWidget = function (logger, container) {
+ this._logger = logger.fork('Widget');
+
+ this.$el = container;
+
+ this.nodes = {};
+ this.currentNode = null;
+ this._initialize();
+
+ this._logger.debug('ctor finished');
+ };
+
+ ArtifactIndexWidget.prototype._initialize = function () {
+ // set widget class
+ this.$el.addClass(WIDGET_CLASS);
+
+ this.$content = $(TABLE_HTML);
+ this.$el.append(this.$content);
+ this.$list = this.$content.find('.list-content');
+ };
+
+ ArtifactIndexWidget.prototype.onWidgetContainerResize = nop;
+
+ // Adding/Removing/Updating items
+ ArtifactIndexWidget.prototype.addNode = function (desc) {
+ if (desc && desc.parentId === this.currentNode) {
+ var node = new ModelItem(this.$list, desc);
+ this.nodes[desc.id] = node;
+ node.$delete.on('click', event => {
+ this.onNodeDeleteClicked(desc.id);
+ event.stopPropagation();
+ event.preventDefault();
+ });
+ node.$download.on('click', event => event.stopPropagation());
+ node.$el.on('click', event => {
+ this.onNodeClick(desc.id);
+ event.stopPropagation();
+ event.preventDefault();
+ });
+ }
+ };
+
+ ArtifactIndexWidget.prototype.removeNode = function (gmeId) {
+ var node = this.nodes[gmeId];
+ if (node) {
+ node.remove();
+ delete this.nodes[gmeId];
+ }
+ };
+
+ ArtifactIndexWidget.prototype.updateNode = function (desc) {
+ if (desc && desc.parentId === this.currentNode) {
+ this.nodes[desc.id].update(desc);
+ }
+ };
+
+ /* * * * * * * * Visualizer event handlers * * * * * * * */
+
+
+ /* * * * * * * * Visualizer life cycle callbacks * * * * * * * */
+ ArtifactIndexWidget.prototype.destroy = function () {
+ };
+
+ ArtifactIndexWidget.prototype.onActivate = function () {
+ };
+
+ ArtifactIndexWidget.prototype.onDeactivate = function () {
+ };
+
+ return ArtifactIndexWidget;
+});
diff --git a/src/visualizers/widgets/ArtifactIndex/ModelItem.js b/src/visualizers/widgets/ArtifactIndex/ModelItem.js
new file mode 100644
index 0000000..a66e138
--- /dev/null
+++ b/src/visualizers/widgets/ArtifactIndex/ModelItem.js
@@ -0,0 +1,43 @@
+/*globals define, $*/
+define([
+ 'deepforge/viz/Utils',
+ 'text!./ModelRow.html'
+], function(
+ Utils,
+ ROW_HTML
+) {
+ 'use strict';
+
+ var ModelItem = function(parent, node) {
+ this.$el = $(ROW_HTML);
+ this.initialize();
+ this.update(node);
+ parent.append(this.$el);
+ };
+
+ ModelItem.prototype.initialize = function() {
+ // Get the fields and stuff
+ this.$name = this.$el.find('.name');
+ this.$type = this.$el.find('.type');
+ this.$size = this.$el.find('.size');
+ this.$createdAt = this.$el.find('.createdAt');
+ this.$download = this.$el.find('.data-download');
+ this.$delete = this.$el.find('.data-remove');
+ };
+
+ ModelItem.prototype.update = function(node) {
+ var date = node.createdAt ? Utils.getDisplayTime(node.createdAt) : 'unknown';
+
+ this.$name.text(node.name);
+ this.$type.text(node.type || 'unknown');
+ this.$size.text(node.size || 'unknown');
+ this.$download.attr('href', node.dataURL);
+ this.$createdAt.text(date);
+ };
+
+ ModelItem.prototype.remove = function() {
+ this.$el.remove();
+ };
+
+ return ModelItem;
+});
diff --git a/src/visualizers/widgets/ArtifactIndex/ModelRow.html b/src/visualizers/widgets/ArtifactIndex/ModelRow.html
new file mode 100644
index 0000000..e5e4a8e
--- /dev/null
+++ b/src/visualizers/widgets/ArtifactIndex/ModelRow.html
@@ -0,0 +1,12 @@
+
+ |
+ |
+ |
+ |
+
+
+
+
+
+ |
+
diff --git a/src/visualizers/widgets/ArtifactIndex/Table.html b/src/visualizers/widgets/ArtifactIndex/Table.html
new file mode 100644
index 0000000..d65295f
--- /dev/null
+++ b/src/visualizers/widgets/ArtifactIndex/Table.html
@@ -0,0 +1,12 @@
+
+
+
+ | Name |
+ Type |
+ Size |
+ Creation Date |
+
+
+
+
+
diff --git a/src/visualizers/widgets/ArtifactIndex/styles/ArtifactIndexWidget.css b/src/visualizers/widgets/ArtifactIndex/styles/ArtifactIndexWidget.css
new file mode 100644
index 0000000..49254eb
--- /dev/null
+++ b/src/visualizers/widgets/ArtifactIndex/styles/ArtifactIndexWidget.css
@@ -0,0 +1,13 @@
+.artifact-index {
+ background-color: #eee !important;
+ outline: none;
+ text-align: center;
+}
+
+.artifact-index .data-download {
+ color: inherit;
+}
+
+.artifact-index .type {
+ font-style: italic;
+}
diff --git a/src/visualizers/widgets/MainView/ListItem.ejs b/src/visualizers/widgets/MainView/ListItem.ejs
deleted file mode 100644
index a4b2889..0000000
--- a/src/visualizers/widgets/MainView/ListItem.ejs
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
- <%= name %>
-
- <% if (typeof data !== 'undefined') { %>
-
- <% } %>
-
-
-
-
diff --git a/src/visualizers/widgets/MainView/MainViewWidget.js b/src/visualizers/widgets/MainView/MainViewWidget.js
deleted file mode 100644
index 2123f24..0000000
--- a/src/visualizers/widgets/MainView/MainViewWidget.js
+++ /dev/null
@@ -1,247 +0,0 @@
-/*globals $, WebGMEGlobal,define */
-/*jshint browser: true*/
-
-define([
- 'panel/FloatingActionButton/styles/Materialize',
- 'deepforge/globals',
- 'text!./NavBar.html',
- 'text!./ListItem.ejs',
- 'underscore',
- 'css!./styles/MainViewWidget.css'
-], function (
- Materialize,
- DeepForge,
- NavBarHTML,
- ListItem,
- _
-) {
- 'use strict';
-
- var MainViewWidget,
- WIDGET_CLASS = 'main-view',
- CreateListItem = _.template(ListItem),
- ToggleLabels = [
- 'Executions',
- 'Pipelines'
- ];
-
- MainViewWidget = function (logger, container) {
- this.logger = logger.fork('Widget');
- this.$el = container;
- this.$el.addClass(WIDGET_CLASS);
- this.toggleIndex = 0;
- this.initialize();
- this.logger.debug('ctor finished');
- };
-
- MainViewWidget.prototype.initialize = function () {
- // Create the nav bar
- this.$nav = $(NavBarHTML);
- this.$el.append(this.$nav);
-
- // Execution support
- this.$toggle = this.$nav.find('#toggle-main');
- this.$toggleLabel = this.$nav.find('.toggle-label');
- this.$toggle.on('click', () => {
- if (this._closed) { // shouldn't be clicked when closed (but it is possible)
- return;
- }
- this.toggleEmbeddedPanel();
- // Update the toggle name
- this.toggleIndex = (this.toggleIndex + 1) % 2;
- this.$toggleLabel.text(ToggleLabels[this.toggleIndex]);
- });
-
- this.$archlist = this.$nav.find('#arch-list-content');
- this.$artifacts = this.$nav.find('#artifact-list-content');
-
- // opening, closing
- this._closed = true;
- this.$nav.find('.side-nav-control').on('click', this.controlClicked.bind(this));
- this.$nav.on('transitionend', this.onChanged.bind(this));
-
- // action buttons
- this.$nav.on('click', '#create-artifact', DeepForge.create.Artifact);
- this.$nav.on('click', '#create-arch', DeepForge.create.Architecture);
- this.$nav.on('click', '.select-node', this.onNodeClick.bind(this));
- this.$nav.on('click', '.del-node', this.onDelNodeClick.bind(this));
- this.$nav.on('click', '.dl-node', this.onDownloadNodeClick.bind(this));
-
- this.htmlFor = {};
-
- setTimeout(() => this.checkLibraries(), 100);
- };
-
- MainViewWidget.prototype.checkLibraries = function () {
-
- this.checkLibUpdates()
- .then(updates => {
- if (updates.length) { // prompt about updates
- var names = updates.map(update => update[0]),
- projName = this.getProjectName(),
- content = $('
'),
- msg = `${projName} is out of date. Click to update.`;
-
- this.logger.info(`Updates available for ${names.join(', ')}`);
-
- if (names.indexOf('nn') !== -1) {
- msg = 'Newer nn library available. Click to update';
- } else if (names.indexOf('pipeline') !== -1) {
- msg = 'Execution updates available. Click to update';
- }
-
- content.text(msg);
- content.on('click', () => {
- // Remove the toast
- content.parent().fadeOut();
-
- // Create updating notification
- msg = 'Updating execution library...';
- if (names.indexOf('nn') !== -1) {
- msg = 'Updating nn library...';
- }
-
- content.text(msg);
- Materialize.toast(content, 8000);
- this.updateLibraries(updates).then(() => {
- content.parent().remove();
- Materialize.toast('Update complete!', 2000);
- });
- });
-
- Materialize.toast(content, 8000);
- }
- })
- .fail(err => Materialize.toast(`Library update check failed: ${err}`, 2000));
- };
-
- MainViewWidget.prototype.width = function () {
- return this._closedWidth;
- };
-
- MainViewWidget.prototype.onChanged = function () {
- if (!this._closed) { // add the text back
- this.$nav.removeClass('hide-list');
- } else {
- this._closedWidth = this.$nav.width();
- }
- };
-
- MainViewWidget.prototype.controlClicked = function () {
- this._closed = !this._closed;
- if (this._closed) {
- this.$nav.addClass('hide-list');
- this.$nav.addClass('closed');
- } else { // remove the 'closed' class
- this.$nav.removeClass('closed');
- }
- };
-
- MainViewWidget.prototype.onWidgetContainerResize = function () {
- var rect = this.$el[0].getBoundingClientRect(),
- top = rect.top;
-
- this.$nav.css({
- top: top + 'px'
- });
-
- if (this._closed) {
- this._closedWidth = this.$nav.width();
- }
- };
-
- MainViewWidget.prototype.createNode = function(desc) {
- // Create the architecture list item
- var li;
-
- desc.download = false;
- li = $(CreateListItem(desc));
- this.htmlFor[desc.id] = li;
- return li;
- };
-
- MainViewWidget.prototype.addArch = function(desc) {
- var html = this.createNode(desc);
- this.$archlist.append(html);
- };
-
- MainViewWidget.prototype.addArtifact = function(desc) {
- var html = this.createNode(desc);
- this.$artifacts.append(html);
- };
-
- MainViewWidget.prototype.onDelNodeClick = function(event) {
- var id = this.getElementId(event.target);
- event.stopPropagation();
- if (id) {
- this.deleteNode(id);
- }
- };
-
- MainViewWidget.prototype.onDownloadNodeClick = function(event) {
- var id = this.getElementId(event.target),
- url;
-
- event.stopPropagation();
- if (id) {
- url = this.dataUrlFor(id);
- if (url) {
- this._download(url);
- }
- }
- };
-
- MainViewWidget.prototype._download = function(url) {
- var anchor = document.createElement('a');
- anchor.setAttribute('href', url);
- anchor.setAttribute('target', '_self');
- anchor.click();
- };
-
- MainViewWidget.prototype.onNodeClick = function(event) {
- var id = this.getElementId(event.target);
- event.stopPropagation();
- if (id) {
- WebGMEGlobal.State.registerActiveObject(id);
- }
- };
-
- MainViewWidget.prototype.getElementId = function(element) {
- while(!element.getAttribute('data-id') && element.parentNode) {
- element = element.parentNode;
- }
- return element.getAttribute('data-id');
- };
-
- MainViewWidget.prototype.removeNode = function(id) {
- if (this.htmlFor[id]) {
- this.htmlFor[id].remove();
- delete this.htmlFor[id];
- }
- };
-
- MainViewWidget.prototype.updateNode = function (desc) {
- var oldHtml = this.htmlFor[desc.id],
- node;
-
- if (oldHtml) {
- node = this.createNode(desc);
- node.insertAfter(oldHtml);
- oldHtml.remove();
- }
- };
-
- /* * * * * * * * Visualizer life cycle callbacks * * * * * * * */
- MainViewWidget.prototype.destroy = function () {
- };
-
- MainViewWidget.prototype.onActivate = function () {
- this.logger.debug('MainViewWidget has been activated');
- };
-
- MainViewWidget.prototype.onDeactivate = function () {
- this.logger.debug('MainViewWidget has been deactivated');
- };
-
- return MainViewWidget;
-});
diff --git a/src/visualizers/widgets/MainView/NavBar.html b/src/visualizers/widgets/MainView/NavBar.html
deleted file mode 100644
index af95307..0000000
--- a/src/visualizers/widgets/MainView/NavBar.html
+++ /dev/null
@@ -1,40 +0,0 @@
-
diff --git a/src/visualizers/widgets/PipelineEditor/PipelineEditorWidget.js b/src/visualizers/widgets/PipelineEditor/PipelineEditorWidget.js
index bdb4cc2..ba0c81c 100644
--- a/src/visualizers/widgets/PipelineEditor/PipelineEditorWidget.js
+++ b/src/visualizers/widgets/PipelineEditor/PipelineEditorWidget.js
@@ -4,7 +4,7 @@
define([
'deepforge/Constants',
'widgets/EasyDAG/AddNodeDialog',
- 'widgets/EasyDAG/EasyDAGWidget',
+ 'deepforge/viz/widgets/Thumbnail',
'deepforge/viz/PipelineControl',
'deepforge/viz/Utils',
'deepforge/globals',
@@ -17,7 +17,7 @@ define([
], function (
CONSTANTS,
AddNodeDialog,
- EasyDAGWidget,
+ ThumbnailWidget,
PipelineControl,
Utils,
DeepForge,
@@ -38,7 +38,7 @@ define([
};
PipelineEditorWidget = function (logger, container, execCntr) {
- EasyDAGWidget.call(this, logger, container);
+ ThumbnailWidget.call(this, logger, container);
this.$el.addClass(WIDGET_CLASS);
this.portIdToNode = {};
this.PORT_STATE = STATE.DEFAULT;
@@ -50,7 +50,7 @@ define([
this.initExecs(execCntr);
};
- _.extend(PipelineEditorWidget.prototype, EasyDAGWidget.prototype);
+ _.extend(PipelineEditorWidget.prototype, ThumbnailWidget.prototype);
PipelineEditorWidget.prototype.ItemClass = OperationNode;
PipelineEditorWidget.prototype.SelectionManager = SelectionManager;
PipelineEditorWidget.prototype.Connection = Connection;
@@ -59,7 +59,7 @@ define([
PipelineControl.prototype.onCreateInitialNode;
PipelineEditorWidget.prototype.setupItemCallbacks = function() {
- EasyDAGWidget.prototype.setupItemCallbacks.call(this);
+ ThumbnailWidget.prototype.setupItemCallbacks.call(this);
this.ItemClass.prototype.connectPort =
PipelineEditorWidget.prototype.connectPort.bind(this);
this.ItemClass.prototype.disconnectPort =
@@ -68,7 +68,7 @@ define([
//////////////////// Port Support ////////////////////
PipelineEditorWidget.prototype.addConnection = function(desc) {
- EasyDAGWidget.prototype.addConnection.call(this, desc);
+ ThumbnailWidget.prototype.addConnection.call(this, desc);
// Record the connection with the input (dst) port
var dstItem = this.items[desc.dst],
dstPort;
@@ -86,11 +86,10 @@ define([
// Update the given port...
dstItem.refreshPorts();
}
- this.refreshThumbnail();
};
PipelineEditorWidget.prototype.addNode = function(desc) {
- EasyDAGWidget.prototype.addNode.call(this, desc);
+ ThumbnailWidget.prototype.addNode.call(this, desc);
// Update the input port connections (if not connection)
var item = this.items[desc.id];
if (item) {
@@ -106,7 +105,6 @@ define([
this.PORT_STATE = STATE.DEFAULT;
this.connectPort.apply(this, this.srcPortToConnectArgs);
}
- this.refreshThumbnail();
};
PipelineEditorWidget.prototype._removeConnection = function(id) {
@@ -120,8 +118,7 @@ define([
port.connection = null;
dst.refreshPorts();
}
- EasyDAGWidget.prototype._removeConnection.call(this, id);
- this.refreshThumbnail();
+ ThumbnailWidget.prototype._removeConnection.call(this, id);
};
// May not actually need these port methods
@@ -140,8 +137,7 @@ define([
if (this.portIdToNode.hasOwnProperty(gmeId)) {
this.removePort(gmeId);
} else {
- EasyDAGWidget.prototype.removeNode.call(this, gmeId);
- this.refreshThumbnail();
+ ThumbnailWidget.prototype.removeNode.call(this, gmeId);
}
};
@@ -325,7 +321,7 @@ define([
// Create new architecture from the "set ptr" dialog
return this.selectArchitectureTarget.apply(this, arguments);
} else {
- return EasyDAGWidget.prototype.selectTargetFor.apply(this, arguments);
+ return ThumbnailWidget.prototype.selectTargetFor.apply(this, arguments);
}
};
@@ -379,47 +375,6 @@ define([
////////////////////////// Action Overrides END //////////////////////////
- ////////////////////////// Thumbnail updates //////////////////////////
- PipelineEditorWidget.prototype.getSvgDistanceDim = function(dim) {
- var maxValue = this._getMaxAlongAxis(dim),
- nodes,
- minValue;
-
- nodes = this.graph.nodes().map(id => this.graph.node(id));
- minValue = Math.min.apply(null, nodes.map(node => node[dim]));
- return maxValue-minValue;
- };
-
- PipelineEditorWidget.prototype.getSvgWidth = function() {
- return this.getSvgDistanceDim('x');
- };
-
- PipelineEditorWidget.prototype.getSvgHeight = function() {
- return this.getSvgDistanceDim('y');
- };
-
- PipelineEditorWidget.prototype.getViewBox = function() {
- var maxX = this.getSvgWidth('x'),
- maxY = this.getSvgHeight('y');
-
- return `0 0 ${maxX} ${maxY}`;
- };
-
- PipelineEditorWidget.prototype.refreshThumbnail = _.debounce(function() {
- // Get the svg...
- var svg = document.createElement('svg'),
- group = this.$svg.node(),
- child;
-
- svg.setAttribute('viewBox', this.getViewBox());
- for (var i = 0; i < group.children.length; i++) {
- child = $(group.children[i]);
- svg.appendChild(child.clone()[0]);
- }
-
- this.updateThumbnail(svg.outerHTML);
- }, 1000);
-
// Changing the layout to klayjs
PipelineEditorWidget.prototype.refreshScreen = function() {
if (!this.active) {
diff --git a/src/visualizers/widgets/PipelineEditor/styles/PipelineEditorWidget.css b/src/visualizers/widgets/PipelineEditor/styles/PipelineEditorWidget.css
index a98e046..cf71893 100644
--- a/src/visualizers/widgets/PipelineEditor/styles/PipelineEditorWidget.css
+++ b/src/visualizers/widgets/PipelineEditor/styles/PipelineEditorWidget.css
@@ -15,6 +15,7 @@
position: absolute;
min-width: 25em;
margin-bottom: 0;
+ text-align: center;
}
.pipeline-editor .execution-header {
diff --git a/src/visualizers/widgets/PipelineIndex/PipelineIndexWidget.js b/src/visualizers/widgets/PipelineIndex/PipelineIndexWidget.js
index 693cb6a..5cd903e 100644
--- a/src/visualizers/widgets/PipelineIndex/PipelineIndexWidget.js
+++ b/src/visualizers/widgets/PipelineIndex/PipelineIndexWidget.js
@@ -2,17 +2,20 @@
/*jshint browser: true*/
define([
- 'text!./Pipeline.ejs',
+ 'text!./cards/Pipeline.ejs',
+ 'text!./cards/Architecture.ejs',
'underscore',
'css!./styles/PipelineIndexWidget.css'
], function (
PipelineHtml,
+ ArchitectureHtml,
_
) {
'use strict';
var PipelineIndexWidget,
PipelineTemplate = _.template(PipelineHtml),
+ ArchitectureTemplate = _.template(ArchitectureHtml),
EMPTY_MSG = 'No Existing Pipelines... yet!',
WIDGET_CLASS = 'pipeline-index';
@@ -59,6 +62,10 @@ define([
});
};
+ PipelineIndexWidget.prototype.getEmptyMsg = function() {
+ return EMPTY_MSG;
+ };
+
PipelineIndexWidget.prototype.updateBackgroundText = function() {
if (this.$backgroundText) {
this.$backgroundText.remove();
@@ -67,7 +74,7 @@ define([
// Add background text if empty
if (Object.keys(this.cards).length === 0) {
this.$backgroundText = $('', {class: 'background-text'});
- this.$backgroundText.text(EMPTY_MSG);
+ this.$backgroundText.text(this.getEmptyMsg());
this.$el.append(this.$backgroundText);
}
};
@@ -86,13 +93,22 @@ define([
};
// Adding/Removing/Updating items
+ PipelineIndexWidget.prototype.getCardTemplate = function (desc) {
+ if (desc.type === 'Architecture') {
+ return ArchitectureTemplate;
+ }
+ return PipelineTemplate;
+ };
+
PipelineIndexWidget.prototype.addNode = function (desc) {
- var node;
+ var node,
+ Template;
if (desc) {
// Add node to a table of cards
+ Template = this.getCardTemplate(desc);
this.nodes[desc.id] = desc;
- node = $(PipelineTemplate(desc));
+ node = $(Template(desc));
this.cards[desc.id] = node;
// Add click listeners
diff --git a/src/visualizers/widgets/PipelineIndex/cards/Architecture.ejs b/src/visualizers/widgets/PipelineIndex/cards/Architecture.ejs
new file mode 100644
index 0000000..b434d82
--- /dev/null
+++ b/src/visualizers/widgets/PipelineIndex/cards/Architecture.ejs
@@ -0,0 +1,17 @@
+
+
+
+
+
+ <%= name %>
+
+
+
"<%= name %>" Executionsclose
+
+
+
+
+
diff --git a/src/visualizers/widgets/PipelineIndex/Pipeline.ejs b/src/visualizers/widgets/PipelineIndex/cards/Pipeline.ejs
similarity index 100%
rename from src/visualizers/widgets/PipelineIndex/Pipeline.ejs
rename to src/visualizers/widgets/PipelineIndex/cards/Pipeline.ejs
diff --git a/src/visualizers/widgets/PipelineIndex/styles/PipelineIndexWidget.css b/src/visualizers/widgets/PipelineIndex/styles/PipelineIndexWidget.css
index 39c019d..063ba01 100644
--- a/src/visualizers/widgets/PipelineIndex/styles/PipelineIndexWidget.css
+++ b/src/visualizers/widgets/PipelineIndex/styles/PipelineIndexWidget.css
@@ -4,6 +4,7 @@
.pipeline-index .background-text {
font-size: 3em;
+ font-style: italic;
color: #757575;
position: absolute;
top: 50%;
diff --git a/src/visualizers/widgets/Sidebar/NavBar.html b/src/visualizers/widgets/Sidebar/NavBar.html
new file mode 100644
index 0000000..93ffe10
--- /dev/null
+++ b/src/visualizers/widgets/Sidebar/NavBar.html
@@ -0,0 +1,14 @@
+
diff --git a/src/visualizers/widgets/Sidebar/SidebarWidget.js b/src/visualizers/widgets/Sidebar/SidebarWidget.js
new file mode 100644
index 0000000..5895fbf
--- /dev/null
+++ b/src/visualizers/widgets/Sidebar/SidebarWidget.js
@@ -0,0 +1,128 @@
+/*globals $, define */
+/*jshint browser: true*/
+
+define([
+ 'panel/FloatingActionButton/styles/Materialize',
+ 'deepforge/globals',
+ 'text!./NavBar.html',
+ 'css!./styles/SidebarWidget.css',
+ 'css!./lib/font/css/open-iconic-bootstrap.min.css'
+], function (
+ Materialize,
+ DeepForge,
+ NavBarHTML
+) {
+ 'use strict';
+
+ var SidebarWidget,
+ WIDGET_CLASS = 'main-view',
+ CATEGORIES = [
+ 'pipelines',
+ 'executions',
+ 'architectures',
+ 'artifacts'
+ ];
+
+ SidebarWidget = function (logger, container) {
+ this.logger = logger.fork('Widget');
+ this.$el = container;
+ this.$el.addClass(WIDGET_CLASS);
+ this.initialize();
+ this.logger.debug('ctor finished');
+ this._currentSelection = '$pipelinesIcon';
+ };
+
+ SidebarWidget.prototype.initialize = function () {
+ // Create the nav bar
+ this.$nav = $(NavBarHTML);
+ this.$el.append(this.$nav);
+
+ // Execution support
+ CATEGORIES.forEach(category => {
+ var varName = `$${category}Icon`;
+ this[varName] = this.$nav.find(`.${category}-icon`);
+ this[varName].on('click', () => {
+ this.setEmbeddedPanel(category);
+ this.highlight(category);
+ });
+ });
+
+ this.htmlFor = {};
+
+ // TODO: Change this to check when a project is opened
+ setTimeout(() => this.checkLibraries(), 1000);
+ };
+
+ SidebarWidget.prototype.highlight = function (category) {
+ var varName = `$${category}Icon`;
+ // Remove the 'active' class from the current
+ this[this._currentSelection].removeClass('active');
+ this[varName].addClass('active');
+ this._currentSelection = varName;
+ };
+
+ SidebarWidget.prototype.checkLibraries = function () {
+
+ if (!this.getProjectName()) {
+ return;
+ }
+
+ this.checkLibUpdates()
+ .then(updates => {
+ if (updates.length) { // prompt about updates
+ var names = updates.map(update => update[0]),
+ projName = this.getProjectName(),
+ content = $('
'),
+ msg = `${projName} is out of date. Click to update.`;
+
+ this.logger.info(`Updates available for ${names.join(', ')}`);
+
+ if (names.indexOf('nn') !== -1) {
+ msg = 'Newer nn library available. Click to update';
+ } else if (names.indexOf('pipeline') !== -1) {
+ msg = 'Execution updates available. Click to update';
+ }
+
+ content.text(msg);
+ content.on('click', () => {
+ // Remove the toast
+ content.parent().fadeOut();
+
+ // Create updating notification
+ msg = 'Updating execution library...';
+ if (names.indexOf('nn') !== -1) {
+ msg = 'Updating nn library...';
+ }
+
+ content.text(msg);
+ Materialize.toast(content, 8000);
+ this.updateLibraries(updates).then(() => {
+ content.parent().remove();
+ Materialize.toast('Update complete!', 2000);
+ });
+ });
+
+ Materialize.toast(content, 8000);
+ }
+ })
+ .fail(err => Materialize.toast(`Library update check failed: ${err}`, 2000));
+ };
+
+ SidebarWidget.prototype.width = function () {
+ return this._closedWidth;
+ };
+
+ /* * * * * * * * Visualizer life cycle callbacks * * * * * * * */
+ SidebarWidget.prototype.destroy = function () {
+ };
+
+ SidebarWidget.prototype.onActivate = function () {
+ this.logger.debug('SidebarWidget has been activated');
+ };
+
+ SidebarWidget.prototype.onDeactivate = function () {
+ this.logger.debug('SidebarWidget has been deactivated');
+ };
+
+ return SidebarWidget;
+});
diff --git a/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic-bootstrap.css b/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic-bootstrap.css
new file mode 100644
index 0000000..56c4e5f
--- /dev/null
+++ b/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic-bootstrap.css
@@ -0,0 +1,952 @@
+/* Bootstrap */
+
+@font-face {
+ font-family: 'Icons';
+ src: url('../fonts/open-iconic.eot');
+ src: url('../fonts/open-iconic.eot?#iconic-sm') format('embedded-opentype'), url('../fonts/open-iconic.woff') format('woff'), url('../fonts/open-iconic.ttf') format('truetype'), url('../fonts/open-iconic.otf') format('opentype'), url('../fonts/open-iconic.svg#iconic-sm') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+.oi {
+ position: relative;
+ top: 1px;
+ display: inline-block;
+ speak:none;
+ font-family: 'Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+.oi:empty:before {
+ width: 1em;
+ text-align: center;
+ box-sizing: content-box;
+}
+
+.oi.oi-align-center:before {
+ text-align: center;
+}
+
+.oi.oi-align-left:before {
+ text-align: left;
+}
+
+.oi.oi-align-right:before {
+ text-align: right;
+}
+
+
+.oi.oi-flip-horizontal:before {
+ -webkit-transform: scale(-1, 1);
+ -ms-transform: scale(-1, 1);
+ transform: scale(-1, 1);
+}
+
+.oi.oi-flip-vertical:before {
+ -webkit-transform: scale(1, -1);
+ -ms-transform: scale(-1, 1);
+ transform: scale(1, -1);
+}
+
+.oi.oi-flip-horizontal-vertical:before {
+ -webkit-transform: scale(-1, -1);
+ -ms-transform: scale(-1, 1);
+ transform: scale(-1, -1);
+}
+
+
+.oi-account-login:before {
+ content:'\e000';
+}
+
+.oi-account-logout:before {
+ content:'\e001';
+}
+
+.oi-action-redo:before {
+ content:'\e002';
+}
+
+.oi-action-undo:before {
+ content:'\e003';
+}
+
+.oi-align-center:before {
+ content:'\e004';
+}
+
+.oi-align-left:before {
+ content:'\e005';
+}
+
+.oi-align-right:before {
+ content:'\e006';
+}
+
+.oi-aperture:before {
+ content:'\e007';
+}
+
+.oi-arrow-bottom:before {
+ content:'\e008';
+}
+
+.oi-arrow-circle-bottom:before {
+ content:'\e009';
+}
+
+.oi-arrow-circle-left:before {
+ content:'\e00a';
+}
+
+.oi-arrow-circle-right:before {
+ content:'\e00b';
+}
+
+.oi-arrow-circle-top:before {
+ content:'\e00c';
+}
+
+.oi-arrow-left:before {
+ content:'\e00d';
+}
+
+.oi-arrow-right:before {
+ content:'\e00e';
+}
+
+.oi-arrow-thick-bottom:before {
+ content:'\e00f';
+}
+
+.oi-arrow-thick-left:before {
+ content:'\e010';
+}
+
+.oi-arrow-thick-right:before {
+ content:'\e011';
+}
+
+.oi-arrow-thick-top:before {
+ content:'\e012';
+}
+
+.oi-arrow-top:before {
+ content:'\e013';
+}
+
+.oi-audio-spectrum:before {
+ content:'\e014';
+}
+
+.oi-audio:before {
+ content:'\e015';
+}
+
+.oi-badge:before {
+ content:'\e016';
+}
+
+.oi-ban:before {
+ content:'\e017';
+}
+
+.oi-bar-chart:before {
+ content:'\e018';
+}
+
+.oi-basket:before {
+ content:'\e019';
+}
+
+.oi-battery-empty:before {
+ content:'\e01a';
+}
+
+.oi-battery-full:before {
+ content:'\e01b';
+}
+
+.oi-beaker:before {
+ content:'\e01c';
+}
+
+.oi-bell:before {
+ content:'\e01d';
+}
+
+.oi-bluetooth:before {
+ content:'\e01e';
+}
+
+.oi-bold:before {
+ content:'\e01f';
+}
+
+.oi-bolt:before {
+ content:'\e020';
+}
+
+.oi-book:before {
+ content:'\e021';
+}
+
+.oi-bookmark:before {
+ content:'\e022';
+}
+
+.oi-box:before {
+ content:'\e023';
+}
+
+.oi-briefcase:before {
+ content:'\e024';
+}
+
+.oi-british-pound:before {
+ content:'\e025';
+}
+
+.oi-browser:before {
+ content:'\e026';
+}
+
+.oi-brush:before {
+ content:'\e027';
+}
+
+.oi-bug:before {
+ content:'\e028';
+}
+
+.oi-bullhorn:before {
+ content:'\e029';
+}
+
+.oi-calculator:before {
+ content:'\e02a';
+}
+
+.oi-calendar:before {
+ content:'\e02b';
+}
+
+.oi-camera-slr:before {
+ content:'\e02c';
+}
+
+.oi-caret-bottom:before {
+ content:'\e02d';
+}
+
+.oi-caret-left:before {
+ content:'\e02e';
+}
+
+.oi-caret-right:before {
+ content:'\e02f';
+}
+
+.oi-caret-top:before {
+ content:'\e030';
+}
+
+.oi-cart:before {
+ content:'\e031';
+}
+
+.oi-chat:before {
+ content:'\e032';
+}
+
+.oi-check:before {
+ content:'\e033';
+}
+
+.oi-chevron-bottom:before {
+ content:'\e034';
+}
+
+.oi-chevron-left:before {
+ content:'\e035';
+}
+
+.oi-chevron-right:before {
+ content:'\e036';
+}
+
+.oi-chevron-top:before {
+ content:'\e037';
+}
+
+.oi-circle-check:before {
+ content:'\e038';
+}
+
+.oi-circle-x:before {
+ content:'\e039';
+}
+
+.oi-clipboard:before {
+ content:'\e03a';
+}
+
+.oi-clock:before {
+ content:'\e03b';
+}
+
+.oi-cloud-download:before {
+ content:'\e03c';
+}
+
+.oi-cloud-upload:before {
+ content:'\e03d';
+}
+
+.oi-cloud:before {
+ content:'\e03e';
+}
+
+.oi-cloudy:before {
+ content:'\e03f';
+}
+
+.oi-code:before {
+ content:'\e040';
+}
+
+.oi-cog:before {
+ content:'\e041';
+}
+
+.oi-collapse-down:before {
+ content:'\e042';
+}
+
+.oi-collapse-left:before {
+ content:'\e043';
+}
+
+.oi-collapse-right:before {
+ content:'\e044';
+}
+
+.oi-collapse-up:before {
+ content:'\e045';
+}
+
+.oi-command:before {
+ content:'\e046';
+}
+
+.oi-comment-square:before {
+ content:'\e047';
+}
+
+.oi-compass:before {
+ content:'\e048';
+}
+
+.oi-contrast:before {
+ content:'\e049';
+}
+
+.oi-copywriting:before {
+ content:'\e04a';
+}
+
+.oi-credit-card:before {
+ content:'\e04b';
+}
+
+.oi-crop:before {
+ content:'\e04c';
+}
+
+.oi-dashboard:before {
+ content:'\e04d';
+}
+
+.oi-data-transfer-download:before {
+ content:'\e04e';
+}
+
+.oi-data-transfer-upload:before {
+ content:'\e04f';
+}
+
+.oi-delete:before {
+ content:'\e050';
+}
+
+.oi-dial:before {
+ content:'\e051';
+}
+
+.oi-document:before {
+ content:'\e052';
+}
+
+.oi-dollar:before {
+ content:'\e053';
+}
+
+.oi-double-quote-sans-left:before {
+ content:'\e054';
+}
+
+.oi-double-quote-sans-right:before {
+ content:'\e055';
+}
+
+.oi-double-quote-serif-left:before {
+ content:'\e056';
+}
+
+.oi-double-quote-serif-right:before {
+ content:'\e057';
+}
+
+.oi-droplet:before {
+ content:'\e058';
+}
+
+.oi-eject:before {
+ content:'\e059';
+}
+
+.oi-elevator:before {
+ content:'\e05a';
+}
+
+.oi-ellipses:before {
+ content:'\e05b';
+}
+
+.oi-envelope-closed:before {
+ content:'\e05c';
+}
+
+.oi-envelope-open:before {
+ content:'\e05d';
+}
+
+.oi-euro:before {
+ content:'\e05e';
+}
+
+.oi-excerpt:before {
+ content:'\e05f';
+}
+
+.oi-expand-down:before {
+ content:'\e060';
+}
+
+.oi-expand-left:before {
+ content:'\e061';
+}
+
+.oi-expand-right:before {
+ content:'\e062';
+}
+
+.oi-expand-up:before {
+ content:'\e063';
+}
+
+.oi-external-link:before {
+ content:'\e064';
+}
+
+.oi-eye:before {
+ content:'\e065';
+}
+
+.oi-eyedropper:before {
+ content:'\e066';
+}
+
+.oi-file:before {
+ content:'\e067';
+}
+
+.oi-fire:before {
+ content:'\e068';
+}
+
+.oi-flag:before {
+ content:'\e069';
+}
+
+.oi-flash:before {
+ content:'\e06a';
+}
+
+.oi-folder:before {
+ content:'\e06b';
+}
+
+.oi-fork:before {
+ content:'\e06c';
+}
+
+.oi-fullscreen-enter:before {
+ content:'\e06d';
+}
+
+.oi-fullscreen-exit:before {
+ content:'\e06e';
+}
+
+.oi-globe:before {
+ content:'\e06f';
+}
+
+.oi-graph:before {
+ content:'\e070';
+}
+
+.oi-grid-four-up:before {
+ content:'\e071';
+}
+
+.oi-grid-three-up:before {
+ content:'\e072';
+}
+
+.oi-grid-two-up:before {
+ content:'\e073';
+}
+
+.oi-hard-drive:before {
+ content:'\e074';
+}
+
+.oi-header:before {
+ content:'\e075';
+}
+
+.oi-headphones:before {
+ content:'\e076';
+}
+
+.oi-heart:before {
+ content:'\e077';
+}
+
+.oi-home:before {
+ content:'\e078';
+}
+
+.oi-image:before {
+ content:'\e079';
+}
+
+.oi-inbox:before {
+ content:'\e07a';
+}
+
+.oi-infinity:before {
+ content:'\e07b';
+}
+
+.oi-info:before {
+ content:'\e07c';
+}
+
+.oi-italic:before {
+ content:'\e07d';
+}
+
+.oi-justify-center:before {
+ content:'\e07e';
+}
+
+.oi-justify-left:before {
+ content:'\e07f';
+}
+
+.oi-justify-right:before {
+ content:'\e080';
+}
+
+.oi-key:before {
+ content:'\e081';
+}
+
+.oi-laptop:before {
+ content:'\e082';
+}
+
+.oi-layers:before {
+ content:'\e083';
+}
+
+.oi-lightbulb:before {
+ content:'\e084';
+}
+
+.oi-link-broken:before {
+ content:'\e085';
+}
+
+.oi-link-intact:before {
+ content:'\e086';
+}
+
+.oi-list-rich:before {
+ content:'\e087';
+}
+
+.oi-list:before {
+ content:'\e088';
+}
+
+.oi-location:before {
+ content:'\e089';
+}
+
+.oi-lock-locked:before {
+ content:'\e08a';
+}
+
+.oi-lock-unlocked:before {
+ content:'\e08b';
+}
+
+.oi-loop-circular:before {
+ content:'\e08c';
+}
+
+.oi-loop-square:before {
+ content:'\e08d';
+}
+
+.oi-loop:before {
+ content:'\e08e';
+}
+
+.oi-magnifying-glass:before {
+ content:'\e08f';
+}
+
+.oi-map-marker:before {
+ content:'\e090';
+}
+
+.oi-map:before {
+ content:'\e091';
+}
+
+.oi-media-pause:before {
+ content:'\e092';
+}
+
+.oi-media-play:before {
+ content:'\e093';
+}
+
+.oi-media-record:before {
+ content:'\e094';
+}
+
+.oi-media-skip-backward:before {
+ content:'\e095';
+}
+
+.oi-media-skip-forward:before {
+ content:'\e096';
+}
+
+.oi-media-step-backward:before {
+ content:'\e097';
+}
+
+.oi-media-step-forward:before {
+ content:'\e098';
+}
+
+.oi-media-stop:before {
+ content:'\e099';
+}
+
+.oi-medical-cross:before {
+ content:'\e09a';
+}
+
+.oi-menu:before {
+ content:'\e09b';
+}
+
+.oi-microphone:before {
+ content:'\e09c';
+}
+
+.oi-minus:before {
+ content:'\e09d';
+}
+
+.oi-monitor:before {
+ content:'\e09e';
+}
+
+.oi-moon:before {
+ content:'\e09f';
+}
+
+.oi-move:before {
+ content:'\e0a0';
+}
+
+.oi-musical-note:before {
+ content:'\e0a1';
+}
+
+.oi-paperclip:before {
+ content:'\e0a2';
+}
+
+.oi-pencil:before {
+ content:'\e0a3';
+}
+
+.oi-people:before {
+ content:'\e0a4';
+}
+
+.oi-person:before {
+ content:'\e0a5';
+}
+
+.oi-phone:before {
+ content:'\e0a6';
+}
+
+.oi-pie-chart:before {
+ content:'\e0a7';
+}
+
+.oi-pin:before {
+ content:'\e0a8';
+}
+
+.oi-play-circle:before {
+ content:'\e0a9';
+}
+
+.oi-plus:before {
+ content:'\e0aa';
+}
+
+.oi-power-standby:before {
+ content:'\e0ab';
+}
+
+.oi-print:before {
+ content:'\e0ac';
+}
+
+.oi-project:before {
+ content:'\e0ad';
+}
+
+.oi-pulse:before {
+ content:'\e0ae';
+}
+
+.oi-puzzle-piece:before {
+ content:'\e0af';
+}
+
+.oi-question-mark:before {
+ content:'\e0b0';
+}
+
+.oi-rain:before {
+ content:'\e0b1';
+}
+
+.oi-random:before {
+ content:'\e0b2';
+}
+
+.oi-reload:before {
+ content:'\e0b3';
+}
+
+.oi-resize-both:before {
+ content:'\e0b4';
+}
+
+.oi-resize-height:before {
+ content:'\e0b5';
+}
+
+.oi-resize-width:before {
+ content:'\e0b6';
+}
+
+.oi-rss-alt:before {
+ content:'\e0b7';
+}
+
+.oi-rss:before {
+ content:'\e0b8';
+}
+
+.oi-script:before {
+ content:'\e0b9';
+}
+
+.oi-share-boxed:before {
+ content:'\e0ba';
+}
+
+.oi-share:before {
+ content:'\e0bb';
+}
+
+.oi-shield:before {
+ content:'\e0bc';
+}
+
+.oi-signal:before {
+ content:'\e0bd';
+}
+
+.oi-signpost:before {
+ content:'\e0be';
+}
+
+.oi-sort-ascending:before {
+ content:'\e0bf';
+}
+
+.oi-sort-descending:before {
+ content:'\e0c0';
+}
+
+.oi-spreadsheet:before {
+ content:'\e0c1';
+}
+
+.oi-star:before {
+ content:'\e0c2';
+}
+
+.oi-sun:before {
+ content:'\e0c3';
+}
+
+.oi-tablet:before {
+ content:'\e0c4';
+}
+
+.oi-tag:before {
+ content:'\e0c5';
+}
+
+.oi-tags:before {
+ content:'\e0c6';
+}
+
+.oi-target:before {
+ content:'\e0c7';
+}
+
+.oi-task:before {
+ content:'\e0c8';
+}
+
+.oi-terminal:before {
+ content:'\e0c9';
+}
+
+.oi-text:before {
+ content:'\e0ca';
+}
+
+.oi-thumb-down:before {
+ content:'\e0cb';
+}
+
+.oi-thumb-up:before {
+ content:'\e0cc';
+}
+
+.oi-timer:before {
+ content:'\e0cd';
+}
+
+.oi-transfer:before {
+ content:'\e0ce';
+}
+
+.oi-trash:before {
+ content:'\e0cf';
+}
+
+.oi-underline:before {
+ content:'\e0d0';
+}
+
+.oi-vertical-align-bottom:before {
+ content:'\e0d1';
+}
+
+.oi-vertical-align-center:before {
+ content:'\e0d2';
+}
+
+.oi-vertical-align-top:before {
+ content:'\e0d3';
+}
+
+.oi-video:before {
+ content:'\e0d4';
+}
+
+.oi-volume-high:before {
+ content:'\e0d5';
+}
+
+.oi-volume-low:before {
+ content:'\e0d6';
+}
+
+.oi-volume-off:before {
+ content:'\e0d7';
+}
+
+.oi-warning:before {
+ content:'\e0d8';
+}
+
+.oi-wifi:before {
+ content:'\e0d9';
+}
+
+.oi-wrench:before {
+ content:'\e0da';
+}
+
+.oi-x:before {
+ content:'\e0db';
+}
+
+.oi-yen:before {
+ content:'\e0dc';
+}
+
+.oi-zoom-in:before {
+ content:'\e0dd';
+}
+
+.oi-zoom-out:before {
+ content:'\e0de';
+}
diff --git a/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic-bootstrap.less b/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic-bootstrap.less
new file mode 100644
index 0000000..fc3fe34
--- /dev/null
+++ b/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic-bootstrap.less
@@ -0,0 +1,960 @@
+/* Bootstrap */
+
+/* Override Bootstrap default variable */
+//@icon-font-path: "../fonts/";
+
+@font-face {
+ font-family: 'Icons';
+ src: ~"url('@{icon-font-path}open-iconic.eot')";
+ src: ~"url('@{icon-font-path}open-iconic.eot?#iconic-sm') format('embedded-opentype')",
+ ~"url('@{icon-font-path}open-iconic.woff') format('woff')",
+ ~"url('@{icon-font-path}open-iconic.ttf') format('truetype')",
+ ~"url('@{icon-font-path}open-iconic.svg#iconic-sm') format('svg')";
+ font-weight: normal;
+ font-style: normal;
+}
+
+// Catchall baseclass
+.oi {
+ position: relative;
+ top: 1px;
+ display: inline-block;
+ font-family: 'Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+
+ &:empty:before {
+ width: 1em;
+ text-align: center;
+ box-sizing: content-box;
+ }
+
+ &.oi-align-center:before {
+ text-align: center;
+ }
+
+ &.oi-align-left:before {
+ text-align: left;
+ }
+
+ &.oi-align-right:before {
+ text-align: right;
+ }
+
+
+ &.oi-flip-horizontal:before {
+ -webkit-transform: scale(-1, 1);
+ -ms-transform: scale(-1, 1);
+ transform: scale(-1, 1);
+ }
+
+ &.oi-flip-vertical:before {
+ -webkit-transform: scale(1, -1);
+ -ms-transform: scale(-1, 1);
+ transform: scale(1, -1);
+ }
+
+ &.oi-flip-horizontal-vertical:before {
+ -webkit-transform: scale(-1, -1);
+ -ms-transform: scale(-1, 1);
+ transform: scale(-1, -1);
+ }
+}
+
+
+
+.oi-account-login:before {
+ content:"\e000";
+}
+
+.oi-account-logout:before {
+ content:"\e001";
+}
+
+.oi-action-redo:before {
+ content:"\e002";
+}
+
+.oi-action-undo:before {
+ content:"\e003";
+}
+
+.oi-align-center:before {
+ content:"\e004";
+}
+
+.oi-align-left:before {
+ content:"\e005";
+}
+
+.oi-align-right:before {
+ content:"\e006";
+}
+
+.oi-aperture:before {
+ content:"\e007";
+}
+
+.oi-arrow-bottom:before {
+ content:"\e008";
+}
+
+.oi-arrow-circle-bottom:before {
+ content:"\e009";
+}
+
+.oi-arrow-circle-left:before {
+ content:"\e00a";
+}
+
+.oi-arrow-circle-right:before {
+ content:"\e00b";
+}
+
+.oi-arrow-circle-top:before {
+ content:"\e00c";
+}
+
+.oi-arrow-left:before {
+ content:"\e00d";
+}
+
+.oi-arrow-right:before {
+ content:"\e00e";
+}
+
+.oi-arrow-thick-bottom:before {
+ content:"\e00f";
+}
+
+.oi-arrow-thick-left:before {
+ content:"\e010";
+}
+
+.oi-arrow-thick-right:before {
+ content:"\e011";
+}
+
+.oi-arrow-thick-top:before {
+ content:"\e012";
+}
+
+.oi-arrow-top:before {
+ content:"\e013";
+}
+
+.oi-audio-spectrum:before {
+ content:"\e014";
+}
+
+.oi-audio:before {
+ content:"\e015";
+}
+
+.oi-badge:before {
+ content:"\e016";
+}
+
+.oi-ban:before {
+ content:"\e017";
+}
+
+.oi-bar-chart:before {
+ content:"\e018";
+}
+
+.oi-basket:before {
+ content:"\e019";
+}
+
+.oi-battery-empty:before {
+ content:"\e01a";
+}
+
+.oi-battery-full:before {
+ content:"\e01b";
+}
+
+.oi-beaker:before {
+ content:"\e01c";
+}
+
+.oi-bell:before {
+ content:"\e01d";
+}
+
+.oi-bluetooth:before {
+ content:"\e01e";
+}
+
+.oi-bold:before {
+ content:"\e01f";
+}
+
+.oi-bolt:before {
+ content:"\e020";
+}
+
+.oi-book:before {
+ content:"\e021";
+}
+
+.oi-bookmark:before {
+ content:"\e022";
+}
+
+.oi-box:before {
+ content:"\e023";
+}
+
+.oi-briefcase:before {
+ content:"\e024";
+}
+
+.oi-british-pound:before {
+ content:"\e025";
+}
+
+.oi-browser:before {
+ content:"\e026";
+}
+
+.oi-brush:before {
+ content:"\e027";
+}
+
+.oi-bug:before {
+ content:"\e028";
+}
+
+.oi-bullhorn:before {
+ content:"\e029";
+}
+
+.oi-calculator:before {
+ content:"\e02a";
+}
+
+.oi-calendar:before {
+ content:"\e02b";
+}
+
+.oi-camera-slr:before {
+ content:"\e02c";
+}
+
+.oi-caret-bottom:before {
+ content:"\e02d";
+}
+
+.oi-caret-left:before {
+ content:"\e02e";
+}
+
+.oi-caret-right:before {
+ content:"\e02f";
+}
+
+.oi-caret-top:before {
+ content:"\e030";
+}
+
+.oi-cart:before {
+ content:"\e031";
+}
+
+.oi-chat:before {
+ content:"\e032";
+}
+
+.oi-check:before {
+ content:"\e033";
+}
+
+.oi-chevron-bottom:before {
+ content:"\e034";
+}
+
+.oi-chevron-left:before {
+ content:"\e035";
+}
+
+.oi-chevron-right:before {
+ content:"\e036";
+}
+
+.oi-chevron-top:before {
+ content:"\e037";
+}
+
+.oi-circle-check:before {
+ content:"\e038";
+}
+
+.oi-circle-x:before {
+ content:"\e039";
+}
+
+.oi-clipboard:before {
+ content:"\e03a";
+}
+
+.oi-clock:before {
+ content:"\e03b";
+}
+
+.oi-cloud-download:before {
+ content:"\e03c";
+}
+
+.oi-cloud-upload:before {
+ content:"\e03d";
+}
+
+.oi-cloud:before {
+ content:"\e03e";
+}
+
+.oi-cloudy:before {
+ content:"\e03f";
+}
+
+.oi-code:before {
+ content:"\e040";
+}
+
+.oi-cog:before {
+ content:"\e041";
+}
+
+.oi-collapse-down:before {
+ content:"\e042";
+}
+
+.oi-collapse-left:before {
+ content:"\e043";
+}
+
+.oi-collapse-right:before {
+ content:"\e044";
+}
+
+.oi-collapse-up:before {
+ content:"\e045";
+}
+
+.oi-command:before {
+ content:"\e046";
+}
+
+.oi-comment-square:before {
+ content:"\e047";
+}
+
+.oi-compass:before {
+ content:"\e048";
+}
+
+.oi-contrast:before {
+ content:"\e049";
+}
+
+.oi-copywriting:before {
+ content:"\e04a";
+}
+
+.oi-credit-card:before {
+ content:"\e04b";
+}
+
+.oi-crop:before {
+ content:"\e04c";
+}
+
+.oi-dashboard:before {
+ content:"\e04d";
+}
+
+.oi-data-transfer-download:before {
+ content:"\e04e";
+}
+
+.oi-data-transfer-upload:before {
+ content:"\e04f";
+}
+
+.oi-delete:before {
+ content:"\e050";
+}
+
+.oi-dial:before {
+ content:"\e051";
+}
+
+.oi-document:before {
+ content:"\e052";
+}
+
+.oi-dollar:before {
+ content:"\e053";
+}
+
+.oi-double-quote-sans-left:before {
+ content:"\e054";
+}
+
+.oi-double-quote-sans-right:before {
+ content:"\e055";
+}
+
+.oi-double-quote-serif-left:before {
+ content:"\e056";
+}
+
+.oi-double-quote-serif-right:before {
+ content:"\e057";
+}
+
+.oi-droplet:before {
+ content:"\e058";
+}
+
+.oi-eject:before {
+ content:"\e059";
+}
+
+.oi-elevator:before {
+ content:"\e05a";
+}
+
+.oi-ellipses:before {
+ content:"\e05b";
+}
+
+.oi-envelope-closed:before {
+ content:"\e05c";
+}
+
+.oi-envelope-open:before {
+ content:"\e05d";
+}
+
+.oi-euro:before {
+ content:"\e05e";
+}
+
+.oi-excerpt:before {
+ content:"\e05f";
+}
+
+.oi-expand-down:before {
+ content:"\e060";
+}
+
+.oi-expand-left:before {
+ content:"\e061";
+}
+
+.oi-expand-right:before {
+ content:"\e062";
+}
+
+.oi-expand-up:before {
+ content:"\e063";
+}
+
+.oi-external-link:before {
+ content:"\e064";
+}
+
+.oi-eye:before {
+ content:"\e065";
+}
+
+.oi-eyedropper:before {
+ content:"\e066";
+}
+
+.oi-file:before {
+ content:"\e067";
+}
+
+.oi-fire:before {
+ content:"\e068";
+}
+
+.oi-flag:before {
+ content:"\e069";
+}
+
+.oi-flash:before {
+ content:"\e06a";
+}
+
+.oi-folder:before {
+ content:"\e06b";
+}
+
+.oi-fork:before {
+ content:"\e06c";
+}
+
+.oi-fullscreen-enter:before {
+ content:"\e06d";
+}
+
+.oi-fullscreen-exit:before {
+ content:"\e06e";
+}
+
+.oi-globe:before {
+ content:"\e06f";
+}
+
+.oi-graph:before {
+ content:"\e070";
+}
+
+.oi-grid-four-up:before {
+ content:"\e071";
+}
+
+.oi-grid-three-up:before {
+ content:"\e072";
+}
+
+.oi-grid-two-up:before {
+ content:"\e073";
+}
+
+.oi-hard-drive:before {
+ content:"\e074";
+}
+
+.oi-header:before {
+ content:"\e075";
+}
+
+.oi-headphones:before {
+ content:"\e076";
+}
+
+.oi-heart:before {
+ content:"\e077";
+}
+
+.oi-home:before {
+ content:"\e078";
+}
+
+.oi-image:before {
+ content:"\e079";
+}
+
+.oi-inbox:before {
+ content:"\e07a";
+}
+
+.oi-infinity:before {
+ content:"\e07b";
+}
+
+.oi-info:before {
+ content:"\e07c";
+}
+
+.oi-italic:before {
+ content:"\e07d";
+}
+
+.oi-justify-center:before {
+ content:"\e07e";
+}
+
+.oi-justify-left:before {
+ content:"\e07f";
+}
+
+.oi-justify-right:before {
+ content:"\e080";
+}
+
+.oi-key:before {
+ content:"\e081";
+}
+
+.oi-laptop:before {
+ content:"\e082";
+}
+
+.oi-layers:before {
+ content:"\e083";
+}
+
+.oi-lightbulb:before {
+ content:"\e084";
+}
+
+.oi-link-broken:before {
+ content:"\e085";
+}
+
+.oi-link-intact:before {
+ content:"\e086";
+}
+
+.oi-list-rich:before {
+ content:"\e087";
+}
+
+.oi-list:before {
+ content:"\e088";
+}
+
+.oi-location:before {
+ content:"\e089";
+}
+
+.oi-lock-locked:before {
+ content:"\e08a";
+}
+
+.oi-lock-unlocked:before {
+ content:"\e08b";
+}
+
+.oi-loop-circular:before {
+ content:"\e08c";
+}
+
+.oi-loop-square:before {
+ content:"\e08d";
+}
+
+.oi-loop:before {
+ content:"\e08e";
+}
+
+.oi-magnifying-glass:before {
+ content:"\e08f";
+}
+
+.oi-map-marker:before {
+ content:"\e090";
+}
+
+.oi-map:before {
+ content:"\e091";
+}
+
+.oi-media-pause:before {
+ content:"\e092";
+}
+
+.oi-media-play:before {
+ content:"\e093";
+}
+
+.oi-media-record:before {
+ content:"\e094";
+}
+
+.oi-media-skip-backward:before {
+ content:"\e095";
+}
+
+.oi-media-skip-forward:before {
+ content:"\e096";
+}
+
+.oi-media-step-backward:before {
+ content:"\e097";
+}
+
+.oi-media-step-forward:before {
+ content:"\e098";
+}
+
+.oi-media-stop:before {
+ content:"\e099";
+}
+
+.oi-medical-cross:before {
+ content:"\e09a";
+}
+
+.oi-menu:before {
+ content:"\e09b";
+}
+
+.oi-microphone:before {
+ content:"\e09c";
+}
+
+.oi-minus:before {
+ content:"\e09d";
+}
+
+.oi-monitor:before {
+ content:"\e09e";
+}
+
+.oi-moon:before {
+ content:"\e09f";
+}
+
+.oi-move:before {
+ content:"\e0a0";
+}
+
+.oi-musical-note:before {
+ content:"\e0a1";
+}
+
+.oi-paperclip:before {
+ content:"\e0a2";
+}
+
+.oi-pencil:before {
+ content:"\e0a3";
+}
+
+.oi-people:before {
+ content:"\e0a4";
+}
+
+.oi-person:before {
+ content:"\e0a5";
+}
+
+.oi-phone:before {
+ content:"\e0a6";
+}
+
+.oi-pie-chart:before {
+ content:"\e0a7";
+}
+
+.oi-pin:before {
+ content:"\e0a8";
+}
+
+.oi-play-circle:before {
+ content:"\e0a9";
+}
+
+.oi-plus:before {
+ content:"\e0aa";
+}
+
+.oi-power-standby:before {
+ content:"\e0ab";
+}
+
+.oi-print:before {
+ content:"\e0ac";
+}
+
+.oi-project:before {
+ content:"\e0ad";
+}
+
+.oi-pulse:before {
+ content:"\e0ae";
+}
+
+.oi-puzzle-piece:before {
+ content:"\e0af";
+}
+
+.oi-question-mark:before {
+ content:"\e0b0";
+}
+
+.oi-rain:before {
+ content:"\e0b1";
+}
+
+.oi-random:before {
+ content:"\e0b2";
+}
+
+.oi-reload:before {
+ content:"\e0b3";
+}
+
+.oi-resize-both:before {
+ content:"\e0b4";
+}
+
+.oi-resize-height:before {
+ content:"\e0b5";
+}
+
+.oi-resize-width:before {
+ content:"\e0b6";
+}
+
+.oi-rss-alt:before {
+ content:"\e0b7";
+}
+
+.oi-rss:before {
+ content:"\e0b8";
+}
+
+.oi-script:before {
+ content:"\e0b9";
+}
+
+.oi-share-boxed:before {
+ content:"\e0ba";
+}
+
+.oi-share:before {
+ content:"\e0bb";
+}
+
+.oi-shield:before {
+ content:"\e0bc";
+}
+
+.oi-signal:before {
+ content:"\e0bd";
+}
+
+.oi-signpost:before {
+ content:"\e0be";
+}
+
+.oi-sort-ascending:before {
+ content:"\e0bf";
+}
+
+.oi-sort-descending:before {
+ content:"\e0c0";
+}
+
+.oi-spreadsheet:before {
+ content:"\e0c1";
+}
+
+.oi-star:before {
+ content:"\e0c2";
+}
+
+.oi-sun:before {
+ content:"\e0c3";
+}
+
+.oi-tablet:before {
+ content:"\e0c4";
+}
+
+.oi-tag:before {
+ content:"\e0c5";
+}
+
+.oi-tags:before {
+ content:"\e0c6";
+}
+
+.oi-target:before {
+ content:"\e0c7";
+}
+
+.oi-task:before {
+ content:"\e0c8";
+}
+
+.oi-terminal:before {
+ content:"\e0c9";
+}
+
+.oi-text:before {
+ content:"\e0ca";
+}
+
+.oi-thumb-down:before {
+ content:"\e0cb";
+}
+
+.oi-thumb-up:before {
+ content:"\e0cc";
+}
+
+.oi-timer:before {
+ content:"\e0cd";
+}
+
+.oi-transfer:before {
+ content:"\e0ce";
+}
+
+.oi-trash:before {
+ content:"\e0cf";
+}
+
+.oi-underline:before {
+ content:"\e0d0";
+}
+
+.oi-vertical-align-bottom:before {
+ content:"\e0d1";
+}
+
+.oi-vertical-align-center:before {
+ content:"\e0d2";
+}
+
+.oi-vertical-align-top:before {
+ content:"\e0d3";
+}
+
+.oi-video:before {
+ content:"\e0d4";
+}
+
+.oi-volume-high:before {
+ content:"\e0d5";
+}
+
+.oi-volume-low:before {
+ content:"\e0d6";
+}
+
+.oi-volume-off:before {
+ content:"\e0d7";
+}
+
+.oi-warning:before {
+ content:"\e0d8";
+}
+
+.oi-wifi:before {
+ content:"\e0d9";
+}
+
+.oi-wrench:before {
+ content:"\e0da";
+}
+
+.oi-x:before {
+ content:"\e0db";
+}
+
+.oi-yen:before {
+ content:"\e0dc";
+}
+
+.oi-zoom-in:before {
+ content:"\e0dd";
+}
+
+.oi-zoom-out:before {
+ content:"\e0de";
+}
+
diff --git a/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic-bootstrap.min.css b/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic-bootstrap.min.css
new file mode 100644
index 0000000..4664f2e
--- /dev/null
+++ b/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic-bootstrap.min.css
@@ -0,0 +1 @@
+@font-face{font-family:Icons;src:url(../fonts/open-iconic.eot);src:url(../fonts/open-iconic.eot?#iconic-sm) format('embedded-opentype'),url(../fonts/open-iconic.woff) format('woff'),url(../fonts/open-iconic.ttf) format('truetype'),url(../fonts/open-iconic.otf) format('opentype'),url(../fonts/open-iconic.svg#iconic-sm) format('svg');font-weight:400;font-style:normal}.oi{position:relative;top:1px;display:inline-block;speak:none;font-family:Icons;font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.oi:empty:before{width:1em;text-align:center;box-sizing:content-box}.oi.oi-align-center:before{text-align:center}.oi.oi-align-left:before{text-align:left}.oi.oi-align-right:before{text-align:right}.oi.oi-flip-horizontal:before{-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1)}.oi.oi-flip-vertical:before{-webkit-transform:scale(1,-1);-ms-transform:scale(-1,1);transform:scale(1,-1)}.oi.oi-flip-horizontal-vertical:before{-webkit-transform:scale(-1,-1);-ms-transform:scale(-1,1);transform:scale(-1,-1)}.oi-account-login:before{content:'\e000'}.oi-account-logout:before{content:'\e001'}.oi-action-redo:before{content:'\e002'}.oi-action-undo:before{content:'\e003'}.oi-align-center:before{content:'\e004'}.oi-align-left:before{content:'\e005'}.oi-align-right:before{content:'\e006'}.oi-aperture:before{content:'\e007'}.oi-arrow-bottom:before{content:'\e008'}.oi-arrow-circle-bottom:before{content:'\e009'}.oi-arrow-circle-left:before{content:'\e00a'}.oi-arrow-circle-right:before{content:'\e00b'}.oi-arrow-circle-top:before{content:'\e00c'}.oi-arrow-left:before{content:'\e00d'}.oi-arrow-right:before{content:'\e00e'}.oi-arrow-thick-bottom:before{content:'\e00f'}.oi-arrow-thick-left:before{content:'\e010'}.oi-arrow-thick-right:before{content:'\e011'}.oi-arrow-thick-top:before{content:'\e012'}.oi-arrow-top:before{content:'\e013'}.oi-audio-spectrum:before{content:'\e014'}.oi-audio:before{content:'\e015'}.oi-badge:before{content:'\e016'}.oi-ban:before{content:'\e017'}.oi-bar-chart:before{content:'\e018'}.oi-basket:before{content:'\e019'}.oi-battery-empty:before{content:'\e01a'}.oi-battery-full:before{content:'\e01b'}.oi-beaker:before{content:'\e01c'}.oi-bell:before{content:'\e01d'}.oi-bluetooth:before{content:'\e01e'}.oi-bold:before{content:'\e01f'}.oi-bolt:before{content:'\e020'}.oi-book:before{content:'\e021'}.oi-bookmark:before{content:'\e022'}.oi-box:before{content:'\e023'}.oi-briefcase:before{content:'\e024'}.oi-british-pound:before{content:'\e025'}.oi-browser:before{content:'\e026'}.oi-brush:before{content:'\e027'}.oi-bug:before{content:'\e028'}.oi-bullhorn:before{content:'\e029'}.oi-calculator:before{content:'\e02a'}.oi-calendar:before{content:'\e02b'}.oi-camera-slr:before{content:'\e02c'}.oi-caret-bottom:before{content:'\e02d'}.oi-caret-left:before{content:'\e02e'}.oi-caret-right:before{content:'\e02f'}.oi-caret-top:before{content:'\e030'}.oi-cart:before{content:'\e031'}.oi-chat:before{content:'\e032'}.oi-check:before{content:'\e033'}.oi-chevron-bottom:before{content:'\e034'}.oi-chevron-left:before{content:'\e035'}.oi-chevron-right:before{content:'\e036'}.oi-chevron-top:before{content:'\e037'}.oi-circle-check:before{content:'\e038'}.oi-circle-x:before{content:'\e039'}.oi-clipboard:before{content:'\e03a'}.oi-clock:before{content:'\e03b'}.oi-cloud-download:before{content:'\e03c'}.oi-cloud-upload:before{content:'\e03d'}.oi-cloud:before{content:'\e03e'}.oi-cloudy:before{content:'\e03f'}.oi-code:before{content:'\e040'}.oi-cog:before{content:'\e041'}.oi-collapse-down:before{content:'\e042'}.oi-collapse-left:before{content:'\e043'}.oi-collapse-right:before{content:'\e044'}.oi-collapse-up:before{content:'\e045'}.oi-command:before{content:'\e046'}.oi-comment-square:before{content:'\e047'}.oi-compass:before{content:'\e048'}.oi-contrast:before{content:'\e049'}.oi-copywriting:before{content:'\e04a'}.oi-credit-card:before{content:'\e04b'}.oi-crop:before{content:'\e04c'}.oi-dashboard:before{content:'\e04d'}.oi-data-transfer-download:before{content:'\e04e'}.oi-data-transfer-upload:before{content:'\e04f'}.oi-delete:before{content:'\e050'}.oi-dial:before{content:'\e051'}.oi-document:before{content:'\e052'}.oi-dollar:before{content:'\e053'}.oi-double-quote-sans-left:before{content:'\e054'}.oi-double-quote-sans-right:before{content:'\e055'}.oi-double-quote-serif-left:before{content:'\e056'}.oi-double-quote-serif-right:before{content:'\e057'}.oi-droplet:before{content:'\e058'}.oi-eject:before{content:'\e059'}.oi-elevator:before{content:'\e05a'}.oi-ellipses:before{content:'\e05b'}.oi-envelope-closed:before{content:'\e05c'}.oi-envelope-open:before{content:'\e05d'}.oi-euro:before{content:'\e05e'}.oi-excerpt:before{content:'\e05f'}.oi-expand-down:before{content:'\e060'}.oi-expand-left:before{content:'\e061'}.oi-expand-right:before{content:'\e062'}.oi-expand-up:before{content:'\e063'}.oi-external-link:before{content:'\e064'}.oi-eye:before{content:'\e065'}.oi-eyedropper:before{content:'\e066'}.oi-file:before{content:'\e067'}.oi-fire:before{content:'\e068'}.oi-flag:before{content:'\e069'}.oi-flash:before{content:'\e06a'}.oi-folder:before{content:'\e06b'}.oi-fork:before{content:'\e06c'}.oi-fullscreen-enter:before{content:'\e06d'}.oi-fullscreen-exit:before{content:'\e06e'}.oi-globe:before{content:'\e06f'}.oi-graph:before{content:'\e070'}.oi-grid-four-up:before{content:'\e071'}.oi-grid-three-up:before{content:'\e072'}.oi-grid-two-up:before{content:'\e073'}.oi-hard-drive:before{content:'\e074'}.oi-header:before{content:'\e075'}.oi-headphones:before{content:'\e076'}.oi-heart:before{content:'\e077'}.oi-home:before{content:'\e078'}.oi-image:before{content:'\e079'}.oi-inbox:before{content:'\e07a'}.oi-infinity:before{content:'\e07b'}.oi-info:before{content:'\e07c'}.oi-italic:before{content:'\e07d'}.oi-justify-center:before{content:'\e07e'}.oi-justify-left:before{content:'\e07f'}.oi-justify-right:before{content:'\e080'}.oi-key:before{content:'\e081'}.oi-laptop:before{content:'\e082'}.oi-layers:before{content:'\e083'}.oi-lightbulb:before{content:'\e084'}.oi-link-broken:before{content:'\e085'}.oi-link-intact:before{content:'\e086'}.oi-list-rich:before{content:'\e087'}.oi-list:before{content:'\e088'}.oi-location:before{content:'\e089'}.oi-lock-locked:before{content:'\e08a'}.oi-lock-unlocked:before{content:'\e08b'}.oi-loop-circular:before{content:'\e08c'}.oi-loop-square:before{content:'\e08d'}.oi-loop:before{content:'\e08e'}.oi-magnifying-glass:before{content:'\e08f'}.oi-map-marker:before{content:'\e090'}.oi-map:before{content:'\e091'}.oi-media-pause:before{content:'\e092'}.oi-media-play:before{content:'\e093'}.oi-media-record:before{content:'\e094'}.oi-media-skip-backward:before{content:'\e095'}.oi-media-skip-forward:before{content:'\e096'}.oi-media-step-backward:before{content:'\e097'}.oi-media-step-forward:before{content:'\e098'}.oi-media-stop:before{content:'\e099'}.oi-medical-cross:before{content:'\e09a'}.oi-menu:before{content:'\e09b'}.oi-microphone:before{content:'\e09c'}.oi-minus:before{content:'\e09d'}.oi-monitor:before{content:'\e09e'}.oi-moon:before{content:'\e09f'}.oi-move:before{content:'\e0a0'}.oi-musical-note:before{content:'\e0a1'}.oi-paperclip:before{content:'\e0a2'}.oi-pencil:before{content:'\e0a3'}.oi-people:before{content:'\e0a4'}.oi-person:before{content:'\e0a5'}.oi-phone:before{content:'\e0a6'}.oi-pie-chart:before{content:'\e0a7'}.oi-pin:before{content:'\e0a8'}.oi-play-circle:before{content:'\e0a9'}.oi-plus:before{content:'\e0aa'}.oi-power-standby:before{content:'\e0ab'}.oi-print:before{content:'\e0ac'}.oi-project:before{content:'\e0ad'}.oi-pulse:before{content:'\e0ae'}.oi-puzzle-piece:before{content:'\e0af'}.oi-question-mark:before{content:'\e0b0'}.oi-rain:before{content:'\e0b1'}.oi-random:before{content:'\e0b2'}.oi-reload:before{content:'\e0b3'}.oi-resize-both:before{content:'\e0b4'}.oi-resize-height:before{content:'\e0b5'}.oi-resize-width:before{content:'\e0b6'}.oi-rss-alt:before{content:'\e0b7'}.oi-rss:before{content:'\e0b8'}.oi-script:before{content:'\e0b9'}.oi-share-boxed:before{content:'\e0ba'}.oi-share:before{content:'\e0bb'}.oi-shield:before{content:'\e0bc'}.oi-signal:before{content:'\e0bd'}.oi-signpost:before{content:'\e0be'}.oi-sort-ascending:before{content:'\e0bf'}.oi-sort-descending:before{content:'\e0c0'}.oi-spreadsheet:before{content:'\e0c1'}.oi-star:before{content:'\e0c2'}.oi-sun:before{content:'\e0c3'}.oi-tablet:before{content:'\e0c4'}.oi-tag:before{content:'\e0c5'}.oi-tags:before{content:'\e0c6'}.oi-target:before{content:'\e0c7'}.oi-task:before{content:'\e0c8'}.oi-terminal:before{content:'\e0c9'}.oi-text:before{content:'\e0ca'}.oi-thumb-down:before{content:'\e0cb'}.oi-thumb-up:before{content:'\e0cc'}.oi-timer:before{content:'\e0cd'}.oi-transfer:before{content:'\e0ce'}.oi-trash:before{content:'\e0cf'}.oi-underline:before{content:'\e0d0'}.oi-vertical-align-bottom:before{content:'\e0d1'}.oi-vertical-align-center:before{content:'\e0d2'}.oi-vertical-align-top:before{content:'\e0d3'}.oi-video:before{content:'\e0d4'}.oi-volume-high:before{content:'\e0d5'}.oi-volume-low:before{content:'\e0d6'}.oi-volume-off:before{content:'\e0d7'}.oi-warning:before{content:'\e0d8'}.oi-wifi:before{content:'\e0d9'}.oi-wrench:before{content:'\e0da'}.oi-x:before{content:'\e0db'}.oi-yen:before{content:'\e0dc'}.oi-zoom-in:before{content:'\e0dd'}.oi-zoom-out:before{content:'\e0de'}
\ No newline at end of file
diff --git a/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic-bootstrap.scss b/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic-bootstrap.scss
new file mode 100644
index 0000000..18f01e2
--- /dev/null
+++ b/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic-bootstrap.scss
@@ -0,0 +1,958 @@
+/* Bootstrap */
+
+/* Override Bootstrap default variable */
+$icon-font-path: '../fonts/' !default;
+
+@font-face {
+ font-family: 'Icons';
+ src: url('#{$icon-font-path}open-iconic.eot');
+ src: url('#{$icon-font-path}open-iconic.eot?#iconic-sm') format('embedded-opentype'), url('#{$icon-font-path}open-iconic.woff') format('woff'), url('#{$icon-font-path}open-iconic.ttf') format('truetype'), url('#{$icon-font-path}open-iconic.svg#iconic-sm') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+// Catchall baseclass
+.oi {
+ position: relative;
+ top: 1px;
+ display: inline-block;
+ font-family: 'Icons';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+
+
+ &:empty:before {
+ width: 1em;
+ text-align: center;
+ box-sizing: content-box;
+ }
+
+ &.oi-align-center:before {
+ text-align: center;
+ }
+
+ &.oi-align-left:before {
+ text-align: left;
+ }
+
+ &.oi-align-right:before {
+ text-align: right;
+ }
+
+
+ &.oi-flip-horizontal:before {
+ -webkit-transform: scale(-1, 1);
+ -ms-transform: scale(-1, 1);
+ transform: scale(-1, 1);
+ }
+
+ &.oi-flip-vertical:before {
+ -webkit-transform: scale(1, -1);
+ -ms-transform: scale(-1, 1);
+ transform: scale(1, -1);
+ }
+
+ &.oi-flip-horizontal-vertical:before {
+ -webkit-transform: scale(-1, -1);
+ -ms-transform: scale(-1, 1);
+ transform: scale(-1, -1);
+ }
+}
+
+
+
+.oi-account-login:before {
+ content:'\e000';
+}
+
+.oi-account-logout:before {
+ content:'\e001';
+}
+
+.oi-action-redo:before {
+ content:'\e002';
+}
+
+.oi-action-undo:before {
+ content:'\e003';
+}
+
+.oi-align-center:before {
+ content:'\e004';
+}
+
+.oi-align-left:before {
+ content:'\e005';
+}
+
+.oi-align-right:before {
+ content:'\e006';
+}
+
+.oi-aperture:before {
+ content:'\e007';
+}
+
+.oi-arrow-bottom:before {
+ content:'\e008';
+}
+
+.oi-arrow-circle-bottom:before {
+ content:'\e009';
+}
+
+.oi-arrow-circle-left:before {
+ content:'\e00a';
+}
+
+.oi-arrow-circle-right:before {
+ content:'\e00b';
+}
+
+.oi-arrow-circle-top:before {
+ content:'\e00c';
+}
+
+.oi-arrow-left:before {
+ content:'\e00d';
+}
+
+.oi-arrow-right:before {
+ content:'\e00e';
+}
+
+.oi-arrow-thick-bottom:before {
+ content:'\e00f';
+}
+
+.oi-arrow-thick-left:before {
+ content:'\e010';
+}
+
+.oi-arrow-thick-right:before {
+ content:'\e011';
+}
+
+.oi-arrow-thick-top:before {
+ content:'\e012';
+}
+
+.oi-arrow-top:before {
+ content:'\e013';
+}
+
+.oi-audio-spectrum:before {
+ content:'\e014';
+}
+
+.oi-audio:before {
+ content:'\e015';
+}
+
+.oi-badge:before {
+ content:'\e016';
+}
+
+.oi-ban:before {
+ content:'\e017';
+}
+
+.oi-bar-chart:before {
+ content:'\e018';
+}
+
+.oi-basket:before {
+ content:'\e019';
+}
+
+.oi-battery-empty:before {
+ content:'\e01a';
+}
+
+.oi-battery-full:before {
+ content:'\e01b';
+}
+
+.oi-beaker:before {
+ content:'\e01c';
+}
+
+.oi-bell:before {
+ content:'\e01d';
+}
+
+.oi-bluetooth:before {
+ content:'\e01e';
+}
+
+.oi-bold:before {
+ content:'\e01f';
+}
+
+.oi-bolt:before {
+ content:'\e020';
+}
+
+.oi-book:before {
+ content:'\e021';
+}
+
+.oi-bookmark:before {
+ content:'\e022';
+}
+
+.oi-box:before {
+ content:'\e023';
+}
+
+.oi-briefcase:before {
+ content:'\e024';
+}
+
+.oi-british-pound:before {
+ content:'\e025';
+}
+
+.oi-browser:before {
+ content:'\e026';
+}
+
+.oi-brush:before {
+ content:'\e027';
+}
+
+.oi-bug:before {
+ content:'\e028';
+}
+
+.oi-bullhorn:before {
+ content:'\e029';
+}
+
+.oi-calculator:before {
+ content:'\e02a';
+}
+
+.oi-calendar:before {
+ content:'\e02b';
+}
+
+.oi-camera-slr:before {
+ content:'\e02c';
+}
+
+.oi-caret-bottom:before {
+ content:'\e02d';
+}
+
+.oi-caret-left:before {
+ content:'\e02e';
+}
+
+.oi-caret-right:before {
+ content:'\e02f';
+}
+
+.oi-caret-top:before {
+ content:'\e030';
+}
+
+.oi-cart:before {
+ content:'\e031';
+}
+
+.oi-chat:before {
+ content:'\e032';
+}
+
+.oi-check:before {
+ content:'\e033';
+}
+
+.oi-chevron-bottom:before {
+ content:'\e034';
+}
+
+.oi-chevron-left:before {
+ content:'\e035';
+}
+
+.oi-chevron-right:before {
+ content:'\e036';
+}
+
+.oi-chevron-top:before {
+ content:'\e037';
+}
+
+.oi-circle-check:before {
+ content:'\e038';
+}
+
+.oi-circle-x:before {
+ content:'\e039';
+}
+
+.oi-clipboard:before {
+ content:'\e03a';
+}
+
+.oi-clock:before {
+ content:'\e03b';
+}
+
+.oi-cloud-download:before {
+ content:'\e03c';
+}
+
+.oi-cloud-upload:before {
+ content:'\e03d';
+}
+
+.oi-cloud:before {
+ content:'\e03e';
+}
+
+.oi-cloudy:before {
+ content:'\e03f';
+}
+
+.oi-code:before {
+ content:'\e040';
+}
+
+.oi-cog:before {
+ content:'\e041';
+}
+
+.oi-collapse-down:before {
+ content:'\e042';
+}
+
+.oi-collapse-left:before {
+ content:'\e043';
+}
+
+.oi-collapse-right:before {
+ content:'\e044';
+}
+
+.oi-collapse-up:before {
+ content:'\e045';
+}
+
+.oi-command:before {
+ content:'\e046';
+}
+
+.oi-comment-square:before {
+ content:'\e047';
+}
+
+.oi-compass:before {
+ content:'\e048';
+}
+
+.oi-contrast:before {
+ content:'\e049';
+}
+
+.oi-copywriting:before {
+ content:'\e04a';
+}
+
+.oi-credit-card:before {
+ content:'\e04b';
+}
+
+.oi-crop:before {
+ content:'\e04c';
+}
+
+.oi-dashboard:before {
+ content:'\e04d';
+}
+
+.oi-data-transfer-download:before {
+ content:'\e04e';
+}
+
+.oi-data-transfer-upload:before {
+ content:'\e04f';
+}
+
+.oi-delete:before {
+ content:'\e050';
+}
+
+.oi-dial:before {
+ content:'\e051';
+}
+
+.oi-document:before {
+ content:'\e052';
+}
+
+.oi-dollar:before {
+ content:'\e053';
+}
+
+.oi-double-quote-sans-left:before {
+ content:'\e054';
+}
+
+.oi-double-quote-sans-right:before {
+ content:'\e055';
+}
+
+.oi-double-quote-serif-left:before {
+ content:'\e056';
+}
+
+.oi-double-quote-serif-right:before {
+ content:'\e057';
+}
+
+.oi-droplet:before {
+ content:'\e058';
+}
+
+.oi-eject:before {
+ content:'\e059';
+}
+
+.oi-elevator:before {
+ content:'\e05a';
+}
+
+.oi-ellipses:before {
+ content:'\e05b';
+}
+
+.oi-envelope-closed:before {
+ content:'\e05c';
+}
+
+.oi-envelope-open:before {
+ content:'\e05d';
+}
+
+.oi-euro:before {
+ content:'\e05e';
+}
+
+.oi-excerpt:before {
+ content:'\e05f';
+}
+
+.oi-expand-down:before {
+ content:'\e060';
+}
+
+.oi-expand-left:before {
+ content:'\e061';
+}
+
+.oi-expand-right:before {
+ content:'\e062';
+}
+
+.oi-expand-up:before {
+ content:'\e063';
+}
+
+.oi-external-link:before {
+ content:'\e064';
+}
+
+.oi-eye:before {
+ content:'\e065';
+}
+
+.oi-eyedropper:before {
+ content:'\e066';
+}
+
+.oi-file:before {
+ content:'\e067';
+}
+
+.oi-fire:before {
+ content:'\e068';
+}
+
+.oi-flag:before {
+ content:'\e069';
+}
+
+.oi-flash:before {
+ content:'\e06a';
+}
+
+.oi-folder:before {
+ content:'\e06b';
+}
+
+.oi-fork:before {
+ content:'\e06c';
+}
+
+.oi-fullscreen-enter:before {
+ content:'\e06d';
+}
+
+.oi-fullscreen-exit:before {
+ content:'\e06e';
+}
+
+.oi-globe:before {
+ content:'\e06f';
+}
+
+.oi-graph:before {
+ content:'\e070';
+}
+
+.oi-grid-four-up:before {
+ content:'\e071';
+}
+
+.oi-grid-three-up:before {
+ content:'\e072';
+}
+
+.oi-grid-two-up:before {
+ content:'\e073';
+}
+
+.oi-hard-drive:before {
+ content:'\e074';
+}
+
+.oi-header:before {
+ content:'\e075';
+}
+
+.oi-headphones:before {
+ content:'\e076';
+}
+
+.oi-heart:before {
+ content:'\e077';
+}
+
+.oi-home:before {
+ content:'\e078';
+}
+
+.oi-image:before {
+ content:'\e079';
+}
+
+.oi-inbox:before {
+ content:'\e07a';
+}
+
+.oi-infinity:before {
+ content:'\e07b';
+}
+
+.oi-info:before {
+ content:'\e07c';
+}
+
+.oi-italic:before {
+ content:'\e07d';
+}
+
+.oi-justify-center:before {
+ content:'\e07e';
+}
+
+.oi-justify-left:before {
+ content:'\e07f';
+}
+
+.oi-justify-right:before {
+ content:'\e080';
+}
+
+.oi-key:before {
+ content:'\e081';
+}
+
+.oi-laptop:before {
+ content:'\e082';
+}
+
+.oi-layers:before {
+ content:'\e083';
+}
+
+.oi-lightbulb:before {
+ content:'\e084';
+}
+
+.oi-link-broken:before {
+ content:'\e085';
+}
+
+.oi-link-intact:before {
+ content:'\e086';
+}
+
+.oi-list-rich:before {
+ content:'\e087';
+}
+
+.oi-list:before {
+ content:'\e088';
+}
+
+.oi-location:before {
+ content:'\e089';
+}
+
+.oi-lock-locked:before {
+ content:'\e08a';
+}
+
+.oi-lock-unlocked:before {
+ content:'\e08b';
+}
+
+.oi-loop-circular:before {
+ content:'\e08c';
+}
+
+.oi-loop-square:before {
+ content:'\e08d';
+}
+
+.oi-loop:before {
+ content:'\e08e';
+}
+
+.oi-magnifying-glass:before {
+ content:'\e08f';
+}
+
+.oi-map-marker:before {
+ content:'\e090';
+}
+
+.oi-map:before {
+ content:'\e091';
+}
+
+.oi-media-pause:before {
+ content:'\e092';
+}
+
+.oi-media-play:before {
+ content:'\e093';
+}
+
+.oi-media-record:before {
+ content:'\e094';
+}
+
+.oi-media-skip-backward:before {
+ content:'\e095';
+}
+
+.oi-media-skip-forward:before {
+ content:'\e096';
+}
+
+.oi-media-step-backward:before {
+ content:'\e097';
+}
+
+.oi-media-step-forward:before {
+ content:'\e098';
+}
+
+.oi-media-stop:before {
+ content:'\e099';
+}
+
+.oi-medical-cross:before {
+ content:'\e09a';
+}
+
+.oi-menu:before {
+ content:'\e09b';
+}
+
+.oi-microphone:before {
+ content:'\e09c';
+}
+
+.oi-minus:before {
+ content:'\e09d';
+}
+
+.oi-monitor:before {
+ content:'\e09e';
+}
+
+.oi-moon:before {
+ content:'\e09f';
+}
+
+.oi-move:before {
+ content:'\e0a0';
+}
+
+.oi-musical-note:before {
+ content:'\e0a1';
+}
+
+.oi-paperclip:before {
+ content:'\e0a2';
+}
+
+.oi-pencil:before {
+ content:'\e0a3';
+}
+
+.oi-people:before {
+ content:'\e0a4';
+}
+
+.oi-person:before {
+ content:'\e0a5';
+}
+
+.oi-phone:before {
+ content:'\e0a6';
+}
+
+.oi-pie-chart:before {
+ content:'\e0a7';
+}
+
+.oi-pin:before {
+ content:'\e0a8';
+}
+
+.oi-play-circle:before {
+ content:'\e0a9';
+}
+
+.oi-plus:before {
+ content:'\e0aa';
+}
+
+.oi-power-standby:before {
+ content:'\e0ab';
+}
+
+.oi-print:before {
+ content:'\e0ac';
+}
+
+.oi-project:before {
+ content:'\e0ad';
+}
+
+.oi-pulse:before {
+ content:'\e0ae';
+}
+
+.oi-puzzle-piece:before {
+ content:'\e0af';
+}
+
+.oi-question-mark:before {
+ content:'\e0b0';
+}
+
+.oi-rain:before {
+ content:'\e0b1';
+}
+
+.oi-random:before {
+ content:'\e0b2';
+}
+
+.oi-reload:before {
+ content:'\e0b3';
+}
+
+.oi-resize-both:before {
+ content:'\e0b4';
+}
+
+.oi-resize-height:before {
+ content:'\e0b5';
+}
+
+.oi-resize-width:before {
+ content:'\e0b6';
+}
+
+.oi-rss-alt:before {
+ content:'\e0b7';
+}
+
+.oi-rss:before {
+ content:'\e0b8';
+}
+
+.oi-script:before {
+ content:'\e0b9';
+}
+
+.oi-share-boxed:before {
+ content:'\e0ba';
+}
+
+.oi-share:before {
+ content:'\e0bb';
+}
+
+.oi-shield:before {
+ content:'\e0bc';
+}
+
+.oi-signal:before {
+ content:'\e0bd';
+}
+
+.oi-signpost:before {
+ content:'\e0be';
+}
+
+.oi-sort-ascending:before {
+ content:'\e0bf';
+}
+
+.oi-sort-descending:before {
+ content:'\e0c0';
+}
+
+.oi-spreadsheet:before {
+ content:'\e0c1';
+}
+
+.oi-star:before {
+ content:'\e0c2';
+}
+
+.oi-sun:before {
+ content:'\e0c3';
+}
+
+.oi-tablet:before {
+ content:'\e0c4';
+}
+
+.oi-tag:before {
+ content:'\e0c5';
+}
+
+.oi-tags:before {
+ content:'\e0c6';
+}
+
+.oi-target:before {
+ content:'\e0c7';
+}
+
+.oi-task:before {
+ content:'\e0c8';
+}
+
+.oi-terminal:before {
+ content:'\e0c9';
+}
+
+.oi-text:before {
+ content:'\e0ca';
+}
+
+.oi-thumb-down:before {
+ content:'\e0cb';
+}
+
+.oi-thumb-up:before {
+ content:'\e0cc';
+}
+
+.oi-timer:before {
+ content:'\e0cd';
+}
+
+.oi-transfer:before {
+ content:'\e0ce';
+}
+
+.oi-trash:before {
+ content:'\e0cf';
+}
+
+.oi-underline:before {
+ content:'\e0d0';
+}
+
+.oi-vertical-align-bottom:before {
+ content:'\e0d1';
+}
+
+.oi-vertical-align-center:before {
+ content:'\e0d2';
+}
+
+.oi-vertical-align-top:before {
+ content:'\e0d3';
+}
+
+.oi-video:before {
+ content:'\e0d4';
+}
+
+.oi-volume-high:before {
+ content:'\e0d5';
+}
+
+.oi-volume-low:before {
+ content:'\e0d6';
+}
+
+.oi-volume-off:before {
+ content:'\e0d7';
+}
+
+.oi-warning:before {
+ content:'\e0d8';
+}
+
+.oi-wifi:before {
+ content:'\e0d9';
+}
+
+.oi-wrench:before {
+ content:'\e0da';
+}
+
+.oi-x:before {
+ content:'\e0db';
+}
+
+.oi-yen:before {
+ content:'\e0dc';
+}
+
+.oi-zoom-in:before {
+ content:'\e0dd';
+}
+
+.oi-zoom-out:before {
+ content:'\e0de';
+}
+
diff --git a/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic-bootstrap.styl b/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic-bootstrap.styl
new file mode 100644
index 0000000..0afa254
--- /dev/null
+++ b/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic-bootstrap.styl
@@ -0,0 +1,954 @@
+/* Bootstrap */
+
+@font-face
+ font-family 'Icons'
+ src url('../fonts/open-iconic.eot')
+ src url('../fonts/open-iconic.eot?#iconic-sm') format('embedded-opentype'), url('../fonts/open-iconic.woff') format('woff'), url('../fonts/open-iconic.ttf') format('truetype'), url('../fonts/open-iconic.svg#iconic-sm') format('svg')
+ font-weight normal
+ font-style normal
+
+
+// Catchall baseclass
+.oi
+ position relative
+ top 1px
+ display inline-block
+ font-family 'Icons'
+ font-style normal
+ font-weight normal
+ line-height 1
+ -webkit-font-smoothing antialiased
+ -moz-osx-font-smoothing grayscale
+
+
+ &:empty:before
+ width 1em
+ text-align center
+ box-sizing content-box
+
+ &.oi-align-center:before
+ text-align center
+
+
+ &.oi-align-left:before
+ text-align left
+
+
+ &.oi-align-right:before
+ text-align right
+
+
+
+ &.oi-flip-horizontal:before
+ -webkit-transform scale(-1, 1)
+ -ms-transform scale(-1, 1)
+ transform scale(-1, 1)
+
+
+ &.oi-flip-vertical:before
+ -webkit-transform scale(1, -1)
+ -ms-transform scale(-1, 1)
+ transform scale(1, -1)
+
+
+ &.oi-flip-horizontal-vertical:before
+ -webkit-transform scale(-1, -1)
+ -ms-transform scale(-1, 1)
+ transform scale(-1, -1)
+
+
+
+
+
+.oi-account-login:before {
+ content'\e000'
+}
+
+.oi-account-logout:before {
+ content'\e001'
+}
+
+.oi-action-redo:before {
+ content'\e002'
+}
+
+.oi-action-undo:before {
+ content'\e003'
+}
+
+.oi-align-center:before {
+ content'\e004'
+}
+
+.oi-align-left:before {
+ content'\e005'
+}
+
+.oi-align-right:before {
+ content'\e006'
+}
+
+.oi-aperture:before {
+ content'\e007'
+}
+
+.oi-arrow-bottom:before {
+ content'\e008'
+}
+
+.oi-arrow-circle-bottom:before {
+ content'\e009'
+}
+
+.oi-arrow-circle-left:before {
+ content'\e00a'
+}
+
+.oi-arrow-circle-right:before {
+ content'\e00b'
+}
+
+.oi-arrow-circle-top:before {
+ content'\e00c'
+}
+
+.oi-arrow-left:before {
+ content'\e00d'
+}
+
+.oi-arrow-right:before {
+ content'\e00e'
+}
+
+.oi-arrow-thick-bottom:before {
+ content'\e00f'
+}
+
+.oi-arrow-thick-left:before {
+ content'\e010'
+}
+
+.oi-arrow-thick-right:before {
+ content'\e011'
+}
+
+.oi-arrow-thick-top:before {
+ content'\e012'
+}
+
+.oi-arrow-top:before {
+ content'\e013'
+}
+
+.oi-audio-spectrum:before {
+ content'\e014'
+}
+
+.oi-audio:before {
+ content'\e015'
+}
+
+.oi-badge:before {
+ content'\e016'
+}
+
+.oi-ban:before {
+ content'\e017'
+}
+
+.oi-bar-chart:before {
+ content'\e018'
+}
+
+.oi-basket:before {
+ content'\e019'
+}
+
+.oi-battery-empty:before {
+ content'\e01a'
+}
+
+.oi-battery-full:before {
+ content'\e01b'
+}
+
+.oi-beaker:before {
+ content'\e01c'
+}
+
+.oi-bell:before {
+ content'\e01d'
+}
+
+.oi-bluetooth:before {
+ content'\e01e'
+}
+
+.oi-bold:before {
+ content'\e01f'
+}
+
+.oi-bolt:before {
+ content'\e020'
+}
+
+.oi-book:before {
+ content'\e021'
+}
+
+.oi-bookmark:before {
+ content'\e022'
+}
+
+.oi-box:before {
+ content'\e023'
+}
+
+.oi-briefcase:before {
+ content'\e024'
+}
+
+.oi-british-pound:before {
+ content'\e025'
+}
+
+.oi-browser:before {
+ content'\e026'
+}
+
+.oi-brush:before {
+ content'\e027'
+}
+
+.oi-bug:before {
+ content'\e028'
+}
+
+.oi-bullhorn:before {
+ content'\e029'
+}
+
+.oi-calculator:before {
+ content'\e02a'
+}
+
+.oi-calendar:before {
+ content'\e02b'
+}
+
+.oi-camera-slr:before {
+ content'\e02c'
+}
+
+.oi-caret-bottom:before {
+ content'\e02d'
+}
+
+.oi-caret-left:before {
+ content'\e02e'
+}
+
+.oi-caret-right:before {
+ content'\e02f'
+}
+
+.oi-caret-top:before {
+ content'\e030'
+}
+
+.oi-cart:before {
+ content'\e031'
+}
+
+.oi-chat:before {
+ content'\e032'
+}
+
+.oi-check:before {
+ content'\e033'
+}
+
+.oi-chevron-bottom:before {
+ content'\e034'
+}
+
+.oi-chevron-left:before {
+ content'\e035'
+}
+
+.oi-chevron-right:before {
+ content'\e036'
+}
+
+.oi-chevron-top:before {
+ content'\e037'
+}
+
+.oi-circle-check:before {
+ content'\e038'
+}
+
+.oi-circle-x:before {
+ content'\e039'
+}
+
+.oi-clipboard:before {
+ content'\e03a'
+}
+
+.oi-clock:before {
+ content'\e03b'
+}
+
+.oi-cloud-download:before {
+ content'\e03c'
+}
+
+.oi-cloud-upload:before {
+ content'\e03d'
+}
+
+.oi-cloud:before {
+ content'\e03e'
+}
+
+.oi-cloudy:before {
+ content'\e03f'
+}
+
+.oi-code:before {
+ content'\e040'
+}
+
+.oi-cog:before {
+ content'\e041'
+}
+
+.oi-collapse-down:before {
+ content'\e042'
+}
+
+.oi-collapse-left:before {
+ content'\e043'
+}
+
+.oi-collapse-right:before {
+ content'\e044'
+}
+
+.oi-collapse-up:before {
+ content'\e045'
+}
+
+.oi-command:before {
+ content'\e046'
+}
+
+.oi-comment-square:before {
+ content'\e047'
+}
+
+.oi-compass:before {
+ content'\e048'
+}
+
+.oi-contrast:before {
+ content'\e049'
+}
+
+.oi-copywriting:before {
+ content'\e04a'
+}
+
+.oi-credit-card:before {
+ content'\e04b'
+}
+
+.oi-crop:before {
+ content'\e04c'
+}
+
+.oi-dashboard:before {
+ content'\e04d'
+}
+
+.oi-data-transfer-download:before {
+ content'\e04e'
+}
+
+.oi-data-transfer-upload:before {
+ content'\e04f'
+}
+
+.oi-delete:before {
+ content'\e050'
+}
+
+.oi-dial:before {
+ content'\e051'
+}
+
+.oi-document:before {
+ content'\e052'
+}
+
+.oi-dollar:before {
+ content'\e053'
+}
+
+.oi-double-quote-sans-left:before {
+ content'\e054'
+}
+
+.oi-double-quote-sans-right:before {
+ content'\e055'
+}
+
+.oi-double-quote-serif-left:before {
+ content'\e056'
+}
+
+.oi-double-quote-serif-right:before {
+ content'\e057'
+}
+
+.oi-droplet:before {
+ content'\e058'
+}
+
+.oi-eject:before {
+ content'\e059'
+}
+
+.oi-elevator:before {
+ content'\e05a'
+}
+
+.oi-ellipses:before {
+ content'\e05b'
+}
+
+.oi-envelope-closed:before {
+ content'\e05c'
+}
+
+.oi-envelope-open:before {
+ content'\e05d'
+}
+
+.oi-euro:before {
+ content'\e05e'
+}
+
+.oi-excerpt:before {
+ content'\e05f'
+}
+
+.oi-expand-down:before {
+ content'\e060'
+}
+
+.oi-expand-left:before {
+ content'\e061'
+}
+
+.oi-expand-right:before {
+ content'\e062'
+}
+
+.oi-expand-up:before {
+ content'\e063'
+}
+
+.oi-external-link:before {
+ content'\e064'
+}
+
+.oi-eye:before {
+ content'\e065'
+}
+
+.oi-eyedropper:before {
+ content'\e066'
+}
+
+.oi-file:before {
+ content'\e067'
+}
+
+.oi-fire:before {
+ content'\e068'
+}
+
+.oi-flag:before {
+ content'\e069'
+}
+
+.oi-flash:before {
+ content'\e06a'
+}
+
+.oi-folder:before {
+ content'\e06b'
+}
+
+.oi-fork:before {
+ content'\e06c'
+}
+
+.oi-fullscreen-enter:before {
+ content'\e06d'
+}
+
+.oi-fullscreen-exit:before {
+ content'\e06e'
+}
+
+.oi-globe:before {
+ content'\e06f'
+}
+
+.oi-graph:before {
+ content'\e070'
+}
+
+.oi-grid-four-up:before {
+ content'\e071'
+}
+
+.oi-grid-three-up:before {
+ content'\e072'
+}
+
+.oi-grid-two-up:before {
+ content'\e073'
+}
+
+.oi-hard-drive:before {
+ content'\e074'
+}
+
+.oi-header:before {
+ content'\e075'
+}
+
+.oi-headphones:before {
+ content'\e076'
+}
+
+.oi-heart:before {
+ content'\e077'
+}
+
+.oi-home:before {
+ content'\e078'
+}
+
+.oi-image:before {
+ content'\e079'
+}
+
+.oi-inbox:before {
+ content'\e07a'
+}
+
+.oi-infinity:before {
+ content'\e07b'
+}
+
+.oi-info:before {
+ content'\e07c'
+}
+
+.oi-italic:before {
+ content'\e07d'
+}
+
+.oi-justify-center:before {
+ content'\e07e'
+}
+
+.oi-justify-left:before {
+ content'\e07f'
+}
+
+.oi-justify-right:before {
+ content'\e080'
+}
+
+.oi-key:before {
+ content'\e081'
+}
+
+.oi-laptop:before {
+ content'\e082'
+}
+
+.oi-layers:before {
+ content'\e083'
+}
+
+.oi-lightbulb:before {
+ content'\e084'
+}
+
+.oi-link-broken:before {
+ content'\e085'
+}
+
+.oi-link-intact:before {
+ content'\e086'
+}
+
+.oi-list-rich:before {
+ content'\e087'
+}
+
+.oi-list:before {
+ content'\e088'
+}
+
+.oi-location:before {
+ content'\e089'
+}
+
+.oi-lock-locked:before {
+ content'\e08a'
+}
+
+.oi-lock-unlocked:before {
+ content'\e08b'
+}
+
+.oi-loop-circular:before {
+ content'\e08c'
+}
+
+.oi-loop-square:before {
+ content'\e08d'
+}
+
+.oi-loop:before {
+ content'\e08e'
+}
+
+.oi-magnifying-glass:before {
+ content'\e08f'
+}
+
+.oi-map-marker:before {
+ content'\e090'
+}
+
+.oi-map:before {
+ content'\e091'
+}
+
+.oi-media-pause:before {
+ content'\e092'
+}
+
+.oi-media-play:before {
+ content'\e093'
+}
+
+.oi-media-record:before {
+ content'\e094'
+}
+
+.oi-media-skip-backward:before {
+ content'\e095'
+}
+
+.oi-media-skip-forward:before {
+ content'\e096'
+}
+
+.oi-media-step-backward:before {
+ content'\e097'
+}
+
+.oi-media-step-forward:before {
+ content'\e098'
+}
+
+.oi-media-stop:before {
+ content'\e099'
+}
+
+.oi-medical-cross:before {
+ content'\e09a'
+}
+
+.oi-menu:before {
+ content'\e09b'
+}
+
+.oi-microphone:before {
+ content'\e09c'
+}
+
+.oi-minus:before {
+ content'\e09d'
+}
+
+.oi-monitor:before {
+ content'\e09e'
+}
+
+.oi-moon:before {
+ content'\e09f'
+}
+
+.oi-move:before {
+ content'\e0a0'
+}
+
+.oi-musical-note:before {
+ content'\e0a1'
+}
+
+.oi-paperclip:before {
+ content'\e0a2'
+}
+
+.oi-pencil:before {
+ content'\e0a3'
+}
+
+.oi-people:before {
+ content'\e0a4'
+}
+
+.oi-person:before {
+ content'\e0a5'
+}
+
+.oi-phone:before {
+ content'\e0a6'
+}
+
+.oi-pie-chart:before {
+ content'\e0a7'
+}
+
+.oi-pin:before {
+ content'\e0a8'
+}
+
+.oi-play-circle:before {
+ content'\e0a9'
+}
+
+.oi-plus:before {
+ content'\e0aa'
+}
+
+.oi-power-standby:before {
+ content'\e0ab'
+}
+
+.oi-print:before {
+ content'\e0ac'
+}
+
+.oi-project:before {
+ content'\e0ad'
+}
+
+.oi-pulse:before {
+ content'\e0ae'
+}
+
+.oi-puzzle-piece:before {
+ content'\e0af'
+}
+
+.oi-question-mark:before {
+ content'\e0b0'
+}
+
+.oi-rain:before {
+ content'\e0b1'
+}
+
+.oi-random:before {
+ content'\e0b2'
+}
+
+.oi-reload:before {
+ content'\e0b3'
+}
+
+.oi-resize-both:before {
+ content'\e0b4'
+}
+
+.oi-resize-height:before {
+ content'\e0b5'
+}
+
+.oi-resize-width:before {
+ content'\e0b6'
+}
+
+.oi-rss-alt:before {
+ content'\e0b7'
+}
+
+.oi-rss:before {
+ content'\e0b8'
+}
+
+.oi-script:before {
+ content'\e0b9'
+}
+
+.oi-share-boxed:before {
+ content'\e0ba'
+}
+
+.oi-share:before {
+ content'\e0bb'
+}
+
+.oi-shield:before {
+ content'\e0bc'
+}
+
+.oi-signal:before {
+ content'\e0bd'
+}
+
+.oi-signpost:before {
+ content'\e0be'
+}
+
+.oi-sort-ascending:before {
+ content'\e0bf'
+}
+
+.oi-sort-descending:before {
+ content'\e0c0'
+}
+
+.oi-spreadsheet:before {
+ content'\e0c1'
+}
+
+.oi-star:before {
+ content'\e0c2'
+}
+
+.oi-sun:before {
+ content'\e0c3'
+}
+
+.oi-tablet:before {
+ content'\e0c4'
+}
+
+.oi-tag:before {
+ content'\e0c5'
+}
+
+.oi-tags:before {
+ content'\e0c6'
+}
+
+.oi-target:before {
+ content'\e0c7'
+}
+
+.oi-task:before {
+ content'\e0c8'
+}
+
+.oi-terminal:before {
+ content'\e0c9'
+}
+
+.oi-text:before {
+ content'\e0ca'
+}
+
+.oi-thumb-down:before {
+ content'\e0cb'
+}
+
+.oi-thumb-up:before {
+ content'\e0cc'
+}
+
+.oi-timer:before {
+ content'\e0cd'
+}
+
+.oi-transfer:before {
+ content'\e0ce'
+}
+
+.oi-trash:before {
+ content'\e0cf'
+}
+
+.oi-underline:before {
+ content'\e0d0'
+}
+
+.oi-vertical-align-bottom:before {
+ content'\e0d1'
+}
+
+.oi-vertical-align-center:before {
+ content'\e0d2'
+}
+
+.oi-vertical-align-top:before {
+ content'\e0d3'
+}
+
+.oi-video:before {
+ content'\e0d4'
+}
+
+.oi-volume-high:before {
+ content'\e0d5'
+}
+
+.oi-volume-low:before {
+ content'\e0d6'
+}
+
+.oi-volume-off:before {
+ content'\e0d7'
+}
+
+.oi-warning:before {
+ content'\e0d8'
+}
+
+.oi-wifi:before {
+ content'\e0d9'
+}
+
+.oi-wrench:before {
+ content'\e0da'
+}
+
+.oi-x:before {
+ content'\e0db'
+}
+
+.oi-yen:before {
+ content'\e0dc'
+}
+
+.oi-zoom-in:before {
+ content'\e0dd'
+}
+
+.oi-zoom-out:before {
+ content'\e0de'
+}
+
diff --git a/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic-foundation.css b/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic-foundation.css
new file mode 100644
index 0000000..905a821
--- /dev/null
+++ b/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic-foundation.css
@@ -0,0 +1,1395 @@
+/* Foundation */
+
+@font-face {
+ font-family: 'Icons';
+ src: url('../fonts/open-iconic.eot');
+ src: url('../fonts/open-iconic.eot?#iconic-sm') format('embedded-opentype'), url('../fonts/open-iconic.woff') format('woff'), url('../fonts/open-iconic.ttf') format('truetype'), url('../fonts/open-iconic.otf') format('opentype'), url('../fonts/open-iconic.svg#iconic-sm') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+
+.fi-account-login:before,
+
+.fi-account-logout:before,
+
+.fi-action-redo:before,
+
+.fi-action-undo:before,
+
+.fi-align-center:before,
+
+.fi-align-left:before,
+
+.fi-align-right:before,
+
+.fi-aperture:before,
+
+.fi-arrow-bottom:before,
+
+.fi-arrow-circle-bottom:before,
+
+.fi-arrow-circle-left:before,
+
+.fi-arrow-circle-right:before,
+
+.fi-arrow-circle-top:before,
+
+.fi-arrow-left:before,
+
+.fi-arrow-right:before,
+
+.fi-arrow-thick-bottom:before,
+
+.fi-arrow-thick-left:before,
+
+.fi-arrow-thick-right:before,
+
+.fi-arrow-thick-top:before,
+
+.fi-arrow-top:before,
+
+.fi-audio-spectrum:before,
+
+.fi-audio:before,
+
+.fi-badge:before,
+
+.fi-ban:before,
+
+.fi-bar-chart:before,
+
+.fi-basket:before,
+
+.fi-battery-empty:before,
+
+.fi-battery-full:before,
+
+.fi-beaker:before,
+
+.fi-bell:before,
+
+.fi-bluetooth:before,
+
+.fi-bold:before,
+
+.fi-bolt:before,
+
+.fi-book:before,
+
+.fi-bookmark:before,
+
+.fi-box:before,
+
+.fi-briefcase:before,
+
+.fi-british-pound:before,
+
+.fi-browser:before,
+
+.fi-brush:before,
+
+.fi-bug:before,
+
+.fi-bullhorn:before,
+
+.fi-calculator:before,
+
+.fi-calendar:before,
+
+.fi-camera-slr:before,
+
+.fi-caret-bottom:before,
+
+.fi-caret-left:before,
+
+.fi-caret-right:before,
+
+.fi-caret-top:before,
+
+.fi-cart:before,
+
+.fi-chat:before,
+
+.fi-check:before,
+
+.fi-chevron-bottom:before,
+
+.fi-chevron-left:before,
+
+.fi-chevron-right:before,
+
+.fi-chevron-top:before,
+
+.fi-circle-check:before,
+
+.fi-circle-x:before,
+
+.fi-clipboard:before,
+
+.fi-clock:before,
+
+.fi-cloud-download:before,
+
+.fi-cloud-upload:before,
+
+.fi-cloud:before,
+
+.fi-cloudy:before,
+
+.fi-code:before,
+
+.fi-cog:before,
+
+.fi-collapse-down:before,
+
+.fi-collapse-left:before,
+
+.fi-collapse-right:before,
+
+.fi-collapse-up:before,
+
+.fi-command:before,
+
+.fi-comment-square:before,
+
+.fi-compass:before,
+
+.fi-contrast:before,
+
+.fi-copywriting:before,
+
+.fi-credit-card:before,
+
+.fi-crop:before,
+
+.fi-dashboard:before,
+
+.fi-data-transfer-download:before,
+
+.fi-data-transfer-upload:before,
+
+.fi-delete:before,
+
+.fi-dial:before,
+
+.fi-document:before,
+
+.fi-dollar:before,
+
+.fi-double-quote-sans-left:before,
+
+.fi-double-quote-sans-right:before,
+
+.fi-double-quote-serif-left:before,
+
+.fi-double-quote-serif-right:before,
+
+.fi-droplet:before,
+
+.fi-eject:before,
+
+.fi-elevator:before,
+
+.fi-ellipses:before,
+
+.fi-envelope-closed:before,
+
+.fi-envelope-open:before,
+
+.fi-euro:before,
+
+.fi-excerpt:before,
+
+.fi-expand-down:before,
+
+.fi-expand-left:before,
+
+.fi-expand-right:before,
+
+.fi-expand-up:before,
+
+.fi-external-link:before,
+
+.fi-eye:before,
+
+.fi-eyedropper:before,
+
+.fi-file:before,
+
+.fi-fire:before,
+
+.fi-flag:before,
+
+.fi-flash:before,
+
+.fi-folder:before,
+
+.fi-fork:before,
+
+.fi-fullscreen-enter:before,
+
+.fi-fullscreen-exit:before,
+
+.fi-globe:before,
+
+.fi-graph:before,
+
+.fi-grid-four-up:before,
+
+.fi-grid-three-up:before,
+
+.fi-grid-two-up:before,
+
+.fi-hard-drive:before,
+
+.fi-header:before,
+
+.fi-headphones:before,
+
+.fi-heart:before,
+
+.fi-home:before,
+
+.fi-image:before,
+
+.fi-inbox:before,
+
+.fi-infinity:before,
+
+.fi-info:before,
+
+.fi-italic:before,
+
+.fi-justify-center:before,
+
+.fi-justify-left:before,
+
+.fi-justify-right:before,
+
+.fi-key:before,
+
+.fi-laptop:before,
+
+.fi-layers:before,
+
+.fi-lightbulb:before,
+
+.fi-link-broken:before,
+
+.fi-link-intact:before,
+
+.fi-list-rich:before,
+
+.fi-list:before,
+
+.fi-location:before,
+
+.fi-lock-locked:before,
+
+.fi-lock-unlocked:before,
+
+.fi-loop-circular:before,
+
+.fi-loop-square:before,
+
+.fi-loop:before,
+
+.fi-magnifying-glass:before,
+
+.fi-map-marker:before,
+
+.fi-map:before,
+
+.fi-media-pause:before,
+
+.fi-media-play:before,
+
+.fi-media-record:before,
+
+.fi-media-skip-backward:before,
+
+.fi-media-skip-forward:before,
+
+.fi-media-step-backward:before,
+
+.fi-media-step-forward:before,
+
+.fi-media-stop:before,
+
+.fi-medical-cross:before,
+
+.fi-menu:before,
+
+.fi-microphone:before,
+
+.fi-minus:before,
+
+.fi-monitor:before,
+
+.fi-moon:before,
+
+.fi-move:before,
+
+.fi-musical-note:before,
+
+.fi-paperclip:before,
+
+.fi-pencil:before,
+
+.fi-people:before,
+
+.fi-person:before,
+
+.fi-phone:before,
+
+.fi-pie-chart:before,
+
+.fi-pin:before,
+
+.fi-play-circle:before,
+
+.fi-plus:before,
+
+.fi-power-standby:before,
+
+.fi-print:before,
+
+.fi-project:before,
+
+.fi-pulse:before,
+
+.fi-puzzle-piece:before,
+
+.fi-question-mark:before,
+
+.fi-rain:before,
+
+.fi-random:before,
+
+.fi-reload:before,
+
+.fi-resize-both:before,
+
+.fi-resize-height:before,
+
+.fi-resize-width:before,
+
+.fi-rss-alt:before,
+
+.fi-rss:before,
+
+.fi-script:before,
+
+.fi-share-boxed:before,
+
+.fi-share:before,
+
+.fi-shield:before,
+
+.fi-signal:before,
+
+.fi-signpost:before,
+
+.fi-sort-ascending:before,
+
+.fi-sort-descending:before,
+
+.fi-spreadsheet:before,
+
+.fi-star:before,
+
+.fi-sun:before,
+
+.fi-tablet:before,
+
+.fi-tag:before,
+
+.fi-tags:before,
+
+.fi-target:before,
+
+.fi-task:before,
+
+.fi-terminal:before,
+
+.fi-text:before,
+
+.fi-thumb-down:before,
+
+.fi-thumb-up:before,
+
+.fi-timer:before,
+
+.fi-transfer:before,
+
+.fi-trash:before,
+
+.fi-underline:before,
+
+.fi-vertical-align-bottom:before,
+
+.fi-vertical-align-center:before,
+
+.fi-vertical-align-top:before,
+
+.fi-video:before,
+
+.fi-volume-high:before,
+
+.fi-volume-low:before,
+
+.fi-volume-off:before,
+
+.fi-warning:before,
+
+.fi-wifi:before,
+
+.fi-wrench:before,
+
+.fi-x:before,
+
+.fi-yen:before,
+
+.fi-zoom-in:before,
+
+.fi-zoom-out:before
+ {
+ font-family: 'Icons';
+ font-style: normal;
+ font-weight: normal;
+ font-variant: normal;
+ text-transform: none;
+ line-height: 1;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ display: inline-block;
+ text-decoration: inherit;
+}
+
+
+[class*='fi-'].oi-align-center:before {
+ text-align: center;
+}
+
+[class*='fi-'].oi-align-left:before {
+ text-align: left;
+}
+
+[class*='fi-'].oi-align-right:before {
+ text-align: right;
+}
+
+
+[class*='fi-'].oi-flip-horizontal:before {
+ -webkit-transform: scale(-1, 1);
+ -ms-transform: scale(-1, 1);
+ transform: scale(-1, 1);
+}
+
+[class*='fi-'].oi-flip-vertical:before {
+ -webkit-transform: scale(1, -1);
+ -ms-transform: scale(-1, 1);
+ transform: scale(1, -1);
+}
+
+[class*='fi-'].oi-flip-horizontal-vertical:before {
+ -webkit-transform: scale(-1, -1);
+ -ms-transform: scale(-1, 1);
+ transform: scale(-1, -1);
+}
+
+
+
+.fi-account-login:before {
+ content:'\e000';
+}
+
+.fi-account-logout:before {
+ content:'\e001';
+}
+
+.fi-action-redo:before {
+ content:'\e002';
+}
+
+.fi-action-undo:before {
+ content:'\e003';
+}
+
+.fi-align-center:before {
+ content:'\e004';
+}
+
+.fi-align-left:before {
+ content:'\e005';
+}
+
+.fi-align-right:before {
+ content:'\e006';
+}
+
+.fi-aperture:before {
+ content:'\e007';
+}
+
+.fi-arrow-bottom:before {
+ content:'\e008';
+}
+
+.fi-arrow-circle-bottom:before {
+ content:'\e009';
+}
+
+.fi-arrow-circle-left:before {
+ content:'\e00a';
+}
+
+.fi-arrow-circle-right:before {
+ content:'\e00b';
+}
+
+.fi-arrow-circle-top:before {
+ content:'\e00c';
+}
+
+.fi-arrow-left:before {
+ content:'\e00d';
+}
+
+.fi-arrow-right:before {
+ content:'\e00e';
+}
+
+.fi-arrow-thick-bottom:before {
+ content:'\e00f';
+}
+
+.fi-arrow-thick-left:before {
+ content:'\e010';
+}
+
+.fi-arrow-thick-right:before {
+ content:'\e011';
+}
+
+.fi-arrow-thick-top:before {
+ content:'\e012';
+}
+
+.fi-arrow-top:before {
+ content:'\e013';
+}
+
+.fi-audio-spectrum:before {
+ content:'\e014';
+}
+
+.fi-audio:before {
+ content:'\e015';
+}
+
+.fi-badge:before {
+ content:'\e016';
+}
+
+.fi-ban:before {
+ content:'\e017';
+}
+
+.fi-bar-chart:before {
+ content:'\e018';
+}
+
+.fi-basket:before {
+ content:'\e019';
+}
+
+.fi-battery-empty:before {
+ content:'\e01a';
+}
+
+.fi-battery-full:before {
+ content:'\e01b';
+}
+
+.fi-beaker:before {
+ content:'\e01c';
+}
+
+.fi-bell:before {
+ content:'\e01d';
+}
+
+.fi-bluetooth:before {
+ content:'\e01e';
+}
+
+.fi-bold:before {
+ content:'\e01f';
+}
+
+.fi-bolt:before {
+ content:'\e020';
+}
+
+.fi-book:before {
+ content:'\e021';
+}
+
+.fi-bookmark:before {
+ content:'\e022';
+}
+
+.fi-box:before {
+ content:'\e023';
+}
+
+.fi-briefcase:before {
+ content:'\e024';
+}
+
+.fi-british-pound:before {
+ content:'\e025';
+}
+
+.fi-browser:before {
+ content:'\e026';
+}
+
+.fi-brush:before {
+ content:'\e027';
+}
+
+.fi-bug:before {
+ content:'\e028';
+}
+
+.fi-bullhorn:before {
+ content:'\e029';
+}
+
+.fi-calculator:before {
+ content:'\e02a';
+}
+
+.fi-calendar:before {
+ content:'\e02b';
+}
+
+.fi-camera-slr:before {
+ content:'\e02c';
+}
+
+.fi-caret-bottom:before {
+ content:'\e02d';
+}
+
+.fi-caret-left:before {
+ content:'\e02e';
+}
+
+.fi-caret-right:before {
+ content:'\e02f';
+}
+
+.fi-caret-top:before {
+ content:'\e030';
+}
+
+.fi-cart:before {
+ content:'\e031';
+}
+
+.fi-chat:before {
+ content:'\e032';
+}
+
+.fi-check:before {
+ content:'\e033';
+}
+
+.fi-chevron-bottom:before {
+ content:'\e034';
+}
+
+.fi-chevron-left:before {
+ content:'\e035';
+}
+
+.fi-chevron-right:before {
+ content:'\e036';
+}
+
+.fi-chevron-top:before {
+ content:'\e037';
+}
+
+.fi-circle-check:before {
+ content:'\e038';
+}
+
+.fi-circle-x:before {
+ content:'\e039';
+}
+
+.fi-clipboard:before {
+ content:'\e03a';
+}
+
+.fi-clock:before {
+ content:'\e03b';
+}
+
+.fi-cloud-download:before {
+ content:'\e03c';
+}
+
+.fi-cloud-upload:before {
+ content:'\e03d';
+}
+
+.fi-cloud:before {
+ content:'\e03e';
+}
+
+.fi-cloudy:before {
+ content:'\e03f';
+}
+
+.fi-code:before {
+ content:'\e040';
+}
+
+.fi-cog:before {
+ content:'\e041';
+}
+
+.fi-collapse-down:before {
+ content:'\e042';
+}
+
+.fi-collapse-left:before {
+ content:'\e043';
+}
+
+.fi-collapse-right:before {
+ content:'\e044';
+}
+
+.fi-collapse-up:before {
+ content:'\e045';
+}
+
+.fi-command:before {
+ content:'\e046';
+}
+
+.fi-comment-square:before {
+ content:'\e047';
+}
+
+.fi-compass:before {
+ content:'\e048';
+}
+
+.fi-contrast:before {
+ content:'\e049';
+}
+
+.fi-copywriting:before {
+ content:'\e04a';
+}
+
+.fi-credit-card:before {
+ content:'\e04b';
+}
+
+.fi-crop:before {
+ content:'\e04c';
+}
+
+.fi-dashboard:before {
+ content:'\e04d';
+}
+
+.fi-data-transfer-download:before {
+ content:'\e04e';
+}
+
+.fi-data-transfer-upload:before {
+ content:'\e04f';
+}
+
+.fi-delete:before {
+ content:'\e050';
+}
+
+.fi-dial:before {
+ content:'\e051';
+}
+
+.fi-document:before {
+ content:'\e052';
+}
+
+.fi-dollar:before {
+ content:'\e053';
+}
+
+.fi-double-quote-sans-left:before {
+ content:'\e054';
+}
+
+.fi-double-quote-sans-right:before {
+ content:'\e055';
+}
+
+.fi-double-quote-serif-left:before {
+ content:'\e056';
+}
+
+.fi-double-quote-serif-right:before {
+ content:'\e057';
+}
+
+.fi-droplet:before {
+ content:'\e058';
+}
+
+.fi-eject:before {
+ content:'\e059';
+}
+
+.fi-elevator:before {
+ content:'\e05a';
+}
+
+.fi-ellipses:before {
+ content:'\e05b';
+}
+
+.fi-envelope-closed:before {
+ content:'\e05c';
+}
+
+.fi-envelope-open:before {
+ content:'\e05d';
+}
+
+.fi-euro:before {
+ content:'\e05e';
+}
+
+.fi-excerpt:before {
+ content:'\e05f';
+}
+
+.fi-expand-down:before {
+ content:'\e060';
+}
+
+.fi-expand-left:before {
+ content:'\e061';
+}
+
+.fi-expand-right:before {
+ content:'\e062';
+}
+
+.fi-expand-up:before {
+ content:'\e063';
+}
+
+.fi-external-link:before {
+ content:'\e064';
+}
+
+.fi-eye:before {
+ content:'\e065';
+}
+
+.fi-eyedropper:before {
+ content:'\e066';
+}
+
+.fi-file:before {
+ content:'\e067';
+}
+
+.fi-fire:before {
+ content:'\e068';
+}
+
+.fi-flag:before {
+ content:'\e069';
+}
+
+.fi-flash:before {
+ content:'\e06a';
+}
+
+.fi-folder:before {
+ content:'\e06b';
+}
+
+.fi-fork:before {
+ content:'\e06c';
+}
+
+.fi-fullscreen-enter:before {
+ content:'\e06d';
+}
+
+.fi-fullscreen-exit:before {
+ content:'\e06e';
+}
+
+.fi-globe:before {
+ content:'\e06f';
+}
+
+.fi-graph:before {
+ content:'\e070';
+}
+
+.fi-grid-four-up:before {
+ content:'\e071';
+}
+
+.fi-grid-three-up:before {
+ content:'\e072';
+}
+
+.fi-grid-two-up:before {
+ content:'\e073';
+}
+
+.fi-hard-drive:before {
+ content:'\e074';
+}
+
+.fi-header:before {
+ content:'\e075';
+}
+
+.fi-headphones:before {
+ content:'\e076';
+}
+
+.fi-heart:before {
+ content:'\e077';
+}
+
+.fi-home:before {
+ content:'\e078';
+}
+
+.fi-image:before {
+ content:'\e079';
+}
+
+.fi-inbox:before {
+ content:'\e07a';
+}
+
+.fi-infinity:before {
+ content:'\e07b';
+}
+
+.fi-info:before {
+ content:'\e07c';
+}
+
+.fi-italic:before {
+ content:'\e07d';
+}
+
+.fi-justify-center:before {
+ content:'\e07e';
+}
+
+.fi-justify-left:before {
+ content:'\e07f';
+}
+
+.fi-justify-right:before {
+ content:'\e080';
+}
+
+.fi-key:before {
+ content:'\e081';
+}
+
+.fi-laptop:before {
+ content:'\e082';
+}
+
+.fi-layers:before {
+ content:'\e083';
+}
+
+.fi-lightbulb:before {
+ content:'\e084';
+}
+
+.fi-link-broken:before {
+ content:'\e085';
+}
+
+.fi-link-intact:before {
+ content:'\e086';
+}
+
+.fi-list-rich:before {
+ content:'\e087';
+}
+
+.fi-list:before {
+ content:'\e088';
+}
+
+.fi-location:before {
+ content:'\e089';
+}
+
+.fi-lock-locked:before {
+ content:'\e08a';
+}
+
+.fi-lock-unlocked:before {
+ content:'\e08b';
+}
+
+.fi-loop-circular:before {
+ content:'\e08c';
+}
+
+.fi-loop-square:before {
+ content:'\e08d';
+}
+
+.fi-loop:before {
+ content:'\e08e';
+}
+
+.fi-magnifying-glass:before {
+ content:'\e08f';
+}
+
+.fi-map-marker:before {
+ content:'\e090';
+}
+
+.fi-map:before {
+ content:'\e091';
+}
+
+.fi-media-pause:before {
+ content:'\e092';
+}
+
+.fi-media-play:before {
+ content:'\e093';
+}
+
+.fi-media-record:before {
+ content:'\e094';
+}
+
+.fi-media-skip-backward:before {
+ content:'\e095';
+}
+
+.fi-media-skip-forward:before {
+ content:'\e096';
+}
+
+.fi-media-step-backward:before {
+ content:'\e097';
+}
+
+.fi-media-step-forward:before {
+ content:'\e098';
+}
+
+.fi-media-stop:before {
+ content:'\e099';
+}
+
+.fi-medical-cross:before {
+ content:'\e09a';
+}
+
+.fi-menu:before {
+ content:'\e09b';
+}
+
+.fi-microphone:before {
+ content:'\e09c';
+}
+
+.fi-minus:before {
+ content:'\e09d';
+}
+
+.fi-monitor:before {
+ content:'\e09e';
+}
+
+.fi-moon:before {
+ content:'\e09f';
+}
+
+.fi-move:before {
+ content:'\e0a0';
+}
+
+.fi-musical-note:before {
+ content:'\e0a1';
+}
+
+.fi-paperclip:before {
+ content:'\e0a2';
+}
+
+.fi-pencil:before {
+ content:'\e0a3';
+}
+
+.fi-people:before {
+ content:'\e0a4';
+}
+
+.fi-person:before {
+ content:'\e0a5';
+}
+
+.fi-phone:before {
+ content:'\e0a6';
+}
+
+.fi-pie-chart:before {
+ content:'\e0a7';
+}
+
+.fi-pin:before {
+ content:'\e0a8';
+}
+
+.fi-play-circle:before {
+ content:'\e0a9';
+}
+
+.fi-plus:before {
+ content:'\e0aa';
+}
+
+.fi-power-standby:before {
+ content:'\e0ab';
+}
+
+.fi-print:before {
+ content:'\e0ac';
+}
+
+.fi-project:before {
+ content:'\e0ad';
+}
+
+.fi-pulse:before {
+ content:'\e0ae';
+}
+
+.fi-puzzle-piece:before {
+ content:'\e0af';
+}
+
+.fi-question-mark:before {
+ content:'\e0b0';
+}
+
+.fi-rain:before {
+ content:'\e0b1';
+}
+
+.fi-random:before {
+ content:'\e0b2';
+}
+
+.fi-reload:before {
+ content:'\e0b3';
+}
+
+.fi-resize-both:before {
+ content:'\e0b4';
+}
+
+.fi-resize-height:before {
+ content:'\e0b5';
+}
+
+.fi-resize-width:before {
+ content:'\e0b6';
+}
+
+.fi-rss-alt:before {
+ content:'\e0b7';
+}
+
+.fi-rss:before {
+ content:'\e0b8';
+}
+
+.fi-script:before {
+ content:'\e0b9';
+}
+
+.fi-share-boxed:before {
+ content:'\e0ba';
+}
+
+.fi-share:before {
+ content:'\e0bb';
+}
+
+.fi-shield:before {
+ content:'\e0bc';
+}
+
+.fi-signal:before {
+ content:'\e0bd';
+}
+
+.fi-signpost:before {
+ content:'\e0be';
+}
+
+.fi-sort-ascending:before {
+ content:'\e0bf';
+}
+
+.fi-sort-descending:before {
+ content:'\e0c0';
+}
+
+.fi-spreadsheet:before {
+ content:'\e0c1';
+}
+
+.fi-star:before {
+ content:'\e0c2';
+}
+
+.fi-sun:before {
+ content:'\e0c3';
+}
+
+.fi-tablet:before {
+ content:'\e0c4';
+}
+
+.fi-tag:before {
+ content:'\e0c5';
+}
+
+.fi-tags:before {
+ content:'\e0c6';
+}
+
+.fi-target:before {
+ content:'\e0c7';
+}
+
+.fi-task:before {
+ content:'\e0c8';
+}
+
+.fi-terminal:before {
+ content:'\e0c9';
+}
+
+.fi-text:before {
+ content:'\e0ca';
+}
+
+.fi-thumb-down:before {
+ content:'\e0cb';
+}
+
+.fi-thumb-up:before {
+ content:'\e0cc';
+}
+
+.fi-timer:before {
+ content:'\e0cd';
+}
+
+.fi-transfer:before {
+ content:'\e0ce';
+}
+
+.fi-trash:before {
+ content:'\e0cf';
+}
+
+.fi-underline:before {
+ content:'\e0d0';
+}
+
+.fi-vertical-align-bottom:before {
+ content:'\e0d1';
+}
+
+.fi-vertical-align-center:before {
+ content:'\e0d2';
+}
+
+.fi-vertical-align-top:before {
+ content:'\e0d3';
+}
+
+.fi-video:before {
+ content:'\e0d4';
+}
+
+.fi-volume-high:before {
+ content:'\e0d5';
+}
+
+.fi-volume-low:before {
+ content:'\e0d6';
+}
+
+.fi-volume-off:before {
+ content:'\e0d7';
+}
+
+.fi-warning:before {
+ content:'\e0d8';
+}
+
+.fi-wifi:before {
+ content:'\e0d9';
+}
+
+.fi-wrench:before {
+ content:'\e0da';
+}
+
+.fi-x:before {
+ content:'\e0db';
+}
+
+.fi-yen:before {
+ content:'\e0dc';
+}
+
+.fi-zoom-in:before {
+ content:'\e0dd';
+}
+
+.fi-zoom-out:before {
+ content:'\e0de';
+}
+
diff --git a/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic-foundation.less b/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic-foundation.less
new file mode 100644
index 0000000..deabf26
--- /dev/null
+++ b/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic-foundation.less
@@ -0,0 +1,1397 @@
+/* Foundation */
+
+/* Font path variable */
+@icon-font-path: '../fonts/';
+
+@font-face {
+ font-family: 'Icons';
+ src: url('@{icon-font-path}open-iconic.eot');
+ src: url('@{icon-font-path}open-iconic.eot?#iconic-sm') format('embedded-opentype'), url('@{icon-font-path}open-iconic.woff') format('woff'), url('@{icon-font-path}open-iconic.ttf') format('truetype'), url('@{icon-font-path}open-iconic.otf') format('opentype'), url('@{icon-font-path}open-iconic.svg#iconic-sm') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+
+.fi-account-login:before,
+
+.fi-account-logout:before,
+
+.fi-action-redo:before,
+
+.fi-action-undo:before,
+
+.fi-align-center:before,
+
+.fi-align-left:before,
+
+.fi-align-right:before,
+
+.fi-aperture:before,
+
+.fi-arrow-bottom:before,
+
+.fi-arrow-circle-bottom:before,
+
+.fi-arrow-circle-left:before,
+
+.fi-arrow-circle-right:before,
+
+.fi-arrow-circle-top:before,
+
+.fi-arrow-left:before,
+
+.fi-arrow-right:before,
+
+.fi-arrow-thick-bottom:before,
+
+.fi-arrow-thick-left:before,
+
+.fi-arrow-thick-right:before,
+
+.fi-arrow-thick-top:before,
+
+.fi-arrow-top:before,
+
+.fi-audio-spectrum:before,
+
+.fi-audio:before,
+
+.fi-badge:before,
+
+.fi-ban:before,
+
+.fi-bar-chart:before,
+
+.fi-basket:before,
+
+.fi-battery-empty:before,
+
+.fi-battery-full:before,
+
+.fi-beaker:before,
+
+.fi-bell:before,
+
+.fi-bluetooth:before,
+
+.fi-bold:before,
+
+.fi-bolt:before,
+
+.fi-book:before,
+
+.fi-bookmark:before,
+
+.fi-box:before,
+
+.fi-briefcase:before,
+
+.fi-british-pound:before,
+
+.fi-browser:before,
+
+.fi-brush:before,
+
+.fi-bug:before,
+
+.fi-bullhorn:before,
+
+.fi-calculator:before,
+
+.fi-calendar:before,
+
+.fi-camera-slr:before,
+
+.fi-caret-bottom:before,
+
+.fi-caret-left:before,
+
+.fi-caret-right:before,
+
+.fi-caret-top:before,
+
+.fi-cart:before,
+
+.fi-chat:before,
+
+.fi-check:before,
+
+.fi-chevron-bottom:before,
+
+.fi-chevron-left:before,
+
+.fi-chevron-right:before,
+
+.fi-chevron-top:before,
+
+.fi-circle-check:before,
+
+.fi-circle-x:before,
+
+.fi-clipboard:before,
+
+.fi-clock:before,
+
+.fi-cloud-download:before,
+
+.fi-cloud-upload:before,
+
+.fi-cloud:before,
+
+.fi-cloudy:before,
+
+.fi-code:before,
+
+.fi-cog:before,
+
+.fi-collapse-down:before,
+
+.fi-collapse-left:before,
+
+.fi-collapse-right:before,
+
+.fi-collapse-up:before,
+
+.fi-command:before,
+
+.fi-comment-square:before,
+
+.fi-compass:before,
+
+.fi-contrast:before,
+
+.fi-copywriting:before,
+
+.fi-credit-card:before,
+
+.fi-crop:before,
+
+.fi-dashboard:before,
+
+.fi-data-transfer-download:before,
+
+.fi-data-transfer-upload:before,
+
+.fi-delete:before,
+
+.fi-dial:before,
+
+.fi-document:before,
+
+.fi-dollar:before,
+
+.fi-double-quote-sans-left:before,
+
+.fi-double-quote-sans-right:before,
+
+.fi-double-quote-serif-left:before,
+
+.fi-double-quote-serif-right:before,
+
+.fi-droplet:before,
+
+.fi-eject:before,
+
+.fi-elevator:before,
+
+.fi-ellipses:before,
+
+.fi-envelope-closed:before,
+
+.fi-envelope-open:before,
+
+.fi-euro:before,
+
+.fi-excerpt:before,
+
+.fi-expand-down:before,
+
+.fi-expand-left:before,
+
+.fi-expand-right:before,
+
+.fi-expand-up:before,
+
+.fi-external-link:before,
+
+.fi-eye:before,
+
+.fi-eyedropper:before,
+
+.fi-file:before,
+
+.fi-fire:before,
+
+.fi-flag:before,
+
+.fi-flash:before,
+
+.fi-folder:before,
+
+.fi-fork:before,
+
+.fi-fullscreen-enter:before,
+
+.fi-fullscreen-exit:before,
+
+.fi-globe:before,
+
+.fi-graph:before,
+
+.fi-grid-four-up:before,
+
+.fi-grid-three-up:before,
+
+.fi-grid-two-up:before,
+
+.fi-hard-drive:before,
+
+.fi-header:before,
+
+.fi-headphones:before,
+
+.fi-heart:before,
+
+.fi-home:before,
+
+.fi-image:before,
+
+.fi-inbox:before,
+
+.fi-infinity:before,
+
+.fi-info:before,
+
+.fi-italic:before,
+
+.fi-justify-center:before,
+
+.fi-justify-left:before,
+
+.fi-justify-right:before,
+
+.fi-key:before,
+
+.fi-laptop:before,
+
+.fi-layers:before,
+
+.fi-lightbulb:before,
+
+.fi-link-broken:before,
+
+.fi-link-intact:before,
+
+.fi-list-rich:before,
+
+.fi-list:before,
+
+.fi-location:before,
+
+.fi-lock-locked:before,
+
+.fi-lock-unlocked:before,
+
+.fi-loop-circular:before,
+
+.fi-loop-square:before,
+
+.fi-loop:before,
+
+.fi-magnifying-glass:before,
+
+.fi-map-marker:before,
+
+.fi-map:before,
+
+.fi-media-pause:before,
+
+.fi-media-play:before,
+
+.fi-media-record:before,
+
+.fi-media-skip-backward:before,
+
+.fi-media-skip-forward:before,
+
+.fi-media-step-backward:before,
+
+.fi-media-step-forward:before,
+
+.fi-media-stop:before,
+
+.fi-medical-cross:before,
+
+.fi-menu:before,
+
+.fi-microphone:before,
+
+.fi-minus:before,
+
+.fi-monitor:before,
+
+.fi-moon:before,
+
+.fi-move:before,
+
+.fi-musical-note:before,
+
+.fi-paperclip:before,
+
+.fi-pencil:before,
+
+.fi-people:before,
+
+.fi-person:before,
+
+.fi-phone:before,
+
+.fi-pie-chart:before,
+
+.fi-pin:before,
+
+.fi-play-circle:before,
+
+.fi-plus:before,
+
+.fi-power-standby:before,
+
+.fi-print:before,
+
+.fi-project:before,
+
+.fi-pulse:before,
+
+.fi-puzzle-piece:before,
+
+.fi-question-mark:before,
+
+.fi-rain:before,
+
+.fi-random:before,
+
+.fi-reload:before,
+
+.fi-resize-both:before,
+
+.fi-resize-height:before,
+
+.fi-resize-width:before,
+
+.fi-rss-alt:before,
+
+.fi-rss:before,
+
+.fi-script:before,
+
+.fi-share-boxed:before,
+
+.fi-share:before,
+
+.fi-shield:before,
+
+.fi-signal:before,
+
+.fi-signpost:before,
+
+.fi-sort-ascending:before,
+
+.fi-sort-descending:before,
+
+.fi-spreadsheet:before,
+
+.fi-star:before,
+
+.fi-sun:before,
+
+.fi-tablet:before,
+
+.fi-tag:before,
+
+.fi-tags:before,
+
+.fi-target:before,
+
+.fi-task:before,
+
+.fi-terminal:before,
+
+.fi-text:before,
+
+.fi-thumb-down:before,
+
+.fi-thumb-up:before,
+
+.fi-timer:before,
+
+.fi-transfer:before,
+
+.fi-trash:before,
+
+.fi-underline:before,
+
+.fi-vertical-align-bottom:before,
+
+.fi-vertical-align-center:before,
+
+.fi-vertical-align-top:before,
+
+.fi-video:before,
+
+.fi-volume-high:before,
+
+.fi-volume-low:before,
+
+.fi-volume-off:before,
+
+.fi-warning:before,
+
+.fi-wifi:before,
+
+.fi-wrench:before,
+
+.fi-x:before,
+
+.fi-yen:before,
+
+.fi-zoom-in:before,
+
+.fi-zoom-out:before
+ {
+ font-family: 'Icons';
+ font-style: normal;
+ font-weight: normal;
+ font-variant: normal;
+ text-transform: none;
+ line-height: 1;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ display: inline-block;
+ text-decoration: inherit;
+}
+
+[class*='fi-'].oi-align-center:before {
+ text-align: center;
+}
+
+[class*='fi-'].oi-align-left:before {
+ text-align: left;
+}
+
+[class*='fi-'].oi-align-right:before {
+ text-align: right;
+}
+
+
+[class*='fi-'].oi-flip-horizontal:before {
+ -webkit-transform: scale(-1, 1);
+ -ms-transform: scale(-1, 1);
+ transform: scale(-1, 1);
+}
+
+[class*='fi-'].oi-flip-vertical:before {
+ -webkit-transform: scale(1, -1);
+ -ms-transform: scale(-1, 1);
+ transform: scale(1, -1);
+}
+
+[class*='fi-'].oi-flip-horizontal-vertical:before {
+ -webkit-transform: scale(-1, -1);
+ -ms-transform: scale(-1, 1);
+ transform: scale(-1, -1);
+}
+
+
+
+.fi-account-login:before {
+ content:'\e000';
+}
+
+.fi-account-logout:before {
+ content:'\e001';
+}
+
+.fi-action-redo:before {
+ content:'\e002';
+}
+
+.fi-action-undo:before {
+ content:'\e003';
+}
+
+.fi-align-center:before {
+ content:'\e004';
+}
+
+.fi-align-left:before {
+ content:'\e005';
+}
+
+.fi-align-right:before {
+ content:'\e006';
+}
+
+.fi-aperture:before {
+ content:'\e007';
+}
+
+.fi-arrow-bottom:before {
+ content:'\e008';
+}
+
+.fi-arrow-circle-bottom:before {
+ content:'\e009';
+}
+
+.fi-arrow-circle-left:before {
+ content:'\e00a';
+}
+
+.fi-arrow-circle-right:before {
+ content:'\e00b';
+}
+
+.fi-arrow-circle-top:before {
+ content:'\e00c';
+}
+
+.fi-arrow-left:before {
+ content:'\e00d';
+}
+
+.fi-arrow-right:before {
+ content:'\e00e';
+}
+
+.fi-arrow-thick-bottom:before {
+ content:'\e00f';
+}
+
+.fi-arrow-thick-left:before {
+ content:'\e010';
+}
+
+.fi-arrow-thick-right:before {
+ content:'\e011';
+}
+
+.fi-arrow-thick-top:before {
+ content:'\e012';
+}
+
+.fi-arrow-top:before {
+ content:'\e013';
+}
+
+.fi-audio-spectrum:before {
+ content:'\e014';
+}
+
+.fi-audio:before {
+ content:'\e015';
+}
+
+.fi-badge:before {
+ content:'\e016';
+}
+
+.fi-ban:before {
+ content:'\e017';
+}
+
+.fi-bar-chart:before {
+ content:'\e018';
+}
+
+.fi-basket:before {
+ content:'\e019';
+}
+
+.fi-battery-empty:before {
+ content:'\e01a';
+}
+
+.fi-battery-full:before {
+ content:'\e01b';
+}
+
+.fi-beaker:before {
+ content:'\e01c';
+}
+
+.fi-bell:before {
+ content:'\e01d';
+}
+
+.fi-bluetooth:before {
+ content:'\e01e';
+}
+
+.fi-bold:before {
+ content:'\e01f';
+}
+
+.fi-bolt:before {
+ content:'\e020';
+}
+
+.fi-book:before {
+ content:'\e021';
+}
+
+.fi-bookmark:before {
+ content:'\e022';
+}
+
+.fi-box:before {
+ content:'\e023';
+}
+
+.fi-briefcase:before {
+ content:'\e024';
+}
+
+.fi-british-pound:before {
+ content:'\e025';
+}
+
+.fi-browser:before {
+ content:'\e026';
+}
+
+.fi-brush:before {
+ content:'\e027';
+}
+
+.fi-bug:before {
+ content:'\e028';
+}
+
+.fi-bullhorn:before {
+ content:'\e029';
+}
+
+.fi-calculator:before {
+ content:'\e02a';
+}
+
+.fi-calendar:before {
+ content:'\e02b';
+}
+
+.fi-camera-slr:before {
+ content:'\e02c';
+}
+
+.fi-caret-bottom:before {
+ content:'\e02d';
+}
+
+.fi-caret-left:before {
+ content:'\e02e';
+}
+
+.fi-caret-right:before {
+ content:'\e02f';
+}
+
+.fi-caret-top:before {
+ content:'\e030';
+}
+
+.fi-cart:before {
+ content:'\e031';
+}
+
+.fi-chat:before {
+ content:'\e032';
+}
+
+.fi-check:before {
+ content:'\e033';
+}
+
+.fi-chevron-bottom:before {
+ content:'\e034';
+}
+
+.fi-chevron-left:before {
+ content:'\e035';
+}
+
+.fi-chevron-right:before {
+ content:'\e036';
+}
+
+.fi-chevron-top:before {
+ content:'\e037';
+}
+
+.fi-circle-check:before {
+ content:'\e038';
+}
+
+.fi-circle-x:before {
+ content:'\e039';
+}
+
+.fi-clipboard:before {
+ content:'\e03a';
+}
+
+.fi-clock:before {
+ content:'\e03b';
+}
+
+.fi-cloud-download:before {
+ content:'\e03c';
+}
+
+.fi-cloud-upload:before {
+ content:'\e03d';
+}
+
+.fi-cloud:before {
+ content:'\e03e';
+}
+
+.fi-cloudy:before {
+ content:'\e03f';
+}
+
+.fi-code:before {
+ content:'\e040';
+}
+
+.fi-cog:before {
+ content:'\e041';
+}
+
+.fi-collapse-down:before {
+ content:'\e042';
+}
+
+.fi-collapse-left:before {
+ content:'\e043';
+}
+
+.fi-collapse-right:before {
+ content:'\e044';
+}
+
+.fi-collapse-up:before {
+ content:'\e045';
+}
+
+.fi-command:before {
+ content:'\e046';
+}
+
+.fi-comment-square:before {
+ content:'\e047';
+}
+
+.fi-compass:before {
+ content:'\e048';
+}
+
+.fi-contrast:before {
+ content:'\e049';
+}
+
+.fi-copywriting:before {
+ content:'\e04a';
+}
+
+.fi-credit-card:before {
+ content:'\e04b';
+}
+
+.fi-crop:before {
+ content:'\e04c';
+}
+
+.fi-dashboard:before {
+ content:'\e04d';
+}
+
+.fi-data-transfer-download:before {
+ content:'\e04e';
+}
+
+.fi-data-transfer-upload:before {
+ content:'\e04f';
+}
+
+.fi-delete:before {
+ content:'\e050';
+}
+
+.fi-dial:before {
+ content:'\e051';
+}
+
+.fi-document:before {
+ content:'\e052';
+}
+
+.fi-dollar:before {
+ content:'\e053';
+}
+
+.fi-double-quote-sans-left:before {
+ content:'\e054';
+}
+
+.fi-double-quote-sans-right:before {
+ content:'\e055';
+}
+
+.fi-double-quote-serif-left:before {
+ content:'\e056';
+}
+
+.fi-double-quote-serif-right:before {
+ content:'\e057';
+}
+
+.fi-droplet:before {
+ content:'\e058';
+}
+
+.fi-eject:before {
+ content:'\e059';
+}
+
+.fi-elevator:before {
+ content:'\e05a';
+}
+
+.fi-ellipses:before {
+ content:'\e05b';
+}
+
+.fi-envelope-closed:before {
+ content:'\e05c';
+}
+
+.fi-envelope-open:before {
+ content:'\e05d';
+}
+
+.fi-euro:before {
+ content:'\e05e';
+}
+
+.fi-excerpt:before {
+ content:'\e05f';
+}
+
+.fi-expand-down:before {
+ content:'\e060';
+}
+
+.fi-expand-left:before {
+ content:'\e061';
+}
+
+.fi-expand-right:before {
+ content:'\e062';
+}
+
+.fi-expand-up:before {
+ content:'\e063';
+}
+
+.fi-external-link:before {
+ content:'\e064';
+}
+
+.fi-eye:before {
+ content:'\e065';
+}
+
+.fi-eyedropper:before {
+ content:'\e066';
+}
+
+.fi-file:before {
+ content:'\e067';
+}
+
+.fi-fire:before {
+ content:'\e068';
+}
+
+.fi-flag:before {
+ content:'\e069';
+}
+
+.fi-flash:before {
+ content:'\e06a';
+}
+
+.fi-folder:before {
+ content:'\e06b';
+}
+
+.fi-fork:before {
+ content:'\e06c';
+}
+
+.fi-fullscreen-enter:before {
+ content:'\e06d';
+}
+
+.fi-fullscreen-exit:before {
+ content:'\e06e';
+}
+
+.fi-globe:before {
+ content:'\e06f';
+}
+
+.fi-graph:before {
+ content:'\e070';
+}
+
+.fi-grid-four-up:before {
+ content:'\e071';
+}
+
+.fi-grid-three-up:before {
+ content:'\e072';
+}
+
+.fi-grid-two-up:before {
+ content:'\e073';
+}
+
+.fi-hard-drive:before {
+ content:'\e074';
+}
+
+.fi-header:before {
+ content:'\e075';
+}
+
+.fi-headphones:before {
+ content:'\e076';
+}
+
+.fi-heart:before {
+ content:'\e077';
+}
+
+.fi-home:before {
+ content:'\e078';
+}
+
+.fi-image:before {
+ content:'\e079';
+}
+
+.fi-inbox:before {
+ content:'\e07a';
+}
+
+.fi-infinity:before {
+ content:'\e07b';
+}
+
+.fi-info:before {
+ content:'\e07c';
+}
+
+.fi-italic:before {
+ content:'\e07d';
+}
+
+.fi-justify-center:before {
+ content:'\e07e';
+}
+
+.fi-justify-left:before {
+ content:'\e07f';
+}
+
+.fi-justify-right:before {
+ content:'\e080';
+}
+
+.fi-key:before {
+ content:'\e081';
+}
+
+.fi-laptop:before {
+ content:'\e082';
+}
+
+.fi-layers:before {
+ content:'\e083';
+}
+
+.fi-lightbulb:before {
+ content:'\e084';
+}
+
+.fi-link-broken:before {
+ content:'\e085';
+}
+
+.fi-link-intact:before {
+ content:'\e086';
+}
+
+.fi-list-rich:before {
+ content:'\e087';
+}
+
+.fi-list:before {
+ content:'\e088';
+}
+
+.fi-location:before {
+ content:'\e089';
+}
+
+.fi-lock-locked:before {
+ content:'\e08a';
+}
+
+.fi-lock-unlocked:before {
+ content:'\e08b';
+}
+
+.fi-loop-circular:before {
+ content:'\e08c';
+}
+
+.fi-loop-square:before {
+ content:'\e08d';
+}
+
+.fi-loop:before {
+ content:'\e08e';
+}
+
+.fi-magnifying-glass:before {
+ content:'\e08f';
+}
+
+.fi-map-marker:before {
+ content:'\e090';
+}
+
+.fi-map:before {
+ content:'\e091';
+}
+
+.fi-media-pause:before {
+ content:'\e092';
+}
+
+.fi-media-play:before {
+ content:'\e093';
+}
+
+.fi-media-record:before {
+ content:'\e094';
+}
+
+.fi-media-skip-backward:before {
+ content:'\e095';
+}
+
+.fi-media-skip-forward:before {
+ content:'\e096';
+}
+
+.fi-media-step-backward:before {
+ content:'\e097';
+}
+
+.fi-media-step-forward:before {
+ content:'\e098';
+}
+
+.fi-media-stop:before {
+ content:'\e099';
+}
+
+.fi-medical-cross:before {
+ content:'\e09a';
+}
+
+.fi-menu:before {
+ content:'\e09b';
+}
+
+.fi-microphone:before {
+ content:'\e09c';
+}
+
+.fi-minus:before {
+ content:'\e09d';
+}
+
+.fi-monitor:before {
+ content:'\e09e';
+}
+
+.fi-moon:before {
+ content:'\e09f';
+}
+
+.fi-move:before {
+ content:'\e0a0';
+}
+
+.fi-musical-note:before {
+ content:'\e0a1';
+}
+
+.fi-paperclip:before {
+ content:'\e0a2';
+}
+
+.fi-pencil:before {
+ content:'\e0a3';
+}
+
+.fi-people:before {
+ content:'\e0a4';
+}
+
+.fi-person:before {
+ content:'\e0a5';
+}
+
+.fi-phone:before {
+ content:'\e0a6';
+}
+
+.fi-pie-chart:before {
+ content:'\e0a7';
+}
+
+.fi-pin:before {
+ content:'\e0a8';
+}
+
+.fi-play-circle:before {
+ content:'\e0a9';
+}
+
+.fi-plus:before {
+ content:'\e0aa';
+}
+
+.fi-power-standby:before {
+ content:'\e0ab';
+}
+
+.fi-print:before {
+ content:'\e0ac';
+}
+
+.fi-project:before {
+ content:'\e0ad';
+}
+
+.fi-pulse:before {
+ content:'\e0ae';
+}
+
+.fi-puzzle-piece:before {
+ content:'\e0af';
+}
+
+.fi-question-mark:before {
+ content:'\e0b0';
+}
+
+.fi-rain:before {
+ content:'\e0b1';
+}
+
+.fi-random:before {
+ content:'\e0b2';
+}
+
+.fi-reload:before {
+ content:'\e0b3';
+}
+
+.fi-resize-both:before {
+ content:'\e0b4';
+}
+
+.fi-resize-height:before {
+ content:'\e0b5';
+}
+
+.fi-resize-width:before {
+ content:'\e0b6';
+}
+
+.fi-rss-alt:before {
+ content:'\e0b7';
+}
+
+.fi-rss:before {
+ content:'\e0b8';
+}
+
+.fi-script:before {
+ content:'\e0b9';
+}
+
+.fi-share-boxed:before {
+ content:'\e0ba';
+}
+
+.fi-share:before {
+ content:'\e0bb';
+}
+
+.fi-shield:before {
+ content:'\e0bc';
+}
+
+.fi-signal:before {
+ content:'\e0bd';
+}
+
+.fi-signpost:before {
+ content:'\e0be';
+}
+
+.fi-sort-ascending:before {
+ content:'\e0bf';
+}
+
+.fi-sort-descending:before {
+ content:'\e0c0';
+}
+
+.fi-spreadsheet:before {
+ content:'\e0c1';
+}
+
+.fi-star:before {
+ content:'\e0c2';
+}
+
+.fi-sun:before {
+ content:'\e0c3';
+}
+
+.fi-tablet:before {
+ content:'\e0c4';
+}
+
+.fi-tag:before {
+ content:'\e0c5';
+}
+
+.fi-tags:before {
+ content:'\e0c6';
+}
+
+.fi-target:before {
+ content:'\e0c7';
+}
+
+.fi-task:before {
+ content:'\e0c8';
+}
+
+.fi-terminal:before {
+ content:'\e0c9';
+}
+
+.fi-text:before {
+ content:'\e0ca';
+}
+
+.fi-thumb-down:before {
+ content:'\e0cb';
+}
+
+.fi-thumb-up:before {
+ content:'\e0cc';
+}
+
+.fi-timer:before {
+ content:'\e0cd';
+}
+
+.fi-transfer:before {
+ content:'\e0ce';
+}
+
+.fi-trash:before {
+ content:'\e0cf';
+}
+
+.fi-underline:before {
+ content:'\e0d0';
+}
+
+.fi-vertical-align-bottom:before {
+ content:'\e0d1';
+}
+
+.fi-vertical-align-center:before {
+ content:'\e0d2';
+}
+
+.fi-vertical-align-top:before {
+ content:'\e0d3';
+}
+
+.fi-video:before {
+ content:'\e0d4';
+}
+
+.fi-volume-high:before {
+ content:'\e0d5';
+}
+
+.fi-volume-low:before {
+ content:'\e0d6';
+}
+
+.fi-volume-off:before {
+ content:'\e0d7';
+}
+
+.fi-warning:before {
+ content:'\e0d8';
+}
+
+.fi-wifi:before {
+ content:'\e0d9';
+}
+
+.fi-wrench:before {
+ content:'\e0da';
+}
+
+.fi-x:before {
+ content:'\e0db';
+}
+
+.fi-yen:before {
+ content:'\e0dc';
+}
+
+.fi-zoom-in:before {
+ content:'\e0dd';
+}
+
+.fi-zoom-out:before {
+ content:'\e0de';
+}
+
diff --git a/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic-foundation.min.css b/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic-foundation.min.css
new file mode 100644
index 0000000..bd12429
--- /dev/null
+++ b/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic-foundation.min.css
@@ -0,0 +1 @@
+@font-face{font-family:Icons;src:url(../fonts/open-iconic.eot);src:url(../fonts/open-iconic.eot?#iconic-sm) format('embedded-opentype'),url(../fonts/open-iconic.woff) format('woff'),url(../fonts/open-iconic.ttf) format('truetype'),url(../fonts/open-iconic.otf) format('opentype'),url(../fonts/open-iconic.svg#iconic-sm) format('svg');font-weight:400;font-style:normal}.fi-account-login:before,.fi-account-logout:before,.fi-action-redo:before,.fi-action-undo:before,.fi-align-center:before,.fi-align-left:before,.fi-align-right:before,.fi-aperture:before,.fi-arrow-bottom:before,.fi-arrow-circle-bottom:before,.fi-arrow-circle-left:before,.fi-arrow-circle-right:before,.fi-arrow-circle-top:before,.fi-arrow-left:before,.fi-arrow-right:before,.fi-arrow-thick-bottom:before,.fi-arrow-thick-left:before,.fi-arrow-thick-right:before,.fi-arrow-thick-top:before,.fi-arrow-top:before,.fi-audio-spectrum:before,.fi-audio:before,.fi-badge:before,.fi-ban:before,.fi-bar-chart:before,.fi-basket:before,.fi-battery-empty:before,.fi-battery-full:before,.fi-beaker:before,.fi-bell:before,.fi-bluetooth:before,.fi-bold:before,.fi-bolt:before,.fi-book:before,.fi-bookmark:before,.fi-box:before,.fi-briefcase:before,.fi-british-pound:before,.fi-browser:before,.fi-brush:before,.fi-bug:before,.fi-bullhorn:before,.fi-calculator:before,.fi-calendar:before,.fi-camera-slr:before,.fi-caret-bottom:before,.fi-caret-left:before,.fi-caret-right:before,.fi-caret-top:before,.fi-cart:before,.fi-chat:before,.fi-check:before,.fi-chevron-bottom:before,.fi-chevron-left:before,.fi-chevron-right:before,.fi-chevron-top:before,.fi-circle-check:before,.fi-circle-x:before,.fi-clipboard:before,.fi-clock:before,.fi-cloud-download:before,.fi-cloud-upload:before,.fi-cloud:before,.fi-cloudy:before,.fi-code:before,.fi-cog:before,.fi-collapse-down:before,.fi-collapse-left:before,.fi-collapse-right:before,.fi-collapse-up:before,.fi-command:before,.fi-comment-square:before,.fi-compass:before,.fi-contrast:before,.fi-copywriting:before,.fi-credit-card:before,.fi-crop:before,.fi-dashboard:before,.fi-data-transfer-download:before,.fi-data-transfer-upload:before,.fi-delete:before,.fi-dial:before,.fi-document:before,.fi-dollar:before,.fi-double-quote-sans-left:before,.fi-double-quote-sans-right:before,.fi-double-quote-serif-left:before,.fi-double-quote-serif-right:before,.fi-droplet:before,.fi-eject:before,.fi-elevator:before,.fi-ellipses:before,.fi-envelope-closed:before,.fi-envelope-open:before,.fi-euro:before,.fi-excerpt:before,.fi-expand-down:before,.fi-expand-left:before,.fi-expand-right:before,.fi-expand-up:before,.fi-external-link:before,.fi-eye:before,.fi-eyedropper:before,.fi-file:before,.fi-fire:before,.fi-flag:before,.fi-flash:before,.fi-folder:before,.fi-fork:before,.fi-fullscreen-enter:before,.fi-fullscreen-exit:before,.fi-globe:before,.fi-graph:before,.fi-grid-four-up:before,.fi-grid-three-up:before,.fi-grid-two-up:before,.fi-hard-drive:before,.fi-header:before,.fi-headphones:before,.fi-heart:before,.fi-home:before,.fi-image:before,.fi-inbox:before,.fi-infinity:before,.fi-info:before,.fi-italic:before,.fi-justify-center:before,.fi-justify-left:before,.fi-justify-right:before,.fi-key:before,.fi-laptop:before,.fi-layers:before,.fi-lightbulb:before,.fi-link-broken:before,.fi-link-intact:before,.fi-list-rich:before,.fi-list:before,.fi-location:before,.fi-lock-locked:before,.fi-lock-unlocked:before,.fi-loop-circular:before,.fi-loop-square:before,.fi-loop:before,.fi-magnifying-glass:before,.fi-map-marker:before,.fi-map:before,.fi-media-pause:before,.fi-media-play:before,.fi-media-record:before,.fi-media-skip-backward:before,.fi-media-skip-forward:before,.fi-media-step-backward:before,.fi-media-step-forward:before,.fi-media-stop:before,.fi-medical-cross:before,.fi-menu:before,.fi-microphone:before,.fi-minus:before,.fi-monitor:before,.fi-moon:before,.fi-move:before,.fi-musical-note:before,.fi-paperclip:before,.fi-pencil:before,.fi-people:before,.fi-person:before,.fi-phone:before,.fi-pie-chart:before,.fi-pin:before,.fi-play-circle:before,.fi-plus:before,.fi-power-standby:before,.fi-print:before,.fi-project:before,.fi-pulse:before,.fi-puzzle-piece:before,.fi-question-mark:before,.fi-rain:before,.fi-random:before,.fi-reload:before,.fi-resize-both:before,.fi-resize-height:before,.fi-resize-width:before,.fi-rss-alt:before,.fi-rss:before,.fi-script:before,.fi-share-boxed:before,.fi-share:before,.fi-shield:before,.fi-signal:before,.fi-signpost:before,.fi-sort-ascending:before,.fi-sort-descending:before,.fi-spreadsheet:before,.fi-star:before,.fi-sun:before,.fi-tablet:before,.fi-tag:before,.fi-tags:before,.fi-target:before,.fi-task:before,.fi-terminal:before,.fi-text:before,.fi-thumb-down:before,.fi-thumb-up:before,.fi-timer:before,.fi-transfer:before,.fi-trash:before,.fi-underline:before,.fi-vertical-align-bottom:before,.fi-vertical-align-center:before,.fi-vertical-align-top:before,.fi-video:before,.fi-volume-high:before,.fi-volume-low:before,.fi-volume-off:before,.fi-warning:before,.fi-wifi:before,.fi-wrench:before,.fi-x:before,.fi-yen:before,.fi-zoom-in:before,.fi-zoom-out:before{font-family:Icons;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-block;text-decoration:inherit}[class*=fi-].oi-align-center:before{text-align:center}[class*=fi-].oi-align-left:before{text-align:left}[class*=fi-].oi-align-right:before{text-align:right}[class*=fi-].oi-flip-horizontal:before{-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1)}[class*=fi-].oi-flip-vertical:before{-webkit-transform:scale(1,-1);-ms-transform:scale(-1,1);transform:scale(1,-1)}[class*=fi-].oi-flip-horizontal-vertical:before{-webkit-transform:scale(-1,-1);-ms-transform:scale(-1,1);transform:scale(-1,-1)}.fi-account-login:before{content:'\e000'}.fi-account-logout:before{content:'\e001'}.fi-action-redo:before{content:'\e002'}.fi-action-undo:before{content:'\e003'}.fi-align-center:before{content:'\e004'}.fi-align-left:before{content:'\e005'}.fi-align-right:before{content:'\e006'}.fi-aperture:before{content:'\e007'}.fi-arrow-bottom:before{content:'\e008'}.fi-arrow-circle-bottom:before{content:'\e009'}.fi-arrow-circle-left:before{content:'\e00a'}.fi-arrow-circle-right:before{content:'\e00b'}.fi-arrow-circle-top:before{content:'\e00c'}.fi-arrow-left:before{content:'\e00d'}.fi-arrow-right:before{content:'\e00e'}.fi-arrow-thick-bottom:before{content:'\e00f'}.fi-arrow-thick-left:before{content:'\e010'}.fi-arrow-thick-right:before{content:'\e011'}.fi-arrow-thick-top:before{content:'\e012'}.fi-arrow-top:before{content:'\e013'}.fi-audio-spectrum:before{content:'\e014'}.fi-audio:before{content:'\e015'}.fi-badge:before{content:'\e016'}.fi-ban:before{content:'\e017'}.fi-bar-chart:before{content:'\e018'}.fi-basket:before{content:'\e019'}.fi-battery-empty:before{content:'\e01a'}.fi-battery-full:before{content:'\e01b'}.fi-beaker:before{content:'\e01c'}.fi-bell:before{content:'\e01d'}.fi-bluetooth:before{content:'\e01e'}.fi-bold:before{content:'\e01f'}.fi-bolt:before{content:'\e020'}.fi-book:before{content:'\e021'}.fi-bookmark:before{content:'\e022'}.fi-box:before{content:'\e023'}.fi-briefcase:before{content:'\e024'}.fi-british-pound:before{content:'\e025'}.fi-browser:before{content:'\e026'}.fi-brush:before{content:'\e027'}.fi-bug:before{content:'\e028'}.fi-bullhorn:before{content:'\e029'}.fi-calculator:before{content:'\e02a'}.fi-calendar:before{content:'\e02b'}.fi-camera-slr:before{content:'\e02c'}.fi-caret-bottom:before{content:'\e02d'}.fi-caret-left:before{content:'\e02e'}.fi-caret-right:before{content:'\e02f'}.fi-caret-top:before{content:'\e030'}.fi-cart:before{content:'\e031'}.fi-chat:before{content:'\e032'}.fi-check:before{content:'\e033'}.fi-chevron-bottom:before{content:'\e034'}.fi-chevron-left:before{content:'\e035'}.fi-chevron-right:before{content:'\e036'}.fi-chevron-top:before{content:'\e037'}.fi-circle-check:before{content:'\e038'}.fi-circle-x:before{content:'\e039'}.fi-clipboard:before{content:'\e03a'}.fi-clock:before{content:'\e03b'}.fi-cloud-download:before{content:'\e03c'}.fi-cloud-upload:before{content:'\e03d'}.fi-cloud:before{content:'\e03e'}.fi-cloudy:before{content:'\e03f'}.fi-code:before{content:'\e040'}.fi-cog:before{content:'\e041'}.fi-collapse-down:before{content:'\e042'}.fi-collapse-left:before{content:'\e043'}.fi-collapse-right:before{content:'\e044'}.fi-collapse-up:before{content:'\e045'}.fi-command:before{content:'\e046'}.fi-comment-square:before{content:'\e047'}.fi-compass:before{content:'\e048'}.fi-contrast:before{content:'\e049'}.fi-copywriting:before{content:'\e04a'}.fi-credit-card:before{content:'\e04b'}.fi-crop:before{content:'\e04c'}.fi-dashboard:before{content:'\e04d'}.fi-data-transfer-download:before{content:'\e04e'}.fi-data-transfer-upload:before{content:'\e04f'}.fi-delete:before{content:'\e050'}.fi-dial:before{content:'\e051'}.fi-document:before{content:'\e052'}.fi-dollar:before{content:'\e053'}.fi-double-quote-sans-left:before{content:'\e054'}.fi-double-quote-sans-right:before{content:'\e055'}.fi-double-quote-serif-left:before{content:'\e056'}.fi-double-quote-serif-right:before{content:'\e057'}.fi-droplet:before{content:'\e058'}.fi-eject:before{content:'\e059'}.fi-elevator:before{content:'\e05a'}.fi-ellipses:before{content:'\e05b'}.fi-envelope-closed:before{content:'\e05c'}.fi-envelope-open:before{content:'\e05d'}.fi-euro:before{content:'\e05e'}.fi-excerpt:before{content:'\e05f'}.fi-expand-down:before{content:'\e060'}.fi-expand-left:before{content:'\e061'}.fi-expand-right:before{content:'\e062'}.fi-expand-up:before{content:'\e063'}.fi-external-link:before{content:'\e064'}.fi-eye:before{content:'\e065'}.fi-eyedropper:before{content:'\e066'}.fi-file:before{content:'\e067'}.fi-fire:before{content:'\e068'}.fi-flag:before{content:'\e069'}.fi-flash:before{content:'\e06a'}.fi-folder:before{content:'\e06b'}.fi-fork:before{content:'\e06c'}.fi-fullscreen-enter:before{content:'\e06d'}.fi-fullscreen-exit:before{content:'\e06e'}.fi-globe:before{content:'\e06f'}.fi-graph:before{content:'\e070'}.fi-grid-four-up:before{content:'\e071'}.fi-grid-three-up:before{content:'\e072'}.fi-grid-two-up:before{content:'\e073'}.fi-hard-drive:before{content:'\e074'}.fi-header:before{content:'\e075'}.fi-headphones:before{content:'\e076'}.fi-heart:before{content:'\e077'}.fi-home:before{content:'\e078'}.fi-image:before{content:'\e079'}.fi-inbox:before{content:'\e07a'}.fi-infinity:before{content:'\e07b'}.fi-info:before{content:'\e07c'}.fi-italic:before{content:'\e07d'}.fi-justify-center:before{content:'\e07e'}.fi-justify-left:before{content:'\e07f'}.fi-justify-right:before{content:'\e080'}.fi-key:before{content:'\e081'}.fi-laptop:before{content:'\e082'}.fi-layers:before{content:'\e083'}.fi-lightbulb:before{content:'\e084'}.fi-link-broken:before{content:'\e085'}.fi-link-intact:before{content:'\e086'}.fi-list-rich:before{content:'\e087'}.fi-list:before{content:'\e088'}.fi-location:before{content:'\e089'}.fi-lock-locked:before{content:'\e08a'}.fi-lock-unlocked:before{content:'\e08b'}.fi-loop-circular:before{content:'\e08c'}.fi-loop-square:before{content:'\e08d'}.fi-loop:before{content:'\e08e'}.fi-magnifying-glass:before{content:'\e08f'}.fi-map-marker:before{content:'\e090'}.fi-map:before{content:'\e091'}.fi-media-pause:before{content:'\e092'}.fi-media-play:before{content:'\e093'}.fi-media-record:before{content:'\e094'}.fi-media-skip-backward:before{content:'\e095'}.fi-media-skip-forward:before{content:'\e096'}.fi-media-step-backward:before{content:'\e097'}.fi-media-step-forward:before{content:'\e098'}.fi-media-stop:before{content:'\e099'}.fi-medical-cross:before{content:'\e09a'}.fi-menu:before{content:'\e09b'}.fi-microphone:before{content:'\e09c'}.fi-minus:before{content:'\e09d'}.fi-monitor:before{content:'\e09e'}.fi-moon:before{content:'\e09f'}.fi-move:before{content:'\e0a0'}.fi-musical-note:before{content:'\e0a1'}.fi-paperclip:before{content:'\e0a2'}.fi-pencil:before{content:'\e0a3'}.fi-people:before{content:'\e0a4'}.fi-person:before{content:'\e0a5'}.fi-phone:before{content:'\e0a6'}.fi-pie-chart:before{content:'\e0a7'}.fi-pin:before{content:'\e0a8'}.fi-play-circle:before{content:'\e0a9'}.fi-plus:before{content:'\e0aa'}.fi-power-standby:before{content:'\e0ab'}.fi-print:before{content:'\e0ac'}.fi-project:before{content:'\e0ad'}.fi-pulse:before{content:'\e0ae'}.fi-puzzle-piece:before{content:'\e0af'}.fi-question-mark:before{content:'\e0b0'}.fi-rain:before{content:'\e0b1'}.fi-random:before{content:'\e0b2'}.fi-reload:before{content:'\e0b3'}.fi-resize-both:before{content:'\e0b4'}.fi-resize-height:before{content:'\e0b5'}.fi-resize-width:before{content:'\e0b6'}.fi-rss-alt:before{content:'\e0b7'}.fi-rss:before{content:'\e0b8'}.fi-script:before{content:'\e0b9'}.fi-share-boxed:before{content:'\e0ba'}.fi-share:before{content:'\e0bb'}.fi-shield:before{content:'\e0bc'}.fi-signal:before{content:'\e0bd'}.fi-signpost:before{content:'\e0be'}.fi-sort-ascending:before{content:'\e0bf'}.fi-sort-descending:before{content:'\e0c0'}.fi-spreadsheet:before{content:'\e0c1'}.fi-star:before{content:'\e0c2'}.fi-sun:before{content:'\e0c3'}.fi-tablet:before{content:'\e0c4'}.fi-tag:before{content:'\e0c5'}.fi-tags:before{content:'\e0c6'}.fi-target:before{content:'\e0c7'}.fi-task:before{content:'\e0c8'}.fi-terminal:before{content:'\e0c9'}.fi-text:before{content:'\e0ca'}.fi-thumb-down:before{content:'\e0cb'}.fi-thumb-up:before{content:'\e0cc'}.fi-timer:before{content:'\e0cd'}.fi-transfer:before{content:'\e0ce'}.fi-trash:before{content:'\e0cf'}.fi-underline:before{content:'\e0d0'}.fi-vertical-align-bottom:before{content:'\e0d1'}.fi-vertical-align-center:before{content:'\e0d2'}.fi-vertical-align-top:before{content:'\e0d3'}.fi-video:before{content:'\e0d4'}.fi-volume-high:before{content:'\e0d5'}.fi-volume-low:before{content:'\e0d6'}.fi-volume-off:before{content:'\e0d7'}.fi-warning:before{content:'\e0d8'}.fi-wifi:before{content:'\e0d9'}.fi-wrench:before{content:'\e0da'}.fi-x:before{content:'\e0db'}.fi-yen:before{content:'\e0dc'}.fi-zoom-in:before{content:'\e0dd'}.fi-zoom-out:before{content:'\e0de'}
\ No newline at end of file
diff --git a/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic-foundation.scss b/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic-foundation.scss
new file mode 100644
index 0000000..fe47138
--- /dev/null
+++ b/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic-foundation.scss
@@ -0,0 +1,1398 @@
+/* Foundation */
+
+/* Font path variable */
+$icon-font-path: '../fonts/' !default;
+
+@font-face {
+ font-family: 'Icons';
+ src: url('#{$icon-font-path}open-iconic.eot');
+ src: url('#{$icon-font-path}open-iconic.eot?#iconic-sm') format('embedded-opentype'), url('#{$icon-font-path}open-iconic.woff') format('woff'), url('#{$icon-font-path}open-iconic.ttf') format('truetype'), url('#{$icon-font-path}open-iconic.otf') format('opentype'), url('#{$icon-font-path}open-iconic.svg#iconic-sm') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+
+.fi-account-login:before,
+
+.fi-account-logout:before,
+
+.fi-action-redo:before,
+
+.fi-action-undo:before,
+
+.fi-align-center:before,
+
+.fi-align-left:before,
+
+.fi-align-right:before,
+
+.fi-aperture:before,
+
+.fi-arrow-bottom:before,
+
+.fi-arrow-circle-bottom:before,
+
+.fi-arrow-circle-left:before,
+
+.fi-arrow-circle-right:before,
+
+.fi-arrow-circle-top:before,
+
+.fi-arrow-left:before,
+
+.fi-arrow-right:before,
+
+.fi-arrow-thick-bottom:before,
+
+.fi-arrow-thick-left:before,
+
+.fi-arrow-thick-right:before,
+
+.fi-arrow-thick-top:before,
+
+.fi-arrow-top:before,
+
+.fi-audio-spectrum:before,
+
+.fi-audio:before,
+
+.fi-badge:before,
+
+.fi-ban:before,
+
+.fi-bar-chart:before,
+
+.fi-basket:before,
+
+.fi-battery-empty:before,
+
+.fi-battery-full:before,
+
+.fi-beaker:before,
+
+.fi-bell:before,
+
+.fi-bluetooth:before,
+
+.fi-bold:before,
+
+.fi-bolt:before,
+
+.fi-book:before,
+
+.fi-bookmark:before,
+
+.fi-box:before,
+
+.fi-briefcase:before,
+
+.fi-british-pound:before,
+
+.fi-browser:before,
+
+.fi-brush:before,
+
+.fi-bug:before,
+
+.fi-bullhorn:before,
+
+.fi-calculator:before,
+
+.fi-calendar:before,
+
+.fi-camera-slr:before,
+
+.fi-caret-bottom:before,
+
+.fi-caret-left:before,
+
+.fi-caret-right:before,
+
+.fi-caret-top:before,
+
+.fi-cart:before,
+
+.fi-chat:before,
+
+.fi-check:before,
+
+.fi-chevron-bottom:before,
+
+.fi-chevron-left:before,
+
+.fi-chevron-right:before,
+
+.fi-chevron-top:before,
+
+.fi-circle-check:before,
+
+.fi-circle-x:before,
+
+.fi-clipboard:before,
+
+.fi-clock:before,
+
+.fi-cloud-download:before,
+
+.fi-cloud-upload:before,
+
+.fi-cloud:before,
+
+.fi-cloudy:before,
+
+.fi-code:before,
+
+.fi-cog:before,
+
+.fi-collapse-down:before,
+
+.fi-collapse-left:before,
+
+.fi-collapse-right:before,
+
+.fi-collapse-up:before,
+
+.fi-command:before,
+
+.fi-comment-square:before,
+
+.fi-compass:before,
+
+.fi-contrast:before,
+
+.fi-copywriting:before,
+
+.fi-credit-card:before,
+
+.fi-crop:before,
+
+.fi-dashboard:before,
+
+.fi-data-transfer-download:before,
+
+.fi-data-transfer-upload:before,
+
+.fi-delete:before,
+
+.fi-dial:before,
+
+.fi-document:before,
+
+.fi-dollar:before,
+
+.fi-double-quote-sans-left:before,
+
+.fi-double-quote-sans-right:before,
+
+.fi-double-quote-serif-left:before,
+
+.fi-double-quote-serif-right:before,
+
+.fi-droplet:before,
+
+.fi-eject:before,
+
+.fi-elevator:before,
+
+.fi-ellipses:before,
+
+.fi-envelope-closed:before,
+
+.fi-envelope-open:before,
+
+.fi-euro:before,
+
+.fi-excerpt:before,
+
+.fi-expand-down:before,
+
+.fi-expand-left:before,
+
+.fi-expand-right:before,
+
+.fi-expand-up:before,
+
+.fi-external-link:before,
+
+.fi-eye:before,
+
+.fi-eyedropper:before,
+
+.fi-file:before,
+
+.fi-fire:before,
+
+.fi-flag:before,
+
+.fi-flash:before,
+
+.fi-folder:before,
+
+.fi-fork:before,
+
+.fi-fullscreen-enter:before,
+
+.fi-fullscreen-exit:before,
+
+.fi-globe:before,
+
+.fi-graph:before,
+
+.fi-grid-four-up:before,
+
+.fi-grid-three-up:before,
+
+.fi-grid-two-up:before,
+
+.fi-hard-drive:before,
+
+.fi-header:before,
+
+.fi-headphones:before,
+
+.fi-heart:before,
+
+.fi-home:before,
+
+.fi-image:before,
+
+.fi-inbox:before,
+
+.fi-infinity:before,
+
+.fi-info:before,
+
+.fi-italic:before,
+
+.fi-justify-center:before,
+
+.fi-justify-left:before,
+
+.fi-justify-right:before,
+
+.fi-key:before,
+
+.fi-laptop:before,
+
+.fi-layers:before,
+
+.fi-lightbulb:before,
+
+.fi-link-broken:before,
+
+.fi-link-intact:before,
+
+.fi-list-rich:before,
+
+.fi-list:before,
+
+.fi-location:before,
+
+.fi-lock-locked:before,
+
+.fi-lock-unlocked:before,
+
+.fi-loop-circular:before,
+
+.fi-loop-square:before,
+
+.fi-loop:before,
+
+.fi-magnifying-glass:before,
+
+.fi-map-marker:before,
+
+.fi-map:before,
+
+.fi-media-pause:before,
+
+.fi-media-play:before,
+
+.fi-media-record:before,
+
+.fi-media-skip-backward:before,
+
+.fi-media-skip-forward:before,
+
+.fi-media-step-backward:before,
+
+.fi-media-step-forward:before,
+
+.fi-media-stop:before,
+
+.fi-medical-cross:before,
+
+.fi-menu:before,
+
+.fi-microphone:before,
+
+.fi-minus:before,
+
+.fi-monitor:before,
+
+.fi-moon:before,
+
+.fi-move:before,
+
+.fi-musical-note:before,
+
+.fi-paperclip:before,
+
+.fi-pencil:before,
+
+.fi-people:before,
+
+.fi-person:before,
+
+.fi-phone:before,
+
+.fi-pie-chart:before,
+
+.fi-pin:before,
+
+.fi-play-circle:before,
+
+.fi-plus:before,
+
+.fi-power-standby:before,
+
+.fi-print:before,
+
+.fi-project:before,
+
+.fi-pulse:before,
+
+.fi-puzzle-piece:before,
+
+.fi-question-mark:before,
+
+.fi-rain:before,
+
+.fi-random:before,
+
+.fi-reload:before,
+
+.fi-resize-both:before,
+
+.fi-resize-height:before,
+
+.fi-resize-width:before,
+
+.fi-rss-alt:before,
+
+.fi-rss:before,
+
+.fi-script:before,
+
+.fi-share-boxed:before,
+
+.fi-share:before,
+
+.fi-shield:before,
+
+.fi-signal:before,
+
+.fi-signpost:before,
+
+.fi-sort-ascending:before,
+
+.fi-sort-descending:before,
+
+.fi-spreadsheet:before,
+
+.fi-star:before,
+
+.fi-sun:before,
+
+.fi-tablet:before,
+
+.fi-tag:before,
+
+.fi-tags:before,
+
+.fi-target:before,
+
+.fi-task:before,
+
+.fi-terminal:before,
+
+.fi-text:before,
+
+.fi-thumb-down:before,
+
+.fi-thumb-up:before,
+
+.fi-timer:before,
+
+.fi-transfer:before,
+
+.fi-trash:before,
+
+.fi-underline:before,
+
+.fi-vertical-align-bottom:before,
+
+.fi-vertical-align-center:before,
+
+.fi-vertical-align-top:before,
+
+.fi-video:before,
+
+.fi-volume-high:before,
+
+.fi-volume-low:before,
+
+.fi-volume-off:before,
+
+.fi-warning:before,
+
+.fi-wifi:before,
+
+.fi-wrench:before,
+
+.fi-x:before,
+
+.fi-yen:before,
+
+.fi-zoom-in:before,
+
+.fi-zoom-out:before
+ {
+ font-family: 'Icons';
+ font-style: normal;
+ font-weight: normal;
+ font-variant: normal;
+ text-transform: none;
+ line-height: 1;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ display: inline-block;
+ text-decoration: inherit;
+}
+
+
+[class*='fi-'].oi-align-center:before {
+ text-align: center;
+}
+
+[class*='fi-'].oi-align-left:before {
+ text-align: left;
+}
+
+[class*='fi-'].oi-align-right:before {
+ text-align: right;
+}
+
+
+[class*='fi-'].oi-flip-horizontal:before {
+ -webkit-transform: scale(-1, 1);
+ -ms-transform: scale(-1, 1);
+ transform: scale(-1, 1);
+}
+
+[class*='fi-'].oi-flip-vertical:before {
+ -webkit-transform: scale(1, -1);
+ -ms-transform: scale(-1, 1);
+ transform: scale(1, -1);
+}
+
+[class*='fi-'].oi-flip-horizontal-vertical:before {
+ -webkit-transform: scale(-1, -1);
+ -ms-transform: scale(-1, 1);
+ transform: scale(-1, -1);
+}
+
+
+
+.fi-account-login:before {
+ content:'\e000';
+}
+
+.fi-account-logout:before {
+ content:'\e001';
+}
+
+.fi-action-redo:before {
+ content:'\e002';
+}
+
+.fi-action-undo:before {
+ content:'\e003';
+}
+
+.fi-align-center:before {
+ content:'\e004';
+}
+
+.fi-align-left:before {
+ content:'\e005';
+}
+
+.fi-align-right:before {
+ content:'\e006';
+}
+
+.fi-aperture:before {
+ content:'\e007';
+}
+
+.fi-arrow-bottom:before {
+ content:'\e008';
+}
+
+.fi-arrow-circle-bottom:before {
+ content:'\e009';
+}
+
+.fi-arrow-circle-left:before {
+ content:'\e00a';
+}
+
+.fi-arrow-circle-right:before {
+ content:'\e00b';
+}
+
+.fi-arrow-circle-top:before {
+ content:'\e00c';
+}
+
+.fi-arrow-left:before {
+ content:'\e00d';
+}
+
+.fi-arrow-right:before {
+ content:'\e00e';
+}
+
+.fi-arrow-thick-bottom:before {
+ content:'\e00f';
+}
+
+.fi-arrow-thick-left:before {
+ content:'\e010';
+}
+
+.fi-arrow-thick-right:before {
+ content:'\e011';
+}
+
+.fi-arrow-thick-top:before {
+ content:'\e012';
+}
+
+.fi-arrow-top:before {
+ content:'\e013';
+}
+
+.fi-audio-spectrum:before {
+ content:'\e014';
+}
+
+.fi-audio:before {
+ content:'\e015';
+}
+
+.fi-badge:before {
+ content:'\e016';
+}
+
+.fi-ban:before {
+ content:'\e017';
+}
+
+.fi-bar-chart:before {
+ content:'\e018';
+}
+
+.fi-basket:before {
+ content:'\e019';
+}
+
+.fi-battery-empty:before {
+ content:'\e01a';
+}
+
+.fi-battery-full:before {
+ content:'\e01b';
+}
+
+.fi-beaker:before {
+ content:'\e01c';
+}
+
+.fi-bell:before {
+ content:'\e01d';
+}
+
+.fi-bluetooth:before {
+ content:'\e01e';
+}
+
+.fi-bold:before {
+ content:'\e01f';
+}
+
+.fi-bolt:before {
+ content:'\e020';
+}
+
+.fi-book:before {
+ content:'\e021';
+}
+
+.fi-bookmark:before {
+ content:'\e022';
+}
+
+.fi-box:before {
+ content:'\e023';
+}
+
+.fi-briefcase:before {
+ content:'\e024';
+}
+
+.fi-british-pound:before {
+ content:'\e025';
+}
+
+.fi-browser:before {
+ content:'\e026';
+}
+
+.fi-brush:before {
+ content:'\e027';
+}
+
+.fi-bug:before {
+ content:'\e028';
+}
+
+.fi-bullhorn:before {
+ content:'\e029';
+}
+
+.fi-calculator:before {
+ content:'\e02a';
+}
+
+.fi-calendar:before {
+ content:'\e02b';
+}
+
+.fi-camera-slr:before {
+ content:'\e02c';
+}
+
+.fi-caret-bottom:before {
+ content:'\e02d';
+}
+
+.fi-caret-left:before {
+ content:'\e02e';
+}
+
+.fi-caret-right:before {
+ content:'\e02f';
+}
+
+.fi-caret-top:before {
+ content:'\e030';
+}
+
+.fi-cart:before {
+ content:'\e031';
+}
+
+.fi-chat:before {
+ content:'\e032';
+}
+
+.fi-check:before {
+ content:'\e033';
+}
+
+.fi-chevron-bottom:before {
+ content:'\e034';
+}
+
+.fi-chevron-left:before {
+ content:'\e035';
+}
+
+.fi-chevron-right:before {
+ content:'\e036';
+}
+
+.fi-chevron-top:before {
+ content:'\e037';
+}
+
+.fi-circle-check:before {
+ content:'\e038';
+}
+
+.fi-circle-x:before {
+ content:'\e039';
+}
+
+.fi-clipboard:before {
+ content:'\e03a';
+}
+
+.fi-clock:before {
+ content:'\e03b';
+}
+
+.fi-cloud-download:before {
+ content:'\e03c';
+}
+
+.fi-cloud-upload:before {
+ content:'\e03d';
+}
+
+.fi-cloud:before {
+ content:'\e03e';
+}
+
+.fi-cloudy:before {
+ content:'\e03f';
+}
+
+.fi-code:before {
+ content:'\e040';
+}
+
+.fi-cog:before {
+ content:'\e041';
+}
+
+.fi-collapse-down:before {
+ content:'\e042';
+}
+
+.fi-collapse-left:before {
+ content:'\e043';
+}
+
+.fi-collapse-right:before {
+ content:'\e044';
+}
+
+.fi-collapse-up:before {
+ content:'\e045';
+}
+
+.fi-command:before {
+ content:'\e046';
+}
+
+.fi-comment-square:before {
+ content:'\e047';
+}
+
+.fi-compass:before {
+ content:'\e048';
+}
+
+.fi-contrast:before {
+ content:'\e049';
+}
+
+.fi-copywriting:before {
+ content:'\e04a';
+}
+
+.fi-credit-card:before {
+ content:'\e04b';
+}
+
+.fi-crop:before {
+ content:'\e04c';
+}
+
+.fi-dashboard:before {
+ content:'\e04d';
+}
+
+.fi-data-transfer-download:before {
+ content:'\e04e';
+}
+
+.fi-data-transfer-upload:before {
+ content:'\e04f';
+}
+
+.fi-delete:before {
+ content:'\e050';
+}
+
+.fi-dial:before {
+ content:'\e051';
+}
+
+.fi-document:before {
+ content:'\e052';
+}
+
+.fi-dollar:before {
+ content:'\e053';
+}
+
+.fi-double-quote-sans-left:before {
+ content:'\e054';
+}
+
+.fi-double-quote-sans-right:before {
+ content:'\e055';
+}
+
+.fi-double-quote-serif-left:before {
+ content:'\e056';
+}
+
+.fi-double-quote-serif-right:before {
+ content:'\e057';
+}
+
+.fi-droplet:before {
+ content:'\e058';
+}
+
+.fi-eject:before {
+ content:'\e059';
+}
+
+.fi-elevator:before {
+ content:'\e05a';
+}
+
+.fi-ellipses:before {
+ content:'\e05b';
+}
+
+.fi-envelope-closed:before {
+ content:'\e05c';
+}
+
+.fi-envelope-open:before {
+ content:'\e05d';
+}
+
+.fi-euro:before {
+ content:'\e05e';
+}
+
+.fi-excerpt:before {
+ content:'\e05f';
+}
+
+.fi-expand-down:before {
+ content:'\e060';
+}
+
+.fi-expand-left:before {
+ content:'\e061';
+}
+
+.fi-expand-right:before {
+ content:'\e062';
+}
+
+.fi-expand-up:before {
+ content:'\e063';
+}
+
+.fi-external-link:before {
+ content:'\e064';
+}
+
+.fi-eye:before {
+ content:'\e065';
+}
+
+.fi-eyedropper:before {
+ content:'\e066';
+}
+
+.fi-file:before {
+ content:'\e067';
+}
+
+.fi-fire:before {
+ content:'\e068';
+}
+
+.fi-flag:before {
+ content:'\e069';
+}
+
+.fi-flash:before {
+ content:'\e06a';
+}
+
+.fi-folder:before {
+ content:'\e06b';
+}
+
+.fi-fork:before {
+ content:'\e06c';
+}
+
+.fi-fullscreen-enter:before {
+ content:'\e06d';
+}
+
+.fi-fullscreen-exit:before {
+ content:'\e06e';
+}
+
+.fi-globe:before {
+ content:'\e06f';
+}
+
+.fi-graph:before {
+ content:'\e070';
+}
+
+.fi-grid-four-up:before {
+ content:'\e071';
+}
+
+.fi-grid-three-up:before {
+ content:'\e072';
+}
+
+.fi-grid-two-up:before {
+ content:'\e073';
+}
+
+.fi-hard-drive:before {
+ content:'\e074';
+}
+
+.fi-header:before {
+ content:'\e075';
+}
+
+.fi-headphones:before {
+ content:'\e076';
+}
+
+.fi-heart:before {
+ content:'\e077';
+}
+
+.fi-home:before {
+ content:'\e078';
+}
+
+.fi-image:before {
+ content:'\e079';
+}
+
+.fi-inbox:before {
+ content:'\e07a';
+}
+
+.fi-infinity:before {
+ content:'\e07b';
+}
+
+.fi-info:before {
+ content:'\e07c';
+}
+
+.fi-italic:before {
+ content:'\e07d';
+}
+
+.fi-justify-center:before {
+ content:'\e07e';
+}
+
+.fi-justify-left:before {
+ content:'\e07f';
+}
+
+.fi-justify-right:before {
+ content:'\e080';
+}
+
+.fi-key:before {
+ content:'\e081';
+}
+
+.fi-laptop:before {
+ content:'\e082';
+}
+
+.fi-layers:before {
+ content:'\e083';
+}
+
+.fi-lightbulb:before {
+ content:'\e084';
+}
+
+.fi-link-broken:before {
+ content:'\e085';
+}
+
+.fi-link-intact:before {
+ content:'\e086';
+}
+
+.fi-list-rich:before {
+ content:'\e087';
+}
+
+.fi-list:before {
+ content:'\e088';
+}
+
+.fi-location:before {
+ content:'\e089';
+}
+
+.fi-lock-locked:before {
+ content:'\e08a';
+}
+
+.fi-lock-unlocked:before {
+ content:'\e08b';
+}
+
+.fi-loop-circular:before {
+ content:'\e08c';
+}
+
+.fi-loop-square:before {
+ content:'\e08d';
+}
+
+.fi-loop:before {
+ content:'\e08e';
+}
+
+.fi-magnifying-glass:before {
+ content:'\e08f';
+}
+
+.fi-map-marker:before {
+ content:'\e090';
+}
+
+.fi-map:before {
+ content:'\e091';
+}
+
+.fi-media-pause:before {
+ content:'\e092';
+}
+
+.fi-media-play:before {
+ content:'\e093';
+}
+
+.fi-media-record:before {
+ content:'\e094';
+}
+
+.fi-media-skip-backward:before {
+ content:'\e095';
+}
+
+.fi-media-skip-forward:before {
+ content:'\e096';
+}
+
+.fi-media-step-backward:before {
+ content:'\e097';
+}
+
+.fi-media-step-forward:before {
+ content:'\e098';
+}
+
+.fi-media-stop:before {
+ content:'\e099';
+}
+
+.fi-medical-cross:before {
+ content:'\e09a';
+}
+
+.fi-menu:before {
+ content:'\e09b';
+}
+
+.fi-microphone:before {
+ content:'\e09c';
+}
+
+.fi-minus:before {
+ content:'\e09d';
+}
+
+.fi-monitor:before {
+ content:'\e09e';
+}
+
+.fi-moon:before {
+ content:'\e09f';
+}
+
+.fi-move:before {
+ content:'\e0a0';
+}
+
+.fi-musical-note:before {
+ content:'\e0a1';
+}
+
+.fi-paperclip:before {
+ content:'\e0a2';
+}
+
+.fi-pencil:before {
+ content:'\e0a3';
+}
+
+.fi-people:before {
+ content:'\e0a4';
+}
+
+.fi-person:before {
+ content:'\e0a5';
+}
+
+.fi-phone:before {
+ content:'\e0a6';
+}
+
+.fi-pie-chart:before {
+ content:'\e0a7';
+}
+
+.fi-pin:before {
+ content:'\e0a8';
+}
+
+.fi-play-circle:before {
+ content:'\e0a9';
+}
+
+.fi-plus:before {
+ content:'\e0aa';
+}
+
+.fi-power-standby:before {
+ content:'\e0ab';
+}
+
+.fi-print:before {
+ content:'\e0ac';
+}
+
+.fi-project:before {
+ content:'\e0ad';
+}
+
+.fi-pulse:before {
+ content:'\e0ae';
+}
+
+.fi-puzzle-piece:before {
+ content:'\e0af';
+}
+
+.fi-question-mark:before {
+ content:'\e0b0';
+}
+
+.fi-rain:before {
+ content:'\e0b1';
+}
+
+.fi-random:before {
+ content:'\e0b2';
+}
+
+.fi-reload:before {
+ content:'\e0b3';
+}
+
+.fi-resize-both:before {
+ content:'\e0b4';
+}
+
+.fi-resize-height:before {
+ content:'\e0b5';
+}
+
+.fi-resize-width:before {
+ content:'\e0b6';
+}
+
+.fi-rss-alt:before {
+ content:'\e0b7';
+}
+
+.fi-rss:before {
+ content:'\e0b8';
+}
+
+.fi-script:before {
+ content:'\e0b9';
+}
+
+.fi-share-boxed:before {
+ content:'\e0ba';
+}
+
+.fi-share:before {
+ content:'\e0bb';
+}
+
+.fi-shield:before {
+ content:'\e0bc';
+}
+
+.fi-signal:before {
+ content:'\e0bd';
+}
+
+.fi-signpost:before {
+ content:'\e0be';
+}
+
+.fi-sort-ascending:before {
+ content:'\e0bf';
+}
+
+.fi-sort-descending:before {
+ content:'\e0c0';
+}
+
+.fi-spreadsheet:before {
+ content:'\e0c1';
+}
+
+.fi-star:before {
+ content:'\e0c2';
+}
+
+.fi-sun:before {
+ content:'\e0c3';
+}
+
+.fi-tablet:before {
+ content:'\e0c4';
+}
+
+.fi-tag:before {
+ content:'\e0c5';
+}
+
+.fi-tags:before {
+ content:'\e0c6';
+}
+
+.fi-target:before {
+ content:'\e0c7';
+}
+
+.fi-task:before {
+ content:'\e0c8';
+}
+
+.fi-terminal:before {
+ content:'\e0c9';
+}
+
+.fi-text:before {
+ content:'\e0ca';
+}
+
+.fi-thumb-down:before {
+ content:'\e0cb';
+}
+
+.fi-thumb-up:before {
+ content:'\e0cc';
+}
+
+.fi-timer:before {
+ content:'\e0cd';
+}
+
+.fi-transfer:before {
+ content:'\e0ce';
+}
+
+.fi-trash:before {
+ content:'\e0cf';
+}
+
+.fi-underline:before {
+ content:'\e0d0';
+}
+
+.fi-vertical-align-bottom:before {
+ content:'\e0d1';
+}
+
+.fi-vertical-align-center:before {
+ content:'\e0d2';
+}
+
+.fi-vertical-align-top:before {
+ content:'\e0d3';
+}
+
+.fi-video:before {
+ content:'\e0d4';
+}
+
+.fi-volume-high:before {
+ content:'\e0d5';
+}
+
+.fi-volume-low:before {
+ content:'\e0d6';
+}
+
+.fi-volume-off:before {
+ content:'\e0d7';
+}
+
+.fi-warning:before {
+ content:'\e0d8';
+}
+
+.fi-wifi:before {
+ content:'\e0d9';
+}
+
+.fi-wrench:before {
+ content:'\e0da';
+}
+
+.fi-x:before {
+ content:'\e0db';
+}
+
+.fi-yen:before {
+ content:'\e0dc';
+}
+
+.fi-zoom-in:before {
+ content:'\e0dd';
+}
+
+.fi-zoom-out:before {
+ content:'\e0de';
+}
+
diff --git a/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic-foundation.styl b/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic-foundation.styl
new file mode 100644
index 0000000..a52637a
--- /dev/null
+++ b/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic-foundation.styl
@@ -0,0 +1,1392 @@
+/* Foundation */
+
+@font-face
+ font-family 'Icons'
+ src url('../fonts/open-iconic.eot')
+ src url('../fonts/open-iconic.eot?#iconic-sm') format('embedded-opentype'), url('../fonts/open-iconic.woff') format('woff'), url('../fonts/open-iconic.ttf') format('truetype'), url('../fonts/open-iconic.otf') format('opentype'), url('../fonts/open-iconic.svg#iconic-sm') format('svg')
+ font-weight normal
+ font-style normal
+
+
+
+.fi-account-loginbefore,
+
+.fi-account-logoutbefore,
+
+.fi-action-redobefore,
+
+.fi-action-undobefore,
+
+.fi-align-centerbefore,
+
+.fi-align-leftbefore,
+
+.fi-align-rightbefore,
+
+.fi-aperturebefore,
+
+.fi-arrow-bottombefore,
+
+.fi-arrow-circle-bottombefore,
+
+.fi-arrow-circle-leftbefore,
+
+.fi-arrow-circle-rightbefore,
+
+.fi-arrow-circle-topbefore,
+
+.fi-arrow-leftbefore,
+
+.fi-arrow-rightbefore,
+
+.fi-arrow-thick-bottombefore,
+
+.fi-arrow-thick-leftbefore,
+
+.fi-arrow-thick-rightbefore,
+
+.fi-arrow-thick-topbefore,
+
+.fi-arrow-topbefore,
+
+.fi-audio-spectrumbefore,
+
+.fi-audiobefore,
+
+.fi-badgebefore,
+
+.fi-banbefore,
+
+.fi-bar-chartbefore,
+
+.fi-basketbefore,
+
+.fi-battery-emptybefore,
+
+.fi-battery-fullbefore,
+
+.fi-beakerbefore,
+
+.fi-bellbefore,
+
+.fi-bluetoothbefore,
+
+.fi-boldbefore,
+
+.fi-boltbefore,
+
+.fi-bookbefore,
+
+.fi-bookmarkbefore,
+
+.fi-boxbefore,
+
+.fi-briefcasebefore,
+
+.fi-british-poundbefore,
+
+.fi-browserbefore,
+
+.fi-brushbefore,
+
+.fi-bugbefore,
+
+.fi-bullhornbefore,
+
+.fi-calculatorbefore,
+
+.fi-calendarbefore,
+
+.fi-camera-slrbefore,
+
+.fi-caret-bottombefore,
+
+.fi-caret-leftbefore,
+
+.fi-caret-rightbefore,
+
+.fi-caret-topbefore,
+
+.fi-cartbefore,
+
+.fi-chatbefore,
+
+.fi-checkbefore,
+
+.fi-chevron-bottombefore,
+
+.fi-chevron-leftbefore,
+
+.fi-chevron-rightbefore,
+
+.fi-chevron-topbefore,
+
+.fi-circle-checkbefore,
+
+.fi-circle-xbefore,
+
+.fi-clipboardbefore,
+
+.fi-clockbefore,
+
+.fi-cloud-downloadbefore,
+
+.fi-cloud-uploadbefore,
+
+.fi-cloudbefore,
+
+.fi-cloudybefore,
+
+.fi-codebefore,
+
+.fi-cogbefore,
+
+.fi-collapse-downbefore,
+
+.fi-collapse-leftbefore,
+
+.fi-collapse-rightbefore,
+
+.fi-collapse-upbefore,
+
+.fi-commandbefore,
+
+.fi-comment-squarebefore,
+
+.fi-compassbefore,
+
+.fi-contrastbefore,
+
+.fi-copywritingbefore,
+
+.fi-credit-cardbefore,
+
+.fi-cropbefore,
+
+.fi-dashboardbefore,
+
+.fi-data-transfer-downloadbefore,
+
+.fi-data-transfer-uploadbefore,
+
+.fi-deletebefore,
+
+.fi-dialbefore,
+
+.fi-documentbefore,
+
+.fi-dollarbefore,
+
+.fi-double-quote-sans-leftbefore,
+
+.fi-double-quote-sans-rightbefore,
+
+.fi-double-quote-serif-leftbefore,
+
+.fi-double-quote-serif-rightbefore,
+
+.fi-dropletbefore,
+
+.fi-ejectbefore,
+
+.fi-elevatorbefore,
+
+.fi-ellipsesbefore,
+
+.fi-envelope-closedbefore,
+
+.fi-envelope-openbefore,
+
+.fi-eurobefore,
+
+.fi-excerptbefore,
+
+.fi-expand-downbefore,
+
+.fi-expand-leftbefore,
+
+.fi-expand-rightbefore,
+
+.fi-expand-upbefore,
+
+.fi-external-linkbefore,
+
+.fi-eyebefore,
+
+.fi-eyedropperbefore,
+
+.fi-filebefore,
+
+.fi-firebefore,
+
+.fi-flagbefore,
+
+.fi-flashbefore,
+
+.fi-folderbefore,
+
+.fi-forkbefore,
+
+.fi-fullscreen-enterbefore,
+
+.fi-fullscreen-exitbefore,
+
+.fi-globebefore,
+
+.fi-graphbefore,
+
+.fi-grid-four-upbefore,
+
+.fi-grid-three-upbefore,
+
+.fi-grid-two-upbefore,
+
+.fi-hard-drivebefore,
+
+.fi-headerbefore,
+
+.fi-headphonesbefore,
+
+.fi-heartbefore,
+
+.fi-homebefore,
+
+.fi-imagebefore,
+
+.fi-inboxbefore,
+
+.fi-infinitybefore,
+
+.fi-infobefore,
+
+.fi-italicbefore,
+
+.fi-justify-centerbefore,
+
+.fi-justify-leftbefore,
+
+.fi-justify-rightbefore,
+
+.fi-keybefore,
+
+.fi-laptopbefore,
+
+.fi-layersbefore,
+
+.fi-lightbulbbefore,
+
+.fi-link-brokenbefore,
+
+.fi-link-intactbefore,
+
+.fi-list-richbefore,
+
+.fi-listbefore,
+
+.fi-locationbefore,
+
+.fi-lock-lockedbefore,
+
+.fi-lock-unlockedbefore,
+
+.fi-loop-circularbefore,
+
+.fi-loop-squarebefore,
+
+.fi-loopbefore,
+
+.fi-magnifying-glassbefore,
+
+.fi-map-markerbefore,
+
+.fi-mapbefore,
+
+.fi-media-pausebefore,
+
+.fi-media-playbefore,
+
+.fi-media-recordbefore,
+
+.fi-media-skip-backwardbefore,
+
+.fi-media-skip-forwardbefore,
+
+.fi-media-step-backwardbefore,
+
+.fi-media-step-forwardbefore,
+
+.fi-media-stopbefore,
+
+.fi-medical-crossbefore,
+
+.fi-menubefore,
+
+.fi-microphonebefore,
+
+.fi-minusbefore,
+
+.fi-monitorbefore,
+
+.fi-moonbefore,
+
+.fi-movebefore,
+
+.fi-musical-notebefore,
+
+.fi-paperclipbefore,
+
+.fi-pencilbefore,
+
+.fi-peoplebefore,
+
+.fi-personbefore,
+
+.fi-phonebefore,
+
+.fi-pie-chartbefore,
+
+.fi-pinbefore,
+
+.fi-play-circlebefore,
+
+.fi-plusbefore,
+
+.fi-power-standbybefore,
+
+.fi-printbefore,
+
+.fi-projectbefore,
+
+.fi-pulsebefore,
+
+.fi-puzzle-piecebefore,
+
+.fi-question-markbefore,
+
+.fi-rainbefore,
+
+.fi-randombefore,
+
+.fi-reloadbefore,
+
+.fi-resize-bothbefore,
+
+.fi-resize-heightbefore,
+
+.fi-resize-widthbefore,
+
+.fi-rss-altbefore,
+
+.fi-rssbefore,
+
+.fi-scriptbefore,
+
+.fi-share-boxedbefore,
+
+.fi-sharebefore,
+
+.fi-shieldbefore,
+
+.fi-signalbefore,
+
+.fi-signpostbefore,
+
+.fi-sort-ascendingbefore,
+
+.fi-sort-descendingbefore,
+
+.fi-spreadsheetbefore,
+
+.fi-starbefore,
+
+.fi-sunbefore,
+
+.fi-tabletbefore,
+
+.fi-tagbefore,
+
+.fi-tagsbefore,
+
+.fi-targetbefore,
+
+.fi-taskbefore,
+
+.fi-terminalbefore,
+
+.fi-textbefore,
+
+.fi-thumb-downbefore,
+
+.fi-thumb-upbefore,
+
+.fi-timerbefore,
+
+.fi-transferbefore,
+
+.fi-trashbefore,
+
+.fi-underlinebefore,
+
+.fi-vertical-align-bottombefore,
+
+.fi-vertical-align-centerbefore,
+
+.fi-vertical-align-topbefore,
+
+.fi-videobefore,
+
+.fi-volume-highbefore,
+
+.fi-volume-lowbefore,
+
+.fi-volume-offbefore,
+
+.fi-warningbefore,
+
+.fi-wifibefore,
+
+.fi-wrenchbefore,
+
+.fi-xbefore,
+
+.fi-yenbefore,
+
+.fi-zoom-inbefore,
+
+.fi-zoom-outbefore
+
+ font-family 'Icons'
+ font-style normal
+ font-weight normal
+ font-variant normal
+ text-transform none
+ line-height 1
+ -webkit-font-smoothing antialiased
+ -moz-osx-font-smoothing grayscale
+ display inline-block
+ text-decoration inherit
+
+
+[class*='fi-'].oi-align-center:before
+ text-align center
+
+
+[class*='fi-'].oi-align-left:before
+ text-align left
+
+
+[class*='fi-'].oi-align-right:before
+ text-align right
+
+
+
+[class*='fi-'].oi-flip-horizontal:before
+ -webkit-transform scale(-1, 1)
+ -ms-transform scale(-1, 1)
+ transform scale(-1, 1)
+
+
+[class*='fi-'].oi-flip-vertical:before
+ -webkit-transform scale(1, -1)
+ -ms-transform scale(-1, 1)
+ transform scale(1, -1)
+
+
+[class*='fi-'].oi-flip-horizontal-vertical:before
+ -webkit-transform scale(-1, -1)
+ -ms-transform scale(-1, 1)
+ transform scale(-1, -1)
+
+
+.fi-account-login:before
+ content'\e000'
+
+
+.fi-account-logout:before
+ content'\e001'
+
+
+.fi-action-redo:before
+ content'\e002'
+
+
+.fi-action-undo:before
+ content'\e003'
+
+
+.fi-align-center:before
+ content'\e004'
+
+
+.fi-align-left:before
+ content'\e005'
+
+
+.fi-align-right:before
+ content'\e006'
+
+
+.fi-aperture:before
+ content'\e007'
+
+
+.fi-arrow-bottom:before
+ content'\e008'
+
+
+.fi-arrow-circle-bottom:before
+ content'\e009'
+
+
+.fi-arrow-circle-left:before
+ content'\e00a'
+
+
+.fi-arrow-circle-right:before
+ content'\e00b'
+
+
+.fi-arrow-circle-top:before
+ content'\e00c'
+
+
+.fi-arrow-left:before
+ content'\e00d'
+
+
+.fi-arrow-right:before
+ content'\e00e'
+
+
+.fi-arrow-thick-bottom:before
+ content'\e00f'
+
+
+.fi-arrow-thick-left:before
+ content'\e010'
+
+
+.fi-arrow-thick-right:before
+ content'\e011'
+
+
+.fi-arrow-thick-top:before
+ content'\e012'
+
+
+.fi-arrow-top:before
+ content'\e013'
+
+
+.fi-audio-spectrum:before
+ content'\e014'
+
+
+.fi-audio:before
+ content'\e015'
+
+
+.fi-badge:before
+ content'\e016'
+
+
+.fi-ban:before
+ content'\e017'
+
+
+.fi-bar-chart:before
+ content'\e018'
+
+
+.fi-basket:before
+ content'\e019'
+
+
+.fi-battery-empty:before
+ content'\e01a'
+
+
+.fi-battery-full:before
+ content'\e01b'
+
+
+.fi-beaker:before
+ content'\e01c'
+
+
+.fi-bell:before
+ content'\e01d'
+
+
+.fi-bluetooth:before
+ content'\e01e'
+
+
+.fi-bold:before
+ content'\e01f'
+
+
+.fi-bolt:before
+ content'\e020'
+
+
+.fi-book:before
+ content'\e021'
+
+
+.fi-bookmark:before
+ content'\e022'
+
+
+.fi-box:before
+ content'\e023'
+
+
+.fi-briefcase:before
+ content'\e024'
+
+
+.fi-british-pound:before
+ content'\e025'
+
+
+.fi-browser:before
+ content'\e026'
+
+
+.fi-brush:before
+ content'\e027'
+
+
+.fi-bug:before
+ content'\e028'
+
+
+.fi-bullhorn:before
+ content'\e029'
+
+
+.fi-calculator:before
+ content'\e02a'
+
+
+.fi-calendar:before
+ content'\e02b'
+
+
+.fi-camera-slr:before
+ content'\e02c'
+
+
+.fi-caret-bottom:before
+ content'\e02d'
+
+
+.fi-caret-left:before
+ content'\e02e'
+
+
+.fi-caret-right:before
+ content'\e02f'
+
+
+.fi-caret-top:before
+ content'\e030'
+
+
+.fi-cart:before
+ content'\e031'
+
+
+.fi-chat:before
+ content'\e032'
+
+
+.fi-check:before
+ content'\e033'
+
+
+.fi-chevron-bottom:before
+ content'\e034'
+
+
+.fi-chevron-left:before
+ content'\e035'
+
+
+.fi-chevron-right:before
+ content'\e036'
+
+
+.fi-chevron-top:before
+ content'\e037'
+
+
+.fi-circle-check:before
+ content'\e038'
+
+
+.fi-circle-x:before
+ content'\e039'
+
+
+.fi-clipboard:before
+ content'\e03a'
+
+
+.fi-clock:before
+ content'\e03b'
+
+
+.fi-cloud-download:before
+ content'\e03c'
+
+
+.fi-cloud-upload:before
+ content'\e03d'
+
+
+.fi-cloud:before
+ content'\e03e'
+
+
+.fi-cloudy:before
+ content'\e03f'
+
+
+.fi-code:before
+ content'\e040'
+
+
+.fi-cog:before
+ content'\e041'
+
+
+.fi-collapse-down:before
+ content'\e042'
+
+
+.fi-collapse-left:before
+ content'\e043'
+
+
+.fi-collapse-right:before
+ content'\e044'
+
+
+.fi-collapse-up:before
+ content'\e045'
+
+
+.fi-command:before
+ content'\e046'
+
+
+.fi-comment-square:before
+ content'\e047'
+
+
+.fi-compass:before
+ content'\e048'
+
+
+.fi-contrast:before
+ content'\e049'
+
+
+.fi-copywriting:before
+ content'\e04a'
+
+
+.fi-credit-card:before
+ content'\e04b'
+
+
+.fi-crop:before
+ content'\e04c'
+
+
+.fi-dashboard:before
+ content'\e04d'
+
+
+.fi-data-transfer-download:before
+ content'\e04e'
+
+
+.fi-data-transfer-upload:before
+ content'\e04f'
+
+
+.fi-delete:before
+ content'\e050'
+
+
+.fi-dial:before
+ content'\e051'
+
+
+.fi-document:before
+ content'\e052'
+
+
+.fi-dollar:before
+ content'\e053'
+
+
+.fi-double-quote-sans-left:before
+ content'\e054'
+
+
+.fi-double-quote-sans-right:before
+ content'\e055'
+
+
+.fi-double-quote-serif-left:before
+ content'\e056'
+
+
+.fi-double-quote-serif-right:before
+ content'\e057'
+
+
+.fi-droplet:before
+ content'\e058'
+
+
+.fi-eject:before
+ content'\e059'
+
+
+.fi-elevator:before
+ content'\e05a'
+
+
+.fi-ellipses:before
+ content'\e05b'
+
+
+.fi-envelope-closed:before
+ content'\e05c'
+
+
+.fi-envelope-open:before
+ content'\e05d'
+
+
+.fi-euro:before
+ content'\e05e'
+
+
+.fi-excerpt:before
+ content'\e05f'
+
+
+.fi-expand-down:before
+ content'\e060'
+
+
+.fi-expand-left:before
+ content'\e061'
+
+
+.fi-expand-right:before
+ content'\e062'
+
+
+.fi-expand-up:before
+ content'\e063'
+
+
+.fi-external-link:before
+ content'\e064'
+
+
+.fi-eye:before
+ content'\e065'
+
+
+.fi-eyedropper:before
+ content'\e066'
+
+
+.fi-file:before
+ content'\e067'
+
+
+.fi-fire:before
+ content'\e068'
+
+
+.fi-flag:before
+ content'\e069'
+
+
+.fi-flash:before
+ content'\e06a'
+
+
+.fi-folder:before
+ content'\e06b'
+
+
+.fi-fork:before
+ content'\e06c'
+
+
+.fi-fullscreen-enter:before
+ content'\e06d'
+
+
+.fi-fullscreen-exit:before
+ content'\e06e'
+
+
+.fi-globe:before
+ content'\e06f'
+
+
+.fi-graph:before
+ content'\e070'
+
+
+.fi-grid-four-up:before
+ content'\e071'
+
+
+.fi-grid-three-up:before
+ content'\e072'
+
+
+.fi-grid-two-up:before
+ content'\e073'
+
+
+.fi-hard-drive:before
+ content'\e074'
+
+
+.fi-header:before
+ content'\e075'
+
+
+.fi-headphones:before
+ content'\e076'
+
+
+.fi-heart:before
+ content'\e077'
+
+
+.fi-home:before
+ content'\e078'
+
+
+.fi-image:before
+ content'\e079'
+
+
+.fi-inbox:before
+ content'\e07a'
+
+
+.fi-infinity:before
+ content'\e07b'
+
+
+.fi-info:before
+ content'\e07c'
+
+
+.fi-italic:before
+ content'\e07d'
+
+
+.fi-justify-center:before
+ content'\e07e'
+
+
+.fi-justify-left:before
+ content'\e07f'
+
+
+.fi-justify-right:before
+ content'\e080'
+
+
+.fi-key:before
+ content'\e081'
+
+
+.fi-laptop:before
+ content'\e082'
+
+
+.fi-layers:before
+ content'\e083'
+
+
+.fi-lightbulb:before
+ content'\e084'
+
+
+.fi-link-broken:before
+ content'\e085'
+
+
+.fi-link-intact:before
+ content'\e086'
+
+
+.fi-list-rich:before
+ content'\e087'
+
+
+.fi-list:before
+ content'\e088'
+
+
+.fi-location:before
+ content'\e089'
+
+
+.fi-lock-locked:before
+ content'\e08a'
+
+
+.fi-lock-unlocked:before
+ content'\e08b'
+
+
+.fi-loop-circular:before
+ content'\e08c'
+
+
+.fi-loop-square:before
+ content'\e08d'
+
+
+.fi-loop:before
+ content'\e08e'
+
+
+.fi-magnifying-glass:before
+ content'\e08f'
+
+
+.fi-map-marker:before
+ content'\e090'
+
+
+.fi-map:before
+ content'\e091'
+
+
+.fi-media-pause:before
+ content'\e092'
+
+
+.fi-media-play:before
+ content'\e093'
+
+
+.fi-media-record:before
+ content'\e094'
+
+
+.fi-media-skip-backward:before
+ content'\e095'
+
+
+.fi-media-skip-forward:before
+ content'\e096'
+
+
+.fi-media-step-backward:before
+ content'\e097'
+
+
+.fi-media-step-forward:before
+ content'\e098'
+
+
+.fi-media-stop:before
+ content'\e099'
+
+
+.fi-medical-cross:before
+ content'\e09a'
+
+
+.fi-menu:before
+ content'\e09b'
+
+
+.fi-microphone:before
+ content'\e09c'
+
+
+.fi-minus:before
+ content'\e09d'
+
+
+.fi-monitor:before
+ content'\e09e'
+
+
+.fi-moon:before
+ content'\e09f'
+
+
+.fi-move:before
+ content'\e0a0'
+
+
+.fi-musical-note:before
+ content'\e0a1'
+
+
+.fi-paperclip:before
+ content'\e0a2'
+
+
+.fi-pencil:before
+ content'\e0a3'
+
+
+.fi-people:before
+ content'\e0a4'
+
+
+.fi-person:before
+ content'\e0a5'
+
+
+.fi-phone:before
+ content'\e0a6'
+
+
+.fi-pie-chart:before
+ content'\e0a7'
+
+
+.fi-pin:before
+ content'\e0a8'
+
+
+.fi-play-circle:before
+ content'\e0a9'
+
+
+.fi-plus:before
+ content'\e0aa'
+
+
+.fi-power-standby:before
+ content'\e0ab'
+
+
+.fi-print:before
+ content'\e0ac'
+
+
+.fi-project:before
+ content'\e0ad'
+
+
+.fi-pulse:before
+ content'\e0ae'
+
+
+.fi-puzzle-piece:before
+ content'\e0af'
+
+
+.fi-question-mark:before
+ content'\e0b0'
+
+
+.fi-rain:before
+ content'\e0b1'
+
+
+.fi-random:before
+ content'\e0b2'
+
+
+.fi-reload:before
+ content'\e0b3'
+
+
+.fi-resize-both:before
+ content'\e0b4'
+
+
+.fi-resize-height:before
+ content'\e0b5'
+
+
+.fi-resize-width:before
+ content'\e0b6'
+
+
+.fi-rss-alt:before
+ content'\e0b7'
+
+
+.fi-rss:before
+ content'\e0b8'
+
+
+.fi-script:before
+ content'\e0b9'
+
+
+.fi-share-boxed:before
+ content'\e0ba'
+
+
+.fi-share:before
+ content'\e0bb'
+
+
+.fi-shield:before
+ content'\e0bc'
+
+
+.fi-signal:before
+ content'\e0bd'
+
+
+.fi-signpost:before
+ content'\e0be'
+
+
+.fi-sort-ascending:before
+ content'\e0bf'
+
+
+.fi-sort-descending:before
+ content'\e0c0'
+
+
+.fi-spreadsheet:before
+ content'\e0c1'
+
+
+.fi-star:before
+ content'\e0c2'
+
+
+.fi-sun:before
+ content'\e0c3'
+
+
+.fi-tablet:before
+ content'\e0c4'
+
+
+.fi-tag:before
+ content'\e0c5'
+
+
+.fi-tags:before
+ content'\e0c6'
+
+
+.fi-target:before
+ content'\e0c7'
+
+
+.fi-task:before
+ content'\e0c8'
+
+
+.fi-terminal:before
+ content'\e0c9'
+
+
+.fi-text:before
+ content'\e0ca'
+
+
+.fi-thumb-down:before
+ content'\e0cb'
+
+
+.fi-thumb-up:before
+ content'\e0cc'
+
+
+.fi-timer:before
+ content'\e0cd'
+
+
+.fi-transfer:before
+ content'\e0ce'
+
+
+.fi-trash:before
+ content'\e0cf'
+
+
+.fi-underline:before
+ content'\e0d0'
+
+
+.fi-vertical-align-bottom:before
+ content'\e0d1'
+
+
+.fi-vertical-align-center:before
+ content'\e0d2'
+
+
+.fi-vertical-align-top:before
+ content'\e0d3'
+
+
+.fi-video:before
+ content'\e0d4'
+
+
+.fi-volume-high:before
+ content'\e0d5'
+
+
+.fi-volume-low:before
+ content'\e0d6'
+
+
+.fi-volume-off:before
+ content'\e0d7'
+
+
+.fi-warning:before
+ content'\e0d8'
+
+
+.fi-wifi:before
+ content'\e0d9'
+
+
+.fi-wrench:before
+ content'\e0da'
+
+
+.fi-x:before
+ content'\e0db'
+
+
+.fi-yen:before
+ content'\e0dc'
+
+
+.fi-zoom-in:before
+ content'\e0dd'
+
+
+.fi-zoom-out:before
+ content'\e0de'
+
+
diff --git a/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic.css b/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic.css
new file mode 100644
index 0000000..301a138
--- /dev/null
+++ b/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic.css
@@ -0,0 +1,511 @@
+
+@font-face {
+ font-family: 'Icons';
+ src: url('../fonts/open-iconic.eot');
+ src: url('../fonts/open-iconic.eot?#iconic-sm') format('embedded-opentype'), url('../fonts/open-iconic.woff') format('woff'), url('../fonts/open-iconic.ttf') format('truetype'), url('../fonts/open-iconic.otf') format('opentype'), url('../fonts/open-iconic.svg#iconic-sm') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+.oi[data-glyph].oi-text-replace {
+ font-size: 0;
+ line-height: 0;
+}
+
+.oi[data-glyph].oi-text-replace:before {
+ width: 1em;
+ text-align: center;
+}
+
+.oi[data-glyph]:before {
+ font-family: 'Icons';
+ display: inline-block;
+ speak: none;
+ line-height: 1;
+ vertical-align: baseline;
+ font-weight: normal;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+.oi[data-glyph]:empty:before {
+ width: 1em;
+ text-align: center;
+ box-sizing: content-box;
+}
+
+.oi[data-glyph].oi-align-left:before {
+ text-align: left;
+}
+
+.oi[data-glyph].oi-align-right:before {
+ text-align: right;
+}
+
+.oi[data-glyph].oi-align-center:before {
+ text-align: center;
+}
+
+.oi[data-glyph].oi-flip-horizontal:before {
+ -webkit-transform: scale(-1, 1);
+ -ms-transform: scale(-1, 1);
+ transform: scale(-1, 1);
+}
+.oi[data-glyph].oi-flip-vertical:before {
+ -webkit-transform: scale(1, -1);
+ -ms-transform: scale(-1, 1);
+ transform: scale(1, -1);
+}
+.oi[data-glyph].oi-flip-horizontal-vertical:before {
+ -webkit-transform: scale(-1, -1);
+ -ms-transform: scale(-1, 1);
+ transform: scale(-1, -1);
+}
+
+
+.oi[data-glyph=account-login]:before { content:'\e000'; }
+
+.oi[data-glyph=account-logout]:before { content:'\e001'; }
+
+.oi[data-glyph=action-redo]:before { content:'\e002'; }
+
+.oi[data-glyph=action-undo]:before { content:'\e003'; }
+
+.oi[data-glyph=align-center]:before { content:'\e004'; }
+
+.oi[data-glyph=align-left]:before { content:'\e005'; }
+
+.oi[data-glyph=align-right]:before { content:'\e006'; }
+
+.oi[data-glyph=aperture]:before { content:'\e007'; }
+
+.oi[data-glyph=arrow-bottom]:before { content:'\e008'; }
+
+.oi[data-glyph=arrow-circle-bottom]:before { content:'\e009'; }
+
+.oi[data-glyph=arrow-circle-left]:before { content:'\e00a'; }
+
+.oi[data-glyph=arrow-circle-right]:before { content:'\e00b'; }
+
+.oi[data-glyph=arrow-circle-top]:before { content:'\e00c'; }
+
+.oi[data-glyph=arrow-left]:before { content:'\e00d'; }
+
+.oi[data-glyph=arrow-right]:before { content:'\e00e'; }
+
+.oi[data-glyph=arrow-thick-bottom]:before { content:'\e00f'; }
+
+.oi[data-glyph=arrow-thick-left]:before { content:'\e010'; }
+
+.oi[data-glyph=arrow-thick-right]:before { content:'\e011'; }
+
+.oi[data-glyph=arrow-thick-top]:before { content:'\e012'; }
+
+.oi[data-glyph=arrow-top]:before { content:'\e013'; }
+
+.oi[data-glyph=audio-spectrum]:before { content:'\e014'; }
+
+.oi[data-glyph=audio]:before { content:'\e015'; }
+
+.oi[data-glyph=badge]:before { content:'\e016'; }
+
+.oi[data-glyph=ban]:before { content:'\e017'; }
+
+.oi[data-glyph=bar-chart]:before { content:'\e018'; }
+
+.oi[data-glyph=basket]:before { content:'\e019'; }
+
+.oi[data-glyph=battery-empty]:before { content:'\e01a'; }
+
+.oi[data-glyph=battery-full]:before { content:'\e01b'; }
+
+.oi[data-glyph=beaker]:before { content:'\e01c'; }
+
+.oi[data-glyph=bell]:before { content:'\e01d'; }
+
+.oi[data-glyph=bluetooth]:before { content:'\e01e'; }
+
+.oi[data-glyph=bold]:before { content:'\e01f'; }
+
+.oi[data-glyph=bolt]:before { content:'\e020'; }
+
+.oi[data-glyph=book]:before { content:'\e021'; }
+
+.oi[data-glyph=bookmark]:before { content:'\e022'; }
+
+.oi[data-glyph=box]:before { content:'\e023'; }
+
+.oi[data-glyph=briefcase]:before { content:'\e024'; }
+
+.oi[data-glyph=british-pound]:before { content:'\e025'; }
+
+.oi[data-glyph=browser]:before { content:'\e026'; }
+
+.oi[data-glyph=brush]:before { content:'\e027'; }
+
+.oi[data-glyph=bug]:before { content:'\e028'; }
+
+.oi[data-glyph=bullhorn]:before { content:'\e029'; }
+
+.oi[data-glyph=calculator]:before { content:'\e02a'; }
+
+.oi[data-glyph=calendar]:before { content:'\e02b'; }
+
+.oi[data-glyph=camera-slr]:before { content:'\e02c'; }
+
+.oi[data-glyph=caret-bottom]:before { content:'\e02d'; }
+
+.oi[data-glyph=caret-left]:before { content:'\e02e'; }
+
+.oi[data-glyph=caret-right]:before { content:'\e02f'; }
+
+.oi[data-glyph=caret-top]:before { content:'\e030'; }
+
+.oi[data-glyph=cart]:before { content:'\e031'; }
+
+.oi[data-glyph=chat]:before { content:'\e032'; }
+
+.oi[data-glyph=check]:before { content:'\e033'; }
+
+.oi[data-glyph=chevron-bottom]:before { content:'\e034'; }
+
+.oi[data-glyph=chevron-left]:before { content:'\e035'; }
+
+.oi[data-glyph=chevron-right]:before { content:'\e036'; }
+
+.oi[data-glyph=chevron-top]:before { content:'\e037'; }
+
+.oi[data-glyph=circle-check]:before { content:'\e038'; }
+
+.oi[data-glyph=circle-x]:before { content:'\e039'; }
+
+.oi[data-glyph=clipboard]:before { content:'\e03a'; }
+
+.oi[data-glyph=clock]:before { content:'\e03b'; }
+
+.oi[data-glyph=cloud-download]:before { content:'\e03c'; }
+
+.oi[data-glyph=cloud-upload]:before { content:'\e03d'; }
+
+.oi[data-glyph=cloud]:before { content:'\e03e'; }
+
+.oi[data-glyph=cloudy]:before { content:'\e03f'; }
+
+.oi[data-glyph=code]:before { content:'\e040'; }
+
+.oi[data-glyph=cog]:before { content:'\e041'; }
+
+.oi[data-glyph=collapse-down]:before { content:'\e042'; }
+
+.oi[data-glyph=collapse-left]:before { content:'\e043'; }
+
+.oi[data-glyph=collapse-right]:before { content:'\e044'; }
+
+.oi[data-glyph=collapse-up]:before { content:'\e045'; }
+
+.oi[data-glyph=command]:before { content:'\e046'; }
+
+.oi[data-glyph=comment-square]:before { content:'\e047'; }
+
+.oi[data-glyph=compass]:before { content:'\e048'; }
+
+.oi[data-glyph=contrast]:before { content:'\e049'; }
+
+.oi[data-glyph=copywriting]:before { content:'\e04a'; }
+
+.oi[data-glyph=credit-card]:before { content:'\e04b'; }
+
+.oi[data-glyph=crop]:before { content:'\e04c'; }
+
+.oi[data-glyph=dashboard]:before { content:'\e04d'; }
+
+.oi[data-glyph=data-transfer-download]:before { content:'\e04e'; }
+
+.oi[data-glyph=data-transfer-upload]:before { content:'\e04f'; }
+
+.oi[data-glyph=delete]:before { content:'\e050'; }
+
+.oi[data-glyph=dial]:before { content:'\e051'; }
+
+.oi[data-glyph=document]:before { content:'\e052'; }
+
+.oi[data-glyph=dollar]:before { content:'\e053'; }
+
+.oi[data-glyph=double-quote-sans-left]:before { content:'\e054'; }
+
+.oi[data-glyph=double-quote-sans-right]:before { content:'\e055'; }
+
+.oi[data-glyph=double-quote-serif-left]:before { content:'\e056'; }
+
+.oi[data-glyph=double-quote-serif-right]:before { content:'\e057'; }
+
+.oi[data-glyph=droplet]:before { content:'\e058'; }
+
+.oi[data-glyph=eject]:before { content:'\e059'; }
+
+.oi[data-glyph=elevator]:before { content:'\e05a'; }
+
+.oi[data-glyph=ellipses]:before { content:'\e05b'; }
+
+.oi[data-glyph=envelope-closed]:before { content:'\e05c'; }
+
+.oi[data-glyph=envelope-open]:before { content:'\e05d'; }
+
+.oi[data-glyph=euro]:before { content:'\e05e'; }
+
+.oi[data-glyph=excerpt]:before { content:'\e05f'; }
+
+.oi[data-glyph=expand-down]:before { content:'\e060'; }
+
+.oi[data-glyph=expand-left]:before { content:'\e061'; }
+
+.oi[data-glyph=expand-right]:before { content:'\e062'; }
+
+.oi[data-glyph=expand-up]:before { content:'\e063'; }
+
+.oi[data-glyph=external-link]:before { content:'\e064'; }
+
+.oi[data-glyph=eye]:before { content:'\e065'; }
+
+.oi[data-glyph=eyedropper]:before { content:'\e066'; }
+
+.oi[data-glyph=file]:before { content:'\e067'; }
+
+.oi[data-glyph=fire]:before { content:'\e068'; }
+
+.oi[data-glyph=flag]:before { content:'\e069'; }
+
+.oi[data-glyph=flash]:before { content:'\e06a'; }
+
+.oi[data-glyph=folder]:before { content:'\e06b'; }
+
+.oi[data-glyph=fork]:before { content:'\e06c'; }
+
+.oi[data-glyph=fullscreen-enter]:before { content:'\e06d'; }
+
+.oi[data-glyph=fullscreen-exit]:before { content:'\e06e'; }
+
+.oi[data-glyph=globe]:before { content:'\e06f'; }
+
+.oi[data-glyph=graph]:before { content:'\e070'; }
+
+.oi[data-glyph=grid-four-up]:before { content:'\e071'; }
+
+.oi[data-glyph=grid-three-up]:before { content:'\e072'; }
+
+.oi[data-glyph=grid-two-up]:before { content:'\e073'; }
+
+.oi[data-glyph=hard-drive]:before { content:'\e074'; }
+
+.oi[data-glyph=header]:before { content:'\e075'; }
+
+.oi[data-glyph=headphones]:before { content:'\e076'; }
+
+.oi[data-glyph=heart]:before { content:'\e077'; }
+
+.oi[data-glyph=home]:before { content:'\e078'; }
+
+.oi[data-glyph=image]:before { content:'\e079'; }
+
+.oi[data-glyph=inbox]:before { content:'\e07a'; }
+
+.oi[data-glyph=infinity]:before { content:'\e07b'; }
+
+.oi[data-glyph=info]:before { content:'\e07c'; }
+
+.oi[data-glyph=italic]:before { content:'\e07d'; }
+
+.oi[data-glyph=justify-center]:before { content:'\e07e'; }
+
+.oi[data-glyph=justify-left]:before { content:'\e07f'; }
+
+.oi[data-glyph=justify-right]:before { content:'\e080'; }
+
+.oi[data-glyph=key]:before { content:'\e081'; }
+
+.oi[data-glyph=laptop]:before { content:'\e082'; }
+
+.oi[data-glyph=layers]:before { content:'\e083'; }
+
+.oi[data-glyph=lightbulb]:before { content:'\e084'; }
+
+.oi[data-glyph=link-broken]:before { content:'\e085'; }
+
+.oi[data-glyph=link-intact]:before { content:'\e086'; }
+
+.oi[data-glyph=list-rich]:before { content:'\e087'; }
+
+.oi[data-glyph=list]:before { content:'\e088'; }
+
+.oi[data-glyph=location]:before { content:'\e089'; }
+
+.oi[data-glyph=lock-locked]:before { content:'\e08a'; }
+
+.oi[data-glyph=lock-unlocked]:before { content:'\e08b'; }
+
+.oi[data-glyph=loop-circular]:before { content:'\e08c'; }
+
+.oi[data-glyph=loop-square]:before { content:'\e08d'; }
+
+.oi[data-glyph=loop]:before { content:'\e08e'; }
+
+.oi[data-glyph=magnifying-glass]:before { content:'\e08f'; }
+
+.oi[data-glyph=map-marker]:before { content:'\e090'; }
+
+.oi[data-glyph=map]:before { content:'\e091'; }
+
+.oi[data-glyph=media-pause]:before { content:'\e092'; }
+
+.oi[data-glyph=media-play]:before { content:'\e093'; }
+
+.oi[data-glyph=media-record]:before { content:'\e094'; }
+
+.oi[data-glyph=media-skip-backward]:before { content:'\e095'; }
+
+.oi[data-glyph=media-skip-forward]:before { content:'\e096'; }
+
+.oi[data-glyph=media-step-backward]:before { content:'\e097'; }
+
+.oi[data-glyph=media-step-forward]:before { content:'\e098'; }
+
+.oi[data-glyph=media-stop]:before { content:'\e099'; }
+
+.oi[data-glyph=medical-cross]:before { content:'\e09a'; }
+
+.oi[data-glyph=menu]:before { content:'\e09b'; }
+
+.oi[data-glyph=microphone]:before { content:'\e09c'; }
+
+.oi[data-glyph=minus]:before { content:'\e09d'; }
+
+.oi[data-glyph=monitor]:before { content:'\e09e'; }
+
+.oi[data-glyph=moon]:before { content:'\e09f'; }
+
+.oi[data-glyph=move]:before { content:'\e0a0'; }
+
+.oi[data-glyph=musical-note]:before { content:'\e0a1'; }
+
+.oi[data-glyph=paperclip]:before { content:'\e0a2'; }
+
+.oi[data-glyph=pencil]:before { content:'\e0a3'; }
+
+.oi[data-glyph=people]:before { content:'\e0a4'; }
+
+.oi[data-glyph=person]:before { content:'\e0a5'; }
+
+.oi[data-glyph=phone]:before { content:'\e0a6'; }
+
+.oi[data-glyph=pie-chart]:before { content:'\e0a7'; }
+
+.oi[data-glyph=pin]:before { content:'\e0a8'; }
+
+.oi[data-glyph=play-circle]:before { content:'\e0a9'; }
+
+.oi[data-glyph=plus]:before { content:'\e0aa'; }
+
+.oi[data-glyph=power-standby]:before { content:'\e0ab'; }
+
+.oi[data-glyph=print]:before { content:'\e0ac'; }
+
+.oi[data-glyph=project]:before { content:'\e0ad'; }
+
+.oi[data-glyph=pulse]:before { content:'\e0ae'; }
+
+.oi[data-glyph=puzzle-piece]:before { content:'\e0af'; }
+
+.oi[data-glyph=question-mark]:before { content:'\e0b0'; }
+
+.oi[data-glyph=rain]:before { content:'\e0b1'; }
+
+.oi[data-glyph=random]:before { content:'\e0b2'; }
+
+.oi[data-glyph=reload]:before { content:'\e0b3'; }
+
+.oi[data-glyph=resize-both]:before { content:'\e0b4'; }
+
+.oi[data-glyph=resize-height]:before { content:'\e0b5'; }
+
+.oi[data-glyph=resize-width]:before { content:'\e0b6'; }
+
+.oi[data-glyph=rss-alt]:before { content:'\e0b7'; }
+
+.oi[data-glyph=rss]:before { content:'\e0b8'; }
+
+.oi[data-glyph=script]:before { content:'\e0b9'; }
+
+.oi[data-glyph=share-boxed]:before { content:'\e0ba'; }
+
+.oi[data-glyph=share]:before { content:'\e0bb'; }
+
+.oi[data-glyph=shield]:before { content:'\e0bc'; }
+
+.oi[data-glyph=signal]:before { content:'\e0bd'; }
+
+.oi[data-glyph=signpost]:before { content:'\e0be'; }
+
+.oi[data-glyph=sort-ascending]:before { content:'\e0bf'; }
+
+.oi[data-glyph=sort-descending]:before { content:'\e0c0'; }
+
+.oi[data-glyph=spreadsheet]:before { content:'\e0c1'; }
+
+.oi[data-glyph=star]:before { content:'\e0c2'; }
+
+.oi[data-glyph=sun]:before { content:'\e0c3'; }
+
+.oi[data-glyph=tablet]:before { content:'\e0c4'; }
+
+.oi[data-glyph=tag]:before { content:'\e0c5'; }
+
+.oi[data-glyph=tags]:before { content:'\e0c6'; }
+
+.oi[data-glyph=target]:before { content:'\e0c7'; }
+
+.oi[data-glyph=task]:before { content:'\e0c8'; }
+
+.oi[data-glyph=terminal]:before { content:'\e0c9'; }
+
+.oi[data-glyph=text]:before { content:'\e0ca'; }
+
+.oi[data-glyph=thumb-down]:before { content:'\e0cb'; }
+
+.oi[data-glyph=thumb-up]:before { content:'\e0cc'; }
+
+.oi[data-glyph=timer]:before { content:'\e0cd'; }
+
+.oi[data-glyph=transfer]:before { content:'\e0ce'; }
+
+.oi[data-glyph=trash]:before { content:'\e0cf'; }
+
+.oi[data-glyph=underline]:before { content:'\e0d0'; }
+
+.oi[data-glyph=vertical-align-bottom]:before { content:'\e0d1'; }
+
+.oi[data-glyph=vertical-align-center]:before { content:'\e0d2'; }
+
+.oi[data-glyph=vertical-align-top]:before { content:'\e0d3'; }
+
+.oi[data-glyph=video]:before { content:'\e0d4'; }
+
+.oi[data-glyph=volume-high]:before { content:'\e0d5'; }
+
+.oi[data-glyph=volume-low]:before { content:'\e0d6'; }
+
+.oi[data-glyph=volume-off]:before { content:'\e0d7'; }
+
+.oi[data-glyph=warning]:before { content:'\e0d8'; }
+
+.oi[data-glyph=wifi]:before { content:'\e0d9'; }
+
+.oi[data-glyph=wrench]:before { content:'\e0da'; }
+
+.oi[data-glyph=x]:before { content:'\e0db'; }
+
+.oi[data-glyph=yen]:before { content:'\e0dc'; }
+
+.oi[data-glyph=zoom-in]:before { content:'\e0dd'; }
+
+.oi[data-glyph=zoom-out]:before { content:'\e0de'; }
diff --git a/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic.less b/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic.less
new file mode 100644
index 0000000..d505e9f
--- /dev/null
+++ b/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic.less
@@ -0,0 +1,962 @@
+@iconic-font-path: '../fonts/';
+
+@font-face {
+ font-family: 'Icons';
+ src: url('@{iconic-font-path}open-iconic.eot');
+ src: url('@{iconic-font-path}open-iconic.eot?#iconic-sm') format('embedded-opentype'), url('@{iconic-font-path}open-iconic.woff') format('woff'), url('@{iconic-font-path}open-iconic.ttf') format('truetype'), url('@{iconic-font-path}open-iconic.otf') format('opentype'), url('@{iconic-font-path}open-iconic.svg#iconic-sm') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+.oi[data-glyph].oi-text-replace {
+ font-size: 0;
+ line-height: 0;
+}
+
+.oi[data-glyph].oi-text-replace:before {
+ width: 1em;
+ text-align: center;
+}
+
+.oi[data-glyph] {
+ &:before {
+ position: relative;
+ top: 1px;
+ font-family: 'Icons';
+ display: inline-block;
+ speak: none;
+ line-height: 1;
+ vertical-align: baseline;
+ font-weight: normal;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+
+ &:empty:before {
+ width: 1em;
+ text-align: center;
+ box-sizing: content-box;
+ }
+
+ &.oi-align-left:before {
+ text-align: left;
+ }
+ &.oi-align-right:before {
+ text-align: right;
+ }
+ &.oi-align-center:before {
+ text-align: center;
+ }
+
+ &.oi-flip-horizontal:before {
+ -webkit-transform: scale(-1, 1);
+ -ms-transform: scale(-1, 1);
+ transform: scale(-1, 1);
+ }
+
+ &.oi-flip-vertical:before {
+ -webkit-transform: scale(1, -1);
+ -ms-transform: scale(-1, 1);
+ transform: scale(1, -1);
+ }
+
+ &.oi-flip-horizontal-vertical:before {
+ -webkit-transform: scale(-1, -1);
+ -ms-transform: scale(-1, 1);
+ transform: scale(-1, -1);
+ }
+}
+
+
+.oi[data-glyph=account-login]:before {
+ content: '\e000';
+}
+
+.oi[data-glyph=account-logout]:before {
+ content: '\e001';
+}
+
+.oi[data-glyph=action-redo]:before {
+ content: '\e002';
+}
+
+.oi[data-glyph=action-undo]:before {
+ content: '\e003';
+}
+
+.oi[data-glyph=align-center]:before {
+ content: '\e004';
+}
+
+.oi[data-glyph=align-left]:before {
+ content: '\e005';
+}
+
+.oi[data-glyph=align-right]:before {
+ content: '\e006';
+}
+
+.oi[data-glyph=aperture]:before {
+ content: '\e007';
+}
+
+.oi[data-glyph=arrow-bottom]:before {
+ content: '\e008';
+}
+
+.oi[data-glyph=arrow-circle-bottom]:before {
+ content: '\e009';
+}
+
+.oi[data-glyph=arrow-circle-left]:before {
+ content: '\e00a';
+}
+
+.oi[data-glyph=arrow-circle-right]:before {
+ content: '\e00b';
+}
+
+.oi[data-glyph=arrow-circle-top]:before {
+ content: '\e00c';
+}
+
+.oi[data-glyph=arrow-left]:before {
+ content: '\e00d';
+}
+
+.oi[data-glyph=arrow-right]:before {
+ content: '\e00e';
+}
+
+.oi[data-glyph=arrow-thick-bottom]:before {
+ content: '\e00f';
+}
+
+.oi[data-glyph=arrow-thick-left]:before {
+ content: '\e010';
+}
+
+.oi[data-glyph=arrow-thick-right]:before {
+ content: '\e011';
+}
+
+.oi[data-glyph=arrow-thick-top]:before {
+ content: '\e012';
+}
+
+.oi[data-glyph=arrow-top]:before {
+ content: '\e013';
+}
+
+.oi[data-glyph=audio-spectrum]:before {
+ content: '\e014';
+}
+
+.oi[data-glyph=audio]:before {
+ content: '\e015';
+}
+
+.oi[data-glyph=badge]:before {
+ content: '\e016';
+}
+
+.oi[data-glyph=ban]:before {
+ content: '\e017';
+}
+
+.oi[data-glyph=bar-chart]:before {
+ content: '\e018';
+}
+
+.oi[data-glyph=basket]:before {
+ content: '\e019';
+}
+
+.oi[data-glyph=battery-empty]:before {
+ content: '\e01a';
+}
+
+.oi[data-glyph=battery-full]:before {
+ content: '\e01b';
+}
+
+.oi[data-glyph=beaker]:before {
+ content: '\e01c';
+}
+
+.oi[data-glyph=bell]:before {
+ content: '\e01d';
+}
+
+.oi[data-glyph=bluetooth]:before {
+ content: '\e01e';
+}
+
+.oi[data-glyph=bold]:before {
+ content: '\e01f';
+}
+
+.oi[data-glyph=bolt]:before {
+ content: '\e020';
+}
+
+.oi[data-glyph=book]:before {
+ content: '\e021';
+}
+
+.oi[data-glyph=bookmark]:before {
+ content: '\e022';
+}
+
+.oi[data-glyph=box]:before {
+ content: '\e023';
+}
+
+.oi[data-glyph=briefcase]:before {
+ content: '\e024';
+}
+
+.oi[data-glyph=british-pound]:before {
+ content: '\e025';
+}
+
+.oi[data-glyph=browser]:before {
+ content: '\e026';
+}
+
+.oi[data-glyph=brush]:before {
+ content: '\e027';
+}
+
+.oi[data-glyph=bug]:before {
+ content: '\e028';
+}
+
+.oi[data-glyph=bullhorn]:before {
+ content: '\e029';
+}
+
+.oi[data-glyph=calculator]:before {
+ content: '\e02a';
+}
+
+.oi[data-glyph=calendar]:before {
+ content: '\e02b';
+}
+
+.oi[data-glyph=camera-slr]:before {
+ content: '\e02c';
+}
+
+.oi[data-glyph=caret-bottom]:before {
+ content: '\e02d';
+}
+
+.oi[data-glyph=caret-left]:before {
+ content: '\e02e';
+}
+
+.oi[data-glyph=caret-right]:before {
+ content: '\e02f';
+}
+
+.oi[data-glyph=caret-top]:before {
+ content: '\e030';
+}
+
+.oi[data-glyph=cart]:before {
+ content: '\e031';
+}
+
+.oi[data-glyph=chat]:before {
+ content: '\e032';
+}
+
+.oi[data-glyph=check]:before {
+ content: '\e033';
+}
+
+.oi[data-glyph=chevron-bottom]:before {
+ content: '\e034';
+}
+
+.oi[data-glyph=chevron-left]:before {
+ content: '\e035';
+}
+
+.oi[data-glyph=chevron-right]:before {
+ content: '\e036';
+}
+
+.oi[data-glyph=chevron-top]:before {
+ content: '\e037';
+}
+
+.oi[data-glyph=circle-check]:before {
+ content: '\e038';
+}
+
+.oi[data-glyph=circle-x]:before {
+ content: '\e039';
+}
+
+.oi[data-glyph=clipboard]:before {
+ content: '\e03a';
+}
+
+.oi[data-glyph=clock]:before {
+ content: '\e03b';
+}
+
+.oi[data-glyph=cloud-download]:before {
+ content: '\e03c';
+}
+
+.oi[data-glyph=cloud-upload]:before {
+ content: '\e03d';
+}
+
+.oi[data-glyph=cloud]:before {
+ content: '\e03e';
+}
+
+.oi[data-glyph=cloudy]:before {
+ content: '\e03f';
+}
+
+.oi[data-glyph=code]:before {
+ content: '\e040';
+}
+
+.oi[data-glyph=cog]:before {
+ content: '\e041';
+}
+
+.oi[data-glyph=collapse-down]:before {
+ content: '\e042';
+}
+
+.oi[data-glyph=collapse-left]:before {
+ content: '\e043';
+}
+
+.oi[data-glyph=collapse-right]:before {
+ content: '\e044';
+}
+
+.oi[data-glyph=collapse-up]:before {
+ content: '\e045';
+}
+
+.oi[data-glyph=command]:before {
+ content: '\e046';
+}
+
+.oi[data-glyph=comment-square]:before {
+ content: '\e047';
+}
+
+.oi[data-glyph=compass]:before {
+ content: '\e048';
+}
+
+.oi[data-glyph=contrast]:before {
+ content: '\e049';
+}
+
+.oi[data-glyph=copywriting]:before {
+ content: '\e04a';
+}
+
+.oi[data-glyph=credit-card]:before {
+ content: '\e04b';
+}
+
+.oi[data-glyph=crop]:before {
+ content: '\e04c';
+}
+
+.oi[data-glyph=dashboard]:before {
+ content: '\e04d';
+}
+
+.oi[data-glyph=data-transfer-download]:before {
+ content: '\e04e';
+}
+
+.oi[data-glyph=data-transfer-upload]:before {
+ content: '\e04f';
+}
+
+.oi[data-glyph=delete]:before {
+ content: '\e050';
+}
+
+.oi[data-glyph=dial]:before {
+ content: '\e051';
+}
+
+.oi[data-glyph=document]:before {
+ content: '\e052';
+}
+
+.oi[data-glyph=dollar]:before {
+ content: '\e053';
+}
+
+.oi[data-glyph=double-quote-sans-left]:before {
+ content: '\e054';
+}
+
+.oi[data-glyph=double-quote-sans-right]:before {
+ content: '\e055';
+}
+
+.oi[data-glyph=double-quote-serif-left]:before {
+ content: '\e056';
+}
+
+.oi[data-glyph=double-quote-serif-right]:before {
+ content: '\e057';
+}
+
+.oi[data-glyph=droplet]:before {
+ content: '\e058';
+}
+
+.oi[data-glyph=eject]:before {
+ content: '\e059';
+}
+
+.oi[data-glyph=elevator]:before {
+ content: '\e05a';
+}
+
+.oi[data-glyph=ellipses]:before {
+ content: '\e05b';
+}
+
+.oi[data-glyph=envelope-closed]:before {
+ content: '\e05c';
+}
+
+.oi[data-glyph=envelope-open]:before {
+ content: '\e05d';
+}
+
+.oi[data-glyph=euro]:before {
+ content: '\e05e';
+}
+
+.oi[data-glyph=excerpt]:before {
+ content: '\e05f';
+}
+
+.oi[data-glyph=expand-down]:before {
+ content: '\e060';
+}
+
+.oi[data-glyph=expand-left]:before {
+ content: '\e061';
+}
+
+.oi[data-glyph=expand-right]:before {
+ content: '\e062';
+}
+
+.oi[data-glyph=expand-up]:before {
+ content: '\e063';
+}
+
+.oi[data-glyph=external-link]:before {
+ content: '\e064';
+}
+
+.oi[data-glyph=eye]:before {
+ content: '\e065';
+}
+
+.oi[data-glyph=eyedropper]:before {
+ content: '\e066';
+}
+
+.oi[data-glyph=file]:before {
+ content: '\e067';
+}
+
+.oi[data-glyph=fire]:before {
+ content: '\e068';
+}
+
+.oi[data-glyph=flag]:before {
+ content: '\e069';
+}
+
+.oi[data-glyph=flash]:before {
+ content: '\e06a';
+}
+
+.oi[data-glyph=folder]:before {
+ content: '\e06b';
+}
+
+.oi[data-glyph=fork]:before {
+ content: '\e06c';
+}
+
+.oi[data-glyph=fullscreen-enter]:before {
+ content: '\e06d';
+}
+
+.oi[data-glyph=fullscreen-exit]:before {
+ content: '\e06e';
+}
+
+.oi[data-glyph=globe]:before {
+ content: '\e06f';
+}
+
+.oi[data-glyph=graph]:before {
+ content: '\e070';
+}
+
+.oi[data-glyph=grid-four-up]:before {
+ content: '\e071';
+}
+
+.oi[data-glyph=grid-three-up]:before {
+ content: '\e072';
+}
+
+.oi[data-glyph=grid-two-up]:before {
+ content: '\e073';
+}
+
+.oi[data-glyph=hard-drive]:before {
+ content: '\e074';
+}
+
+.oi[data-glyph=header]:before {
+ content: '\e075';
+}
+
+.oi[data-glyph=headphones]:before {
+ content: '\e076';
+}
+
+.oi[data-glyph=heart]:before {
+ content: '\e077';
+}
+
+.oi[data-glyph=home]:before {
+ content: '\e078';
+}
+
+.oi[data-glyph=image]:before {
+ content: '\e079';
+}
+
+.oi[data-glyph=inbox]:before {
+ content: '\e07a';
+}
+
+.oi[data-glyph=infinity]:before {
+ content: '\e07b';
+}
+
+.oi[data-glyph=info]:before {
+ content: '\e07c';
+}
+
+.oi[data-glyph=italic]:before {
+ content: '\e07d';
+}
+
+.oi[data-glyph=justify-center]:before {
+ content: '\e07e';
+}
+
+.oi[data-glyph=justify-left]:before {
+ content: '\e07f';
+}
+
+.oi[data-glyph=justify-right]:before {
+ content: '\e080';
+}
+
+.oi[data-glyph=key]:before {
+ content: '\e081';
+}
+
+.oi[data-glyph=laptop]:before {
+ content: '\e082';
+}
+
+.oi[data-glyph=layers]:before {
+ content: '\e083';
+}
+
+.oi[data-glyph=lightbulb]:before {
+ content: '\e084';
+}
+
+.oi[data-glyph=link-broken]:before {
+ content: '\e085';
+}
+
+.oi[data-glyph=link-intact]:before {
+ content: '\e086';
+}
+
+.oi[data-glyph=list-rich]:before {
+ content: '\e087';
+}
+
+.oi[data-glyph=list]:before {
+ content: '\e088';
+}
+
+.oi[data-glyph=location]:before {
+ content: '\e089';
+}
+
+.oi[data-glyph=lock-locked]:before {
+ content: '\e08a';
+}
+
+.oi[data-glyph=lock-unlocked]:before {
+ content: '\e08b';
+}
+
+.oi[data-glyph=loop-circular]:before {
+ content: '\e08c';
+}
+
+.oi[data-glyph=loop-square]:before {
+ content: '\e08d';
+}
+
+.oi[data-glyph=loop]:before {
+ content: '\e08e';
+}
+
+.oi[data-glyph=magnifying-glass]:before {
+ content: '\e08f';
+}
+
+.oi[data-glyph=map-marker]:before {
+ content: '\e090';
+}
+
+.oi[data-glyph=map]:before {
+ content: '\e091';
+}
+
+.oi[data-glyph=media-pause]:before {
+ content: '\e092';
+}
+
+.oi[data-glyph=media-play]:before {
+ content: '\e093';
+}
+
+.oi[data-glyph=media-record]:before {
+ content: '\e094';
+}
+
+.oi[data-glyph=media-skip-backward]:before {
+ content: '\e095';
+}
+
+.oi[data-glyph=media-skip-forward]:before {
+ content: '\e096';
+}
+
+.oi[data-glyph=media-step-backward]:before {
+ content: '\e097';
+}
+
+.oi[data-glyph=media-step-forward]:before {
+ content: '\e098';
+}
+
+.oi[data-glyph=media-stop]:before {
+ content: '\e099';
+}
+
+.oi[data-glyph=medical-cross]:before {
+ content: '\e09a';
+}
+
+.oi[data-glyph=menu]:before {
+ content: '\e09b';
+}
+
+.oi[data-glyph=microphone]:before {
+ content: '\e09c';
+}
+
+.oi[data-glyph=minus]:before {
+ content: '\e09d';
+}
+
+.oi[data-glyph=monitor]:before {
+ content: '\e09e';
+}
+
+.oi[data-glyph=moon]:before {
+ content: '\e09f';
+}
+
+.oi[data-glyph=move]:before {
+ content: '\e0a0';
+}
+
+.oi[data-glyph=musical-note]:before {
+ content: '\e0a1';
+}
+
+.oi[data-glyph=paperclip]:before {
+ content: '\e0a2';
+}
+
+.oi[data-glyph=pencil]:before {
+ content: '\e0a3';
+}
+
+.oi[data-glyph=people]:before {
+ content: '\e0a4';
+}
+
+.oi[data-glyph=person]:before {
+ content: '\e0a5';
+}
+
+.oi[data-glyph=phone]:before {
+ content: '\e0a6';
+}
+
+.oi[data-glyph=pie-chart]:before {
+ content: '\e0a7';
+}
+
+.oi[data-glyph=pin]:before {
+ content: '\e0a8';
+}
+
+.oi[data-glyph=play-circle]:before {
+ content: '\e0a9';
+}
+
+.oi[data-glyph=plus]:before {
+ content: '\e0aa';
+}
+
+.oi[data-glyph=power-standby]:before {
+ content: '\e0ab';
+}
+
+.oi[data-glyph=print]:before {
+ content: '\e0ac';
+}
+
+.oi[data-glyph=project]:before {
+ content: '\e0ad';
+}
+
+.oi[data-glyph=pulse]:before {
+ content: '\e0ae';
+}
+
+.oi[data-glyph=puzzle-piece]:before {
+ content: '\e0af';
+}
+
+.oi[data-glyph=question-mark]:before {
+ content: '\e0b0';
+}
+
+.oi[data-glyph=rain]:before {
+ content: '\e0b1';
+}
+
+.oi[data-glyph=random]:before {
+ content: '\e0b2';
+}
+
+.oi[data-glyph=reload]:before {
+ content: '\e0b3';
+}
+
+.oi[data-glyph=resize-both]:before {
+ content: '\e0b4';
+}
+
+.oi[data-glyph=resize-height]:before {
+ content: '\e0b5';
+}
+
+.oi[data-glyph=resize-width]:before {
+ content: '\e0b6';
+}
+
+.oi[data-glyph=rss-alt]:before {
+ content: '\e0b7';
+}
+
+.oi[data-glyph=rss]:before {
+ content: '\e0b8';
+}
+
+.oi[data-glyph=script]:before {
+ content: '\e0b9';
+}
+
+.oi[data-glyph=share-boxed]:before {
+ content: '\e0ba';
+}
+
+.oi[data-glyph=share]:before {
+ content: '\e0bb';
+}
+
+.oi[data-glyph=shield]:before {
+ content: '\e0bc';
+}
+
+.oi[data-glyph=signal]:before {
+ content: '\e0bd';
+}
+
+.oi[data-glyph=signpost]:before {
+ content: '\e0be';
+}
+
+.oi[data-glyph=sort-ascending]:before {
+ content: '\e0bf';
+}
+
+.oi[data-glyph=sort-descending]:before {
+ content: '\e0c0';
+}
+
+.oi[data-glyph=spreadsheet]:before {
+ content: '\e0c1';
+}
+
+.oi[data-glyph=star]:before {
+ content: '\e0c2';
+}
+
+.oi[data-glyph=sun]:before {
+ content: '\e0c3';
+}
+
+.oi[data-glyph=tablet]:before {
+ content: '\e0c4';
+}
+
+.oi[data-glyph=tag]:before {
+ content: '\e0c5';
+}
+
+.oi[data-glyph=tags]:before {
+ content: '\e0c6';
+}
+
+.oi[data-glyph=target]:before {
+ content: '\e0c7';
+}
+
+.oi[data-glyph=task]:before {
+ content: '\e0c8';
+}
+
+.oi[data-glyph=terminal]:before {
+ content: '\e0c9';
+}
+
+.oi[data-glyph=text]:before {
+ content: '\e0ca';
+}
+
+.oi[data-glyph=thumb-down]:before {
+ content: '\e0cb';
+}
+
+.oi[data-glyph=thumb-up]:before {
+ content: '\e0cc';
+}
+
+.oi[data-glyph=timer]:before {
+ content: '\e0cd';
+}
+
+.oi[data-glyph=transfer]:before {
+ content: '\e0ce';
+}
+
+.oi[data-glyph=trash]:before {
+ content: '\e0cf';
+}
+
+.oi[data-glyph=underline]:before {
+ content: '\e0d0';
+}
+
+.oi[data-glyph=vertical-align-bottom]:before {
+ content: '\e0d1';
+}
+
+.oi[data-glyph=vertical-align-center]:before {
+ content: '\e0d2';
+}
+
+.oi[data-glyph=vertical-align-top]:before {
+ content: '\e0d3';
+}
+
+.oi[data-glyph=video]:before {
+ content: '\e0d4';
+}
+
+.oi[data-glyph=volume-high]:before {
+ content: '\e0d5';
+}
+
+.oi[data-glyph=volume-low]:before {
+ content: '\e0d6';
+}
+
+.oi[data-glyph=volume-off]:before {
+ content: '\e0d7';
+}
+
+.oi[data-glyph=warning]:before {
+ content: '\e0d8';
+}
+
+.oi[data-glyph=wifi]:before {
+ content: '\e0d9';
+}
+
+.oi[data-glyph=wrench]:before {
+ content: '\e0da';
+}
+
+.oi[data-glyph=x]:before {
+ content: '\e0db';
+}
+
+.oi[data-glyph=yen]:before {
+ content: '\e0dc';
+}
+
+.oi[data-glyph=zoom-in]:before {
+ content: '\e0dd';
+}
+
+.oi[data-glyph=zoom-out]:before {
+ content: '\e0de';
+}
diff --git a/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic.min.css b/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic.min.css
new file mode 100644
index 0000000..1f6afb8
--- /dev/null
+++ b/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic.min.css
@@ -0,0 +1 @@
+@font-face{font-family:Icons;src:url(../fonts/open-iconic.eot);src:url(../fonts/open-iconic.eot?#iconic-sm) format('embedded-opentype'),url(../fonts/open-iconic.woff) format('woff'),url(../fonts/open-iconic.ttf) format('truetype'),url(../fonts/open-iconic.otf) format('opentype'),url(../fonts/open-iconic.svg#iconic-sm) format('svg');font-weight:400;font-style:normal}.oi[data-glyph].oi-text-replace{font-size:0;line-height:0}.oi[data-glyph].oi-text-replace:before{width:1em;text-align:center}.oi[data-glyph]:before{font-family:Icons;display:inline-block;speak:none;line-height:1;vertical-align:baseline;font-weight:400;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.oi[data-glyph]:empty:before{width:1em;text-align:center;box-sizing:content-box}.oi[data-glyph].oi-align-left:before{text-align:left}.oi[data-glyph].oi-align-right:before{text-align:right}.oi[data-glyph].oi-align-center:before{text-align:center}.oi[data-glyph].oi-flip-horizontal:before{-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1)}.oi[data-glyph].oi-flip-vertical:before{-webkit-transform:scale(1,-1);-ms-transform:scale(-1,1);transform:scale(1,-1)}.oi[data-glyph].oi-flip-horizontal-vertical:before{-webkit-transform:scale(-1,-1);-ms-transform:scale(-1,1);transform:scale(-1,-1)}.oi[data-glyph=account-login]:before{content:'\e000'}.oi[data-glyph=account-logout]:before{content:'\e001'}.oi[data-glyph=action-redo]:before{content:'\e002'}.oi[data-glyph=action-undo]:before{content:'\e003'}.oi[data-glyph=align-center]:before{content:'\e004'}.oi[data-glyph=align-left]:before{content:'\e005'}.oi[data-glyph=align-right]:before{content:'\e006'}.oi[data-glyph=aperture]:before{content:'\e007'}.oi[data-glyph=arrow-bottom]:before{content:'\e008'}.oi[data-glyph=arrow-circle-bottom]:before{content:'\e009'}.oi[data-glyph=arrow-circle-left]:before{content:'\e00a'}.oi[data-glyph=arrow-circle-right]:before{content:'\e00b'}.oi[data-glyph=arrow-circle-top]:before{content:'\e00c'}.oi[data-glyph=arrow-left]:before{content:'\e00d'}.oi[data-glyph=arrow-right]:before{content:'\e00e'}.oi[data-glyph=arrow-thick-bottom]:before{content:'\e00f'}.oi[data-glyph=arrow-thick-left]:before{content:'\e010'}.oi[data-glyph=arrow-thick-right]:before{content:'\e011'}.oi[data-glyph=arrow-thick-top]:before{content:'\e012'}.oi[data-glyph=arrow-top]:before{content:'\e013'}.oi[data-glyph=audio-spectrum]:before{content:'\e014'}.oi[data-glyph=audio]:before{content:'\e015'}.oi[data-glyph=badge]:before{content:'\e016'}.oi[data-glyph=ban]:before{content:'\e017'}.oi[data-glyph=bar-chart]:before{content:'\e018'}.oi[data-glyph=basket]:before{content:'\e019'}.oi[data-glyph=battery-empty]:before{content:'\e01a'}.oi[data-glyph=battery-full]:before{content:'\e01b'}.oi[data-glyph=beaker]:before{content:'\e01c'}.oi[data-glyph=bell]:before{content:'\e01d'}.oi[data-glyph=bluetooth]:before{content:'\e01e'}.oi[data-glyph=bold]:before{content:'\e01f'}.oi[data-glyph=bolt]:before{content:'\e020'}.oi[data-glyph=book]:before{content:'\e021'}.oi[data-glyph=bookmark]:before{content:'\e022'}.oi[data-glyph=box]:before{content:'\e023'}.oi[data-glyph=briefcase]:before{content:'\e024'}.oi[data-glyph=british-pound]:before{content:'\e025'}.oi[data-glyph=browser]:before{content:'\e026'}.oi[data-glyph=brush]:before{content:'\e027'}.oi[data-glyph=bug]:before{content:'\e028'}.oi[data-glyph=bullhorn]:before{content:'\e029'}.oi[data-glyph=calculator]:before{content:'\e02a'}.oi[data-glyph=calendar]:before{content:'\e02b'}.oi[data-glyph=camera-slr]:before{content:'\e02c'}.oi[data-glyph=caret-bottom]:before{content:'\e02d'}.oi[data-glyph=caret-left]:before{content:'\e02e'}.oi[data-glyph=caret-right]:before{content:'\e02f'}.oi[data-glyph=caret-top]:before{content:'\e030'}.oi[data-glyph=cart]:before{content:'\e031'}.oi[data-glyph=chat]:before{content:'\e032'}.oi[data-glyph=check]:before{content:'\e033'}.oi[data-glyph=chevron-bottom]:before{content:'\e034'}.oi[data-glyph=chevron-left]:before{content:'\e035'}.oi[data-glyph=chevron-right]:before{content:'\e036'}.oi[data-glyph=chevron-top]:before{content:'\e037'}.oi[data-glyph=circle-check]:before{content:'\e038'}.oi[data-glyph=circle-x]:before{content:'\e039'}.oi[data-glyph=clipboard]:before{content:'\e03a'}.oi[data-glyph=clock]:before{content:'\e03b'}.oi[data-glyph=cloud-download]:before{content:'\e03c'}.oi[data-glyph=cloud-upload]:before{content:'\e03d'}.oi[data-glyph=cloud]:before{content:'\e03e'}.oi[data-glyph=cloudy]:before{content:'\e03f'}.oi[data-glyph=code]:before{content:'\e040'}.oi[data-glyph=cog]:before{content:'\e041'}.oi[data-glyph=collapse-down]:before{content:'\e042'}.oi[data-glyph=collapse-left]:before{content:'\e043'}.oi[data-glyph=collapse-right]:before{content:'\e044'}.oi[data-glyph=collapse-up]:before{content:'\e045'}.oi[data-glyph=command]:before{content:'\e046'}.oi[data-glyph=comment-square]:before{content:'\e047'}.oi[data-glyph=compass]:before{content:'\e048'}.oi[data-glyph=contrast]:before{content:'\e049'}.oi[data-glyph=copywriting]:before{content:'\e04a'}.oi[data-glyph=credit-card]:before{content:'\e04b'}.oi[data-glyph=crop]:before{content:'\e04c'}.oi[data-glyph=dashboard]:before{content:'\e04d'}.oi[data-glyph=data-transfer-download]:before{content:'\e04e'}.oi[data-glyph=data-transfer-upload]:before{content:'\e04f'}.oi[data-glyph=delete]:before{content:'\e050'}.oi[data-glyph=dial]:before{content:'\e051'}.oi[data-glyph=document]:before{content:'\e052'}.oi[data-glyph=dollar]:before{content:'\e053'}.oi[data-glyph=double-quote-sans-left]:before{content:'\e054'}.oi[data-glyph=double-quote-sans-right]:before{content:'\e055'}.oi[data-glyph=double-quote-serif-left]:before{content:'\e056'}.oi[data-glyph=double-quote-serif-right]:before{content:'\e057'}.oi[data-glyph=droplet]:before{content:'\e058'}.oi[data-glyph=eject]:before{content:'\e059'}.oi[data-glyph=elevator]:before{content:'\e05a'}.oi[data-glyph=ellipses]:before{content:'\e05b'}.oi[data-glyph=envelope-closed]:before{content:'\e05c'}.oi[data-glyph=envelope-open]:before{content:'\e05d'}.oi[data-glyph=euro]:before{content:'\e05e'}.oi[data-glyph=excerpt]:before{content:'\e05f'}.oi[data-glyph=expand-down]:before{content:'\e060'}.oi[data-glyph=expand-left]:before{content:'\e061'}.oi[data-glyph=expand-right]:before{content:'\e062'}.oi[data-glyph=expand-up]:before{content:'\e063'}.oi[data-glyph=external-link]:before{content:'\e064'}.oi[data-glyph=eye]:before{content:'\e065'}.oi[data-glyph=eyedropper]:before{content:'\e066'}.oi[data-glyph=file]:before{content:'\e067'}.oi[data-glyph=fire]:before{content:'\e068'}.oi[data-glyph=flag]:before{content:'\e069'}.oi[data-glyph=flash]:before{content:'\e06a'}.oi[data-glyph=folder]:before{content:'\e06b'}.oi[data-glyph=fork]:before{content:'\e06c'}.oi[data-glyph=fullscreen-enter]:before{content:'\e06d'}.oi[data-glyph=fullscreen-exit]:before{content:'\e06e'}.oi[data-glyph=globe]:before{content:'\e06f'}.oi[data-glyph=graph]:before{content:'\e070'}.oi[data-glyph=grid-four-up]:before{content:'\e071'}.oi[data-glyph=grid-three-up]:before{content:'\e072'}.oi[data-glyph=grid-two-up]:before{content:'\e073'}.oi[data-glyph=hard-drive]:before{content:'\e074'}.oi[data-glyph=header]:before{content:'\e075'}.oi[data-glyph=headphones]:before{content:'\e076'}.oi[data-glyph=heart]:before{content:'\e077'}.oi[data-glyph=home]:before{content:'\e078'}.oi[data-glyph=image]:before{content:'\e079'}.oi[data-glyph=inbox]:before{content:'\e07a'}.oi[data-glyph=infinity]:before{content:'\e07b'}.oi[data-glyph=info]:before{content:'\e07c'}.oi[data-glyph=italic]:before{content:'\e07d'}.oi[data-glyph=justify-center]:before{content:'\e07e'}.oi[data-glyph=justify-left]:before{content:'\e07f'}.oi[data-glyph=justify-right]:before{content:'\e080'}.oi[data-glyph=key]:before{content:'\e081'}.oi[data-glyph=laptop]:before{content:'\e082'}.oi[data-glyph=layers]:before{content:'\e083'}.oi[data-glyph=lightbulb]:before{content:'\e084'}.oi[data-glyph=link-broken]:before{content:'\e085'}.oi[data-glyph=link-intact]:before{content:'\e086'}.oi[data-glyph=list-rich]:before{content:'\e087'}.oi[data-glyph=list]:before{content:'\e088'}.oi[data-glyph=location]:before{content:'\e089'}.oi[data-glyph=lock-locked]:before{content:'\e08a'}.oi[data-glyph=lock-unlocked]:before{content:'\e08b'}.oi[data-glyph=loop-circular]:before{content:'\e08c'}.oi[data-glyph=loop-square]:before{content:'\e08d'}.oi[data-glyph=loop]:before{content:'\e08e'}.oi[data-glyph=magnifying-glass]:before{content:'\e08f'}.oi[data-glyph=map-marker]:before{content:'\e090'}.oi[data-glyph=map]:before{content:'\e091'}.oi[data-glyph=media-pause]:before{content:'\e092'}.oi[data-glyph=media-play]:before{content:'\e093'}.oi[data-glyph=media-record]:before{content:'\e094'}.oi[data-glyph=media-skip-backward]:before{content:'\e095'}.oi[data-glyph=media-skip-forward]:before{content:'\e096'}.oi[data-glyph=media-step-backward]:before{content:'\e097'}.oi[data-glyph=media-step-forward]:before{content:'\e098'}.oi[data-glyph=media-stop]:before{content:'\e099'}.oi[data-glyph=medical-cross]:before{content:'\e09a'}.oi[data-glyph=menu]:before{content:'\e09b'}.oi[data-glyph=microphone]:before{content:'\e09c'}.oi[data-glyph=minus]:before{content:'\e09d'}.oi[data-glyph=monitor]:before{content:'\e09e'}.oi[data-glyph=moon]:before{content:'\e09f'}.oi[data-glyph=move]:before{content:'\e0a0'}.oi[data-glyph=musical-note]:before{content:'\e0a1'}.oi[data-glyph=paperclip]:before{content:'\e0a2'}.oi[data-glyph=pencil]:before{content:'\e0a3'}.oi[data-glyph=people]:before{content:'\e0a4'}.oi[data-glyph=person]:before{content:'\e0a5'}.oi[data-glyph=phone]:before{content:'\e0a6'}.oi[data-glyph=pie-chart]:before{content:'\e0a7'}.oi[data-glyph=pin]:before{content:'\e0a8'}.oi[data-glyph=play-circle]:before{content:'\e0a9'}.oi[data-glyph=plus]:before{content:'\e0aa'}.oi[data-glyph=power-standby]:before{content:'\e0ab'}.oi[data-glyph=print]:before{content:'\e0ac'}.oi[data-glyph=project]:before{content:'\e0ad'}.oi[data-glyph=pulse]:before{content:'\e0ae'}.oi[data-glyph=puzzle-piece]:before{content:'\e0af'}.oi[data-glyph=question-mark]:before{content:'\e0b0'}.oi[data-glyph=rain]:before{content:'\e0b1'}.oi[data-glyph=random]:before{content:'\e0b2'}.oi[data-glyph=reload]:before{content:'\e0b3'}.oi[data-glyph=resize-both]:before{content:'\e0b4'}.oi[data-glyph=resize-height]:before{content:'\e0b5'}.oi[data-glyph=resize-width]:before{content:'\e0b6'}.oi[data-glyph=rss-alt]:before{content:'\e0b7'}.oi[data-glyph=rss]:before{content:'\e0b8'}.oi[data-glyph=script]:before{content:'\e0b9'}.oi[data-glyph=share-boxed]:before{content:'\e0ba'}.oi[data-glyph=share]:before{content:'\e0bb'}.oi[data-glyph=shield]:before{content:'\e0bc'}.oi[data-glyph=signal]:before{content:'\e0bd'}.oi[data-glyph=signpost]:before{content:'\e0be'}.oi[data-glyph=sort-ascending]:before{content:'\e0bf'}.oi[data-glyph=sort-descending]:before{content:'\e0c0'}.oi[data-glyph=spreadsheet]:before{content:'\e0c1'}.oi[data-glyph=star]:before{content:'\e0c2'}.oi[data-glyph=sun]:before{content:'\e0c3'}.oi[data-glyph=tablet]:before{content:'\e0c4'}.oi[data-glyph=tag]:before{content:'\e0c5'}.oi[data-glyph=tags]:before{content:'\e0c6'}.oi[data-glyph=target]:before{content:'\e0c7'}.oi[data-glyph=task]:before{content:'\e0c8'}.oi[data-glyph=terminal]:before{content:'\e0c9'}.oi[data-glyph=text]:before{content:'\e0ca'}.oi[data-glyph=thumb-down]:before{content:'\e0cb'}.oi[data-glyph=thumb-up]:before{content:'\e0cc'}.oi[data-glyph=timer]:before{content:'\e0cd'}.oi[data-glyph=transfer]:before{content:'\e0ce'}.oi[data-glyph=trash]:before{content:'\e0cf'}.oi[data-glyph=underline]:before{content:'\e0d0'}.oi[data-glyph=vertical-align-bottom]:before{content:'\e0d1'}.oi[data-glyph=vertical-align-center]:before{content:'\e0d2'}.oi[data-glyph=vertical-align-top]:before{content:'\e0d3'}.oi[data-glyph=video]:before{content:'\e0d4'}.oi[data-glyph=volume-high]:before{content:'\e0d5'}.oi[data-glyph=volume-low]:before{content:'\e0d6'}.oi[data-glyph=volume-off]:before{content:'\e0d7'}.oi[data-glyph=warning]:before{content:'\e0d8'}.oi[data-glyph=wifi]:before{content:'\e0d9'}.oi[data-glyph=wrench]:before{content:'\e0da'}.oi[data-glyph=x]:before{content:'\e0db'}.oi[data-glyph=yen]:before{content:'\e0dc'}.oi[data-glyph=zoom-in]:before{content:'\e0dd'}.oi[data-glyph=zoom-out]:before{content:'\e0de'}
\ No newline at end of file
diff --git a/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic.scss b/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic.scss
new file mode 100644
index 0000000..e03d979
--- /dev/null
+++ b/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic.scss
@@ -0,0 +1,963 @@
+$iconic-font-path: '../fonts/' !default;
+
+@font-face {
+ font-family: 'Icons';
+ src: url('#{$iconic-font-path}open-iconic.eot');
+ src: url('#{$iconic-font-path}open-iconic.eot?#iconic-sm') format('embedded-opentype'), url('#{$iconic-font-path}open-iconic.woff') format('woff'), url('#{$iconic-font-path}open-iconic.ttf') format('truetype'), url('#{$iconic-font-path}open-iconic.otf') format('opentype'), url('#{$iconic-font-path}open-iconic.svg#iconic-sm') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+.oi[data-glyph].oi-text-replace {
+ font-size: 0;
+ line-height: 0;
+}
+
+.oi[data-glyph].oi-text-replace:before {
+ width: 1em;
+ text-align: center;
+}
+
+.oi[data-glyph] {
+ &:before {
+ position: relative;
+ top: 1px;
+ font-family: 'Icons';
+ display: inline-block;
+ speak: none;
+ line-height: 1;
+ vertical-align: baseline;
+ font-weight: normal;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+
+ &:empty:before {
+ width: 1em;
+ text-align: center;
+ box-sizing: content-box;
+ }
+
+ &.oi-align-left:before {
+ text-align: left;
+ }
+ &.oi-align-right:before {
+ text-align: right;
+ }
+ &.oi-align-center:before {
+ text-align: center;
+ }
+
+ &.oi-flip-horizontal:before {
+ -webkit-transform: scale(-1, 1);
+ -ms-transform: scale(-1, 1);
+ transform: scale(-1, 1);
+ }
+
+ &.oi-flip-vertical:before {
+ -webkit-transform: scale(1, -1);
+ -ms-transform: scale(-1, 1);
+ transform: scale(1, -1);
+ }
+
+ &.oi-flip-horizontal-vertical:before {
+ -webkit-transform: scale(-1, -1);
+ -ms-transform: scale(-1, 1);
+ transform: scale(-1, -1);
+ }
+}
+
+
+.oi[data-glyph=account-login]:before {
+ content: '\e000';
+}
+
+.oi[data-glyph=account-logout]:before {
+ content: '\e001';
+}
+
+.oi[data-glyph=action-redo]:before {
+ content: '\e002';
+}
+
+.oi[data-glyph=action-undo]:before {
+ content: '\e003';
+}
+
+.oi[data-glyph=align-center]:before {
+ content: '\e004';
+}
+
+.oi[data-glyph=align-left]:before {
+ content: '\e005';
+}
+
+.oi[data-glyph=align-right]:before {
+ content: '\e006';
+}
+
+.oi[data-glyph=aperture]:before {
+ content: '\e007';
+}
+
+.oi[data-glyph=arrow-bottom]:before {
+ content: '\e008';
+}
+
+.oi[data-glyph=arrow-circle-bottom]:before {
+ content: '\e009';
+}
+
+.oi[data-glyph=arrow-circle-left]:before {
+ content: '\e00a';
+}
+
+.oi[data-glyph=arrow-circle-right]:before {
+ content: '\e00b';
+}
+
+.oi[data-glyph=arrow-circle-top]:before {
+ content: '\e00c';
+}
+
+.oi[data-glyph=arrow-left]:before {
+ content: '\e00d';
+}
+
+.oi[data-glyph=arrow-right]:before {
+ content: '\e00e';
+}
+
+.oi[data-glyph=arrow-thick-bottom]:before {
+ content: '\e00f';
+}
+
+.oi[data-glyph=arrow-thick-left]:before {
+ content: '\e010';
+}
+
+.oi[data-glyph=arrow-thick-right]:before {
+ content: '\e011';
+}
+
+.oi[data-glyph=arrow-thick-top]:before {
+ content: '\e012';
+}
+
+.oi[data-glyph=arrow-top]:before {
+ content: '\e013';
+}
+
+.oi[data-glyph=audio-spectrum]:before {
+ content: '\e014';
+}
+
+.oi[data-glyph=audio]:before {
+ content: '\e015';
+}
+
+.oi[data-glyph=badge]:before {
+ content: '\e016';
+}
+
+.oi[data-glyph=ban]:before {
+ content: '\e017';
+}
+
+.oi[data-glyph=bar-chart]:before {
+ content: '\e018';
+}
+
+.oi[data-glyph=basket]:before {
+ content: '\e019';
+}
+
+.oi[data-glyph=battery-empty]:before {
+ content: '\e01a';
+}
+
+.oi[data-glyph=battery-full]:before {
+ content: '\e01b';
+}
+
+.oi[data-glyph=beaker]:before {
+ content: '\e01c';
+}
+
+.oi[data-glyph=bell]:before {
+ content: '\e01d';
+}
+
+.oi[data-glyph=bluetooth]:before {
+ content: '\e01e';
+}
+
+.oi[data-glyph=bold]:before {
+ content: '\e01f';
+}
+
+.oi[data-glyph=bolt]:before {
+ content: '\e020';
+}
+
+.oi[data-glyph=book]:before {
+ content: '\e021';
+}
+
+.oi[data-glyph=bookmark]:before {
+ content: '\e022';
+}
+
+.oi[data-glyph=box]:before {
+ content: '\e023';
+}
+
+.oi[data-glyph=briefcase]:before {
+ content: '\e024';
+}
+
+.oi[data-glyph=british-pound]:before {
+ content: '\e025';
+}
+
+.oi[data-glyph=browser]:before {
+ content: '\e026';
+}
+
+.oi[data-glyph=brush]:before {
+ content: '\e027';
+}
+
+.oi[data-glyph=bug]:before {
+ content: '\e028';
+}
+
+.oi[data-glyph=bullhorn]:before {
+ content: '\e029';
+}
+
+.oi[data-glyph=calculator]:before {
+ content: '\e02a';
+}
+
+.oi[data-glyph=calendar]:before {
+ content: '\e02b';
+}
+
+.oi[data-glyph=camera-slr]:before {
+ content: '\e02c';
+}
+
+.oi[data-glyph=caret-bottom]:before {
+ content: '\e02d';
+}
+
+.oi[data-glyph=caret-left]:before {
+ content: '\e02e';
+}
+
+.oi[data-glyph=caret-right]:before {
+ content: '\e02f';
+}
+
+.oi[data-glyph=caret-top]:before {
+ content: '\e030';
+}
+
+.oi[data-glyph=cart]:before {
+ content: '\e031';
+}
+
+.oi[data-glyph=chat]:before {
+ content: '\e032';
+}
+
+.oi[data-glyph=check]:before {
+ content: '\e033';
+}
+
+.oi[data-glyph=chevron-bottom]:before {
+ content: '\e034';
+}
+
+.oi[data-glyph=chevron-left]:before {
+ content: '\e035';
+}
+
+.oi[data-glyph=chevron-right]:before {
+ content: '\e036';
+}
+
+.oi[data-glyph=chevron-top]:before {
+ content: '\e037';
+}
+
+.oi[data-glyph=circle-check]:before {
+ content: '\e038';
+}
+
+.oi[data-glyph=circle-x]:before {
+ content: '\e039';
+}
+
+.oi[data-glyph=clipboard]:before {
+ content: '\e03a';
+}
+
+.oi[data-glyph=clock]:before {
+ content: '\e03b';
+}
+
+.oi[data-glyph=cloud-download]:before {
+ content: '\e03c';
+}
+
+.oi[data-glyph=cloud-upload]:before {
+ content: '\e03d';
+}
+
+.oi[data-glyph=cloud]:before {
+ content: '\e03e';
+}
+
+.oi[data-glyph=cloudy]:before {
+ content: '\e03f';
+}
+
+.oi[data-glyph=code]:before {
+ content: '\e040';
+}
+
+.oi[data-glyph=cog]:before {
+ content: '\e041';
+}
+
+.oi[data-glyph=collapse-down]:before {
+ content: '\e042';
+}
+
+.oi[data-glyph=collapse-left]:before {
+ content: '\e043';
+}
+
+.oi[data-glyph=collapse-right]:before {
+ content: '\e044';
+}
+
+.oi[data-glyph=collapse-up]:before {
+ content: '\e045';
+}
+
+.oi[data-glyph=command]:before {
+ content: '\e046';
+}
+
+.oi[data-glyph=comment-square]:before {
+ content: '\e047';
+}
+
+.oi[data-glyph=compass]:before {
+ content: '\e048';
+}
+
+.oi[data-glyph=contrast]:before {
+ content: '\e049';
+}
+
+.oi[data-glyph=copywriting]:before {
+ content: '\e04a';
+}
+
+.oi[data-glyph=credit-card]:before {
+ content: '\e04b';
+}
+
+.oi[data-glyph=crop]:before {
+ content: '\e04c';
+}
+
+.oi[data-glyph=dashboard]:before {
+ content: '\e04d';
+}
+
+.oi[data-glyph=data-transfer-download]:before {
+ content: '\e04e';
+}
+
+.oi[data-glyph=data-transfer-upload]:before {
+ content: '\e04f';
+}
+
+.oi[data-glyph=delete]:before {
+ content: '\e050';
+}
+
+.oi[data-glyph=dial]:before {
+ content: '\e051';
+}
+
+.oi[data-glyph=document]:before {
+ content: '\e052';
+}
+
+.oi[data-glyph=dollar]:before {
+ content: '\e053';
+}
+
+.oi[data-glyph=double-quote-sans-left]:before {
+ content: '\e054';
+}
+
+.oi[data-glyph=double-quote-sans-right]:before {
+ content: '\e055';
+}
+
+.oi[data-glyph=double-quote-serif-left]:before {
+ content: '\e056';
+}
+
+.oi[data-glyph=double-quote-serif-right]:before {
+ content: '\e057';
+}
+
+.oi[data-glyph=droplet]:before {
+ content: '\e058';
+}
+
+.oi[data-glyph=eject]:before {
+ content: '\e059';
+}
+
+.oi[data-glyph=elevator]:before {
+ content: '\e05a';
+}
+
+.oi[data-glyph=ellipses]:before {
+ content: '\e05b';
+}
+
+.oi[data-glyph=envelope-closed]:before {
+ content: '\e05c';
+}
+
+.oi[data-glyph=envelope-open]:before {
+ content: '\e05d';
+}
+
+.oi[data-glyph=euro]:before {
+ content: '\e05e';
+}
+
+.oi[data-glyph=excerpt]:before {
+ content: '\e05f';
+}
+
+.oi[data-glyph=expand-down]:before {
+ content: '\e060';
+}
+
+.oi[data-glyph=expand-left]:before {
+ content: '\e061';
+}
+
+.oi[data-glyph=expand-right]:before {
+ content: '\e062';
+}
+
+.oi[data-glyph=expand-up]:before {
+ content: '\e063';
+}
+
+.oi[data-glyph=external-link]:before {
+ content: '\e064';
+}
+
+.oi[data-glyph=eye]:before {
+ content: '\e065';
+}
+
+.oi[data-glyph=eyedropper]:before {
+ content: '\e066';
+}
+
+.oi[data-glyph=file]:before {
+ content: '\e067';
+}
+
+.oi[data-glyph=fire]:before {
+ content: '\e068';
+}
+
+.oi[data-glyph=flag]:before {
+ content: '\e069';
+}
+
+.oi[data-glyph=flash]:before {
+ content: '\e06a';
+}
+
+.oi[data-glyph=folder]:before {
+ content: '\e06b';
+}
+
+.oi[data-glyph=fork]:before {
+ content: '\e06c';
+}
+
+.oi[data-glyph=fullscreen-enter]:before {
+ content: '\e06d';
+}
+
+.oi[data-glyph=fullscreen-exit]:before {
+ content: '\e06e';
+}
+
+.oi[data-glyph=globe]:before {
+ content: '\e06f';
+}
+
+.oi[data-glyph=graph]:before {
+ content: '\e070';
+}
+
+.oi[data-glyph=grid-four-up]:before {
+ content: '\e071';
+}
+
+.oi[data-glyph=grid-three-up]:before {
+ content: '\e072';
+}
+
+.oi[data-glyph=grid-two-up]:before {
+ content: '\e073';
+}
+
+.oi[data-glyph=hard-drive]:before {
+ content: '\e074';
+}
+
+.oi[data-glyph=header]:before {
+ content: '\e075';
+}
+
+.oi[data-glyph=headphones]:before {
+ content: '\e076';
+}
+
+.oi[data-glyph=heart]:before {
+ content: '\e077';
+}
+
+.oi[data-glyph=home]:before {
+ content: '\e078';
+}
+
+.oi[data-glyph=image]:before {
+ content: '\e079';
+}
+
+.oi[data-glyph=inbox]:before {
+ content: '\e07a';
+}
+
+.oi[data-glyph=infinity]:before {
+ content: '\e07b';
+}
+
+.oi[data-glyph=info]:before {
+ content: '\e07c';
+}
+
+.oi[data-glyph=italic]:before {
+ content: '\e07d';
+}
+
+.oi[data-glyph=justify-center]:before {
+ content: '\e07e';
+}
+
+.oi[data-glyph=justify-left]:before {
+ content: '\e07f';
+}
+
+.oi[data-glyph=justify-right]:before {
+ content: '\e080';
+}
+
+.oi[data-glyph=key]:before {
+ content: '\e081';
+}
+
+.oi[data-glyph=laptop]:before {
+ content: '\e082';
+}
+
+.oi[data-glyph=layers]:before {
+ content: '\e083';
+}
+
+.oi[data-glyph=lightbulb]:before {
+ content: '\e084';
+}
+
+.oi[data-glyph=link-broken]:before {
+ content: '\e085';
+}
+
+.oi[data-glyph=link-intact]:before {
+ content: '\e086';
+}
+
+.oi[data-glyph=list-rich]:before {
+ content: '\e087';
+}
+
+.oi[data-glyph=list]:before {
+ content: '\e088';
+}
+
+.oi[data-glyph=location]:before {
+ content: '\e089';
+}
+
+.oi[data-glyph=lock-locked]:before {
+ content: '\e08a';
+}
+
+.oi[data-glyph=lock-unlocked]:before {
+ content: '\e08b';
+}
+
+.oi[data-glyph=loop-circular]:before {
+ content: '\e08c';
+}
+
+.oi[data-glyph=loop-square]:before {
+ content: '\e08d';
+}
+
+.oi[data-glyph=loop]:before {
+ content: '\e08e';
+}
+
+.oi[data-glyph=magnifying-glass]:before {
+ content: '\e08f';
+}
+
+.oi[data-glyph=map-marker]:before {
+ content: '\e090';
+}
+
+.oi[data-glyph=map]:before {
+ content: '\e091';
+}
+
+.oi[data-glyph=media-pause]:before {
+ content: '\e092';
+}
+
+.oi[data-glyph=media-play]:before {
+ content: '\e093';
+}
+
+.oi[data-glyph=media-record]:before {
+ content: '\e094';
+}
+
+.oi[data-glyph=media-skip-backward]:before {
+ content: '\e095';
+}
+
+.oi[data-glyph=media-skip-forward]:before {
+ content: '\e096';
+}
+
+.oi[data-glyph=media-step-backward]:before {
+ content: '\e097';
+}
+
+.oi[data-glyph=media-step-forward]:before {
+ content: '\e098';
+}
+
+.oi[data-glyph=media-stop]:before {
+ content: '\e099';
+}
+
+.oi[data-glyph=medical-cross]:before {
+ content: '\e09a';
+}
+
+.oi[data-glyph=menu]:before {
+ content: '\e09b';
+}
+
+.oi[data-glyph=microphone]:before {
+ content: '\e09c';
+}
+
+.oi[data-glyph=minus]:before {
+ content: '\e09d';
+}
+
+.oi[data-glyph=monitor]:before {
+ content: '\e09e';
+}
+
+.oi[data-glyph=moon]:before {
+ content: '\e09f';
+}
+
+.oi[data-glyph=move]:before {
+ content: '\e0a0';
+}
+
+.oi[data-glyph=musical-note]:before {
+ content: '\e0a1';
+}
+
+.oi[data-glyph=paperclip]:before {
+ content: '\e0a2';
+}
+
+.oi[data-glyph=pencil]:before {
+ content: '\e0a3';
+}
+
+.oi[data-glyph=people]:before {
+ content: '\e0a4';
+}
+
+.oi[data-glyph=person]:before {
+ content: '\e0a5';
+}
+
+.oi[data-glyph=phone]:before {
+ content: '\e0a6';
+}
+
+.oi[data-glyph=pie-chart]:before {
+ content: '\e0a7';
+}
+
+.oi[data-glyph=pin]:before {
+ content: '\e0a8';
+}
+
+.oi[data-glyph=play-circle]:before {
+ content: '\e0a9';
+}
+
+.oi[data-glyph=plus]:before {
+ content: '\e0aa';
+}
+
+.oi[data-glyph=power-standby]:before {
+ content: '\e0ab';
+}
+
+.oi[data-glyph=print]:before {
+ content: '\e0ac';
+}
+
+.oi[data-glyph=project]:before {
+ content: '\e0ad';
+}
+
+.oi[data-glyph=pulse]:before {
+ content: '\e0ae';
+}
+
+.oi[data-glyph=puzzle-piece]:before {
+ content: '\e0af';
+}
+
+.oi[data-glyph=question-mark]:before {
+ content: '\e0b0';
+}
+
+.oi[data-glyph=rain]:before {
+ content: '\e0b1';
+}
+
+.oi[data-glyph=random]:before {
+ content: '\e0b2';
+}
+
+.oi[data-glyph=reload]:before {
+ content: '\e0b3';
+}
+
+.oi[data-glyph=resize-both]:before {
+ content: '\e0b4';
+}
+
+.oi[data-glyph=resize-height]:before {
+ content: '\e0b5';
+}
+
+.oi[data-glyph=resize-width]:before {
+ content: '\e0b6';
+}
+
+.oi[data-glyph=rss-alt]:before {
+ content: '\e0b7';
+}
+
+.oi[data-glyph=rss]:before {
+ content: '\e0b8';
+}
+
+.oi[data-glyph=script]:before {
+ content: '\e0b9';
+}
+
+.oi[data-glyph=share-boxed]:before {
+ content: '\e0ba';
+}
+
+.oi[data-glyph=share]:before {
+ content: '\e0bb';
+}
+
+.oi[data-glyph=shield]:before {
+ content: '\e0bc';
+}
+
+.oi[data-glyph=signal]:before {
+ content: '\e0bd';
+}
+
+.oi[data-glyph=signpost]:before {
+ content: '\e0be';
+}
+
+.oi[data-glyph=sort-ascending]:before {
+ content: '\e0bf';
+}
+
+.oi[data-glyph=sort-descending]:before {
+ content: '\e0c0';
+}
+
+.oi[data-glyph=spreadsheet]:before {
+ content: '\e0c1';
+}
+
+.oi[data-glyph=star]:before {
+ content: '\e0c2';
+}
+
+.oi[data-glyph=sun]:before {
+ content: '\e0c3';
+}
+
+.oi[data-glyph=tablet]:before {
+ content: '\e0c4';
+}
+
+.oi[data-glyph=tag]:before {
+ content: '\e0c5';
+}
+
+.oi[data-glyph=tags]:before {
+ content: '\e0c6';
+}
+
+.oi[data-glyph=target]:before {
+ content: '\e0c7';
+}
+
+.oi[data-glyph=task]:before {
+ content: '\e0c8';
+}
+
+.oi[data-glyph=terminal]:before {
+ content: '\e0c9';
+}
+
+.oi[data-glyph=text]:before {
+ content: '\e0ca';
+}
+
+.oi[data-glyph=thumb-down]:before {
+ content: '\e0cb';
+}
+
+.oi[data-glyph=thumb-up]:before {
+ content: '\e0cc';
+}
+
+.oi[data-glyph=timer]:before {
+ content: '\e0cd';
+}
+
+.oi[data-glyph=transfer]:before {
+ content: '\e0ce';
+}
+
+.oi[data-glyph=trash]:before {
+ content: '\e0cf';
+}
+
+.oi[data-glyph=underline]:before {
+ content: '\e0d0';
+}
+
+.oi[data-glyph=vertical-align-bottom]:before {
+ content: '\e0d1';
+}
+
+.oi[data-glyph=vertical-align-center]:before {
+ content: '\e0d2';
+}
+
+.oi[data-glyph=vertical-align-top]:before {
+ content: '\e0d3';
+}
+
+.oi[data-glyph=video]:before {
+ content: '\e0d4';
+}
+
+.oi[data-glyph=volume-high]:before {
+ content: '\e0d5';
+}
+
+.oi[data-glyph=volume-low]:before {
+ content: '\e0d6';
+}
+
+.oi[data-glyph=volume-off]:before {
+ content: '\e0d7';
+}
+
+.oi[data-glyph=warning]:before {
+ content: '\e0d8';
+}
+
+.oi[data-glyph=wifi]:before {
+ content: '\e0d9';
+}
+
+.oi[data-glyph=wrench]:before {
+ content: '\e0da';
+}
+
+.oi[data-glyph=x]:before {
+ content: '\e0db';
+}
+
+.oi[data-glyph=yen]:before {
+ content: '\e0dc';
+}
+
+.oi[data-glyph=zoom-in]:before {
+ content: '\e0dd';
+}
+
+.oi[data-glyph=zoom-out]:before {
+ content: '\e0de';
+}
+
diff --git a/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic.styl b/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic.styl
new file mode 100644
index 0000000..f541bc2
--- /dev/null
+++ b/src/visualizers/widgets/Sidebar/lib/font/css/open-iconic.styl
@@ -0,0 +1,733 @@
+@font-face
+ font-family 'Icons'
+ src url('../fonts/open-iconic.eot')
+ src url('../fonts/open-iconic.eot?#iconic-sm') format('embedded-opentype'), url('../fonts/open-iconic.woff') format('woff'), url('../fonts/open-iconic.ttf') format('truetype'), url('../fonts/open-iconic.otf') format('opentype'), url('../fonts/open-iconic.svg#iconic-sm') format('svg')
+ font-weight normal
+ font-style normal
+
+
+.oi[data-glyph].oi-text-replace
+ font-size 0
+ line-height 0
+
+.oi[data-glyph].oi-text-replace:before
+ width 1em
+ text-align center
+
+.oi[data-glyph]
+ &:before
+ position relative
+ top 1px
+ font-family 'Icons'
+ display inline-block
+ speak none
+ line-height 1
+ vertical-align baseline
+ font-weight normal
+ font-style normal
+ -webkit-font-smoothing antialiased
+ -moz-osx-font-smoothing grayscale
+
+ &:empty:before
+ width 1em
+ text-align center
+ box-sizing content-box
+
+ &.oi-align-left:before
+ text-align left
+
+ &.oi-align-right:before
+ text-align right
+
+ &.oi-align-center:before
+ text-align center
+
+
+ &.oi-flip-horizontal:before
+ -webkit-transform scale(-1, 1)
+ -ms-transform scale(-1, 1)
+ transform scale(-1, 1)
+
+
+ &.oi-flip-vertical:before
+ -webkit-transform scale(1, -1)
+ -ms-transform scale(-1, 1)
+ transform scale(1, -1)
+
+
+ &.oi-flip-horizontal-vertical:before
+ -webkit-transform scale(-1, -1)
+ -ms-transform scale(-1, 1)
+ transform scale(-1, -1)
+
+
+
+
+.oi[data-glyph=account-login]:before
+ content '\e000'
+
+.oi[data-glyph=account-logout]:before
+ content '\e001'
+
+.oi[data-glyph=action-redo]:before
+ content '\e002'
+
+.oi[data-glyph=action-undo]:before
+ content '\e003'
+
+.oi[data-glyph=align-center]:before
+ content '\e004'
+
+.oi[data-glyph=align-left]:before
+ content '\e005'
+
+.oi[data-glyph=align-right]:before
+ content '\e006'
+
+.oi[data-glyph=aperture]:before
+ content '\e007'
+
+.oi[data-glyph=arrow-bottom]:before
+ content '\e008'
+
+.oi[data-glyph=arrow-circle-bottom]:before
+ content '\e009'
+
+.oi[data-glyph=arrow-circle-left]:before
+ content '\e00a'
+
+.oi[data-glyph=arrow-circle-right]:before
+ content '\e00b'
+
+.oi[data-glyph=arrow-circle-top]:before
+ content '\e00c'
+
+.oi[data-glyph=arrow-left]:before
+ content '\e00d'
+
+.oi[data-glyph=arrow-right]:before
+ content '\e00e'
+
+.oi[data-glyph=arrow-thick-bottom]:before
+ content '\e00f'
+
+.oi[data-glyph=arrow-thick-left]:before
+ content '\e010'
+
+.oi[data-glyph=arrow-thick-right]:before
+ content '\e011'
+
+.oi[data-glyph=arrow-thick-top]:before
+ content '\e012'
+
+.oi[data-glyph=arrow-top]:before
+ content '\e013'
+
+.oi[data-glyph=audio-spectrum]:before
+ content '\e014'
+
+.oi[data-glyph=audio]:before
+ content '\e015'
+
+.oi[data-glyph=badge]:before
+ content '\e016'
+
+.oi[data-glyph=ban]:before
+ content '\e017'
+
+.oi[data-glyph=bar-chart]:before
+ content '\e018'
+
+.oi[data-glyph=basket]:before
+ content '\e019'
+
+.oi[data-glyph=battery-empty]:before
+ content '\e01a'
+
+.oi[data-glyph=battery-full]:before
+ content '\e01b'
+
+.oi[data-glyph=beaker]:before
+ content '\e01c'
+
+.oi[data-glyph=bell]:before
+ content '\e01d'
+
+.oi[data-glyph=bluetooth]:before
+ content '\e01e'
+
+.oi[data-glyph=bold]:before
+ content '\e01f'
+
+.oi[data-glyph=bolt]:before
+ content '\e020'
+
+.oi[data-glyph=book]:before
+ content '\e021'
+
+.oi[data-glyph=bookmark]:before
+ content '\e022'
+
+.oi[data-glyph=box]:before
+ content '\e023'
+
+.oi[data-glyph=briefcase]:before
+ content '\e024'
+
+.oi[data-glyph=british-pound]:before
+ content '\e025'
+
+.oi[data-glyph=browser]:before
+ content '\e026'
+
+.oi[data-glyph=brush]:before
+ content '\e027'
+
+.oi[data-glyph=bug]:before
+ content '\e028'
+
+.oi[data-glyph=bullhorn]:before
+ content '\e029'
+
+.oi[data-glyph=calculator]:before
+ content '\e02a'
+
+.oi[data-glyph=calendar]:before
+ content '\e02b'
+
+.oi[data-glyph=camera-slr]:before
+ content '\e02c'
+
+.oi[data-glyph=caret-bottom]:before
+ content '\e02d'
+
+.oi[data-glyph=caret-left]:before
+ content '\e02e'
+
+.oi[data-glyph=caret-right]:before
+ content '\e02f'
+
+.oi[data-glyph=caret-top]:before
+ content '\e030'
+
+.oi[data-glyph=cart]:before
+ content '\e031'
+
+.oi[data-glyph=chat]:before
+ content '\e032'
+
+.oi[data-glyph=check]:before
+ content '\e033'
+
+.oi[data-glyph=chevron-bottom]:before
+ content '\e034'
+
+.oi[data-glyph=chevron-left]:before
+ content '\e035'
+
+.oi[data-glyph=chevron-right]:before
+ content '\e036'
+
+.oi[data-glyph=chevron-top]:before
+ content '\e037'
+
+.oi[data-glyph=circle-check]:before
+ content '\e038'
+
+.oi[data-glyph=circle-x]:before
+ content '\e039'
+
+.oi[data-glyph=clipboard]:before
+ content '\e03a'
+
+.oi[data-glyph=clock]:before
+ content '\e03b'
+
+.oi[data-glyph=cloud-download]:before
+ content '\e03c'
+
+.oi[data-glyph=cloud-upload]:before
+ content '\e03d'
+
+.oi[data-glyph=cloud]:before
+ content '\e03e'
+
+.oi[data-glyph=cloudy]:before
+ content '\e03f'
+
+.oi[data-glyph=code]:before
+ content '\e040'
+
+.oi[data-glyph=cog]:before
+ content '\e041'
+
+.oi[data-glyph=collapse-down]:before
+ content '\e042'
+
+.oi[data-glyph=collapse-left]:before
+ content '\e043'
+
+.oi[data-glyph=collapse-right]:before
+ content '\e044'
+
+.oi[data-glyph=collapse-up]:before
+ content '\e045'
+
+.oi[data-glyph=command]:before
+ content '\e046'
+
+.oi[data-glyph=comment-square]:before
+ content '\e047'
+
+.oi[data-glyph=compass]:before
+ content '\e048'
+
+.oi[data-glyph=contrast]:before
+ content '\e049'
+
+.oi[data-glyph=copywriting]:before
+ content '\e04a'
+
+.oi[data-glyph=credit-card]:before
+ content '\e04b'
+
+.oi[data-glyph=crop]:before
+ content '\e04c'
+
+.oi[data-glyph=dashboard]:before
+ content '\e04d'
+
+.oi[data-glyph=data-transfer-download]:before
+ content '\e04e'
+
+.oi[data-glyph=data-transfer-upload]:before
+ content '\e04f'
+
+.oi[data-glyph=delete]:before
+ content '\e050'
+
+.oi[data-glyph=dial]:before
+ content '\e051'
+
+.oi[data-glyph=document]:before
+ content '\e052'
+
+.oi[data-glyph=dollar]:before
+ content '\e053'
+
+.oi[data-glyph=double-quote-sans-left]:before
+ content '\e054'
+
+.oi[data-glyph=double-quote-sans-right]:before
+ content '\e055'
+
+.oi[data-glyph=double-quote-serif-left]:before
+ content '\e056'
+
+.oi[data-glyph=double-quote-serif-right]:before
+ content '\e057'
+
+.oi[data-glyph=droplet]:before
+ content '\e058'
+
+.oi[data-glyph=eject]:before
+ content '\e059'
+
+.oi[data-glyph=elevator]:before
+ content '\e05a'
+
+.oi[data-glyph=ellipses]:before
+ content '\e05b'
+
+.oi[data-glyph=envelope-closed]:before
+ content '\e05c'
+
+.oi[data-glyph=envelope-open]:before
+ content '\e05d'
+
+.oi[data-glyph=euro]:before
+ content '\e05e'
+
+.oi[data-glyph=excerpt]:before
+ content '\e05f'
+
+.oi[data-glyph=expand-down]:before
+ content '\e060'
+
+.oi[data-glyph=expand-left]:before
+ content '\e061'
+
+.oi[data-glyph=expand-right]:before
+ content '\e062'
+
+.oi[data-glyph=expand-up]:before
+ content '\e063'
+
+.oi[data-glyph=external-link]:before
+ content '\e064'
+
+.oi[data-glyph=eye]:before
+ content '\e065'
+
+.oi[data-glyph=eyedropper]:before
+ content '\e066'
+
+.oi[data-glyph=file]:before
+ content '\e067'
+
+.oi[data-glyph=fire]:before
+ content '\e068'
+
+.oi[data-glyph=flag]:before
+ content '\e069'
+
+.oi[data-glyph=flash]:before
+ content '\e06a'
+
+.oi[data-glyph=folder]:before
+ content '\e06b'
+
+.oi[data-glyph=fork]:before
+ content '\e06c'
+
+.oi[data-glyph=fullscreen-enter]:before
+ content '\e06d'
+
+.oi[data-glyph=fullscreen-exit]:before
+ content '\e06e'
+
+.oi[data-glyph=globe]:before
+ content '\e06f'
+
+.oi[data-glyph=graph]:before
+ content '\e070'
+
+.oi[data-glyph=grid-four-up]:before
+ content '\e071'
+
+.oi[data-glyph=grid-three-up]:before
+ content '\e072'
+
+.oi[data-glyph=grid-two-up]:before
+ content '\e073'
+
+.oi[data-glyph=hard-drive]:before
+ content '\e074'
+
+.oi[data-glyph=header]:before
+ content '\e075'
+
+.oi[data-glyph=headphones]:before
+ content '\e076'
+
+.oi[data-glyph=heart]:before
+ content '\e077'
+
+.oi[data-glyph=home]:before
+ content '\e078'
+
+.oi[data-glyph=image]:before
+ content '\e079'
+
+.oi[data-glyph=inbox]:before
+ content '\e07a'
+
+.oi[data-glyph=infinity]:before
+ content '\e07b'
+
+.oi[data-glyph=info]:before
+ content '\e07c'
+
+.oi[data-glyph=italic]:before
+ content '\e07d'
+
+.oi[data-glyph=justify-center]:before
+ content '\e07e'
+
+.oi[data-glyph=justify-left]:before
+ content '\e07f'
+
+.oi[data-glyph=justify-right]:before
+ content '\e080'
+
+.oi[data-glyph=key]:before
+ content '\e081'
+
+.oi[data-glyph=laptop]:before
+ content '\e082'
+
+.oi[data-glyph=layers]:before
+ content '\e083'
+
+.oi[data-glyph=lightbulb]:before
+ content '\e084'
+
+.oi[data-glyph=link-broken]:before
+ content '\e085'
+
+.oi[data-glyph=link-intact]:before
+ content '\e086'
+
+.oi[data-glyph=list-rich]:before
+ content '\e087'
+
+.oi[data-glyph=list]:before
+ content '\e088'
+
+.oi[data-glyph=location]:before
+ content '\e089'
+
+.oi[data-glyph=lock-locked]:before
+ content '\e08a'
+
+.oi[data-glyph=lock-unlocked]:before
+ content '\e08b'
+
+.oi[data-glyph=loop-circular]:before
+ content '\e08c'
+
+.oi[data-glyph=loop-square]:before
+ content '\e08d'
+
+.oi[data-glyph=loop]:before
+ content '\e08e'
+
+.oi[data-glyph=magnifying-glass]:before
+ content '\e08f'
+
+.oi[data-glyph=map-marker]:before
+ content '\e090'
+
+.oi[data-glyph=map]:before
+ content '\e091'
+
+.oi[data-glyph=media-pause]:before
+ content '\e092'
+
+.oi[data-glyph=media-play]:before
+ content '\e093'
+
+.oi[data-glyph=media-record]:before
+ content '\e094'
+
+.oi[data-glyph=media-skip-backward]:before
+ content '\e095'
+
+.oi[data-glyph=media-skip-forward]:before
+ content '\e096'
+
+.oi[data-glyph=media-step-backward]:before
+ content '\e097'
+
+.oi[data-glyph=media-step-forward]:before
+ content '\e098'
+
+.oi[data-glyph=media-stop]:before
+ content '\e099'
+
+.oi[data-glyph=medical-cross]:before
+ content '\e09a'
+
+.oi[data-glyph=menu]:before
+ content '\e09b'
+
+.oi[data-glyph=microphone]:before
+ content '\e09c'
+
+.oi[data-glyph=minus]:before
+ content '\e09d'
+
+.oi[data-glyph=monitor]:before
+ content '\e09e'
+
+.oi[data-glyph=moon]:before
+ content '\e09f'
+
+.oi[data-glyph=move]:before
+ content '\e0a0'
+
+.oi[data-glyph=musical-note]:before
+ content '\e0a1'
+
+.oi[data-glyph=paperclip]:before
+ content '\e0a2'
+
+.oi[data-glyph=pencil]:before
+ content '\e0a3'
+
+.oi[data-glyph=people]:before
+ content '\e0a4'
+
+.oi[data-glyph=person]:before
+ content '\e0a5'
+
+.oi[data-glyph=phone]:before
+ content '\e0a6'
+
+.oi[data-glyph=pie-chart]:before
+ content '\e0a7'
+
+.oi[data-glyph=pin]:before
+ content '\e0a8'
+
+.oi[data-glyph=play-circle]:before
+ content '\e0a9'
+
+.oi[data-glyph=plus]:before
+ content '\e0aa'
+
+.oi[data-glyph=power-standby]:before
+ content '\e0ab'
+
+.oi[data-glyph=print]:before
+ content '\e0ac'
+
+.oi[data-glyph=project]:before
+ content '\e0ad'
+
+.oi[data-glyph=pulse]:before
+ content '\e0ae'
+
+.oi[data-glyph=puzzle-piece]:before
+ content '\e0af'
+
+.oi[data-glyph=question-mark]:before
+ content '\e0b0'
+
+.oi[data-glyph=rain]:before
+ content '\e0b1'
+
+.oi[data-glyph=random]:before
+ content '\e0b2'
+
+.oi[data-glyph=reload]:before
+ content '\e0b3'
+
+.oi[data-glyph=resize-both]:before
+ content '\e0b4'
+
+.oi[data-glyph=resize-height]:before
+ content '\e0b5'
+
+.oi[data-glyph=resize-width]:before
+ content '\e0b6'
+
+.oi[data-glyph=rss-alt]:before
+ content '\e0b7'
+
+.oi[data-glyph=rss]:before
+ content '\e0b8'
+
+.oi[data-glyph=script]:before
+ content '\e0b9'
+
+.oi[data-glyph=share-boxed]:before
+ content '\e0ba'
+
+.oi[data-glyph=share]:before
+ content '\e0bb'
+
+.oi[data-glyph=shield]:before
+ content '\e0bc'
+
+.oi[data-glyph=signal]:before
+ content '\e0bd'
+
+.oi[data-glyph=signpost]:before
+ content '\e0be'
+
+.oi[data-glyph=sort-ascending]:before
+ content '\e0bf'
+
+.oi[data-glyph=sort-descending]:before
+ content '\e0c0'
+
+.oi[data-glyph=spreadsheet]:before
+ content '\e0c1'
+
+.oi[data-glyph=star]:before
+ content '\e0c2'
+
+.oi[data-glyph=sun]:before
+ content '\e0c3'
+
+.oi[data-glyph=tablet]:before
+ content '\e0c4'
+
+.oi[data-glyph=tag]:before
+ content '\e0c5'
+
+.oi[data-glyph=tags]:before
+ content '\e0c6'
+
+.oi[data-glyph=target]:before
+ content '\e0c7'
+
+.oi[data-glyph=task]:before
+ content '\e0c8'
+
+.oi[data-glyph=terminal]:before
+ content '\e0c9'
+
+.oi[data-glyph=text]:before
+ content '\e0ca'
+
+.oi[data-glyph=thumb-down]:before
+ content '\e0cb'
+
+.oi[data-glyph=thumb-up]:before
+ content '\e0cc'
+
+.oi[data-glyph=timer]:before
+ content '\e0cd'
+
+.oi[data-glyph=transfer]:before
+ content '\e0ce'
+
+.oi[data-glyph=trash]:before
+ content '\e0cf'
+
+.oi[data-glyph=underline]:before
+ content '\e0d0'
+
+.oi[data-glyph=vertical-align-bottom]:before
+ content '\e0d1'
+
+.oi[data-glyph=vertical-align-center]:before
+ content '\e0d2'
+
+.oi[data-glyph=vertical-align-top]:before
+ content '\e0d3'
+
+.oi[data-glyph=video]:before
+ content '\e0d4'
+
+.oi[data-glyph=volume-high]:before
+ content '\e0d5'
+
+.oi[data-glyph=volume-low]:before
+ content '\e0d6'
+
+.oi[data-glyph=volume-off]:before
+ content '\e0d7'
+
+.oi[data-glyph=warning]:before
+ content '\e0d8'
+
+.oi[data-glyph=wifi]:before
+ content '\e0d9'
+
+.oi[data-glyph=wrench]:before
+ content '\e0da'
+
+.oi[data-glyph=x]:before
+ content '\e0db'
+
+.oi[data-glyph=yen]:before
+ content '\e0dc'
+
+.oi[data-glyph=zoom-in]:before
+ content '\e0dd'
+
+.oi[data-glyph=zoom-out]:before
+ content '\e0de'
diff --git a/src/visualizers/widgets/Sidebar/lib/font/fonts/open-iconic.eot b/src/visualizers/widgets/Sidebar/lib/font/fonts/open-iconic.eot
new file mode 100644
index 0000000..f98177d
Binary files /dev/null and b/src/visualizers/widgets/Sidebar/lib/font/fonts/open-iconic.eot differ
diff --git a/src/visualizers/widgets/Sidebar/lib/font/fonts/open-iconic.otf b/src/visualizers/widgets/Sidebar/lib/font/fonts/open-iconic.otf
new file mode 100644
index 0000000..f6bd684
Binary files /dev/null and b/src/visualizers/widgets/Sidebar/lib/font/fonts/open-iconic.otf differ
diff --git a/src/visualizers/widgets/Sidebar/lib/font/fonts/open-iconic.svg b/src/visualizers/widgets/Sidebar/lib/font/fonts/open-iconic.svg
new file mode 100644
index 0000000..32b2c4e
--- /dev/null
+++ b/src/visualizers/widgets/Sidebar/lib/font/fonts/open-iconic.svg
@@ -0,0 +1,543 @@
+
+
+
+
diff --git a/src/visualizers/widgets/Sidebar/lib/font/fonts/open-iconic.ttf b/src/visualizers/widgets/Sidebar/lib/font/fonts/open-iconic.ttf
new file mode 100644
index 0000000..fab6048
Binary files /dev/null and b/src/visualizers/widgets/Sidebar/lib/font/fonts/open-iconic.ttf differ
diff --git a/src/visualizers/widgets/Sidebar/lib/font/fonts/open-iconic.woff b/src/visualizers/widgets/Sidebar/lib/font/fonts/open-iconic.woff
new file mode 100644
index 0000000..f930998
Binary files /dev/null and b/src/visualizers/widgets/Sidebar/lib/font/fonts/open-iconic.woff differ
diff --git a/src/visualizers/widgets/MainView/styles/MainViewWidget.css b/src/visualizers/widgets/Sidebar/styles/SidebarWidget.css
similarity index 92%
rename from src/visualizers/widgets/MainView/styles/MainViewWidget.css
rename to src/visualizers/widgets/Sidebar/styles/SidebarWidget.css
index f9fc373..bbeaa4f 100644
--- a/src/visualizers/widgets/MainView/styles/MainViewWidget.css
+++ b/src/visualizers/widgets/Sidebar/styles/SidebarWidget.css
@@ -4,10 +4,23 @@
.main-view .side-nav-control {
padding-right: 1em;
+ padding-left: 1em;
padding-top: 1em;
line-height: inherit !important;
}
+.main-view .side-nav-icon {
+ padding-left: 1.1em;
+ padding-top: 0.75em;
+ padding-bottom: 0.5em;
+ line-height: inherit !important;
+}
+
+.main-view .side-nav-icon span {
+ color: #757575;
+ font-size: 16px;
+}
+
.main-view .side-nav-control span {
font-size: 16px;
color: #757575;
@@ -18,10 +31,6 @@
width: 40px;
}
-.main-view .hide-list ul {
- visibility: hidden;
-}
-
.main-view .side-nav {
transform: translateX(0);
transition: width 0.3s;
@@ -147,22 +156,11 @@
}
.main-view .side-nav {
- position: fixed;
- width: 200px;
left: 0;
- top: 0;
+ top: 64px;
+ bottom: 27px; /* footer height */
margin: 0;
- -o-transform: translateX(-100%);
- -ms-transform: translateX(-100%);
- -webkit-transform: translateX(-100%);
- -moz-transform: translateX(-100%);
- transform: translateX(-100%);
- height: 100%;
- height: calc(100% + 60px);
- height: -moz-calc(100%);
- padding-bottom: 60px;
background-color: #fff;
- z-index: 999;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow-y: auto;
diff --git a/webgme-setup.json b/webgme-setup.json
index 4ce3941..7a8f97e 100644
--- a/webgme-setup.json
+++ b/webgme-setup.json
@@ -54,7 +54,12 @@
"test": "test/plugins/UpdateLibrarySeed"
}
},
- "layouts": {},
+ "layouts": {
+ "SidebarLayout": {
+ "src": "src/layouts/SidebarLayout",
+ "enabled": true
+ }
+ },
"visualizers": {
"ArchEditor": {
"src": "panels/ArchEditor/ArchEditorPanel",
@@ -189,12 +194,12 @@
"secondary": false,
"widget": "src/visualizers/widgets/PipelineIndex"
},
- "MainView": {
- "src": "panels/MainView/MainViewPanel",
- "title": "MainView",
- "panel": "src/visualizers/panels/MainView",
+ "Sidebar": {
+ "src": "panels/Sidebar/SidebarPanel",
+ "title": "Sidebar",
+ "panel": "src/visualizers/panels/Sidebar",
"secondary": false,
- "widget": "src/visualizers/widgets/MainView"
+ "widget": "src/visualizers/widgets/Sidebar"
},
"JobEditor": {
"src": "panels/JobEditor/JobEditorPanel",
@@ -237,6 +242,27 @@
"panel": "src/visualizers/panels/WorkerHeader",
"secondary": false,
"widget": "src/visualizers/widgets/WorkerHeader"
+ },
+ "ArtifactIndex": {
+ "src": "panels/ArtifactIndex/ArtifactIndexPanel",
+ "title": "ArtifactIndex",
+ "panel": "src/visualizers/panels/ArtifactIndex",
+ "secondary": false,
+ "widget": "src/visualizers/widgets/ArtifactIndex"
+ },
+ "ArchIndex": {
+ "src": "panels/ArchIndex/ArchIndexPanel",
+ "title": "ArchIndex",
+ "panel": "src/visualizers/panels/ArchIndex",
+ "secondary": false,
+ "widget": "src/visualizers/widgets/ArchIndex"
+ },
+ "ForwardViz": {
+ "src": "panels/ForwardViz/ForwardVizPanel",
+ "title": "ForwardViz",
+ "panel": "src/visualizers/panels/ForwardViz",
+ "secondary": false,
+ "widget": "src/visualizers/widgets/ForwardViz"
}
},
"addons": {},
@@ -319,7 +345,7 @@
"CHFLayout": {
"project": "webgme-chflayout",
"path": "node_modules/webgme-chflayout/src/layouts/CHFLayout",
- "enabled": true
+ "enabled": false
}
},
"visualizers": {