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

First pass at re-organising the CSS.

Browse Source
This commit is contained in:
PeekabooSteam
2023-03-15 15:47:11 +00:00
parent d24f5f74d9
commit 64df9b142d
13 changed files with 268 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
client/public/stylesheets/connectionstatuspanel.css Normal file
View File

@@ -0,0 +1,29 @@
#connection-status-panel {
bottom: 20px;
font-size:12px;
position: absolute;
right: 10px;
width: 160px;
z-index: 1000;
}
#connection-status-panel dt::before {
content: "No connection";
}
#connection-status-panel dd::after {
border-radius: 50%;
background: red;
content: " ";
height:12px;
width:12px;
}
#connection-status-panel[data-is-connected] dt::before {
content: "Connected";
}
#connection-status-panel[data-is-connected] dd::after {
background:var( --accent-green );
}

18
client/public/stylesheets/contextmenus.css
View File

@@ -1,10 +1,10 @@
#map-contextmenu { #map-contextmenu {
position: absolute;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: fit-content;
position: absolute;
row-gap: 5px; row-gap: 5px;
width: 230px; width: 230px;
height: fit-content;
z-index: 1000; z-index: 1000;
} }
@@ -22,9 +22,7 @@
border-radius: 999px; border-radius: 999px;
width: fit-content; width: fit-content;
height: fit-content; height: fit-content;
padding-left: 10px; padding: 3px 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px; padding-bottom: 3px;
font-weight: 600; font-weight: 600;
color: var(--nav-text); color: var(--nav-text);
@@ -36,10 +34,10 @@
} }
#map-contextmenu>div:nth-child(2){ #map-contextmenu>div:nth-child(2){
align-items: center;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center;
padding-right: 0px; padding-right: 0px;
} }
@@ -59,10 +57,10 @@
} }
#map-contextmenu>div:nth-child(n+3){ #map-contextmenu>div:nth-child(n+3){
align-items: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: center;
row-gap: 5px; row-gap: 5px;
} }
@@ -100,12 +98,12 @@
} }
.unit-spawn-button { .unit-spawn-button {
border-radius: 0px;
border: none; border: none;
height: 48px; height: 48px;
width: 48px;
margin-top: -10px;
margin-bottom: -10px; margin-bottom: -10px;
border-radius: 0px; margin-top: -10px;
width: 48px;
} }
.unit-spawn-button:last-of-type { .unit-spawn-button:last-of-type {

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

@@ -1,28 +1,5 @@
/* Page style */ /* Page style */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-family: 'Open Sans', sans-serif;
}
body {
display:grid;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
#map-container { #map-container {
height: 100%; height: 100%;
min-width: 820px; min-width: 820px;
@@ -48,56 +25,7 @@ body {
dl.ol-data-grid {
#unit-control-panel {
height: fit-content;
left: 10px;
position: absolute;
top: 80px;
width: 250px;
z-index: 1000;
}
#unit-control-panel h4 {
margin-bottom:8px;
margin-top:20px;
}
body.feature-forceShowUnitControlPanel #unit-control-panel {
display:block !important;
}
#unit-control-panel #selected-units-container {
align-items: center;
border-radius: var( --border-radius-md );
display:flex;
flex-direction: column;
row-gap: 4px;
}
#unit-control-panel #selected-units-container button {
font-size: 12px;
padding:8px 0;
position: relative;
width:90%;
}
#unit-control-panel #selected-units-container button::before {
background-color: var( --accent-light-blue );
border-radius: var( --border-radius-sm );
content: attr( data-short-label );
padding:4px;
position: absolute;
translate:-40px -4px;
}
#unit-control-panel #selected-units-container button::after {
content: attr( data-callsign );
}
dl.data-grid {
align-items: center; align-items: center;
display:flex; display:flex;
flex-direction: row; flex-direction: row;
@@ -106,20 +34,20 @@ dl.data-grid {
row-gap: 4px; row-gap: 4px;
} }
dl.data-grid dt { dl.ol-data-grid dt {
width:60%; width:60%;
} }
dl.data-grid dd { dl.ol-data-grid dd {
width:40%; width:40%;
} }
dl.data-grid dt.icon { dl.ol-data-grid dt.icon {
text-indent: 10px; text-indent: 10px;
} }
dl.data-grid dt.icon::before { dl.ol-data-grid dt.icon::before {
content: url( /images/icons/speed.svg ); content: url( /images/icons/speed.svg );
display:inline-block; display:inline-block;
filter:invert(100%); filter:invert(100%);
@@ -128,17 +56,17 @@ dl.data-grid dt.icon::before {
} }
dl.data-grid dt.icon-speed::before { dl.ol-data-grid dt.icon-speed::before {
content: url( /images/icons/speed.svg ); content: url( /images/icons/speed.svg );
} }
dl.data-grid dt.icon-altitude::before { dl.ol-data-grid dt.icon-altitude::before {
content: url( /images/icons/altitude.svg ); content: url( /images/icons/altitude.svg );
} }
dl.data-grid dd { dl.ol-data-grid dd {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-left: auto; margin-left: auto;
@@ -171,183 +99,8 @@ dl.data-grid dd {
} }
#unit-info-panel {
bottom: 20px;
font-size:12px;
position: absolute;
left: 10px;
width: fit-content;
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;
position: absolute;
right: 10px;
width: 160px;
z-index: 1000;
}
#connection-status-panel dt::before {
content: "No connection";
}
#connection-status-panel dd::after {
border-radius: 50%;
background: red;
content: " ";
height:12px;
width:12px;
}
#connection-status-panel[data-is-connected] dt::before {
content: "Connected";
}
#connection-status-panel[data-is-connected] dd::after {
background:var( --accent-green );
}
#mouse-info-panel {
bottom: 60px;
display:flex;
flex-direction: column;
height: fit-content;
position: absolute;
right: 10px;
row-gap: 10px;
width: 160px;
z-index: 1000;
}
#mouse-info-panel > * {
background-color: var( --background-grey );
border-radius: var( --border-radius-sm );
padding:6px;
}
#mouse-info-panel dl {
margin-bottom:4px;
row-gap: 8px;
}
#mouse-info-panel dt {
height:20px;
width:40%;
}
#mouse-info-panel dt::after {
align-items: center;
background-color: white;
border-radius: var( --border-radius-sm );
color: var( --background-steel );
display:flex;
font-size:15.6px;
font-weight: bolder;
height:16px;
justify-content: center;
line-height: 16px;
padding:4px;
text-transform: uppercase;
width:16px;
}
#mouse-info-panel dt#ref-measure-position::after {
background-image: url( "/images/icons/ruler.svg" );
background-position: 50% 50%;
background-repeat: no-repeat;
background-size:16px 16px;
content: " ";
}
#mouse-info-panel dt[data-label]::after {
content: attr( data-label );
}
#mouse-info-panel dt[data-coalition="blue"]::after {
background-color: var( --primary-blue );
}
#mouse-info-panel dt[data-coalition="red"]::after {
background-color: var( --primary-red );
}
#mouse-info-panel dt[data-tooltip]:hover::before {
background-color: var( --background-grey );
border-radius: 5px;
content: attr( data-tooltip );
display:flex;
flex-wrap: nowrap;
padding: 5px;
position: absolute;
translate: calc( -100% - 15px ) 0;
white-space: nowrap;
}
#mouse-info-panel dd {
width:60%;
}
.ol-dialog { .ol-dialog {
align-self: center; align-self: center;

83
client/public/stylesheets/mouseinfopanel.css Normal file
View File

@@ -0,0 +1,83 @@
#mouse-info-panel {
bottom: 60px;
display:flex;
flex-direction: column;
height: fit-content;
position: absolute;
right: 10px;
row-gap: 10px;
width: 160px;
z-index: 1000;
}
#mouse-info-panel > * {
background-color: var( --background-grey );
border-radius: var( --border-radius-sm );
padding:6px;
}
#mouse-info-panel dl {
margin-bottom:4px;
row-gap: 8px;
}
#mouse-info-panel dt {
height:20px;
width:40%;
}
#mouse-info-panel dt::after {
align-items: center;
background-color: white;
border-radius: var( --border-radius-sm );
color: var( --background-steel );
display:flex;
font-size:15.6px;
font-weight: bolder;
height:16px;
justify-content: center;
line-height: 16px;
padding:4px;
text-transform: uppercase;
width:16px;
}
#mouse-info-panel dt#ref-measure-position::after {
background-image: url( "/images/icons/ruler.svg" );
background-position: 50% 50%;
background-repeat: no-repeat;
background-size:16px 16px;
content: " ";
}
#mouse-info-panel dt[data-label]::after {
content: attr( data-label );
}
#mouse-info-panel dt[data-coalition="blue"]::after {
background-color: var( --primary-blue );
}
#mouse-info-panel dt[data-coalition="red"]::after {
background-color: var( --primary-red );
}
#mouse-info-panel dt[data-tooltip]:hover::before {
background-color: var( --background-grey );
border-radius: 5px;
content: attr( data-tooltip );
display:flex;
flex-wrap: nowrap;
padding: 5px;
position: absolute;
translate: calc( -100% - 15px ) 0;
white-space: nowrap;
}
#mouse-info-panel dd {
width:60%;
}

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

