azures04
6f2e5f81a8
Introduced GenericFilesService to fetch and validate required game files before launching. Updated launcher version to beta and added support for AuthlibInjector agent in launch options. Improved avatar rendering and button states in the UI, including pixelated avatar display and disabled state handling for logout during game launch.
391 lines
7.5 KiB
CSS
391 lines
7.5 KiB
CSS
main {
|
|
background-image: url("../img/wallpaper.png");
|
|
background-attachment: fixed;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position-y: center;
|
|
}
|
|
|
|
main > aside {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #2626261f;
|
|
backdrop-filter: blur(13px);
|
|
}
|
|
|
|
main > aside > nav {
|
|
position: absolute;
|
|
width: 80px;
|
|
height: 100%;
|
|
background-color: #414141;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 13px 0;
|
|
}
|
|
|
|
main > aside > nav > button {
|
|
font-size: larger;
|
|
margin-top: 20px;
|
|
margin-bottom: 10px;
|
|
filter: brightness(0.75);
|
|
}
|
|
|
|
main > aside > nav > *.active {
|
|
filter: brightness(1);
|
|
}
|
|
|
|
main > aside > nav > button:hover {
|
|
filter: brightness(0.90);
|
|
}
|
|
|
|
main > aside > nav > button:first-of-type {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
main > aside > nav > button:first-of-type,
|
|
main > aside > nav > button:first-of-type:hover {
|
|
filter: brightness(1);
|
|
}
|
|
|
|
main > aside > nav > button:first-of-type > img {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 5px;
|
|
image-rendering: pixelated;
|
|
image-rendering: crisp-edges;
|
|
}
|
|
|
|
main > aside > nav > button:nth-child(2) {
|
|
margin-top: auto;
|
|
}
|
|
|
|
main > aside > nav > button:last-child {
|
|
margin-top: auto;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
main > aside > nav > button:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
main > aside > nav > button:has(> i.fas.fa-sign-out-alt):not(:disabled):hover {
|
|
color: #ff4747;
|
|
}
|
|
|
|
main > aside > section.frames {
|
|
position: absolute;
|
|
left: 80px;
|
|
height: 100%;
|
|
width: calc(100% - 80px);
|
|
}
|
|
|
|
main > aside > section.frames > article.frame.game {
|
|
padding-top: 1.7em;
|
|
padding-left: 3em;
|
|
}
|
|
|
|
main > aside > section.frames > article.frame.game > h1 {
|
|
font-size: 48px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
main > aside > section.frames > article,
|
|
main > aside > section.frames > article.frame.dynmap > iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
main > aside > section.frames > article.frame.dynmap > iframe {
|
|
background-color: #000000;
|
|
}
|
|
|
|
button.play {
|
|
margin-top: 10px;
|
|
color: #ffffff;
|
|
width: 110px;
|
|
height: 33px;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
transition: .3s;
|
|
font-weight: 600;
|
|
border-radius: 50px;
|
|
background-color: #E89032;
|
|
}
|
|
|
|
button.play:hover {
|
|
filter: brightness(110%);
|
|
}
|
|
|
|
button.play:disabled {
|
|
cursor: not-allowed;
|
|
filter: grayscale(100%);
|
|
}
|
|
|
|
button.logout:disabled {
|
|
cursor: not-allowed;
|
|
filter: brightness(0.70);
|
|
}
|
|
|
|
button.play > i {
|
|
margin-right: 5px;
|
|
font-size: 14px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
details {
|
|
width: 96%;
|
|
min-height: 84px;
|
|
color: #ffffff;
|
|
cursor: pointer;
|
|
margin-left: 2%;
|
|
margin-right: 2%;
|
|
margin-top: 2%;
|
|
margin-bottom: 2%;
|
|
border-radius: 10px;
|
|
background: #2a2a2a80;
|
|
border: 3px solid #929292;
|
|
border-radius: 15px;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
details:nth-of-type(1) {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
details > summary {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
list-style: none;
|
|
flex-direction: row;
|
|
}
|
|
|
|
details > summary > div > i {
|
|
font-size: 54px;
|
|
margin-left: 30px;
|
|
margin-right: 30px;
|
|
}
|
|
|
|
details > summary > div {
|
|
height: 80px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
details > summary > div > h2 {
|
|
font-size: 17px;
|
|
}
|
|
|
|
details > summary > div > h3 {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
details > div {
|
|
cursor: default;
|
|
margin-left: 30px;
|
|
margin-right: 30px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
div.filePathSelector {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
input[type="text"] {
|
|
width: 87%;
|
|
height: 34px;
|
|
border: none;
|
|
padding-left: 15px;
|
|
border-radius: 10px;
|
|
color: #ffffff;
|
|
background-color: #262626b9;
|
|
margin-right: 0.5%;
|
|
}
|
|
|
|
div.filePathSelector > button {
|
|
width: 11%;
|
|
color: #ffffff;
|
|
border: none;
|
|
font-weight: 500;
|
|
height: 34px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
border-radius: 10px;
|
|
line-height: 18px;
|
|
background-color: #E89032;
|
|
}
|
|
|
|
div.filePathSelector > button > i {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
details.ram > div > h5 > span {
|
|
font-weight: 500;
|
|
}
|
|
|
|
details.ram > div > .ramSelector {
|
|
font-weight: 500;
|
|
}
|
|
|
|
input[type="range"] {
|
|
border: none;
|
|
outline: none;
|
|
accent-color: #E89032;
|
|
}
|
|
|
|
section.ramSelector {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
section.ramSelector > input[type="range"] {
|
|
width: calc(100% - ((30px * 2) + 80px));
|
|
}
|
|
|
|
div.container {
|
|
margin: 20px 20px 20px 20px;
|
|
border: 3px solid #929292;
|
|
background: #212121ce;
|
|
border-radius: 15px;
|
|
color: #fff;
|
|
padding: 20px 20px 20px 20px;
|
|
word-break: break-all;
|
|
overflow: auto;
|
|
}
|
|
|
|
div.logs {
|
|
width: calc(100% - 40px);
|
|
height: calc(100% - 40px);
|
|
}
|
|
|
|
div.profile {
|
|
width: calc(100% - 40px);
|
|
height: calc(100% - 40px);
|
|
}
|
|
|
|
div.profile {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
div.profile > section.skinview3d {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: calc(100% / 3);
|
|
height: 100%;
|
|
}
|
|
|
|
div.profile > section.cosmectics {
|
|
width: calc((100% / 3) * 2 - 20px);
|
|
height: 100%;
|
|
}
|
|
|
|
canvas#skin {
|
|
width: 85% !important;
|
|
height: 85% !important;
|
|
outline: none;
|
|
}
|
|
|
|
div.profile > section.cosmectics > article {
|
|
margin-bottom: 40px;
|
|
height: calc((100% / 2) - (103px + 10px));
|
|
}
|
|
|
|
div.profile > section.cosmectics > article.username {
|
|
height: 103px;
|
|
}
|
|
|
|
div.profile > section.cosmectics > article.username > div > button {
|
|
min-width: 70px;
|
|
width: 10%;
|
|
height: 34px;
|
|
border-radius: 5px;
|
|
background-color: #E89032;
|
|
}
|
|
|
|
div.profile > section.cosmectics > article.username > div {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
div.profile > section.cosmectics > article.username > div > button:hover {
|
|
filter: brightness(0.90);
|
|
}
|
|
|
|
div.profile > section.cosmectics > article.username > div > input {
|
|
height: 38px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
|
|
div.profile > section.cosmectics > article.skin > div.skinUpload {
|
|
margin-top: 10px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: calc(100% - 20px);
|
|
border: 4px dashed #7c7c7c;
|
|
border-radius: 5px;
|
|
background-color: #1d1d1dce;
|
|
}
|
|
|
|
div.profile > section.cosmectics > article.skin > div.skinUpload > * {
|
|
filter: brightness(0.90);
|
|
font-weight: 500;
|
|
}
|
|
|
|
div.profile > section.cosmectics > article.capes > div.capes {
|
|
width: 100%;
|
|
height: calc(100% - 40px);
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
border-radius: 5px;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
|
|
gap: 10px;
|
|
padding: 10px;
|
|
}
|
|
|
|
div.profile > section.cosmectics > article.capes > div.capes > div.cape {
|
|
width: 100%;
|
|
aspect-ratio: 10 / 16;
|
|
background-color: #b6b6b61f;
|
|
border-radius: 3px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
filter: brightness(0.75);
|
|
transition: .3s;
|
|
background-repeat: no-repeat;
|
|
image-rendering: pixelated;
|
|
background-size: 640% 200%;
|
|
background-position: 1.8% 6%;
|
|
}
|
|
|
|
div.profile > section.cosmectics > article.capes > div.capes > div.cape:hover {
|
|
filter: brightness(0.85);
|
|
}
|
|
|
|
div.profile > section.cosmectics > article.capes > div.capes > div.cape.active,
|
|
div.profile > section.cosmectics > article.capes > div.capes > div.cape.active:hover {
|
|
filter: brightness(1);
|
|
}
|
|
|
|
|
|
div.loader > div.full > div.loading {
|
|
background-color: #E89032;
|
|
}
|
|
|
|
div.loader > div.full {
|
|
background-color: transparent;
|
|
} |