feat: toast

gestaoRaul/templates/static/comandas/css/viewcomanda.css

@@ -6,14 +6,16 @@
     margin: 0 auto; 
   }
 
+  body {
+    z-index: 0;
+  }
+
   .grid-list-products {
- 
     justify-items: center;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 8px;
     max-width: 800px;
-    /* margin: 0 auto;  */
   }
   
   .card-product {
@@ -27,12 +29,12 @@
     background: var(--main-gradient);
     box-shadow: 3px 3px 10px rgba(2, 2, 2, 0.678);
     border-radius: 5px;
-  
+    transition: transform 0.4s, box-shadow 0.4s;
     }
   
   .card-product:hover {
     transform: scale(1.05);
-    transition: transform 0.4s;
+    transition: transform 0.4s, box-shadow 0.4s;
     box-shadow: 0px 0px 10px rgba(86, 187, 255, 0.815);
   }
   
@@ -40,15 +42,25 @@
     text-align: center;
   }
   
-  
+  .close {
+    height: 45px;
+    transition: transform 0.4s;
+  }
+  .close:hover {
+    transform: scale(1.2);
+    transition: transform 0.4s;
+    filter: drop-shadow(0px 0px 8px rgba(255, 1, 1, 0.452));
+  }
+
   .popover{
+    position: relative;
     width: 98%;
-    height: 98%;
+    height: 96%;
     max-width: 800px;
     top: 20px;
     left: 25%;
     padding: 20px;
-    /* background-color: #f2f2f29d; */
+    background-color: #1f1f1fb6;
     border-radius: 15px;
     border: none;
     box-shadow: 0px 0px 8px rgba(143, 143, 143, 0.2);
@@ -56,20 +68,19 @@
     line-height: 50px; 
     font-size: 18px;
     font-weight: bold;
+    z-index: 1;
     /* color: #333; */
-    transition: transform 0.2s;
+    transition: transform 0.4s;
     animation: jump 0.5s;
   }
-  
+
+
   .popover::backdrop {
-    background-color: rgba(0, 0, 0, 0.315);
+    background-color: rgba(39, 39, 39, 0.315);
     backdrop-filter: blur(5px);
-    /* animation: jump 0.2s; */
   }
 
 
-
-
   @media screen and (max-width: 730px) {
 
     .popover{
@@ -78,7 +89,6 @@
       max-width: 800px;
       top: 20px;
       left: 10px;
-
       }
 
       .card-product {
@@ -89,6 +99,5 @@
         background: var(--main-gradient);
         box-shadow: 3px 3px 10px rgba(2, 2, 2, 0.678);
         font-size: 14px;
-      
         }
     }