@necrolab/dashboard 0.4.47 → 0.4.49

package/src/assets/css/main.scss

@@ -1,28 +1,27 @@
 @use "input";
+@use "utilities";
+
+/* ==========================================================================
+   GLOBAL RESETS & BASE STYLES
+   ========================================================================== */
 
-/* Global input styling fixes for iOS and other platforms */
 input,
 textarea,
 select,
 button {
-    /* Remove iOS blue highlight/border */
     -webkit-tap-highlight-color: transparent;
     -webkit-touch-callout: none;
-
-    /* Remove default focus outline */
     outline: none;
 }
 
 input,
 textarea,
 select {
-    /* Remove browser default styling */
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
 }
 
-/* Enhanced focus state removal for iOS */
 input:focus,
 textarea:focus,
 select:focus {
@@ -31,7 +30,10 @@ select:focus {
     box-shadow: none !important;
 }
 
-// Base styles - Ultra bulletproof scroll prevention
+/* ==========================================================================
+   SCROLL PREVENTION & TOUCH HANDLING
+   ========================================================================== */
+
 html {
     overflow: hidden !important;
     overscroll-behavior: none !important;
@@ -48,7 +50,6 @@ html {
     overscroll-behavior: none !important;
 }
 
-// Override for textareas to allow scrolling and selection
 textarea,
 .code-editor,
 .proxy-editor {
@@ -60,41 +61,102 @@ textarea,
     touch-action: pan-y !important;
 }
 
-// Override for dropdown menus to allow scrolling - must be very specific to override global rules
 .dropdown-menu,
 .dropdown-menu *,
+.dropdown-content-portal,
+.dropdown-content-portal *,
 .option-list,
 .option-list *,
-.dropdown-menu.scrollable,
-.dropdown-menu.scrollable * {
+.console,
+.console * {
     overscroll-behavior: auto !important;
     touch-action: pan-y !important;
     -webkit-overflow-scrolling: touch !important;
+}
+
+/* Specific overrides for dropdown content portals */
+.dropdown-content-portal {
+    overflow: auto !important;
     overflow-y: auto !important;
+    overscroll-behavior: auto !important;
+    touch-action: pan-y !important;
+    -webkit-overflow-scrolling: touch !important;
+    scroll-behavior: smooth !important;
 }
 
-// Additional specific overrides for dropdown buttons and text
-.dropdown-item,
-.dropdown-item *,
-.dropdown-item-text {
+.dropdown-content-portal * {
+    overflow: auto !important;
     overscroll-behavior: auto !important;
     touch-action: pan-y !important;
+    -webkit-overflow-scrolling: touch !important;
+    user-select: auto !important;
+    -webkit-user-select: auto !important;
+    -moz-user-select: auto !important;
+    -ms-user-select: auto !important;
 }
 
-// Override for console scrolling
-.console,
-.console *,
-.console.scrollable {
+/* Ultra-specific overrides to beat the global * selector */
+body .dropdown-content-portal,
+html .dropdown-content-portal,
+div .dropdown-content-portal {
+    overflow: auto !important;
+    overflow-y: auto !important;
+    overscroll-behavior: auto !important;
+    touch-action: pan-y !important;
+    -webkit-overflow-scrolling: touch !important;
+}
+
+/* Force scrolling on teleported dropdown content */
+body > .dropdown-content-portal,
+[data-v-app] .dropdown-content-portal {
+    overflow: auto !important;
+    overflow-y: auto !important;
+    overscroll-behavior: auto !important;
+    touch-action: pan-y !important;
+    -webkit-overflow-scrolling: touch !important;
+}
+
+.code-editor,
+.proxy-editor,
+.editor-container,
+.proxy-editor-container {
     overscroll-behavior: auto !important;
     touch-action: pan-y !important;
     -webkit-overflow-scrolling: touch !important;
 }
 
+/* iPhone landscape mode - critical editor scrolling overrides */
+@media (max-height: 500px) and (orientation: landscape) {
+    .code-editor,
+    .proxy-editor,
+    .editor-container,
+    .proxy-editor-container,
+    .editor-wrapper {
+        overflow: auto !important;
+        -webkit-overflow-scrolling: touch !important;
+        touch-action: pan-y !important;
+        overscroll-behavior: contain !important;
+    }
+
+    body {
+        overflow-y: auto !important;
+        touch-action: pan-y !important;
+        overscroll-behavior: contain !important;
+    }
+
+    html {
+        overflow-y: auto !important;
+        overscroll-behavior: contain !important;
+    }
+}
+
+/* ==========================================================================
+   BODY & LAYOUT
+   ========================================================================== */
+
 body {
     font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
-    background: url("@/assets/img/background.svg") center center, #1a1b1e;
-    background-size: cover;
-    background-attachment: fixed;
+    background-color: #1a1b1e;
     min-height: 100vh;
     overflow: hidden !important;
     overscroll-behavior: none !important;
@@ -104,14 +166,37 @@ body {
     -moz-osx-font-smoothing: grayscale;
     touch-action: none !important;
     color: #e2e2e5;
+    position: relative;
     @apply bg-dark-300;
+
+    &::before {
+        content: "";
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-image: url("@/assets/img/background.svg");
+        background-position: center center;
+        background-size: cover;
+        background-repeat: no-repeat;
+        -webkit-background-size: cover;
+        z-index: -1;
+        pointer-events: none;
+        will-change: transform;
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+    }
 }
 
 img {
     pointer-events: none;
 }
 
-// Layout utilities
+/* ==========================================================================
+   UTILITY CLASSES
+   ========================================================================== */
+
 .flex-center {
     @apply flex items-center justify-center;
 }
@@ -124,7 +209,6 @@ img {
     @apply flex flex-col items-center justify-center;
 }
 
-// Text utilities
 .text-heading {
     @apply text-base font-semibold;
     color: #e2e2e5;
@@ -140,7 +224,26 @@ img {
     color: #a0a0a6;
 }
 
-// Button utilities
+.card-dark {
+    @apply bg-dark-400 border border-dark-650 rounded shadow-sm;
+}
+
+.grid-tasks {
+    @apply grid grid-cols-12 gap-2 items-center;
+}
+
+.grid-responsive {
+    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
+}
+
+.form-grid {
+    @apply grid grid-cols-1 md:grid-cols-2 gap-4;
+}
+
+/* ==========================================================================
+   BUTTON COMPONENTS
+   ========================================================================== */
+
 .btn-primary {
     @apply bg-dark-550 hover:bg-dark-650 text-white font-medium px-4 py-2 rounded transition-all duration-150;
     border: 1px solid #44454b;
@@ -175,56 +278,10 @@ img {
     color: #e2e2e5;
 }
 
-// Form utilities
-.form-grid {
-    @apply grid grid-cols-1 md:grid-cols-2 gap-4;
-}
-
-.label-override {
-    @apply flex items-center text-xs mb-2;
-    color: #a0a0a6;
-
-    svg {
-        @apply ml-2;
-        color: #a0a0a6 !important;
-        width: 16px;
-        height: 16px;
-        fill: #a0a0a6 !important;
-    }
-}
+/* ==========================================================================
+   COMPONENT UTILITIES
+   ========================================================================== */
 
-// Use CSS custom property to avoid global path selector
-.label-override svg {
-    color: #a0a0a6 !important;
-    fill: #a0a0a6 !important;
-}
-
-.label-override svg path {
-    fill: #a0a0a6 !important;
-    color: #a0a0a6 !important;
-}
-
-.label-override svg * {
-    fill: #a0a0a6 !important;
-    color: #a0a0a6 !important;
-}
-
-.switch-wrapper svg {
-    color: #a0a0a6 !important;
-    fill: #a0a0a6 !important;
-}
-
-.switch-wrapper svg path {
-    fill: #a0a0a6 !important;
-    color: #a0a0a6 !important;
-}
-
-.switch-wrapper svg * {
-    fill: #a0a0a6 !important;
-    color: #a0a0a6 !important;
-}
-
-// Component utilities
 .smooth-hover {
     @apply transition-all duration-200 hover:opacity-80;
 }
@@ -233,20 +290,6 @@ img {
     @apply w-2 h-2 rounded-full flex-shrink-0;
     min-width: 4px;
     min-height: 4px;
-    
-    @media (max-width: 768px) {
-        width: 6px;
-        height: 6px;
-        min-width: 6px;
-        min-height: 6px;
-    }
-    
-    @media (max-width: 480px) {
-        width: 5px;
-        height: 5px;
-        min-width: 5px;
-        min-height: 5px;
-    }
 }
 
 .mobile-icons {
@@ -262,25 +305,36 @@ img {
     }
 }
 
-.card-dark {
-    @apply bg-dark-400 border border-dark-650 rounded shadow-sm;
+.loading-spinner {
+    @apply animate-spin w-4 h-4 border-2 border-white border-t-transparent rounded-full;
 }
 
-// Grid utilities
-.grid-tasks {
-    @apply grid grid-cols-12 gap-2 items-center;
-}
+/* ==========================================================================
+   LABEL & ICON STYLING
+   ========================================================================== */
 
-.grid-responsive {
-    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
+.label-override {
+    @apply flex items-center text-xs mb-2;
+    color: #a0a0a6;
+
+    svg {
+        @apply ml-2;
+        color: #a0a0a6 !important;
+        width: 16px;
+        height: 16px;
+        fill: #a0a0a6 !important;
+    }
 }
 
-// Loading states
-.loading-spinner {
-    @apply animate-spin w-4 h-4 border-2 border-white border-t-transparent rounded-full;
+.switch-wrapper svg {
+    color: #a0a0a6 !important;
+    fill: #a0a0a6 !important;
 }
 
-// Scrollbar utilities
+/* ==========================================================================
+   SCROLLBAR UTILITIES
+   ========================================================================== */
+
 .hidden-scrollbars {
     scrollbar-width: none;
     -ms-overflow-style: none;
@@ -290,39 +344,33 @@ img {
     }
 }
 
-// Dynamic heights for different devices - conservative approach to prevent partial items
-.max-h-big {
-    max-height: calc(100vh - 12rem); // Account for navbar, header, stats, controls, utilities
-    min-height: 8rem; // 2 items minimum (2 * 64px = 128px = 8rem)
-    overflow: hidden; // Ensure no partial items show
-}
-
-@media only screen and (min-width: 1440px) {
-    .max-h-big {
-        max-height: calc(100vh - 11rem); // Large screens get slightly more space
-    }
-}
+/* ==========================================================================
+   DYNAMIC HEIGHTS & RESPONSIVE DESIGN
+   ========================================================================== */
 
-@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) {
-    .max-h-big {
-        max-height: calc(100vh - 12rem);
-    }
+.max-h-big {
+    max-height: calc(100vh - 12rem);
+    min-height: 8rem;
+    overflow: hidden;
 }
 
-@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation: portrait) {
+@screen xl {
     .max-h-big {
-        max-height: calc(100vh - 12rem);
+        max-height: calc(100vh - 11rem);
     }
 }
 
-@media screen and (max-device-height: 500px) {
+@screen h-sm {
     .max-h-big {
         max-height: calc(100vh - 12rem);
         min-height: 8rem;
     }
 }
 
-// Transitions
+/* ==========================================================================
+   TRANSITIONS & ANIMATIONS
+   ========================================================================== */
+
 .fade-enter-active,
 .fade-leave-active {
     transition: opacity 0.15s ease;
@@ -333,28 +381,14 @@ img {
     opacity: 0;
 }
 
-// Performance
 .will-change-auto {
     will-change: auto;
 }
 
-// Root configuration
-:root {
-    touch-action: pan-x pan-y;
-    height: 100%;
-    --toastify-toast-width: 520px;
-}
-
-// iOS layout stabilization
-@supports (-webkit-appearance: none) {
-    .component-container,
-    .card-dark,
-    h1, h2, h3, h4, h5, h6 {
-        transform: translate3d(0, 0, 0);
-    }
-}
+/* ==========================================================================
+   TOAST NOTIFICATIONS
+   ========================================================================== */
 
-// Toast notifications
 .Toastify__toast-theme--colored.Toastify__toast--default,
 .Toastify__toast-theme--light {
     @apply bg-dark-550 text-white;
@@ -379,7 +413,6 @@ img {
     fill: currentColor !important;
 }
 
-// Toast container
 .Toastify__toast-container {
     pointer-events: none;
     --toastify-toast-bd-radius: 6px;
@@ -387,19 +420,17 @@ img {
 
 .Toastify__toast {
     min-height: 50px !important;
-    height: 50px !important; // Keep fixed height for consistency
+    height: 50px !important;
     pointer-events: auto !important;
     margin-bottom: 6px !important;
-    
-    // Ultra-smooth animations with optimized timing
+
     transition: transform 0.18s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.12s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
     transform: translate3d(0, 0, 0);
-    
-    // Override default animations with smoother curves
+
     &.Toastify__slide-enter-active {
         animation: slideInRight 0.22s cubic-bezier(0.25, 0.1, 0.25, 1);
     }
-    
+
     &.Toastify__slide-exit-active {
         animation: slideOutRight 0.12s cubic-bezier(0.4, 0, 1, 1);
     }
@@ -416,7 +447,6 @@ img {
     }
 }
 
-// Tighter, more precise animations
 @keyframes slideInRight {
     0% {
         transform: translateX(110%);
@@ -453,11 +483,37 @@ img {
 
 .Toastify__progress-bar {
     height: 2px;
-    transition: width 0.08s cubic-bezier(0.25, 0.1, 0.25, 1); // Ultra-smooth progress bar
+    transition: width 0.08s cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
+/* ==========================================================================
+   ROOT CONFIGURATION & iOS OPTIMIZATIONS
+   ========================================================================== */
+
+:root {
+    touch-action: pan-x pan-y;
+    height: 100%;
+    --toastify-toast-width: 520px;
+}
+
+@supports (-webkit-appearance: none) {
+    .component-container,
+    .card-dark,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        transform: translate3d(0, 0, 0);
+    }
 }
 
-// Mobile optimizations
-@media (max-width: 768px) {
+/* ==========================================================================
+   MOBILE RESPONSIVE OPTIMIZATIONS - CONSOLIDATED
+   ========================================================================== */
+
+@screen md {
     .text-heading {
         @apply text-sm;
     }
@@ -469,19 +525,37 @@ img {
 
     .btn-action {
         @apply text-sm px-6 h-12;
-        min-height: 48px; // Apple's recommended minimum touch target size
+        min-height: 48px;
     }
 
-    .form-grid {
-        @apply grid-cols-1;
+    .status-indicator {
+        width: 6px;
+        height: 6px;
+        min-width: 6px;
+        min-height: 6px;
+    }
+}
+
+@screen mobile-portrait {
+    .btn-action {
+        @apply text-base px-8 h-14;
+        min-height: 56px;
+        font-weight: 600;
+        border-radius: 8px;
+    }
+
+    .status-indicator {
+        width: 5px;
+        height: 5px;
+        min-width: 5px;
+        min-height: 5px;
     }
 }
 
-// iPhone landscape mode - larger buttons for easier touch
-@media only screen and (max-device-width: 430px) and (orientation: landscape) {
+@screen mobile-landscape {
     .btn-action {
         @apply text-base px-8 h-14;
-        min-height: 56px; // Extra large for landscape touch
+        min-height: 56px;
         font-weight: 600;
     }
 }

package/src/components/Auth/LoginForm.vue

@@ -2,20 +2,20 @@
     <div class="form-section">
         <!-- Username -->
         <div class="input-wrapper mb-4">
-            <label style="display: flex; align-items: center; font-size: 12px; margin-bottom: 8px; color: #a0a0a6">
-                Username
-                <ProfileIcon style="margin-left: 8px; width: 16px; height: 16px" />
-            </label>
+                    <label class="label-override">
+            Username
+            <ProfileIcon />
+        </label>
             <div class="input-default">
                 <input v-model="user" placeholder="Username" />
             </div>
         </div>
         <!-- Password -->
         <div class="input-wrapper">
-            <label style="display: flex; align-items: center; font-size: 12px; margin-bottom: 8px; color: #a0a0a6">
-                Password
-                <KeyIcon style="margin-left: 8px; width: 16px; height: 16px" />
-            </label>
+                    <label class="label-override">
+            Password
+            <KeyIcon />
+        </label>
             <div class="input-default">
                 <input v-model="password" type="password" placeholder="Password" />
             </div>