DCSOlympus/client/public/stylesheets/olympus.css

@import url("layout.css");
@import url("airbases.css");
@import url("contextmenu.css");
@import url("units.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;

    --ol-select-secondary : #545F6C;
    
    --border-radius-xs : 2px;
    --border-radius-sm : 5px;
    --border-radius-md : 10px;
    --border-radius-lg : 15px;
    
    --font-weight-bolder : 600;


}


* { 
    -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-select {
    color: var( --nav-text );
}

.ol-select > .ol-select-value {
    align-content: center;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    cursor:pointer;
    display:flex;
    justify-content: left;
    text-align: center;
    white-space: nowrap;
    width: fit-content;
}

.ol-select:not( .ol-select-image ) > .ol-select-value {
    align-items: center;
    background-color: var( --background-grey );
    border-radius: var( --border-radius-sm );
    justify-content: center;
    padding:1em;
    width:100%;
}

.ol-select:not( .ol-select-image ) > .ol-select-value svg {
    margin-right: 10px;
}

.ol-select:not( .ol-select-image ) > .ol-select-value:after {
    content: url( "/themes/olympus/images/chevron-down.svg" );
    margin-left:10px;
}

.ol-select > .ol-select-options {
    overflow:hidden;
    max-height: 0;
    translate:0 -2px;
}

.ol-select.ol-select-image > .ol-select-options {
    position:absolute;
}


.ol-select.is-open > .ol-select-options {
    max-height: fit-content;
    overflow: visible;
    padding:8px 0;
}

.ol-select > .ol-select-options > div {
    background-color: var( --background-grey );
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    display:flex;
    justify-content: left;
    padding:6px 25px;
    width:100%;
}

.ol-select > .ol-select-options > div:first-of-type {
    border-top-left-radius: var( --border-radius-md );
    border-top-right-radius: var( --border-radius-md );
    padding-top:16px;
}

.ol-select > .ol-select-options > div:last-of-type {
    border-bottom-left-radius: var( --border-radius-md );
    border-bottom-right-radius: var( --border-radius-md );
    padding-bottom:16px;
}

.ol-select > .ol-select-options div hr {
    background-color: white;
    height:1px;
    width:100%;
}

.ol-select > .ol-select-options div button {
    background-color: transparent;
    border:none;
    border-radius: 0;
    font-size:14px;
    font-weight: normal;
    padding:6px 2px;
    text-align: left;
    white-space: nowrap;
    width:fit-content;
}

.ol-select > .ol-select-options > div button:hover {
    text-decoration: underline;
}




.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;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0px;
}

nav.ol-panel {
    column-gap: 20px;
    display:flex;
    flex-direction: row;
    height:58px;
}

nav.ol-panel > :last-child {
    margin-right:5px;
}


.ol-panel .ol-group {
    column-gap: 10px;
    display:flex;
    flex-direction: row;
    flex-wrap:nowrap;
}

.ol-panel .ol-group button {
    border:1px solid white;
}

.ol-panel .ol-group  {
    border-radius: var( --border-radius-sm );
}

.ol-panel .ol-group-checkbox {
    align-items: center;
    column-gap: 20px;
    display:flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    width:fit-content;
}

.ol-panel .ol-group-checkbox .ol-checkbox {
    align-items: center;
    display:flex;
    flex-direction: row;
}


.ol-panel .ol-group-checkbox input,
.ol-panel .ol-group-checkbox .ol-checkbox label {
    cursor: pointer;
}



.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)
}

.hide {
    display: none !important;
}

.icon-small {
    width: 20px;
    padding: 2px;
    filter: invert(100%);
}

.data-grid {
    display: flex;
    flex-direction: column;
}

.data-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-gap: 2px;
}

.data-row>*:nth-child(2){
    width: 100px;
}

.data-row>*:last-child{
    width: 30px;
    text-align: right;
}

.data-row>.icon-small{
    margin: 2px;
}

.slider-container {
    width: 100%; 
}

.slider {
    width: 100%;
    -webkit-appearance: none;  
    appearance: none;
    height: 2px; 
    background: #d3d3d3; 
    outline: none; 
    opacity: 0.7; 
    -webkit-transition: .2s; 
    transition: opacity .2s;
    margin-top: 10px;
    margin-bottom: 10px;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: gray; 
    cursor: pointer; 
    border-radius: 999px;
}

.active .slider::-webkit-slider-thumb {
    background: #5ca7ff; 
}

.slider::-moz-range-thumb {
    width: 20px; 
    height: 20px;
    background: gray; 
    cursor: pointer; 
    border-radius: 999px;
}

.active .slider::-moz-range-thumb {
    background: #5ca7ff;
}

.main-logo {
    width: 40px;
    height: 40px;
}

.ol-measure-box {
	position: absolute;
	padding-left: 0.5em;
	padding-right: 0.5em;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	background-color: var(--background-steel);
	border-radius: 999px;
	width: fit-content;
	height: fit-content;
	text-align: center;
	color: var(--primary-grey);
    font-size: 12px;
	z-index: 2000;
	font-weight: var(--font-weight-bolder);
}

#unit-info-panel {
    display: flex;
    flex-direction: column;
}


#visibility-control {
    align-items: center;
}

#visibility-control button {
    border:none;
    height:32px;
    width:32px;
}

#visibility-control-aircraft {
    background-image: var( --visibility-control-aircraft-visible-url );
}

body[data-hide-aircraft] #visibility-control-aircraft {
    background-image: var( --visibility-control-aircraft-hidden-url );
}

#visibility-control-ground {
    background-image: var( --visibility-control-ground-visible-url );
}

body[data-hide-ground] #visibility-control-ground {
    background-image: var( --visibility-control-ground-hidden-url );
}

#visibility-control-sam {
    background-image: var( --visibility-control-sam-visible-url );
}

body[data-hide-sam] #visibility-control-sam {
    background-image: var( --visibility-control-sam-hidden-url );
}

#visibility-control-threat {
    background-image: var( --visibility-control-threat-visible-url );
}

body[data-hide-threat] #visibility-control-threat {
    background-image: var( --visibility-control-threat-hidden-url );
}

#visibility-control-naval {
    background-image: var( --visibility-control-naval-visible-url );
}

body[data-hide-naval] #visibility-control-naval {
    background-image: var( --visibility-control-naval-hidden-url );
}