Initial commit

resources/scripts/nextbestnetwork.js

@@ -0,0 +1,6 @@
+import 'jquery';
+import 'bootstrap';
+import 'masonry-layout';
+
+import './nextbestnetwork/nextbestnetwork'
+import './nextbestnetwork/darkmode'

resources/scripts/nextbestnetwork/darkmode.js

@@ -0,0 +1,82 @@
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2025 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+(() => {
+    'use strict'
+
+    const getStoredTheme = () => localStorage.getItem('theme')
+    const setStoredTheme = theme => localStorage.setItem('theme', theme)
+
+    const getPreferredTheme = () => {
+        const storedTheme = getStoredTheme()
+
+        console.log("Found stored theme: ", storedTheme);
+        if (storedTheme) {
+            return storedTheme
+        }
+
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+    }
+
+    const setTheme = theme => {
+        if (theme === 'auto') {
+            document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
+        } else {
+            document.documentElement.setAttribute('data-bs-theme', theme)
+        }
+    }
+
+    setTheme(getPreferredTheme())
+
+    const showActiveTheme = (theme, focus = false) => {
+        const themeSwitcher = document.querySelector('#bd-theme')
+
+        if (!themeSwitcher) {
+            return
+        }
+
+        const themeSwitcherText = document.querySelector('#bd-theme-text')
+        const activeThemeIcon = document.querySelector('.theme-icon-active use')
+        const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+        const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
+
+        document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+            element.classList.remove('active')
+            element.setAttribute('aria-pressed', 'false')
+        })
+
+        btnToActive.classList.add('active')
+        btnToActive.setAttribute('aria-pressed', 'true')
+        activeThemeIcon.setAttribute('href', svgOfActiveBtn)
+        const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
+        themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
+
+        if (focus) {
+            themeSwitcher.focus()
+        }
+    }
+
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        const storedTheme = getStoredTheme()
+        if (storedTheme !== 'light' && storedTheme !== 'dark') {
+            setTheme(getPreferredTheme())
+        }
+    })
+
+    window.addEventListener('DOMContentLoaded', () => {
+        showActiveTheme(getPreferredTheme())
+
+        document.querySelectorAll('[data-bs-theme-value]')
+            .forEach(toggle => {
+                toggle.addEventListener('click', () => {
+                    const theme = toggle.getAttribute('data-bs-theme-value')
+                    setStoredTheme(theme)
+                    setTheme(theme)
+                    showActiveTheme(theme, true)
+                })
+            })
+    })
+})()

resources/scripts/nextbestnetwork/nextbestnetwork.js

