mirror of
https://github.com/Icinga/icingaweb2-module-businessprocess.git
synced 2026-01-01 03:09:35 -05:00
a8149a1983
Showing the override rules only in tree view but not in tile view is one problem. Another one however are rules for all states which then are difficult to decipher while not providing much benefit. The flash to indicate the real state also is not intuitive enough. That's why this change combines both widgets in a single one. This makes it more clear what the actual state is, what happened to it, and does not cobble the view with too much state balls.
1204 lines
24 KiB
Text
1204 lines
24 KiB
Text
a:focus {
|
|
outline: none;
|
|
text-decoration: underline;
|
|
&::before {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.action-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 1.3em;
|
|
color: @icinga-blue;
|
|
|
|
> a {
|
|
&:hover::before {
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
margin-right: 1em;
|
|
}
|
|
|
|
&.button-link {
|
|
color: white;
|
|
background: @icinga-blue;
|
|
|
|
&:active, &:focus {
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
> div.view-toggle {
|
|
margin-right: 1em;
|
|
|
|
span {
|
|
color: @gray;
|
|
margin-right: .5em;
|
|
}
|
|
|
|
a {
|
|
display: inline-block;
|
|
|
|
i {
|
|
padding: .25em .5em;
|
|
border: 1px solid @icinga-blue;
|
|
|
|
&:before {
|
|
margin-right: 0;
|
|
}
|
|
|
|
&.active {
|
|
color: white;
|
|
background-color: @icinga-blue;
|
|
}
|
|
|
|
&:first-of-type {
|
|
border-top-left-radius: .25em;
|
|
border-bottom-left-radius: .25em;
|
|
}
|
|
&:last-of-type {
|
|
border-top-right-radius: .25em;
|
|
border-bottom-right-radius: .25em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
span.disabled {
|
|
color: @gray;
|
|
}
|
|
}
|
|
|
|
form a {
|
|
color: @icinga-blue;
|
|
}
|
|
|
|
div.bp {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
div.bp.sortable > .sortable-ghost {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.simulation div.bp {
|
|
border-right: 1em solid @colorCriticalHandled;
|
|
padding-right: 1em;
|
|
background: white;
|
|
}
|
|
|
|
|
|
/* TreeView */
|
|
|
|
@vertical-tree-item-gap: .5em;
|
|
|
|
ul.bp {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style-type: none;
|
|
|
|
.action-link {
|
|
font-size: 1.3em;
|
|
line-height: 1;
|
|
}
|
|
|
|
// cursors!!!1
|
|
&:not([data-sortable-disabled="true"]) {
|
|
.movable {
|
|
cursor: grab;
|
|
|
|
&.sortable-chosen {
|
|
cursor: grabbing;
|
|
}
|
|
}
|
|
|
|
&.progress .movable {
|
|
cursor: wait;
|
|
}
|
|
}
|
|
&[data-sortable-disabled="true"] {
|
|
li.process > div {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
// ghost style
|
|
&.sortable > li.sortable-ghost {
|
|
position: relative;
|
|
overflow: hidden;
|
|
max-height: 30em;
|
|
background-color: @gray-lighter;
|
|
border: .2em dotted @gray-light;
|
|
border-left-width: 0;
|
|
border-right-width: 0;
|
|
|
|
&.process:after {
|
|
// TODO: Only apply if content overflows?
|
|
content: " ";
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 50%;
|
|
background: linear-gradient(transparent, @body-bg-color);
|
|
}
|
|
}
|
|
|
|
// header style
|
|
li.process > div {
|
|
padding: .291666667em 0;
|
|
border-bottom: 1px solid @gray-light;
|
|
|
|
> a.toggle {
|
|
min-width: 1.25em; // So that process icons align with their node's icons
|
|
color: @gray;
|
|
}
|
|
|
|
> span {
|
|
font-size: 1.25em;
|
|
|
|
&.op {
|
|
padding: .1em .5em;
|
|
border-radius: .5em;
|
|
background-color: @gray-light;
|
|
font-weight: bold;
|
|
font-size: 1em;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
// subprocess style
|
|
li.process > ul {
|
|
padding-left: 2em;
|
|
list-style-type: none;
|
|
|
|
&.sortable {
|
|
min-height: 1em; // Required to be able to move items back to an otherwise empty list
|
|
}
|
|
}
|
|
|
|
// vertical layout
|
|
> li {
|
|
padding: @vertical-tree-item-gap 0;
|
|
|
|
&:first-child {
|
|
margin-top: @vertical-tree-item-gap;
|
|
}
|
|
|
|
&.process {
|
|
padding-bottom: 0;
|
|
|
|
&:first-child {
|
|
margin-top: 0;
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// horizontal layout
|
|
li.process > div,
|
|
li:not(.process) {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: .25em;
|
|
|
|
> * {
|
|
margin-right: .5em;
|
|
}
|
|
|
|
> :not(.overridden-state) + a.action-link {
|
|
margin-left: auto; // Let the first action link move everything to the right
|
|
|
|
& + a.action-link {
|
|
margin-left: 0; // But really only the first one
|
|
}
|
|
}
|
|
|
|
.overridden-state {
|
|
margin-left: auto;
|
|
margin-right: 1em;
|
|
}
|
|
}
|
|
|
|
// collapse handling
|
|
li.process {
|
|
// toggle, default
|
|
> div > a.toggle > i:before {
|
|
-webkit-transition: -webkit-transform 0.3s;
|
|
-moz-transition: -moz-transform 0.3s;
|
|
-o-transition: -o-transform 0.3s;
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
// toggle, collapsed
|
|
&.collapsed > div > a.toggle > i:before {
|
|
-moz-transform:rotate(-90deg);
|
|
-ms-transform:rotate(-90deg);
|
|
-o-transform:rotate(-90deg);
|
|
-webkit-transform:rotate(-90deg);
|
|
transform:rotate(-90deg);
|
|
}
|
|
|
|
&.collapsed {
|
|
margin-bottom: (@vertical-tree-item-gap * 2);
|
|
|
|
> ul.bp {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// hover style
|
|
li.process:hover > div {
|
|
background-color: @tr-active-color;
|
|
}
|
|
li:not(.process):hover {
|
|
background-color: @tr-active-color;
|
|
}
|
|
|
|
li.process > div > .state-ball,
|
|
li:not(.process) > .state-ball {
|
|
border: .15em solid white;
|
|
|
|
&.size-s {
|
|
width: 7em/6em;
|
|
height: 7em/6em;
|
|
line-height: 7em/6em;
|
|
}
|
|
}
|
|
}
|
|
|
|
/** BEGIN Dashboard **/
|
|
.overview-dashboard {
|
|
.header {
|
|
font-weight: bold;
|
|
display: block;
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
i {
|
|
float: left;
|
|
font-size: 2.5em;
|
|
margin-top: -0.1em;
|
|
margin-bottom: 2em;
|
|
color: inherit;
|
|
}
|
|
|
|
.bp-root-tiles {
|
|
margin-left: 3em;
|
|
}
|
|
|
|
.dashboard-tile {
|
|
cursor: pointer;
|
|
padding: 1em;
|
|
|
|
&:hover {
|
|
background-color: @gray-lighter;
|
|
}
|
|
|
|
.bp-link {
|
|
> a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
vertical-align: middle;
|
|
word-wrap: break-word;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.badge {
|
|
margin-top: 0.25em;
|
|
text-decoration: none;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
&:hover {
|
|
box-shadow: 0px 0px 5px #666;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dashboard-tile,
|
|
div.action {
|
|
width: 20em;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.action {
|
|
> a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
vertical-align: middle;
|
|
display: block;
|
|
padding: 1em;
|
|
word-wrap: break-word;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
|
|
&.addnew:hover {
|
|
background-color: @icinga-blue;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/** END Dashboard **/
|
|
|
|
/** BEGIN Badges **/
|
|
.badges {
|
|
background-color: fade(@body-bg-color, 50%);
|
|
border-radius: 0.45em;
|
|
display: block;
|
|
padding: 0.3em 0.4em;
|
|
|
|
.badge {
|
|
border: 1px solid white;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
div.bp .badges {
|
|
display: inline-block;
|
|
padding-top: 0;
|
|
}
|
|
|
|
|
|
|
|
td > a > .badges {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.badge-critical, .badge-down { background: @colorCritical; }
|
|
.badge-unknown, .badge-unreachable { background: @colorUnknown; }
|
|
.badge-warning { background: @colorWarning; }
|
|
.badge-pending { background: @colorPending; }
|
|
.badge-missing { background: #ccc; }
|
|
/** END Badges **/
|
|
.badges
|
|
/** BEGIN Tiles **/
|
|
.tiles:after {
|
|
content:'';
|
|
display:block;
|
|
clear: both;
|
|
}
|
|
|
|
.tiles.sortable > .sortable-ghost {
|
|
opacity: 0.5;
|
|
border: .2em dashed black;
|
|
}
|
|
|
|
.tiles > div {
|
|
color: white;
|
|
width: 12em;
|
|
display: inline-block;
|
|
float: left;
|
|
vertical-align: top;
|
|
margin-right: 0.2em;
|
|
margin-bottom: 0.2em;
|
|
height: 6em;
|
|
cursor: pointer;
|
|
position: relative;
|
|
|
|
.badges {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
margin: 0.5em;
|
|
text-align: center;
|
|
font-size: 0.5em;
|
|
}
|
|
|
|
.overridden-state {
|
|
font-size: .75em;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
margin: .5em;
|
|
border: 1px solid white;
|
|
}
|
|
|
|
> a {
|
|
display: block;
|
|
text-decoration: none;
|
|
font-size: 0.7em;
|
|
text-align: center;
|
|
padding: 1em 1em 0;
|
|
font-weight: bold;
|
|
word-wrap: break-word;
|
|
color: @text-color-inverted;
|
|
|
|
& + p.children-count {
|
|
margin: 0;
|
|
font-size: .5em;
|
|
text-align: center;
|
|
|
|
span {
|
|
font-size: .8em;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
box-shadow: 0px 0px 5px #666;
|
|
}
|
|
|
|
.actions {
|
|
opacity: 0.8;
|
|
margin: 0.5em 0 0 0.5em;
|
|
font-size: 0.75em;
|
|
height: 1.8em;
|
|
|
|
i {
|
|
float: none;
|
|
display: block;
|
|
width: 100%;
|
|
font-size: 1em;
|
|
line-height: normal;
|
|
margin: 0;
|
|
padding: 0 0 0 0.25em;
|
|
}
|
|
a {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: inline-block;
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
border-radius: 0.3em;
|
|
}
|
|
|
|
a:hover {
|
|
background-color: @body-bg-color;
|
|
color: @text-color;
|
|
}
|
|
|
|
> .node-info {
|
|
margin-right: 0.3em;
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tiles.sortable:not([data-sortable-disabled="true"]) {
|
|
> div {
|
|
cursor: grab;
|
|
|
|
&.sortable-chosen {
|
|
cursor: grabbing;
|
|
}
|
|
}
|
|
|
|
&.progress > div {
|
|
cursor: wait;
|
|
}
|
|
}
|
|
|
|
.tiles > div.parent::before {
|
|
content: '&';
|
|
position: absolute;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.tiles > div.parent {
|
|
width: 100%;
|
|
height: 2em;
|
|
}
|
|
|
|
.tiles {
|
|
> .critical { background-color: @colorCritical; > a { text-shadow: 0 0 1px mix(#000, @colorCritical, 40%); }}
|
|
> .critical.handled { background-color: @colorCriticalHandled; > a { text-shadow: 0 0 1px mix(#000, @colorCriticalHandled, 40%); }}
|
|
> .down { background-color: @colorCritical; > a { text-shadow: 0 0 1px mix(#000, @colorCritical, 40%); }}
|
|
> .down.handled { background-color: @colorCriticalHandled; > a { text-shadow: 0 0 1px mix(#000, @colorCriticalHandled, 40%); }}
|
|
> .unknown { background-color: @colorUnknown; > a { text-shadow: 0 0 1px mix(#000, @colorUnknown, 40%); }}
|
|
> .unknown.handled { background-color: @colorUnknownHandled; > a { text-shadow: 0 0 1px mix(#000, @colorUnknownHandled, 40%); }}
|
|
> .unreachable { background-color: @colorUnknown; > a { text-shadow: 0 0 1px mix(#000, @colorUnknown, 40%); }}
|
|
> .unreachable.handled { background-color: @colorUnknownHandled; > a { text-shadow: 0 0 1px mix(#000, @colorUnknownHandled, 40%); }}
|
|
> .warning { background-color: @colorWarning; > a { text-shadow: 0 0 1px mix(#000, @colorWarning, 40%); }}
|
|
> .warning.handled { background-color: @colorWarningHandled; > a { text-shadow: 0 0 1px mix(#000, @colorWarningHandled, 40%); }}
|
|
> .ok { background-color: @colorOk; > a { text-shadow: 0 0 1px mix(#000, @colorOk, 40%); }}
|
|
> .up { background-color: @colorOk; > a { text-shadow: 0 0 1px mix(#000, @colorOk, 40%); }}
|
|
> .pending { background-color: @colorPending; > a { text-shadow: 0 0 1px mix(#000, @colorPending, 40%); }}
|
|
> .missing { background-color: @gray-light; > a { text-shadow: 0 0 1px @gray }}
|
|
> .addnew { background-color: @icinga-blue; > a { text-shadow: 0 0 1px mix(#000, @icinga-blue, 40%); }}
|
|
> .empty { background-color: @gray-light; > a { text-shadow: 0 0 1px @gray }}
|
|
}
|
|
|
|
/*
|
|
.tiles > div:hover {
|
|
> .critical { background: white; color: @text-color; }
|
|
> .critical.handled { background: @colorCriticalHandled; }
|
|
> .down { background: @colorCritical; }
|
|
> .down.handled { background: @colorCriticalHandled; }
|
|
> .unknown { background: @colorUnknown; }
|
|
> .unknown.handled { background: @colorUnknownHandled; }
|
|
> .unreachable { background: @colorUnknown; }
|
|
> .unreachable.handled { background: @colorUnknownHandled; }
|
|
> .warning { background: @colorWarning; }
|
|
> .warning.handled { background: @colorWarningHandled; }
|
|
> .ok { background: @colorOk; }
|
|
> .pending { background: @colorPending; }
|
|
> .missing { background: #ccc; }
|
|
}
|
|
*/
|
|
/*
|
|
.tiles .missing a {
|
|
pointer-events: none;
|
|
cursor: default;
|
|
}
|
|
*/
|
|
|
|
.tiles.few { font-size: 2.5em; }
|
|
.tiles.normal { font-size: 2.1em; }
|
|
.tiles.many { font-size: 1.8em; }
|
|
|
|
#layout.twocols, #layout.layout-minimal, div.compact {
|
|
.tiles.few { font-size: 1.8em; }
|
|
.tiles.normal { font-size: 1.8em; }
|
|
.tiles.many { font-size: 1.8em; }
|
|
}
|
|
|
|
#layout.fullscreen-layout .controls {
|
|
padding: 0 1em;
|
|
}
|
|
|
|
/** END of tiles **/
|
|
|
|
.content.restricted {
|
|
h1 {
|
|
font-size: 2em;
|
|
}
|
|
|
|
p > a {
|
|
margin-left: 1em;
|
|
}
|
|
}
|
|
|
|
/** BEGIN breadcrumb **/
|
|
|
|
.breadcrumb {
|
|
list-style: none;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
}
|
|
|
|
.breadcrumb:after {
|
|
content:'';
|
|
display:block;
|
|
clear: both;
|
|
}
|
|
.breadcrumb li {
|
|
float: left;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
|
|
}
|
|
.breadcrumb li a {
|
|
color: @icinga-blue;
|
|
margin: 0;
|
|
font-size: 1.2em;
|
|
text-decoration: none;
|
|
padding-left: 2em;
|
|
line-height: 2.5em;
|
|
position: relative;
|
|
display: block;
|
|
float: left;
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
> .state-ball {
|
|
margin-right: .5em;
|
|
border: .15em solid white;
|
|
|
|
&.size-s {
|
|
width: 7em/6em;
|
|
height: 7em/6em;
|
|
line-height: 7em/6em;
|
|
}
|
|
}
|
|
}
|
|
.breadcrumb li {
|
|
border: 1px solid @gray-lighter;
|
|
|
|
&:first-of-type {
|
|
border-radius: .25em;
|
|
}
|
|
|
|
&:last-of-type {
|
|
border-radius: .25em;
|
|
border: 1px solid @icinga-blue;
|
|
background: @icinga-blue;
|
|
padding-right: 1.2em;
|
|
|
|
a {
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.breadcrumb li:not(:last-of-type) a:before, .breadcrumb li:not(:last-of-type) a:after {
|
|
content: " ";
|
|
display: block;
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 1.3em solid transparent;
|
|
border-bottom: 1.2em solid transparent;
|
|
position: absolute;
|
|
margin-top: -1.2em;
|
|
top: 50%;
|
|
left: 100%;
|
|
}
|
|
|
|
.breadcrumb li:not(:last-of-type) a:before {
|
|
border-left: 1.2em solid @gray-lighter;
|
|
margin-left: 1px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.breadcrumb li:not(:last-of-type) a:after {
|
|
border-left: 1.2em solid @body-bg-color;
|
|
z-index: 2;
|
|
}
|
|
|
|
&.impact {
|
|
.breadcrumb li:not(:last-of-type) a:after {
|
|
.transition(border-left-color 2s 0.66s linear !important);
|
|
border-left-color: @gray-lighter !important;
|
|
}
|
|
|
|
.breadcrumb li:not(:last-of-type) a:before {
|
|
.transition(border-left-color 2s 1s linear !important);
|
|
border-left-color: @gray-light !important;
|
|
}
|
|
|
|
.breadcrumb li:not(:last-of-type) {
|
|
.transition(border-color 2s 1s linear !important);
|
|
border-color: @gray-light !important;
|
|
}
|
|
.breadcrumb li:not(:last-of-type) a:hover {
|
|
background-color: transparent !important;
|
|
color: @icinga-blue;
|
|
}
|
|
}
|
|
|
|
.tabs > .dropdown-nav-item > ul {
|
|
z-index: 100;
|
|
}
|
|
|
|
.breadcrumb li:first-child a {
|
|
padding-left: 1em;
|
|
padding-right: 0.5em;
|
|
}
|
|
|
|
.breadcrumb li:not(:last-child) a:hover { background: @icinga-blue; color: white; }
|
|
.breadcrumb li:not(:last-child) a:hover:after { border-left-color: @icinga-blue; }
|
|
.breadcrumb li:last-child:hover, .breadcrumb li:last-child a:hover { background: @icinga-blue; border-color: @icinga-blue; }
|
|
|
|
.breadcrumb li a:focus {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
#layout.twocols, #layout.layout-minimal, div.compact {
|
|
.breadcrumb {
|
|
font-size: 0.833em;
|
|
}
|
|
}
|
|
|
|
/** END of breadcrumb **/
|
|
|
|
|
|
ul.error, ul.warning {
|
|
padding: 0;
|
|
list-style-type: none;
|
|
background-color: @colorCritical;
|
|
|
|
li {
|
|
font-weight: bold;
|
|
color: white;
|
|
padding: 0.3em 0.8em;
|
|
}
|
|
|
|
li a {
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
ul.warning {
|
|
background-color: @colorWarning;
|
|
}
|
|
|
|
table.sourcecode {
|
|
font-family: monospace;
|
|
white-space: pre-wrap;
|
|
|
|
th {
|
|
vertical-align: top;
|
|
padding-right: 0.5em;
|
|
user-select: none;
|
|
-moz-user-select: none;
|
|
-o-user-select: none;
|
|
-ms-user-select: none;
|
|
-webkit-user-select: none;
|
|
font-weight: bold;
|
|
}
|
|
td {
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
|
|
.diff {
|
|
font-family: monospace;
|
|
white-space: pre-wrap;
|
|
|
|
del, ins {
|
|
text-decoration: none;
|
|
}
|
|
|
|
del {
|
|
color: @colorCritical;
|
|
background-color: #fdd;
|
|
}
|
|
|
|
ins {
|
|
color: @colorOk;
|
|
background-color: #dfd;
|
|
}
|
|
}
|
|
|
|
/** Forms stolen from director **/
|
|
.content form {
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
.content form.inline {
|
|
margin: 0;
|
|
}
|
|
|
|
.invisible {
|
|
position: absolute;
|
|
left: -100%;
|
|
}
|
|
|
|
form input[type=file] {
|
|
padding-right: 1em;
|
|
}
|
|
|
|
|
|
form input[type=submit] {
|
|
.button();
|
|
border-width: 1px;
|
|
margin-top: 0.5em;
|
|
|
|
&:disabled {
|
|
border-color: @gray-light;
|
|
background-color: @gray-light;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
form input[type=submit]:first-of-type {
|
|
border-width: 2px;
|
|
}
|
|
|
|
form input[type=submit].link-button {
|
|
color: @icinga-blue;
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
|
|
text-align: left;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
form p.description {
|
|
padding: 1em 1em;
|
|
margin: 0;
|
|
font-style: italic;
|
|
width: 100%;
|
|
}
|
|
|
|
input[type=text], input[type=button], select, select option, textarea {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
form ul.form-errors {
|
|
margin-bottom: 0.5em;
|
|
|
|
ul.errors li {
|
|
background: @color-critical;
|
|
font-weight: bold;
|
|
padding: 0.5em 1em;
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
select::-ms-expand, input::-ms-expand, textarea::-ms-expand { /* for IE 11 */
|
|
display: none;
|
|
}
|
|
|
|
select {
|
|
border: 1px solid #ddd;
|
|
cursor: pointer;
|
|
background: none;
|
|
}
|
|
|
|
input[type=text], input[type=password], textarea, select {
|
|
max-width: 36em;
|
|
min-width: 20em;
|
|
width: 100%;
|
|
line-height: 2em;
|
|
height: 2.4em;
|
|
padding-left: 0.5em;
|
|
border-style: solid;
|
|
border-color: transparent;
|
|
border-bottom-color: @gray-lighter;
|
|
border-width: 1px 1px 1px 3px;
|
|
|
|
&.search {
|
|
background: transparent url("../img/icons/search.png") no-repeat scroll 0.5em center / 1em 1em;
|
|
padding-left: 2em;
|
|
}
|
|
}
|
|
|
|
select[multiple] {
|
|
height: auto;
|
|
}
|
|
|
|
select option {
|
|
height: 2em;
|
|
padding-top: 0.3em;
|
|
}
|
|
|
|
select[multiple=multiple] {
|
|
height: auto;
|
|
}
|
|
|
|
label {
|
|
line-height: 2em;
|
|
}
|
|
|
|
form dl {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
select::-moz-focus-inner { border: 0; }
|
|
|
|
select:-moz-focusring {
|
|
color: transparent;
|
|
text-shadow: 0 0 0 #000;
|
|
}
|
|
|
|
select, input[type=text], textarea {
|
|
&:hover {
|
|
border-style: dotted solid dotted solid;
|
|
border-color: @gray-light;
|
|
}
|
|
|
|
&:focus, &:focus:hover {
|
|
border-style: solid;
|
|
border-color: @icinga-blue;
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
select[value=""] {
|
|
color: blue;
|
|
border: 1px solid #666;
|
|
background-color: @body-bg-color;
|
|
}
|
|
|
|
select option {
|
|
color: inherit;
|
|
padding-left: 0.5em;
|
|
background-color: @body-bg-color;
|
|
}
|
|
|
|
select option[value=""] {
|
|
color: #aaa;
|
|
background-color: @body-bg-color;
|
|
}
|
|
|
|
form dt label {
|
|
width: auto;
|
|
font-weight: normal;
|
|
font-size: inherit;
|
|
|
|
&.required {
|
|
&::after {
|
|
content: '*'
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
#stateOverrides-element {
|
|
display: inline-table;
|
|
table-layout: fixed;
|
|
border-spacing: .5em;
|
|
padding: 0;
|
|
|
|
label {
|
|
display: table-row;
|
|
|
|
span, select {
|
|
display: table-cell;
|
|
}
|
|
|
|
span {
|
|
width: 10em;
|
|
}
|
|
|
|
select {
|
|
width: 26em;
|
|
}
|
|
}
|
|
}
|
|
|
|
form fieldset {
|
|
min-width: 36em;
|
|
}
|
|
|
|
form dd input.related-action[type='submit'] {
|
|
display: none;
|
|
}
|
|
|
|
form dd.active li.active input.related-action[type='submit'] {
|
|
display: inline-block;
|
|
}
|
|
|
|
form dd.active {
|
|
p.description {
|
|
color: inherit;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
form dd {
|
|
padding: 0.3em 0.5em;
|
|
margin: 0;
|
|
}
|
|
|
|
form dt {
|
|
padding: 0.5em 0.5em;
|
|
margin: 0;
|
|
}
|
|
|
|
form dt.active, form dd.active {
|
|
background-color: @tr-active-color;
|
|
}
|
|
|
|
form dt {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
min-width: 12em;
|
|
min-height: 2.5em;
|
|
width: 30%;
|
|
&.errors label {
|
|
color: @color-critical;
|
|
}
|
|
}
|
|
|
|
form .errors label {
|
|
color: @color-critical;
|
|
}
|
|
|
|
form dd {
|
|
display: inline-block;
|
|
width: 63%;
|
|
min-height: 2.5em;
|
|
vertical-align: top;
|
|
margin: 0;
|
|
&.errors {
|
|
input[type=text], select {
|
|
border-color: @color-critical;
|
|
}
|
|
}
|
|
|
|
&.full-width {
|
|
padding: 0.5em;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
form dd:after {
|
|
display: block;
|
|
content: '';
|
|
}
|
|
|
|
form textarea {
|
|
height: auto;
|
|
}
|
|
|
|
form dd ul.errors {
|
|
list-style-type: none;
|
|
padding-left: 0.3em;
|
|
|
|
li {
|
|
color: @colorCritical;
|
|
padding: 0.3em;
|
|
}
|
|
}
|
|
|
|
form div.hint {
|
|
padding: 1em;
|
|
background-color: @tr-hover-color;
|
|
margin: 1em 0;
|
|
max-width: 65em;
|
|
font-size: 1em;
|
|
|
|
pre {
|
|
font-style: normal;
|
|
background-color: white;
|
|
margin: 0;
|
|
padding: 1em;
|
|
}
|
|
}
|
|
|
|
|
|
form {
|
|
#_FAKE_SUBMIT {
|
|
position: absolute;
|
|
left: -100%;
|
|
}
|
|
}
|
|
|
|
/** END of forms **/
|
|
|
|
/** php-diff **/
|
|
.Differences {
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
empty-cells: show;
|
|
}
|
|
|
|
.Differences thead {
|
|
display: none;
|
|
}
|
|
|
|
.Differences thead th {
|
|
text-align: left;
|
|
padding-left: 4 / 14 * 16em;
|
|
}
|
|
.Differences tbody th {
|
|
text-align: right;
|
|
width: 4em;
|
|
padding: 1px 2px;
|
|
border-right: 1px solid @gray-light;
|
|
background: @gray-lightest;
|
|
font-weight: normal;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.Differences tbody td {
|
|
width: 50%;
|
|
.preformatted();
|
|
word-break: break-all;
|
|
}
|
|
|
|
@color-diff-ins: #bfb;
|
|
@color-diff-del: #faa;
|
|
@color-diff-changed-old: #fdd;
|
|
@color-diff-changed-new: #efe;
|
|
|
|
.DifferencesSideBySide {
|
|
ins, del {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.ChangeInsert {
|
|
td.Left {
|
|
background: @gray-lighter;
|
|
}
|
|
td.Right {
|
|
background: @color-diff-ins;
|
|
}
|
|
}
|
|
|
|
.ChangeDelete {
|
|
td.Left {
|
|
background: @color-diff-del;
|
|
}
|
|
td.Right {
|
|
background: @gray-lighter;
|
|
}
|
|
}
|
|
|
|
.ChangeReplace {
|
|
td.Left {
|
|
background: @color-diff-changed-old;
|
|
del {
|
|
background: @color-diff-del;
|
|
}
|
|
}
|
|
|
|
td.Right {
|
|
background: @color-diff-changed-new;
|
|
ins {
|
|
background: @color-diff-ins;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.Differences .Skipped {
|
|
background: @gray-lightest;
|
|
}
|
|
|
|
.DifferencesInline .ChangeReplace .Left,
|
|
.DifferencesInline .ChangeDelete .Left {
|
|
background: #fdd;
|
|
}
|
|
|
|
.DifferencesInline .ChangeReplace .Right,
|
|
.DifferencesInline .ChangeInsert .Right {
|
|
background: #dfd;
|
|
}
|
|
|
|
.DifferencesInline .ChangeReplace ins {
|
|
background: #9e9;
|
|
}
|
|
|
|
.DifferencesInline .ChangeReplace del {
|
|
background: #e99;
|
|
}
|
|
/** END of php-diff **/
|
|
|
|
/** Custom font styling **/
|
|
textarea.smaller {
|
|
font-size: 0.833em;
|
|
max-width: 60em;
|
|
}
|
|
/** END of custom font styling **/
|