1
0
Fork 0
forked from Simnation/Main
Main/resources/[jobs]/[mechanic]/rtx_carlift/html/styles.css
2025-08-13 21:09:54 +02:00

1156 lines
20 KiB
CSS

@import url('https://kit-pro.fontawesome.com/releases/v5.14.0/css/pro.min.css');
:root {
--color: #ff66ff;
}
@font-face {
font-family: BebasNeueBold;
src: url(BebasNeueBold.ttf);
}
*{
user-select: none; /* supported by Chrome and Opera */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
}
html {
overflow: hidden;
font-family: 'Open Sans', sans-serif;
}
body{
display: none;
color: #a8a8aa;
}
.lift-container {
width: 14%;
height: 25%;
background-color: rgba(0, 0, 0, 0.8);
border-bottom: 3px solid var(--color);
border-radius: 1px;
margin: 0;
position: absolute;
top: 82%;
left: 90%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 9999999;
border-radius: 10px;
display: none;
}
.closelift {
position: absolute;
margin: 0;
top: 10%;
left: 90%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 9999999;
}
.buttonup {
position: absolute;
margin: 0;
color: #ffffff;
font-size: 75px;
text-decoration: none;
text-align: center;
top: 58%;
left: 27%;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 9999999;
}
.buttonup:hover {
cursor: pointer;
color: var(--color);
text-decoration: none;
}
.buttondown {
position: absolute;
margin: 0;
color: #ffffff;
font-size: 75px;
text-decoration: none;
text-align: center;
top: 58%;
left: 73%;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 9999999;
}
.buttondown:hover {
cursor: pointer;
color: var(--color);
text-decoration: none;
}
.liftheadertext {
position: absolute;
margin: 0;
text-decoration: none;
text-align: center;
top: 14%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
font-size: 40px;
color: var(--color);
text-align:center;
font-family: BebasNeueBold;
}
.liftmaintext {
position: absolute;
margin: 0;
text-decoration: none;
text-align: center;
top: 32%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
font-size: 20px;
color: #ffffff;
text-align:center;
font-family: BebasNeueBold;
}
.liftuptext {
position: absolute;
margin: 0;
text-decoration: none;
text-align: center;
top: 85%;
left: 27%;
margin-right: -50%;
transform: translate(-50%, -50%);
font-size: 30px;
color: var(--color);
text-align:center;
font-family: BebasNeueBold;
}
.liftdowntext {
position: absolute;
margin: 0;
text-decoration: none;
text-align: center;
top: 85%;
left: 73%;
margin-right: -50%;
transform: translate(-50%, -50%);
font-size: 30px;
color: var(--color);
text-align:center;
font-family: BebasNeueBold;
}
.infonotify-container {
width: 17%;
background-color: rgba(0, 0, 0, 0.70);
border-bottom: 3px solid var(--color);
margin: 0;
position: absolute;
top: 50%;
left: 10%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 9999999;
border-radius: 10px;
display: none;
}
.infonotifytext {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 2px;
padding-right: 2px;
vertical-align: middle;
text-align: center;
font-size: 25px;
font-family: BebasNeueBold;
color: #ffffff;
}
#infobindcolor {
color: var(--color);
}
.liftpos-container {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.0);
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 9999999;
display: none;
}
.liftposinfosettings {
width: 16%;
height: 86%;
background-color: rgba(0, 0, 0, 0.70);
border-bottom: 3px solid var(--color);
margin: 0;
position: absolute;
top: 50%;
left: 90%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 9999999;
border-radius: 10px;
}
.poscreatormaintext {
width: 100%;
height: 20%;
background-color: rgba(0, 0, 0, 0.0);
margin: 0;
position: absolute;
top: 12%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 9999999;
}
.poscreatortext {
margin: 0;
color: #ffffff;
font-size: 30px;
text-decoration: none;
text-align: center;
float: center;
overflow: hidden;
z-index: 99999999;
font-family: BebasNeueBold;
border: none;
}
.posspacemaintext {
width: 100%;
height: 20%;
background-color: rgba(0, 0, 0, 0.0);
margin: 0;
position: absolute;
top: 18.5%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 9999999;
}
.posspacetext {
margin: 0;
color: #ffffff;
font-size: 22px;
text-decoration: none;
text-align: center;
float: center;
overflow: hidden;
z-index: 99999999;
font-family: BebasNeueBold;
border: none;
}
.posspacebuttons {
width: 100%;
height: 20%;
background-color: rgba(0, 0, 0, 0.0);
margin: 0;
position: absolute;
top: 20%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 9999999;
}
.buttontypespace {
display: inline-block;
margin: 0;
background-color: rgba(255, 255, 255, 1);
color: #000000;
font-size: 15px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
text-align: center;
float: center;
overflow: hidden;
z-index: 99999999;
font-family: BebasNeueBold;
border: none;
width: 25%;
}
.buttontypespace.active {
background-color: var(--color);
color: #ffffff;
}
#spacebuttonworld {
position: absolute;
margin: 0;
top: 19%;
left: 35%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 99999999;
}
#spacebuttonlocal {
position: absolute;
margin: 0;
top: 19%;
left: 65%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 99999999;
}
.buttontypelist {
display: inline-block;
margin: 0;
background-color: rgba(0, 0, 0, 0.0);
color: #ffffff;
height: 100%;
width: 30%;
font-size: 14px;
margin-left: 1px;
margin-right: 1px;
text-decoration: none;
overflow: hidden;
z-index: 99999999;
font-family: BebasNeueBold;
border: none;
}
.buttontypelist.active {
border-bottom: 16px solid var(--color);
color: #ffffff;
}
.posmodemaintext {
width: 100%;
height: 20%;
background-color: rgba(0, 0, 0, 0.0);
margin: 0;
position: absolute;
top: 27%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 9999999;
}
.posmodetext {
margin: 0;
color: #ffffff;
font-size: 22px;
text-decoration: none;
text-align: center;
float: center;
overflow: hidden;
z-index: 99999999;
font-family: BebasNeueBold;
border: none;
}
.posmodebuttons {
width: 100%;
height: 20%;
background-color: rgba(0, 0, 0, 0.0);
margin: 0;
position: absolute;
top: 28.5%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 9999999;
}
.buttontypemode {
display: inline-block;
margin: 0;
background-color: rgba(255, 255, 255, 1);
color: #000000;
font-size: 15px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
text-align: center;
float: center;
overflow: hidden;
z-index: 99999999;
font-family: BebasNeueBold;
border: none;
width: 25%;
}
.buttontypemode.active {
background-color: var(--color);
color: #ffffff;
}
#posmoretranslate {
position: absolute;
margin: 0;
top: 19%;
left: 35%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 99999999;
}
#posmorerotation {
position: absolute;
margin: 0;
top: 19%;
left: 65%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 99999999;
}
.poscamerasettingsmaintext {
width: 100%;
height: 20%;
background-color: rgba(0, 0, 0, 0.0);
margin: 0;
position: absolute;
top: 38%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 9999999;
}
.poscamerasettingstext {
margin: 0;
color: #ffffff;
font-size: 22px;
text-decoration: none;
text-align: center;
float: center;
overflow: hidden;
z-index: 99999999;
font-family: BebasNeueBold;
border: none;
}
.poscamerasettingsspeedmaintext {
width: 100%;
height: 20%;
background-color: rgba(0, 0, 0, 0.0);
margin: 0;
position: absolute;
top: 42%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 9999999;
padding-left: 7%;
}
.poscamerasettingsspeedtext {
margin: 0;
color: #ffffff;
font-size: 15px;
padding-left: 7px;
padding-right: 7px;
text-decoration: none;
text-align: center;
float: left;
overflow: hidden;
z-index: 99999999;
font-family: BebasNeueBold;
border: none;
}
.poscamerasettingslookxspeedmaintext {
width: 100%;
height: 20%;
background-color: rgba(0, 0, 0, 0.0);
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 9999999;
padding-left: 7%;
}
.poscamerasettingslookxspeedtext {
margin: 0;
color: #ffffff;
font-size: 15px;
padding-left: 7px;
padding-right: 7px;
text-decoration: none;
text-align: center;
float: left;
overflow: hidden;
z-index: 99999999;
font-family: BebasNeueBold;
border: none;
}
.poscamerasettingslookyspeedmaintext {
width: 100%;
height: 20%;
background-color: rgba(0, 0, 0, 0.0);
margin: 0;
position: absolute;
top: 57.5%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 9999999;
padding-left: 7%;
}
.poscamerasettingslookyspeedtext {
margin: 0;
color: #ffffff;
font-size: 15px;
padding-left: 7px;
padding-right: 7px;
text-decoration: none;
text-align: center;
float: left;
overflow: hidden;
z-index: 99999999;
font-family: BebasNeueBold;
border: none;
}
.posmovementsettingsmaintext {
width: 100%;
height: 20%;
background-color: rgba(0, 0, 0, 0.0);
margin: 0;
position: absolute;
top: 68%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 9999999;
}
.posmovementsettingstext {
margin: 0;
color: #ffffff;
font-size: 22px;
text-decoration: none;
text-align: center;
float: center;
overflow: hidden;
z-index: 99999999;
font-family: BebasNeueBold;
border: none;
}
.posmovementsettingstranslatemaintext {
width: 100%;
height: 20%;
background-color: rgba(0, 0, 0, 0.0);
margin: 0;
position: absolute;
top: 73%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 9999999;
padding-left: 7%;
}
.posmovementsettingstranslatetext {
margin: 0;
color: #ffffff;
font-size: 15px;
padding-left: 7px;
padding-right: 7px;
text-decoration: none;
text-align: center;
float: left;
overflow: hidden;
z-index: 99999999;
font-family: BebasNeueBold;
border: none;
}
.posmovementsettingsrotationmaintext {
width: 100%;
height: 20%;
background-color: rgba(0, 0, 0, 0.0);
margin: 0;
position: absolute;
top: 83%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 9999999;
padding-left: 7%;
}
.posmovementsettingsrotationtext {
margin: 0;
color: #ffffff;
font-size: 15px;
padding-left: 7px;
padding-right: 7px;
text-decoration: none;
text-align: center;
float: left;
overflow: hidden;
z-index: 99999999;
font-family: BebasNeueBold;
border: none;
}
.cameraspeed {
-webkit-appearance: none;
appearance: none;
position: absolute;
margin: 0;
background-color: rgba(202, 205, 198, 1.0);
color: #ffffff;
font-size: 35px;
text-decoration: none;
text-align: center;
top: 36%;
left: 49%;
margin-right: -50%;
transform: translate(-50%, -50%);
z-index: 99999999;
width: 96%;
height: 13%;
outline: none;
display: block;
}
#cameraspeeddata {
background: linear-gradient(to right, var(--color) 0%, var(--color) 50%, #ccccc8 50%, #ccccc8 100%);
border-radius: 5px;
width: 86%;
height: 0.5%;
outline: none;
-webkit-appearance: none;
}
.cameraspeed::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background-color: #fffefb;
}
.lookspeedx {
-webkit-appearance: none;
appearance: none;
position: absolute;
margin: 0;
background-color: rgba(202, 205, 198, 1.0);
color: #ffffff;
font-size: 35px;
text-decoration: none;
text-align: center;
top: 43.5%;
left: 49%;
margin-right: -50%;
transform: translate(-50%, -50%);
z-index: 99999999;
width: 96%;
height: 13%;
outline: none;
display: block;
}
#lookspeedxdata {
background: linear-gradient(to right, var(--color) 0%, var(--color) 50%, #ccccc8 50%, #ccccc8 100%);
border-radius: 5px;
width: 86%;
height: 0.5%;
outline: none;
-webkit-appearance: none;
}
.lookspeedx::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background-color: #fffefb;
}
.lookspeedy {
-webkit-appearance: none;
appearance: none;
position: absolute;
margin: 0;
background-color: rgba(202, 205, 198, 1.0);
color: #ffffff;
font-size: 35px;
text-decoration: none;
text-align: center;
top: 51.5%;
left: 49%;
margin-right: -50%;
transform: translate(-50%, -50%);
z-index: 99999999;
width: 96%;
height: 13%;
outline: none;
display: block;
}
#lookspeedydata {
background: linear-gradient(to right, var(--color) 0%, var(--color) 50%, #ccccc8 50%, #ccccc8 100%);
border-radius: 5px;
width: 86%;
height: 0.5%;
outline: none;
-webkit-appearance: none;
}
.lookspeedy::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background-color: #fffefb;
}
.translatesnap {
-webkit-appearance: none;
appearance: none;
position: absolute;
margin: 0;
background-color: rgba(202, 205, 198, 1.0);
color: #ffffff;
font-size: 35px;
text-decoration: none;
text-align: center;
top: 67%;
left: 49%;
margin-right: -50%;
transform: translate(-50%, -50%);
z-index: 99999999;
width: 96%;
height: 13%;
outline: none;
display: block;
}
#translatesnapdata {
background: linear-gradient(to right, var(--color) 0%, var(--color) 50%, #ccccc8 50%, #ccccc8 100%);
border-radius: 5px;
width: 86%;
height: 0.5%;
outline: none;
-webkit-appearance: none;
}
.translatesnap::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background-color: #fffefb;
}
.rotationsnap {
-webkit-appearance: none;
appearance: none;
position: absolute;
margin: 0;
background-color: rgba(202, 205, 198, 1.0);
color: #ffffff;
font-size: 35px;
text-decoration: none;
text-align: center;
top: 77%;
left: 49%;
margin-right: -50%;
transform: translate(-50%, -50%);
z-index: 99999999;
width: 96%;
height: 13%;
outline: none;
display: block;
}
#rotationsnapdata {
background: linear-gradient(to right, var(--color) 0%, var(--color) 50%, #ccccc8 50%, #ccccc8 100%);
border-radius: 5px;
width: 86%;
height: 0.5%;
outline: none;
-webkit-appearance: none;
}
.rotationsnap::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background-color: #fffefb;
}
.poscarliftypemaintext {
width: 100%;
height: 20%;
background-color: rgba(0, 0, 0, 0.0);
margin: 0;
position: absolute;
top: 91%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 9999999;
}
.poscarliftypetext {
margin: 0;
color: #ffffff;
font-size: 22px;
text-decoration: none;
text-align: center;
float: center;
overflow: hidden;
z-index: 99999999;
font-family: BebasNeueBold;
border: none;
}
.poscarliftypedatamaintext {
width: 100%;
height: 20%;
background-color: rgba(0, 0, 0, 0.0);
margin: 0;
position: absolute;
top: 95%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 9999999;
}
.poscarliftypedatatext {
margin: 0;
color: var(--color);
font-size: 35px;
text-decoration: none;
text-align: center;
float: center;
overflow: hidden;
z-index: 99999999;
font-family: BebasNeueBold;
border: none;
}
.poscarlifleftmain {
width: 100%;
height: 20%;
background-color: rgba(0, 0, 0, 0.0);
margin: 0;
position: absolute;
top: 96%;
left: 35%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 9999999;
}
.poscarliflefttext {
margin: 0;
color: #ffffff;
font-size: 25px;
text-decoration: none;
text-align: center;
float: center;
overflow: hidden;
z-index: 99999999;
font-family: BebasNeueBold;
border: none;
}
.poscarlifrightmain {
width: 100%;
height: 20%;
background-color: rgba(0, 0, 0, 0.0);
margin: 0;
position: absolute;
top: 96%;
left: 65%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 9999999;
}
.poscarlifrighttext {
margin: 0;
color: #ffffff;
font-size: 25px;
text-decoration: none;
text-align: center;
float: center;
overflow: hidden;
z-index: 99999999;
font-family: BebasNeueBold;
border: none;
}
.createcarliftbutton {
position: absolute;
margin: 0;
background-color: rgba(0, 0, 0, 1);
border-bottom: 3px solid var(--color);
color: #ffffff;
font-size: 25px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
text-align: center;
top: 95%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 99999999;
width: 60%;
border-radius: 8px;
}
.createcarliftbutton:hover {
background: var(--color);
text-decoration: none;
color: #ffffff;
}
.liftposfinish-container {
width: 35%;
height: 60%;
background-color: rgba(0, 0, 0, 0.70);
border-bottom: 3px solid var(--color);
border-radius: 10px;
margin: 0;
position: absolute;
top: 50%;
left: 80%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 9999999;
display: none;
}
.headerliftposfinish {
position: absolute;
width:100%;
height: 2%;
color: #ffffff;
display: flex;
background-color: rgba(0, 0, 0, 1);
border-bottom: 3px solid var(--color);
flex-direction: row;
flex-wrap: wrap;
padding-bottom:5%;
margin-right: -50%;
transform: translate(-50%, -50%);
top: 4%;
left: 50%;
}
.headerliftposfinishtext {
position: absolute;
margin: 0;
font-size: 32px;
color: #ffffff;
text-align: center;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 9999999;
}
.closeliftposfinish {
position: absolute;
margin: 0;
top: 50%;
left: 95%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 9999999;
}
.offsetspreviewtext {
position: absolute;
margin: 0;
text-decoration: none;
text-align: center;
top: 17%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
font-size: 37px;
color: #ffffff;
text-align:center;
font-family: BebasNeueBold;
}
.liftposfinishcopytextdatamain {
width: 80%;
height: 50%;
background-color: rgba(0, 0, 0, 0.70);
border: 2px solid var(--color);
border-radius: 10px;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 9999999;
color: #ffffff;
display: block;
}
.liftposfinishcopytextdata {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.0);
margin: 0;
overflow: hidden;
z-index: 9999999;
color: #ffffff;
display: block;
font-size: 15px;
padding-top: 5%;
}
.liftposfinishcopytextdata textarea {
font-weight: 100;
border: none;
outline: none;
background: none;
color: #ffffff;
font-size: 15px;
resize: none;
outline: none;
}
.buttoncopy {
position: absolute;
margin: 0;
background-color: rgba(0, 0, 0, 1);
border-bottom: 3px solid var(--color);
color: #ffffff;
font-size: 35px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
text-align: center;
top: 87%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 99999999;
width: 40%;
border-radius: 8px;
}
.buttoncopy:hover {
background: var(--color);
text-decoration: none;
color: #ffffff;
}
.buttoncopy:hover > #copyicon {
color: #ffffff;
}
#copyicon {
color: var(--color);
}
.full-screen {
width: 100%;
height:100%;
display: flex;
align-items: center;
}
*{
font-family: BebasNeueBold;
}