Implement hostapd modal dialog

app/css/custom.php

@@ -52,19 +52,23 @@ body {
   font-weight: 500;
 }
 
-.card .card-header {
+.card .card-header, .modal-header {
   border-color: <?php echo $color; ?>;
   color: #fff;
   background-color: <?php echo $color; ?>;
 }
 
+.modal-header {
+  border-radius: 0px;
+}
+
 .btn-primary {
   color: <?php echo $color; ?>;
   border-color: <?php echo $color; ?>;
   background-color: #fff;
 }
 
-.card-footer {
+.card-footer, .modal-footer {
   background-color: #f2f1f0;
 }
 

app/css/hackernews.css

@@ -34,12 +34,12 @@ h5.card-title {
   color: #212529;
 }
 
-.card {
+.card, .modal-dialog {
   border-radius: 1px;
   border-color: #ff6600;
 }
 
-.card>.card-header {
+.card>.card-header, .modal-header {
   border-color: #ff6600;
   background-color: #ff6600;
   color: #000;
@@ -53,11 +53,20 @@ h5.card-title {
   font-size: 1.0rem;
 }
 
-.card-header [class^="fa"] {
+.card-header [class^="fa"], .modal-header [class^="fa"] {
   color: #fff;
   font-size: 1.0rem;
 }
 
+.modal-title {
+  color: #000;
+  font-size: 1.0rem;
+}
+
+.modal-content {
+  border-radius: 0px;
+}
+
 .sidebar-brand-text {
   text-transform: none;
   color: #212529;

app/css/lightsout.css

@@ -119,7 +119,7 @@ a:focus, a:hover {
   color: #d2d2d2;
 }
 
-.card>.card-header {
+.card>.card-header, .modal-content, .modal-header {
   border-color: #404040;
   background-color: #202020;
   color: #afafaf;
@@ -129,6 +129,10 @@ a:focus, a:hover {
   font-weight: 400;
 }
 
+.modal-body {
+  background-color: #141414;
+}
+
 .card>.card-header .fa {
   color: #202020;
 }
@@ -197,11 +201,15 @@ hr {
   width: 6.5rem;
 }
 
-.card-footer {
+.card-footer, .modal-footer {
   background-color: #202020;
   border-top: 0px;
 }
 
+.modal-footer {
+  border-radius: 0.3rem;
+}
+
 .card>.card-header::before, .navbar-default::before {
   content: " ";
   display: block;