mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
Added plane summaries and overlaying planes to UI kit.
This commit is contained in:
PeekabooSteam
parent
5378519265
commit
6662f24ec6
@ -32,12 +32,12 @@
|
||||
--unit-marker-centre-y: calc( var( --unit-marker-height ) / 2 );
|
||||
--unit-marker-font-size: 12px;
|
||||
--unit-marker-font-weight: bold;
|
||||
--unit-marker-height: 80px;
|
||||
--unit-marker-height: 100px;
|
||||
--unit-marker-spotlight-fill: var( --secondary-yellow );
|
||||
--unit-marker-spotlight-opacity: 68%;
|
||||
--unit-marker-spotlight-radius: 28px;
|
||||
--unit-marker-stroke-width: 2px;
|
||||
--unit-marker-width: 80px;
|
||||
--unit-marker-width: 150px;
|
||||
|
||||
--unit-marker-hotgroup-height: 12px;
|
||||
--unit-marker-hotgroup-width: var( --unit-marker-hotgroup-height );
|
||||
@ -255,9 +255,9 @@ svg.unit rect.unit-hotgroup {
|
||||
fill: var( --secondary-neutral );
|
||||
height: var( --unit-marker-hotgroup-height );
|
||||
transform: rotate( -45deg );
|
||||
transform-origin: center;
|
||||
translate: calc( var( --unit-marker-centre-x ) + ( var( --unit-marker-hotgroup-width ) / 2 ) ) -44px;
|
||||
width: var( --unit-marker-hotgroup-height );
|
||||
x: 13px;
|
||||
y: 33px;
|
||||
}
|
||||
|
||||
svg.unit text.unit-hotgroup-id {
|
||||
@ -363,6 +363,14 @@ svg.unit[data-has-other-ammo="true"] circle.unit-ammo-other {
|
||||
fill: var( --secondary-gunmetal-grey );
|
||||
}
|
||||
|
||||
svg.unit .unit-summary text {
|
||||
fill:white;
|
||||
font-size:10px;
|
||||
paint-order: stroke;
|
||||
stroke: black;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*** Default style **/
|
||||
|
||||
@ -39,6 +39,7 @@ section {
|
||||
column-gap: 20px;
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.example {
|
||||
@ -65,9 +66,22 @@ section {
|
||||
}
|
||||
|
||||
#tabs > div {
|
||||
background:rgb(226, 166, 54);
|
||||
background:rgb(199, 174, 120);
|
||||
border-radius: 5px;
|
||||
color:#333;
|
||||
cursor: pointer;
|
||||
padding:6px 10px;
|
||||
}
|
||||
|
||||
|
||||
#overlaying-planes {
|
||||
background-color:#99ccff;
|
||||
padding:20px;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
#overlaying-planes svg:nth-of-type(2) {
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 10px;
|
||||
}
|
||||
@ -224,10 +224,10 @@
|
||||
<svg class="unit" data-coalition="blue" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">3</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">3</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">18</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">18</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -245,10 +245,10 @@
|
||||
<svg class="unit" data-coalition="blue" data-is-selected="true" data-has-fox-2="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">4</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">4</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">16</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">16</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -268,10 +268,10 @@
|
||||
<svg class="unit" data-coalition="red" data-has-fox-2="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">4</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">4</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">16</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">16</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -291,10 +291,10 @@
|
||||
<svg class="unit" data-coalition="red" data-is-selected="true" data-has-fox-2="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">4</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">4</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">16</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">16</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -324,7 +324,7 @@
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">U</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">U</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -343,7 +343,7 @@
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">U</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">U</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -361,10 +361,10 @@
|
||||
<svg class="unit" data-is-in-hotgroup="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">4</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">4</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">U</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">U</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -381,10 +381,10 @@
|
||||
<svg class="unit" data-is-selected="true" data-is-in-hotgroup="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">4</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">4</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">U</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">U</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -410,10 +410,10 @@
|
||||
<svg class="unit" data-coalition="blue" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">4</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">4</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">18</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">18</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -431,10 +431,10 @@
|
||||
<svg class="unit" data-coalition="blue" data-is-selected="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">4</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">4</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">18</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">18</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -452,10 +452,10 @@
|
||||
<svg class="unit" data-coalition="blue" data-is-in-hotgroup="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">2</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">2</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">18</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">18</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -473,10 +473,10 @@
|
||||
<svg class="unit" data-coalition="blue" data-is-in-hotgroup="true" data-is-selected="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">2</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">2</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">18</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">18</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -502,10 +502,10 @@
|
||||
<svg class="unit" data-coalition="red" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">4</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">4</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">29</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">29</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -523,10 +523,10 @@
|
||||
<svg class="unit" data-coalition="red" data-is-selected="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">4</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">4</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">29</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">29</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -544,10 +544,10 @@
|
||||
<svg class="unit" data-coalition="red" data-is-in-hotgroup="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">2</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">2</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">5</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">5</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -565,10 +565,10 @@
|
||||
<svg class="unit" data-coalition="red" data-is-in-hotgroup="true" data-is-selected="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">2</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">2</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">5</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">5</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -594,10 +594,10 @@
|
||||
<svg class="unit" data-pilot="ai" data-coalition="red" data-is-selected="true" data-has-low-fuel="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">2</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">2</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">5</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">5</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 0 );" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -615,10 +615,10 @@
|
||||
<svg class="unit" data-pilot="ai" data-coalition="red" data-is-selected="true" data-has-low-fuel="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">2</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">2</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">5</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">5</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 0.1 );" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -635,10 +635,10 @@
|
||||
<svg class="unit" data-pilot="ai" data-coalition="red" data-is-selected="true" data-has-low-fuel="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">2</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">2</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">5</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">5</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 0.2 );" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -655,10 +655,10 @@
|
||||
<svg class="unit" data-pilot="ai" data-coalition="red" data-is-selected="true" data-has-low-fuel="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">2</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">2</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">5</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">5</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 0.3 );" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -675,10 +675,10 @@
|
||||
<svg class="unit" data-pilot="ai" data-coalition="red" data-is-selected="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">2</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">2</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">5</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">5</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 0.33);" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -695,10 +695,10 @@
|
||||
<svg class="unit" data-pilot="ai" data-coalition="red" data-is-selected="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">2</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">2</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">5</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">5</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 0.5 );" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -715,10 +715,10 @@
|
||||
<svg class="unit" data-pilot="ai" data-coalition="red" data-is-selected="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">2</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">2</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">5</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">5</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 0.75 );" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -735,10 +735,10 @@
|
||||
<svg class="unit" data-pilot="ai" data-coalition="red" data-is-selected="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">2</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">2</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">5</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">5</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -764,10 +764,10 @@
|
||||
<svg class="unit" data-pilot="ai" data-coalition="blue" data-has-fox-1="true" data-is-selected="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">2</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">2</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">16</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">16</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -784,10 +784,10 @@
|
||||
<svg class="unit" data-pilot="ai" data-coalition="blue" data-has-fox-2="true" data-is-selected="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">2</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">2</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">14</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">14</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -805,10 +805,10 @@
|
||||
<svg class="unit" data-pilot="ai" data-coalition="red" data-has-fox-3="true" data-is-selected="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">2</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">2</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">5</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">5</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -826,10 +826,10 @@
|
||||
<svg class="unit" data-pilot="ai" data-coalition="red" data-has-other-ammo="true" data-is-selected="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">2</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">2</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">31</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">31</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -847,10 +847,10 @@
|
||||
<svg class="unit" data-pilot="ai" data-has-fox-1="true" data-has-fox-2="true" data-has-fox-3="true" data-has-other-ammo="true" data-is-selected="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">2</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">2</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">15</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">15</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -879,10 +879,10 @@
|
||||
<svg class="unit" data-pilot="ai" data-coalition="blue" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">2</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">2</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">16</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">16</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -901,10 +901,10 @@
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-vvi" style="transform:rotate( calc( var( --unit-marker-air-vvi-rotation-offset ) ) ); height:calc( ( var( --unit-marker-air-height ) / 2 ) + 45px );" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">2</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">2</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">15</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">15</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -923,10 +923,10 @@
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-vvi" style="transform:rotate( calc( var( --unit-marker-air-vvi-rotation-offset ) + 45deg ) ); height:calc( ( var( --unit-marker-air-height ) / 2 ) + 16px );" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">2</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">2</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">15</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">15</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -945,10 +945,10 @@
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-vvi" style="transform:rotate( calc( var( --unit-marker-air-vvi-rotation-offset ) + 90deg ) ); height:calc( ( var( --unit-marker-air-height ) / 2 ) + 16px );" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">2</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">2</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">15</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">15</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -967,10 +967,10 @@
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-vvi" style="transform:rotate( calc( var( --unit-marker-air-vvi-rotation-offset ) + 121deg ) ); height:calc( ( var( --unit-marker-air-height ) / 2 ) + 10px );" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">2</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">2</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">18</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">18</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -989,10 +989,10 @@
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-vvi" style="transform:rotate( calc( var( --unit-marker-air-vvi-rotation-offset ) + 201deg ) ); height:calc( ( var( --unit-marker-air-height ) / 2 ) + 25px );" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">2</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">2</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">29</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">29</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -1011,10 +1011,10 @@
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-vvi" style="transform:rotate( calc( var( --unit-marker-air-vvi-rotation-offset ) + 329deg ) ); height:calc( ( var( --unit-marker-air-height ) / 2 ) + 25px );" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="38" y="17" class="unit-hotgroup-id">2</text>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">2</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="44px" class="unit-short-label">33</text>
|
||||
<text x="50%" y="54px" class="unit-short-label">33</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
@ -1037,72 +1037,109 @@
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption">Olympus 1-1; 090°; 20,000ft</div>
|
||||
<div class="unit unit-plane"
|
||||
data-coalition="blue"
|
||||
data-pilot="human">
|
||||
<div class="unit-spotlight">
|
||||
<div class="unit-selected-border">
|
||||
<div class="unit-vvi">
|
||||
<div class="unit-vvi-heading" style="transform: rotate(90deg); width:40;"></div>
|
||||
</div>
|
||||
<div class="unit-id">18</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id"></div>
|
||||
</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div data-ammo-type="fox-1"></div>
|
||||
<div data-ammo-type="fox-2"></div>
|
||||
<div data-ammo-type="fox-3"></div>
|
||||
<div data-ammo-type="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">20</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="caption">Olympus 1-1; 090°; 25,000ft</div>
|
||||
<svg class="unit" data-pilot="ai" data-coalition="red" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-vvi" style="transform:rotate( calc( var( --unit-marker-air-vvi-rotation-offset ) + 090deg ) ); height:calc( ( var( --unit-marker-air-height ) / 2 ) + 25px );" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">2</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="54px" class="unit-short-label">33</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
<circle class="unit-ammo unit-ammo-fox-2" />
|
||||
<circle class="unit-ammo unit-ammo-fox-3" />
|
||||
<circle class="unit-ammo unit-ammo-other" />
|
||||
<g class="unit-summary">
|
||||
<text class="unit-callsign" x="1" y="46">Olympus 1-1</text>
|
||||
<text class="unit-heading" x="20" y="60">090</text>
|
||||
<text class="unit-altitude" x="46" y="60">25</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="caption">Olympus 3-1; 260°; 30,000ft</div>
|
||||
<div class="unit unit-plane"
|
||||
data-coalition="red"
|
||||
data-pilot="human">
|
||||
<div class="unit-spotlight">
|
||||
<div class="unit-selected-border">
|
||||
<div class="unit-vvi">
|
||||
<div class="unit-vvi-heading" style="transform: rotate(260deg); width:60px;"></div>
|
||||
</div>
|
||||
<div class="unit-id">29</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="unit-hotgroup">
|
||||
<div class="unit-hotgroup-id"></div>
|
||||
</div>
|
||||
<div class="unit-fuel">
|
||||
<div class="unit-fuel-level"></div>
|
||||
</div>
|
||||
<div class="unit-ammo">
|
||||
<div data-ammo-type="fox-1"></div>
|
||||
<div data-ammo-type="fox-2"></div>
|
||||
<div data-ammo-type="fox-3"></div>
|
||||
<div data-ammo-type="other"></div>
|
||||
</div>
|
||||
<div class="unit-summary">
|
||||
<div class="unit-callsign">Olympus 3-1</div>
|
||||
<div class="unit-heading">260</div>
|
||||
<div class="unit-altitude">30</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="caption">Olympus 3-1; 260°; 31,000ft</div>
|
||||
<svg class="unit" data-pilot="ai" data-coalition="red" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-vvi" style="transform:rotate( calc( var( --unit-marker-air-vvi-rotation-offset ) + 260deg ) ); height:calc( ( var( --unit-marker-air-height ) / 2 ) + 25px );" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">2</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="54px" class="unit-short-label">33</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
<circle class="unit-ammo unit-ammo-fox-2" />
|
||||
<circle class="unit-ammo unit-ammo-fox-3" />
|
||||
<circle class="unit-ammo unit-ammo-other" />
|
||||
<g class="unit-summary">
|
||||
<text class="unit-callsign" x="1" y="46">Olympus 3-1</text>
|
||||
<text class="unit-heading" x="20" y="60">260</text>
|
||||
<text class="unit-altitude" x="46" y="60">31</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="content-header">Overlaying planes</div>
|
||||
<div class="content-body">
|
||||
|
||||
<div id="overlaying-planes" class="example">
|
||||
|
||||
<svg class="unit" data-pilot="ai" data-coalition="red" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-vvi" style="transform:rotate( calc( var( --unit-marker-air-vvi-rotation-offset ) + 090deg ) ); height:calc( ( var( --unit-marker-air-height ) / 2 ) + 25px );" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">2</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="54px" class="unit-short-label">33</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
<circle class="unit-ammo unit-ammo-fox-2" />
|
||||
<circle class="unit-ammo unit-ammo-fox-3" />
|
||||
<circle class="unit-ammo unit-ammo-other" />
|
||||
<g class="unit-summary">
|
||||
<text class="unit-callsign" x="1" y="46">Olympus 1-1</text>
|
||||
<text class="unit-heading" x="20" y="60">090</text>
|
||||
<text class="unit-altitude" x="46" y="60">25</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<svg class="unit" data-pilot="ai" data-coalition="red" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="unit-spotlight" />
|
||||
<rect class="unit-vvi" style="transform:rotate( calc( var( --unit-marker-air-vvi-rotation-offset ) + 260deg ) ); height:calc( ( var( --unit-marker-air-height ) / 2 ) + 25px );" />
|
||||
<rect class="unit-hotgroup"></rect>
|
||||
<text x="74" y="27" class="unit-hotgroup-id">2</text>
|
||||
<rect class="unit-selected-border" />
|
||||
<rect class="unit-marker" />
|
||||
<text x="50%" y="54px" class="unit-short-label">33</text>
|
||||
<rect class="unit-fuel" />
|
||||
<rect class="unit-fuel-level" style="width: calc( var( --unit-marker-air-fuel-width ) * 1 );" />
|
||||
<circle class="unit-ammo unit-ammo-fox-1" />
|
||||
<circle class="unit-ammo unit-ammo-fox-2" />
|
||||
<circle class="unit-ammo unit-ammo-fox-3" />
|
||||
<circle class="unit-ammo unit-ammo-other" />
|
||||
<g class="unit-summary">
|
||||
<text class="unit-callsign" x="1" y="46">Olympus 3-1</text>
|
||||
<text class="unit-heading" x="20" y="60">260</text>
|
||||
<text class="unit-altitude" x="46" y="60">31</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user