CSS: Badges and menu
This commit is contained in:
Bernd Erk
parent
3b84f406c7
commit
ad2784d5bb
|
|
@ -1,5 +1,71 @@
|
|||
/*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
|
||||
|
||||
/* Badges */
|
||||
.state-badges {
|
||||
|
||||
> ul > li {
|
||||
padding-right: 5px;
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
li .state-ok {
|
||||
.bg-color-ok();
|
||||
}
|
||||
|
||||
li .state-warning {
|
||||
.bg-color-warning();
|
||||
}
|
||||
|
||||
li .state-critical {
|
||||
}
|
||||
|
||||
li .state-unreachable {
|
||||
.bg-color-unreachable();
|
||||
}
|
||||
|
||||
li .state-unknown {
|
||||
.bg-color-unknown();
|
||||
}
|
||||
|
||||
li .state-pending {
|
||||
.bg-color-pending();
|
||||
}
|
||||
}
|
||||
|
||||
/* Tactical overview element styles */
|
||||
|
||||
//.tactical > .boxview > div.box {
|
||||
// min-height: 20em;
|
||||
// min-width: 12.1em;
|
||||
//}
|
||||
//
|
||||
//.tactical div.box.contents {
|
||||
// min-height: 14.5em;
|
||||
//}
|
||||
//
|
||||
//div.box.contents.zero {
|
||||
// min-width: 11.1em;
|
||||
//
|
||||
// background-color: transparent;
|
||||
//}
|
||||
//
|
||||
//div.box.contents.zero span {
|
||||
// font-weight: bold;
|
||||
// line-height: 2em;
|
||||
//
|
||||
// color: #666;
|
||||
//}
|
||||
//
|
||||
//div.box.contents.zero h3 {
|
||||
// margin: 0;
|
||||
// font-size: 12em;
|
||||
// line-height: 1em;
|
||||
//
|
||||
// color: #666;
|
||||
//}
|
||||
|
||||
//.content.processinfo table.avp th {
|
||||
// width: 16em;
|
||||
//}
|
||||
|
|
@ -671,7 +737,7 @@
|
|||
// color: @colorTextDefault;
|
||||
//}
|
||||
//
|
||||
///* Tactical overview element styles */
|
||||
/* Tactical overview element styles */
|
||||
//
|
||||
//.tactical > .boxview > div.box {
|
||||
// min-height: 20em;
|
||||
|
|
|
|||
|
|
@ -12,6 +12,14 @@ input {
|
|||
}
|
||||
}
|
||||
|
||||
input.search {
|
||||
padding-left: 20px;
|
||||
background-image: url('../img/icons/search.png');
|
||||
background-size: 12px 12px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0em;
|
||||
}
|
||||
|
||||
form {
|
||||
// Disable icons for the moment
|
||||
i {
|
||||
|
|
|
|||
|
|
@ -126,3 +126,17 @@ a.button {
|
|||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
min-width: 25px;
|
||||
font-family: tahoma, verdana, sans-serif;
|
||||
font-weight: @font-weight-bold;
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
color: @text-color-inverted;
|
||||
padding: 5px;
|
||||
|
||||
&.state-critical {
|
||||
.bg-color-critical();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
|
||||
#menu a {
|
||||
color: @text-color-default;
|
||||
color: @text-color-default;
|
||||
}
|
||||
|
||||
#menu .separator {
|
||||
|
|
@ -48,7 +48,6 @@
|
|||
|
||||
#menu > nav > ul > li > a {
|
||||
color: @icinga-blue;
|
||||
font-size: 0.9em;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
|
|
@ -65,7 +64,8 @@
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#menu > nav > ul > li {
|
||||
#menu > nav > ul > li a:hover {
|
||||
color: @icinga-blue;
|
||||
}
|
||||
|
||||
#menu > nav > ul > li li {
|
||||
|
|
@ -73,6 +73,25 @@
|
|||
padding-left: 1.6em;
|
||||
}
|
||||
|
||||
#menu .badge {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#menu nav > ul > li.active > .badge {
|
||||
margin-top: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
|
||||
#menu nav > ul > li > div > .badge{
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#menu nav > ul > li.active > div > .badge{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* Collapsed menu item color */
|
||||
#menu > nav > ul > li > a {
|
||||
color: @text-color-light;
|
||||
|
|
@ -94,7 +113,6 @@
|
|||
line-height: 2.8em;
|
||||
padding-left: 0.7em;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
|
@ -106,8 +124,12 @@
|
|||
}
|
||||
|
||||
#menu ul ul li a {
|
||||
line-height: 1.5em;
|
||||
padding-bottom: 1em;
|
||||
line-height: 1.8em;
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
#menu ul ul li a {
|
||||
}
|
||||
|
||||
#menu > nav > ul > li {
|
||||
|
|
@ -132,7 +154,7 @@
|
|||
/* BEGIN OF Hoverable menu */
|
||||
|
||||
#menu li.hover {
|
||||
width: 28em;
|
||||
width: 27em;
|
||||
padding-left: 0.0em;
|
||||
margin-left: 0px;
|
||||
margin-right: 5;
|
||||
|
|
@ -159,9 +181,8 @@
|
|||
}
|
||||
|
||||
#menu li.hover > ul a {
|
||||
width: 95%;
|
||||
width: 90%;
|
||||
display: block;
|
||||
color: @text-color-light;
|
||||
color: @text-color-inverted;
|
||||
}
|
||||
|
||||
|
|
@ -212,7 +233,7 @@
|
|||
#menu input.search {
|
||||
font-size: 0.9em;
|
||||
margin: 0;
|
||||
padding: 0 0.5em 0 2.8em;
|
||||
padding: 0 0.5em 0 2.2em;
|
||||
border: none;
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
|
|
@ -222,8 +243,9 @@
|
|||
background-color: transparent;
|
||||
background-image: url('../img/icons/search.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 1.15em center;
|
||||
background-position: 1.0em center;
|
||||
color: @colorTextDefault;
|
||||
border-left: solid 5px @gray-lighter;
|
||||
}
|
||||
|
||||
html.ie8 #menu input.search {
|
||||
|
|
|
|||
Loading…
Reference in New Issue