diff --git a/src/ui/App.css b/src/ui/App.css index 89f71a9c..b3899697 100644 --- a/src/ui/App.css +++ b/src/ui/App.css @@ -107,11 +107,11 @@ select:focus { width: 100%; height: 160px; - backdrop-filter: blur(10px); - box-shadow: inset 0px 5px 12px -3px rgb(50 50 50 / 75%); - margin: 0; padding: 0; + + backdrop-filter: blur(10px); + box-shadow: inset 0px 5px 12px -3px rgb(0,0,0,0.43); } @media (max-height: 580px) { @@ -124,4 +124,4 @@ select:focus { .BottomSection { height: 140px; } -} +} \ No newline at end of file diff --git a/src/ui/App.tsx b/src/ui/App.tsx index 3c465411..5d4f3497 100644 --- a/src/ui/App.tsx +++ b/src/ui/App.tsx @@ -114,4 +114,4 @@ class App extends React.Component, IState> { } } -export default App +export default App \ No newline at end of file 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%); +} diff --git a/src/ui/components/RightBar.tsx b/src/ui/components/RightBar.tsx index 456fde40..a1360395 100644 --- a/src/ui/components/RightBar.tsx +++ b/src/ui/components/RightBar.tsx @@ -24,6 +24,7 @@ export default class RightBar extends React.Component {
this.openInBrowser(GITHUB)}>
+ ) diff --git a/src/ui/components/ServerLaunchSection.css b/src/ui/components/ServerLaunchSection.css index 7b54b919..b414c933 100644 --- a/src/ui/components/ServerLaunchSection.css +++ b/src/ui/components/ServerLaunchSection.css @@ -20,6 +20,8 @@ #playButton .BigButton { height: 100%; box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.2); + font-size: 24px; + font-weight: 500; } #serverControls { @@ -127,4 +129,4 @@ #officialPlay { width: 40%; } -} +} \ No newline at end of file diff --git a/src/ui/components/ServerLaunchSection.tsx b/src/ui/components/ServerLaunchSection.tsx index 942a837a..c8b8b403 100644 --- a/src/ui/components/ServerLaunchSection.tsx +++ b/src/ui/components/ServerLaunchSection.tsx @@ -317,4 +317,4 @@ export default class ServerLaunchSection extends React.Component ) } -} +} \ No newline at end of file diff --git a/src/ui/components/common/BigButton.css b/src/ui/components/common/BigButton.css index 045008d9..067884de 100644 --- a/src/ui/components/common/BigButton.css +++ b/src/ui/components/common/BigButton.css @@ -7,7 +7,7 @@ padding: 0 30px; border-radius: 5px; border: none; - background: linear-gradient(#ffd326, #ffc61e); + background: linear-gradient(#ffcf0d, #fec004); color: #704a1d; font-weight: bold; @@ -16,7 +16,7 @@ .BigButton:hover { cursor: pointer; - background: linear-gradient(#ffc61e, #ffd326); + background: linear-gradient(#fdd841, #ffc517); } .BigButton.disabled {