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

Unit info panel done - probably.

Browse Source
This commit is contained in:
PeekabooSteam
2023-03-13 15:05:54 +00:00
parent da2dd7e0fd
commit 1d043b1d2d
4 changed files with 113 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
client/public/stylesheets/layout.css
View File

@@ -58,34 +58,6 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
display:block !important;
}
#unit-control-panel #loadout-container {
display:flex;
flex-wrap: wrap;
row-gap: 4px;
}
#unit-control-panel #loadout-label span {
display:block;
float:right;
}
#unit-control-panel #loadout-label span::before {
content: url( /images/icons/fuel.svg );
display:inline-block;
filter:invert(100%);
height:16px;
translate:-25% 5%;
width:16px;
}
#unit-control-panel #loadout-label span::after {
content: attr( data-fuel-level ) "%";
}
#unit-control-panel #loadout-container .loadout-item {
background-color: black;
}
dl.data-grid {
align-items: center;
display:flex;
@@ -155,6 +127,7 @@ dl.data-grid dd.br-info[data-bearing][data-distance][data-distance-units]::after
color: var( --accent-light-blue );
}
#unit-info-panel {
bottom: 20px;
font-size:12px;
@@ -164,6 +137,59 @@ dl.data-grid dd.br-info[data-bearing][data-distance][data-distance-units]::after
z-index: 1000;
}
#unit-info-panel #unit-name {
line-height: 18px;
margin-bottom:10px;
}
#unit-info-panel #current-task {
border-radius: var( --border-radius-lg );
margin-top:15px;
}
#unit-info-panel #current-task::after {
content: attr( data-current-task );
display:block;
}
#unit-info-panel #loadout-data {
max-width: 250px;
}
#unit-info-panel #loadout-data .data-grid {
margin: 6px 0;
}
#unit-info-panel #loadout-data .data-grid dt:first-child {
text-indent: 5px;
}
#unit-info-panel #loadout-data .data-grid dt:first-child::before {
content: url( /images/icons/fuel.svg );
display:inline-block;
filter:invert(100%);
height:16px;
text-indent:5px;
translate:-10px 5%;
width:16px;
}
#unit-info-panel #loadout-fuel-level::after {
content: attr( data-fuel-level ) "%";
}
#unit-info-panel #loadout-container .loadout-item {
background-color: black;
}
#unit-info-panel #loadout-container .loadout-item::before {
content: attr( data-loadout-item ) ' \d7 ' attr( data-loadout-qty );
}
#connection-status-panel {
bottom: 20px;
font-size:12px;

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

@@ -66,18 +66,11 @@ button[disabled="disabled"] {
.pill {
background-color: var( --background-darksteel );
border-radius: var(--border-radius-sm);
padding: 2px 6px;
padding: 4px 8px;
width: fit-content;
}
.loadout-item::after {
content: attr( data-qty ) 'x ' attr( data-item );
}
.ol-panel {
background-color: var(--background-steel);
border-radius: 15px;
@@ -267,25 +260,24 @@ button[disabled="disabled"] {
justify-content: space-evenly;
}
.ol-panel-board>.panel-section {
.ol-panel-board > .panel-section {
border-right: 1px solid #555;
padding: 10px;
margin:10px 0;
padding:0 30px;
}
.ol-panel-board>.panel-section:last-of-type {
.ol-panel-board > .panel-section:first-child {
padding-left:20px;
}
.ol-panel-board > .panel-section:last-child {
padding-right:20px;
}
.ol-panel-board > .panel-section:last-of-type {
border-right-width: 0;
}
.ol-panel-board h1,
.ol-panel-board h2 {
font-weight: var(--font-weight-bolder);
margin: 0;
padding: 0 0 5px 0;
}
.ol-panel-board h2 {
font-size: 14px;
}
h1,
h2,
@@ -335,16 +327,19 @@ nav.ol-panel> :last-child {
.ol-panel .ol-group {
border-radius: var(--border-radius-sm);
column-gap: 10px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
row-gap: 4px;
}
.ol-panel .ol-group {
border-radius: var(--border-radius-sm);
.ol-panel .ol-group.wrap {
flex-wrap: wrap;
}
.ol-panel .ol-group-button-toggle {
align-items: center;
column-gap: 15px;
@@ -385,20 +380,20 @@ nav.ol-panel> :last-child {
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 {
.highlight-coalition, .highlight-neutral {
background-color: var(--primary-grey);
color: var(--secondary-gunmetal-grey)
}
.highlight-coalition[data-coalition="blue"], .highlight-bluefor {
background-color: var(--primary-blue);
color: white;
}
.highlight-coalition[data-coalition="red"], .highlight-redfor {
background-color: var(--primary-red);
}
.accent-green {
color: var(--accent-green);