mirror of
https://github.com/Max-Stevenson/jurassic-park-interface.git
synced 2024-09-27 12:54:51 +00:00
Progress made on vehicle tab.
This commit is contained in:
parent
75418835cb
commit
37cc0d1ad9
18
index.html
18
index.html
@ -340,9 +340,21 @@
|
|||||||
<p class="white-font-black-background">vehicle status</p>
|
<p class="white-font-black-background">vehicle status</p>
|
||||||
<p class="white-font-black-background">headlights on</p>
|
<p class="white-font-black-background">headlights on</p>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="video-screen__vehicle-img__wrapper"></div>
|
||||||
class="video-screen_vehicle-img__wrapper"
|
<div class="video-screen__vehicle-details__wrapper">
|
||||||
>
|
<div class="video-screen__vehicle-details__left">
|
||||||
|
<div class="vehicle-details__detail-container">
|
||||||
|
<button class="vehicle-status__active"></button>
|
||||||
|
<p class="vehicle-details__status-text white-font-black-background">EXP 4</p>
|
||||||
|
<div class="triangle-wrapper">
|
||||||
|
<div class="outer-triangle__right-blue"></div>
|
||||||
|
<div class="inner-triangle__right-blue"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="vide-screen__vehicle-details__right">
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
@ -794,11 +794,27 @@ body {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-screen__vehicle-details__wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-screen__vehicle-status__wrapper {
|
.video-screen__vehicle-status__wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-screen__vehicle-status__wrapper p {
|
||||||
|
margin: 0;
|
||||||
|
text-transform: none;
|
||||||
|
font-size: 1.5vw;
|
||||||
|
padding: 0.5vw 1vw 0 1vw;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-screen__info-text {
|
.video-screen__info-text {
|
||||||
@ -894,6 +910,52 @@ body {
|
|||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.vehicle-details__detail-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-screen__vehicle-details__left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vehicle-status__active {
|
||||||
|
margin-right: 1vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vehicle-status__label {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outer-triangle__right-blue {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-top: 0.9vw solid transparent;
|
||||||
|
border-left: 0.9vw solid #3B6285;
|
||||||
|
border-bottom: 0.9vw solid transparent;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inner-triangle__right-blue {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-top: 0.8vw solid transparent;
|
||||||
|
border-left: 0.8vw solid black;
|
||||||
|
border-bottom: 0.8vw solid transparent;
|
||||||
|
position: absolute;
|
||||||
|
top: 0.1vw;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vehicle-details__status-text {
|
||||||
|
margin: 0;
|
||||||
|
border-top: 0.1vw solid #3B6285;
|
||||||
|
border-left: 0.1vw solid #3B6285;
|
||||||
|
border-bottom: 0.1vw solid #3B6285;
|
||||||
|
}
|
||||||
|
|
||||||
.control-panel__button-control {
|
.control-panel__button-control {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
File diff suppressed because one or more lines are too long
@ -89,12 +89,28 @@
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%
|
height: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-screen__vehicle-details__wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-screen__vehicle-status__wrapper {
|
.video-screen__vehicle-status__wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-screen__vehicle-status__wrapper p {
|
||||||
|
margin: 0;
|
||||||
|
text-transform: none;
|
||||||
|
font-size: 1.5vw;
|
||||||
|
padding: 0.5vw 1vw 0 1vw;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-screen__info-text {
|
.video-screen__info-text {
|
||||||
@ -190,3 +206,68 @@
|
|||||||
background-color: #148e42;
|
background-color: #148e42;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.vehicle-details__detail-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-screen__vehicle-details__left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vehicle-status__active {
|
||||||
|
margin-right: 1vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vehicle-status__label {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outer-triangle__right-blue {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-top: .9vw solid transparent;
|
||||||
|
border-left: .9vw solid #3B6285;
|
||||||
|
border-bottom: .9vw solid transparent;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inner-triangle__right-blue {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-top: 0.8vw solid transparent;
|
||||||
|
border-left: 0.8vw solid black;
|
||||||
|
border-bottom: 0.8vw solid transparent;
|
||||||
|
position: absolute;
|
||||||
|
top: 0.1vw;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vehicle-details__status-text {
|
||||||
|
margin: 0;
|
||||||
|
border-top: .1vw solid #3B6285;
|
||||||
|
border-left: .1vw solid #3B6285;
|
||||||
|
border-bottom: .1vw solid #3B6285
|
||||||
|
}
|
||||||
|
|
||||||
|
// .arrow-pointer {
|
||||||
|
// background: black;
|
||||||
|
// position: relative;
|
||||||
|
// margin: 0;
|
||||||
|
// padding: 0;
|
||||||
|
|
||||||
|
// &:before {
|
||||||
|
// content: '';
|
||||||
|
// position: absolute;
|
||||||
|
// right: -25px;
|
||||||
|
// bottom: 0;
|
||||||
|
// width: 0;
|
||||||
|
// height: 0;
|
||||||
|
// border-left: 25px solid black;
|
||||||
|
// border-top: 25px solid transparent;
|
||||||
|
// border-bottom: 25px solid transparent;
|
||||||
|
// }
|
||||||
|
// }
|
Loading…
Reference in New Issue
Block a user