@@ -1,38 +1,12 @@
@import url("layout.css"); @import url("layout.css");
@import url("airbase.css"); @import url("airbase.css");
@import url("connectionstatuspanel.css");
@import url("contextmenus.css"); @import url("contextmenus.css");
@import url("mouseinfopanel.css");
@import url("units.css"); @import url("units.css");
@import url("unitcontrolpanel.css");
@import url("unitinfopanel.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;
}
* { * {
@@ -42,6 +16,23 @@
} }
html {
font-family: 'Open Sans', sans-serif;
}
body {
display:grid;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
a { a {
text-decoration: none; text-decoration: none;
} }
@@ -51,11 +42,6 @@ a:hover {
} }
html {
font-family: 'Open Sans', sans-serif;
}
button { button {
background-color: var(--background-steel); background-color: var(--background-steel);
border: 1px solid var(--background-steel); border: 1px solid var(--background-steel);
@@ -453,7 +439,7 @@ nav.ol-panel> :last-child {
filter: invert(100%); filter: invert(100%);
} }
.data-grid { .ol-data-grid {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }

46
client/public/stylesheets/unitcontrolpanel.css Normal file
View File

@@ -0,0 +1,46 @@
body.feature-forceShowUnitControlPanel #unit-control-panel {
display:block !important;
}
#unit-control-panel {
height: fit-content;
left: 10px;
position: absolute;
top: 80px;
width: 250px;
z-index: 1000;
}
#unit-control-panel #selected-units-container {
align-items: center;
border-radius: var( --border-radius-md );
display:flex;
flex-direction: column;
row-gap: 4px;
}
#unit-control-panel #selected-units-container button {
font-size: 12px;
padding:8px 0;
position: relative;
width:90%;
}
#unit-control-panel #selected-units-container button::before {
background-color: var( --accent-light-blue );
border-radius: var( --border-radius-sm );
content: attr( data-short-label );
padding:4px;
position: absolute;
translate:-40px -4px;
}
#unit-control-panel #selected-units-container button::after {
content: attr( data-callsign );
}
#unit-control-panel h4 {
margin-bottom:8px;
margin-top:20px;
}

