static_common/common/vendor/bootstrap/scss/mixins/_color-mode.scss

+// scss-docs-start color-mode-mixin
+@mixin color-mode($mode: light, $root: false) {
+  @if $color-mode-type == "media-query" {
+    @if $root == true {
+      @media (prefers-color-scheme: $mode) {
+        :root {
+          @content;
+        }
+      }
+    } @else {
+      @media (prefers-color-scheme: $mode) {
+        @content;
+      }
+    }
+  } @else {
+    [data-bs-theme="#{$mode}"] {
+      @content;
+    }
+  }
+}
+
+// scss-docs-end color-mode-mixin

static_common/common/vendor/bootstrap/scss/mixins/_forms.scss

@@ -21,7 +21,8 @@
   $icon,
   $tooltip-color: color-contrast($color),
   $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
-  $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
+  $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
+  $border-color: $color
 ) {
   .#{$state}-feedback {
     display: none;
@@ -56,7 +57,7 @@
 
   .form-control {
     @include form-validation-state-selector($state) {
-      border-color: $color;
+      border-color: $border-color;
 
       @if $enable-validation-icons {
         padding-right: $input-height-inner;
@@ -67,11 +68,16 @@
       }
 
       &:focus {
-        border-color: $color;
+        border-color: $border-color;
+        @if $enable-shadows {
+          @include box-shadow($input-box-shadow, $focus-box-shadow);
+        } @else {
+          // Avoid using mixin so we can pass custom focus shadow properly
           box-shadow: $focus-box-shadow;
         }
       }
     }
+  }
 
   // stylelint-disable-next-line selector-no-qualifying-type
   textarea.form-control {
@@ -85,24 +91,29 @@
 
   .form-select {
     @include form-validation-state-selector($state) {
-      border-color: $color;
+      border-color: $border-color;
 
       @if $enable-validation-icons {
         &:not([multiple]):not([size]),
         &:not([multiple])[size="1"] {
+          --#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
           padding-right: $form-select-feedback-icon-padding-end;
-          background-image: escape-svg($form-select-indicator), escape-svg($icon);
           background-position: $form-select-bg-position, $form-select-feedback-icon-position;
           background-size: $form-select-bg-size, $form-select-feedback-icon-size;
         }
       }
 
       &:focus {
-        border-color: $color;
+        border-color: $border-color;
+        @if $enable-shadows {
+          @include box-shadow($form-select-box-shadow, $focus-box-shadow);
+        } @else {
+          // Avoid using mixin so we can pass custom focus shadow properly
           box-shadow: $focus-box-shadow;
         }
       }
     }
+  }
 
   .form-control-color {
     @include form-validation-state-selector($state) {
@@ -114,7 +125,7 @@
 
   .form-check-input {
     @include form-validation-state-selector($state) {
-      border-color: $color;
+      border-color: $border-color;
 
       &:checked {
         background-color: $color;

static_common/common/vendor/bootstrap/scss/mixins/_grid.scss

@@ -56,7 +56,7 @@
 @mixin row-cols($count) {
   > * {
     flex: 0 0 auto;
-    width: divide(100%, $count);
+    width: percentage(divide(1, $count));
   }
 }
 
@@ -72,7 +72,7 @@
     @include media-breakpoint-up($breakpoint, $breakpoints) {
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
       .col#{$infix} {
-        flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
+        flex: 1 0 0;
       }
 
       .row-cols#{$infix}-auto > * {
@@ -138,7 +138,7 @@
           }
         }
 
-        // Start with `1` because `0` is and invalid value.
+        // Start with `1` because `0` is an invalid value.
         // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
         @for $i from 1 through ($columns - 1) {
           .g-start#{$infix}-#{$i} {

static_common/common/vendor/bootstrap/scss/mixins/_list-group.scss

+@include deprecate("`list-group-item-variant()`", "v5.3.0", "v6.0.0");
+
 // List Groups
 
 // scss-docs-start list-group-mixin

static_common/common/vendor/bootstrap/scss/mixins/_utilities.scss

 // Utility generator
 // Used to generate utilities & print utilities
-@mixin generate-utility($utility, $infix, $is-rfs-media-query: false) {
+@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
   $values: map-get($utility, values);
 
   // If the values are a list or string, convert it into a map

static_common/common/vendor/bootstrap/scss/mixins/_visually-hidden.scss

@@ -6,7 +6,6 @@
 // See: https://kittygiraudel.com/2016/10/13/css-hide-and-seek/
 
 @mixin visually-hidden() {
-  position: absolute !important;
   width: 1px !important;
   height: 1px !important;
   padding: 0 !important;
@@ -15,12 +14,22 @@
   clip: rect(0, 0, 0, 0) !important;
   white-space: nowrap !important;
   border: 0 !important;
+
+  // Fix for positioned table caption that could become anonymous cells
+  &:not(caption) {
+    position: absolute !important;
+  }
+
+  // Fix to prevent overflowing children to become focusable
+  * {
+    overflow: hidden !important;
+  }
 }
 
 // Use to only display content when it's focused, or one of its child elements is focused
 // (i.e. when focus is within the element/container that the class was applied to)
 //
-// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+// Useful for "Skip to main content" links; see https://www.w3.org/WAI/WCAG22/Techniques/general/G1.html
 
 @mixin visually-hidden-focusable() {
   &:not(:focus):not(:focus-within) {

static_common/common/vendor/bootstrap/scss/vendor/_rfs.scss

-// stylelint-disable property-blacklist, scss/dollar-variable-default
+// stylelint-disable scss/dimension-no-non-numeric-values
 
 // SCSS RFS mixin
 //
@@ -154,8 +154,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
     &.enable-rfs {
       @content;
     }
-  }
-  @else {
+  } @else {
     @content;
   }
 }
@@ -168,7 +167,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
       @content;
     }
 
-    @include _rfs-media-query {
+    @include _rfs-media-query() {
       .enable-rfs &,
       &.enable-rfs {
         @content;
@@ -182,7 +181,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
         @content;
       }
     }
-    @include _rfs-media-query {
+    @include _rfs-media-query() {
       @content;
     }
   }
@@ -193,12 +192,12 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
   // Convert to list
   $values: if(type-of($values) != list, ($values,), $values);
 
-  $val: '';
+  $val: "";
 
   // Loop over each value and calculate value
   @each $value in $values {
     @if $value == 0 {
-      $val: $val + ' 0';
+      $val: $val + " 0";
     }
     @else {
       // Cache $value unit
@@ -206,15 +205,14 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
 
       @if $unit == px {
         // Convert to rem if needed
-        $val: $val + ' ' + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value);
+        $val: $val + " " + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value);
       }
       @else if $unit == rem {
         // Convert to px if needed
-        $val: $val + ' ' + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value);
-      }
-      @else {
+        $val: $val + " " + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value);
+      } @else {
         // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
-        $val: $val + ' ' + $value;
+        $val: $val + " " + $value;
       }
     }
   }
@@ -228,30 +226,26 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
   // Convert to list
   $values: if(type-of($values) != list, ($values,), $values);
 
-  $val: '';
+  $val: "";
 
   // Loop over each value and calculate value
   @each $value in $values {
     @if $value == 0 {
-      $val: $val + ' 0';
-    }
-
-    @else {
+      $val: $val + " 0";
+    } @else {
       // Cache $value unit
       $unit: if(type-of($value) == "number", unit($value), false);
 
       // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
       @if not $unit or $unit != px and $unit != rem {
-        $val: $val + ' ' + $value;
-      }
-
-      @else {
+        $val: $val + " " + $value;
+      } @else {
         // Remove unit from $value for calculations
         $value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value)));
 
         // Only add the media query if the value is greater than the minimum value
         @if abs($value) <= $rfs-base-value or not $enable-rfs {
-          $val: $val + ' ' +  if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px);
+          $val: $val + " " + if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px);
         }
         @else {
           // Calculate the minimum value
@@ -273,7 +267,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
           $variable-width: #{divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};
 
           // Return the calculated value
-          $val: $val + ' calc(' + $min-width + if($value < 0, ' - ', ' + ') + $variable-width + ')';
+          $val: $val + " calc(" + $min-width + if($value < 0, " - ", " + ") + $variable-width + ")";
         }
       }
     }
