Enhance mobile layout: ensure consistent background colors, hide specific elements in mobile view, and improve overall visual clarity for better user experience.

magdielcardoso · magdielcardoso · commit 662a6f295e04 · 2025-07-18T12:14:18.000-03:00
diff --git a/examples/mobile.html b/examples/mobile.html
@@ -55,6 +55,32 @@
             margin-top: 0 !important;
         }
 
+        /* Garantir que o fundo permaneça como está, especialmente no Kanban */
+        body {
+            background-color: #f3f4f6 !important;
+            /* bg-gray-100 */
+        }
+
+        /* Garantir que o app não tenha fundo escuro */
+        #app {
+            background-color: transparent !important;
+        }
+
+        /* Garantir que o wrapper principal não tenha fundo escuro */
+        #app>div.flex.flex-wrap.app-wrapper {
+            background-color: transparent !important;
+        }
+
+        /* Corrigir fundo escuro específico do Kanban */
+        #app>div.flex.flex-wrap.app-wrapper.dark\:text-slate-300>main>div>div {
+            background-color: transparent !important;
+        }
+
+        /* Garantir que o main do Kanban não tenha fundo escuro */
+        #app>div.flex.flex-wrap.app-wrapper.dark\:text-slate-300>main {
+            background-color: transparent !important;
+        }
+
         .navbar-item-indicator {
             height: 3px;
             transition: all 0.3s ease;
@@ -356,6 +382,8 @@
         });
     </script>
 
+
+
     <!-- Navbar Inferior - Visível apenas em dispositivos móveis (menor que md:768px) -->
     <div class="fixed bottom-0 w-full md:hidden z-[9999]">
         <nav class="navbar-container bg-navblue mx-auto max-w-lg shadow-lg">
@@ -445,6 +473,26 @@
 
         @media (max-width: 768px) {
 
+            /* Ocultar input específico no mobile */
+            #app>div.flex.flex-wrap.app-wrapper.dark\:text-slate-300>main>div>section>div>header>div>div>div:nth-child(1)>div>input {
+                display: none !important;
+            }
+
+            /* Ocultar ícone específico no mobile */
+            #app>div.flex.flex-wrap.app-wrapper.dark\:text-slate-300>main>div>section>div>header>div>div>div:nth-child(1)>div>span {
+                display: none !important;
+            }
+
+            /* Ocultar bottom-left-labels no mobile */
+            #app>div.flex.flex-wrap.app-wrapper.dark\:text-slate-300>main>div>div>header>div.bottom-left-labels {
+                display: none !important;
+            }
+
+            /* Ocultar bottom-right-actions button no mobile */
+            #app>div.flex.flex-wrap.app-wrapper.dark\:text-slate-300>main>div>div>header>div.bottom-right-actions>div>div>button {
+                display: none !important;
+            }
+
             /* Botão de voltar */
             #app>div.flex.flex-wrap.app-wrapper.dark\:text-slate-300>main>section>div.conversation-details-wrap.bg-n-background>div.flex.flex-col.items-center.justify-between.px-4.py-2.border-b.bg-n-background.border-n-weak.md\:flex-row>div>div.flex.items-center.justify-start.max-w-full.min-w-0.w-fit>button {
                 display: flex !important;
