From b771a50c652e5ec4e50f874e06d1d4cf140ad8ae Mon Sep 17 00:00:00 2001
From: zoobestik <kb.chernenko@gmail.com>
Date: Mon, 15 May 2023 20:59:30 +0200
Subject: [PATCH] feat; change style for platform in platform-tags

---
 .../src/main/resources/dokka/styles/style.css | 36 ++++++++++++++-----
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/plugins/base/src/main/resources/dokka/styles/style.css b/plugins/base/src/main/resources/dokka/styles/style.css
index cc85f88583..3f1880d392 100644
--- a/plugins/base/src/main/resources/dokka/styles/style.css
+++ b/plugins/base/src/main/resources/dokka/styles/style.css
@@ -1036,9 +1036,8 @@ p.paragraph img {
 }
 
 .platform-tag {
+    --platform-tag-color: #bababb;
     border: 0 none;
-    border-radius: 4px;
-    padding: 2px 16px;
     margin-right: 4px;
     margin-bottom: 8px;
 
@@ -1051,24 +1050,27 @@ p.paragraph img {
 .platform-tag.js-like, .platform-tag.jvm-like, .platform-tag.wasm-like {
     text-transform: uppercase;
 }
+
 .filter-section .platform-tag {
     cursor: pointer;
+    border-radius: 4px;
+    padding: 2px 16px;
 }
 
 .filter-section .platform-tag.jvm-like[data-active], .platform-tags .platform-tag.jvm-like {
-    background-color: #4dbb5f;
+    --platform-tag-color: #4dbb5f;
 }
 
 .filter-section .platform-tag.js-like[data-active], .platform-tags .platform-tag.js-like {
-    background-color: #ffc700;
+    --platform-tag-color: #ffc700;
 }
 
 .filter-section .platform-tag.native-like[data-active], .platform-tags .platform-tag.native-like {
-    background-color: #E082F3;
+    --platform-tag-color: #E082F3;
 }
 
 .filter-section .platform-tag.wasm-like[data-active], .platform-tags .platform-tag.wasm-like {
-    background-color: #9585F9;
+    --platform-tag-color: #9585F9;
 }
 
 .filter-section .platform-tag[data-active]:hover {
@@ -1085,9 +1087,27 @@ p.paragraph img {
     background-color: rgba(255,255,255,.05);
 }
 
-.filter-section .platform-tag[data-active], .platform-tag {
+.filter-section .platform-tag[data-active] {
     color: #19191c;
-    background-color: #bababb;
+    background-color: var(--platform-tag-color);
+}
+
+.platform-tags .platform-tag {
+    display: flex;
+    align-items: center;
+}
+
+.platform-tags .platform-tag::before {
+    display: inline-block;
+    content: '';
+    border-radius: 50%;
+    background: var(--platform-tag-color);
+    margin: 0 4px 0 8px;
+    height: 8px;
+    width: 8px;
+
+    font-size: 13px;
+    line-height: 1.6;
 }
 
 td.content {