more css changes

less/topic.less

@@ -522,6 +522,9 @@
 
 		.pagination-text {
 			color: @text-color;
+			position: relative;
+    		top: -3px;
+    		font-weight: bolder;
 		}
 
 		&.ready {
@@ -540,7 +543,7 @@
 				width: 475px;
 
 				li {
-					padding: 10px;
+					padding: 15px;
 				}
 				.post-content {
 					height: 350px;
@@ -548,15 +551,13 @@
 				}
 				.scroller-container {
 					height: 300px;
-					.scroller-line {
-						width: 3px;
-						height: 300px;
-						margin-left: 3px;
-						background-color: @gray-lighter;
-					}
+					border-right: 3px solid @gray-lighter;
+					margin-right: 3px;
 
 					.scroller-thumb {
 						height: 30px;
+						position: relative;
+						right: -6px;
 						cursor: pointer;
 
 						.scroller-thumb-icon {
@@ -572,7 +573,7 @@
 							user-select: none;
 							position: relative;
 							top: -10px;
-							padding-left: 5px;
+							padding-right: 10px;
 						}
 					}
 				}

templates/partials/topic/navigator.tpl

@@ -12,20 +12,19 @@
             <li>
                 <div class="row">
                     <div class="col-xs-8 post-content"></div>
-                    <div class="col-xs-4">
-                        <span class="pointer pagetop"><i class="fa fa-angle-double-up"></i> [[topic:first-post]]</span>
-                        <div class="scroller-container">
-                            <div class="scroller-line"></div>
-                            <div class="scroller-thumb">
-                                <div class="scroller-thumb-icon"></div>
-                                <span class="thumb-text"></span>
+                    <div class="col-xs-4 text-right">
+                        <div class="scroller-content">
+                            <span class="pointer pagetop">[[topic:first-post]] <i class="fa fa-angle-double-up"></i></span>
+                            <div class="scroller-container">
+                                <div class="scroller-thumb">
+                                    <span class="thumb-text"></span>
+                                    <div class="scroller-thumb-icon"></div>
+                                </div>
                             </div>
+                            <span class="pointer pagebottom">[[topic:last-post]] <i class="fa fa-angle-double-down"></i></span>
                         </div>
-                        <span class="pointer pagebottom"><i class="fa fa-angle-double-down"></i> [[topic:last-post]]</span>
                     </div>
                 </div>
-            </li>
-            <li>
                 <input type="text" class="form-control" id="indexInput" placeholder="[[global:pagination.enter_index]]">
             </li>
         </ul>