Icon menu sorted - except for the Discord link.

This commit is contained in:
PeekabooSteam 2023-03-13 19:52:12 +00:00
parent c8f6ca9faf
commit 6eef017c2b
4 changed files with 30 additions and 35 deletions

View File

@ -36,10 +36,19 @@ body {
z-index: 1000;
}
.content #primary-toolbar {
position: static;
#olympus-toolbar-summary {
background-image: url( "/images/icon-round.png" );
background-position: 25px 20px;
background-repeat: no-repeat;
background-size:36px 36px;
display: flex;
flex-direction: column;
text-indent: 44px;
}
#unit-control-panel {
height: fit-content;
left: 10px;

View File

@ -42,6 +42,15 @@
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
html {
font-family: 'Open Sans', sans-serif;
}
@ -160,7 +169,7 @@ button[disabled="disabled"] {
.ol-select>.ol-select-options>div {
.ol-select>.ol-select-options > div {
background-color: var(--background-grey);
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
display: flex;
@ -187,10 +196,12 @@ button[disabled="disabled"] {
width: 100%;
}
.ol-select>.ol-select-options div button {
.ol-select>.ol-select-options > div a, .ol-select>.ol-select-options > div button {
background-color: transparent;
border: none;
border-radius: 0;
color: white;
display:block;
font-size: 14px;
font-weight: normal;
padding: 6px 2px;
@ -199,7 +210,7 @@ button[disabled="disabled"] {
width: 100%;
}
.ol-select>.ol-select-options>div button:hover {
.ol-select>.ol-select-options > div a:hover, .ol-select>.ol-select-options > div button:hover {
text-decoration: underline;
}

View File

@ -178,7 +178,7 @@ function setupEvents() {
// Do open/close toggle
select.addEventListener("click", ev => {
ev.preventDefault();
ev.stopPropagation();
select.classList.toggle("is-open");
});

View File

@ -6,39 +6,14 @@
</div>
<div class="ol-select-options">
<div id="olympus-toolbar-summary">
<h2>Olympus</h2>
<p>v0.1.0</p>
<h3>Olympus</h3>
<div class="accent-green">v0.1.0</div>
</div>
<div>
<div class="ol-select">
<div class="ol-select-value">Current mode</div>
<div class="ol-select-options">
<div>
<button title="Switch to Mode A">Mode A</button>
</div>
<div>
<button title="Switch to Mode B">Mode B</button>
</div>
<div>
<button title="Switch to Mode C">Mode C</button>
</div>
</div>
</div>
<a href="https://www.discord.com" target="_blank">Discord</a>
</div>
<div>
<hr />
</div>
<div>
<button>Preferences</button>
</div>
<div>
<button>Help and support</button>
</div>
<div>
<hr />
</div>
<div>
<button>Exit Olympus</button>
<a href="https://github.com/Pax1601/DCSOlympus" target="_blank">Github</a>
</div>
</div>
</div>