833 lines
No EOL
15 KiB
CSS
833 lines
No EOL
15 KiB
CSS
@font-face {
|
|
font-family:"Pubg Sans Regular";
|
|
src:url("../fonts/PUBG_SANSd41d.eot?") format("eot"),
|
|
url("../fonts/PUBG_SANS.woff") format("woff"),
|
|
url("../fonts/PUBG_SANS.ttf") format("truetype"),
|
|
url("../fonts/PUBG_SANS.svg#PubgSans-Regular") format("svg");
|
|
font-weight:normal;
|
|
font-style:normal;
|
|
}
|
|
|
|
|
|
body {
|
|
font-family: 'Agency', sans-serif;
|
|
cursor: pointer;
|
|
font-size: larger;
|
|
}
|
|
|
|
|
|
|
|
/* For Buttons */
|
|
.noselect {
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.right-menu {
|
|
position: absolute;
|
|
margin-top: 3.3vh;
|
|
left: 21vw;
|
|
right: 0;
|
|
width: 70vw;
|
|
font-size: 3vh;
|
|
color: #fff;
|
|
display: flex;
|
|
text-transform: uppercase;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
/* border-bottom: 2px solid rgba(255, 255, 255, 0.5); */
|
|
}
|
|
|
|
.right-submenu {
|
|
position: absolute;
|
|
margin-top: 7.5vh;
|
|
left: 21.5vw;
|
|
right: 0;
|
|
width: 70vw;
|
|
font-size: 2.5vh;
|
|
color: #fff;
|
|
display: flex;
|
|
text-transform: uppercase;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
/* border-bottom: 2px solid rgba(255, 255, 255, 0.5); */
|
|
}
|
|
|
|
.right-submenu-item
|
|
{
|
|
margin: 0 1vw;
|
|
color: gray;
|
|
transition: color 0.2s ease, border-color 0.2s ease;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
|
|
.right-submenu-item.active{
|
|
color: #e3b62f;
|
|
}
|
|
|
|
.right-submenu-item:hover {
|
|
color: #e3b62f;
|
|
}
|
|
|
|
.right-menu-item
|
|
{
|
|
margin: 0 1vw;
|
|
color: gray;
|
|
transition: color 0.2s ease, border-color 0.2s ease;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
|
|
}
|
|
|
|
.right-menu-item.active{
|
|
color: #e3b62f;
|
|
border-bottom: #e3b62f solid 2px;
|
|
}
|
|
|
|
.right-menu-item:hover {
|
|
color: #e3b62f;
|
|
}
|
|
|
|
.title-text {
|
|
font-family: 'PUBG Sans Regular';
|
|
text-shadow: #000 0.1em 0.1em 0.2em;
|
|
color: white;
|
|
font-size: 5.5vh;
|
|
margin-top: 2vh;
|
|
margin-left: 2vh;
|
|
position: fixed;
|
|
}
|
|
|
|
/* SANDUBAO EDITION TEXT */
|
|
.subtitle-text {
|
|
font-family: 'PUBG Sans Regular';
|
|
text-shadow: #000 0.1em 0.1em 0.2em;
|
|
color: Chocolate;
|
|
font-size: 3.5vh;
|
|
margin-top: 8vh;
|
|
margin-left: 6vh;
|
|
position: fixed;
|
|
}
|
|
|
|
.bottom-text {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
font-size: 1.5vh;
|
|
color: #fff;
|
|
text-shadow: #000 0.1em 0.1em 0.2em;
|
|
}
|
|
|
|
.game-play-container {
|
|
position: fixed;
|
|
bottom: 0;
|
|
padding: 0vh;
|
|
margin: 2vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
|
|
/* Yellow button with borders */
|
|
.join-server-button {
|
|
background-color: rgba(227, 182, 47, 0.5);
|
|
/* border: 2px solid darkgray; */
|
|
font-family: 'Agency';
|
|
padding: 1vh 0vh 1vh 0vh;
|
|
width: 20vh;
|
|
color: #fff;
|
|
font-size: 4vh;
|
|
cursor: pointer;
|
|
border: 2px solid rgba(227, 182, 47, 1);
|
|
border-radius: 0px;
|
|
text-align: center;
|
|
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
|
|
}
|
|
|
|
.join-server-button:hover {
|
|
background-color: rgba(227, 182, 47, 0.7);
|
|
/* color: #FFF; */
|
|
}
|
|
|
|
/* 平铺服务器区域按钮 */
|
|
.join-server-container {
|
|
display: flex;
|
|
padding: 0;
|
|
margin-bottom: 0vh;
|
|
width: 20vh;
|
|
flex-direction: column;
|
|
color: #fff;
|
|
/* justify-content:space-between; */
|
|
}
|
|
|
|
.sel-server-button {
|
|
font-family: 'Agency';
|
|
margin-bottom: -0.25vh;
|
|
font-size: 2vh;
|
|
text-align: left;
|
|
text-indent: 0.5vw;
|
|
padding: 0.2vh 0vh 0.2vh 0vh;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
border: 1px solid rgba(255, 255, 255, 0.5);
|
|
color: gray;
|
|
}
|
|
|
|
.sel-server-button.active {
|
|
color: rgba(227, 182, 47, 1);
|
|
}
|
|
|
|
.side-container {
|
|
position: fixed;
|
|
left: 75vw;
|
|
bottom: 2vh;
|
|
width: 25vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: #fff;
|
|
}
|
|
|
|
.discord-card {
|
|
background: rgba(108, 69, 147, 0.5);
|
|
border-left: 10px solid rgb(255, 255, 255);
|
|
padding: 2vh;
|
|
}
|
|
|
|
.discord-card > .title {
|
|
font-size: 3vh;
|
|
padding: 1vh;
|
|
color: #fff;
|
|
z-index: 9999;
|
|
display: flex;
|
|
justify-content: left center;
|
|
align-items: safe center;
|
|
}
|
|
|
|
.discord-card > .content {
|
|
font-size: 2vh;
|
|
padding: 1vh;
|
|
color: #fff;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.discord-card:hover {
|
|
color: rgb(38, 30, 45);
|
|
}
|
|
|
|
.discord-icon-bg {
|
|
width: 5vh;
|
|
padding-bottom: 1vh;
|
|
color: #563d5f;
|
|
}
|
|
|
|
|
|
|
|
.custom-match-title-text-create
|
|
{
|
|
font-family: 'PUBG Sans Regular';
|
|
text-shadow: #000 0.1em 0.1em 0.2em;
|
|
color: white;
|
|
font-size: 4vh;
|
|
margin-top: 15vh;
|
|
margin-left: 5vh;
|
|
position: absolute;
|
|
}
|
|
|
|
.custom-match-title-text-select-mode
|
|
{
|
|
position: absolute;
|
|
top: 30vh;
|
|
left: 5vh;
|
|
|
|
font-family: 'PUBG Sans Regular';
|
|
text-shadow: #000 0.1em 0.1em 0.2em;
|
|
color: white;
|
|
font-size: 2.5vh;
|
|
|
|
display: flex; /* para alinhar imagem e texto */
|
|
align-items: center;
|
|
gap: 2vh; /* espaço entre ícone e texto */
|
|
}
|
|
|
|
.custom-match-title-text-select-mode .step-icon
|
|
{
|
|
width: 3vh; /* Deixa um pouco mais grossa (maior) */
|
|
height: 3vh;
|
|
object-fit: contain; /* Garante proporção */
|
|
display: block;
|
|
|
|
/* Alinhamento vertical fino */
|
|
position: relative;
|
|
top: 0.1vh; /* Ajuste fino, pode testar com 0.1~0.3 */
|
|
|
|
filter: invert(58%) sepia(93%) saturate(750%) hue-rotate(-20deg) drop-shadow(0 0 0.2vh orange) brightness(1.2);
|
|
}
|
|
|
|
.custom-match-title-text-preset
|
|
{
|
|
position: absolute;
|
|
top: 30vh;
|
|
left: 50vh;
|
|
|
|
font-family: 'PUBG Sans Regular';
|
|
text-shadow: #000 0.1em 0.1em 0.2em;
|
|
color: white;
|
|
font-size: 2.5vh;
|
|
|
|
|
|
display: flex; /* para alinhar imagem e texto */
|
|
align-items: center;
|
|
gap: 2vh; /* espaço entre ícone e texto */
|
|
}
|
|
|
|
.custom-match-title-text-preset .step-icon
|
|
{
|
|
width: 3vh; /* Deixa um pouco mais grossa (maior) */
|
|
height: 3vh;
|
|
object-fit: contain; /* Garante proporção */
|
|
display: block;
|
|
|
|
/* Alinhamento vertical fino */
|
|
position: relative;
|
|
top: 0.1vh; /* Ajuste fino, pode testar com 0.1~0.3 */
|
|
|
|
filter: invert(58%) sepia(93%) saturate(750%) hue-rotate(-20deg) drop-shadow(0 0 0.2vh orange) brightness(1.2);
|
|
}
|
|
|
|
.custom-match-title-text-options
|
|
{
|
|
position: absolute;
|
|
top: 30vh;
|
|
left: 90vh;
|
|
|
|
|
|
font-family: 'PUBG Sans Regular';
|
|
text-shadow: #000 0.1em 0.1em 0.2em;
|
|
color: white;
|
|
font-size: 2.5vh;
|
|
|
|
display: flex; /* para alinhar imagem e texto */
|
|
align-items: center;
|
|
gap: 2vh; /* espaço entre ícone e texto */
|
|
}
|
|
|
|
.custom-match-title-text-options .step-icon
|
|
{
|
|
width: 3vh; /* Deixa um pouco mais grossa (maior) */
|
|
height: 3vh;
|
|
object-fit: contain; /* Garante proporção */
|
|
display: block;
|
|
|
|
/* Alinhamento vertical fino */
|
|
position: relative;
|
|
top: 0.1vh; /* Ajuste fino, pode testar com 0.1~0.3 */
|
|
|
|
filter: invert(58%) sepia(93%) saturate(750%) hue-rotate(-20deg) drop-shadow(0 0 0.2vh orange) brightness(1.2);
|
|
}
|
|
|
|
|
|
.radio-button:hover {
|
|
color: #FFC107;
|
|
}
|
|
|
|
.radio-button:checked {
|
|
color: #FFC107;
|
|
}
|
|
|
|
|
|
|
|
.hide {
|
|
display: none;
|
|
}
|
|
|
|
.debug-text {
|
|
position: fixed;
|
|
bottom: 50vh;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
font-size: 1.5vh;
|
|
color: #fff;
|
|
background-color: rgba(255, 255, 255, 0.363);
|
|
text-shadow: #000 0.1em 0.1em 0.2em;
|
|
}
|
|
|
|
.serial-text {
|
|
position: fixed;
|
|
bottom: 3vh;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
font-size: 1.5vh;
|
|
color: rgba(255, 255, 255, 0.5)
|
|
}
|
|
|
|
|
|
|
|
.player-info-container {
|
|
font-family: 'Overpass-Reg', sans-serif;
|
|
position: fixed;
|
|
left: 1.5vw;
|
|
top: 16vh;
|
|
width: 15vw; /* Maior largura para acomodar o nome do jogador */
|
|
font-size: 2vh;
|
|
display: flex;
|
|
flex-direction: row;
|
|
color: #fff;
|
|
align-items: center;
|
|
}
|
|
|
|
.user-info {
|
|
padding-left: 1vw;
|
|
color: #fff;
|
|
white-space: nowrap; /* Impede quebra de linha */
|
|
overflow: hidden; /* Garante que o texto não ultrapasse */
|
|
text-overflow: ellipsis; /* Exibe "..." se o texto for muito longo */
|
|
max-width: 8vw; /* Define um limite máximo para o comprimento do nome */
|
|
margin-right: 0.8vw; /* Garante um pequeno espaço entre o nome e o ícone */
|
|
}
|
|
|
|
.bp-info {
|
|
font-family: 'Agency';
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.bp-info > strong {
|
|
color: #FFC107;
|
|
padding-right: 0.5vw;
|
|
}
|
|
|
|
.BP-ICO-BETA {
|
|
height: 1.9em;
|
|
width: auto;
|
|
}
|
|
|
|
.player-count {
|
|
padding-left: 1vh;
|
|
font-size: 2vh;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.play_custom_match_box_session_name
|
|
{
|
|
position: absolute;
|
|
top: 075px;
|
|
left: 154%;
|
|
|
|
transform: translateX(-50%);
|
|
width: 600px;
|
|
height: 50px;
|
|
background: rgba(70, 70, 70, 0.7);
|
|
padding: 12px 16px;
|
|
color: white;
|
|
font-family: sans-serif;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
|
|
.play_custom_match_box_session_name .icon
|
|
{
|
|
width: 24px;
|
|
height: 24px;
|
|
background-size: contain;
|
|
}
|
|
|
|
.play_custom_match_box_session_name input[type="text"]
|
|
{
|
|
flex: 1;
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
color: white;
|
|
font-size: 16px;
|
|
}
|
|
|
|
|
|
|
|
|
|
.modo-box
|
|
{
|
|
|
|
background: rgba(60, 60, 60, 0.5);
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
margin: 5px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
color: white;
|
|
border: 2px solid transparent;
|
|
transition: 0.2s;
|
|
min-width: 20vh; /* Largura mínima opcional para padronizar */
|
|
}
|
|
|
|
.modo-box.ativo
|
|
{
|
|
border-color: white;
|
|
background: rgba(100, 100, 100, 0.6);
|
|
}
|
|
|
|
.modos-container
|
|
{
|
|
position: absolute;
|
|
top: 35vh; /* Um pouco abaixo do SELECT MODE (ajuste conforme necessário) */
|
|
left: 5vh; /* Mesmo alinhamento horizontal do SELECT MODE */
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.modo-img
|
|
{
|
|
width: 100%;
|
|
height: 200px;
|
|
background-size: cover;
|
|
margin-top: 10px;
|
|
display: none;
|
|
}
|
|
|
|
.modo-img.ativo
|
|
{
|
|
display: block;
|
|
}
|
|
|
|
|
|
.custom_match_options_selection
|
|
{
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: rgba(60, 60, 60, 0.6);
|
|
padding: 10px 15px;
|
|
border-radius: 6px;
|
|
color: white;
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.opcao span
|
|
{
|
|
cursor: pointer;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.options-container
|
|
{
|
|
position: absolute;
|
|
top: 35vh; /* Logo abaixo do título OPTIONS */
|
|
left: 90vh;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1vh; /* Espaço entre os elementos */
|
|
width: 30vh; /* Largura opcional */
|
|
}
|
|
|
|
.valor
|
|
{
|
|
font-weight: bold;
|
|
}
|
|
|
|
.barra
|
|
{
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
background: rgba(60, 60, 60, 0.6);
|
|
padding: 10px 15px;
|
|
border-radius: 6px;
|
|
margin: 8px 0;
|
|
color: white;
|
|
gap: 20px;
|
|
|
|
}
|
|
|
|
.barra input[type=range]
|
|
{
|
|
flex: 1;
|
|
}
|
|
|
|
.barra span
|
|
{
|
|
width: 40px;
|
|
text-align: right;
|
|
}
|
|
|
|
.barra label
|
|
{
|
|
min-width: 100px; /* largura fixa opcional */
|
|
margin-right: 10px; /* afasta do input */
|
|
font-weight: bold; /* opcional, deixa o texto mais forte */
|
|
}
|
|
|
|
|
|
.custom-match-button-create
|
|
{
|
|
position: absolute;
|
|
top: 85vh; /* ou qualquer valor que desejar */
|
|
left: 5vh;
|
|
|
|
width: 20vh; /* largura relativa à altura da tela */
|
|
height: 6vh; /* altura relativa */
|
|
|
|
background: rgba(180, 145, 2, 1.5);
|
|
/* border-right: 10px solid rgb(255, 255, 255); */
|
|
border-radius: 100px;
|
|
padding: 1vh;
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
box-sizing: border-box; /* garante que padding não ultrapasse tamanho */
|
|
|
|
}
|
|
|
|
.custom-match-button-create > .title {
|
|
font-size: 2.5vh;
|
|
padding: 0.5vh;
|
|
color: #000000;
|
|
z-index: 9999;
|
|
display: flex;
|
|
text-align: center;
|
|
justify-content: center;
|
|
align-items: safe center;
|
|
}
|
|
|
|
.custom-match-button-create > .content
|
|
{
|
|
font-size: 1.5vh;
|
|
padding: 0.5vh;
|
|
color: #fff;
|
|
z-index: 9999;
|
|
text-align: center;
|
|
}
|
|
|
|
.custom-match-button-create :hover
|
|
{
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
|
|
|
|
|
|
/* Version ALERT */
|
|
|
|
.pubg-client-ver{
|
|
position:absolute;
|
|
bottom:.55555556vh;
|
|
left:5.55555556vh;
|
|
display:inline-block;
|
|
text-align:center;
|
|
color:#fff;
|
|
font-weight:400;
|
|
pointer-events:none;
|
|
font-size:1.2962963vh
|
|
}
|
|
|
|
|
|
/* test WARDROBE */
|
|
|
|
/* test top buttons in main lobby */
|
|
|
|
/* user-info-section.css */
|
|
/*.user-info
|
|
{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
padding: 10px;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
border-radius: 5px;
|
|
}*/
|
|
|
|
.user-info
|
|
{
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 4.16666667vh 5.55555556vh 0 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.user-info-hidden {
|
|
display: none;
|
|
}
|
|
|
|
/*
|
|
.user-avatar {
|
|
position: relative;
|
|
width: 50px;
|
|
height: 50px;
|
|
}*/
|
|
|
|
.user-avatar
|
|
{
|
|
display: inline-flex;
|
|
position: relative;
|
|
}
|
|
|
|
.user-avatar img
|
|
{
|
|
width: 3.7037037vh;
|
|
height: 3.7037037vh;
|
|
border-radius: .27777778vh;
|
|
border: .09259259vh solid #707070;
|
|
/* background: url(resources/ico-avatar.e7ba603….png) center center / cover no-repeat #2f2f2f;
|
|
*/
|
|
background: url() center center / cover no-repeat #2f2f2f;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.user-avatar
|
|
.online
|
|
{
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: .55555556vh;
|
|
height: .55555556vh;
|
|
border: .09259259vh solid #818181;
|
|
border-radius: 50%;
|
|
background-color: #7be300;
|
|
}
|
|
|
|
.user-avatar
|
|
.offline
|
|
{
|
|
background-color: #f44336;
|
|
}
|
|
|
|
/*
|
|
.icon-attendance-book,
|
|
.icon-pcp,
|
|
.icon-patchnote,
|
|
.icon-setting
|
|
{
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
color: #fff;
|
|
transition: all 0.3s;
|
|
}*/
|
|
|
|
.user-info
|
|
i.disabled
|
|
{
|
|
cursor: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.user-info
|
|
i
|
|
{
|
|
/*
|
|
margin-left: 1.66666667vh;
|
|
width: 2.96296296vh;
|
|
height: 2.96296296vh;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
*/
|
|
}
|
|
|
|
/*
|
|
.icon-attendance-book,
|
|
.icon-pcp,
|
|
.icon-patchnote,
|
|
.icon-setting
|
|
{
|
|
margin-left: 1.66666667vh;
|
|
|
|
/*width: 2.96296296vh;
|
|
height: 2.96296296vh;*
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
}*/
|
|
|
|
|
|
|
|
|
|
|
|
/* currencies-section.css */
|
|
.user-info
|
|
.currencies-wrapper
|
|
{
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
top: 9.25925926vh;
|
|
right: 5.55555556vh;
|
|
|
|
}
|
|
|
|
.user-info
|
|
.currencies-wrapper
|
|
.currency
|
|
{
|
|
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: .09259259vh;
|
|
margin-left: 1.48148148vh;
|
|
font-size: 2.31481481vh;
|
|
font-weight: 700;
|
|
text-shadow: .04em .04em .16em #6b6b6b;
|
|
|
|
}
|
|
|
|
.user-info
|
|
.currencies-wrapper
|
|
.currency
|
|
.bp-unit
|
|
{
|
|
margin-right: .46296296vh;
|
|
color: #f1cc35;
|
|
text-shadow: .04em .04em .16em #4d5464;
|
|
}
|
|
|
|
.user-info
|
|
.currencies-wrapper
|
|
.currency
|
|
.currency-img
|
|
{
|
|
width: 2.96296296vh;
|
|
height: 2.96296296vh;
|
|
padding-top: .27777778vh;
|
|
margin-right: .46296296vh;
|
|
}
|
|
|
|
|
|
.pubg-font {
|
|
font-family: 'PUBG Font', 'Arial Narrow', Arial, sans-serif;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
} |