summaryrefslogtreecommitdiffstats
path: root/public/css/list
diff options
context:
space:
mode:
Diffstat (limited to 'public/css/list')
-rw-r--r--public/css/list/action-list.less14
-rw-r--r--public/css/list/comment-list.less50
-rw-r--r--public/css/list/downtime-list.less93
-rw-r--r--public/css/list/item-list.less239
-rw-r--r--public/css/list/item-table.less176
-rw-r--r--public/css/list/list-item.less139
-rw-r--r--public/css/list/state-item-table.less34
-rw-r--r--public/css/list/state-row-item.less42
-rw-r--r--public/css/list/user-list.less26
9 files changed, 813 insertions, 0 deletions
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;
+ }
+ }
+}
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-21 16:36:35 +0000