Add dark styles

src/mibew/styles/chats/dark/chat.css

@@ -0,0 +1,594 @@
+/*
+ * Copyright 2005-2021 the original author or authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* basic settings */
+html,
+body {
+    height: 100%;
+}
+body {
+    margin: 0;
+    padding: 0;
+    font-weight: normal;
+    font-size: 11px;
+    font-family: Tahoma, sans-serif;
+    line-height: 1;
+    min-width: 500px;
+    background-color: #a4a4a4;
+}
+body.rtl {
+    text-align: right;
+    direction: rtl;
+}
+body.invitation {
+    min-width: 0;
+    min-height: 0;
+}
+select, option, input, textarea {
+    background-color: #c2c2c2;
+}
+a {
+    text-decoration: underline;
+    color: #9d6e06;
+}
+a:hover {
+    text-decoration: none;
+}
+img {
+    vertical-align: bottom;
+    border: 0 none;
+}
+.clear {
+    clear: both;
+    height: 0;
+    font-size: 0;
+    line-height: 0;
+    display: block;
+    visibility: hidden;
+}
+
+/* layout of chat */
+#top {
+    position: relative;
+    padding: 5px 14px;
+    background: #a4a4a4 url("images/topbg.gif") scroll repeat-x 0 100%;
+    _zoom: 1; /* IE6 fix */
+}
+#chat-header {
+    position: relative;
+    padding: 0 10px;
+    background: #a4a4a4 url("images/chatheaderbg.gif") scroll repeat-x 0 0;
+    _zoom: 1; /* IE6 fix */
+}
+#chat {
+    padding: 0 10px;
+    background: #a4a4a4;
+}
+#message {
+    padding: 0 10px;
+    background: #a4a4a4;
+}
+#send {
+    padding: 0 10px 5px;
+    background: #aeaeae url("images/bottombg.gif") scroll repeat-x 0 0;
+}
+#footer {
+    margin: 0 auto;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    text-align: center;
+    color: #222;
+}
+#footer a {
+    color: #222;
+}
+
+/* chat header (#chat-header) */
+#chat-header .background-center {
+    background: #a4a4a4 url("images/chatheaderbgc.gif") scroll repeat-x 0 0;
+}
+#chat-header .background-left {
+    background: transparent url("images/chatheaderbgl.gif") scroll no-repeat 0 0;
+    _zoom: 1; /* IE6 fix */
+}
+#chat-header .background-right {
+    height: 42px;
+    background: transparent url("images/chatheaderbgr.gif") scroll no-repeat 100% 0;
+}
+#logo {
+    font-weight: normal;
+    font-size: 17px;
+    font-family: Arial, sans-serif;
+    color: #9d6e06;
+    padding: 10px 0;
+}
+#logo a {
+    float: left;
+    text-decoration: none;
+}
+#page-title {
+    float: right;
+    margin-top: 5px;
+    text-align: right;
+}
+
+/* common controls */
+#controls-region {
+    padding-right: 25px;
+}
+.control {
+    display: inline-block;
+    margin: 15px 0 0 11px;
+    cursor: pointer;
+    float: right;
+}
+.tpl-image {
+    width: 16px;
+    height: 16px;
+    background: transparent url("images/buttons.gif") scroll no-repeat 0 0;
+}
+.image-close-window {
+    background-position: -128px -16px;
+}
+a:hover .image-close-window {
+    background-position: -128px 0;
+}
+.close-control .tpl-image {
+    background-position: -128px -16px;
+}
+.active-close-control .tpl-image {
+    background-position: -128px 0;
+}
+.refresh-control .tpl-image {
+    background-position: -80px -16px;
+}
+.active-refresh-control .tpl-image {
+    background-position: -80px 0;
+}
+.secure-mode-control .tpl-image {
+    background-position: -144px -16px;
+}
+.active-secure-mode-control .tpl-image {
+    background-position: -144px 0;
+}
+.history-control .tpl-image {
+    background-position: -112px -16px;
+}
+.active-history-control .tpl-image {
+    background-position: -112px 0;
+}
+.sound-control .sound-control-on {
+    background-position: -48px -16px;
+}
+.active-sound-control .sound-control-on {
+    background-position: -48px 0;
+}
+.sound-control .sound-control-off {
+    background-position: -64px -16px;
+}
+.active-sound-control .sound-control-off {
+    background-position: -64px 0;
+}
+.send-mail-control .tpl-image {
+    background-position: -32px -16px;
+}
+.active-send-mail-control .tpl-image {
+    background-position: -32px 0;
+}
+.redirect-control .tpl-image {
+    background-position: -96px -16px;
+}
+.active-redirect-control .tpl-image {
+    background-position: -96px 0;
+}
+.user-name-control {
+    font-size: 14px;
+    cursor: auto;
+    float: left;
+    line-height: 22px;
+    margin-top: 12px;
+}
+.user-name-control-set {
+    display: inline-block;
+    vertical-align: middle;
+    background-position: 0 -16px;
+}
+.user-name-control-set:hover {
+    background-position: 0 0;
+}
+.user-name-control-change {
+    display: inline-block;
+    vertical-align: middle;
+    background-position: -16px -16px;
+}
+.user-name-control-change:hover {
+    background-position: -16px 0;
+}
+.user-name-control-input-background {
+    width: 95px;
+    height: 16px;
+    padding: 3px;
+    background: #aeaeae url("images/input_name.gif") scroll no-repeat 0 0;
+    display: inline-block;
+    _background-color: transparent;
+}
+#user-name-control-input {
+    width: 95px;
+    height: 16px;
+    margin: 0;
+    padding: 0;
+    border: 0 none;
+    font-weight: normal;
+    font-size: 12px;
+    font-family: Tahoma, sans-serif;
+}
+.user-name-control-prefix {
+    padding-right: 10px;
+}
+
+/* main chat region (#chat) */
+#chat .background-left {
+    background: #aeaeae url("images/chatbgl.gif") scroll repeat-y 0 0;
+}
+#chat .background-right {
+    background: transparent url("images/chatbgr.gif") scroll repeat-y 100% 0;
+}
+#chat .background-shady-center {
+    background: transparent url("images/sdwbgc.png") scroll repeat-x 0 100%;
+}
+#chat .background-shady-left {
+    background: transparent url("images/sdwbgl.png") scroll no-repeat 0 100%;
+}
+#chat .background-shady-right {
+    position: relative;
+    padding: 0 4px 40px;
+    background: transparent url("images/sdwbgr.png") scroll no-repeat 100% 100%;
+    _zoom: 1; /* IE6 fix */
+}
+#status-region {
+    position: absolute;
+    bottom: 20px;
+    left: 14px;
+    font-size: 12px;
+    color: #333333;
+}
+.status {
+    float: left;
+    padding-right: 10px;
+}
+#avatar-region {
+    float: right;
+    height: 200px;
+    background: #eeeeee url("images/avatarbg.gif") scroll repeat-y 100% 0;
+}
+.avatar {
+    width: 100px;
+    height: 100px;
+    margin: 10px 10px 0 10px;
+    text-align: center;
+    line-height: 0;
+    font-size: 0;
+    overflow: hidden;
+}
+.default-avatar {
+    background: transparent url("images/avatar.jpg") scroll no-repeat 50% 10px;
+    width: 100px;
+    height: 100px;
+}
+.avatar img {
+    max-width: 100px;
+    border: none;
+}
+#messages-region {
+    height: 200px;
+    min-height: 150px;
+    overflow-y: auto;
+    padding: 10px 10px 0;
+    font-weight: normal;
+    font-size: 10px;
+    font-family: Tahoma, sans-serif;
+    line-height: 1.8em;
+    color: #222;
+}
+#messages-region .message-info {
+    font-size: 1.1em;
+    color: #367b12;
+}
+#messages-region .message-hidden,
+#messages-region .message-event {
+    font-size: 1.1em;
+}
+#messages-region .name-agent {
+    font-size: 1.1em;
+    font-weight: bold;
+    color: #000;
+}
+#messages-region .name-user {
+    font-size: 1.1em;
+    font-weight: bold;
+    color: #da251d;
+}
+#messages-region .message-agent,
+#messages-region .message-user {
+    font-size: 1.1em;
+    color: #000;
+}
+
+/* message area (#message) */
+#message .background-center {
+    background: #a4a4a4 url("images/message.png") scroll repeat-x 0 -95px;
+}
+#message .background-left {
+    background: transparent url("images/message.png") scroll no-repeat 0 0;
+}
+#message .background-right {
+    height: 58px;
+    padding: 14px 14px 23px;
+    background: transparent url("images/message.png") scroll no-repeat 100% -190px;
+}
+#message-input {
+    overflow: auto;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    font-weight: normal;
+    font-size: 12px;
+    font-family: Tahoma, sans-serif;
+    border: 0 none;
+    background: transparent;
+    resize: none; /* disable resize textarea in Google Chrome, Safari and Firefox 4 */
+}
+
+/* sending message area (#send) */
+#post-message {
+}
+#send-message, .submit-button {
+    float: right;
+    width: 190px;
+    height: 33px;
+    font-weight: normal;
+    font-size: 17px;
+    font-family: Arial, sans-serif;
+    line-height: 30px;
+    text-align: center;
+    text-decoration: none;
+    color: #9d6e06;
+    background: url("images/submit.gif") no-repeat 0 0 transparent;
+}
+#send-message:hover, .submit-button:hover {
+    color: #000000;
+    background: url("images/submit.gif") no-repeat -190px 0 transparent;
+}
+#predefined-wrapper {
+    float: left;
+    padding: 5px 0 0 3px;
+}
+#predefined {
+    width: 200px;
+}
+
+/* survey */
+#message-survey {
+    resize: none;
+}
+
+/* leavy message */
+#message-leave {
+    resize: none;
+}
+
+/* error page (error.tpl) */
+#logo-wrapper {
+    position: relative;
+    padding: 5px 14px;
+    background: #adadad url("images/logobg.gif") scroll repeat-x 0 100%;
+    _zoom: 1; /* IE6 fix */
+}
+.headers-inwards-wrapper-common {
+    background: #aeaeae url("images/wndb.gif") scroll repeat-x 0 100%;
+}
+.headers-inwards-wrapper-left {
+    background: transparent url("images/chatbgl.gif") scroll repeat-y 0 0;
+}
+.headers-inwards-wrapper-right {
+    background: transparent url("images/chatbgr.gif") scroll repeat-y 100% 0;
+}
+.headers-inwards-wrapper-top {
+    background: transparent url("images/wndt.gif") scroll repeat-x 0 0;
+}
+.headers-inwards-wrapper-top-left {
+    background: transparent url("images/wndtl.gif") scroll no-repeat 0 0;
+}
+.headers-inwards-wrapper-top-right {
+    background: transparent url("images/wndtr.gif") scroll no-repeat 100% 0;
+}
+.headers-inwards-wrapper-bottom-left {
+    background: transparent url("images/wndbl.gif") scroll no-repeat 0 100%;
+}
+.headers-inwards-wrapper-bottom-right {
+    position: relative;
+    padding: 14px;
+    background: transparent url("images/wndbr.gif") scroll no-repeat 100% 100%;
+}
+.headers-inwards-wrapper-bottom-right .buttons {
+    top: 14px;
+    position: absolute;
+    right: 25px;
+}
+#headers {
+    padding: 0 10px;
+    background: #a4a4a4;
+}
+#content-wrapper {
+    padding: 10px 14px 50px;
+    background: transparent url("images/content.gif") scroll repeat-x 0 -2px;
+}
+#content-wrapper {
+    font-weight: normal;
+    font-size: 13px;
+    font-family: Arial, sans-serif;
+}
+.info-message {
+    padding: 0 60px 0 0;
+    font-weight: normal;
+    font-size: 13px;
+    font-family: Arial, sans-serif;
+}
+
+/* redirection page (redirect.tpl) */
+.left {
+    float: left;
+    width: 49%;
+}
+.right {
+    float: right;
+    width: 49%;
+}
+.center {
+    padding-top: 30px;
+    text-align: center;
+}
+ul {
+    margin: 10px 0;
+    padding: 0 0 0 10px;
+    list-style: none outside none;
+}
+ul li {
+    margin: 0 0 4px;
+    padding: 0 0 0 10px;
+    list-style: none outside none;
+    background: transparent url("images/list.gif") scroll no-repeat 0 5px;
+}
+
+/* miscellanea */
+.form {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-collapse: collapse;
+    vertical-align: top;
+}
+.form td {
+    margin: 0;
+    padding: 5px;
+    border: 0;
+    border-collapse: collapse;
+    vertical-align: top;
+}
+#content-wrapper #send-message {
+    float: left;
+    margin-top: 10px;
+}
+#content-wrapper input,
+#content-wrapper textarea,
+.headers-inwards-wrapper-bottom-right input {
+    border: 1px solid #445454;
+}
+#ajax-loader {
+    display: none;
+    position: absolute;
+    top: 200px;
+    left: 250px;
+}
+
+/* invitations */
+#invitation-messages-region {
+    height: 150px;
+    min-height: 150px;
+    overflow-y: auto;
+    padding: 0;
+    font-weight: normal;
+    font-size: 10px;
+    font-family: Tahoma, sans-serif;
+    line-height: 1.8em;
+    color: #222;
+    background-color: #c2c2c2;
+}
+#invitation-messages-region .message-info {
+    font-size: 1.1em;
+    color: #7baa0f;
+}
+#invitation-messages-region .message-hidden,
+#invitation-messages-region .message-event {
+    font-size: 1.1em;
+}
+#invitation-messages-region .name-agent {
+    font-size: 1.1em;
+    font-weight: bold;
+    color: #000000;
+}
+#invitation-messages-region .name-user {
+    font-size: 1.1em;
+    font-weight: bold;
+    color: #da251d;
+}
+#invitation-messages-region .message-agent,
+#invitation-messages-region .message-user {
+    font-size: 1.1em;
+    color: #000000;
+}
+
+/* confirmation dialogue */
+.info-message .visitor {
+    color: blue;
+}
+.info-message .operator {
+    color: green;
+}
+#confirm-pane {
+    width: 100%;
+}
+#confirm-pane .button-wrapper {
+    width: 400px;
+    margin: 140px auto 0;
+}
+#confirm-pane .submit-button {
+    float: none;
+    display: inline-block;
+}
+
+/* responsive design for mobile devices */
+@media only screen and (max-width: 500px) {
+    body {
+        min-width: auto;
+    }
+    #footer {
+        max-width: 100%;
+    }
+    #message-leave {
+        width: 100%;
+    }
+    .username {
+        width: 100%;
+    }
+    #logo img {
+        max-width: 100%;
+    }
+    #invitation-messages-region {
+        max-width: 100%;
+    }
+}
+
+/* additional tricks for desktops */
+@media (min-width: 501px) {
+    #footer {
+        width: 400px;
+    }
+    #invitation-messages-region {
+        width: 388px;
+    }
+}

