mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
460 lines
12 KiB
CSS
460 lines
12 KiB
CSS
/* Variables definitions */
|
|
:root {
|
|
--accent-green : #8bff63;
|
|
--accent-light-blue : #5ca7ff;
|
|
--background-grey : #3d4651;
|
|
--background-offwhite : #f2f2f3;
|
|
--background-steel : #202831;
|
|
--primary-blue : #247be2;
|
|
--primary-grey : #CFD9E8;
|
|
--primary-red : #ff5858;
|
|
--secondary-blue-outline : #082e44;
|
|
--secondary-dark-steel : #181e25;
|
|
--secondary-gunmetal-grey : #2f2f2f;
|
|
--secondary-light-grey : #797e83;
|
|
--secondary-neutral : #111111;
|
|
--secondary-red-outline : #262222;
|
|
--secondary-yellow : #ffd46893;
|
|
--nav-text : #ECECEC;
|
|
|
|
|
|
--border-radius-xs : 2px;
|
|
--border-radius-sm : 5px;
|
|
--border-radius-md : 10px;
|
|
--border-radius-lg : 15px;
|
|
|
|
--font-weight-bolder : 600;
|
|
|
|
|
|
/* Generic marker settings */
|
|
--unit-marker-border-radius: 3px;
|
|
--unit-marker-centre-x: calc( var( --unit-marker-width ) / 2 );
|
|
--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-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-hotgroup-height: 12px;
|
|
--unit-marker-hotgroup-width: var( --unit-marker-hotgroup-height );
|
|
|
|
|
|
/* Air units' marker settings */
|
|
--unit-marker-air-ammo-gap: calc( 2px + var( --unit-marker-stroke-width ) );
|
|
--unit-marker-air-ammo-radius: 3px;
|
|
--unit-marker-air-ammo-y: calc( var( --unit-marker-height ) - 8px );
|
|
--unit-marker-air-fuel-height: 6px;
|
|
--unit-marker-air-fuel-width: 36px;
|
|
--unit-marker-air-fuel-x: calc( var( --unit-marker-centre-x ) - ( var( --unit-marker-air-fuel-width ) / 2 ) );
|
|
--unit-marker-air-fuel-y: calc( var( --unit-marker-height ) - 21px );
|
|
--unit-marker-air-height: 28px;
|
|
--unit-marker-air-vvi-rotation-offset: -180deg;
|
|
--unit-marker-air-width: var( --unit-marker-air-height );
|
|
--unit-marker-air-label-x: calc( var( --unit-marker-centre-x ) - ( var( --unit-marker-air-width ) / 2 ) + ( var( --unit-marker-stroke-width ) / 2 ) );
|
|
--unit-marker-air-label-y: calc( var( --unit-marker-centre-y ) - ( var( --unit-marker-air-height ) / 2 ) + ( var( --unit-marker-stroke-width ) / 2 ) );
|
|
|
|
}
|
|
|
|
|
|
* {
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
|
|
html {
|
|
font-family: 'Open Sans', sans-serif;
|
|
}
|
|
|
|
|
|
button {
|
|
background-color:var(--background-steel);
|
|
border:1px solid var( --background-steel );
|
|
border-radius: var( --border-radius-sm );
|
|
color:whitesmoke;
|
|
cursor:pointer;
|
|
font-weight: var( --font-weight-bolder );
|
|
padding:8px;
|
|
}
|
|
|
|
button[disabled="disabled"] {
|
|
color: var( --highlight-color );
|
|
cursor:not-allowed;
|
|
}
|
|
|
|
|
|
.pill {
|
|
border-radius: var( --border-radius-sm );
|
|
display:inline-block;
|
|
padding:6px;
|
|
}
|
|
|
|
|
|
|
|
nav, .ol-panel {
|
|
background-color: var(--background-steel);
|
|
border-radius: 15px;
|
|
box-shadow: 0px 2px 5px #000A;
|
|
color:white;
|
|
font-size: 12px;
|
|
height:fit-content;
|
|
padding:10px;
|
|
width:fit-content;
|
|
}
|
|
|
|
nav .ol-select {
|
|
color: var( --nav-text );
|
|
}
|
|
|
|
nav .ol-select .ol-select-value {
|
|
align-content: center;
|
|
background-color: var( --background-grey );
|
|
border-radius: var( --border-radius-sm );
|
|
display:flex;
|
|
justify-content: left;
|
|
padding:1em;
|
|
text-align: center;
|
|
}
|
|
|
|
nav .ol-select .ol-select-options {
|
|
background-color: var( --background-grey );
|
|
border-radius: var( --border-radius-sm );
|
|
display:none;
|
|
list-style: none;
|
|
padding:.5em 0;
|
|
position: relative;
|
|
}
|
|
|
|
nav .ol-select:hover .ol-select-options {
|
|
display: block;
|
|
}
|
|
|
|
nav .ol-select .ol-select-options li {
|
|
background-color: var( --background-grey );
|
|
display:flex;
|
|
justify-content: left;
|
|
}
|
|
|
|
nav .ol-select .ol-select-options li.hr {
|
|
border-bottom:1px solid var( --nav-text );
|
|
margin:8px;
|
|
}
|
|
|
|
nav .ol-select .ol-select-options li button {
|
|
background-color: var( --background-grey );
|
|
border:none;
|
|
font-size:14px;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
width:100%;
|
|
}
|
|
|
|
.ol-panel-list {
|
|
border-radius: var( --border-radius-sm );
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: fit-content;
|
|
row-gap: 5px;
|
|
text-align: center;
|
|
width: fit-content;
|
|
}
|
|
|
|
.ol-panel-list .list-item {
|
|
border-radius: var( --border-radius-md );
|
|
display:flex;
|
|
justify-content: space-between;
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
.ol-panel-list.sortable > .sortable-item {
|
|
align-items: center;
|
|
column-gap: 5px;
|
|
display:flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.ol-panel-list.sortable > .sortable-item > .handle {
|
|
cursor:grab;
|
|
filter:invert(100);
|
|
}
|
|
|
|
.ol-panel-list.sortable > .sortable-item > .handle img {
|
|
max-width: 16px;
|
|
}
|
|
|
|
|
|
.ol-panel-board {
|
|
display:flex;
|
|
flex-direction: row;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.ol-panel-board > .panel-section {
|
|
border-right: 1px solid #555;
|
|
padding:10px;
|
|
}
|
|
|
|
.ol-panel-board > .panel-section:last-of-type {
|
|
border-right-width: 0;
|
|
}
|
|
|
|
.ol-panel-board h1, .ol-panel-board h2 {
|
|
font-size:18px;
|
|
font-weight: var( --font-weight-bolder );
|
|
margin: 0;
|
|
padding:0 0 5px 0;
|
|
}
|
|
|
|
.ol-panel-board h2 {
|
|
font-size:14px;
|
|
}
|
|
|
|
|
|
|
|
.highlight-primary {
|
|
background-color: var(--secondary-light-grey);
|
|
}
|
|
|
|
.highlight-bluefor {
|
|
background-color: var(--primary-blue);
|
|
color: var(--background-steel )
|
|
}
|
|
|
|
.highlight-redfor {
|
|
background-color: var(--primary-red);
|
|
}
|
|
|
|
.highlight-neutral {
|
|
background-color: var(--primary-grey);
|
|
color: var(--secondary-gunmetal-grey)
|
|
}
|
|
|
|
|
|
|
|
svg.unit {
|
|
height: var( --unit-marker-height );
|
|
width: var( --unit-marker-width );
|
|
}
|
|
|
|
svg.unit .unit-vvi {
|
|
fill:black;
|
|
height: 4px;
|
|
transform-box: fill-box;
|
|
transform-origin:top;
|
|
translate: var( --unit-marker-centre-x ) calc( var( --unit-marker-centre-y ) - 2px );
|
|
width:4px;
|
|
}
|
|
|
|
svg.unit rect.unit-hotgroup {
|
|
display:none;
|
|
fill: var( --secondary-neutral );
|
|
height: var( --unit-marker-hotgroup-height );
|
|
transform: rotate( -45deg );
|
|
width: var( --unit-marker-hotgroup-height );
|
|
x: 13px;
|
|
y: 33px;
|
|
}
|
|
|
|
svg.unit text.unit-hotgroup-id {
|
|
font-weight: bolder;
|
|
display:none;
|
|
fill:white;
|
|
font-size:9px;
|
|
}
|
|
|
|
svg.unit[data-is-in-hotgroup="true"] rect.unit-hotgroup, svg.unit[data-is-in-hotgroup="true"] text.unit-hotgroup-id {
|
|
display:block;
|
|
}
|
|
|
|
svg.unit rect.unit-selected-border {
|
|
fill:transparent;
|
|
height: calc( var( --unit-marker-air-height ) + ( var( --unit-marker-stroke-width ) * 2 ) );
|
|
rx: var( --unit-marker-stroke-width );
|
|
stroke: var( white );
|
|
stroke-width: var( --unit-marker-stroke-width );
|
|
width: calc( var( --unit-marker-air-width ) + ( var( --unit-marker-stroke-width ) * 2 ) );
|
|
x: calc( var(--unit-marker-air-label-x) - 3px );
|
|
y: calc( var(--unit-marker-air-label-y) - 3px );
|
|
}
|
|
|
|
svg.unit rect.unit-marker {
|
|
fill: var( --primary-grey );
|
|
height: calc( var( --unit-marker-air-height ) - var( --unit-marker-stroke-width ) );
|
|
rx: var( --unit-marker-stroke-width );
|
|
ry: var( --unit-marker-stroke-width );
|
|
stroke: var( --secondary-neutral );
|
|
stroke-linejoin: round;
|
|
stroke-width: var( --unit-marker-stroke-width );
|
|
width: calc( var( --unit-marker-air-width ) - var( --unit-marker-stroke-width ) );
|
|
x: var(--unit-marker-air-label-x);
|
|
y: var(--unit-marker-air-label-y);
|
|
}
|
|
|
|
|
|
svg.unit text.unit-short-label {
|
|
fill: var( --secondary-neutral );
|
|
font-size: var( --unit-marker-font-size );
|
|
font-weight: var( --unit-marker-font-weight );
|
|
text-anchor: middle;
|
|
}
|
|
|
|
|
|
svg.unit rect.unit-fuel, svg.unit rect.unit-fuel-level {
|
|
height: var( --unit-marker-air-fuel-height );
|
|
width: var( --unit-marker-air-fuel-width );
|
|
x: var( --unit-marker-air-fuel-x );
|
|
y: var( --unit-marker-air-fuel-y );
|
|
}
|
|
|
|
|
|
svg.unit rect.unit-fuel {
|
|
display:none;
|
|
fill: white;
|
|
rx: var( --unit-marker-stroke-width );
|
|
ry: var( --unit-marker-stroke-width );
|
|
stroke: var( --secondary-gunmetal-grey );
|
|
stroke-linejoin: round;
|
|
stroke-width: var( --unit-marker-stroke-width );
|
|
y: var( --unit-marker-air-fuel-y );
|
|
}
|
|
|
|
svg.unit rect.unit-fuel-level {
|
|
display:none;
|
|
fill: var( --secondary-light-grey );
|
|
height: calc( var( --unit-marker-air-fuel-height ) - var( --unit-marker-stroke-width ) );
|
|
y: calc( var( --unit-marker-air-fuel-y ) + ( var( --unit-marker-stroke-width ) / 2 ) );
|
|
}
|
|
|
|
|
|
svg.unit circle.unit-ammo {
|
|
cy: var( --unit-marker-air-ammo-y );
|
|
display: none;
|
|
fill: white;
|
|
r: var( --unit-marker-air-ammo-radius );
|
|
stroke: var( --secondary-neutral );
|
|
stroke-width: var( --unit-marker-stroke-width );
|
|
}
|
|
|
|
svg.unit circle.unit-ammo-fox-1 {
|
|
cx: calc( var( --unit-marker-centre-x ) - ( ( var( --unit-marker-air-ammo-radius ) * 3 ) + ( var( --unit-marker-air-ammo-gap ) * 1.5 ) ) );
|
|
}
|
|
|
|
svg.unit circle.unit-ammo-fox-2 {
|
|
cx: calc( var( --unit-marker-centre-x ) - ( var( --unit-marker-air-ammo-radius ) + ( var( --unit-marker-air-ammo-gap ) / 2 ) ) );
|
|
}
|
|
|
|
svg.unit circle.unit-ammo-fox-3 {
|
|
cx: calc( var( --unit-marker-centre-x ) + var( --unit-marker-air-ammo-radius ) + ( var( --unit-marker-air-ammo-gap ) / 2 ) );
|
|
}
|
|
|
|
svg.unit circle.unit-ammo-other {
|
|
cx: calc( var( --unit-marker-centre-x ) + ( var( --unit-marker-air-ammo-radius ) * 3 ) + ( var( --unit-marker-air-ammo-gap ) * 1.5 ) );
|
|
}
|
|
|
|
svg.unit[data-has-fox-1="true"] circle.unit-ammo-fox-1,
|
|
svg.unit[data-has-fox-2="true"] circle.unit-ammo-fox-2,
|
|
svg.unit[data-has-fox-3="true"] circle.unit-ammo-fox-3,
|
|
svg.unit[data-has-other-ammo="true"] circle.unit-ammo-other {
|
|
fill: var( --secondary-gunmetal-grey );
|
|
}
|
|
|
|
|
|
|
|
/*** Default style **/
|
|
|
|
svg.unit[data-coalition="blue"] rect.unit-marker {
|
|
fill: var( --primary-blue );
|
|
stroke: var( --secondary-blue-outline );
|
|
}
|
|
|
|
svg.unit[data-coalition="blue"] rect.unit-hotgroup,
|
|
svg.unit[data-coalition="blue"] text.unit-short-label {
|
|
fill: var( --secondary-blue-outline );
|
|
}
|
|
|
|
svg.unit[data-coalition="blue"] rect.unit-fuel {
|
|
stroke: var( --secondary-blue-outline );
|
|
}
|
|
|
|
svg.unit[data-coalition="blue"] rect.unit-fuel-level {
|
|
fill: var( --primary-blue );
|
|
}
|
|
|
|
|
|
svg.unit[data-coalition="red"] rect.unit-marker {
|
|
fill: var( --primary-red );
|
|
stroke: var( --secondary-red-outline );
|
|
}
|
|
|
|
svg.unit[data-coalition="red"] rect.unit-hotgroup,
|
|
svg.unit[data-coalition="red"] text.unit-short-label {
|
|
fill: var( --secondary-red-outline );
|
|
}
|
|
|
|
svg.unit[data-coalition="red"] rect.unit-fuel {
|
|
stroke: var( --secondary-red-outline );
|
|
}
|
|
|
|
svg.unit[data-coalition="red"] rect.unit-fuel-level {
|
|
fill: var( --primary-red );
|
|
}
|
|
|
|
|
|
|
|
/*** Selected style **/
|
|
|
|
|
|
svg.unit[data-is-selected="true"] .unit-spotlight {
|
|
cx:50%;
|
|
cy:50%;
|
|
fill:var( --unit-marker-spotlight-fill );
|
|
r: var( --unit-marker-spotlight-radius );
|
|
}
|
|
|
|
svg.unit[data-is-selected="true"] rect.unit-selected-border,
|
|
svg.unit[data-is-selected="true"] rect.unit-marker {
|
|
fill:white;
|
|
}
|
|
|
|
|
|
|
|
svg.unit[data-pilot="ai"][data-is-selected="true"] rect.unit-fuel,
|
|
svg.unit[data-pilot="ai"][data-is-selected="true"] rect.unit-fuel-level,
|
|
svg.unit[data-pilot="ai"][data-is-selected="true"] circle.unit-ammo {
|
|
display:block;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
svg.unit[data-pilot="ai"][data-is-selected="true"][data-has-low-fuel="true"] rect.unit-fuel,
|
|
svg.unit[data-pilot="ai"][data-is-selected="true"][data-has-low-fuel="true"] rect.unit-fuel-level {
|
|
animation: pulse 1.5s linear infinite;
|
|
}
|
|
|
|
|
|
|
|
|
|
svg.unit[data-coalition="blue"][data-is-selected="true"] text.unit-short-label,
|
|
svg.unit[data-coalition="blue"][data-has-fox-1="true"] circle.unit-ammo-fox-1,
|
|
svg.unit[data-coalition="blue"][data-has-fox-2="true"] circle.unit-ammo-fox-2,
|
|
svg.unit[data-coalition="blue"][data-has-fox-3="true"] circle.unit-ammo-fox-3,
|
|
svg.unit[data-coalition="blue"][data-has-other-ammo="true"] circle.unit-ammo-other {
|
|
fill: var( --primary-blue );
|
|
}
|
|
|
|
|
|
svg.unit[data-coalition="red"][data-is-selected="true"] text.unit-short-label,
|
|
svg.unit[data-coalition="red"][data-has-fox-1="true"] circle.unit-ammo-fox-1,
|
|
svg.unit[data-coalition="red"][data-has-fox-2="true"] circle.unit-ammo-fox-2,
|
|
svg.unit[data-coalition="red"][data-has-fox-3="true"] circle.unit-ammo-fox-3,
|
|
svg.unit[data-coalition="red"][data-has-other-ammo="true"] circle.unit-ammo-other {
|
|
fill: var( --primary-red );
|
|
} |