@@ -0,0 +1,153 @@
+jQuery(document).ready(function ($) {
+
+  /**
+   * TOOLTIPS
+   */
+  if(mw.config.get('wgNextBestNetworkSkinUseTooltips') === true ) {
+    // initialize tooltips
+    $(document).ready(function() {
+      $('[data-bs-toggle="tooltip"]').tooltip();
+      $('[data-toggle="tooltip"]').tooltip(); // for backwards compatibility
+
+      // Page Forms: tooltips for multiple instance forms
+      $('.addAboveButton, .removeButton').tooltip();
+      $(document).on('click', '.multipleTemplateAdder', function(e) {
+        $('.addAboveButton, .removeButton').tooltip();
+      });
+    });
+  }
+
+
+  /**
+   * FOOTER
+   */
+  // move sticky footer to bottom if the document is smaller than window
+  function checkFooter() {
+    if( $( '#footer.footer-sticky' ).length == 1 ) { // only if footer is sticky
+      $( 'body' ).css( 'margin-bottom', 0 );
+      // TODO: value shouldn't be hardcoded - use padding on #contentwrapper instead
+      var minmargin = 50;
+      var currentmargin = $( '#footer.footer-sticky' ).css( 'margin-top' );
+      currentmargin = Number( currentmargin.replace( 'px', '' ) );
+      var additionalmargin = $( window ).height() - $( 'body' ).height();
+      var newmargin = Math.max( currentmargin + additionalmargin, minmargin );
+      $( '#footer.footer-sticky' ).css( 'margin-top', newmargin + 'px' );
+    }
+  }
+
+  // fade in initially hidden sticky footer
+  checkFooter();
+  $( '#footer.footer-sticky' ).animate( { opacity: 1 }, 1000 );
+
+  // correct sticky footer on resize
+  $(window).resize(function() {
+    checkFooter();
+  });
+
+  // correct sticky footer on tab toggle
+  $(document).on('shown.bs.tab', function (e) {
+    checkFooter();
+  });
+
+  // correct bottom margin for body when fixed footer
+  if( $( '#footer.footer-fixed' ).length == 1 ) {
+    var footerheight = $( '#footer' ).outerHeight();
+    $( 'body' ).css( 'margin-bottom', footerheight );
+  }
+
+
+  /**
+   * TOC
+   */
+  // set scroll-padding according to the content's offset
+  var offset = $('#contentwrapper').css('padding-top');
+  $('html, body').css('scroll-padding-top', offset);
+
+  // move TOC elsewhere
+  if( $( "#nextbestnetworkTOC" ).length == 1 && $( "#toc" ).length == 1 ) {
+    // toc copies
+    $( '.nextbestnetwork-toc' ).each( function() {
+      $(this).append( $( "#toc ul" ).clone() );
+    });
+
+    // to other place than sidebar?
+    // var is_sidebar =
+    if( $( "#nextbestnetworkTOC" ).parents("[id^='sidebar']").length != 1 ) {
+      $( "#toc li" ).appendTo( "#nextbestnetworkTOC" );
+      $( "#nextbestnetworkDropdownTOC" ).show();
+    }
+    // or to sidebar?
+    else {
+      $( "#toc" ).appendTo( "#nextbestnetworkTOC" );
+      $( "#toctitle, .toctitle" ).insertBefore( "#toc" ).children( "h2" )
+        .append( '<a href="javascript:scrollTo(0,0);">' + mw.message( 'nextbestnetwork-toc-top' ).plain() + '</a>' );
+      /* do we need this? could cause problems on small screens */
+      /* $(window).resize(function() {
+        $("#nextbestnetworkTOC").height($(window).height()-$("#nextbestnetworkTOC").position().top-130);
+      }).resize(); */
+
+      // show toc (hidden by default)
+      $( "#toc" ).css( 'display', 'table' );
+
+      // start scrollspy
+      $('#toc ul')
+        .addClass('nav flex-column')
+
+      $('#toc ul a')
+        .addClass('nav-link')
+
+      $('body')
+        .scrollspy({target: '#toc ul', offset: parseInt( offset ) + 10});
+      }
+    }
+
+
+  /**
+   * LOGIN-EXT
+   */
+  // don't close dropdown when clicking in the login form
+  $( "#loginext" ).click( function( e ) {
+    e.stopPropagation();
+  });
+
+  // focus user name field
+  $( "#n-login-ext" ).click( function() {
+    if( ! $( this ).parent().hasClass( "open" ) ) {
+      setTimeout( '$( "#wpName2" ).focus();', 100 );
+    }
+  });
+
+
+
+  /**
+   * Fix VisualEditor scroll stickiness
+   *
+   * Had to use the child-parent methods below because the oo-ui-toolbar-bar
+   * class exists on multiple divs.
+   *
+   * The code calculates the navbar height and uses that number as the 'top'
+   * CSS attribute. This calculation is probably moot as it doesn't appear
+   * that the skin, or VisualEditor plays well on screen resolutions less
+   * than 1024 pixels wide. Left the code this way in case something with
+   * VE changes in the future.
+   *
+   **/
+   $(window).scroll( function ( e ) {
+     // Check to see if the navbar-fixed-top class exists. If it
+     // does then the navbar is fixed and run this code if
+     if ( $( '.navbar-fixed-top').length ) {
+      var $el = $('.oo-ui-toolbar-bar > .oo-ui-toolbar-actions');
+      var $headerheight = $('#mw-navigation').innerHeight();
+      var isPositionFixed = ($el.parent().css('position') == 'fixed');
+
+      if ($(this).scrollTop() > $headerheight && !isPositionFixed){
+        $el.parent().css( 'top', $headerheight );
+      }
+
+      if ($(this).scrollTop() < $headerheight )
+      {
+        $el.parent().css( 'top', '');
+      }
+     }
+  });
+});

resources/styles/nextbestnetwork.scss

