@necrolab/dashboard 0.4.48 → 0.4.50

package/src/assets/css/_utilities.scss

@@ -0,0 +1,441 @@
+/* ==========================================================================
+   Z-INDEX MANAGEMENT
+   ========================================================================== */
+
+.z-dropdown {
+    z-index: 100;
+}
+
+.z-dropdown-high {
+    z-index: 200;
+}
+
+.z-modal {
+    z-index: 1000;
+}
+
+.z-tooltip {
+    z-index: 2000;
+}
+
+.z-overlay {
+    z-index: 3000;
+}
+
+.z-max {
+    z-index: 9999;
+}
+
+/* ==========================================================================
+   COMMON POSITIONING UTILITIES
+   ========================================================================== */
+
+.relative-positioned {
+    position: relative !important;
+}
+
+.dropdown-container {
+    position: relative;
+}
+
+/* ==========================================================================
+   EDITOR UTILITIES
+   ========================================================================== */
+
+.editor-base {
+    font-family: "JetBrains Mono", "Fira Code", "Menlo", "Monaco", "Courier New", monospace;
+    font-size: 14px;
+    line-height: 1.6;
+    tab-size: 4;
+    background-color: transparent;
+    border: none;
+    outline: none;
+    resize: none;
+}
+
+.editor-scrollable {
+    overflow: auto !important;
+    -webkit-overflow-scrolling: touch !important;
+    touch-action: auto !important;
+    overscroll-behavior: auto !important;
+}
+
+/* ==========================================================================
+   TABLE UTILITIES
+   ========================================================================== */
+
+.table-row-even {
+    background-color: #1a1b1e;
+}
+
+.table-row-odd {
+    background-color: #242529;
+}
+
+.table-component {
+    @apply w-full rounded-lg border border-dark-600;
+    overflow: visible !important;
+    background-color: #2e2f34;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+/* ==========================================================================
+   DROPDOWN UTILITIES
+   ========================================================================== */
+
+.dropdown-base {
+    @apply bg-dark-500 border-2 border-dark-550 rounded-lg;
+    margin-left: 0 !important;
+    border-width: 2px !important;
+}
+
+.dropdown-no-margin {
+    margin-left: 0 !important;
+}
+
+/* Dropdown menu z-index inheritance */
+.z-dropdown-high .dropdown-menu,
+.z-dropdown-high .option-list,
+.z-dropdown-high [class*="dropdown"] {
+    z-index: 200 !important;
+}
+
+.z-dropdown .dropdown-menu,
+.z-dropdown .option-list,
+.z-dropdown [class*="dropdown"] {
+    z-index: 100 !important;
+}
+
+/* ==========================================================================
+   REFRESH BUTTON UTILITIES
+   ========================================================================== */
+
+.refresh-button {
+    &:hover {
+        .refresh-icon {
+            transform: rotate(180deg);
+        }
+    }
+}
+
+.refresh-icon {
+    transition: transform 0.5s ease;
+}
+
+/* ==========================================================================
+   MOBILE RESPONSIVE UTILITIES
+   ========================================================================== */
+
+.mobile-header-controls {
+    @apply flex lg:hidden ml-auto items-center gap-x-2;
+}
+
+.desktop-controls-hide {
+    @apply hidden lg:block;
+}
+
+/* ==========================================================================
+   SPACING UTILITIES
+   ========================================================================== */
+
+.section-divider {
+    @apply border border-dark-650 my-8;
+}
+
+.controls-wrapper {
+    @apply lg:mb-3;
+}
+
+.stats-component {
+    /* Add any stats-specific styling here */
+}
+
+.utilities-section {
+    /* Add any utilities-specific styling here */
+}
+
+/* ==========================================================================
+   RESPONSIVE LAYOUT UTILITIES - CONSOLIDATED
+   ========================================================================== */
+
+/* Mobile-first responsive containers */
+.container-responsive {
+    @apply w-full mx-auto px-4;
+
+    @screen sm {
+        @apply px-6;
+    }
+
+    @screen lg {
+        @apply px-8;
+    }
+}
+
+/* Responsive grid systems */
+.grid-responsive-1-2 {
+    @apply grid grid-cols-1;
+
+    @screen md {
+        @apply grid-cols-2;
+    }
+}
+
+.grid-responsive-1-2-3 {
+    @apply grid grid-cols-1;
+
+    @screen sm {
+        @apply grid-cols-2;
+    }
+
+    @screen lg {
+        @apply grid-cols-3;
+    }
+}
+
+.grid-responsive-2-4 {
+    @apply grid grid-cols-2;
+
+    @screen md {
+        @apply grid-cols-4;
+    }
+}
+
+/* Responsive flex utilities */
+.flex-responsive-col-row {
+    @apply flex flex-col;
+
+    @screen lg {
+        @apply flex-row;
+    }
+}
+
+.flex-responsive-wrap {
+    @apply flex flex-col gap-4;
+
+    @screen md {
+        @apply flex-row justify-between items-center;
+    }
+}
+
+/* Responsive spacing */
+.gap-responsive {
+    @apply gap-2;
+
+    @screen sm {
+        @apply gap-3;
+    }
+
+    @screen lg {
+        @apply gap-4;
+    }
+}
+
+.padding-responsive {
+    @apply p-2;
+
+    @screen sm {
+        @apply p-4;
+    }
+
+    @screen lg {
+        @apply p-6;
+    }
+}
+
+/* Responsive text sizes */
+.text-responsive-sm {
+    @apply text-xs;
+
+    @screen sm {
+        @apply text-sm;
+    }
+}
+
+.text-responsive-base {
+    @apply text-sm;
+
+    @screen sm {
+        @apply text-base;
+    }
+}
+
+.text-responsive-lg {
+    @apply text-base;
+
+    @screen sm {
+        @apply text-lg;
+    }
+}
+
+/* ==========================================================================
+   DEVICE-SPECIFIC UTILITIES
+   ========================================================================== */
+
+/* Mobile portrait utilities */
+@screen mobile-portrait {
+    .mobile-portrait-hidden {
+        display: none !important;
+    }
+
+    .mobile-portrait-full-width {
+        width: 100% !important;
+    }
+
+    .mobile-portrait-stack {
+        flex-direction: column !important;
+        gap: 0.75rem !important;
+    }
+
+    .mobile-portrait-compact {
+        padding: 0.25rem !important;
+        gap: 0.25rem !important;
+    }
+
+    .editor-controls-row,
+    .proxy-controls-row {
+        gap: 0.75rem !important;
+        flex-wrap: wrap;
+
+        .dropdown-container {
+            width: 100% !important;
+            max-width: 16rem;
+        }
+
+        > div:last-child {
+            margin-right: auto;
+            margin-top: 0.5rem;
+        }
+    }
+
+    .task-switches h4 {
+        font-size: 12px !important;
+    }
+}
+
+/* Desktop-specific utilities */
+@screen lg {
+    .desktop-only {
+        display: block !important;
+    }
+
+    .desktop-hidden {
+        display: none !important;
+    }
+}
+
+/* Height-based responsive utilities */
+@screen h-sm {
+    .short-screen-compact {
+        padding-top: 0.5rem !important;
+        padding-bottom: 0.5rem !important;
+    }
+
+    .short-screen-hidden {
+        display: none !important;
+    }
+}
+
+/* Touch device optimizations */
+@screen touch {
+    .touch-larger {
+        min-height: 44px !important;
+        min-width: 44px !important;
+    }
+
+    .touch-spacing {
+        margin: 0.25rem !important;
+    }
+}
+
+/* ==========================================================================
+   CONSOLE UTILITIES
+   ========================================================================== */
+
+.console-base {
+    @apply bg-dark-400 border border-dark-550 border-2 rounded relative;
+
+    textarea {
+        background: transparent;
+        resize: none;
+        @apply w-full focus:outline-none text-white;
+    }
+}
+
+.console-dropdown {
+    font-size: 0.875rem !important;
+    font-weight: 500 !important;
+}
+
+/* ==========================================================================
+   TASK UTILITIES
+   ========================================================================== */
+
+.task-switches {
+    h4 {
+        color: #e1e1e4;
+        @apply text-xs text-center flex items-center gap-x-2 mx-auto;
+    }
+
+    .switch-wrapper {
+        @apply gap-y-2;
+    }
+}
+
+/* ==========================================================================
+   INPUT UTILITIES
+   ========================================================================== */
+
+.input-container {
+    position: relative;
+}
+
+.input-wrapper {
+    @apply z-20;
+
+    label {
+        @apply text-xs text-light-300 block;
+    }
+}
+
+.label-override {
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    margin-bottom: 8px;
+    color: #a0a0a6;
+
+    svg {
+        margin-left: 8px;
+        width: 16px;
+        height: 16px;
+    }
+}
+
+/* ==========================================================================
+   CONTEXT MENU UTILITIES
+   ========================================================================== */
+
+.context-menu {
+    position: fixed;
+    z-index: 9999;
+    background: var(--bg-dark-400);
+    border: 1px solid var(--border-dark-650);
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+/* ==========================================================================
+   ICON UTILITIES
+   ========================================================================== */
+
+.icon-muted {
+    color: #a0a0a6 !important;
+    fill: #a0a0a6 !important;
+}
+
+.icon-muted svg,
+.icon-muted svg path,
+.icon-muted svg * {
+    color: #a0a0a6 !important;
+    fill: #a0a0a6 !important;
+}