2676 lines
55 KiB
CSS
2676 lines
55 KiB
CSS
#header-content #search-players-container {
|
|
width: 82.4074vh;
|
|
height: 9.2593vh;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
#search-players-container input {
|
|
width: 52.5vh;
|
|
height: 1.1111vh;
|
|
|
|
border-radius: .7292vw;
|
|
outline: 0;
|
|
border: 0;
|
|
|
|
padding-left: 1.7593vh;
|
|
padding-top: 1.7593vh;
|
|
padding-bottom: 1.7593vh;
|
|
|
|
background-image: url(img/SearchPlayersBg.png);
|
|
background-size: cover;
|
|
background-position: center;
|
|
|
|
font-size: .8333vw;
|
|
font-weight: 400;
|
|
color: white;
|
|
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
input:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
#search-players-container input::placeholder {
|
|
font-size: .8333vw;
|
|
font-weight: 400;
|
|
color: rgba(255, 255, 255, 0.30);
|
|
}
|
|
|
|
#right-page-container #player-categories-container {
|
|
width: 100%;
|
|
height: 3.2407vh;
|
|
|
|
margin-top: 1.3889vh;
|
|
|
|
display: flex;
|
|
}
|
|
|
|
#player-categories-container #player-categories {
|
|
width: 63.2407vh;
|
|
height: 3.2407vh;
|
|
|
|
margin-left: 3.4259vh;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#player-categories-container #registered-characters-count {
|
|
width: 49.2593vh;
|
|
height: 3.2407vh;
|
|
|
|
display: flex;
|
|
justify-content: right;
|
|
align-items: center;
|
|
|
|
font-size: .7813vw;
|
|
font-family: "SF Pro Display";
|
|
opacity: 0.40;
|
|
}
|
|
|
|
#player-categories #player-category {
|
|
width: 6.2037vh;
|
|
height: 3.2407vh;
|
|
|
|
border-radius: .4688vw;
|
|
|
|
background: rgba(0, 0, 0);
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
|
|
font-family: "SF Pro Display";
|
|
font-size: .7813vw;
|
|
|
|
opacity: 0.20;
|
|
transition: 0.1s;
|
|
|
|
cursor: pointer;
|
|
}
|
|
|
|
#player-categories #player-category.active,
|
|
#player-categories #player-category:hover {
|
|
transition: 0.1s;
|
|
opacity: 1;
|
|
background: linear-gradient(90deg, rgba(188, 148, 255, 0.51) 0%, rgba(154, 127, 211, 0.51) 100%);
|
|
box-shadow: 0px 0px 3.5417vw 0px #876EB2;
|
|
}
|
|
|
|
#right-page-container #real-page-content {
|
|
width: 100%;
|
|
height: 55.3704vh;
|
|
|
|
margin-top: 2.3148vh;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
#real-page-content #real-page-container {
|
|
width: 112.5vh;
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#real-page-container #players-container {
|
|
width: 86.5741vh;
|
|
max-height: 100%;
|
|
|
|
overflow-y: auto;
|
|
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.9259vh;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
#player-container #online-status-box {
|
|
width: 20.463vh;
|
|
height: auto;
|
|
|
|
display: flex;
|
|
justify-content: right;
|
|
|
|
position: absolute;
|
|
|
|
margin-top: 1.1111vh;
|
|
}
|
|
|
|
#player-container #player-information-container {
|
|
height: 4.6296vh;
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
|
|
margin-top: 1.3889vh;
|
|
}
|
|
|
|
#player-information-container #player-icon-border {
|
|
width: 4.6296vh;
|
|
height: 4.6296vh;
|
|
|
|
border: .1042vw solid #CC39FF;
|
|
border-radius: 50%;
|
|
|
|
margin-left: 1.3889vh;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
#player-icon-border #player-icon {
|
|
background-position: center;
|
|
background-size: cover;
|
|
|
|
width: 3.8889vh;
|
|
height: 3.8889vh;
|
|
|
|
border-radius: 0%;
|
|
}
|
|
|
|
#player-information-container #player-text-information-box {
|
|
margin-left: 1.3889vh;
|
|
|
|
width: auto;
|
|
height: 4.6296vh;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
#player-text-information-box span.playerName {
|
|
font-size: .625vw;
|
|
font-weight: 600;
|
|
}
|
|
|
|
#player-text-information-box span.playerId {
|
|
margin-top: 0.2778vh;
|
|
opacity: 0.4;
|
|
font-size: .625vw;
|
|
font-weight: 600;
|
|
}
|
|
|
|
#player-container #player-credentials-container {
|
|
width: 100%;
|
|
height: auto;
|
|
|
|
margin-top: 1.5741vh;
|
|
}
|
|
|
|
#player-credentials-container #player-credential {
|
|
width: 90%;
|
|
height: 1.1111vh;
|
|
|
|
margin-left: 1.7593vh;
|
|
margin-top: 1.8519vh;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#player-credential span.credential {
|
|
font-size: .625vw;
|
|
font-weight: 600;
|
|
|
|
margin-left: 1.3889vh;
|
|
}
|
|
|
|
#player-container #seperate-line-container {
|
|
width: 100%;
|
|
height: 0.0926vh;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
margin-top: 1.3889vh;
|
|
}
|
|
|
|
#player-container #inspect-content {
|
|
width: 100%;
|
|
margin-top: 0.9259vh;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
font-size: .625vw;
|
|
}
|
|
|
|
#seperate-line-container #seperate-line {
|
|
width: 14.537vh;
|
|
height: 0.0926vh;
|
|
|
|
background-color: white;
|
|
opacity: 0.07;
|
|
}
|
|
|
|
#deleted-characters-button #button-content {
|
|
width: 14.6296vh;
|
|
height: 14.6296vh;
|
|
}
|
|
|
|
#button-content span.button-title {
|
|
font-size: 1.6667vw;
|
|
opacity: 0.5;
|
|
font-weight: 600;
|
|
}
|
|
|
|
#button-content #seperate-line {
|
|
margin-top: 4.6296vh;
|
|
|
|
width: 14.537vh;
|
|
height: 0.0926vh;
|
|
|
|
background-color: white;
|
|
|
|
opacity: 0.41;
|
|
}
|
|
|
|
#button-content span.button-desc {
|
|
font-size: .625vw;
|
|
font-weight: 600;
|
|
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Player Info CSS */
|
|
|
|
#right-page-container #info-content-container {
|
|
width: 100%;
|
|
height: 60.8333vh;
|
|
|
|
margin-top: 3.7037vh;
|
|
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
#info-content-container #info-player-info-container {
|
|
width: 76.3889vh;
|
|
height: 60.8333vh;
|
|
|
|
background: rgba(0, 0, 0, 0.2);
|
|
|
|
border-radius: 1.6146vw .4688vw .4688vw .4688vw;
|
|
|
|
display: flex;
|
|
}
|
|
|
|
#info-player-info-container #info-page-content {
|
|
width: 70.3704vh;
|
|
height: 60.8333vh;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
#info-page-content #ipage-container {
|
|
width: 65.5556vh;
|
|
height: 60.8333vh;
|
|
}
|
|
|
|
#ipage-container #ipage-player-info-container {
|
|
width: 100%;
|
|
height: 6.1111vh;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
#ipage-player-info-container #ipage-player-name-and-status {
|
|
width: 50%;
|
|
height: 3.5185vh;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
#ipage-player-info-container #ipage-player-vip-action-container {
|
|
width: 50%;
|
|
height: 3.5185vh;
|
|
|
|
display: flex;
|
|
justify-content: right;
|
|
}
|
|
|
|
#ipage-player-vip-action-container #ipage-player-vip-action {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
width: 10.5556vh;
|
|
height: 3.5185vh;
|
|
|
|
border-radius: .3646vw;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
transition: 0.3s;
|
|
}
|
|
|
|
#ipage-player-vip-action-container #ipage-player-vip-action:hover {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
transition: 0.3s;
|
|
}
|
|
|
|
#ipage-player-vip-action span {
|
|
font-size: .625vw;
|
|
margin-left: 1.1111vh;
|
|
font-weight: 600;
|
|
}
|
|
|
|
#ipage-player-vip-action #ipage-player-vip-icon {
|
|
width: 1.6667vh;
|
|
height: 1.2963vh;
|
|
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
#ipage-player-vip-action.take #ipage-player-vip-icon {
|
|
background-image: url(img/OrangeVIP.png);
|
|
}
|
|
|
|
#ipage-player-vip-action.give #ipage-player-vip-icon {
|
|
background-image: url(img/VIPBadge.png);
|
|
}
|
|
|
|
#ipage-player-vip-action.take span {
|
|
color: #FF6230;
|
|
}
|
|
|
|
#ipage-player-vip-action.give span {
|
|
color: #FFDE30;
|
|
}
|
|
|
|
#ipage-player-name-and-status span.playerName {
|
|
font-size: .625vw;
|
|
|
|
font-weight: 600;
|
|
}
|
|
|
|
#ipage-player-name-and-status span.onlineStatus {
|
|
font-size: .625vw;
|
|
|
|
font-weight: 600;
|
|
}
|
|
|
|
#ipage-container #ipage-seperator {
|
|
width: 100%;
|
|
height: 0.0926vh;
|
|
|
|
background-color: rgba(255, 255, 255, 0.07);
|
|
}
|
|
|
|
#ipage-container #ipage-info-page-container {
|
|
width: 100%;
|
|
height: 54.7222vh;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#ipage-info-page-container span.title {
|
|
width: 100%;
|
|
font-size: 1.0417vw;
|
|
|
|
margin-top: 2.3148vh;
|
|
margin-bottom: 2.3148vh;
|
|
}
|
|
|
|
#ipage-info-page-container #ipage-all-boxes {
|
|
width: 100%;
|
|
height: 45.0926vh;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#ipage-all-boxes #ipage-left-boxes {
|
|
width: 28.1481vh;
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#ipage-left-boxes #ipage-left-up-box {
|
|
width: 28.1481vh;
|
|
height: 26.4815vh;
|
|
|
|
border-radius: .5208vw;
|
|
|
|
background-image: url(img/IDLicencesBg.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
#ipage-left-up-box #ipage-left-up-box-container {
|
|
width: 23.5185vh;
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#ipage-left-up-box-container span.boxTitle {
|
|
font-size: 1.0417vw;
|
|
font-weight: 500;
|
|
|
|
margin-top: 0.9259vh;
|
|
}
|
|
|
|
#ipage-left-up-box-container #ipage-input-box {
|
|
height: 4.3519vh;
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
margin-top: 0.9259vh;
|
|
}
|
|
|
|
#ipage-left-up-box-container #ipage-input-box span.inputTitle {
|
|
font-size: .5208vw;
|
|
font-weight: 500;
|
|
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
#ipage-left-up-box-container #ipage-input-box input {
|
|
padding: 0.8333vh;
|
|
padding-left: 3.1481vh;
|
|
padding-right: 3.1481vh;
|
|
|
|
border-radius: .3646vw;
|
|
|
|
height: 1.1111vh;
|
|
border: 0;
|
|
|
|
margin-top: 0.9259vh;
|
|
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
background-color: transparent;
|
|
|
|
font-size: .625vw;
|
|
color: white;
|
|
font-weight: 600;
|
|
|
|
cursor: url(../../../img/cursor.png), auto;
|
|
}
|
|
|
|
#ipage-left-up-box-container #ipage-input-box input.accountId {
|
|
background-image: url(img/AccountIdInputBg.png);
|
|
}
|
|
|
|
#ipage-left-up-box-container #ipage-input-box input.discordId {
|
|
background-image: url(img/DiscordIdInputBg.png);
|
|
}
|
|
|
|
#ipage-left-up-box-container #ipage-input-box input.steamId {
|
|
background-image: url(img/SteamIdInputBg.png);
|
|
}
|
|
|
|
#ipage-left-up-box-container #ipage-input-box input.rockstar {
|
|
background-image: url(img/RockstarLicenseInputBg.png);
|
|
}
|
|
|
|
#ipage-left-down-box-container #ipage-input-box {
|
|
height: 4.3519vh;
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
margin-top: 0.9259vh;
|
|
}
|
|
|
|
#ipage-left-down-box-container #ipage-input-box span.inputTitle {
|
|
font-size: .5208vw;
|
|
font-weight: 500;
|
|
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
#ipage-left-down-box-container #ipage-input-box #ipage-input-container {
|
|
width: 100%;
|
|
height: 2.7778vh;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 0.9259vh;
|
|
}
|
|
|
|
#ipage-left-down-box-container #ipage-input-box #ipage-input-container input {
|
|
padding: 0.8333vh;
|
|
padding-left: 3.1481vh;
|
|
|
|
width: 16.4vh;
|
|
height: 1.1111vh;
|
|
|
|
border: 0;
|
|
border-radius: .3646vw;
|
|
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
background-color: transparent;
|
|
|
|
font-size: .625vw;
|
|
color: white;
|
|
font-weight: 600;
|
|
|
|
cursor: url(../../../img/cursor.png), auto;
|
|
|
|
transition: 0.2s;
|
|
}
|
|
|
|
#ipage-left-down-box-container #ipage-input-box #ipage-input-container.editing input {
|
|
background-color: rgba(204, 57, 255, 0.20);
|
|
color: rgba(255, 255, 255, 0.50);
|
|
|
|
transition: 0.2s;
|
|
}
|
|
|
|
#ipage-left-down-box-container #ipage-input-box #ipage-input-container.editing #ipage-edit-button {
|
|
background-color: rgba(204, 57, 255, 0.20);
|
|
|
|
transition: 0.2s;
|
|
}
|
|
|
|
#ipage-left-down-box-container #ipage-input-box #ipage-input-container.editing #ipage-edit-button #ipage-edit-icon {
|
|
width: 1.1111vh;
|
|
height: 1.1111vh;
|
|
|
|
background-image: url(img/TikIcon.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
transition: 0.2s;
|
|
}
|
|
|
|
#ipage-left-down-box-container #ipage-input-box #ipage-input-container input.job {
|
|
background-image: url(img/JobInputBg.png);
|
|
}
|
|
|
|
#ipage-left-down-box-container #ipage-input-box #ipage-input-container input.faction {
|
|
background-image: url(img/FactionInputBg.png);
|
|
}
|
|
|
|
#ipage-left-down-box-container #ipage-input-box #ipage-input-container #ipage-edit-button {
|
|
width: 2.7778vh;
|
|
height: 2.7778vh;
|
|
|
|
border-radius: .3646vw;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
transition: 0.2s;
|
|
}
|
|
|
|
#ipage-left-down-box-container #ipage-input-box #ipage-input-container #ipage-edit-button #ipage-edit-icon {
|
|
width: 1.3889vh;
|
|
height: 1.3889vh;
|
|
|
|
background-image: url(img/EditButtonIcon.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
transition: 0.2s;
|
|
}
|
|
|
|
#ipage-left-boxes #ipage-left-down-box {
|
|
width: 28.1481vh;
|
|
height: 16.7593vh;
|
|
|
|
border-radius: .5208vw;
|
|
|
|
background-image: url(img/JobFactionBg.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
#ipage-left-down-box #ipage-left-down-box-container {
|
|
width: 23.5185vh;
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#ipage-left-down-box-container span.boxTitle {
|
|
font-size: 1.0417vw;
|
|
font-weight: 500;
|
|
|
|
margin-top: 0.9259vh;
|
|
}
|
|
|
|
#ipage-all-boxes #ipage-right-box {
|
|
width: 35.5556vh;
|
|
height: 100%;
|
|
|
|
border-radius: .5208vw;
|
|
|
|
background-image: url(img/CharacterInfoBg.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
transition: 0.2s;
|
|
}
|
|
|
|
#ipage-right-box #ipage-right-box-container {
|
|
width: 30.9259vh;
|
|
height: 100%;
|
|
}
|
|
|
|
#ipage-right-box-container #ipage-right-title-container {
|
|
width: 100%;
|
|
height: auto;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
#ipage-right-box-container #ipage-input-box {
|
|
height: 4.3519vh;
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
margin-top: 0.9259vh;
|
|
|
|
margin-top: 1.2963vh;
|
|
}
|
|
|
|
#ipage-right-box-container #ipage-input-box span.inputTitle {
|
|
font-size: .5208vw;
|
|
font-weight: 500;
|
|
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
#ipage-right-box-container #ipage-input-box #ipage-input-container {
|
|
width: 100%;
|
|
height: 2.7778vh;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 0.9259vh;
|
|
}
|
|
|
|
#ipage-right-box-container #ipage-input-box #ipage-input-container input {
|
|
padding: 0.8333vh;
|
|
padding-left: 3.1481vh;
|
|
|
|
width: 23.7963vh;
|
|
height: 1.1111vh;
|
|
|
|
border: 0;
|
|
border-radius: .3646vw;
|
|
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
background-color: transparent;
|
|
|
|
font-size: .625vw;
|
|
color: white;
|
|
font-weight: 600;
|
|
|
|
cursor: url(../../../img/cursor.png), auto;
|
|
|
|
transition: 0.2s;
|
|
}
|
|
|
|
#ipage-right-box-container #ipage-input-box #ipage-input-container input.characterId {
|
|
background-image: url(img/CharacterIdInputBg.png);
|
|
}
|
|
|
|
#ipage-right-box-container #ipage-input-box #ipage-input-container input.characterName {
|
|
background-image: url(img/CharacterNameInputBg.png);
|
|
}
|
|
|
|
#ipage-right-box-container #ipage-input-box #ipage-input-container input.genderInput {
|
|
background-image: url(img/GenderInputBg.png);
|
|
}
|
|
|
|
#ipage-right-box-container #ipage-input-box #ipage-input-container input.birthdayInput {
|
|
background-image: url(img/BirthdayInputBg.png);
|
|
}
|
|
|
|
#ipage-right-box-container #ipage-input-box #ipage-input-container input.nationalityInput {
|
|
background-image: url(img/NationalityInputBg.png);
|
|
}
|
|
|
|
#ipage-right-box-container #ipage-input-box #ipage-input-container input.phoneInput {
|
|
background-image: url(img/PhoneInputBg.png);
|
|
}
|
|
|
|
#ipage-right-box-container #ipage-input-box #ipage-input-container input.playTimeInput {
|
|
background-image: url(img/PlayTimeInputBg.png);
|
|
width: 36%;
|
|
}
|
|
|
|
#ipage-right-box-container #ipage-input-box #ipage-input-container input.creationDateInput {
|
|
background-image: url(img/CreationDateInputBg.png);
|
|
width: 36%;
|
|
}
|
|
|
|
#ipage-right-box-container #ipage-input-box #ipage-input-container #ipage-edit-button {
|
|
width: 2.7778vh;
|
|
height: 2.7778vh;
|
|
|
|
border-radius: .3646vw;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
transition: 0.2s;
|
|
}
|
|
|
|
#ipage-right-box-container #ipage-input-box #ipage-input-container #ipage-edit-button #ipage-edit-icon {
|
|
width: 1.3889vh;
|
|
height: 1.3889vh;
|
|
|
|
background-image: url(img/EditButtonIcon.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
transition: 0.2s;
|
|
}
|
|
|
|
#ipage-right-box-container #ipage-input-box #ipage-input-container.editing input {
|
|
background-color: rgba(204, 57, 255, 0.20);
|
|
color: rgba(255, 255, 255, 0.50);
|
|
|
|
transition: 0.2s;
|
|
}
|
|
|
|
#ipage-right-box-container #ipage-input-box #ipage-input-container.editing #ipage-edit-button {
|
|
background-color: rgba(204, 57, 255, 0.20);
|
|
}
|
|
|
|
#ipage-right-box-container #ipage-input-box #ipage-input-container.editing #ipage-edit-button #ipage-edit-icon {
|
|
width: 1.1111vh;
|
|
height: 1.1111vh;
|
|
|
|
background-image: url(img/TikIcon.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
#info-player-info-container #player-info-left-navi {
|
|
height: 100%;
|
|
width: 6.0185vh;
|
|
border-radius: 1.6146vw 0 0 .4688vw;
|
|
|
|
background-image: url(img/playerInfoLeftNaviBg.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
overflow: hidden;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
transition: 0.3s;
|
|
}
|
|
|
|
#player-info-left-navi span.playerId {
|
|
margin-top: 0.9259vh;
|
|
opacity: .4;
|
|
font-size: .625vw;
|
|
width: 100%;
|
|
|
|
text-align: center;
|
|
}
|
|
|
|
#player-info-left-navi #vip-badge-icon {
|
|
width: 1.6667vh;
|
|
height: 1.2963vh;
|
|
|
|
margin-top: 0.8333vh;
|
|
|
|
background-image: url(img/VIPBadge.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
#player-info-left-navi #info-left-navi-items {
|
|
height: 36.7593vh;
|
|
width: 5.2778vh;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
margin-top: 4.8148vh;
|
|
margin-left: 0.463vh;
|
|
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#info-left-navi-items #info-left-navi-item {
|
|
width: 100%;
|
|
height: 3.4259vh;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
#info-left-navi-item #info-navi-selector-container {
|
|
width: 0.9259vh;
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#info-navi-selector-container #info-navi-selector {
|
|
width: 0.6944vh;
|
|
height: 2.7778vh;
|
|
|
|
background-image: url(img/PlayerInfoLeftNaviSelection.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
#info-left-navi-item #info-navi-item-border {
|
|
width: 3.2407vh;
|
|
height: 3.2407vh;
|
|
|
|
border-radius: 50%;
|
|
|
|
border: .1042vw solid black;
|
|
opacity: 0.2;
|
|
|
|
box-shadow: 0 0 .2083vw black;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
transition: 0.3s;
|
|
}
|
|
|
|
#info-navi-item-border #info-navi-item-bg {
|
|
width: 2.8704vh;
|
|
height: 2.8704vh;
|
|
|
|
background-color: black;
|
|
border-radius: 50%;
|
|
|
|
box-shadow: 0px 0px 2.0313vw black;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
#info-navi-item-bg #info-navi-item-icon {
|
|
width: 1.3889vh;
|
|
height: 1.7593vh;
|
|
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
#info-left-navi-item #info-navi-item-border.active,
|
|
#info-left-navi-item #info-navi-item-border:hover {
|
|
opacity: 1;
|
|
border: .1042vw solid #7239FF;
|
|
|
|
transition: 0.3s;
|
|
}
|
|
|
|
#info-left-navi-item #info-navi-item-border.active #info-navi-item-bg,
|
|
#info-left-navi-item #info-navi-item-border:hover #info-navi-item-bg {
|
|
background-color: #CC39FF;
|
|
box-shadow: 0px 0px 2.0313vw #CC39FF;
|
|
|
|
transition: 0.3s;
|
|
}
|
|
|
|
#player-info-left-navi #player-info-icon-border {
|
|
width: 5.5556vh;
|
|
height: 5.5556vh;
|
|
|
|
margin-top: 0.1852vh;
|
|
|
|
border: .1042vw solid #FFDE30;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
box-shadow: 0px 0px 1.5208vw -10px #FFDE30;
|
|
|
|
border-radius: 50%;
|
|
}
|
|
|
|
#player-info-icon-border #player-info-icon {
|
|
width: 5.0926vh;
|
|
height: 5.0926vh;
|
|
|
|
background-image: url(img/DefaultIcon.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
border-radius: 50%;
|
|
}
|
|
|
|
#player-info-left-navi #info-back-button {
|
|
width: 100%;
|
|
height: 1.3796vh;
|
|
|
|
margin-top: 5.7407vh;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
#info-back-button #info-back-button-icon {
|
|
width: 0.7963vh;
|
|
height: 1.3796vh;
|
|
|
|
background-image: url(img/BackButton.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
#ipage-all-boxes #hearth-left-box {
|
|
width: 28.1481vh;
|
|
height: 100%;
|
|
|
|
border-radius: .5208vw;
|
|
|
|
background-image: url(img/HearthStatusOnlineBg.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
#hearth-left-box #hearth-left-box-container {
|
|
width: 23.5185vh;
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#hearth-left-box-container #hearth-offline-message-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
#hearth-left-box-container span.boxTitle {
|
|
font-size: 1.0417vw;
|
|
font-weight: 500;
|
|
|
|
margin-top: 0.9259vh;
|
|
}
|
|
|
|
#hearth-left-box-container #hearth-credentials {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
#hearth-credentials #hearth-credential-box {
|
|
width: 100%;
|
|
height: 4.3519vh;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#hearth-credential-box span.hCredentialTitle {
|
|
font-size: .5208vw;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
#hearth-credential-box #hearth-credential-ibuttons {
|
|
width: 100%;
|
|
height: 2.7778vh;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#hearth-credential-ibuttons input {
|
|
padding-left: 3.1481vh;
|
|
|
|
width: 7.963vh;
|
|
height: 2.7778vh;
|
|
border-radius: .3646vw;
|
|
border: 0;
|
|
|
|
color: white;
|
|
font-size: .625vw;
|
|
font-family: 'SF Pro Rounded';
|
|
|
|
background-color: rgba(255, 72, 72, 0.20);
|
|
background-repeat: no-repeat;
|
|
background-size:100% 100%;
|
|
}
|
|
|
|
#hearth-credential-ibuttons #hearth-credential-action-button {
|
|
width: 5.463vh;
|
|
height: 2.7778vh;
|
|
|
|
border-radius: .3646vw;
|
|
|
|
font-size: .625vw;
|
|
font-weight: 600;
|
|
|
|
background-color: rgba(255, 72, 72, 0.20);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
#ipage-all-boxes #hearth-right-box {
|
|
width: 35.5556vh;
|
|
height: 100%;
|
|
|
|
border-radius: .5208vw;
|
|
|
|
background-image: url(img/HearthLogsBg.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
#hearth-right-box #hearth-right-box-container {
|
|
width: 30.9259vh;
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#hearth-right-box-container span.boxTitle {
|
|
font-size: 1.0417vw;
|
|
font-weight: 500;
|
|
|
|
margin-top: 0.9259vh;
|
|
}
|
|
|
|
#hearth-right-box-container input {
|
|
width: 27.6852vh;
|
|
height: 2.963vh;
|
|
|
|
margin-top: 1.8519vh;
|
|
|
|
padding-left: 1.1111vh;
|
|
padding-right: 2.1296vh;
|
|
|
|
background-image: url(img/StatusLogSearchBarBg.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-color: transparent;
|
|
|
|
font-size: .5208vw;
|
|
font-weight: 400;
|
|
color: white;
|
|
font-family: 'SF Pro Display Thin';
|
|
|
|
border: 0;
|
|
border-radius: .3646vw;
|
|
}
|
|
|
|
#hearth-right-box-container input::placeholder {
|
|
color: rgba(255, 255, 255, 0.30);
|
|
font-size: .5208vw;
|
|
font-weight: 400;
|
|
}
|
|
|
|
#hearth-right-box-container #hearth-logs-container {
|
|
width: 100%;
|
|
height: 33.7037vh;
|
|
margin-top: 1.8519vh;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
overflow-y: auto;
|
|
}
|
|
|
|
#hearth-logs-container span.logSpan {
|
|
font-size: .5208vw;
|
|
font-weight: 500;
|
|
color: rgba(255, 255, 255, 0.60);
|
|
|
|
margin-bottom: 0.463vh;
|
|
margin-left: 0.9259vh;
|
|
}
|
|
|
|
#ipage-all-boxes #money-left-box {
|
|
width: 28.1481vh;
|
|
height: 100%;
|
|
|
|
border-radius: .5208vw;
|
|
|
|
background-image: url(img/MoneyMoneysBg.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
#money-left-box #money-left-box-container {
|
|
width: 23.5185vh;
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#money-left-box-container span.boxTitle {
|
|
font-size: 1.0417vw;
|
|
font-weight: 500;
|
|
|
|
margin-top: 0.9259vh;
|
|
}
|
|
|
|
#money-left-box-container #money-inputs-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
#money-inputs-container #money-inputs-each {
|
|
width: 100%;
|
|
height: 4.3519vh;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#money-inputs-each span.inputTitle {
|
|
opacity: 0.6;
|
|
font-size: .5208vw;
|
|
font-family: 'SF Pro Rounded';
|
|
font-weight: 500;
|
|
}
|
|
|
|
#money-inputs-each #money-input {
|
|
width: 100%;
|
|
height: 2.7778vh;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#money-input input {
|
|
padding-left: 3.1481vh;
|
|
width: 16.6667vh;
|
|
height: 100%;
|
|
|
|
border-radius: .3646vw;
|
|
border: 0;
|
|
|
|
color: white;
|
|
font-family: 'SF Pro Rounded';
|
|
font-weight: 600;
|
|
font-size: .625vw;
|
|
|
|
background-image: url(img/MoneyCashInputBg.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-color: transparent;
|
|
|
|
transition: 0.2s;
|
|
}
|
|
|
|
#money-input #money-edit-button {
|
|
width: 2.7778vh;
|
|
height: 2.7778vh;
|
|
|
|
border-radius: .3646vw;
|
|
background-color: rgba(180, 255, 144, 0.20);
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
#money-input #money-edit-button #money-edit-button-icon {
|
|
width: 1.3889vh;
|
|
height: 1.3889vh;
|
|
|
|
background-image: url(img/EditButtonIcon.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
transition: 0.1s;
|
|
}
|
|
|
|
#money-input #money-edit-button #money-edit-button-icon.editing {
|
|
width: 1.1111vh;
|
|
height: 1.1111vh;
|
|
|
|
background-image: url(img/TikIcon.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
transition: 0.1s;
|
|
}
|
|
|
|
#ipage-info-page-container #car-page-content {
|
|
width: 65.5556vh;
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#car-page-content #car-page-title-box {
|
|
width: 100%;
|
|
height: 5.9259vh;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
#car-page-title-box span.contentTitle {
|
|
font-size: 1.0417vw;
|
|
font-weight: 500;
|
|
color: white;
|
|
font-family: 'SF Pro Rounded';
|
|
}
|
|
|
|
#car-page-title-box #car-page-title-button {
|
|
width: 10.5556vh;
|
|
height: 3.5185vh;
|
|
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
border-radius: .3646vw;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
|
|
color: white;
|
|
font-size: 1.1111vh;
|
|
font-weight: 600;
|
|
font-family: 'SF Pro Rounded';
|
|
|
|
transition: 0.2s;
|
|
}
|
|
|
|
#car-page-title-box #car-page-title-button.goback {
|
|
background-image: url(img/CarGoBackButtonBg.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
|
|
justify-content: right;
|
|
}
|
|
|
|
#car-page-title-box #car-page-title-button:hover {
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
transition: 0.2s;
|
|
}
|
|
|
|
#car-page-content #car-cars-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
overflow-y: auto;
|
|
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
gap: 2.037vh;
|
|
}
|
|
|
|
#car-cars-container #car-box {
|
|
width: 20.463vh;
|
|
height: 24.537vh;
|
|
border-radius: .4688vw;
|
|
|
|
background-image: url(img/CarBoxBg.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
transition: 0.2s;
|
|
}
|
|
|
|
#car-cars-container #car-box.newCar {
|
|
background-image: url(img/CarBoxHoverBg.png);
|
|
}
|
|
|
|
#car-cars-container #car-box:hover {
|
|
background-image: url(img/CarBoxHoverBg.png);
|
|
transition: 0.2s;
|
|
}
|
|
|
|
#car-box #car-box-content {
|
|
width: 17.6852vh;
|
|
height: 21.7593vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#car-box-content #car-basic-infos {
|
|
width: 100%;
|
|
height: 4.6296vh;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#car-box-content #car-basic-infos.newCar {
|
|
width: 100%;
|
|
height: 4.6296vh;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
#car-basic-infos span.brandName {
|
|
font-size: 1.1111vh;
|
|
font-weight: 600;
|
|
font-family: 'SF Pro Rounded';
|
|
}
|
|
|
|
#car-basic-infos span.modelName {
|
|
font-size: 1.1111vh;
|
|
font-weight: 600;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
#car-basic-infos span.vehicleStatus {
|
|
font-size: .4167vw;
|
|
font-weight: 600;
|
|
opacity: 0.6;
|
|
|
|
color: rgba(139, 255, 48);
|
|
}
|
|
|
|
#car-basic-infos span.vehicleStatus.inGarage {
|
|
color: rgba(255, 48, 48);
|
|
}
|
|
|
|
#car-box-content #car-details-container {
|
|
width: 100%;
|
|
height: 14.8148vh;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
margin-top: 0.463vh;
|
|
}
|
|
|
|
#car-details-container #car-detail {
|
|
width: 100%;
|
|
height: auto;
|
|
|
|
display: flex;
|
|
justify-content: left;
|
|
align-items: center;
|
|
}
|
|
|
|
#car-detail #car-detail-icon {
|
|
width: .8333vw;
|
|
height: .625vw;
|
|
|
|
background-image: url(img/CarPlateIcon.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
#car-detail span.carDetail {
|
|
font-size: .625vw;
|
|
font-weight: 600;
|
|
font-family: 'SF Pro Rounded';
|
|
color: white;
|
|
|
|
margin-left: 1.3889vh;
|
|
}
|
|
|
|
#car-box-content #car-seperate-line-box {
|
|
width: 100%;
|
|
height: 0.0926vh;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 0.463vh;
|
|
}
|
|
|
|
#car-seperate-line-box #car-seperate-line {
|
|
width: 14.537vh;
|
|
height: 0.0926vh;
|
|
|
|
background-color: white;
|
|
opacity: 0.07;
|
|
}
|
|
|
|
#car-box-content #car-details-container.newCar {
|
|
justify-content: start;
|
|
align-items: center;
|
|
height: 12.5926vh;
|
|
}
|
|
|
|
#car-details-container input {
|
|
width: 15.463vh;
|
|
height: 2.7778vh;
|
|
|
|
border: 0;
|
|
border-radius: .3646vw;
|
|
|
|
text-align: center;
|
|
color: white;
|
|
font-size: .625vw;
|
|
font-family: 'SF Pro Rounded';
|
|
font-weight: 600;
|
|
|
|
background-image: url(img/CarVehicleHashInputBg.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
background-color: transparent;
|
|
|
|
margin-bottom: 0.9259vh;
|
|
}
|
|
|
|
#car-details-container input::placeholder {
|
|
color: white;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
#car-page-content #cinfo-all-boxes {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
|
|
width: 100%;
|
|
height: 45.0926vh;
|
|
}
|
|
|
|
#cinfo-all-boxes #cinfo-box {
|
|
height: 100%;
|
|
|
|
border-radius: .5208vw;
|
|
|
|
background-color: rgba(0,0,0,0.2);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
#cinfo-all-boxes #cinfo-box.left {
|
|
width: 28.1481vh;
|
|
background-image: url(img/CInfoVehicleInfoBg.png);
|
|
}
|
|
|
|
#cinfo-all-boxes #cinfo-box.right {
|
|
width: 35.5556vh;
|
|
background-image: url(img/CInfoActionsBg.png);
|
|
}
|
|
|
|
#cinfo-box.left #cinfo-box-container {
|
|
width: 23.5185vh;
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#cinfo-box.right #cinfo-box-container {
|
|
width: 30.9259vh;
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#cinfo-box-container span.boxTitle {
|
|
font-size: 1.0417vw;
|
|
font-weight: 500;
|
|
|
|
margin-top: 0.9259vh;
|
|
}
|
|
|
|
#cinfo-box-container #cinfo-inputs-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
#cinfo-inputs-container #cinfo-input {
|
|
width: 100%;
|
|
height: auto;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#cinfo-input span.inputTitle {
|
|
font-size: .5208vw;
|
|
font-weight: 500;
|
|
opacity: 0.6;
|
|
margin-bottom: 0.463vh;
|
|
}
|
|
|
|
#cinfo-input #cinfo-input-content {
|
|
width: 100%;
|
|
height: auto;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#cinfo-input-content input {
|
|
padding-left: 3.1481vh;
|
|
width: 16.2037vh;
|
|
height: 2.7778vh;
|
|
|
|
border: 0;
|
|
border-radius: .3646vw;
|
|
|
|
color: white;
|
|
font-size: .625vw;
|
|
font-family: 'SF Pro Rounded';
|
|
font-weight: 600;
|
|
|
|
background-image: url(img/CInfoHashInputBg.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
background-color: rgba(255,255,255,0.2);
|
|
|
|
margin-bottom: 0.9259vh;
|
|
transition: 0.1s;
|
|
}
|
|
|
|
#cinfo-input-content input::placeholder {
|
|
color: white;
|
|
}
|
|
|
|
#cinfo-input-content input.noneditable {
|
|
width: 100%;
|
|
}
|
|
|
|
#cinfo-input-content.editing input {
|
|
background-color: rgba(204, 57, 255, 0.20);
|
|
color: rgba(255,255,255, 0.2);
|
|
transition: 0.1s;
|
|
}
|
|
|
|
#cinfo-input-content.editing input::placeholder {
|
|
color: rgba(255,255,255, 0.2);
|
|
}
|
|
|
|
#cinfo-input-content.editing #cinfo-input-edit-button {
|
|
background-color: rgba(204,57,255,0.2);
|
|
}
|
|
|
|
#cinfo-input-content.editing #cinfo-input-edit-button #cinfo-edit-icon {
|
|
width: 1.1111vh;
|
|
height: 1.1111vh;
|
|
|
|
background-image: url(img/TikIcon.png);
|
|
}
|
|
|
|
#cinfo-input-content #cinfo-input-edit-button {
|
|
width: 2.7778vh;
|
|
height: 2.7778vh;
|
|
|
|
border-radius: .3646vw;
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
transition: 0.1s;
|
|
}
|
|
|
|
#cinfo-input-content #cinfo-input-edit-button #cinfo-edit-icon {
|
|
width: 1.3889vh;
|
|
height: 1.3889vh;
|
|
|
|
background-image: url(img/EditButtonIcon.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
transition: 0.1s;
|
|
}
|
|
|
|
#info-content-container #info-player-actions-container {
|
|
width: 33.5185vh;
|
|
height: 60.8333vh;
|
|
|
|
background-image: url(img/PActionsBoxBg.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
border-radius: .5208vw;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
#info-player-actions-container #player-actions-content {
|
|
width: 28.7037vh;
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#player-actions-content #pactions-title-box {
|
|
width: 100%;
|
|
height: 6.1111vh;
|
|
|
|
display: flex;
|
|
justify-content: left;
|
|
align-items: center;
|
|
}
|
|
|
|
#pactions-title-box span {
|
|
font-size: 1.0417vw;
|
|
font-weight: 600;
|
|
font-family: 'SF Pro Rounded';
|
|
}
|
|
|
|
#player-actions-content #seperate-line {
|
|
width: 100%;
|
|
height: 0.0926vh;
|
|
|
|
opacity: 0.07;
|
|
background-color: white;
|
|
}
|
|
|
|
#player-actions-content span.pactions-actions-title {
|
|
font-size: 1.0417vw;
|
|
font-weight: 600;
|
|
font-family: 'SF Pro Rounded';
|
|
}
|
|
|
|
#player-actions-content #pactions-actions-container {
|
|
width: 100%;
|
|
height: 18.8889vh;
|
|
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.8333vh;
|
|
margin-top: 2.3148vh;
|
|
}
|
|
|
|
#pactions-actions-container #pactions-action {
|
|
width: 8.9815vh;
|
|
height: 8.9815vh;
|
|
|
|
border-radius: .5208vw;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
margin: 0;
|
|
|
|
background-position: center;
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
|
|
transition: 0.2s;
|
|
}
|
|
|
|
#pactions-actions-container #pactions-action:hover {
|
|
opacity: 0.5;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
#pactions-action span.pactions-action-text {
|
|
font-size: .5208vw;
|
|
font-weight: 600;
|
|
font-family: 'SF Pro Rounded';
|
|
margin-top: 3.7037vh;
|
|
}
|
|
|
|
#panel-content #pactions-popup-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
background-color: rgba(0,0,0,0.93);
|
|
z-index: 2;
|
|
border-radius: .7813vw;
|
|
}
|
|
|
|
#pactions-popup-container #pactions-popup-box {
|
|
width: 49.6296vh;
|
|
height: 27.7778vh;
|
|
border-radius: .625vw;
|
|
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
#pactions-popup-box #pactions-popup-box-container {
|
|
width: 45.9259vh;
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#pactions-popup-box-container #pactions-popup-title-box {
|
|
width: 100%;
|
|
height: 3.7963vh;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
#pactions-popup-title-box span.popupTitle {
|
|
font-size: .7813vw;
|
|
font-weight: 600;
|
|
}
|
|
|
|
#pactions-popup-title-box img {
|
|
width: 1.4815vh;
|
|
height: 1.4815vh;
|
|
}
|
|
|
|
#pactions-popup-box-container #pactions-popup-inputs {
|
|
width: 100%;
|
|
height: 15.8333vh;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#pactions-popup-inputs textarea {
|
|
width: 100%;
|
|
height: 13.0556vh;
|
|
padding: 1.3889vh;
|
|
|
|
border: .1042vw solid rgba(255, 255, 255, 0.22);
|
|
border-radius: .5208vw;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
|
|
font-family: 'SF Pro Rounded';
|
|
font-size: .5208vw;
|
|
font-weight: 600;
|
|
color: white;
|
|
|
|
resize: none;
|
|
}
|
|
|
|
#pactions-popup-inputs textarea:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
#pactions-popup-inputs #pactions-popup-time-selector {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
border: .1042vw solid rgba(255, 255, 255, 0.22);
|
|
border-radius: .5208vw;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
|
|
margin-left: 1.3889vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
#pactions-popup-time-selector #pactions-popup-time-selector-content {
|
|
width: 17.5926vh;
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#pactions-popup-time-selector-content span.popupTimeSelectorTitle {
|
|
margin-top: 0.9259vh;
|
|
font-size: .5208vw;
|
|
font-weight: 500;
|
|
}
|
|
|
|
#pactions-popup-time-selector-content #pactions-popup-time-fast-boxes {
|
|
width: 100%;
|
|
height: 6.0185vh;
|
|
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1.3889vh;
|
|
|
|
margin-top: 0.9259vh;
|
|
}
|
|
|
|
#pactions-popup-time-fast-boxes #pactions-popup-time-fast-box {
|
|
width: 4.7222vh;
|
|
height: 2.3148vh;
|
|
|
|
border-radius: .1563vw;
|
|
background-color: rgba(217, 217, 217, 0.04);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
font-size: .5208vw;
|
|
color: rgba(255, 255, 255, 0.75);
|
|
font-weight: 500;
|
|
}
|
|
|
|
#pactions-popup-box-container #pactions-popup-buttons {
|
|
width: 100%;
|
|
height: 7.2222vh;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
#pactions-popup-buttons #pactions-popup-button {
|
|
width: 20.3704vh;
|
|
height: 4.2593vh;
|
|
|
|
border-radius: .3646vw;
|
|
background-color: rgba(0, 0, 0, 0.33);
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
#pactions-popup-buttons #pactions-popup-button:hover {
|
|
opacity: 0.7;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
#pactions-popup-button span {
|
|
font-size: .7813vw;
|
|
font-weight: 600;
|
|
}
|
|
|
|
#pactions-popup-time-selector-content #pactions-popup-time-inputs {
|
|
width: 100%;
|
|
height: 2.3148vh;
|
|
|
|
margin-top: 0.9259vh;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#pactions-popup-time-inputs input {
|
|
width: 4.537vh;
|
|
height: 2.3148vh;
|
|
|
|
border-radius: .1563vw;
|
|
font-size: .5208vw;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
color: white;
|
|
|
|
background-color: rgba(217, 217, 217, 0.04);
|
|
border: .0521vw solid rgba(217, 217, 217, 0.04);
|
|
}
|
|
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Firefox */
|
|
input[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
#car-page-content.inventoryPage #inv-page-boxes {
|
|
width: 100%;
|
|
height: 45.0926vh;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
|
|
margin-top: 1.2037vh;
|
|
}
|
|
|
|
#inv-page-boxes #inv-page-left-box {
|
|
width: 100%;
|
|
height: 45.0926vh;
|
|
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: .4688vw;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#inv-page-boxes #inv-page-right-box {
|
|
width: 10.5556vh;
|
|
height: 45.0926vh;
|
|
|
|
border-radius: .4688vw;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
#inv-page-left-box #inv-page-left-box-content {
|
|
width: 100%;
|
|
height: 41.3889vh;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
#inv-page-left-box-content #inv-left-inventory-box {
|
|
width: 35.2778vh;
|
|
height: 100%;
|
|
|
|
margin-left: 2.1296vh;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
background-image: url(img/InvPlayerInventoryBoxBg.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
#inv-left-inventory-box #inv-inventory-box-title {
|
|
width: auto;
|
|
height: 3.5185vh;
|
|
|
|
font-size: .625vw;
|
|
font-weight: 600;
|
|
margin-left: 1.3889vh;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#inv-left-inventory-box #inv-inventory-items-content {
|
|
margin-top: 1.3889vh;
|
|
margin-left: 1.3889vh;
|
|
|
|
width: 32.5vh;
|
|
height: 100%;
|
|
|
|
overflow-y: auto;
|
|
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.3704vh;
|
|
}
|
|
|
|
#inv-inventory-item-box {
|
|
width: 6.2037vh;
|
|
height: 6.1111vh;
|
|
|
|
border-radius: 0.463vh;
|
|
|
|
background-image: url(img/InvItemBoxBg.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
#inv-inventory-items-content #inv-inventory-item-box:hover {
|
|
background-image: url(img/InvItemBoxHoverBg.png);
|
|
transition: 0.2s;
|
|
}
|
|
|
|
#inv-inventory-item-box img {
|
|
width: 3.1481vh;
|
|
height: 3.1481vh;
|
|
}
|
|
|
|
#inv-inventory-item-box #inv-item-box-header {
|
|
width: 100%;
|
|
height: 1.3889vh;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
#inv-item-box-header #item-header-slot {
|
|
width: 1.3889vh;
|
|
height: 1.3889vh;
|
|
|
|
background-color: #9C39FF;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
font-size: 0.9259vh;
|
|
font-family: 'Proxima Nova';
|
|
|
|
border-top-left-radius: 0.463vh;
|
|
border-bottom-right-radius: 0.463vh;
|
|
}
|
|
|
|
#inv-page-left-box-content #inv-page-right-actions-box {
|
|
width: 9.2593vh;
|
|
height: 100%;
|
|
|
|
margin-left: 9.2593vh;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
#inv-page-right-actions-box #inv-actions-button {
|
|
width: 9.2593vh;
|
|
height: 9.2593vh;
|
|
background-color: black;
|
|
|
|
border-radius: .4167vw;
|
|
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
#inv-actions-button.addItem {
|
|
background-image: url(img/InvActionsPlusBg.png);
|
|
|
|
margin-top: 4.9074vh;
|
|
margin-bottom: 2.7778vh;
|
|
}
|
|
|
|
#inv-actions-button.removeItem {
|
|
background-image: url(img/InvActionsTrashBg.png);
|
|
margin-top: 2.7778vh;
|
|
}
|
|
|
|
#inv-page-right-actions-box input.itemAmount {
|
|
width: 9.2593vh;
|
|
height: 3.2407vh;
|
|
|
|
padding: 0;
|
|
border: none;
|
|
outline: none;
|
|
margin: 0;
|
|
|
|
border-radius: .4167vw;
|
|
|
|
text-align: center;
|
|
font-weight: 600;
|
|
font-size: .625vw;
|
|
color: white;
|
|
|
|
background-color: rgba(217, 217, 217, 0.05);
|
|
}
|
|
|
|
#panel-content #inv-popup-container {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
z-index: 3;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
border-radius: 1.6667vh;
|
|
|
|
background: rgba(15, 16, 24, 0.93);
|
|
}
|
|
|
|
#inv-popup-container #inv-popup-box {
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
#inv-popup-container #inv-popup-box.deleteItem {
|
|
width: 49.6296vh;
|
|
height: 27.7778vh;
|
|
|
|
border-radius: 1.1111vh;
|
|
background-image: url(img/InvPopupDeleteBg.png);
|
|
}
|
|
|
|
#inv-popup-container #inv-popup-box.addItem {
|
|
width: 49.6296vh;
|
|
height: 22.7778vh;
|
|
align-items: start;
|
|
|
|
border-radius: 1.1111vh;
|
|
background-image: url(img/InvPopupAddBg.png);
|
|
}
|
|
|
|
#inv-popup-container #inv-popup-box.clearInv {
|
|
width: 49.6296vh;
|
|
height: 27.7778vh;
|
|
|
|
border-radius: 1.1111vh;
|
|
background-image: url(img/InvPopupClearBg.png);
|
|
}
|
|
|
|
#inv-popup-box.addItem #inv-popup-input {
|
|
width: 43.1481vh;
|
|
height: 3.4259vh;
|
|
|
|
border-radius: 0.463vh;
|
|
padding-left: 1.3889vh;
|
|
padding-right: 1.3889vh;
|
|
|
|
border: 0;
|
|
color: white;
|
|
font-size: .5208vw;
|
|
|
|
margin-left: 1.8519vh;
|
|
margin-top: 1.8519vh;
|
|
|
|
background-color: transparent;
|
|
background-image: url(img/InvPopupInputBg.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
#inv-popup-box.addItem #inv-popup-selectmenu {
|
|
width: 45.5556vh;
|
|
height: auto;
|
|
max-height: 35.1852vh;
|
|
position: absolute;
|
|
|
|
margin-top: 8.6111vh;
|
|
margin-left: 1.7593vh;
|
|
|
|
border: .1042vw solid rgba(255, 255, 255, 0.05);
|
|
|
|
border-bottom-left-radius: 0.463vh;
|
|
border-bottom-right-radius: 0.463vh;
|
|
|
|
background: linear-gradient(180deg, #251232 0%, #16112B 100%);
|
|
|
|
z-index: 5;
|
|
|
|
overflow-y: auto;
|
|
}
|
|
|
|
#inv-popup-selectmenu #inv-selectmenu-item {
|
|
width: 100%;
|
|
height: 3.2407vh;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
font-size: .5208vw;
|
|
color: rgba(255, 255, 255, 0.32);
|
|
|
|
border-bottom: .1042vw solid rgba(255, 255, 255, 0.05);
|
|
transition: 0.5s;
|
|
}
|
|
|
|
#inv-popup-selectmenu #inv-selectmenu-item.last {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
#inv-selectmenu-item img {
|
|
width: 2.2222vh;
|
|
height: 2.2222vh;
|
|
|
|
margin-left: 1.2963vh;
|
|
}
|
|
|
|
#inv-selectmenu-item:hover {
|
|
background: linear-gradient(90deg, #4E2576 0%, #41324D 100%);
|
|
border-bottom-color: rgba(0, 0, 0, 0.0);
|
|
transition: 0.5s;
|
|
}
|
|
|
|
#inv-selectmenu-item:hover span {
|
|
color: white;
|
|
}
|
|
|
|
#inv-popup-box #inv-popup-close {
|
|
width: 1.4815vh;
|
|
height: 1.4815vh;
|
|
|
|
margin-right: 1.8519vh;
|
|
|
|
background-image: url(img/PActionsPopupCancel.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
#inv-popup-box #inv-popup-button {
|
|
width: 20.3704vh;
|
|
height: 4.2593vh;
|
|
|
|
font-size: 1.3889vh;
|
|
font-weight: 600;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
border-radius: 0.6481vh;
|
|
}
|
|
|
|
#inv-popup-button.cancelButton {
|
|
background: rgba(0, 0, 0, 0.33);
|
|
}
|
|
|
|
#inv-popup-button.deleteButton {
|
|
background: #FF395D;
|
|
box-shadow: 0 .0521vw 8.5185vh 0 rgba(255, 57, 93, 0.40);
|
|
}
|
|
|
|
#inv-page-right-box.playerPage {
|
|
background-image: url(img/InvStashButtonBg.png);
|
|
}
|
|
|
|
#inv-page-right-box.stashPage {
|
|
background-image: url(img/InvPlayerInventoryButtonBg.png);
|
|
}
|
|
|
|
#logs-content-box {
|
|
width: 65.5556vh;
|
|
height: 45.0926vh;
|
|
|
|
border-radius: 0.8333vh;
|
|
|
|
background-image: url(img/LogsGeneralBg.png);
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
transition: 0.2s;
|
|
}
|
|
|
|
#logs-content-box #logs-navbar {
|
|
width: 100%;
|
|
height: 6.0185vh;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
#logs-navbar #logs-navbar-item-box {
|
|
width: 8.3333vh;
|
|
height: 3.5648vh;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
margin-left: 1.3889vh;
|
|
}
|
|
|
|
#logs-navbar-item-box #logs-navbar-item-button {
|
|
width: 8.3333vh;
|
|
height: 2.7778vh;
|
|
|
|
font-size: 1.0185vh;
|
|
color: white;
|
|
font-weight: 600;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
|
|
border-radius: 0.3704vh;
|
|
background: url(img/LogsGeneralButtonBg.png);
|
|
}
|
|
|
|
#logs-content-box #logs-content {
|
|
width: 62.7778vh;
|
|
height: 37.6852vh;
|
|
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
border-radius: 0.8333vh;
|
|
|
|
margin-left: 1.3889vh;
|
|
}
|
|
|
|
#logs-content.general {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
background-image: url(img/LogsGeneralInLogBg.png);
|
|
}
|
|
|
|
#logs-content.general #logs-logtext-container {
|
|
width: 30.463vh;
|
|
height: 90%;
|
|
margin-top: 2.1296vh;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
overflow-y: auto;
|
|
}
|
|
|
|
#logs-logtext-container span {
|
|
font-size: 0.9259vh;
|
|
font-weight: 500;
|
|
|
|
color: white;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
#logs-content.general #logs-logtext-right-container {
|
|
width: 39.7222vh;
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#logs-logtext-right-container input {
|
|
margin-top: 1.8519vh;
|
|
|
|
width: 22.037vh;
|
|
height: 2.037vh;
|
|
padding-left: 1.4815vh;
|
|
padding-right: 1.4815vh;
|
|
|
|
font-size: .4167vw;
|
|
font-weight: 400;
|
|
color: white;
|
|
|
|
border-radius: 1.1111vh;
|
|
|
|
background-image: url(img/LogsSearchInputBg.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-color: transparent;
|
|
|
|
border: 0;
|
|
}
|
|
|
|
#logs-logtext-right-container #logs-logtext-button {
|
|
margin-top: 1.8519vh;
|
|
|
|
width: 7.4074vh;
|
|
height: 2.1296vh;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
font-size: 0.9259vh;
|
|
font-weight: 500;
|
|
|
|
border-radius: 1.1111vh;
|
|
background: linear-gradient(90deg, rgba(182, 182, 255, 0.61) 0%, rgba(127, 128, 219, 0.61) 100%);
|
|
box-shadow: 0 0 3.7037vh -0.463vh #B6B6FF;
|
|
}
|
|
|
|
#logs-logtext-button img {
|
|
width: 0.8333vh;
|
|
height: 0.8333vh;
|
|
}
|
|
|
|
#logs-content.notGeneral {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
#logs-content.warns {
|
|
background-image: url(img/LogsWarnsInLogBg.png);
|
|
}
|
|
#logs-content.kicks {
|
|
background-image: url(img/LogsKicksInLogBg.png);
|
|
}
|
|
#logs-content.adminjails {
|
|
background-image: url(img/LogsAJailsInLogBg.png);
|
|
}
|
|
#logs-content.bans {
|
|
background-image: url(img/LogsBansInLogBg.png);
|
|
}
|
|
|
|
|
|
#logs-content #logs-column-container {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
gap: 1.8519vh;
|
|
|
|
width: 59.0741vh;
|
|
height: 100%;
|
|
|
|
overflow-y: auto;
|
|
}
|
|
|
|
#logs-column-container #logs-column-item {
|
|
width: 18.4259vh;
|
|
height: 21.0185vh;
|
|
border-radius: 0.6481vh;
|
|
overflow: hidden;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: rgba(0, 0, 0, 0.33);
|
|
|
|
transition: 0.2s;
|
|
}
|
|
|
|
#logs-column-container #logs-column-item.Warn {
|
|
background: rgba(217, 217, 217, 0.10);
|
|
}
|
|
#logs-column-container #logs-column-item.Warn:hover {
|
|
background: rgba(255, 144, 111, 0.10);
|
|
}
|
|
|
|
#logs-column-container #logs-column-item.Kicks {
|
|
background: rgba(217, 217, 217, 0.10);
|
|
}
|
|
#logs-column-container #logs-column-item.Kicks:hover {
|
|
background: rgba(255, 175, 101, 0.10);
|
|
}
|
|
|
|
#logs-column-container #logs-column-item.AdminJails {
|
|
background: rgba(217, 217, 217, 0.10);
|
|
}
|
|
#logs-column-container #logs-column-item.AdminJails:hover {
|
|
background: rgba(73, 255, 211, 0.10);
|
|
}
|
|
|
|
#logs-column-container #logs-column-item.Bans {
|
|
background: rgba(217, 217, 217, 0.10);
|
|
}
|
|
#logs-column-container #logs-column-item.Bans:hover {
|
|
background: rgba(255, 73, 73, 0.10);
|
|
}
|
|
|
|
#logs-column-item textarea {
|
|
padding: 0.9259vh;
|
|
|
|
width: 13.8889vh;
|
|
height: 5.3704vh;
|
|
|
|
margin-left: 1.3889vh;
|
|
|
|
font-size: .4167vw;
|
|
color: rgba(255, 255, 255, 0.56);
|
|
font-family: 'SF Pro Rounded';
|
|
resize: none;
|
|
|
|
border: .0521vw solid rgba(255, 255, 255, 0.03);
|
|
background: rgba(217, 217, 217, 0.04);
|
|
border-radius: 0.2778vh;
|
|
|
|
transition: 0.2s;
|
|
}
|
|
|
|
#logs-column-item textarea:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
#logs-column-item span.warn {
|
|
color: #FF906F;
|
|
}
|
|
#logs-column-item span.kick {
|
|
color: #FFAF65;
|
|
}
|
|
#logs-column-item span.adminjail {
|
|
color: #49FFD3;
|
|
}
|
|
#logs-column-item span.ban {
|
|
color: #FF4949;
|
|
}
|
|
|
|
/* Transition Start */
|
|
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.3s ease-out;
|
|
}
|
|
|
|
.fade-enter,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Transition End */ |