DCSOlympus/client/public/stylesheets/other/contextmenus.css

#map-contextmenu {
    display: flex;
    flex-direction: column;
    height: fit-content;
    position: absolute;
    row-gap: 5px;
    width: 300px;
    z-index: 9999;
}

#map-contextmenu>div:nth-child(2) {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-right: 0px;
}

#map-contextmenu>div:nth-child(3) {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-right: 0px;
}

#map-contextmenu>div:nth-child(n+4) {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    row-gap: 5px;
    padding: 20px;
}

#map-contextmenu>div:nth-child(n+4)>div {
    width: 100%;
}

.contextmenu-advanced-options,
.contextmenu-metadata {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    row-gap: 5px;
    width: 100%;
    padding: 5px;
}

.contextmenu-advanced-options-toggle,
.contextmenu-metadata-toggle {
    display: flex;
    align-content: center;
    text-align: left;
    width: 100%;
    margin: 5px;
    column-gap: 5px;
    cursor: pointer;
}

.contextmenu-advanced-options-toggle:after,
.contextmenu-metadata-toggle:after {
    content: "";
    margin-left: auto;
    margin-top: auto;
    background-image: url(/resources/theme/images/icons/chevron-down.svg);
    background-size: 100% 100%;
    width: 15px;
    height: 15px;
}

.contextmenu-advanced-options-toggle.is-open:after,
.contextmenu-metadata-toggle.is-open:after {
    transform: rotate(180deg);
}

.contextmenu-advanced-options-toggle div:first-child,
.contextmenu-metadata-toggle div:first-child {
    width: fit-content;
    white-space: nowrap;
}

.contextmenu-advanced-options>*,
.contextmenu-metadata>* {
    width: 100%;
}

.contextmenu-metadata {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0px 10px 10px 10px;
}

.contextmenu-metadata>div:nth-child(1) {
    margin-bottom: 5px;
    width: 100%;
}

.contextmenu-metadata>div:nth-child(2) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 5px;
    column-gap: 5px;
    width: 100%;
    margin-top: 10px;
}

.unit-spawn-menu {
    height: fit-content;
}

#active-coalition-label {
    border-radius: 999px;
    color: var(--nav-text);
    font-size: 12px;
    font-weight: 600;
    height: fit-content;
    padding: 3px 10px;
    padding-bottom: 3px;
    position: absolute;
    top: -28px;
    width: fit-content;
}

#coalition-switch {
    margin-right: 10px;
    height: 25px;
    width: 50px;
}

.unit-spawn-menu .ol-select.is-open .ol-select-options {
    max-height: 300px;
}

.ol-tag {
    background-color: #FFFFFF11;
    color: #FFFFFFDD;
    border: 1px solid #FFFFFF55;
    font-weight: normal;
    padding: 2px 5px;
}

/*
.ol-tag-CA {
    background-color: #FF000022;
}

.ol-tag-Radar {
    background-color: #00FF0022;
}

.ol-tag-IR {
    background-color: #0000FF22;
} 
*/

.unit-loadout-list {
    min-width: 0;
}

.unit-loadout-list div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: var(--background-steel);
    padding: 2px 5px 2px 5px;
}

.unit-loadout-list div:hover {
    overflow: visible;
    white-space: nowrap;
    background-color: var(--background-steel);
    width: fit-content;
    border-radius: var(--border-radius-sm);
}

.deploy-unit-button {
    margin-top: 5px;
    text-align: center;
    width: 100%;
}

.deploy-unit-button[data-points]:not([data-points='']):not([data-points='0']):not([data-points='Infinity'])::after {
    content: " (" attr(data-points) " points)";
}

.upper-bar svg>* {
    fill: white;
}

.upper-bar svg {
    width: 22px;
    margin: 0px 5px;
}

.upper-bar button:first-of-type {
    margin-left: auto;
}

[data-coalition="blue"]#active-coalition-label,
[data-coalition="blue"].deploy-unit-button,
[data-coalition="blue"]#spawn-airbase-aircraft-button,
[data-coalition="blue"].create-iads-button {
    background-color: var(--primary-blue)
}

[data-coalition="red"]#active-coalition-label,
[data-coalition="red"].deploy-unit-button,
[data-coalition="red"]#spawn-airbase-aircraft-button,
[data-coalition="red"].create-iads-button {
    background-color: var(--primary-red)
}

[data-coalition="neutral"]#active-coalition-label,
[data-coalition="neutral"].deploy-unit-button,
[data-coalition="neutral"]#spawn-airbase-aircraft-button,
[data-coalition="neutral"].create-iads-button {
    background-color: var(--primary-neutral)
}

[data-coalition="blue"].deploy-unit-button:disabled {
    background-color: transparent;
    border: 1px solid var(--primary-blue);
    cursor: default;
}

