diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-28 12:44:18 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-28 12:44:18 +0000 |
commit | 23be945fd2810ee82e3a23cbcd2352c9bda43d4f (patch) | |
tree | dd511b321f308264952cffb005a4288ea4e478e6 /public/css | |
parent | Initial commit. (diff) | |
download | icingaweb2-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.less | 213 |
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; +} |