mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
Did more icon stuff in the ui kit.
This commit is contained in:
PeekabooSteam
parent
6e203c09f9
commit
9cab555ca1
@ -83,4 +83,19 @@ section {
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.icon-list {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icon-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
.icon-list span {
|
||||
display:block;
|
||||
font-size: 12px;
|
||||
}
|
||||
@ -68,7 +68,7 @@ div.unit .unit-hotgroup {
|
||||
justify-content: center;
|
||||
position:absolute;
|
||||
transform: rotate( -45deg );
|
||||
translate:0 -24px;
|
||||
translate:0 -275%;
|
||||
width: var( --unit-hotgroup-width );
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
@ -346,318 +346,6 @@
|
||||
|
||||
<section>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="content-header">Planes</div>
|
||||
<div class="content-body">
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption">Neutral, not selected</div>
|
||||
|
||||
<div class="unit unit-air">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">4</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption">Neutral, selected</div>
|
||||
|
||||
<div class="unit unit-air" data-is-selected="true">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">4</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption">BLUEFOR, not selected</div>
|
||||
|
||||
<div class="unit unit-air" data-coalition="blue">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">4</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption">BLUEFOR, selected</div>
|
||||
|
||||
<div class="unit unit-air" data-coalition="blue" data-is-selected="true" data-has-fox-1="true">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">4</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption">REDFOR, not selected</div>
|
||||
|
||||
|
||||
<div class="unit unit-air" data-coalition="red">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">4</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption">REDFOR, selected</div>
|
||||
|
||||
|
||||
<div class="unit unit-air" data-coalition="red" data-is-selected="true" data-has-fox-1="true" data-has-fox-2="true" data-has-fox-3="true" data-has-other-ammo="true">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">4</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="content-header">Hotgroup</div>
|
||||
<div class="content-body">
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption">Neutral</div>
|
||||
<div class="unit unit-air" data-is-in-hotgroup="true" data-has-fox-1="true" data-has-fox-2="true" data-has-fox-3="true" data-has-other-ammo="true">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">4</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption">Neutral, selected</div>
|
||||
|
||||
<div class="unit unit-air" data-is-selected="true" data-is-in-hotgroup="true" data-has-fox-1="true" data-has-fox-2="true" data-has-fox-3="true" data-has-other-ammo="true">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">4</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption">BLUEFOR</div>
|
||||
|
||||
<div class="unit unit-air" data-coalition="blue" data-is-in-hotgroup="true" data-has-fox-1="true" data-has-fox-2="true" data-has-fox-3="true" data-has-other-ammo="true">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">4</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption">BLUEFOR, selected</div>
|
||||
|
||||
<div class="unit unit-air" data-coalition="blue" data-is-selected="true" data-is-in-hotgroup="true" data-has-fox-1="true" data-has-fox-2="true" data-has-fox-3="true" data-has-other-ammo="true">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">4</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption">REDFOR</div>
|
||||
|
||||
<div class="unit unit-air" data-coalition="red" data-is-in-hotgroup="true" data-has-fox-1="true" data-has-fox-2="true" data-has-fox-3="true" data-has-other-ammo="true">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">4</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption">REDFOR, selected</div>
|
||||
|
||||
<div class="unit unit-air" data-coalition="red" data-is-selected="true" data-is-in-hotgroup="true" data-has-fox-1="true" data-has-fox-2="true" data-has-fox-3="true" data-has-other-ammo="true">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">4</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="content-header">Fuel states (AI only)</div>
|
||||
@ -806,406 +494,6 @@
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="content-header">Ordinance (AI only)</div>
|
||||
<div class="content-body">
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption">Neutral</div>
|
||||
<div class="unit unit-air" data-pilot="ai" data-has-fox-1="true" data-has-fox-2="true" data-has-fox-3="true" data-has-other-ammo="true">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">4</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level" style="width:100%;"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption">Neutral</div>
|
||||
<div class="unit unit-air" data-pilot="ai" data-is-selected="true" data-has-fox-1="true" data-has-fox-2="true" data-has-fox-3="true" data-has-other-ammo="true">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">4</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level" style="width:100%;"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption">Blue</div>
|
||||
<div class="unit unit-air" data-pilot="ai" data-coalition="blue" data-has-fox-1="true" data-has-fox-2="true" data-has-fox-3="true" data-has-other-ammo="true">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">4</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level" style="width:100%;"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption">Blue</div>
|
||||
<div class="unit unit-air" data-pilot="ai" data-coalition="blue" data-is-selected="true" data-has-fox-1="true" data-has-fox-2="true" data-has-fox-3="true" data-has-other-ammo="true">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">4</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level" style="width:100%;"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption">Red</div>
|
||||
<div class="unit unit-air" data-pilot="ai" data-coalition="red" data-has-fox-1="true" data-has-fox-2="true" data-has-fox-3="true" data-has-other-ammo="true">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">4</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level" style="width:100%;"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption">Red</div>
|
||||
<div class="unit unit-air" data-pilot="ai" data-coalition="red" data-is-selected="true" data-has-fox-1="true" data-has-fox-2="true" data-has-fox-3="true" data-has-other-ammo="true">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">4</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level" style="width:100%;"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="content-header">Virtual velocity indicator</div>
|
||||
<div class="content-body">
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption"> </div>
|
||||
<div class="unit unit-air" data-pilot="ai" data-coalition="red" data-is-in-hotgroup="true">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-vvi" style="height: 50px; transform:rotate(0deg);"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">1</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level" style="width:100%;"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption"> </div>
|
||||
<div class="unit unit-air" data-pilot="ai" data-coalition="red" data-is-in-hotgroup="true">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-vvi" style="height: 80px; transform:rotate(45deg);"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">2</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level" style="width:100%;"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption"> </div>
|
||||
<div class="unit unit-air" data-pilot="ai" data-coalition="red" data-is-in-hotgroup="true">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-vvi" style="height: 50px; transform:rotate(90deg);"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">3</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level" style="width:100%;"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption"> </div>
|
||||
<div class="unit unit-air" data-pilot="ai" data-coalition="red" data-is-in-hotgroup="true" data-is-selected="true">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-vvi" style="height: 50px; transform:rotate(135deg);"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">4</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level" style="width:100%;"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption"> </div>
|
||||
<div class="unit unit-air" data-pilot="ai" data-coalition="red" data-is-in-hotgroup="true">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-vvi" style="height: 50px; transform:rotate(180deg);"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">5</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level" style="width:100%;"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption"> </div>
|
||||
<div class="unit unit-air" data-pilot="ai" data-coalition="red" data-is-in-hotgroup="true">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-vvi" style="height: 20px; transform:rotate(272deg);"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">5</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level" style="width:100%;"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="content-header">Flight Information</div>
|
||||
<div class="content-body">
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption"> </div>
|
||||
<div class="unit unit-air" data-pilot="ai" data-coalition="blue">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-vvi" style="height: 30px; transform:rotate(90deg);"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">4</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level" style="width:100%;"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
<div class="unit-summary">
|
||||
<div class="unit-callsign">Olympus 1-1</div>
|
||||
<div class="unit-heading">090</div>
|
||||
<div class="unit-altitude">25</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption"> </div>
|
||||
<div class="unit unit-air" data-pilot="ai" data-coalition="red" data-is-in-hotgroup="true">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-vvi" style="height: 50px; transform:rotate(135deg);"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">4</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level" style="width:100%;"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
<div class="unit-summary">
|
||||
<div class="unit-callsign">Springfield 3-1 | Longname</div>
|
||||
<div class="unit-heading">260</div>
|
||||
<div class="unit-altitude">31</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption"> </div>
|
||||
<div class="unit unit-air" data-pilot="ai" data-coalition="red" data-is-in-hotgroup="true" data-is-selected="true">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-vvi" style="height: 50px; transform:rotate(135deg);"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">4</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level" style="width:100%;"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
<div class="unit-summary">
|
||||
<div class="unit-callsign">Springfield 3-1 | Longname</div>
|
||||
<div class="unit-heading">260</div>
|
||||
<div class="unit-altitude">31</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="content-header">Status icons</div>
|
||||
@ -1392,128 +680,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="content-header">Overlaying planes</div>
|
||||
<div class="content-body">
|
||||
|
||||
<div id="overlaying-planes" class="example">
|
||||
|
||||
<div class="unit unit-air" data-pilot="ai" data-coalition="red" data-is-in-hotgroup="true" data-is-selected="true">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-vvi" style="height: 50px; transform:rotate(135deg);"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">4</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level" style="width:100%;"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
<div class="unit-summary">
|
||||
<div class="unit-callsign">Springfield 3-1 | Longname</div>
|
||||
<div class="unit-heading">260</div>
|
||||
<div class="unit-altitude">31</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unit unit-air" data-pilot="ai" data-coalition="red" data-is-in-hotgroup="true" data-is-selected="true">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-vvi" style="height: 50px; transform:rotate(135deg);"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">4</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level" style="width:100%;"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
<div class="unit-summary">
|
||||
<div class="unit-callsign">Springfield 3-1 | Longname</div>
|
||||
<div class="unit-heading">260</div>
|
||||
<div class="unit-altitude">31</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="content-header">Hidden planes</div>
|
||||
<div class="content-body">
|
||||
|
||||
<div class="example" data-hide-aircraft>
|
||||
|
||||
<div class="unit unit-air" data-pilot="ai" data-coalition="red" data-is-in-hotgroup="true" data-is-selected="true">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-vvi" style="height: 50px; transform:rotate(135deg);"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">4</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level" style="width:100%;"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
<div class="unit-summary">
|
||||
<div class="unit-callsign">Springfield 3-1 | Longname</div>
|
||||
<div class="unit-heading">260</div>
|
||||
<div class="unit-altitude">31</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unit unit-air" data-pilot="ai" data-coalition="red" data-is-in-hotgroup="true" data-is-selected="true">
|
||||
<div class="unit-selected-spotlight"></div>
|
||||
<div class="unit-vvi" style="height: 50px; transform:rotate(135deg);"></div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id">4</div>
|
||||
</div>
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level" style="width:100%;"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div class="unit-ammo-fox-1"></div>
|
||||
<div class="unit-ammo-fox-2"></div>
|
||||
<div class="unit-ammo-fox-3"></div>
|
||||
<div class="unit-ammo-other"></div>
|
||||
</div>
|
||||
<div class="unit-summary">
|
||||
<div class="unit-callsign">Springfield 3-1 | Longname</div>
|
||||
<div class="unit-heading">260</div>
|
||||
<div class="unit-altitude">31</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
@ -1692,26 +858,62 @@
|
||||
<div class="content-header">Icons</div>
|
||||
<div class="content-body">
|
||||
|
||||
<div class="example icon-list">
|
||||
<div class="example">
|
||||
<div class="caption">Actions</div>
|
||||
<img src="/themes/olympus/images/icons_actions_gas_dark.svg" />
|
||||
<img src="/themes/olympus/images/icons_actions_nothing_dark.svg" />
|
||||
<img src="/themes/olympus/images/icons_actions_rtb_dark.svg" />
|
||||
<img src="/themes/olympus/images/icons_actions_search_dark.svg" />
|
||||
<div class="icon-list">
|
||||
<div>
|
||||
<img src="/themes/olympus/images/icons_actions_gas_dark.svg" />
|
||||
<span>icons_actions_gas</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="/themes/olympus/images/icons_actions_nothing_dark.svg" />
|
||||
<span>icons_actions_nothing</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="/themes/olympus/images/icons_actions_rtb_dark.svg" />
|
||||
<span>icons_actions_rtb</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="/themes/olympus/images/icons_actions_search_dark.svg" />
|
||||
<span>icons_actions_search</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example icon-list">
|
||||
<div class="example">
|
||||
<div class="caption">RoE</div>
|
||||
<img src="/themes/olympus/images/icons_roe_free_dark.svg" />
|
||||
<img src="/themes/olympus/images/icons_roe_return_dark.svg" />
|
||||
<img src="/themes/olympus/images/icons_roe_stop_dark.svg" />
|
||||
<img src="/themes/olympus/images/icons_roe_target_dark.svg" />
|
||||
<div class="icon-list">
|
||||
<div>
|
||||
<img src="/themes/olympus/images/icons_roe_free_dark.svg" />
|
||||
<span>icons_roe_free</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="/themes/olympus/images/icons_roe_return_dark.svg" />
|
||||
<span>icons_roe_return</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="/themes/olympus/images/icons_roe_stop_dark.svg" />
|
||||
<span>icons_roe_stop</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="/themes/olympus/images/icons_roe_target_dark.svg" />
|
||||
<span>icons_roe_target</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example icon-list">
|
||||
<div class="example">
|
||||
<div class="caption">Threat</div>
|
||||
<img src="/themes/olympus/images/icons_threat_protect_dark.svg" />
|
||||
<img src="/themes/olympus/images/icons_threat_retreat_dark.svg" />
|
||||
<div class="icon-list">
|
||||
<div>
|
||||
<img src="/themes/olympus/images/icons_threat_protect_dark.svg" />
|
||||
<span>icons_threat_protect</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="/themes/olympus/images/icons_threat_retreat_dark.svg" />
|
||||
<span>icons_threat_retreat</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user