mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
593 lines
17 KiB
CSS
593 lines
17 KiB
CSS
:root {
|
|
/* Generic marker settings */
|
|
--unit-centre-x: calc( var( --unit-width ) / 2 );
|
|
--unit-centre-y: calc( var( --unit-height ) / 2 );
|
|
|
|
--unit-hotgroup-height: 10px;
|
|
--unit-hotgroup-width: var( --unit-hotgroup-height );
|
|
|
|
|
|
/* Air units' marker settings */
|
|
--unit-air-label-x: calc( var( --unit-centre-x ) - ( var( --unit-air-width ) / 2 ) + ( var( --unit-stroke-width ) / 2 ) );
|
|
--unit-air-label-y: calc( var( --unit-centre-y ) - ( var( --unit-air-height ) / 2 ) + ( var( --unit-stroke-width ) / 2 ) );
|
|
}
|
|
|
|
|
|
[data-object|="unit"] {
|
|
align-items: center;
|
|
cursor:pointer;
|
|
display:flex;
|
|
justify-content: center;
|
|
position:relative;
|
|
}
|
|
|
|
[data-hide-aircraft] #map-container [data-object|="unit-air"],
|
|
[data-hide-ground] #map-container [data-object|="unit-ground-mi"],
|
|
[data-hide-sam] #map-container [data-object|="unit-ground-sam"],
|
|
[data-hide-threat] #map-container .unit-threat,
|
|
[data-hide-naval] #map-container [data-object|="unit-ground-naval"],
|
|
[data-hide-blue] #map-container [data-object|="unit"][data-coalition="blue"],
|
|
[data-hide-red] #map-container [data-object|="unit"][data-coalition="red"],
|
|
[data-hide-neutral] #map-container [data-object|="unit"][data-coalition="neutral"] {
|
|
display:none;
|
|
}
|
|
|
|
|
|
[data-object|="unit"] .unit-selected-spotlight {
|
|
background-color: var( --unit-spotlight-fill );
|
|
border-radius: 50%;
|
|
display:none;
|
|
padding: var( --unit-spotlight-radius );
|
|
position: absolute;
|
|
z-index:1;
|
|
}
|
|
|
|
|
|
[data-object|="unit"] .unit-vvi {
|
|
align-self: center;
|
|
background:var( --secondary-gunmetal-grey );
|
|
display:flex;
|
|
justify-self: center;
|
|
transform-origin: bottom;
|
|
translate:0 -50%;
|
|
padding-bottom: calc( ( var( --unit-air-width ) / 2 ) + var( --unit-stroke-width ) );
|
|
position:absolute;
|
|
width: var( --unit-air-vvi-width );
|
|
z-index: 3;
|
|
}
|
|
|
|
|
|
[data-object|="unit"] .unit-hotgroup {
|
|
align-content: center;
|
|
background-color: black;
|
|
border-radius: var( --border-radius-xs );
|
|
display:none;
|
|
height: var( --unit-hotgroup-height );
|
|
justify-content: center;
|
|
position:absolute;
|
|
transform: rotate( -45deg );
|
|
translate:0 -275%;
|
|
width: var( --unit-hotgroup-width );
|
|
z-index: 5;
|
|
}
|
|
|
|
[data-object|="unit"] .unit-hotgroup-id {
|
|
background-color: transparent;
|
|
color:white;
|
|
font-size: 9px;
|
|
font-weight: bolder;
|
|
transform:rotate( 45deg );
|
|
}
|
|
|
|
[data-object|="unit"] .unit-marker-border {
|
|
border-radius: var( --border-radius-sm );
|
|
display:none;
|
|
height: calc( var( --unit-air-height ) + ( var( --unit-label-border-width ) * 2 ) );
|
|
position:absolute;
|
|
width: calc( var( --unit-air-width ) + ( var( --unit-label-border-width ) * 2 ) );
|
|
z-index:2;
|
|
}
|
|
|
|
|
|
/******************************
|
|
Marker
|
|
******************************/
|
|
|
|
[data-object|="unit"] .unit-marker {
|
|
background-color: transparent;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
position:absolute;
|
|
transform-origin: center;
|
|
z-index:3;
|
|
}
|
|
|
|
|
|
|
|
/* Air */
|
|
|
|
[data-object|="unit-air"] .unit-marker {
|
|
background-image: var( --unit-air-marker-neutral-url );
|
|
height: var( --unit-air-marker-height );
|
|
width: var( --unit-air-marker-width );
|
|
}
|
|
|
|
[data-object|="unit-air"]:hover .unit-marker {
|
|
background-image: var( --unit-air-marker-neutral-hover-url );
|
|
}
|
|
|
|
[data-object|="unit-air"][data-is-selected] .unit-marker {
|
|
background-image: var( --unit-air-marker-neutral-selected-url );
|
|
}
|
|
|
|
|
|
[data-object|="unit-air"][data-coalition="blue"] .unit-marker {
|
|
background-image: var( --unit-air-marker-blue-url );
|
|
}
|
|
|
|
[data-object|="unit-air"][data-coalition="blue"]:hover .unit-marker {
|
|
background-image: var( --unit-air-marker-blue-hover-url );
|
|
}
|
|
|
|
[data-object|="unit-air"][data-coalition="blue"][data-is-selected] .unit-marker {
|
|
background-image: var( --unit-air-marker-blue-selected-url );
|
|
}
|
|
|
|
|
|
[data-object|="unit-air"][data-coalition="red"] .unit-marker {
|
|
background-image: var( --unit-air-marker-red-url );
|
|
}
|
|
|
|
[data-object|="unit-air"][data-coalition="red"]:hover .unit-marker {
|
|
background-image: var( --unit-air-marker-red-hover-url );
|
|
}
|
|
|
|
[data-object|="unit-air"][data-coalition="red"][data-is-selected] .unit-marker {
|
|
background-image: var( --unit-air-marker-red-selected-url );
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Ground vehicles (not SAMs) */
|
|
|
|
[data-object|="unit-ground-mi"] .unit-marker {
|
|
background-image: var( --unit-ground-mi-marker-neutral-url );
|
|
height: var( --unit-ground-mi-marker-height );
|
|
width: var( --unit-ground-mi-marker-width );
|
|
}
|
|
|
|
[data-object|="unit-ground-mi"]:hover .unit-marker {
|
|
background-image: var( --unit-ground-mi-marker-neutral-hover-url );
|
|
}
|
|
|
|
[data-object|="unit-ground-mi"][data-is-selected] .unit-marker {
|
|
background-image: var( --unit-ground-mi-marker-neutral-selected-url );
|
|
}
|
|
|
|
|
|
[data-object|="unit-ground-mi"][data-coalition="blue"] .unit-marker {
|
|
background-image: var( --unit-ground-mi-marker-blue-url );
|
|
}
|
|
|
|
[data-object|="unit-ground-mi"][data-coalition="blue"]:hover .unit-marker {
|
|
background-image: var( --unit-ground-mi-marker-blue-hover-url );
|
|
}
|
|
|
|
[data-object|="unit-ground-mi"][data-coalition="blue"][data-is-selected] .unit-marker {
|
|
background-image: var( --unit-ground-mi-marker-blue-selected-url );
|
|
}
|
|
|
|
|
|
[data-object|="unit-ground-mi"][data-coalition="red"] .unit-marker {
|
|
background-image: var( --unit-ground-mi-marker-red-url );
|
|
}
|
|
|
|
[data-object|="unit-ground-mi"][data-coalition="red"]:hover .unit-marker {
|
|
background-image: var( --unit-ground-mi-marker-red-hover-url );
|
|
}
|
|
|
|
[data-object|="unit-ground-mi"][data-coalition="red"][data-is-selected] .unit-marker {
|
|
background-image: var( --unit-ground-mi-marker-red-selected-url );
|
|
}
|
|
|
|
|
|
/* SAMs */
|
|
|
|
[data-object|="unit-ground-sam"] .unit-selected-spotlight {
|
|
translate:0 2px;
|
|
}
|
|
|
|
[data-object|="unit-ground-sam"] .unit-marker {
|
|
background-image: var( --unit-sam-marker-neutral-url );
|
|
height: var( --unit-sam-marker-height );
|
|
width: var( --unit-sam-marker-width );
|
|
}
|
|
|
|
|
|
[data-object|="unit-ground-sam"]:hover .unit-marker {
|
|
background-image: var( --unit-ground-sam-marker-neutral-hover-url );
|
|
}
|
|
|
|
[data-object|="unit-ground-sam"][data-is-selected] .unit-marker {
|
|
background-image: var( --unit-ground-sam-marker-neutral-selected-url );
|
|
}
|
|
|
|
|
|
[data-object|="unit-ground-sam"][data-coalition="blue"] .unit-marker {
|
|
background-image: var( --unit-ground-sam-marker-blue-url );
|
|
}
|
|
|
|
[data-object|="unit-ground-sam"][data-coalition="blue"]:hover .unit-marker {
|
|
background-image: var( --unit-ground-sam-marker-blue-hover-url );
|
|
}
|
|
|
|
[data-object|="unit-ground-sam"][data-coalition="blue"][data-is-selected] .unit-marker {
|
|
background-image: var( --unit-ground-sam-marker-blue-selected-url );
|
|
}
|
|
|
|
|
|
[data-object|="unit-ground-sam"][data-coalition="red"] .unit-marker {
|
|
background-image: var( --unit-ground-sam-marker-red-url );
|
|
}
|
|
|
|
[data-object|="unit-ground-sam"][data-coalition="red"]:hover .unit-marker {
|
|
background-image: var( --unit-ground-sam-marker-red-hover-url );
|
|
}
|
|
|
|
[data-object|="unit-ground-sam"][data-coalition="red"][data-is-selected] .unit-marker {
|
|
background-image: var( --unit-ground-sam-marker-red-selected-url );
|
|
}
|
|
|
|
|
|
/* Naval */
|
|
|
|
[data-object|="unit-naval"] .unit-selected-spotlight {
|
|
translate:0 -2px;
|
|
}
|
|
|
|
[data-object|="unit-naval"] .unit-marker {
|
|
background-image: var( --unit-naval-marker-neutral-url );
|
|
height: var( --unit-naval-marker-height );
|
|
width: var( --unit-naval-marker-width );
|
|
}
|
|
|
|
|
|
[data-object|="unit-naval"]:hover .unit-marker {
|
|
background-image: var( --unit-naval-marker-neutral-hover-url );
|
|
}
|
|
|
|
[data-object|="unit-naval"][data-is-selected] .unit-marker {
|
|
background-image: var( --unit-naval-marker-neutral-selected-url );
|
|
}
|
|
|
|
|
|
[data-object|="unit-naval"][data-coalition="blue"] .unit-marker {
|
|
background-image: var( --unit-naval-marker-blue-url );
|
|
}
|
|
|
|
[data-object|="unit-naval"][data-coalition="blue"]:hover .unit-marker {
|
|
background-image: var( --unit-naval-marker-blue-hover-url );
|
|
}
|
|
|
|
[data-object|="unit-naval"][data-coalition="blue"][data-is-selected] .unit-marker {
|
|
background-image: var( --unit-naval-marker-blue-selected-url );
|
|
}
|
|
|
|
|
|
[data-object|="unit-naval"][data-coalition="red"] .unit-marker {
|
|
background-image: var( --unit-naval-marker-red-url );
|
|
}
|
|
|
|
[data-object|="unit-naval"][data-coalition="red"]:hover .unit-marker {
|
|
background-image: var( --unit-naval-marker-red-hover-url );
|
|
}
|
|
|
|
[data-object|="unit-naval"][data-coalition="red"][data-is-selected] .unit-marker {
|
|
background-image: var( --unit-naval-marker-red-selected-url );
|
|
}
|
|
|
|
|
|
/* Building */
|
|
|
|
[data-object|="unit-building"] .unit-marker {
|
|
background-image: var( --unit-building-marker-neutral-url );
|
|
height: var( --unit-building-marker-height );
|
|
width: var( --unit-building-marker-width );
|
|
}
|
|
|
|
|
|
[data-object|="unit-building"][data-coalition="blue"] .unit-marker {
|
|
background-image: var( --unit-building-marker-blue-url );
|
|
}
|
|
|
|
|
|
[data-object|="unit-building"][data-coalition="red"] .unit-marker {
|
|
background-image: var( --unit-building-marker-red-url );
|
|
}
|
|
|
|
|
|
|
|
/* Weapons */
|
|
|
|
[data-object|="unit-weapon"] {
|
|
cursor: default;
|
|
}
|
|
|
|
[data-object|="unit-weapon-missile"] .unit-marker {
|
|
background-image: var( --unit-weapons-missile-marker-neutral-url );
|
|
height: var( --unit-weapons-missile-marker-height );
|
|
width: var( --unit-weapons-missile-marker-width );
|
|
}
|
|
|
|
|
|
[data-object|="unit-weapon-missile"][data-coalition="blue"] .unit-marker {
|
|
background-image: var( --unit-weapons-missile-marker-blue-url );
|
|
}
|
|
|
|
|
|
[data-object|="unit-weapon-missile"][data-coalition="red"] .unit-marker {
|
|
background-image: var( --unit-weapons-missile-marker-red-url );
|
|
}
|
|
|
|
|
|
/********************************************
|
|
* Labels
|
|
********************************************/
|
|
|
|
[data-object|="unit"] .unit-short-label {
|
|
color: var( --secondary-gunmetal-grey );
|
|
font-size: var(--unit-font-size);
|
|
font-weight: var(--unit-font-weight);
|
|
line-height: normal;
|
|
position: absolute;
|
|
z-index:10;
|
|
}
|
|
|
|
[data-object|="unit-ground-mi"] .unit-short-label {
|
|
translate: -1px 0;
|
|
}
|
|
|
|
[data-object|="unit-ground-sam"] .unit-short-label {
|
|
translate:0 50%;
|
|
}
|
|
|
|
[data-object|="unit-naval"] .unit-short-label {
|
|
translate:0 -50%;
|
|
}
|
|
|
|
|
|
[data-object|="unit"] .unit-fuel {
|
|
background:white;
|
|
border: var( --unit-air-fuel-border-width ) solid var( --secondary-dark-steel );
|
|
border-radius: var( --border-radius-sm );
|
|
display:none;
|
|
height: var( --unit-air-fuel-height );
|
|
position: absolute;
|
|
translate:var( --unit-air-fuel-x ) var( --unit-air-fuel-y );
|
|
width: var( --unit-air-fuel-width );
|
|
z-index: 5;
|
|
}
|
|
|
|
[data-object|="unit"] .unit-fuel-level {
|
|
background-color: var( --secondary-light-grey );
|
|
height:100%;
|
|
width:100%;
|
|
}
|
|
|
|
|
|
[data-object|="unit"] .unit-ammo {
|
|
column-gap: var( --unit-air-ammo-spacing );
|
|
display:none;
|
|
height:fit-content;
|
|
position:absolute;
|
|
translate:var( --unit-air-ammo-x ) var( --unit-air-ammo-y );
|
|
width:fit-content;
|
|
}
|
|
|
|
[data-object|="unit"] .unit-ammo > * {
|
|
background-color: white;
|
|
border: var( --unit-air-ammo-border-width ) solid var( --secondary-dark-steel );
|
|
border-radius: 50%;
|
|
padding: var( --unit-air-ammo-radius );
|
|
}
|
|
|
|
|
|
[data-object|="unit"] .unit-summary {
|
|
column-gap: 6px;
|
|
color:white;
|
|
display:flex;
|
|
flex-wrap: wrap;
|
|
font-size:11px;
|
|
font-weight: bold;
|
|
justify-content: right;
|
|
line-height: 12px;
|
|
position:absolute;
|
|
row-gap: 1px;
|
|
text-shadow:
|
|
-1px -1px 0 #000,
|
|
1px -1px 0 #000,
|
|
-1px 1px 0 #000,
|
|
1px 1px 0 #000;
|
|
translate: -60px 0;
|
|
width:fit-content;
|
|
z-index:20;
|
|
}
|
|
|
|
[data-hide-labels] [data-object|="unit"] .unit-summary {
|
|
display:none;
|
|
}
|
|
|
|
[data-object|="unit"] .unit-summary > * {
|
|
padding:1px;
|
|
}
|
|
|
|
[data-object|="unit"] .unit-summary .unit-callsign {
|
|
color:white;
|
|
overflow: hidden;
|
|
text-align: right;
|
|
transform-origin: right;
|
|
white-space: nowrap;
|
|
width: 80px;
|
|
}
|
|
|
|
[data-object|="unit"] .unit-summary .unit-callsign:hover {
|
|
direction: rtl;
|
|
overflow:visible;
|
|
}
|
|
|
|
|
|
|
|
[data-object|="unit"][data-pilot|="ai"]:hover .unit-ammo,
|
|
[data-object|="unit"][data-pilot|="ai"]:hover .unit-fuel {
|
|
display:flex;
|
|
}
|
|
|
|
[data-object|="unit"][data-is-in-hotgroup] .unit-hotgroup,
|
|
[data-object|="unit"][data-pilot|="ai"][data-is-selected] .unit-ammo,
|
|
[data-object|="unit"][data-pilot|="ai"][data-is-selected] .unit-fuel,
|
|
[data-object|="unit"][data-is-selected] .unit-selected-spotlight {
|
|
display:flex;
|
|
}
|
|
|
|
[data-object|="unit"][data-has-fox-1] .unit-ammo-fox-1,
|
|
[data-object|="unit"][data-has-fox-2] .unit-ammo-fox-2,
|
|
[data-object|="unit"][data-has-fox-3] .unit-ammo-fox-3,
|
|
[data-object|="unit"][data-has-other-ammo] .unit-ammo-other {
|
|
background-color: var( --secondary-gunmetal-grey );
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-object|="unit"][data-coalition="blue"][data-is-selected] .unit-short-label {
|
|
color: var( --secondary-blue-text );
|
|
}
|
|
|
|
[data-object|="unit"][data-coalition="blue"] .unit-fuel-level,
|
|
[data-object|="unit"][data-coalition="blue"][data-has-fox-1] .unit-ammo-fox-1,
|
|
[data-object|="unit"][data-coalition="blue"][data-has-fox-2] .unit-ammo-fox-2,
|
|
[data-object|="unit"][data-coalition="blue"][data-has-fox-3] .unit-ammo-fox-3,
|
|
[data-object|="unit"][data-coalition="blue"][data-has-other-ammo] .unit-ammo-other {
|
|
background-color: var( --primary-blue );
|
|
}
|
|
|
|
[data-object|="unit"][data-coalition="blue"] .unit-vvi {
|
|
background-color: var( --secondary-blue-outline );
|
|
}
|
|
|
|
|
|
[data-object|="unit"][data-coalition="red"][data-is-selected] .unit-short-label {
|
|
color: var( --secondary-red-text );
|
|
}
|
|
|
|
[data-object|="unit"][data-coalition="red"] .unit-fuel-level,
|
|
[data-object|="unit"][data-coalition="red"][data-has-fox-1] .unit-ammo-fox-1,
|
|
[data-object|="unit"][data-coalition="red"][data-has-fox-2] .unit-ammo-fox-2,
|
|
[data-object|="unit"][data-coalition="red"][data-has-fox-3] .unit-ammo-fox-3,
|
|
[data-object|="unit"][data-coalition="red"][data-has-other-ammo] .unit-ammo-other {
|
|
background-color: var( --primary-red );
|
|
}
|
|
|
|
[data-object|="unit"][data-coalition="blue"] .unit-vvi {
|
|
background-color: var( --secondary-red-outline );
|
|
}
|
|
|
|
|
|
|
|
@keyframes pulse {
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
[data-object|="unit"][data-pilot|="ai"][data-has-low-fuel] .unit-fuel {
|
|
animation: pulse 1.5s linear infinite;
|
|
}
|
|
|
|
|
|
[data-object|="unit"] .unit-status {
|
|
background-repeat: no-repeat;
|
|
position:absolute;
|
|
height:var( --unit-air-status-rtb-height );
|
|
translate: calc( 0px - ( var( --unit-air-width ) / 2 ) ) calc( 0px - ( var( --unit-air-height ) / 2 ) );
|
|
transform-origin: center;
|
|
width:var( --unit-air-status-rtb-width );
|
|
z-index: 10;
|
|
}
|
|
|
|
[data-object|="unit"][data-status="rtb"] .unit-status {
|
|
background-image: var( --unit-air-status-rtb-neutral-url );
|
|
height:var( --unit-air-status-rtb-height );
|
|
width:var( --unit-air-status-rtb-width );
|
|
}
|
|
|
|
[data-object|="unit"][data-status="rtb"][data-coalition="blue"] .unit-status {
|
|
background-image: var( --unit-air-status-rtb-blue-url );
|
|
}
|
|
|
|
[data-object|="unit"][data-status="rtb"][data-coalition="red"] .unit-status {
|
|
background-image: var( --unit-air-status-rtb-red-url );
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-object|="unit"][data-status="hold"] .unit-status {
|
|
background-image: var( --unit-air-status-hold-neutral-url );
|
|
height:var( --unit-air-status-hold-height );
|
|
width:var( --unit-air-status-hold-width );
|
|
}
|
|
|
|
[data-object|="unit"][data-status="hold"][data-coalition="blue"] .unit-status {
|
|
background-image: var( --unit-air-status-hold-blue-url );
|
|
}
|
|
|
|
[data-object|="unit"][data-status="hold"][data-coalition="red"] .unit-status {
|
|
background-image: var( --unit-air-status-hold-red-url );
|
|
}
|
|
|
|
|
|
/*** DEAD ***/
|
|
[data-object|="unit-air"][ data-is-dead ] {
|
|
cursor: default;
|
|
}
|
|
|
|
[data-object|="unit-air"][ data-is-dead ] .unit-marker {
|
|
background-image: var( --unit-air-marker-neutral-dead-url );
|
|
background-position: 50% 50%;
|
|
background-size: auto 32px;
|
|
}
|
|
|
|
[data-object|="unit-air"][ data-is-dead ][data-coalition="blue"] .unit-marker {
|
|
background-image: var( --unit-air-marker-blue-dead-url );
|
|
}
|
|
|
|
[data-object|="unit-air"][ data-is-dead ][data-coalition="red"] .unit-marker {
|
|
background-image: var( --unit-air-marker-red-dead-url );
|
|
}
|
|
|
|
|
|
[data-object|="unit-air"][ data-is-dead ] .unit-selected-spotlight,
|
|
[data-object|="unit-air"][ data-is-dead ] .unit-short-label,
|
|
[data-object|="unit-air"][ data-is-dead ] .unit-vvi,
|
|
[data-object|="unit-air"][ data-is-dead ] .unit-hotgroup,
|
|
[data-object|="unit-air"][ data-is-dead ] .unit-hotgroup-id,
|
|
[data-object|="unit-air"][ data-is-dead ] .unit-status,
|
|
[data-object|="unit-air"][ data-is-dead ] .unit-fuel,
|
|
[data-object|="unit-air"][ data-is-dead ] .unit-ammo,
|
|
[data-object|="unit-air"][ data-is-dead ]:hover .unit-fuel,
|
|
[data-object|="unit-air"][ data-is-dead ]:hover .unit-ammo {
|
|
display:none !important;
|
|
}
|
|
|
|
|
|
[data-object|="unit-air"][ data-is-dead ] .unit-summary > * {
|
|
display:none;
|
|
}
|
|
|
|
[data-object|="unit-air"][ data-is-dead ] .unit-summary .unit-callsign {
|
|
display:block;
|
|
}
|
|
|