nitdoc: make the menu follows the scroll.

[nit.git] / share / nitdoc / styles / main.css

diff --git a/share/nitdoc/styles/main.css b/share/nitdoc/styles/main.css
index 07214ec..0a0352e 100644 (file)
--- a/share/nitdoc/styles/main.css
+++ b/share/nitdoc/styles/main.css
@@ -58,6 +58,83 @@ h3 {
        font-weight: bold;\r
 }\r
 \r
+/* Page display */\r
+\r
+body {\r
+       overflow: hidden;\r
+       height: 100%;\r
+}\r
+\r
+header {\r
+}\r
+\r
+.page {\r
+       width: 937px;\r
+       margin: auto;\r
+}\r
+\r
+.menu {\r
+       position: fixed;\r
+       top: 50px;\r
+       bottom: 2em;\r
+       width: 250px;\r
+       overflow-y:     scroll;\r
+}\r
+\r
+.content {\r
+       position: fixed;\r
+       top: 50px;\r
+       bottom: 2em;\r
+       margin-left: 265px;\r
+       width: 667px;\r
+       overflow-y:     scroll;\r
+       padding-right: 10px;\r
+}\r
+\r
+.content.fullpage {\r
+       margin-left: 20px;\r
+       width: 910px;\r
+}\r
+\r
+footer {\r
+       position: fixed;\r
+       bottom: 0;\r
+       width: 100%;\r
+}\r
+\r
+/* Webkit scroll bars */\r
+\r
+.menu {\r
+    overflow-y: hidden;\r
+}\r
+\r
+.menu:hover {\r
+    overflow-y: scroll;\r
+}\r
+\r
+.menu::-webkit-scrollbar, .content::-webkit-scrollbar {\r
+    width: 10px;\r
+}\r
+\r
+.menu::-webkit-scrollbar-thumb, .content::-webkit-scrollbar-thumb {\r
+       background: #CCC;\r
+       -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.10),inset 0 -1px 0 rgba(0,0,0,0.07);\r
+}\r
+\r
+.menu::-webkit-scrollbar-thumb:hover, .content::-webkit-scrollbar-thumb:hover {\r
+       background: #999;\r
+}\r
+\r
+.menu::-webkit-scrollbar-corner, .content::-webkit-scrollbar-corner {\r
+       background: transparent;\r
+}\r
+\r
+.menu::-webkit-scrollbar-button, .content::-webkit-scrollbar-button {\r
+       width: 0;\r
+       height: 0;\r
+       display: none;\r
+}\r
+\r
 /* Header, Footer */\r
 \r
 header nav ul {\r
@@ -84,8 +161,7 @@ header nav ul li a:hover {
 \r
 footer {\r
        text-align: center;\r
-       padding: 20px 10px;\r
-       margin: 10px 100px;\r
+       padding-bottom: 10px;\r
        color: #CCC;\r
 }\r
 \r
@@ -101,22 +177,11 @@ header nav.main ul li.current {
        color: white;\r
 }\r
 \r
-/* Page content */\r
-\r
-.page {\r
-       width: 940px;\r
-       margin: auto;\r
-}\r
-\r
 /* Latteral Menu */\r
 \r
-.menu {\r
-       width: 250px;\r
-       float: left;\r
-}\r
-\r
 .menu nav {\r
        margin: 20px;\r
+       width: 208px;\r
        border: 1px solid #CCC;\r
 }\r
 \r
@@ -155,14 +220,6 @@ header nav.main ul li.current {
 \r
 /* Content */\r
 \r
-.content {\r
-       margin: 20px 20px 20px 260px;\r
-}\r
-\r
-.content.fullpage {\r
-       margin: 20px;\r
-}\r
-\r
 .content section {\r
        margin: 20px 0;\r
 }\r