[data-coalition="red"].deploy-unit-button:disabled {
    background-color: transparent;
    border: 1px solid var(--primary-red);
    cursor: default;
}

[data-coalition="neutral"].deploy-unit-button:disabled {
    background-color: transparent;
    border: 1px solid var(--primary-neutral);
    cursor: default;
}

[data-coalition="blue"]#active-coalition-label::after {
    content: "Create blue unit";
}

[data-coalition="red"]#active-coalition-label::after {
    content: "Create red unit";
}

[data-coalition="neutral"]#active-coalition-label::after {
    content: "Create neutral unit";
}

.unit-label-count-container {
    display: grid;
    grid-template-columns: 187px 1fr 1fr;
    align-items: center;
    column-gap: 5px;
}

.unit-label-count-container>*:first-child {
    width: 100%;
}

.unit-label-count-container button {
    display: flex !important;
    flex-direction: row;
    align-items: center;
}

.unit-label-count-container button>*:nth-child(1) {
    margin-left: auto;
}

.unit-loadout-preview {
    align-content: space-between;
    align-items: center;
    column-gap: 10px;
    display: flex;
    flex-direction: row;
    width: 100%;
}

.unit-loadout-list {
    align-content: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 5px;
}

.unit-image {
    filter: invert(100%);
    width: 25%;
    aspect-ratio: 1/1;
    margin: 5px 0px;
}

#smoke-spawn-menu {
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
}

#explosion-menu>button,
#smoke-spawn-menu>button {
    align-items: center;
    column-gap: 10px;
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    width: 100%;
}

#smoke-spawn-menu>button::before {
    border-radius: 999px;
    content: "";
    display: block;
    height: 10px;
    width: 10px;
}

[data-smoke-color="red"]::before {
    background-color: red;
}

[data-smoke-color="white"]::before {
    background-color: white;
}

[data-smoke-color="blue"]::before {
    background-color: blue;
}

[data-smoke-color="green"]::before {
    background-color: green;
}

[data-smoke-color="orange"]::before {
    background-color: orange;
}

.ol-context-menu .ol-slider-value {
    color: var(--accent-light-blue);
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}

.ol-context-menu .ol-slider-container {
    padding: 0px 10px;
}

.contextmenu-options-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 10px;
}

.contextmenu-options-container>*:nth-child(2) {
    width: 120px;
}

/* Unit context menu */
#unit-contextmenu {
    display: flex;
    flex-direction: column;
    height: fit-content;
    padding: 15px;
    position: absolute;
    row-gap: 5px;
    width: fit-content;
    z-index: 9999;
}

#unit-contextmenu button {
    border: 1px solid var(--background-offwhite);
    border-radius: var(--border-radius-sm);
    font-weight: normal;
    padding: 12px;
}

#unit-contextmenu div {
    align-content: center;
    display: flex;
    flex-direction: row;
}

#unit-contextmenu div:before {
    display: inline-block;
    filter: invert(100%);
    height: 20px;
    margin-right: 15px;
    width: 20px;
}

.ol-select>.ol-select-options>div button.country-dropdown-element {
    display: flex;
    flex-direction: row;
    align-content: center;
    column-gap: 10px;
    width: 100%;
}

.country-dropdown-element img {
    height: 20px;
    aspect-ratio: initial;
}

/*  Buttons  */
#center-map::before {
    background-image: url("/resources/theme/images/icons/arrows-to-eye-solid.svg");
    content: "";
	background-size: 20px 20px;
}

#refuel::before {
    background-image: url("/resources/theme/images/icons/fuel.svg");
    content: "";
	background-size: 20px 20px;
}

#attack::before {
    background-image: url("/resources/theme/images/icons/sword.svg");
    content: "";
	background-size: 20px 20px;
}

#bomb::before {
    background-image: url("/resources/theme/images/icons/crosshairs-solid.svg");
    content: "";
	background-size: 20px 20px;
}

#carpet-bomb::before {
    background-image: url("/resources/theme/images/icons/explosion-solid.svg");
    content: "";
	background-size: 20px 20px;
}

#fire-at-area::before {
    background-image: url("/resources/theme/images/icons/crosshairs-solid.svg");
    content: "";
	background-size: 20px 20px;
}

#simulate-fire-fight::before {
    background-image: url("/resources/theme/images/icons/crosshairs-solid.svg");
    content: "";
	background-size: 20px 20px;
}

#follow::before {
    background-image: url("/resources/theme/images/icons/follow.svg");
    content: "";
	background-size: 20px 20px;
}

#scenic-aaa::before {
    background-image: url("/resources/theme/images/icons/scenic.svg");
    content: "";
	background-size: 20px 20px;
}

#miss-aaa::before {
    background-image: url("/resources/theme/images/icons/miss.svg");
    content: "";
	background-size: 20px 20px;
}

#group-ground::before {
    background-image: url("/resources/theme/images/icons/group-ground.svg");
    content: "";
	background-size: 20px 20px;
}

