mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
145 lines
2.7 KiB
CSS
145 lines
2.7 KiB
CSS
/* Variables definitions */
|
|
:root {
|
|
--active-coalition-color: var(--blue-coalition-color);
|
|
--background-color-dark: #202831;
|
|
--background-color-light: #AAA;
|
|
--border-radius-sm:5px;
|
|
--border-radius-md:10px;
|
|
--border-radius-lg:15px;
|
|
--blue-coalition-color: #247be2;
|
|
--font-weight-bolder:600;
|
|
--highlight-color: #FFF5;
|
|
--neutral-coalition-color: whitesmoke;
|
|
--neutral-coalition-text: #202831;
|
|
--red-coalition-color: #f32121;
|
|
--text-color: white;
|
|
--title-color: #d3e9ff;
|
|
}
|
|
|
|
|
|
* {
|
|
-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-color-dark);
|
|
border:1px solid var( --background-color-dark );
|
|
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-color-dark);
|
|
border-radius: 15px;
|
|
box-shadow: 0px 2px 5px #000A;
|
|
color:white;
|
|
font-size: 12px;
|
|
height:fit-content;
|
|
padding:10px;
|
|
width:fit-content;
|
|
}
|
|
|
|
|
|
.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;
|
|
}
|
|
|
|
|
|
|
|
.highlight-primary {
|
|
background-color: var(--highlight-color);
|
|
}
|
|
|
|
.highlight-bluefor {
|
|
background-color: var(--blue-coalition-color);
|
|
}
|
|
|
|
.highlight-redfor {
|
|
background-color: var(--red-coalition-color);
|
|
}
|
|
|
|
.highlight-neutral {
|
|
background-color: var(--neutral-coalition-color);
|
|
color: var(--neutral-coalition-text)
|
|
} |