mirror of
https://github.com/Icinga/icingaweb2-module-businessprocess.git
synced 2025-12-25 00:59:34 -05:00
2acf611812
Nodes can be ordered as usually by display name, but now also in descending order. They can now also be ordered by state. This also applies to manually ordered processes. Though, changes to the manual order can only happen if the default order is active. If that's not the case, a note is shown and a way to reset the sort order.
1009 lines
21 KiB
Text
1009 lines
21 KiB
Text
a:focus {
|
|
outline: none;
|
|
text-decoration: underline;
|
|
&::before {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.action-bar {
|
|
float: left;
|
|
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: @text-color-on-icinga-blue;
|
|
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: @text-color-on-icinga-blue;
|
|
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;
|
|
}
|
|
}
|
|
|
|
.controls .sort-control {
|
|
float: right;
|
|
}
|
|
|
|
form a {
|
|
color: @icinga-blue;
|
|
}
|
|
|
|
div.bp {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
div.bp.sortable > .sortable-ghost {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
|
|
/* 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 summary {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
li {
|
|
i.icon-service {
|
|
opacity: .75;
|
|
}
|
|
|
|
i.icon-sitemap {
|
|
opacity: .8;
|
|
}
|
|
|
|
span.state-ball ~ i:last-of-type {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
// ghost style
|
|
&.sortable > li.sortable-ghost {
|
|
> details {
|
|
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 > .details: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 summary {
|
|
padding: .291666667em 0;
|
|
border-bottom: 1px solid @gray-light;
|
|
user-select: none;
|
|
|
|
> .icon:nth-child(1),
|
|
> .icon:nth-child(2) {
|
|
min-width: 1.3em; // 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-semilight;
|
|
font-weight: bold;
|
|
font-size: 1em;
|
|
color: @text-color-on-icinga-blue;
|
|
}
|
|
}
|
|
}
|
|
|
|
li.process.sortable-ghost details:not([open]) > summary {
|
|
border-bottom: none;
|
|
}
|
|
|
|
// TODO: Remove once support for Icinga Web 2.10.x is dropped
|
|
li.process details:not(.collapsible) {
|
|
&[open] > summary .expand-icon {
|
|
display: none;
|
|
}
|
|
|
|
&:not([open]) > summary .collapse-icon {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// subprocess style
|
|
li.process > details 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 summary,
|
|
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 details:not([open]) {
|
|
margin-bottom: (@vertical-tree-item-gap * 2);
|
|
|
|
> ul.bp {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// hover style
|
|
li.process:hover summary {
|
|
background-color: @tr-active-color;
|
|
}
|
|
li:not(.process):hover {
|
|
background-color: @tr-active-color;
|
|
}
|
|
|
|
li.process summary > .state-ball,
|
|
li:not(.process) > .state-ball {
|
|
border: .15em solid @body-bg-color;
|
|
|
|
&.size-s {
|
|
width: 7em/6em;
|
|
height: 7em/6em;
|
|
line-height: 7em/6em;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ** Node inspect broken files **/
|
|
ul.broken-files {
|
|
.rounded-corners();
|
|
padding: 1em;
|
|
margin: 1em 0;
|
|
border: 2px solid @state-warning;
|
|
font-size: 1.25em;
|
|
list-style: none;
|
|
|
|
li {
|
|
padding-left: 1em;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
// ** END Node inspect broken files **/
|
|
|
|
/** 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: @tr-hover-color;
|
|
}
|
|
|
|
.bp-link {
|
|
> a {
|
|
text-decoration: none;
|
|
color: @gray;
|
|
vertical-align: middle;
|
|
word-wrap: break-word;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
|
|
> span.header {
|
|
color: @text-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.dashboard-tile,
|
|
div.action {
|
|
width: 20em;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.action {
|
|
> a {
|
|
text-decoration: none;
|
|
color: @gray;
|
|
vertical-align: middle;
|
|
display: block;
|
|
padding: 1em;
|
|
word-wrap: break-word;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
|
|
&.addnew:hover {
|
|
background-color: @tr-hover-color;
|
|
}
|
|
|
|
> span.header {
|
|
color: @text-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/** END Dashboard **/
|
|
|
|
// State summary badges
|
|
.state-badges {
|
|
.state-badges();
|
|
|
|
&.state-badges li > ul > li:last-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
li > ul > li:first-child:not(:last-child) .state-badge {
|
|
border-right: 0;
|
|
}
|
|
}
|
|
|
|
// Node children count
|
|
.item-count {
|
|
font-size: 1em;
|
|
text-align: center;
|
|
color: @text-color-inverted;
|
|
}
|
|
|
|
div.bp .state-badges {
|
|
display: inline-block;
|
|
padding-top: 0;
|
|
}
|
|
|
|
td > a > .state-badges {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.state-badge {
|
|
font-size: .8em;
|
|
border: 1px solid @body-bg-color;
|
|
|
|
&.state-missing {
|
|
background: @gray-semilight;
|
|
color: @text-color-on-icinga-blue;
|
|
}
|
|
|
|
&.state-critical.handled, &.state-down.handled { background: @color-critical-handled; opacity: 1; }
|
|
&.state-unknown.handled { background-color: @color-unknown-handled; opacity: 1; }
|
|
&.state-warning.handled { background: @color-warning-handled; opacity: 1; }
|
|
}
|
|
|
|
/** END Badges **/
|
|
|
|
/** BEGIN Tiles **/
|
|
.tiles:after {
|
|
content:'';
|
|
display:block;
|
|
clear: both;
|
|
}
|
|
|
|
.tiles.sortable > .sortable-ghost {
|
|
opacity: 0.5;
|
|
border: .2em dashed @gray;
|
|
}
|
|
|
|
.tiles > div {
|
|
color: @text-color-on-icinga-blue;
|
|
width: 12em;
|
|
display: inline-block;
|
|
float: left;
|
|
vertical-align: top;
|
|
margin-right: 0.2em;
|
|
margin-bottom: 0.2em;
|
|
height: 6em;
|
|
cursor: pointer;
|
|
position: relative;
|
|
|
|
.item-count {
|
|
margin-right: .5em;
|
|
}
|
|
|
|
.state-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 @body-bg-color;
|
|
}
|
|
|
|
> a {
|
|
display: block;
|
|
text-decoration: none;
|
|
font-size: 0.7em;
|
|
text-align: center;
|
|
padding: 1em 1em 0;
|
|
font-weight: bold;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
&:hover {
|
|
box-shadow: 0 0 .2em @gray;
|
|
}
|
|
|
|
.actions {
|
|
opacity: 0.8;
|
|
margin: 0.5em 0.5em 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;
|
|
|
|
&.handled-icon {
|
|
display: inline-block;
|
|
margin-top: 0.15em;
|
|
float: right;
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
}
|
|
}
|
|
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: @color-critical; > a { text-shadow: 0 0 1px mix(#000, @color-critical, 40%); }}
|
|
> .critical.handled { background-color: @color-critical-handled; > a { text-shadow: 0 0 1px mix(#000, @color-critical-handled, 40%); }}
|
|
> .down { background-color: @color-critical; > a { text-shadow: 0 0 1px mix(#000, @color-critical, 40%); }}
|
|
> .down.handled { background-color: @color-critical-handled; > a { text-shadow: 0 0 1px mix(#000, @color-critical-handled, 40%); }}
|
|
> .unknown { background-color: @color-unknown; > a { text-shadow: 0 0 1px mix(#000, @color-unknown, 40%); }}
|
|
> .unknown.handled { background-color: @color-unknown-handled; > a { text-shadow: 0 0 1px mix(#000, @color-unknown-handled, 40%); }}
|
|
> .unreachable { background-color: @color-unknown; > a { text-shadow: 0 0 1px mix(#000, @color-unknown, 40%); }}
|
|
> .unreachable.handled { background-color: @color-unknown-handled; > a { text-shadow: 0 0 1px mix(#000, @color-unknown-handled, 40%); }}
|
|
> .warning { background-color: @color-warning; > a { text-shadow: 0 0 1px mix(#000, @color-warning, 40%); }}
|
|
> .warning.handled { background-color: @color-warning-handled; > a { text-shadow: 0 0 1px mix(#000, @color-warning-handled, 40%); }}
|
|
> .ok { background-color: @color-ok; > a { text-shadow: 0 0 1px mix(#000, @color-ok, 40%); }}
|
|
> .up { background-color: @color-ok; > a { text-shadow: 0 0 1px mix(#000, @color-ok, 40%); }}
|
|
> .pending { background-color: @color-pending; > a { text-shadow: 0 0 1px mix(#000, @color-pending, 40%); }}
|
|
> .missing { background-color: @gray-semilight; > a { color: @text-color-on-icinga-blue; }}
|
|
> .empty { background-color: @gray-semilight; > a { color: @text-color-on-icinga-blue; }}
|
|
}
|
|
|
|
.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 @body-bg-color;
|
|
|
|
&.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 transparent;
|
|
background: @icinga-blue;
|
|
color: @text-color-on-icinga-blue;
|
|
padding-right: 1.2em;
|
|
|
|
a {
|
|
color: @text-color-on-icinga-blue;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.breadcrumb li:not(:last-of-type) a:before {
|
|
.transition(border-left-color 2s 1s linear ~'!important');
|
|
border-left-color: @gray-light;
|
|
}
|
|
|
|
.breadcrumb li:not(:last-of-type) {
|
|
.transition(border-color 2s 1s linear ~'!important');
|
|
border-color: @gray-light;
|
|
}
|
|
.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: @text-color-on-icinga-blue; }
|
|
.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: @color-critical;
|
|
|
|
li {
|
|
font-weight: bold;
|
|
color: @text-color-on-icinga-blue;
|
|
padding: 0.3em 0.8em;
|
|
}
|
|
|
|
li a,
|
|
li .link-button {
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
ul.warning {
|
|
background-color: @color-warning;
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
/** Forms stolen from director **/
|
|
.content form {
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
.content form.inline {
|
|
margin: 0;
|
|
}
|
|
|
|
.invisible {
|
|
position: absolute;
|
|
left: -100%;
|
|
}
|
|
|
|
form.bp-form {
|
|
input[type=file] {
|
|
padding-right: 1em;
|
|
}
|
|
|
|
input[type=submit]:first-of-type {
|
|
border-width: 2px;
|
|
}
|
|
|
|
p.description {
|
|
padding: 1em 1em;
|
|
margin: 0;
|
|
font-style: italic;
|
|
width: 100%;
|
|
}
|
|
|
|
ul.form-errors {
|
|
margin-bottom: 0.5em;
|
|
|
|
ul.errors li {
|
|
background: @color-critical;
|
|
font-weight: bold;
|
|
padding: 0.5em 1em;
|
|
color: @text-color-on-icinga-blue;
|
|
}
|
|
}
|
|
|
|
input[type=text], input[type=password], input[type=file], textarea, select {
|
|
max-width: 36em;
|
|
min-width: 20em;
|
|
width: 100%;
|
|
}
|
|
|
|
label {
|
|
line-height: 2em;
|
|
}
|
|
|
|
dl {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
select option {
|
|
padding-left: 0.5em;
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
fieldset {
|
|
min-width: 36em;
|
|
}
|
|
|
|
dd input.related-action[type='submit'] {
|
|
display: none;
|
|
}
|
|
|
|
dd.active li.active input.related-action[type='submit'] {
|
|
display: inline-block;
|
|
}
|
|
|
|
dd.active {
|
|
p.description {
|
|
color: inherit;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
dd {
|
|
padding: 0.3em 0.5em;
|
|
margin: 0;
|
|
}
|
|
|
|
dt {
|
|
padding: 0.5em 0.5em;
|
|
margin: 0;
|
|
}
|
|
|
|
dt.active, dd.active {
|
|
background-color: @tr-active-color;
|
|
}
|
|
|
|
dt {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
min-width: 12em;
|
|
min-height: 2.5em;
|
|
width: 30%;
|
|
&.errors label {
|
|
color: @color-critical;
|
|
}
|
|
}
|
|
|
|
.errors label {
|
|
color: @color-critical;
|
|
}
|
|
|
|
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%;
|
|
}
|
|
}
|
|
|
|
dd:after {
|
|
display: block;
|
|
content: '';
|
|
}
|
|
|
|
textarea {
|
|
height: auto;
|
|
}
|
|
|
|
dd ul.errors {
|
|
list-style-type: none;
|
|
padding-left: 0.3em;
|
|
|
|
li {
|
|
color: @color-critical;
|
|
padding: 0.3em;
|
|
}
|
|
}
|
|
|
|
|
|
#_FAKE_SUBMIT {
|
|
position: absolute;
|
|
left: -100%;
|
|
}
|
|
}
|
|
|
|
/** END of forms **/
|
|
|
|
/* Form fallback styles, remove once <=2.9.5 support is dropped */
|
|
|
|
.icinga-controls {
|
|
input[type="file"] {
|
|
background-color: @low-sat-blue;
|
|
}
|
|
|
|
button[type="button"] {
|
|
background-color: @low-sat-blue;
|
|
}
|
|
}
|
|
|
|
form.icinga-form {
|
|
input[type="file"] {
|
|
flex: 1 1 auto;
|
|
width: 0;
|
|
}
|
|
|
|
button[type="button"] {
|
|
line-height: normal;
|
|
}
|
|
}
|
|
|
|
/* Form fallback styles end */
|
|
|
|
/** Custom font styling **/
|
|
textarea.smaller {
|
|
font-size: 0.833em;
|
|
max-width: 60em;
|
|
}
|
|
/** END of custom font styling **/
|