@@ -0,0 +1,7 @@
+@import "nextbestnetwork/variables";
+
+@import "~bootstrap/scss/bootstrap";
+
+@import "~bootstrap-icons/font/bootstrap-icons";
+
+@import "nextbestnetwork/index";

resources/styles/nextbestnetwork/_buttons.scss

@@ -0,0 +1,130 @@
+input[type=submit], input[type=button] {
+  @extend .btn;
+  @extend .btn-secondary;
+
+  &[name=wpUpload] {
+    @extend .btn-primary;
+  }
+}
+
+// UI buttons (e.g. in the login form)
+#maincontentwrapper {
+  .mw-ui-button.mw-ui-progressive {
+    @extend .btn;
+    @extend .btn-primary;
+  }
+}
+
+/*.btn-default:active,
+.btn-default.active,*/
+input[type=submit]:active, input[type=button]:active,
+input[type=submit].active, input[type=button].active {
+  // @extend .btn;
+  // @extend .btn-secondary;
+}
+
+/*.btn-default {* /
+input[type=submit], input[type=button] {
+  text-shadow: 0 1px 0 #fff;
+  background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%);
+  background-image:      -o-linear-gradient(top, #fff 0%, #e0e0e0 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0));
+  background-image:         linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #dbdbdb;
+  border-color: #ccc;
+}
+/*.btn-default:hover,
+.btn-default:focus {* /
+input[type=submit]:hover, input[type=button]:hover,
+input[type=submit]:focus, input[type=button]:focus {
+  background-color: #e0e0e0;
+  background-position: 0 -15px;
+}
+/*.btn-default:active,
+.btn-default.active {* /
+input[type=submit]:active, input[type=button]:active,
+input[type=submit].active, input[type=button].active {
+  background-color: #e0e0e0;
+  border-color: #dbdbdb;
+}
+/*.btn-default.disabled,
+.btn-default:disabled,
+.btn-default[disabled] {* /
+input[type=submit]:disabled, input[type=button]:disabled,
+input[type=submit].disabled, input[type=button].disabled,
+input[type=submit][disabled], input[type=button][disabled] {
+  background-color: #e0e0e0;
+  background-image: none;
+}
+/**/
+
+
+
+body #contentwrapper #maincontentwrapper {
+  .oo-ui-buttonElement {
+    & > * {
+      font-weight: normal !important;
+    }
+  }
+
+  // Buttons on page edit
+  input.oo-ui-buttonElement-button,
+  button.oo-ui-buttonElement-button {
+    @extend .btn;
+    @extend .btn-primary;
+  }
+
+  // Buttons in preferences (e.g. for changing password)
+  label a.oo-ui-buttonElement-button {
+    @extend .btn;
+    @extend .btn-secondary;
+  }
+
+  // Cancel link on page edit
+  .cancelLink .oo-ui-buttonElement-button {
+    @extend .btn-link;
+
+    &:hover,
+    &:active,
+    &.active,
+    &:focus,
+    &.focus {
+      background-color:transparent;
+    }
+  }
+
+  // Button and icons on page forms
+  input, button {
+    &[name=wpPreview], &[name=wpDiff], &[name=add_section] {
+      @extend .btn-primary;
+    }
+  }
+  .oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button {
+    @extend .btn-danger;
+  }
+
+  button .oo-ui-iconElement-icon {
+    // Apply fa styles for icons inside buttons
+    display: contents;
+
+    &:before {
+      font-family: "Font Awesome 5 Free";
+      font-weight: $font-weight-bold;
+    }
+
+    &.oo-ui-icon-subtract:before {
+      content: "\f068"; // fa-minus
+    }
+
+    &.oo-ui-icon-add:before {
+      content: "\2b"; // fa-plus
+    }
+
+    &+.oo-ui-labelElement-label::before {
+      content: " ";
+    }
+  }
+}

resources/styles/nextbestnetwork/_editors.scss

@@ -0,0 +1,16 @@
+/**
+ * VisualEditor
+ */
+
+.ve-ui-toolbar *,
+.ve-ui-overlay * {
+  box-sizing:content-box;
+}
+
+
+// Modals above Navbar
+.oo-ui-windowManager-modal,
+.wikiEditor-toolbar-dialog,
+.ve-ui-overlay-global {
+  z-index: 1031 !important;
+}

resources/styles/nextbestnetwork/_footer.scss