@@ -287,22 +281,22 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
 @mixin rfs($values, $property: font-size) {
   @if $values != null {
     $val: rfs-value($values);
-    $fluidVal: rfs-fluid-value($values);
+    $fluid-val: rfs-fluid-value($values);
 
     // Do not print the media query if responsive & non-responsive values are the same
-    @if $val == $fluidVal {
+    @if $val == $fluid-val {
       #{$property}: $val;
     }
     @else {
-      @include _rfs-rule {
-        #{$property}: if($rfs-mode == max-media-query, $val, $fluidVal);
+      @include _rfs-rule() {
+        #{$property}: if($rfs-mode == max-media-query, $val, $fluid-val);
 
         // Include safari iframe resize fix if needed
         min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);
       }
 
-      @include _rfs-media-query-rule {
-        #{$property}: if($rfs-mode == max-media-query, $fluidVal, $val);
+      @include _rfs-media-query-rule() {
+        #{$property}: if($rfs-mode == max-media-query, $fluid-val, $val);
       }
     }
   }

static_common/common/vendor/bootswatch-lumen/_bootswatch.scss

-// Lumen 5.2.2
+// Lumen 5.3.6
 // Bootswatch
 
 
 // Variables
 
-:root {
-  color-scheme: light;
+$web-font-path: "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap" !default;
+@if $web-font-path {
+  @import url("#{$web-font-path}");
 }
 
 // Mixins
@@ -25,6 +26,11 @@
       border-color: shade-color($value, 10%);
     }
   }
+
+  &.bg-body-secondary,
+  &.bg-body-tertiary {
+    border-color: rgba(0, 0, 0, .1);
+  }
 }
 
 // Buttons
@@ -63,7 +69,7 @@
 }
 
 .btn-outline-secondary {
-  color: $black;
+  color: var(--bs-tertiary-color);
 }
 
 [class*="btn-outline"] {
@@ -94,6 +100,13 @@
   color: $gray-600;
 }
 
