596 lines
No EOL
9.9 KiB
CSS
596 lines
No EOL
9.9 KiB
CSS
.dots {
|
|
position: absolute;
|
|
left: -4px;
|
|
top: -4px;
|
|
}
|
|
|
|
.speedoMeterContainer {
|
|
position: absolute;
|
|
right: 76px;
|
|
bottom: 8px;
|
|
width: 210px;
|
|
height: 220px;
|
|
z-index: 20;
|
|
}
|
|
|
|
.keys {
|
|
display: flex;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 83%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
|
|
|
|
.key {
|
|
width: 21.55px;
|
|
height: 21.55px;
|
|
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 2.58621px;
|
|
font-family: 'Gilroy';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-size: 12.069px;
|
|
line-height: 15px;
|
|
/* identical to box height */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.keyWrapper {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.keyLeft {
|
|
margin-right: 10.4px;
|
|
}
|
|
|
|
.icon {
|
|
margin-right: 6.4px;
|
|
}
|
|
|
|
.fuelIcon {
|
|
position: absolute;
|
|
left: -80px;
|
|
bottom: 28.8px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.activeSpeed {
|
|
|
|
font-family: 'Gilroy';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-size: 48px;
|
|
line-height: 58px;
|
|
color: rgba(255, 255, 255, 1.0);
|
|
}
|
|
|
|
.speedUnit {
|
|
font-family: "Gilroy-Bold";
|
|
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
line-height: 15px;
|
|
text-align: right;
|
|
/* identical to box height */
|
|
position: absolute;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
left: 60%;
|
|
top: 35%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.speedText {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.lightSpeed {
|
|
|
|
font-family: 'Gilroy';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-size: 48px;
|
|
line-height: 58px;
|
|
color: rgba(255, 255, 255, 0.25);
|
|
}
|
|
|
|
.indicator {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
/*80 max -80 min */
|
|
transform: translate(-50%, -95%) rotate(0);
|
|
transition: transform .15s linear;
|
|
}
|
|
|
|
.fuel-yellow {
|
|
stroke: #BFFF38;
|
|
}
|
|
|
|
.fuel-red {
|
|
stroke: #F90017;
|
|
}
|
|
|
|
.fuelText {
|
|
position: relative;
|
|
top: 4.8px;
|
|
width: 19px;
|
|
height: 15px;
|
|
font-family: "Gilroy-Bold";
|
|
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
line-height: 15px;
|
|
/* identical to box height */
|
|
|
|
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.speedometer {
|
|
position: relative;
|
|
transform: scale(1.2);
|
|
|
|
}
|
|
|
|
.speed-container {
|
|
position: absolute;
|
|
left: 39.2px;
|
|
top: -40px;
|
|
width: 300px;
|
|
height: 300px;
|
|
}
|
|
|
|
.speed-wrapper {
|
|
position: relative;
|
|
width: 300px;
|
|
height: 300px;
|
|
transform: scale(1.65);
|
|
}
|
|
|
|
.speedometer-svg {
|
|
position: absolute;
|
|
width: 160px;
|
|
transform: scale(1.05);
|
|
bottom: 104px;
|
|
left: 19.2px;
|
|
|
|
}
|
|
|
|
.speedometer-svg2 {
|
|
position: absolute;
|
|
width: 160px;
|
|
transform: scale(1.0);
|
|
bottom: 104px;
|
|
left: 20.8px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.speedometer-svg3 {
|
|
position: absolute;
|
|
width: 40.48px;
|
|
transform: rotate(1deg);
|
|
bottom: 72px;
|
|
left: 145.44px;
|
|
z-index: 1;
|
|
}
|
|
|
|
|
|
.fuelmeter {
|
|
position: absolute;
|
|
bottom: 60px;
|
|
left: -5.6px;
|
|
transform: scale(.6);
|
|
}
|
|
|
|
.dot-1 {
|
|
position: absolute;
|
|
width: 6.7px;
|
|
height: 1.93px;
|
|
left: -1.6px;
|
|
bottom: 83.2px;
|
|
background: #FFFFFF;
|
|
transform: rotate(-17.83deg);
|
|
}
|
|
|
|
.dot-2 {
|
|
position: absolute;
|
|
width: 6.7px;
|
|
height: 1.93px;
|
|
|
|
left: -3.2px;
|
|
bottom: 116px;
|
|
|
|
background: #FFFFFF;
|
|
opacity: 0.55;
|
|
transform: rotate(-0.35deg);
|
|
}
|
|
|
|
.dot-3 {
|
|
position: absolute;
|
|
width: 6.7px;
|
|
height: 1.93px;
|
|
left: 2.72px;
|
|
bottom: 148.8px;
|
|
background: #FFFFFF;
|
|
transform: rotate(20deg);
|
|
}
|
|
|
|
.dot-4 {
|
|
position: absolute;
|
|
width: 6.7px;
|
|
height: 1.93px;
|
|
left: 19.2px;
|
|
bottom: 177.6px;
|
|
opacity: 0.55;
|
|
background: #FFFFFF;
|
|
transform: rotate(35deg);
|
|
}
|
|
|
|
.dot-5 {
|
|
position: absolute;
|
|
width: 6.7px;
|
|
height: 1.93px;
|
|
left: 44px;
|
|
bottom: 201.12px;
|
|
|
|
background: #FFFFFF;
|
|
transform: rotate(55deg);
|
|
}
|
|
|
|
.dot-6 {
|
|
position: absolute;
|
|
width: 6.7px;
|
|
height: 1.93px;
|
|
left: 72px;
|
|
bottom: 213.6px;
|
|
opacity: 0.55;
|
|
background: #FFFFFF;
|
|
transform: rotate(70deg);
|
|
}
|
|
|
|
.dot-7 {
|
|
position: absolute;
|
|
width: 6.7px;
|
|
height: 1.93px;
|
|
left: 105.6px;
|
|
bottom: 218.4px;
|
|
|
|
background: #FFFFFF;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.dot-8 {
|
|
position: absolute;
|
|
width: 6.7px;
|
|
height: 1.93px;
|
|
left: 139.2px;
|
|
bottom: 211.2px;
|
|
opacity: 0.55;
|
|
background: #FFFFFF;
|
|
transform: rotate(110deg);
|
|
}
|
|
|
|
.dot-9 {
|
|
position: absolute;
|
|
width: 6.7px;
|
|
height: 1.93px;
|
|
left: 168px;
|
|
bottom: 196.8px;
|
|
|
|
background: #FFFFFF;
|
|
transform: rotate(120deg);
|
|
}
|
|
|
|
.dot-10 {
|
|
position: absolute;
|
|
width: 6.7px;
|
|
height: 1.93px;
|
|
left: 190.4px;
|
|
bottom: 172.8px;
|
|
opacity: 0.55;
|
|
background: #FFFFFF;
|
|
transform: rotate(140deg);
|
|
}
|
|
|
|
.dot-11 {
|
|
position: absolute;
|
|
width: 6.7px;
|
|
height: 1.93px;
|
|
left: 206.4px;
|
|
bottom: 143.2px;
|
|
|
|
background: #FFFFFF;
|
|
transform: rotate(160deg);
|
|
}
|
|
|
|
.dot-12 {
|
|
position: absolute;
|
|
width: 6.7px;
|
|
height: 1.93px;
|
|
left: 211.2px;
|
|
bottom: 110.4px;
|
|
opacity: 0.55;
|
|
background: #FFFFFF;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.dot-13 {
|
|
position: absolute;
|
|
width: 6.7px;
|
|
height: 1.93px;
|
|
left: 206.4px;
|
|
bottom: 76.8px;
|
|
|
|
background: #FFFFFF;
|
|
transform: rotate(200deg);
|
|
}
|
|
|
|
|
|
.twenty {
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 15px;
|
|
left: 11.2px;
|
|
bottom: 80px;
|
|
font-family: 'Gilroy';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
line-height: 15px;
|
|
color: #FFFFFF;
|
|
|
|
}
|
|
|
|
.twenty1 {
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 15px;
|
|
|
|
left: 8px;
|
|
bottom: 108.16px;
|
|
font-family: 'Gilroy';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
line-height: 15px;
|
|
transform: rotate(-3deg);
|
|
color: #ffffff5e;
|
|
|
|
}
|
|
|
|
.twenty2 {
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 15px;
|
|
|
|
left: 14.4px;
|
|
bottom: 139.2px;
|
|
font-family: 'Gilroy';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
line-height: 15px;
|
|
|
|
color: #FFFFFF;
|
|
|
|
}
|
|
|
|
.twenty3 {
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 15px;
|
|
|
|
left: 28.8px;
|
|
bottom: 163.2px;
|
|
font-family: 'Gilroy';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
line-height: 15px;
|
|
|
|
color: #ffffff5e;
|
|
|
|
}
|
|
|
|
.twenty4 {
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 15px;
|
|
|
|
left: 46.4px;
|
|
bottom: 180.8px;
|
|
font-family: 'Gilroy';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
line-height: 15px;
|
|
transform: rotate(-5deg);
|
|
color: #ffffff;
|
|
|
|
}
|
|
|
|
.twenty5 {
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 15px;
|
|
|
|
left: 70.4px;
|
|
bottom: 192.8px;
|
|
font-family: 'Gilroy';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
line-height: 15px;
|
|
transform: rotate(-5deg);
|
|
color: #ffffff5e;
|
|
|
|
}
|
|
|
|
.twenty8 {
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 15px;
|
|
|
|
left: 99.2px !important;
|
|
bottom: 195.2px;
|
|
font-family: 'Gilroy';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
line-height: 15px;
|
|
|
|
color: #FFFFFF;
|
|
|
|
}
|
|
|
|
.twenty9 {
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 15px;
|
|
transform: rotate(1deg);
|
|
left: 131.2px;
|
|
bottom: 187.2px;
|
|
font-family: 'Gilroy';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
line-height: 15px;
|
|
|
|
color: #ffffff5e;
|
|
|
|
}
|
|
|
|
.twenty10 {
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 15px;
|
|
|
|
left: 155.2px;
|
|
bottom: 172.8px;
|
|
font-family: 'Gilroy';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
line-height: 15px;
|
|
|
|
color: #FFFFFF;
|
|
|
|
}
|
|
|
|
.twenty11 {
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 15px;
|
|
|
|
left: 174.4px;
|
|
bottom: 152px;
|
|
font-family: 'Gilroy';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
line-height: 15px;
|
|
transform: rotate(-1deg);
|
|
color: #ffffff5e;
|
|
|
|
}
|
|
|
|
.twenty12 {
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 15px;
|
|
|
|
left: 184px;
|
|
bottom: 124.8px;
|
|
font-family: 'Gilroy';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
line-height: 15px;
|
|
transform: rotate(-3deg);
|
|
color: #FFFFFF;
|
|
|
|
}
|
|
|
|
.twenty13 {
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 15px;
|
|
|
|
left: 184px;
|
|
bottom: 99.2px;
|
|
font-family: 'Gilroy';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
line-height: 15px;
|
|
transform: rotate(-3deg);
|
|
color: #ffffff5c;
|
|
|
|
}
|
|
|
|
.twenty14 {
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 15px;
|
|
|
|
|
|
left: 179.2px;
|
|
bottom: 72px;
|
|
font-family: 'Gilroy';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
line-height: 15px;
|
|
transform: rotate(1deg);
|
|
color: #FFFFFF;
|
|
|
|
}
|
|
|
|
.twenty15 {
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 15px;
|
|
|
|
left: 169.6px;
|
|
bottom: 41.6px;
|
|
font-family: 'Gilroy';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
line-height: 15px;
|
|
transform: rotate(-3deg);
|
|
color: #ffffff5c;
|
|
|
|
}
|
|
|
|
.twenty0 {
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 15px;
|
|
|
|
left: 20.8px;
|
|
bottom: 44.8px;
|
|
font-family: 'Gilroy';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
line-height: 15px;
|
|
transform: rotate(-3deg);
|
|
color: #ffffff5c;
|
|
|
|
} |