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

More work on advanced settings dialog

Browse Source
This commit is contained in:
Pax1601
2023-04-12 17:21:36 +02:00
parent 316261e01e
commit 7eee469bed
10 changed files with 315 additions and 306 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
client/public/stylesheets/layout.css
View File

@@ -1,4 +1,3 @@
/* Page style */
#map-container {
height: 100%;
@@ -14,32 +13,30 @@
}
#olympus-toolbar-summary {
background-image: url( "/images/icon-round.png" );
background-image: url("/images/icon-round.png");
background-position: 25px 20px;
background-repeat: no-repeat;
background-size:36px 36px;
background-size: 36px 36px;
display: flex;
flex-direction: column;
text-indent: 44px;
}
dl.ol-data-grid {
align-items: center;
display:flex;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin:0;
margin: 0;
row-gap: 4px;
}
dl.ol-data-grid dt {
width:60%;
width: 60%;
}
dl.ol-data-grid dd {
width:40%;
width: 40%;
}
@@ -48,24 +45,23 @@ dl.ol-data-grid dt.icon {
}
dl.ol-data-grid dt.icon::before {
content: url( /images/icons/speed.svg );
display:inline-block;
filter:invert(100%);
content: url(/images/icons/speed.svg );
display: inline-block;
filter: invert(100%);
width: 20px;
translate:-20px 2px;
translate: -20px 2px;
}
dl.ol-data-grid dt.icon-speed::before {
content: url( /images/icons/speed.svg );
content: url(/images/icons/speed.svg );
}
dl.ol-data-grid dt.icon-altitude::before {
content: url( /images/icons/altitude.svg );
content: url(/images/icons/altitude.svg );
}
dl.ol-data-grid dd {
display: flex;
justify-content: flex-end;
@@ -73,56 +69,50 @@ dl.ol-data-grid dd {
}
.br-info::after {
content: attr( data-bearing ) '\00B0 / ' attr( data-distance ) attr( data-distance-units );
content: attr(data-bearing) '\00B0 / ' attr(data-distance) attr(data-distance-units);
}
.br-info[data-message]::after {
content: attr( data-message );
content: attr(data-message);
}
.coordinates::after {
content: attr( data-dd ) "\00b0 " attr( data-mm ) "'" attr( data-ss ) "." attr( data-sss ) '"' attr( data-label );
content: attr(data-dd) "\00b0 " attr(data-mm) "'" attr(data-ss) "." attr(data-sss) '"' attr(data-label);
}
.ol-button-box {
column-gap: 6px;
display:flex;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin:5px 0;
margin: 5px 0;
row-gap: 5px;
}
.ol-button-box button {
background-repeat: no-repeat;;
border:1px solid var( --accent-light-blue );
color: var( --accent-light-blue );
background-repeat: no-repeat;
;
border: 1px solid var(--accent-light-blue);
color: var(--accent-light-blue);
}
.ol-dialog {
align-self: center;
background-color: var( --background-slate-blue );
color:white;
background-color: var(--background-slate-blue);
color: white;
justify-self: center;
position: absolute;
z-index:1000;
z-index: 1000;
}
.ol-panel.ol-dialog {
padding:20px;
padding: 20px;
}
.ol-dialog-close {
cursor: pointer;
font-size:16px;
font-weight: var( --font-weight-bolder );
font-size: 16px;
font-weight: var(--font-weight-bolder);
position: absolute;
right: 25px;
top: 25px;
@@ -133,12 +123,12 @@ dl.ol-data-grid dd {
}
.ol-dialog-header {
border-bottom:1px solid var( --background-grey );
padding-bottom:10px;
border-bottom: 1px solid var(--background-grey);
padding-bottom: 10px;
}
.ol-dialog-footer {
border-top: 1px solid var( --background-grey );
border-top: 1px solid var(--background-grey);
padding-top: 15px;
display: flex;
row-gap: 10px;
@@ -157,46 +147,67 @@ dl.ol-data-grid dd {
}
.ol-checkbox input[type="checkbox"] {
appearance:none;
appearance: none;
background-color: transparent;
border:none;
margin:0;
border: none;
margin: 0;
}
.ol-checkbox input[type="checkbox"]::before {
align-self:center;
background-image: url( "/images/icons/square-check-solid.svg" );
align-self: center;
background-image: url("/images/icons/square-check-solid.svg");
background-repeat: no-repeat;
content: "";
filter: invert( 100% );
display:flex;
height:16px;
margin-right:10px;
width:16px;
filter: invert(100%);
display: flex;
height: 16px;
margin-right: 10px;
width: 16px;
}
.ol-checkbox input[type="checkbox"]:checked::before {
background-image: url( "/images/icons/square-regular.svg" );
background-image: url("/images/icons/square-regular.svg");
}
.ol-text-input input {
height: 40px;
border-radius: 5px;
color: var(--background-offwhite);
background-color: var(--background-grey);
border: 1px solid var(--background-grey);
border-radius: var(--border-radius-sm);
text-align: center;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
input[type=number] {
-moz-appearance: textfield;
appearance: textfield;
margin: 0;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
[class|="ol-button"] {
align-items: center;
background-repeat: no-repeat;
display:flex;
display: flex;
font-weight: normal;
padding:8px 10px;
padding: 8px 10px;
white-space: nowrap;
}
[class|="ol-button"]::before {
margin-right:8px;
margin-right: 8px;
}
.ol-button-close {
background: transparent;
border:1px solid white;
border: 1px solid white;
}
.ol-button-close::before {
@@ -213,16 +224,16 @@ dl.ol-data-grid dd {
}
.ol-button-settings {
background-color: var( --background-slate-blue );
background-color: var(--background-slate-blue);
}
.ol-button-settings::before {
background-image: url( "/images/icons/gears-solid.svg" );
background-position:0 50%;
background-size:24px 24px;
background-image: url("/images/icons/gears-solid.svg");
background-position: 0 50%;
background-size: 24px 24px;
content: "";
display:flex;
filter: invert( 100% );
display: flex;
filter: invert(100%);
height: 24px;
width: 24px;
}

1
client/public/stylesheets/olympus.css
View File

@@ -348,6 +348,7 @@ nav.ol-panel> :last-child {
flex-direction: row;
flex-wrap: nowrap;
row-gap: 4px;
align-items: center;
}
.ol-panel .ol-group.wrap {