@g1cloud/page-builder-editor 1.0.0-alpha.1 → 1.0.0-alpha.100

package/dist/style.css

@@ -1,173 +1,388 @@
-.pb-page {
-  margin: 0 auto;
-  margin-top: 20px;
-  background-position: 50% 50%;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-.pb-page .pb-section {
-  position: relative;
-  background-position: 50% 50%;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-color: #fff;
+@charset "UTF-8";
+.pb-editor {
+  --color-canvas-frame-bg: #aaa;
+  height: 100%;
 }
-.pb-page .pb-section .pb-block {
-  display: flex;
-  min-width: 1px;
-  position: relative;
-  background-position: 50% 50%;
-  background-repeat: no-repeat;
-  background-size: cover;
+.pb-editor .pb-menu {
   width: 100%;
 }
-.pb-page .pb-section .pb-block .pb-widget {
-  position: relative;
-  background-position: 50% 50%;
-  background-repeat: no-repeat;
-  background-size: cover;
-  width: 100%;
+.pb-editor .pb-menu .pb-toolbar {
+  margin: 0 -8px;
 }
-.pb-page .pb-section .pb-block .pb-widget .children {
-  position: absolute;
-  width: 100%;
+.pb-editor .pb-menu .pb-toolbar .pb-tool-button-group::after {
+  content: "";
+  margin: 0 8px;
+  height: 80%;
+  border-right: 1px solid var(--border-light);
+  align-self: center;
+}
+.pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button {
+  padding: 2px;
+  margin: 0 2px;
+}
+.pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .bs-clickable, .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .pb-part-add-modal .group .part, .pb-part-add-modal .group .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .part {
+  user-select: none;
+  cursor: pointer;
+}
+.pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .bs-clickable:hover, .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .pb-part-add-modal .group .part:hover, .pb-part-add-modal .group .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .part:hover {
+  filter: opacity(75%);
+}
+.pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .bs-clickable:active, .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .pb-part-add-modal .group .part:active, .pb-part-add-modal .group .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .part:active {
+  filter: opacity(50%);
+}
+.pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .bs-clickable.disabled, .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .pb-part-add-modal .group .disabled.part, .pb-part-add-modal .group .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .disabled.part {
+  filter: opacity(40%);
+}
+.pb-editor .pb-editor-body {
+  padding: 8px 0 0;
+  height: 1px;
+}
+.pb-editor .pb-editor-body .pb-canvas-wrapper {
+  background-color: var(--color-canvas-frame-bg);
+  border-top: 1px solid var(--color-canvas-frame-bg);
+  border-bottom: 1px solid var(--color-canvas-frame-bg);
+  flex-grow: 1;
+  min-width: 0;
+  width: 0;
   height: 100%;
+  padding: 20px;
+  outline: none;
+  overflow: auto;
 }
-.pb-page .pb-section .pb-block .pb-text-widget {
-  width: 100%;
-  height: fit-content;
+.pb-editor .pb-editor-body .pb-canvas {
+  display: flex;
+  flex-direction: row;
+  transform-origin: top left;
+  width: fit-content;
+  height: 100%;
+  margin: 0;
 }
-.pb-page .pb-section .pb-block .pb-text-widget .text {
-  color: #333;
+.pb-editor .pb-editor-body .pb-page-frame iframe.page-frame {
+  border: 0;
 }
-.pb-page .pb-section .pb-block .pb-text-widget.empty .text {
-  color: #999;
+.pb-editor .pb-editor-body .bs-tab-sheet .tab-bar .tabs {
+  padding-top: 0;
 }
-.pb-page .pb-section .pb-block .pb-image-widget {
-  width: 100%;
+.pb-editor .pb-editor-body .bs-horizontal-layout-resizer {
+  transform: scaleX(6);
 }
-.pb-page .pb-section .pb-block .pb-image-widget .image {
-  width: 100%;
+.pb-editor .pb-editor-body .bs-horizontal-layout-resizer .resize-line {
+  background-color: var(--color-canvas-frame-bg);
 }
-.pb-page .pb-section .pb-block .pb-image-widget .empty {
-  height: 100px;
-  background-color: #eee;
-  text-align: center;
+.pb-editor .pb-editor-body .pb-navigator {
+  position: relative;
+  height: 1px;
+  overflow-y: auto;
+  padding: 8px 0;
+  flex-grow: 1;
+  border: 1px solid var(--border-light);
+  border-right: 0 none;
+}
+.pb-editor .pb-editor-body .pb-navigator:focus {
+  outline: none;
 }
-.pb-page .pb-section .pb-block .pb-image-widget .empty span {
-  font-size: 40px;
-  color: #999;
-  line-height: 100px;
-  vertical-align: middle;
+.pb-editor .pb-editor-body .pb-sidebar {
+  width: 300px;
+  overflow: auto;
+  border: 1px solid var(--border-light);
+  border-left: 0 none;
 }
-.pb-page .pb-section .pb-block .pb-product-list-widget {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  align-items: center;
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties {
+  padding: 0;
 }
-.pb-page .pb-section .pb-block .pb-product-list-widget .product {
-  width: 95%;
-  margin: 0 auto;
-  padding-top: 8px;
-  padding-bottom: 8px;
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-title {
+  padding: 8px;
+  background-color: var(--blue-bg);
+  color: var(--blue);
+  font-weight: 600;
 }
-.pb-page .pb-section .pb-block .pb-product-list-widget img {
-  width: 100%;
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group:not(:empty) {
+  padding: 8px;
+  border-bottom: 1px solid var(--border-light);
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-title > label {
+  padding: 4px 0;
+  font-size: 90%;
+  font-weight: 600;
 }
-.pb-page .pb-section .pb-block .pb-product-list-widget .name {
-  margin-top: 8px;
-  font-size: 14px;
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor {
+  padding: 4px 0;
+  font-size: 0.9em;
 }
-.pb-page .pb-section .pb-block .pb-product-list-widget .price {
-  margin-top: 8px;
-  font-size: 14px;
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor .title {
+  padding: 0 0 8px 0;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor .title label {
+  min-width: 6em;
+  max-width: 6em;
+  padding-right: 0.5em;
   font-weight: bold;
 }
-.pb-page .pb-section .pb-block .pb-product-list-widget .empty {
-  height: 200px;
-  background-color: #eee;
-  text-align: center;
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor .sub-title label {
+  min-width: 6em;
+  max-width: 6em;
+  padding-right: 0.5em;
+  font-weight: 400;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor {
+  padding: 4px 0;
+  font-size: 0.9em;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor > .title {
+  padding: 0 0 8px 0;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor > .title > label {
+  min-width: 6em;
+  max-width: 6em;
+  padding-right: 0.5em;
+  font-weight: 600;
 }
-.pb-page .pb-section .pb-block .pb-product-list-widget .empty span {
-  font-size: 40px;
-  color: #999;
-  line-height: 200px;
-  vertical-align: middle;
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor:nth-child(n+2) {
+  margin-top: 4px;
 }
-.pb-page .pb-section .pb-block .pb-page .mobile .pb-product-list-widget .product-wrapper {
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-color .color {
   width: 50%;
 }
-.pb-page .pb-section .pb-block .pb-page .pc .pb-product-list-widget .product-wrapper {
-  width: 25%;
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-image button.select-button {
+  color: var(--white);
+  border: none;
+  padding: 4px 12px;
+  cursor: pointer;
+  line-height: 1;
+  width: 120px;
+  height: 26px;
+  background-color: var(--primary);
+  border-radius: 2px;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-image .input-area {
+  height: 24px;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-product button {
+  color: var(--white);
+  border: none;
+  padding: 4px 12px;
+  cursor: pointer;
+  line-height: 1;
+  width: 200px;
+  height: 26px;
+  background-color: var(--primary);
+  border-radius: 2px;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-product .input-area {
+  height: 24px;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-select .bs-select {
+  display: block;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-select .input-area {
+  height: 24px;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-text .bs-text-input {
+  display: block;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-text .input-area {
+  height: 24px;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-text .bs-text-input {
+  display: block;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-text .input-area {
+  height: 24px;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-html button {
+  color: var(--white);
+  border: none;
+  padding: 4px 12px;
+  cursor: pointer;
+  line-height: 1;
+  width: 100px;
+  height: 26px;
+  background-color: var(--primary);
+  border-radius: 2px;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-html .input-area {
+  height: 24px;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .color {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
-.pb-page .pb-section .pb-block .pb-login-widget {
-  height: 200px;
-  text-align: center;
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .color label {
+  display: inline-block;
+  width: 80px;
 }
-.pb-page .pb-section .pb-block .pb-login-widget h3 {
-  font-size: 32px;
-  font-weight: bold;
-  color: #ccc;
-  line-height: 200px;
-  vertical-align: middle;
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .color .bs-text-input {
+  flex-grow: 0;
+  width: 104px;
 }
-.pb-page .pb-section .pb-block .pb-editor {
-  outline: 1px dashed #ccc;
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .image label {
+  display: inline-block;
+  width: 80px;
 }
-.pb-page .pb-section .pb-block:hover:not(:has(.pb-widget:hover)) {
-  background-color: #f0f0f0;
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .image .bs-button.select-button {
+  width: 132px;
 }
-.pb-page .pb-section .pb-block.selected {
-  outline: 1px solid #8e44ad;
-  outline-offset: 1px;
-  z-index: 999;
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .image .url {
+  word-break: break-word !important;
+  word-wrap: break-word !important;
 }
-.pb-page .pb-section .pb-editor {
-  outline: 1px dashed #ccc;
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-border .color {
+  width: 50%;
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
-.pb-page .pb-section:hover:not(:has(.pb-block:hover)) {
-  background-color: #f0f0f0;
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-border .color .bs-text-input {
+  flex-grow: 1;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-border .corner-icon {
+  width: 1.1em;
+  height: 1.1em;
+  fill: #000;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-media button.select-button {
+  color: var(--white);
+  border: none;
+  padding: 4px 12px;
+  cursor: pointer;
+  line-height: 1;
+  width: 120px;
+  height: 26px;
+  background-color: var(--primary);
+  border-radius: 2px;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-media .input-area {
+  height: 24px;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-media .url {
+  word-break: break-word !important;
+  word-wrap: break-word !important;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-local-part .title {
+  font-weight: 600;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-local-part button {
+  color: var(--white);
+  border: none;
+  padding: 0 4px;
+  cursor: pointer;
+  line-height: 1;
+  height: 24px;
+  background-color: var(--primary);
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-local-part .input-area {
+  height: 24px;
+}
+.pb-editor .pb-editor-body .pb-color-picker {
+  display: inline-flex;
+  position: relative;
 }
-.pb-page .pb-section.selected {
-  outline: 1px solid #e67e22;
-  outline-offset: 1px;
-  z-index: 999;
+.pb-editor .pb-editor-body .pb-color-picker .buttons {
+  display: flex;
+  padding: 0;
 }
-.pb-page .pb-section.pb-section-static {
-  width: 100%;
+.pb-editor .pb-editor-body .pb-color-picker .buttons button {
+  width: 24px;
+  height: 24px;
   display: flex;
   justify-content: center;
   align-items: center;
-  pointer-events: none;
 }
-.pb-page .pb-section.pb-section-static:after {
-  content: "";
+.pb-editor .pb-editor-body .pb-color-picker .buttons button.none {
+  position: relative;
+  overflow: hidden;
+}
+.pb-editor .pb-editor-body .pb-color-picker .buttons button.none::after {
+  content: " ";
+  display: inline-block;
+  width: 100px;
+  height: 1px;
+  background: var(--red);
   position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.2);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(45deg);
 }
-.pb-page .pb-section-static .pb-widget {
-  outline: none;
+.pb-editor .pb-editor-body .pb-color-picker .buttons button.picker-button {
+  border: 1px solid var(--border);
 }
-.pb-page .pb-page-content.selected {
-  outline: 2px solid #4998f8;
-  outline-offset: 5px;
+.pb-editor .pb-editor-body .pb-color-picker .buttons button i {
+  font-size: 1.4rem;
 }
-.pb-page * {
-  box-sizing: border-box;
+.pb-editor .pb-editor-body .pb-color-picker .sketch-wrap {
+  width: 220px;
+  position: absolute;
+  z-index: 10;
+  left: -12px;
+  top: 24px;
+  white-space: break-spaces;
+  text-align: left;
+}
+.pb-part-add-modal .section-title {
+  font-weight: 700;
+}
+.pb-part-add-modal .group .part {
+  border: 1px solid var(--border-light);
+  border-radius: 4px;
+  padding: 8px 16px;
+  cursor: pointer;
+}
+.pb-html-editor-modal .preview {
+  width: 50%;
+}
+.pb-html-editor-modal .preview .content {
+  border: solid 1px var(--border);
 }
-.pb-viewer {
+.pb-html-editor-modal .preview .content iframe {
   width: 100%;
+  height: 100%;
 }
-.pb-editor .pb-editor-body {
+.pb-html-editor-modal .editor {
+  width: 50%;
+}
+.pb-html-editor-modal .editor .bs-tab-sheet > :nth-child(2) {
+  height: 0;
+}
+.pb-html-editor-modal .editor .tags {
+  height: 60%;
+}
+.pb-html-editor-modal .editor .style {
+  height: 40%;
+}
+.pb-html-editor-modal .editor .bs-code-editor {
   height: 100%;
 }
-.pb-editor .pb-editor-body .tab-bar {
-  padding: 0;
+.pb-html-editor-modal .buttons {
+  text-align: center;
+}
+.pb-html-editor-modal .buttons button {
+  color: var(--white);
+  border: none;
+  padding: 4px 12px;
+  cursor: pointer;
+  line-height: 1;
+  height: 28px;
+  background-color: var(--primary);
+}
+.pb-youtube-modal .flex-grow-1.overflow-auto {
+  overflow: hidden !important;
+}
+.pb-youtube-modal button {
+  color: var(--white);
+  border: none;
+  padding: 4px 12px;
+  cursor: pointer;
+  line-height: 1;
+  height: 28px;
+  background-color: var(--primary);
 }

package/dist/text/text.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/common.d.ts

@@ -0,0 +1 @@
+export declare function toCssLength(value: string): string;

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@g1cloud/page-builder-editor",
   "private": false,
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.100",
   "engins": {
     "node": ">= 20.0.0"
   },
   "files": [
     "dist",
-    "css"
+    "css",
+    "scss"
   ],
   "type": "module",
   "module": "dist/page-builder-editor.js",
@@ -16,18 +17,21 @@
   "author": "zag@g1project.net",
   "license": "LicenseRef-LICENSE",
   "peerDependencies": {
-    "@g1cloud/bluesea": "5.0.0-alpha.38"
+    "@g1cloud/bluesea": "5.0.0-beta.21",
+    "vue3-youtube": "^0.1.9"
   },
   "dependencies": {
     "@ckpack/vue-color": "^1.5.0",
+    "@ctrl/tinycolor": "^3.6.1",
     "dayjs": "^1.11.11",
     "mitt": "^3.0.1",
     "short-unique-id": "^5.0.3",
-    "vue": "^3.4.26",
-    "vue-router": "^4.3.2",
+    "vite-svg-loader": "^5.1.0",
+    "vue": "^3.5.3",
+    "vue-router": "^4.4.3",
     "vue3-click-away": "^1.2.4",
     "yjs": "^13.6.14",
-    "@g1cloud/page-builder-viewer": "1.0.0-alpha.1"
+    "@g1cloud/page-builder-viewer": "1.0.0-alpha.100"
   },
   "devDependencies": {
     "@types/node": "^20.12.7",
@@ -35,7 +39,7 @@
     "jsdom": "^24.0.0",
     "sass": "^1.75.0",
     "typescript": "^5.4.5",
-    "vite": "^5.2.11",
+    "vite": "^5.4.3",
     "vite-plugin-dts": "^3.9.0",
     "vitest": "^1.5.0",
     "vitest-canvas-mock": "^0.3.3",
@@ -43,7 +47,9 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc && vite build",
+    "build": "pnpm build:vue && pnpm build:scss",
+    "build:vue": "vue-tsc && vite build",
+    "build:scss": "sass scss/page-builder-editor.scss:css/page-builder-editor.css --no-source-map && sass scss/page-builder-viewer.scss:css/page-builder-viewer.css --no-source-map",
     "preview": "vite preview"
   }
 }

package/scss/canvas.scss

@@ -0,0 +1,29 @@
+
+.pb-canvas-wrapper {
+  background-color: var(--color-canvas-frame-bg);
+  border-top: 1px solid var(--color-canvas-frame-bg);
+  border-bottom: 1px solid var(--color-canvas-frame-bg);
+  flex-grow: 1;
+  min-width: 0;
+  width: 0;
+  height: 100%;
+  padding: 20px;
+  outline: none;
+  overflow: auto;
+}
+
+.pb-canvas {
+  display: flex;
+  flex-direction: row;
+  transform-origin: top left;
+  width: fit-content;
+  height: 100%;
+  margin: 0;
+}
+
+.pb-page-frame {
+
+  iframe.page-frame {
+    border: 0;
+  }
+}

package/{css/canvas-block.scss → scss/page-block.scss}

@@ -12,9 +12,21 @@
     background-color: #f0f0f0;
   }
 
-  &.selected {
-    outline: 1px solid #8e44ad;
-    outline-offset: 1px;
+  //&.selected {
+  //  outline: 2px solid #4998f8;
+  //  outline-offset: -2px;
+  //  z-index: 999;
+  //}
+
+  &.selected::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 2px solid #4998f8;
     z-index: 999;
+    pointer-events: none;
   }
 }