+
999/999
999/999
999/999
999/999
-
+
+
-
-
-
auth()->isAuthenticated()): ?>
diff --git a/config/modules/monitoring/menu.ini b/config/modules/monitoring/menu.ini
index 191fce465..232a31f3e 100755
--- a/config/modules/monitoring/menu.ini
+++ b/config/modules/monitoring/menu.ini
@@ -11,11 +11,11 @@
Hosts.title = "Hosts"
Hosts.route = "/monitoring/list/hosts"
-Hosts.iconClass = "nav-icon-hosts"
+Hosts.iconClass = "icinga-icon-host-petrol"
Services.title = "Services"
Services.route = "/monitoring/list/services"
-Services.iconClass = "nav-icon-services"
+Services.iconClass = "icinga-icon-service-petrol"
Downtimes = "/monitoring/list/downtimes"
Notifications = "/monitoring/list/notifications"
diff --git a/library/Icinga/Web/LessCompiler.php b/library/Icinga/Web/LessCompiler.php
index 6afdeba70..a0eef5e99 100644
--- a/library/Icinga/Web/LessCompiler.php
+++ b/library/Icinga/Web/LessCompiler.php
@@ -28,6 +28,7 @@
namespace Icinga\Web;
+use \Zend_Controller_Front;
use \RecursiveDirectoryIterator;
use \RecursiveIteratorIterator;
use \RegexIterator;
@@ -52,6 +53,8 @@ class LessCompiler
*/
private $lessc;
+ private $baseUrl;
+
/**
* Create a new instance
*/
@@ -59,6 +62,12 @@ class LessCompiler
{
require_once 'vendor/lessphp/lessc.inc.php';
$this->lessc = new \lessc();
+
+ $this->lessc->setVariables(
+ array(
+ 'baseurl' => '\'' . Zend_Controller_Front::getInstance()->getBaseUrl(). '\''
+ )
+ );
}
/**
diff --git a/modules/monitoring/public/css/main.less b/modules/monitoring/public/css/main.less
new file mode 100644
index 000000000..1ba02239e
--- /dev/null
+++ b/modules/monitoring/public/css/main.less
@@ -0,0 +1,251 @@
+/**
+ * This file is part of Icinga 2 Web.
+ *
+ * Icinga 2 Web - Head for multiple monitoring backends.
+ * Copyright (C) 2013 Icinga Development Team
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ *
+ * @copyright 2013 Icinga Development Team
+ * @license http://www.gnu.org/licenses/gpl-2.0.txt GPL, version 2
+ * @author Icinga Development Team
+ */
+
+/* =========================================================================
+ Default elements for module monitoring
+ ========================================================================= */
+
+.host-name {
+ display: block;
+ margin-top: 5px;
+ font-weight: bold;
+}
+
+
+.active {
+ background-color: #f5f5f5;
+}
+
+.output-text {
+ font-size: 12px;
+ line-height: 16px;
+ display: block;
+}
+
+/* ==========================================================================
+ Forms
+ ========================================================================== */
+
+.panel-row form {
+ display: inline;
+}
+
+/* ==========================================================================
+ Pagination
+ ========================================================================== */
+
+.pagination > .active > a,
+.pagination > .active > span,
+.pagination > .active > a:hover,
+.pagination > .active > span:hover,
+.pagination > .active > a:focus,
+.pagination > .active > span:focus {
+ background-color: #049baf !important;
+ border-color: fuchsia !mportant;
+}
+
+.pagination-sm > li > a, .pagination-sm > li > span {
+ font-size: 16px !important;
+}
+
+/* ==========================================================================
+ Status colors
+ ========================================================================== */
+
+.status-up {
+ background-color: #00cc33; /* green */
+}
+
+.status-warning {
+ background-color: #00cc33; /* xx */
+}
+
+.status-critical {
+ background-color: #ff3300; /* red */
+}
+
+.status-unknown {
+ background-color: #00cc33; /* xx */
+}
+
+.status-pending {
+ background-color: #00cc33; /* xx */
+}
+
+/** Service status **/
+.tacheader-status-pending {
+ background-color: #c0c0c0;
+}
+
+.tacheader-status-critical {
+ background-color: #FF3300;
+}
+
+.tacheader-status-ok {
+ /** background-color: #00CC33; **/
+}
+
+.tacheader-status-warning {
+ background-color: #FFA500;
+}
+
+.tacheader-status-unknown {
+ background-color: #E066FF;
+}
+
+/** Host status **/
+
+.tacheader-status-unreachable {
+ background-color: #E066FF;
+}
+
+.tacheader-status-down {
+ background-color: #FF3300;
+}
+
+.tacheader-status-up {
+ /** background-color: #00CC33; **/
+}
+
+/* Borders for Detail Headers */
+.border-status-pending {
+ border-left: 8px solid #c0c0c0;
+}
+
+.border-status-critical {
+ border-left: 8px solid #FF3300;
+}
+
+.border-status-ok {
+ border-left: 10px solid #00CC33;
+}
+
+.border-status-warning {
+ border-left: 10px solid #FFA500;
+}
+
+.border-status-unknown {
+ border-left: 10px solid #E066FF;
+}
+
+/** Host status **/
+
+.border-status-unreachable {
+ border-left: 10px solid #E066FF;
+}
+
+.border-status-down {
+ border-left: 10px solid #FF3300;
+}
+
+.border-status-up {
+ border-left: 10px solid #00CC33;
+}
+
+.icinga-navbar {
+ margin-right: 15px;
+}
+.icinga-navbar-reload {
+ margin-top: 13px;
+ margin-right: 40px;
+ margin-left: 15px;
+}
+
+.icinga-navbar-search {
+ background-image: url('../../img/icons/search.png');
+ background-repeat: no-repeat;
+ background-position: 5px 50%;
+ padding-left: 25px !important;
+}
+
+.icinga-navbar-search-container {
+ border-left: 1px solid #ddd;
+ padding-left: 15px;
+ margin-top: 12px;
+}
+
+.icinga-navbar-hosts-container {
+ background-image: url('../../img/icons/host.png');
+ background-repeat: no-repeat;
+ background-position: 5px 50%;
+ padding-left: 30px !important;
+ margin-top: 15px;
+}
+.icinga-navbar-services-container {
+ background-image: url('../../img/icons/service.png');
+ background-repeat: no-repeat;
+ background-position: 5px 50%;
+ padding-left: 25px !important;
+ margin-top: 15px;
+}
+
+.icinga-navbar-pills {
+ border-style: solid;
+ border-width: 1px;
+ padding: 3px 5px 3px 5px;
+ border-radius: 3px;
+ font-size: 13px;
+}
+
+
+
+/** Service status **/
+
+.icinga-navbar-pills-critical {
+ border-color: #FF3300;
+ color: #FF3300;
+}
+
+.icinga-navbar-pills-ok {
+ border-color: #00CC33;
+ color: #00CC33;
+}
+
+.icinga-navbar-pills-warning {
+ border-color: #FFA500;
+ color: #FFA500;
+}
+
+.icinga-navbar-pills-unknown {
+ border-color: #E066FF;
+ color: #E066FF;
+}
+
+/** Host status **/
+
+.icinga-navbar-pills-unreachable {
+ border-color: #E066FF;
+ color: #E066FF;
+}
+
+.icinga-navbar-pills-down {
+ border-color: #FF3300;
+ color: #FF3300;
+}
+
+.icinga-navbar-pills-up {
+ border-color: #00CC33;
+ color: #00CC33;
+}
diff --git a/public/css/icinga/icons.css b/public/css/icinga/icons.css
deleted file mode 100644
index 8d773cb30..000000000
--- a/public/css/icinga/icons.css
+++ /dev/null
@@ -1,264 +0,0 @@
-.icinga-icon-blank {
- background: transparent;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-acknowledgement {
- background: transparent url("../../img/icons/acknowledgement.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-comment {
- background: transparent url("../../img/icons/comment.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-create {
- background: transparent url("../../img/icons/create.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-dashboard {
- background: transparent url("../../img/icons/dashboard.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-disabled {
- background: transparent url("../../img/icons/disabled.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-.icinga-icon-edit {
- background: transparent url("../../img/icons/edit.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-error {
- background: transparent url("../../img/icons/error.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-flapping {
- background: transparent url("../../img/icons/flapping.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-in-downtime {
- background: transparent url("../../img/icons/in_downtime.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-remove {
- background: transparent url("../../img/icons/remove.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-save {
- background: transparent url("../../img/icons/save.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-service {
- background: transparent url("../../img/icons/service.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-submit {
- background: transparent url("../../img/icons/submit.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-unhandled {
- background: transparent url("../../img/icons/unhandled.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-user {
- background: transparent url("../../img/icons/user.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-active-checks-disabled {
- background: transparent url("../../img/icons/active_checks_disabled.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-active-passive-checks-disabled {
- background: transparent url("../../img/icons/active_passive_checks_disabled.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-notification {
- background: transparent url("../../img/icons/notification.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-notification-disabled {
- background: transparent url("../../img/icons/notification_disabled.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-csv {
- background: transparent url("../../img/icons/csv.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-pdf {
- background: transparent url("../../img/icons/pdf.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-json {
- background: transparent url("../../img/icons/json.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-downtime-start {
- background: transparent url("../../img/icons/downtime_start.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-downtime-end {
- background: transparent url("../../img/icons/downtime_end.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-hostgroup {
- background: transparent url("../../img/icons/hostgroup.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-servicegroup {
- background: transparent url("../../img/icons/servicegroup.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-host {
- background: transparent url("../../img/icons/host.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-service {
- background: transparent url("../../img/icons/service.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-success {
- background: transparent url("../../img/icons/success.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-history {
- background: transparent url("../../img/icons/history.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-reschedule {
- background: transparent url("../../img/icons/reschedule.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-softstate {
- background: transparent url("../../img/icons/softstate.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-next {
- background: transparent url("../../img/icons/next.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-prev {
- background: transparent url("../../img/icons/prev.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-refresh {
- background: transparent url("../../img/icons/refresh.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-expand {
- background: transparent url("../../img/icons/expand.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
-
-.icinga-icon-search {
- background: transparent url("../../img/icons/search.png") center center no-repeat;
- display: inline-block;
- width: 16px;
- height: 16px;
-}
\ No newline at end of file
diff --git a/public/css/icinga/icons.less b/public/css/icinga/icons.less
new file mode 100644
index 000000000..f0a1e3040
--- /dev/null
+++ b/public/css/icinga/icons.less
@@ -0,0 +1,363 @@
+/**
+ * This file is part of Icinga 2 Web.
+ *
+ * Icinga 2 Web - Head for multiple monitoring backends.
+ * Copyright (C) 2013 Icinga Development Team
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ *
+ * @copyright 2013 Icinga Development Team
+ * @license http://www.gnu.org/licenses/gpl-2.0.txt GPL, version 2
+ * @author Icinga Development Team
+ */
+
+/* =========================================================================
+ Icinga Icon Set
+ ========================================================================= */
+
+.icinga-icon-mixin(@file) {
+ @iconpath : "img/icons";
+ background: transparent url("@{baseurl}/@{iconpath}/@{file}") center center no-repeat;
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+}
+
+.icinga-icon-blank {
+ background: transparent;
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+}
+
+.icinga-icon-acknowledgement-petrol {
+ .icinga-icon-mixin("acknowledgement_petrol.png");
+}
+
+.icinga-icon-acknowledgement {
+ .icinga-icon-mixin("acknowledgement.png");
+}
+
+.icinga-icon-active-checks-disabled-petrol {
+ .icinga-icon-mixin("active_checks_disabled_petrol.png");
+}
+
+.icinga-icon-active-checks-disabled {
+ .icinga-icon-mixin("active_checks_disabled.png");
+}
+
+.icinga-icon-active-passive-checks-disabled-petrol {
+ .icinga-icon-mixin("active_passive_checks_disabled_petrol.png");
+}
+
+.icinga-icon-active-passive-checks-disabled {
+ .icinga-icon-mixin("active_passive_checks_disabled.png");
+}
+
+.icinga-icon-comment-petrol {
+ .icinga-icon-mixin("comment_petrol.png");
+}
+
+.icinga-icon-comment {
+ .icinga-icon-mixin("comment.png");
+}
+
+.icinga-icon-configuration-petrol {
+ .icinga-icon-mixin("configuration_petrol.png");
+}
+
+.icinga-icon-configuration {
+ .icinga-icon-mixin("configuration.png");
+}
+
+.icinga-icon-create-petrol {
+ .icinga-icon-mixin("create_petrol.png");
+}
+
+.icinga-icon-create {
+ .icinga-icon-mixin("create.png");
+}
+
+.icinga-icon-csv-petrol {
+ .icinga-icon-mixin("csv_petrol.png");
+}
+
+.icinga-icon-csv {
+ .icinga-icon-mixin("csv.png");
+}
+
+.icinga-icon-dashboard-petrol {
+ .icinga-icon-mixin("dashboard_petrol.png");
+}
+
+.icinga-icon-dashboard {
+ .icinga-icon-mixin("dashboard.png");
+}
+
+.icinga-icon-disabled-petrol {
+ .icinga-icon-mixin("disabled_petrol.png");
+}
+
+.icinga-icon-disabled {
+ .icinga-icon-mixin("disabled.png");
+}
+
+.icinga-icon-down-petrol {
+ .icinga-icon-mixin("down_petrol.png");
+}
+
+.icinga-icon-down {
+ .icinga-icon-mixin("down.png");
+}
+
+.icinga-icon-downtime-end-petrol {
+ .icinga-icon-mixin("downtime_end_petrol.png");
+}
+
+.icinga-icon-downtime-end {
+ .icinga-icon-mixin("downtime_end.png");
+}
+
+.icinga-icon-downtime-start-petrol {
+ .icinga-icon-mixin("downtime_start__petrol.png");
+}
+
+.icinga-icon-downtime-start {
+ .icinga-icon-mixin("downtime_start.png");
+}
+
+.icinga-icon-edit-petrol {
+ .icinga-icon-mixin("edit_petrol.png");
+}
+
+.icinga-icon-edit {
+ .icinga-icon-mixin("edit.png");
+}
+
+.icinga-icon-error-petrol {
+ .icinga-icon-mixin("error_petrol.png");
+}
+
+.icinga-icon-error {
+ .icinga-icon-mixin("error.png");
+}
+
+.icinga-icon-expand-petrol {
+ .icinga-icon-mixin("expand_petrol.png");
+}
+
+.icinga-icon-expand {
+ .icinga-icon-mixin("expand.png");
+}
+
+.icinga-icon-flapping-petrol {
+ .icinga-icon-mixin("flapping_petrol.png");
+}
+
+.icinga-icon-flapping {
+ .icinga-icon-mixin("flapping.png");
+}
+
+.icinga-icon-history-petrol {
+ .icinga-icon-mixin("history_petrol.png");
+}
+
+.icinga-icon-history {
+ .icinga-icon-mixin("history.png");
+}
+
+.icinga-icon-hostgroup-petrol {
+ .icinga-icon-mixin("hostgroup_petrol.png");
+}
+
+.icinga-icon-hostgroup {
+ .icinga-icon-mixin("hostgroup.png");
+}
+
+.icinga-icon-host-petrol {
+ .icinga-icon-mixin("host_petrol.png");
+}
+
+.icinga-icon-host {
+ .icinga-icon-mixin("host.png");
+}
+
+.icinga-icon-in-downtime-petrol {
+ .icinga-icon-mixin("in_downtime_petrol.png");
+}
+
+.icinga-icon-in-downtime {
+ .icinga-icon-mixin("in_downtime.png");
+}
+
+.icinga-icon-json-petrol {
+ .icinga-icon-mixin("json_petrol.png");
+}
+
+.icinga-icon-json {
+ .icinga-icon-mixin("json.png");
+}
+
+.icinga-icon-logout-petrol {
+ .icinga-icon-mixin("logout_petrol.png");
+}
+
+.icinga-icon-logout {
+ .icinga-icon-mixin("logout.png");
+}
+
+.icinga-icon-next-petrol {
+ .icinga-icon-mixin("next_petrol.png");
+}
+
+.icinga-icon-next {
+ .icinga-icon-mixin("next.png");
+}
+
+.icinga-icon-notification-disabled-petrol {
+ .icinga-icon-mixin("notification_disabled_petrol.png");
+}
+
+.icinga-icon-notification-disabled {
+ .icinga-icon-mixin("notification_disabled.png");
+}
+
+.icinga-icon-notification-petrol {
+ .icinga-icon-mixin("notification_petrol.png");
+}
+
+.icinga-icon-notification {
+ .icinga-icon-mixin("notification.png");
+}
+
+.icinga-icon-pdf-petrol {
+ .icinga-icon-mixin("pdf_petrol.png");
+}
+
+.icinga-icon-pdf {
+ .icinga-icon-mixin("pdf.png");
+}
+
+.icinga-icon-prev-petrol {
+ .icinga-icon-mixin("prev_petrol.png");
+}
+
+.icinga-icon-prev {
+ .icinga-icon-mixin("prev.png");
+}
+
+.icinga-icon-refresh-petrol {
+ .icinga-icon-mixin("refresh_petrol.png");
+}
+
+.icinga-icon-refresh {
+ .icinga-icon-mixin("refresh.png");
+}
+
+.icinga-icon-remove-petrol {
+ .icinga-icon-mixin("remove_petrol.png");
+}
+
+.icinga-icon-remove {
+ .icinga-icon-mixin("remove.png");
+}
+
+.icinga-icon-reschedule-petrol {
+ .icinga-icon-mixin("reschedule_petrol.png");
+}
+
+.icinga-icon-reschedule {
+ .icinga-icon-mixin("reschedule.png");
+}
+
+.icinga-icon-save-petrol {
+ .icinga-icon-mixin("save_petrol.png");
+}
+
+.icinga-icon-save {
+ .icinga-icon-mixin("save.png");
+}
+
+.icinga-icon-search-petrol {
+ .icinga-icon-mixin("search_petrol.png");
+}
+
+.icinga-icon-search {
+ .icinga-icon-mixin("search.png");
+}
+
+.icinga-icon-servicegroup-petrol {
+ .icinga-icon-mixin("servicegroup_petrol.png");
+}
+
+.icinga-icon-servicegroup {
+ .icinga-icon-mixin("servicegroup.png");
+}
+
+.icinga-icon-service-petrol {
+ .icinga-icon-mixin("service_petrol.png");
+}
+
+.icinga-icon-service {
+ .icinga-icon-mixin("service.png");
+}
+
+.icinga-icon-softstate {
+ .icinga-icon-mixin("softstate.png");
+}
+
+.icinga-icon-submit-petrol {
+ .icinga-icon-mixin("submit_petrol.png");
+}
+
+.icinga-icon-submit {
+ .icinga-icon-mixin("submit.png");
+}
+
+.icinga-icon-success-petrol {
+ .icinga-icon-mixin("success_petrol.png");
+}
+
+.icinga-icon-success {
+ .icinga-icon-mixin("success.png");
+}
+
+.icinga-icon-uebersicht {
+ .icinga-icon-mixin("uebersicht.png");
+}
+
+.icinga-icon-unhandled-petrol {
+ .icinga-icon-mixin("unhandled_petrol.png");
+}
+
+.icinga-icon-unhandled {
+ .icinga-icon-mixin("unhandled.png");
+}
+
+.icinga-icon-up-petrol {
+ .icinga-icon-mixin("up_petrol.png");
+}
+
+.icinga-icon-up {
+ .icinga-icon-mixin("up.png");
+}
+
+.icinga-icon-user-petrol {
+ .icinga-icon-mixin("user_petrol.png");
+}
+
+.icinga-icon-user {
+ .icinga-icon-mixin("user.png");
+}
diff --git a/public/css/icinga/main.css b/public/css/icinga/main.css
deleted file mode 100644
index 5b0a60abc..000000000
--- a/public/css/icinga/main.css
+++ /dev/null
@@ -1,999 +0,0 @@
-@import url("icons.css");
-
-body { padding-top: 51px; }
-
-.load-indicator .mask {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background-color: #666;
- opacity: 0.3;
- z-index: 998;
-}
-
-.load-indicator .label {
- position: absolute;
- top: 0;
- left: 0;
- color: #000;
- background-color: #fff;
- font-weight: normal;
- z-index: 999;
- border: none;
-}
-
-.inline-image {
- display: inline-block;
- width: 16px;
- height: 16px;
- background: #c0c0c0 center center no-repeat;
-}
-
-.small-row {
- font-size: 12px;
- line-height: 16px;
- display: block;
- font-weight: normal;
-}
-
-.icinga-logo {
- background: transparent url("../../img/logo_icinga.png") center center no-repeat;
- width: 94px;
- height: 33px;
- display: block;
- text-indent: -999px;
- margin: 8px 0 0 8px;
-}
-
-/* ==========================================================================
- Icinga Design
- ========================================================================== */
-
-html {
- font-family: sans-serif; /* 1 */
- -ms-text-size-adjust: 100%; /* 2 */
- -webkit-text-size-adjust: 100%; /* 2 */
- overflow-y: scroll;
-}
-
-body {
- margin: 0;
- color: #262625;
- font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,Helvetica,Arial,sans-serif;
- font-size: 16px;
-}
-
-p {
- line-height: 18px;
-}
-
-.gap {
- margin-bottom: 15px;
-}
-
-
-/* ==========================================================================
- Links
- ========================================================================== */
-
-a {
- color: #049baf;
- text-decoration: none;
-}
-
-a.button {
- height: 30px;
-}
-
-a.btn-small {
- height: 25px;
-}
-/**
- * Address `outline` inconsistency between Chrome and other browsers.
- */
-
-a:focus {
- outline: thin dotted;
-}
-
-/**
- * Improve readability when focused and also mouse hovered in all browsers.
- */
-
-a:active,
-a:hover {
- outline: 0;
- color: #049baf;
- text-decoration: underline;
-}
-
-/* ==========================================================================
- Typography
- ========================================================================== */
-
-/**
- * Address variable `h1` font-size and margin within `section` and `article`
- * contexts in Firefox 4+, Safari 5, and Chrome.
- */
-
-h1 {
- color: #262625;
- font-size: 20px;
-}
-
-h2 {
- color: #262625;
- font-size: 16px;
-}
-
-
-p {
- margin-top: 0;
-}
-
-
-/* ==========================================================================
- Tables
- ========================================================================== */
-
-
-table, th, td {
- text-align: left;
- vertical-align: top;
-}
-
-table {
- border-collapse: collapse;
- border-spacing: 0;
-}
-
-th {
- font-weight: bold;
- font-size: 18px;
- padding: 8px 8px 10px 8px;
- border-bottom: 2px solid #ddd;
-}
-
-
-.table-detail th {
- font-size: 16px;
- border-top: 0;
-}
-
-.table-detail thead > tr > th, .table tbody > tr > th,
-.table-detail tbody > tr > td, .table tfoot > tr > td {
- border-top: 0 !important;
-}
-
-.table-detail > thead {
- border-top: 0 !important;
-}
-
-
-td {
- padding: 8px 10px 8px 8px !important;
- border-bottom: 1px dotted #ddd !important;
- border-top: none;
-
-}
-
-.pull-right {
- float: right !important;
- clear: right !important;
-
- display: block;
- clear: right;
- overflow: hidden;
-}
-
-.badge-container {
- display: block;
- overflow: hidden;
-}
-
-
-.badge {
- background-color: #fff;
- border-radius: 2px;
- color: #ff3300;
- display: inline-block;
- font-size: 12px;
- font-weight: bold;
- line-height: 1;
- min-width: 10px;
- padding-bottom: 3px;
- padding-left: 10px;
- padding-right: 10px;
- padding-top: 3px;
- text-align: center;
- vertical-align: baseline;
- white-space: nowrap;
- border: 1px solid #ff3300;
-
-}
-
-.badge a,
-.badge a:active,
-.badge a:hover,
-.badge:hover {
- color: #ff3300 !important;
- display: block !important;
-
-}
-
-.host-name {
- display: block;
- margin-top: 5px;
- font-weight: bold;
-}
-
-
-.active {
- background-color: #f5f5f5;
-
-}
-
-.output-text {
- font-size: 12px;
- line-height: 16px;
- display: block;
-}
-
-
-/* ==========================================================================
- Forms
- ========================================================================== */
-
-.panel-row form {
- display: inline;
-}
-
-.form-inline .form-group {
- display: inline-block;
- margin-bottom: 0;
- vertical-align: middle;
-}
-.form-group {
- margin-bottom: 15px;
-}
-
-label {
- display: inline-block;
- font-weight: bold;
- margin-bottom: 5px;
-}
-
-.input-sm {
- border-radius: 3px;
- font-size: 16px;
- padding: 5px;
-}
-.form-control {
- background-color: #FFFFFF;
- border: 1px solid #CCCCCC;
- border-radius: 4px;
- padding: 5px;
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
- color: #555555;
- display: block;
-
-
-
-
- vertical-align: middle;
- width: 100%;
-}
-
-select.input-sm {
-
-}
-
-
-/* ==========================================================================
- Pagination
- ========================================================================== */
-
-.pagination > .active > a,
-.pagination > .active > span,
-.pagination > .active > a:hover,
-.pagination > .active > span:hover,
-.pagination > .active > a:focus,
-.pagination > .active > span:focus {
-
- background-color: #049baf !important;
- border-color: fuchsia !mportant;
-
-}
-
-
-.pagination-sm > li > a, .pagination-sm > li > span {
- font-size: 16px !important;
-}
-
-
-
-/* ==========================================================================
- Status colors
- ========================================================================== */
-
-.status-up {
- background-color: #00cc33; /* green */
-}
-
-.status-warning {
- background-color: #00cc33; /* xx */
-}
-
-.status-critical {
- background-color: #ff3300; /* red */
-}
-
-.status-unknown {
- background-color: #00cc33; /* xx */
-}
-
-.status-pending {
- background-color: #00cc33; /* xx */
-}
-
-
-
-/** Service status **/
-.tacheader-status-pending {
- background-color: #c0c0c0;
-}
-
-.tacheader-status-critical {
- background-color: #FF3300;
-}
-
-.tacheader-status-ok {
- /** background-color: #00CC33; **/
-}
-
-.tacheader-status-warning {
- background-color: #FFA500;
-}
-
-.tacheader-status-unknown {
- background-color: #E066FF;
-}
-
-/** Host status **/
-
-.tacheader-status-unreachable {
- background-color: #E066FF;
-}
-
-.tacheader-status-down {
- background-color: #FF3300;
-}
-
-.tacheader-status-up {
- /** background-color: #00CC33; **/
-}
-
-/* Borders for Detail Headers */
-.border-status-pending {
- border-left: 8px solid #c0c0c0;
-}
-
-.border-status-critical {
- border-left: 8px solid #FF3300;
-}
-
-.border-status-ok {
- border-left: 10px solid #00CC33;
-}
-
-.border-status-warning {
- border-left: 10px solid #FFA500;
-}
-
-.border-status-unknown {
- border-left: 10px solid #E066FF;
-}
-
-/** Host status **/
-
-.border-status-unreachable {
- border-left: 10px solid #E066FF;
-}
-
-.border-status-down {
- border-left: 10px solid #FF3300;
-}
-
-.border-status-up {
- border-left: 10px solid #00CC33;
-}
-
-
-
-
-
-
-
-/* ==========================================================================
- Icons
- ========================================================================== */
-
-.icon-table {
- width: 16px;
- height: 20px;
- display: block;
- background-position: 50% 0;
-}
-
-.icon-header {
- background-position: 0 50%;
- padding-left: 25px;
- height: 20px;
-}
-
-.icon-btn-small {
- background-position: 0 0;
- width: 16px;
- height: 16px;
- display: block;
-}
-
-.icon-table-hint {
- width: 16px;
- height: 20px;
- display: block;
- background-position: 50% 50%;
-}
-.icon-table-hint:after {
- content: "edited";
- padding-left: 22px;
-}
-
-.icon-flapping {
- background-image: url('../../img/icons/flapping.png');
- background-repeat: no-repeat;
-}
-.icon-comment {
- background-image: url('../../img/icons/comment.png');
- background-repeat: no-repeat;
-}
-.icon-unhandled {
- background-image: url('../../img/icons/unhandled.png');
- background-repeat: no-repeat;
-}
-.icon-host {
- background-image: url('../../img/icons/host.png');
- background-repeat: no-repeat;
-}
-.icon-acknowledgement {
- background-image: url('../../img/icons/acknowledgement.png');
- background-repeat: no-repeat;
-}
-.icon-remove {
- background-image: url('../../img/icons/remove.png');
- background-repeat: no-repeat;
-}
-.icon-submit {
- background-image: url('../../img/icons/submit.png');
- background-repeat: no-repeat;
-}
-.icon-create {
- background-image: url('../../img/icons/create.png');
- background-repeat: no-repeat;
-}
-.icon-dashboard {
- background-image: url('../../img/icons/dashboard.png');
- background-repeat: no-repeat;
-}
-.icon-disable {
- background-image: url('../img/icons/disable.png');
- background-repeat: no-repeat;
-}
-.icon-edit {
- background-image: url('../../img/icons/edit.png');
- background-repeat: no-repeat;
-}
-.icon-error {
- background-image: url('../../img/icons/error.png');
- background-repeat: no-repeat;
-}
-.icon-downtime {
- background-image: url('../../img/icons/in_downtime.png');
- background-repeat: no-repeat;
-}
-.icon-save {
- background-image: url('../../img/icons/save.png');
- background-repeat: no-repeat;
-}
-.icon-service {
- background-image: url('../../img/icons/service.png');
- background-repeat: no-repeat;
-}
-.icon-user {
- background-image: url('../../img/icons/user.png');
- background-repeat: no-repeat;
-}
-.icon-reschedule {
- background-image: url('../../img/icons/reschedule.png');
- background-repeat: no-repeat;
-}
-
-
-/* ==========================================================================
- Details Panel
- ========================================================================== */
-
-.panel-heading {
- border-bottom: 0;
- margin-bottom: 0px !important;
- padding-left: 5px;
- padding-bottom: 3px;
- padding-top: 5px;
- overflow: hidden;
- border-radius: 0;
-}
-
-.panel-hostname {
- font-weight: bold;
-}
-
-.separator {
- border-top: 2px solid #ddd;
- border-bottom: 0;
- margin: 0;
- height: 2px;
-}
-
-.panel-header-status {
- font-weight: normal;
-}
-
-.panel-row {
- display: block;
- margin-bottom: 10px;
- overflow: hidden;
- border-bottom: 1px dotted #ddd;
- padding-bottom: 10px;
-}
-
-
-.panel-label {
- float: left;
- padding-right: 10px;
- width: 30%;
- clear: left;
-
-}
-.panel-content {
- float: left;
- padding-right: 10px;
- display: inline-block;
- max-width: 40%;
-}
-
-.panel-button {
- float: right;
- display: inline-block;
- overflow: hidden;
-}
-
-.panel-body {
- margin-bottom: 45px;
-}
-
-
-
-/* ==========================================================================
- Buttons
- ========================================================================== */
-
-.button {
- text-align: center;
- padding: 3px;
- border-width: 1px;
- border-style: solid;
- border-radius: 3px;
-}
-
-.btn-common {
- border-color: #ddd;
- color: #262625;
- background: rgb(255,255,255); /* Old browsers */
- background: -moz-linear-gradient(top, rgb(255,255,255) 1%, rgb(245,245,245) 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgb(255,255,255)), color-stop(100%,rgb(245,245,245))); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* IE10+ */
- background: linear-gradient(to bottom, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* W3C */
-}
-
-.panel-row > a:hover,
-.btn-common:hover {
- border-color: #262625 !important;
- color: #262625 !important;
- text-decoration: none;
-}
-
-
-.btn-cta {
- border-color: #049BAF;
- color: #049BAF;
- background: rgb(255,255,255); /* Old browsers */
- background: -moz-linear-gradient(top, rgb(255,255,255) 1%, rgb(245,245,245) 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgb(255,255,255)), color-stop(100%,rgb(245,245,245))); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* IE10+ */
- background: linear-gradient(to bottom, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* W3C */
-}
-
-
-
-.btn-small {
- width: 25px;
- height: 25px;
- display: inline-block;
-}
-
-.btn-wide {
- width: 100%;
- display: block;
-}
-
-.btn-half-left {
- float: left;
- width: 48%;
-}
-.btn-half-right {
- float: right;
- width: 48%;
-}
-
-
-.nav-stacked > li + li {
- margin-left: 0;
- margin-top: 0;
-}
-
-
-.nav-stacked {
- background-color: #f8f8f8;
-}
-
-.icinga-subnavigation {
- list-style: none;
-}
-
-
-
-.nav-stacked > li {
- padding-left: 8px;
- padding-top: 1px;
- padding-bottom: 1px;
- border-bottom: 1px dotted #049baf;
- border-right: 1px dotted #049baf;
-
-}
-.nav-stacked > li:first-child {
- border-top: 1px dotted #049baf;
-}
-
-
-.icinga-subnavigation > li {
-
- padding-top: 8px;
- padding-bottom: 8px;
- border-bottom: 1px dotted #049baf;
- border-right: 1px dotted #049baf;
-}
-
-ul.icinga-subnavigation {
-
- border-bottom: 1px dotted #049baf;
- margin-left: 0;
- padding-left: 15px;
-}
-
-.icinga-subnavigation > li:last-child {
- padding-top: 8px;
- padding-bottom: 8px;
- border-bottom: 0;
-
-}
-
-.nav-stacked > li > a,
-.icinga-subnavigation > li > a {
- padding-left: 40px;
- padding-right: 3px;
- border-left: 6px solid #049baf;
- display: inline-block;
-}
-
-.nav-stacked > li > a.nav-notification,
-.icinga-subnavigation > li > a.nav-notification {
- border-left: 6px solid red !important;
-}
-
-.nav-stacked > li > a:hover,
-.icinga-subnavigation > li > a:focus {
- /* font-weight: bold;*/
- background-color: transparent; !important;
- display: inline-block;
-}
-
-.nav-stacked > li:hover,
-.nav-stacked > li:focus,
-.icinga-subnavigation > li:hover,
-.icinga-subnavigation > li:focus {
- background-color: #fff;
-
-}
-
-.nav-stacked > li.active,
-.icinga-subnavigation > li.active {
- background-color: #fff;
- border-right: 0;
-}
-
-
-
-
-.nav-icon-hosts {
- background-image: url('../../img/icons/host_petrol.png');
- background-repeat: no-repeat;
- background-position: 19px 50%;
-}
-
-.nav-icon-services {
- background-image: url('../../img/icons/service_petrol.png');
- background-repeat: no-repeat;
- background-position: 19px 50%;
-}
-.nav-icon-downtimes {
- background-image: url('../../img/icons/in_downtime_petrol.png');
- background-repeat: no-repeat;
- background-position: 19px 50%;
-}
-.nav-icon-notifications {
- background-image: url('../../img/icons/notification_petrol.png');
- background-repeat: no-repeat;
- background-position: 19px 20px;
-}
-.nav-icon-comments {
- background-image: url('../../img/icons/comment_petrol.png');
- background-repeat: no-repeat;
- background-position: 19px 50%;
-}
-.nav-icon-dashboard {
- background-image: url('../../img/icons/dashboard_petrol.png');
- background-repeat: no-repeat;
- background-position: 19px 50%;
-}
-.nav-icon-configuration {
- background-image: url('../../img/icons/configuration_petrol.png');
- background-repeat: no-repeat;
- background-position: 19px 50%;
-}
-
-
-.subnav-icon-configuration {
- background-image: url('../../img/icons/configuration_petrol.png');
- background-repeat: no-repeat;
- background-position: 19px 50%;
-}
-
-
-
-
-
-.badge-container-nav {
- display: inline-block;
- overflow: hidden;
- padding-top: 0;
- margin-bottom: 5px;
-
-}
-.badge-nav {
- background-color: #fff;
- border-radius: 2px;
- color: #ff3300;
- display: inline-block;
- font-size: 12px;
- font-weight: bold;
- line-height: 1;
- min-width: 10px;
- padding-bottom: 3px;
- padding-left: 7px;
- padding-right: 7px;
- padding-top: 3px;
- text-align: center;
- vertical-align: baseline;
- white-space: nowrap;
- border: 1px solid #ff3300;
-}
-
-.badge-container-subnav {
- position: absolute;
- overflow: hidden;
- padding-top: 0;
- padding-bottom;
- margin-left: 2px;
- margin-top: -8px;
-}
-.badge-subnav {
- background-color: #fff;
- border-radius: 2px;
- color: #ff3300;
- display: inline-block;
- font-size: 10px;
- font-weight: bold;
- line-height: 1;
- min-width: 10px;
- padding-bottom: 2px;
- padding-left: 5px;
- padding-right: 5px;
- padding-top: 2px;
- text-align: center;
- vertical-align: baseline;
- white-space: nowrap;
- border: 1px solid #ff3300;
-}
-
-.state-tile {
- border-style: solid;
- border-width: 1px;
- padding: 3px 5px 3px 5px;
- border-radius: 3px;
- font-size: 13px;
-}
-
-.state-tile-up {
- /* less */
- border-style: solid;
- border-width: 1px;
- padding: 3px 5px 3px 5px;
- border-radius: 3px;
- font-size: 13px;
- /* less */
- border-color: #00CC33;
- color: #00CC33;
-}
-
-.state-tile-unreachable {
- /* less */
- border-style: solid;
- border-width: 1px;
- padding: 3px 5px 3px 5px;
- border-radius: 3px;
- font-size: 13px;
- /* less */
- border-color: #E066FF;
- color: #E066FF;
-}
-
-.state-tile-down {
- /* less */
- border-style: solid;
- border-width: 1px;
- padding: 3px 5px 3px 5px;
- border-radius: 3px;
- font-size: 13px;
- /* less */
- border-color: #FF3300;
- color: #FF3300;
-}
-
-.state-tile-pending {
- /* less */
- border-style: solid;
- border-width: 1px;
- padding: 3px 5px 3px 5px;
- border-radius: 3px;
- font-size: 13px;
- /* less */
- border-color: #c0c0c0;
- color: #c0c0c0;
-}
-
-.icinga-icon-user {
- background-attachment: scroll;
- background-clip: border-box;
- background-color: rgba(0, 0, 0, 0);
- background-image: url("../../img/icons/user.png");
- background-origin: padding-box;
- background-position: center center;
- background-repeat: no-repeat;
- background-size: auto auto;
- display: inline-block;
- height: 16px;
- width: 16px;
-}
-
-.icinga-navbar {
- margin-right: 15px;
-}
-.icinga-navbar-reload {
- margin-top: 13px;
- margin-right: 40px;
-}
-
-.icinga-navbar-search {
- background-image: url('../../img/icons/search.png');
- background-repeat: no-repeat;
- background-position: 5px 50%;
- padding-left: 25px !important;
-}
-
-.icinga-navbar-search-container {
- border-left: 1px solid #ddd;
- padding-left: 15px;
- margin-top: 12px;
-}
-
-
-
-.icinga-navbar-hosts-container {
- background-image: url('../../img/icons/host.png');
- background-repeat: no-repeat;
- background-position: 5px 50%;
- padding-left: 30px !important;
- margin-top: 15px;
-}
-.icinga-navbar-services-container {
- background-image: url('../../img/icons/service.png');
- background-repeat: no-repeat;
- background-position: 5px 50%;
- padding-left: 25px !important;
- margin-top: 15px;
-}
-
-.icinga-navbar-pills {
- border-style: solid;
- border-width: 1px;
- padding: 3px 5px 3px 5px;
- border-radius: 3px;
- font-size: 13px;
-}
-
-
-
-/** Service status **/
-
-.icinga-navbar-pills-critical {
- border-color: #FF3300;
- color: #FF3300;
-}
-
-.icinga-navbar-pills-ok {
- border-color: #00CC33;
- color: #00CC33;
-}
-
-.icinga-navbar-pills-warning {
- border-color: #FFA500;
- color: #FFA500;
-}
-
-.icinga-navbar-pills-unknown {
- border-color: #E066FF;
- color: #E066FF;
-}
-
-/** Host status **/
-
-.icinga-navbar-pills-unreachable {
- border-color: #E066FF;
- color: #E066FF;
-}
-
-.icinga-navbar-pills-down {
- border-color: #FF3300;
- color: #FF3300;
-}
-
-.icinga-navbar-pills-up {
- border-color: #00CC33;
- color: #00CC33;
-}
diff --git a/public/css/icinga/main.less b/public/css/icinga/main.less
new file mode 100644
index 000000000..eb0f2db02
--- /dev/null
+++ b/public/css/icinga/main.less
@@ -0,0 +1,411 @@
+/**
+ * This file is part of Icinga 2 Web.
+ *
+ * Icinga 2 Web - Head for multiple monitoring backends.
+ * Copyright (C) 2013 Icinga Development Team
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ *
+ * @copyright 2013 Icinga Development Team
+ * @license http://www.gnu.org/licenses/gpl-2.0.txt GPL, version 2
+ * @author Icinga Development Team
+ */
+
+/* =========================================================================
+ Default elements
+ ========================================================================= */
+
+
+html {
+ font-family: sans-serif; /* 1 */
+ -ms-text-size-adjust: 100%; /* 2 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+ overflow-y: scroll;
+}
+
+body {
+ margin: 0;
+ color: #262625;
+ font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,Helvetica,Arial,sans-serif;
+ font-size: 16px;
+ padding-top: 51px;
+}
+
+p {
+ line-height: 18px;
+}
+
+/* =========================================================================
+ Load Indocator
+ ========================================================================= */
+
+
+.load-indicator .mask {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: #666;
+ opacity: 0.3;
+ z-index: 998;
+}
+
+.load-indicator .label {
+ position: absolute;
+ top: 0;
+ left: 0;
+ color: #000;
+ background-color: #fff;
+ font-weight: normal;
+ z-index: 999;
+ border: none;
+}
+
+/* =========================================================================
+ Common elements
+ ========================================================================= */
+
+
+.inline-image {
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ background: #c0c0c0 center center no-repeat;
+}
+
+.small-row {
+ font-size: 12px;
+ line-height: 16px;
+ display: block;
+ font-weight: normal;
+}
+
+.gap {
+ margin-bottom: 15px;
+}
+
+/* =========================================================================
+ Icinga Logo
+ ========================================================================= */
+
+.icinga-logo {
+ background: transparent url("@{baseurl}/img/logo_icinga.png") center center no-repeat;
+ width: 94px;
+ height: 33px;
+ display: block;
+ text-indent: -999px;
+ margin: 8px 0 0 8px;
+}
+
+/* =========================================================================
+ Links
+ ========================================================================= */
+
+a {
+ color: #049baf;
+ text-decoration: none;
+}
+
+a.button {
+ height: 30px;
+}
+
+a.btn-small {
+ height: 25px;
+}
+
+/**
+ * Address `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+ outline: thin dotted;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+a:active,
+a:hover {
+ outline: 0;
+ color: #049baf;
+ text-decoration: underline;
+}
+
+/* ==========================================================================
+ Typography
+ ========================================================================== */
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari 5, and Chrome.
+ */
+
+h1 {
+ color: #262625;
+ font-size: 20px;
+}
+
+h2 {
+ color: #262625;
+ font-size: 16px;
+}
+
+
+p {
+ margin-top: 0;
+}
+
+
+/* ==========================================================================
+ Tables
+ ========================================================================== */
+
+
+table, th, td {
+ text-align: left;
+ vertical-align: top;
+}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+th {
+ font-weight: bold;
+ font-size: 18px;
+ padding: 8px 8px 10px 8px;
+ border-bottom: 2px solid #ddd;
+}
+
+.table-detail th {
+ font-size: 16px;
+ border-top: 0;
+}
+
+.table-detail thead > tr > th, .table tbody > tr > th,
+.table-detail tbody > tr > td, .table tfoot > tr > td {
+ border-top: 0 !important;
+}
+
+.table-detail > thead {
+ border-top: 0 !important;
+}
+
+td {
+ padding: 8px 10px 8px 8px !important;
+ border-bottom: 1px dotted #ddd !important;
+ border-top: none;
+}
+
+
+.badge-container {
+ display: block;
+ overflow: hidden;
+}
+
+.badge {
+ background-color: #fff;
+ border-radius: 2px;
+ color: #ff3300;
+ display: inline-block;
+ font-size: 12px;
+ font-weight: bold;
+ line-height: 1;
+ min-width: 10px;
+ padding-bottom: 3px;
+ padding-left: 10px;
+ padding-right: 10px;
+ padding-top: 3px;
+ text-align: center;
+ vertical-align: baseline;
+ white-space: nowrap;
+ border: 1px solid #ff3300;
+}
+
+.badge a,
+.badge a:active,
+.badge a:hover,
+.badge:hover {
+ color: #ff3300 !important;
+ display: block !important;
+}
+
+/* ==========================================================================
+ Forms
+ ========================================================================== */
+
+.form-inline .form-group {
+ display: inline-block;
+ margin-bottom: 0;
+ vertical-align: middle;
+}
+.form-group {
+ margin-bottom: 15px;
+}
+
+label {
+ display: inline-block;
+ font-weight: bold;
+ margin-bottom: 5px;
+}
+
+.input-sm {
+ border-radius: 3px;
+ font-size: 16px;
+ padding: 5px;
+}
+.form-control {
+ background-color: #FFFFFF;
+ border: 1px solid #CCCCCC;
+ border-radius: 4px;
+ padding: 5px;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
+ color: #555555;
+ display: block;
+ vertical-align: middle;
+ width: 100%;
+}
+
+select.input-sm {
+
+}
+
+/* ==========================================================================
+ Buttons
+ ========================================================================== */
+
+.button {
+ text-align: center;
+ padding: 3px;
+ border-width: 1px;
+ border-style: solid;
+ border-radius: 3px;
+}
+
+.btn-common {
+ border-color: #ddd;
+ color: #262625;
+ background: rgb(255,255,255); /* Old browsers */
+ background: -moz-linear-gradient(top, rgb(255,255,255) 1%, rgb(245,245,245) 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgb(255,255,255)), color-stop(100%,rgb(245,245,245))); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* Opera 11.10+ */
+ background: -ms-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* IE10+ */
+ background: linear-gradient(to bottom, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* W3C */
+}
+
+.panel-row > a:hover,
+.btn-common:hover {
+ border-color: #262625 !important;
+ color: #262625 !important;
+ text-decoration: none;
+}
+
+.btn-cta {
+ border-color: #049BAF;
+ color: #049BAF;
+ background: rgb(255,255,255); /* Old browsers */
+ background: -moz-linear-gradient(top, rgb(255,255,255) 1%, rgb(245,245,245) 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgb(255,255,255)), color-stop(100%,rgb(245,245,245))); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* Opera 11.10+ */
+ background: -ms-linear-gradient(top, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* IE10+ */
+ background: linear-gradient(to bottom, rgb(255,255,255) 1%,rgb(245,245,245) 100%); /* W3C */
+}
+
+.btn-small {
+ width: 25px;
+ height: 25px;
+ display: inline-block;
+}
+
+.btn-wide {
+ width: 100%;
+ display: block;
+}
+
+.btn-half-left {
+ float: left;
+ width: 48%;
+}
+.btn-half-right {
+ float: right;
+ width: 48%;
+}
+
+/* ==========================================================================
+ Details Panel
+ ========================================================================== */
+
+.panel-heading {
+ border-bottom: 0;
+ margin-bottom: 0px !important;
+ padding-left: 5px;
+ padding-bottom: 3px;
+ padding-top: 5px;
+ overflow: hidden;
+ border-radius: 0;
+}
+
+.panel-hostname {
+ font-weight: bold;
+}
+
+.separator {
+ border-top: 2px solid #ddd;
+ border-bottom: 0;
+ margin: 0;
+ height: 2px;
+}
+
+.panel-header-status {
+ font-weight: normal;
+}
+
+.panel-row {
+ display: block;
+ margin-bottom: 10px;
+ overflow: hidden;
+ border-bottom: 1px dotted #ddd;
+ padding-bottom: 10px;
+}
+
+
+.panel-label {
+ float: left;
+ padding-right: 10px;
+ width: 30%;
+ clear: left;
+
+}
+.panel-content {
+ float: left;
+ padding-right: 10px;
+ display: inline-block;
+ max-width: 40%;
+}
+
+.panel-button {
+ float: right;
+ display: inline-block;
+ overflow: hidden;
+}
+
+.panel-body {
+ margin-bottom: 45px;
+}
\ No newline at end of file
diff --git a/public/css/icinga/navigation.less b/public/css/icinga/navigation.less
new file mode 100644
index 000000000..10469354b
--- /dev/null
+++ b/public/css/icinga/navigation.less
@@ -0,0 +1,219 @@
+/**
+ * This file is part of Icinga 2 Web.
+ *
+ * Icinga 2 Web - Head for multiple monitoring backends.
+ * Copyright (C) 2013 Icinga Development Team
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ *
+ * @copyright 2013 Icinga Development Team
+ * @license http://www.gnu.org/licenses/gpl-2.0.txt GPL, version 2
+ * @author Icinga Development Team
+ */
+
+/* =========================================================================
+ Icinga Navigation
+ ========================================================================= */
+
+.nav-stacked > li + li {
+ margin-left: 0;
+ margin-top: 0;
+}
+
+.nav-stacked {
+ background-color: #f8f8f8;
+}
+
+.icinga-subnavigation {
+ list-style: none;
+}
+
+.nav-stacked > li {
+ padding-left: 8px;
+ padding-top: 1px;
+ padding-bottom: 1px;
+ border-bottom: 1px dotted #049baf;
+ border-right: 1px dotted #049baf;
+
+}
+.nav-stacked > li:first-child {
+ border-top: 1px dotted #049baf;
+}
+
+.icinga-subnavigation > li {
+ padding-top: 8px;
+ padding-bottom: 8px;
+ border-bottom: 1px dotted #049baf;
+ border-right: 1px dotted #049baf;
+}
+
+ul.icinga-subnavigation {
+ border-bottom: 1px dotted #049baf;
+ margin-left: 0;
+ padding-left: 15px;
+}
+
+.icinga-subnavigation > li:last-child {
+ padding-top: 8px;
+ padding-bottom: 8px;
+ border-bottom: 0;
+}
+
+.nav-stacked > li > a,
+.icinga-subnavigation > li > a {
+ padding-left: 40px;
+ padding-right: 3px;
+ border-left: 6px solid #049baf;
+ display: inline-block;
+}
+
+.nav-stacked > li > a.nav-notification,
+.icinga-subnavigation > li > a.nav-notification {
+ border-left: 6px solid red !important;
+}
+
+.nav-stacked > li > a:hover,
+.icinga-subnavigation > li > a:focus {
+ /* font-weight: bold;*/
+ background-color: transparent; !important;
+ display: inline-block;
+}
+
+.nav-stacked > li:hover,
+.nav-stacked > li:focus,
+.icinga-subnavigation > li:hover,
+.icinga-subnavigation > li:focus {
+ background-color: #fff;
+}
+
+.nav-stacked > li.active,
+.icinga-subnavigation > li.active {
+ background-color: #fff;
+ border-right: 0;
+}
+
+.subnav-icon-configuration {
+ background-image: url('../../img/icons/configuration_petrol.png');
+ background-repeat: no-repeat;
+ background-position: 19px 50%;
+}
+
+.badge-container-nav {
+ display: inline-block;
+ overflow: hidden;
+ padding-top: 0;
+ margin-bottom: 5px;
+}
+.badge-nav {
+ background-color: #fff;
+ border-radius: 2px;
+ color: #ff3300;
+ display: inline-block;
+ font-size: 12px;
+ font-weight: bold;
+ line-height: 1;
+ min-width: 10px;
+ padding-bottom: 3px;
+ padding-left: 7px;
+ padding-right: 7px;
+ padding-top: 3px;
+ text-align: center;
+ vertical-align: baseline;
+ white-space: nowrap;
+ border: 1px solid #ff3300;
+}
+
+.badge-container-subnav {
+ position: absolute;
+ overflow: hidden;
+ padding-top: 0;
+ padding-bottom;
+ margin-left: 2px;
+ margin-top: -8px;
+}
+.badge-subnav {
+ background-color: #fff;
+ border-radius: 2px;
+ color: #ff3300;
+ display: inline-block;
+ font-size: 10px;
+ font-weight: bold;
+ line-height: 1;
+ min-width: 10px;
+ padding-bottom: 2px;
+ padding-left: 5px;
+ padding-right: 5px;
+ padding-top: 2px;
+ text-align: center;
+ vertical-align: baseline;
+ white-space: nowrap;
+ border: 1px solid #ff3300;
+}
+
+.state-tile {
+ border-style: solid;
+ border-width: 1px;
+ padding: 3px 5px 3px 5px;
+ border-radius: 3px;
+ font-size: 13px;
+}
+
+.state-tile-up {
+ /* less */
+ border-style: solid;
+ border-width: 1px;
+ padding: 3px 5px 3px 5px;
+ border-radius: 3px;
+ font-size: 13px;
+ /* less */
+ border-color: #00CC33;
+ color: #00CC33;
+}
+
+.state-tile-unreachable {
+ /* less */
+ border-style: solid;
+ border-width: 1px;
+ padding: 3px 5px 3px 5px;
+ border-radius: 3px;
+ font-size: 13px;
+ /* less */
+ border-color: #E066FF;
+ color: #E066FF;
+}
+
+.state-tile-down {
+ /* less */
+ border-style: solid;
+ border-width: 1px;
+ padding: 3px 5px 3px 5px;
+ border-radius: 3px;
+ font-size: 13px;
+ /* less */
+ border-color: #FF3300;
+ color: #FF3300;
+}
+
+.state-tile-pending {
+ /* less */
+ border-style: solid;
+ border-width: 1px;
+ padding: 3px 5px 3px 5px;
+ border-radius: 3px;
+ font-size: 13px;
+ /* less */
+ border-color: #c0c0c0;
+ color: #c0c0c0;
+}