diff options
Diffstat (limited to 'public/css')
40 files changed, 2771 insertions, 0 deletions
diff --git a/public/css/common.less b/public/css/common.less new file mode 100644 index 0000000..777cc33 --- /dev/null +++ b/public/css/common.less @@ -0,0 +1,357 @@ +/* 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 { + padding-left: 1em; + padding-right: 1em; + } +} + +& > .content.full-height { + padding-top: 0; + padding-bottom: 0; +} + +.plugin-output { + .monospace(); + word-break: break-word; +} + +.empty-state { + color: @gray-semilight; +} + +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; + } +} + +.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; + } + } + + .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; + } +} + +.hostgroup-list.minimal, +.servicegroup-list.minimal { + .col { + padding: 0; + } + + .title br { + display: none; + } + + .vertical-key-value { + br { + display: none; + } + + .key { + padding-left: .417em; + } + + .value { + vertical-align: middle; + } + } +} + +.hostgroup-list > col.object-statistics-graph, +.servicegropup-list > col.object-statistics-graph { + padding-right: .25em; +} + +.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; + } + } +} diff --git a/public/css/form/schedule-service-downtime-form.less b/public/css/form/schedule-service-downtime-form.less new file mode 100644 index 0000000..a65264d --- /dev/null +++ b/public/css/form/schedule-service-downtime-form.less @@ -0,0 +1,21 @@ +.downtime-duration { + > label { + display: flex; + flex: 1 1 auto; + flex-flow: row-reverse; + + input { + flex: 1 1 auto; + } + + span { + margin-left: .5em; + padding: .5625em 0; + line-height: 1.1em; + } + + &:not(:last-child) { + margin-right: 1.5em; + } + } +} diff --git a/public/css/list/action-list.less b/public/css/list/action-list.less new file mode 100644 index 0000000..5bb08f4 --- /dev/null +++ b/public/css/list/action-list.less @@ -0,0 +1,14 @@ +.action-list { + [data-action-item]:hover { + background-color: @tr-hover-color; + cursor: pointer; + } + + [data-action-item].active { + background-color: @tr-active-color; + } + + &[data-icinga-multiselect-url] * { + user-select: none; + } +} diff --git a/public/css/list/comment-list.less b/public/css/list/comment-list.less new file mode 100644 index 0000000..46b194d --- /dev/null +++ b/public/css/list/comment-list.less @@ -0,0 +1,50 @@ +// Style + +// Layout + +.comment-list:not(.detailed) .list-item { + .title > i:first-child { + margin-right: 0; + } + + .title > .subject + .badge, + .title > .badge + .subject, + .title > .badge:last-of-type { + margin-left: 0; + } + + .title a { + &:not(.subject) { + .text-ellipsis(); + } + } + + .title .subject:not(:last-child) { + margin-left: 0; + } + + .title .subject:nth-child(3):last-child { + margin-left: 0; + } +} + +.comment-list.minimal .list-item { + .user-ball { + font-size: .857em; + height: 1.75em; + line-height: 1.5em; + width: 1.75em; + } +} + +.comment-list.detailed .list-item { + .title > .subject:nth-child(3), + .title > .badge + .subject:last-child { + margin-left: .3em; + } + + .caption { + max-height: 4.5em; + white-space: normal; + } +} diff --git a/public/css/list/downtime-list.less b/public/css/list/downtime-list.less new file mode 100644 index 0000000..222bc7e --- /dev/null +++ b/public/css/list/downtime-list.less @@ -0,0 +1,93 @@ +// Style + +.downtime-list .list-item, +.downtime-detail .list-item { + .progress { + .progress-bar { + background-color: @color-ok; + } + } + + .visual { + background-color: @gray-lighter; + } + + .main { + border-top: 1px solid @gray-light; + } + + &:first-child .main { + border-top: none; + + .progress-bar { + border-top: 1px solid @gray-light; + } + } + + &.in-effect { + .visual { + background-color: @color-ok; + color: @text-color-on-icinga-blue; + } + + .main { + padding-top: 0; // If active the progress bar represents the padding top + } + } +} + +// Layout + +.downtime-list .list-item { + .caption > * { + display: inline; + } +} + +.downtime-list .list-item, +.downtime-detail .list-item { + .progress { + height: 2px; + margin-bottom: ~"calc(.5em - 2px)"; + min-width: 100%; + position: relative; + + .progress-bar { + height: 100%; + max-width: 100%; + } + } + + &:first-child .main .progress-bar { + height: ~"calc(100% + 1px)"; // +1px due to the border added exclusively for the first item + } + + .visual { + justify-content: center; + flex-shrink: 0; + line-height: 1em; + margin-right: .5em; + padding: .5em .25em; + text-align: center; + width: 6em; + + strong { + font-size: 1.5em; + line-height: 1em; + } + } +} + +.item-list.downtime-list.minimal .list-item { + .visual { + display: block; + line-height: 1.5; + width: 8em; + white-space: nowrap; + + strong { + display: inline-block; + font-size: 1em; + } + } +} diff --git a/public/css/list/item-list.less b/public/css/list/item-list.less new file mode 100644 index 0000000..cd39aac --- /dev/null +++ b/public/css/list/item-list.less @@ -0,0 +1,239 @@ +// Style + +.item-list { + list-style-type: none; + + > .empty-state { + .rounded-corners(); + background-color: @gray-lighter; + } + + .show-more:hover, + .page-separator:hover { + background: none; + } + + > .show-more a { + .rounded-corners(.25em); + background: @low-sat-blue; + text-align: center; + + &:hover { + opacity: .8; + text-decoration: none; + } + } + + > .page-separator:after { + content: ""; + display: block; + width: 100%; + height: 1px; + background: @gray; + align-self: center; + margin-left: .25em; + } + + > .page-separator a { + color: @gray; + font-weight: bold; + + &:hover { + text-decoration: none; + } + } + + > .page-separator + .list-item .main { + border-top: none; + } +} + +// Layout + +.item-list { + margin: 0; + padding: 0; + + .list-item { + display: flex; + + &.show-more a { + flex: 1; + margin: 1.5em 0; + padding: .5em 0; + } + + .main { + flex: 1 1 auto; + padding: .5em 0; + width: 0; + margin-left: .5em; + } + + .visual { + display: flex; + align-items: center; + flex-direction: column; + } + + .caption { + height: 3em; + text-overflow: ellipsis; + overflow: hidden; + + .line-clamp(); + + img { + max-height: 1em; + } + } + + header { + display: flex; + align-items: flex-start; + justify-content: space-between; + } + + footer { + display: flex; + justify-content: space-between; + } + } + + > .empty-state { + margin: 0 1em; + padding: 1em; + text-align: center; + } +} + +.item-list.minimal { + > .empty-state { + padding: .25em; + } + + .list-item { + header { + max-width: 100%; + } + + .visual { + width: 2.2em; + } + + .check-attempt { + display: none; + } + + .title { + p { + display: inline; + + & + p { + margin-left: .417em; + } + } + } + + .caption { + flex: 1 1 auto; + height: 1.5em; + margin-right: 1em; + width: 0; + + .line-clamp("reset"); + } + + .caption, + .caption .plugin-output { + .text-ellipsis(); + } + } +} + +.item-list:not(.detailed) .list-item { + .title { + display: inline-flex; + align-items: baseline; + white-space: nowrap; + min-width: 0; + + > * { + margin: 0 .28125em; // 0 calculated width + + &:first-child { + margin-left: 0; + } + + &:last-child { + margin-right: 0; + } + } + + .subject { + .text-ellipsis(); + } + } +} + +.item-list.detailed .list-item { + .title { + word-break: break-word; + -webkit-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; + } + + .caption { + display: block; + height: auto; + max-height: 7.5em; /* 5 lines */ + position: relative; + + .line-clamp(4) + } +} + +.item-list { + .icon-image { + width: 3em; + height: 3em; + text-align: center; + margin-top: .5em; + margin-left: .5em; + overflow: hidden; + + img { + max-height: 100%; + max-width: 100%; + height: auto; + width: auto; + } + } + + &.minimal { + .icon-image { + height: 2em; + width: 2em; + line-height: 2; + } + } +} + +.controls .list-item:not(:last-child) { + margin-bottom: .5em; +} + +.controls .item-list:not(.detailed):not(.minimal) .list-item { + .plugin-output { + line-height: 1.5 + } + + .caption { + height: 2.5em; + } +} + +.controls .item-list.minimal .icon-image { + margin-top: 0; +} diff --git a/public/css/list/item-table.less b/public/css/list/item-table.less new file mode 100644 index 0000000..c307416 --- /dev/null +++ b/public/css/list/item-table.less @@ -0,0 +1,176 @@ +// Style + +.item-table { + padding: 0; + + thead { + th { + font-weight: normal; + + // Border styles start + form { + padding: 0 0 0 1px; + border-bottom: 1px solid @gray-light; + background: linear-gradient(to top, @gray-light, @body-bg-color); + + button { + background: @body-bg-color; + } + } + &:first-child form { + padding-left: 0; + } + // Border styles end + } + + button { + .appearance(none); + border: none; + background: none; + padding: .1em .5em; + + text-align: left; + color: @text-color-light; + + > .icon { + opacity: 0; + width: 0; + transition: opacity .25s linear, width .25s ease; + } + &:hover .icon, + &:focus .icon, + &.active .icon { + opacity: 1; + width: 1em; + } + + &.active { + font-weight: bold; + } + } + } + + > .empty-state, + > tbody > tr:first-child .empty-state { + .rounded-corners(); + background-color: @gray-lightest; + } + + .list-item:not(:last-child) > *:not(.visual), + .row-item:not(:last-child) { + border-bottom: 1px solid @gray-light; + } +} + +@media print { + .list-item.page-break-follows { + &:not(:last-child) > *:not(.visual) { + border-bottom: none; + } + } +} + +// Layout + +table.item-table { + table-layout: fixed; +} + +.item-table { + display: table; + width: 100%; + margin: 0; + + thead { + position: sticky; + top: 0; + + th { + // That's layout, yes, controls overflow when scrolling + padding: 1em 0 0 0; + background: @body-bg-color; + } + + th button { + width: 100%; + display: inline-flex; + align-items: baseline; + justify-content: space-between; + + span { + .text-ellipsis(); + } + } + } + + th.has-visual { + width: 3em; + } + + tbody td { + .text-ellipsis(); + vertical-align: top; + } + + .list-item { + display: table-row; + } + + .list-item > .col { + display: table-cell; + vertical-align: middle; + white-space: nowrap; + + &:not(:last-child) { + padding-right: 1em; + } + + &.title { + .text-ellipsis(); + width: 100%; + } + + > * { + display: inline-block; + + &:not(:last-child) { + margin-right: .5em; + } + } + } + + .list-item > *:not(.visual) { + padding: .5em 0; + } + + .list-item > .visual { + display: table-cell; + padding: .5em 1em 0 0; + } + + > .empty-state, + > tbody > tr:first-child .empty-state { + margin: 0 1em; + padding: 1em; + text-align: center; + } +} + +.content.full-width .item-table .list-item { + // The .list-item itself can't have padding because of `display:table-row` + &:before, &:after { + display: inline-block; + content: '\00a0'; + width: 1em; + } +} + +#layout.twocols table.item-table { + > thead > tr > th, + > tbody > tr > td { + &:nth-child(n+6) { + display: none; + width: 0; + } + } +} diff --git a/public/css/list/list-item.less b/public/css/list/list-item.less new file mode 100644 index 0000000..2370b59 --- /dev/null +++ b/public/css/list/list-item.less @@ -0,0 +1,139 @@ +// Style + +.list-item { + color: @text-color-light; + + &.overdue { + background-color: @gray-lighter; + } + + &.overdue header > *:not(time), + &.overdue .caption { + opacity: 0.6; + } + + &.overdue time { + .rounded-corners(); + background-color: @color-critical; + color: @text-color-on-icinga-blue; + } + + &:not(:first-child) > .main { + border-top: 1px solid @gray-light; + } + + &:not(:first-child) .visual { + margin-top: 1px; + } + + .caption { + i { + opacity: 0.8; + } + + a { + color: @text-color; + } + } + + .title { + span.subject, + .state-text { + color: @text-color; + } + + .state-text { + text-transform: uppercase; + } + + a { + color: @text-color; + font-weight: bold; + + &:hover { + color: @icinga-blue; + text-decoration: none; + } + } + } + + footer { + .status-icons { + color: @gray-light; + } + } +} + +@media print { + .list-item.page-break-follows + .list-item { + .main { + border-top: 1px solid transparent; + } + } +} + +// Layout + +.list-item { + &.overdue time { + margin-right: -.5em; + padding: 0 0.5em; + } + + .visual { + padding: .5em 0; + width: 2.5em; + + .check-attempt { + margin-top: .5em; + } + } + + .caption { + p { + display: inline-block; + } + + &.plugin-output, .plugin-output { + font-size: 11/12em; + line-height: 1.5*12/11em; + } + } + + .title { + margin-right: 1em; + + p { + margin: 0; + } + } + + time { + white-space: nowrap; + } + + footer { + > * { + font-size: .857em; + line-height: 1.5*.857em; + } + + .status-icons { + display: flex; + align-items: center; + } + + .performance-data { + .inline-pie { + display: inline-block; + line-height: 1.5*.857em; + height: 1em; + width: 1em; + + &:not(:last-child) { + margin-right: .209em; + } + } + } + } +} diff --git a/public/css/list/state-item-table.less b/public/css/list/state-item-table.less new file mode 100644 index 0000000..aece148 --- /dev/null +++ b/public/css/list/state-item-table.less @@ -0,0 +1,34 @@ +// Layout + +#layout.wide-layout .item-table th.has-plugin-output { + width: 50em; +} +#layout.default-layout .item-table th.has-plugin-output { + width: 30em; +} +#layout.compact-layout .item-table th.has-plugin-output { + width: 10em; +} + +#layout.twocols table.item-table { + .has-plugin-output { + width: auto; + } +} + +table.item-table { + th.has-visual { + button { + display: inline-flex; + justify-content: center; + } + + span > .icon:before { + margin: 0; + } + } + + .visual { + text-align: center; + } +} diff --git a/public/css/list/state-row-item.less b/public/css/list/state-row-item.less new file mode 100644 index 0000000..31c7e5a --- /dev/null +++ b/public/css/list/state-row-item.less @@ -0,0 +1,42 @@ +// Style + +.row-item { + .plugin-output { + overflow: hidden; + .line-clamp(); + } + + .subject { + font-weight: bold; + } +} + +// Layout + +.row-item { + .performance-data { + overflow: hidden; + .line-clamp(2); + white-space: normal; + margin-left: -.25em; + + .inline-pie { + display: inline-block; + width: 1em; + height: 1em; + margin-left: .25em; + } + } + + .has-icon-images { + height: 2.5em; + vertical-align: middle; + + img { + max-height: 100%; + max-width: 100%; + height: auto; + width: auto; + } + } +} diff --git a/public/css/list/user-list.less b/public/css/list/user-list.less new file mode 100644 index 0000000..078d1b9 --- /dev/null +++ b/public/css/list/user-list.less @@ -0,0 +1,26 @@ +// Layout + +.controls .user-list, +.controls .usergroup-list { + .usergroup-ball, + .user-ball { + height: 1.5em; + width: 1.5em; + line-height: ~"calc(1.5em - 4px)"; + display: block; + } + + .title br { + display: none; + } + + .list-item { + & > .visual { + padding-top: 0.25em; + } + + & > .col { + padding: .25em 0; + } + } +} diff --git a/public/css/markdown.less b/public/css/markdown.less new file mode 100644 index 0000000..bebede5 --- /dev/null +++ b/public/css/markdown.less @@ -0,0 +1,80 @@ +.markdown { + > p, + > hr, + > ul, + > ol, + > table, + > pre, + > blockquote, + li > ul, + li > ol { + margin: 1em 0 1em 0; + + &:first-child { + margin-top: 0; + } + } + + p { + &:last-child { + margin-bottom: 0; + } + } + + img { + max-width: 100%; + height: auto; + } + + a { + border-bottom: 1px dotted @text-color-light; + + &:hover, &:focus { + border-bottom: 1px solid @text-color; + text-decoration: none; + } + + img { + max-width: 32em; + } + + &.with-thumbnail { + img { + padding: 1px; + } + + &:hover, &:focus { + img { + padding: 0; + } + } + } + } + + table { + border-collapse: collapse; + + th { + text-align: left; + background-color: @gray-lighter; + } + + &, th, td { + border: 1px solid; + border-color: @gray-light; + } + } +} + +.markdown.inline { + img { + max-height: 100%; + vertical-align: middle; + } + + a.with-thumbnail { + &, &:hover, &:focus { + border-bottom: none; + } + } +} diff --git a/public/css/mixin/progress-bar.less b/public/css/mixin/progress-bar.less new file mode 100644 index 0000000..532ca2c --- /dev/null +++ b/public/css/mixin/progress-bar.less @@ -0,0 +1,179 @@ +.progress-bar() { + &.progress-bar { + .above, + .below { + list-style-type: none; + position: relative; + margin: 0; + } + + .above { + padding: ~"calc(1em + 1px) 10%"; + } + + .below { + padding: 1.25em 10%; + } + + .positioned { + position: absolute; + } + + :not(.positioned).end .bubble { + // to move the center of the bubble to the end of the wrapper (for check-statistics end bubble only). + transform: translate(50%, 0); + } + + .bubble { + .rounded-corners(.25em); + background-color: @body-bg-color; + border: 1px solid; + border-color: @gray-light; + position: relative; + box-shadow: 0 0 1em 0 rgba(0, 0, 0, .1); + padding: .25em .5em; + text-align: center; + width: auto; + // The wrapper of .bubble is dynamically moved to the left based on the value of the progress bar + // This moves the center of the bubble to the beginning of the wrapper regardless of the size of the content. + transform: translate(-50%, 0); + z-index: 1; + + > * { + position: relative; + z-index: 2; + } + + &:hover { + z-index: 5; + } + + &:before { + background-color: @body-bg-color; + border-bottom: 1px solid @gray-light; + border-right: 1px solid @gray-light; + content: ""; + display: block; + height: 1em; + margin-left: -.5em; + transform: rotate(45deg); + width: 1em; + z-index: 1; + + position: absolute; + bottom: -.5em; + left: 50%; + } + + &.upwards:before { + bottom: auto; + top: -.5em; + transform: rotate(225deg); + } + + &.right { + // This is (.675em (:before placement) + .5em (half :before width)) + 1px (:before border) + transform: translate(~"calc(-1.175em - 1px)", 0); + } + + &.right:before { + bottom: auto; + left: 1.175em; + top: -.5em; + } + + &.left { + // entire width (moves the right border in place of the left) + (.675em (:before placement) + .5em (half :before width)) + 1px (:before border) + transform: translate(~"calc(-100% + 1.175em + 1px)", 0); + } + + &.left:before { + bottom: auto; + left: auto; + right: .675em; + top: -.5em; + } + } + + .above .positioned { + bottom: 0; + } + + .below .positioned { + top: 0; + } + + .vertical-key-value { + .key { + white-space: nowrap; + } + + .value { + white-space: nowrap; + font-size: 1em; + line-height: 1; + } + } + + .timeline { + .rounded-corners(.5em); + background-color: @gray-lighter; + height: 1em; + margin: 1em 0; + position: relative; + width: 100%; + z-index: 1; + + .marker { + .rounded-corners(50%); + background-color: @gray-light; + height: .857em; + margin-left: -.857/2em; + margin-top: -1/12em; + width: .857em; + z-index: 2; + + position: absolute; + top: 2/12em; + + &.now { + background-color: @gray; + } + + &.start, + &.end { + background-color: @icinga-blue; + } + } + } + + .timeline-overlay { + height: 100%; + opacity: .6; + position: absolute; + + &:before, + &:after { + content: ""; + display: block; + height: 1em; + width: .5em; + + position: absolute; + top: 0; + } + + &:before { + border-bottom-left-radius: .5em; + border-top-left-radius: .5em; + left: -.5em; + } + + &:after { + border-bottom-right-radius: .5em; + border-top-right-radius: .5em; + right: -.5em; + } + } + } +} diff --git a/public/css/mixin/state-badges.less b/public/css/mixin/state-badges.less new file mode 100644 index 0000000..61116cf --- /dev/null +++ b/public/css/mixin/state-badges.less @@ -0,0 +1,31 @@ +.state-badges() { + &.state-badges { + padding: 0; + + ul { + padding: 0; + } + + li { + display: inline-block; + } + + li > ul > li:first-child:not(:last-child) .state-badge { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + + li > ul > li:last-child:not(:first-child) .state-badge { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + + > li:not(:last-child) { + margin-right: .25em; + } + + li > ul > li:last-child { + margin-left: 1px; + } + } +} diff --git a/public/css/mixins.less b/public/css/mixins.less new file mode 100644 index 0000000..c6607c2 --- /dev/null +++ b/public/css/mixins.less @@ -0,0 +1,22 @@ +/* Icinga DB Web | (c) 2020 Icinga GmbH | GPLv2 */ + +.line-clamp(@numOfLines: 2) when (@numOfLines > 1) { + display: -webkit-box; + -webkit-line-clamp: @numOfLines; + -webkit-box-orient: vertical; +} +.line-clamp(@numOfLines: 2) when (@numOfLines = "reset") { + display: block; // Would have used "revert", but browser support is still poor and it's not final yet + -webkit-line-clamp: initial; + -webkit-box-orient: initial; +} + +.text-ellipsis() { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.monospace() { + font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; +} diff --git a/public/css/view/service-grid.less b/public/css/view/service-grid.less new file mode 100644 index 0000000..41400e5 --- /dev/null +++ b/public/css/view/service-grid.less @@ -0,0 +1,60 @@ +.service-grid-table { + width: 0; + white-space: nowrap; + + td { + color: @gray-light; + padding: 0.2em; + text-align: center; + width: 1em; + } + + .rotate-45 { + height: 10em; + + div { + .transform(translate(0.4em, 2.8em) rotate(315deg)); + width: 1.5em; + } + } + + .service-grid-table-more { + text-align: center; + a { + display: inline; + } + } +} + +.joystick-pagination { + margin: 0 auto; + font-size: 130%; + + a { + color: @text-color; + outline: none; + + &:hover { + color: @text-color-light; + } + &:focus, &:active { + color: @icinga-blue; + } + } + + i { + display: block; + height: 1.5em; + width: 1.5em; + } +} + +.service-grid-link { + .bg-stateful(); + .rounded-corners(); + + display: inline-block; + height: 1.5em; + vertical-align: middle; + width: 1.5em; +} diff --git a/public/css/widget/actions.less b/public/css/widget/actions.less new file mode 100644 index 0000000..796fc38 --- /dev/null +++ b/public/css/widget/actions.less @@ -0,0 +1,20 @@ +.object-detail-actions a { + border-bottom: 1px solid @gray-light; + display: inline-block; + margin-bottom: .25em; + + .text-ellipsis(); + max-width: 32em; + + &:hover { + border-color: @icinga-blue-light; + color: @icinga-blue; + text-decoration: none; + } +} + +ul.object-detail-actions { + list-style-type: none; + padding: 0; + margin: 0; +} diff --git a/public/css/widget/cancel-button.less b/public/css/widget/cancel-button.less new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/public/css/widget/cancel-button.less diff --git a/public/css/widget/check-attempt.less b/public/css/widget/check-attempt.less new file mode 100644 index 0000000..1042a08 --- /dev/null +++ b/public/css/widget/check-attempt.less @@ -0,0 +1,17 @@ +.check-attempt { + display: flex; + align-items: center; + justify-content: center; +} + +.check-attempt .ball { + background-color: @gray-light; + + &:not(:last-child) { + margin-right: 1/6em; + } + + &.taken { + background-color: @gray-semilight; + } +} diff --git a/public/css/widget/check-statistics.less b/public/css/widget/check-statistics.less new file mode 100644 index 0000000..e2b5ac0 --- /dev/null +++ b/public/css/widget/check-statistics.less @@ -0,0 +1,55 @@ +.check-statistics { + .card(); + .progress-bar(); + .card-footer { + display: flex; + justify-content: center; + border-top: 1px solid @gray-light; + + .key { + width: auto; + margin-right: .28125em; //calculated width + font-size: .83333333em; + } + } + + .check-attempt { + display: inline-flex; + } + + &.progress-bar .below { + padding: 0; + margin-left: 10%; + margin-right: auto; + + display: flex; + align-items: center; + justify-content: space-between; + + &:before { + background-color: @gray; + content: ""; + display: block; + height: .25em; + width: 100%; + + position: absolute; + top: ~"calc(50% - .125em)"; + } + } + + .interval { + background-color: @body-bg-color; + position: relative; + } + + .check-overdue { + background-color: @color-down; + opacity: 1; + + &:before, + &:after { + background-color: @color-down; + } + } +} diff --git a/public/css/widget/comment-popup.less b/public/css/widget/comment-popup.less new file mode 100644 index 0000000..4012697 --- /dev/null +++ b/public/css/widget/comment-popup.less @@ -0,0 +1,74 @@ +.comment-popup { + font-size: 1em / .857em; // // default font size / footer font size = 12px + height: 6em; + border-radius: 0.25em; + border: 1px solid; + border-color: @gray-light; + background-color: @body-bg-color; +} + +.comment-wrapper { + position: relative; + + .comment-popup { + position: absolute; + top: 2.5em; + left: -1.6em; + z-index: 1; + display: none; + width: 50em; + } + + .comment-popup:before { + content: ''; + position: absolute; + display: inline-block; + width: 1.5em; + height: 1.5em; + left: 1.5em; + top: ~"calc(-0.75em - 1px)"; + border-left: 1px solid @gray-light; + border-top: 1px solid @gray-light; + background-color: @body-bg-color; + z-index: -1; + transform: rotate(45deg); + } +} + +ul.item-list li:last-child .comment-wrapper { + .comment-popup { + top: -7em; + } + + .comment-popup:before { + bottom: ~"calc(-0.75em - 1px)"; + top: unset; + transform: rotate(225deg); + } +} + +.comment-wrapper:hover .comment-popup { + display: block +} + +#layout { + &.twocols { + .comment-popup { + width: 35em; + } + + &.poor-layout, + &.compact-layout { + .comment-popup { + width: 25em; + } + } + } + + &.poor-layout, + &.minimal-layout { + .comment-popup { + width: 25em; + } + } +} diff --git a/public/css/widget/custom-var-table.less b/public/css/widget/custom-var-table.less new file mode 100644 index 0000000..46f1984 --- /dev/null +++ b/public/css/widget/custom-var-table.less @@ -0,0 +1,60 @@ +.custom-var-table { + .level-1 th { + padding-left: .5em; + } + + .level-2 th { + padding-left: 1em; + } + + .level-3 th { + padding-left: 1.5em; + } + + .level-4 th { + padding-left: 2em; + } + + .level-5 th { + padding-left: 2.5em; + } + + .level-6 th { + padding-left: 3em; + } + + thead th { + padding-left: 0; + text-align: left; + font-weight: bold; + font-size: 1.167em; + + > span { + :nth-child(1), + :nth-child(2) { + display: none; + } + } + } + + &.can-collapse thead th > span, // Icinga Web 2 < 2.12 + &[data-can-collapse] thead th > span { // >= 2.12 + :nth-child(1) { + display: none; + } + + :nth-child(2) { + display: inline-block; + } + } + + &.collapsed thead th > span { + :nth-child(1) { + display: inline-block; + } + + :nth-child(2) { + display: none; + } + } +} diff --git a/public/css/widget/donut-container.less b/public/css/widget/donut-container.less new file mode 100644 index 0000000..6fc4466 --- /dev/null +++ b/public/css/widget/donut-container.less @@ -0,0 +1,24 @@ +.donut-container { + .card(); + + h2 { + margin: 0; + } + + .state-badges { + text-align: center; + } + + &:not(:last-of-type) { + margin-right: 1em; + margin-bottom: 1em; + } + + .donut { + margin: 0 auto; + } +} + +#layout.minimal-layout .donut-container { + width: 100%; +} diff --git a/public/css/widget/downtime-card.less b/public/css/widget/downtime-card.less new file mode 100644 index 0000000..bffaf22 --- /dev/null +++ b/public/css/widget/downtime-card.less @@ -0,0 +1,47 @@ +.downtime-progress { + .progress-bar(); + + &.flexible.in-effect .marker { + &.start, + &.end { + background-color: @gray-light; + } + + &.flex-start, + &.flex-end { + background-color: @icinga-blue; + } + } + + .downtime-elapsed { + background-color: @color-ok; + + &:before, + &:after { + background-color: @color-ok; + } + } + + .downtime-overrun { + background-color: @color-down; + + &:before, + &:after { + background-color: @color-down; + } + } + + .downtime-elapsed + .downtime-overrun { + &:before { + display: none; + } + } +} + +.downtime-progress.progress-bar { + // This requires more specificity, otherwise it has no effect + .above, + .below { + padding: 2em 10%; + } +} diff --git a/public/css/widget/host-state-badges.less b/public/css/widget/host-state-badges.less new file mode 100644 index 0000000..d55a45c --- /dev/null +++ b/public/css/widget/host-state-badges.less @@ -0,0 +1,3 @@ +.host-state-badges { + .state-badges(); +} diff --git a/public/css/widget/key-value-list.less b/public/css/widget/key-value-list.less new file mode 100644 index 0000000..cd99f5f --- /dev/null +++ b/public/css/widget/key-value-list.less @@ -0,0 +1,19 @@ +.key-value-list { + list-style-type: none; + margin: 0; + padding: 0; + + li { + display: flex; + } + + li > span { + padding: .25em; + + &.label { + display: block; + padding-left: 0; + width: 12em; + } + } +} diff --git a/public/css/widget/migrate-popup.less b/public/css/widget/migrate-popup.less new file mode 100644 index 0000000..f7adb22 --- /dev/null +++ b/public/css/widget/migrate-popup.less @@ -0,0 +1,163 @@ +#migrate-popup { + @transitionLength: 350ms; + + display: flex; + min-width: 16em; + z-index: 1000; + position: fixed; + top: 0; + right: 4em; + pointer-events: none; + line-height: 1.5em; + + .transform(translateY(-100%)); + .transition(transform @transitionLength ease-in); + + &.active { + .transform(translateY(0%)); + .transition(transform @transitionLength ease-out); + } + + .suggestion-area { + .transform(translateY(0%)); + .transition(transform 0s linear @transitionLength); + } + + &.active .suggestion-area { + .transition(transform @transitionLength ease-out); + } + + &.minimized .suggestion-area { + .transform(translateY(-100%)); + .transition(transform @transitionLength ease-in); + } + + &.hidden .suggestion-area { + .transition(none); + } + + .minimizer { + width: 1.25em; + height: 1.5em; + margin-left: -1px; + z-index: 1; + pointer-events: auto; + + border-bottom-right-radius: 4px; + background-color: @body-bg-color; + + .transition(none); + + i:before { + width: 1em; + margin: .1em 0 0 0; + content: '\f102'; + font-size: 1.25em; + cursor: pointer; + color: @gray-light; + } + + i:hover:before { + color: @menu-highlight-color; + } + } + + &.minimized .minimizer { + border-bottom-left-radius: 4px; + .transition(border-bottom-left-radius 0s linear @transitionLength); + } + + &.hidden .minimizer i:before { + content: '\f103'; + } + + &:not(.active) .suggestion-area, &.hidden .suggestion-area { + box-shadow: none; + } + + .suggestion-area { + padding: .75em; + flex-grow: 1; + pointer-events: auto; + font-size: .75em; + + background: @body-bg-color; + border-radius: 0 0 4px 4px; + box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.3); + + button { + .link-button(); + } + + p { + margin-bottom: .5em; + color: @text-color-light; + } + + & > button.close { + float: right; + margin-top: 1em; + + &:hover { + text-decoration: underline; + } + } + + ul { + padding: 0; + margin: .5em 0 0; + list-style-type: none; + } + + li { + margin: .5em 0; + display: flex; + + &:last-of-type { + margin-bottom: 0; + } + } + + li { + :not(:last-child) { + margin-right: .5em; + } + + button:hover{ + opacity: 0.8; + } + + button[value="1"] { + flex-grow: 1; + + color: @text-color; + text-decoration: underline; + } + + button[value="0"] { + i:before { + margin: 0; + content: '\e804'; + } + } + } + + form { + margin-top: 0.5em; + width: 100%; + + .control-group { + display: flex; + align-items: center; + + .control-label-group { + margin-right: .5em; + } + + label { + margin-left: auto; + } + } + } + } +} diff --git a/public/css/widget/monitoring-health.less b/public/css/widget/monitoring-health.less new file mode 100644 index 0000000..f0ed252 --- /dev/null +++ b/public/css/widget/monitoring-health.less @@ -0,0 +1,136 @@ +.monitoring-health { + max-width: 65em; + + > section:not(:last-child) { + margin-bottom: 4em; + } + + .vertical-key-value .value { + display: inline-block; + margin-bottom: .25em; + } + + .check-summary { + padding: .5em 0; + + .col { + padding: 0 1em .5em 1em; + } + + .col:not(:last-child) { + border-right: 1px solid @gray-light; + } + } + + .check-summary, + .instance-features { + .rounded-corners(); + border: 1px solid; + border-color: @gray-light; + display: flex; + width: 100%; + } + + .check-summary, + .col-content, + .icinga-info { + width: 100%; + + display: flex; + flex-wrap: wrap; + justify-content: space-around; + } + + + .icinga-info { + margin-bottom: -2em; + + .vertical-key-value { + margin-bottom: 2em; + } + } + + .col { + flex: 1 1 auto; + text-align: center; + + > h3 { + margin: 0 0 1em; + } + } + + .icinga-health { + .rounded-corners(); + margin-bottom: 2em; + padding: 1em; + text-align: center; + width: 100%; + font-weight: bold; + + &.up { + border: 1px solid; + border-color: @color-up; + color: @color-up; + } + + &.down { + background-color: @color-down; + color: @body-bg-color; + } + } + + .instance-features { + .control-group { + flex: 1 1 auto; + margin: .5em 0; + padding: .5em; + width: 0; + + display: flex; + align-items: center; + flex-direction: column-reverse; + justify-content: flex-end; + + &:not(:last-of-type) { + border-right: 1px solid @gray-light; + } + + .control-label-group { + font-size: 10/12em; + margin-right: 0; + margin-top: 1em; + padding: 0; + text-align: center; + width: auto; + + label { + text-align: center; + } + } + + .toggle-switch { + margin: 0; + } + } + } +} + +#layout.minimal-layout { + .icinga-info { + .vertical-key-value { + width: 100%; + } + } + + .instance-features { + flex-wrap: wrap; + + .control-group { + width: 33%; + + &:nth-child(3n) { + border-right: none; + } + } + } +} diff --git a/public/css/widget/notice.less b/public/css/widget/notice.less new file mode 100644 index 0000000..7067665 --- /dev/null +++ b/public/css/widget/notice.less @@ -0,0 +1,23 @@ +// Style + +.notice { + @margin: 1em / 1.25; + @padding: .75em / 1.25; + + .rounded-corners(); + padding: @padding; + color: @text-color-on-icinga-blue; + background-color: @state-warning; + font-weight: bold; + font-size: 1.25em; + + // Layout + display: flex; + align-items: baseline; + justify-content: space-between; + margin: 0 @margin @margin @margin; + + > span { + .text-ellipsis(); + } +} diff --git a/public/css/widget/object-features.less b/public/css/widget/object-features.less new file mode 100644 index 0000000..b39414d --- /dev/null +++ b/public/css/widget/object-features.less @@ -0,0 +1,53 @@ +form.object-features { + span.description { + text-align: left; + } + + .control-label-group { + text-align: left; + margin-right: 0; + width: @name-value-table-name-width; + color: @text-color-light; + + label { + font-size: inherit; + } + } + + .control-group { + margin-top: 0; + margin-bottom: 0; + + &.indeterminate { + justify-content: flex-start; + + .control-label-group { + flex: 0 1 auto; + } + + select { + width: auto; + flex: 0 1 auto; + + & + span.hint { + flex: 0 1 auto; + } + } + } + } + + .toggle-switch { + margin-left: @table-column-padding; + } + + select { + margin-right: .5em; + margin-left: @table-column-padding; + + & + span.hint { + margin: .35em; + color: @gray-light; + font-style: italic; + } + } +} diff --git a/public/css/widget/object-inspection.less b/public/css/widget/object-inspection.less new file mode 100644 index 0000000..60a99bf --- /dev/null +++ b/public/css/widget/object-inspection.less @@ -0,0 +1,17 @@ +// Style + +// Layout + +.inspection-detail { + th { + width: 16em; + } + + pre, td { + white-space: break-spaces; + word-break: break-word; + -webkit-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; + } +} diff --git a/public/css/widget/object-meta-info.less b/public/css/widget/object-meta-info.less new file mode 100644 index 0000000..82ad044 --- /dev/null +++ b/public/css/widget/object-meta-info.less @@ -0,0 +1,95 @@ +// Style + +.object-meta-info { + .vertical-key-value .value { + font-weight: normal; + } + + .vertical-key-value:first-child { + text-align: left; + } + + .vertical-key-value:last-child { + text-align: right; + } +} + +.object-meta-info-control { + .link-button(); + + .rounded-corners(0 0 .5em .5em); + border: 1px solid; + border-color: @gray-lighter; + border-top-width: 0; + background: @body-bg-color; +} + +// Layout + +.object-meta-info { + display: flex; + justify-content: space-between; + + .horizontal-key-value { + padding: 0; + + .key { + width: 9em; + } + } + + .vertical-key-value { + &:first-child { + .text-ellipsis(); + margin-right: 1em; + } + + &:last-child { + white-space: nowrap; + margin-left: 1em; + } + } + + .horizontal-key-value .value, + .horizontal-key-value .key, + .vertical-key-value .value, + .vertical-key-value .key { + font-size: 16/18em; + line-height: 18/16; // compensate smaller font-size (1/font-size) + } +} + +.object-meta-info-control { + position: absolute; + right: 2.25em; + bottom: -2.5em; // height + margin-bottom + height: 2em; + padding: .25em; + + .collapse-icon, + .expand-icon { + font-size: 1.2em; + + &:before { + margin-right: 0; + } + } + + .collapse-icon { + display: block; + } + + .expand-icon { + display: none; + } +} + +.collapsed + .object-meta-info-control { + .collapse-icon { + display: none; + } + + .expand-icon { + display: block; + } +} diff --git a/public/css/widget/object-statistics.less b/public/css/widget/object-statistics.less new file mode 100644 index 0000000..5a9c97a --- /dev/null +++ b/public/css/widget/object-statistics.less @@ -0,0 +1,44 @@ +ul.object-statistics { + // Reset defaults + list-style-type: none; + margin: 0; + padding: 0; + + display: flex; + align-items: center; + + > li:not(:last-child) { + margin-right: 1em; + } +} + +.object-statistics-graph .donut-graph { + height: 2em; + width: 2em; + vertical-align: middle; +} + +.object-statistics-total a { + display: inline-block; + line-height: 1; + position: relative; + + &:hover:before { + .rounded-corners(); + background-color: @gray-lighter; + content: ""; + display: block; + z-index: 1; + + position: absolute; + bottom: -.4em; + left: -.4em; + top: -.4em; + right: -.4em; + } + + .vertical-key-value { + position: relative; + z-index: 2; + } +} diff --git a/public/css/widget/performance-data-table.less b/public/css/widget/performance-data-table.less new file mode 100644 index 0000000..a1a7b6e --- /dev/null +++ b/public/css/widget/performance-data-table.less @@ -0,0 +1,57 @@ +/* Icinga DB Web | (c) 2021 Icinga GmbH | GPLv2 */ + +.performance-data-table { + width: 100%; + overflow-x: auto; + display: block; + + tr:not(:last-child) { + border-bottom: 1px solid @gray-lighter; + } + + td { + text-align: right; + .text-ellipsis(); + } + + th { + font-size: .857em; + font-weight: normal; + text-transform: uppercase; + letter-spacing: .05em; + } + + thead { + border-bottom: 1px solid @gray-light; + } + + th:first-child, + td:first-child { + padding-left: 0; + } + + .title { + text-align: left; + width: 100%; + } + + td.title { + font-weight: bold; + } + + .sparkline-col { + min-width: 1.75em; + width: 1.75em; + padding: 2/12em 0; + } + + .inline-pie > svg { + vertical-align: middle; + } + + .no-value { + color: @gray-semilight; + text-align: center; + display: block; + } +} diff --git a/public/css/widget/quick-actions.less b/public/css/widget/quick-actions.less new file mode 100644 index 0000000..bddea43 --- /dev/null +++ b/public/css/widget/quick-actions.less @@ -0,0 +1,47 @@ +.quick-actions { + display: flex; + flex-wrap: wrap; + list-style-type: none; + margin: 0 -.5em; + padding: 0; + + a { + text-decoration: none; + } + + a, + button { + padding: .25em; + .rounded-corners(); + display: inline-flex; + align-items: baseline; + + &:hover { + background: @gray-lighter; + } + } + + li { + margin: 0 .25em .5em .25em; + vertical-align: middle; + white-space: nowrap; + } +} + +.controls:not(.default-layout) > .quick-actions:last-child, +.controls > .quick-actions:last-child { + margin-bottom: 0; +} + +#layout.twocols:not(.wide-layout) { + .quick-actions { + justify-content: space-between; + min-width: 100%; + } +} + +#layout.wide-layout .controls { + .quick-actions { + float: left; + } +} diff --git a/public/css/widget/service-state-badges.less b/public/css/widget/service-state-badges.less new file mode 100644 index 0000000..8a97faa --- /dev/null +++ b/public/css/widget/service-state-badges.less @@ -0,0 +1,3 @@ +.service-state-badges { + .state-badges(); +} diff --git a/public/css/widget/state-badge.less b/public/css/widget/state-badge.less new file mode 100644 index 0000000..2f81c1e --- /dev/null +++ b/public/css/widget/state-badge.less @@ -0,0 +1,47 @@ +.state-badge { + .rounded-corners(); + color: @text-color-on-icinga-blue; + display: inline-block; + font-size: 1em; + min-width: 2em; + padding: .25em; + text-align: center; + + &.handled { + opacity: .8; + } + + &.state-critical { + background-color: @color-critical; + } + + &.state-down { + background-color: @color-down; + } + + &.state-ok { + background-color: @color-ok; + } + + &.state-pending { + background-color: @color-pending; + } + + &.state-unknown { + background-color: @color-unknown; + } + + &.state-up { + background-color: @color-up; + } + + &.state-warning { + background-color: @color-warning; + } +} + +a .state-badge { + &:not(.disabled):hover { + filter: brightness(80%); + } +} diff --git a/public/css/widget/state-change.less b/public/css/widget/state-change.less new file mode 100644 index 0000000..adc8d42 --- /dev/null +++ b/public/css/widget/state-change.less @@ -0,0 +1,128 @@ +.state-change { + display: inline-flex; + + &.reversed-state-balls { + // This is needed, because with ~ we can address only subsequent nodes + flex-direction: row-reverse; + } + + .state-ball { + .box-shadow(0, 0, 0, 1px, @body-bg-color); + } + + // Same on same + .state-ball ~ .state-ball { + &.ball-size-xs { + margin-left: -.05em; + } + + &.ball-size-s { + margin-left: -.15em; + } + + &.ball-size-m { + margin-left: -.275em; + } + + &.ball-size-ml { + margin-left: -.375em; + } + + &.ball-size-l, + &.ball-size-xl { + margin-left: -.875em; + } + } + + // big left, smaller right + &:not(.reversed-state-balls) .ball-size-l ~ .state-ball { + &.ball-size-ml { + margin-top: .25em; + margin-left: -.5em; + margin-right: .25em; + } + } + + // smaller left, big right + &.reversed-state-balls .ball-size-l ~ .state-ball { + &.ball-size-ml { + z-index: -1; + margin-top: .25em; + margin-right: -.5em; + } + } + + .state-ball.state-ok, + .state-ball.state-up, + .state-pending { + &.ball-size-l, + &.ball-size-xl { + background-color: @body-bg-color; + } + } + + // Avoid transparency on overlapping solid state-change state-balls + .state-ball.handled { + position: relative; + opacity: 1; + + i { + position: relative; + z-index: 3; + } + + &:before { + content: ""; + display: block; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + border-radius: 50%; + opacity: .6; + z-index: 2 + } + + &:after { + content: ""; + display: block; + position: absolute; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + border-radius: 50%; + background-color: @body-bg-color; + z-index: 1; + } + + &.state-pending:before { + background-color: @color-pending; + } + + &.state-down:before { + background-color: @color-down; + } + + &.state-warning:before { + background-color: @color-warning; + } + + &.state-critical:before { + background-color: @color-critical; + } + + &.state-unknown:before { + background-color: @color-unknown; + } + } +} + +.overdue .state-change .state-ball { + .box-shadow(0, 0, 0, 1px, @gray-lighter); + + &.handled:after { + background-color: @gray-lighter; + } +} diff --git a/public/css/widget/tag-list.less b/public/css/widget/tag-list.less new file mode 100644 index 0000000..fe96691 --- /dev/null +++ b/public/css/widget/tag-list.less @@ -0,0 +1,31 @@ +.tag-list { + line-height: 1.5; + list-style-type: none; + margin: -.25em 0 0 0; // TODO: This is wrong here, if at all this must be part of wherever this widget is placed + padding: 0; + + > li { + display: inline-block; + + &:not(:last-child) { + margin-right: .417em; + margin-bottom: .25em; // TODO: Really? It's an inline ul, bottom margin is outer layout.. + } + + i { + opacity: 0.8; + } + } + + > li > a { + .rounded-corners(); + background-color: @gray-lighter; + display: block; + padding: .25em .5em; + + &:hover { + background-color: @gray-light; + text-decoration: none; + } + } +} diff --git a/public/css/widget/view-mode-switcher.less b/public/css/widget/view-mode-switcher.less new file mode 100644 index 0000000..7eda2a8 --- /dev/null +++ b/public/css/widget/view-mode-switcher.less @@ -0,0 +1,45 @@ +.view-mode-switcher { + list-style-type: none; + margin: 0 0 0.25em 0; + padding: 0; + display: flex; + + input { + display: none; + } + + label { + color: @control-color; + line-height: 1; + background: @low-sat-blue; + padding: 14/16*.25em 14/16*.5em; + font-size: 16/12em; + height: 24/16em; // desired pixel height / font-size + cursor: pointer; + + &:first-of-type { + border-top-left-radius: 0.25em; + border-bottom-left-radius: 0.25em; + } + + &:last-of-type { + border-top-right-radius: 0.25em; + border-bottom-right-radius: 0.25em; + } + + &:not(:last-of-type) { + border-right: 1px solid @low-sat-blue-dark; + } + + i { + // fix height for Chrome + display: block; + } + } + + input[checked] + label { + background-color: @control-color; + color: @text-color-on-icinga-blue; + cursor: default; + } +} |