@necrolab/dashboard 0.4.220 → 0.5.1

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

@@ -0,0 +1,100 @@
+/* ==========================================================================
+   TOAST NOTIFICATIONS (Toastify overrides)
+   ========================================================================== */
+
+.Toastify__toast-theme--colored.Toastify__toast--default,
+.Toastify__toast-theme--light {
+    @apply bg-dark-550 text-white;
+}
+
+.Toastify__toast-icon {
+    background: white;
+    border-radius: 100%;
+}
+
+.Toastify__close-button.Toastify__close-button--light {
+    margin-top: 1px;
+    padding-left: 0.1rem;
+    @apply border-2 border-white flex border-solid w-6 h-6 items-center justify-center rounded-full;
+}
+
+.Toastify__close-button.Toastify__close-button--light svg {
+    color: white;
+}
+
+.Toastify__close-button.Toastify__close-button--light svg path {
+    fill: currentColor !important;
+}
+
+.Toastify__toast-container {
+    pointer-events: none;
+    --toastify-toast-bd-radius: 6px;
+}
+
+.Toastify__toast {
+    min-height: 50px !important;
+    height: 50px !important;
+    pointer-events: auto !important;
+    margin-bottom: 6px !important;
+
+    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);
+
+    &.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);
+    }
+
+    &-body > div:last-child {
+        font-family: "Inter", sans-serif;
+        @apply font-medium;
+    }
+
+    &--error {
+        .Toastify__progress-bar {
+            @apply bg-red-400;
+        }
+    }
+}
+
+@keyframes slideInRight {
+    0% {
+        transform: translateX(110%);
+        opacity: 0;
+    }
+    100% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideOutRight {
+    0% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+    100% {
+        transform: translateX(110%);
+        opacity: 0;
+    }
+}
+
+.Toastify__toast--error svg {
+    color: oklch(0.68 0.18 25);
+}
+
+.Toastify__toast--error svg path {
+    fill: currentColor !important;
+}
+
+.Toastify__toast--success .Toastify__progress-bar {
+    @apply bg-green-400;
+}
+
+.Toastify__progress-bar {
+    height: 2px;
+    transition: width 0.08s cubic-bezier(0.25, 0.1, 0.25, 1);
+}

package/src/assets/css/main.scss

@@ -1,185 +1,264 @@
-@use "input";
+/* ==========================================================================
+   NECRO DASHBOARD - MAIN STYLES
+   Modular SCSS architecture with @use imports
+   ========================================================================== */
+
+/* Module imports */
+@use "base/reset";
+@use "base/scroll";
+@use "base/typography";
+@use "components/buttons";
+@use "components/forms";
+@use "components/toasts";
+@use "components/modals";
+@use "components/tables";
+
+/* ==========================================================================
+   BODY LAYOUT & BACKGROUND
+   ========================================================================== */
 
-html {
-    // margin-top: 50px;
-    overscroll-behavior: contain;
+body {
+    background-color: oklch(0.1822 0 0);
+    position: relative;
+
+    &::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);
+    }
 }
 
