DCSOlympus/client/public/stylesheets/atc.css

.ol-strip-board-strips {
    display:flex;
    flex-direction: column;
    row-gap: 4px;
}

.ol-strip-board-strip {
    align-items: center;
    border-radius: var( --border-radius-sm );
    column-gap: 4px;
    display:flex;
    flex-flow: row nowrap;
    row-gap:4px;
}

.ol-strip-board-strip[data-flight-status="checkedin"] {
    background-color: #ffffff2A;
}

.ol-strip-board-strip[data-flight-status="readytotaxi"] {
    background-color: #ffff0063;
}

.ol-strip-board-strip[data-flight-status="clearedtotaxi"] {
    background-color: #00ff0030;
}

.ol-strip-board-strip[data-flight-status="halted"] {
    background-color: #FF000040;
}

.ol-strip-board-strip[data-flight-status="terminated"] {
    background-color: black;
}

.ol-strip-board-headers {
    column-gap: 4px;
    display:flex;
    flex-flow:row nowrap;
    text-align: center;
}

.ol-strip-board-headers > *, .ol-strip-board-strip > [data-point] {
    padding: 4px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width:80px;
}

.ol-strip-board-strip input[type="text"] {
    appearance: none;
    background-color: transparent;
    border:1px solid #ffffff30;
    border-radius: var( --border-radius-sm );
    color:white;
    font-size:12px;
    font-weight:normal;
    outline:none;
    padding: 4px 0;
    text-align: center;
    width:100%;
}

.ol-strip-board-strip[data-time-warning="level-1"] [data-point="timeToGo"] {
    border:1px solid #cc0000;
}

.ol-strip-board-headers :nth-child(1) {
    width:12px;
}

.ol-strip-board-headers :nth-child(2),
.ol-strip-board-strip :nth-child(2),
[data-board-type="ground"] .ol-strip-board-headers :nth-child(3),
[data-board-type="ground"] .ol-strip-board-strip :nth-child(3) {
    width:130px;
}

[data-board-type="ground"] .ol-strip-board-strip :nth-child(5) {
    text-align: center;
}



.ol-strip-board-headers :last-child,
.ol-strip-board-strip :last-child {
    width:20px;
}






[data-board-type="tower"] .ol-strip-board-strip > * {
    text-align: center;
}

[data-board-type="tower"] .ol-strip-board-strip a {
    color:white;
}

[data-board-type="tower"] .ol-strip-board-strip > :nth-child(2) {
    text-align: left;
}

[data-board-type="tower"] .ol-strip-board-strip :nth-child(3) input,
[data-board-type="tower"] .ol-strip-board-strip :nth-child(5) input {
    width:30px;
}

[data-board-type="tower"] .ol-strip-board-strip :nth-child(3) {
    font-size:10px;
}


[data-altitude-assigned] [data-point="assignedAltitude"] input,
[data-speed-assigned] [data-point="assignedSpeed"] input {
    background-color:#ffffffbb;
    color: black;
    font-weight: var( --font-weight-bolder );
}

[data-warning-altitude] [data-point="altitude"],
[data-warning-speed] [data-point="speed"] {
    background:#cc0000;
    border-radius: var( --border-radius-sm );
}



.ol-strip-board-strip > [data-point="name"] {
    text-overflow: ellipsis;
    overflow:hidden;
}

.ol-strip-board-strip .ol-select-value {
    opacity: .85;
}


.ol-strip-board-add-flight {
    display:flex;
    flex-flow: row nowrap;
    position:relative;
}


.ol-strip-board-add-flight > * {
    border:none;
    outline: none;
    padding:4px 8px;
}

.add-flight-by-click img {
    filter:invert();
    height: 12px;
}

.ol-strip-board-add-flight input {
    border-radius: var( --border-radius-sm );
}

.ol-strip-board-add-flight .ol-auto-suggest {
    background:white;
    border-radius: var(--border-radius-sm );
    color:black;
    display:none;
    flex-direction: column;
    left:0;
    margin:0;
    position:absolute;
    translate:0 -100%;
    top:0;
}

.ol-strip-board-add-flight .ol-auto-suggest[data-has-suggestions] {
    display:flex;
}

.ol-strip-board-add-flight .ol-auto-suggest[data-has-suggestions] a {
    cursor: pointer;
}


[data-board-type="ground"] {
    bottom:20px;
}

[data-board-type="tower"] {
    right:10px;
    top:10px;
}