mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
Added some navbar stuff, broke the units while waiting on new SVGs.
This commit is contained in:
PeekabooSteam
parent
aaf5c9705d
commit
39a56f53f8
@ -17,6 +17,7 @@
|
||||
--secondary-yellow : #ffd46893;
|
||||
--nav-text : #ECECEC;
|
||||
|
||||
--ol-select-secondary : #545F6C;
|
||||
|
||||
--border-radius-xs : 2px;
|
||||
--border-radius-sm : 5px;
|
||||
@ -65,7 +66,7 @@ button[disabled="disabled"] {
|
||||
|
||||
|
||||
|
||||
nav, .ol-panel {
|
||||
.ol-panel {
|
||||
background-color: var(--background-steel);
|
||||
border-radius: 15px;
|
||||
box-shadow: 0px 2px 5px #000A;
|
||||
@ -76,53 +77,90 @@ nav, .ol-panel {
|
||||
width:fit-content;
|
||||
}
|
||||
|
||||
nav .ol-select {
|
||||
.ol-select {
|
||||
color: var( --nav-text );
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav .ol-select .ol-select-value {
|
||||
.ol-select .ol-select-value {
|
||||
align-content: center;
|
||||
background-color: var( --background-grey );
|
||||
border-radius: var( --border-radius-sm );
|
||||
display:flex;
|
||||
justify-content: left;
|
||||
padding:1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav .ol-select .ol-select-options {
|
||||
background-color: var( --background-grey );
|
||||
border-radius: var( --border-radius-sm );
|
||||
display:none;
|
||||
list-style: none;
|
||||
padding:.5em 0;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
nav .ol-select:hover .ol-select-options {
|
||||
display: block;
|
||||
.ol-select .ol-select-value:before {
|
||||
content: "[ ]";
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
nav .ol-select .ol-select-options li {
|
||||
.ol-select .ol-select-value:after {
|
||||
content: "[V]";
|
||||
margin-left:10px;
|
||||
}
|
||||
|
||||
.ol-select .ol-select-options {
|
||||
overflow:hidden;
|
||||
max-height: 0;
|
||||
position: relative;
|
||||
translate:0 -2px;
|
||||
}
|
||||
|
||||
|
||||
.ol-select:hover .ol-select-options {
|
||||
max-height: fit-content;
|
||||
padding:8px 0;
|
||||
}
|
||||
|
||||
.ol-select .ol-select-options > div {
|
||||
background-color: var( --background-grey );
|
||||
display:flex;
|
||||
justify-content: left;
|
||||
padding:6px 30px;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
nav .ol-select .ol-select-options li.hr {
|
||||
border-bottom:1px solid var( --nav-text );
|
||||
.ol-select .ol-select-options > div:first-of-type {
|
||||
border-top-left-radius: var( --border-radius-md );
|
||||
border-top-right-radius: var( --border-radius-md );
|
||||
padding-top:16px;
|
||||
}
|
||||
|
||||
.ol-select .ol-select-options > div:last-of-type {
|
||||
border-bottom-left-radius: var( --border-radius-md );
|
||||
border-bottom-right-radius: var( --border-radius-md );
|
||||
padding-bottom:16px;
|
||||
}
|
||||
|
||||
.ol-select .ol-select-options div.hr {
|
||||
border-bottom:1px solid #FFFFFF2E;
|
||||
margin:8px;
|
||||
}
|
||||
|
||||
nav .ol-select .ol-select-options li button {
|
||||
background-color: var( --background-grey );
|
||||
.ol-select .ol-select-options div button {
|
||||
background-color: transparent;
|
||||
border:none;
|
||||
border-radius: 0;
|
||||
font-size:14px;
|
||||
font-weight: normal;
|
||||
padding:8px 2px;
|
||||
text-align: left;
|
||||
width:100%;
|
||||
white-space: nowrap;
|
||||
width:fit-content;
|
||||
}
|
||||
|
||||
.ol-select .ol-select-options > div button:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.ol-panel-list {
|
||||
border-radius: var( --border-radius-sm );
|
||||
display: flex;
|
||||
@ -184,6 +222,59 @@ nav .ol-select .ol-select-options li button {
|
||||
}
|
||||
|
||||
|
||||
nav.ol-panel {
|
||||
column-gap: 20px;
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
height:58px;
|
||||
}
|
||||
|
||||
nav.ol-panel > :first-child {
|
||||
margin-left:20px;
|
||||
}
|
||||
|
||||
nav.ol-panel > :last-child {
|
||||
margin-right:20px;
|
||||
}
|
||||
|
||||
|
||||
.ol-panel .ol-group {
|
||||
column-gap: 10px;
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
flex-wrap:nowrap;
|
||||
}
|
||||
|
||||
.ol-panel .ol-group button {
|
||||
border:1px solid white;
|
||||
}
|
||||
|
||||
.ol-panel .ol-group {
|
||||
border-radius: var( --border-radius-sm );
|
||||
}
|
||||
|
||||
.ol-panel .ol-group-checkbox {
|
||||
align-items: center;
|
||||
column-gap: 20px;
|
||||
display:flex;
|
||||
flex-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
width:fit-content;
|
||||
}
|
||||
|
||||
.ol-panel .ol-group-checkbox .ol-checkbox {
|
||||
align-items: center;
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
|
||||
.ol-panel .ol-group-checkbox input,
|
||||
.ol-panel .ol-group-checkbox .ol-checkbox label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.highlight-primary {
|
||||
background-color: var(--secondary-light-grey);
|
||||
@ -201,241 +292,4 @@ nav .ol-select .ol-select-options li button {
|
||||
.highlight-neutral {
|
||||
background-color: var(--primary-grey);
|
||||
color: var(--secondary-gunmetal-grey)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
svg.unit {
|
||||
height: var( --unit-marker-height );
|
||||
width: var( --unit-marker-width );
|
||||
}
|
||||
|
||||
svg.unit .unit-vvi {
|
||||
fill:black;
|
||||
height: 4px;
|
||||
transform-box: fill-box;
|
||||
transform-origin:top;
|
||||
translate: var( --unit-marker-centre-x ) calc( var( --unit-marker-centre-y ) - 2px );
|
||||
width:4px;
|
||||
}
|
||||
|
||||
svg.unit rect.unit-hotgroup {
|
||||
display:none;
|
||||
fill: var( --secondary-neutral );
|
||||
height: var( --unit-marker-hotgroup-height );
|
||||
transform: rotate( -45deg );
|
||||
transform-origin: center;
|
||||
translate: calc( var( --unit-marker-centre-x ) + ( var( --unit-marker-hotgroup-width ) / 2 ) ) -44px;
|
||||
width: var( --unit-marker-hotgroup-height );
|
||||
}
|
||||
|
||||
svg.unit text.unit-hotgroup-id {
|
||||
font-weight: bolder;
|
||||
display:none;
|
||||
fill:white;
|
||||
font-size:9px;
|
||||
}
|
||||
|
||||
svg.unit[data-is-in-hotgroup="true"] rect.unit-hotgroup, svg.unit[data-is-in-hotgroup="true"] text.unit-hotgroup-id {
|
||||
display:block;
|
||||
}
|
||||
|
||||
svg.unit rect.unit-selected-border {
|
||||
fill:transparent;
|
||||
height: calc( var( --unit-marker-air-height ) + ( var( --unit-marker-stroke-width ) * 2 ) );
|
||||
rx: var( --unit-marker-stroke-width );
|
||||
stroke: var( white );
|
||||
stroke-width: var( --unit-marker-stroke-width );
|
||||
width: calc( var( --unit-marker-air-width ) + ( var( --unit-marker-stroke-width ) * 2 ) );
|
||||
x: calc( var(--unit-marker-air-label-x) - 3px );
|
||||
y: calc( var(--unit-marker-air-label-y) - 3px );
|
||||
}
|
||||
|
||||
svg.unit rect.unit-marker {
|
||||
fill: var( --primary-grey );
|
||||
height: calc( var( --unit-marker-air-height ) - var( --unit-marker-stroke-width ) );
|
||||
rx: var( --unit-marker-stroke-width );
|
||||
ry: var( --unit-marker-stroke-width );
|
||||
stroke: var( --secondary-neutral );
|
||||
stroke-linejoin: round;
|
||||
stroke-width: var( --unit-marker-stroke-width );
|
||||
width: calc( var( --unit-marker-air-width ) - var( --unit-marker-stroke-width ) );
|
||||
x: var(--unit-marker-air-label-x);
|
||||
y: var(--unit-marker-air-label-y);
|
||||
}
|
||||
|
||||
|
||||
svg.unit text.unit-short-label {
|
||||
fill: var( --secondary-neutral );
|
||||
font-size: var( --unit-marker-font-size );
|
||||
font-weight: var( --unit-marker-font-weight );
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
|
||||
svg.unit rect.unit-fuel, svg.unit rect.unit-fuel-level {
|
||||
height: var( --unit-marker-air-fuel-height );
|
||||
width: var( --unit-marker-air-fuel-width );
|
||||
x: var( --unit-marker-air-fuel-x );
|
||||
y: var( --unit-marker-air-fuel-y );
|
||||
}
|
||||
|
||||
|
||||
svg.unit rect.unit-fuel {
|
||||
display:none;
|
||||
fill: white;
|
||||
rx: var( --unit-marker-stroke-width );
|
||||
ry: var( --unit-marker-stroke-width );
|
||||
stroke: var( --secondary-gunmetal-grey );
|
||||
stroke-linejoin: round;
|
||||
stroke-width: var( --unit-marker-stroke-width );
|
||||
y: var( --unit-marker-air-fuel-y );
|
||||
}
|
||||
|
||||
svg.unit rect.unit-fuel-level {
|
||||
display:none;
|
||||
fill: var( --secondary-light-grey );
|
||||
height: calc( var( --unit-marker-air-fuel-height ) - var( --unit-marker-stroke-width ) );
|
||||
y: calc( var( --unit-marker-air-fuel-y ) + ( var( --unit-marker-stroke-width ) / 2 ) );
|
||||
}
|
||||
|
||||
|
||||
svg.unit circle.unit-ammo {
|
||||
cy: var( --unit-marker-air-ammo-y );
|
||||
display: none;
|
||||
fill: white;
|
||||
r: var( --unit-marker-air-ammo-radius );
|
||||
stroke: var( --secondary-neutral );
|
||||
stroke-width: var( --unit-marker-stroke-width );
|
||||
}
|
||||
|
||||
svg.unit circle.unit-ammo-fox-1 {
|
||||
cx: calc( var( --unit-marker-centre-x ) - ( ( var( --unit-marker-air-ammo-radius ) * 3 ) + ( var( --unit-marker-air-ammo-gap ) * 1.5 ) ) );
|
||||
}
|
||||
|
||||
svg.unit circle.unit-ammo-fox-2 {
|
||||
cx: calc( var( --unit-marker-centre-x ) - ( var( --unit-marker-air-ammo-radius ) + ( var( --unit-marker-air-ammo-gap ) / 2 ) ) );
|
||||
}
|
||||
|
||||
svg.unit circle.unit-ammo-fox-3 {
|
||||
cx: calc( var( --unit-marker-centre-x ) + var( --unit-marker-air-ammo-radius ) + ( var( --unit-marker-air-ammo-gap ) / 2 ) );
|
||||
}
|
||||
|
||||
svg.unit circle.unit-ammo-other {
|
||||
cx: calc( var( --unit-marker-centre-x ) + ( var( --unit-marker-air-ammo-radius ) * 3 ) + ( var( --unit-marker-air-ammo-gap ) * 1.5 ) );
|
||||
}
|
||||
|
||||
svg.unit[data-has-fox-1="true"] circle.unit-ammo-fox-1,
|
||||
svg.unit[data-has-fox-2="true"] circle.unit-ammo-fox-2,
|
||||
svg.unit[data-has-fox-3="true"] circle.unit-ammo-fox-3,
|
||||
svg.unit[data-has-other-ammo="true"] circle.unit-ammo-other {
|
||||
fill: var( --secondary-gunmetal-grey );
|
||||
}
|
||||
|
||||
svg.unit .unit-summary text {
|
||||
fill:white;
|
||||
font-size:10px;
|
||||
paint-order: stroke;
|
||||
stroke: black;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
svg.unit[data-coalition="blue"] rect.unit-marker {
|
||||
fill: var( --primary-blue );
|
||||
stroke: var( --secondary-blue-outline );
|
||||
}
|
||||
|
||||
svg.unit[data-coalition="blue"] rect.unit-hotgroup,
|
||||
svg.unit[data-coalition="blue"] text.unit-short-label {
|
||||
fill: var( --secondary-blue-outline );
|
||||
}
|
||||
|
||||
svg.unit[data-coalition="blue"] rect.unit-fuel {
|
||||
stroke: var( --secondary-blue-outline );
|
||||
}
|
||||
|
||||
svg.unit[data-coalition="blue"] rect.unit-fuel-level {
|
||||
fill: var( --primary-blue );
|
||||
}
|
||||
|
||||
|
||||
svg.unit[data-coalition="red"] rect.unit-marker {
|
||||
fill: var( --primary-red );
|
||||
stroke: var( --secondary-red-outline );
|
||||
}
|
||||
|
||||
svg.unit[data-coalition="red"] rect.unit-hotgroup,
|
||||
svg.unit[data-coalition="red"] text.unit-short-label {
|
||||
fill: var( --secondary-red-outline );
|
||||
}
|
||||
|
||||
svg.unit[data-coalition="red"] rect.unit-fuel {
|
||||
stroke: var( --secondary-red-outline );
|
||||
}
|
||||
|
||||
svg.unit[data-coalition="red"] rect.unit-fuel-level {
|
||||
fill: var( --primary-red );
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
svg.unit[data-is-selected="true"] .unit-spotlight {
|
||||
cx:50%;
|
||||
cy:50%;
|
||||
fill:var( --unit-marker-spotlight-fill );
|
||||
r: var( --unit-marker-spotlight-radius );
|
||||
}
|
||||
|
||||
svg.unit[data-is-selected="true"] rect.unit-selected-border,
|
||||
svg.unit[data-is-selected="true"] rect.unit-marker {
|
||||
fill:white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
svg.unit[data-pilot="ai"][data-is-selected="true"] rect.unit-fuel,
|
||||
svg.unit[data-pilot="ai"][data-is-selected="true"] rect.unit-fuel-level,
|
||||
svg.unit[data-pilot="ai"][data-is-selected="true"] circle.unit-ammo {
|
||||
display:block;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
svg.unit[data-pilot="ai"][data-is-selected="true"][data-has-low-fuel="true"] rect.unit-fuel,
|
||||
svg.unit[data-pilot="ai"][data-is-selected="true"][data-has-low-fuel="true"] rect.unit-fuel-level {
|
||||
animation: pulse 1.5s linear infinite;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
svg.unit[data-coalition="blue"][data-is-selected="true"] text.unit-short-label,
|
||||
svg.unit[data-coalition="blue"][data-has-fox-1="true"] circle.unit-ammo-fox-1,
|
||||
svg.unit[data-coalition="blue"][data-has-fox-2="true"] circle.unit-ammo-fox-2,
|
||||
svg.unit[data-coalition="blue"][data-has-fox-3="true"] circle.unit-ammo-fox-3,
|
||||
svg.unit[data-coalition="blue"][data-has-other-ammo="true"] circle.unit-ammo-other {
|
||||
fill: var( --primary-blue );
|
||||
}
|
||||
|
||||
|
||||
svg.unit[data-coalition="red"][data-is-selected="true"] text.unit-short-label,
|
||||
svg.unit[data-coalition="red"][data-has-fox-1="true"] circle.unit-ammo-fox-1,
|
||||
svg.unit[data-coalition="red"][data-has-fox-2="true"] circle.unit-ammo-fox-2,
|
||||
svg.unit[data-coalition="red"][data-has-fox-3="true"] circle.unit-ammo-fox-3,
|
||||
svg.unit[data-coalition="red"][data-has-other-ammo="true"] circle.unit-ammo-other {
|
||||
fill: var( --primary-red );
|
||||
}
|
||||
|
||||
|
||||
/* */
|
||||
}
|
||||
@ -75,22 +75,80 @@
|
||||
|
||||
<div class="example">
|
||||
|
||||
<nav>
|
||||
<div class="ol-select">
|
||||
<div class="ol-select-value">Something a bit longer is selected</div>
|
||||
<ul class="ol-select-options">
|
||||
<li>
|
||||
<button>Option A</button>
|
||||
</li>
|
||||
<li>
|
||||
<button>Option B</button>
|
||||
</li>
|
||||
<li class="hr"></li>
|
||||
<li>
|
||||
<button>Option C</button>
|
||||
</li>
|
||||
</ul>
|
||||
<nav id="primary-toolbar" class="ol-panel">
|
||||
<div id="app-icon">
|
||||
(I)
|
||||
</div>
|
||||
<div id="map-type" class="ol-select">
|
||||
<div class="ol-select-value">ArcGIS Satellite</div>
|
||||
<div class="ol-select-options">
|
||||
<div>
|
||||
<button>ArcGIS Satellite</button>
|
||||
</div>
|
||||
<div>
|
||||
<button>USGS Topographic</button>
|
||||
</div>
|
||||
<div>
|
||||
<button>OpenStreet Map</button>
|
||||
</div>
|
||||
<div>
|
||||
<button>OPENVKarte</button>
|
||||
</div>
|
||||
<div>
|
||||
<button>ESRI.Delorme</button>
|
||||
</div>
|
||||
<div>
|
||||
<button>CyclOSM</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ol-select">
|
||||
<div class="ol-select-value">Caucasus</div>
|
||||
<div class="ol-select-options">
|
||||
<div>
|
||||
<button>Caucasus</button>
|
||||
</div>
|
||||
<div>
|
||||
<button>Nevada</button>
|
||||
</div>
|
||||
<div>
|
||||
<button>Syria</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ol-group">
|
||||
<button>A</button>
|
||||
<button>B</button>
|
||||
<button>C</button>
|
||||
</div>
|
||||
|
||||
<div class="ol-group ol-group-checkbox">
|
||||
|
||||
<div class="ol-checkbox">
|
||||
<div class="ol-checkbox-input">
|
||||
<input id="checkbox-1" type="checkbox" />
|
||||
</div>
|
||||
<label for="checkbox-1">My label</label>
|
||||
</div>
|
||||
|
||||
<div class="ol-checkbox">
|
||||
<div class="ol-checkbox-input">
|
||||
<input id="checkbox-2" type="checkbox" />
|
||||
</div>
|
||||
<label for="checkbox-2">My label</label>
|
||||
</div>
|
||||
|
||||
<div class="ol-checkbox">
|
||||
<div class="ol-checkbox-input">
|
||||
<input id="checkbox-3" type="checkbox" />
|
||||
</div>
|
||||
<label for="checkbox-3">My label</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
@ -1494,6 +1552,29 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="content-header">Button group</div>
|
||||
|
||||
<div class="content-body">
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="ol-panel">
|
||||
<div class="ol-button-group">
|
||||
<button>A</button>
|
||||
<button>B</button>
|
||||
<button>C</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user