DCSOlympus/client/public/stylesheets/style.css

@import url("button.css");
@import url("slider.css");
@import url("dropdown.css");

@import url("selectionwheel.css");
@import url("contextmenu.css");

@import url("unitmarker.css");
@import url("airbasemarker.css");

@import url("panels.css");
@import url("connectionstatuspanel.css");
@import url("unitcontrolpanel.css");
@import url("visibilitycontrolpanel.css");
@import url("unitinfopanel.css");
@import url("mouseinfopanel.css");
@import url("logpanel.css");

@import url("layout.css");


/* Variables definitions */
:root {
	--background-color-dark: #202831;
	--background-color-light: #AAA;
	--title-color: #d3e9ff;
	--text-color: white;
	--blue-coalition-color: #247be2;
	--red-coalition-color: #f32121;
	--neutral-coalition-color: #202831;
	--active-coalition-color: var(--blue-coalition-color);
	--highlight-color: #FFF5;
}

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
}

html {
	font-family: 'Open Sans', sans-serif;
}

.leaflet-container.crosshair-cursor-enabled {
    cursor:crosshair;
}

.ol-rectangular-container {
	padding: 0.5em;
	background-color: gray;
	border-radius: 5px;
	width: fit-content;
	height: fit-content;
	text-align: center;
	color: white;
    font-size: 12px;
}

.ol-rectangular-container-dark {
	padding-left: 0.5em;
	padding-right: 0.5em;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	background-color: #151b20;
	border-radius: 5px;
	width: fit-content;
	height: fit-content;
	text-align: center;
	color: white;
    font-size: 12px;
}

.ol-rounded-container {
	position: relative;
	padding: 0.5em;
	width: fit-content;
	height: fit-content;
	text-align: center;
	color: white;
    font-size: 12px;
	border-radius: 9999px;
	background-color: gray;
}

.ol-rounded-container.blue {
    background-color: var(--blue-coalition-color);
	border: 1px solid var(--blue-coalition-color);
}

.ol-rounded-container.red {
    background-color: var(--red-coalition-color);
	border: 1px solid var(--red-coalition-color);
}

.ol-rounded-container.neutral {
    background-color: var(--neutral-coalition-color);
}

.ol-rounded-container-small {
	padding: 0.2em;
	width: fit-content;
	height: fit-content;
	text-align: center;
	color: black;
	font-weight: 600;
	background-color: #FFFA;
    font-size: 11px;
	border-radius: 9999px;
	padding-left: 5px;
	padding-right: 5px;
}

.ol-rectangular-button {
	position: relative;
	padding: 0.5em;
	width: fit-content;
	height: fit-content;
	text-align: center;
	color: var(--highlight-color);
    font-size: 12px;
	border-radius: 5px;
	background-color: transparent;
	border: 1px solid var(--highlight-color);
	cursor: pointer;
	font-weight: 600;
	display: flex;
	align-items: center;
	column-gap: 5px;
}

.ol-rectangular-button.blue {
    border: 1px solid var(--blue-coalition-color);
	color: var(--blue-coalition-color);
}

.ol-rectangular-button.red {
    border: 1px solid var(--red-coalition-color);
	color: var(--red-coalition-color);
}

.ol-rectangular-button.white {
    border: 1px solid white;
	color: white;
}

.ol-rectangular-button.white>img {
    filter: invert(100%);
}

.ol-rectangular-button>img {
	display: inline-block;
	height: 18px;
	width: 18px;
}

.ol-rectangular-button.red {
    border: 1px solid var(--red-coalition-color);
}

.ol-vl {
	border-left: 1px solid #555;
	width: 1px !important;
	display: inline-block; 
}

.ol-hl {
	border-top: 1px solid #555;
	height: 1px !important;
	display: inline-block; 
}

.ol-measure-box {
	position: absolute;
	padding-left: 0.5em;
	padding-right: 0.5em;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	background-color: #151b20;
	border-radius: 5px;
	width: fit-content;
	height: fit-content;
	text-align: center;
	color: white;
    font-size: 12px;
	z-index: 2000;
	font-weight: 600;
}

.ol-scrollable {
	overflow-y: auto;
}

.ol-scrollable::-webkit-scrollbar {
    width: 10px;
}
  
.ol-scrollable::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 100px;
}

.ol-scrollable::-webkit-scrollbar-thumb {
    background-color: white;
    border-radius: 100px;
    opacity: 0.8;
}