Feature/new scrollbars (#1883)

* reworked scrollbars to use simplebar + native styling

* Fix ajax in flexobject pages

* stub scrollbar object

* various fixes

themes/grav/app/forms/fields/colorpicker.js

@@ -82,24 +82,22 @@ export default class ColorpickerField {
         this.wrapper.addClass('cp-visible');
         this.updateFromInput();
 
-        let mainContainer = $('#admin-main .content-wrapper').data('scrollbar').getViewElement();
         this.wrapper.on(MOUSEDOWN, '.cp-grid, .cp-slider, .cp-opacity-slider', this.bound('bodyDown'));
         body.on(MOUSEMOVE, this.bound('bodyMove'));
         body.on(MOUSEDOWN, this.bound('bodyClick'));
         body.on(MOUSEUP, this.bound('targetReset'));
-        $(mainContainer).on('scroll', this.bound('reposition'));
+        $('#admin-main > .content-wrapper').on('scroll', this.bound('reposition'));
     }
 
     hide() {
         if (!this.built) { return; }
         this.wrapper.removeClass('cp-visible');
 
-        let mainContainer = $('#admin-main .content-wrapper').data('scrollbar').getViewElement();
         this.wrapper.undelegate(MOUSEDOWN, '.cp-grid, .cp-slider, .cp-opacity-slider', this.bound('bodyDown'));
         body.off(MOUSEMOVE, this.bound('bodyMove'));
         body.off(MOUSEDOWN, this.bound('bodyClick'));
         body.off(MOUSEUP, this.bound('targetReset'));
-        $(mainContainer).off('scroll', this.bound('reposition'));
+        $('#admin-main > .content-wrapper').on('scroll', this.bound('reposition'));
     }
 
     build() {

themes/grav/app/forms/fields/mediapicker.js

@@ -1,30 +1,10 @@
 import $ from 'jquery';
-import Scrollbar from '../../utils/scrollbar';
 import { Instance as pagesTree } from '../../pages/tree';
 
-const queries = {
-    tree: '.pages-list-container .mediapicker-scroll',
-    thumb: '.thumbs-list-container .mediapicker-scroll'
-};
-
 $(function() {
     let modal = '';
     let body = $('body');
 
-    let treescrolls = [];
-    let thumbscrolls = [];
-
-    $(queries.tree).each((index, element) => {
-        treescrolls.push(new Scrollbar(element, { autoshow: true }));
-    });
-
-    $(queries.thumb).each((index, element) => {
-        thumbscrolls.push(new Scrollbar(element, { autoshow: true }));
-    });
-
-    // let treescroll = new Scrollbar('.pages-list-container .mediapicker-scroll', { autoshow: true });
-    // let thumbscroll = new Scrollbar('.thumbs-list-container .mediapicker-scroll', { autoshow: true });
-
     // Thumb Resizer
     $(document).on('input change', '.media-container .media-range', function(event) {
         const target = $(event.currentTarget);
@@ -34,16 +14,6 @@ $(function() {
         cards.each(function() {
             $(this).css('width', width);
         });
-
-        treescrolls.forEach((tree) => tree.update());
-        thumbscrolls.forEach((thumb) => thumb.update());
-    });
-
-    $(document).on('opened', '.remodal', function() {
-        setTimeout(function() {
-            treescrolls.forEach((tree) => tree.update());
-            thumbscrolls.forEach((thumb) => thumb.update());
-        }, 10);
     });
 
     body.on('click', '[data-mediapicker-modal-trigger]', function(event) {
@@ -57,20 +27,9 @@ $(function() {
             modal = $.remodal.lookup[modal_element.data('remodal')];
         }
 
-        $(queries.tree).filter((index, item) => !$(item).data('scrollbar')).each((index, item) => {
-            treescrolls.push(new Scrollbar(item, { autoshow: true }));
-        });
-
-        $(queries.thumb).filter((index, item) => !$(item).data('scrollbar')).each((index, item) => {
-            thumbscrolls.push(new Scrollbar(item, { autoshow: true }));
-        });
-
         modal.open();
         modal.dataField = element.find('input');
 
-        treescrolls.forEach((tree) => tree.update());
-        thumbscrolls.forEach((thumb) => thumb.update());
-
         // load all media
         modal_element.find('.js__files').trigger('fillView');
 

themes/grav/app/main.js

@@ -1,12 +1,12 @@
 import $ from 'jquery';
 import './utils/remodal';
+import 'simplebar';
 import GPM, { Instance as gpm } from './utils/gpm';
 import KeepAlive from './utils/keepalive';
 import Updates, { Instance as updates, Notifications, Feed } from './updates';
 import Dashboard from './dashboard';
 import Pages from './pages';
 import Forms from './forms';
-import Scrollbar, { Instance as contentScrollbar } from './utils/scrollbar';
 import './plugins';
 import './themes';
 import { Filter as MediaFilter, Instance as MediaFilterInstance} from './media';
@@ -32,21 +32,8 @@ import Sidebar, { Instance as sidebar } from './utils/sidebar';
 // starts the keep alive, auto runs every X seconds
 KeepAlive.start();
 
-// Sidebar auto-refresh
-global.setInterval(() => {
-    contentScrollbar.update();
-    sidebar.scroller.update();
-}, 150);
-
 // global event to catch sidebar_state changes
 $(global).on('sidebar_state._grav', () => {
-    /* Should not be needed since Gemini Scrollbar v1.4.0
-     * - Auto-update scrollbar on resize
-     *
-     * $('.admin-menu-wrapper').data('scrollbar').update();
-     * $('#admin-main .content-wrapper').data('scrollbar').update();
-     */
-
     Object.keys(Dashboard.Chart.Instances).forEach((chart) => {
         setTimeout(() => Dashboard.Chart.Instances[chart].chart.update(), 10);
     });
@@ -61,10 +48,6 @@ export default {
     Dashboard,
     Pages,
     Forms,
-    Scrollbar: {
-        Scrollbar,
-        Instance: contentScrollbar
-    },
     Updates: {
         Updates,
         Notifications,
@@ -79,5 +62,6 @@ export default {
         MediaFilter,
         Instance: MediaFilterInstance
     },
+    Scrollbar: { Scrollbar: { deprecated: true }, Instance: { deprecated: true } },
     Utils: { request, toastr }
 };

themes/grav/app/media/index.js

@@ -166,14 +166,10 @@ $('body').on('click', '.js__reset-pages-filter', (event) => {
 var enableInfiniteScrolling = function enableInfiniteScrolling() {
     $('.spinning-wheel').hide();
     var view = $('.mediapicker-scroll').last();
-    var gemini = view.data('scrollbar');
-    if (gemini) {
-        gemini = gemini.getViewElement();
-    }
 
-    if (!gemini || !gemini.length && !view.length) { return; }
+    if (!view.length) { return; }
 
-    $(gemini || view).on('scroll', function() {
+    $(view).on('scroll', function() {
         if (($(this).scrollTop() + $(this).innerHeight() + 100) >= $(this)[0].scrollHeight) {
             fillView();
         }

themes/grav/app/pages/tree.js

@@ -64,11 +64,6 @@ export default class PagesTree {
             }
         });
 
-        const scroller = elements.closest('.mediapicker-scroll');
-        if (scroller.length && scroller.data('scrollbar')) {
-            scroller.data('scrollbar').update();
-        }
-
         if (!dontStore) { this.save(); }
     }
 
@@ -99,11 +94,6 @@ export default class PagesTree {
             }
         });
 
-        const scroller = elements.closest('.mediapicker-scroll');
-        if (scroller.length && scroller.data('scrollbar')) {
-            scroller.data('scrollbar').update();
-        }
-
         if (!dontStore) { this.save(); }
     }
 

themes/grav/app/utils/scrollbar.js

@@ -1,40 +1 @@
-import $ from 'jquery';
-import GeminiScrollbar from 'gemini-scrollbar';
-
-const defaults = {
-    autoshow: false,
-    createElements: true,
-    forceGemini: false
-};
-
-export default class Scrollbar {
-    constructor(element, options) {
-        this.element = $(element);
-        this.created = false;
-        if (!this.element.length) { return; }
-
-        this.options = Object.assign({}, defaults, options, { element: this.element[0] });
-
-        this.element.css('overflow', 'auto');
-        this.instance = new GeminiScrollbar(this.options);
-        this.create();
-        this.element.data('scrollbar', this.instance);
-    }
-
-    create() {
-        this.instance.create();
-        this.created = true;
-    }
-
-    update() {
-        if (!this.created) { return false; }
-        this.instance.update();
-    }
-
-    destroy() {
-        if (!this.created) { return false; }
-        this.instance.destroy();
-    }
-}
-
-export let Instance = new Scrollbar('#admin-main .content-wrapper');
+import 'simplebar';

themes/grav/app/utils/sidebar.js

@@ -1,5 +1,4 @@
 import $ from 'jquery';
-import Scrollbar from './scrollbar';
 import Map from 'es6-map';
 
 const MOBILE_BREAKPOINT = 48 - 0.062;
@@ -17,7 +16,6 @@ export default class Sidebar {
         this.isOpen = false;
         this.body = $('body');
         this.matchMedia = global.matchMedia(MOBILE_QUERY);
-        this.scroller = new Scrollbar('.admin-menu-wrapper', { autoshow: true });
         this.enable();
     }
 
@@ -79,7 +77,6 @@ export default class Sidebar {
         if (event) { event.preventDefault(); }
         let overlay = $('#overlay');
         let sidebar = $('#admin-sidebar');
-        let scrollbar = $('#admin-menu').data('scrollbar');
 
         this.body.addClass('sidebar-mobile-open');
         overlay.css('display', 'block');
@@ -94,15 +91,12 @@ export default class Sidebar {
             sidebar.css({ display: 'block', opacity: 1 });
             this.isOpen = true;
         }
-
-        if (scrollbar) { scrollbar.update(); }
     }
 
     close(event, quick = false) {
         if (event) { event.preventDefault(); }
         let overlay = $('#overlay');
         let sidebar = $('#admin-sidebar');
-        let scrollbar = $('#admin-menu').data('scrollbar');
 
         this.body.removeClass('sidebar-mobile-open');
         overlay.css('display', 'none');
@@ -118,8 +112,6 @@ export default class Sidebar {
             sidebar.css({ opacity: 0, display: 'none' });
             this.isOpen = false;
         }
-
-        if (scrollbar) { scrollbar.update(); }
     }
 
     toggle(event) {

themes/grav/app/whitelabel/compile.js

@@ -3,8 +3,8 @@ import request from '../utils/request';
 
 export default ({ preview = false, exportScss = false, color_scheme = {}, fonts = {}, callback = () => {} } = {}) => {
     let task = exportScss ? 'exportScss' : 'compileScss';
-    console.log(preview, exportScss, task);
-    const URI = `${config.current_url}.json/task:${task}`;
+    // console.log(config);
+    const URI = `${config.base_url_relative}.json/task:${task}`;
     request(URI, {
         method: 'post',
         body: Object.assign({}, preview ? { preview } : null, color_scheme)

themes/grav/css/codemirror/themes/paper.css

@@ -102,14 +102,18 @@
 }
 
 .cm-s-paper .cm-header-1 {
-    font-size: 140%
+    font-size: 180%
 }
 
 .cm-s-paper .cm-header-2 {
-    font-size: 120%
+    font-size: 150%
 }
 
 .cm-s-paper .cm-header-3 {
+    font-size: 130%
+}
+
+.cm-s-paper .cm-header-4 {
     font-size: 110%
 }
 

themes/grav/css/iconpicker.css

@@ -6,7 +6,6 @@
 
 .icon-set {
 	display: none;
-	background: #fff;
 	overflow-y: auto;
 	-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
 	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);

themes/grav/package.json

@@ -24,7 +24,6 @@
     "es6-promise": "^4.2.8",
     "eventemitter3": "^4.0.0",
     "exif-js": "^2.3.0",
-    "gemini-scrollbar": "^1.5.3",
     "immutable": "^3.8.2",
     "immutablediff": "^0.4.4",
     "js-yaml": "^3.13.1",
@@ -35,6 +34,7 @@
     "popper.js": "^1.16.1",
     "rangetouch": "^2.0.0",
     "selectize": "^0.12.6",
+    "simplebar": "^5.2.0",
     "sortablejs": "^1.10.2",
     "speakingurl": "^14.0.1",
     "toastr": "^2.1.4",

themes/grav/scss/preset.scss

@@ -1,5 +1,6 @@
 // Load Third Party Libraries
 @import "configuration/template/base";
+@import "template/modules/scrollbars";
 @import "template/modules/bourbon_essentials";
 @import "template/modules/buttons";
 @import "template/colors";
@@ -1366,8 +1367,6 @@ form {
 
 }
 
-
-
 .grav-mdeditor-content {
     border: 1px solid $form-border;
 }
@@ -1378,14 +1377,6 @@ form {
     }
 }
 
-#admin-main {
-    .grav-editor-preview {
-        h1, h2, h3, h4, h5, h6 {
-            color: darken($content-text, 10%);
-        }
-    }
-}
-
 .primary-accent {
     .ct-chart {
         .ct-series {
@@ -1685,13 +1676,18 @@ body .bootstrap-datetimepicker-widget {
     td {
         word-wrap: break-word;
         &:first-child {
-            color: $button-bg;
+            color: $content-header;
         }
     }
 }
 
 .remodal {
+    @if (lightness($content-bg) < 50) {
+        background: lighten($content-bg, 3%);
+    } @else {
         background: $content-bg;
+    }
+
     color: $content-text;
     // box-shadow: 0 10px 20px rgba(0,0,0,0.5);
 }
@@ -1705,32 +1701,17 @@ body .bootstrap-datetimepicker-widget {
     color: darken($content-text, 20%);
 }
 
-.gm-scrollbar .thumb {
-    @if (lightness($page-bg) <  50) {
-        background-color: rgba($white, 0.2);
-        &:hover, &:active {
-            background-color: rgba($white, 0.3);
-        }
-    } @else {
-        background-color: rgba($black, 0.2);
-        &:hover, &:active {
-            background-color: rgba($black, 0.3);
-        }
-    }
+// Scrollbars
+* {
+    @include native-scrollbars(rgba($content-text, 0.4), $content-bg);
 }
 
-#admin-sidebar .gm-scrollbar .thumb {
-    @if (lightness($nav-bg) < 50) {
-        background-color: rgba($white, 0.2);
-        &:hover, &:active {
-            background-color: rgba($white, 0.3);
-        }
-    } @else {
-        background-color: rgba($black, 0.2);
-        &:hover, &:active {
-            background-color: rgba($black, 0.3);
-        }
-    }
+.simplebar-scrollbar:before {
+    background-color: $page-text;
+}
+
+#admin-sidebar .simplebar-scrollbar:before {
+    background-color: $nav-text;
 }
 
 #page-filtering {
@@ -2279,6 +2260,12 @@ body .bootstrap-datetimepicker-widget {
     }
 }
 
+// Icon Picker
+.icon-set {
+    background: lighten($content-bg, 2%);
+}
+
+
 // Cron field
 .jqCron-cross,
 .jqCron-selector-title {

themes/grav/scss/template.scss

@@ -99,6 +99,9 @@
 // Whitelabel
 @import "template/whitelabel";
 
+// Horizontal Scroll
+@import "template/scrollbars";
+
 // Horizontal Scroll
 @import "template/horizontal-scroll";
 

themes/grav/scss/template/_admin.scss

@@ -434,7 +434,7 @@ $content-padding: 1.5rem;
 
 .admin-menu-wrapper {
     height: calc(100vh - 180px);
-    overflow: hidden;
+    //overflow: hidden;
 
     @include breakpoint(mini-nav-range) {
         height: calc(100vh - 136px);
@@ -729,17 +729,10 @@ body.sidebar-quickopen #admin-main {
     }
 
     .content-wrapper {
-        position: relative;
-        overflow-y: hidden;
+        //position: relative;
+        //overflow-y: hidden;
         height: calc(100vh - #{$topbar-height});
         //z-index: 0;
-
-        .gm-scrollbar.-vertical {
-            right: 5px;
-            top: 5px;
-            width: 8px;
-            border-radius: 4px;
-        }
     }
 
     .content-padding {

themes/grav/scss/template/_editor.scss

@@ -200,18 +200,49 @@
     }
 }
 
-#admin-main {
+#admin-main .admin-block {
     .grav-editor-preview {
         padding: 20px;
         overflow-y: scroll;
         position: relative;
-        background: #fff;
         line-height: 1.5;
+        background: #fff !important;
+        color: #555 !important;
+
+        a {
+            color: #1c90fb !important;
+        }
+
+        h1 {
+            font-size: 36px;
+        }
+
+        h2 {
+            font-size: 28px;
+        }
+
+        h3 {
+            font-size: 22px;
+        }
+
+        h4 {
+            font-size: 18px;
+        }
+
+        h5 {
+            font-size: 16px;
+        }
+
+        h6 {
+            font-size: 14px;
+        }
 
         h1, h2, h3, h4, h5, h6 {
             padding: 0;
-            margin: 2rem 0 1rem;
+            margin: 0.5rem 0;
             border-bottom: 0 !important;
+            color: #333 !important;
+            font-weight: bold;
         }
 
         p {
@@ -221,6 +252,28 @@
 
         pre {
             padding: 1rem;
+            code {
+                color: #1c90fb;
+                font-size: 14px;
+            }
+        }
+
+        blockquote {
+            border-color: #ccc !important;
+            background-color: #f0f0f0 !important;
+            p {
+                color: #444 !important;
+            }
+        }
+
+        hr {
+            border-color: #eee !important;
+        }
+
+        table {
+            td, th, tr {
+                border-color: #eee !important;
+            }
         }
 
     }

themes/grav/scss/template/_scrollbars.scss

@@ -0,0 +1,210 @@
+[data-simplebar] {
+    position: relative;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-content: flex-start;
+    align-items: flex-start;
+}
+
+.simplebar-wrapper {
+    overflow: hidden;
+    width: inherit;
+    height: inherit;
+    max-width: inherit;
+    max-height: inherit;
+}
+
+.simplebar-mask {
+    direction: inherit;
+    position: absolute;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: auto !important;
+    height: auto !important;
+    z-index: 0;
+}
+
+.simplebar-offset {
+    direction: inherit !important;
+    box-sizing: inherit !important;
+    resize: none !important;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    padding: 0;
+    margin: 0;
+    -webkit-overflow-scrolling: touch;
+}
+
+.simplebar-content-wrapper {
+    direction: inherit;
+    box-sizing: border-box !important;
+    position: relative;
+    display: block;
+    height: 100%; /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */
+    width: auto;
+    max-width: 100%; /* Not required for horizontal scroll to trigger */
+    max-height: 100%; /* Needed for vertical scroll to trigger */
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+.simplebar-content-wrapper::-webkit-scrollbar,
+.simplebar-hide-scrollbar::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+}
+
+.simplebar-content:before,
+.simplebar-content:after {
+    content: ' ';
+    display: table;
+}
+
+.simplebar-placeholder {
+    max-height: 100%;
+    max-width: 100%;
+    width: 100%;
+    pointer-events: none;
+}
+
+.simplebar-height-auto-observer-wrapper {
+    box-sizing: inherit !important;
+    height: 100%;
+    width: 100%;
+    max-width: 1px;
+    position: relative;
+    float: left;
+    max-height: 1px;
+    overflow: hidden;
+    z-index: -1;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+    flex-grow: inherit;
+    flex-shrink: 0;
+    flex-basis: 0;
+}
+
+.simplebar-height-auto-observer {
+    box-sizing: inherit;
+    display: block;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 1000%;
+    width: 1000%;
+    min-height: 1px;
+    min-width: 1px;
+    overflow: hidden;
+    pointer-events: none;
+    z-index: -1;
+}
+
+.simplebar-track {
+    z-index: 1;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    overflow: hidden;
+}
+
+[data-simplebar].simplebar-dragging .simplebar-content {
+    pointer-events: none;
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+[data-simplebar].simplebar-dragging .simplebar-track {
+    pointer-events: all;
+}
+
+.simplebar-scrollbar {
+    position: absolute;
+    left: 0;
+    right: 0;
+    min-height: 10px;
+}
+
+.simplebar-scrollbar:before {
+    position: absolute;
+    content: '';
+    border-radius: 7px;
+    left: 2px;
+    right: 2px;
+    opacity: 0;
+    transition: opacity 0.2s linear;
+}
+
+.simplebar-scrollbar.simplebar-visible:before {
+    /* When hovered, remove all transitions from drag handle */
+    opacity: 0.3;
+    transition: opacity 0s linear;
+}
+
+.simplebar-track.simplebar-vertical {
+    top: 0;
+    width: 11px;
+}
+
+.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
+    top: 2px;
+    bottom: 2px;
+}
+
+.simplebar-track.simplebar-horizontal {
+    left: 0;
+    height: 11px;
+}
+
+.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
+    height: 100%;
+    left: 2px;
+    right: 2px;
+}
+
+.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
+    right: auto;
+    left: 0;
+    top: 2px;
+    height: 7px;
+    min-height: 0;
+    min-width: 10px;
+    width: auto;
+}
+
+/* Rtl support */
+[data-simplebar-direction='rtl'] .simplebar-track.simplebar-vertical {
+    right: auto;
+    left: 0;
+}
+
+.hs-dummy-scrollbar-size {
+    direction: rtl;
+    position: fixed;
+    opacity: 0;
+    visibility: hidden;
+    height: 500px;
+    width: 500px;
+    overflow-y: hidden;
+    overflow-x: scroll;
+}
+
+.simplebar-hide-scrollbar {
+    position: fixed;
+    left: 0;
+    visibility: hidden;
+    overflow-y: scroll;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}

themes/grav/scss/template/modules/_base.scss

@@ -1,6 +1,5 @@
 @import "buttons";
-@import "toggle-switch";
-@import "datetimepicker";
-@import "scrollbars";
 @import "colorpicker";
+@import "datetimepicker";
 @import "finderjs";
+@import "toggle-switch";

themes/grav/scss/template/modules/_scrollbars.scss

@@ -1,98 +1,18 @@
-/**
- * gemini-scrollbar
- * @version 1.3.2
- * @link http://noeldelgado.github.io/gemini-scrollbar/
- * @license MIT
- */
+@mixin native-scrollbars($bar, $track) {
+    & {
+        scrollbar-width: thin;
+        scrollbar-color: $bar $track;
+    }
 
-/* disable selection while dragging */
-.gm-scrollbar-disable-selection {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-/* fallback for native floating scrollbars */
-.gm-prevented {
-    -webkit-overflow-scrolling: touch;
-}
-.gm-prevented .gm-scrollbar {
-    display: none;
-}
-
-/* actual gemini-scrollbar styles */
-.gm-scrollbar-container {
-    position: relative;
-    overflow: hidden!important;
-    width: 100%;
-    height: 100%;
-}
-
-.gm-scrollbar {
-    position: absolute;
-    right: 2px;
-    bottom: 2px;
-    z-index: 2;
-    border-radius: 3px;
-}
-
-.gm-scrollbar.-vertical {
+    /* Works on Chrome/Edge/Safari */
+    &::-webkit-scrollbar {
         width: 6px;
-    top: 2px;
-}
-
-.gm-scrollbar.-horizontal {
         height: 6px;
-    left: 2px;
-}
-
-.gm-scrollbar .thumb {
-    position: relative;
-    display: block;
-    width: 0;
-    height: 0;
-    cursor: pointer;
-    border-radius: inherit;
-}
-
-.gm-scrollbar.-vertical .thumb {
-    width: 100%;
-}
-
-.gm-scrollbar.-horizontal .thumb {
-    height: 100%;
-}
-
-.gm-scrollbar-container .gm-scroll-view {
-    width: 100%;
-    height: 100%;
-    overflow: scroll;
-    -webkit-overflow-scrolling: touch;
-}
-
-/* @option: autoshow */
-.gm-scrollbar-container.gm-autoshow .gm-scrollbar {
-    opacity: 0;
-    transition: opacity 120ms ease-out;
-}
-.gm-scrollbar-container.gm-autoshow:hover .gm-scrollbar,
-.gm-scrollbar-container.gm-autoshow:focus .gm-scrollbar {
-    opacity: 1;
-    transition: opacity 340ms ease-out;
-}
-
-.gm-resize-trigger {
-    position: absolute;
-    display: block;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-    pointer-events: none;
-    z-index: -1;
-    visibility: hidden;
+    }
+    &::-webkit-scrollbar-track {
+        background: $track;
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: $bar;
+    }
 }

themes/grav/templates/partials/base-root.html.twig

@@ -32,6 +32,15 @@
         {{ assets.css()|raw }}
         {{ assets.js()|raw }}
     {% endblock %}
+
+    <noscript>
+        <style>
+            .simplebar-content-wrapper {
+                overflow: auto;
+            }
+        </style>
+    </noscript>
+
     </head>
     {% block body %}
     <body class="ga-theme-17x {{ config.plugins.admin.sidebar.size == 'small' ? 'sidebar-closed' : '' }} {{ config.plugins.admin.body_classes }} {{ body_classes }}">
@@ -58,7 +67,7 @@
                 </div>
 
                 {% block content_wrapper %}
-                <div class="content-wrapper">
+                <div data-simplebar class="content-wrapper">
                     <div class="{% if config.plugins.admin.content_padding %}content-padding{% endif %}">
                         {% block messages %}
                             {% include 'partials/messages.html.twig' %}

themes/grav/templates/partials/nav.html.twig

@@ -13,7 +13,7 @@
 
         {% include 'partials/nav-quick-tray.html.twig' %}
 
-        <div class="admin-menu-wrapper">
+        <div data-simplebar class="admin-menu-wrapper">
             <ul id="admin-menu">
                 {% for label, item in grav.twig.plugins_hooked_nav %}
                     {% set route = (item.route ?? item.location)|trim('/') %}

themes/grav/yarn.lock

@@ -1248,6 +1248,11 @@ camelcase@^5.0.0, camelcase@^5.3.1:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
+can-use-dom@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/can-use-dom/-/can-use-dom-0.1.0.tgz#22cc4a34a0abc43950f42c6411024a3f6366b45a"
+  integrity sha1-IsxKNKCrxDlQ9CxkEQJKP2NmtFo=
+
 caniuse-api@^1.5.2:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.6.1.tgz#b534e7c734c4f81ec5fbe8aca2ad24354b962c6c"
@@ -1629,6 +1634,11 @@ core-js@^2.4.0, core-js@^2.5.0:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
   integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
 
+core-js@^3.0.1:
+  version "3.6.5"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
+  integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==
+
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -1989,9 +1999,9 @@ ecc-jsbn@~0.1.1:
     safer-buffer "^2.1.0"
 
 electron-to-chromium@^1.2.7:
-  version "1.3.431"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.431.tgz#705dd8ef46200415ba837b31d927cdc1e43db303"
-  integrity sha512-2okqkXCIda7qDwjYhUFxPcQdZDIZZ/zBLDzVOif7WW/TSNfEhdT6SO07O1x/sFteEHX189Z//UwjbZKKCOn2Fg==
+  version "1.3.432"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.432.tgz#3bf7b191978ff2e8bc3caf811bb52b1e9f9eab25"
+  integrity sha512-/GdNhXyLP5Yl2322CUX/+Xi8NhdHBqL6lD9VJVKjH6CjoPGakvwZ5CpKgj/oOlbzuWWjOvMjDw1bBuAIRCNTlw==
 
 emoji-regex@^7.0.1:
   version "7.0.3"
@@ -2690,11 +2700,6 @@ gaze@^1.0.0:
   dependencies:
     globule "^1.0.0"
 
-gemini-scrollbar@^1.5.3:
-  version "1.5.3"
-  resolved "https://registry.yarnpkg.com/gemini-scrollbar/-/gemini-scrollbar-1.5.3.tgz#7abc916e103e11f983f15856ef8c583cedef95cf"
-  integrity sha512-3Q4SrxkJ+ei+I5PlcRZCfPePv3EduP7xusOWp7Uw0+XywEWred7Nq9hoaP2IQh1vRjoidaVODV3rO3icFH/e5A==
-
 get-caller-file@^2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
@@ -3965,6 +3970,11 @@ lodash.clonedeep@^4.3.2:
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
   integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
+
 lodash.escape@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-3.2.0.tgz#995ee0dc18c1b48cc92effae71a10aab5b487698"
@@ -4024,6 +4034,11 @@ lodash.templatesettings@^3.0.0:
     lodash._reinterpolate "^3.0.0"
     lodash.escape "^3.0.0"
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -5886,6 +5901,11 @@ requireg@^0.2.2:
     rc "~1.2.7"
     resolve "~1.7.1"
 
+resize-observer-polyfill@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-dir@^1.0.0, resolve-dir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/resolve-dir/-/resolve-dir-1.0.1.tgz#79a40644c362be82f26effe739c9bb5382046f43"
@@ -6153,6 +6173,18 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
   integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
 
+simplebar@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/simplebar/-/simplebar-5.2.0.tgz#032e6e435032a0a6f26146f190bdd1095d5a9d2f"
+  integrity sha512-CpVSINCQ/XAYABUdUAnVWHyjkBYoFu+s12IUrZgVNfXzILNXP0MP+5OaIBjylzjYxIE/rsuC1K50/xJldPGGpQ==
+  dependencies:
+    can-use-dom "^0.1.0"
+    core-js "^3.0.1"
+    lodash.debounce "^4.0.8"
+    lodash.memoize "^4.1.2"
+    lodash.throttle "^4.1.1"
+    resize-observer-polyfill "^1.5.1"
+
 sisteransi@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"