Upgrade Bootstrap to v5.3.3

CONTRIBUTING.md

@@ -15,7 +15,7 @@ This project follows the [PSR-2](http://www.php-fig.org/psr/psr-2/) coding style
 RaspAP is made possible by a strong [community of developers](https://github.com/RaspAP/raspap-webgui/graphs/contributors). If you have any questions or would like to get involved in RaspAP, dive into any of these channels:
 
 * [GitHub discussions](https://github.com/RaspAP/raspap-webgui/discussions)
-* [Discord chat](https://discord.gg/rth5Yzzm)
+* [Discord chat](https://discord.gg/KVAsaAR)
 * [Twitter](https://twitter.com/rasp_ap)
 * [Reddit](https://www.reddit.com/r/RaspAP/)
 

app/css/all.css

@@ -6,28 +6,40 @@ Description: Classes shared by all themes
 License: GNU General Public License v3.0
 */
 
-/* Small devices (portrait phones, up to 576px) */
-@media (max-width: 576px) {
-  .container-fluid, .card-body, .col-md-6 { padding-left: 0.5rem; padding-right: 0.5rem; }
-  .card .card-header { padding: .75rem .5rem; font-size: 1.0rem; }
-  .row { margin-left: 0rem; margin-right: 0rem; }
-  .col-lg-12 { padding-right: 0.25rem; padding-left: 0.25rem; }
-  .form-group.col-md-6 { margin-left: -0.5rem; }
-  h4.mt-3 { margin-left: 0.5rem; }
+:root {
+  --raspap-content-main: #495057;
+  --raspap-text-muted: #858796;
+  --raspap-brand-color: #2b8080;
 }
 
-.sidebar.toggled .nav-item .nav-link {
-  padding: 0.65rem 1rem;
+a {
+    color: var(--raspap-brand-color);
+    text-decoration: none;
 }
 
+.sb-sidenav .sb-sidenav-menu .nav .nav-link {
+  padding-top: 0.6rem;
+  padding-bottom: 0.6rem;
+}
+
+.sb-sidenav-light .sb-sidenav-menu .nav-link, .card-title, h4 {
+  color: var(--raspap-content-main);
+}
+
+.sb-topnav.navbar-light #sidebarToggle {
+  color: var(--raspap-content-main);
+}
 .sidebar-brand-text {
   text-transform: none;
-  color: #212529;
   font-size: 2.0rem;
   font-weight: 500;
   font-family: Helvetica, Arial, sans-serif;
 }
 
+th {
+  color: var(--raspap-content-main) !important;
+}
+
 .h-underlined {
   border-bottom: 1px solid #e3e6f0;
   padding-bottom: 0.3rem;
@@ -46,7 +58,7 @@ License: GNU General Public License v3.0
 .info-item {
   text-transform: uppercase;
   font-size: 0.7em;
-  color: #858796;
+  color: var(--raspap-text-muted);
 }
 
 .info-value {
@@ -123,7 +135,7 @@ License: GNU General Public License v3.0
   display: flex;
   justify-content: center;
   align-items: center;
-  color: #858796;
+  color: var(--raspap-text-muted);
   content: "\f1ce"; /* Unicode for the circle-notch icon */
   font-family: "Font Awesome 5 Free";
   font-weight: 900; /* Adjust as needed */
@@ -205,7 +217,6 @@ button.btn.btn-light.js-toggle-password {
   width: 4px;
   border-radius: 1px;
   opacity: 30%;
-  background: <?php echo $color; ?>;
 }
 
 .signal-icon .signal-bar:nth-child(1) { height: 40%; }
@@ -252,7 +263,7 @@ button.btn.btn-light.js-toggle-password {
 }
 
 figcaption.figure-caption a {
-  color: #858796;
+  color: var(--raspap-text-muted);
 }
 
 button > i.fas {
@@ -266,20 +277,58 @@ button > i.fas {
 
 .was-validated .form-control:valid,
 .was-validated .form-control:invalid {
-    background-position: center right calc(.375em + .4875rem);
+  background-position: center right calc(.375em + .4875rem);
 }
 
 .was-validated .form-control:invalid {
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
-    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
 }
 
 .was-validated .form-control:valid {
-    background-size: calc(0.6em + 0.375rem) calc(0.6em + 0.375rem);
+  background-size: calc(0.6em + 0.375rem) calc(0.6em + 0.375rem);
 }
 
 .input-group>.input-group-append:not(:last-child)>.btn {
-    border-top-right-radius: 0.35rem;
-    border-bottom-right-radius: 0.35rem;
+  border-top-right-radius: 0.35rem;
+  border-bottom-right-radius: 0.35rem;
+}
+
+.nav-user {
+  position: relative;
+  bottom: 11px;
+  right: 3px;
+}
+
+.nav-item {
+  font-size: 0.85rem;
+}
+
+/* Font Awesome 5 brands */
+.fa-reddit {
+    color: #ff4500;
+}
+.fa-twitter {
+    color: #55acee
+}
+.fa-discord {
+    color: #7289da
+}
+.fa-github {
+    color: #151b23
+}
+
+@keyframes heart {
+  0%, 40%, 80%, 100% {
+    transform: scale(1);
+  }
+  20%, 60% {
+    transform: scale(1.15);
+  }
+}
+
+.heart {
+  color: #e63946;
+  animation: heart 1000ms infinite;
 }
 

app/css/custom.php

@@ -13,50 +13,84 @@
 
 @import url('all.css');
 
+:root {
+  --raspap-theme-color: <?php echo $color; ?>;
+  --raspap-theme-lighter: <?php echo lightenColor($color, 20); ?>;
+  --raspap-theme-darker: <?php echo darkenColor($color, 20); ?>;
+}
+
 body {
   color: #212529;
+  background-color: #f8f9fc;
+}
+
+a {
+  color: var(--raspap-theme-color);
+  text-decoration: none;
+}
+
+a:focus, a:hover {
+  color: var(--raspap-theme-darker);
+}
+
+.sb-sidenav-light .sb-sidenav-menu .nav-link:hover {
+  color: var(--raspap-theme-color);
+}
+
+.sidebar-brand-text:focus,
+.sidebar-brand-text:hover {
+  color: var(--raspap-theme-darker);
+}
+
+.form-check-input:checked {
+  background-color: var(--raspap-theme-color); 
+  border-color: var(--raspap-theme-color); 
 }
 
 .sidebar {
   background-color: #f8f9fc;
 }
 
+.sb-nav-link-icon.active {
+  font-weight: 600;
+}
+
 .sidebar .nav-item.active .nav-link {
   font-weight: 500;
 }
 
 .sidebar-brand-text {
-  color: <?php echo $color; ?>;
+  color: var(--raspap-theme-color); 
 }
 
 .card .card-header, .modal-header {
-  border-color: <?php echo $color; ?>;
+  border-color: var(--raspap-theme-color); 
   color: #fff;
-  background-color: <?php echo $color; ?>;
+  background-color: var(--raspap-theme-color); 
 }
 
 .modal-header {
   border-radius: 0px;
 }
 
 .btn-primary {
-  color: <?php echo $color; ?>;
-  border-color: <?php echo $color; ?>;
+  color: var(--raspap-theme-color); 
+  border-color: var(--raspap-theme-color); 
   background-color: #fff;
 }
 
 .btn-primary:disabled {
-  color: <?php echo $color; ?> !important;
-  border-color: <?php echo $color; ?> !important;
+  color: var(--raspap-theme-color) !important;
+  border-color: var(--raspap-theme-color) !important;
   background-color: #fff !important;
 }
 
-.card-footer, .modal-footer {
-  background-color: #f2f1f0;
+.card-body {
+  color: #495057;
 }
 
-.nav-item {
-  font-size: 0.85rem;
+.card-footer, .modal-footer {
+  background-color: #f2f1f0;
 }
 
 .nav-tabs .nav-link.active,
@@ -76,10 +110,6 @@
   padding: 0.6rem 0.6rem 0.6rem 1.0rem;
 }
 
-.alert-success {
-  background-color: #d4edda;
-}
-
 .btn-primary {
   background-color: #fff;
 }
@@ -89,8 +119,8 @@
 }
 
 .btn-primary:hover {
-  background-color: <?php echo $color; ?>;
-  border-color: <?php echo $color; ?>;
+  background-color: var(--raspap-theme-color); 
+  border-color: var(--raspap-theme-color); 
 }
 
 i.fa.fa-bars {
@@ -119,6 +149,6 @@
 }
 
 .signal-icon .signal-bar {
-  background: <?php echo $color; ?>;
+  background: var(--raspap-theme-color); 
 }
 

app/css/dark.css

@@ -0,0 +1,83 @@
+/*
+Theme Name: Lights Out
+Author: @billz
+Author URI: https://github.com/billz
+Description: A Bootstrap dark mode theme for RaspAP
+License: GNU General Public License v3.0
+*/
+
+@import url('custom.php');
+
+html[data-bs-theme="dark"] {
+  background-color: var(--bs-dark);
+  color: var(--bs-light);
+}
+
+html[data-bs-theme="dark"] body,
+html[data-bs-theme="dark"] footer,
+html[data-bs-theme="dark"] .sb-sidenav,
+html[data-bs-theme="dark"] .sb-topnav,
+html[data-bs-theme="dark"] .card,
+html[data-bs-theme="dark"] .card-footer {
+  background-color: var(--bs-dark);
+}
+
+html[data-bs-theme="dark"] .card-body,
+html[data-bs-theme="dark"] .card-footer,
+html[data-bs-theme="dark"] .info-item-xs,
+html[data-bs-theme="dark"] .table>:not(caption)>*>* {
+  color: var(--bs-secondary);
+}
+
+html[data-bs-theme="dark"] .sb-topnav.navbar {
+  background-color: var(--bs-dark) !important;
+  color: var(--bs-light);
+}
+
+html[data-bs-theme="dark"] .sb-topnav.navbar,
+html[data-bs-theme="dark"] .sb-topnav.navbar a {
+  color: var(--raspap-theme-color) !important;
+}
+
+html[data-bs-theme="dark"] .sb-topnav.navbar a:hover,
+html[data-bs-theme="dark"] .sb-topnav.navbar a:focus {
+  color: var(--raspap-theme-darker) !important;
+}
+
+html[data-bs-theme="dark"] .sb-topnav.navbar {
+  --bs-navbar-bg: var(--bs-dark);
+}
+
+html[data-bs-theme="dark"] .sb-topnav.navbar.navbar-light {
+  color: var(--bs-light);
+}
+
+html[data-bs-theme="dark"] .card {
+  border-color: var(--bs-secondary);
+  color: var(--bs-light);
+}
+
+html[data-bs-theme="dark"] .card-footer {
+  border-color: var(--bs-secondary);
+}
+
+html[data-bs-theme="dark"] .nav-tabs {
+  --bs-nav-tabs-link-active-color: var(--bs-light);
+  --bs-nav-tabs-link-active-bg: var(--bs-dark);
+  --bs-nav-tabs-link-active-border-color: var(--bs-secondary) var(--bs-secondary) var(--bs-dark);
+  --bs-nav-tabs-border-color: var(--bs-secondary);
+  --bs-nav-tabs-link-hover-border-color: var(--bs-secondary);
+}
+
+html[data-bs-theme="dark"] .btn {
+  color: var(--bs-gray-800);
+  opacity: 75%;
+}
+
+html[data-bs-theme="dark"] select,
+html[data-bs-theme="dark"] .form-control {
+  background-color: var(--bs-dark);
+  border-color: var(--bs-secondary);
+  color: var(--bs-light);
+}
+