60
client/public/stylesheets/unitinfopanel.css Normal file
View File

@@ -0,0 +1,60 @@
#unit-info-panel {
bottom: 20px;
font-size:12px;
position: absolute;
left: 10px;
width: fit-content;
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 .ol-data-grid {
margin: 6px 0;
}
#unit-info-panel #loadout-data .ol-data-grid dt:first-child {
text-indent: 5px;
}
#unit-info-panel #loadout-data .ol-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 );
}

3
client/public/themes/olympus/olympus.css
View File

@@ -32,6 +32,9 @@
--nav-text : #ECECEC; --nav-text : #ECECEC;
--ol-select-secondary: #545F6C;
/*** General border radii **/ /*** General border radii **/

2
client/views/connectionstatuspanel.ejs
View File

@@ -1,5 +1,5 @@
<div id="connection-status-panel" class="ol-panel"> <div id="connection-status-panel" class="ol-panel">
<dl class="data-grid"> <dl class="ol-data-grid">
<dt></dt> <dt></dt>
<dd></dd> <dd></dd>
</dl> </dl>

6
client/views/mouseinfopanel.ejs
View File

@@ -1,14 +1,14 @@
<div id="mouse-info-panel" class="ol-panel"> <div id="mouse-info-panel" class="ol-panel">
<div> <div>
<dl class="data-grid"> <dl class="ol-data-grid">
<dt id="ref-measure-position" data-tooltip="CTRL-click on the map to activate the measuring tool."></dt> <dt id="ref-measure-position" data-tooltip="CTRL-click on the map to activate the measuring tool."></dt>
<dd id="measure-position" class="br-info" data-bearing="---" data-distance="---" data-distance-units="nm"></dd> <dd id="measure-position" class="br-info" data-bearing="---" data-distance="---" data-distance-units="nm"></dd>
</dl> </dl>
</div> </div>
<div> <div>
<dl class="data-grid"> <dl class="ol-data-grid">
<dt id="ref-bullseye-2" data-label="BE" data-coalition="blue"></dt> <dt id="ref-bullseye-2" data-label="BE" data-coalition="blue"></dt>
<dd id="bullseye-2" class="br-info" data-bearing="---" data-distance="---" data-distance-units="nm"></dd> <dd id="bullseye-2" class="br-info" data-bearing="---" data-distance="---" data-distance-units="nm"></dd>
<dt id="ref-bullseye-1" data-label="BE" data-coalition="red"></dt> <dt id="ref-bullseye-1" data-label="BE" data-coalition="red"></dt>
@@ -17,7 +17,7 @@
</div> </div>
<div> <div>
<dl class="data-grid"> <dl class="ol-data-grid">
<dt id="ref-mouse-position-latitude" data-label="N"></dt> <dt id="ref-mouse-position-latitude" data-label="N"></dt>
<dd id="mouse-position-latitude" class="coordinates" data-dd="---" data-mm="---" data-ss="--" data-sss="--"></dd> <dd id="mouse-position-latitude" class="coordinates" data-dd="---" data-mm="---" data-ss="--" data-sss="--"></dd>
<dt id="ref-mouse-position-longitude" data-label="E"></dt> <dt id="ref-mouse-position-longitude" data-label="E"></dt>

