j1-template 2021.0.9 → 2021.0.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8b532323c312f5e4f29197952a554f72e937788720b46ddab76995bb5d1abecb
-  data.tar.gz: 12c6c49d0a6bd07f5be239189c2546cf95735fbed47b0eef3ee127bbb192d50f
+  metadata.gz: 27b46d9f0f34c392aa791e49d541257879aa7e52ab0d9ab260f98e7e8f582a3c
+  data.tar.gz: 7f3afa6e6405644e78051ccf118a540355f61814ea184a19815cd2e8727e6049
 SHA512:
-  metadata.gz: 00f07838d49656973f637894165c4b83cc0970cfeb41e3e38b0d394b58cdc72d5c9a5b846ed7bd056695394a07ab109e747aaf236e2f795214167aec93e1ac00
-  data.tar.gz: 8d1aafecf11a7760ef73c98d9e5d84f67d5434e3fbbf87707481dae5c5b5a5e42f36378759e1926bc85927a539ed3d77ecbc952fb185cb3680372f0a3381bbc5
+  metadata.gz: 26bfc67abb46bfeb2a0169bf836252641289f1707f8af45c1b8285d302511ce065c88fb7c7c08fc3fc633ec61073f87b6abaea5ab4dbdb1ac9d787047d0d17af
+  data.tar.gz: bc4bf04ae1f53d6a3f51df5cac98982480b797e8aa24f6e67f4449a9f49534b07ea38c0b16ce1aa6144b8a278ec6a53e38c822b2f588f5640e74449b2db62f73

data/assets/data/menu.html

@@ -465,38 +465,6 @@ regenerate:                             true
   {% endfor %}
   <!-- [INFO   ] [j1.modules.navigator.menu.html  ] [nav_menu_settings: end menu] -->
   </ul>
-
-  <style>
-    /* jadams, 2021-02-16: unclear why global styles defined in CSS file */
-    /* (bootsttrap.css) not applied. For that reason, given locally for now */
-    /* firefox: scrollbar-color, scrollbar-width */
-    .scrollable-menu {
-        height: auto;
-        max-height: 300px;
-        overflow-x: hidden;
-        scrollbar-color: #424242 #f5f5f5;
-      	scrollbar-width: thin;
-    }
-
-  .scrollable-menu::-webkit-scrollbar {
-      -webkit-appearance: none;
-      width: 12px;
-      background-color: #f5f5f5;
-  }
-
-  .scrollable-menu::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
-    background-color: #424242;
-  }
-
-  .scrollable-menu::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-    border-radius: 0px;
-    background-color: #f5f5f5;
-  }
-  </style>
-
   <!-- [INFO   ] [j1.modules.navigator.menu.html  ] [nav_menu_settings: end navbar] -->
   <!-- [INFO   ] [j1.modules.navigator.menu.html  ] [nav_menu_settings: end processing] -->
 {% endcapture %}

data/assets/themes/j1/adapter/js/fam.js

