diff --git a/client/public/stylesheets/olympus.css b/client/public/stylesheets/olympus.css index 9849cf36..24aa5e9e 100644 --- a/client/public/stylesheets/olympus.css +++ b/client/public/stylesheets/olympus.css @@ -26,37 +26,6 @@ --font-weight-bolder : 600; - /* Generic marker settings */ - --unit-marker-border-radius: 3px; - --unit-marker-centre-x: calc( var( --unit-marker-width ) / 2 ); - --unit-marker-centre-y: calc( var( --unit-marker-height ) / 2 ); - --unit-marker-font-size: 12px; - --unit-marker-font-weight: bold; - --unit-marker-height: 100px; - --unit-marker-spotlight-fill: var( --secondary-yellow ); - --unit-marker-spotlight-opacity: 68%; - --unit-marker-spotlight-radius: 28px; - --unit-marker-stroke-width: 2px; - --unit-marker-width: 150px; - - --unit-marker-hotgroup-height: 12px; - --unit-marker-hotgroup-width: var( --unit-marker-hotgroup-height ); - - - /* Air units' marker settings */ - --unit-marker-air-ammo-gap: calc( 2px + var( --unit-marker-stroke-width ) ); - --unit-marker-air-ammo-radius: 3px; - --unit-marker-air-ammo-y: calc( var( --unit-marker-height ) - 8px ); - --unit-marker-air-fuel-height: 6px; - --unit-marker-air-fuel-width: 36px; - --unit-marker-air-fuel-x: calc( var( --unit-marker-centre-x ) - ( var( --unit-marker-air-fuel-width ) / 2 ) ); - --unit-marker-air-fuel-y: calc( var( --unit-marker-height ) - 21px ); - --unit-marker-air-height: 28px; - --unit-marker-air-vvi-rotation-offset: -180deg; - --unit-marker-air-width: var( --unit-marker-air-height ); - --unit-marker-air-label-x: calc( var( --unit-marker-centre-x ) - ( var( --unit-marker-air-width ) / 2 ) + ( var( --unit-marker-stroke-width ) / 2 ) ); - --unit-marker-air-label-y: calc( var( --unit-marker-centre-y ) - ( var( --unit-marker-air-height ) / 2 ) + ( var( --unit-marker-stroke-width ) / 2 ) ); - } @@ -236,6 +205,10 @@ nav .ol-select .ol-select-options li button { + + + +/* svg.unit { height: var( --unit-marker-height ); width: var( --unit-marker-width ); @@ -373,7 +346,6 @@ svg.unit .unit-summary text { -/*** Default style **/ svg.unit[data-coalition="blue"] rect.unit-marker { fill: var( --primary-blue ); @@ -414,8 +386,6 @@ svg.unit[data-coalition="red"] rect.unit-fuel-level { -/*** Selected style **/ - svg.unit[data-is-selected="true"] .unit-spotlight { cx:50%; @@ -465,4 +435,7 @@ 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 ); -} \ No newline at end of file +} + + +/* */ \ No newline at end of file diff --git a/client/public/stylesheets/style.css b/client/public/stylesheets/style.css index 610963b3..195f2a91 100644 --- a/client/public/stylesheets/style.css +++ b/client/public/stylesheets/style.css @@ -2,7 +2,6 @@ @import url("slider.css"); @import url("dropdown.css"); -@import url("selectionwheel.css"); @import url("contextmenu.css"); @import url("unitmarker.css"); diff --git a/client/public/stylesheets/uikit.css b/client/public/stylesheets/uikit.css index 44052611..45854c00 100644 --- a/client/public/stylesheets/uikit.css +++ b/client/public/stylesheets/uikit.css @@ -46,6 +46,7 @@ section { align-items: center; display:flex; flex-direction: column; + min-width: 100px; } .caption { @@ -76,11 +77,11 @@ section { #overlaying-planes { background-color:#99ccff; - padding:20px; + padding:60px; position:relative; } -#overlaying-planes svg:nth-of-type(2) { +#overlaying-planes .unit:nth-of-type(2) { position: absolute; left: 40px; top: 10px; diff --git a/client/public/stylesheets/units.css b/client/public/stylesheets/units.css new file mode 100644 index 00000000..91189a18 --- /dev/null +++ b/client/public/stylesheets/units.css @@ -0,0 +1,255 @@ +:root { + /* Generic marker settings */ + --unit-marker-centre-x: calc( var( --unit-marker-width ) / 2 ); + --unit-marker-centre-y: calc( var( --unit-marker-height ) / 2 ); + + --unit-marker-hotgroup-height: 10px; + --unit-marker-hotgroup-width: var( --unit-marker-hotgroup-height ); + + + /* Air units' marker settings */ + --unit-marker-air-label-x: calc( var( --unit-marker-centre-x ) - ( var( --unit-marker-air-width ) / 2 ) + ( var( --unit-marker-stroke-width ) / 2 ) ); + --unit-marker-air-label-y: calc( var( --unit-marker-centre-y ) - ( var( --unit-marker-air-height ) / 2 ) + ( var( --unit-marker-stroke-width ) / 2 ) ); +} + + +div.unit { + align-items: center; + cursor:pointer; + display:flex; + justify-content: center; + position:relative; +} + +div.unit .unit-selected-spotlight { + background-color: var( --unit-marker-spotlight-fill ); + border-radius: 50%; + display:none; + padding: var( --unit-marker-spotlight-radius ); + position: absolute; +} + + +div.unit .unit-vvi { + align-self: center; + background:black; + display:flex; + justify-self: center; + transform-origin: bottom; + translate:0 -50%; + padding-bottom: calc( ( var( --unit-marker-air-width ) / 2 ) + var( --unit-marker-stroke-width ) ); + position:absolute; + width: var( --unit-marker-air-vvi-width ); +} + + +div.unit .unit-hotgroup { + align-content: center; + background-color: black; + border-radius: var( --border-radius-xs ); + display:none; + height: var( --unit-marker-hotgroup-height ); + justify-content: center; + position:absolute; + transform: rotate( -45deg ); + translate:0 -24px; + width: var( --unit-marker-hotgroup-width ); +} + +div.unit .unit-hotgroup-id { + background-color: transparent; + color:white; + font-size: 9px; + font-weight: bolder; + transform:rotate( 45deg ); +} + +div.unit .unit-marker-border { + background-color: white; + border-radius: var( --border-radius-sm ); + display:none; + height: calc( var( --unit-marker-air-height ) + ( var( --unit-marker-label-border-width ) * 2 ) ); + position:absolute; + width: calc( var( --unit-marker-air-width ) + ( var( --unit-marker-label-border-width ) * 2 ) ); +} + +div.unit:hover .unit-marker-border, +div.unit[data-is-selected="true"] .unit-marker-border { + display:block; +} + +div.unit svg { + border-radius: var( --border-radius-sm ); + height: var( --unit-marker-height ); + width: var( --unit-marker-width ); + z-index:1; +} + +div.unit svg 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); +} + +div.unit .unit-short-label { + font-size: var(--unit-marker-font-size); + font-weight: var(--unit-marker-font-weight); + position: absolute; + z-index:10; +} + + +div.unit .unit-fuel { + background:white; + border: var( --unit-marker-air-fuel-border-width ) solid var( --secondary-dark-steel ); + border-radius: var( --border-radius-sm ); + display:none; + height: var( --unit-marker-air-fuel-height ); + position: absolute; + translate:var( --unit-marker-air-fuel-x ) 20px; + width: var( --unit-marker-air-fuel-width ); +} + +div.unit .unit-fuel-level { + background-color: var( --secondary-light-grey ); + height:100%; + width:100%; +} + + +div.unit .unit-ammo { + column-gap: var( --unit-marker-air-ammo-spacing ); + display:none; + height:fit-content; + position:absolute; + translate:var( --unit-marker-air-ammo-x ) var( --unit-marker-air-ammo-y ); + width:fit-content; +} + +div.unit .unit-ammo > * { + background-color: white; + border: var( --unit-marker-air-ammo-border-width ) solid var( --secondary-dark-steel ); + border-radius: 50%; + padding: var( --unit-marker-air-ammo-radius ); +} + + +div.unit .unit-summary { + column-gap: 6px; + color:white; + display:flex; + flex-wrap: wrap; + font-size:11px; + font-weight: bold; + justify-content: right; + paint-order: stroke fill; + position:absolute; + row-gap: 1px; + text-shadow: + -1px -1px 0 #000, + 1px -1px 0 #000, + -1px 1px 0 #000, + 1px 1px 0 #000; + translate: -55px 0; + width:fit-content; + z-index:20; +} + +div.unit .unit-summary > * { + padding:1px; +} + +div.unit .unit-summary .unit-callsign { + color:white; + overflow: hidden; + text-align: right; + transform-origin: right; + white-space: nowrap; + width: 80px; +} + +div.unit .unit-summary .unit-callsign:hover { + direction: rtl; + overflow:visible; +} + + + +div.unit[data-pilot="ai"]:hover .unit-ammo, +div.unit[data-pilot="ai"]:hover .unit-fuel { + display:flex; +} + +div.unit[data-is-in-hotgroup="true"] .unit-hotgroup, +div.unit[data-pilot="ai"][data-is-selected="true"] .unit-ammo, +div.unit[data-pilot="ai"][data-is-selected="true"] .unit-fuel, +div.unit[data-is-selected="true"] .unit-selected-spotlight { + display:flex; +} + +div.unit[data-has-fox-1="true"] .unit-ammo-fox-1, +div.unit[data-has-fox-2="true"] .unit-ammo-fox-2, +div.unit[data-has-fox-3="true"] .unit-ammo-fox-3, +div.unit[data-has-other-ammo="true"] .unit-ammo-other { + background-color: var( --primary-grey ); +} + + +div.unit[data-coalition="blue"] rect.unit-marker { + fill:var( --primary-blue ); + stroke: var( --secondary-blue-outline ); +} + +div.unit[data-coalition="blue"][data-is-selected="true"] .unit-short-label { + color: var( --secondary-blue-text ); +} + +div.unit[data-coalition="blue"] .unit-fuel-level, +div.unit[data-coalition="blue"][data-has-fox-1="true"] .unit-ammo-fox-1, +div.unit[data-coalition="blue"][data-has-fox-2="true"] .unit-ammo-fox-2, +div.unit[data-coalition="blue"][data-has-fox-3="true"] .unit-ammo-fox-3, +div.unit[data-coalition="blue"][data-has-other-ammo="true"] .unit-ammo-other { + background-color: var( --primary-blue ); +} + + + +div.unit[data-coalition="red"] rect.unit-marker { + fill:var( --primary-red ); + stroke: var( --secondary-red-outline ); +} + +div.unit[data-coalition="red"][data-is-selected="true"] .unit-short-label { + color: var( --secondary-red-text ); +} + +div.unit[data-coalition="red"] .unit-fuel-level, +div.unit[data-coalition="red"][data-has-fox-1="true"] .unit-ammo-fox-1, +div.unit[data-coalition="red"][data-has-fox-2="true"] .unit-ammo-fox-2, +div.unit[data-coalition="red"][data-has-fox-3="true"] .unit-ammo-fox-3, +div.unit[data-coalition="red"][data-has-other-ammo="true"] .unit-ammo-other { + background-color: var( --primary-red ); +} + + +@keyframes pulse { + 50% { + opacity: 0; + } +} + +div.unit[data-pilot="ai"][data-has-low-fuel="true"] .unit-fuel { + animation: pulse 1.5s linear infinite; +} + + +div.unit[data-is-selected="true"] rect.unit-marker { + fill:white; +} diff --git a/client/public/themes/olympus/olympus.css b/client/public/themes/olympus/olympus.css new file mode 100644 index 00000000..cb900a26 --- /dev/null +++ b/client/public/themes/olympus/olympus.css @@ -0,0 +1,80 @@ +:root { + + /** Colours **/ + + /*** Coalition: neutral **/ + --primary-grey : #CFD9E8; + --secondary-neutral : #111111; + + /*** Coalition: blue **/ + --primary-blue : #247be2; + --secondary-blue-outline : #082e44; + --secondary-blue-text : #017DC1; + + /*** Coalition: red **/ + --primary-red : #ff5858; + --secondary-red-outline : #262222; + --secondary-red-text : #D42121; + + + --accent-green : #8bff63; + --accent-light-blue : #5ca7ff; + + --background-grey : #3d4651; + --background-offwhite : #f2f2f3; + --background-steel : #202831; + + --secondary-dark-steel : #181e25; + --secondary-gunmetal-grey : #2f2f2f; + --secondary-light-grey : #797e83; + --secondary-yellow : #ffd46893; + + --nav-text : #ECECEC; + + + /*** General border radii **/ + + --border-radius-xs : 2px; + --border-radius-sm : 5px; + --border-radius-md : 10px; + --border-radius-lg : 15px; + + + /*** Font stuff **/ + --font-weight-bolder : 600; + + + + /*** Unit marker settings ***/ + + + /*** All markers **/ + --unit-marker-border-radius: var( --border-radius-xs ); + --unit-marker-font-size: 12px; + --unit-marker-font-weight: bolder; + --unit-marker-height: 32px; + --unit-marker-label-border-width: 3px; + --unit-marker-spotlight-fill: var( --secondary-yellow ); + --unit-marker-spotlight-radius: 28px; + --unit-marker-stroke-width: 3px; + --unit-marker-width: 32px; + + + /* Air units' marker settings */ + --unit-marker-air-ammo-gap: calc( 2px + var( --unit-marker-stroke-width ) ); + --unit-marker-air-ammo-border-radius: 50%; + --unit-marker-air-ammo-border-width: 2px; + --unit-marker-air-ammo-radius: 2px; + --unit-marker-air-ammo-spacing: 2px; + --unit-marker-air-ammo-x:0px; + --unit-marker-air-ammo-y:28px; + --unit-marker-air-fuel-border-width: 2px; + --unit-marker-air-fuel-height: 6px; + --unit-marker-air-fuel-width: 36px; + --unit-marker-air-fuel-x:0px; + --unit-marker-air-fuel-y:20px; + --unit-marker-air-height: 28px; + --unit-marker-air-vvi-width: 4px; + --unit-marker-air-width: var( --unit-marker-air-height ); + +} \ No newline at end of file diff --git a/client/public/uikit.html b/client/public/uikit.html index 12d1ca8c..8bd4c6fa 100644 --- a/client/public/uikit.html +++ b/client/public/uikit.html @@ -2,7 +2,9 @@