-* {
-    @apply hidden-scrollbars
+img {
+    pointer-events: none;
 }
 
-body {
-    font-family: "Inter", sans-serif;
-    background: url("@/assets/img/background.svg") center center;
-    background-size: cover;
-    background-attachment: fixed;
-    padding-top: 10px;
-    overscroll-behavior-y: contain;
-    // overscroll-behavior: none;
+/* Global icon color consistency */
+svg {
+    color: oklch(0.90 0 0) !important;
+}
 
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    @apply bg-cover bg-dark-300;
-    touch-action: pan-x pan-y;
+/* For stroke icons (Eye, etc) - stroke on svg element */
+svg[stroke] path,
+svg[stroke] circle,
+svg[stroke] line {
+    stroke: oklch(0.90 0 0) !important;
 }
 
-.ios-wrapper {
-   // width: 100%;
-    // padding-left: calc(env(safe-area-inset-left));
+/* For filled icons with explicit fill */
+svg path[fill]:not([fill="none"]),
+svg circle[fill]:not([fill="none"]),
+svg rect[fill]:not([fill="none"]),
+svg polygon[fill]:not([fill="none"]) {
+    fill: oklch(0.90 0 0) !important;
 }
 
-// Used for table heights
-.max-h-big {
-    max-height: 36rem;
+/* For filled icons without explicit fill attribute */
+svg:not([stroke]):not([fill="none"]) path:not([fill]),
+svg:not([stroke]):not([fill="none"]) circle:not([fill]),
+svg:not([stroke]):not([fill="none"]) rect:not([fill]),
+svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
+    fill: oklch(0.90 0 0) !important;
 }
 
-@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
-.max-h-big {
-        max-height: 44rem;
-    }
+/* ==========================================================================
+   COMPONENT UTILITIES
+   ========================================================================== */
+
+.smooth-hover {
+    @apply transition-all duration-200;
 }
 
-@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
-    .max-h-big {
-        max-height: 68rem;
-    }
+.status-indicator {
+    @apply w-2 h-2 rounded-full flex-shrink-0;
+    min-width: 4px;
+    min-height: 4px;
 }
 
-@media screen and (max-device-height: 500px) {
-    .max-h-big {
-        max-height: 11.7rem;
+.mobile-icons {
+    @apply flex lg:hidden ml-auto items-center gap-x-2;
+
+    button {
+        @apply w-8 h-8 flex items-center justify-center rounded transition-all duration-150;
+        background-color: oklch(0.2046 0 0);
+        border: 2px solid oklch(0.2809 0 0);
+        color: oklch(0.82 0 0);
+
+        &:hover, &:active {
+            border-color: oklch(0.72 0.15 145);
+            outline: 1px solid oklch(0.72 0.15 145);
+            outline-offset: 0;
+            color: oklch(0.90 0 0);
+        }
     }
 }
 
-.top-3\,5 {
-    top: 1.1rem;
+.loading-spinner {
+    @apply animate-spin w-4 h-4 border-2 border-white border-t-transparent rounded-full;
 }
 
+/* ==========================================================================
+   LABEL & ICON STYLING
+   ========================================================================== */
 
-.fade-enter-active,
-.fade-leave-active {
-    will-change: transform, opacity, filter;
+.label-override {
+    @apply flex items-center text-xs mb-2;
+    color: oklch(0.65 0 0);
 
-    transition: opacity 0.15s ease;
+    svg {
+        @apply ml-2;
+        color: oklch(0.65 0 0) !important;
+        width: 16px;
+        height: 16px;
+        fill: oklch(0.65 0 0) !important;
+    }
 }
 
-.fade-enter-from,
-.fade-leave-to {
-    will-change: transform, opacity, filter;
+.task-switches {
+    h4 {
+        color: oklch(0.90 0 0);
+        font-size: 0.8125rem;
+        font-weight: 500;
+        @apply text-center flex items-center gap-x-2 mx-auto mb-2;
+    }
 
-    opacity: 0;
-}
+    .switch-wrapper {
+        @apply gap-y-2;
+    }
 
-/* Disable zoom  */
-:root {
-    touch-action: pan-x pan-y;
-    height: 100%;
+    svg {
+        width: 15px !important;
+        height: 15px !important;
+        color: oklch(0.90 0 0) !important;
+        margin-left: 0.25rem !important;
+    }
 }
 
-.hidden-scrollbars::-webkit-scrollbar
+/* ==========================================================================
+   SCROLLBAR UTILITIES
+   ========================================================================== */
 
-/* Hide scrollbar for Chrome, Safari and Opera */ {
-    display: none;
-}
-
-/* Hide scrollbar for IE, Edge and Firefox */
 .hidden-scrollbars {
-    -ms-overflow-style: none;
-    /* IE and Edge */
     scrollbar-width: none;
-    /* Firefox */
-}
-
-/* Make text not selectable (request from xsonoro) */
+    -ms-overflow-style: none;
 
-* {
-    -webkit-user-select: none;
-    /* Safari */
-    -moz-user-select: none;
-    /* Firefox */
-    -ms-user-select: none;
-    /* IE10+/Edge */
-    user-select: none;
-    /* Standard */
+    &::-webkit-scrollbar {
+        display: none;
+    }
 }
 
-img {
-    pointer-events: none;
-}
+/* ==========================================================================
+   DYNAMIC HEIGHTS & RESPONSIVE DESIGN
+   ========================================================================== */
 
-/** Toast Design **/
-.Toastify__toast-theme--colored.Toastify__toast--default,
-.Toastify__toast-theme--light {
-    @apply bg-dark-400 text-white;
+.max-h-big {
+    max-height: calc(100vh - 12rem);
+    min-height: 8rem;
+    overflow: hidden;
 }
 
-.Toastify__toast-icon {
-    svg {
-        path {
-            //   fill: white !important;
-        }
+@screen xl {
+    .max-h-big {
+        max-height: calc(100vh - 11rem);
     }
 }
 
-.Toastify__toast-icon {
-    background: white;
-    border-radius: 100%;
+@screen h-sm {
+    .max-h-big {
+        max-height: calc(100vh - 12rem);
+        min-height: 8rem;
+    }
 }
 
-button.Toastify__close-button.Toastify__close-button--light {
-    margin-top: 1px;
-    padding-left: 0.1rem;
-    @apply border-2 border-white flex border-solid w-6 h-6 items-center justify-center rounded-full;
+/* ==========================================================================
+   TRANSITIONS & ANIMATIONS
+   ========================================================================== */
 
-    svg {
-        path {
-            fill: white !important;
-        }
-    }
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.15s ease;
 }
 
-.Toastify__toast {
-    min-height: 50px !important;
-    height: 50px !important;
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
 }
 
-.Toastify__toast-body > div:last-child {
-    font-family: "Inter", sans-serif;
-    @apply font-medium;
+.will-change-auto {
+    will-change: auto;
 }
 
-.Toastify__progress-bar {
-    height: 2px;
+/* ==========================================================================
+   iOS OPTIMIZATIONS
+   ========================================================================== */
+
+@supports (-webkit-appearance: none) {
+    .component-container,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        transform: translate3d(0, 0, 0);
+    }
 }
 
-.Toastify__toast--error {
-    svg {
-        path {
-            fill: #ee8282 !important;
-        }
-    }
+/* ==========================================================================
+   MOBILE RESPONSIVE OPTIMIZATIONS
+   ========================================================================== */
 
-    .Toastify__progress-bar {
-        @apply bg-red-400;
+@screen md {
+    .btn-primary,
+    .btn-secondary {
+        @apply text-sm px-3 py-1.5;
     }
-}
 
-.Toastify__toast--success {
-    .Toastify__progress-bar {
-        @apply bg-green-400;
+    .btn-action {
+        @apply text-sm px-6 h-12;
+        min-height: 48px;
     }
-}
 
-:root {
-    --toastify-toast-width: 520px;
+    .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;
+    }
 
-.mobile-icons {
-    @apply flex lg:hidden ml-auto items-center gap-x-2;
+    .status-indicator {
+        width: 5px;
+        height: 5px;
+        min-width: 5px;
+        min-height: 5px;
+    }
+}
 
-    button {
-        @apply text-white text-2xl rounded bg-dark-500 border-2 border-dark-550 shadow-lg w-9 h-9 flex items-center justify-center;
+@screen mobile-landscape {
+    .btn-action {
+        @apply text-base px-8 h-14;
+        min-height: 56px;
+        font-weight: 600;
     }
 }