diff options
Diffstat (limited to '')
-rw-r--r-- | public/css/widget/check-statistics.less | 192 |
1 files changed, 192 insertions, 0 deletions
diff --git a/public/css/widget/check-statistics.less b/public/css/widget/check-statistics.less new file mode 100644 index 0000000..4bd34c2 --- /dev/null +++ b/public/css/widget/check-statistics.less @@ -0,0 +1,192 @@ +.check-statistics { + position: relative; + .card(); + .progress-bar(); + + .check-attempt { + display: inline-flex; + } + + .bubble { + &.top-left-aligned, + &.top-right-aligned { + &::before { + visibility: hidden; + } + + svg { + position: absolute; + top: -1em; + width: 1em; + height: 1em; + + .bg { + fill: @body-bg-color; + } + + .border { + fill: @gray-light; + } + } + } + + &.top-left-aligned { + transform: unset; + border-top-left-radius: 0; + + svg { + left: -1px; + } + } + + &.top-right-aligned { + transform: translate(-100%); + border-top-right-radius: 0; + + svg { + right: -1px; + } + } + } + + // ATTENTION!: `&.progress-bar {` must not be used here, seems to confuse the less parser!!!!111 + + &.progress-bar .timeline .progress.running { + &::before, + > .bar { + background: @state-ok; + } + } + + &.progress-bar .check-timeline { + margin-top: .5em; + } + &.progress-bar .above { + margin-top: .5em; + } + + .interval-line { + position: absolute; + height: 100%; + + &::before { + position: absolute; + top: ~"calc(50% - .125em)"; + display: block; + height: .25em; + width: 100%; + content: ""; + + background-color: @gray-light; + } + + .vertical-key-value { + position: absolute; + left: 50%; + transform: translate(-50%, 0); + + padding: 0 .2em; + background-color: @body-bg-color; + } + + .start, + .end { + position: absolute; + top: 50%; + width: .25em; + height: 1em; + background-color: @gray; + } + + .start { + left: 0; + transform: translate(-50%, -50%); + } + + .end { + right: 0; + transform: translate(50%, -50%); + } + } + + .execution-line .vertical-key-value { + z-index: 1; + } + + &.check-overdue { + --duration-scale: 60%; + --overlay-scale: 20%; + + .above { + .now { + position: absolute; + right: var(--hPadding); + bottom: 0; + + .bubble { + // to move the center of the bubble to the end of the wrapper. + transform: translate(50%, 0); + } + } + } + + .timeline-overlay { + background: linear-gradient(90deg, @gray-light 0, @color-down 2em); + opacity: 1; + + &::after { + background-color: @color-down; + } + } + } + + &.checks-disabled.progress-bar { + .timeline { + .marker { + &.highlighted { + background-color: @gray; + } + } + } + } + + .checks-disabled-overlay { + border-radius: 0.4em; + position: absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + background-color: ~"@{disabled-gray}20"; + z-index: 1; + + .notes { + color: @text-color-light; + margin-top: -4em; + text-shadow: 0 0 1px rgba(0, 0, 0, 0.25); + } + } +} + +#layout.twocols &#col1, +#layout.minimal-layout, +#layout.poor-layout, +#layout.twocols.compact-layout, +#layout.twocols.default-layout { + .check-statistics .bubble.top-right-aligned { + transform: translate(-50%, 0); // default what progress-bar() defined + border-top-right-radius: .25em; // default what progress-bar() defined + + &::before { + visibility: visible; + } + + svg { + display: none; + } + } +} |