Added new petrel version

interaapps · Mar 17, 2024 · 08fac35 · 08fac35
1 parent f84dd7d
commit 08fac35
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 8 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "highlight.js": "^11.9.0",
     "hono": "^4.0.10",
     "jdomjs": "3.1.11",
-    "petrel": "1.0.8",
+    "petrel": "1.1.0",
     "sass": "^1.71.1"
   }
 }
diff --git a/public/petrel/base.css b/public/petrel/base.css
@@ -13,7 +13,7 @@
     margin: 0px;
     line-height: inherit;
     background: transparent;
-    min-height: 100%;
+    /* min-height: 100%; */
     overflow: hidden;
     border: none;
     outline: none;
@@ -24,12 +24,14 @@
     caret-color: #989898;
     overflow-wrap: normal;
     white-space: pre;
-    min-width: 100%;
+    /*min-width: 100%;*/
     padding-left: 0;
     position: absolute;
     top: 0;
     font-size: inherit;
     left: 0px;
+
+    opacity: 0;
 }
 
 .petrel-code-editor textarea::-moz-selection, .petrel-code-editor textarea::selection {
@@ -49,6 +51,69 @@
     pointer-events: none;
     font-family: inherit;
     font-size: inherit;
+    z-index: 3;
+}
+
+
+
+.petrel-code-editor .petrel-code-editor-overlay {
+    position: absolute;
+    pointer-events: none;
+    top: 15px;
+    left: 20px;
+}
+
+.petrel-code-editor .petrel-code-editor-overlay-line-indicator {
+    position: absolute;
+    background: #FFFFFF11;
+    z-index: 1;
+}
+
+.petrel-code-editor .petrel-code-editor-overlay-bracket-indicator {
+    position: absolute;
+    background: #FFFFFF11;
+    border: #FFFFFF22 1px solid;
+    box-sizing: border-box;
+    z-index: 4;
+}
+
+.petrel-code-editor .petrel-code-editor-overlay-cursor {
+    position: absolute;
+    background: #FFFFFF;
+    animation: 1s cursor infinite linear;
+    width: 2px;
+    z-index: 10;
+}
+
+.petrel-code-editor .petrel-code-editor-selection {
+    position: absolute;
+    background: #3B74F133;
+    z-index: 2;
+}
+.petrel-code-editor .petrel-code-editor-selection-single {
+    border-radius: 4px;
+}
+.petrel-code-editor .petrel-code-editor-selection-first {
+    border-radius: 4px 0 0 0;
+}
+.petrel-code-editor .petrel-code-editor-selection-last {
+    border-radius: 0 0 4px 0;
+}
+
+@keyframes cursor {
+    0% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 1;
+    }
+    51% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 0;
+    }
 }
 
 .petrel-code-editor .petrel-code-editor-line-numbering {
@@ -73,7 +138,7 @@
 
 
 .petrel-code-editor .petrel-code-editor-line-numbering span div {
-    height: 22px;
+    height: 23px;
     width: 100%;
     left: 0px;
     position: absolute;
@@ -90,12 +155,14 @@
     position: absolute;
     left: 92px;
     background: #FFF;
+    z-index: 11;
 }
 
 
 .petrel-code-editor .petrel-code-editor-autocompletion a {
     cursor: pointer;
     display: block;
+    font-size: 12px;
 }
 
 .petrel-code-editor .petrel-code-editor-autocompletion a.selected {

diff --git a/public/petrel/dark.css b/public/petrel/dark.css
@@ -1,4 +1,5 @@
 @import url('./base.css');
+@import url(https://fonts.intera.dev/_/dm+mono);
 
 .petrel-code-editor {
     background: #212531;
@@ -9,6 +10,7 @@
     resize: vertical;
     min-height: 140px;
     border-radius: 10px;
+    font-family: 'DM Mono';
 }
 
 .petrel-code-editor::-webkit-resizer {
@@ -59,11 +61,32 @@
     overflow: auto;
 }
 .petrel-code-editor .petrel-code-editor-autocompletion a {
-    padding: 4px 6px;
-    margin: 5px;
+    padding: 3px 5px;
+    margin: 0 5px;
     border-radius: 6px;
-    font-size: 16px;
 }
 .petrel-code-editor .petrel-code-editor-autocompletion a:hover {
     background: #FFFFFF21;
+}
+
+
+.petrel-code-editor .petrel-code-editor-overlay-bracket-indicator {
+    background: #FFFFFF11;
+    border-color: #FFFFFF22;
+}
+
+.petrel-code-editor .petrel-code-editor-line-numbering span div {
+    background: #FFFFFF11;
+}
+
+.petrel-code-editor .petrel-code-editor-overlay-line-indicator {
+    background: #FFFFFF11;
+}
+
+.petrel-code-editor .petrel-code-editor-overlay-cursor {
+    background: #FFFFFF;
+}
+
+.petrel-code-editor .petrel-code-editor-selection {
+    background: #3B74F166;
 }
diff --git a/src/main.ts b/src/main.ts
@@ -20,6 +20,6 @@ api.promiseInterceptor = r => r.json()
 initUser()
 
 html`<${App} router=${router} />`
-    .appendTo(document);
+    .appendTo(document)
 
 router.init();