feat: working on detail views.

Public/css/main.css

@@ -147,13 +147,17 @@ input[type=text]:focus, input[type=password]:focus, input[type=email]:focus {
   background-color: #555;
 }
 
-.toggle img {
+.toggle, .toggle img {
   background-color: inherit;
   width: 60px;
   height: 30px;
+}
+
+a.toggle, a img.toggle {
   cursor: pointer;
 }
 
+
 .toggle img:hover {
   background-color: #555;
 }
@@ -221,13 +225,15 @@ tr.htmx-swapping td {
   overflow: auto;
   z-index: 1;
   position: fixed;
-  top: 100px;
+  top: 60px;
   left: 0;
   background-color: #14141f;
   width: 100%;
 }
 
 .closebtn {
+  border: none;
+  background-color: inherit;
   color: grey;
   margin-left: 50px;
   text-decoration: none;
@@ -309,10 +315,7 @@ tr.htmx-swapping td {
   background-color: inherit;
   font-size: 1.3em;
   padding-bottom: 10px;
-}
-
-.btn-row button:hover {
-  color: blue;
+  cursor: pointer;
 }
 
 .btn-detail {
@@ -336,3 +339,72 @@ tr.htmx-swapping td {
 .label {
   color: #00ffcc;
 }
+
+.float {
+  z-index: 1;
+  position: absolute;
+  top: 60px;
+  left: 0;
+  width: 100%;
+  background-color: #14141f;
+  padding: 20px;
+}
+
+.float .closebtn {
+  position: relative;
+  float: right;
+  top: 0;
+  right: 5px;
+  font-size: 36px;
+  margin-left: 50px;
+  color: grey;
+}
+
+.float .closebtn:hover {
+  color: white;
+}
+
+.float.htmx-swapping {
+  opacity: 0;
+  transition: opacity 0.5s ease-out;
+}
+
+.float table {
+  position: relative;
+  top: 15px;
+}
+
+.btn-row {
+  margin-top: 40px;
+  margin-right: 5px;
+}
+
+.btn-row button {
+  float: right;
+  padding: 10px 20px;
+  border-radius: 10px;
+  margin-left: 20px;
+}
+
+button.danger {
+  background-color: #ff4d4d;
+  color: white;
+}
+
+button.edit {
+  float: right;
+  background-color: #9999ff;
+  color: white;
+ }
+
+.danger:hover, .edit:hover {
+  opacity: 0.8;
+}
+
+form table input[type=text] {
+  border: none;
+  border-bottom: none;
+  margin-bottom: 0;
+  padding-bottom: 0;
+  font-size: 1.5em;
+}