src/mibew/styles/chats/dark/chat_ie7.css

@@ -0,0 +1,25 @@
+/*
+ * Copyright 2005-2021 the original author or authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* common controls */
+.control,
+.user-name-control-set,
+.user-name-control-change,
+.user-name-control-input-background,
+#confirm-pane .submit-button {
+    display: inline;
+    zoom: 1;
+}

src/mibew/styles/chats/dark/config.yml

@@ -0,0 +1,25 @@
+# This file determines some chat styles options
+
+chat:
+    # These params are used for chat windows opened via JavaScript's window.open.
+    window:
+        height: 480
+        width: 640
+        resizable: true
+    # These params are used to customize chat popup.
+    iframe:
+        css: iframe.css
+
+mail:
+    # These params are used for send mail windows opened via JavaScript's window.open.
+    window:
+        height: 254
+        width: 603
+        resizable: false
+
+# Screenshots section describe all screenshots shipped with style
+# Params names should be equals to file names without extension. Pictures
+# extension should be '.png'
+# Params values should be equals to screenshot description
+screenshots:
+    client_chat: "Client chat window"

src/mibew/styles/chats/dark/iframe.css

@@ -0,0 +1,83 @@
+/*
+ * Copyright 2005-2021 the original author or authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+div.mibew-chat-wrapper {
+    border: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    position: fixed !important;
+    bottom: 5px !important;
+    right: 5px !important;
+}
+
+iframe.mibew-chat-frame {
+    background: url("images/ajax-loader.gif") center center no-repeat #aeaeae !important;
+    margin: 0 !important;
+    padding: 0px !important;
+    border: 0 !important;
+    outline: 0 !important;
+    border: 1px solid #aaa !important;
+    width: 510px !important;
+    max-width: 100% !important;
+    height: 480px !important;
+    overflow: hidden !important;
+    z-index: 100 !important;
+    border-radius: 10px !important;
+    -webkit-border-radius: 10px !important;
+    -moz-border-radius: 10px !important;
+    box-shadow: 0 1px 1px 1px #777 !important;
+    -moz-box-shadow: 0 1px 1px 1px #777 !important;
+    -webkit-box-shadow: 0 1px 1px 1px #777 !important;
+}
+
+div.mibew-chat-frame-toggle {
+    border: 1px solid black;
+    position: fixed !important;
+    border: 1px solid #aaa !important;
+    overflow: hidden !important;
+    z-index: 100 !important;
+    border-radius: 10px !important;
+    -webkit-border-radius: 10px !important;
+    -moz-border-radius: 10px !important;
+    box-shadow: 0 1px 1px 1px #777 !important;
+    -moz-box-shadow: 0 1px 1px 1px #777 !important;
+    -webkit-box-shadow: 0 1px 1px 1px #777 !important;
+    cursor: pointer;
+}
+
+div.mibew-chat-frame-toggle-on {
+    width: 27px !important;
+    height: 480px !important;
+    right: 517px !important;
+    bottom: 5px !important;
+    background: #999999 url("images/right.png") scroll no-repeat 0 0;
+}
+
+div.mibew-chat-frame-toggle-off {
+    width: 40px !important;
+    height: 40px !important;
+    right: 5px !important;
+    bottom: 5px !important;
+    background: #999999 url("images/default-logo-short.png") scroll no-repeat 4px 5px;
+}
+
+/* responsive design for mobile devices */
+@media only screen and (max-width: 500px) {
+    div.mibew-chat-wrapper {
+        -webkit-overflow-scrolling: touch !important;
+        overflow-y: scroll !important;
+    }
+}

