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

Styled top bar, fixed IADS toggle.

Browse Source
This commit is contained in:
PeekabooSteam
2023-12-01 15:51:02 +00:00
parent bf12d6330c
commit d94432636f
9 changed files with 103 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
client/public/stylesheets/other/toolbar.css
View File

@@ -14,6 +14,10 @@
width: fit-content;
}
#app-icon>.ol-select-value {
box-shadow: none;
}
#toolbar-summary {
background-image: url("/images/icon-round.png");
background-position: 20px 22px;
@@ -29,22 +33,56 @@
white-space: nowrap;
}
#toolbar-container>*:nth-child(2)>svg {
display: none;
width: 0px;
height: 0px;
.ol-panel-tab {
align-items: center;
display:flex;
flex-direction: row;
margin-right:6px;
}
.ol-panel-tab svg {
height:24;
width:24px;
}
.ol-panel-tab svg * {
fill:white;
}
.ol-panel-tab span {
font-size:13px;
font-weight:400;
padding:0 6px;
}
#toolbar-container>*:nth-child(3)>svg {
display: none;
}
#unit-visibility-control > div:nth-child(3),
#coalition-visibility-control {
border-left: 4px solid white;
padding-left: 12px;
}
@media (max-width: 1145px) {
#toolbar-container {
flex-direction: column;
align-items: start;
}
#toolbar-container .ol-panel .ol-panel-tab {
margin-right:0;
}
#toolbar-container .ol-panel:hover .ol-panel-tab {
display:none;
}
#toolbar-container .ol-panel-tab span {
display:none;
}
#toolbar-container>*:nth-child(1):not(:hover) {
width: fit-content;
height: fit-content;
@@ -62,10 +100,10 @@
}
#toolbar-container>*:not(:first-child):not(:hover)>svg {
display: block;
width: 24px;
height: 24px;
display: block;
filter: invert();
height: 24px;
width: 24px;
}
#toolbar-container>*:not(:first-child):not(:hover)>*:not(:first-child) {

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

@@ -72,6 +72,18 @@ form {
padding: 0;
}
button svg.fill-coalition * {
fill: var(--primary-neutral) !important;
}
button svg.fill-coalition[data-coalition="blue"] * {
fill: var(--primary-blue) !important;
}
button svg.fill-coalition[data-coalition="red"] * {
fill: var(--primary-red) !important;
}
.pill {
background-color: var(--background-steel);
border-radius: 999px;
@@ -372,7 +384,7 @@ button.ol-button-warning>svg:first-child {
}
nav.ol-panel {
column-gap: 20px;
column-gap: 10px;
display: flex;
flex-direction: row;
height: 58px;
@@ -384,8 +396,7 @@ nav.ol-panel> :last-child {
.ol-panel .ol-group {
align-items: center;
border-radius: var(--border-radius-sm);
column-gap: 10px;
column-gap: 12px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
@@ -652,13 +663,13 @@ nav.ol-panel> :last-child {
}
.ol-navbar-buttons-group button.off svg * {
fill: white !important;
stroke: white !important;
fill: white;
stroke: white;
}
.ol-navbar-buttons-group button svg * {
fill: var(--background-steel) !important;
stroke: var(--background-steel) !important;
fill: var(--background-steel);
stroke: var(--background-steel);
}
.ol-navbar-buttons-group .protectable button:first-of-type {
@@ -1590,6 +1601,24 @@ input[type=number]::-webkit-outer-spin-button {
fill: lightgray;
}
#map-visibility-options .ol-select-options .ol-checkbox {
font-size:13px;
font-weight:400;
padding:6px 15px;
}
#map-visibility-options .ol-select-options .ol-checkbox:first-of-type {
padding-top:12px;
}
#map-visibility-options .ol-select-options .ol-checkbox:last-of-type {
padding-bottom:12px;
}
#map-visibility-options .ol-select-options .ol-checkbox label:hover span {
text-decoration: underline;
}
.ol-log-entry:first-of-type {
border-top: 1px solid #FFFFFF44;
}
@@ -1685,4 +1714,5 @@ input[type=number]::-webkit-outer-spin-button {
50% {
opacity: 0;
}
}
}

1
client/public/themes/olympus/images/buttons/visibility/circle-dot.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 346 B

1
client/public/themes/olympus/images/buttons/visibility/flag.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M64 32C64 14.3 49.7 0 32 0S0 14.3 0 32V64 368 480c0 17.7 14.3 32 32 32s32-14.3 32-32V352l64.3-16.1c41.1-10.3 84.6-5.5 122.5 13.4c44.2 22.1 95.5 24.8 141.7 7.4l34.7-13c12.5-4.7 20.8-16.6 20.8-30V66.1c0-23-24.2-38-44.8-27.7l-9.6 4.8c-46.3 23.2-100.8 23.2-147.1 0c-35.1-17.6-75.4-22-113.5-12.5L64 48V32z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 554 B

1
client/public/themes/olympus/images/buttons/visibility/shield.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M256 0c4.6 0 9.2 1 13.4 2.9L457.7 82.8c22 9.3 38.4 31 38.3 57.2c-.5 99.2-41.3 280.7-213.6 363.2c-16.7 8-36.1 8-52.8 0C57.3 420.7 16.5 239.2 16 140c-.1-26.2 16.3-47.9 38.3-57.2L242.7 2.9C246.8 1 251.4 0 256 0zm0 66.8V444.8C394 378 431.1 230.1 432 141.4L256 66.8l0 0z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 519 B

2
client/public/themes/olympus/images/icons/eye-solid.svg
View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 820 B

After

Width:  |  Height:  |  Size: 826 B