misc/architype
1
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Style

Browse Source
This commit is contained in:
Ian Gulliver
2019-06-21 19:11:37 +00:00
parent 62383f2aa9
commit 06b246779a
3 changed files with 45 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
architype.css
View File

@@ -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;
}

20
architype.js
View File

@@ -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;

2
index.html
View File

@@ -10,7 +10,7 @@
</head>
<body>
<ul id="definition">
<ul id="definition" class=google>
</ul>
<script>
<!--# include file="architype.js" -->