tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-07-29 16:54:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

Apply less mixins

Browse Source 
refs #4895
This commit is contained in:
Marius Hein 2013-10-16 15:37:44 +02:00
parent cc8ecf262f
commit 6f26df60f3
5 changed files with 164 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
library/Icinga/Web/Widget/Tab.php
View File

@ -228,7 +228,7 @@ class Tab implements Widget
$caption = '<img src="' . $this->icon->getAbsoluteUrl() $caption = '<img src="' . $this->icon->getAbsoluteUrl()
. '" style="width:16px;height:16px"/> ' . $caption; . '" style="width:16px;height:16px"/> ' . $caption;
} elseif ($this->iconCls !== null) { } elseif ($this->iconCls !== null) {
$caption = '<i class="icon-' . $this->iconCls . '"></i> ' . $caption; $caption = '<i class="' . $this->iconCls . '"></i> ' . $caption;
} }
if ($this->url !== null) { if ($this->url !== null) {
$this->url->overwriteParams($this->urlParams); $this->url->overwriteParams($this->urlParams);

8
modules/monitoring/application/controllers/ShowController.php
View File

@ -165,7 +165,7 @@ class Monitoring_ShowController extends MonitoringController
'service', 'service',
array( array(
'title' => 'Service', 'title' => 'Service',
'icon' => '', 'iconCls' => 'icinga-icon-service',
'url' => 'monitoring/show/service', 'url' => 'monitoring/show/service',
'urlParams' => $params, 'urlParams' => $params,
'tagParams' => array( 'tagParams' => array(
@ -178,7 +178,7 @@ class Monitoring_ShowController extends MonitoringController
'host', 'host',
array( array(
'title' => 'Host', 'title' => 'Host',
'icon' => '', 'iconCls' => 'icinga-icon-host',
'url' => 'monitoring/show/host', 'url' => 'monitoring/show/host',
'urlParams' => $params, 'urlParams' => $params,
'tagParams' => array( 'tagParams' => array(
@ -190,7 +190,7 @@ class Monitoring_ShowController extends MonitoringController
'services', 'services',
array( array(
'title' => 'Services', 'title' => 'Services',
'icon' => 'img/classic/service.png', 'iconCls' => 'icinga-icon-service',
'url' => 'monitoring/show/services', 'url' => 'monitoring/show/services',
'urlParams' => $params, 'urlParams' => $params,
'tagParams' => array( 'tagParams' => array(
@ -202,7 +202,7 @@ class Monitoring_ShowController extends MonitoringController
'history', 'history',
array( array(
'title' => 'History', 'title' => 'History',
'icon' => '', 'iconCls' => 'icinga-icon-history',
'url' => 'monitoring/show/history', 'url' => 'monitoring/show/history',
'urlParams' => $params, 'urlParams' => $params,
'tagParams' => array( 'tagParams' => array(

153
modules/monitoring/public/css/main.less
View File

@ -27,15 +27,23 @@
Default elements for module monitoring Default elements for module monitoring
========================================================================= */ ========================================================================= */
@colorOk : #00cc33;
@colorUp : #00cc33;
@colorCritical : #ff3300;
@colorDown: #ff3300;
@colorPending: #c0c0c0;
@colorUnknown : #E066FF;
@colorWarning : #FFA500;
@colorUnreachable : #E066FF;
.host-name { .host-name {
display: block; display: block;
margin-top: 5px; margin-top: 5px;
font-weight: bold; font-weight: bold;
} }
.active { .active {
background-color: #f5f5f5; background-color: @lightgrey;
} }
.output-text { .output-text {
@ -62,7 +70,7 @@
.pagination > .active > span:hover, .pagination > .active > span:hover,
.pagination > .active > a:focus, .pagination > .active > a:focus,
.pagination > .active > span:focus { .pagination > .active > span:focus {
background-color: #049baf !important; background-color: @petrol !important;
border-color: fuchsia !mportant; border-color: fuchsia !mportant;
} }
@ -75,93 +83,97 @@
========================================================================== */ ========================================================================== */
.status-up { .status-up {
background-color: #00cc33; /* green */ background-color: @colorUp;
} }
.status-warning { .status-warning {
background-color: #00cc33; /* xx */ background-color: @colorWarning;
} }
.status-critical { .status-critical {
background-color: #ff3300; /* red */ background-color: @colorCritical;
} }
.status-unknown { .status-unknown {
background-color: #00cc33; /* xx */ background-color: @colorUnknown;
} }
.status-pending { .status-pending {
background-color: #00cc33; /* xx */ background-color: @colorPending;
} }
/** Service status **/ /** Service status **/
.tacheader-status-pending { .tacheader-status-pending {
background-color: #c0c0c0; background-color: @colorPending;
} }
.tacheader-status-critical { .tacheader-status-critical {
background-color: #FF3300; background-color: @colorCritical;
} }
.tacheader-status-ok { .tacheader-status-ok {
/** background-color: #00CC33; **/ /* No status is displayed */
} }
.tacheader-status-warning { .tacheader-status-warning {
background-color: #FFA500; background-color: @colorWarning;
} }
.tacheader-status-unknown { .tacheader-status-unknown {
background-color: #E066FF; background-color: @colorUnknown;
} }
/** Host status **/ /** Host status **/
.tacheader-status-unreachable { .tacheader-status-unreachable {
background-color: #E066FF; background-color: @colorUnreachable;
} }
.tacheader-status-down { .tacheader-status-down {
background-color: #FF3300; background-color: @colorDown;
} }
.tacheader-status-up { .tacheader-status-up {
/** background-color: #00CC33; **/ /* Do not display any status */
} }
/* Borders for Detail Headers */ /* Borders for Detail Headers */
.border-status-mixin (@color) {
border-left: 10px solid @color;
}
.border-status-pending { .border-status-pending {
border-left: 8px solid #c0c0c0; .border-status-mixin(@colorPending);
} }
.border-status-critical { .border-status-critical {
border-left: 8px solid #FF3300; .border-status-mixin(@colorCritical);
} }
.border-status-ok { .border-status-ok {
border-left: 10px solid #00CC33; .border-status-mixin(@colorOk);
} }
.border-status-warning { .border-status-warning {
border-left: 10px solid #FFA500; .border-status-mixin(@colorWarning);
} }
.border-status-unknown { .border-status-unknown {
border-left: 10px solid #E066FF; .border-status-mixin(@colorUnknown);
} }
/** Host status **/ /** Host status **/
.border-status-unreachable { .border-status-unreachable {
border-left: 10px solid #E066FF; .border-status-mixin(@colorUnreachable);
} }
.border-status-down { .border-status-down {
border-left: 10px solid #FF3300; .border-status-mixin(@colorDown);
} }
.border-status-up { .border-status-up {
border-left: 10px solid #00CC33; .border-status-mixin(@colorUp);
} }
.icinga-navbar { .icinga-navbar {
@ -180,72 +192,61 @@
padding-left: 25px !important; padding-left: 25px !important;
} }
.icinga-navbar-search-container { .icinga-navbar-pills-mixin (@color) {
border-left: 1px solid #ddd; border-color: @color;
padding-left: 15px; color: @color;
margin-top: 12px;
} }
.icinga-navbar-hosts-container { .icinga-navbar-pills-critical {
background-image: url('../../img/icons/host.png'); .icinga-navbar-pills-mixin(@colorCritical);
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 { .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-style: solid;
border-width: 1px; border-width: 1px;
padding: 3px 5px 3px 5px; padding: 3px 5px 3px 5px;
border-radius: 3px; border-radius: 3px;
font-size: 13px; font-size: 13px;
border-color: @color;
color: @color;
} }
.state-tile-up {
.navigation-tile-mixin(@colorUp);
/** Service status **/
.icinga-navbar-pills-critical {
border-color: #FF3300;
color: #FF3300;
} }
.icinga-navbar-pills-ok { .state-tile-unreachable {
border-color: #00CC33; .navigation-tile-mixin(@colorUnreachable);
color: #00CC33;
} }
.icinga-navbar-pills-warning { .state-tile-down {
border-color: #FFA500; .navigation-tile-mixin(@colorDown);
color: #FFA500;
} }
.icinga-navbar-pills-unknown { .state-tile-pending {
border-color: #E066FF; .navigation-tile-mixin(@colorPending);
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;
}

66
public/css/icinga/main.less
View File

@ -23,11 +23,18 @@
* @author Icinga Development Team <info@icinga.org> * @author Icinga Development Team <info@icinga.org>
*/ */
@orange : #ff3300;
@white : white;
@black : #262625;
@petrol : #049baf;
@lightgrey : #ddd;
@darkgrey : #555555;
/* ========================================================================= /* =========================================================================
Default elements Default elements
========================================================================= */ ========================================================================= */
html { html {
font-family: sans-serif; /* 1 */ font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */
@ -37,7 +44,7 @@ html {
body { body {
margin: 0; margin: 0;
color: #262625; color: @black;
font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,Helvetica,Arial,sans-serif; font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,Helvetica,Arial,sans-serif;
font-size: 16px; font-size: 16px;
padding-top: 51px; padding-top: 51px;
@ -48,17 +55,16 @@ p {
} }
/* ========================================================================= /* =========================================================================
Load Indocator Load Indicator
========================================================================= */ ========================================================================= */
.load-indicator .mask { .load-indicator .mask {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background-color: #666; background-color: @darkgrey;
opacity: 0.3; opacity: 0.3;
z-index: 998; z-index: 998;
} }
@ -67,8 +73,8 @@ p {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
color: #000; color: @black;
background-color: #fff; background-color: @white;
font-weight: normal; font-weight: normal;
z-index: 999; z-index: 999;
border: none; border: none;
@ -78,12 +84,11 @@ p {
Common elements Common elements
========================================================================= */ ========================================================================= */
.inline-image { .inline-image {
display: inline-block; display: inline-block;
width: 16px; width: 16px;
height: 16px; height: 16px;
background: #c0c0c0 center center no-repeat; background: @lightgrey center center no-repeat;
} }
.small-row { .small-row {
@ -115,7 +120,7 @@ p {
========================================================================= */ ========================================================================= */
a { a {
color: #049baf; color: @petrol;
text-decoration: none; text-decoration: none;
} }
@ -141,7 +146,7 @@ a:focus {
a:active, a:active,
a:hover { a:hover {
outline: 0; outline: 0;
color: #049baf; color: @petrol;
text-decoration: underline; text-decoration: underline;
} }
@ -155,12 +160,12 @@ a:hover {
*/ */
h1 { h1 {
color: #262625; color: @black;
font-size: 20px; font-size: 20px;
} }
h2 { h2 {
color: #262625; color: @black;
font-size: 16px; font-size: 16px;
} }
@ -189,7 +194,7 @@ th {
font-weight: bold; font-weight: bold;
font-size: 18px; font-size: 18px;
padding: 8px 8px 10px 8px; padding: 8px 8px 10px 8px;
border-bottom: 2px solid #ddd; border-bottom: 2px solid @lightgrey;
} }
.table-detail th { .table-detail th {
@ -208,7 +213,7 @@ th {
td { td {
padding: 8px 10px 8px 8px !important; padding: 8px 10px 8px 8px !important;
border-bottom: 1px dotted #ddd !important; border-bottom: 1px dotted @lightgrey !important;
border-top: none; border-top: none;
} }
@ -219,9 +224,9 @@ td {
} }
.badge { .badge {
background-color: #fff; background-color: @white;
border-radius: 2px; border-radius: 2px;
color: #ff3300; color: @orange;
display: inline-block; display: inline-block;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
@ -234,14 +239,14 @@ td {
text-align: center; text-align: center;
vertical-align: baseline; vertical-align: baseline;
white-space: nowrap; white-space: nowrap;
border: 1px solid #ff3300; border: 1px solid @orange;
} }
.badge a, .badge a,
.badge a:active, .badge a:active,
.badge a:hover, .badge a:hover,
.badge:hover { .badge:hover {
color: #ff3300 !important; color: @orange !important;
display: block !important; display: block !important;
} }
@ -270,12 +275,12 @@ label {
padding: 5px; padding: 5px;
} }
.form-control { .form-control {
background-color: #FFFFFF; background-color: @white;
border: 1px solid #CCCCCC; border: 1px solid @lightgrey;
border-radius: 4px; border-radius: 4px;
padding: 5px; padding: 5px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
color: #555555; color: @darkgrey;
display: block; display: block;
vertical-align: middle; vertical-align: middle;
width: 100%; width: 100%;
@ -298,8 +303,8 @@ select.input-sm {
} }
.btn-common { .btn-common {
border-color: #ddd; border-color: @lightgrey;
color: #262625; color: @black;
background: rgb(255,255,255); /* Old browsers */ 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: -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-gradient(linear, left top, left bottom, color-stop(1%,rgb(255,255,255)), color-stop(100%,rgb(245,245,245))); /* Chrome,Safari4+ */
@ -311,14 +316,14 @@ select.input-sm {
.panel-row > a:hover, .panel-row > a:hover,
.btn-common:hover { .btn-common:hover {
border-color: #262625 !important; border-color: @black !important;
color: #262625 !important; color: @black !important;
text-decoration: none; text-decoration: none;
} }
.btn-cta { .btn-cta {
border-color: #049BAF; border-color: @petrol;
color: #049BAF; color: @petrol;
background: rgb(255,255,255); /* Old browsers */ 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: -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-gradient(linear, left top, left bottom, color-stop(1%,rgb(255,255,255)), color-stop(100%,rgb(245,245,245))); /* Chrome,Safari4+ */
@ -367,7 +372,7 @@ select.input-sm {
} }
.separator { .separator {
border-top: 2px solid #ddd; border-top: 2px solid @lightgrey;
border-bottom: 0; border-bottom: 0;
margin: 0; margin: 0;
height: 2px; height: 2px;
@ -381,11 +386,10 @@ select.input-sm {
display: block; display: block;
margin-bottom: 10px; margin-bottom: 10px;
overflow: hidden; overflow: hidden;
border-bottom: 1px dotted #ddd; border-bottom: 1px dotted @lightgrey;
padding-bottom: 10px; padding-bottom: 10px;
} }
.panel-label { .panel-label {
float: left; float: left;
padding-right: 10px; padding-right: 10px;

119
public/css/icinga/navigation.less
View File

@ -27,13 +27,21 @@
Icinga Navigation 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 { .nav-stacked > li + li {
margin-left: 0; margin-left: 0;
margin-top: 0; margin-top: 0;
} }
.nav-stacked { .nav-stacked {
background-color: #f8f8f8; background-color: @lightgrey;
} }
.icinga-subnavigation { .icinga-subnavigation {
@ -44,23 +52,23 @@
padding-left: 8px; padding-left: 8px;
padding-top: 1px; padding-top: 1px;
padding-bottom: 1px; padding-bottom: 1px;
border-bottom: 1px dotted #049baf; border-bottom: 1px dotted @petrol;
border-right: 1px dotted #049baf; border-right: 1px dotted @petrol;
} }
.nav-stacked > li:first-child { .nav-stacked > li:first-child {
border-top: 1px dotted #049baf; border-top: 1px dotted @petrol;
} }
.icinga-subnavigation > li { .icinga-subnavigation > li {
padding-top: 8px; padding-top: 8px;
padding-bottom: 8px; padding-bottom: 8px;
border-bottom: 1px dotted #049baf; border-bottom: 1px dotted @petrol;
border-right: 1px dotted #049baf; border-right: 1px dotted @petrol;
} }
ul.icinga-subnavigation { ul.icinga-subnavigation {
border-bottom: 1px dotted #049baf; border-bottom: 1px dotted @petrol;
margin-left: 0; margin-left: 0;
padding-left: 15px; padding-left: 15px;
} }
@ -75,7 +83,7 @@ ul.icinga-subnavigation {
.icinga-subnavigation > li > a { .icinga-subnavigation > li > a {
padding-left: 40px; padding-left: 40px;
padding-right: 3px; padding-right: 3px;
border-left: 6px solid #049baf; border-left: 6px solid @petrol;
display: inline-block; display: inline-block;
} }
@ -95,21 +103,15 @@ ul.icinga-subnavigation {
.nav-stacked > li:focus, .nav-stacked > li:focus,
.icinga-subnavigation > li:hover, .icinga-subnavigation > li:hover,
.icinga-subnavigation > li:focus { .icinga-subnavigation > li:focus {
background-color: #fff; background-color: @white;
} }
.nav-stacked > li.active, .nav-stacked > li.active,
.icinga-subnavigation > li.active { .icinga-subnavigation > li.active {
background-color: #fff; background-color: @white;
border-right: 0; 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 { .badge-container-nav {
display: inline-block; display: inline-block;
overflow: hidden; overflow: hidden;
@ -117,9 +119,9 @@ ul.icinga-subnavigation {
margin-bottom: 5px; margin-bottom: 5px;
} }
.badge-nav { .badge-nav {
background-color: #fff; background-color: @white;
border-radius: 2px; border-radius: 2px;
color: #ff3300; color: @orange;
display: inline-block; display: inline-block;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
@ -132,7 +134,7 @@ ul.icinga-subnavigation {
text-align: center; text-align: center;
vertical-align: baseline; vertical-align: baseline;
white-space: nowrap; white-space: nowrap;
border: 1px solid #ff3300; border: 1px solid @orange;
} }
.badge-container-subnav { .badge-container-subnav {
@ -144,9 +146,9 @@ ul.icinga-subnavigation {
margin-top: -8px; margin-top: -8px;
} }
.badge-subnav { .badge-subnav {
background-color: #fff; background-color: @white;
border-radius: 2px; border-radius: 2px;
color: #ff3300; color: @orange;
display: inline-block; display: inline-block;
font-size: 10px; font-size: 10px;
font-weight: bold; font-weight: bold;
@ -159,61 +161,34 @@ ul.icinga-subnavigation {
text-align: center; text-align: center;
vertical-align: baseline; vertical-align: baseline;
white-space: nowrap; white-space: nowrap;
border: 1px solid #ff3300; border: 1px solid @orange;
} }
.state-tile { .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-style: solid;
border-width: 1px; border-width: 1px;
padding: 3px 5px 3px 5px; padding: 3px 5px 3px 5px;
border-radius: 3px; border-radius: 3px;
font-size: 13px; 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;
}