Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Pull Request CSS changes #158

Merged
merged 12 commits into from
May 11, 2023
Merged

Pull Request CSS changes #158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
f508b3f
RightBar resembles the official release
wehigami May 9, 2023
776aee0
Added a welcome message to the rightbar in order to make it look more…
wehigami May 9, 2023
ed743b2
added background to make the welcome text more visible
wehigami May 10, 2023
f4b8cdf
Launch button stylized to look clearer. WIP on moving all the launch …
wehigami May 10, 2023
9dcaea7
Deleted the welcome message cause my friends said it sucks
wehigami May 10, 2023
c6abf53
BottomBar elements now align to right
wehigami May 10, 2023
36b3c2f
Taken spikes feedback into account. Removed backdrop blur anyway due …
wehigami May 10, 2023
15e6958
Added transition to socials images
wehigami May 10, 2023
878dfed
slight changes to Big Button css and Launch button font-weight
wehigami May 10, 2023
ce78bf6
added back backdrop blur, fixed button size issue
wehigami May 11, 2023
00929a3
backdrop blur full functioning
wehigami May 11, 2023
c2587cc
Merge branch 'main' into main
SpikeHD May 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/ui/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,11 +107,11 @@ select:focus {
width: 100%;
height: 160px;

backdrop-filter: blur(10px);
wehigami marked this conversation as resolved.
Show resolved Hide resolved
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) {
Expand All @@ -124,4 +124,4 @@ select:focus {
.BottomSection {
height: 140px;
}
}
}
2 changes: 1 addition & 1 deletion src/ui/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,4 +114,4 @@ class App extends React.Component<Readonly<unknown>, IState> {
}
}

export default App
export default App
37 changes: 26 additions & 11 deletions src/ui/components/RightBar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,31 +8,24 @@
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 {
margin: 30px 0;
}

.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);
Expand All @@ -44,3 +37,25 @@
height: calc(100vh - 170px);
}
}

.BarImg {
transition: 0.2s;
wehigami marked this conversation as resolved.
Show resolved Hide resolved
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%);
}
1 change: 1 addition & 0 deletions src/ui/components/RightBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export default class RightBar extends React.Component {
<div className="BarGithub BarImg" id="rightBarButtonGithub" onClick={() => this.openInBrowser(GITHUB)}>
<img src={Github} />
</div>

wehigami marked this conversation as resolved.
Show resolved Hide resolved
</div>
</div>
)
Expand Down
4 changes: 3 additions & 1 deletion src/ui/components/ServerLaunchSection.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -127,4 +129,4 @@
#officialPlay {
width: 40%;
}
}
}
2 changes: 1 addition & 1 deletion src/ui/components/ServerLaunchSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -317,4 +317,4 @@ export default class ServerLaunchSection extends React.Component<IProps, IState>
</div>
)
}
}
}
4 changes: 2 additions & 2 deletions src/ui/components/common/BigButton.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -16,7 +16,7 @@

.BigButton:hover {
cursor: pointer;
background: linear-gradient(#ffc61e, #ffd326);
background: linear-gradient(#fdd841, #ffc517);
}

.BigButton.disabled {
Expand Down