743 lines
No EOL
15 KiB
CSS
743 lines
No EOL
15 KiB
CSS
body {
|
|
user-select: none;
|
|
}
|
|
|
|
.radar {
|
|
position: absolute;
|
|
|
|
width: 41.8125rem;
|
|
height: 19.375rem;
|
|
transition: filter .2 ease;
|
|
}
|
|
|
|
input[type="number"]::-webkit-inner-spin-button,
|
|
input[type="number"]::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
.radar-open-status {
|
|
position: absolute;
|
|
right: -0.4rem;
|
|
bottom: 9rem;
|
|
background-image: url(../../../assets/open-status.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 1.75rem;
|
|
height: 3.1875rem;
|
|
}
|
|
|
|
.radar-open-status div {
|
|
position: absolute;
|
|
left: 49%;
|
|
top: 10%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.radar-mark {
|
|
position: absolute;
|
|
right: 1.5rem;
|
|
top: 63%;
|
|
transform: translateY(-50%);
|
|
width: 1.9375rem;
|
|
height: 10.0625rem;
|
|
}
|
|
|
|
.off-icon {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
row-gap: 0.5rem;
|
|
}
|
|
|
|
|
|
|
|
|
|
.off-icon p {
|
|
color: rgba(255, 255, 255, 0.53);
|
|
font-family: DS-Digital;
|
|
font-size: 1.0527rem;
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
line-height: normal;
|
|
}
|
|
|
|
.off-icon.active p {
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
}
|
|
|
|
.radar-location {
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 0.75rem;
|
|
}
|
|
|
|
.radar-location-header {
|
|
font-family: DS-Digital;
|
|
font-size: 0.7452rem;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
background: radial-gradient(130.56% 130.56% at 50% 50%, rgba(255, 255, 255, 0.49) 0%, rgba(255, 255, 255, 0) 100%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.radar-location-street {
|
|
font-family: DS-Digital;
|
|
font-size: 1.3099rem;
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
line-height: normal;
|
|
background: radial-gradient(130.56% 130.56% at 50% 50%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 100%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.on-icon {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
row-gap: 0.5rem;
|
|
}
|
|
|
|
.on-icon p {
|
|
color: rgba(255, 255, 255, 0.53);
|
|
font-family: DS-Digital;
|
|
font-size: 1.0527rem;
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
line-height: normal;
|
|
}
|
|
|
|
.on-icon.active p {
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
}
|
|
|
|
|
|
.radar-open-status p {
|
|
position: absolute;
|
|
left: 27%;
|
|
top: 60%;
|
|
transform: translateX(-50%);
|
|
rotate: 85deg;
|
|
text-shadow: 0rem 0.0625rem 0.0625rem rgba(0, 0, 0, 0.49);
|
|
font-family: DS-Digital;
|
|
font-size: 0.5147rem;
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
line-height: normal;
|
|
background: radial-gradient(143.38% 143.38% at 50% 50%, #707070 0%, rgba(112, 112, 112, 0) 100%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.radar-open-status.active p {
|
|
background: radial-gradient(143.38% 143.38% at 50% 50%, #34fa48 0%, #34fa48 100%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.radar-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.radar-off {
|
|
filter: brightness(35%);
|
|
}
|
|
|
|
.radar-top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
column-gap: .85rem;
|
|
width: 100%;
|
|
flex: 1;
|
|
}
|
|
|
|
.rear-sensor {
|
|
background-image: url(../../../assets/radar-frame.png);
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
width: 9.3894rem;
|
|
height: 100%;
|
|
}
|
|
|
|
.front-sensor {
|
|
background-image: url(../../../assets/radar-frame.png);
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
width: 9.3894rem;
|
|
height: 100%;
|
|
}
|
|
|
|
.sensor-wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
row-gap: 0.3rem;
|
|
}
|
|
|
|
.plate {
|
|
background-image: url(../../../assets/plate_1.png);
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
width: 5.2162rem;
|
|
height: 2.6081rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.plate p {
|
|
color: #0000a3;
|
|
font-family: Penitentiary Gothic Fill;
|
|
font-size: 1.2448rem;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
}
|
|
|
|
.sensor-wrapper .sensor-status {
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 0.35rem;
|
|
color: #393939;
|
|
}
|
|
|
|
.sensor-wrapper .sensor-status p.active {
|
|
color: rgba(255, 255, 255, 0.499);
|
|
}
|
|
|
|
.sensor-wrapper .sensor-status p.active-orange {
|
|
color: #FF8A00;
|
|
}
|
|
|
|
.radar-frame {
|
|
background-image: url(../../../assets/radar-frame.png);
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
width: 100%;
|
|
height: 13.4881rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 1.7rem 2.5rem;
|
|
overflow: hidden;
|
|
row-gap: .4rem;
|
|
}
|
|
|
|
.radar-frame-top {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
column-gap: 1rem;
|
|
height: 55%;
|
|
}
|
|
|
|
.radar-compass {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.radar-patrol-speed-container {
|
|
background-image: url(../../../assets/patrol-speed-container.png);
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
width: 10.5rem;
|
|
height: 3.3125rem;
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 0.6rem;
|
|
padding: 0.5rem 0.8rem;
|
|
}
|
|
|
|
.radar-patrol-speed-text {
|
|
font-family: DS-Digital;
|
|
font-size: 2.7477rem;
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
line-height: normal;
|
|
|
|
color: rgba(0, 255, 71, 0.32);
|
|
|
|
letter-spacing: 0.2336rem;
|
|
}
|
|
|
|
.radar-patrol-speed-text span {
|
|
color: #00ff47;
|
|
}
|
|
|
|
.radar-patrol-speed-container div p {
|
|
font-family: DS-Digital;
|
|
font-size: 0.7942rem;
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
line-height: normal;
|
|
background: radial-gradient(95.83% 95.83% at 50% 50%, rgba(255, 255, 255, 0.56) 0%, rgba(255, 255, 255, 0) 100%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.radar-patrol-speed {
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 0.7rem;
|
|
}
|
|
|
|
.radar-compass p {
|
|
color: rgba(255, 255, 255, 0.33);
|
|
text-align: right;
|
|
font-family: DS-Digital;
|
|
font-size: 1.2668rem;
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
line-height: normal;
|
|
}
|
|
|
|
.radar-frame-bottom {
|
|
height: 45%;
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 2rem;
|
|
}
|
|
|
|
.radar-frame-front-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 0.2rem;
|
|
}
|
|
|
|
.radar-frame-front-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 0.2rem;
|
|
}
|
|
|
|
.radar-frame-front {
|
|
flex: 1;
|
|
}
|
|
|
|
.radar-frame-wrapper {
|
|
flex: 1;
|
|
display: flex;
|
|
column-gap: 1rem;
|
|
}
|
|
|
|
.radar-frame-front-status {
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 0.7rem;
|
|
padding: 0rem 0.35rem;
|
|
color: #393939;
|
|
height: 1rem;
|
|
}
|
|
|
|
.speed-input {
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
font-size: 2.2rem;
|
|
color: #cf3033;
|
|
font-family: DS-Digital;
|
|
font-style: normal;
|
|
font-weight: 900;
|
|
line-height: normal;
|
|
background-color: transparent;
|
|
outline: none;
|
|
border: none;
|
|
letter-spacing: 0.3rem;
|
|
}
|
|
|
|
.speed-input::placeholder {
|
|
font-size: 2.4rem;
|
|
color: rgba(207, 48, 51, 0.32);
|
|
font-family: DS-Digital;
|
|
font-style: normal;
|
|
font-weight: 900;
|
|
letter-spacing: 0.3rem;
|
|
line-height: normal;
|
|
}
|
|
|
|
.radar-line {
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 0.25rem;
|
|
margin-top: 0.4rem;
|
|
}
|
|
|
|
.radar-line p {
|
|
font-size: 0.8942rem;
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
line-height: normal;
|
|
background: radial-gradient(137.5% 137.5% at 50% 50%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.radar-polygon {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
padding-bottom: 0.5rem;
|
|
row-gap: 0.25rem;
|
|
position: relative;
|
|
right: 0.35rem;
|
|
}
|
|
|
|
.radar-polygon svg {
|
|
fill: inherit;
|
|
}
|
|
|
|
.radar-polygon svg path {
|
|
fill: inherit;
|
|
}
|
|
|
|
.radar-frame-front-status p {
|
|
font-size: 0.8942rem;
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
line-height: normal;
|
|
}
|
|
|
|
.radar-frame-front-speed {
|
|
width: 6.8125rem;
|
|
height: 3.125rem;
|
|
border-radius: 0.25rem;
|
|
background-image: url(../../../assets/radar-speed-dash.png);
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.radar-frame-front-speed p {
|
|
font-size: 2.4477rem;
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
line-height: normal;
|
|
letter-spacing: 0.2336rem;
|
|
color: rgba(255, 136, 0, 0.32);
|
|
}
|
|
|
|
.radar-frame-front-speed p span {
|
|
color: rgba(255, 136, 0, 1);
|
|
}
|
|
|
|
.radar-frame-front-speed-red p {
|
|
color: rgba(207, 48, 51, 0.32);
|
|
}
|
|
|
|
.radar-frame-front-speed-red p span {
|
|
color: #cf3033;
|
|
}
|
|
|
|
.radar-frame-front-status p.active {
|
|
color: #ff8a00;
|
|
}
|
|
|
|
.radar-frame-front-status p.active-red {
|
|
color: #cf3033;
|
|
}
|
|
|
|
.radar-frame-rear {
|
|
flex: 1;
|
|
}
|
|
|
|
.rader-frame-bottom {
|
|
flex: 1;
|
|
}
|
|
|
|
.radar-fast-actions {
|
|
background-image: url(../../../assets/radar-fast-actions-container.png);
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
width: 26.8125rem;
|
|
height: 19.375rem;
|
|
position: absolute;
|
|
|
|
}
|
|
|
|
.keys {
|
|
width: 11.375rem;
|
|
height: 140%;
|
|
background-image: url(../../../assets/keys-container.png);
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
row-gap: .35rem;
|
|
position: relative;
|
|
bottom: 20%;
|
|
padding-bottom: .4rem;
|
|
|
|
}
|
|
|
|
.key-container {
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: .3rem;
|
|
}
|
|
|
|
.key {
|
|
border-radius: 0.125rem;
|
|
border: 0.0625rem solid rgba(255, 255, 255, 0.21);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: .5rem;
|
|
color: rgba(255, 255, 255, 0.60);
|
|
font-family: Gilroy;
|
|
font-size: 0.5611rem;
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
line-height: normal;
|
|
|
|
}
|
|
|
|
.shortcut {
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: .2rem;
|
|
}
|
|
|
|
.shortcut p {
|
|
color: rgba(255, 255, 255, 0.70);
|
|
font-family: Gilroy;
|
|
font-size: 0.6rem;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
}
|
|
|
|
.shortcut h1 {
|
|
color: rgba(255, 255, 255, 0.40);
|
|
font-family: Gilroy;
|
|
font-size: 0.475rem;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
}
|
|
|
|
|
|
|
|
.radar-fast-actions-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 1.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: .75rem;
|
|
|
|
}
|
|
|
|
.radar-fast-actions-container {
|
|
display: flex;
|
|
column-gap: .5rem;
|
|
flex: 1;
|
|
}
|
|
|
|
.radar-fast-actions-left {
|
|
width: 80%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: .85rem;
|
|
height: 100%;
|
|
}
|
|
|
|
.radar-fast-actions-right {
|
|
width: 18%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
.radar-fast-actions-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.radar-fast-actions-front-antenna {
|
|
width: 100%;
|
|
height: 5.8125rem;
|
|
border-radius: 0.5625rem;
|
|
border: 0.0625rem solid rgba(255, 255, 255, 0.12);
|
|
padding: .5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: .65rem;
|
|
}
|
|
|
|
.radar-fast-actions-rear-antenna {
|
|
width: 100%;
|
|
height: 5.8125rem;
|
|
border-radius: 0.5625rem;
|
|
border: 0.0625rem solid rgba(255, 255, 255, 0.12);
|
|
padding: .5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: .65rem;
|
|
|
|
}
|
|
|
|
.radar-fast-actions-front-antenna h1 {
|
|
color: #FFF;
|
|
font-family: Gilroy;
|
|
font-size: 0.75rem;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 90%;
|
|
/* 0.675rem */
|
|
}
|
|
|
|
.radar-fast-actions-rear-antenna h1 {
|
|
color: #FFF;
|
|
font-family: Gilroy;
|
|
font-size: 0.75rem;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 90%;
|
|
/* 0.675rem */
|
|
}
|
|
|
|
|
|
.radar-fast-actions-exit {
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: .75rem;
|
|
}
|
|
|
|
.radar-fast-actions-antenna-buttons {
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: .6rem;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.radar-fast-actions-antenna-button {
|
|
flex: 1;
|
|
height: 1.4375rem;
|
|
border-radius: 0.1875rem;
|
|
border: 0.0625rem solid rgba(255, 255, 255, 0.04);
|
|
background: radial-gradient(39.44% 89.29% at 50.18% -0.00%, rgba(139, 139, 139, 0.23) 0%, rgba(139, 139, 139, 0.00) 100%), radial-gradient(125.00% 125.00% at 50.00% 50.00%, rgba(81, 81, 81, 0.37) 0%, rgba(88, 88, 88, 0.00) 100%);
|
|
color: rgba(255, 255, 255, 0.43);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: Gilroy;
|
|
font-size: 0.625rem;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
cursor: pointer;
|
|
transition: all .2s ease;
|
|
}
|
|
|
|
.radar-fast-actions-antenna-button.active {
|
|
border: 0.0625rem solid rgba(255, 255, 255, 0.10);
|
|
background: radial-gradient(39.44% 89.29% at 50.18% -0.00%, rgba(72, 255, 123, 0.23) 0%, rgba(72, 255, 123, 0.00) 100%), radial-gradient(125.00% 125.00% at 50.00% 50.00%, rgba(72, 255, 123, 0.37) 0%, rgba(72, 255, 123, 0.00) 100%);
|
|
box-shadow: 0rem 0.25rem 0.875rem 0rem rgba(66, 217, 111, 0.23);
|
|
color: #FFF;
|
|
|
|
}
|
|
|
|
.radar-fast-actions-antenna-button:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.speed-warning-antenna {
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: .5rem;
|
|
}
|
|
|
|
.speed-warning-antenna h1 {
|
|
word-break: break-word;
|
|
color: #FFF;
|
|
font-family: Gilroy;
|
|
font-size: 0.75rem;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 90%;
|
|
/* 0.675rem */
|
|
}
|
|
|
|
.speed-warning-antenna input {
|
|
width: 2.6875rem;
|
|
height: 1.25rem;
|
|
appearance: none;
|
|
outline: none;
|
|
border: none;
|
|
border-radius: 0.1875rem;
|
|
text-align: center;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-family: Gilroy;
|
|
font-size: 0.875rem;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 90%;
|
|
/* 0.7875rem */
|
|
}
|
|
|
|
.speed-warning-antenna input::placeholder {
|
|
color: rgba(255, 255, 255, 0.51);
|
|
|
|
}
|
|
|
|
|
|
.increase-speed-button {
|
|
width: 2.6875rem;
|
|
height: 1.125rem;
|
|
background-image: url(../../../assets/increase-speed-container.png);
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
cursor: pointer;
|
|
transition: all .2s ease;
|
|
}
|
|
|
|
.increase-speed-button:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.decrease-speed-button {
|
|
width: 2.6875rem;
|
|
height: 1.125rem;
|
|
background-image: url(../../../assets/decrease-speed-container.png);
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
cursor: pointer;
|
|
transition: all .2s ease;
|
|
}
|
|
|
|
.decrease-speed-button:hover {
|
|
opacity: 0.8;
|
|
} |