feat: change containers, bigger thumb area

less/topic.less

@@ -531,11 +531,11 @@
 		.wrapper {
 			padding: 5px 0px 5px 0px;
 			.dropdown-toggle {
-				padding-left:20px;
+				padding-left: 20px;
 				padding-right: 20px;
 			}
 			.dropdown-menu {
-				width: 400px;
+				width: 475px;
 
 				li {
 					padding: 10px;
@@ -544,25 +544,33 @@
 					height: 350px;
 					overflow: hidden;
 				}
-				.scroller-bg {
-					width: 3px;
+				.scroller-container {
 					height: 300px;
-					margin-left: 3px;
-					background-color: @gray-lighter;
+					.scroller-line {
+						width: 3px;
+						height: 300px;
+						margin-left: 3px;
+						background-color: @gray-lighter;
+					}
+
 					.scroller-thumb {
-						width: 9px;
 						height: 30px;
-						background-color: @brand-primary;
-						position: relative;
-						left: -3px;
 						cursor: pointer;
-						border-radius: 3px;
+
+						.scroller-thumb-icon {
+							width: 9px;
+							height: 30px;
+							background-color: @brand-primary;
+							position: relative;
+							display: inline-block;
+							border-radius: 3px;
+						}
 						.thumb-text {
 							font-weight: bolder;
-							margin-left: 20px;
 							user-select: none;
 							position: relative;
-							top: 5px;
+							top: -10px;
+							padding-left: 5px;
 						}
 					}
 				}

templates/partials/topic/navigator.tpl

@@ -11,11 +11,13 @@
         <ul class="dropdown-menu dropdown-menu-right" role="menu">
             <li>
                 <div class="row">
-                    <div class="col-xs-9 post-content"></div>
-                    <div class="col-xs-3">
+                    <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-bg">
+                        <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>
                         </div>