Merge branch 'feature/less-style-language-4892'
resolves #4895 resolves #4892
This commit is contained in:
Marius Hein
commit
0a6f4745e4
|
|
@ -141,10 +141,9 @@ class StaticController extends ActionController
|
|||
*/
|
||||
private function setCacheHeader($maxAge)
|
||||
{
|
||||
$response = $this->getResponse();
|
||||
$response->setHeader('Cache-Control', 'max-age=3600', true);
|
||||
$response->setHeader('Pragma', 'cache', true);
|
||||
$response->setHeader(
|
||||
$this->_response->setHeader('Cache-Control', 'max-age=3600', true);
|
||||
$this->_response->setHeader('Pragma', 'cache', true);
|
||||
$this->_response->setHeader(
|
||||
'Expires',
|
||||
gmdate(
|
||||
'D, d M Y H:i:s',
|
||||
|
|
@ -153,5 +152,31 @@ class StaticController extends ActionController
|
|||
true
|
||||
);
|
||||
}
|
||||
|
||||
public function stylesheetAction()
|
||||
{
|
||||
$lessCompiler = new \Icinga\Web\LessCompiler();
|
||||
$moduleManager = Icinga::app()->getModuleManager();
|
||||
|
||||
$publicDir = realpath(dirname($_SERVER['SCRIPT_FILENAME']));
|
||||
|
||||
$lessCompiler->addItem($publicDir . '/css/vendor');
|
||||
$lessCompiler->addItem($publicDir . '/css/icinga');
|
||||
|
||||
foreach ($moduleManager->getLoadedModules() as $moduleName) {
|
||||
$cssDir = $moduleName->getCssDir();
|
||||
|
||||
if (is_dir($cssDir)) {
|
||||
$lessCompiler->addItem($cssDir);
|
||||
}
|
||||
}
|
||||
|
||||
$this->_response->setHeader('Content-Type', 'text/css');
|
||||
$this->setCacheHeader(3600);
|
||||
|
||||
$lessCompiler->printStack();
|
||||
|
||||
return;
|
||||
}
|
||||
}
|
||||
// @codingStandardsIgnoreEnd
|
||||
|
|
|
|||
|
|
@ -16,16 +16,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
|
||||
<!-- Bootstrap and components -->
|
||||
<link rel="stylesheet" href="<?= $this->baseUrl('css/vendor/bootstrap/bootstrap.min.css') ?>" media="screen">
|
||||
|
||||
<link rel="stylesheet" href="<?= $this->baseUrl('css/main.css') ?>">
|
||||
<link rel="stylesheet" href="<?= $this->baseUrl('css/vendor/bootstrap/datetimepicker.min.css') ?>">
|
||||
|
||||
|
||||
<!--
|
||||
Not used until styling is clear (see #4550)
|
||||
<link rel="stylesheet" href="<?= $this->baseUrl('css.php') ?>">
|
||||
-->
|
||||
<link rel="stylesheet" href="<?= $this->baseUrl('static/stylesheet') ?>" media="screen">
|
||||
|
||||
<script type="text/javascript">
|
||||
var base_url = '<?= $this->baseUrl() ?>';
|
||||
|
|
|
|||
|
|
@ -35,8 +35,13 @@ $item = $this->navigation->keys("menu");
|
|||
}
|
||||
$activeSet = $activeSet || $active;
|
||||
?>
|
||||
<li class="<?= $active ? "active" : "" ?> <?= $iconClass; ?>">
|
||||
<a href="<?= $url ?>"><?= $itemName ?></a>
|
||||
<li class="<?= $active ? "active" : "" ?>">
|
||||
<a href="<?= $url ?>">
|
||||
<?php if ($iconClass): ?>
|
||||
<i class="<?= $iconClass; ?>"></i>
|
||||
<?php endif; ?>
|
||||
<?= $itemName ?>
|
||||
</a>
|
||||
</li>
|
||||
<?php
|
||||
$class = "";
|
||||
|
|
|
|||
|
|
@ -1,31 +1,36 @@
|
|||
<nav class="navbar navbar-default navbar-fixed-top" id="icingatopbar" role="navigation">
|
||||
<div class="navbar-header">
|
||||
<a href="<?= $this->baseUrl('/') ?>" class="navbar-brand icinga-logo">Icinga</a>
|
||||
</div>
|
||||
<div class="navbar-header">
|
||||
<a href="<?= $this->baseUrl('/') ?>" class="navbar-brand icinga-logo">Icinga</a>
|
||||
</div>
|
||||
|
||||
<div class="pull-left icinga-navbar icinga-navbar-hosts-container">
|
||||
<div class="nav navbar-nav icinga-navbar-hosts-container">
|
||||
<span class="icinga-navbar-pills icinga-navbar-pills-up">999/999</span>
|
||||
<span class="icinga-navbar-pills icinga-navbar-pills-unreachable">999/999</span>
|
||||
<span class="icinga-navbar-pills icinga-navbar-pills-down">999/999</span>
|
||||
</div>
|
||||
|
||||
<div class="pull-left icinga-navbar icinga-navbar-services-container">
|
||||
<div class="nav navbar-nav icinga-navbar-services-container">
|
||||
<span class="icinga-navbar-pills icinga-navbar-pills-ok">999/999</span>
|
||||
<span class="icinga-navbar-pills icinga-navbar-pills-critical">999/999</span>
|
||||
<span class="icinga-navbar-pills icinga-navbar-pills-warning">999/999</span>
|
||||
<span class="icinga-navbar-pills icinga-navbar-pills-unknown">999/999</span>
|
||||
</div>
|
||||
|
||||
<div class="pull-left icinga-navbar icinga-navbar-reload">
|
||||
<div class="nav navbar-nav icinga-navbar-reload">
|
||||
<a class="button btn-common btn-small" href="#">
|
||||
<span class="icon-refresh icon-btn-small"></span>
|
||||
<i class="icinga-icon-refresh"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<form class="navbar-form navbar-left">
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
<button type="button" class="button btn btn-small">
|
||||
<i class="icinga-icon-search"></i>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="pull-left icinga-navbar icinga-navbar-search-container">
|
||||
<input type="text" class="form-control input-sm icinga-navbar-search" />
|
||||
</div>
|
||||
<?php if ($this->auth()->isAuthenticated()): ?>
|
||||
<ul class="nav navbar-nav pull-right" >
|
||||
<!-- Remove component as of #4583 since it's not working-->
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -197,9 +197,9 @@ class Module
|
|||
*
|
||||
* @return string
|
||||
*/
|
||||
public function getCssFilename()
|
||||
public function getCssDir()
|
||||
{
|
||||
return $this->cssdir . '/module.less';
|
||||
return $this->cssdir;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -0,0 +1,139 @@
|
|||
<?php
|
||||
// {{{ICINGA_LICENSE_HEADER}}}
|
||||
/**
|
||||
* 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 <info@icinga.org>
|
||||
* @license http://www.gnu.org/licenses/gpl-2.0.txt GPL, version 2
|
||||
* @author Icinga Development Team <info@icinga.org>
|
||||
*/
|
||||
// {{{ICINGA_LICENSE_HEADER}}}
|
||||
|
||||
namespace Icinga\Web;
|
||||
|
||||
use \Exception;
|
||||
use \RecursiveDirectoryIterator;
|
||||
use \RecursiveIteratorIterator;
|
||||
use \RegexIterator;
|
||||
use \RecursiveRegexIterator;
|
||||
use \Zend_Controller_Front;
|
||||
|
||||
/**
|
||||
* Less compiler prints files or directories to stdout
|
||||
*/
|
||||
class LessCompiler
|
||||
{
|
||||
/**
|
||||
* Collection of items: File or directories
|
||||
*
|
||||
* @var array
|
||||
*/
|
||||
private $items = array();
|
||||
|
||||
/**
|
||||
* lessphp compiler
|
||||
*
|
||||
* @var \lessc
|
||||
*/
|
||||
private $lessc;
|
||||
|
||||
private $baseUrl;
|
||||
|
||||
/**
|
||||
* Create a new instance
|
||||
*/
|
||||
public function __construct()
|
||||
{
|
||||
require_once 'vendor/lessphp/lessc.inc.php';
|
||||
$this->lessc = new \lessc();
|
||||
|
||||
$this->lessc->setVariables(
|
||||
array(
|
||||
'baseurl' => '\'' . Zend_Controller_Front::getInstance()->getBaseUrl(). '\''
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Add usable style item to stack
|
||||
*
|
||||
* @param string $item File or directory
|
||||
*/
|
||||
public function addItem($item)
|
||||
{
|
||||
$this->items[] = $item;
|
||||
}
|
||||
|
||||
/**
|
||||
* Compile and print a single file
|
||||
*
|
||||
* @param string $file
|
||||
*/
|
||||
public function printFile($file)
|
||||
{
|
||||
$ext = pathinfo($file, PATHINFO_EXTENSION);
|
||||
echo PHP_EOL. '/* CSS: ' . $file . ' */' . PHP_EOL;
|
||||
|
||||
if ($ext === 'css') {
|
||||
readfile($file);
|
||||
} elseif ($ext === 'less') {
|
||||
try {
|
||||
echo $this->lessc->compileFile($file);
|
||||
} catch (Exception $e) {
|
||||
echo '/* ' . PHP_EOL . ' ===' . PHP_EOL;
|
||||
echo ' Error in file ' . $file . PHP_EOL;
|
||||
echo ' ' . $e->getMessage() . PHP_EOL . PHP_EOL;
|
||||
echo ' ' . 'This file was dropped cause of errors.' . PHP_EOL;
|
||||
echo ' ===' . PHP_EOL . '*/' . PHP_EOL;
|
||||
}
|
||||
}
|
||||
|
||||
echo PHP_EOL;
|
||||
}
|
||||
|
||||
/**
|
||||
* Compile and print a path content (recursive)
|
||||
*
|
||||
* @param string $path
|
||||
*/
|
||||
public function printPathRecursive($path)
|
||||
{
|
||||
$directoryInterator = new RecursiveDirectoryIterator($path);
|
||||
$iterator = new RecursiveIteratorIterator($directoryInterator);
|
||||
$filteredIterator = new RegexIterator($iterator, '/\.(css|less)$/', RecursiveRegexIterator::GET_MATCH);
|
||||
foreach ($filteredIterator as $file => $extension) {
|
||||
$this->printFile($file);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Compile and print the whole item stack
|
||||
*/
|
||||
public function printStack()
|
||||
{
|
||||
foreach ($this->items as $item) {
|
||||
if (is_dir($item)) {
|
||||
$this->printPathRecursive($item);
|
||||
} elseif (is_file($item)) {
|
||||
$this->printFile($item);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -228,7 +228,7 @@ class Tab implements Widget
|
|||
$caption = '<img src="' . $this->icon->getAbsoluteUrl()
|
||||
. '" style="width:16px;height:16px"/> ' . $caption;
|
||||
} elseif ($this->iconCls !== null) {
|
||||
$caption = '<i class="icon-' . $this->iconCls . '"></i> ' . $caption;
|
||||
$caption = '<i class="' . $this->iconCls . '"></i> ' . $caption;
|
||||
}
|
||||
if ($this->url !== null) {
|
||||
$this->url->overwriteParams($this->urlParams);
|
||||
|
|
|
|||
|
|
@ -165,7 +165,7 @@ class Monitoring_ShowController extends MonitoringController
|
|||
'service',
|
||||
array(
|
||||
'title' => 'Service',
|
||||
'icon' => '',
|
||||
'iconCls' => 'icinga-icon-service',
|
||||
'url' => 'monitoring/show/service',
|
||||
'urlParams' => $params,
|
||||
'tagParams' => array(
|
||||
|
|
@ -178,7 +178,7 @@ class Monitoring_ShowController extends MonitoringController
|
|||
'host',
|
||||
array(
|
||||
'title' => 'Host',
|
||||
'icon' => '',
|
||||
'iconCls' => 'icinga-icon-host',
|
||||
'url' => 'monitoring/show/host',
|
||||
'urlParams' => $params,
|
||||
'tagParams' => array(
|
||||
|
|
@ -190,7 +190,7 @@ class Monitoring_ShowController extends MonitoringController
|
|||
'services',
|
||||
array(
|
||||
'title' => 'Services',
|
||||
'icon' => 'img/classic/service.png',
|
||||
'iconCls' => 'icinga-icon-service',
|
||||
'url' => 'monitoring/show/services',
|
||||
'urlParams' => $params,
|
||||
'tagParams' => array(
|
||||
|
|
@ -202,7 +202,7 @@ class Monitoring_ShowController extends MonitoringController
|
|||
'history',
|
||||
array(
|
||||
'title' => 'History',
|
||||
'icon' => '',
|
||||
'iconCls' => 'icinga-icon-history',
|
||||
'url' => 'monitoring/show/history',
|
||||
'urlParams' => $params,
|
||||
'tagParams' => array(
|
||||
|
|
|
|||
|
|
@ -0,0 +1,252 @@
|
|||
/**
|
||||
* 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 <info@icinga.org>
|
||||
* @license http://www.gnu.org/licenses/gpl-2.0.txt GPL, version 2
|
||||
* @author Icinga Development Team <info@icinga.org>
|
||||
*/
|
||||
|
||||
/* =========================================================================
|
||||
Default elements for module monitoring
|
||||
========================================================================= */
|
||||
|
||||
@colorOk : #00cc33;
|
||||
@colorUp : #00cc33;
|
||||
@colorCritical : #ff3300;
|
||||
@colorDown: #ff3300;
|
||||
@colorPending: #c0c0c0;
|
||||
@colorUnknown : #E066FF;
|
||||
@colorWarning : #FFA500;
|
||||
@colorUnreachable : #E066FF;
|
||||
|
||||
.host-name {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: @lightgrey;
|
||||
}
|
||||
|
||||
.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: @petrol !important;
|
||||
border-color: fuchsia !mportant;
|
||||
}
|
||||
|
||||
.pagination-sm > li > a, .pagination-sm > li > span {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Status colors
|
||||
========================================================================== */
|
||||
|
||||
.status-up {
|
||||
background-color: @colorUp;
|
||||
}
|
||||
|
||||
.status-warning {
|
||||
background-color: @colorWarning;
|
||||
}
|
||||
|
||||
.status-critical {
|
||||
background-color: @colorCritical;
|
||||
}
|
||||
|
||||
.status-unknown {
|
||||
background-color: @colorUnknown;
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
background-color: @colorPending;
|
||||
}
|
||||
|
||||
/** Service status **/
|
||||
.tacheader-status-pending {
|
||||
background-color: @colorPending;
|
||||
}
|
||||
|
||||
.tacheader-status-critical {
|
||||
background-color: @colorCritical;
|
||||
}
|
||||
|
||||
.tacheader-status-ok {
|
||||
/* No status is displayed */
|
||||
}
|
||||
|
||||
.tacheader-status-warning {
|
||||
background-color: @colorWarning;
|
||||
}
|
||||
|
||||
.tacheader-status-unknown {
|
||||
background-color: @colorUnknown;
|
||||
}
|
||||
|
||||
/** Host status **/
|
||||
|
||||
.tacheader-status-unreachable {
|
||||
background-color: @colorUnreachable;
|
||||
}
|
||||
|
||||
.tacheader-status-down {
|
||||
background-color: @colorDown;
|
||||
}
|
||||
|
||||
.tacheader-status-up {
|
||||
/* Do not display any status */
|
||||
}
|
||||
|
||||
/* Borders for Detail Headers */
|
||||
.border-status-mixin (@color) {
|
||||
border-left: 10px solid @color;
|
||||
}
|
||||
|
||||
.border-status-pending {
|
||||
.border-status-mixin(@colorPending);
|
||||
}
|
||||
|
||||
.border-status-critical {
|
||||
.border-status-mixin(@colorCritical);
|
||||
}
|
||||
|
||||
.border-status-ok {
|
||||
.border-status-mixin(@colorOk);
|
||||
}
|
||||
|
||||
.border-status-warning {
|
||||
.border-status-mixin(@colorWarning);
|
||||
}
|
||||
|
||||
.border-status-unknown {
|
||||
.border-status-mixin(@colorUnknown);
|
||||
}
|
||||
|
||||
/** Host status **/
|
||||
|
||||
.border-status-unreachable {
|
||||
.border-status-mixin(@colorUnreachable);
|
||||
}
|
||||
|
||||
.border-status-down {
|
||||
.border-status-mixin(@colorDown);
|
||||
}
|
||||
|
||||
.border-status-up {
|
||||
.border-status-mixin(@colorUp);
|
||||
}
|
||||
|
||||
.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-pills-mixin (@color) {
|
||||
border-color: @color;
|
||||
color: @color;
|
||||
}
|
||||
|
||||
.icinga-navbar-pills-critical {
|
||||
.icinga-navbar-pills-mixin(@colorCritical);
|
||||
}
|
||||
|
||||
.icinga-navbar-pills-ok {
|
||||
.icinga-navbar-pills-mixin(@colorOk);
|
||||
}
|
||||
|
||||
.icinga-navbar-pills-warning {
|
||||
.icinga-navbar-pills-mixin(@colorWarning);
|
||||
}
|
||||
|
||||
.icinga-navbar-pills-unknown {
|
||||
.icinga-navbar-pills-mixin(@colorWarning);
|
||||
}
|
||||
|
||||
.icinga-navbar-pills-unreachable {
|
||||
.icinga-navbar-pills-mixin(@colorUnreachable);
|
||||
}
|
||||
|
||||
.icinga-navbar-pills-down {
|
||||
.icinga-navbar-pills-mixin(@colorDown);
|
||||
}
|
||||
|
||||
.icinga-navbar-pills-up {
|
||||
.icinga-navbar-pills-mixin(@colorUp);
|
||||
}
|
||||
|
||||
.state-tile (@color) {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
padding: 3px 5px 3px 5px;
|
||||
border-radius: 3px;
|
||||
font-size: 13px;
|
||||
border-color: @color;
|
||||
color: @color;
|
||||
}
|
||||
|
||||
.state-tile-up {
|
||||
.navigation-tile-mixin(@colorUp);
|
||||
}
|
||||
|
||||
.state-tile-unreachable {
|
||||
.navigation-tile-mixin(@colorUnreachable);
|
||||
}
|
||||
|
||||
.state-tile-down {
|
||||
.navigation-tile-mixin(@colorDown);
|
||||
}
|
||||
|
||||
.state-tile-pending {
|
||||
.navigation-tile-mixin(@colorPending);
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<?php
|
||||
|
||||
use Icinga\Application\EmbeddedWeb;
|
||||
|
||||
require_once dirname(__FILE__) . '/../library/Icinga/Application/EmbeddedWeb.php';
|
||||
$app = EmbeddedWeb::start(dirname(__FILE__) . '/../config/');
|
||||
require_once 'vendor/lessphp/lessc.inc.php';
|
||||
header('Content-type: text/css');
|
||||
$less = new lessc;
|
||||
$cssdir = dirname(__FILE__) . '/css';
|
||||
|
||||
echo $less->compileFile($cssdir . '/base.less');
|
||||
foreach ($app->getModuleManager()->getLoadedModules() as $name => $module) {
|
||||
if ($module->hasCss()) {
|
||||
echo $less->compile(
|
||||
'.icinga-module.module-'
|
||||
. $name
|
||||
. " {\n"
|
||||
. file_get_contents($module->getCssFilename())
|
||||
. "}\n\n"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -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 <info@icinga.org>
|
||||
* @license http://www.gnu.org/licenses/gpl-2.0.txt GPL, version 2
|
||||
* @author Icinga Development Team <info@icinga.org>
|
||||
*/
|
||||
|
||||
/* =========================================================================
|
||||
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");
|
||||
}
|
||||
|
|
@ -0,0 +1,415 @@
|
|||
/**
|
||||
* 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 <info@icinga.org>
|
||||
* @license http://www.gnu.org/licenses/gpl-2.0.txt GPL, version 2
|
||||
* @author Icinga Development Team <info@icinga.org>
|
||||
*/
|
||||
|
||||
|
||||
@orange : #ff3300;
|
||||
@white : white;
|
||||
@black : #262625;
|
||||
@petrol : #049baf;
|
||||
@lightgrey : #ddd;
|
||||
@darkgrey : #555555;
|
||||
|
||||
/* =========================================================================
|
||||
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: @black;
|
||||
font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,Helvetica,Arial,sans-serif;
|
||||
font-size: 16px;
|
||||
padding-top: 51px;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
Load Indicator
|
||||
========================================================================= */
|
||||
|
||||
.load-indicator .mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: @darkgrey;
|
||||
opacity: 0.3;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
.load-indicator .label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: @black;
|
||||
background-color: @white;
|
||||
font-weight: normal;
|
||||
z-index: 999;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
Common elements
|
||||
========================================================================= */
|
||||
|
||||
.inline-image {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: @lightgrey 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: @petrol;
|
||||
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: @petrol;
|
||||
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: @black;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: @black;
|
||||
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 @lightgrey;
|
||||
}
|
||||
|
||||
.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 @lightgrey !important;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
|
||||
.badge-container {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.badge {
|
||||
background-color: @white;
|
||||
border-radius: 2px;
|
||||
color: @orange;
|
||||
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 @orange;
|
||||
}
|
||||
|
||||
.badge a,
|
||||
.badge a:active,
|
||||
.badge a:hover,
|
||||
.badge:hover {
|
||||
color: @orange !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: @white;
|
||||
border: 1px solid @lightgrey;
|
||||
border-radius: 4px;
|
||||
padding: 5px;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
|
||||
color: @darkgrey;
|
||||
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: @lightgrey;
|
||||
color: @black;
|
||||
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: @black !important;
|
||||
color: @black !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-cta {
|
||||
border-color: @petrol;
|
||||
color: @petrol;
|
||||
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 @lightgrey;
|
||||
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 @lightgrey;
|
||||
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;
|
||||
}
|
||||
|
|
@ -0,0 +1,194 @@
|
|||
/**
|
||||
* 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 <info@icinga.org>
|
||||
* @license http://www.gnu.org/licenses/gpl-2.0.txt GPL, version 2
|
||||
* @author Icinga Development Team <info@icinga.org>
|
||||
*/
|
||||
|
||||
/* =========================================================================
|
||||
Icinga Navigation
|
||||
========================================================================= */
|
||||
|
||||
.navigation-tile-mixin {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
padding: 3px 5px 3px 5px;
|
||||
border-radius: 3px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.nav-stacked > li + li {
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.nav-stacked {
|
||||
background-color: @lightgrey;
|
||||
}
|
||||
|
||||
.icinga-subnavigation {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-stacked > li {
|
||||
padding-left: 8px;
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
border-bottom: 1px dotted @petrol;
|
||||
border-right: 1px dotted @petrol;
|
||||
|
||||
}
|
||||
.nav-stacked > li:first-child {
|
||||
border-top: 1px dotted @petrol;
|
||||
}
|
||||
|
||||
.icinga-subnavigation > li {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px dotted @petrol;
|
||||
border-right: 1px dotted @petrol;
|
||||
}
|
||||
|
||||
ul.icinga-subnavigation {
|
||||
border-bottom: 1px dotted @petrol;
|
||||
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 @petrol;
|
||||
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: @white;
|
||||
}
|
||||
|
||||
.nav-stacked > li.active,
|
||||
.icinga-subnavigation > li.active {
|
||||
background-color: @white;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.badge-container-nav {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
padding-top: 0;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.badge-nav {
|
||||
background-color: @white;
|
||||
border-radius: 2px;
|
||||
color: @orange;
|
||||
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 @orange;
|
||||
}
|
||||
|
||||
.badge-container-subnav {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
padding-top: 0;
|
||||
padding-bottom;
|
||||
margin-left: 2px;
|
||||
margin-top: -8px;
|
||||
}
|
||||
.badge-subnav {
|
||||
background-color: @white;
|
||||
border-radius: 2px;
|
||||
color: @orange;
|
||||
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 @orange;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue