Many UI changes for styling

1 files changed, 141 insertions, 136 deletions

diff --git a/core/src/main/resources/dokka/styles/style.css b/core/src/main/resources/dokka/styles/style.css
index b7c3f58b..147568ac 100644
--- a/core/src/main/resources/dokka/styles/style.css
+++ b/core/src/main/resources/dokka/styles/style.css
@@ -1,26 +1,23 @@
 @import url(https://fonts.googleapis.com/css?family=Open+Sans:300i,400,700);
 
 
-#content {
-    margin-top: 3em;
-    margin-left: 15em;
-}
-
-#navigation {
-    position: relative
+#container {
+    display: flex;
+    flex-direction: row;
 }
 
-#sideMenu, #searchBar {
-    position: absolute;
+@media screen and (max-width: 600px) {
+    #container {
+        flex-direction: column;
+    }
 }
 
 #sideMenu {
-    width: 14em;
-    padding-left: 0.5em;
+    padding-right: 12px;
 }
 
 #sideMenu .sideMenuPart {
-    margin-left: 1em;
+    padding-left: 1em;
 }
 
 #sideMenu img {
@@ -40,13 +37,19 @@
     float: right;
     pointer-events: all;
 }
+
 .monospace,
 .code {
     font-family: monospace;
 }
 
+.symbol {
+    padding: 5px;
+    background-color: #F4F4F4;
+}
+
 .sideMenuPart > .navButton {
-    margin-left:0.25em
+    margin-left: 0.25em
 }
 
 .sideMenuPart > .overview .navButtonContent::after {
@@ -59,25 +62,32 @@
 }
 
 .sideMenuPart.hidden > .sideMenuPart {
-    display: none;
+    height: 0;
+    visibility: hidden;
 }
 
 .filtered > a, .filtered > .navButton {
     display: none;
 }
 
