diff --git a/architype.css b/architype.css index 894b9b8..b724bb5 100644 --- a/architype.css +++ b/architype.css @@ -1,3 +1,12 @@ +.google { + --focus: #ff0000; + --node: #4285f4; + --group: #0f9d58; + --link: #f4b400; + --text: #ffffff; + --border: #f5f5f5; +} + body { position: fixed; top: 0; @@ -11,6 +20,8 @@ body { } .editor { + color: var(--text); + list-style: none; margin: 0; @@ -43,27 +54,36 @@ body { } .editor li.node { - background-color: #daf0db; + background-color: var(--node); } .editor li.group { - background-color: #d8e6f4; + background-color: var(--group); } +.editor li.link { + background-color: var(--link); +} .editor li:focus { - border-color: red; + border-color: var(--focus); outline: none; } .editor li input { - background-color: rgba(255,255,255,0.8); - border: 3px solid black; + background-color: rgba(255,255,255,0.2); + border: 3px solid var(--border); padding: 4px; font-family: 'Courier', monospace; + color: var(--text); + width: 200px; +} + +.editor li input::-webkit-input-placeholder { + color: var(--border); } .editor li input:focus { - border-color: red; + border-color: var(--focus); outline: none; } diff --git a/architype.js b/architype.js index 20ff922..8ae6ede 100644 --- a/architype.js +++ b/architype.js @@ -351,7 +351,7 @@ class Node extends EditorEntryBase { constructor() { super(); - this.elem_.innerText = 'Node: '; + this.elem_.innerText = 'Node: '; this.elem_.classList.add('node'); this.input_ = document.createElement('input'); @@ -478,6 +478,14 @@ class Group extends EditorEntryBase { this.stopEdit(); break; + case 'ArrowLeft': + e.stopPropagation(); + if (this.input_.selectionEnd == 0) { + e.preventDefault(); + this.stopEdit(); + } + break; + default: e.stopPropagation(); break; @@ -513,7 +521,7 @@ class Link extends EditorEntryBase { constructor() { super(); - this.elem_.innerText = 'Link: '; + this.elem_.innerText = 'Link: '; this.elem_.classList.add('link'); this.input_ = document.createElement('input'); @@ -564,6 +572,14 @@ class Link extends EditorEntryBase { this.stopEdit(); break; + case 'ArrowLeft': + e.stopPropagation(); + if (this.input_.selectionEnd == 0) { + e.preventDefault(); + this.stopEdit(); + } + break; + default: e.stopPropagation(); break; diff --git a/index.html b/index.html index a0e4c9c..4ba4e78 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ -