diff --git a/client/public/stylesheets/olympus.css b/client/public/stylesheets/olympus.css index 24aa5e9e..273ccd77 100644 --- a/client/public/stylesheets/olympus.css +++ b/client/public/stylesheets/olympus.css @@ -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 ); -} - - -/* */ \ No newline at end of file +} \ No newline at end of file diff --git a/client/public/uikit.html b/client/public/uikit.html index 23c42191..d6bcb442 100644 --- a/client/public/uikit.html +++ b/client/public/uikit.html @@ -75,22 +75,80 @@
-
+ +
+ +
Button group
+ +
+ +
+ +
+
+ + + +
+
+ +
+ + +
+ +