@necrolab/dashboard 0.4.220 → 0.5.1

package/src/assets/css/base/reset.scss

@@ -0,0 +1,43 @@
+/* ==========================================================================
+   GLOBAL RESETS
+   ========================================================================== */
+
+input,
+textarea,
+select,
+button {
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    outline: none;
+}
+
+input,
+textarea,
+select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+    outline: none !important;
+    -webkit-tap-highlight-color: transparent !important;
+    box-shadow: none !important;
+}
+
+/* Remove number input spinners */
+input[type="number"] {
+    -moz-appearance: textfield;
+}
+
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+img {
+    pointer-events: none;
+}

package/src/assets/css/base/scroll.scss

@@ -0,0 +1,114 @@
+/* ==========================================================================
+   SCROLL BEHAVIOR & TOUCH HANDLING
+   ========================================================================== */
+
+html {
+    overflow: hidden !important;
+    overscroll-behavior: none !important;
+    height: 100% !important;
+    width: 100% !important;
+}
+
+* {
+    @apply hidden-scrollbars;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    overscroll-behavior: none !important;
+}
+
+textarea,
+.code-editor,
+.proxy-editor {
+    -webkit-user-select: text !important;
+    -moz-user-select: text !important;
+    -ms-user-select: text !important;
+    user-select: text !important;
+    overscroll-behavior: auto !important;
+    touch-action: pan-y !important;
+}
+
+.dropdown-menu,
+.dropdown-menu *,
+.dropdown-content-portal,
+.dropdown-content-portal *,
+.option-list,
+.option-list *,
+.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;
+}
+
+.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;
+}
+
+/* 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;
+}
+
+/* ==========================================================================
+   SCROLLBAR UTILITIES
+   ========================================================================== */
+
+.hidden-scrollbars {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+.editor-scrollable {
+    overflow: auto !important;
+    -webkit-overflow-scrolling: touch !important;
+    touch-action: auto !important;
+    overscroll-behavior: auto !important;
+}

package/src/assets/css/base/typography.scss

@@ -0,0 +1,37 @@
+/* ==========================================================================
+   TYPOGRAPHY
+   ========================================================================== */
+
+body {
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+:root {
+    touch-action: pan-x pan-y;
+    height: 100%;
+    --toastify-toast-width: 520px;
+
+    /* OKLCH Color System - Supabase-inspired */
+    --bg-base: oklch(0.1822 0 0);
+    --bg-elevated: oklch(0.2046 0 0);
+    --bg-input: oklch(0.2603 0 0);
+    --bg-hover: oklch(0.2809 0 0);
+    --accent-green: oklch(0.72 0.15 145);
+    --border-base: oklch(0.2809 0 0);
+    --text-primary: oklch(0.9851 0 0);
+    --text-secondary: oklch(0.7122 0 0);
+    --text-muted: oklch(0.55 0 0);
+}
+
+.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;
+}

package/src/assets/css/components/buttons.scss

@@ -0,0 +1,216 @@
+/* ==========================================================================
+   BUTTON COMPONENTS - Shadcn-Inspired Design
+   ========================================================================== */
+
+/* Primary Button - Solid green with clean shadow */
+.btn-primary {
+    @apply font-medium transition-all duration-150;
+    background-color: oklch(0.72 0.15 145);
+    color: oklch(1 0 0);
+    padding: 0.5rem 1rem;
+    border-radius: 0.375rem;
+    box-shadow: 0 1px 2px oklch(0 0 0 / 0.1);
+    border: 2px solid oklch(0.72 0.15 145);
+
+    &:hover {
+        background-color: oklch(0.68 0.15 145);
+        border-color: oklch(0.68 0.15 145);
+    }
+
+    &:active {
+        background-color: oklch(0.64 0.15 145);
+        border-color: oklch(0.72 0.15 145);
+        outline: 1px solid oklch(0.72 0.15 145);
+        outline-offset: 0;
+    }
+}
+
+/* Secondary Button - Transparent with green border, fills on hover */
+.btn-secondary {
+    @apply font-medium transition-all duration-150;
+    background-color: transparent;
+    color: oklch(0.72 0.15 145);
+    padding: 0.5rem 1rem;
+    border-radius: 0.375rem;
+    border: 2px solid oklch(0.72 0.15 145);
+
+    &:hover {
+        background-color: oklch(0.72 0.15 145);
+        color: oklch(1 0 0);
+        border-color: oklch(0.72 0.15 145);
+    }
+
+    &:active {
+        background-color: oklch(0.68 0.15 145);
+        border-color: oklch(0.72 0.15 145);
+        outline: 1px solid oklch(0.72 0.15 145);
+        outline-offset: 0;
+    }
+}
+
+/* Ghost Button - No border, muted text, subtle hover */
+.btn-ghost {
+    @apply font-medium transition-all duration-150;
+    background-color: transparent;
+    color: oklch(0.82 0 0);
+    padding: 0.5rem 1rem;
+    border-radius: 0.375rem;
+    border: none;
+
+    &:hover {
+        background-color: oklch(0.22 0 0);
+        color: oklch(0.90 0 0);
+    }
+
+    &:active {
+        background-color: oklch(0.19 0 0);
+    }
+}
+
+/* Destructive Button - Red with clean shadow */
+.btn-danger,
+.btn-destructive {
+    @apply font-medium transition-all duration-150;
+    background-color: oklch(0.60 0.20 25);
+    color: oklch(1 0 0);
+    padding: 0.5rem 1rem;
+    border-radius: 0.375rem;
+    box-shadow: 0 1px 2px oklch(0 0 0 / 0.1);
+    border: none;
+
+    &:hover {
+        background-color: oklch(0.56 0.20 25);
+    }
+
+    &:active {
+        background-color: oklch(0.52 0.20 25);
+    }
+}
+
+/* Icon Button - Clean hover states */
+.btn-icon {
+    @apply flex items-center justify-center transition-all duration-150;
+    padding: 0.25rem;
+    border-radius: 0.375rem;
+    background-color: transparent;
+    color: oklch(0.82 0 0);
+    border: none;
+
+    &:hover {
+        background-color: oklch(0.22 0 0);
+        color: oklch(1 0 0);
+    }
+
+    &:active {
+        background-color: oklch(0.19 0 0);
+    }
+}
+
+/* Action Button - Similar to secondary but with specific sizing */
+.btn-action {
+    @apply font-medium flex items-center justify-center gap-x-2 transition-all duration-150;
+    background-color: transparent;
+    color: oklch(0.72 0.15 145);
+    padding: 0 1rem;
+    height: 2.5rem;
+    border-radius: 0.375rem;
+    border: 2px solid oklch(0.72 0.15 145);
+    font-size: 0.75rem;
+
+    &:hover {
+        background-color: oklch(0.72 0.15 145);
+        color: oklch(1 0 0);
+        border-color: oklch(0.72 0.15 145);
+    }
+
+    &:active {
+        background-color: oklch(0.68 0.15 145);
+        border-color: oklch(0.72 0.15 145);
+        outline: 1px solid oklch(0.72 0.15 145);
+        outline-offset: 0;
+    }
+}
+
+/* Default Button - Base styling */
+.button-default {
+    @apply font-medium transition-all duration-150 flex items-center justify-center gap-x-2;
+    height: 3.5rem;
+    border-radius: 0.5rem;
+    color: oklch(1 0 0);
+    border: 2px solid oklch(0.2809 0 0);
+    font-size: 0.875rem;
+    padding: 0 1.5rem;
+    width: 12rem;
+
+    svg {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+    }
+
+    @media (max-width: 768px) {
+        height: 3.75rem;
+        font-size: 1rem;
+        font-weight: 600;
+        width: 100%;
+        max-width: 100%;
+
+        svg {
+            width: 18px;
+            height: 18px;
+        }
+    }
+
+    @media (max-width: 480px) {
+        height: 4.5rem;
+        font-size: 1.125rem;
+
+        svg {
+            width: 20px;
+            height: 20px;
+        }
+    }
+
+    &:hover {
+        border-color: oklch(0.72 0.15 145);
+    }
+
+    &:active, &:focus {
+        border-color: oklch(0.72 0.15 145);
+        outline: 1px solid oklch(0.72 0.15 145);
+        outline-offset: 0;
+    }
+}
+
+/* ==========================================================================
+   RESPONSIVE ADJUSTMENTS
+   ========================================================================== */
+
+@screen md {
+    .btn-primary,
+    .btn-secondary {
+        @apply text-sm px-3 py-1.5;
+    }
+
+    .btn-action {
+        @apply text-sm px-6 h-12;
+        min-height: 48px;
+    }
+}
+
+@screen mobile-portrait {
+    .btn-action {
+        @apply text-base px-8 h-14;
+        min-height: 56px;
+        font-weight: 600;
+        border-radius: 8px;
+    }
+}
+
+@screen mobile-landscape {
+    .btn-action {
+        @apply text-base px-8 h-14;
+        min-height: 56px;
+        font-weight: 600;
+    }
+}

package/src/assets/css/components/forms.scss

@@ -0,0 +1,221 @@
+/* ==========================================================================
+   FORM INPUT COMPONENTS
+   ========================================================================== */
+
+.input-default {
+    @apply flex items-center bg-clip-padding relative box-border px-3 py-2 border-2 h-10;
+    background: oklch(0.19 0 0);
+    border-color: oklch(0.26 0 0);
+    border-radius: 0.5rem;
+    transition: border-color 0.15s ease;
+
+    &:hover {
+        border-color: oklch(0.30 0 0);
+    }
+
+    &:focus-within {
+        border-color: oklch(0.72 0.15 145);
+        outline: 1px solid oklch(0.72 0.15 145);
+        outline-offset: 0;
+    }
+
+    input {
+        @apply h-full w-full text-sm;
+        background: transparent;
+        color: oklch(0.95 0 0);
+
+        &:focus {
+            outline: none;
+        }
+
+        &::placeholder {
+            color: oklch(0.50 0 0);
+        }
+    }
+
+    .input-incrementer {
+        @apply flex flex-col ml-2 gap-0.5;
+
+        button {
+            @apply w-6 h-4 flex items-center justify-center text-white transition-all duration-200 rounded-sm;
+            background: linear-gradient(135deg, oklch(0.19 0 0) 0%, oklch(0.20 0 0) 100%);
+            border: 1px solid oklch(0.22 0 0);
+            box-shadow: 0 1px 2px oklch(0 0 0 / 0.2);
+
+            &:hover {
+                background: linear-gradient(135deg, oklch(0.20 0 0) 0%, oklch(0.23 0 0) 100%);
+                border-color: oklch(0.28 0 0);
+                box-shadow: 0 2px 4px oklch(0 0 0 / 0.3);
+                transform: translateY(-0.5px);
+            }
+
+            &:active {
+                background: linear-gradient(135deg, oklch(0.15 0 0) 0%, oklch(0.19 0.02 264) 100%);
+                border-color: oklch(0.26 0 0);
+                box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.3);
+                transform: translateY(0);
+            }
+
+            &:first-child {
+                border-radius: 4px 4px 2px 2px;
+            }
+
+            &:last-child {
+                border-radius: 2px 2px 4px 4px;
+            }
+        }
+
+        svg {
+            @apply w-2.5 h-2.5;
+            filter: drop-shadow(0 1px 1px oklch(0 0 0 / 0.3));
+        }
+    }
+}
+
+.input-wrapper {
+    @apply mb-4;
+}
+
+.input-wrapper label {
+    @apply text-white font-medium mb-2 block;
+    font-size: 16px;
+}
+
+/* ==========================================================================
+   ANT DESIGN SELECT OVERRIDES
+   ========================================================================== */
+
+.ant-select-dropdown {
+    z-index: 10000 !important;
+    position: relative;
+    background: oklch(0.15 0 0) !important; /* Card backgrounds */
+    border-radius: 0.5rem !important;
+}
+
+.ant-select {
+    @apply flex items-center bg-clip-padding relative box-border px-1 py-1 border-2 h-10 !important;
+    background: oklch(0.19 0 0); /* Input background */
+    border-color: oklch(0.26 0 0); /* Default border */
+    border-radius: 0.375rem; /* Consistent with buttons */
+    height: fit-content;
+    transition: border-color 0.15s ease;
+
+    &:hover {
+        border-color: oklch(0.30 0 0); /* Hover border */
+    }
+
+    &.ant-select-focused {
+        border-color: oklch(0.72 0.15 145) !important; /* Focus border - cyan */
+        outline: 1px solid oklch(0.72 0.15 145) !important; /* Cyan outline, no offset */
+        outline-offset: 0 !important;
+    }
+
+    .ant-select-selector {
+        @apply h-full w-full text-xs text-white !important;
+        background: transparent;
+        background-color: transparent !important;
+        border: 0 !important;
+        box-shadow: 0 0 0 !important;
+
+        &:focus {
+            outline: none !important;
+        }
+
+        &:before {
+            content: "";
+            position: absolute;
+            background: oklch(0.82 0 0);
+            height: 0.25rem;
+            width: 0.25rem;
+            right: 0.25rem;
+            border-radius: 9999px;
+        }
+    }
+}
+
+.ant-select-multiple .ant-select-selection-item {
+    @apply items-center gap-x-4 !important;
+    background: oklch(0.15 0 0); /* Card backgrounds */
+    padding-inline-end: 15px;
+    padding-inline-start: 15px;
+    border-radius: 10px;
+    height: 40px;
+    border: 0;
+    color: oklch(0.98 0 0); /* White text */
+
+    &-remove > .anticon {
+        vertical-align: 0.05rem;
+    }
+}
+
+.ant-select-selection-item-remove > .anticon svg {
+    color: oklch(0.98 0 0); /* White */
+
+    path {
+        fill: currentColor;
+    }
+}
+
+.ant-select-item-option {
+    &-selected:not(.ant-select-item-option-disabled) {
+        @apply text-white !important;
+        background: oklch(0.72 0.15 145 / 0.15) !important; /* Cyan accent with transparency */
+
+        .ant-select-item-option-state {
+            color: oklch(0.72 0.15 145) !important; /* Cyan accent for checkmark */
+
+            svg {
+                margin-top: -1.5px;
+            }
+        }
+    }
+
+    &-active:not(.ant-select-item-option-disabled) {
+        background: oklch(0.19 0 0); /* Input background on hover */
+    }
+
+    &-content {
+        color: oklch(0.98 0 0) !important; /* White text */
+    }
+}
+
+/* ==========================================================================
+   RESPONSIVE ADJUSTMENTS
+   ========================================================================== */
+
+@screen md {
+    .input-default {
+        height: 40px;
+
+        input {
+            font-size: 12px;
+        }
+
+        .input-incrementer button {
+            @apply w-5 h-3;
+
+            svg {
+                @apply w-2 h-2;
+            }
+        }
+    }
+
+    .input-wrapper label {
+        font-size: 15px;
+    }
+
+    .ant-select {
+        height: fit-content;
+        min-height: 40px;
+        padding: 0;
+
+        &-show-search:not(.ant-select-customize-input) .ant-select-selector {
+            font-size: 12px;
+        }
+
+        &-multiple .ant-select-selection-item {
+            height: 25px;
+            font-size: 10px;
+        }
+    }
+}

package/src/assets/css/components/modals.scss

@@ -0,0 +1,13 @@
+/* ==========================================================================
+   MODAL COMPONENTS
+   ========================================================================== */
+
+.modal-mask {
+    background-color: oklch(0 0 0 / 0.75);
+    backdrop-filter: blur(4px);
+}
+
+.component-modal {
+    background-color: oklch(0.15 0 0);
+    border: 1px solid oklch(0.26 0 0);
+}

package/src/assets/css/components/tables.scss

@@ -0,0 +1,27 @@
+/* ==========================================================================
+   TABLE COMPONENTS
+   ========================================================================== */
+
+.table-row-even {
+    background-color: oklch(0.1822 0 0);
+}
+
+.table-row-odd {
+    background-color: oklch(0.2046 0 0);
+}
+
+.table-component {
+    @apply w-full rounded-lg;
+    border: 1px solid oklch(0.26 0 0);
+    overflow: visible !important;
+    background-color: oklch(0.2046 0 0);
+    box-shadow: 0 4px 12px oklch(0 0 0 / 0.2);
+
+    &:hover {
+        background-color: oklch(0.2046 0 0);
+    }
+
+    tr:hover {
+        background-color: oklch(0.2046 0 0);
+    }
+}