From 2a246acfdc7cc1168def0975f13ba3601691c4ce Mon Sep 17 00:00:00 2001
From: buddha87 <mail@jharrer.de>
Date: Tue, 20 Dec 2016 20:26:44 +0100
Subject: [PATCH] Tests + New theming structure.

---
 js/humhub/humhub.ui.richtext_1.js             | 438 ++++++++++++++++++
 less/activities.less                          |  13 +
 less/badge.less                               |  26 ++
 less/base.less                                |  65 +++
 less/bootstrap.less                           |  25 +
 less/button.less                              | 208 +++++++++
 less/comment.less                             |  46 ++
 less/datepicker.less                          |  50 ++
 less/dropdown.less                            |  69 +++
 less/file.less                                | 160 +++++++
 less/form.less                                | 258 +++++++++++
 less/gridview.less                            |  58 +++
 less/humhub.less                              |  36 ++
 less/installer.less                           |  42 ++
 less/list-group.less                          |  48 ++
 less/loader.less                              |  67 +++
 less/login.less                               |  45 ++
 less/markdown.less                            |  78 ++++
 less/media.less                               | 115 +++++
 less/mentioning.less                          |  25 +
 less/mixins.less                              | 141 ++++++
 less/modal.less                               | 127 +++++
 less/module.less                              |   7 +
 less/nav.less                                 | 204 ++++++++
 less/notification.less                        |  18 +
 less/oembed.less                              |  16 +
 less/pagination.less                          |  24 +
 less/panel.less                               | 189 ++++++++
 less/popover.less                             |  29 ++
 less/progress.less                            |  24 +
 less/sidebar.less                             |   5 +
 less/space.less                               |  70 +++
 less/stream.less                              |  84 ++++
 less/table.less                               |  38 ++
 less/tags.less                                |  13 +
 less/tooltip.less                             |  44 ++
 less/topbar.less                              | 341 ++++++++++++++
 less/tour.less                                |  21 +
 less/user-feedback.less                       | 128 +++++
 less/variables.less                           |  21 +
 .../_generated/AcceptanceTesterActions.php    |   2 +-
 .../_generated/AcceptanceTesterActions.php    |   2 +-
 .../_generated/FunctionalTesterActions.php    |   2 +-
 .../_support/_generated/UnitTesterActions.php |   2 +-
 .../acceptance/CreateSpaceCest.php            |  33 +-
 .../_generated/AcceptanceTesterActions.php    |   2 +-
 themes/HumHub/less/build.less                 |  15 +
 themes/HumHub/less/mixins.less                |  10 +
 themes/HumHub/less/variables.less             |  18 +
 49 files changed, 3483 insertions(+), 19 deletions(-)
 create mode 100644 js/humhub/humhub.ui.richtext_1.js
 create mode 100644 less/activities.less
 create mode 100644 less/badge.less
 create mode 100644 less/base.less
 create mode 100644 less/bootstrap.less
 create mode 100644 less/button.less
 create mode 100644 less/comment.less
 create mode 100644 less/datepicker.less
 create mode 100644 less/dropdown.less
 create mode 100644 less/file.less
 create mode 100644 less/form.less
 create mode 100644 less/gridview.less
 create mode 100644 less/humhub.less
 create mode 100644 less/installer.less
 create mode 100644 less/list-group.less
 create mode 100644 less/loader.less
 create mode 100644 less/login.less
 create mode 100644 less/markdown.less
 create mode 100644 less/media.less
 create mode 100644 less/mentioning.less
 create mode 100644 less/mixins.less
 create mode 100644 less/modal.less
 create mode 100644 less/module.less
 create mode 100644 less/nav.less
 create mode 100644 less/notification.less
 create mode 100644 less/oembed.less
 create mode 100644 less/pagination.less
 create mode 100644 less/panel.less
 create mode 100644 less/popover.less
 create mode 100644 less/progress.less
 create mode 100644 less/sidebar.less
 create mode 100644 less/space.less
 create mode 100644 less/stream.less
 create mode 100644 less/table.less
 create mode 100644 less/tags.less
 create mode 100644 less/tooltip.less
 create mode 100644 less/topbar.less
 create mode 100644 less/tour.less
 create mode 100644 less/user-feedback.less
 create mode 100644 less/variables.less
 create mode 100644 themes/HumHub/less/build.less
 create mode 100644 themes/HumHub/less/mixins.less
 create mode 100644 themes/HumHub/less/variables.less

