diff options
Diffstat (limited to '')
-rw-r--r-- | public/css/icinga/widgets.less | 666 |
1 files changed, 666 insertions, 0 deletions
diff --git a/public/css/icinga/widgets.less b/public/css/icinga/widgets.less new file mode 100644 index 0000000..3518cbe --- /dev/null +++ b/public/css/icinga/widgets.less @@ -0,0 +1,666 @@ +/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */ + +#announcements > ul { + background-color: @body-bg-color; + list-style: none; + margin: 0; + padding: 0; + + > li { + border-bottom: 1px solid @gray-lighter; + line-height: 1.5em; + padding: 0.5em 1em 0.5em 3em; + + position: relative; + + &:before { + color: @icinga-blue; + content: "\e811"; + font-family: 'ifont'; + + position: absolute; + left: 1.25em; + } + + &:last-child { + border-bottom: none; + } + + a { + color: @icinga-blue; + } + + .message { + display: inline-block; + vertical-align: middle; + padding-right: 1.5em; + font-size: 7/6em; + } + + p { + margin-bottom: 0; + } + } +} + +.acknowledge-announcement-control, +.application-state-acknowledge-message-control { + background: none; + border: none; + display: block; + margin-top: -0.75em; + + position: absolute; + right: .75em; + top: 50%; +} + +.application-state-acknowledge-message-control .link-button { + color: #fff; + + &:hover .icon-cancel { + color: @icinga-blue; + } +} + +#application-state-summary > div { + background-color: @color-critical; + color: @text-color-on-icinga-blue; + line-height: 1.5em; + padding: 0.5em 1em 0.5em 3em; + + position: relative; + + &:before { + content: "\e84d"; + font-family: 'ifont'; + + position: absolute; + text-align: center; + left: .4em; + padding: .5em; + width: 3em; + top: 0; + } + + > section { + margin-left: .5em; + } + + > form .icon-cancel:before { + color: @text-color-on-icinga-blue; + } +} + +.dashboard-link { + .clearfix(); + display: block; + max-width: 100%; + vertical-align: middle; + padding: 1em; + width: 36em; + + &:hover { + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + + -webkit-box-shadow: 0 0 0.5em 0 rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 0 0.5em 0 rgba(0, 0, 0, 0.2); + box-shadow: 0 0 0.5em 0 rgba(0, 0, 0, 0.2); + + background-color: @tr-hover-color; + text-decoration: none; + } +} + +.dashboard.content > .container { + overflow-x: auto; +} + +.link-meta { + display: table-cell; + vertical-align: middle; +} + +.link-label { + font-weight: @font-weight-bold; +} + +.link-description { + color: @text-color-light; +} + +.link-icon { + display: table-cell; + padding-right: .5em; + vertical-align: middle; + text-align: center; + + > i { + font-size: 3em; + opacity: 0.7; + line-height: 1.5; + + &:before { + min-width: 1.25em; + } + } + + > img { + width: 3em; + height: 3em; + margin-right: .6em; + } +} + +table.historycolorgrid { + font-size: 1.5em; +} + +table.historycolorgrid th { + width: 1em; + height: 1em; + margin: 0.5em; + font-size: 0.55em; + font-weight: bold; +} + +table.historycolorgrid td { + width: 1em; + height: 1em; + margin: 1em; +} + +table.historycolorgrid td:hover { + opacity: 0.5; +} + +table.historycolorgrid td.weekday { + font-size: 0.55em; + font-weight: bold; + width: 2.5em; + opacity: 1.0; +} + +table.historycolorgrid a, table.historycolorgrid span { + .rounded-corners(0.2em); + margin: 0; + text-decoration: none; + display: block; + width: 1.1em; + height: 1.1em; +} + +table.historycolorgrid a:hover { + text-decoration: none; +} + +table.multiselect tr[href] td { + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; +} + +#main div.filter { + .search.search-input { + width: 8em; + } + + form.editor { + input[type=text], select { + width: 12em; + height: 2em; + line-height: 1; + } + + ul.tree li.active { + background-color: @gray-lightest; + } + + button { + padding: .5em; + border: none; + background: none; + color: @text-color; + + &:hover, &:focus { + color: @icinga-blue; + } + } + + .buttons { + margin-left: 25em; + padding: .25em 0; + } + + .buttons input:not(:last-child) { + margin-right:.5em; + } + + ul.tree { + .filter-operator { + width: 5em; + } + + .new-filter { + background: #ffb; + } + + .filter-rule { + width: 4em; + } + } + } +} + +form.role-form { + &.icinga-form .control-label-group { + width: 20em; + } + + .control-label-group em { + color: @text-color-light; + font-style: normal; + } + + .unrestricted-role { + text-decoration: line-through; + } + + .control-label > * { + display: inline-block; + } + + summary { + border-bottom: 1px solid @gray-light; + .user-select(none); + cursor: pointer; + + font-weight: @font-weight-bold; + margin: 0.556em 0 0.333em; + font-size: 1.167em; + + display: flex; + align-items: baseline; + .privilege-preview { + flex: 1 1 auto; + } + + > :first-child { + display: inline-block; + width: 20em / 1.167em; // element label width / summary font-size + } + + > :nth-last-child(1), + > :nth-last-child(2) { + font-size: .75em; + opacity: .6; + } + + .privilege-preview .icon { + &.granted { + color: @color-granted; + } + + &.refused { + color: @color-refused; + } + + &.restricted { + color: @color-restricted; + } + } + } + + .collapsible { + summary em { + font-size: .857em; + font-weight: normal; + color: @text-color-light; + } + + h4 { + display: inline-block; + width: 20em; + margin-top: 1.5em; + padding-right: .5625em; + text-align: right; + + & ~ i { + display: inline-block; + width: 2.625em; + margin-right: 1em; + text-align: center; + + &.icon-ok { + color: @color-granted; + } + + &.icon-cancel { + color: @color-refused; + } + } + } + } +} + +ul.tree select:first-of-type { /* ?? */ + margin-bottom: 0.3em; + margin-left: 2em; +} + +ul.tree { + padding: 0; + margin: 0; + padding-top: .5em; +} + +ul.tree ul { + padding-left: 1em; +} + +ul.tree li { + margin: 0; + list-style-type: none; + position: relative; + padding: 0; +} + +ul.tree li .handle { + background-image: url('../img/tree/tree-minus.gif'); + background-repeat: no-repeat; + display: inline-block; + position: absolute; + width: 1.5em; + height: 2em; + left: 0em; + background-position: center center; + z-index: 1; + cursor: pointer; +} + +ul.tree li.collapsed > .handle { + background-image: url('../img/tree/tree-plus.gif'); +} + +ul.tree li.collapsed > ul { + display: none; +} + +ul.tree li::before, ul.tree li::after { + content: ''; + position: absolute; + right: auto; + left: -0.2em; + border-color: @gray-light; + border-style: dotted; + border-width: 0; +} + +/* This is the left vertical line */ +ul.tree li::before { + border-left-width: 1px; + top: -.5em; + width: 1em; + height: 2.5em; + bottom: 1em; +} + +/* This is the horizontal dash in front of each item */ +ul.tree li::after { + border-top-width: 1px; + top: 1em; + width: 2em; + height: 1em; +} + +/* Stop left vertical line at "mid-height" after last nodes (at each level) */ +ul.tree li:last-child::before { + height: 1.5em; +} + +/* No border for the root element - there must be only ONE root */ +ul.tree > li::before, ul.tree > li::after { + display: none; +} + +/* No connector before (each) root element */ +ul.tree > ul > li::before, ul.tree > ul > li::after { + border: 0; +} + +ul.tree li a { + display: inline-block; + line-height: 2em; + padding: 0 .5em; + text-decoration: none; + color: @gray; + background-repeat: no-repeat; + background-position: 0.8em 0.4em; +} + +ul.tree li a.error { + color: @color-critical-handled; +} + +ul.tree li a:hover { + color: @text-color; + text-decoration: underline; +} + +ul.tree li a.error:hover { + color: @color-critical; +} + +/* charts should grow as much as possible but never beyond the current viewport's size */ +.svg-container-responsive { + padding: 1.5em; + height: 80vh; +} + +.tipsy .tipsy-inner { + // overwrite tooltip max width, we need them to grow bigger + font-family: @font-family; + font-size: @font-size-small; + max-width: 300px; + text-align: left; + background-color: rgba(0,0,0,0.8); +} + +.progress-label span { + font-size: 1.5em; + .animate(blink 1.4s infinite both); + + &:nth-child(2) { + animation-delay: .2s; + } + + &:nth-child(3) { + animation-delay: .4s; + } +} + +.flyover:not(.flyover-expanded) .flyover-content { + display: none; +} + +.flyover { + position: relative; + + .flyover-content { + background-color: @body-bg-color; + border: 1px solid; + border-color: @gray-lighter; + box-shadow: 0 0 .5em 0 rgba(0, 0, 0, 0.2); + position: absolute; + padding: @vertical-padding @horizontal-padding; + .rounded-corners(); + } + + &.flyover-arrow-top .flyover-content:before { + background: @body-bg-color; + border-left: 1px solid @gray-lighter; + border-top: 1px solid @gray-lighter; + content: ""; + height: 1em; + -ms-transform: rotate(45deg); + transform: rotate(45deg); + width: 1em; + + position: absolute; + left: 6px; + top: -7px; + } + + &.flyover-right .flyover-content { + left: auto; + right: 0; + } + + &.flyover-arrow-top.flyover-right .flyover-content:before { + left: auto; + right: 6px; + } +} + +.slice-state-ok { + stroke: @color-ok; + background: @color-ok; +} + +.slice-state-warning-handled { + stroke: @color-warning-handled; + background: @color-warning-handled; +} + +.slice-state-warning { + stroke: @color-warning; + background: @color-unreachable-handled; +} + +.slice-state-critical-handled { + stroke: @color-critical-handled; + background: @color-critical-handled; +} + +.slice-state-critical { + stroke: @color-critical; + background: @color-critical; +} + +.slice-state-unknown-handled { + stroke: @color-unknown-handled; + background: @color-unknown-handled; +} + +.slice-state-unknown { + stroke: @color-unknown; + background: @color-unknown; +} + +.slice-state-unreachable-handled { + stroke: @color-unreachable-handled; + background: @color-unreachable-handled; +} + +.slice-state-unreachable { + stroke: @color-unreachable; + background: @color-unreachable; +} + +.slice-state-pending { + stroke: @color-pending; + background: @color-pending; +} + +.slice-state-not-checked { + stroke: @gray-light; + background: @gray-light; +} + +.donut { + width: 22em; + height: 22em; + min-width: 11.5em; + display: table; +} + +.donut-graph { + width: 22em; + height: 22em; +} + +.donut-label { + font-weight: bold; + fill: @text-color; +} + +.donut-label { + margin-top: -12.5em; + text-align: center; +} + +.donut-label-big { + color: @gray-light; + .fg-stateful(); + font-size: 6em; + line-height: 0; + text-anchor: middle; + &:hover { + text-decoration: none; + } +} + +.donut-label-small { + fill: @text-color; + font-size: 1.2em; + text-anchor: middle; + -moz-transform: translateY(0.35em); + -ms-transform: translateY(0.35em); + -webkit-transform: translateY(0.35em); + transform: translateY(0.35em); +} + +.donut-container { + float: left; + + &:not(:last-of-type) { + margin-right: 10em; + } +} + +.dashboard .donut-container .donut-legend { + margin-left: auto; +} + +.donut-legend { + width: 50%; + padding: 0; + margin-left: 18em; + list-style-type: none; + + li { + vertical-align: middle; + + &:not(:last-child) { + margin-bottom: .5em; + } + + .badge { + font-weight: bold; + margin-right: .5em; + vertical-align: initial; + } + } +} + +html.no-js .progress-label { + display: none; +} + |