diff --git a/src/ui/components/RightBar.css b/src/ui/components/RightBar.css index cba34db..64609ed 100644 --- a/src/ui/components/RightBar.css +++ b/src/ui/components/RightBar.css @@ -13,17 +13,16 @@ z-index: 99; - background-color: rgba(0, 0, 0, 0.250); + background-color: rgba(0, 0, 0, 0.25); z-index: 999; } - .RightBarInner > div { margin: 30px 0; } .RightBar img { - height: 35px; + height: 30px; filter: invert(100%) sepia(0%) saturate(11%) hue-rotate(227deg) brightness(103%) contrast(105%); transition: filter 0.2s ease-in-out; } @@ -43,8 +42,8 @@ .BarImg { transition: 0.2s; border-radius: 50%; - width: 50px; - height: 50px; + width: 40px; + height: 40px; background-color: rgba(0, 0, 0, 0.685); display: flex; justify-content: center; @@ -52,13 +51,66 @@ border: 2px solid transparent; } - .BarImg:hover { cursor: pointer; border: 2px solid #ffc920; - } .BarImg:hover img { filter: invert(72%) sepia(68%) saturate(777%) hue-rotate(341deg) brightness(113%) contrast(101%); +} + +.WelcomeMessage { + margin-left: 10px; + color: white; + writing-mode: vertical-rl; + text-orientation: upright; + text-transform: uppercase; + font-weight: 600; +} + +@keyframes background-pan { + from { + background-position: 0% center; + } + + to { + background-position: -200% center; + } +} + +@keyframes scale { + from, + to { + transform: scale(0); + } + + 50% { + transform: scale(1); + } +} + +@keyframes rotate { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(180deg); + } +} + +.magic-text { + animation: background-pan 3s linear infinite; + background: linear-gradient( + to right, + #fff, + #ffc920, + #fff, + #fff + ); + background-size: 200%; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + white-space: nowrap; } \ No newline at end of file diff --git a/src/ui/components/RightBar.tsx b/src/ui/components/RightBar.tsx index 456fde4..dd415f1 100644 --- a/src/ui/components/RightBar.tsx +++ b/src/ui/components/RightBar.tsx @@ -24,6 +24,10 @@ export default class RightBar extends React.Component {