add settings page with styling

1 files changed, 31 insertions, 6 deletions

diff --git a/html/text_entry_list.html b/html/text_entry_list.html
index 21e1604..77be5cb 100644
--- a/html/text_entry_list.html
+++ b/html/text_entry_list.html
@@ -40,17 +40,41 @@
 #LOADCSS html/grid.css
 <style>
   .text_entry {
-      height: 3em;
-      padding: 0 0.5em;
+      padding: 0.1em 0.2em;
+  }
+  .text_entry button {
+      margin: 0.1em 0 0.1em 0.2em;
+  }
+  .text_entry_editable, .text_entry_noneditable {
+      display: grid;
+      grid-template-columns: 1fr auto auto;
+  }
+  .text_entry_noneditable {
+      grid-template-columns: 1fr auto;
+  }
+
+  .text_entries {
+      min-height: 3em;
+      background: #cfcfcf;
+      overflow-y: scroll;
+      min-width: 10em;
+      margin: 0.2em 0;
+      height: calc(var(--content-height) - 5em);
+  }
+  .text_entries>:nth-child(2n) {
+      background-color:#dadada;
+  }
+  .text_entries span {
+      padding: 0.4em;
   }
 </style>
 <template>
-  <div id="text_entry" data-template="main_div">
-    <div data-template="noneditable_view">
+  <div id="text_entry" data-template="main_div" class="text_entry">
+    <div data-template="noneditable_view" class="text_entry_noneditable">
       <span data-template="text"></span>
       <button data-template="remove_but">Remove</button>
     </div>
-    <div data-template="editable_view" class="hide">
+    <div data-template="editable_view" class="hide text_entry_editable">
       <input data-template="input">
       <button data-template="add_but" class="hide">Add</button>
       <button data-template="save_but">Save</button>
@@ -58,7 +82,8 @@
     </div>
   </div>
   <div id="text_entry_list" data-template="main_div" class="grid_1">
-    <div data-template="list_div" class="grid_1"></div>
+    <div data-template="list_div" class="text_entries">
+    </div>
     <button data-template="new_but">New</button>
   </div>
 </template>