styling, require a code for prompts, admin privs, ordering, filtering, jump-to-page

assets/css/app.css

@@ -1,6 +1,11 @@
-/* This file is for your main application CSS */
-@import "./phoenix.css";
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
 
+/* This file is for your main application CSS */
+.bg-gray {
+  background-color: rgb(20, 20, 20);
+}
 /* Alerts and form errors used by phx.new */
 .alert {
   padding: 15px;
@@ -46,12 +51,12 @@
   transition: opacity 1s ease-out;
 }
 
-.phx-loading{
+.phx-loading {
   cursor: wait;
 }
 
 .phx-modal {
-  opacity: 1!important;
+  opacity: 1 !important;
   position: fixed;
   z-index: 1;
   left: 0;
@@ -59,15 +64,36 @@
   width: 100%;
   height: 100%;
   overflow: auto;
-  background-color: rgba(0,0,0,0.4);
+  background-color: rgba(0, 0, 0, 0.4);
 }
 
 .phx-modal-content {
-  background-color: #fefefe;
+  background-color: #323232;
   margin: 15vh auto;
-  padding: 20px;
+  padding: 20\px;
   border: 1px solid #888;
-  width: 80%;
+  max-width: 600px;
+}
+
+.modal-label {
+  display: inline-block;
+  min-width: 140px;
+  text-align: right;
+}
+
+.pagination-link {
+  height: 45px;
+  line-height: 45px;
+  width: 175px;
+}
+
+.pagination-btns {
+  width: 420px;
+  max-width: 100%;
+}
+
+.center-placeholder::placeholder {
+  text-align: center;
 }
 
 .phx-modal-close {
@@ -99,22 +125,42 @@
   animation: 0.2s ease-out 0s normal forwards 1 fade-out-keys;
 }
 
-@keyframes fade-in-scale-keys{
-  0% { scale: 0.95; opacity: 0; }
-  100% { scale: 1.0; opacity: 1; }
+@keyframes fade-in-scale-keys {
+  0% {
+    scale: 0.95;
+    opacity: 0;
+  }
+  100% {
+    scale: 1;
+    opacity: 1;
+  }
 }
 
-@keyframes fade-out-scale-keys{
-  0% { scale: 1.0; opacity: 1; }
-  100% { scale: 0.95; opacity: 0; }
+@keyframes fade-out-scale-keys {
+  0% {
+    scale: 1;
+    opacity: 1;
+  }
+  100% {
+    scale: 0.95;
+    opacity: 0;
+  }
 }
 
-@keyframes fade-in-keys{
-  0% { opacity: 0; }
-  100% { opacity: 1; }
+@keyframes fade-in-keys {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
-@keyframes fade-out-keys{
-  0% { opacity: 1; }
-  100% { opacity: 0; }
+@keyframes fade-out-keys {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
 }