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

Generated new expect test outputs.

65 files changed, 1925 insertions, 191 deletions

diff --git a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
index 439a8fbe..19b0f26f 100644
--- a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
+++ b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
@@ -115,13 +115,20 @@ open class HtmlRenderer(
         }
     }
 
-    private fun TR.buildPlatformTags(
-        node: ContentGroup
+    private fun TBODY.buildPlatformTaggedRow(
+        node: ContentTable,
+        pageContext: ContentPage,
+        platformRestriction: PlatformData?
     ) {
-        if(ContentKind.shouldBePlatformTagged(node.dci.kind)) {
-                td {
-                    div("platform-tagged"){
-                    node.platforms.forEach {
+        node.children.forEach {
+            tr("platform-tagged") {
+                it.children.forEach {
+                    td("content") {
+                        it.build(this, pageContext, platformRestriction)
+                    }
+                }
+                td("platform-tagged") {
+                    it.platforms.forEach {
                         div(("platform-tag ${it.platformType.key}")) {
                             text(it.platformType.key.toUpperCase())
                         }
@@ -131,6 +138,22 @@ open class HtmlRenderer(
         }
     }
 
+    private fun TBODY.buildRow(
+        node: ContentTable,
+        pageContext: ContentPage,
+        platformRestriction: PlatformData?
+    ) {
+        node.children.forEach {
+            tr {
+                it.children.forEach {
+                    td {
+                        it.build(this, pageContext, platformRestriction)
+                    }
+                }
+            }
+        }
+    }
+
     override fun FlowContent.buildTable(
         node: ContentTable,
         pageContext: ContentPage,
@@ -149,15 +172,10 @@ open class HtmlRenderer(
                 }
             }
             tbody {
-                node.children.forEach {
-                    tr {
-                        it.children.forEach {
-                            td {
-                                it.build(this, pageContext, platformRestriction)
-                            }
-                        }
-                        buildPlatformTags(it)
-                    }
+                if(ContentKind.shouldBePlatformTagged(node.dci.kind)) {
+                    buildPlatformTaggedRow(node, pageContext, platformRestriction)
+                } else {
+                    buildRow(node, pageContext, platformRestriction)
                 }
             }
         }
diff --git a/plugins/base/src/main/kotlin/translators/documentables/DefaultPageCreator.kt b/plugins/base/src/main/kotlin/translators/documentables/DefaultPageCreator.kt
index 349d9970..41d4b917 100644
--- a/plugins/base/src/main/kotlin/translators/documentables/DefaultPageCreator.kt
+++ b/plugins/base/src/main/kotlin/translators/documentables/DefaultPageCreator.kt
@@ -98,12 +98,14 @@ open class DefaultPageCreator(
         }
         block("Properties", 2, ContentKind.Properties, s.properties, platformData.toSet()) {
             link(it.name, it.dri)
-            platformDependentHint(it.dri, it.platformData.toSet()) {
-                +buildSignature(it)
-            }
-            breakLine()
-            group(kind = ContentKind.BriefComment) {
-                text(it.briefDocumentation())
+            group {
+                platformDependentHint(it.dri, it.platformData.toSet()) {
+                    +buildSignature(it)
+                }
+                breakLine()
+                group(kind = ContentKind.BriefComment) {
+                    text(it.briefDocumentation())
+                }
             }
         }
         (s as? WithExtraProperties<Documentable>)?.let { it.extra[InheritorsInfo] }?.let { inheritors ->
@@ -144,20 +146,26 @@ open class DefaultPageCreator(
                 c.platformData.toSet()
             ) {
                 link(it.name, it.dri)
-                platformDependentHint(it.dri, it.platformData.toSet()) {
-                    +buildSignature(it)
-                }
-                group(kind = ContentKind.BriefComment) {
-                    text(it.briefDocumentation())
+                group {
+                    platformDependentHint(it.dri, it.platformData.toSet()) {
+                        +buildSignature(it)
+                    }
+                    group(kind = ContentKind.BriefComment) {
+                        text(it.briefDocumentation())
+                    }
                 }
             }
         }
         if (c is DEnum) {
             block("Entries", 2, ContentKind.Classlikes, c.entries, c.platformData.toSet()) {
                 link(it.name.orEmpty(), it.dri)
-                +buildSignature(it)
-                group(kind = ContentKind.BriefComment) {
-                    text(it.briefDocumentation())
+                group {
+                    platformDependentHint(it.dri, it.platformData.toSet()){
+                        +buildSignature(it)
+                    }
+                    group(kind = ContentKind.BriefComment) {
+                        text(it.briefDocumentation())
+                    }
                 }
             }
         }
diff --git a/plugins/base/src/test/resources/expect/annotatedFunction/out/html/root/f.html b/plugins/base/src/test/resources/expect/annotatedFunction/out/html/root/f.html
index b212ca00..0f9f7487 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunction/out/html/root/f.html
+++ b/plugins/base/src/test/resources/expect/annotatedFunction/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/annotatedFunction/out/html/root/index.html b/plugins/base/src/test/resources/expect/annotatedFunction/out/html/root/index.html
index b22194f8..f2b20ccf 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunction/out/html/root/index.html
+++ b/plugins/base/src/test/resources/expect/annotatedFunction/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/annotatedFunction/out/html/styles/style.css b/plugins/base/src/test/resources/expect/annotatedFunction/out/html/styles/style.css
index 063a9502..1cab694a 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunction/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/annotatedFunction/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 {
diff --git a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/-fancy/-init-.html b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/-fancy/-init-.html
index 54f356bf..ab81e6cd 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/-fancy/-init-.html
+++ b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/-fancy/-init-.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="/Fancy/&lt;init&gt;/#kotlin.Int//">//<a href="../../index.html">root</a>/<a href="../index.html"></a>/<a href="index.html">Fancy</a>/<a href="-init-.html">&lt;init&gt;</a>
-          <h1>&lt;init&gt;</h1>
-<div class="symbol monospace">final fun <a href="-init-.html">&lt;init&gt;</a>(size: <a href="">Int</a>)</div>        </div>
+          <div class="platform-tagged">
+            <div class="platform-tag jvm">JVM</div>
+            <div class="content">
+              <h1>&lt;init&gt;</h1>
+<div class="symbol monospace">final fun <a href="-init-.html">&lt;init&gt;</a>(size: <a href="">Int</a>)</div>            </div>
+          </div>
+        </div>
       </div>
     </div>
   </body>
diff --git a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/-fancy/equals.html b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/-fancy/equals.html
index 3047ead0..ca933941 100644
--- a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/-fancy/equals.html
+++ b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/-fancy/equals.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="/Fancy/equals/#kotlin.Any?//">//<a href="../../index.html">root</a>/<a href="../index.html"></a>/<a href="index.html">Fancy</a>/<a href="equals.html">equals</a>
-          <h1>equals</h1>
-<div class="symbol monospace">open fun <a href="equals.html">equals</a>(other: <a href="">Any</a>): <a href="">Boolean</a></div>        </div>
+          <div class="platform-tagged">
+            <div class="platform-tag jvm">JVM</div>
+            <div class="content">
+              <h1>equals</h1>
+<div class="symbol monospace">open fun <a href="equals.html">equals</a>(other: <a href="">Any</a>): <a href="">Boolean</a></div>            </div>
+          </div>
+        </div>
       </div>
     </div>
   </body>
diff --git a/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/-fancy/hash-code.html b/plugins/base/src/test/resources/expect/annotatedFunctionWithAnnotationParameters/out/html/root/-fancy/hash-code.html
index aae30759..a8658fb9 100644
--- a/