@@ -396,16 +396,39 @@ j1.adapter['fam'] = (function (j1, window) {
       var currentNode;
       var prev_node;
       var anchor_id;
+      var index                = 0;
+      var maxNode              = $(nodes).length-1;
+      var $toc                 = $('#sidebar');
+      var current_header_id    = $toc.find('.is-active-link').attr('href');
+      var toccerScrollDuration = {{toccer_options.scrollSmoothDuration}};
+      var toccerScrollOffset   = {{toccer_options.scrollSmoothOffset}};
+
+      // Scroll offset correction if mobile or window width <= 992
+      // For smaller window sizes, the height of the menubar changes
+      //
+      // if (j1.core.isMobile() || $(window).width() <= 992) { scrollOffset += 30; }
+
+      // calculate offset for correct (smooth) scroll position
+      //
+      var $pagehead       = $('.attic');
+      var $navbar         = $('nav.navbar');
+      var $adblock        = $('#adblock');
+
+      var navbarType      = $navbar.hasClass('navbar-fixed') ? 'fixed' : 'scrolled';
+      var fontSize        = $('body').css('font-size').replace('px','');
+      var start           = window.pageYOffset;
+
+      var l               = parseInt(fontSize);
+
+      var h               = $pagehead.length ? $pagehead.height() : 0;
+      var n               = $navbar.length ? $navbar.height() : 0;
+      var a               = $adblock.length ? $adblock.height() : 0;
 
-      var index             = 0;
-      var maxNode           = $(nodes).length - 1;
-      var $toc              = $('#sidebar');
-      var current_header_id = $toc.find('.is-active-link').attr('href');
-      var scrollDuration    = {{toccer_options.scrollSmoothDuration}};
-      var scrollOffset      = {{toccer_options.scrollSmoothOffset}};
+      var scrollOffset    = navbarType == 'fixed' ? -1*(n + a + l) : -1*(h + n + a + l);
 
-      // Correction if mobile (offset: desktop -90px, mobile -80px)
-      scrollOffset          = j1.core.isMobile() ? scrollOffset + 10 : scrollOffset;
+      // static offset, to be checked why this is needed
+      //
+      scrollOffset        = scrollOffset + toccerScrollOffset;
 
       nodes.each(function () {
         currentNode = $(this).find(current_header_id);
@@ -418,7 +441,7 @@ j1.adapter['fam'] = (function (j1, window) {
             anchor_id           = '#' + previous_header_id;
 
             j1.core.scrollSmooth.scroll( anchor_id, {
-              duration: scrollDuration,
+              duration: toccerScrollDuration,
               offset: scrollOffset,
               callback: null
             });
@@ -439,12 +462,12 @@ j1.adapter['fam'] = (function (j1, window) {
       var nextNode;
       var next_header_id;
       var next_anchor_id;
-      var index             = 0;
-      var maxNode           = $(nodes).length-1;
-//    var maxNode           = $(nodes).length;
-      var $toc              = $('#sidebar');
-      var scrollDuration    = {{toccer_options.scrollSmoothDuration}};
-      var scrollOffset      = {{toccer_options.scrollSmoothOffset}};
+      var index                 = 0;
+      var maxNode               = $(nodes).length-1;
+      var $toc                  = $('#sidebar');
+      var scrollDuration        = {{toccer_options.scrollSmoothDuration}};
+      var toccerScrollDuration  = {{toccer_options.scrollSmoothDuration}};
+      var toccerScrollOffset    = {{toccer_options.scrollSmoothOffset}};
 
       current_header_id = $toc.find('.is-active-link').attr('href');
       nodes.each(function () {
@@ -453,28 +476,37 @@ j1.adapter['fam'] = (function (j1, window) {
           if (index == maxNode) {
             return false;
           } else {
-//          nextNode              = nodes[index];
-//          next_header_id        = $(nextNode).find(':header').first()[0].id;
-//          anchor_id             = '#' + next_header_id;
             nextNode              = nodes[index+1];
             next_header_id        = $(nextNode).find(':header').first()[0].id;
             next_anchor_id        = '#' + next_header_id;
 
-            // Correction if mobile (offset: desktop -90px, mobile -80px)
-            scrollOffset          = j1.core.isMobile() ? scrollOffset + 10 : scrollOffset;
+            // calculate offset for correct (smooth) scroll position
+            //
+            var $pagehead       = $('.attic');
+            var $navbar         = $('nav.navbar');
+            var $adblock        = $('#adblock');
+
+            var navbarType      = $navbar.hasClass('navbar-fixed') ? 'fixed' : 'scrolled';
+            var fontSize        = $('body').css('font-size').replace('px','');
+            var start           = window.pageYOffset;
+
+            var l               = parseInt(fontSize);
 
-            // j1.core.scrollSmooth.scroll( next_anchor_id, {
-            //   duration: scrollDuration,
-            //   offset: scrollOffset,
-            //   callback: tocbot.refresh()
-            // });
+            var h               = $pagehead.length ? $pagehead.height() : 0;
+            var n               = $navbar.length ? $navbar.height() : 0;
+            var a               = $adblock.length ? $adblock.height() : 0;
+
+            var scrollOffset    = navbarType == 'fixed' ? -1*(n + a + l) : -1*(h + n + a + l);
+
+            // static offset, to be checked why this is needed
+            //
+            scrollOffset        = scrollOffset + toccerScrollOffset;
 
             j1.core.scrollSmooth.scroll( next_anchor_id, {
-              duration: scrollDuration,
+              duration: toccerScrollDuration,
               offset: scrollOffset,
               callback: null
             });
-
           }
         }
         index < maxNode ? index++ : index;

data/assets/themes/j1/adapter/js/toccer.js

@@ -194,23 +194,23 @@ j1.adapter['toccer'] = (function () {
             // calculate (tocbot page) offset DYMICALLY for correct
             // smoothscroll position
             //
-            var $pagehead       = $('.attic');
-            var $navbar         = $('nav.navbar');
-            var $adblock        = $('#adblock');
-
-            var navbarType      = $navbar.hasClass('navbar-fixed') ? 'fixed' : 'scrolled';
-            var fontSize        = $('body').css('font-size').replace('px','');
-            var start           = window.pageYOffset;
-
-            var l               = parseInt(fontSize);
-
-            var h               = $pagehead.length ? $pagehead.height() : 0;
-            var n               = $navbar.length ? $navbar.height() : 0;
-            var a               = $adblock.length ? $adblock.height() : 0;
-
-            var o               = navbarType == 'fixed' ? -1*(n + a + l) : -1*(h + n + a + l);
-
-            settings.scrollSmoothOffset = o;
+            // var $pagehead       = $('.attic');
+            // var $navbar         = $('nav.navbar');
+            // var $adblock        = $('#adblock');
+            //
+            // var navbarType      = $navbar.hasClass('navbar-fixed') ? 'fixed' : 'scrolled';
+            // var fontSize        = $('body').css('font-size').replace('px','');
+            // var start           = window.pageYOffset;
+            //
+            // var l               = parseInt(fontSize);
+            //
+            // var h               = $pagehead.length ? $pagehead.height() : 0;
+            // var n               = $navbar.length ? $navbar.height() : 0;
+            // var a               = $adblock.length ? $adblock.height() : 0;
+            //
+            // var o               = navbarType == 'fixed' ? -1*(n + a + l) : -1*(h + n + a + l);
+            //
+            // settings.scrollSmoothOffset = o;
 
             _this.initToccerCore(settings);
 
@@ -228,6 +228,7 @@ j1.adapter['toccer'] = (function () {
     // Set Toccer options
     // -------------------------------------------------------------------------
     initToccerCore: function (options) {
+      var scrollOffset;
 
       if (options  !== undefined) {
         var settings = $.extend({}, options);
@@ -235,10 +236,33 @@ j1.adapter['toccer'] = (function () {
         var settings = false;
       }
 
+      // calculate offset for correct (smooth) scroll position
+      //
+      var $pagehead       = $('.attic');
+      var $navbar         = $('nav.navbar');
+      var $adblock        = $('#adblock');
+
+      var navbarType      = $navbar.hasClass('navbar-fixed') ? 'fixed' : 'scrolled';
+      var fontSize        = $('body').css('font-size').replace('px','');
+      var start           = window.pageYOffset;
+
+      var l               = parseInt(fontSize);
+
+      var h               = $pagehead.length ? $pagehead.height() : 0;
+      var n               = $navbar.length ? $navbar.height() : 0;
+      var a               = $adblock.length ? $adblock.height() : 0;
+
+      scrollOffset        = navbarType == 'fixed' ? -1*(n + a + l) : -1*(h + n + a + l);
+
+      // static offset, to be checked why this is needed
+      //
+      scrollOffset        = scrollOffset + moduleOptions.scrollSmoothOffset
+
       _this.setState('running');
       logger.info('state: ' + _this.getState());
 
       // tocbot get fired if HTML portion is loaded (AJAX load finished)
+      //
       var dependencies_met_ajax_load_finished = setInterval (function () {
         if ($('#toc_mmenu').length) {
           /* eslint-disable */
@@ -267,7 +291,7 @@ j1.adapter['toccer'] = (function () {
             scrollContainer:        null,
             scrollSmooth:           moduleOptions.scrollSmooth,
             scrollSmoothDuration:   moduleOptions.scrollSmoothDuration,
-            scrollSmoothOffset:     moduleOptions.scrollSmoothOffset,
+            scrollSmoothOffset:     scrollOffset,
             headingsOffset:         1,
             throttleTimeout:        moduleOptions.throttleTimeout
           });
@@ -276,6 +300,61 @@ j1.adapter['toccer'] = (function () {
           clearInterval(dependencies_met_ajax_load_finished);
         } // END AJAX load finished
       }, 25); // END dependencies_met_ajax_load_finished
+
+      $(window).on('resize', function() {
+        var scrollOffset;
+        // re-calculate offset for correct (smooth) scroll position
+        //
+        var $pagehead       = $('.attic');
+        var $navbar         = $('nav.navbar');
+        var $adblock        = $('#adblock');
+
+        var navbarType      = $navbar.hasClass('navbar-fixed') ? 'fixed' : 'scrolled';
+        var fontSize        = $('body').css('font-size').replace('px','');
+        var start           = window.pageYOffset;
+
+        var l               = parseInt(fontSize);
+
+        var h               = $pagehead.length ? $pagehead.height() : 0;
+        var n               = $navbar.length ? $navbar.height() : 0;
+        var a               = $adblock.length ? $adblock.height() : 0;
+
+        scrollOffset        = navbarType == 'fixed' ? -1*(n + a + l) : -1*(h + n + a + l);
+
+        // static offset, to be checked why this is needed
+        //
+        scrollOffset        = scrollOffset + moduleOptions.scrollSmoothOffset
+
+        tocbot.refresh({
+          log:                    moduleOptions.log,
+          activeLinkColor:        moduleOptions.activeLinkColor,
+          tocSelector:            moduleOptions.tocSelector,
+          headingSelector:        moduleOptions.headingSelector,
+          ignoreSelector:         moduleOptions.ignoreSelector,
+          contentSelector:        moduleOptions.contentSelector,
+          collapseDepth:          moduleOptions.collapseDepth,
+          throttleTimeout:        moduleOptions.throttleTimeout,
+          hasInnerContainers:     false,
+          includeHtml:            false,
+          linkClass:              'toc-link',
+          extraLinkClasses:       '',
+          activeLinkClass:        'is-active-link',
+          listClass:              'toc-list',
+          extraListClasses:       '',
+          isCollapsedClass:       'is-collapsed',
+          collapsibleClass:       'is-collapsible',
+          listItemClass:          'toc-list-item',
+          positionFixedSelector:  '',
+          positionFixedClass:     'is-position-fixed',
+          fixedSidebarOffset:     'auto',
+          scrollContainer:        null,
+          scrollSmooth:           moduleOptions.scrollSmooth,
+          scrollSmoothDuration:   moduleOptions.scrollSmoothDuration,
+          scrollSmoothOffset:     scrollOffset,
+          headingsOffset:         1,
+          throttleTimeout:        moduleOptions.throttleTimeout
+        });
+      });
     }, // END initToccerCore
 
     // -------------------------------------------------------------------------

data/assets/themes/j1/core/css/themes/uno-light/bootstrap.css

@@ -14650,10 +14650,10 @@ a.news-link {
  # J1 Template is licensed under the MIT License.
  # See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE
  # -----------------------------------------------------------------------------
- # NOTE: Styles for the custom scrollbars
+ # NOTE: Styles for custom scrollbars, see
+ # 			 https://codepen.io/devstreak/pen/dMYgeO
  # -----------------------------------------------------------------------------
 */
-/* See: https://codepen.io/devstreak/pen/dMYgeO */
 .scrollbar {
   margin-left: 30px;
   height: 300px;
@@ -14669,37 +14669,41 @@ a.news-link {
   width: 500px;
   margin: auto; }
 
-::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  background-color: #e0e0e0; }
-
 ::-webkit-scrollbar {
   width: 12px;
-  background-color: #2196f3; }
+  background-color: #f5f5f5; }
+
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  border-radius: 0px;
+  background-color: #f5f5f5; }
 
 ::-webkit-scrollbar-thumb {
-  background-color: #2196f3; }
+  -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
+  background-color: #424242; }
 
-.scrollable-menu {
+ul.scrollable-menu {
   height: auto;
   max-height: 20.5rem;
   overflow-x: hidden;
   scrollbar-color: #424242 #f5f5f5;
   scrollbar-width: thin; }
 
-.scrollable-menu::-webkit-scrollbar {
-  -webkit-appearance: none;
+ul.scrollable-menu::-webkit-scrollbar {
   width: 12px;
   background-color: #f5f5f5; }
 
-.scrollable-menu::-webkit-scrollbar-thumb {
-  border-radius: 10px;
+ul.scrollable-menu::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  border-radius: 0px;
+  background-color: #f5f5f5; }
+
+ul.scrollable-menu::-webkit-scrollbar-thumb {
   -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
   background-color: #424242; }
 
-.scrollable-menu::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  border-radius: 0px;
+.scroller-1::-webkit-scrollbar {
+  width: 12px;
   background-color: #f5f5f5; }
 
 .scroller-1::-webkit-scrollbar-track {
@@ -14707,214 +14711,199 @@ a.news-link {
   border-radius: 10px;
   background-color: #f5f5f5; }
 
-.scroller-1::-webkit-scrollbar {
-  width: 12px;
-  background-color: #f5f5f5; }
-
 .scroller-1::-webkit-scrollbar-thumb {
   border-radius: 10px;
   -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
   background-color: #424242; }
 
+.scroller-2::-webkit-scrollbar {
+  width: 12px;
+  background-color: #e0e0e0; }
+
 .scroller-2::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
   border-radius: 0px;
   background-color: #f5f5f5; }
 
-.scroller-2::-webkit-scrollbar {
-  width: 12px;
-  background-color: #e0e0e0; }
-
 .scroller-2::-webkit-scrollbar-thumb {
   border-radius: 10px;
   -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
   background-color: #424242; }
 
-.scroller-3::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  background-color: #f5f5f5; }
-
 .scroller-3::-webkit-scrollbar {
   width: 6px;
   background-color: #f5f5f5; }
 
-.scroller-3::-webkit-scrollbar-thumb {
-  background-color: #000; }
-
-.scrollbar-line::-webkit-scrollbar-track {
+.scroller-3::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
   background-color: #f5f5f5; }
 
-.scrollbar-line::-webkit-scrollbar {
-  width: 6px;
-  background-color: #f5f5f5; }
-
-.scrollbar-line::-webkit-scrollbar-thumb {
+.scroller-3::-webkit-scrollbar-thumb {
   background-color: #000; }
 
-.scroller-4::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  background-color: #f5f5f5; }
-
 .scroller-4::-webkit-scrollbar {
   width: 10px;
   background-color: #f5f5f5; }
 
+.scroller-4::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: #f5f5f5; }
+
 .scroller-4::-webkit-scrollbar-thumb {
   background-color: #000;
   border: 2px solid #424242; }
 
-.scroller-5::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  background-color: #f5f5f5; }
-
 .scroller-5::-webkit-scrollbar {
   width: 10px;
   background-color: #f5f5f5; }
 
+.scroller-5::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: #f5f5f5; }
+
 .scroller-5::-webkit-scrollbar-thumb {
   background-color: #03a9f4;
   background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(transparent)); }
 
-.scroller-6::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  background-color: #f5f5f5; }
-
 .scroller-6::-webkit-scrollbar {
   width: 10px;
   background-color: #f5f5f5; }
 
+.scroller-6::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: #f5f5f5; }
+
 .scroller-6::-webkit-scrollbar-thumb {
   background-color: #ff9800;
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); }
 
+.scroller-7::-webkit-scrollbar {
+  width: 10px;
+  background-color: #f5f5f5; }
+
 .scroller-7::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
   background-color: #f5f5f5;
   border-radius: 10px; }
 
-.scroller-7::-webkit-scrollbar {
-  width: 10px;
-  background-color: #f5f5f5; }
-
 .scroller-7::-webkit-scrollbar-thumb {
   border-radius: 10px;
   background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, #7986cb), color-stop(0.72, #3f51b5), color-stop(0.86, #1a237e)); }
 
-.scroller-8::-webkit-scrollbar-track {
-  border: 1px solid black;
-  background-color: #f5f5f5; }
-
 .scroller-8::-webkit-scrollbar {
   width: 10px;
   background-color: #f5f5f5; }
 
+.scroller-8::-webkit-scrollbar-track {
+  border: 1px solid black;
+  background-color: #f5f5f5; }
+
 .scroller-8::-webkit-scrollbar-thumb {
   background-color: #000; }
 
-.scroller-9::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  background-color: #f5f5f5; }
-
 .scroller-9::-webkit-scrollbar {
   width: 10px;
   background-color: #f5f5f5; }
 
+.scroller-9::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: #f5f5f5; }
+
 .scroller-9::-webkit-scrollbar-thumb {
   background-color: #ff9800;
   background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); }
 
+.scroller-10::-webkit-scrollbar {
+  width: 10px;
+  background-color: #f5f5f5; }
+
 .scroller-10::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
   background-color: #f5f5f5;
   border-radius: 10px; }
 
-.scroller-10::-webkit-scrollbar {
-  width: 10px;
-  background-color: #f5f5f5; }
-
 .scroller-10::-webkit-scrollbar-thumb {
   background-color: #9e9e9e;
   border-radius: 10px;
   background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.2) 75%, transparent 75%, transparent); }
 
+.scroller-11::-webkit-scrollbar {
+  width: 10px;
+  background-color: #f5f5f5; }
+
 .scroller-11::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
   background-color: #f5f5f5;
   border-radius: 10px; }
 
-.scroller-11::-webkit-scrollbar {
-  width: 10px;
-  background-color: #f5f5f5; }
-
 .scroller-11::-webkit-scrollbar-thumb {
   background-color: #3f51b5;
   border-radius: 10px;
   background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 75%, transparent); }
 
+.scroller-12::-webkit-scrollbar {
+  width: 12px;
+  background-color: #f5f5f5; }
+
 .scroller-12::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
   border-radius: 10px;
   background-color: #212121; }
 
-.scroller-12::-webkit-scrollbar {
-  width: 12px;
-  background-color: #f5f5f5; }
-
 .scroller-12::-webkit-scrollbar-thumb {
   border-radius: 10px;
   background-color: #f44336;
   background-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent, transparent); }
 
+.scroller-13::-webkit-scrollbar {
+  width: 12px;
+  background-color: #f5f5f5; }
+
 .scroller-13::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
   border-radius: 10px;
   background-color: #eee; }
 
-.scroller-13::-webkit-scrollbar {
-  width: 12px;
-  background-color: #f5f5f5; }
-
 .scroller-13::-webkit-scrollbar-thumb {
   border-radius: 10px;
   background-color: #b71c1c;
   background-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent, transparent); }
 
-.scroller-14::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
-  background-color: #eee; }
-
 .scroller-14::-webkit-scrollbar {
   width: 10px;
   background-color: #f5f5f5; }
 
+.scroller-14::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
+  background-color: #eee; }
+
 .scroller-14::-webkit-scrollbar-thumb {
   background-color: #fff;
   background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 25%, transparent 100%, rgba(0, 0, 0, 0.1) 75%, transparent); }
 
+.scroller-15::-webkit-scrollbar {
+  width: 10px;
+  background-color: #f5f5f5; }
+
 .scroller-15::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
   background-color: #f5f5f5;
   border-radius: 10px; }
 
-.scroller-15::-webkit-scrollbar {
-  width: 10px;
-  background-color: #f5f5f5; }
-
 .scroller-15::-webkit-scrollbar-thumb {
   border-radius: 10px;
   background-color: #fff;
   background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#4D9C41), to(#19911D), color-stop(0.6, #54DE5D)); }
 
+.scroller-16::-webkit-scrollbar {
+  width: 10px;
+  background-color: #f5f5f5; }
+
 .scroller-16::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
   background-color: #f5f5f5;
   border-radius: 10px; }
 
-.scroller-16::-webkit-scrollbar {
-  width: 10px;
-  background-color: #f5f5f5; }
-
 .scroller-16::-webkit-scrollbar-thumb {
   border-radius: 10px;
   background-color: #fff;