add mobile CSS rules for updated scaladoc look

This commit addresses the need for an improved mobile viewing
experience. Specifically it introduces CSS media queries to adjust
sizing and indentation of elements on mobile devices. This includes
the following changes:

- replace absolute font sizing with relative font sizing
- fix font-resizing issues for mobile by fixing viewport
- hide related links when viewport too small
- fix missing trigram from heaven on Android
- remove indentation on annotations e.g. `@throws` and place associated
  text on a separate line
- fix bottom scoll-bar appearing on code-snippets
- add spacing between entity icons in browser
- add dynamic top offset for entity description
- fix long entity names corrupting style
- remove "EXPERIMENTAL" button from shortcomment divs on mobile

1 files changed, 173 insertions, 48 deletions

diff --git a/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/template.css b/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/template.css
index a37b8a1fd3..662ae48944 100644
--- a/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/template.css
+++ b/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/template.css
@@ -63,22 +63,21 @@ input { border-width: 0px; }
 }
 
 /* Page */
-
 body {
+  overflow-x: hidden;
   font-family: Arial, sans-serif;
   background-color: #f0f3f6;
-  font-size: 10pt;
 }
 
 html {
     box-sizing: border-box;
 }
+
 *, *:before, *:after {
     box-sizing: inherit;
 }
 
 #footer {
-  font-size: 9pt;
   text-align: center;
   color: #858484;
   bottom: 0;
@@ -108,15 +107,10 @@ body.trait > div#definition {
 }
 
 #definition {
-  display: block-inline;
+  display: block;
   padding: 5px 0px;
-  height: 61px;
-}
-
-#definition > img {
-  float: left;
-  padding-right: 6px;
-  padding-left: 5px;
+  height: 5.5em;
+  padding: 0;
 }
 
 #definition > a > img {
@@ -131,22 +125,21 @@ body.trait > div#definition {
 
 #definition > h1 {
   color: white;
-  font-size: 24pt;
   display: inline-block;
   overflow: hidden;
   margin-top: 10px;
+  font-size: 2.0em;
 }
 
 #definition h1 > a {
   color: #fff;
-  font-size: 24pt;
   text-decoration: none;
 }
 
 #definition #owner {
   color: #ffffff;
-  margin-top: 0.9em;
-  font-size: 10pt;
+  padding-top: 1.3em;
+  font-size: 0.8em;
   overflow: hidden;
 }
 
@@ -161,11 +154,11 @@ body.trait > div#definition {
 #signature {
   background-color:#c2d2dc;
   min-height: 18px;
-  font-size: 11.5pt;
+  font-size: 0.9em;
   padding: 8px;
-  box-shadow: 0 0 8px rgba(0,0,0,0.5);
+  box-shadow: 0 0 0.35em 0.05em rgba(0,0,0,0.5);
   position: fixed;
-  top: 5.3em;
+  top: 6.1em;
   left: 0;
   width: 100%;
   z-index: 9998;
@@ -231,7 +224,6 @@ body.trait > div#definition {
   left: 0;
   width: 100%;
   z-index: 9999;
-  height: 6.1em;
 }
 
 .type #definition {
@@ -239,9 +231,9 @@ body.trait > div#definition {
   position: fixed;
   top: 0;
   left: 0;
+  min-height: 5.5em;
   width: 100%;
   z-index: 9999;
-  height: 6.1em;
 }
 
 .abstract.type #definition {
@@ -254,7 +246,6 @@ body.trait > div#definition {
   width: 5.7em;
   float: left;
   color: transparent;
-  margin: .2em .5em;
 }
 
 .big-circle:hover {
@@ -294,7 +285,7 @@ body.abstract.type div.big-circle {
 }
 
 #template {
-  margin: 0.4em 0.74em 2em 0.74em;
+  margin: 0.9em 0.75em 2em 0.75em;
   border-radius: 0.2em;
   background-color: #fff;
   -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1);
