Fix cadastral layer controls and WMS preview

wwwroot/css/app.css

@@ -124,6 +124,28 @@ input[type="checkbox"] {
     color: var(--ink);
 }
 
+.toolbar-actions,
+.layer-button {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+}
+
+.toolbar-actions {
+    flex: 0 0 auto;
+}
+
+.layer-button.is-active {
+    background: #ccebe3;
+    color: var(--accent-strong);
+}
+
+.layer-symbol {
+    width: 20px;
+    height: 20px;
+    background: url("../lib/leaflet/images/layers.png") center / contain no-repeat;
+}
+
 .map-search {
     position: absolute;
     top: 72px;
@@ -150,6 +172,73 @@ input[type="checkbox"] {
     transform: translateY(0);
 }
 
+.map-layer-panel {
+    position: absolute;
+    top: 72px;
+    right: 12px;
+    z-index: 940;
+    display: grid;
+    width: min(320px, calc(100% - 24px));
+    max-height: calc(100% - 152px);
+    overflow-y: auto;
+    border: 1px solid var(--line);
+    border-radius: 8px;
+    padding: 9px;
+    background: rgba(255, 255, 255, 0.98);
+    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.22);
+}
+
+.map-layer-panel > header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    padding: 0 0 7px 4px;
+    border-bottom: 1px solid var(--line);
+}
+
+.layer-panel-close {
+    width: 36px;
+    min-width: 36px;
+    min-height: 34px;
+    padding: 0;
+    background: #e9eef0;
+    color: var(--ink);
+    font-size: 23px;
+}
+
+.map-layer-option {
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    min-height: 45px;
+    padding: 6px 4px;
+    border-bottom: 1px solid #e5eaed;
+}
+
+.map-layer-option input {
+    flex: 0 0 auto;
+    width: 19px;
+    height: 19px;
+}
+
+.map-layer-option span {
+    display: grid;
+    gap: 2px;
+}
+
+.map-layer-option small {
+    color: var(--muted);
+    font-size: 10px;
+    font-weight: 600;
+}
+
+.layer-panel-actions {
+    display: grid;
+    gap: 7px;
+    padding-top: 9px;
+}
+
 .gps-overlay {
     position: absolute;
     top: 72px;
@@ -384,6 +473,68 @@ label {
     pointer-events: none;
 }
 
+.wms-preview[hidden] {
+    display: none;
+}
+
+.wms-preview {
+    position: absolute;
+    inset: 0;
+    z-index: 1400;
+    display: grid;
+    place-items: center;
+    padding: 16px;
+    background: rgba(15, 22, 27, 0.72);
+}
+
+.wms-preview-dialog {
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr);
+    width: min(980px, 100%);
+    height: min(820px, 100%);
+    overflow: hidden;
+    border-radius: 8px;
+    background: #fff;
+    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.34);
+}
+
+.wms-preview-dialog > header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 11px 12px;
+    border-bottom: 1px solid var(--line);
+}
+
+.wms-preview-dialog > header div {
+    display: grid;
+    gap: 2px;
+}
+
+.wms-preview-dialog > header small {
+    color: var(--muted);
+    font-size: 10px;
+}
+
+.wms-preview-body {
+    display: grid;
+    min-height: 0;
+    place-items: center;
+    overflow: auto;
+    padding: 12px;
+    background: #eef2f3;
+    color: var(--muted);
+}
+
+.wms-preview-body img {
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    background: #fff;
+}
+
 .bottom-tabs {
     position: absolute;
     right: 0;
@@ -462,6 +613,13 @@ footer {
         right: 8px;
     }
 
+    .map-layer-panel {
+        top: 68px;
+        right: 8px;
+        width: min(320px, calc(100% - 16px));
+        max-height: calc(100% - 144px);
+    }
+
     .tool-sheet {
         top: 10%;
         bottom: var(--nav-height);
@@ -504,6 +662,10 @@ footer {
     .bottom-tabs button {
         font-size: 11px;
     }
+
+    .wms-preview {
+        padding: 8px;
+    }
 }
 
 @media (max-width: 380px) {