ui tuning

ccp/fragment.html

@@ -24,12 +24,22 @@
       display: flex;
       flex-direction: column;
       gap: .25rem;
+      user-select: none;
     }
     li.process_list_item{
-      margin-bottom: .4rem;
       display: flex;
       flex-direction: column;
-      gap: .25rem;
+      gap: 0.25rem;
+      cursor: pointer;
+      border: solid 1px rgba(0,0,0,.3);
+      padding: 0.3rem;
+      border-radius: 0.3rem;
+      box-shadow: #333333 1px 1px 4px;
+      background: #eeeeee;
+      transition: background .3s;
+    }
+    li.process_list_item:hover{
+      background: #ffffff;
     }
     ul.keyword_list{
       list-style: none;
@@ -37,12 +47,12 @@
       flex-direction: row;
       gap:2px;
       padding-left: 0;
+      font-size: x-small;
+      font-weight: 300;
     }
     li.keyword_list_item{
       display: inline-block;
       padding: 0.25em 0.4em;
-      font-size: small;
-      font-weight: 300;
       line-height: 1;
       text-align: center;
       white-space: nowrap;
@@ -52,16 +62,18 @@
       color: #0099CC;
       border: solid 1px #0099CC;
     }
+    .process_list_item_header{
+      margin: 0;
+    }
+
   </style>
   <template id="PROCESS_LIST_TEMPLATE">
     <ul class="process_list" name="process_list">
       <li class="process_list_item">
-        <div style="display:flex;flex-direction:row;gap:1rem">
-          <b></b>
-          <ul name="keywords" class="keyword_list">
-            <li class="keyword_list_item"></li>
-          </ul>
-        </div>
+        <h4 class="process_list_item_header"></h4>
+	<ul name="keywords" class="keyword_list">
+          <li class="keyword_list_item"></li>
+        </ul>
         <i></i>
       </li>
     </ul>
@@ -70,4 +82,4 @@
     <input name="search" type="text"/>
     <ul name="process_list"></ul>
   </div>
-</div>
+</div>

ccp/js/methodlistcontroller.js

@@ -78,7 +78,7 @@ class CCPMethodList extends HTMLElement{
         "in" : (e,d)=>this.#filtered,
         "recurse" : [
           {
-            "target" : "b",
+            "target" : "h5",
             "apply" : (e,d)=>{ e.textContent = d.title }
           },
           {