@@ -0,0 +1,31 @@
+#footer {
+  display: block;
+  background: $gray-200;
+  margin-top: auto !important;
+  padding-top: $spacer;
+  padding-bottom: $spacer * 3;
+  font-size: 0.75rem; // $font-size-xs;
+
+  a {
+    color: $gray-600;
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+      color: $gray-800;
+      cursor: pointer;
+    }
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: $spacer 0;
+    color: $gray-600;
+
+    li#footer-poweredbyico {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}

resources/styles/nextbestnetwork/_forms.scss

@@ -0,0 +1,65 @@
+body #contentwrapper #maincontentwrapper {
+	.oo-ui-textInputWidget .oo-ui-inputWidget-input {
+		@extend .form-control;
+	}
+
+	.oo-ui-textInputWidget.oo-ui-iconElement .oo-ui-inputWidget-input {
+		padding-left: 2.42857143em;
+	}
+
+	.oo-ui-textInputWidget.oo-ui-indicatorElement .oo-ui-inputWidget-input {
+		padding-right: 28px;
+	}
+
+	.oo-ui-textInputWidget.oo-ui-comboBoxInputWidget .oo-ui-inputWidget-input {
+		border-top-right-radius:0;
+		border-bottom-right-radius:0;
+	}
+
+	.mw-ui-checkbox:not(#noop) [type="checkbox"]:enabled:checked + label::before {
+		background-color:$primary;
+		border-color:$primary;
+	}
+}
+
+
+// Form elements (e.g. in the upload form)
+.mw-htmlform-field-HTMLTextField input {
+	@extend .form-control;
+}
+.mw-input {
+	textarea,
+	select {
+		@extend .form-control;
+	}
+	select {
+		background-color:transparent;
+	}
+}
+
+
+// datepicker
+.pfPickerWrapper {
+	display: inline-block;
+}
+.pfDatePicker.oo-ui-textInputWidget {
+	width:200px;
+}
+
+.oo-ui-checkboxInputWidget + t {
+	margin-left:8px;
+}
+
+// ugly hack: without it, checkboxes are only partly clickable
+.oo-ui-checkboxInputWidget {
+	width: 1.42857143em;
+}
+#maincontentwrapper #pfForm select, 
+#maincontentwrapper #pfForm input[type="checkbox"] {
+	width: 100% !important;
+}
+
+
+.multipleTemplateInstance {
+	background-color:$light !important;
+}

resources/styles/nextbestnetwork/_history.scss

@@ -0,0 +1,28 @@
+#contentSub br {
+  display: none;
+}
+
+#mw-revision-info,
+#mw-revision-nav {
+  background: #f6f6f6;
+  border: 1px solid #eee;
+  display: block;
+  margin: 0 auto;
+  padding: 20px;
+  text-align: center;
+  width: auto;
+}
+
+#mw-revision-info {
+  border-bottom: none;
+  border-radius: 6px 6px 0 0;
+  font-size: 16px;
+  padding-bottom: 0.25em;
+}
+
+#mw-revision-nav {
+  border-radius: 0 0 6px 6px;
+  border-top: none;
+  margin-top: 0;
+  padding-top: 0;
+}

resources/styles/nextbestnetwork/_index.scss

@@ -0,0 +1,11 @@
+@import "navigation";
+@import "toc";
+@import "footer";
+@import "buttons";
+@import "forms";
+@import "history";
+@import "loginext";
+@import "preferences";
+@import "editors";
+@import "overwrites";
+@import "print";

resources/styles/nextbestnetwork/_loginext.scss

@@ -0,0 +1,36 @@
+/**
+ * LOGIN-EXT
+ */
+
+#loginext {
+  padding:0 10px;
+}
+
+@include media-breakpoint-up(md) {
+  #loginext {
+    width:250px;
+  }
+}
+
+#loginext .form-group {
+    margin-bottom:2px;
+}
+
+#loginext #wpLoginAttempt2 {
+    margin-top:8px;
+    margin-bottom:5px;
+}
+
+#loginext label {
+    margin-bottom: 3px;
+}
+
+#tw-createaccount {
+  text-align:center;
+}
+
+.dropdown-menu > li#tw-createaccount > a:hover,
+.dropdown-menu > li#tw-createaccount > a:focus {
+  color:#000;
+  background-color:transparent;
+}

