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

Finalised styling for UCP

Browse Source
This commit is contained in:
PeekabooSteam 2023-11-18 22:02:59 +00:00
parent 84cf9aa27a
commit 178706f8de
4 changed files with 76 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
client/public/stylesheets/panels/unitcontrol.css
View File

@ -229,27 +229,10 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
opacity: 80%;
}
#unit-control-panel .switch-control .ol-switch {
height: 25px;
width: 60px;
}
#unit-control-panel .switch-control .ol-switch-fill {
background-color: var(--accent-light-blue);
}
#unit-control-panel .switch-control .ol-switch-fill::after {
background-color: white;
}
#unit-control-panel .switch-control .ol-switch[data-value="true"]>.ol-switch-fill::before {
content: "YES";
}
#unit-control-panel .switch-control .ol-switch[data-value="false"]>.ol-switch-fill::before {
content: "NO";
}
#operate-as-switch[data-value="true"] .ol-switch-fill {
background-color: var(--accent-light-blue);
}
@ -267,25 +250,60 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
}
#advanced-settings-div {
position: relative;
align-items: center;
column-gap: 8px;
display: flex;
height: fit-content;
position: relative;
}
#advanced-settings-div button {
#advanced-settings-div > button {
background-color: var(--background-grey);
font-size:13px;
height: 40px;
padding:0 20px;
}
#delete-options {
font-size:13px;
}
#delete-options.ol-select > .ol-select-value:after {
content: "";
}
#delete-options.ol-select > .ol-select-value svg {
background-color: transparent;
position: absolute;
right:2px;
translate:0 1px;
}
#delete-options.ol-select > .ol-select-value svg * {
fill: var(--primary-red);
}
#delete-options * {
background-color: var(--background-steel);
}
#delete-options.ol-select > .ol-select-value:hover,
#delete-options .ol-select-options > div:not(.hr):hover,
#delete-options .ol-select-options > div:not(.hr):hover button,
#delete-options .ol-select-options > div hr {
background-color: var(--background-grey);
}
#delete-options .ol-select-options > div:first-of-type {
margin-top:12px;
padding-top:0;
}
#delete-options .ol-select-options > div:last-of-type {
margin-bottom:12px;
padding-bottom:0;
}
#delete-options button {
display: flex;
flex-direction: row;
@ -293,6 +311,7 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
}
#delete-options button svg {
background-color: transparent;
margin-right: 10px;
width: 18px;
max-height: 18px;

35
client/public/stylesheets/style/style.css
View File

@ -230,13 +230,13 @@ form {
}
.ol-select.is-open[data-position="top"]>.ol-select-options {
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
top: 0;
translate: 0 -100%;
}
.ol-select>.ol-select-options>div {
background-color: var(--background-grey);
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
display: flex;
justify-content: left;
padding: 2px 15px;
@ -266,7 +266,6 @@ form {
color: white;
display: block;
font-size: 13px;
font-weight: normal;
height: 32px;
padding: 6px 2px;
padding: 5px;
@ -1334,7 +1333,7 @@ input[type=number]::-webkit-outer-spin-button {
}
[class|="ol-button"]::before {
margin-right: 8px;
margin-right: 4px;
}
.ol-button-close {
@ -1371,10 +1370,12 @@ input[type=number]::-webkit-outer-spin-button {
}
.ol-switch {
align-items: center;
cursor: pointer;
display: flex;
align-items: center;
height: 25px;
justify-content: center;
width: 60px;
}
.ol-switch-input {
@ -1427,6 +1428,32 @@ input[type=number]::-webkit-outer-spin-button {
transform: translateX(calc((var(--width) - var(--height)) * 0.5));
}
.switch-control.yes-no .ol-switch {
width:45px;
}
.switch-control.yes-no .ol-switch[data-value="true"] .ol-switch-fill {
background-color: var(--accent-light-blue);
}
.switch-control.yes-no .ol-switch[data-value="false"] .ol-switch-fill {
background-color: var(--ol-switch-off);
}
.switch-control.yes-no .ol-switch>.ol-switch-fill::before {
translate:-100% 0;
transform: none;
}
.switch-control.yes-no .ol-switch[data-value="true"]>.ol-switch-fill::before {
content: "YES";
}
.switch-control.yes-no .ol-switch[data-value="false"]>.ol-switch-fill::before {
content: "NO";
}
.ol-contexmenu-panel {
padding: 20px;
}

1
client/public/themes/olympus/theme.css
View File

@ -45,6 +45,7 @@
--nav-text: #ECECEC;
--ol-select-secondary: #545F6C;
--ol-switch-off:#686868;
/*** General border radii **/
--border-radius-xs: 2px;

11
client/views/panels/unitcontrol.ejs
View File

@ -79,12 +79,12 @@
</div>
</div>
<div id="tanker-on" class="switch-control">
<div id="tanker-on" class="switch-control yes-no">
<h4>Enable tanker <img src="/resources/theme/images/icons/circle-question-regular.svg" title="Instructs the unit to operate as AAR tanker. A/A TACAN, radio frequency and callsign set in Settings dialog."></h4>
<div id="tanker-on-switch" class="ol-switch"></div>
</div>
<div id="AWACS-on" class="switch-control">
<div id="AWACS-on" class="switch-control yes-no">
<h4>Airborne Early Warning <img src="/resources/theme/images/icons/circle-question-regular.svg" title="Enables datalink and AI radio calls. Radio frequency and callsign set in Settings dialog."></h4>
<div id="AWACS-on-switch" class="ol-switch"></div>
</div>
@ -94,12 +94,12 @@
<div id="operate-as-switch" class="ol-switch"></div>
</div>
<div id="ai-on-off" class="switch-control">
<div id="ai-on-off" class="switch-control yes-no">
<h4>Unit active <img src="/resources/theme/images/icons/circle-question-regular.svg" title="Toggling this disables unit AI completely. It will no longer move, react or emit radio waves."></h4>
<div id="on-off-switch" class="ol-switch" title=""></div>
</div>
<div id="follow-roads" class="switch-control">
<div id="follow-roads" class="switch-control yes-no">
<h4>Follow roads <img src="/resources/theme/images/icons/circle-question-regular.svg" title=""></h4>
<div id="follow-roads-switch" class="ol-switch"></div>
</div>
@ -112,10 +112,11 @@
<div id="delete-options" class="ol-select">
<div class="ol-select-value ol-select-warning">
Delete unit
<img src="/resources/theme/images/icons/chevron-down.svg" inject-svg />
</div>
<div class="ol-select-options">
<div><button class="ol-button-white" data-on-click="deleteSelectedUnits" title="Immediately remove the unit from the simulation"><img src="/resources/theme/images/icons/trash-can-regular.svg" inject-svg>Delete</button></div>
<div><hr></div>
<div class="hr"><hr></div>
<div><button class="ol-button-warning" data-on-click="explodeSelectedUnits" data-on-click-params='{ "type": "normal" }' title="Normal explosion"><img src="/resources/theme/images/icons/explosion-solid.svg" inject-svg>Blow up</button></div>
<div><button class="ol-button-warning" data-on-click="explodeSelectedUnits" data-on-click-params='{ "type": "secondary" }' title="The unit will keep exploding at random intervals, simulating ammunition cooking"><img src="/resources/theme/images/icons/burst-solid.svg" inject-svg>Cook off</button></div>
<div><button class="ol-button-warning" data-on-click="explodeSelectedUnits" data-on-click-params='{ "type": "phosphorous" }' title="White phosphorous explosion"><img src="/resources/theme/images/icons/smog-solid.svg" inject-svg>Phosp.</button></div>