diff --git a/src/ui/components/RightBar.css b/src/ui/components/RightBar.css index cfe6a994..88b2f455 100644 --- a/src/ui/components/RightBar.css +++ b/src/ui/components/RightBar.css @@ -8,14 +8,12 @@ justify-content: flex-start; height: 100vh; - width: 80px; + width: 70px; right: 0%; - background-color: rgba(77, 77, 77, 0.6); -} + z-index: 99; -.BarImg:hover { - cursor: pointer; + background-color: rgba(0, 0, 0, 0.25); } .RightBarInner > div { @@ -23,16 +21,11 @@ } .RightBar img { - height: 40px; + height: 30px; filter: invert(100%) sepia(0%) saturate(11%) hue-rotate(227deg) brightness(103%) contrast(105%); - transition: filter 0.2s ease-in-out; } -.RightBar img:hover { - filter: invert(75%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(100%); -} - @media (max-height: 580px) { .RightBar { height: calc(100vh - 180px); @@ -44,3 +37,25 @@ height: calc(100vh - 170px); } } + +.BarImg { + transition: 0.2s; + border-radius: 50%; + width: 40px; + height: 40px; + background-color: rgba(0, 0, 0, 0.685); + display: flex; + justify-content: center; + align-items: center; + border: 2px solid transparent; +} + +.BarImg:hover { + cursor: pointer; + border: 2px solid #ffc920; +} + +.BarImg:hover img { + transition: 0.2s; + filter: invert(72%) sepia(68%) saturate(777%) hue-rotate(341deg) brightness(113%) contrast(101%); +}