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

(WiP) More work on contextmenu

Browse Source
This commit is contained in:
dpassoni
2023-03-10 10:02:37 +01:00
parent 8e5ca6c992
commit 60d7b364b6
7 changed files with 209 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
client/public/stylesheets/contextmenu.css
View File

@@ -2,28 +2,44 @@
position: absolute;
}
.content #contextmenu {
position: relative;
}
#aircraft-spawn-menu {
height: 191px;
}
#active-coalition-label {
position: absolute;
top: -28px;
border-radius: 999px;
width: fit-content;
height: fit-content;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
font-weight: 600;
color: var(--nav-text);
font-size: 12px;
}
#context-menu-switch {
margin-right: 10px;
}
.ol-contextmenu {
display: flex;
flex-direction: column;
row-gap: 5px;
width: 200px;
width: fit-content;
height: fit-content;
z-index: 1000;
}
.ol-contextmenu>div:first-child{
.ol-contextmenu>div:nth-child(2){
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-right: 0px;
}
.ol-contextmenu>ul{
@@ -41,12 +57,12 @@
margin: 0px;
}
.ol-contextmenu button {
.ol-contextmenu>div:nth-child(3)>button {
width: 100%;
text-align: left;
}
.ol-contextmenu>div:nth-child(2){
.ol-contextmenu>div:nth-child(3){
display: flex;
flex-direction: column;
@@ -68,20 +84,65 @@
#unit-spawn-aircraft {
background-image: var( --spawn-aircraft-url );
background-size: 48px;
}
#unit-spawn-ground {
background-image: var( --spawn-ground-url );
background-size: 48px;
}
#unit-spawn button {
#unit-spawn-smoke {
background-image: var( --spawn-smoke-url );
background-size: 48px;
}
.unit-spawn-button {
border: none;
height: 32px;
width: 32px;
height: 48px;
width: 48px;
margin-top: -10px;
margin-bottom: -10px;
border-radius: 0px;
}
#unit-spawn button:not(:hover){
background-color: transparent !important;
.unit-spawn-button:last-of-type {
border-top-right-radius: var(--border-radius-sm);
border-bottom-right-radius: var(--border-radius-sm);
}
[data-active-coalition=blue].toggle-fill,
[data-active-coalition=blue].unit-spawn-button:hover,
[data-active-coalition=blue].unit-spawn-button.is-open,
[data-active-coalition=blue]#active-coalition-label,
[data-active-coalition=blue]#deploy-unit-button
{
background-color: var(--primary-blue)
}
[data-active-coalition=red].toggle-fill,
[data-active-coalition=red].unit-spawn-button:hover,
[data-active-coalition=red].unit-spawn-button.is-open,
[data-active-coalition=red]#active-coalition-label,
[data-active-coalition=red]#deploy-unit-button
{
background-color: var(--primary-red)
}
[data-active-coalition=blue]#deploy-unit-button:disabled {
background-color: transparent;
border: 1px solid var(--primary-blue);
cursor: default;
}
[data-active-coalition=red]#deploy-unit-button:disabled {
background-color: transparent;
border: 1px solid var(--primary-red);
cursor: default;
}
[data-active-coalition=blue]#active-coalition-label::after {
content: "Create blue unit";
}
[data-active-coalition=red]#active-coalition-label::after {
content: "Create red unit";
}