Improve styles

1 files changed, 52 insertions, 35 deletions

diff --git a/plugins/base/src/main/resources/dokka/styles/style.css b/plugins/base/src/main/resources/dokka/styles/style.css
index 7c1b2803..97ac19f7 100644
--- a/plugins/base/src/main/resources/dokka/styles/style.css
+++ b/plugins/base/src/main/resources/dokka/styles/style.css
@@ -3,7 +3,7 @@
 @import url('jetbrains-mono.css');
 
 :root {
-    --breadcrumb-font-color: #A6AFBA;
+    --breadcrumb-font-color: #637282;
     --hover-link-color: #5B5DEF;
     --average-color: #637282;
     --footer-height: 64px;
@@ -62,7 +62,7 @@
     background-color: white;
 }
 
-.tabs-section-body > .table {
+.tabs-section-body > div {
     margin-top: 12px;
 }
 
@@ -130,9 +130,13 @@
     width: 100%;
 }
 
+.cover p.paragraph {
+    margin-top: 4px;
+}
+
 .divergent-group {
     background-color: white;
-    padding: 16px 8px;
+    padding: 8px 0px 8px 0;
     margin-bottom: 2px;
 }
 
@@ -164,15 +168,15 @@
 
 #leftColumn {
     width: 280px;
-    min-height: 100%;
     border-right: 1px solid #DADFE6;
-    flex: 0 0 auto;
+    display: flex;
+    flex-direction: column;
 }
 
 #sideMenu {
-    max-height: calc(100% - 140px);
     padding-top: 16px;
     position: relative;
+    max-height: calc(100% - 140px);
 }
 
 #sideMenu img {
@@ -238,6 +242,13 @@ code.paragraph {
     font-weight: bold;
     position: relative;
     line-height: 24px;
+    font-family: JetBrains Mono, Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
+    font-size: 14px;
+    min-height: 43px;
+}
+
+.symbol > a {
+    color: var(--hover-link-color);
 }
 
 .copy-icon {
@@ -313,6 +324,12 @@ code.paragraph {
     overflow: hidden;
 }
 
+
+.sideMenuPart a:hover {
+    text-decoration: none;
+    color: var(--average-color);
+}
+
 .sideMenuPart > .overview:before {
     box-sizing: border-box;
     content: '';
@@ -398,16 +415,6 @@ td:first-child {
     font-size: 12px;
 }
 
-.symbol {
-    font-family: JetBrains Mono, Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
-    font-size: 12px;
-    min-height: 43px;
-}
-
-.symbol > a {
-    color: var(--hover-link-color);
-}
-
 .identifier {
     color: darkblue;
     font-size: 12px;
@@ -417,7 +424,6 @@ td:first-child {
 .brief {
     white-space: pre-wrap;
     overflow: hidden;
-    padding-top: 8px;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -518,9 +524,8 @@ blockquote {
 }
 
 code, pre {
-    font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
     color: #333;
-    font-size: 12px;
+    font-size: 14px;
 }
 
 pre {
@@ -657,20 +662,23 @@ footer {
     letter-spacing: normal;
     text-align: center;
     outline: none;
-
     color: #fff
-
 }
 
 .platform-tags {
     display: flex;
     flex-wrap: wrap;
+    padding-bottom: 8px;
 }
 
 .platform-tags > .platform-tag {
     align-self: center;
 }
 
+.platform-tags > .platform-tag:first-of-type {
+    margin-left: auto;
+}
+
 .platform-tag.jvm-like {
     background-color: #4DBB5F;
     color: white;
@@ -728,16 +736,16 @@ td.content {
     display: flex;
     flex-direction: row;
     padding: 0;
-    justify-content: space-between;
     flex-wrap: wrap;
 }
 
-.main-subrow > span {
+.main-subrow > div > span {
     display: flex;
     position: relative;
 }
 
-.main-subrow > span > a {
+.main-subrow > div > span > a, 
+.main-subrow > div > span > span[data-unresolved-link] {
     text-decoration: none;
     font-style: normal;
     font-weight: 600;
@@ -745,7 +753,7 @@ td.content {
     color: #282E34;
 }
 
-.main-subrow > span > a:hover {
+.main-subrow > div > span > a:hover {
     color: var(--hover-link-color);
 }
 
@@ -776,6 +784,10 @@ td.content {
     position: relative;
 }
 
+.inline-flex {
+    display: inline-flex;
+}
+
 .platform-hinted {
     flex: auto;
     display: block;
@@ -853,17 +865,12 @@ td.content {
     top: 0;
 }
 
-.inner-brief-with-platform-tags {
-    display: block;
-    width: 100%
-}
-
-.brief-with-platform-tags {
+.with-platform-tags {
     display: flex;
 }
 
-.brief-with-platform-tags ~ .main-subrow {
-    padding-top: 16px;
+.with-platform-tags ~ .main-subrow {
+    padding-top: 8px;
 }
 
 .cover .with-platform-tabs {
@@ -893,7 +900,7 @@ td.content {
 }
 
 .table-row .with-platform-tabs .sourceset-depenent-content .brief {
-    padding: 16px;
+    padding: 8px;
     background-color: #f4f4f4;
 }
 
@@ -1074,6 +1081,15 @@ div.runnablesample {
     margin-bottom: 0.2em;
 }
 
+.w-100 {
+    width: 100%;
+}
+
+.no-gutters {
+    margin: 0;
+    padding: 0;
+}
+
 @media screen and (max-width: 1119px) {
     /* TODO this feels wrong as only is an aproximation of correct solution*/
     .filter-section {
@@ -1136,7 +1152,8 @@ div.runnablesample {
         margin-left: -0.5em;
     }
     #content {
-        padding: 0 var(--mobile-horizontal-spacing-for-content);
+        padding: var(--mobile-horizontal-spacing-for-content);
+        padding-top: 0;
     }
     #sideMenu {
         padding-bottom: 16px;