Taken spikes feedback into account. Removed backdrop blur anyway due to my friends feedback, added shadow gradient for better button visibility. Lmk whether or not to still keep the backdrop blur.

This commit is contained in:
Wehi 2023-05-10 15:03:29 +02:00
parent c6abf53880
commit 36b3c2f841
5 changed files with 41 additions and 105 deletions

View File

@ -108,11 +108,8 @@ select:focus {
height: 160px;
margin: 0;
text-align: right;
padding: 0;
/* Gradient shadow */
-webkit-box-shadow: inset 0px -150px 96px -85px rgba(0,0,0,0.43);
-moz-box-shadow: inset 0px -150px 96px -85px rgba(0,0,0,0.43);
box-shadow: inset 0px -150px 96px -85px rgba(0,0,0,0.43);
}

View File

@ -1,43 +1,3 @@
@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;
}
.RightBar {
position: absolute;
transform: translate(0%, 0%);

View File

@ -8,27 +8,27 @@
right: 10%;
top: 50%;
width: 20%;
height: 120%;
width: 32%;
height: 80%;
min-width: 357px;
padding: 0 0 100px 0;
}
#playButton > div {
margin-bottom: 6px;
}
#playButton .BigButton {
height: 100%;
box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.2);
font-size: 24px;
font-weight: 400;
width: 20%;
}
#serverControls {
color: white;
text-shadow: 1px 1px 8px black;
align-self: flex-end;
margin-top: 10px;
margin-bottom: -10px;
}
.BottomSection .CheckboxDisplay {
@ -57,8 +57,8 @@
.ServerConfig .Checkbox {
display: inline-grid;
margin-top: 10px;
vertical-align: middle;
margin-left: 8px;
}
.ServerLaunchButtons {
@ -104,24 +104,8 @@
box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.2);
}
.ServerConfig {
display: grid;
height: 100px;
grid-template-columns: 1;
grid-template-rows: repeat(2, 1fr);
justify-content: flex-end;
}
.ServerConfigGrid {
display: flex;
justify-content: flex-end;
align-items: center;
}
#ServerConfigCheckbox {
margin-bottom: -10px;
margin-top: 10px;
.ServerConfig .TextInputWrapper {
display: inline-block;
}
#ip {

View File

@ -277,15 +277,6 @@ export default class ServerLaunchSection extends React.Component<IProps, IState>
{this.state.grasscutterEnabled && (
<div>
<div className="ServerConfig" id="serverConfigContainer">
<div id="ServerConfigCheckbox">
<Checkbox
id="httpsEnable"
label={this.state.httpsLabel}
onChange={this.toggleHttps}
checked={this.state.httpsEnabled}
/>
</div>
<div className="ServerConfigGrid">
<TextInput
id="ip"
key="ip"
@ -304,7 +295,12 @@ export default class ServerLaunchSection extends React.Component<IProps, IState>
initalValue={this.state.port}
/>
<HelpButton contents={this.state.portHelpText} />
</div>
<Checkbox
id="httpsEnable"
label={this.state.httpsLabel}
onChange={this.toggleHttps}
checked={this.state.httpsEnabled}
/>
</div>
</div>
)}
@ -318,7 +314,6 @@ export default class ServerLaunchSection extends React.Component<IProps, IState>
<img className="ExtrasIcon" id="extrasIcon" src={Plus} />
</BigButton>
)}
<BigButton onClick={this.launchServer} id="serverLaunch">
<img className="ServerIcon" id="serverLaunchIcon" src={Server} />
</BigButton>