feat: Bootstrap 5 (#1378)

* feat: Use Bootstrap 5; remove Bootstrap 4

* feat: Add link decoration override global var

* fix: Change sr-only to visually-hidden

* fix: Fix missing toggle button classes

* fix: Use darker green to pass 3:1 contrast and allow foreground color generation

* fix: Replace all mr- and ml- classes with me- (end) and ms- (start) classes

* fix: Replace all pr- and pl- classes with pe- (end) and ps- (start) classes

* fix: Replace custom-select with form-select d-inline-block

* fix: Change max-width to Bootstrap 4's max-width

* fix: Fix badge colors

* fix: Replace deprecated btn-block class with d-block

* fix: Temporary fix for missing btn-block styles

* fix: Fix margin-left auto and margin-right auto

* fix: Fix default border color

* fix: Fix some button widths

* fix: Fix form row margins

* fix: Remove theme color maps; no longer necessary in Bootstrap 5

* fix: Remove unused gray

* test commit

* fix: Fix deprecated input-group-append usage

* fix: Add missing col-form-label classes

* fix: Fix some column widths

* fix: Fix language dropdown style regression

* fix: Fix toast background color

* fix: Fix missing colors in red themes

* fix: Fix default radio button appearance for toggles

* fix: Fix missing margin in search form

* fix: Fix search form widths

* fix: Fix rate limit form columns

* fix: Fix search filters layout

* fix: Fix weird table background issue; re-compile from main updates

* fix: Fix modlog filter layout

* fix: Fix some horizontal margins

* fix: Fix incorrect usage of input-group

* chore: Empty commit to re-trigger Woodpecker job

* fix: Fix incorrect Bootstrap 5 padding class

* fix: Tighten up the home filter bars for the hell of it

* fix: Fix home filter bar gap

---------

Co-authored-by: SleeplessOne1917 <abias1122@gmail.com>
Co-authored-by: Dessalines <dessalines@users.noreply.github.com>

package.json

@@ -106,7 +106,6 @@
     "@types/toastify-js": "^1.11.1",
     "@typescript-eslint/eslint-plugin": "^5.59.5",
     "@typescript-eslint/parser": "^5.59.5",
-    "bootstrap-v4": "npm:bootstrap@^4.6.2",
     "eslint": "^8.40.0",
     "eslint-plugin-inferno": "^7.32.2",
     "eslint-plugin-jsx-a11y": "^6.7.1",

src/assets/css/main.css

@@ -36,7 +36,7 @@
   margin-top: -10px;
 }
 
