From cc8ecf262f61bfe9dc5f63b6a2fe96281ef51af5 Mon Sep 17 00:00:00 2001 From: Marius Hein Date: Wed, 16 Oct 2013 14:48:22 +0200 Subject: [PATCH] Reorganized styles refs #4895 --- application/controllers/StaticController.php | 2 +- .../layouts/scripts/parts/navigation.phtml | 9 +- .../layouts/scripts/parts/topbar.phtml | 25 +- config/modules/monitoring/menu.ini | 4 +- library/Icinga/Web/LessCompiler.php | 9 + modules/monitoring/public/css/main.less | 251 +++++ public/css/icinga/icons.css | 264 ----- public/css/icinga/icons.less | 363 +++++++ public/css/icinga/main.css | 999 ------------------ public/css/icinga/main.less | 411 +++++++ public/css/icinga/navigation.less | 219 ++++ 11 files changed, 1278 insertions(+), 1278 deletions(-) create mode 100644 modules/monitoring/public/css/main.less delete mode 100644 public/css/icinga/icons.css create mode 100644 public/css/icinga/icons.less delete mode 100644 public/css/icinga/main.css create mode 100644 public/css/icinga/main.less create mode 100644 public/css/icinga/navigation.less diff --git a/application/controllers/StaticController.php b/application/controllers/StaticController.php index dd477d82e..3fe09be4e 100644 --- a/application/controllers/StaticController.php +++ b/application/controllers/StaticController.php @@ -165,7 +165,7 @@ class StaticController extends ActionController foreach ($moduleManager->getLoadedModules() as $moduleName) { $cssDir = $moduleName->getCssDir(); - + if (is_dir($cssDir)) { $lessCompiler->addItem($cssDir); } diff --git a/application/layouts/scripts/parts/navigation.phtml b/application/layouts/scripts/parts/navigation.phtml index 0acbdea87..159f12b7b 100755 --- a/application/layouts/scripts/parts/navigation.phtml +++ b/application/layouts/scripts/parts/navigation.phtml @@ -35,8 +35,13 @@ $item = $this->navigation->keys("menu"); } $activeSet = $activeSet || $active; ?> -
  • "> - +
  • "> + + + + + +
    • -
    - -
    +
    + +
    -
    +
    999/999 999/999 999/999
    -
    +
    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; +}