@@ -309,7 +300,7 @@ body.abstract.type div.big-circle {
 h3 {
   color: white;
   padding: 5px 10px;
-  font-size: 12pt;
+  font-size: 1em;
   font-weight: bold;
 }
 
@@ -317,6 +308,7 @@ dl.attributes > dt {
   display: block;
   float: left;
   font-style: italic;
+  font-weight: bold;
 }
 
 dl.attributes > dt.implicit {
@@ -335,6 +327,7 @@ dl.attributes > dd {
   color: #2C475C;
   height: 2em;
   padding: 1em 1em 2em;
+  font-size: 1.2em;
 }
 
 .values ol li:last-child {
@@ -354,7 +347,6 @@ dl.attributes > dd {
 #inheritedMembers > div.parent > h3 {
   height: 17px;
   font-style: italic;
-  font-size: 12pt;
 }
 
 #inheritedMembers > div.parent > h3 * {
@@ -364,7 +356,6 @@ dl.attributes > dd {
 #inheritedMembers > div.conversion > h3 {
   height: 2em;
   padding: 1em;
-  font-size: 12pt;
   font-style: italic;
   color: #2C475C;
 }
@@ -415,8 +406,8 @@ div.members > ol > li:last-child {
 }
 
 .signature {
-  font-family: monospace;
-  font-size: 10pt;
+  font-family: "Source Code Pro";
+  font-size: 0.8rem;
   line-height: 18px;
   clear: both;
   display: block;
@@ -505,7 +496,7 @@ div.members > ol > li:last-child {
 }
 
 .full-signature-usecase h4 span {
-  font-size: 10pt;
+  font-size: 0.9em;
 }
 
 .full-signature-usecase > #signature {
@@ -611,22 +602,6 @@ div.members > ol > li:last-child {
   font-weight: bold;
 }
 
-.cmt h3 {
-  font-size: 14pt;
-}
-
-.cmt h4 {
-  font-size: 13pt;
-}
-
-.cmt h5 {
-  font-size: 12pt;
-}
-
-.cmt h6 {
-  font-size: 11pt;
-}
-
 .cmt pre {
   padding: 0.5em;
   border: 0px solid #ddd;
@@ -635,6 +610,7 @@ div.members > ol > li:last-child {
   display: block;
   font-family: "Source Code Pro";
   border-radius: 0.2em;
+  overflow-x: auto;
 }
 
 .cmt pre span.ano {
@@ -739,8 +715,7 @@ p.comment {
 }
 
 div.fullcommenttop {
-  padding: 10px 10px;
-  margin-top: 9em;
+  padding: 1em 0.8em;
 }
 
 div.fullcomment {
@@ -756,6 +731,7 @@ div.fullcomment {
 #template .shortcomment {
   margin: 5px 0 0 14.7em;
   padding: 0;
+  font-family: "Open Sans";
 }
 
 div.fullcomment .block {
@@ -764,6 +740,7 @@ div.fullcomment .block {
   margin-top: 5px;
   overflow: hidden;
   margin-right: 0.5em;
+  font-family: "Open Sans";
 }
 
 div.fullcommenttop .block {
@@ -775,6 +752,13 @@ div.fullcommenttop .block {
   box-shadow: 0 0 10px rgba(0,0,0,0.1);
 }
 
+div#comment,
+div#mbrsel,
+div#template,
+div#footer {
+  font-size: 0.8em;
+}
+
 #comment {
   font-family: "Open Sans";
 }
@@ -797,6 +781,7 @@ div.fullcomment .block > h5 {
 }
 
 div.fullcomment .comment {
+  font-family: "Open Sans";
   margin: 5px 0 10px;
 }
 
@@ -871,7 +856,6 @@ div.fullcomment dl.paramcmts > dd {
 }
 
 #mbrsel {
-  font-size: 9.5pt;
   display: block;
   padding: 1em 1em 0.5em;
   margin: 0.8em;
@@ -991,7 +975,7 @@ div.fullcomment dl.paramcmts > dd {
 }
 
 #mbrsel > div#filterby > div > ol > li {
-  line-height: 16pt;
+  line-height: 1.5em;
   display: inline-block;
   cursor: pointer;
   -webkit-touch-callout: none;
@@ -1061,3 +1045,144 @@ div.fullcomment dl.paramcmts > dd {
   background-color: #b94a48;
   margin-right: 0.8em !important;
 }
+
+/* Media query rules for smaller viewport */
+@media only screen /* Large screen with a small window */
+and (max-width: 560px)
+,
+screen /* HiDPI device like Nexus 5 */
+and (max-device-width: 360px)
+and (max-device-height: 640px)
+and (-webkit-device-pixel-ratio: 3)
+,
+screen /* Most mobile devices  */
+and (max-device-width: 480px)
+and (orientation: portrait)
+,
+only screen /* iPhone 6 */
+and (max-device-width: 667px)
+and (-webkit-device-pixel-ratio: 2)
+{
+  body,
+  body > h4#signature {
+    min-width: 300px;
+  }
+
+  .signature .modifier_kind {
+    width: 10em;
+  }
+
+  .signature > .symbol {
+    padding-left: 10.7em;
+  }
+
+  #template .shortcomment {
+    margin-left: 10.7em;
+  }
+
+  #template div.fullcommenttop, #template div.fullcomment {
+    margin-left: 10.7em;
+  }
+
+  #definition {
+    min-width: 300px;
+    height: 6em;
+  }
+
+  #definition .morelinks {
+    text-align: left;
+    left: 7.2em;
+    font-size: 0.8em;
+    top: auto;
+    bottom: 0.5em;
+  }
+
+  #signature {
+    top: 6.7em;
+  }
+
+  .big-circle {
+    margin-top: 0.6em;
+  }
+}
+
+/* Media query rules specifically for mobile devices */
+@media
+screen /* HiDPI device like Nexus 5 */
+and (max-device-width: 360px)
+and (max-device-height: 640px)
+and (-webkit-device-pixel-ratio: 3)
+,
+screen /* Most mobile devices  */
+and (max-device-width: 480px)
+and (orientation: portrait)
+,
+only screen /* iPhone 6 */
+and (max-device-width: 667px)
+and (-webkit-device-pixel-ratio: 2)
+{
+  #definition {
+    position: absolute !important;
+    min-height: 0 !important;
+    height: 4em !important;
+  }
+
+  #signature {
+    position: absolute !important;
+    font-size: 0.7em;
+    top: 5.7em;
+  }
+
+  #definition > h1 {
+    font-size: 1.3em;
+  }
+
+  #definition .morelinks {
+    display: none;
+  }
+
+  #definition #owner {
+    padding-top: 0.7em;
+  }
+
+  div.fullcommenttop {
+    margin-top: 11.6em;
+  }
+
+  #template .shortcomment {
+    margin-left: 1em;
+  }
+
+  div.fullcomment dl.attributes > dt {
+    margin: 0.5em 0;
+    clear: both;
+  }
+
+  div.fullcomment dl.attributes > dd {
+    padding-left: 0;
+    clear: both;
+  }
+
+  #template div.fullcommenttop, #template div.fullcomment {
+    margin-left: 1em;
+  }
+
+  .big-circle {
+    width: 3em;
+    height: 3em;
+    background-size: 3em !important;
+    margin: 0.5em;
+  }
+
+  div#template {
+    margin-bottom: 0.5em;
+  }
+
+  div#footer {
+    font-size: 0.5em;
+  }
+
+  .shortcomment > span.badge {
+    display: none;
+  }
+}