src/mibew/styles/chats/dark/js/source/.htaccess

@@ -0,0 +1 @@
+Deny from all

src/mibew/styles/chats/dark/js/source/resize.js

@@ -0,0 +1,144 @@
+/*!
+ * This file is a part of Mibew Messenger.
+ *
+ * Copyright 2005-2021 the original author or authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+(function(Mibew, $){
+
+    /**
+     * Total height of elements exclude #messages-region or false if it is not
+     * calculated yet
+     * @type Number|Boolean
+     */
+    var delta = false;
+
+    /**
+     * Timer id
+     * @type Number
+     */
+    var t;
+
+    /**
+     * Stretch #messages-region to fill the window.
+     *
+     * @param {Boolean} recalculateHeight Indicates if height of elements must
+     *   be recalculated. It can be useful when elements set is changed.
+     */
+    var updateHeight = function(recalculateHeight) {
+        if ($('#messages-region').size() == 0) {
+            return;
+        }
+        // Create shortcut for #messages-region
+        var $msgs = $('#messages-region');
+        var $ava = $('#avatar-region');
+
+        // Calculate delta
+        if (delta === false || recalculateHeight) {
+            var max = 0;
+            $('body > *').each(function() {
+                var $el = $(this);
+                var pos = $el.offset();
+                var height = $el.height();
+                if (max < (pos.top + height)) {
+                    max = pos.top + height;
+                }
+            });
+            delta = max - $msgs.height();
+        }
+
+        // Check new height
+        var newHeight = $(window).height() - delta;
+
+        if (newHeight < parseInt($msgs.css('minHeight'))) {
+            return;
+        }
+
+        // Update messages region height
+        $msgs.height(newHeight);
+
+        // Update avatar region height
+        if ($ava.size() > 0) {
+            $ava.height($msgs.innerHeight());
+        }
+    }
+
+    /**
+     * Fix bug with window resize event.
+     *
+     * @param {Boolean} recalculateHeight Indicates if height of elements must
+     *   be recalculated. The default value is false.
+     */
+    var updateHeightWrapper = function(recalculateHeight) {
+        if (t) {
+            clearTimeout(t);
+        }
+        t = setTimeout(function() {
+            updateHeight(recalculateHeight || false);
+        }, 0);
+    }
+
+    // Stretch messages region after chat page initialize
+    Mibew.Application.Chat.addInitializer(function() {
+        /**
+         * Contains total count of images on the page
+         * @type Number
+         */
+        var totalImagesCount = $('img').size();
+
+        /**
+         * Contains count of loaded images
+         * @type Number
+         */
+        var imagesLoaded = 0;
+
+        /**
+         * Run then image loaded. If all images loaded run resizer.
+         * @type Function
+         */
+        var imageLoadCallback = function() {
+            imagesLoaded++;
+            if (totalImagesCount == imagesLoaded) {
+                updateHeight();
+                // Scroll messages region to bottom
+                $('#messages-region').scrollTop(
+                    $('#messages-region').prop('scrollHeight')
+                );
+                // Stretch messages region on resize
+                $(window).resize(updateHeightWrapper);
+            }
+        }
+
+        // Change size of message region only after all images will be loaded
+        $('img').each(function(){
+            // Shortcut for current image element
+            var $el = $(this);
+            // Check if image already loaded and cached.
+            // Cached image have height and do not triggers load event.
+            if ($el.height() > 0) {
+                imageLoadCallback();
+            } else {
+                $el.load(imageLoadCallback);
+            }
+        });
+
+        // Change of user's "canPost" field changes visibility of message input
+        // form. Thus we should manually update the height.
+        Mibew.Objects.Models.user.on('change:canPost', function() {
+            updateHeightWrapper(true);
+        });
+    });
+
+})(Mibew, jQuery);