-body, table{
-    font:14px/1.5 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+body, table {
+    font: 14px/1.5 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
     background: #F4F4F4;
-    font-weight:300;
+    font-weight: 300;
     margin-left: auto;
     margin-right: auto;
     max-width: 1440px;
 }
 
 table {
-    display: flex;
-    padding:5px;
+    width: 100%;
+    border-collapse: collapse;
+    background-color: #ffffff;
+    padding: 5px;
+}
+
+tbody > tr {
+    border-bottom: 2px solid #F4F4F4;
 }
 
 td:first-child {
@@ -85,20 +95,20 @@ td:first-child {
 }
 
 .keyword {
-    color:black;
-    font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
-    font-size:12px;
+    color: black;
+    font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
+    font-size: 12px;
 }
 
 .symbol {
-    font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
-    font-size:12px;
+    font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
+    font-size: 12px;
 }
 
 .identifier {
     color: darkblue;
-    font-size:12px;
-    font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
+    font-size: 12px;
+    font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
 }
 
 .brief {
@@ -109,255 +119,250 @@ td:first-child {
 }
 
 h1, h2, h3, h4, h5, h6 {
-    color:#222;
+    color: #222;
 }
 
 p, ul, ol, table, pre, dl {
-    margin:0 0 20px;
+    margin: 0 0 20px;
 }
 
 h1, h2, h3 {
-    line-height:1.1;
+    line-height: 1.1;
 }
 
 h1 {
-    font-size:28px;
+    font-size: 28px;
 }
 
 h2 {
-    color:#393939;
+    color: #393939;
 }
 
 h3, h4, h5, h6 {
-    color:#494949;
+    color: #494949;
 }
 
 a {
-    color:#258aaf;
-    font-weight:400;
-    text-decoration:none;
+    color: #258aaf;
+    font-weight: 400;
+    text-decoration: none;
 }
 
 a:hover {
     color: inherit;
-    text-decoration:underline;
+    text-decoration: underline;
 }
 
 a small {
-    font-size:11px;
-    color:#555;
-    margin-top:-0.6em;
-    display:block;
+    font-size: 11px;
+    color: #555;
+    margin-top: -0.6em;
+    display: block;
 }
 
 .wrapper {
-    width:860px;
-    margin:0 auto;
+    width: 860px;
+    margin: 0 auto;
 }
 
 blockquote {
-    border-left:1px solid #e5e5e5;
-    margin:0;
-    padding:0 0 0 20px;
-    font-style:italic;
+    border-left: 1px solid #e5e5e5;
+    margin: 0;
+    padding: 0 0 0 20px;
+    font-style: italic;
 }
 
 code, pre {
-    font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
-    color:#333;
-    font-size:12px;
+    font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
+    color: #333;
+    font-size: 12px;
 }
 
 pre {
     display: block;
-/*
-    padding:8px 8px;
-    background: #f8f8f8;
-    border-radius:5px;
-    border:1px solid #e5e5e5;
-*/
+    /*
+        padding:8px 8px;
+        background: #f8f8f8;
+        border-radius:5px;
+        border:1px solid #e5e5e5;
+    */
     overflow-x: auto;
 }
 
-table {
-    width:100%;
-    border-collapse:collapse;
-}
-
 th, td {
-    text-align:left;
+    text-align: left;
     vertical-align: top;
-    padding:5px 10px;
+    padding: 5px 10px;
 }
 
 dt {
-    color:#444;
-    font-weight:700;
+    color: #444;
+    font-weight: 700;
 }
 
 th {
-    color:#444;
+    color: #444;
 }
 
 img {
-    max-width:100%;
+    max-width: 100%;
 }
 
 header {
-    width:270px;
-    float:left;
-    position:fixed;
+    width: 270px;
+    float: left;
+    position: fixed;
 }
 
 header ul {
-    list-style:none;
-    height:40px;
+    list-style: none;
+    height: 40px;
 
-    padding:0;
+    padding: 0;
 
     background: #eee;
     background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
-    background: -webkit-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
-    background: -o-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
-    background: -ms-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
-    background: linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f8f8f8), color-stop(100%, #dddddd));
+    background: -webkit-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
+    background: -o-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
+    background: -ms-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
+    background: linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
 
-    border-radius:5px;
-    border:1px solid #d2d2d2;
-    box-shadow:inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0;
-    width:270px;
+    border-radius: 5px;
+    border: 1px solid #d2d2d2;
+    box-shadow: inset #fff 0 1px 0, inset rgba(0, 0, 0, 0.03) 0 -1px 0;
+    width: 270px;
 }
 
 header li {
-    width:89px;
-    float:left;
-    border-right:1px solid #d2d2d2;
-    height:40px;
+    width: 89px;
+    float: left;
+    border-right: 1px solid #d2d2d2;
+    height: 40px;
 }
 
 header ul a {
-    line-height:1;
-    font-size:11px;
-    color:#999;
-    display:block;
-    text-align:center;
-    padding-top:6px;
-    height:40px;
+    line-height: 1;
+    font-size: 11px;
+    color: #999;
+    display: block;
+    text-align: center;
+    padding-top: 6px;
+    height: 40px;
 }
 
 strong {
-    color:#222;
-    font-weight:700;
+    color: #222;
+    font-weight: 700;
 }
 
 header ul li + li {
-    width:88px;
-    border-left:1px solid #fff;
+    width: 88px;
+    border-left: 1px solid #fff;
 }
 
 header ul li + li + li {
-    border-right:none;
-    width:89px;
+    border-right: none;
+    width: 89px;
 }
 
 header ul a strong {
-    font-size:14px;
-    display:block;
-    color:#222;
+    font-size: 14px;
+    display: block;
+    color: #222;
 }
 
 section {
-    width:500px;
-    float:right;
-    padding-bottom:50px;
+    width: 500px;
+    float: right;
+    padding-bottom: 50px;
 }
 
 small {
-    font-size:11px;
+    font-size: 11px;
 }
 
 hr {
-    border:0;
-    background:#e5e5e5;
-    height:1px;
-    margin:0 0 20px;
+    border: 0;
+    background: #e5e5e5;
+    height: 1px;
+    margin: 0 0 20px;
 }
 
 footer {
-    width:270px;
-    float:left;
-    position:fixed;
-    bottom:50px;
+    width: 270px;
+    float: left;
+    position: fixed;
+    bottom: 50px;
 }
 
 @media print, screen and (max-width: 960px) {
 
     div.wrapper {
-        width:auto;
-        margin:0;
+        width: auto;
+        margin: 0;
     }
 
     header, section, footer {
-        float:none;
-        position:static;
-        width:auto;
+        float: none;
+        position: static;
+        width: auto;
     }
 
     header {
-        padding-right:320px;
+        padding-right: 320px;
     }
 
     section {
-        border:1px solid #e5e5e5;
-        border-width:1px 0;
-        padding:20px 0;
-        margin:0 0 20px;
+        border: 1px solid #e5e5e5;
+        border-width: 1px 0;
+        padding: 20px 0;
+        margin: 0 0 20px;
     }
 
     header a small {
-        display:inline;
+        display: inline;
     }
 
     header ul {
-        position:absolute;
-        right:50px;
-        top:52px;
+        position: absolute;
+        right: 50px;
+        top: 52px;
     }
 }
 
 @media print, screen and (max-width: 720px) {
     body {
-        word-wrap:break-word;
+        word-wrap: break-word;
     }
 
     header {
-        padding:0;
+        padding: 0;
     }
 
     header ul, header p.view {
-        position:static;
+        position: static;
     }
 
     pre, code {
-        word-wrap:normal;
+        word-wrap: normal;
     }
 }
 
 @media print, screen and (max-width: 480px) {
     body {
-        padding:15px;
+        padding: 15px;
     }
 
     header ul {
-        display:none;
+        display: none;
     }
 }
 
 @media print {
     body {
-        padding:0.4in;
-        font-size:12pt;
-        color:#444;
+        padding: 0.4in;
+        font-size: 12pt;
+        color: #444;
     }
 }