+// Tables
+
+.table-secondary,
+.table-light {
+  --#{$prefix}table-color: #{$body-color};
+}
+
 // Forms
 
 .form-control {
@@ -112,7 +125,7 @@
 
 .nav-tabs {
   .nav-link {
-    color: $body-color;
+    color: var(--#{$prefix}body-color);
 
     &,
     &.disabled,
@@ -128,6 +141,7 @@
     &.active {
       padding-bottom: add(.5rem, 6px);
       margin-top: 0;
+      color: var(--#{$prefix}body-color);
       border-bottom-color: transparent;
     }
   }
@@ -145,7 +159,7 @@
 }
 
 .breadcrumb {
-  border-color: shade-color($breadcrumb-bg, 10%);
+  border-color: $pagination-border-color;
   @include shadow();
 }
 

static_common/common/vendor/bootswatch-lumen/_variables.scss

-// Lumen 5.2.2
+// Lumen 5.3.6
 // Bootswatch
 
 $theme: "lumen" !default;
 
-/* source-sans-pro-300 - latin-ext_latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 300;
-  src: url('../../fonts/source-sans-pro-v21-latin-ext_latin-300.eot'); /* IE9 Compat Modes */
-  src: local(''),
-       url('../../fonts/source-sans-pro-v21-latin-ext_latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('../../fonts/source-sans-pro-v21-latin-ext_latin-300.woff2') format('woff2'), /* Super Modern Browsers */
-       url('../../fonts/source-sans-pro-v21-latin-ext_latin-300.woff') format('woff'), /* Modern Browsers */
-       url('../../fonts/source-sans-pro-v21-latin-ext_latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('../../fonts/source-sans-pro-v21-latin-ext_latin-300.svg#SourceSansPro') format('svg'); /* Legacy iOS */
-}
-
-/* source-sans-pro-regular - latin-ext_latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  src: url('../../fonts/source-sans-pro-v21-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
-  src: local(''),
-       url('../../fonts/source-sans-pro-v21-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('../../fonts/source-sans-pro-v21-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-       url('../../fonts/source-sans-pro-v21-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
-       url('../../fonts/source-sans-pro-v21-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('../../fonts/source-sans-pro-v21-latin-ext_latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
-}
-
-/* source-sans-pro-italic - latin-ext_latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 400;
-  src: url('../../fonts/source-sans-pro-v21-latin-ext_latin-italic.eot'); /* IE9 Compat Modes */
-  src: local(''),
-       url('../../fonts/source-sans-pro-v21-latin-ext_latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('../../fonts/source-sans-pro-v21-latin-ext_latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
-       url('../../fonts/source-sans-pro-v21-latin-ext_latin-italic.woff') format('woff'), /* Modern Browsers */
-       url('../../fonts/source-sans-pro-v21-latin-ext_latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('../../fonts/source-sans-pro-v21-latin-ext_latin-italic.svg#SourceSansPro') format('svg'); /* Legacy iOS */
-}
-
-/* source-sans-pro-700 - latin-ext_latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 700;
-  src: url('../../fonts/source-sans-pro-v21-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
-  src: local(''),
-       url('../../fonts/source-sans-pro-v21-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('../../fonts/source-sans-pro-v21-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
-       url('../../fonts/source-sans-pro-v21-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */
-       url('../../fonts/source-sans-pro-v21-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('../../fonts/source-sans-pro-v21-latin-ext_latin-700.svg#SourceSansPro') format('svg'); /* Legacy iOS */
-}
-
-
 //
 // Color system
 //
@@ -98,6 +41,11 @@ $dark:          $gray-700 !default;
 
 $min-contrast-ratio:   1.75 !default;
 
+// Prefix for :root CSS variables
+
+$variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
+$prefix: $variable-prefix !default;
+
 // Fonts
 
 // stylelint-disable-next-line value-keyword-case
@@ -105,6 +53,8 @@ $font-family-sans-serif:      "Source Sans Pro", -apple-system, BlinkMacSystemFo
 
 // Tables
 
+$table-color: initial !default;
+
 $table-bg-scale:              0% !default;
 
 // Buttons
@@ -113,19 +63,17 @@ $btn-font-weight:             700 !default;
 
 // Dropdowns
 
-$dropdown-link-color:         rgba(0, 0, 0, .5) !default;
+$dropdown-link-color: var(--#{$prefix}tertiary-color) !default;
 
 // Navs
 
-$nav-tabs-border-color:             $gray-200 !default;
-$nav-tabs-link-hover-border-color:  $nav-tabs-border-color !default;
-$nav-tabs-link-active-color:        $gray-900 !default;
-$nav-tabs-link-active-border-color: $nav-tabs-border-color !default;
+$nav-link-color: var(--#{$prefix}link-color) !default;
 
 // Pagination
 
 $pagination-color:                  $gray-700 !default;
-$pagination-bg:                     $gray-200 !default;
+$pagination-bg: var(--#{$prefix}tertiary-bg) !default;
+$pagination-border-color: var(--#{$prefix}border-color) !default;
 $pagination-hover-color:            $pagination-color !default;
 $pagination-hover-bg:               $pagination-bg !default;
 $pagination-active-border-color:    darken($primary, 5%) !default;

templates/admin/base_site.html

@@ -16,6 +16,7 @@
         {% if not debug %}
             <link rel="stylesheet" type="text/css" href="{% static "common/css/admin-color.css" %}"/>
         {% endif %}
+        <link rel="stylesheet" type="text/css" href="{% static "rest_framework/css/prettify.css" %}"/>
         <style>
         a.btn {
             color: #FFFFFF;
@@ -47,5 +48,6 @@
         {% bootstrap_javascript %}
         <script src="{% static 'common/vendor/jquery/jquery-3.6.3.min.js' %}"></script>
         {% fontawesome_6_js %}
+        <script src="{% static "rest_framework/js/prettify-min.js" %}"></script>
     {% endcompress %}
 {% endblock %}

templates/base.html

@@ -9,7 +9,10 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    {% block meta %}{% endblock%}
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    {% block meta %}
+    {% endblock meta %}
+
 
     <title>{% block title %}AK Planning{% endblock %}</title>
 
@@ -31,6 +34,7 @@
         <script src="{% static 'common/vendor/jquery/jquery-3.6.3.min.js' %}"></script>
         <script src="{% static 'common/vendor/select2/select2.min.js' %}"></script>
         {% fontawesome_6_js %}
+        <script src="{% static 'common/vendor/vuejs/vue.global.js' %}"></script>
     {% endcompress %}
 
     <script type='text/javascript'>
@@ -106,6 +110,7 @@
         {% block footer_custom %}
         {% endblock %}
         <a href="{% url "admin:index" %}">{% trans "Go to backend" %}</a> &middot;
+        <a href="{% url "docs_root" %}">{% trans "Docs" %}</a> &middot;
         {% footer_info as FI %}
         {% if FI.impress_text %}
             {{ FI.impress_text }} &middot;