You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
133 lines
2.9 KiB
133 lines
2.9 KiB
/* /////////////////////////////////////////////////////////////////// */
|
|
*, ::before, ::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Minecraftia";
|
|
src: url("../fonts/Minecraftia-Regular.ttf") format("truetype");
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
}
|
|
/* /////////////////////////////////////////////////////////////////// */
|
|
html {
|
|
font: 18px "Minecraftia", Regular;
|
|
}
|
|
|
|
body {
|
|
height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
background-color: #fff;
|
|
/** background-image: url("https://i.ibb.co/bH3JY30/IE1G7Lr.png"); **/
|
|
background-image: url(../p/background.gif);
|
|
backdrop-filter: blur(3px);
|
|
background-size: cover;
|
|
background-position: center;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
.logo1 {
|
|
display: grid;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 10%;
|
|
}
|
|
|
|
/* Minecraft Style Menu */
|
|
.mc-menu {
|
|
--btn-size: 30pt;
|
|
display: grid;
|
|
grid-template-columns: var(--btn-size) calc(var(--btn-size) * 10) var(--btn-size);
|
|
grid-template-rows: repeat(3, var(--btn-size)) 16px var(--btn-size);
|
|
grid-template-areas: ". first ." ". second ." ". third ." ". . ." "lang fourth .";
|
|
grid-gap: 8px;
|
|
}
|
|
.mc-menu .mc-button:nth-child(1) {
|
|
grid-area: first;
|
|
}
|
|
.mc-menu .mc-button:nth-child(2) {
|
|
grid-area: second;
|
|
}
|
|
.mc-menu .mc-button:nth-child(3) {
|
|
grid-area: third;
|
|
}
|
|
.mc-menu .double {
|
|
grid-area: fourth;
|
|
}
|
|
.mc-menu .double .mc-button:nth-child(1) {
|
|
grid-area: left;
|
|
}
|
|
.mc-menu .double .mc-button:nth-child(2) {
|
|
grid-area: right;
|
|
}
|
|
.mc-menu .mc-button:nth-child(5) {
|
|
grid-area: lang;
|
|
}
|
|
.mc-menu .double {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 1fr;
|
|
grid-template-areas: "left right";
|
|
grid-gap: 8px;
|
|
}
|
|
|
|
/* Minecraft Style Button */
|
|
.mc-button {
|
|
height: var(--btn-size);
|
|
width: calc(var(--btn-size) * 10);
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
user-select: none;
|
|
/** background: #999 url("https://i.ibb.co/rb2TWXL/bgbtn.png") center/cover; **/
|
|
background: #999 url(../p/mc-button.png);
|
|
image-rendering: pixelated;
|
|
border: 2px solid #000;
|
|
/* Mouse over */
|
|
/* Button title */
|
|
/* Others */
|
|
}
|
|
.mc-button:hover .title {
|
|
background-color: rgba(100, 100, 255, 0.45);
|
|
text-shadow: 2px 2px #202013CC;
|
|
color: #FFFFA0;
|
|
}
|
|
.mc-button:active .title {
|
|
box-shadow: inset -2px -4px #0004, inset 2px 2px #FFF5;
|
|
}
|
|
.mc-button .title {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-bottom: 0px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #DDD;
|
|
text-shadow: 2px 2px #000A;
|
|
box-shadow: inset -2px -4px #0006, inset 2px 2px #FFF7;
|
|
}
|
|
.mc-button.full {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.mc-button.lang img {
|
|
width: 26px;
|
|
height: 26px;
|
|
}
|
|
.mc-button.lang .title {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
footer {
|
|
position: absolute;
|
|
bottom: 0;
|
|
text-align: center;
|
|
} |