resources/styles/nextbestnetwork/_navigation.scss

@@ -0,0 +1,5 @@
+// correct margins for tabs
+.mw-content-ltr ul.nav-tabs, 
+.mw-content-rtl .mw-content-ltr ul.nav-tabs {
+	margin:0;
+}

resources/styles/nextbestnetwork/_overwrites.scss

@@ -0,0 +1,548 @@
+
+/**
+ * Grid spacing
+ */
+
+// #contentwrapper {
+//   padding-top: $spacer * 3;
+//   padding-bottom: $spacer * 3;
+//   min-height: 70vh;
+// }
+
+#maincontentwrapper {
+  overflow-wrap:break-word; // headings and content that is to long should break
+}
+
+
+@include media-breakpoint-up(md) {
+  #sidebar {
+    &-right {
+      order:2;
+    }
+    &-left {
+      order:0;
+    }
+  }
+  #maincontentwrapper {
+    order:1;
+  }
+}
+
+.navbar {
+  .form-group {
+    // margin-bottom: 0;
+  }
+
+  .nav.icon {
+    @extend .nav-item;
+  }
+}
+
+
+// #ca-unwatch,
+// #ca-watch {
+//   &.icon a {
+//     width: $spacer;
+//     height: $spacer;
+//     display: inline-block;
+//     background: fuchsia;
+//   }
+// }
+
+html {
+  height: 100% !important;
+}
+
+body {
+  height: 100% !important;
+  display: flex !important;
+  flex-direction: column !important;
+
+  .formtable {
+    @extend .table;
+  }
+
+  .oo-ui {
+    &-widget-enabled {
+      [type="checkbox"] {
+        &:checked {
+          & + span {
+            background-color: $primary !important;
+            border-color: $primary !important;
+          }
+        }
+      }
+    }
+  }
+
+  .editButtons {
+    .editHelp {
+      margin: $spacer * 0.5 0 $spacer;
+      display: block;
+      width: 100%;
+      font-size: $font-size-sm;
+      color: $gray-600;
+
+      a {
+        font-weight: normal;
+        color: $gray-600;
+        text-decoration: underline;
+
+        &:hover {
+          color: $gray-800;
+        }
+      }
+    }
+  }
+
+
+  /**
+   * Tabs
+   */
+
+  .nav {
+    &-tabs {
+      //
+    }
+  }
+
+
+  /**
+   * Sidebar
+   */
+
+  #sidebar {
+    &-right,
+    &-left {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  main {
+    margin-bottom: $spacer * 3;
+  }
+
+  #content {
+    //padding: 0 $spacer * 2 0 0;
+  }
+
+
+  /**
+   * Cookie Warning
+   */
+  .mw-cookiewarning-container {
+    top:unset;
+    bottom:0;
+    text-align:center;
+  }
+
+  .mw-editsection-bracket {
+    display:none;
+  }
+}
+
+
+
+
+/**
+ * NextBestNetwork Base (less import)
+ */
+
+/**
+ * NextBestNetwork screen styles
+ *
+ * part of this has been taken from Garret LeSage's Strapping
+ */
+
+
+/**
+ * CONTENT
+ */
+
+#content {
+  clear:both;
+  margin-bottom:1em;
+  padding-top:.5em;
+  padding-bottom:1em;
+
+  a {
+    text-decoration:none;
+
+    &:hover {
+      text-decoration:underline;
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  #content {
+    padding:1em 2em;
+    -moz-border-radius:5px;
+    -webkit-border-radius:5px;
+    border-radius:5px;
+  }
+}
+
+
+
+/**
+ * CORRECTION FOR MAIN CONTENT
+ */
+.with-navbar {
+}
+
+.without-navbar {
+  padding-top:20px;
+}
+
+.with-navbar.with-navbar-fixed {
+  padding-top: 60px;
+}
+@media (min-width: 768px) {
+  .with-navbar.with-navbar-fixed #maincontentwrapper {
+    padding-top:30px;
+  }
+}
+
+/* navigation - accessibility */
+#mw-navigation h2 {
+    position: absolute;
+    top: -9999px;
+}
+
+/* image in brand */
+.navbar-brand img {
+  height:40px;
+  margin-top:-10px;
+}
+
+/* correction for searchform in navbar */
+#searchform + .navbar-nav.navbar-right:last-child {
+    margin-right: 0;
+}
+
+/* correction for dropdowns (conflicting with mediawiki.legacy.shared) */
+.mw-content-ltr ul.dropdown-menu {
+  margin: 2px 0 0;
+  padding: 5px 0;
+}
+
+/* correction for selflinks in dropdowns (they're no links actually) */
+.dropdown-menu > li > .selflink {
+  padding: 3px 20px;
+  display: block;
+}
+
+/* correction for uls */
+.mw-content-ltr,
+.mw-content-rtl {
+  .mw-parser-output {
+    > ul {
+      margin: 0.3em 0 0.6em 1.6em;
+    }
+  }
+}
+
+/**
+ * SMALL CORRECTIONS
+ */
+
+/* postedit: would otherwise be hidden behind navbar */
+.postedit {
+  top: 5em !important;
+}
+
+/* editsectionlink: hide brackets */
+.mw-editsection-bracket {
+  display:none;
+}
+
+/* show editsectionlink only on hover */
+.tw-editsection-onhover,
+.tw-editsection-onhover + .mw-editsection-divider {
+  display:none;
+  color:#ccc;
+}
+.tw-editsection-onhover:hover,
+.tw-editsection-onhover:focus {
+  color:#666;
+  text-decoration:none;
+}
+.mw-editsection {
+  vertical-align:middle;
+}
+.mw-editable {
+	h1:hover .tw-editsection-onhover,
+	h2:hover .tw-editsection-onhover,
+	h3:hover .tw-editsection-onhover,
+	h4:hover .tw-editsection-onhover,
+	h5:hover .tw-editsection-onhover,
+	h6:hover .tw-editsection-onhover {
+	  display:inline-block;
+	}
+	h1:hover .tw-editsection-onhover + .mw-editsection-divider,
+	h2:hover .tw-editsection-onhover + .mw-editsection-divider,
+	h3:hover .tw-editsection-onhover + .mw-editsection-divider,
+	h4:hover .tw-editsection-onhover + .mw-editsection-divider,
+	h5:hover .tw-editsection-onhover + .mw-editsection-divider,
+	h6:hover .tw-editsection-onhover + .mw-editsection-divider {
+	  display:inline-block;
+	}
+}
+
+/* hide categories */
+#catlinks {
+  display:none;
+}
+
+/* make edit window bigger */
+#wpTextbox1 {
+  width:100%;
+}
+
+/* adjust upload description */
+#wpUploadDescription {
+  width:100%;
+}
+
+.firstHeading,
+.nextbestnetworkFirstHeading {
+  text-align:center;
+  margin-bottom:15px;
+  margin-top:10px;
+  font-weight:600;
+  letter-spacing:-.01em;
+}
+
+// obsolete since MW 1.39
+.firstHeading .namespace {
+  font-weight:300;
+}
+
+.mw-page-title-namespace {
+  font-weight:300;
+}
+.mw-page-title-separator {
+  font-weight:300;
+  margin-right:( $spacer * .25 );
+}
+
+/* Hide empty portlets */
+div.emptyPortlet {
+  display: none;
+}
+
+/* Sub-navigation */
+#siteSub {
+  display: none;
+}
+
+#jump-to-nav {
+  display: none;
+}
+
+.mw-body .printfooter {
+  display: none;
+}
+
+label {
+  display:inline-block;
+  margin-bottom:0;
+}
+
+input[type=radio], input[type=checkbox] {
+  margin:-2px 0 0;
+}
+
+label > input[type=checkbox],
+label > input[type=radio] {
+  margin-right:5px;
+  vertical-align:middle;
+}
+
+
+
+#bodyContent {
+  ul {
+    &.card-header-tabs {
+      padding: 0;
+
+      @extend .card-header-tabs;
+    }
+  }
+
+  .card {
+    &-header {
+      position: relative;
+
+      & > h3 {
+        margin-top: $spacer * 2;
+        margin-bottom: $spacer * 2;
+      }
+
+      & > a {
+        @extend .badge;
+
+        position: absolute;
+        top: $spacer;
+        left: $spacer;
+        font-weight: normal;
+      }
+    }
+
+    &-body {
+      &-table {
+        margin: 0 $spacer * -1.25;
+
+        .table,
+        .table.table-bordered {
+          border-left-width: 0;
+          border-right-width: 0;
+
+          thead,
+          tbody {
+            tr {
+              th,
+              td {
+                &:first-child {
+                  border-left-width: 0;
+                }
+
+                &:last-child {
+                  border-right-width: 0;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+
+/**
+ * Body class display classes
+ */
+.nextbestnetwork-advanced .d-advanced-none,
+.nextbestnetwork-non-advanced .d-non-advanced-none,
+.nextbestnetwork-user-logged-in .d-logged-in-none,
+.nextbestnetwork-user-logged-in .d-anon,
+.nextbestnetwork-user-anon .d-anon-none,
+.nextbestnetwork-user-anon .d-logged-in {
+  display:none
+}
+
+
+
+/**
+ * Sticky Sidebar 
+ */
+.sidebar-sticky {
+  position: sticky;
+  top: 80px;
+  z-index: 1;
+}
+
+@include media-breakpoint-up(md) {
+  .sidebar-sticky {
+    height: calc(100%);
+  }
+}
+
+/**
+ * EDIT-EXT Dropdown 
+ */
+[name=ca-edit-ext] + .dropdown-toggle {
+  max-width: 40px;
+}
+
+
+/**
+ * Watch/Unwatch Icon Styling 
+ */
+#ca-unwatch.icon a,
+#ca-watch.icon a {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  display: inline-block;
+  font-style: normal;
+  font-variant: normal;
+  text-rendering: auto;
+  font-family: "Font Awesome 5 Free";
+  height:40px;
+  width:2.2rem;
+  overflow:hidden;
+}
+.navbar #ca-unwatch.icon a,
+.navbar #ca-watch.icon a {
+  /* should be 1.2em + padding of .navbar-expand-lg .navbar-nav -nav-link */
+  width:2.2rem;
+}
+#ca-unwatch.icon a:before,
+#ca-watch.icon a:before {
+  content: "\f005";
+  /* hide text */
+  padding-right:50em;
+}
+#ca-unwatch.icon a {
+  font-weight: 900;
+}
+#ca-watch.icon a {
+  font-weight: 400;
+}
+#ca-unwatch.icon a.loading,
+#ca-watch.icon a.loading {
+  animation: fa-spin 5s infinite linear;
+}
+
+.mw-content-ltr ul.nav, 
+.mw-content-rtl .mw-content-ltr ul.nav {
+  margin-left:0;
+}
+.mw-content-ltr ul.nav.card-header-tabs, 
+.mw-content-rtl .mw-content-ltr ul.nav.card-header-tabs {
+  margin-right:-.625rem;
+  margin-left:-.625rem;
+  margin-bottom:-.75rem
+}
+
+
+
+#bodyContent ul.select2-choices {
+  padding:0;
+}
+
+
+
+
+
+a.mw-selflink {
+  color: inherit;
+  text-decoration: none;
+}
+
+
+// make mw-collapsible work in card headers
+.card .mw-collapsible-toggle {
+  position:relative;
+  z-index: 1;
+  padding: $card-spacer-y $card-spacer-x;
+}
+
+
+.btn-block + .btn-block.dropdown-toggle {
+  margin-top:0;
+}
+
+
+.nextbestnetwork-user-image {
+  border-radius:30px;
+  margin-top:-5px;
+  margin-bottom:-5px;
+}
+
+.btn-close {
+	cursor:pointer;
+}

resources/styles/nextbestnetwork/_preferences.scss

@@ -0,0 +1,90 @@
+/* TODO: is this just a duplication of Bootstrap's nav-tabs?
+ then we should mark it somehow to check after updates... */
+
+#preferences .mainLegend {
+  display: none;
+}
+
+#preftoc {
+  margin: 40px 0 -2px;
+}
+
+#preferences {
+  border: 1px solid #ccc;
+  margin: 0 20px;
+}
+
+#preftoc ul,
+#preftoc li {
+  display: inline;
+  list-style: none;
+}
+
+#preftoc li a {
+  position: relative;
+  z-index: 2;
+  font: inherit;
+  margin: 0;
+  padding: 8px 15px;
+  display: inline-block;
+}
+
+#preftoc li.selected a {
+  background-color: white;
+  border: 1px solid #ccc;
+  border-bottom: none;
+  border-radius: 6px 6px 0 0;
+  color: inherit;
+  cursor: default;
+  padding: 7px 14px;
+}
+
+#preferences fieldset.prefsection {
+  margin: 0;
+  padding: 40px;
+}
+
+#preferences legend {
+  border-bottom: none;
+}
+
+#preferences fieldset + fieldset > legend {
+  padding-top: 40px;
+}
+
+#preferences .mw-label label {
+  white-space: nowrap;
+  margin: 0;
+  color: #777;
+}
+
+#preferences td {
+  padding: 5px;
+}
+
+#preferences .htmlform-tip {
+  color: #999;
+  padding: 1em 0 3em 12em;
+}
+
+#preferences div.mw-prefs-buttons {
+  margin: 20px auto 0;
+  padding: 40px 40px 20px;
+  text-align: center;
+  overflow: hidden;
+}
+
+.mw-prefs-buttons a,
+.mw-prefs-buttons input {
+  font: inherit;
+  padding: 3px 15px;
+}
+
+.mw-prefs-buttons a {
+  padding: 8px 20px;
+  float: left;
+}
+
+.mw-prefs-buttons input {
+  float: right;
+}

