Grasscutters/GrassClipper
3
0
Fork 0
mirror of https://github.com/Grasscutters/GrassClipper.git synced 2024-11-22 15:37:48 +00:00
Code Issues Projects Releases Wiki Activity

close and minimize button styling

Browse Source
This commit is contained in:
SpikeHD 2022-04-20 17:41:49 -07:00
parent c5cfe001e8
commit 84e50ff0f0
4 changed files with 79 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
resources/icons/close.svg Normal file
View File

@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
<desc>Created with Fabric.js 1.7.22</desc>
<defs>
</defs>
<g transform="translate(128 128) scale(0.72 0.72)" style="">
<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(-175.05 -175.05) scale(3.89 3.89)" >
<path d="M 6 90 c -1.536 0 -3.071 -0.586 -4.243 -1.758 c -2.343 -2.343 -2.343 -6.142 0 -8.484 l 78 -78 c 2.342 -2.343 6.143 -2.343 8.484 0 c 2.344 2.343 2.344 6.142 0 8.485 l -78 78 C 9.071 89.414 7.536 90 6 90 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
<path d="M 84 90 c -1.535 0 -3.071 -0.586 -4.242 -1.758 l -78 -78 c -2.343 -2.343 -2.343 -6.142 0 -8.485 c 2.343 -2.343 6.143 -2.343 8.485 0 l 78 78 c 2.344 2.343 2.344 6.142 0 8.484 C 87.071 89.414 85.535 90 84 90 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

11
resources/icons/min.svg Normal file
View File

@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
<desc>Created with Fabric.js 1.7.22</desc>
<defs>
</defs>
<g transform="translate(128 128) scale(0.72 0.72)" style="">
<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(-175.05 -175.05) scale(3.89 3.89)" >
<path d="M 86.5 48.5 h -83 C 1.567 48.5 0 46.933 0 45 s 1.567 -3.5 3.5 -3.5 h 83 c 1.933 0 3.5 1.567 3.5 3.5 S 88.433 48.5 86.5 48.5 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
<path d="M 86.5 48.5 h -83 C 1.567 48.5 0 46.933 0 45 s 1.567 -3.5 3.5 -3.5 h 83 c 1.933 0 3.5 1.567 3.5 3.5 S 88.433 48.5 86.5 48.5 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

8
resources/index.html
View File

@ -6,6 +6,14 @@
<script src="js/index.js"></script> <script src="js/index.js"></script>
</head> </head>
<body> <body>
<div id="controlBar">
<div id="minBtn">
<img src="icons/min.svg" alt="Minimize" />
</div>
<div id="closeBtn">
<img src="icons/close.svg" />
</div>
</div>
<div id="halvesContainer"> <div id="halvesContainer">
<div id="firstHalf"> <div id="firstHalf">
<button class="playBtn" onclick="launchOfficial()">Play Official</button> <button class="playBtn" onclick="launchOfficial()">Play Official</button>

50
resources/style/index.css
View File

@ -5,6 +5,54 @@ body {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
#controlBar {
display: flex;
flex-direction: row;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 34px;
background-color: #141414;
z-index: 1;
}
#controlBar div {
color: #c3c3c3;
width: 20px;
vertical-align: middle;
text-align: center;
padding: 0px 6px;
margin: 0px 2px;
padding-top: 4px;
}
#controlBar div:hover {
cursor: pointer;
background-color: #353535;
}
#controlBar div img {
/* https://codepen.io/sosuke/pen/Pjoqqp */
filter: invert(95%) sepia(0%) saturate(18%) hue-rotate(153deg) brightness(88%) contrast(81%);
height: 70%;
vertical-align: middle;
}
#closeBtn:hover {
background-color: #ff0000 !important;
}
#closeBtn:hover img {
filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(142deg) brightness(107%) contrast(101%);
}
#minBtn {
/* Move all components to the right since this is the first button */
margin-left: auto !important;
}
.playBtn:hover, .smolBtn:hover { .playBtn:hover, .smolBtn:hover {
cursor: pointer; cursor: pointer;
} }
@ -119,7 +167,7 @@ body {
/* Move the second private button the near-bottom */ /* Move the second private button the near-bottom */
#secondControlContainer { #secondControlContainer {
position: relative; position: relative;
transform: translate(115px, 446px); transform: translate(115px, 436px);
width: 300px; width: 300px;
height: 60px; height: 60px;
} }