summaryrefslogtreecommitdiffstats
path: root/public/css
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-28 12:44:18 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-28 12:44:18 +0000
commit23be945fd2810ee82e3a23cbcd2352c9bda43d4f (patch)
treedd511b321f308264952cffb005a4288ea4e478e6 /public/css
parentInitial commit. (diff)
downloadicingaweb2-module-graphite-upstream.tar.xz
icingaweb2-module-graphite-upstream.zip
Adding upstream version 1.2.2.upstream/1.2.2upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r--public/css/module.less213
1 files changed, 213 insertions, 0 deletions
diff --git a/public/css/module.less b/public/css/module.less
new file mode 100644
index 0000000..bb651e7
--- /dev/null
+++ b/public/css/module.less
@@ -0,0 +1,213 @@
+div.images {
+ h3 {
+ clear: both;
+ }
+
+ img.svg {
+ float: left;
+ border: none;
+ }
+
+}
+
+div.images.object-detail-view {
+ display: block;
+
+ img.graphiteImg {
+ width: 100%;
+ display: block;
+ }
+}
+
+.timerangepicker-container {
+ display: flex;
+ padding: .25em 0;
+
+ .button-link {
+ line-height: 1.75;
+ width: 2.25em;
+
+ i {
+ display: inline-block;
+ width: 100%;
+ text-align: center;
+ }
+
+ i:before {
+ margin-right: 0;
+ }
+ }
+}
+
+form[name=form_timerangepickercommon_graphite] {
+ display: inline-flex;
+ flex: 1 1 auto;
+ width: 0;
+ max-width: 43.25em;
+
+ &:not(:last-child) {
+ margin-right: .25em;
+ }
+
+ select {
+ min-width: 3.5em;
+ max-width: 7em;
+ flex: 1 1 auto;
+ width: auto;
+
+ &:not(:last-of-type) {
+ margin-right: .25em;
+ }
+ }
+}
+
+form[name=form_timerangepickercustom_graphite] {
+ min-width: 21em;
+
+ .control-label-group {
+ text-align: left;
+ }
+
+ input[type=date] {
+ min-width: 11em;
+ }
+
+ input[type=time] {
+ min-width: 5em;
+ }
+}
+
+.flyover[id^="graphite-customrange-"] {
+ display: inline-block;
+}
+
+.grid {
+ margin-right: -1em;
+ margin-bottom: -1em;
+
+ .empty-state {
+ .rounded-corners();
+ background-color: @gray-lightest;
+ margin-right: 1em;
+ padding: 1em;
+ text-align: center;
+ }
+}
+
+.grid-item {
+ display: inline-block;
+ border-radius: .25em;
+ border: 1px solid @gray-lighter;
+ min-width: 302px;
+ vertical-align: top;
+ margin-right: 1em;
+ margin-bottom: 1em;
+}
+
+.grid-item h2 {
+ margin-top: 0;
+ background: @gray-lightest;
+ border-bottom: 1px solid @gray-lighter;
+ padding:.25em .5em;
+ max-width: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.grid-item > .images:not(:last-child) {
+ margin-right: 1em;
+ display: inline-block;
+}
+
+.grid-item .graphiteImg {
+ margin-right: 1px;
+}
+
+.grid-item > p {
+ padding: .5em;
+ margin-bottom: 0;
+}
+
+p.load-more {
+ margin-right: 1em;
+ text-align: right;
+}
+
+// TODO: Remove once ipl-web v0.7.0 is required
+.controls:not(.default-layout) {
+ .box-shadow(0, 0, 0, 1px, @gray-lighter);
+
+ .pagination-control {
+ float: left;
+ }
+
+ .sort-control,
+ .limit-control {
+ float: right;
+ margin-left: .5em;
+ }
+
+ .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,
+ .filter {
+ 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;
+ }
+ }
+ }
+}
+
+/* Graph colors */
+
+@graphite-graph-bg-color: @body-bg-color;
+@graphite-graph-fg-color: @text-color;
+@graphite-graph-major-grid-color: @gray-light;
+@graphite-graph-minor-grid-color: @graphite-graph-bg-color;
+
+@light-mode: {
+ --graphite-graph-bg-color: var(--body-bg-color);
+ --graphite-graph-fg-color: var(--text-color);
+ --graphite-graph-major-grid-color: var(--gray-light);
+ --graphite-graph-minor-grid-color: var(--graphite-graph-bg-color);
+};
+
+.graphite-graph-color-registry {
+ display: none;
+
+ background-color: @graphite-graph-bg-color;
+ color: @graphite-graph-fg-color;
+ border-top-color: @graphite-graph-major-grid-color;
+ border-bottom-color: @graphite-graph-minor-grid-color;
+}