Fix #5648 - New design for post release report
[raphael] / dr.css
diff --git a/dr.css b/dr.css
index 88b8454..a4adc4c 100644 (file)
--- a/dr.css
+++ b/dr.css
@@ -1,7 +1,13 @@
+html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
 #dr-js {
     background: #999;
     margin: 0;
     padding: 0;
+    overflow-y: hidden;
 }
 #src-dr-js {
     background: #000;
 }
 .dr-doc {
     background: #eee;
-    font: 300 100.01%/1.4 "Myriad Pro", "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
-    width: 60em;
-    padding: 0 2em 2em;
+    border-right: solid #eee 3px;
+    float: right;
+    font: 300 16px/1.4 "Myriad Pro", "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
+    height: 100%;
+    margin: 0;
+    overflow: auto;
+    padding: 0 30px;
+    width: 800px;
+}
+.dr-toc {
+    margin: 0;
+    padding: 0 16px;
+    background: #ddd;
+    list-style: none;
+    font-family: Menlo, Consolas, Monaco, "Lucida Console", monospace;
+    overflow: auto;
+    border-right: solid #ddd 3px;
+    height: 100%;
+    float: right;
+    width: 240px;
+}
+#dr {
     margin: 0 auto;
-    position: relative;
+    width: 1152px;
+    height: 100%;
+}
+::-moz-selection {
+    background: #c00;
+    color: #fff;
+}
+::selection {
+    background: #c00;
+    color: #fff;
 }
 .dr-doc code,
 .dr-type em,
