diff --git a/public/css/module.less b/public/css/module.less index c39163b..5fe5f5d 100644 --- a/public/css/module.less +++ b/public/css/module.less @@ -34,8 +34,7 @@ div.bp.sortable > .sortable-ghost { } - -/* New tree stuff START */ +/* TreeView */ @vertical-tree-item-gap: .5em; @@ -170,320 +169,6 @@ ul.bp { } } -/* New tree stuff END */ - - - -table.bp { - /* Business process table styling starts here */ - width: 100%; - margin: 0; - padding: 0; - color: @text-color; - border-collapse: collapse; - border-spacing: 0; - box-sizing: border-box; - font-size: 1em; - font-weight: normal; - table-layout: fixed; - - /* Reset all paddings and margins, just to be on the safe side */ - th, td { - padding: 0; - margin: 0; - } - - /* Left outer margin on nested BPs */ - table.bp { - - width: 99.6%; - margin-left: .4%; - margin-top: 4px; - - } - - .time-since { - display: none; - } -} - -table.bp th { - font-weight: bold; -} - -/* END of font settings */ - -/* No focus outline on our links, look ugly */ -table.bp a:focus { - outline: none; -} - -/* No link underlining */ -table.bp a, table.bp a:hover { - text-decoration: none; -} - -/* White font for all hovered objects */ -table.bp.hovered { - color: white; - - > tbody > tr > td > a > .time-since { - display: inline; - } -} - -table.bp.handled.hovered { - color: #0a0a0a; -} - -table.bp a { - color: inherit; -} - -/* Show a pointer when hovering th, highlighting is JS-triggered */ -table.bp tr th { - cursor: pointer; -} - -/* Expand / collapse styling */ -table.bp.process { - - position: relative; - - > tbody > tr:first-child > td:before { - content: '\e81d'; - font-family: ifont; - position: absolute; - font-size: 1.5em; - margin-left: -0.8em; - -webkit-transition: -webkit-transform 0.3s; - -moz-transition: -moz-transform 0.3s; - -o-transition: -o-transform 0.3s; - transition: transform 0.3s; - } - - &.collapsed { - - > tbody > tr:first-child > td:before { - -moz-transform:rotate(-90deg); - -ms-transform:rotate(-90deg); - -o-transform:rotate(-90deg); - -webkit-transform:rotate(-90deg); - transform:rotate(-90deg); - } - - table.bp, th span { - display: none; - } - } -} - -table.bp th > a, table.bp td > a, table.bp td > span { - display: block; - text-decoration: none; -} - -table.bp span.op { - width: 1.5em; - min-height: 1.5em; - margin-top: 1em; - display: block; - line-height: 2em; - -moz-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - -o-transform: rotate(-90deg); - -webkit-transform: rotate(-90deg); - transform: rotate(-90deg); -} - -table.bp .icon { - float: left; - margin-right: 0.4em; -} - -table.bp.node { - td:before { - font-family: ifont; - z-index: 1; - font-size: 1.25em; - position: absolute; - margin-left: 1.25em; - margin-top: 0.25em; - } -} - -table.bp.node.subtree td:before { - content: '\e80e'; -} - -table.bp.node.service td:before { - content: '\e840'; -} - -table.bp.node.host td:before { - content: '\e866'; -} - -/* Border defaults */ -table.bp { - border-width: 0; - border-style: solid; - border-color: transparent; -} - -table.bp tr, table.bp tbody, table.bp th, table.bp td, table.bp.node td > a, table.node.missing td > span { - border-width: 0; - border-style: inherit; - border-color: inherit; -} - -table.bp td > a, table.node.missing td > span { - height: 2.5em; - line-height: 2.5em; - padding-left: 0.5em; - display: block; -} - -table.bp.node td > a:last-child, table.node.missing td > span { - padding-left: 2.5em; - background-repeat: no-repeat; - background-position: 0.5em 0.5em; - border-left-width: 0.8em; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -table.bp.node.handled td > a:last-child, table.bp.node.ok td > a:last-child, - table.node.missing td > span, table.bp.node.up td > a:last-child -{ - border-left-width: 0.3em; - background-position: 1em 0.5em; - padding-left: 3em; -} - -table.bp th { - border-left-width: 0.8em; - width: 1.8em; -} - -table.process.missing th span { - display: none; -} - -table.bp.handled > tbody > tr > th, table.bp.ok > tbody > tr > th { - border-left-width: 0.3em; - width: 2em; -} - -/* Operator: upper line */ -table.bp.operator > tbody > tr:first-child > * { - border-top-width: 1px; - border-top-style: solid; -} - -table.bp.operator.hovered > tbody > tr:first-child > * { - border-top-style: solid; -} - -/* Set colors based on element state */ -table.bp { - &.ok { border-color: @colorOk; } - &.up { border-color: @colorOk; } - &.warning { border-color: @colorWarning; } - &.warning.handled { border-color: @colorWarningHandled; } - &.critical { border-color: @colorCritical; } - &.critical.handled { border-color: @colorCriticalHandled; } - &.down { border-color: @colorCritical; } - &.down.handled { border-color: @colorCriticalHandled; } - &.unknown { border-color: @colorUnknown; } - &.unknown.handled { border-color: @colorUnknownHandled; } - &.unreachable { border-color: @colorUnknown; } - &.unreachable.handled { border-color: @colorUnknownHandled; } - &.pending { border-color: @colorPending; } - &.missing { border-color: #ccc; } - &.hovered { - &.ok > tbody > tr > { - th, td > a { background-color: @colorOk; } - } - &.up > tbody > tr > { - th, td > a { background-color: @colorOk; } - } - &.warning > tbody > tr > { - th, td > a { background-color: @colorWarning; } - } - &.warning.handled > tbody > tr { - > th, > td > a { background-color: @colorWarningHandled; } - } - &.critical > tbody > tr > { - th, td > a { background-color: @colorCritical; } - } - &.critical.handled > tbody > tr > { - th, td > a { background-color: @colorCriticalHandled; } - } - &.down > tbody > tr > { - th, td > a { background-color: @colorCritical; } - } - &.down.handled > tbody > tr > { - th, td > a { background-color: @colorCriticalHandled; } - } - &.unknown > tbody > tr > { - th, td > a { background-color: @colorUnknown; } - } - &.unknown.handled > tbody > tr > { - th, td > a { background-color: @colorUnknownHandled; } - } - &.unreachable > tbody > tr > { - th, td > a { background-color: @colorUnknown; } - } - &.unreachable.handled > tbody > tr > { - th, td > a { background-color: @colorUnreachableHandled; } - } - &.pending > tbody > tr > { - th, td > a { background-color: @colorPending; } - } - &.missing > tbody > tr > { - th, td > a, td > span { background-color: #ccc; } - } - } -} - -/* Reduce font size after the 3rd level... */ -table.bp table.bp table.bp table.bp { - font-size: 0.95em; -} - -/* ...and keep it constant afterwards */ -table.bp table.bp table.bp table.bp table.bp { - font-size: 1em; -} -/* Transitions */ -div.knightrider table.bp { - - // That's ugly, I know - .transition(@val1, @val2) { - transition: @val1, @val2; - -moz-transition: @val1, @val2; - -o-transition: @val1, @val2; - -webkit-transition: @val1, @val2; - } - > tbody > tr > td > a:last-child, > tbody > tr > td > span, > tbody > tr > th { - // Fade out - .transition(color 0.5s 0.1s step-start, - background-color 0.5s 0.1s ease-out - ); - } - - &.hovered > tbody > tr { - > td > a:last-child, > td > span, > th { - // Fade in - .transition(color 0.0s 0.0s step-start, - background-color 0.0s 0.0s ease-out - ); - } - } -} - /** BEGIN Dashboard **/ .overview-dashboard { .header {