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

We no longer LOSE the icon

Browse Source
This commit is contained in:
PeekabooSteam 2023-11-20 20:33:41 +00:00
parent 31af3a53ce
commit e20d2fa95a
3 changed files with 68 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -67,10 +67,6 @@ button>img:first-child {
pointer-events: none;
}
.ol-box-shadow {
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
form {
margin: 0;
padding: 0;
@ -230,13 +226,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,6 +262,7 @@ form {
color: white;
display: block;
font-size: 13px;
font-weight: normal;
height: 32px;
padding: 6px 2px;
padding: 5px;
@ -718,6 +715,62 @@ nav.ol-panel> :last-child {
}
#roe-buttons-container button,
#reaction-to-threat-buttons-container button,
#emissions-countermeasures-buttons-container button,
#shots-scatter-buttons-container button
#shots-intensity-buttons-container button {
align-items: center;
background-color: transparent;
border: 1px solid var(--accent-light-blue);
display: flex;
height: 30px;
justify-content: center;
width: 30px;
}
#reaction-to-threat-buttons-container button:not(:first-child) svg {
width: 150%;
margin: -5px;
}
#unit-control-panel .ol-option-button button.selected {
background-color: white;
border-color: white;
}
#unit-control-panel .ol-option-button button.selected svg * {
fill: var(--background-steel);
stroke: var(--background-steel);
}
#rapid-controls {
display: flex;
flex-direction: column;
row-gap: 5px;
height: fit-content;
width: fit-content;
}
#rapid-controls button {
padding: 4px;
}
#rapid-controls svg {
height: 20px;
width: 20px;
fill: white;
stroke: white;
}
#rapid-controls button:before {
display: inline-block;
filter: invert(100%);
height: 20px;
width: 20px;
}
/****************************************************************************************/
#splash-screen {
border-radius: var(--border-radius-md);
@ -1272,12 +1325,13 @@ input[type=number]::-webkit-outer-spin-button {
align-items: center;
background-repeat: no-repeat;
display: flex;
font-weight: normal;
padding: 8px 10px;
white-space: nowrap;
}
[class|="ol-button"]::before {
margin-right: 4px;
margin-right: 8px;
}
.ol-button-close {
@ -1314,12 +1368,10 @@ input[type=number]::-webkit-outer-spin-button {
}
.ol-switch {
align-items: center;
cursor: pointer;
display: flex;
height: 25px;
align-items: center;
justify-content: center;
width: 40px;
}
.ol-switch-input {
@ -1355,7 +1407,7 @@ input[type=number]::-webkit-outer-spin-button {
display: flex;
font-size: 11px;
height: 100%;
padding: 0px 6px;
padding: 0px 7px;
position: absolute;
transition: transform 0.2s;
}
@ -1372,29 +1424,6 @@ input[type=number]::-webkit-outer-spin-button {
transform: translateX(calc((var(--width) - var(--height)) * 0.5));
}
.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.coalition .ol-switch>.ol-switch-fill::before,
.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;
}
@ -1410,26 +1439,6 @@ input[type=number]::-webkit-outer-spin-button {
.ol-coalition-switch[data-value="undefined"]>.ol-switch-fill {
background-color: var(--primary-neutral);
}
/*
#unit-control-panel .switch-control .ol-switch-fill::after {
background-color: white;
}
*/
.switch-control.coalition [data-value="true"] .ol-switch-fill {
background-color: var(--accent-light-blue);
}
.switch-control.coalition [data-value="false"] .ol-switch-fill {
background-color: var(--primary-red);
}
.switch-control.coalition [data-value="true"]>.ol-switch-fill::before {
content: "BLUE" !important;
}
.switch-control.coalition [data-value="false"]>.ol-switch-fill::before {
content: "RED" !important;
}
.ol-context-menu>ul {
max-height: 200px;

6
client/src/controls/dropdown.ts
View File

@ -7,6 +7,7 @@ export class Dropdown {
#optionsList: string[] = [];
#index: number = 0;
#hidden: boolean = false;
#text!:HTMLElement;
constructor(ID: string | null, callback: CallableFunction, options: string[] | null = null, defaultText?: string) {
if (ID === null)
@ -15,7 +16,10 @@ export class Dropdown {
this.#container = document.getElementById(ID) as HTMLElement;
this.#options = this.#container.querySelector(".ol-select-options") as HTMLElement;
this.#value = this.#container.querySelector(".ol-select-value") as HTMLElement;
const text = this.#container.querySelector(".ol-select-value-text");
this.#value = ( text instanceof HTMLElement ) ? text : this.#container.querySelector(".ol-select-value") as HTMLElement;
this.#defaultValue = this.#value.innerText;
this.#callback = callback;

2
client/views/toolbars/primary.ejs
View File

@ -28,7 +28,7 @@
<div class="ol-group">
<div id="map-type" class="ol-select">
<div class="ol-select-value"><img src="resources/theme/images/icons/map-source.svg" inject-svg>ArcGIS Satellite</div>
<div class="ol-select-value"><img src="resources/theme/images/icons/map-source.svg" inject-svg><span class="ol-select-value-text">ArcGIS Satellite</span></div>
<div class="ol-select-options">
<!-- Here the available map sources will be listed-->
</div>