body.feature-forceShowUnitControlPanel #unit-control-panel { display: block !important; } #roe-buttons-container button, #reaction-to-threat-buttons-container button, #emissions-countermeasures-buttons-container button, #shots-scatter-buttons-container button #shots-intensity-buttons-container button { align-items: center; background-color: transparent; border: 1px solid var(--accent-light-blue); display: flex; height: 30px; justify-content: center; width: 30px; } #reaction-to-threat-buttons-container button:not(:first-child) svg { width: 150%; margin: -5px; } #unit-control-panel .ol-option-button button { width: 30px; height: 30px; } #unit-control-panel .ol-option-button svg { width: 100%; height: 100%; } #unit-control-panel .ol-option-button button.selected { background-color: white; border-color: white; } #unit-control-panel .ol-option-button button.selected svg * { fill: var(--background-steel); stroke: var(--background-steel); } #rapid-controls { display: flex; flex-direction: column; row-gap: 5px; height: fit-content; width: fit-content; } #rapid-controls button { padding: 4px; } #rapid-controls button.pulse { animation: pulse 1.5s linear infinite; } #rapid-controls svg { height: 20px; width: 20px; fill: white; stroke: white; } #rapid-controls button:before { display: inline-block; filter: invert(100%); height: 20px; width: 20px; } #unit-control-panel { display: flex; flex-direction: row; column-gap: 10px; row-gap: 10px; } #unit-control-panel>div:nth-child(2), #unit-controls { display: flex; flex-direction: column; row-gap: 10px; } #unit-controls { padding-right: 10px; } #unit-control-panel>div:nth-child(2) { width: 330px; } #unit-control-panel>*:nth-child(1) { display: none; padding: 14px; } @media (max-width: 1145px) { #unit-control-panel>*:nth-child(1) { display: flex; } #unit-control-panel>*:nth-child(1) svg { display: flex; width: 24px; height: 24px; filter: invert(100%); } #unit-control-panel:hover>*:nth-child(1) { display: none; } #unit-control-panel:not(:hover) { width: fit-content; } #unit-control-panel:not(:hover)>*:nth-child(2), #unit-control-panel:not(:hover)>*:nth-child(3) { display: none; } } #unit-control-panel #selected-units-container { align-items: left; border-radius: var(--border-radius-md); display: flex; flex-direction: column; max-height: 215px; overflow-x: hidden; overflow-y: auto; row-gap: 4px; } #unit-control-panel #selected-units-container button { align-items: center; border-radius: 20px; display: flex; font-size: 13px; height: 32px; justify-content: space-between; margin-right: 5px; position: relative; width: calc(100% - 5px); } #unit-control-panel #selected-units-container button::after { border-radius: 999px; color: var(--secondary-semitransparent-white); content: attr(data-label); font-size: 10px; padding: 4px 6px; padding-right: 7px; white-space: nowrap; width: fit-content; } #unit-control-panel #selected-units-container button:hover::after { max-width: 100%; text-overflow: unset; } #unit-control-panel #selected-units-container button::before { border-radius: var(--border-radius-sm); content: attr(data-callsign); display: block; overflow: hidden; padding: 4px; padding-left: 7px; text-align: left; text-overflow: ellipsis; white-space: nowrap; width: fit-content; } #unit-control-panel h4 { margin-bottom: 8px; } #advanced-settings-dialog { width: 400px; } #advanced-settings-dialog>.ol-dialog-content { display: flex; flex-direction: column; flex-wrap: nowrap; margin-bottom: 10px; margin-top: 10px; row-gap: 10px; } #advanced-settings-dialog>.ol-dialog-content>div { display: flex; flex-direction: column; flex-wrap: nowrap; row-gap: 10px; } #advanced-settings-dialog>.ol-dialog-content>div>.ol-group { justify-content: space-between; } #advanced-settings-dialog>.ol-dialog-content>div input[type="number"] { width: 60px; } #advanced-settings-dialog hr { margin-bottom: 10px; margin-top: 15px; } #advanced-settings-dialog .ol-text-input input { height: 40px; width: fit-content; } #advanced-settings-dialog h4 { width: fit-content; text-wrap: nowrap; } #general-settings-grid { display: grid; grid-template-columns: 1fr 1fr; row-gap: 10px; } #general-settings-grid>div { width: 49%; } #flight-data .ol-slider { margin: 20px 0px; } .ol-slider-container dd { column-gap: 5px; } #flight-data .ol-switch { height: 20px; width: 50px; } #flight-data .ol-switch-fill { background-color: var(--accent-light-blue); } #flight-data .ol-switch-fill::after { background-color: white; } #altitude-type-switch[data-value="true"]>.ol-switch-fill::before { content: "ASL"; } #altitude-type-switch[data-value="false"]>.ol-switch-fill::before { content: "AGL"; } #speed-type-switch[data-value="true"]>.ol-switch-fill::before { content: "CAS"; } #speed-type-switch[data-value="false"]>.ol-switch-fill::before { content: "GS"; } .switch-control .ol-switch { height: 23px; width: 40px; } .ol-slider-value { color: var(--accent-light-blue); cursor: pointer; font-size: 14px; font-weight: bold; } .switch-control { align-items: center; align-content: center; display: flex; width: 100%; justify-content: space-between; } .switch-control h4 { margin: 0px !important; padding: 0px; display: flex; align-items: center; } .switch-control h4 img { height: 15px; margin-left: 10px; cursor: pointer; filter: invert(100%); opacity: 80%; } #advanced-settings-div { align-items: center; column-gap: 8px; display: flex; height: fit-content; position: relative; } #advanced-settings-div>button { background-color: var(--background-grey); box-shadow: 0px 2px 5px #000A; font-size: 13px; height: 40px; padding: 0 20px; } #delete-options { font-size: 13px; } #delete-options.ol-select>.ol-select-value:after { content: ""; } #delete-options.ol-select>.ol-select-value svg { background-color: transparent; position: absolute; right: 2px; translate: 0 1px; } #delete-options.ol-select>.ol-select-value svg * { fill: var(--primary-red); } #delete-options * { background-color: var(--background-steel); } #delete-options.ol-select>.ol-select-value:hover, #delete-options .ol-select-options>div:not(.hr):hover, #delete-options .ol-select-options>div:not(.hr):hover button, #delete-options .ol-select-options>div hr { background-color: var(--background-grey); } #delete-options .ol-select-options>div:first-of-type { margin-top: 12px; padding-top: 0; } #delete-options .ol-select-options>div:last-of-type { margin-bottom: 12px; padding-bottom: 0; } #delete-options button { display: flex; flex-direction: row; align-content: center; } #delete-options button svg { background-color: transparent; margin-right: 10px; width: 18px; max-height: 18px; } #delete-options button svg * { stroke: red; } /* Element visibility control */ #unit-control-panel:not([data-show-categories-tooltip]) #categories-tooltip, #unit-control-panel:not([data-show-speed-slider]) #speed-slider, #unit-control-panel:not([data-show-altitude-slider]) #altitude-slider, #unit-control-panel:not([data-show-roe]) #roe, #unit-control-panel:not([data-show-threat]) #threat, #unit-control-panel:not([data-show-emissions-countermeasures]) #emissions-countermeasures, #unit-control-panel:not([data-show-shots-scatter]) #shots-scatter, #unit-control-panel:not([data-show-shots-intensity]) #shots-intensity, #unit-control-panel:not([data-show-tanker-button]) #tanker-on, #unit-control-panel:not([data-show-AWACS-button]) #AWACS-on, #unit-control-panel:not([data-show-on-off]) #ai-on-off, #unit-control-panel:not([data-show-follow-roads]) #follow-roads, #unit-control-panel:not([data-show-operate-as]) #operate-as, #unit-control-panel:not([data-show-advanced-settings-button]) #advanced-settings-button, #advanced-settings-dialog:not([data-show-settings]) #general-settings, #advanced-settings-dialog:not([data-show-tasking]) #tasking, #advanced-settings-dialog:not([data-show-TACAN]) #TACAN-options, #advanced-settings-dialog:not([data-show-radio]) #radio-options, #advanced-settings-dialog:not([data-show-air-unit-checkboxes]) .air-unit-checkbox { display: none; }