diff --git a/js/humhub/humhub.ui.richtext_1.js b/js/humhub/humhub.ui.richtext_1.js
new file mode 100644
index 0000000000..60fe3b3c79
--- /dev/null
+++ b/js/humhub/humhub.ui.richtext_1.js
@@ -0,0 +1,438 @@
+/**
+ * Manages the client/server communication. Handles humhub json api responses and
+ * pjax requests.
+ */
+humhub.module('ui.richtext', function(module, require, $) {
+
+    var Widget = require('ui.widget').Widget;
+    var util = require('util');
+    var object = util.object;
+    var string = util.string;
+
+    var Richtext = function(node, options) {
+        Widget.call(this, node, options);
+    };
+
+    object.inherits(Richtext, Widget);
+
+    Richtext.component = 'humhub-ui-richtext';
+
+    Richtext.prototype.init = function() {
+        this.$input = $('#' + this.$.attr('id') + '_input').hide();
+        this.features = [];
+        this.checkPlaceholder();
+        this.initEvents();
+        if(this.options.disabled) {
+            this.disable();
+        }
+        console.log(module.config['emoji.url']);
+    };
+
+    Richtext.prototype.initEvents = function() {
+        var that = this;
+        this.$.on('focus', function() {
+            that.checkPlaceholder(true);
+            // Initialize features on first focus.
+            if(!that.featuresInitialized) {
+                that.initFeatures();
+            }
+        }).on('focusout', function() {
+            that.update();
+            that.checkPlaceholder();
+        }).on('paste', function(event) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+
+            var text = "";
+            if(event.originalEvent.clipboardData) { //Forefox, Webkit
+                text = event.originalEvent.clipboardData.getData('text/plain');
+            } else if(window.clipboardData) { // IE
+                text = window.clipboardData.getData("Text");
+            }
+
+            that.insertTextAtCursor(text);
+        }).on('keydown', function(e) {
+            that.checkForEmptySpans();
+        }).on('keypress', function(e) {
+            switch(e.which) {
+                case 13: // Enter
+                    // Insert a space after some delay to not interupt the browsers default new line insertion.
+                    var $context = $(window.getSelection().getRangeAt(0).commonAncestorContainer);
+                    setTimeout(function() {
+                        if($context[0].nodeType === Node.TEXT_NODE) {
+                            $context[0].textContent += '\u00a0';
+                        }
+                    }, 1000);
+                    break;
+                case 8: // Backspace
+                    // Note chrome won't fire the backspace keypress event, but we don't need the workaround for chrome so its ok..
+                    that.checkLinkRemoval();
+                    break;
+            }
+        }).on('clear', function(e) {
+            that.clear();
+        }).on('disable', function(e) {
+            that.disable();
+        });
+    };
+
+    /**
+     * This is a workaround for deleting links as a whole in firefox https://bugzilla.mozilla.org/show_bug.cgi?id=685445
+     */
+    Richtext.prototype.checkLinkRemoval = function() {
+        var position = this.$.caret('offset');
+
+        if(!position) {
+            return;
+        }
+
+        var that = this;
+        // Check if the caret position is right before a link, if yes remove link and perhaps also the parent if empty.
+        this.$.find('.richtext-link').each(function() {
+            var $this = $(this);
+            var offset = $this.offset();
+            var right = offset.left + $this.outerWidth(true);
+
+            // The caret top position seems a bit out in some cases...
+            if(Math.abs(position.left - right) < 1 && Math.abs(position.top - offset.top) < 18) {
+                $this.remove();
+
+                // This is a workaround for a caret position issue in firefox https://bugzilla.mozilla.org/show_bug.cgi?id=904846
+                _checkCaretPositionAfterRemove(that.$);
+                return false; // leave loop
+            }
+        });
+    };
+
+    var _checkCaretPositionAfterRemove = function($node) {
+        if(!$node.text().length) {
+            var spaceText = document.createTextNode("\u00a0");
+            $node.prepend(spaceText);
+
+            var sel = window.getSelection();
+            var range = document.createRange();
+
+            range.setStart(spaceText, 0);
+            range.collapse(true);
+
+            sel.removeAllRanges();
+            sel.addRange(range);
+        }
+    };
+
+    /**
+     *  Inserts the given text at the current cursor position.
+     *  This function gets sure not to insert unwanted html by escaping html chars.
+     *  
+     * @param {type} text
+     * @returns {undefined}
+     */
+    Richtext.prototype.insertTextAtCursor = function(text) {
+        // Get rid of unwanted html
+        var text = $('<div></div>').append(string.escapeHtml(text)).text();
+
+        var lastNode;
+        var sel = window.getSelection();
+
+        // Clear current selection, we'll overwrite selected text
+        var range = sel.getRangeAt(0);
+        range.deleteContents();
+
+        // Remove leading line-breaks and spaces
+        text = text.replace(/^(?:\r\n|\r|\n)/g, '').trim();
+
+        // We insert the lines reversed since we don't have to align the range
+        var lines = text.split(/(?:\r\n|\r|\n)/g).reverse();
+
+        $.each(lines, function(i, line) {
+            // Prevent break after last line
+            if(i !== 0) {
+                var br = document.createElement("br");
+                range.insertNode(br);
+            }
+
+            // Insert actual text node
+            var newNode = document.createTextNode(line.trim());
+            range.insertNode(newNode);
+
+            //Insert leading spaces as textnodes
+            var leadingSpaces = line.match(/^\s+/);
+            if(leadingSpaces) {
+                var spaceCount = leadingSpaces[0].length;
+                while(spaceCount > 0) {
+                    var spaceNode = document.createTextNode("\u00a0");
+                    range.insertNode(spaceNode);
+                    spaceCount--;
+                }
+            }
+
+            // The last node of the loop is the first node in dom since we insert reversed
+            if(i === 0) {
+                lastNode = newNode;
+            }
+        });
+
+        // Align range after insertion
+        range.setStartAfter(lastNode);
+        range.setEndAfter(lastNode);
+        sel.removeAllRanges();
+        sel.addRange(range);
+    };
+
+    Richtext.prototype.update = function() {
+        this.$input.val(this.getPlainText());
+    };
+
+    Richtext.prototype.checkPlaceholder = function(focus) {
+        if(!focus && !this.$.text().trim().length) {
+            this.$.addClass('atwho-placeholder');
+            this.$.html(this.options.placeholder);
+            this.$.attr('spellcheck', 'false');
+        } else if(this.$.hasClass('atwho-placeholder')) {
+            this.$.removeClass('atwho-placeholder');
+            this.$.attr('spellcheck', 'true');
+            this.$.html('');
+        }
+    };
+
+    Richtext.prototype.initFeatures = function() {
+        var that = this;
+        $.each(Richtext.features, function(id, feature) {
+            if(!that.isFeatureEnabled(id)) {
+                return;
+            }
+
+            if(feature.atwho) {
+                that.initAtwhoFeature(id, feature);
+            }
+        });
+
+        // It seems atwho detatches the original element so we have to do a requery
+        this.$ = $('#' + this.$.attr('id'));
+        this.featuresInitialized = true;
+    };
+
+    Richtext.prototype.checkForEmptySpans = function($node) {
+        $node = $node || this.$;
+        $node.find('span').each(function() {
+            _checkEmptySpan($(this));
+        });
+    };
+
+    var _checkEmptySpan = function($node) {
+        if($node.is('span') && !$node.contents().length) {
+            var $parent = $node.parent();
+            $node.remove();
+            _checkEmptySpan($parent);
+        }
+    };
+
+    Richtext.prototype.isFeatureEnabled = function(id) {
+        if(this.options.excludes && this.options.excludes.indexOf(id) >= 0) {
+            return false;
+        }
+
+        if(this.options.includes && this.options.includes.length && this.options.includes.indexOf(id) < 0) {
+            return false;
+        }
+
+        return true;
+    };
+
+    Richtext.prototype.initAtwhoFeature = function(id, feature) {
+        var options = (object.isFunction(feature.atwho))
+                ? feature.atwho.call(this, feature)
+                : $.extend({}, feature.atwho);
+
+        if(object.isFunction(feature.init)) {
+            feature.init.call(this, feature, options);
+        }
+
+        if(feature.atwho) {
+            this.$.atwho(options);
+        }
+
+        this.features.push(id);
+    };
+
+    Richtext.prototype.disable = function(tooltip) {
+        tooltip = tooltip || this.options.disabledText;
+        this.$.removeAttr('contenteditable').attr({
+            disabled: 'disabled',
+            title : tooltip,
+        }).tooltip({
+            placement : 'bottom'
+        });
+    };
+    
+    Richtext.prototype.clear = function() {
+        this.$.html('');
+        this.checkPlaceholder();
+    };
+
+    Richtext.prototype.getFeatures = function() {
+        var result = [];
+        $.each(this.features, function(i, id) {
+            result.push(Richtext.features[id]);
+        });
+
+        return result;
+    };
+
+    Richtext.prototype.getPlainText = function() {
+        // GENERATE USER GUIDS
+        var that = this;
+
+        var $clone = this.$.clone();
+        $.each(this.getFeatures(), function(id, feature) {
+            if(object.isFunction(feature.parse)) {
+                feature.parse($clone, that, feature);
+            }
+        });
+
+        var html = $clone.html();
+
+        // replace html space
+        html = html.replace(/\&nbsp;/g, ' ');
+
+        // rebuild tag structure for webkit browsers
+        html = html.replace(/\<div>\s*<br\s*\\*>\<\/div>/g, '<div></div>');
+
+        // replace all div tags with br tags (webkit)
+        html = html.replace(/\<div>/g, '<br>');
+
+        // replace all p tags with br tags (IE)
+        html = html.replace(/\<p>\<br\s*\\*>\<\/p>/g, '<br>');
+        html = html.replace(/\<\/p>/g, '<br>');
+
+        // remove all line breaks
+        html = html.replace(/(?:\r\n|\r|\n)/g, "");
+
+        // replace all <br> with new line break
+        $clone.html(html.replace(/\<br\s*\>/g, '\n'));
+
+        // return plain text without html tags
+        return $clone.text().trim();
+    }
+    ;
+
+    Richtext.features = {};
+
+    Richtext.features.emoji = {
+        'emojis': [
+            "Relaxed", "Yum", "Relieved", "Hearteyes", "Cool", "Smirk",
+            "KissingClosedEyes", "StuckOutTongue", "StuckOutTongueWinkingEye", "StuckOutTongueClosedEyes", "Disappointed", "Frown",
+            "ColdSweat", "TiredFace", "Grin", "Sob", "Gasp", "Gasp2",
+            "Laughing", "Joy", "Sweet", "Satisfied", "Innocent", "Wink",
+            "Ambivalent", "Expressionless", "Sad", "Slant", "Worried", "Kissing",
+            "KissingHeart", "Angry", "Naughty", "Furious", "Cry", "OpenMouth",
+            "Fearful", "Confused", "Weary", "Scream", "Astonished", "Flushed",
+            "Sleeping", "NoMouth", "Mask", "Worried", "Smile", "Muscle",
+            "Facepunch", "ThumbsUp", "ThumbsDown", "Beers", "Cocktail", "Burger",
+            "PoultryLeg", "Party", "Cake", "Sun", "Fire", "Heart"
+        ],
+        'atwho': {
+            at: ":",
+            highlight_first: true,
+            limit: 100
+        },
+        init: function(feature, options) {
+            options.data = feature.emojis;
+            options.insert_tpl = "<img data-emoji-name=';${name};' class='atwho-emoji' with='18' height='18' src='" + module.config['emoji.url'] + "${name}.svg' />";
+            options.tpl = "<li class='atwho-emoji-entry' data-value=';${name};'><img with='18' height='18' src='" + module.config['emoji.url'] + "${name}.svg' /></li>";
+        },
+        parse: function($clone) {
+            $clone.find('.atwho-emoji').each(function() {
+                $(this).replaceWith($(this).data('emoji-name'));
+            });
+        }
+    };
+
+    /**
+     * Mentioning feature supports mentionings by typing @ the default mentioning calls an url after typing three digits.
+     * Other mentionings can be registered by adding Richtext.features with the at option @:<prefix>
+     */
+    Richtext.features.mentioning = {};
+    Richtext.features.mentioning.atwho = function() {
+        // this is the widget instance.
+        var that = this;
+        return {
+            at: "@",
+            data: [{image: '', 'cssClass': 'hint', name: module.text('info.minInput')}],
+            insert_tpl: "<a href='${link}' class='atwho-user richtext-mention richtext-link' contenteditable='false' target='_blank' data-guid='${atwho-at}-${type}${guid}'>${atwho-data-value}&#x200b;</a>",
+            tpl: "<li class='hint' data-value=''>${name}</li>",
+            limit: 10,
+            highlight_first: false,
+            callbacks: {
+                matcher: function(flag, subtext, should_start_with_space) {
+                    var match, regexp;
+                    regexp = new RegExp(/(\s+|^)@([\u00C0-\u1FFF\u2C00-\uD7FF\w\s\-\']*$)/);
+                    match = regexp.exec(subtext);
+
+                    this.setting.tpl = "<li class='hint' data-value=''>${name}</li>";
+
+                    if(match && typeof match[2] !== 'undefined') {
+                        return match[2];
+                    }
+
+                    return null;
+                },
+                remote_filter: function(query, callback) {
+                    this.setting.highlight_first = false;
+
+                    // check the char length and data-query attribute for changing plugin settings for showing results
+                    if(query.length >= 3) {
+                        // Render loading user feedback.
+                        this.setting.tpl = "<li class='hint' data-value=''>${name}</li>";
+                        this.view.render([{"type": "test", "cssClass": "hint", "name": module.text('info.loading'), "image": "", "link": ""}]);
+
+                        // set plugin settings for showing results
+                        this.setting.highlight_first = true;
+                        this.setting.tpl = '<li class="${cssClass}" data-value="@${name}">${image} ${name}</li>';
+                        $.getJSON(that.options.mentioningUrl, {keyword: query}, function(data) {
+                            callback(data);
+                        });
+
+                        // reset query count
+                        query.length = 0;
+                    }
+                }
+            }
+        };
+    };
+
+    Richtext.features.mentioning.init = function(feature, options) {
+        var widget = this;
+        //This is a workaround for mobile browsers especially for Android Chrome which is not able to remove contenteditable="false" nodes.
+        if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
+            this.$.on('contextmenu', 'a, img', function() {
+                var $this = $(this);
+                if($this.parent().is('span')) {
+                    $this.parent().remove();
+                } else {
+                    $this.remove();
+                }
+
+                widget.checkForEmptySpans();
+                return false;
+            });
+        }
+    };
+
+    /**
+     * Used to parse the feature elements.
+     * 
+     * @param {type} $clone
+     * @param {type} widget
+     * @returns {undefined}
+     */
+    Richtext.features.mentioning.parse = function($clone, widget) {
+        $clone.find('.atwho-user, .atwho-space').each(function() {
+            $(this).text($(this).data('guid'));
+        });
+    };
+
+    module.export({
+        Richtext: Richtext
+    });
+});
\ No newline at end of file
diff --git a/less/activities.less b/less/activities.less
new file mode 100644
index 0000000000..708e7d5751
--- /dev/null
+++ b/less/activities.less
@@ -0,0 +1,13 @@
+// Activities
+.activities {
+  max-height: 400px;
+  overflow: auto;
+  li .media {
+    position: relative;
+  }
+  li .media .img-space {
+    position: absolute;
+    top: 14px;
+    left: 14px;
+  }
+}
\ No newline at end of file
diff --git a/less/badge.less b/less/badge.less
new file mode 100644
index 0000000000..ac3ebf412d
--- /dev/null
+++ b/less/badge.less
@@ -0,0 +1,26 @@
+//
+// Badges
+// --------------------------------------------------
+.badge-space {
+  margin-top: 6px;
+}
+
+.badge-space-chooser {
+    padding:3px 5px;
+    margin-left:1px;
+}
+
+.badge {
+  padding: 3px 5px;
+  border-radius: 2px;
+  font-weight: normal;
+  font-family: Arial, sans-serif;
+  font-size: 10px !important;
+  text-transform: uppercase;
+  color: #fff;
+  vertical-align: baseline;
+  white-space: nowrap;
+  text-shadow: none;
+  background-color: @background3;
+  line-height: 1;
+}
\ No newline at end of file
diff --git a/less/base.less b/less/base.less
new file mode 100644
index 0000000000..ac79453568
--- /dev/null
+++ b/less/base.less
@@ -0,0 +1,65 @@
+//
+// General
+// --------------------------------------------------
+body {
+  padding-top: 130px;
+  background-color: @background2;
+  color: #777;
+  font-family: 'Open Sans', sans-serif;
+  a,
+  a:hover,
+  a:focus,
+  a:active,
+  a.active {
+    color: @font3;
+    text-decoration: none;
+  }
+}
+
+a:hover {
+  text-decoration: none;
+}
+
+hr {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+// Cols (change position property to prevent the cutting of tooltips or menus)
+.col-md-1,
+.col-md-2,
+.col-md-3,
+.col-md-4,
+.col-md-5,
+.col-md-6,
+.col-md-7,
+.col-md-8,
+.col-md-9,
+.col-md-10,
+.col-md-11,
+.col-md-12 {
+  position: inherit;
+}
+
+h4 {
+  font-weight: 300;
+  font-size: 150%;
+}
+
+input[type=text],
+input[type=password],
+input[type=select] {
+  /* Remove First */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.powered,
+.powered a {
+  color: #b8c7d3 !important;
+}
+
+.langSwitcher {
+  display: inline-block;
+}
\ No newline at end of file
diff --git a/less/bootstrap.less b/less/bootstrap.less
new file mode 100644
index 0000000000..faa4568d56
--- /dev/null
+++ b/less/bootstrap.less
@@ -0,0 +1,25 @@
+//
+// Overwrite of some bootstrap components
+// --------------------------------------------------
+
+//
+// Well
+// --------------------------------------------------
+.well-small {
+  padding: 10px;
+  border-radius: 3px;
+}
+
+.well {
+  border: none;
+  box-shadow: none;
+  background-color: @background2;
+  margin-bottom: 1px;
+  hr {
+    margin: 15px 0 10px;
+    border-top: 1px solid darken(@background2, 8%);
+  }
+  table > thead {
+    font-size: 11px;
+  }
+}
\ No newline at end of file
diff --git a/less/button.less b/less/button.less
new file mode 100644
index 0000000000..a98c91d7bc
--- /dev/null
+++ b/less/button.less
@@ -0,0 +1,208 @@
+//
+// Buttons
+// --------------------------------------------------
+.btn {
+  float: none;
+  border: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  -moz-box-shadow: none;
+  background-image: none;
+  text-shadow: none;
+  border-radius: 3px;
+  outline: none !important;
+  margin-bottom: 0;
+  font-size: 14px;
+  font-weight: 600;
+  padding: 8px 16px;
+}
+
+.input.btn {
+  outline: none;
+}
+
+.btn-lg {
+  padding: 16px 28px;
+}
+
+.btn-sm {
+  padding: 4px 8px;
+  font-size: 12px;
+  i {
+    font-size: 14px;
+  }
+}
+
+.btn-xs {
+  padding: 1px 5px;
+  font-size: 12px;
+}
+
+.btn-default {
+  background: @background2;
+  color: @font2 !important;
+  &:hover,
+  &:focus {
+    background: darken(@background2, 2%);
+    text-decoration: none;
+    color: @font2;
+  }
+  &:active,
+  &.active {
+    outline: 0;
+    background: darken(@background2, 5%);
+  }
+}
+
+.btn-default[disabled],
+.btn-default.disabled {
+  background: lighten(@background2, 2%);
+  &:hover,
+  &:focus {
+    background: lighten(@background2, 2%);
+  }
+  &:active,
+  &.active {
+    background: lighten(@background2, 2%);
+  }
+}
+
+.btn-primary {
+  background: @primary;
+  color: white !important;
+  &:hover,
+  &:focus {
+    background: darken(@primary, 5%);
+    text-decoration: none;
+  }
+  &:active,
+  &.active {
+    outline: 0;
+    background: darken(@primary, 5%) !important;
+  }
+}
+
+.btn-primary[disabled],
+.btn-primary.disabled {
+  background: lighten(@primary, 5%);
+  &:hover,
+  &:focus {
+    background: lighten(@primary, 5%);
+  }
+  &:active,
+  &.active {
+    background: lighten(@primary, 5%) !important;
+  }
+}
+
+.btn-info {
+  background: @info;
+  color: white !important;
+  &:hover,
+  &:focus {
+    background: darken(@info, 5%) !important;
+    text-decoration: none;
+  }
+  &:active,
+  &.active {
+    outline: 0;
+    background: darken(@info, 5%);
+  }
+}
+
+.btn-info[disabled],
+.btn-info.disabled {
+  background: lighten(@info, 5%);
+  &:hover,
+  &:focus {
+    background: lighten(@info, 5%);
+  }
+  &:active,
+  &.active {
+    background: lighten(@info, 5%) !important;
+  }
+}
+
+.btn-danger {
+  background: @danger;
+  color: white !important;
+  &:hover,
+  &:focus {
+    background: darken(@danger, 5%);
+    text-decoration: none;
+  }
+  &:active,
+  &.active {
+    outline: 0;
+    background: darken(@danger, 5%) !important;
+  }
+}
+
+.btn-danger[disabled],
+.btn-danger.disabled {
+  background: lighten(@danger, 5%);
+  &:hover,
+  &:focus {
+    background: lighten(@danger, 5%);
+  }
+  &:active,
+  &.active {
+    background: lighten(@danger, 5%) !important;
+  }
+}
+
+.btn-success {
+  background: @success;
+  color: white !important;
+  &:hover,
+  &:focus {
+    background: darken(@success, 5%);
+    text-decoration: none;
+  }
+  &:active,
+  &.active {
+    outline: 0;
+    background: darken(@success, 5%) !important;
+  }
+}
+
+.btn-success[disabled],
+.btn-success.disabled {
+  background: lighten(@success, 5%);
+  &:hover,
+  &:focus {
+    background: lighten(@success, 5%);
+  }
+  &:active,
+  &.active {
+    background: lighten(@success, 5%) !important;
+  }
+}
+
+.btn-warning {
+  background: @warning;
+  color: white !important;
+  &:hover,
+  &:focus {
+    background: darken(@warning, 2%);
+    text-decoration: none;
+  }
+  &:active,
+  &.active {
+    outline: 0;
+    background: darken(@warning, 2%) !important;
+  }
+}
+
+.btn-warning[disabled],
+.btn-warning.disabled {
+  background: lighten(@warning, 5%);
+  &:hover,
+  &:focus {
+    background: lighten(@warning, 5%);
+  }
+  &:active,
+  &.active {
+    background: lighten(@warning, 5%) !important;
+  }
+}
\ No newline at end of file
diff --git a/less/comment.less b/less/comment.less
new file mode 100644
index 0000000000..746a760c42
--- /dev/null
+++ b/less/comment.less
@@ -0,0 +1,46 @@
+//
+// Comments
+// --------------------------------------------------
+.comment-container {
+  margin-top: 10px;
+}
+
+
+.comment {
+  .media {
+    position: relative !important;
+    margin-top: 0;
+    
+    .nav-pills.preferences {
+      display: none;
+      right: -3px;
+      top: -3px;
+    }
+  }
+  
+  /*-- Since v1.2 overflow: visible */
+  .media-body {
+      overflow:visible;
+  }
+}
+
+.comment.guest-mode {
+  .media:last-child {
+    .wall-entry-controls {
+      margin-bottom: 0;
+    }
+    hr {
+      display: none;
+    }
+  }
+}
+
+// jPlayer Extension
+.comment {
+  .jp-progress {
+    background-color: #dbdcdd !important;
+  }
+  .jp-play-bar {
+    background: #cacaca;
+  }
+}
\ No newline at end of file
diff --git a/less/datepicker.less b/less/datepicker.less
new file mode 100644
index 0000000000..664dc7a131
--- /dev/null
+++ b/less/datepicker.less
@@ -0,0 +1,50 @@
+// Datepicker
+.ui-widget-header {
+  border: none !important;
+  background: #fff !important;
+  color: @font2 !important;
+  font-weight: 300 !important;
+}
+
+.ui-widget-content {
+  border: 1px solid #dddcda !important;
+  border-radius: 0 !important;
+  background: #fff;
+  color: @font3 !important;
+  -webkit-box-shadow: 0 6px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.1);
+}
+
+.ui-datepicker .ui-datepicker-prev span,
+.ui-datepicker .ui-datepicker-next span {
+  opacity: 0.2;
+}
+
+.ui-datepicker .ui-datepicker-prev:hover,
+.ui-datepicker .ui-datepicker-next:hover {
+  background: #fff !important;
+  border: none;
+  margin: 1px;
+}
+
+.ui-state-default,
+.ui-widget-content .ui-state-default,
+.ui-widget-header .ui-state-default {
+  border: none !important;
+  background: @background1 !important;
+  color: @font2 !important;
+}
+
+.ui-state-highlight,
+.ui-widget-content .ui-state-highlight,
+.ui-widget-header .ui-state-highlight {
+  border: none !important;
+  border: 1px solid @background4 !important;
+}
+
+.ui-state-active,
+.ui-widget-content .ui-state-active,
+.ui-widget-header .ui-state-active {
+  border: 1px solid @info !important;
+  background: lighten(@info, 25%) !important;
+}
\ No newline at end of file
diff --git a/less/dropdown.less b/less/dropdown.less
new file mode 100644
index 0000000000..1bd08a2b8d
--- /dev/null
+++ b/less/dropdown.less
@@ -0,0 +1,69 @@
+//
+// Dropdowns
+// --------------------------------------------------
+.dropdown-menu {
+  li {
+    a {
+      font-size: 13px !important;
+      font-weight: 600 !important;
+      i {
+        margin-right: 5px;
+        font-size: 14px;
+        display: inline-block;
+        width: 14px;
+      }
+    }
+    a:hover,
+    a:visited,
+    a:hover,
+    a:focus {
+      background: none;
+      cursor:pointer;
+    }
+  }
+  li:hover,
+  li.selected {
+    color: @font3;
+  }
+
+  li:first-child {
+    margin-top: 3px;
+  }
+
+  li:last-child {
+    margin-bottom: 3px;
+  }
+}
+
+.modal,
+.panel,
+.nav-tabs {
+  .dropdown-menu {
+    border: 1px solid @background3;
+    li.divider {
+      background-color: @background1;
+      border-bottom: none;
+      margin: 9px 1px !important;
+    }
+    li {
+      border-left: 3px solid white;
+      a {
+        color: @font3;
+        font-size: 14px;
+        font-weight: 400;
+        padding: 4px 15px;
+        i {
+          margin-right: 5px;
+        }
+      }
+      a:hover {
+        background: none;
+      }
+    }
+    li:hover,
+    li.selected {
+      border-left: 3px solid @info;
+      background-color: @background1 !important;
+    }
+  }
+}
\ No newline at end of file
diff --git a/less/file.less b/less/file.less
new file mode 100644
index 0000000000..f705cceef4
--- /dev/null
+++ b/less/file.less
@@ -0,0 +1,160 @@
+.files,
+#postFormFiles_list {
+    padding-left: 0;
+}
+
+// File upload list for posts
+.contentForm-upload-list {
+    padding-left: 0;
+    li:first-child {
+        margin-top: 10px;
+    }
+}
+
+.file_upload_remove_link,
+.file_upload_remove_link:hover {
+    color: @danger;
+    cursor: pointer;
+}
+
+
+.post-files {
+    margin-top: 10px;
+    img {
+        vertical-align: top;
+        margin-bottom: 3px;
+        margin-right: 5px;
+        max-height: 130px;
+        -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
+        animation-duration: 2s;
+    }
+}
+
+#wallStream.mobile {
+    .post-files {
+        margin-top: 10px;
+        display: flex;
+        overflow-x: auto;
+        img {
+            max-width: 190px;
+        }
+    }
+}
+
+// fileupload button
+.comment_create,
+.content_edit {
+    position: relative;
+
+    .comment-buttons {
+        position: absolute;
+        top: 2px;
+        right: 5px;
+    }
+
+    .btn-comment-submit {
+        margin-top: 3px;
+    }
+
+    .fileinput-button {
+        float: left;
+        padding: 6px 10px;
+        background: transparent !important;
+        .fa {
+            color: @background3;
+        }
+    }
+    .fileinput-button:hover .fa {
+        background: transparent !important;
+        color: @background4;
+    }
+    .fileinput-button:active {
+        box-shadow: none !important;
+    }
+}
+
+
+.file-preview-content {
+    cursor: pointer;
+}
+
+//
+// Profile image upload
+//
+.image-upload-container {
+  position: relative;
+  .image-upload-buttons {
+    display: none;
+    position: absolute;
+    right: 5px;
+    bottom: 5px;
+  }
+  input[type="file"] {
+    position: absolute;
+
+    //background-color: red;
+    opacity: 0;
+  }
+  .image-upload-loader {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+    background: #f8f8f8;
+  }
+}
+
+
+// Mime-Types
+.mime {
+    background-repeat: no-repeat;
+    background-position: 0 0;
+    padding: 1px 0 4px 26px;
+}
+
+.mime-word {
+    background-image: url("../img/mime/word.png");
+}
+
+.mime-excel {
+    background-image: url("../img/mime/excel.png");
+}
+
+.mime-powerpoint {
+    background-image: url("../img/mime/powerpoint.png");
+}
+
+.mime-pdf {
+    background-image: url("../img/mime/pdf.png");
+}
+
+.mime-zip {
+    background-image: url("../img/mime/zip.png");
+}
+
+.mime-image {
+    background-image: url("../img/mime/image.png");
+}
+
+.mime-file {
+    background-image: url("../img/mime/file.png");
+}
+
+.mime-photoshop {
+    background-image: url("../img/mime/photoshop.png");
+}
+
+.mime-illustrator {
+    background-image: url("../img/mime/illustrator.png");
+}
+
+.mime-video {
+    background-image: url("../img/mime/video.png");
+}
+
+.mime-audio {
+    background-image: url("../img/mime/audio.png");
+}
\ No newline at end of file
diff --git a/less/form.less b/less/form.less
new file mode 100644
index 0000000000..4b76fccb79
--- /dev/null
+++ b/less/form.less
@@ -0,0 +1,258 @@
+//
+// Forms
+// --------------------------------------------------
+.radio,
+.checkbox {
+    margin-top: 5px !important;
+    margin-bottom: 0;
+}
+
+.radio label,
+.checkbox label {
+    padding-left: 10px;
+}
+
+.form-control {
+    border: 2px solid @background2;
+    box-shadow: none;
+    &:focus {
+        border: 2px solid @info;
+        outline: 0;
+        box-shadow: none;
+    }
+}
+
+.form-control.form-search {
+    border-radius: 30px;
+    background-image: url("../img/icon_search16x16.png");
+    background-repeat: no-repeat;
+    background-position: 10px 8px;
+    padding-left: 34px;
+}
+
+.form-group-search {
+    position: relative;
+    .form-button-search {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        border-radius: 30px;
+    }
+}
+
+textarea {
+    resize: none;
+    height: 1.5em;
+}
+
+select.form-control {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-image: url("../img/select_arrow.png") !important;
+    background-repeat: no-repeat;
+    background-position: right 13px;
+    overflow: hidden;
+}
+
+label {
+    font-weight: normal;
+}
+
+label.control-label {
+    font-weight: bold;
+}
+
+// Placeholder text
+::-webkit-input-placeholder {
+    color: @font4 !important;
+}
+
+::-moz-placeholder {
+    color: @font4 !important;
+}
+
+/* firefox 19+ */
+:-ms-input-placeholder {
+    color: @font4 !important;
+}
+
+/* ie */
+input:-moz-placeholder {
+    color: @font4 !important;
+}
+
+// Placeholder text for empty content
+.placeholder {
+    padding: 10px;
+}
+
+// HTML5 Placeholder jQuery Plugin
+input.placeholder,
+textarea.placeholder {
+    padding: 0 0 0 10px;
+    color: #999;
+}
+
+.help-block-error {
+    font-size: 12px;
+}
+
+.help-block:not(.help-block-error) {
+    color: @font5 !important;
+    font-size: 12px;
+}
+
+.input-group-addon {
+    border: none;
+}
+
+//
+// Labels
+// --------------------------------------------------
+.label {
+    text-transform: uppercase;
+}
+
+.label {
+    text-transform: uppercase;
+    display: inline-block;
+    padding: 3px 5px 4px;
+    font-weight: 600;
+    font-size: 10px !important;
+    color: white !important;
+    vertical-align: baseline;
+    white-space: nowrap;
+    text-shadow: none;
+}
+
+.label-default {
+    background: @background2;
+    color: @font2 !important;
+}
+
+a.label-default:hover {
+    background: darken(@background2, 5%) !important;
+}
+
+.label-info {
+    background-color: @info;
+}
+
+a.label-info:hover {
+    background: darken(@info, 5%) !important;
+}
+
+.label-danger {
+    background-color: @danger;
+}
+
+a.label-danger:hover {
+    background: darken(@danger, 5%) !important;
+}
+
+.label-success {
+    background-color: @info;
+}
+
+a.label-success:hover {
+    background: darken(@info, 5%) !important;
+}
+
+.label-warning {
+    background-color: @warning;
+}
+
+a.label-warning:hover {
+    background: darken(@warning, 5%) !important;
+}
+
+// Flatelements
+.onoffswitch-inner:before {
+  background-color: @info;
+  color: #fff;
+}
+
+.onoffswitch-inner:after {
+  background-color: @background3;
+  color: #999;
+  text-align: right;
+}
+
+.regular-checkbox:checked + .regular-checkbox-box {
+  border: 2px solid @info;
+  background: @info;
+  color: white;
+}
+
+.regular-radio:checked + .regular-radio-button:after {
+  background: @info;
+}
+
+.regular-radio:checked + .regular-radio-button {
+  background-color: none;
+  color: #99a1a7;
+  border: 2px solid @background3;
+  margin-right: 5px;
+}
+
+//
+// Errror handling
+//
+.errorMessage {
+    color: @danger;
+    padding: 10px 0;
+}
+
+// Errror handling
+.error {
+    border-color: @danger !important;
+}
+
+.has-error .help-block,
+.has-error .control-label,
+.has-error .radio,
+.has-error .checkbox,
+.has-error .radio-inline,
+.has-error .checkbox-inline {
+    color: @danger !important;
+}
+
+.has-error .form-control,
+.has-error .form-control:focus {
+    border-color: @danger;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+.has-success .help-block,
+.has-success .control-label,
+.has-success .radio,
+.has-success .checkbox,
+.has-success .radio-inline,
+.has-success .checkbox-inline {
+    color: @success;
+}
+
+.has-success .form-control,
+.has-success .form-control:focus {
+    border-color: @success;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+.has-warning .help-block,
+.has-warning .control-label,
+.has-warning .radio,
+.has-warning .checkbox,
+.has-warning .radio-inline,
+.has-warning .checkbox-inline {
+    color: @warning;
+}
+
+.has-warning .form-control,
+.has-warning .form-control:focus {
+    border-color: @warning;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
\ No newline at end of file
diff --git a/less/gridview.less b/less/gridview.less
new file mode 100644
index 0000000000..3566f4f47c
--- /dev/null
+++ b/less/gridview.less
@@ -0,0 +1,58 @@
+// CGridView
+.grid-view {
+  img {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.grid-view .filters input,
+.grid-view .filters select {;
+  .form-control;
+  border-radius: 4px;
+  font-size: 12px;
+  padding: 4px;
+}
+
+.grid-view {
+  padding: 15px 0 0;
+  img {
+    border-radius: 3px;
+  }
+  table {
+    th {
+      font-size: 13px !important;
+      font-weight: bold !important;
+    }
+    td {
+        vertical-align:middle !important;
+    }
+    tr {
+      font-size: 13px !important;
+    }
+    thead {
+        tr {
+            th:first-of-type {
+                padding-left:5px;
+            }
+        }
+    }
+    tbody {
+        tr {
+            height: 50px;
+            td:first-of-type {
+                padding-left:5px;
+            }
+        }
+        
+        tr:nth-child(even) {
+            //background-color: @background1;
+        }
+        
+    }
+  }
+  .summary {
+    font-size: 12px;
+    color: @font1;
+  }
+}
\ No newline at end of file
diff --git a/less/humhub.less b/less/humhub.less
new file mode 100644
index 0000000000..347f3b736f
--- /dev/null
+++ b/less/humhub.less
@@ -0,0 +1,36 @@
+@import "base.less";
+@import "topbar.less";
+@import "login.less";
+@import "dropdown.less";
+@import "media.less";
+@import "panel.less";
+@import "installer.less";
+@import "pagination.less";
+@import "bootstrap.less";
+@import "nav.less";
+@import "button.less";
+@import "form.less";
+@import "badge.less";
+@import "popover.less";
+@import "list-group.less";
+@import "modal.less";
+@import "tooltip.less";
+@import "progress.less";
+@import "table.less";
+@import "comment.less";
+@import "gridview.less";
+@import "oembed.less";
+@import "activities.less";
+@import "stream.less";
+@import "space.less";
+@import "file.less";
+@import "tour.less";
+@import "mentioning.less";
+@import "loader.less";
+@import "markdown.less";
+@import "sidebar.less";
+@import "datepicker.less";
+@import "user-feedback.less";
+@import "tags.less";
+@import "installed.less";
+
diff --git a/less/installer.less b/less/installer.less
new file mode 100644
index 0000000000..a4c1ee91c0
--- /dev/null
+++ b/less/installer.less
@@ -0,0 +1,42 @@
+// Panels - Installer
+.installer {
+  .logo {
+    text-align: center;
+  }
+  h2 {
+    font-weight: 100;
+  }
+  .panel {
+    margin-top: 50px;
+    h3 {
+      margin-top: 0;
+    }
+  }
+  .powered,
+  .powered a {
+    color: @font1 !important;
+    margin-top: 10px;
+    font-size: 12px;
+  }
+  .fa {
+    width: 18px;
+  }
+  .check-ok {
+    color: @success;
+  }
+  .check-warning {
+    color: @warning;
+  }
+  .check-error {
+    color: @danger;
+  }
+  .prerequisites-list {
+    ul {
+      list-style: none;
+      padding-left: 15px;
+      li {
+        padding-bottom: 5px;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/less/list-group.less b/less/list-group.less
new file mode 100644
index 0000000000..9e0127a37f
--- /dev/null
+++ b/less/list-group.less
@@ -0,0 +1,48 @@
+//
+// List-Group
+// --------------------------------------------------
+.list-group-item {
+  padding: 6px 15px;
+  border: none;
+  border-width: 0 !important;
+  border-left: 3px solid #fff !important;
+  font-size: 12px;
+  font-weight: 600;
+  i {
+    font-size: 14px;
+  }
+}
+
+a.list-group-item:hover,
+a.list-group-item.active,
+a.list-group-item.active:hover,
+a.list-group-item.active:focus {
+  z-index: 2;
+  color: @font3;
+  background-color: @background1;
+  border-left: 3px solid @info !important;
+}
+
+@media (max-width: 991px) {
+  .list-group {
+    margin-left: 4px;
+  }
+
+  .list-group-item {
+    display: inline-block !important;
+    border-radius: 3px !important;
+    margin: 4px 0;
+    margin-bottom: 4px !important;
+  }
+
+  .list-group-item {
+    border: none !important;
+
+  }
+
+  a.list-group-item:hover, a.list-group-item.active, a.list-group-item.active:hover, a.list-group-item.active:focus {
+    border: none !important;
+    background: @primary !important;
+    color: #fff !important;
+  }
+}
\ No newline at end of file
diff --git a/less/loader.less b/less/loader.less
new file mode 100644
index 0000000000..dce5b351d1
--- /dev/null
+++ b/less/loader.less
@@ -0,0 +1,67 @@
+// SpinKit (Loader)
+.sk-spinner-three-bounce.sk-spinner {
+  margin: 0 auto;
+  width: 70px;
+  text-align: center;
+}
+
+// Ajax loader
+.loader {
+  padding: 30px 0;
+  .sk-spinner-three-bounce div, .sk-spinner-three-bounce span {
+    width: 12px;
+    height: 12px;
+    background-color: @info;
+    border-radius: 100%;
+    display: inline-block;
+    -webkit-animation: sk-threeBounceDelay 1.4s infinite ease-in-out;
+    animation: sk-threeBounceDelay 1.4s infinite ease-in-out;
+    /* Prevent first frame from flickering when animation starts */
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+  }
+  .sk-spinner-three-bounce .sk-bounce1 {
+    -webkit-animation-delay: -0.32s;
+    animation-delay: -0.32s;
+  }
+  .sk-spinner-three-bounce .sk-bounce2 {
+    -webkit-animation-delay: -0.16s;
+    animation-delay: -0.16s;
+  }
+  @-webkit-keyframes sk-threeBounceDelay {
+    0%,
+    80%,
+    100% {
+      -webkit-transform: scale(0);
+      transform: scale(0);
+    }
+    40% {
+      -webkit-transform: scale(1);
+      transform: scale(1);
+    }
+  }
+  @keyframes sk-threeBounceDelay {
+    0%,
+    80%,
+    100% {
+      -webkit-transform: scale(0);
+      transform: scale(0);
+    }
+    40% {
+      -webkit-transform: scale(1);
+      transform: scale(1);
+    }
+  }
+}
+
+.loader-modal {
+  padding: 8px 0;
+}
+
+.loader-postform {
+  padding: 9px 0;
+  .sk-spinner-three-bounce.sk-spinner {
+    text-align: left;
+    margin: 0;
+  }
+}
\ No newline at end of file
diff --git a/less/login.less b/less/login.less
new file mode 100644
index 0000000000..a04302c2e1
--- /dev/null
+++ b/less/login.less
@@ -0,0 +1,45 @@
+//
+// Login
+// --------------------------------------------------
+.login-container {
+  background-color: @primary;
+  background-image: linear-gradient(to right, @primary 0%, lighten(@primary, 10%) 50%, lighten(@primary, 10%) 100%), linear-gradient(to right, lighten(@primary, 5%) 0%, lighten(@primary, 25%) 51%, lighten(@primary, 20%) 100%);
+  background-size: 100% 100%;
+  position: relative;
+  padding-top: 40px;
+
+  .text {
+    color: #fff;
+    font-size: 12px;
+    margin-bottom: 15px;
+    a {
+      color: #fff;
+      text-decoration: underline;
+    }
+  }
+  .panel a {
+    color: @info;
+  }
+  h1,
+  h2 {
+    color: #fff !important;
+  }
+  .panel {
+    box-shadow: 0 0 15px #627d92;
+    -moz-box-shadow: 0 0 15px #627d92;
+    -webkit-box-shadow: 0 0 15px #627d92;
+    .panel-heading,
+    .panel-body {
+      padding: 15px;
+    }
+  }
+  select {
+    color: @font3;
+  }
+}
+
+#account-login-form {
+  .form-group {
+    margin-bottom: 10px;
+  }
+}
\ No newline at end of file
diff --git a/less/markdown.less b/less/markdown.less
new file mode 100644
index 0000000000..d531cc86eb
--- /dev/null
+++ b/less/markdown.less
@@ -0,0 +1,78 @@
+// Markdown
+.markdown-render {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: bold !important;
+  }
+  h1 {
+    font-size: 28px !important;
+  }
+  h2 {
+    font-size: 24px !important;
+  }
+  h3 {
+    font-size: 18px !important;
+  }
+  h4 {
+    font-size: 16px !important;
+  }
+  h5 {
+    font-size: 14px !important;
+  }
+  h6 {
+    color: #999;
+    font-size: 14px !important;
+  }
+  pre {
+    padding: 0;
+    border: none;
+    border-radius: 3px;
+    code {
+      padding: 10px;
+      border-radius: 3px;
+      font-size: 12px !important;
+    }
+  }
+  a,
+  a:visited {
+    background-color: inherit;
+    text-decoration: none;
+    color: @info !important;
+  }
+  img {
+    max-width: 100%;
+    display: table-cell !important;
+  }
+
+  table {
+    width: 100%;
+    th {
+      font-size: 13px;
+      font-weight: 700;
+      color: @font3;
+    }
+
+    thead {
+      tr {
+        border-bottom: 1px solid @background3;
+      }
+    }
+
+    tbody tr td, thead tr th {
+      border: 1px solid @background3 !important;
+      padding: 4px;
+    }
+  }
+}
+
+.md-editor.active {
+  border: 2px solid @info !important;
+}
+
+.md-editor textarea {
+  padding: 10px !important;
+}
\ No newline at end of file
diff --git a/less/media.less b/less/media.less
new file mode 100644
index 0000000000..44f3a78980
--- /dev/null
+++ b/less/media.less
@@ -0,0 +1,115 @@
+//
+// Media-Object
+// --------------------------------------------------
+.media-list {
+    li {
+        padding: 10px;
+        border-bottom: 1px solid #eee;
+        position: relative;
+        border-left: 3px solid white;
+        font-size: 12px;
+        a {
+            color: @font3;
+        }
+    }
+
+    .badge-space-type {
+        background-color: @background1;
+        border: 1px solid @background3;
+        color: @background4;
+        padding: 3px 3px 2px 3px;
+    }
+
+    li.new {
+        border-left: 3px solid lighten(@info, 30%);
+        background-color: lighten(@info, 30%);
+    }
+    li:hover,
+        li.selected {
+        background-color: @background1;
+        border-left: 3px solid @info;
+    }
+}
+
+.media-list li.placeholder {
+    font-size: 14px !important;
+    border-bottom: none;
+}
+
+.media-list li.placeholder:hover {
+    background: none !important;
+    border-left: 3px solid white;
+}
+
+.media-left,
+.media > .pull-left {
+    padding-right: 0;
+    margin-right:10px;
+}
+
+.media:after {
+    content: '';
+    clear: both;
+    display: block;
+}
+
+.media {
+    .time {
+        font-size: 11px;
+        color: @font4;
+    }
+    .img-space {
+        position: absolute;
+        top: 35px;
+        left: 35px;
+    }
+    .media-body {
+        font-size: 13px;
+        h4.media-heading {
+            font-size: 14px;
+            font-weight: 500;
+            color: @font3;
+            a {
+                color: @font3;
+            }
+            small,
+            small a {
+                font-size: 11px;
+                color: @font4;
+            }
+            .content {
+                margin-right: 35px;
+            }
+        }
+
+        .content a {
+            word-break: break-all;
+        }
+
+        h5 {
+            color: @font5;
+            font-weight: 300;
+            margin-top: 5px;
+            margin-bottom: 5px;
+            min-height: 15px;
+        }
+        .module-controls {
+            font-size: 85%;
+            a {
+                color: @info;
+            }
+        }
+    }
+    .content {
+        a {
+            color: @info;
+        }
+    }
+    .content .files a {
+        color: @font3;
+    }
+}
+
+.content span {
+    .text-break;
+}
\ No newline at end of file
diff --git a/less/mentioning.less b/less/mentioning.less
new file mode 100644
index 0000000000..df85e9bfe7
--- /dev/null
+++ b/less/mentioning.less
@@ -0,0 +1,25 @@
+// 
+//atwho Plugin
+//
+.atwho-view .cur {
+  border-left: 3px solid @info;
+  background-color: #f7f7f7 !important;
+}
+
+.atwho-user,
+.atwho-space,
+.atwho-input a {
+  color: @info;
+}
+
+.atwho-input a:hover {
+  color: @info;
+}
+
+.atwho-view strong {
+  background-color: #f9f0d2;
+}
+
+.atwho-view .cur strong {
+  background-color: #f9f0d2;
+}
\ No newline at end of file
diff --git a/less/mixins.less b/less/mixins.less
new file mode 100644
index 0000000000..3b8d6b362b
--- /dev/null
+++ b/less/mixins.less
@@ -0,0 +1,141 @@
+//
+// Theme color classes
+// (Add this classes to the html elements from your
+// modules to adopt the colors from currently
+// activated theme)
+// --------------------------------------------------
+@import "../protected/vendor/bower/fontawesome/less/mixins.less";
+
+
+/* Default */
+.colorDefault {
+  color: @default;
+}
+
+.backgroundDefault {
+  background: @default;
+}
+
+.borderDefault {
+  border-color: @default;
+}
+
+/* Primary */
+.colorPrimary {
+  color: @primary !important;
+}
+
+.backgroundPrimary {
+  background: @primary !important;
+}
+
+.borderPrimary {
+  border-color: @primary !important;
+}
+
+/* Info */
+.colorInfo {
+  color: @info !important;
+}
+
+.backgroundInfo {
+  background: @info !important;
+}
+
+.borderInfo {
+  border-color: @info !important;
+}
+
+/* Success */
+.colorSuccess {
+  color: @success !important;
+}
+
+.backgroundSuccess {
+  background: @success !important;
+}
+
+.borderSuccess {
+  border-color: @success !important;
+}
+
+/* Warning */
+.colorWarning {
+  color: @warning !important;
+}
+
+.backgroundWarning {
+  background: @warning !important;
+}
+
+.borderWarning {
+  border-color: @warning !important;
+}
+
+/* Danger */
+.colorDanger {
+  color: @danger !important;
+}
+
+.backgroundDanger {
+  background: @danger !important;
+}
+
+.borderDanger {
+  border-color: @danger !important;
+}
+
+/* Fonts */
+.colorFont1 {
+  color: @font1 !important;
+}
+
+.colorFont2 {
+  color: @font2 !important;
+}
+
+.colorFont3 {
+  color: @font3 !important;
+}
+
+.colorFont4 {
+  color: @font4 !important;
+}
+
+.colorFont5 {
+  color: @font5 !important;
+}
+
+.heading {
+  font-size: 16px;
+  font-weight: 300;
+  color: @font3;
+  background-color: white;
+  border: none;
+  padding: 10px;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+.text-break {
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    -ms-word-break: break-all;
+    word-break: break-word;
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;  
+}
+
+//
+// Thumbnails
+// --------------------------------------------------
+.img-rounded {
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
\ No newline at end of file
diff --git a/less/modal.less b/less/modal.less
new file mode 100644
index 0000000000..aaa7d29ec9
--- /dev/null
+++ b/less/modal.less
@@ -0,0 +1,127 @@
+//
+// Modals
+// --------------------------------------------------
+@media screen and (max-width: 768px) {
+  .modal-dialog {
+    width: auto !important;
+    padding-top: 30px;
+    padding-bottom: 30px;
+  }
+}
+
+.modal-top {
+    z-index: 999999 !important;
+}
+
+.modal-open {
+  overflow: visible;
+}
+
+.modal {
+  overflow-y: visible;
+}
+
+.modal-dialog-extra-small {
+  width: 400px;
+}
+
+.modal-dialog-small {
+  width: 500px;
+}
+
+.modal-dialog-normal {
+  width: 600px;
+}
+
+.modal-dialog-medium {
+  width: 768px;
+}
+
+.modal-dialog-large {
+  width: 900px;
+}
+
+@media screen and (max-width: 920px) {
+  .modal-dialog-large {
+    width: auto !important;
+    padding-top: 30px;
+    padding-bottom: 30px;
+  }
+}
+
+.modal {
+  border: none;
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    margin-top: 20px;
+    color: @font3;
+    font-weight: 300;
+  }
+  h4.media-heading {
+    margin-top: 0;
+  }
+}
+
+.modal-title {
+  font-size: 20px;
+  font-weight: 200;
+  color: @font3;
+}
+
+.modal-dialog, .modal-content {
+   min-width:150px; 
+}
+
+.modal-content {
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  box-shadow: 0 2px 26px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0 2px 26px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0 2px 26px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.1);
+  border: none;
+  .modal-header {
+    padding: 20px 20px 0;
+    border-bottom: none;
+    text-align: center;
+    .close {
+      margin-top: 2px;
+      margin-right: 5px;
+    }
+  }
+  .modal-body {
+    padding: 20px;
+    font-size: 13px;
+    ul.medialist {
+      li > a {
+
+      }
+    }
+  }
+  .modal-footer {
+    margin-top: 0;
+    text-align: left;
+    padding: 10px 20px 30px;
+    border-top: none;
+    text-align: center;
+    hr {
+      margin-top: 0;
+    }
+  }
+}
+
+.modal-backdrop {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+//
+// Animate.css modifications
+// --------------------------------------------------
+.modal-dialog.fadeIn,
+.modal-dialog.pulse {
+  -webkit-animation-duration: 200ms;
+  -moz-animation-duration: 200ms;
+  animation-duration: 200ms;
+}
\ No newline at end of file
diff --git a/less/module.less b/less/module.less
new file mode 100644
index 0000000000..c5a59ad7a8
--- /dev/null
+++ b/less/module.less
@@ -0,0 +1,7 @@
+// Modules list
+.module-installed {
+  opacity: 0.5;
+  .label-success {
+    background-color: @background3;
+  }
+}
\ No newline at end of file
diff --git a/less/nav.less b/less/nav.less
new file mode 100644
index 0000000000..acfa5fb7af
--- /dev/null
+++ b/less/nav.less
@@ -0,0 +1,204 @@
+//
+// Navs
+// --------------------------------------------------
+.tab-sub-menu {
+    padding-left: 10px;
+    li > a:hover, li > a:focus {
+        background-color: @background1;
+        border-bottom-color: #ddd;
+    }
+    
+    li.active > a {
+        background-color:#FFFFFF;
+        border-bottom-color: transparent;
+    }
+}
+
+.tab-menu {
+    padding-top:10px;
+    background-color: #FFFFFF;
+    
+    .nav-tabs {
+        padding-left: 10px;
+        
+        li > a {
+            padding-top:12px;
+            border-color: #ddd;
+            border-bottom:1px solid #ddd;
+            background-color: @background1;
+            max-height: 41px;
+            outline: none;
+        }
+        
+        li > a:hover, li > a:focus {
+            padding-top:10px;
+            border-top: 3px solid #ddd;
+        }
+        
+        li > a:hover {
+            background-color: @background1;
+        }
+        
+        li.active > a, li.active > a:hover {
+            padding-top:10px;
+            border-top: 3px solid @info;
+        } 
+        
+        li.active > a {
+            background-color:#FFFFFF;
+            border-bottom-color: transparent;
+        }
+    }
+}
+
+.nav-pills,
+.nav-tabs,
+.account {
+  .dropdown-menu {
+    background-color: @primary;
+    border: none;
+    li.divider {
+      background-color: darken(@primary, 5%);
+      border-bottom: none;
+      margin: 9px 1px !important;
+    }
+    li {
+      border-left: 3px solid @primary;
+      a {
+        color: white;
+        font-weight: 400;
+        font-size: 13px;
+        padding: 4px 15px;
+        i {
+          margin-right: 5px;
+          font-size: 14px;
+          display: inline-block;
+          width: 14px;
+        }
+      }
+      a:hover,
+      a:visited,
+      a:hover,
+      a:focus {
+        background: none;
+      }
+    }
+    li:hover,
+    li.selected {
+      border-left: 3px solid @info;
+      color: #fff !important;
+      background-color: darken(@primary, 5%) !important;
+    }
+  }
+}
+
+.nav-pills.preferences {
+  .dropdown .dropdown-toggle {
+    color: @font4;
+  }
+  .dropdown.open {
+    .dropdown-toggle,
+    .dropdown-toggle:hover {
+      background-color: @primary;
+    }
+  }
+}
+
+.nav-pills > li.active > a,
+.nav-pills > li.active > a:hover,
+.nav-pills > li.active > a:focus {
+  background-color: @primary;
+}
+
+// Nav-Tabs
+.nav-tabs {
+  margin-bottom: 10px;
+}
+
+.list-group {
+  a [class^="fa-"],
+  a [class*=" fa-"] {
+    display: inline-block;
+    width: 18px;
+  }
+}
+
+.nav-pills.preferences {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  .dropdown .dropdown-toggle {
+    padding: 2px 10px;
+  }
+  .dropdown.open {
+    .dropdown-toggle,
+    .dropdown-toggle:hover {
+      color: white;
+    }
+  }
+}
+
+.nav-tabs {
+  li {
+    font-weight: 600;
+    font-size: 12px;
+  }
+}
+
+.tab-content .tab-pane {
+  a {
+    color: @info;
+  }
+  .form-group {
+    margin-bottom: 5px;
+  }
+}
+
+.nav-tabs.tabs-center {
+  li {
+    float: none;
+    display: inline-block;
+  }
+}
+
+.nav-tabs.tabs-small {
+  li > a {
+    padding: 5px 7px;
+  }
+}
+
+.nav .caret,
+.nav .caret:hover,
+.nav .caret:active {
+  border-top-color: @font3;
+  border-bottom-color: @font3;
+}
+
+.nav li.dropdown > a:hover .caret,
+.nav li.dropdown > a:active .caret {
+  border-top-color: @font3;
+  border-bottom-color: @font3;
+}
+
+.nav .open > a .caret,
+.nav .open > a:hover .caret,
+.nav .open > a:focus .caret {
+  border-top-color: @font3;
+  border-bottom-color: @font3;
+}
+
+.nav .open > a,
+.nav .open > a:hover,
+.nav .open > a:focus {
+  border-color: #ededed;
+  color: @font3;
+  .caret {
+    color: @font3;
+  }
+}
+
+@media (max-width: 991px) {
+  .controls-header {
+    text-align: left !important;
+  }
+}
\ No newline at end of file
diff --git a/less/notification.less b/less/notification.less
new file mode 100644
index 0000000000..52f816ac32
--- /dev/null
+++ b/less/notification.less
@@ -0,0 +1,18 @@
+#notification_overview_filter label {
+    display:block;
+}
+
+@media (max-width: 767px) {
+  .notifications {
+    position: inherit !important;
+    float: left !important;
+  }
+
+  .notifications .dropdown-menu {
+    width: 300px !important;
+    margin-left: 0 !important;
+    .arrow {
+      margin-left: -142px !important;
+    }
+  }
+}
\ No newline at end of file
diff --git a/less/oembed.less b/less/oembed.less
new file mode 100644
index 0000000000..d4b4196a81
--- /dev/null
+++ b/less/oembed.less
@@ -0,0 +1,16 @@
+.oembed_snippet {
+    margin-top: 10px;
+    position: relative;
+    padding-bottom: 55%;
+    padding-top: 15px;
+    height: 0;
+    overflow: hidden;
+}
+
+.oembed_snippet iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
\ No newline at end of file
diff --git a/less/pagination.less b/less/pagination.less
new file mode 100644
index 0000000000..5884b8eecf
--- /dev/null
+++ b/less/pagination.less
@@ -0,0 +1,24 @@
+//
+// Pagination
+// --------------------------------------------------
+.pagination-container {
+  text-align: center;
+}
+
+.pagination > .active > a,
+.pagination > .active > span,
+.pagination > .active > a:hover,
+.pagination > .active > span:hover,
+.pagination > .active > a:focus,
+.pagination > .active > span:focus {
+  background-color: @primary;
+  border-color: @primary;
+}
+
+.pagination > li > a,
+.pagination > li > span,
+.pagination > li > a:hover,
+.pagination > li > a:active,
+.pagination > li > a:focus {
+  color: @font3;
+}
\ No newline at end of file
diff --git a/less/panel.less b/less/panel.less
new file mode 100644
index 0000000000..c434b37b3a
--- /dev/null
+++ b/less/panel.less
@@ -0,0 +1,189 @@
+//
+// Panels
+// --------------------------------------------------
+.panel {
+    border: none;
+    background-color: #fff;
+    box-shadow: 0 0 3px #dadada;
+    -webkit-box-shadow: 0 0 3px #dadada;
+    -moz-box-shadow: 0 0 3px #dadada;
+    border-radius: 4px;
+    position: relative;
+    h1 {
+        font-size: 16px;
+        font-weight: 300;
+        margin-top: 0;
+        color: @font3;
+    }
+    .panel-heading {
+        .heading;
+        border-radius: 4px;
+        .heading-link {
+            color:#6fdbe8 !important;
+            font-size: 0.8em;
+        }
+    }
+    .panel-body {
+        padding: 10px;
+        font-size: 13px;
+        p {
+            color: @font3;
+        }
+    }
+    .statistics {
+        .entry {
+            margin-left: 20px;
+            font-size: 12px;
+            .count {
+                color: @info;
+                font-weight: 600;
+                font-size: 20px;
+                line-height: 0.8em;
+            }
+        }
+    }
+    h3.media-heading {
+        small {
+            font-size: 75%;
+        }
+        small a {
+            color: @info;
+        }
+    }
+}
+
+.panel-danger {
+    border: 2px solid @danger;
+    .panel-heading {
+        color: @danger;
+    }
+}
+
+.panel-success {
+    border: 2px solid @success;
+    .panel-heading {
+        color: @success;
+    }
+}
+
+.panel-warning {
+    border: 2px solid @warning;
+    .panel-heading {
+        color: @warning;
+    }
+}
+
+.panel.profile {
+    position: relative;
+    .controls {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+    }
+}
+
+.panel.members,
+.panel.groups,
+.panel.follower,
+.panel.spaces {
+    .panel-body a img {
+        margin-bottom: 5px;
+    }
+}
+
+.panel-profile {
+    .panel-profile-header {
+        position: relative;
+        border: 3px solid #fff;
+        border-top-right-radius: 3px;
+        border-top-left-radius: 3px;
+        .img-profile-header-background {
+            border-radius: 3px;
+            min-height: 110px;
+        }
+        .img-profile-data {
+            position: absolute;
+            height: 100px;
+            width: 100%;
+            bottom: 0;
+            left: 0;
+            padding-left: 180px;
+            padding-top: 30px;
+            border-bottom-right-radius: 3px;
+            border-bottom-left-radius: 3px;
+            color: #fff;
+            pointer-events: none;
+            background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0.38) 100%);
+            /* FF3.6+ */
+            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(1%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.38)));
+            /* Chrome,Safari4+ */
+            background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0.38) 100%);
+            /* Chrome10+,Safari5.1+ */
+            background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0.38) 100%);
+            /* Opera 11.10+ */
+            background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0.38) 100%);
+            /* IE10+ */
+            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0.38) 100%);
+            /* W3C */
+            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#94000000', GradientType=0);
+            /* IE6-9 */
+            h1 {
+                font-size: 30px;
+                font-weight: 100;
+                margin-bottom: 7px;
+                color: #fff;
+                max-width: 600px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+            h2 {
+                font-size: 16px;
+                font-weight: 400;
+                margin-top: 0;
+            }
+            h1.space {
+                font-size: 30px;
+                font-weight: 700;
+            }
+            h2.space {
+                font-size: 13px;
+                font-weight: 300;
+                max-width: 600px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+        .profile-user-photo-container {
+            position: absolute;
+            bottom: -50px;
+            left: 15px;
+            .profile-user-photo {
+                border: 3px solid #fff;
+                border-radius: 5px;
+            }
+        }
+    }
+    .panel-profile-controls {
+        padding-left: 160px;
+    }
+}
+
+.panel.pulse,
+.panel.fadeIn {
+    -webkit-animation-duration: 200ms;
+    -moz-animation-duration: 200ms;
+    animation-duration: 200ms;
+}
+
+@media (max-width: 767px) {
+    .panel-profile-controls {
+        padding-left: 0 !important;
+        padding-top: 50px;
+    }
+
+    .panel-profile .panel-profile-header .img-profile-data h1 {
+        font-size: 20px !important;
+    }
+}
\ No newline at end of file
diff --git a/less/popover.less b/less/popover.less
new file mode 100644
index 0000000000..bf1b87dd2b
--- /dev/null
+++ b/less/popover.less
@@ -0,0 +1,29 @@
+//
+// popover
+// --------------------------------------------------
+.popover {
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  .popover-title {
+    background: none;
+    border-bottom: none;
+    color: #555;
+    font-weight: 300;
+    font-size: 16px;
+    padding: 15px;
+  }
+  .popover-content {
+    font-size: 13px;
+    padding: 5px 15px;
+    color: @font3;
+    a {
+      color: @info;
+    }
+  }
+  .popover-navigation {
+    padding: 15px;
+  }
+}
\ No newline at end of file
diff --git a/less/progress.less b/less/progress.less
new file mode 100644
index 0000000000..5b6199e2cb
--- /dev/null
+++ b/less/progress.less
@@ -0,0 +1,24 @@
+//
+// Progressbar
+// --------------------------------------------------
+.progress {
+  height: 10px;
+  margin-bottom: 15px;
+  box-shadow: none;
+  background: @background2;
+  border-radius: 10px;
+}
+
+.progress-bar-info {
+  background-color: @info;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+//
+// Pjax page loader bar since 1.2
+//
+#nprogress .bar {
+    height:2px;
+    background: @info;
+}
\ No newline at end of file
diff --git a/less/sidebar.less b/less/sidebar.less
new file mode 100644
index 0000000000..9674b67280
--- /dev/null
+++ b/less/sidebar.less
@@ -0,0 +1,5 @@
+@media (max-width: 991px) {
+  .layout-sidebar-container {
+    display: none;
+  }
+}
\ No newline at end of file
diff --git a/less/space.less b/less/space.less
new file mode 100644
index 0000000000..67e23dc31b
--- /dev/null
+++ b/less/space.less
@@ -0,0 +1,70 @@
+// Space > Admin
+.space-owner {
+    text-align: center;
+    margin: 14px 0;
+    font-size: 13px;
+    color: #999;
+}
+
+// Member sign for directory list
+.space-member-sign {
+    color: @success;
+    position: absolute;
+    top: 42px;
+    left: 42px;
+    font-size: 16px;
+    background: #fff;
+    width: 24px;
+    height: 24px;
+    padding: 2px 3px 1px 4px;
+    border-radius: 50px;
+    border: 2px solid @success;
+}
+
+#space-menu-dropdown i.type {
+    font-size:16px;
+    color: #BFBFBF;
+}
+
+#space-menu-spaces [data-space-chooser-item] {
+    cursor: pointer;
+}
+
+#space-menu-dropdown .input-group-addon {
+    border-radius: 0px 4px 4px 0px;
+}
+
+#space-menu-dropdown .input-group-addon.focus {
+    border-radius: 0px 4px 4px 0px;
+    border: 2px solid @info;
+    border-left: 0px;
+}
+
+#space-menu-search {
+    border-right: 0px;
+}
+
+#space-directory-link i {
+    margin-right:0px;
+}
+
+.space-acronym {
+    color: #fff;
+    text-align: center;
+    display: inline-block;
+}
+
+.current-space-image {
+    margin-right: 3px;
+    margin-top: 3px;
+}
+
+@media (max-width: 767px) {
+    #space-menu > .title {
+        display: none;
+    }
+
+    #space-menu-dropdown {
+        width: 300px !important;
+    }
+}
\ No newline at end of file
diff --git a/less/stream.less b/less/stream.less
new file mode 100644
index 0000000000..789abbf2ea
--- /dev/null
+++ b/less/stream.less
@@ -0,0 +1,84 @@
+// Content create form
+.contentForm_options {
+    margin-top: 10px;
+    min-height: 29px;
+    
+    .btn_container {
+        position: relative;
+        .label-public {
+            position: absolute;
+            right: 40px;
+            top: 11px;
+        }
+    }
+}
+
+#contentFormError {
+  color: @danger;
+  padding-left: 0;
+  list-style: none;
+}
+
+// Empty stream info
+.placeholder-empty-stream {
+    background-image: url("../img/placeholder-postform-arrow.png");
+    background-repeat: no-repeat;
+    padding: 37px 0 0 70px;
+    margin-left: 90px;
+}
+
+// Wall-Entries
+.wall-entry {
+    position: relative;
+    .media {
+        overflow: visible;
+    }
+    .well {
+        margin-bottom: 0;
+        .comment {
+            .show-all-link {
+                font-size: 12px;
+                cursor: pointer;
+            }
+        }
+    }
+}
+
+.wall-entry-controls {
+    /* Important since 1.2 */
+    display:inline-block;
+}
+
+.wall-entry-controls,
+.wall-entry-controls a {
+    font-size: 11px;
+    color: @font5;
+    margin-top: 10px;
+    margin-bottom: 0;
+}
+
+.wallFilterPanel {
+  li {
+    font-size: 11px;
+    font-weight: 600;
+    a {
+      color: @font3;
+    }
+  }
+  .dropdown-menu {
+    li {
+      margin-bottom: 0;
+      a {
+        font-size: 12px;
+      }
+      a:hover {
+        color: #fff !important;
+      }
+    }
+  }
+}
+
+.stream-entry-loader {
+    float:right;
+    margin-top:5px;
+}
\ No newline at end of file
diff --git a/less/table.less b/less/table.less
new file mode 100644
index 0000000000..bdf2a31c4f
--- /dev/null
+++ b/less/table.less
@@ -0,0 +1,38 @@
+//
+// Tables
+// --------------------------------------------------
+table {
+  margin-bottom:0px !important;
+  th {
+    font-size: 11px;
+    color: @font4;
+    font-weight: normal;
+  }
+  thead tr th {
+    border: none !important;
+  }
+  .time {
+    font-size: 12px;
+  }
+  td {
+    a:hover {
+      color: @info;
+    }
+  }
+}
+
+.table > thead > tr > th,
+.table > tbody > tr > th,
+.table > tfoot > tr > th,
+.table > thead > tr > td,
+.table > tbody > tr > td,
+.table > tfoot > tr > td {
+  padding: 10px 10px 10px 0;
+
+  select {
+    font-size: 12px;
+    padding: 4px 8px;
+    height: 30px;
+    margin: 0;
+  }
+}
\ No newline at end of file
diff --git a/less/tags.less b/less/tags.less
new file mode 100644
index 0000000000..d86e3c0c78
--- /dev/null
+++ b/less/tags.less
@@ -0,0 +1,13 @@
+// Tags
+.tags {
+  .tag {
+    margin-top: 5px;
+    border-radius: 2px;
+    padding: 4px 8px;
+    text-transform: uppercase;
+    max-width: 150px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
\ No newline at end of file
diff --git a/less/tooltip.less b/less/tooltip.less
new file mode 100644
index 0000000000..5359912c6e
--- /dev/null
+++ b/less/tooltip.less
@@ -0,0 +1,44 @@
+//
+// Tooltips
+// --------------------------------------------------
+.tooltip-inner {
+  background-color: @primary;
+  max-width: 400px;
+  text-align: left;
+  font-weight: 300;
+  padding: 2px 8px 4px;
+  font-weight: bold;
+  white-space: pre-wrap;
+}
+
+.tooltip {
+  &.top .tooltip-arrow {
+    border-top-color: @primary;
+  }
+  &.top-left .tooltip-arrow {
+    border-top-color: @primary;
+  }
+  &.top-right .tooltip-arrow {
+    border-top-color: @primary;
+  }
+  &.right .tooltip-arrow {
+    border-right-color: @primary;
+  }
+  &.left .tooltip-arrow {
+    border-left-color: @primary;
+  }
+  &.bottom .tooltip-arrow {
+    border-bottom-color: @primary;
+  }
+  &.bottom-left .tooltip-arrow {
+    border-bottom-color: @primary;
+  }
+  &.bottom-right .tooltip-arrow {
+    border-bottom-color: @primary;
+  }
+}
+
+.tooltip.in {
+  opacity: 1;
+  filter: alpha(opacity=100);
+}
\ No newline at end of file
diff --git a/less/topbar.less b/less/topbar.less
new file mode 100644
index 0000000000..ad87035737
--- /dev/null
+++ b/less/topbar.less
@@ -0,0 +1,341 @@
+//
+// Topbar
+// --------------------------------------------------
+.topbar {
+  position: fixed;
+  display: block;
+  height: 50px;
+  width: 100%;
+  padding-left: 15px;
+  padding-right: 15px;
+  ul.nav {
+    float: left;
+  }
+  ul.nav > li {
+    float: left;
+  }
+  ul.nav > li > a {
+    padding-top: 15px;
+    padding-bottom: 15px;
+    line-height: 20px;
+  }
+  .dropdown-footer {
+    margin: 10px;
+  }
+  .dropdown-header {
+    font-size: 16px;
+    padding: 3px 10px;
+    margin-bottom: 10px;
+    font-weight: 300;
+    color: @font4;
+
+    .dropdown-header-link {
+      position: absolute;
+      top: 2px;
+      right: 10px;
+      a {
+        color: @info !important;
+        font-size: 12px;
+        font-weight: normal;
+      }
+    }
+  }
+
+  .dropdown-header:hover {
+    color: @font4;
+  }
+}
+
+#topbar-first {
+  background-color: @primary;
+  top: 0;
+  z-index: 1030;
+  color: white;
+  .nav > li > a:hover,
+  .nav > .open > a {
+    background-color: lighten(@primary, 10%);
+  }
+  .nav > .account {
+    height: 50px;
+    margin-left: 20px;
+    img {
+      margin-left: 10px;
+    }
+    .dropdown-toggle {
+      padding: 10px 5px 8px;
+      line-height: 1.1em;
+      text-align: left;
+      span {
+        font-size: 12px;
+      }
+    }
+  }
+  .topbar-brand {
+    position: relative;
+    z-index: 2;
+  }
+  .topbar-actions {
+    position: relative;
+    z-index: 3;
+  }
+  .notifications {
+    position: absolute;
+    left: 0;
+    right: 0;
+    text-align: center;
+    z-index: 1;
+    .btn-group {
+      position: relative;
+      text-align: left;
+    }
+    .btn-group > a {
+      padding: 5px 10px;
+      margin: 10px 2px;
+      display: inline-block;
+      border-radius: 2px;
+      text-decoration: none;
+      text-align: left;
+    }
+    .btn-group > .label {
+      position: absolute;
+      top: 4px;
+      right: -2px;
+    }
+    .arrow:after {
+      position: absolute;
+      display: block;
+      width: 0;
+      height: 0;
+      border-color: transparent;
+      border-style: solid;
+      border-width: 10px;
+      content: " ";
+      top: 1px;
+      margin-left: -10px;
+      border-top-width: 0;
+      border-bottom-color: #fff;
+      z-index: 1035;
+    }
+    .arrow {
+      position: absolute;
+      display: block;
+      width: 0;
+      height: 0;
+      border-color: transparent;
+      border-style: solid;
+      z-index: 1001;
+      border-width: 11px;
+      left: 50%;
+      margin-left: -18px;
+      border-top-width: 0;
+      border-bottom-color: rgba(0, 0, 0, 0.15);
+      top: -19px;
+      z-index: 1035;
+    }
+    .dropdown-menu {
+      width: 350px;
+      margin-left: -148px;
+      ul.media-list {
+        max-height: 400px;
+        overflow: auto;
+      }
+      li {
+        position: relative;
+        i.approval {
+          position: absolute;
+          left: 2px;
+          top: 36px;
+          font-size: 14px;
+        }
+        i.accepted {
+          color: #5cb85c;
+        }
+        i.declined {
+          color: #d9534f;
+        }
+      }
+      li .media {
+        position: relative;
+      }
+      li .media .img-space {
+        position: absolute;
+        top: 14px;
+        left: 14px;
+      }
+    }
+  }
+  
+  .dropdown-footer {
+    margin: 10px 10px 5px;
+  }
+  a {
+    color: white;
+  }
+  .caret {
+    border-top-color: @font4;
+  }
+  .btn-group > a {
+    background-color: lighten(@primary, 5%);
+  }
+  .btn-enter {
+    background-color: lighten(@primary, 5%);
+    margin: 6px 0;
+  }
+  .btn-enter:hover {
+    background-color: lighten(@primary, 8%);
+  }
+  .media-list {
+    a {
+      color: @font3;
+      padding: 0;
+    }
+    li {
+      color: @font3;
+      i.accepted {
+        color: @info !important;
+      }
+      i.declined {
+        color: @danger !important;
+      }
+    }
+    li.placeholder {
+      border-bottom: none;
+    }
+    .media .media-body {
+      .label {
+        padding: 0.1em 0.5em;
+      }
+    }
+  }
+  .account .user-title {
+    text-align: right;
+    span {
+      color: @background3;
+    }
+  }
+  .dropdown.account > a,
+  .dropdown.account.open > a,
+  .dropdown.account > a:hover,
+  .dropdown.account.open > a:hover {
+    background-color: @primary;
+  }
+}
+
+#topbar-second {
+  top: 50px;
+  background-color: #fff;
+  z-index: 1029;
+  background-image: none;
+  -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid #d4d4d4;
+  .dropdown-menu {
+    padding-top: 0;
+    padding-bottom: 0;
+
+    .divider {
+      margin: 0;
+    }
+  }
+
+  // Space dropdown menu
+  #space-menu-dropdown,
+  #search-menu-dropdown {
+    width: 400px;
+    .media-list {
+      max-height: 400px;
+      overflow: auto;
+    }
+    @media screen and (max-width: 768px) {
+      .media-list {
+        max-height: 200px;
+      }
+    }
+    form {
+      margin: 10px;
+    }
+    
+    .search-reset {
+      position: absolute;
+      color: #BFBFBF;
+      margin: 7px;
+      top:0px;
+      right: 40px;
+      z-index:10;
+      display: none;
+      cursor: pointer;
+    }
+  }
+
+  .nav > li > a {
+    padding: 6px 13px 0;
+    text-decoration: none;
+    text-shadow: none;
+    font-weight: 600;
+    font-size: 10px;
+    text-transform: uppercase;
+    text-align: center;
+    min-height: 49px;
+    &:hover,
+    &:active,
+    &:focus {
+      border-bottom: 3px solid @info;
+      background-color: @background1;
+      color: @font3;
+      text-decoration: none;
+    }
+    i {
+      font-size: 14px;
+    }
+    .caret {
+      border-top-color: @font2;
+    }
+  }
+
+  .nav > li > ul > li > a {
+    border-left: 3px solid #fff;
+    background-color: #fff;
+    color: @font3;
+  }
+
+  .nav > li > ul > li > a:hover, .nav > li > ul > li > a.active {
+    border-left: 3px solid @info;
+    background-color: @background1;
+    color: @font3;
+  }
+
+  .nav > li.active > a {
+    min-height: 46px;
+  }
+  .nav > li > a#space-menu {
+    padding-right: 13px;
+    border-right: 1px solid #ededed;
+  }
+  .nav > li > a#search-menu {
+    padding-top: 15px;
+  }
+  .nav > li > a:hover,
+  .nav .open > a,
+  .nav > li.active {
+    border-bottom: 3px solid @info;
+    background-color: @background1;
+    color: @font3;
+  }
+  .nav > li.active > a:hover {
+    border-bottom: none;
+  }
+  #space-menu-dropdown li > ul > li > a > .media .media-body p {
+    color: @font4;
+    font-size: 11px;
+    margin: 0;
+    font-weight: 400;
+  }
+}
+
+@media (max-width: 767px) {
+  .topbar {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
\ No newline at end of file
diff --git a/less/tour.less b/less/tour.less
new file mode 100644
index 0000000000..7c43c59943
--- /dev/null
+++ b/less/tour.less
@@ -0,0 +1,21 @@
+// TourModule
+ul.tour-list {
+  list-style: none;
+  margin-bottom: 0;
+  padding-left: 10px;
+  li {
+    padding-top: 5px;
+    a {
+      color: @info;
+      .fa {
+        width: 16px;
+      }
+    }
+  }
+  li.completed {
+    a {
+      text-decoration: line-through;
+      color: @font4;
+    }
+  }
+}
\ No newline at end of file
diff --git a/less/user-feedback.less b/less/user-feedback.less
new file mode 100644
index 0000000000..07ed9b4a14
--- /dev/null
+++ b/less/user-feedback.less
@@ -0,0 +1,128 @@
+//
+// Statusbar
+// --------------------------------------------------
+.status-bar-body {
+    color: white; 
+    position: fixed; 
+    width: 100%; 
+    background-color: rgba(0, 0, 0, 0.7); 
+    text-align: center; 
+    padding: 20px;
+    z-index: 9999999; 
+    bottom: 0px; 
+    display: block;
+    line-height:20px;
+}
+
+.status-bar-close {
+    color:white;
+    fonfont-weight:bold;
+    font-size:21px;
+    cursor: pointer;
+}
+
+.status-bar-close:hover {
+    color:white;
+}
+
+.status-bar-close i {
+    vertical-align:top !important;
+    padding-top:3px;
+}
+
+.status-bar-content i {
+    margin-right:10px;
+    font-size:21px;
+    vertical-align:middle;
+}
+
+.status-bar-content .showMore {
+    color: @info;
+    float:right;
+    margin-left:10px;
+    font-size:0.7em;
+    cursor:pointer;
+    vertical-align:middle;
+    white-space:nowrap;
+}
+
+.status-bar-content .status-bar-details {
+    text-align:left;
+    font-size:0.7em;
+    margin-top:20px;
+    max-height:200px;
+    overflow:auto;
+}
+
+.status-bar-content span {
+    vertical-align:middle;
+}
+
+.status-bar-content i.error, .status-bar-content i.fatal {
+    color:@danger;
+}
+
+.status-bar-content i.warning {
+    color:@warning;
+}
+
+.status-bar-content i.info, .status-bar-content i.debug {
+    color:@info;
+}
+
+.status-bar-content i.success {
+    color:#85CA2B;
+}
+
+//
+// Third Party Tools
+// --------------------------------------------------
+// Highlight
+.highlight {
+  background-color: #fff8e0;
+}
+
+//
+// Bootstrap Alert panels
+// --------------------------------------------------
+.alert-default {
+  color: @font3;
+  background-color: @background1;
+  border-color: @background2;
+  font-size: 13px;
+  .info {
+    margin: 10px 0;
+  }
+}
+
+.alert-success {
+  color: #84be5e;
+  background-color: #f7fbf4;
+  border-color: #97d271;
+}
+
+.alert-warning {
+  color: #e9b168;
+  background-color: #fffbf7;
+  border-color: #fdd198;
+}
+
+.alert-danger {
+  color: #ff8989;
+  background-color: #fff6f6;
+  border-color: #ff8989;
+}
+
+//
+// data-saved feedback Deprecated since 1.2
+// --------------------------------------------------
+.data-saved {
+  padding-left: 10px;
+  color: @info;
+}
+
+img.bounceIn {
+  -webkit-animation-duration: 800ms;
+  -moz-animation-duration: 800ms;
+  animation-duration: 800ms;
+}
\ No newline at end of file
diff --git a/less/variables.less b/less/variables.less
new file mode 100644
index 0000000000..e96ae42aae
--- /dev/null
+++ b/less/variables.less
@@ -0,0 +1,21 @@
+//
+// Theme color variables
+// --------------------------------------------------
+@import "../protected/vendor/bower/bootstrap/less/variables.less";
+@import "../protected/vendor/bower/fontawesome/less/variables.less";
+
+@default: #ededed;
+@primary: #708fa0;
+@info: #6fdbe8;
+@success: #97d271;
+@warning: #fdd198;
+@danger: #ff8989;
+@font1: #bac2c7;
+@font2: #7a7a7a;
+@font3: #555;
+@font4: #bebebe;
+@font5: #aeaeae;
+@background1: #f7f7f7;
+@background2: #ededed;
+@background3: #d7d7d7;
+@background4: #b2b2b2;
\ No newline at end of file
diff --git a/protected/humhub/modules/comment/tests/codeception/_support/_generated/AcceptanceTesterActions.php b/protected/humhub/modules/comment/tests/codeception/_support/_generated/AcceptanceTesterActions.php
index a4be69547e..fd0e5bb478 100644
--- a/protected/humhub/modules/comment/tests/codeception/_support/_generated/AcceptanceTesterActions.php
+++ b/protected/humhub/modules/comment/tests/codeception/_support/_generated/AcceptanceTesterActions.php
@@ -1,5 +1,5 @@
 <?php  //[STAMP] 890a71cd7f21af7a261c0d3eceef09fb
-namespace stream\_generated;
+namespace comment\_generated;
 
 // This class was automatically generated by build task
 // You should not change it manually as it will be overwritten on next build
diff --git a/protected/humhub/modules/like/tests/codeception/_support/_generated/AcceptanceTesterActions.php b/protected/humhub/modules/like/tests/codeception/_support/_generated/AcceptanceTesterActions.php
index c9b7df6383..838217fee4 100644
--- a/protected/humhub/modules/like/tests/codeception/_support/_generated/AcceptanceTesterActions.php
+++ b/protected/humhub/modules/like/tests/codeception/_support/_generated/AcceptanceTesterActions.php
@@ -1,4 +1,4 @@
-<?php  //[STAMP] ac1b56f0e79c9b6d1c646836ee6bcb78
+<?php  //[STAMP] 11d1dbef7e50b480be5fa82a7c393e3e
 namespace like\_generated;
 
 // This class was automatically generated by build task
diff --git a/protected/humhub/modules/like/tests/codeception/_support/_generated/FunctionalTesterActions.php b/protected/humhub/modules/like/tests/codeception/_support/_generated/FunctionalTesterActions.php
index 0467a34f69..8962a3e9c4 100644
--- a/protected/humhub/modules/like/tests/codeception/_support/_generated/FunctionalTesterActions.php
+++ b/protected/humhub/modules/like/tests/codeception/_support/_generated/FunctionalTesterActions.php
@@ -1,4 +1,4 @@
-<?php  //[STAMP] 25c2b4e8b8fd2158213a3465a3ef3b60
+<?php  //[STAMP] 74c0c3a2840b2412882616390669c863
 namespace like\_generated;
 
 // This class was automatically generated by build task
diff --git a/protected/humhub/modules/like/tests/codeception/_support/_generated/UnitTesterActions.php b/protected/humhub/modules/like/tests/codeception/_support/_generated/UnitTesterActions.php
index 23971853e8..359d8a2754 100644
--- a/protected/humhub/modules/like/tests/codeception/_support/_generated/UnitTesterActions.php
+++ b/protected/humhub/modules/like/tests/codeception/_support/_generated/UnitTesterActions.php
@@ -1,4 +1,4 @@
-<?php  //[STAMP] 0468b7e2480518455b63a22d3aa6f7c2
+<?php  //[STAMP] e93907d5924b39a3cd4134cc6a6ea3a3
 namespace like\_generated;
 
 // This class was automatically generated by build task
diff --git a/protected/humhub/modules/space/tests/codeception/acceptance/CreateSpaceCest.php b/protected/humhub/modules/space/tests/codeception/acceptance/CreateSpaceCest.php
index 27ef256a09..826d0c707a 100644
--- a/protected/humhub/modules/space/tests/codeception/acceptance/CreateSpaceCest.php
+++ b/protected/humhub/modules/space/tests/codeception/acceptance/CreateSpaceCest.php
@@ -25,41 +25,46 @@ class CreateSpaceCest
         $I->waitForText('Create new space', 30, '#globalModal');
         $I->fillField('Space[name]', 'Space 1');
         $I->fillField('Space[description]', 'SpaceDescription');
-        
+
         $I->click('#access-settings-link');
         $I->waitForElementVisible('.field-space-join_policy');
-        
+
         // Only by invite
         $I->jsClick('#space-join_policy [value="0"]');
-        
+
         // Private visibility
         $I->jsClick('#space-visibility [value="0"]');
-        
+
         $I->click('Next', '#globalModal');
-        
+
         $I->waitForText('Name "Space 1" has already been taken.', 20, '#globalModal');
         $I->fillField('Space[name]', 'MySpace');
         $I->click('Next', '#globalModal');
-        
-        $I->waitForText('Add Modules', 20, '#globalModal');
-        
-        $I->click('Next', '#globalModal');
-        
+
+        // Fresh test environments (travis) won't have any preinstalled modules.
+        // Perhaps we should fetch an module manually by default.
+        try {
+            $I->waitForText('Add Modules', 5, '#globalModal');
+            $I->click('Next', '#globalModal');
+        } catch (Exception $e) {
+            // Do this if it's not present.
+        }
+
         $I->waitForText('Invite members', 10, '#globalModal');
         $I->selectUserFromPicker('#space-invite-user-picker', 'User1');
         $I->wait(1);
-        
+
         $I->click('Done', '#globalModal');
         $I->waitForText('MySpace');
         $I->waitForText('This space is still empty!');
-        
+
         $I->amUser1(true);
         $I->seeInNotifications('invited you to the space MySpace');
-        
+
         //TODO: Test private space
         // User Approval
     }
-    
+
     // User Approval
     // Space settings
 }
