diff --git a/platform/commonUI/general/res/sass/controls/_time-conductor.scss b/platform/commonUI/general/res/sass/controls/_time-conductor.scss index 5732d3669f..a017262935 100644 --- a/platform/commonUI/general/res/sass/controls/_time-conductor.scss +++ b/platform/commonUI/general/res/sass/controls/_time-conductor.scss @@ -6,9 +6,83 @@ } @include keyframes(clock-hands) { + 0% { @include transform(translate(-50%, -50%) rotate(0deg)); } + 100% { @include transform(translate(-50%, -50%) rotate(360deg)); } +} + +@include keyframes(clock-hands-sticky) { 0% { @include transform(translate(-50%, -50%) rotate(0deg)); } + 7% { + @include transform(translate(-50%, -50%) rotate(0deg)); + } + 8% { + @include transform(translate(-50%, -50%) rotate(30deg)); + } + 15% { + @include transform(translate(-50%, -50%) rotate(30deg)); + } + 16% { + @include transform(translate(-50%, -50%) rotate(60deg)); + } + 24% { + @include transform(translate(-50%, -50%) rotate(60deg)); + } + 25% { + @include transform(translate(-50%, -50%) rotate(90deg)); + } + 32% { + @include transform(translate(-50%, -50%) rotate(90deg)); + } + 33% { + @include transform(translate(-50%, -50%) rotate(120deg)); + } + 40% { + @include transform(translate(-50%, -50%) rotate(120deg)); + } + 41% { + @include transform(translate(-50%, -50%) rotate(150deg)); + } + 49% { + @include transform(translate(-50%, -50%) rotate(150deg)); + } + 50% { + @include transform(translate(-50%, -50%) rotate(180deg)); + } + 57% { + @include transform(translate(-50%, -50%) rotate(180deg)); + } + 58% { + @include transform(translate(-50%, -50%) rotate(210deg)); + } + 65% { + @include transform(translate(-50%, -50%) rotate(210deg)); + } + 66% { + @include transform(translate(-50%, -50%) rotate(240deg)); + } + 74% { + @include transform(translate(-50%, -50%) rotate(240deg)); + } + 75% { + @include transform(translate(-50%, -50%) rotate(270deg)); + } + 82% { + @include transform(translate(-50%, -50%) rotate(270deg)); + } + 83% { + @include transform(translate(-50%, -50%) rotate(300deg)); + } + 90% { + @include transform(translate(-50%, -50%) rotate(300deg)); + } + 91% { + @include transform(translate(-50%, -50%) rotate(330deg)); + } + 99% { + @include transform(translate(-50%, -50%) rotate(330deg)); + } 100% { @include transform(translate(-50%, -50%) rotate(360deg)); } @@ -258,12 +332,12 @@ } } -/* .l-time-conductor-ticks .l-axis-holder { - svg { - line { color: $colorTimeCondKeyBg; }; - text { fill: $colorTimeCondKeyBg; } - } - }*/ + &.realtime-mode .time-conductor-icon div[class*="hand"] { @include animation-name(clock-hands); } + &.latest-mode .time-conductor-icon div[class*="hand"] { + @include animation-name(clock-hands-sticky); + &.hand-big { @include animation-duration(5s); } + &.hand-little { @include animation-duration(60s); } + } .l-data-visualization { background: $colorTimeCondDataVisRtBg !important