mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
452 lines
11 KiB
CSS
452 lines
11 KiB
CSS
/*** Unit marker elements ***/
|
|
[data-object|="unit"] {
|
|
align-items: center;
|
|
cursor: pointer;
|
|
display: flex;
|
|
height: 100%;
|
|
justify-content: center;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.unit-vvi {
|
|
align-self: center;
|
|
background: var(--secondary-gunmetal-grey);
|
|
display: flex;
|
|
justify-self: center;
|
|
padding-bottom: calc((var(--unit-width) / 2) + var(--unit-stroke-width));
|
|
position: absolute;
|
|
transform-origin: bottom;
|
|
translate: 0 -50%;
|
|
width: var(--unit-vvi-width);
|
|
}
|
|
|
|
.unit-hotgroup {
|
|
align-content: center;
|
|
background-color: var(--background-steel);
|
|
border-radius: var(--border-radius-xs);
|
|
display: none;
|
|
height: 15px;
|
|
justify-content: center;
|
|
position: absolute;
|
|
transform: rotate(-45deg);
|
|
translate: 0 -200%;
|
|
width: 15px;
|
|
}
|
|
|
|
.unit-hotgroup-id {
|
|
background-color: transparent;
|
|
color: white;
|
|
font-size: 9px;
|
|
font-weight: bolder;
|
|
transform: rotate(45deg);
|
|
translate: -1px 1px;
|
|
}
|
|
|
|
.unit-icon {
|
|
height: var(--unit-height);
|
|
position: absolute;
|
|
transform-origin: center;
|
|
width: var(--unit-width);
|
|
}
|
|
|
|
.unit-icon svg {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
[data-is-selected] .unit-icon::before {
|
|
background-color: var(--unit-spotlight-fill);
|
|
border-radius: 50%;
|
|
content: "";
|
|
height: 100%;
|
|
position: absolute;
|
|
width: 100%;
|
|
z-index: -1;
|
|
}
|
|
|
|
/*** Basic colours ***/
|
|
[data-coalition="blue"] .unit-icon svg > *:first-child {
|
|
fill: var(--unit-background-blue);
|
|
}
|
|
|
|
[data-coalition="red"] .unit-icon svg > *:first-child {
|
|
fill: var(--unit-background-red);
|
|
}
|
|
|
|
[data-coalition="neutral"] .unit-icon svg > *:first-child {
|
|
fill: var(--unit-background-neutral);
|
|
}
|
|
|
|
[data-is-selected] .unit-icon svg > *:first-child {
|
|
fill: white;
|
|
}
|
|
|
|
[data-is-highlighted] .unit-icon svg > *:first-child {
|
|
stroke: white;
|
|
}
|
|
|
|
/*** Cursors ***/
|
|
[data-is-dead],
|
|
[data-object|="unit-missile"],
|
|
[data-object|="unit-bomb"] {
|
|
cursor: default;
|
|
}
|
|
|
|
/*** 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;
|
|
font-size: 12px;
|
|
}
|
|
|
|
[data-object|="unit-groundunit"] .unit-short-label {
|
|
transform: translateY(7px);
|
|
}
|
|
|
|
/*** Health indicator ***/
|
|
[data-object|="unit"] .unit-health {
|
|
background: white;
|
|
border: var(--unit-health-border-width) solid var(--secondary-dark-steel);
|
|
border-radius: var(--border-radius-sm);
|
|
display: none;
|
|
height: var(--unit-health-height);
|
|
position: absolute;
|
|
translate: var(--unit-health-x) var(--unit-health-y);
|
|
width: var(--unit-health-width);
|
|
}
|
|
|
|
/*** Fuel indicator ***/
|
|
[data-object|="unit"] .unit-fuel {
|
|
background: white;
|
|
border: var(--unit-fuel-border-width) solid var(--secondary-dark-steel);
|
|
border-radius: var(--border-radius-sm);
|
|
display: none;
|
|
height: var(--unit-fuel-height);
|
|
position: absolute;
|
|
translate: var(--unit-fuel-x) var(--unit-fuel-y);
|
|
width: var(--unit-fuel-width);
|
|
}
|
|
|
|
[data-object|="unit"] .unit-fuel-level,
|
|
[data-object|="unit"] .unit-health-level {
|
|
background-color: var(--secondary-light-grey);
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
/*** Ammo indicator ***/
|
|
[data-object|="unit"] .unit-ammo {
|
|
column-gap: var(--unit-ammo-spacing);
|
|
display: none;
|
|
height: fit-content;
|
|
position: absolute;
|
|
translate: var(--unit-ammo-x) var(--unit-ammo-y);
|
|
width: fit-content;
|
|
}
|
|
|
|
[data-object|="unit"] .unit-ammo > * {
|
|
background-color: white;
|
|
border: var(--unit-ammo-border-width) solid var(--secondary-dark-steel);
|
|
border-radius: 50%;
|
|
padding: var(--unit-ammo-radius);
|
|
}
|
|
|
|
/*** Unit summary ***/
|
|
[data-object|="unit"] .unit-summary {
|
|
color: white;
|
|
column-gap: 6px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
justify-content: right;
|
|
line-height: 12px;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
row-gap: 1px;
|
|
text-shadow:
|
|
-1px -1px 0 #000,
|
|
1px -1px 0 #000,
|
|
-1px 1px 0 #000,
|
|
1px 1px 0 #000;
|
|
right: 100%;
|
|
width: fit-content;
|
|
}
|
|
|
|
[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"]:hover .unit-summary .unit-callsign {
|
|
direction: rtl;
|
|
overflow: visible;
|
|
}
|
|
|
|
/*** Common ***/
|
|
[data-object|="unit"]:hover .unit-ammo,
|
|
[data-object|="unit"]:hover .unit-health,
|
|
[data-object|="unit"]:hover .unit-fuel {
|
|
display: flex;
|
|
}
|
|
|
|
[data-object|="unit"][data-has-low-fuel] .unit-fuel,
|
|
[data-object|="unit"][data-has-low-health] .unit-health {
|
|
animation: pulse 1.5s linear infinite;
|
|
}
|
|
|
|
[data-object|="unit"][data-is-in-hotgroup] .unit-hotgroup,
|
|
[data-object|="unit"][data-is-selected] .unit-ammo,
|
|
[data-object|="unit"][data-is-selected] .unit-fuel,
|
|
[data-object|="unit"][data-is-selected] .unit-health,
|
|
[data-object|="unit"][data-is-selected] .unit-selected-spotlight {
|
|
display: flex;
|
|
}
|
|
|
|
[data-object|="unit"][data-has-fox-1] .unit-ammo > div:nth-child(1),
|
|
[data-object|="unit"][data-has-fox-2] .unit-ammo > div:nth-child(2),
|
|
[data-object|="unit"][data-has-fox-3] .unit-ammo > div:nth-child(3),
|
|
[data-object|="unit"][data-has-other-ammo] .unit-ammo > div:nth-child(4) {
|
|
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"] .unit-health-level,
|
|
[data-object|="unit"][data-coalition="blue"][data-has-fox-1]
|
|
.unit-ammo
|
|
> div:nth-child(1),
|
|
[data-object|="unit"][data-coalition="blue"][data-has-fox-2]
|
|
.unit-ammo
|
|
> div:nth-child(2),
|
|
[data-object|="unit"][data-coalition="blue"][data-has-fox-3]
|
|
.unit-ammo
|
|
> div:nth-child(3),
|
|
[data-object|="unit"][data-coalition="blue"][data-has-other-ammo]
|
|
.unit-ammo
|
|
> div:nth-child(4) {
|
|
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"] .unit-health-level,
|
|
[data-object|="unit"][data-coalition="red"][data-has-fox-1]
|
|
.unit-ammo
|
|
> div:nth-child(1),
|
|
[data-object|="unit"][data-coalition="red"][data-has-fox-2]
|
|
.unit-ammo
|
|
> div:nth-child(2),
|
|
[data-object|="unit"][data-coalition="red"][data-has-fox-3]
|
|
.unit-ammo
|
|
> div:nth-child(3),
|
|
[data-object|="unit"][data-coalition="red"][data-has-other-ammo]
|
|
.unit-ammo
|
|
> div:nth-child(4) {
|
|
background-color: var(--primary-red);
|
|
}
|
|
|
|
[data-object|="unit"][data-coalition="blue"] .unit-vvi {
|
|
background-color: var(--secondary-red-outline);
|
|
}
|
|
|
|
/*** Unit state ***/
|
|
[data-object|="unit"] .unit-state {
|
|
background-repeat: no-repeat;
|
|
height: 20px;
|
|
position: absolute;
|
|
width: 20px;
|
|
left: 0px;
|
|
top: 0px;
|
|
}
|
|
|
|
[data-object|="unit"][data-state="rtb"] .unit-state {
|
|
background-image: url("/vite/images/states/rtb.svg");
|
|
}
|
|
|
|
[data-object|="unit"][data-state="land"] .unit-state {
|
|
background-image: url("/vite/images/states/rtb.svg");
|
|
}
|
|
|
|
[data-object|="unit"][data-state="idle"] .unit-state {
|
|
background-image: url("/vite/images/states/idle.svg");
|
|
}
|
|
|
|
[data-object*="groundunit"][data-state="idle"] .unit-state,
|
|
[data-object*="navyunit"][data-state="idle"] .unit-state {
|
|
background-image: url(""); /* To avoid clutter, dont show the idle state for non flying units */
|
|
}
|
|
|
|
[data-object|="unit"][data-state="attack"] .unit-state,
|
|
[data-object|="unit"][data-state="bomb-point"] .unit-state,
|
|
[data-object|="unit"][data-state="carpet-bombing"] .unit-state,
|
|
[data-object|="unit"][data-state="fire-at-area"] .unit-state {
|
|
background-image: url("/vite/images/states/attack.svg");
|
|
}
|
|
|
|
[data-object|="unit"][data-state="follow"] .unit-state {
|
|
background-image: url("/vite/images/states/follow.svg");
|
|
}
|
|
|
|
[data-object|="unit"][data-state="refuel"] .unit-state {
|
|
background-image: url("/vite/images/states/refuel.svg");
|
|
}
|
|
|
|
[data-object|="unit"][data-state="human"] .unit-state {
|
|
background-image: url("/vite/images/states/human.svg");
|
|
}
|
|
|
|
[data-object|="unit"][data-state="dcs"] .unit-state {
|
|
background-image: url("/vite/images/states/dcs.svg");
|
|
}
|
|
|
|
[data-object|="unit"][data-state="land-at-point"] .unit-state {
|
|
background-image: url("/vite/images/states/land-at-point.svg");
|
|
}
|
|
|
|
[data-object|="unit"][data-state="no-task"] .unit-state {
|
|
background-image: url("/vite/images/states/no-task.svg");
|
|
}
|
|
|
|
[data-object|="unit"][data-state="off"] .unit-state {
|
|
background-image: url("/vite/images/states/off.svg");
|
|
}
|
|
|
|
[data-object|="unit"][data-state="tanker"] .unit-state {
|
|
background-image: url("/vite/images/states/tanker.svg");
|
|
}
|
|
|
|
[data-object|="unit"][data-state="AWACS"] .unit-state {
|
|
background-image: url("/vite/images/states/awacs.svg");
|
|
}
|
|
|
|
[data-object|="unit"][data-state="miss-on-purpose"] .unit-state {
|
|
background-image: url("/vite/images/states/miss-on-purpose.svg");
|
|
}
|
|
|
|
[data-object|="unit"][data-state="scenic-aaa"] .unit-state {
|
|
background-image: url("/vite/images/states/scenic-aaa.svg");
|
|
}
|
|
|
|
[data-object|="unit"][data-state="simulate-fire-fight"] .unit-state {
|
|
background-image: url("/vite/images/states/simulate-fire-fight.svg");
|
|
}
|
|
|
|
[data-object|="unit"] .unit-health::before {
|
|
background-image: url("/vite/images/icons/health.svg");
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
content: " ";
|
|
height: 6px;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
translate: -10px -2px;
|
|
width: 6px;
|
|
}
|
|
|
|
/*** Dead unit ***/
|
|
[data-object|="unit"][data-is-dead] .unit-selected-spotlight,
|
|
[data-object|="unit"][data-is-dead] .unit-short-label,
|
|
[data-object|="unit"][data-is-dead] .unit-vvi,
|
|
[data-object|="unit"][data-is-dead] .unit-hotgroup,
|
|
[data-object|="unit"][data-is-dead] .unit-hotgroup-id,
|
|
[data-object|="unit"][data-is-dead] .unit-state,
|
|
[data-object|="unit"][data-is-dead] .unit-fuel,
|
|
[data-object|="unit"][data-is-dead] .unit-health,
|
|
[data-object|="unit"][data-is-dead] .unit-ammo,
|
|
[data-object|="unit"][data-is-dead]:hover .unit-fuel,
|
|
[data-object|="unit"][data-is-dead]:hover .unit-ammo {
|
|
display: none;
|
|
}
|
|
|
|
[data-object|="unit"][data-is-dead] .unit-summary > * {
|
|
display: none;
|
|
}
|
|
|
|
[data-object|="unit"][data-is-dead] .unit-summary .unit-callsign {
|
|
display: block;
|
|
}
|
|
|
|
.ol-temporary-marker {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/*** Unit summary ***/
|
|
[data-object|="unit"] .unit-tactical {
|
|
color: white;
|
|
column-gap: 6px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
justify-content: left;
|
|
line-height: 12px;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
row-gap: 1px;
|
|
|
|
left: 100%;
|
|
width: fit-content;
|
|
}
|
|
|
|
[data-hide-bullseyes] [data-object|="unit"] .unit-bullseyes {
|
|
display: none;
|
|
}
|
|
|
|
[data-hide-BRAA] [data-object|="unit"] .unit-braa {
|
|
display: none;
|
|
}
|
|
|
|
[data-object|="unit"] .unit-blue-bullseye {
|
|
text-shadow:
|
|
-1px -1px 0 #00F,
|
|
1px -1px 0 #00F,
|
|
-1px 1px 0 #00F,
|
|
1px 1px 0 #00F;
|
|
}
|
|
|
|
[data-object|="unit"] .unit-red-bullseye {
|
|
text-shadow:
|
|
-1px -1px 0 #F00,
|
|
1px -1px 0 #F00,
|
|
-1px 1px 0 #F00,
|
|
1px 1px 0 #F00;
|
|
}
|
|
|
|
[data-object|="unit"] .unit-braa {
|
|
text-shadow:
|
|
-1px -1px 0 #000,
|
|
1px -1px 0 #000,
|
|
-1px 1px 0 #000,
|
|
1px 1px 0 #000;
|
|
}
|