style: layers

Author: vanaigr

src/index.css

@@ -74,9 +74,32 @@ body {
     min-height: 5rem;
     display: flex;
     flex-direction: column;
-    & > form {
+    & > * {
         display: flex;
         flex-direction: column;
+        gap: 1rem;
+    }
+}
+
+.layer-inputs {
+    display: flex;
+    & > .layer {
+        flex-grow: 1;
+        text-align: center;
+        padding: 0.5rem 1rem;
+        background: #80808010;
+        & > input { display: none; }
+        &:has(> input:checked) {
+            background: #80808020;
+        }
+    }
+    & > .layer:first-child {
+        border-top-left-radius: 0.5rem;
+        border-bottom-left-radius: 0.5rem;
+    }
+    & > .layer:last-child {
+        border-top-right-radius: 0.5rem;
+        border-bottom-right-radius: 0.5rem;
     }
 }
 

src/index.ts

@@ -537,17 +537,22 @@ function showRegion(regionName: RegionKey, region: Region, pos?: [number, number
         layerEl.innerHTML = ''
 
         const form = document.createElement('form')
+
+        const layers = document.createElement('div')
+        layers.classList.add('layer-inputs')
         for(const l of layersArr) {
             const cont = document.createElement('label')
+            cont.classList.add('layer')
             const input = document.createElement('input')
             input.setAttribute('type', 'radio')
             if(l == curLayer) input.setAttribute('checked', '')
             input.setAttribute('name', 'layer')
             input.setAttribute('value', '' + l)
             input.onchange = () => setLayer(l)
             cont.append(input, document.createTextNode('' + (l === undefined ? '<none>' : l)))
-            form.append(cont)
+            layers.append(cont)
         }
+        form.append(layers)
 
         {
             const cont = document.createElement('label')