#group-navy::before {
    background-image: url("/resources/theme/images/icons/group-navy.svg");
    content: "";
	background-size: 20px 20px;
}

#land-at-point::before {
    background-image: url("/resources/theme/images/icons/land-at-point.svg");
    content: "";
	background-size: 20px 20px;
}

#trail::before {
    background-image: url("/resources/theme/images/icons/trail.svg");
    content: "";
	background-size: 20px 20px;
}

#echelon-lh::before {
    background-image: url("/resources/theme/images/icons/echelon-lh.svg");
    content: "";
	background-size: 20px 20px;
}

#echelon-rh::before {
    background-image: url("/resources/theme/images/icons/echelon-rh.svg");
    content: "";
	background-size: 20px 20px;
}

#line-abreast-rh::before,
#line-abreast-lh::before {
    background-image: url("/resources/theme/images/icons/line-abreast.svg");
    content: "";
	background-size: 20px 20px;
}

#front::before {
    background-image: url("/resources/theme/images/icons/front.svg");
    content: "";
	background-size: 20px 20px;
}

#diamond::before {
    background-image: url("/resources/theme/images/icons/diamond.svg");
    content: "";
	background-size: 20px 20px;
}

#custom::before {
    background-image: url("/resources/theme/images/icons/custom.svg");
    content: "";
	background-size: 20px 20px;
}

#custom-formation-dialog {
    width: 250px;
}

#custom-formation-dialog>.ol-dialog-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    margin-bottom: 10px;
    margin-top: 10px;
    row-gap: 10px;
}

#custom-formation-dialog>.ol-dialog-content>.ol-group {
    justify-content: space-between;
    width: 100%;
}

#reference-system {
    content: url("/images/reference-system.svg");
    display: inline-block;
    filter: invert(100%);
    position: absolute;
    transform: translate(-50%, -50%);
    width: 50px;
}

.formation-position-clock {
    height: 100px;
    margin: 15px;
    position: relative;
    width: 100px;
}

.formation-position-clock>.clock-hand {
    align-items: center;
    display: flex;
    height: 20px;
    justify-content: center;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 20px;
}

/* Airbase context menu */
#airbase-contextmenu {
    display: flex;
    flex-direction: column;
    height: fit-content;
    position: absolute;
    row-gap: 5px;
    width: 180px;
    z-index: 9999;
}

/* Coalition area context menu */
#coalition-area-contextmenu {
    display: flex;
    flex-direction: column;
    height: fit-content;
    position: absolute;
    row-gap: 5px;
    width: 300px;
    z-index: 9999;
}

#coalition-area-switch {
    margin-right: 10px;
    height: 25px;
    width: 50px;
}

#coalition-area-contextmenu .ol-checkbox {
    align-self: flex-start;
}

#coalition-units-checkbox {
    padding: 10px 10px;
}

#iads-menu .ol-select-options>* {
    padding-top: 8px;
    padding-bottom: 8px;
}

#iads-menu .ol-select-options>*:first-child {
    padding-top: 15px;
}

#iads-menu .ol-select-options>*:last-child {
    padding-bottom: 15px;
}

#iads-menu .ol-select {
    width: 100%;
}

#iads-menu {
    row-gap: 10px;
    padding: 10px;
}

#coalition-area-contextmenu>div:nth-child(2) {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-right: 0px;
}

#coalition-area-contextmenu>div:nth-child(n+3) {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    row-gap: 5px;
    padding: 20px;
}

.create-iads-button {
    margin-top: 5px;
    text-align: center;
    width: 100%;
}

/*  Airbase context menu  */
#airbase-chart-data dd {
    width: 60%;
    font-weight: bold;
}

#airbase-runways {
    display: flex;
    flex-direction: column;
    row-gap: 4px;
}

#airbase-runways>.runway {
    border: 1px solid #ccc;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#airbase-runways>.runway abbr {
    cursor: help;
    text-decoration: none;
}

#airbase-runways>.runway>.heading {
    align-items: center;
    column-gap: 4px;
    display: flex;
    flex-direction: row;
}

#airbase-runways>.runway>.heading>abbr {
    font-weight: var(--font-weight-bolder);
    padding: 4px;
}

#airbase-runways>.runway>.heading:last-of-type {
    flex-direction: row-reverse;
}

/* Airbase spawn menu */
#airbase-spawn-contextmenu {
    display: flex;
    flex-direction: column;
    height: fit-content;
    position: absolute;
    row-gap: 5px;
    width: 300px;
    z-index: 9999;
}

#airbase-spawn-contextmenu>div:nth-child(2) {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    padding-right: 0px;
}

#airbase-spawn-contextmenu >div:nth-child(n+3) {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    row-gap: 5px;
    padding: 20px;
}

#airbase-spawn-contextmenu>div:nth-child(n+3)>div {
    width: 100%;
}