resources/styles/nextbestnetwork/_print.scss

@@ -0,0 +1,33 @@
+/* NextBestNetwork print styles */
+
+@media print {
+	/* hide most of the unimportant stuff */
+	.noprint,
+	#mw-navigation,
+	#mw-page-base,
+	#mw-head-base,
+	#toc,
+	.sidebar-wrapper,
+	body #footer,
+	#page-header,
+	body #sidebar-left,
+	body #sidebar-right {
+		display:none;
+	}
+
+	#maincontentwrapper {
+		max-width:100%;
+		flex:auto;
+	}
+
+	.printfooter {
+		color:#666;
+		font-style:italic;
+		font-size:smaller;
+	}
+
+	/* print accordions */
+	.collapse {
+		display:block;
+	}
+}

resources/styles/nextbestnetwork/_toc.scss

@@ -0,0 +1,102 @@
+#sidebar {
+  &-right,
+  &-left {
+    #nextbestnetworkTOC {
+      margin-top:25px;
+    }
+
+    #nextbestnetworkTOC:first-child {
+      margin-top:0;
+    }
+  }
+
+}
+
+// Hide default TOC in content
+#bodyContent #toc {
+  display: none;
+}
+
+// hide by default and make it visible by javascript only
+#nextbestnetworkDropdownTOC {
+  display:none;
+}
+
+#nextbestnetworkTOC {
+  font-size: $font-size-sm;
+
+  // hide .toctogglespan, introduced in MW 1.32
+  .toctogglespan,
+  .toctoggle,
+  .tocnumber {
+    display:none;
+  }
+
+  // backwards compatibility for MW < 1.30
+  #toctitle,
+  .toctitle {
+    h2 {
+      font-size: $font-size-sm;
+      font-weight: normal;
+      text-transform: none;
+      position: relative;
+
+      a {
+        @extend .badge;
+
+        display: block;
+        position: absolute;
+        font-size: 0.75rem;
+        right: 0;
+        top: 0;
+        background-color: $gray-200;
+        font-weight: normal;
+      }
+    }
+  }
+
+  #toc {
+    width:100%;
+    display:none;
+
+    a {
+      padding: 0;
+      color: #999;
+
+      &.active,
+      &:hover,
+      &:focus,
+      &:hover {
+        color: #000;
+      }
+    }
+
+    ul {
+      margin: 0 !important;
+
+      & > li {
+        & > ul {
+          display: none;
+          border-left: 1px solid $gray-400;
+          margin: $spacer 0;
+          padding: 0 0 0 $spacer;
+
+          li,
+          a {
+            font-size: 0.75rem;
+            line-height: 0.75rem * 1.5;
+            justify-content: flex-end;
+          }
+        }
+
+        .active + ul {
+          display: block;
+        }
+      }
+    }
+  }
+}
+
+#tw-filetoc {
+  margin-bottom: $spacer;
+}

resources/styles/nextbestnetwork/_variables.scss

@@ -0,0 +1,2 @@
+$font-size-xs: 0.75rem;
+$border-radius: 0.25rem;