diff --git a/protected/humhub/tests/codeception/_support/_generated/AcceptanceTesterActions.php b/protected/humhub/tests/codeception/_support/_generated/AcceptanceTesterActions.php
index 8986998009..ea2ae912bc 100644
--- a/protected/humhub/tests/codeception/_support/_generated/AcceptanceTesterActions.php
+++ b/protected/humhub/tests/codeception/_support/_generated/AcceptanceTesterActions.php
@@ -1,4 +1,4 @@
-<?php  //[STAMP] 77171eef7f2410ed33ed28bc5e1863fa
+<?php  //[STAMP] ff10e47c5c501e39ee64ba18344ed1d4
 namespace _generated;
 
 // This class was automatically generated by build task
diff --git a/themes/HumHub/less/build.less b/themes/HumHub/less/build.less
new file mode 100644
index 0000000000..5b7c4c7e5c
--- /dev/null
+++ b/themes/HumHub/less/build.less
@@ -0,0 +1,15 @@
+// Edit this if your theme folder resides outside of your humhub/themes directory.
+@HUMHUB:  "../../../../less";
+
+// Import default variables and mixins
+@import "@{HUMHUB}/variables.less";
+@import "@{HUMHUB}/mixins.less";
+
+// Overwrite default variables and mixins here
+@import "variables.less";
+
+// Import default less
+@import "@{HUMHUB}/humhub.less";
+
+// Overwrite default selectors here
+@import "theme.less";
diff --git a/themes/HumHub/less/mixins.less b/themes/HumHub/less/mixins.less
new file mode 100644
index 0000000000..ab2d701253
--- /dev/null
+++ b/themes/HumHub/less/mixins.less
@@ -0,0 +1,10 @@
+/*
+To change this license header, choose License Headers in Project Properties.
+To change this template file, choose Tools | Templates
+and open the template in the editor.
+*/
+/* 
+    Created on : 14.12.2016, 11:57:10
+    Author     : buddha
+*/
+
diff --git a/themes/HumHub/less/variables.less b/themes/HumHub/less/variables.less
new file mode 100644
index 0000000000..8d1fca68fc
--- /dev/null
+++ b/themes/HumHub/less/variables.less
@@ -0,0 +1,18 @@
+//
+// Theme color variables
+// --------------------------------------------------
+@default: #ededed;
+@primary: #708fa0;
+@info: #6fdbe8;
+@success: #97d271;
+@warning: #fdd198;
+@danger: #ff8989;
+@font1: #bac2c7;
+@font2: #7a7a7a;
+@font3: #555;
+@font4: #bebebe;
+@font5: #aeaeae;
+@background1: #f7f7f7;
+@background2: #ededed;
+@background3: #d7d7d7;
+@background4: #b2b2b2;
\ No newline at end of file