Style: nem lembro mais

gestaoRaul/mesas/templates/mesas_map.html

@@ -74,7 +74,16 @@ RRB&C - Mapa de Mesas
   {% if mesa.active == True %}
   <div id="{{mesa.id}}" class="m-card" ondragend="saveLocal()" draggable="true" style="  background-color: indianred;"  >{{mesa.name}} <input type="text" hidden value="{{mesa.location}}"> </div>
    {% else %}
-   <div id="{{mesa.id}}" class="m-card" ondragend="saveLocal()" draggable="true" > <span data-tooltip=" O id da mesa é:{{mesa.id}}" data-flow="top"> {{mesa.name}} </span><input type="text" hidden value="{{mesa.location}}"></div>
+   <div id="{{mesa.id}}" class="m-card" ondragend="saveLocal()" draggable="true" > <button style="border: none;background-color: rgba(240, 248, 255, 0);padding: 0px; font-size: 12px;color: black;" popovertarget="my-pop-{{mesa.id}}"> {{mesa.name}} </ style="border: none;background-color: aliceblue;padding: 0px;"><input type="text" hidden value="{{mesa.location}}"></div>
+   
+   <div id="my-pop-{{mesa.id}}" popover
+    style="width: 200px;
+    height: 200px;">
+    {{mesa.id}}
+    {{mesa.name}}
+    {{mesa.name}}
+    </div>
+
    {% endif %}
   
   {% endfor %}

gestaoRaul/templates/static/base.css

@@ -4,6 +4,20 @@
     --main-gradient: linear-gradient(145deg, #1E2A3B, #2C3E50);
   }
 
+  @keyframes jump {
+    0% {
+      transform: scale(0.0);
+      /* transform: translate(#000000); */
+    }
+    70% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  
 
 body {
     margin: 70px 0px 0px 0px;
@@ -187,6 +201,8 @@ input, textarea, select {
     padding: 12px 16px;
     text-decoration: none;
     display: block;
+    animation: jump 0.7s;
+
 
     
   }
@@ -195,6 +211,8 @@ input, textarea, select {
     background-color: #7a7a7a;
     border-radius: 5px;
     display: block;
+    /* animation: jump 0.7s; */
+
 
     }
 
@@ -209,6 +227,8 @@ input, textarea, select {
   
   .dropdown:hover .dropdown-content {
       display: block;
+      animation: jump 0.7s;
+
 }