@@ -29,8 +63,8 @@ pre.code {
     background: #333;
     color: #fff;
     overflow-x: auto;
-    padding: 1em 2.5em;
-    margin: 0 -2.5em;
+    padding: 16px 30px;
+    margin: 0 -30px;
 }
 code b {
     color: #e9df8f;
@@ -58,21 +92,21 @@ em.amp {
     font-style: italic;
 }
 dl.dr-parameters {
-    margin: .5em 0;
+    margin: 8px 0;
 }
 dt.dr-param {
     color: #666;
     font-weight: 400;
     float: left;
-    margin-right: 1em;
-    min-width: 10em;
+    margin-right: 16px;
+    min-width: 160px;
 }
 dd.dr-type {
     margin: 0;
 }
 dd.dr-description {
     display: table;
-    min-height: 1.5em;
+    min-height: 24px;
     border: solid 1px #eee;
 }
 .dr-type {
@@ -81,75 +115,101 @@ dd.dr-description {
 .dr-type em,
 .dr-returns em,
 .dr-property em {
-    -webkit-border-radius: .3em;
-    -webkit-border-radius: .3em;
-    -moz-border-radius: .3em;
-    -moz-border-radius: .3em;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
     background: #ccc;
-    border-radius: .3em;
-    border-radius: .3em;
+    border-radius: 5px;
     float: left;
-    display: block;
     font-size: .75em;
     font-style: normal;
     font-weight: 700;
-    margin: .2em .5em .2em 0;
-    padding: .1em .5em;
+    margin: 0 8px 0 0;
+    min-width: 80px;
+    padding: 2px 5px;
     text-align: center;
-    min-width: 5em;
+}
+.dr-type em.amp,
+.dr-returns em.amp,
+.dr-property em.amp {
+    float: none;
+    background: none;
+    font-size: 1em;
+    font-weight: 400;
+    font-style: italic;
+    margin: 0;
+    padding: 0;
+    min-width: 0;
 }
 .dr-property em.dr-type {
-    margin: .23em 1em 0 0;
+    margin: 4px 16px 0 0;
 }
 em.dr-type-string {
-    background: #e5ff7f;
-    color: #667f00;
+    background: #e1edb1;
+    color: #3d4c00;
 }
 em.dr-type-object {
-    background: #ff7f7f;
-    color: #7f0000;
+    background: #edb1b1;
+    color: #4c0000;
 }
 em.dr-type-function {
-    background: #bf7fff;
-    color: #3f007f;
+    background: #cfb1ed;
+    color: #26004c;
 }
 em.dr-type-number {
-    background: #7fb2ff;
-    color: #00327f;
+    background: #b1c9ed;
+    color: #001e4c;
 }
 em.dr-type-boolean {
-    background: #7fffb2;
-    color: #007f32;
+    background: #b1edc9;
+    color: #004c1e;
 }
 em.dr-type-array {
-    background: #ffcc7f;
-    color: #7f4c00;
+    background: #edd5b1;
+    color: #4c2d00;
 }
 dd.dr-optional {
     display: none;
 }
+ol.dr-json {
+    background: #ddd;
+    list-style: none;
+    margin: 0 -30px;
+    padding: 16px 30px;
+}
+ol.dr-json .dr-json-key {
+    float: left;
+    min-width: 50px;
+    margin-right: 16px;
+}
+ol.dr-json .dr-json-description {
+    display: table;
+}
+ol.dr-json ol.dr-json  {
+    margin: 0;
+    padding: 0 0 0 50px;
+}
 h1 {
     font-weight: 400;
     font-size: 2.6em;
     margin: 0;
 }
 h2, h3, h4, h5 {
-    margin: 1em 0;
-    padding: .4em 0 0;
-    font-weight: 100;
+    margin: 1em 0 .5em 0;
+    padding: 6px 0 0;
+    font-weight: 600;
     position: relative;
 }
 h5 {
-    font-size: 1.1em;
+    font-size: 18px;
 }
 h4 {
-    font-size: 1.2em;
+    font-size: 20px;
 }
 h3 {
-    font-size: 1.8em;
+    font-size: 28px;
 }
 h2 {
-    font-size: 2.4em;
+    font-size: 38px;
 }
 h2.dr-method,
 h3.dr-method,
@@ -163,38 +223,35 @@ h4.dr-property,
 h5.dr-property {
     color: #009;
 }
+i.dr-trixie {
+    border: solid 10px #eee;
+    border-left-color: #999;
+    height: 0;
+    margin-left: -30px;
+    margin-top: -10px;
+    overflow: hidden;
+    position: absolute;
+    top: 50%;
+    width: 0;
+}
 p.header {
-    font-size: 1.2em;
-    font-weight: 200;
+    font-size: 19px;
+    font-weight: 600;
+    margin: 1em 0 .3em;
 }
 .dr-returns {
-    margin-top: 1em;
+    margin-top: 16px;
 }
 .dr-returns .dr-title {
     float: left;
-    margin-right: 1em;
-    width: 10em;
-}
-.dr-toc {
-    -webkit-border-bottom-left-radius: 1em;
-    -webkit-border-bottom-right-radius: 1em;
-    -moz-border-radius-bottomleft: 1em;
-    -moz-border-radius-bottomright: 1em;
-    border-bottom-left-radius: 1em;
-    border-bottom-right-radius: 1em;
-    float: right;
-    margin: -3px 0 1em 1em;
-    padding: 1em;
-    background: #ddd;
-    list-style: none;
-    border: solid 3px #999;
-    font-family: Menlo, Consolas, Monaco, "Lucida Console", monospace;
+    margin-right: 16px;
+    width: 160px;
 }
 .dr-toc a {
     display: block;
     text-decoration: none;
     color: #333;
-    padding-top: .5em;
+    padding-top: 8px;
     position: relative;
     z-index: 1000;
 }
@@ -236,13 +293,9 @@ a.dr-sourceline {
     -webkit-transition: opacity 0.2s linear;
     color: #333;
     font-family: Menlo, "Arial Unicode MS", sans-serif;
-/*    left: -20px;*/
-/*    line-height: 1;*/
     margin: 0 0 0 .3em;
-/*    overflow: hidden;*/
     opacity: 0;
     text-decoration: none;
-/*    width: 1em;*/
 }
 a.dr-link {
     position: relative;
@@ -288,7 +341,6 @@ p {
     padding: 5px;
 }
 #src-dr-js code {
-    -webkit-transition: background 0.2s linear;
     background: #000;
     display: block;
     color: #fff;
@@ -299,12 +351,48 @@ p {
     line-height: 1.2;
 }
 #src-dr-js code:hover {
-    background: #666;
+    background: #333;
+}
+#src-dr-js code:hover .ln {
+    color: #fff;
 }
 #src-dr-js code .ln {
     position: absolute;
     left: 0;
-    color: #000;
+    color: #333;
     width: 70px;
     text-align: right;
+}
+
+/*Scrollbar*/
+.dr-doc::-webkit-scrollbar,
+.dr-toc::-webkit-scrollbar {
+    width: 7px;
+    height: 9px;
+}
+.dr-doc::-webkit-scrollbar-button:start:decrement, 
+.dr-doc::-webkit-scrollbar-button:end:increment,
+.dr-toc::-webkit-scrollbar-button:start:decrement, 
+.dr-toc::-webkit-scrollbar-button:end:increment {
+    display: block;
+    height: 0;
+    background-color: transparent;
+}
+.dr-doc::-webkit-scrollbar-track-piece,
+.dr-toc::-webkit-scrollbar-track-piece {
+    -webkit-border-radius: 0;
+    -webkit-border-bottom-right-radius: 4px;
+    -webkit-border-bottom-left-radius: 4px;
+}
+.dr-doc::-webkit-scrollbar-thumb:vertical,
+.dr-toc::-webkit-scrollbar-thumb:vertical {
+    height: 50px;
+    background-color: rgba(0, 0, 0, 0.2);
+    -webkit-border-radius: 4px;
+}
+.dr-doc::-webkit-scrollbar-thumb:horizontal,
+.dr-toc::-webkit-scrollbar-thumb:horizontal {
+    width: 50px;
+    background-color: rgba(0, 0, 0, 0.2);
+    -webkit-border-radius: 4px;
 }
\ No newline at end of file