mirror of
https://github.com/Max-Stevenson/jurassic-park-interface.git
synced 2024-06-01 06:41:30 +00:00
More progress on vehicle tab.
This commit is contained in:
parent
37cc0d1ad9
commit
94679a95d5
26
index.html
26
index.html
|
@ -344,13 +344,37 @@
|
||||||
<div class="video-screen__vehicle-details__wrapper">
|
<div class="video-screen__vehicle-details__wrapper">
|
||||||
<div class="video-screen__vehicle-details__left">
|
<div class="video-screen__vehicle-details__left">
|
||||||
<div class="vehicle-details__detail-container">
|
<div class="vehicle-details__detail-container">
|
||||||
<button class="vehicle-status__active"></button>
|
<div class="vehicle-status__active"></div>
|
||||||
<p class="vehicle-details__status-text white-font-black-background">EXP 4</p>
|
<p class="vehicle-details__status-text white-font-black-background">EXP 4</p>
|
||||||
<div class="triangle-wrapper">
|
<div class="triangle-wrapper">
|
||||||
<div class="outer-triangle__right-blue"></div>
|
<div class="outer-triangle__right-blue"></div>
|
||||||
<div class="inner-triangle__right-blue"></div>
|
<div class="inner-triangle__right-blue"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="vehicle-details__detail-container">
|
||||||
|
<div class="vehicle-status__active"></div>
|
||||||
|
<p class="vehicle-details__status-text white-font-black-background">EXP 5</p>
|
||||||
|
<div class="triangle-wrapper">
|
||||||
|
<div class="outer-triangle__right-blue"></div>
|
||||||
|
<div class="inner-triangle__right-blue"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="vehicle-details__detail-container">
|
||||||
|
<div class="vehicle-status__inactive"></div>
|
||||||
|
<p class="vehicle-details__status-text white-font-black-background">EXP 6</p>
|
||||||
|
<div class="triangle-wrapper">
|
||||||
|
<div class="outer-triangle__right-blue"></div>
|
||||||
|
<div class="inner-triangle__right-blue"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="vehicle-details__detail-container">
|
||||||
|
<div class="vehicle-status__inactive"></div>
|
||||||
|
<p class="vehicle-details__status-text white-font-black-background">EXP 7</p>
|
||||||
|
<div class="triangle-wrapper">
|
||||||
|
<div class="outer-triangle__right-blue"></div>
|
||||||
|
<div class="inner-triangle__right-blue"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="vide-screen__vehicle-details__right">
|
<div class="vide-screen__vehicle-details__right">
|
||||||
|
|
||||||
|
|
|
@ -801,6 +801,7 @@ body {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-screen__vehicle-status__wrapper {
|
.video-screen__vehicle-status__wrapper {
|
||||||
|
@ -914,6 +915,12 @@ body {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0.2vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vehicle-details__detail-container .triangle-wrapper {
|
||||||
|
align-self: end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-screen__vehicle-details__left {
|
.video-screen__vehicle-details__left {
|
||||||
|
@ -922,7 +929,21 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.vehicle-status__active {
|
.vehicle-status__active {
|
||||||
margin-right: 1vw;
|
margin: 0 1vw;
|
||||||
|
background: radial-gradient(circle, #5FC2A6, #2C7C6E, #1B5E60, #023B3A);
|
||||||
|
width: 1vw;
|
||||||
|
height: 1vw;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 0.1vw solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vehicle-status__inactive {
|
||||||
|
margin: 0 1vw;
|
||||||
|
background: radial-gradient(circle, #db817b, #6E5375, #725378, #473959);
|
||||||
|
width: 1vw;
|
||||||
|
height: 1vw;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 0.1vw solid black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vehicle-status__label {
|
.vehicle-status__label {
|
||||||
|
@ -932,28 +953,39 @@ body {
|
||||||
.outer-triangle__right-blue {
|
.outer-triangle__right-blue {
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
border-top: 0.9vw solid transparent;
|
border-top: 0.75vw solid transparent;
|
||||||
border-left: 0.9vw solid #3B6285;
|
border-left: 0.75vw solid #3B6285;
|
||||||
border-bottom: 0.9vw solid transparent;
|
border-bottom: 0.75vw solid transparent;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.inner-triangle__right-blue {
|
.inner-triangle__right-blue {
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
border-top: 0.8vw solid transparent;
|
border-top: 0.65vw solid transparent;
|
||||||
border-left: 0.8vw solid black;
|
border-left: 0.65vw solid black;
|
||||||
border-bottom: 0.8vw solid transparent;
|
border-bottom: 0.65vw solid transparent;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0.1vw;
|
top: 0.1vw;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vehicle-details__status-text {
|
.video-screen__vehicle-details__left .vehicle-details__status-text {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border-top: 0.1vw solid #3B6285;
|
border-top: 0.1vw solid #3B6285;
|
||||||
border-left: 0.1vw solid #3B6285;
|
border-left: 0.1vw solid #3B6285;
|
||||||
border-bottom: 0.1vw solid #3B6285;
|
border-bottom: 0.1vw solid #3B6285;
|
||||||
|
font-size: 0.75vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-screen__vehicle-details__left > div:nth-child(3) > p,
|
||||||
|
.video-screen__vehicle-details__left > div:nth-child(4) > p {
|
||||||
|
background: #2F89C6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-screen__vehicle-details__left > div:nth-child(3) > div.triangle-wrapper > div.inner-triangle__right-blue,
|
||||||
|
.video-screen__vehicle-details__left > div:nth-child(4) > div.triangle-wrapper > div.inner-triangle__right-blue {
|
||||||
|
border-left: 0.65vw solid #2F89C6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.control-panel__button-control {
|
.control-panel__button-control {
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -97,6 +97,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-screen__vehicle-status__wrapper {
|
.video-screen__vehicle-status__wrapper {
|
||||||
|
@ -211,6 +212,12 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: .2vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vehicle-details__detail-container .triangle-wrapper {
|
||||||
|
align-self: end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-screen__vehicle-details__left {
|
.video-screen__vehicle-details__left {
|
||||||
|
@ -219,7 +226,21 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.vehicle-status__active {
|
.vehicle-status__active {
|
||||||
margin-right: 1vw;
|
margin: 0 1vw;
|
||||||
|
background: radial-gradient(circle, #5FC2A6, #2C7C6E, #1B5E60, #023B3A);
|
||||||
|
width: 1vw;
|
||||||
|
height: 1vw;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: .1vw solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vehicle-status__inactive {
|
||||||
|
margin: 0 1vw;
|
||||||
|
background: radial-gradient(circle, #db817b, #6E5375, #725378, #473959);
|
||||||
|
width: 1vw;
|
||||||
|
height: 1vw;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: .1vw solid black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vehicle-status__label {
|
.vehicle-status__label {
|
||||||
|
@ -229,45 +250,37 @@
|
||||||
.outer-triangle__right-blue {
|
.outer-triangle__right-blue {
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
border-top: .9vw solid transparent;
|
border-top: .75vw solid transparent;
|
||||||
border-left: .9vw solid #3B6285;
|
border-left: .75vw solid #3B6285;
|
||||||
border-bottom: .9vw solid transparent;
|
border-bottom: .75vw solid transparent;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.inner-triangle__right-blue {
|
.inner-triangle__right-blue {
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
border-top: 0.8vw solid transparent;
|
border-top: .65vw solid transparent;
|
||||||
border-left: 0.8vw solid black;
|
border-left: .65vw solid black;
|
||||||
border-bottom: 0.8vw solid transparent;
|
border-bottom: .65vw solid transparent;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0.1vw;
|
top: 0.1vw;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vehicle-details__status-text {
|
.video-screen__vehicle-details__left .vehicle-details__status-text {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border-top: .1vw solid #3B6285;
|
border-top: .1vw solid #3B6285;
|
||||||
border-left: .1vw solid #3B6285;
|
border-left: .1vw solid #3B6285;
|
||||||
border-bottom: .1vw solid #3B6285
|
border-bottom: .1vw solid #3B6285;
|
||||||
|
font-size: .75vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
// .arrow-pointer {
|
.video-screen__vehicle-details__left > div:nth-child(3) > p,
|
||||||
// background: black;
|
.video-screen__vehicle-details__left > div:nth-child(4) > p {
|
||||||
// position: relative;
|
background: #2F89C6;
|
||||||
// margin: 0;
|
}
|
||||||
// padding: 0;
|
|
||||||
|
|
||||||
// &:before {
|
.video-screen__vehicle-details__left > div:nth-child(3) > div.triangle-wrapper > div.inner-triangle__right-blue,
|
||||||
// content: '';
|
.video-screen__vehicle-details__left > div:nth-child(4) > div.triangle-wrapper > div.inner-triangle__right-blue {
|
||||||
// position: absolute;
|
border-left: 0.65vw solid #2F89C6;
|
||||||
// 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