summaryrefslogtreecommitdiffstats
path: root/public/css/widget
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--public/css/widget/actions.less20
-rw-r--r--public/css/widget/cancel-button.less0
-rw-r--r--public/css/widget/check-attempt.less17
-rw-r--r--public/css/widget/check-statistics.less55
-rw-r--r--public/css/widget/comment-popup.less74
-rw-r--r--public/css/widget/custom-var-table.less60
-rw-r--r--public/css/widget/donut-container.less24
-rw-r--r--public/css/widget/downtime-card.less47
-rw-r--r--public/css/widget/host-state-badges.less3
-rw-r--r--public/css/widget/key-value-list.less19
-rw-r--r--public/css/widget/migrate-popup.less163
-rw-r--r--public/css/widget/monitoring-health.less136
-rw-r--r--public/css/widget/notice.less23
-rw-r--r--public/css/widget/object-features.less53
-rw-r--r--public/css/widget/object-inspection.less17
-rw-r--r--public/css/widget/object-meta-info.less95
-rw-r--r--public/css/widget/object-statistics.less44
-rw-r--r--public/css/widget/performance-data-table.less57
-rw-r--r--public/css/widget/quick-actions.less47
-rw-r--r--public/css/widget/service-state-badges.less3
-rw-r--r--public/css/widget/state-badge.less47
-rw-r--r--public/css/widget/state-change.less128
-rw-r--r--public/css/widget/tag-list.less31
-rw-r--r--public/css/widget/view-mode-switcher.less45
24 files changed, 1208 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/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;
+ }
+}