diff options
Diffstat (limited to 'public/css/widget')
24 files changed, 1398 insertions, 0 deletions
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/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..4bd34c2 --- /dev/null +++ b/public/css/widget/check-statistics.less @@ -0,0 +1,192 @@ +.check-statistics { + position: relative; + .card(); + .progress-bar(); + + .check-attempt { + display: inline-flex; + } + + .bubble { + &.top-left-aligned, + &.top-right-aligned { + &::before { + visibility: hidden; + } + + svg { + position: absolute; + top: -1em; + width: 1em; + height: 1em; + + .bg { + fill: @body-bg-color; + } + + .border { + fill: @gray-light; + } + } + } + + &.top-left-aligned { + transform: unset; + border-top-left-radius: 0; + + svg { + left: -1px; + } + } + + &.top-right-aligned { + transform: translate(-100%); + border-top-right-radius: 0; + + svg { + right: -1px; + } + } + } + + // ATTENTION!: `&.progress-bar {` must not be used here, seems to confuse the less parser!!!!111 + + &.progress-bar .timeline .progress.running { + &::before, + > .bar { + background: @state-ok; + } + } + + &.progress-bar .check-timeline { + margin-top: .5em; + } + &.progress-bar .above { + margin-top: .5em; + } + + .interval-line { + position: absolute; + height: 100%; + + &::before { + position: absolute; + top: ~"calc(50% - .125em)"; + display: block; + height: .25em; + width: 100%; + content: ""; + + background-color: @gray-light; + } + + .vertical-key-value { + position: absolute; + left: 50%; + transform: translate(-50%, 0); + + padding: 0 .2em; + background-color: @body-bg-color; + } + + .start, + .end { + position: absolute; + top: 50%; + width: .25em; + height: 1em; + background-color: @gray; + } + + .start { + left: 0; + transform: translate(-50%, -50%); + } + + .end { + right: 0; + transform: translate(50%, -50%); + } + } + + .execution-line .vertical-key-value { + z-index: 1; + } + + &.check-overdue { + --duration-scale: 60%; + --overlay-scale: 20%; + + .above { + .now { + position: absolute; + right: var(--hPadding); + bottom: 0; + + .bubble { + // to move the center of the bubble to the end of the wrapper. + transform: translate(50%, 0); + } + } + } + + .timeline-overlay { + background: linear-gradient(90deg, @gray-light 0, @color-down 2em); + opacity: 1; + + &::after { + background-color: @color-down; + } + } + } + + &.checks-disabled.progress-bar { + .timeline { + .marker { + &.highlighted { + background-color: @gray; + } + } + } + } + + .checks-disabled-overlay { + border-radius: 0.4em; + position: absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + background-color: ~"@{disabled-gray}20"; + z-index: 1; + + .notes { + color: @text-color-light; + margin-top: -4em; + text-shadow: 0 0 1px rgba(0, 0, 0, 0.25); + } + } +} + +#layout.twocols &#col1, +#layout.minimal-layout, +#layout.poor-layout, +#layout.twocols.compact-layout, +#layout.twocols.default-layout { + .check-statistics .bubble.top-right-aligned { + transform: translate(-50%, 0); // default what progress-bar() defined + border-top-right-radius: .25em; // default what progress-bar() defined + + &::before { + visibility: visible; + } + + svg { + display: none; + } + } +} 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..37dd8a5 --- /dev/null +++ b/public/css/widget/downtime-card.less @@ -0,0 +1,10 @@ +.downtime-progress { + .progress-bar(); + + &.progress-bar .timeline .downtime-elapsed { + &::before, + > .bar { + background-color: @state-ok; + } + } +} diff --git a/public/css/widget/group-grid.less b/public/css/widget/group-grid.less new file mode 100644 index 0000000..94b5b13 --- /dev/null +++ b/public/css/widget/group-grid.less @@ -0,0 +1,42 @@ +// HostGroup- and -ServiceGroupGrid styles + +ul.item-table.group-grid { + grid-template-columns: repeat(auto-fit, 15em); + grid-gap: 1em 2em; + + .table-row { + margin: -.25em; + padding: .25em; + border-radius: .5em; + } + + li.group-grid-cell { + .title { + align-items: center; + } + + .visual { + margin-right: 1em; + } + + .content { + line-height: 1; + + a { + display: inline-block; + max-width: 10em; + text-align: center; + } + } + + .state-badge { + width: 2.5em; + height: 2.5em; + line-height: 2; + } + } +} + +.content.full-width ul.item-table.group-grid { + margin: 0 1em; +} 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..8f9586b --- /dev/null +++ b/public/css/widget/migrate-popup.less @@ -0,0 +1,181 @@ +#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 { + display: flex; + flex-direction: column-reverse; + + 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 { + display: none; + margin-bottom: .5em; + color: @text-color-light; + } + + form ~ .monitoring-migration-hint, + .search-migration-suggestions:not(:empty) + .search-migration-hint, + .monitoring-migration-suggestions:not(:empty) + .monitoring-migration-hint { + display: block; + } + + & > button.close { + margin-left: auto; + margin-top: 1em; + + &:hover { + text-decoration: underline; + } + } + + ul { + padding: 0; + margin: 0; + list-style-type: none; + } + + li { + margin: .5em 0; + display: flex; + + &:last-of-type { + margin-bottom: 0; + } + + &:first-of-type { + margin-top: 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 { + width: 100%; + + .control-group { + display: flex; + align-items: center; + + .control-label-group { + margin-right: .5em; + } + + label { + margin-left: auto; + } + } + } + + .search-migration-suggestions:not(:empty) ~ form, + .search-migration-suggestions:not(:empty) ~ .monitoring-migration-suggestions:not(:empty) { + margin-bottom: .5em; + } + } +} 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..26c18c8 --- /dev/null +++ b/public/css/widget/performance-data-table.less @@ -0,0 +1,62 @@ +/* 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; + .invalid-perfdata { + font-size: 1.25em; + vertical-align: text-bottom; + color: @color-warning; + } + } + + .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-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/table-layout.less b/public/css/widget/table-layout.less new file mode 100644 index 0000000..f67ec0f --- /dev/null +++ b/public/css/widget/table-layout.less @@ -0,0 +1,72 @@ +// HostGroup- and -ServiceGroupTable styles + +.item-table.table-layout { + --columns: 1; +} + +ul.item-table.table-layout { + grid-template-columns: 1fr repeat(var(--columns), auto); + + > li { + display: contents; + + &:hover, + &.active { + .col, &::before, &::after { + // The li might get a background on hover. Though, this won't be visible + // as it has no box model since we apply display:contents to it. + background-color: inherit; + } + } + } + + li:not(:last-of-type) { + .col { + border-bottom: 1px solid @gray-light; + } + + .visual { + border-bottom: 1px solid @default-bg; + } + } + + > .table-row { + &:not(:last-of-type) .title .visual { + margin-bottom: ~"calc(-.5em - 1px)"; + } + + .col { + padding: .5em 0; + } + + .col:not(:last-child) { + padding-right: 1em; + } + } +} + +.content.full-width ul.item-table.table-layout { + // Again, since the li has no box model, it cannot have padding. So the first + // and last child need to get the left and right padding respectively. + // But we don't want to have a border that spans to the very right or left, + // so pseudo elements are required. We could add empty cells instead, but + // that would require hard coding the width here, which I'd like to avoid. + + grid-template-columns: ~"auto 1fr repeat(calc(var(--columns) + 1), auto)"; + + > li.table-row { + &::before, &::after { + display: inline-block; + content: '\00a0'; + margin-bottom: 1px; + } + + &::before { + padding-left: inherit; + } + + &::after { + padding-right: inherit; + } + } +} 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; + } +} |