weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added ai-formation feature swtich and UI kit stuff.

Browse Source
This commit is contained in:
PeekabooSteam
2023-02-22 11:10:31 +00:00
parent 093ab75e8f
commit ea17a9f476
5 changed files with 150 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
client/public/stylesheets/olympus.css
View File

@@ -3,7 +3,11 @@
--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;
@@ -25,6 +29,29 @@ html {
}
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);
@@ -39,17 +66,17 @@ html {
.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;
border-radius: 5px;
}
.ol-panel-list .list-item {
border-radius: 10px;
border-radius: var( --border-radius-md );
display:flex;
justify-content: space-between;
padding: 6px 10px;
@@ -72,21 +99,33 @@ html {
}
.ol-panel-info {
.ol-panel-board {
display:flex;
flex-direction: row;
justify-content: space-evenly;
}
.ol-panel-info > .panel-section {
.ol-panel-board > .panel-section {
border-right: 1px solid #555;
padding:10px;
}
.ol-panel-info > .panel-section:last-of-type {
.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);

37
client/public/uikit.html
View File

@@ -55,6 +55,30 @@
</section>
<div class="section-header">Buttons</div>
<section>
<div class="content">
<div class="content-header">Buttons</div>
<div class="content-body">
<div class="example">
<button>Button enabled</button>
</div>
<div class="example">
<button disabled="disabled">Button disabled</button>
</div>
</div>
</div>
</section>
<div class="section-header">.ol-panel</div>
<section>
@@ -144,22 +168,24 @@
<div class="content">
<div class="content-header">.ol-panel > .ol-panel-info</div>
<div class="content-header">Panel board</div>
<div class="content-body">
<div class="example">
<div class="ol-panel">
<div class="ol-panel-info">
<div class="ol-panel-board">
<div class="panel-section">
Info panel number 1
<h1>Unit Callsign</h1>
<div class="pill highlight-primary">Airframe</div>
<div class="pill highlight-neutral">Group</div>
</div>
<div class="panel-section">
Info panel number 2
<h2>Flight data</h2>
</div>
<div class="panel-section">
Info panel number 3
<h2>Loadout</h2>
</div>
</div>
</div>
@@ -172,6 +198,7 @@
</div>
</section>