mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
1c1e60146d
* GA initial data * First commit of crude functionality. * More AIC work so I don't lose it. (Best commit message ever.) * Restructured to use 'phrases'. * Set to a working state. * Committing so I don't lose work. * Added ai-formation feature swtich and UI kit stuff. * Added plane units to UI kit.
494 lines
11 KiB
CSS
494 lines
11 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-red-outline : #262222;
|
|
--secondary-yellow : #ffd46893;
|
|
|
|
|
|
--border-radius-xs : 2px;
|
|
--border-radius-sm : 5px;
|
|
--border-radius-md : 10px;
|
|
--border-radius-lg : 15px;
|
|
|
|
--font-weight-bolder : 600;
|
|
|
|
}
|
|
|
|
:rootOLD {
|
|
--active-coalition-color: var(--blue-coalition-color);
|
|
--background-color-dark: #202831;
|
|
--background-color-light: #AAA;
|
|
--border-radius-sm:5px;
|
|
--border-radius-md:10px;
|
|
--border-radius-lg:15px;
|
|
--blue-coalition-color: #247be2;
|
|
--font-weight-bolder:600;
|
|
--highlight-color: #FFF5;
|
|
--neutral-coalition-color: whitesmoke;
|
|
--neutral-coalition-text: #202831;
|
|
--red-coalition-color: #f32121;
|
|
--text-color: white;
|
|
--title-color: #d3e9ff;
|
|
}
|
|
|
|
|
|
* {
|
|
-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;
|
|
}
|
|
|
|
|
|
|
|
.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;
|
|
}
|
|
|
|
|
|
.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)
|
|
}
|
|
|
|
|
|
.unit {
|
|
border-radius: var( --border-radius-xs );
|
|
display:grid;
|
|
height: fit-content;
|
|
position:relative;
|
|
width:fit-content;
|
|
}
|
|
|
|
.unit .unit-id {
|
|
align-items: center;
|
|
background: var( --primary-grey );
|
|
border:3px solid var(--background-steel );
|
|
border-radius: var( --border-radius-xs );
|
|
color: var(--background-steel);
|
|
display: flex;
|
|
font-weight: bold;
|
|
height: 32px;
|
|
justify-content: center;
|
|
padding:4px;
|
|
position: relative;
|
|
text-align: center;
|
|
width:32px;
|
|
z-index:100;
|
|
}
|
|
|
|
|
|
.unit .unit-spotlight {
|
|
border-radius: 50%;
|
|
align-items: center;
|
|
display:flex;
|
|
height: fit-content;
|
|
justify-items: center;
|
|
padding:9px;
|
|
width:fit-content;
|
|
}
|
|
|
|
.unit .unit-hotgroup {
|
|
align-self: flex-start;
|
|
background: black;
|
|
color:white;
|
|
display:none;
|
|
height:fit-content;
|
|
justify-content: center;
|
|
justify-self: center;
|
|
line-height: 14px;
|
|
position: absolute;
|
|
text-align: center;
|
|
top:-8px;
|
|
transform:rotate(45deg);
|
|
width:14px;
|
|
}
|
|
|
|
.unit .unit-hotgroup-id {
|
|
font-size:11px;
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
.unit .unit-vvi {
|
|
display:flex;
|
|
position:absolute;
|
|
left:50%;
|
|
transform:rotate(-90deg);
|
|
transform-origin:0 50%;
|
|
top:50%;
|
|
z-index: 0;
|
|
}
|
|
|
|
.unit .unit-vvi-heading {
|
|
border:1px solid var( --secondary-dark-steel );
|
|
padding-left:14px;
|
|
transform: rotate(90deg);
|
|
transform-origin:0 50%;
|
|
width:30px;
|
|
}
|
|
|
|
|
|
.unit .unit-selected-border {
|
|
border: 2px solid transparent;
|
|
border-radius: var( --border-radius-xs );
|
|
position: relative;
|
|
z-index:1;
|
|
}
|
|
|
|
|
|
.unit .unit-fuel {
|
|
background:white;
|
|
border:2px solid var( --secondary-dark-steel );
|
|
border-radius: var( --border-radius-xs );
|
|
display:none;
|
|
margin:0 auto;
|
|
position: relative;
|
|
top:-6px;
|
|
width: calc( 100% - 16px );
|
|
}
|
|
|
|
.unit .unit-fuel-empty {
|
|
align-self: center;
|
|
background: white;
|
|
border-radius: 50%;
|
|
color:red;
|
|
display:none;
|
|
font-weight: bold;
|
|
justify-self: center;
|
|
padding:1px;
|
|
position:absolute;
|
|
}
|
|
|
|
.unit[data-fuel-level="0"] .unit-fuel-empty {
|
|
display:flex;
|
|
}
|
|
|
|
@keyframes blinker {
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.unit[data-fuel-level="10"] .unit-fuel,
|
|
.unit[data-fuel-level="20"] .unit-fuel,
|
|
.unit[data-fuel-level="30"] .unit-fuel {
|
|
animation: blinker 1.5s linear infinite;
|
|
}
|
|
|
|
.unit .unit-fuel-level {
|
|
background-color: var( --secondary-light-grey );
|
|
display:flex;
|
|
height: 4px;
|
|
visibility: hidden;
|
|
width:100%;
|
|
}
|
|
|
|
.unit[data-fuel-level="10"] .unit-fuel-level,
|
|
.unit[data-fuel-level="20"] .unit-fuel-level,
|
|
.unit[data-fuel-level="30"] .unit-fuel-level,
|
|
.unit[data-fuel-level="40"] .unit-fuel-level,
|
|
.unit[data-fuel-level="50"] .unit-fuel-level,
|
|
.unit[data-fuel-level="60"] .unit-fuel-level,
|
|
.unit[data-fuel-level="70"] .unit-fuel-level,
|
|
.unit[data-fuel-level="80"] .unit-fuel-level,
|
|
.unit[data-fuel-level="90"] .unit-fuel-level,
|
|
.unit[data-fuel-level="100"] .unit-fuel-level {
|
|
visibility: visible;
|
|
}
|
|
|
|
|
|
|
|
.unit[data-fuel-level="10"] .unit-fuel-level {
|
|
width:10%;
|
|
}
|
|
|
|
.unit[data-fuel-level="20"] .unit-fuel-level {
|
|
width:20%;
|
|
}
|
|
|
|
.unit[data-fuel-level="30"] .unit-fuel-level {
|
|
width:30%;
|
|
}
|
|
|
|
.unit[data-fuel-level="40"] .unit-fuel-level {
|
|
width:40%;
|
|
}
|
|
|
|
.unit[data-fuel-level="50"] .unit-fuel-level {
|
|
width:50%;
|
|
}
|
|
|
|
.unit[data-fuel-level="60"] .unit-fuel-level {
|
|
width:60%;
|
|
}
|
|
|
|
.unit[data-fuel-level="70"] .unit-fuel-level {
|
|
width:70%;
|
|
}
|
|
|
|
.unit[data-fuel-level="80"] .unit-fuel-level {
|
|
width:80%;
|
|
}
|
|
|
|
.unit[data-fuel-level="90"] .unit-fuel-level {
|
|
width:90%;
|
|
}
|
|
|
|
.unit[data-fuel-level="100"] .unit-fuel-level {
|
|
width:100%;
|
|
}
|
|
|
|
|
|
.unit-ammo {
|
|
column-gap: 2px;
|
|
display:none;
|
|
flex-direction: row;
|
|
flex-wrap:nowrap;
|
|
height:fit-content;
|
|
justify-content: center;
|
|
position: relative;
|
|
top:-2px;
|
|
width: 100%;
|
|
}
|
|
|
|
.unit-ammo > [data-ammo-type] {
|
|
background:white;
|
|
border:2px solid var( --secondary-dark-steel );
|
|
border-radius: 50%;
|
|
padding:3px;
|
|
}
|
|
|
|
.unit[data-has-fox-1="true"] .unit-ammo > [data-ammo-type="fox-1"],
|
|
.unit[data-has-fox-2="true"] .unit-ammo > [data-ammo-type="fox-2"],
|
|
.unit[data-has-fox-3="true"] .unit-ammo > [data-ammo-type="fox-3"],
|
|
.unit[data-has-other-ammo="true"] .unit-ammo > [data-ammo-type="other"] {
|
|
background-color: var( --secondary-light-grey );
|
|
}
|
|
|
|
|
|
|
|
/*** BLUEFOR ***/
|
|
|
|
.unit[data-coalition="blue"] .unit-hotgroup {
|
|
background-color: var( --secondary-blue-outline );
|
|
}
|
|
|
|
.unit[data-coalition="blue"] .unit-id,
|
|
.unit[data-coalition="blue"][data-has-fox-1="true"] .unit-ammo > [data-ammo-type="fox-1"],
|
|
.unit[data-coalition="blue"][data-has-fox-2="true"] .unit-ammo > [data-ammo-type="fox-2"],
|
|
.unit[data-coalition="blue"][data-has-fox-3="true"] .unit-ammo > [data-ammo-type="fox-3"],
|
|
.unit[data-coalition="blue"][data-has-other-ammo="true"] .unit-ammo > [data-ammo-type="other"],
|
|
.unit[data-coalition="blue"] .unit-fuel-level,
|
|
.unit[data-coalition="blue"] .unit-vvi-heading {
|
|
background: var( --primary-blue );
|
|
border-color: var( --secondary-blue-outline );
|
|
color: var( --secondary-blue-outline );
|
|
}
|
|
|
|
.unit[data-coalition="blue"][data-is-selected="true"] .unit-id {
|
|
border-color: var( --secondary-blue-outline );
|
|
color: var( --primary-blue );
|
|
}
|
|
|
|
.unit[data-coalition="blue"] .unit-ammo {
|
|
border-color: var( --secondary-blue-outline );
|
|
}
|
|
|
|
/*** REDFOR ***/
|
|
|
|
.unit[data-coalition="red"] .unit-hotgroup {
|
|
background-color: var( --secondary-red-outline );
|
|
}
|
|
|
|
.unit[data-coalition="red"] .unit-id,
|
|
.unit[data-coalition="red"][data-has-fox-1="true"] .unit-ammo > [data-ammo-type="fox-1"],
|
|
.unit[data-coalition="red"][data-has-fox-2="true"] .unit-ammo > [data-ammo-type="fox-2"],
|
|
.unit[data-coalition="red"][data-has-fox-3="true"] .unit-ammo > [data-ammo-type="fox-3"],
|
|
.unit[data-coalition="red"][data-has-other-ammo="true"] .unit-ammo > [data-ammo-type="other"],
|
|
.unit[data-coalition="red"] .unit-fuel-level,
|
|
.unit[data-coalition="red"] .unit-vvi-heading {
|
|
background: var( --primary-red );
|
|
border-color: var( --secondary-red-outline );
|
|
color: var( --secondary-red-outline );
|
|
}
|
|
|
|
|
|
.unit[data-coalition="red"][data-is-selected="true"] .unit-id {
|
|
color: var( --primary-red );
|
|
}
|
|
|
|
.unit[data-coalition="red"] .unit-ammo {
|
|
border-color: var( --secondary-red-outline );
|
|
}
|
|
|
|
/**************/
|
|
|
|
|
|
.unit[data-is-selected="true"] .unit-spotlight {
|
|
background: var(--secondary-yellow);
|
|
}
|
|
|
|
.unit[data-is-in-hotgroup="true"] .unit-hotgroup {
|
|
display:flex
|
|
}
|
|
|
|
.unit[data-is-selected="true"] .unit-id {
|
|
background:white;
|
|
}
|
|
|
|
.unit[data-is-selected="true"] .unit-selected-border {
|
|
border-color:white;
|
|
}
|
|
|
|
.unit[data-is-selected="true"] .unit-fuel {
|
|
display:grid;
|
|
}
|
|
|
|
.unit[data-is-selected="true"] .unit-ammo {
|
|
display:flex;
|
|
}
|
|
|
|
|
|
.unit[data-pilot="human"] .unit-hotgroup,
|
|
.unit[data-pilot="human"] .unit-fuel,
|
|
.unit[data-pilot="human"] .unit-ammo {
|
|
display:none;
|
|
}
|
|
|
|
|
|
.unit .unit-summary {
|
|
align-self: center;
|
|
column-gap: 8px;
|
|
color:white;
|
|
display: flex;
|
|
flex-flow: wrap;
|
|
font-size: 12px;
|
|
justify-content: flex-end;
|
|
justify-self: flex-end;
|
|
left: -62px;
|
|
position: absolute;
|
|
row-gap:2px;
|
|
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
|
|
white-space: nowrap;
|
|
width: min-content;
|
|
} |