src/mibew/styles/chats/dark/templates_src/client_side/_logo.handlebars

@@ -0,0 +1,25 @@
+{{! Logo block}}
+<div id="logo-wrapper">
+    <div id="logo">
+        {{#if page.company.chatLogoURL}}
+            {{#if page.mibewHost}}
+                <a onclick="window.open('{{page.mibewHost}}');return false;" href="{{page.mibewHost}}">
+                    <img src="{{page.company.chatLogoURL}}" alt=""/>
+                </a>
+            {{else}}
+                <img src="{{page.company.chatLogoURL}}" alt=""/>
+            {{/if}}
+        {{else}}
+            {{#if page.mibewHost}}
+                <a onclick="window.open('{{page.mibewHost}}');return false;" href="{{page.mibewHost}}">
+                    <img src="{{page.stylePath}}/images/default-logo.png" alt=""/>
+                </a>
+            {{else}}
+                <img src="{{page.stylePath}}/images/default-logo.png" alt=""/>
+            {{/if}}
+        {{/if}}
+        &nbsp;
+        <div id="page-title">{{page.title}}</div>
+        <div class="clear">&nbsp;</div>
+    </div>
+</div>

src/mibew/styles/chats/dark/templates_src/client_side/chat/avatar.handlebars

@@ -0,0 +1 @@
+{{#if imageLink}}<img src="{{imageLink}}" border="0" alt="" />{{else}}<div class="default-avatar"></div>{{/if}}

src/mibew/styles/chats/dark/templates_src/client_side/chat/controls/close.handlebars

@@ -0,0 +1 @@
+<div class="tpl-image" title="{{l10n "Close chat"}}"></div>

src/mibew/styles/chats/dark/templates_src/client_side/chat/controls/history.handlebars

@@ -0,0 +1 @@
+<div class="tpl-image" title="{{l10n "Visit history"}}"></div>

src/mibew/styles/chats/dark/templates_src/client_side/chat/controls/redirect.handlebars

@@ -0,0 +1,3 @@
+{{#if user.canPost}}
+<div class="tpl-image" title="{{l10n "Redirect visitor to another operator"}}"></div>
+{{/if}}

src/mibew/styles/chats/dark/templates_src/client_side/chat/controls/refresh.handlebars

@@ -0,0 +1 @@
+<div class="tpl-image" title="{{l10n "Refresh"}}"></div>

src/mibew/styles/chats/dark/templates_src/client_side/chat/controls/secure_mode.handlebars

@@ -0,0 +1 @@
+<div class="tpl-image" title="SSL"></div>

src/mibew/styles/chats/dark/templates_src/client_side/chat/controls/send_mail.handlebars

@@ -0,0 +1 @@
+<div class="tpl-image" title="{{l10n "Send chat history by e-mail"}}"></div>

src/mibew/styles/chats/dark/templates_src/client_side/chat/controls/sound.handlebars

@@ -0,0 +1,5 @@
+{{#if enabled}}
+    <div class="tpl-image sound-control-on" title="{{l10n "Turn off sound"}}"></div>
+{{else}}
+    <div class="tpl-image sound-control-off" title="{{l10n "Turn on sound"}}"></div>
+{{/if}}

src/mibew/styles/chats/dark/templates_src/client_side/chat/controls/user_name.handlebars

@@ -0,0 +1,12 @@
+{{#if user.canChangeName}}
+    <span class="user-name-control-prefix">{{l10n "You are"}}</span>
+    {{#if nameInput}}
+        <div class="user-name-control-input-background"><input id="user-name-control-input" type="text" size="12" value="{{user.name}}" class="username" /></div>
+        <a href="javascript:void(0)" class="user-name-control-set tpl-image" title="{{l10n "Change name"}}"></a>
+    {{else}}
+        <a href="javascript:void(0)" title="{{l10n "Change name"}}">{{user.name}}</a>
+        <a class="user-name-control-change tpl-image" title="{{l10n "Change name"}}"></a>
+    {{/if}}
+{{else}}
+{{l10n "You are"}}&nbsp;{{user.name}}
+{{/if}}

src/mibew/styles/chats/dark/templates_src/client_side/chat/layout.handlebars

@@ -0,0 +1,29 @@
+{{! Chat window top. Includes logo and some info about company}}
+{{> _logo}}
+
+{{! Chat header}}
+<div id="chat-header">
+    <div class="background-center"><div class="background-left"><div class="background-right">
+        {{! Chat controls region}}
+        <div id="controls-region"></div>
+    </div></div></div>
+</div>
+
+{{! Chat region}}
+<div id="chat">
+    <div class="background-left"><div class="background-right"><div class="background-shady-center"><div class="background-shady-left"><div class="background-shady-right">
+        {{#unless user.isAgent}}
+        <div id="avatar-region"></div>
+        {{/unless}}
+        {{! Chat messages region}}
+        <div id="messages-region"></div>
+        {{! Chat status region}}
+        <div id="status-region"></div>
+    </div></div></div></div></div>
+</div>
+
+{{! Message form region}}
+<div id="message-form-region"></div>
+
+{{! Footer links}}
+<div id="footer">{{l10n "Powered by:"}} <a id="poweredby-link" href="https://mibew.org" title="Mibew Messenger project" target="_blank">mibew.org</a></div>

src/mibew/styles/chats/dark/templates_src/client_side/chat/message.handlebars

@@ -0,0 +1,3 @@
+<span>{{formatTime created}}</span> 
+{{#if name}}<span class='name-{{kindName}}'>{{name}}</span>: {{/if}}
+<span class='message-{{kindName}}'>{{#replace "\n" "<br/>"}}{{urlReplace message}}{{/replace}}</span><br/>

src/mibew/styles/chats/dark/templates_src/client_side/chat/message_form.handlebars

@@ -0,0 +1,26 @@
+<div id="message">
+{{#if user.canPost}}
+    <div class="background-center"><div class="background-left"><div class="background-right">
+        <textarea id="message-input" class="message" tabindex="0" rows="4" cols="10"></textarea>
+    </div></div></div>
+{{/if}}
+</div>
+
+<div id="send">
+{{#if user.canPost}}
+    <div id="post-message">
+        <div id="predefined-wrapper">
+            {{#if user.isAgent}}
+                <select id="predefined" size="1" class="answer">
+                    <option>{{l10n "Select answer..."}}</option>
+                {{#each predefinedAnswers}}
+                    <option>{{this.short}}</option>
+                {{/each}}
+                </select>
+            {{/if}}
+        </div>
+        <a href="javascript:void(0)" id="send-message" title="{{l10n "Send message"}}">{{{l10n "Send ({0})" sendShortcut}}}</a>
+    </div>
+{{/if}}
+</div>
+<div class="clear"></div>

src/mibew/styles/chats/dark/templates_src/client_side/chat/status/base.handlebars

@@ -0,0 +1 @@
+{{title}}

src/mibew/styles/chats/dark/templates_src/client_side/chat/status/message.handlebars

@@ -0,0 +1 @@
+{{message}}

src/mibew/styles/chats/dark/templates_src/client_side/chat/status/typing.handlebars

@@ -0,0 +1 @@
+{{l10n "Remote user is typing..."}}

src/mibew/styles/chats/dark/templates_src/client_side/default_control.handlebars

@@ -0,0 +1 @@
+<strong>{{title}}</strong>

src/mibew/styles/chats/dark/templates_src/client_side/invitation/layout.handlebars

@@ -0,0 +1 @@
+<div id="invitation-messages-region"></div>

src/mibew/styles/chats/dark/templates_src/client_side/leave_message/description.handlebars

@@ -0,0 +1,6 @@
+<div class="buttons">
+    <a href="javascript:Mibew.Utils.closeChatPopup();" title="{{l10n "Close"}}">
+        <img class="tpl-image image-close-window" src="{{page.stylePath}}/images/free.gif" alt="{{l10n "Close"}}" />
+    </a>
+</div>
+<div class="info-message">{{{l10n "Sorry. None of the support team is available at the moment. <br/>Please leave a message and someone will get back to you shortly."}}}</div>

src/mibew/styles/chats/dark/templates_src/client_side/leave_message/form.handlebars

@@ -0,0 +1,57 @@
+<form name="leaveMessageForm" method="post" action="">
+    <input type="hidden" name="style" value="{{page.style}}"/>
+    <input type="hidden" name="info" value="{{info}}"/>
+    <input type="hidden" name="referrer" value="{{referrer}}"/>
+    {{#unless groups}}{{#if groupId}}<input type="hidden" name="group" value="{{groupId}}"/>{{/if}}{{/unless}}
+
+    <div class="errors"></div>
+
+    <table cellspacing="1" cellpadding="5" border="0" class="form">
+        <tr>
+            <td><strong>{{l10n "Your email"}}:</strong></td>
+            <td><input type="text" name="email" size="50" value="{{email}}" class="username"/></td>
+        </tr>
+        <tr>
+            <td><strong>{{l10n "Your name"}}:</strong></td>
+            <td><input type="text" name="name" size="50" value="{{name}}" class="username"/></td>
+        </tr>
+    {{#if groups}}
+        <tr>
+            <td class="text"><strong>{{l10n "Choose Department:"}}</strong></td>
+            <td>
+                <select name="group" style="min-width:200px;">
+                    {{#each groups}}
+                        <option value="{{this.id}}" {{#if this.selected}}selected="selected"{{/if}}>{{this.name}}</option>
+                    {{/each}}
+                </select>
+            </td>
+        </tr>
+        <tr>
+            <td class="text"><strong>{{l10n "Department description:"}}</strong></td>
+            <td class="text" id="group-description">
+                {{#each groups}}{{#if this.selected}}{{this.description}}{{/if}}{{/each}}
+            </td>
+        </tr>
+    {{/if}}
+        <tr>
+            <td><strong>{{l10n "Message"}}:</strong></td>
+            <td valign="top">
+                <textarea id="message-leave" name="message" tabindex="0" cols="40" rows="5">{{message}}</textarea>
+            </td>
+        </tr>
+    {{#if showCaptcha}}
+        <tr>
+            <td><img id="captcha-img" src="captcha"/></td>
+            <td><input type="text" name="captcha" size="50" maxlength="15" value="" class="username"/></td>
+        </tr>
+    {{/if}}
+    {{#if privacyPolicyUrl}}
+        <tr>
+            <td colspan="2"><strong>{{{l10n "Please note that by leaving the message you're explicitly agree with the <a href=\"{0}\" target=\"_blank\">Privacy Policy</a>" privacyPolicyUrl}}}</strong></td>
+        </tr>
+    {{/if}}
+    </table>
+    <a href="javascript:void(0);" class="but" id="send-message">{{l10n "Send"}}</a>
+    <div class="clear">&nbsp;</div>
+</form>
+<div id="ajax-loader"><img src="{{page.stylePath}}/images/ajax-loader.gif" alt="Loading..." /></div>

src/mibew/styles/chats/dark/templates_src/client_side/leave_message/layout.handlebars

@@ -0,0 +1,11 @@
+{{! Logo block}}
+{{> _logo}}
+
+{{! Header block. Contains description}}
+<div id="headers">
+    <div class="headers-inwards-wrapper-common"><div class="headers-inwards-wrapper-left"><div class="headers-inwards-wrapper-right"><div class="headers-inwards-wrapper-top"><div class="headers-inwards-wrapper-top-left"><div class="headers-inwards-wrapper-top-right"><div class="headers-inwards-wrapper-bottom-left"><div class="headers-inwards-wrapper-bottom-right" id="description-region">
+    </div></div></div></div></div></div></div></div>
+</div>
+
+{{! Empty container for main content}}
+<div id="content-wrapper"></div>

src/mibew/styles/chats/dark/templates_src/client_side/leave_message/sent_description.handlebars

@@ -0,0 +1,6 @@
+<div class="buttons">
+        <a href="javascript:Mibew.Utils.closeChatPopup();" title="{{l10n "Close..."}}">
+            <img class="tpl-image image-close-window" src="{{page.stylePath}}/images/free.gif" alt="{{l10n "Close..."}}" />
+        </a>
+</div>
+<div class="info-message">{{l10n "Thank you for your message. We'll answer your query by email as soon as possible."}}</div>

src/mibew/styles/chats/dark/templates_src/client_side/message.handlebars

@@ -0,0 +1,3 @@
+<span>{{formatTime created}}</span>
+{{#if name}}<span class='name-{{kindName}}'>{{name}}</span>: {{/if}}
+<span class='message-{{kindName}}'>{{#replace "\n" "<br/>"}}{{urlReplace message}}{{/replace}}</span><br/>

src/mibew/styles/chats/dark/templates_src/client_side/survey/form.handlebars

@@ -0,0 +1,55 @@
+<form name="surveyForm" method="post" action="">
+    <input type="hidden" name="style" value="{{page.style}}"/>
+    <input type="hidden" name="info" value="{{info}}"/>
+    <input type="hidden" name="referrer" value="{{referrer}}"/>
+    <input type="hidden" name="survey" value="on"/>
+    {{#unless showEmail}}<input type="hidden" name="email" value="{{email}}"/>{{/unless}}
+    {{#unless groups}}{{#if groupId}}<input type="hidden" name="group" value="{{groupId}}"/>{{/if}}{{/unless}}
+    {{#unless showMessage}}<input type="hidden" name="message" value="{{message}}"/>{{/unless}}
+
+    <div class="errors"></div>
+
+    <table class="form">
+    {{#if groups}}
+        <tr>
+            <td><strong>{{l10n "Choose Department:"}}</strong></td>
+            <td>
+                <select name="group">
+                    {{#each groups}}
+                        <option value="{{this.id}}" {{#if this.selected}}selected="selected"{{/if}}>{{this.name}}{{#unless this.online}} (offline){{/unless}}</option>
+                    {{/each}}
+                </select>
+            </td>
+        </tr>
+        <tr>
+            <td><strong>{{l10n "Department description:"}}</strong></td>
+            <td id="group-description">{{#each groups}}{{#if this.selected}}{{this.description}}{{/if}}{{/each}}</td>
+        </tr>
+    {{/if}}
+        <tr>
+            <td><strong>{{l10n "Name:"}}</strong></td>
+            <td><input type="text" name="name" size="50" value="{{name}}" class="username" {{#unless canChangeName}}disabled="disabled"{{/unless}}/></td>
+        </tr>
+    {{#if showEmail}}
+        <tr>
+            <td><strong>{{l10n "Email:"}}</strong></td>
+            <td><input type="text" name="email" size="50" value="{{email}}" class="username"/></td>
+        </tr>
+    {{/if}}
+    {{#if showMessage}}
+        <tr>
+            <td><strong>{{l10n "Initial Question:"}}</strong></td>
+            <td valign="top"><textarea id="message-survey" name="message" tabindex="0" cols="45" rows="2">{{message}}</textarea></td>
+        </tr>
+    {{/if}}
+    {{#if privacyPolicyUrl}}
+        <tr>
+            <td colspan="2"><strong>{{{l10n "Please note that by starting the chat you're explicitly agree with the <a href=\"{0}\" target=\"_blank\">Privacy Policy</a>" privacyPolicyUrl}}}</strong></td>
+        </tr>
+    {{/if}}
+    </table>
+    <br/>
+    <a href="javascript:void(0);" class="but" id="submit-survey">{{l10n "Start Chat"}}</a>
+    <div class="clear">&nbsp;</div>
+</form>
+<div id="ajax-loader"><img src="{{page.stylePath}}/images/ajax-loader.gif" alt="Loading..." /></div>

src/mibew/styles/chats/dark/templates_src/client_side/survey/layout.handlebars

@@ -0,0 +1,15 @@
+{{! Logo block}}
+{{> _logo}}
+
+{{! Header block. Contains description and close link}}
+<div id="headers">
+    <div class="headers-inwards-wrapper-common"><div class="headers-inwards-wrapper-left"><div class="headers-inwards-wrapper-right"><div class="headers-inwards-wrapper-top"><div class="headers-inwards-wrapper-top-left"><div class="headers-inwards-wrapper-top-right"><div class="headers-inwards-wrapper-bottom-left"><div class="headers-inwards-wrapper-bottom-right">
+        <div class="buttons">
+            <a href="javascript:Mibew.Utils.closeChatPopup();" title="{{l10n "Close"}}"><img class="tpl-image image-close-window" src="{{page.stylePath}}/images/free.gif" alt="{{l10n "Close"}}" /></a>
+        </div>
+        <div class="info-message">{{l10n "Thank you for contacting us. Please fill out the form below and click the Start Chat button."}}</div>
+    </div></div></div></div></div></div></div></div>
+</div>
+
+{{! Empty container for main content}}
+<div id="content-wrapper"></div>

src/mibew/styles/chats/dark/templates_src/server_side/_layout.handlebars

@@ -0,0 +1,65 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"{{#if rtl}} dir="rtl"{{/if}}>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
+        <title>{{#block "windowTitle"}}{{l10n "Mibew Messenger"}}{{/block}}</title>
+        <link rel="shortcut icon" href="{{asset "@CurrentStyle/images/favicon.ico"}}" type="image/x-icon" />
+        <link rel="stylesheet" type="text/css" href="{{asset "@CurrentStyle/chat.css"}}" media="all" />
+
+        <!-- Extra CSS files -->
+        {{cssAssets}}
+
+        <!-- Extra JavaScript files -->
+        {{jsAssets}}
+
+        <link href="{{asset "@CurrentStyle/vex.css"}}" rel="stylesheet" type="text/css" />
+
+        {{#block "head"}}{{/block}}
+    </head>
+
+    <body class="{{#if startFrom}}{{startFrom}}{{/if}}{{#if rtl}} rtl{{/if}}">
+        {{#block "page"}}
+            {{! Logo block}}
+            <div id="logo-wrapper">
+                <div id="logo">
+                    {{#if company.chatLogoURL}}
+                        {{#if mibewHost}}
+                            <a onclick="window.open('{{mibewHost}}');return false;" href="{{mibewHost}}">
+                                <img src="{{company.chatLogoURL}}" alt=""/>
+                            </a>
+                        {{else}}
+                            <img src="{{company.chatLogoURL}}" alt=""/>
+                        {{/if}}
+                    {{else}}
+                        {{#if mibewHost}}
+                            <a onclick="window.open('{{mibewHost}}');return false;" href="{{mibewHost}}">
+                                <img src="{{asset "@CurrentStyle/images/default-logo.png"}}" alt=""/>
+                            </a>
+                        {{else}}
+                            <img src="{{asset "@CurrentStyle/images/default-logo.png"}}" alt=""/>
+                        {{/if}}
+                    {{/if}}
+                    <div id="page-title">{{#block "pageTitle"}}{{l10n "Mibew Messenger"}}{{/block}}</div>
+                    <div class="clear">&nbsp;</div>
+                </div>
+            </div>
+
+            {{! Header block. Contains page description and buttons}}
+            <div id="headers">
+                <div class="headers-inwards-wrapper-common"><div class="headers-inwards-wrapper-left"><div class="headers-inwards-wrapper-right"><div class="headers-inwards-wrapper-top"><div class="headers-inwards-wrapper-top-left"><div class="headers-inwards-wrapper-top-right"><div class="headers-inwards-wrapper-bottom-left"><div class="headers-inwards-wrapper-bottom-right">
+                    <div class="buttons">
+                        {{#block "buttons"}}{{/block}}
+                    </div>
+                    <div class="info-message">
+                        {{#block "message"}}&nbsp;{{/block}}
+                    </div>
+                </div></div></div></div></div></div></div></div>
+            </div>
+
+            {{! Main content block}}
+            <div id="content-wrapper">
+                {{#block "content"}}&nbsp;{{/block}}
+            </div>
+        {{/block}}
+    </body>
+</html>

src/mibew/styles/chats/dark/templates_src/server_side/chat.handlebars

@@ -0,0 +1,14 @@
+{{#extends "_layout"}}
+    {{#override "head"}}
+        <!--[if IE 7]>
+            <link rel="stylesheet" type="text/css" href="{{asset "@CurrentStyle/chat_ie7.css"}}" media="all" />
+        <![endif]-->
+
+        <!-- Add style scripts -->
+        <script type="text/javascript" src="{{asset "@CurrentStyle/js/compiled/scripts.js"}}"></script>
+    {{/override}}
+
+    {{#override "page"}}
+        <div id="main-region"></div>
+    {{/override}}
+{{/extends}}

src/mibew/styles/chats/dark/templates_src/server_side/confirm.handlebars

@@ -0,0 +1,13 @@
+{{#extends "_layout"}}
+    {{#override "message"}}
+        {{l10n "Visitor <span class=\"visitor\">{0}</span> is already being assisted by <span class=\"operator\">{1}</span>.<br/> Are you really sure you want to start chatting the visitor?" user agent}}
+    {{/override}}
+
+    {{#override "content"}}
+        <div id="confirm-pane">
+            <div class="button-wrapper">
+                <a href="{{link}}" class="submit-button">{{l10n "Yes. I'm sure"}}</a> <a href="javascript:window.close();" class="submit-button">{{l10n "No. Close the window"}}</a>
+            </div>
+        </div>
+    {{/override}}
+{{/extends}}

src/mibew/styles/chats/dark/templates_src/server_side/error.handlebars

@@ -0,0 +1,22 @@
+{{#extends "_layout"}}
+    {{#override "windowTitle"}}{{l10n "Error"}}{{/override}}
+
+    {{#override "pageTitle"}}{{l10n "Error"}}{{/override}}
+
+    {{#override "buttons"}}
+        <a href="javascript:window.close();" title="{{l10n 'Close...'}}">
+            <img class="tpl-image image-close-window" src="{{asset "@CurrentStyle/images/free.gif"}}" alt="{{l10n 'Close...'}}" />
+        </a>
+    {{/override}}
+
+    {{#override "content"}}
+        {{#if errors}}
+            <b>{{l10n "Cannot execute:"}}</b><br/>
+            <ul>
+            {{#each errors}}
+                <li class="error">{{{this}}}</li>
+            {{/each}}
+            </ul>
+        {{/if}}
+    {{/override}}
+{{/extends}}

src/mibew/styles/chats/dark/templates_src/server_side/mail.handlebars

@@ -0,0 +1,31 @@
+{{#extends "_layout"}}
+    {{#override "pageTitle"}}{{l10n "Send chat history<br/>by mail"}}{{/override}}
+
+    {{#override "buttons"}}
+        <a href="javascript:window.close();" title="{{l10n 'Close...'}}">
+            <img class="tpl-image image-close-window" src="{{asset "@CurrentStyle/images/free.gif"}}" alt="{{l10n 'Close...'}}" />
+        </a>
+    {{/override}}
+
+    {{#override "message"}}
+        <form name="mailThreadForm" method="post" action="{{route "chat_user_mail_send" thread_id=this.[chat.thread.id] token=this.[chat.thread.token]}}">
+            <input type="hidden" name="style" value="{{styleName}}"/>
+            <input type="hidden" name="level" value="{{level}}"/>
+
+            <strong>{{l10n "Enter your email:"}}</strong>
+            <input type="text" name="email" size="20" value="{{formemail}}" class="username" />&nbsp;
+            <a href="javascript:document.mailThreadForm.submit();">{{l10n "Send"}}</a>
+        </form>
+    {{/override}}
+
+    {{#override "content"}}
+        {{#if errors}}
+            <b>{{l10n "Correct the mistakes:"}}</b><br/>
+            <ul>
+            {{#each errors}}
+                <li class="error">{{{this}}}</li>
+            {{/each}}
+            </ul>
+        {{/if}}
+    {{/override}}
+{{/extends}}

src/mibew/styles/chats/dark/templates_src/server_side/mailsent.handlebars

@@ -0,0 +1,11 @@
+{{#extends "_layout"}}
+    {{#override "pageTitle"}}{{l10n "Sent"}}{{/override}}
+
+    {{#override "buttons"}}
+        <a href="javascript:window.close();" title="{{l10n 'Close...'}}">
+            <img class="tpl-image image-close-window" src="{{asset "@CurrentStyle/images/free.gif"}}" alt="{{l10n 'Close...'}}" />
+        </a>
+    {{/override}}
+
+    {{#override "message"}}{{l10n "A history of your chat was sent to address {0}" email}}{{/override}}
+{{/extends}}

src/mibew/styles/chats/dark/templates_src/server_side/redirect.handlebars

@@ -0,0 +1,32 @@
+{{#extends "_layout"}}
+    {{#override "pageTitle"}}{{l10n "Redirect to<br/>another operator"}}{{/override}}
+
+    {{#override "buttons"}}
+        <a href="javascript:window.close();" title="{{l10n 'Back...'}}">
+            <img class="tpl-image image-close-window" src="{{asset "@CurrentStyle/images/free.gif"}}" alt="{{l10n 'Back...'}}" />
+        </a>
+    {{/override}}
+
+    {{#override "message"}}{{l10n "Choose:"}}{{/override}}
+
+    {{#override "content"}}
+        <div class="left">
+            {{#if redirectToAgent}}
+                <strong>{{l10n "Operator:"}}</strong>
+                <ul class="agentlist">
+                    {{{redirectToAgent}}}
+                </ul>
+            {{/if}}
+        </div>
+        <div class="right">
+            {{#if redirectToGroup}}
+                <strong>{{l10n "Group:"}}</strong>
+                <ul class="agentlist">
+                    {{{redirectToGroup}}}
+                </ul>
+            {{/if}}
+        </div>
+        <div class="clear">&nbsp;</div>
+        <div class="center">{{generatePagination pagination}}</div>
+    {{/override}}
+{{/extends}}

src/mibew/styles/chats/dark/templates_src/server_side/redirected.handlebars

@@ -0,0 +1,11 @@
+{{#extends "_layout"}}
+    {{#override "pageTitle"}}{{l10n "The visitor has been redirected to another operator"}}{{/override}}
+
+    {{#override "buttons"}}
+        <a href="javascript:window.close();" title="{{l10n 'Close...'}}">
+            <img class="tpl-image image-close-window" src="{{asset "@CurrentStyle/images/free.gif"}}" alt="{{l10n 'Close...'}}" />
+        </a>
+    {{/override}}
+
+    {{#override "message"}}{{message}}{{/override}}
+{{/extends}}

src/mibew/styles/chats/dark/vex.css

@@ -0,0 +1,42 @@
+/*
+ * This file is a part of Mibew Messenger.
+ *
+ * Copyright 2005-2021 the original author or authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.vex.vex-theme-default .vex-content {
+    background-color: #a5a5a5;
+}
+
+.vex.vex-theme-default .vex-dialog-button.vex-dialog-button-primary {
+    background-color: #fdab31;
+}
+
+.vex.vex-theme-default .vex-dialog-button.vex-dialog-button-secondary {
+    background-color: #c0c0c0;
+}
+
+.vex.vex-theme-default .vex-dialog-form .vex-dialog-input textarea, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="date"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="datetime"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="datetime-local"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="email"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="month"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="number"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="password"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="search"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="tel"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="text"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="time"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="url"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="week"] {
+    background-color: #c2c2c2;
+    box-shadow: inset 0 0 0 2px #b78007;
+    -webkit-box-shadow: inset 0 0 0 2px #b78007;
+    -moz-box-shadow: inset 0 0 0 2px #b78007;
+}
+
+.vex.vex-theme-default .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="week"]:focus {
+    box-shadow: inset 0 0 0 2px #ffc107;
+    -webkit-box-shadow: inset 0 0 0 2px #ffc107;
+    -moz-box-shadow: inset 0 0 0 2px #ffc107;
+}

src/mibew/styles/invitations/dark/config.yml

@@ -0,0 +1,9 @@
+# This file determines some invitation style options
+
+# Screenshots section describe all screenshots shipped with style
+# Params names should be equals to file names without extension. Pictures
+# extension should be '.png'
+# Params values should be equals to screenshot description
+screenshots:
+    invitation: "Appearance of the invitation"
+    location: "Location of the invitation on a page"

src/mibew/styles/invitations/dark/invite.css

@@ -0,0 +1,158 @@
+/*
+ * Copyright 2005-2021 the original author or authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#mibew-invitation-popup {
+    margin: 0 !important;
+    padding: 5px !important;
+    border: 0 !important;
+    outline: 0 !important;
+    font-weight: normal !important;
+    font-style: normal !important;
+    font-family: Arial, Helvetica, sans-serif !important;
+    font-size: 14px !important;
+    vertical-align: baseline !important;
+    line-height: normal !important;
+    border: 1px solid #aaa !important;
+    background: #464646 !important;
+    background: -webkit-linear-gradient(left, #464646, #a0a0a0) !important;
+    background: -o-linear-gradient(right, #464646, #a0a0a0) !important;
+    background: -moz-linear-gradient(right, #464646, #a0a0a0) !important;
+    background: -ms-linear-gradient(right, #464646, #a0a0a0) !important;
+    background: linear-gradient(to right, #464646, #a0a0a0) !important;
+    color: #000000 !important;
+    position: fixed !important;
+    bottom: 5px !important;
+    right: 5px !important;
+    z-index: 100 !important;
+    border-radius: 10px !important;
+    -webkit-border-radius: 10px !important;
+    -moz-border-radius: 10px !important;
+    box-shadow: 0 1px 1px 1px #222 !important;
+    -moz-box-shadow: 0 1px 1px 1px #222 !important;
+    -webkit-box-shadow: 0 1px 1px 1px #222 !important;
+}
+#mibew-invitation-popup h1,
+#mibew-invitation-popup p,
+#mibew-invitation-close a {
+    cursor: pointer !important;
+}
+#mibew-invitation-popup h1 {
+    color: #b0b0b0 !important;
+    font-size: 20px !important;
+    font-weight: bold !important;
+    max-width: 220px !important;
+    overflow: hidden !important;
+    margin-top: 10px !important;
+    margin-bottom: 10px !important;
+    background: url("./24x24.png") 7px 1px no-repeat !important;
+    text-align: left !important;
+    padding-left: 40px !important;
+    display: inline-block !important;
+}
+#mibew-invitation-close {
+    float: right !important;
+    background: url("./close.gif") center no-repeat !important;
+    padding: 1px !important;
+    margin: 0 !important;
+}
+#mibew-invitation-close a {
+    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif !important;
+    font-size: 12px !important;
+    font-weight: normal !important;
+    color: #9d9d9d !important;
+    margin: 0 4px 0 4px !important;
+}
+#mibew-invitation-close a,
+#mibew-invitation-close a:link,
+#mibew-invitation-close a:hover {
+    text-decoration: none !important;
+}
+#mibew-invitation-popup p {
+    padding: 2px !important;
+    margin: 2px !important;
+}
+#mibew-invitation-avatar-wrapper {
+    margin: 2px 10px 5px 2px !important;
+    cursor: pointer !important;
+    float: right !important;
+    max-width: 100px !important;
+    max-height: 100px !important;
+    overflow: hidden;
+}
+#mibew-invitation-avatar {
+    max-width: 100px !important;
+}
+#mibew-invitation-frame {
+    height: 150px !important;
+    overflow: hidden !important;
+    border: 1px solid #445454 !important;
+    background-color: #666666 !important;
+    padding: 5px !important;
+    border-radius: 5px !important;
+    -webkit-border-radius: 5px !important;
+    -moz-border-radius: 5px !important;
+    margin-bottom: 5px !important;
+}
+#mibew-invitation-accept {
+    color: #f1a600 !important;
+    font-size: 17px !important;
+    font-weight: normal !important;
+    text-align: center !important;
+    cursor: pointer !important;
+    background: #464646 !important;
+    background: -webkit-linear-gradient(#a0a0a0, #464646) !important;
+    background: -o-linear-gradient(#a0a0a0, #464646) !important;
+    background: -moz-linear-gradient(#a0a0a0, #464646) !important;
+    background: -ms-linear-gradient(#a0a0a0, #464646) !important;
+    background: linear-gradient(#a0a0a0, #464646) !important;
+    border: 1px solid #111 !important;
+    border-radius: 7px !important;
+    -webkit-border-radius: 7px !important;
+    -moz-border-radius: 7px !important;
+    display: inline-block !important;
+    float: right !important;
+    padding: 5px 65px !important;
+}
+#mibew-invitation-accept:hover {
+    color: black !important;
+    background: #b78007 !important;
+    background: -webkit-linear-gradient(#eba200, #b78007) !important;
+    background: -o-linear-gradient(#eba200, #b78007) !important;
+    background: -moz-linear-gradient(#eba200, #b78007) !important;
+    background: -ms-linear-gradient(#eba200, #b78007) !important;
+    background: linear-gradient(#eba200, #b78007) !important;
+}
+
+/* responsive design for mobile devices */
+@media only screen and (max-width: 500px) {
+    #mibew-invitation-popup {
+        max-width: 100% !important;
+    }
+    #mibew-invitation-frame {
+        max-width: 100% !important;
+    }
+}
+
+/* additional trick for desktops */
+@media (min-width: 501px) {
+    #mibew-invitation-popup {
+        width: 400px !important;
+    }
+
+    #mibew-invitation-frame {
+        width: 388px !important;
+    }
+}

src/mibew/styles/pages/dark/config.yml

@@ -0,0 +1,44 @@
+# This file determines some core styles options
+
+history:
+    # These params are used for history windows opened via JavaScript's window.open.
+    window:
+        width: 720
+        height: 560
+        resizable: true
+
+users:
+    # Use as wrap tag for the thread element
+    thread_tag: "tr"
+    # Use as wrap tag for the visitor element
+    visitor_tag: "tr"
+
+tracked:
+    # These params are used for user's track windows opened via JavaScript's
+    # window.open method.
+    user_window:
+        width: 640
+        height: 480
+        resizable: true
+    # These params are used for visitor's track windows opened via JavaScript's
+    # window.open method.
+    visitor_window:
+        width: 640
+        height: 480
+        scrollbars: true
+        resizable: true
+
+ban:
+    # These params are used for history windows opened via JavaScript's
+    # window.open method.
+    window:
+        width: 720
+        height: 480
+        resizable: true
+
+# Screenshots section describe all screenshots shipped with style
+# Params names should be equals to file names without extension. Pictures
+# extension should be '.png'
+# Params values should be equals to screenshot description
+screenshots:
+    home: "Operator's home page"

src/mibew/styles/pages/dark/css/default_ie.css

@@ -0,0 +1,25 @@
+/*
+ * This file is a part of Mibew Messenger.
+ *
+ * Copyright 2005-2021 the original author or authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.inline-block,
+.dashboard-item,
+.pagination .prev-page,
+.pagination .next-page {
+    display: inline;
+    zoom: 1;
+}

src/mibew/styles/pages/dark/css/vex.css

@@ -0,0 +1,42 @@
+/*
+ * This file is a part of Mibew Messenger.
+ *
+ * Copyright 2005-2021 the original author or authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.vex.vex-theme-default .vex-content {
+    background-color: #a5a5a5;
+}
+
+.vex.vex-theme-default .vex-dialog-button.vex-dialog-button-primary {
+    background-color: #fdab31;
+}
+
+.vex.vex-theme-default .vex-dialog-button.vex-dialog-button-secondary {
+    background-color: #c0c0c0;
+}
+
+.vex.vex-theme-default .vex-dialog-form .vex-dialog-input textarea, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="date"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="datetime"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="datetime-local"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="email"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="month"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="number"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="password"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="search"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="tel"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="text"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="time"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="url"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="week"] {
+    background-color: #c2c2c2;
+    box-shadow: inset 0 0 0 2px #b78007;
+    -webkit-box-shadow: inset 0 0 0 2px #b78007;
+    -moz-box-shadow: inset 0 0 0 2px #b78007;
+}
+
+.vex.vex-theme-default .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="week"]:focus {
+    box-shadow: inset 0 0 0 2px #ffc107;
+    -webkit-box-shadow: inset 0 0 0 2px #ffc107;
+    -moz-box-shadow: inset 0 0 0 2px #ffc107;
+}

src/mibew/styles/pages/dark/images/blank.html

@@ -0,0 +1,4 @@
+<html><head>
+</head><body>
+</body></html>
+