diff options
Diffstat (limited to '')
| -rw-r--r-- | public/css/common.less | 405 |
1 files changed, 405 insertions, 0 deletions
diff --git a/public/css/common.less b/public/css/common.less new file mode 100644 index 0000000..4cf5cfc --- /dev/null +++ b/public/css/common.less @@ -0,0 +1,405 @@ +/* Icinga DB Web | (c) 2020 Icinga GmbH | GPLv2 */ + +@exports: { + @iplWebAssets: "../lib/icinga/icinga-php-library"; +}; + +& > .content.full-width { + padding-left: 0; + padding-right: 0; + + .list-item, + .table-layout .table-row { + padding-left: 1em; + padding-right: 1em; + } +} + +& > .content.full-height { + padding-top: 0; + padding-bottom: 0; +} + +.plugin-output { + .monospace(); + word-break: break-word; +} + +div.show-more { + .clearfix(); + float: right; +} + +.state-ball.state-not-available { + .ball-solid(@gray-light); + .animate(pulse 1.5s infinite both); +} + +.icon-ball { + .ball(); + .ball-outline(@gray); + text-align: center; + + i:before { + margin-right: 0; + } +} + +.user-ball { + .ball(); + .ball-size-xl(); + .ball-solid(@gray-semilight); + font-weight: bold; + line-height: 1.75; + text-transform: uppercase; +} + +.usergroup-ball { + .ball(); + .ball-outline(@gray); + .ball-size-xl(); + line-height: 1.75; + text-transform: uppercase; +} + +.ack-badge { + text-transform: uppercase; + line-height: 1; + margin-top: -.25em; + align-self: flex-start; + + i { + vertical-align: baseline; + } +} + +.controls { + .box-shadow(0, 0, 0, 1px, @gray-lighter); + flex-shrink: 0; + position: relative; // Required for the host meta info control + z-index: 1; // The content may clip, this ensures the separator is always visible + + > :not(:only-child) { + margin-bottom: .5em; + } + + #object-meta-info { + margin-bottom: 0; + + .object-meta-info { + margin-bottom: .5em; + } + } + + &.overdue, + &.overdue .tabs li.active a, + &.overdue .object-meta-info-control { + background-color: @gray-lighter; + } + + .limit-control, + .view-mode-switcher, + .sort-control { + margin-left: .5em; + float: right; + } + + .toggle-switch { + margin-top: 0; + margin-bottom: 0; + } + + .item-list { + width: 100%; + + .list-item .main { + border-top: none; + } + + .list-item .visual { + width: auto; + margin-top: 0; + } + + .list-item .visual, + .list-item .main { + padding-bottom: .25em; + padding-top: .25em; + } + } + + .search-controls .continue-with { + margin-right: -.5em; + margin-left: .5em; + } + + .show-more { + margin-top: .25em; + } + + .notice { + display: none; + } + + // TODO: Remove once ipl-web v0.7.0 is required + &:not(.default-layout) { + .pagination-control { + float: left; + } + + .sort-control { + display: flex; + justify-content: flex-end; + + :not(.form-element) > label { + margin-right: 0; + } + + .control-button { + margin: 0; + } + } + + > :not(:only-child) { + margin-bottom: 0.5em; + } + + .search-suggestions { + margin-bottom: 2.5em; + } + + .search-controls { + clear: both; + display: flex; + min-width: 100%; + + .search-bar { + flex: 1 1 auto; + + & ~ .control-button:last-child { + margin-right: -.5em; + } + + & ~ .control-button { + margin-left: .5em; + } + } + } + } +} + +.content > h2:first-child, +.object-detail > h2:first-child { + margin-top: 0; +} + +.content.full-width > h2 { + margin-left: 1em / 1.333em; // 1em / h2 font size +} + +.object-detail .plugin-output { + .rounded-corners(.25em); + background-color: @gray-lighter; + padding: .5em; +} + +.object-detail .item-list { + &.action-list .list-item { + margin-right: -1em; + margin-left: -1em; + padding-right: 1em; + padding-left: 1em; + } + + .list-item:last-of-type .caption { + min-height: 1.5em; + max-height: 3em; + height: auto; + } +} + +.perfdata-wrapper { + svg { + width: 100%; + } + + svg:not(:last-child) { + margin-bottom: 1em; + } +} + +.text-center { + text-align: center; +} + +.text-muted { + color: @gray; +} + +.accompanying-text { + color: @text-color-light; + + .subject { + color: @text-color; + .user-select(all); + } +} + +.comment-detail { + > form, + > h2:not(:first-child) { + margin-top: 1em; + } +} + +.downtime-detail { + .downtime-progress { + margin-bottom: 1em; + } +} + +.footer { + display: flex; + .box-shadow(0, -1px, 0, 0, @gray-lighter); + color: @text-color-light; + + .selection-count { + flex: 1 1 auto; + + .selected-items { + font-size: 1.25em; + + &.hint { + opacity: 0.75; + } + } + } + + .status-bar, .selection-count { + font-size: .857em; + padding: .25em 1em; + line-height: 1.7; + } +} + +.status-bar { + margin-left: auto; + + .item-count { + font-size: 1.25em; + } + + .state-badges { + display: inline-block; + margin: 0 0 0 .417em; + } +} + +.multiselect-summary { + display: flex; + align-items: center; + justify-content: flex-start; + + // Donut + > div:first-child { + height: 4em; + width: 4em; + + > svg { + height: auto; + max-width: 100%; + } + } + + > .vertical-key-value { + padding: 0 .5em; + } +} + +.item-table { + &.table-layout { + &.hostgroup-table { + --columns: 2; + } + + &.servicegroup-table { + --columns: 1; + } + + &.user-table, // TODO: make them lists..... + &.usergroup-table { + --columns: 0; + } + } +} + +.hostgroup-table, +.servicegroup-table, +.usergroup-table, +.user-table { + .title .content > * { + display: block; + max-width: fit-content; + } + + .object-statistics-total { + width: 3.75em; + } +} + +.controls .hostgroup-table-row, +.controls .servicegroup-table-row, +.controls .usergroup-table-row, +.controls .user-table-row { + .title .content { + display: inline-flex; + align-items: center; + + > :first-child { + flex: 0 1 auto; + } + + > :last-child { + flex: 1 1 auto; + } + + .subject { + margin-right: .5em; + } + } + + .vertical-key-value { + br { + display: none; + } + + .key { + padding-left: .417em; + } + + .value { + vertical-align: middle; + } + } +} + +.history-list, +.objectHeader { + .visual.small-state-change .state-change { + padding-top: .25em; + } +} + +.comment-popup { + .comment-list .main { + // This is necessary to limit the visible comment lines + // because the popup is shown in detailed list mode only + .caption { + height: 3em; + } + } +} + +form[name="form_confirm_removal"] { + text-align: center; +} |