Grasscutters/GrassClipper
3
0
Fork 0
mirror of https://github.com/Grasscutters/GrassClipper.git synced 2024-11-26 01:41:02 +00:00
Code Issues Projects Releases Wiki Activity

button styling

Browse Source
This commit is contained in:
SpikeHD 2022-04-20 17:06:35 -07:00
parent 3821f5c95a
commit c5cfe001e8
3 changed files with 49 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
neutralino.config.json
View File

@ -34,7 +34,7 @@
"borderless": false, "borderless": false,
"maximize": false, "maximize": false,
"hidden": false, "hidden": false,
"resizable": true, "resizable": false,
"exitProcessOnClose": true "exitProcessOnClose": true
}, },
"browser": {}, "browser": {},

4
resources/index.html
View File

@ -11,8 +11,10 @@
<button class="playBtn" onclick="launchOfficial()">Play Official</button> <button class="playBtn" onclick="launchOfficial()">Play Official</button>
</div> </div>
<div id="secondHalf"> <div id="secondHalf">
<button class="playBtn" onclick="launchPrivate()">Play Private</button> <div id="secondControlContainer">
<input type="text" id="ip" placeholder="IP Address" /> <input type="text" id="ip" placeholder="IP Address" />
<button class="playBtn" onclick="launchPrivate()">Play Private</button>
</div>
</div> </div>
</div> </div>

49
resources/style/index.css
View File

@ -5,10 +5,6 @@ body {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
input[type="text"] {
height: 20px;
}
.playBtn:hover, .smolBtn:hover { .playBtn:hover, .smolBtn:hover {
cursor: pointer; cursor: pointer;
} }
@ -24,6 +20,10 @@ input[type="text"] {
font-size: 20px; font-size: 20px;
} }
.playBtn:hover {
background: linear-gradient(#ffc61e, #ffd326);
}
.smolBtn { .smolBtn {
padding: 0 20px; padding: 0 20px;
border-radius: 5px; border-radius: 5px;
@ -35,6 +35,10 @@ input[type="text"] {
font-size: 14px; font-size: 14px;
} }
.smolBtn:hover {
background: linear-gradient(#ffc61e, #ffd326);
}
#bottomBar { #bottomBar {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -77,10 +81,45 @@ input[type="text"] {
background-position: -340px; background-position: -340px;
} }
/* Move the button to the position on the png */ /* Move the first official button to the position on the png */
#firstHalf button { #firstHalf button {
position: relative; position: relative;
transform: translate(115px, 480px); transform: translate(115px, 480px);
width: 300px; width: 300px;
height: 60px; height: 60px;
} }
#ip {
display: block;
}
#secondHalf button {
display: block;
width: 300px;
height: 60px;
}
#secondHalf input {
margin-bottom: 4px;
height: 20px;
background: white;
border: none;
border-bottom: 2px solid #4d4d4d;
padding: 8px;
/* border bottom anim */
transition: border-bottom 0.1s ease-in-out;
}
#secondHalf input:focus {
outline: none;
border-bottom: 2px solid #ffc61e;
}
/* Move the second private button the near-bottom */
#secondControlContainer {
position: relative;
transform: translate(115px, 446px);
width: 300px;
height: 60px;
}