-.custom-select {
+.form-select {
   -moz-appearance: none;
 }
 
@@ -266,6 +266,14 @@ hr {
   -ms-transform: scale(1.2);
 }
 
+/**
+ * TODO: Fix this in markup rather than this overly specific selector:
+ * https://getbootstrap.com/docs/5.3/components/buttons/#block-buttons
+ */
+.btn.d-block + .btn.d-block {
+  margin-top: 0.5rem;
+}
+
 .mini-overlay {
   position: absolute;
   top: 0;

src/assets/css/themes/_variables.darkly-red.scss

@@ -4,10 +4,4 @@ $primary: $blue;
 $secondary: #444;
 $light: $gray-800;
 
-$theme-colors: (
-  "primary": $primary,
-  "secondary": $secondary,
-  "light": $light,
-);
-
 $link-color: $red;

src/assets/css/themes/_variables.darkly.scss

@@ -1,3 +1,5 @@
+@import "./variables";
+
 // Colors
 $white: #fff;
 $gray-200: #ebebeb;
@@ -8,48 +10,21 @@ $gray-700: #444;
 $gray-800: #303030;
 $gray-900: #222;
 
-// Writing these maps is necessary for Bootstrap theming:
-// https://getbootstrap.com/docs/4.6/getting-started/introduction/
-$grays: (
-  "gray-200": $gray-200,
-  "gray-600": $gray-600,
-  "gray-700": $gray-700,
-  "gray-800": $gray-800,
-  "gray-900": $gray-900,
-);
-
 $blue: #375a7f;
 $red: #e74c3c;
 $yellow: #f39c12;
 $green: #00bc8c;
 $cyan: #3498db;
 
-// Writing these maps is necessary for Bootstrap theming:
-// https://getbootstrap.com/docs/4.6/getting-started/introduction/
-$colors: (
-  "blue": $blue,
-  "red": $red,
-  "yellow": $yellow,
-  "green": $green,
-  "cyan": $cyan,
-);
-
 $primary: $green;
 $secondary: $gray-700;
 $success: $green;
 $dark: $gray-300;
 
-// Writing these maps is necessary for Bootstrap theming:
-// https://getbootstrap.com/docs/4.6/getting-started/introduction/
-$theme-colors: (
-  "primary": $primary,
-  "secondary": $secondary,
-  "dark": $dark,
-);
-
 $body-color: $gray-300;
 $body-bg: $gray-900;
 $link-color: $success;
+$border-color: rgba($body-color, 0.25);
 $mark-bg: #333;
 $text-muted: $gray-600;
 $yiq-contrasted-threshold: 175;
@@ -94,7 +69,6 @@ $input-group-addon-bg: $gray-700;
 
 $hr-border-color: rgba($body-color, 0.25);
 
-$table-accent-bg: $gray-800;
 $table-border-color: $gray-700;
 
 $custom-file-color: $gray-500;

src/assets/css/themes/_variables.litely-red.scss

@@ -2,8 +2,3 @@
 
 $secondary: #c80000;
 $danger: darken($primary, 24%);
-
-$theme-colors: (
-  "secondary": $secondary,
-  "danger": $danger,
-);

src/assets/css/themes/_variables.litely.scss

@@ -1,58 +1,30 @@
+@import "./variables";
+
 // Colors
 $gray-100: #f8f9fa;
-$gray-200: #e9ecef;
 $gray-600: #6c757d;
 $gray-700: #495057;
 $gray-800: #343a40;
 $gray-900: #212529;
 $black: #222;
 
-// Writing these maps is necessary for Bootstrap theming:
-// https://getbootstrap.com/docs/4.6/getting-started/introduction/
-$grays: (
-  "gray-200": $gray-200,
-  "gray-600": $gray-600,
-  "gray-700": $gray-700,
-  "gray-800": $gray-800,
-  "gray-900": $gray-900,
-);
-
 $blue: #007bff;
 $indigo: #6610f2;
 $red: #d8486a;
 $orange: #f1641e;
-$green: #00c853;
+$green: #00a846;
 $cyan: #02bdc2;
 
-// Writing these maps is necessary for Bootstrap theming:
-// https://getbootstrap.com/docs/4.6/getting-started/introduction/
-$colors: (
-  "red": $red,
-  "orange": $orange,
-  "cyan": $cyan,
-  "green": $green,
-);
-
 $primary: $orange;
 $secondary: $green;
 $success: $indigo;
 $info: $blue;
 $danger: darken($primary, 25%);
 
-// Writing these maps is necessary for Bootstrap theming:
-// https://getbootstrap.com/docs/4.6/getting-started/introduction/
-$theme-colors: (
-  "primary": $primary,
-  "secondary": $secondary,
-  "success": $success,
-  "info": $info,
-  "danger": $danger,
-);
-
 $body-color: $gray-700;
 $body-bg: #fff;
 $link-color: $primary;
-$border-color: $gray-700;
+$border-color: rgba($body-color, 0.25);
 $mark-bg: rgb(255, 252, 239);
 $headings-color: $gray-700;
 

src/assets/css/themes/_variables.scss

@@ -0,0 +1,6 @@
+$link-decoration: none;
+$min-contrast-ratio: 3;
+
+$container-max-widths: (
+  lg: 1140px,
+);