tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Apply less mixins 

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()
. '" 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);

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

@ -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(

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

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

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

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

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

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