ol-wfst 5.0.0 → 5.1.0

package/dist/css/ol-wfst.css

@@ -1,61 +1,54 @@
-:root {
+.ol-wfst--map {
   --ol-subtle-background-color: transparent;
 }
-
-.ol-zoom {
+.ol-wfst--map .ol-control button {
+  cursor: pointer;
+}
+.ol-wfst--map .ol-control.ol-zoom {
   top: inherit;
   left: inherit;
   bottom: 5em;
   right: 0.5em;
 }
-
-.ol-wfst--input-field-container {
-  display: inline-block;
-  width: 49%;
-  padding: 5px;
-  margin-bottom: 10px;
+.ol-wfst--map .ol-control.ol-wfst--fullscreen {
+  top: auto;
+  left: auto;
+  right: 0.5em;
+  bottom: 18px;
 }
-
-.ol-wfst--input-field-label {
-  display: block;
-  font-weight: 500;
-  margin-bottom: 4px;
+.ol-wfst--map .ol-control.ol-wfst--fullscreen button {
+  background: #fff;
+  border-radius: 8px;
+  outline: 0;
+  width: 32px;
+  height: 32px;
+  display: -webkit-inline-flex;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
 }
-
-.ol-wfst--input-field-input {
-  width: 100%;
-  padding: 5px;
-  border: 1px solid black;
-  border-radius: 3px;
+.ol-wfst--map .ol-control.ol-wfst--fullscreen button svg {
+  width: 20px;
+  height: 20px;
+  pointer-events: none;
 }
-
-.ol-wfst--input-field-input.ol-wfst--input-multiple::-moz-placeholder {
-  font-style: italic;
-  color: #888;
+.ol-wfst--map .ol-control.ol-wfst--fullscreen button:hover, .ol-wfst--map .ol-control.ol-wfst--fullscreen button:active {
+  opacity: 0.95;
 }
-
-.ol-wfst--input-field-input.ol-wfst--input-multiple::placeholder {
-  font-style: italic;
-  color: #888;
+.ol-wfst--map .ol-control.ol-wfst--fullscreen button:active {
+  transform: translateY(1px);
 }
-
-.ol-wfst--edit-modal-notice {
-  padding: 10px 12px;
-  margin-bottom: 12px;
-  border: 1px solid #ffc107;
-  border-radius: 8px;
-  background: #fff8e1;
-  color: #6b5300;
-  font-size: 13px;
-  font-weight: 500;
+.ol-wfst--map .ol-box.ol-wfst--dragbox {
+  border: 2px dashed #ffc800;
+  background-color: rgba(255, 200, 0, 0.1);
+  border-radius: 0;
 }
-
-.ol-wfst--edit-button-cnt {
+.ol-wfst--map .ol-wfst--edit-button-cnt {
   display: inline-block;
   margin: 0 5px;
 }
-
-.ol-wfst--edit-button {
+.ol-wfst--map .ol-wfst--edit-button {
   outline: 0;
   padding: 8px;
   height: 38px;
@@ -67,24 +60,22 @@
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.42);
   cursor: pointer;
 }
-.ol-wfst--edit-button:hover {
+.ol-wfst--map .ol-wfst--edit-button:hover {
   background: #f5f5f5;
 }
-.ol-wfst--edit-button:active {
+.ol-wfst--map .ol-wfst--edit-button:active {
   background: rgb(98%, 98%, 98%);
   transform: translateY(1px);
 }
-.ol-wfst--edit-button svg {
+.ol-wfst--map .ol-wfst--edit-button svg {
   fill: #333;
   width: 20px;
   height: 20px;
 }
-
-.ol-wfst--extend-button-cnt {
+.ol-wfst--map .ol-wfst--extend-button-cnt {
   display: inline-block;
 }
-
-.ol-wfst--extend-button {
+.ol-wfst--map .ol-wfst--extend-button-cnt .ol-wfst--extend-button {
   outline: 0;
   display: -webkit-flex;
   display: flex;
@@ -99,20 +90,19 @@
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.42);
   cursor: pointer;
 }
-.ol-wfst--extend-button:hover {
+.ol-wfst--map .ol-wfst--extend-button-cnt .ol-wfst--extend-button:hover {
   background: #f5f5f5;
 }
-.ol-wfst--extend-button:active {
+.ol-wfst--map .ol-wfst--extend-button-cnt .ol-wfst--extend-button:active {
   background: rgb(98%, 98%, 98%);
   transform: translateY(1px);
 }
-.ol-wfst--extend-button svg {
+.ol-wfst--map .ol-wfst--extend-button-cnt .ol-wfst--extend-button svg {
   fill: #333;
   width: 16px;
   height: 16px;
 }
-
-.ol-wfst--changes-control {
+.ol-wfst--map .ol-wfst--changes-control {
   position: absolute;
   left: 50%;
   top: 0;
@@ -129,7 +119,6 @@
   padding: 12px 14px 14px;
   animation: ol-wfst--slide-down 0.28s ease-out;
 }
-
 @keyframes ol-wfst--slide-down {
   from {
     opacity: 0;
@@ -140,7 +129,7 @@
     transform: translate(-50%, 0);
   }
 }
-.ol-wfst--changes-control-el {
+.ol-wfst--map .ol-wfst--changes-control .ol-wfst--changes-control-el {
   display: -webkit-flex;
   display: flex;
   flex-wrap: wrap;
@@ -148,33 +137,7 @@
   align-items: center;
   gap: 8px;
 }
-.ol-wfst--changes-control-el button {
-  margin: 0;
-  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
-}
-.ol-wfst--changes-control-el button:hover {
-  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
-  filter: brightness(1.05);
-}
-.ol-wfst--changes-control-el button:active {
-  transform: translateY(-1px);
-  box-shadow: none;
-  filter: brightness(0.97);
-}
-.ol-wfst--changes-control-el .btn-danger-outline {
-  color: rgba(255, 255, 255, 0.9);
-  border: 1px solid rgba(255, 255, 255, 0.55);
-  background: transparent;
-}
-.ol-wfst--changes-control-el .btn-danger-outline:hover {
-  background: rgba(255, 255, 255, 0.15);
-  box-shadow: none;
-}
-.ol-wfst--changes-control-el .btn-danger-outline:active {
-  background: rgba(255, 255, 255, 0.25);
-}
-
-.ol-wfst--changes-control-id {
+.ol-wfst--map .ol-wfst--changes-control .ol-wfst--changes-control-el .ol-wfst--changes-control-id {
   flex-basis: 100%;
   display: -webkit-flex;
   display: flex;
@@ -190,13 +153,13 @@
   letter-spacing: 0.4px;
   color: #fff;
 }
-.ol-wfst--changes-control-id b {
+.ol-wfst--map .ol-wfst--changes-control .ol-wfst--changes-control-el .ol-wfst--changes-control-id b {
   display: -webkit-inline-flex;
   display: inline-flex;
   align-items: center;
   gap: 6px;
 }
-.ol-wfst--changes-control-id b::before {
+.ol-wfst--map .ol-wfst--changes-control .ol-wfst--changes-control-el .ol-wfst--changes-control-id b::before {
   content: "";
   width: 8px;
   height: 8px;
@@ -204,7 +167,18 @@
   background: currentColor;
   animation: ol-wfst--pulse 1.6s infinite;
 }
-.ol-wfst--changes-control-id i {
+@keyframes ol-wfst--pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
+  }
+}
+.ol-wfst--map .ol-wfst--changes-control .ol-wfst--changes-control-el .ol-wfst--changes-control-id i {
   font-style: normal;
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 11px;
@@ -219,110 +193,43 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
-@keyframes ol-wfst--pulse {
-  0% {
-    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
-  }
-  70% {
-    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
-  }
-  100% {
-    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
-  }
-}
-.ol-wfst--tools-control {
-  position: absolute;
-  top: 0.5em;
-  left: 0.5em;
-}
-
-.ol-control button {
-  cursor: pointer;
-}
-
-.ol-wfst--fullscreen {
-  top: auto;
-  left: auto;
-  right: 0.5em;
-  bottom: 18px;
-}
-.ol-wfst--fullscreen button {
-  background: #fff;
-  border-radius: 8px;
-  outline: 0;
-  width: 32px;
-  height: 32px;
-  display: -webkit-inline-flex;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-}
-.ol-wfst--fullscreen button svg {
-  width: 20px;
-  height: 20px;
-  pointer-events: none;
+.ol-wfst--map .ol-wfst--changes-control .ol-wfst--changes-control-el button {
+  margin: 0;
+  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
 }
-.ol-wfst--fullscreen button:hover, .ol-wfst--fullscreen button:active {
-  opacity: 0.95;
+.ol-wfst--map .ol-wfst--changes-control .ol-wfst--changes-control-el button:hover {
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
+  filter: brightness(1.05);
 }
-.ol-wfst--fullscreen button:active {
-  transform: translateY(1px);
+.ol-wfst--map .ol-wfst--changes-control .ol-wfst--changes-control-el button:active {
+  transform: translateY(-1px);
+  box-shadow: none;
+  filter: brightness(0.97);
 }
-
-.btn.btn-third {
+.ol-wfst--map .ol-wfst--changes-control .ol-wfst--changes-control-el button:first-of-type {
   margin-right: auto;
-  color: #d43f3a;
-}
-
-.ol-wfst--layer-not-visible {
-  opacity: 0.5 !important;
-  font-style: italic;
 }
-
-.wfst--layer-control {
-  position: relative;
-  min-width: 200px;
-  opacity: 0.7;
-  display: -webkit-flex;
-  display: flex;
-}
-.wfst--layer-control label {
-  width: 100%;
-  padding: 5px 10px;
-  display: -webkit-flex;
-  display: flex;
-  gap: 6px;
+.ol-wfst--map .ol-wfst--changes-control .ol-wfst--changes-control-el .btn-danger-outline {
+  color: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(255, 255, 255, 0.55);
+  background: transparent;
 }
-.wfst--layer-control.ol-wfst--visible-on {
-  opacity: 1;
+.ol-wfst--map .ol-wfst--changes-control .ol-wfst--changes-control-el .btn-danger-outline:hover {
+  background: rgba(255, 255, 255, 0.15);
+  box-shadow: none;
 }
-.wfst--layer-control.ol-wfst--selected-on {
-  background-color: rgba(94%, 87.3647058824%, 0%, 0.6) !important;
+.ol-wfst--map .ol-wfst--changes-control .ol-wfst--changes-control-el .btn-danger-outline:active {
+  background: rgba(255, 255, 255, 0.25);
 }
-.wfst--layer-control:hover, .wfst--layer-control:active {
-  background-color: #f5f5f5;
+.ol-wfst--map .ol-wfst--tools-control {
+  position: absolute;
+  top: 0.5em;
+  left: 0.5em;
 }
-.wfst--layer-control input[type=radio] {
+.ol-wfst--map .ol-wfst--tools-control.ol-wfst--controls--hidden {
   display: none;
 }
-
-.wfst--tools-control--select-layers .wfst--tools-control--select-layers-title {
-  padding: 5px 10px;
-  font-weight: bold;
-  border-bottom: 1px solid rgba(169, 169, 169, 0.7333333333);
-  background-color: #dddddd;
-}
-.wfst--tools-control--select-layers .wfst--tools-control--select-layers-list {
-  max-height: 150px;
-  overflow-y: auto;
-}
-.wfst--tools-control--select-layers .wfst--layer-control:not(.ol-wfst--selected-on) label {
-  cursor: pointer;
-}
-
-.ol-wfst--tools-control-btn {
+.ol-wfst--map .ol-wfst--tools-control .ol-wfst--tools-control-btn {
   border-radius: 8px;
   outline: 0;
   width: 40px;
@@ -334,23 +241,22 @@
   border: 1px solid #c0c0c0;
   background-color: #fff;
 }
-.ol-wfst--tools-control-btn.wfst--active {
+.ol-wfst--map .ol-wfst--tools-control .ol-wfst--tools-control-btn.wfst--active {
   background-color: #ffed00 !important;
   opacity: 1;
 }
-.ol-wfst--tools-control-btn:hover, .ol-wfst--tools-control-btn:active {
+.ol-wfst--map .ol-wfst--tools-control .ol-wfst--tools-control-btn:hover, .ol-wfst--map .ol-wfst--tools-control .ol-wfst--tools-control-btn:active {
   background-color: #f5f5f5;
   opacity: 0.95;
 }
-.ol-wfst--tools-control-btn:active {
+.ol-wfst--map .ol-wfst--tools-control .ol-wfst--tools-control-btn:active {
   transform: translateY(1px);
 }
-.ol-wfst--tools-control-btn svg {
+.ol-wfst--map .ol-wfst--tools-control .ol-wfst--tools-control-btn svg {
   width: 20px;
   height: 20px;
 }
-
-.wfst--tools-control--head {
+.ol-wfst--map .ol-wfst--tools-control .wfst--tools-control--head {
   position: absolute;
   background: #dddddd;
   padding: 10px;
@@ -362,72 +268,51 @@
   pointer-events: auto;
   gap: 6px;
 }
-.wfst--tools-control--head label {
+.ol-wfst--map .ol-wfst--tools-control .wfst--tools-control--head label {
   cursor: pointer;
 }
-.wfst--tools-control--head > * {
+.ol-wfst--map .ol-wfst--tools-control .wfst--tools-control--head > * {
   display: -webkit-flex;
   display: flex;
 }
-
-.ol-wfst--layers-control {
-  font-size: 13px;
-  position: absolute;
-  left: 10px;
-  bottom: 10px;
-  pointer-events: auto;
-}
-.ol-wfst--layers-control .wfst--tools-control--select-layers {
-  border-radius: 8px;
-  border: 1px solid rgba(169, 169, 169, 0.7333333333);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.42);
-  background-color: #fff;
-  overflow: hidden;
-}
-
-.ol-wfst--tools-control-select-cnt {
+.ol-wfst--map .ol-wfst--tools-control .ol-wfst--tools-control-select-cnt {
   font-size: 0;
 }
-.ol-wfst--tools-control-select-cnt:not(:first-child) {
+.ol-wfst--map .ol-wfst--tools-control .ol-wfst--tools-control-select-cnt:not(:first-child) {
   margin-left: 6px;
 }
-
-.ol-wfst--tools-control-btn-select,
-.ol-wfst--tools-control-btn-select-box,
-.ol-wfst--tools-control-btn-select-freehand {
+.ol-wfst--map .ol-wfst--tools-control .ol-wfst--tools-control-btn-select,
+.ol-wfst--map .ol-wfst--tools-control .ol-wfst--tools-control-btn-select-box,
+.ol-wfst--map .ol-wfst--tools-control .ol-wfst--tools-control-btn-select-freehand {
   width: 34px;
   padding: 0;
   border-radius: 0;
 }
-
-.ol-wfst--tools-control-btn-select {
+.ol-wfst--map .ol-wfst--tools-control .ol-wfst--tools-control-btn-select {
   border-radius: 8px 0 0 8px;
 }
-.ol-wfst--tools-control-btn-select svg {
+.ol-wfst--map .ol-wfst--tools-control .ol-wfst--tools-control-btn-select svg {
   width: 11px;
   height: auto;
 }
-
-.ol-wfst--tools-control-btn-select-box {
+.ol-wfst--map .ol-wfst--tools-control .ol-wfst--tools-control-btn-select-box {
   border-left: 0;
 }
-
-.ol-wfst--tools-control-btn-select-freehand {
+.ol-wfst--map .ol-wfst--tools-control .ol-wfst--tools-control-btn-select-freehand {
   border-left: 0;
   border-radius: 0 8px 8px 0;
 }
-
-.ol-box.ol-wfst--dragbox {
-  border: 2px dashed #ffc800;
-  background-color: rgba(255, 200, 0, 0.1);
-  border-radius: 0;
+.ol-wfst--map .ol-wfst--tools-control .ol-wfst--tools-control-query-cnt .ol-wfst--tools-control-btn-query {
+  border-radius: 8px;
 }
-
-.ol-wfst--tools-control-btn-upload {
+.ol-wfst--map .ol-wfst--tools-control .ol-wfst--tools-control-query-cnt svg {
+  width: 16px;
+  height: 16px;
+}
+.ol-wfst--map .ol-wfst--tools-control .ol-wfst--tools-control-btn-upload {
   padding: 3px;
 }
-
-.wfst--tools-control--select-draw {
+.ol-wfst--map .ol-wfst--tools-control .wfst--tools-control--select-draw {
   outline: 0;
   border: 1px solid #c0c0c0;
   border-radius: 8px;
@@ -442,24 +327,105 @@
   border-left: 0;
   border-radius: 0 8px 8px 0;
 }
-
-.ol-wfst--tools-control-btn-draw {
+.ol-wfst--map .ol-wfst--tools-control .ol-wfst--tools-control-btn-draw {
   border-radius: 8px 0 0 8px;
   opacity: 0.7;
 }
-
-.draw-mode .wfst--tools-control--select-draw {
-  pointer-events: inherit;
+.ol-wfst--map .ol-wfst--tools-control #ol-wfst--upload {
+  display: none;
+  visibility: hidden;
+}
+.ol-wfst--map .ol-wfst--layers-control {
+  font-size: 13px;
+  position: absolute;
+  left: 10px;
+  bottom: 10px;
+  pointer-events: auto;
+}
+.ol-wfst--map .ol-wfst--layers-control .ol-wfst--layer-not-visible {
+  opacity: 0.5 !important;
+  font-style: italic;
+}
+.ol-wfst--map .ol-wfst--layers-control .ol-wfst--layer-control-visible {
+  display: inline-block;
+  position: relative;
+  z-index: 999;
+}
+.ol-wfst--map .ol-wfst--layers-control .ol-wfst--layer-control-visible svg {
+  width: 14px;
+  height: 14px;
+}
+.ol-wfst--map .ol-wfst--layers-control .ol-wfst--layer-control-visible .ol-wfst--layer-control-visible -btn {
+  opacity: 0.6;
+  cursor: pointer;
+}
+.ol-wfst--map .ol-wfst--layers-control .ol-wfst--layer-control-visible .ol-wfst--layer-control-visible -btn:hover {
+  opacity: 0.9;
+}
+.ol-wfst--map .ol-wfst--layers-control .wfst--tools-control--select-layers {
+  border-radius: 8px;
+  border: 1px solid rgba(169, 169, 169, 0.7333333333);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.42);
+  background-color: #fff;
+  overflow: hidden;
+}
+.ol-wfst--map .ol-wfst--layers-control .wfst--tools-control--select-layers .wfst--tools-control--select-layers-title {
+  padding: 5px 10px;
+  font-weight: bold;
+  border-bottom: 1px solid rgba(169, 169, 169, 0.7333333333);
+  background-color: #dddddd;
+}
+.ol-wfst--map .ol-wfst--layers-control .wfst--tools-control--select-layers .wfst--tools-control--select-layers-list {
+  max-height: 150px;
+  overflow-y: auto;
+}
+.ol-wfst--map .ol-wfst--layers-control .wfst--tools-control--select-layers .wfst--layer-control:not(.ol-wfst--selected-on) label {
+  cursor: pointer;
+}
+.ol-wfst--map .ol-wfst--layers-control .wfst--layer-control {
+  position: relative;
+  min-width: 200px;
+  opacity: 0.7;
+  display: -webkit-flex;
+  display: flex;
+}
+.ol-wfst--map .ol-wfst--layers-control .wfst--layer-control label {
+  width: 100%;
+  padding: 5px 10px;
+  display: -webkit-flex;
+  display: flex;
+  gap: 6px;
+}
+.ol-wfst--map .ol-wfst--layers-control .wfst--layer-control.ol-wfst--visible-on {
   opacity: 1;
-  background: #fffab5;
 }
-
-#ol-wfst--upload {
+.ol-wfst--map .ol-wfst--layers-control .wfst--layer-control.ol-wfst--selected-on {
+  background-color: rgba(94%, 87.3647058824%, 0%, 0.6) !important;
+}
+.ol-wfst--map .ol-wfst--layers-control .wfst--layer-control:hover, .ol-wfst--map .ol-wfst--layers-control .wfst--layer-control:active {
+  background-color: #f5f5f5;
+}
+.ol-wfst--map .ol-wfst--layers-control .wfst--layer-control input[type=radio] {
   display: none;
-  visibility: hidden;
 }
-
-.ol-wfst--tools-control--loading {
+.ol-wfst--map .ol-wfst--layers-control .ol-wfst--visible-btn-on {
+  display: none;
+}
+.ol-wfst--map .ol-wfst--layers-control .ol-wfst--visible-on .ol-wfst--visible-btn-on {
+  display: block;
+}
+.ol-wfst--map .ol-wfst--layers-control .ol-wfst--visible-on .ol-wfst--visible-btn-off {
+  display: none;
+}
+.ol-wfst--map .ol-wfst--layers-control .ol-wfst--visible-btn-off {
+  display: block;
+}
+.ol-wfst--map .draw-mode .wfst--tools-control--select-draw {
+  pointer-events: inherit;
+  opacity: 1;
+  background: #fffab5;
+}
+.ol-wfst--map .ol-wfst--tools-control--loading {
   display: none;
   position: absolute;
   top: -10px;
@@ -470,8 +436,7 @@
   border-radius: 4px;
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
 }
-
-.ol-wfst--tools-control--loading::before {
+.ol-wfst--map .ol-wfst--tools-control--loading::before {
   content: "";
   position: absolute;
   top: 0;
@@ -482,7 +447,6 @@
   border-radius: inherit;
   animation: ol-wfst-loading-sweep 1.1s ease-in-out infinite;
 }
-
 @keyframes ol-wfst-loading-sweep {
   0% {
     transform: translateX(-100%);
@@ -491,54 +455,10 @@
     transform: translateX(300%);
   }
 }
-.ol-wfst--tools-control--loading.ol-wfst--tools-control--loading-show {
+.ol-wfst--map .ol-wfst--tools-control--loading.ol-wfst--tools-control--loading-show {
   display: block;
 }
-
-.ol-wfst--tools-control-visible {
-  display: inline-block;
-  position: relative;
-  z-index: 999;
-}
-
-.ol-wfst--tools-control-visible svg {
-  width: 14px;
-  height: 14px;
-}
-
-.ol-wfst--tools-control-visible-btn {
-  opacity: 0.6;
-  cursor: pointer;
-}
-
-.ol-wfst--tools-control-visible-btn:hover {
-  opacity: 0.9;
-}
-
-.ol-wfst--visible-btn-on {
-  display: none;
-}
-
-.ol-wfst--visible-on .ol-wfst--visible-btn-on {
-  display: block;
-}
-.ol-wfst--visible-on .ol-wfst--visible-btn-off {
-  display: none;
-}
-
-.ol-wfst--visible-btn-off {
-  display: block;
-}
-
-.ol-wfst--tools-control-query-cnt .ol-wfst--tools-control-btn-query {
-  border-radius: 8px;
-}
-.ol-wfst--tools-control-query-cnt svg {
-  width: 16px;
-  height: 16px;
-}
-
-.ol-wfst--query-popup {
+.ol-wfst--map .ol-wfst--query-popup {
   position: relative;
   width: 260px;
   max-width: 280px;
@@ -550,8 +470,7 @@
   color: #333;
   overflow: hidden;
 }
-
-.ol-wfst--query-popup-head {
+.ol-wfst--map .ol-wfst--query-popup .ol-wfst--query-popup-head {
   display: -webkit-flex;
   display: flex;
   align-items: center;
@@ -560,13 +479,11 @@
   background: #f2f2f2;
   border-bottom: 1px solid #d9d9d9;
 }
-
-.ol-wfst--query-popup-title {
+.ol-wfst--map .ol-wfst--query-popup .ol-wfst--query-popup-title {
   font-weight: 600;
   font-size: 12px;
 }
-
-.ol-wfst--query-popup-close {
+.ol-wfst--map .ol-wfst--query-popup .ol-wfst--query-popup-close {
   outline: 0;
   border: 0;
   background: transparent;
@@ -576,11 +493,10 @@
   color: #555;
   padding: 0 2px;
 }
-.ol-wfst--query-popup-close:hover {
+.ol-wfst--map .ol-wfst--query-popup .ol-wfst--query-popup-close:hover {
   color: #000;
 }
-
-.ol-wfst--query-popup-subtitle {
+.ol-wfst--map .ol-wfst--query-popup .ol-wfst--query-popup-subtitle {
   display: -webkit-flex;
   display: flex;
   align-items: center;
@@ -589,10 +505,10 @@
   padding: 6px 10px;
   border-bottom: 1px solid #efefef;
 }
-.ol-wfst--query-popup-subtitle b {
+.ol-wfst--map .ol-wfst--query-popup .ol-wfst--query-popup-subtitle b {
   font-weight: 600;
 }
-.ol-wfst--query-popup-subtitle i {
+.ol-wfst--map .ol-wfst--query-popup .ol-wfst--query-popup-subtitle i {
   font-style: normal;
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 11px;
@@ -602,33 +518,155 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
-.ol-wfst--query-popup-body {
+.ol-wfst--map .ol-wfst--query-popup .ol-wfst--query-popup-body {
   max-height: 220px;
   overflow-y: auto;
   padding: 4px 0;
 }
-
-.ol-wfst--query-popup-row {
+.ol-wfst--map .ol-wfst--query-popup .ol-wfst--query-popup-row {
   display: -webkit-flex;
   display: flex;
   gap: 8px;
   padding: 3px 10px;
   word-break: break-word;
 }
-.ol-wfst--query-popup-row:nth-child(odd) {
+.ol-wfst--map .ol-wfst--query-popup .ol-wfst--query-popup-row:nth-child(odd) {
   background: #fafafa;
 }
-
-.ol-wfst--query-popup-key {
+.ol-wfst--map .ol-wfst--query-popup .ol-wfst--query-popup-key {
   flex: 0 0 35%;
   font-weight: 600;
   color: #555;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-
-.ol-wfst--query-popup-value {
+.ol-wfst--map .ol-wfst--query-popup .ol-wfst--query-popup-value {
   flex: 1;
   color: #222;
+}
+
+.modal .ol-wfst--edit-modal-notice {
+  display: -webkit-flex;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  margin-bottom: 12px;
+  border: 1px solid #ffc107;
+  border-radius: 8px;
+  background: #fff8e1;
+  color: #6b5300;
+  font-size: 13px;
+  font-weight: 500;
+}
+.modal .ol-wfst--edit-modal-notice-txt {
+  flex: 1;
+}
+.modal .ol-wfst--edit-modal-toolbar-btn {
+  outline: 0;
+  display: -webkit-inline-flex;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  padding: 0;
+  width: 26px;
+  height: 26px;
+  background: #ffffff;
+  border: 1px solid #b3b3b3;
+  border-radius: 8px;
+  cursor: pointer;
+}
+.modal .ol-wfst--edit-modal-toolbar-btn:hover {
+  background: #f5f5f5;
+}
+.modal .ol-wfst--edit-modal-toolbar-btn:active {
+  background: rgb(98%, 98%, 98%);
+  transform: translateY(1px);
+}
+.modal .ol-wfst--edit-modal-toolbar-btn svg {
+  width: 16px;
+  height: 16px;
+}
+.modal .modal-dialog.ol-wfst--edit-table-modal {
+  --bs-modal-width: min(90vw, 1400px);
+  width: min(90vw, 1400px);
+  max-width: min(90vw, 1400px);
+}
+.modal .modal-dialog .btn-danger:first-child {
+  margin-right: auto;
+}
+.modal .ol-wfst--edit-table-wrap {
+  overflow-x: auto;
+  overflow-y: auto;
+  max-height: 60vh;
+  border: 1px solid #dddddd;
+  border-radius: 8px;
+}
+.modal .ol-wfst--edit-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.modal .ol-wfst--edit-table th,
+.modal .ol-wfst--edit-table td {
+  border: 1px solid #dddddd;
+  padding: 4px 6px;
+  text-align: left;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+.modal .ol-wfst--edit-table th {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: #f2f2f2;
+  font-weight: 600;
+}
+.modal .ol-wfst--edit-table .ol-wfst--input-field-input {
+  min-width: 120px;
+  padding: 2px 4px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+.modal .ol-wfst--edit-table .ol-wfst--input-field-input:focus {
+  outline: 1px solid #86b7fe;
+  background: #f8fbff;
+}
+.modal .ol-wfst--edit-table-fid,
+.modal .ol-wfst--edit-table-geom {
+  font-weight: 600;
+  color: #555;
+}
+.modal .ol-wfst--edit-table-geom {
+  font-style: italic;
+  font-size: 12px;
+  color: #777;
+}
+.modal .ol-wfst--input-field-container {
+  display: inline-block;
+  width: 49%;
+  padding: 5px;
+  margin-bottom: 10px;
+}
+.modal .ol-wfst--input-field-label {
+  display: block;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+.modal .ol-wfst--input-field-input {
+  width: 100%;
+  padding: 5px;
+  border: 1px solid black;
+  border-radius: 3px;
+}
+.modal .ol-wfst--input-field-input.ol-wfst--input-multiple::-moz-placeholder {
+  font-style: italic;
+  color: #888;
+}
+.modal .ol-wfst--input-field-input.ol-wfst--input-multiple::placeholder {
+  font-style: italic;
+  color: #888;
 }