diff --git a/src/atlasViewer/widgetUnit/widgetUnit.style.css b/src/atlasViewer/widgetUnit/widgetUnit.style.css index c2426233b1424932ba5f174ba15bdab0b23a6f3b..9ed85f20e0fc549bc2c9ab0ac31f8ae156dc48e8 100644 --- a/src/atlasViewer/widgetUnit/widgetUnit.style.css +++ b/src/atlasViewer/widgetUnit/widgetUnit.style.css @@ -47,10 +47,11 @@ panel-component[widgetUnitPanel] width: 300px; border-width: 1px !important; border: solid; + border-color: rgba(0, 0, 0, 0); box-sizing: border-box; } -@keyframes blink +@keyframes blinkDark { 0% { border-color: rgba(128, 128, 200, 0.0); @@ -61,12 +62,29 @@ panel-component[widgetUnitPanel] } } -.blinkOn +@keyframes blink { - animation: 0.5s blink ease-in-out 9 alternate; + 0% { + border-color: rgba(128, 128, 255, 0.0); + } + + 100% { + border-color: rgba(128, 128, 255, 1.0); + } +} + +:host-context([darktheme="true"]) .blinkOn +{ + animation: 0.5s blinkDark ease-in-out 9 alternate; border: 1px solid rgba(128, 128, 200, 1.0) !important; } +:host-context([darktheme="false"]) .blinkOn +{ + animation: 0.5s blink ease-in-out 9 alternate; + border: 1px solid rgba(128, 128, 255, 1.0) !important; +} + [heading] { position:relative; @@ -79,6 +97,6 @@ panel-component[widgetUnitPanel] height: 100%; left: 0; top: 0; - opacity: 0.2; + opacity: 0.4; pointer-events: none; } \ No newline at end of file diff --git a/src/components/progress/progress.style.css b/src/components/progress/progress.style.css index aa5cce2b1317dacbcc368e2fcf18a637614ee7c4..36858a282cdd6c793041f515aa8c4cd7e0cab97a 100644 --- a/src/components/progress/progress.style.css +++ b/src/components/progress/progress.style.css @@ -4,13 +4,18 @@ width: 100%; position:relative; overflow:hidden; + background-color:rgba(255,255,255,0.5); +} + +:host-context([darktheme="true"]) .progress +{ background-color:rgba(0,0,0,0.5); } @keyframes moveRight { from { - transform: translateX(-5%); + transform: translateX(-105%); } to { transform: translateX(205%); @@ -23,13 +28,14 @@ width: 100%; height: 100%; position:absolute; - border-left-width: 3em; + border-left-width: 10em; + border-right-width:0; border-style: solid; border-image: linear-gradient( to right, - rgba(255, 255, 255, 0.0), - rgba(255, 255, 255, 1.0), - rgba(255, 255, 255, 0.0) + rgba(128, 200, 128, 0.0), + rgba(128, 200, 128, 0.5), + rgba(128, 200, 128, 0.0) ) 0 100%; animation: moveRight 2000ms linear infinite; } \ No newline at end of file