4
client/views/uikit.ejs
View File

@@ -993,7 +993,7 @@
<div id="airbase-contextmenu" class="ol-panel"> <div id="airbase-contextmenu" class="ol-panel">
<h3 id="airbase-name">Al Alhambra</h3> <h3 id="airbase-name">Al Alhambra</h3>
<dl id="airbase-properties" class="data-grid"> <dl id="airbase-properties" class="ol-data-grid">
<dt>Runway 1</dt> <dt>Runway 1</dt>
<dd>31 / 13</dd> <dd>31 / 13</dd>
<dt>Runway 2</dt> <dt>Runway 2</dt>
@@ -1005,7 +1005,7 @@
</dl> </dl>
<hr /> <hr />
<h4>Parking available:</h4> <h4>Parking available:</h4>
<dl id="airbase-parking" class="data-grid"> <dl id="airbase-parking" class="ol-data-grid">
<dt>Shelters</dt> <dt>Shelters</dt>
<dd>2</dd> <dd>2</dd>
<dt>Open air</dt> <dt>Open air</dt>

4
client/views/unitcontrolpanel.ejs
View File

@@ -21,7 +21,7 @@
<div id="flight-data"> <div id="flight-data">
<h4>Flight controls</h4> <h4>Flight controls</h4>
<div class="slider-container flight-control-slider" id="airspeed-slider"> <div class="slider-container flight-control-slider" id="airspeed-slider">
<dl class="data-grid"> <dl class="ol-data-grid">
<dt>Speed</dt> <dt>Speed</dt>
<dd class="flight-control-value" id="value">451kts</dd> <dd class="flight-control-value" id="value">451kts</dd>
</dl> </dl>
@@ -29,7 +29,7 @@
</div> </div>
<div class="slider-container flight-control-slider" id="altitude-slider"> <div class="slider-container flight-control-slider" id="altitude-slider">
<dl class="data-grid"> <dl class="ol-data-grid">
<dt>Altitude</dt> <dt>Altitude</dt>
<dd class="flight-control-value" id="value">21,594ft</dd> <dd class="flight-control-value" id="value">21,594ft</dd>
</dl> </dl>

2
client/views/unitinfopanel.ejs
View File

@@ -16,7 +16,7 @@
<h4 id="loadout-label">Loadout</h4> <h4 id="loadout-label">Loadout</h4>
<dl class="data-grid"> <dl class="ol-data-grid">
<dt>Fuel</dt> <dt>Fuel</dt>
<dd id="loadout-fuel-level" data-fuel-level="69"></dd> <dd id="loadout-fuel-level" data-fuel-level="69"></dd>
</dl> </dl>