Adjusted CSS, added animation. Adjusted table rendering to make it more aesthetic.

Generated new expect test outputs.

3 files changed, 101 insertions, 6 deletions

diff --git a/plugins/base/src/test/resources/expect/suspendFunction/out/html/root/f.html b/plugins/base/src/test/resources/expect/suspendFunction/out/html/root/f.html
index b212ca00..0f9f7487 100644
--- a/plugins/base/src/test/resources/expect/suspendFunction/out/html/root/f.html
+++ b/plugins/base/src/test/resources/expect/suspendFunction/out/html/root/f.html
@@ -17,8 +17,13 @@
           <form action="../../-search.html" method="get" id="searchForm"><input type="search" name="query"><input type="submit" value="Search"></form>
         </div>
         <div id="content" pageIds="//f/#//">//<a href="../index.html">root</a>/<a href="index.html"></a>/<a href="f.html">f</a>
-          <h1>f</h1>
-<div class="symbol monospace">final fun <a href="f.html">f</a>()</div>        </div>
+          <div class="platform-tagged">
+            <div class="platform-tag jvm">JVM</div>
+            <div class="content">
+              <h1>f</h1>
+<div class="symbol monospace">final fun <a href="f.html">f</a>()</div>            </div>
+          </div>
+        </div>
       </div>
     </div>
   </body>
diff --git a/plugins/base/src/test/resources/expect/suspendFunction/out/html/root/index.html b/plugins/base/src/test/resources/expect/suspendFunction/out/html/root/index.html
index b22194f8..f2b20ccf 100644
--- a/plugins/base/src/test/resources/expect/suspendFunction/out/html/root/index.html
+++ b/plugins/base/src/test/resources/expect/suspendFunction/out/html/root/index.html
@@ -17,16 +17,24 @@
           <form action="../../-search.html" method="get" id="searchForm"><input type="search" name="query"><input type="submit" value="Search"></form>
         </div>
         <div id="content" pageIds="/////">//<a href="../index.html">root</a>/<a href="index.html"></a>
-          <h1>Package </h1>
+          <div class="platform-tagged">
+            <div class="platform-tag jvm">JVM</div>
+            <div class="content">
+              <h1>Package </h1>
+            </div>
+          </div>
           <h2>Functions</h2>
           <table>
             <thead></thead>
             <tbody>
-              <tr>
-                <td><a href="f.html">f</a></td>
-                <td><div class="symbol monospace">final fun <a href="f.html">f</a>()</div>
+              <tr class="platform-tagged">
+                <td class="content"><a href="f.html">f</a></td>
+                <td class="content"><div class="symbol monospace">final fun <a href="f.html">f</a>()</div>
                   <div class="brief "> </div>
                 </td>
+                <td class="platform-tagged">
+                  <div class="platform-tag jvm">JVM</div>
+                </td>
               </tr>
             </tbody>
           </table>
diff --git a/plugins/base/src/test/resources/expect/suspendFunction/out/html/styles/style.css b/plugins/base/src/test/resources/expect/suspendFunction/out/html/styles/style.css
index 063a9502..1cab694a 100644
--- a/plugins/base/src/test/resources/expect/suspendFunction/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/suspendFunction/out/html/styles/style.css
@@ -73,6 +73,9 @@
     text-decoration: line-through;
 }
 
+.symbol:empty {
+    padding: 0px;
+}
 .symbol {
     padding: 5px;
     background-color: #F4F4F4;
@@ -345,6 +348,85 @@ footer {
     bottom: 50px;
 }
 
+.platform-tag {
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	width: 10px;
+	height: 10px;
+	max-width: 10px;
+	max-height: 10px;
+	border-radius: 8px;
+	transition: width 1s, height 1s;
+	margin-left: 14px;
+	margin-top: auto;
+	margin-bottom: auto;
+	font-family: Inter, Arial, sans-serif;
+	font-size: 12px;
+	font-weight: 400;
+	font-style: normal;
+	font-stretch: normal;
+	line-height: normal;
+	letter-spacing: normal;
+	text-align: center;
+	color: #fff
+}
+
+.platform-tagged:hover .platform-tag,
+.platform-tagged:hover>.platform-tag {
+	text-indent: 0;
+	white-space: nowrap;
+	padding: 0 7px;
+	border-radius: 9px;
+	margin-left: 8px;
+	width: auto;
+	height: 15px;
+	max-width: 500px;
+	max-height: 500px;
+	transition: max-width 1s, max-height 1s
+}
+
+.platform-tagged {
+    flex: auto;
+    display: flex;
+    flex-direction: row-reverse;
+    padding: 0px;
+    min-width: 230px;
+}
+
+tr.platform-tagged {
+    flex-direction: row;
+}
+
+.platform-tagged > .platform-tag {
+    align-self: center;
+}
+
+.platform-tag.jvm {
+    background-color: crimson;
+    color: white;
+}
+
+.platform-tag.js {
+    background-color: orange;
+    color: white;
+}
+
+.platform-tag.native {
+    background-color: blue;
+    color: white;
+}
+
+.platform-tag.common {
+    background-color: gray;
+    color: white;
+}
+
+.platform-tagged > .content {
+    display: block;
+    flex: auto;
+}
+
 @media print, screen and (max-width: 960px) {
 
     div.wrapper {