page orders | add duplicati container

gestaoRaul/templates/static/orders/css/orders.css

@@ -1,37 +1,62 @@
 
-  @keyframes girar {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
+
+  h4{
+    color: black;
+  }
+
+.container {
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    padding: 0px;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
 }
 
-@keyframes jump {
-  0% {
-    transform: scale(0.0);
-  }
-  70% {
-    transform: scale(1.2);
-  }
-  100% {
-    transform: scale(1);
-  }
+
+.kanban-board {
+    display: flex;
+    gap: 10px;
+    justify-content: space-between;
 }
 
-.loading {
-
-  align-items: center;
-  align-content: center;
-  align-self: center;
-  margin: 0 auto;
-  animation: girar 4s infinite linear;
+.column {
+    flex: 1;
+    border: 1px solid #535353;
+    border-radius: 6px;
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
 }
 
+.cards-container {
+    flex-grow: 1; /* Permite que o container de cards ocupe o espaço restante */
+    overflow-y: auto; /* Adiciona a barra de rolagem vertical */
+    max-height: 85vh; /* Defina uma altura máxima para ativar o scroll */
+    padding-right: 5px; /* Espaçamento para não cortar a barra de rolagem */
+}
+
+.cards-container::-webkit-scrollbar {
+    width: 8px;
+}
+
+.cards-container::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
+}
+
+.cards-container::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 10px;
+}
+
+.cards-container::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
+
+
 .m-card {
-    /* width: 50px; */
-    height: 100%;
+    width: 100%; 
     background-color: #f2f2f2;
     border-radius: 10px;
     box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
@@ -46,51 +71,24 @@
     animation: jump 0.7s;
   }
 
-  h4{
-    color: black;
+
+  @media screen and (max-width: 1028px) {
+    .container {
+      padding: 0px;
+      gap: 0px;
+      min-width: 100%;
+      min-height: 100%;
+     
+    }
+
+    .kanban-board {
+    gap: 0px;
   }
 
+  .column {
 
-.tab {
-  display: flex;
-  padding-top: 15px;
-  justify-content: space-between;
-  overflow: auto;
-  width: 100%;
-  border-bottom: 2px solid rgba(86, 187, 255, 0.192);
-}
+    padding: 0px;
 
-.tab button {
-  width: 24%;
-  background-color: #999aeb00;
-  padding: 10px 10px;
-  transition: 0.6s;
-  border-radius: 20px 20px 0px 0px;
-  align-items: center;
-  border-color: rgba(86, 187, 255, 0.192);
-  line-height: 20px; 
-}
+  }
 
-.tab button.active {
-  border-radius: 8px 8px 0px 0px;
-  border-color: rgba(86, 187, 255, 0.192);
-  background: var(--main-gradient);
-  box-shadow: 0px 0px 15px rgba(86, 187, 255, 0.815);
-}
-
-.tabcontent {
-  display: none;
-  padding: 6px 12px;
-
-}
-
-#list-orders{
-  justify-self: center;
-  width: 30%;
-}
-
-@media (max-width: 768px) {
-#list-orders{
-  width: 100%;
-}
 }