diff options
Diffstat (limited to 'modules/monitoring/public/css/tables.less')
| -rw-r--r-- | modules/monitoring/public/css/tables.less | 282 |
1 files changed, 282 insertions, 0 deletions
diff --git a/modules/monitoring/public/css/tables.less b/modules/monitoring/public/css/tables.less new file mode 100644 index 0000000..c5b5f27 --- /dev/null +++ b/modules/monitoring/public/css/tables.less @@ -0,0 +1,282 @@ +/*! Icinga Web 2 | (c) 2015 Icinga Development Team | GPLv2+ */ + +@border-left-width: 6px; + +// Icon images in list and detail views +.host-icon-image, +.service-icon-image { + max-width: 2em; + vertical-align: middle; +} + +// Check source reachable information in the host and service detail views +.check-source-meta { + font-size: @font-size-small; +} + +// Object link and comment author in the comment overview +.comment-author { + margin-bottom: 0.25em; + + > a { + font-weight: bold; + } +} + +// Comment icons, e.g. persistent in the comment overview +.comment-icons { + float: right; +} + +.caption { + height: 3em; + text-overflow: ellipsis; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + + img { + max-height: 1em; + } +} + +// Type information for backends in the monitoring config +.config-label-meta { + font-size: @font-size-small; +} + +// Column for counts, e.g. host group members +.count-col { + width: 4em; +} + +// Custom variables in the host and service detail view +.custom-variables > ul { + list-style-type: none; + margin: 0; +} + +// Host name and IP addresses in the host and service detail view +.host-meta { + color: @text-color-light; + font-size: @font-size-small; +} + +// Notification recipient in the notifications overview +.notification-recipient { + color: @text-color-light; + float: right; + font-size: @font-size-small; +} + + +// Container for plugin output and performance data in overviews +.overview-plugin-output-container { + .clearfix(); +} + +// Performance data pies in overviews +.overview-performance-data { + float: right; + font-size: @font-size-small; +} + +// Plugin output in detail views +.plugin-output, +// Plugin output in overviews +.overview-plugin-output { + -webkit-hyphens: auto; + -moz-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; + + overflow-wrap: break-word; + word-wrap: break-word; +} + +// Plugin output in overviews +.overview-plugin-output { + color: @text-color-light; + font-family: @font-family-fixed; + font-size: @font-size-small; + margin: 0; + white-space: pre-wrap; + // Long text in table cells overflows the table's width if the table's layout is not fixed. + // Thus overflow-wrap will not have any effect. But w/ the following we set a width of any value + // plus a min-width of 100% to consume the full width nonetheless which seems to always + // instruct browsers to not overflow the table. Ridiculous. + min-width: 100%; + width: 1em; +} + +// Table for performance data in detail views +.performance-data-table { + display: block; + overflow-x: auto; + position: relative; + + > thead > tr > th { + text-align: left; + } + + > thead > tr > th:first-child, + > tbody > tr > td:first-child { + // Reset base padding + padding-left: 0; + } + + > thead > tr > th, + > tbody > tr > td { + white-space: nowrap; + } +} + +// Performance data table column for sparkline pie charts in detail views +.sparkline-col { + width: 2em; +} + +// Service description if in the service detail view +.service-meta { + color: @text-color-light; + font-size: @font-size-small; +} + +// State column for label and duration in overviews +.state-col { + &.state-ok, + &.state-up { + border-left: @border-left-width solid @color-ok; + } + + &.state-pending { + border-left: @border-left-width solid @color-pending; + } + + &.state-critical, + &.state-down { + background-color: @color-critical; + color: @text-color-inverted; + + &.handled { + background-color: inherit; + color: inherit; + border-left: @border-left-width solid @color-critical-handled; + } + } + + &.state-warning { + background-color: @color-warning; + color: @text-color-inverted; + + &.handled { + background-color: inherit; + color: inherit; + border-left: @border-left-width solid @color-warning-handled; + } + } + + &.state-unknown { + background-color: @color-unknown; + color: @text-color-inverted; + + &.handled { + background-color: inherit; + color: inherit; + border-left: @border-left-width solid @color-unknown-handled; + } + } + + &.state-unreachable { + background-color: @color-unreachable; + color: @text-color-inverted; + + &.handled { + background-color: inherit; + color: inherit; + border-left: @border-left-width solid @color-unreachable-handled; + } + } + + // State class for history events + &.state-no-state { + border-left: @border-left-width solid @text-color-light; + } + + * { + color: inherit; + } + + text-align: center; + width: 8em; +} + +// Wraps links, icons and meta in overviews +.state-header { + .clearfix(); + + > a { + font-weight: bold; + } +} + +// State icons, e.g. acknowledged in overviews +.state-icons { + float: right; +} + +// State labels in overviews +.state-label { + font-family: @font-family-wide; + font-size: @font-size-small; + letter-spacing: 1px; +} + +// State duration and state type information in overviews +.state-meta { + font-size: @font-size-small; +} + +.state-table { + border-collapse: separate; + border-spacing: 0 1px; + width: 100%; + + tr[href] { + -webkit-transform: translate3d(0,0,0); /* Without this, hovering in Safari is broken in history table rows */ + -moz-transform: none; /* Firefox collapses border spacing due to the above */ + } + + tr[href].active { + background-color: @tr-active-color; + } + + tr[href]:hover { + background-color: @tr-hover-color; + cursor: pointer; + } + + tr[href].state-outdated:not(:hover):not(.active) td:not(.state-col) { + opacity: 0.7; + } +} + +// Event history +.history-message-container { + display: flex; + align-items: center; + justify-content: center; + + > .history-message-icon { + padding: 0.25em; + } + + > .history-message-output { + flex: 1; + + > a { + font-weight: bold; + } + } +} |