update mobile view and some bugs (#2836)

* Fix dark theme bugs: mobile TOC is visible on 1px and has white background, menu icon is black

* Refactoring css styles for header controls

* Change header responsive layout

* Change header responsive layout

* Fix scrollable columns for any header size

* Remove main content mobile spacing

* Change style for platform filters and labels

* Fix: add burger icon into dist

* Fix: long code token in mobile view

* Fix: color in filter selector

* Fix: long token in keyValue for desktop

* Fix: add spacing for iPad Mini

* Fix: dropdown for multiple versions

* update platform brand colors

* Fix: sample spacing, blockquote, playground initialize

* Safari fix outline for platform tags

* Fix non-js main content for better SEO

* Fix outline for safari browser

* Add consistent vertical spacing for header. It should normalize subpixel artifacts and centred content.

* Update manual for custom logo

* Add comment for playground

* Hide copy button for non-js user

* fix; use google fonts

* feat; change style for platform in platform-tags

* Revert Inter as defult font

* Add breaks for CONSTANTS

* incorrect non-js script position

* less specific selector for article links

1 files changed, 9 insertions, 13 deletions

diff --git a/plugins/versioning/src/main/resources/dokka/styles/multimodule.css b/plugins/versioning/src/main/resources/dokka/styles/multimodule.css
index 541e2eb9..d56dd8bf 100644
--- a/plugins/versioning/src/main/resources/dokka/styles/multimodule.css
+++ b/plugins/versioning/src/main/resources/dokka/styles/multimodule.css
@@ -1,8 +1,9 @@
 .versions-dropdown {
-  float: right;
+  position: relative;
 }
 
 .versions-dropdown-button {
+  display: flex;
   border: none;
   cursor: pointer;
   padding: 5px;
@@ -12,13 +13,11 @@
     content: '';
     -webkit-mask: url("../images/arrow_down.svg") no-repeat 50% 50%;
     mask: url("../images/arrow_down.svg") no-repeat 50% 50%;
-        mask-size: auto;
+    mask-size: auto;
     -webkit-mask-size: cover;
     mask-size: cover;
     background-color: #fff;
     display: inline-block;
-    position: relative;
-    top: 2px;
     transform: rotate(90deg);
     width: 24px;
     height: 16px;
@@ -28,25 +27,22 @@
   display: none;
   position: absolute;
   background-color: #27282c;
-  border-style: solid;
-  border-width: 1px;
-  border-color: hsla(0,0%,100%,.6);
-  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  border: 1px solid hsla(0, 0%, 100%, .6);
+  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
   z-index: 1;
   overflow-y: auto;
   max-height: 200px;
   min-width: 50px;
-
 }
 
-.versions-dropdown-data a {
+.versions-dropdown-data > a {
+  display: block;
   padding: 5px;
-  padding-right: 18px;
+  color: #fff;
   text-decoration: none;
-  display: block;
 }
 
-.versions-dropdown-data a:hover {
+.versions-dropdown-data > a:hover {
   background-color: hsla(0,0%,100%,.1)
 }