@necrolab/dashboard 0.4.61 → 0.4.209

package/src/assets/css/main.scss

@@ -1,372 +1,125 @@
 @use "input";
-@use "utilities";
-
-/* ==========================================================================
-   GLOBAL RESETS & BASE STYLES
-   ========================================================================== */
-
-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;
-}
-
-/* ==========================================================================
-   SCROLL PREVENTION & TOUCH HANDLING
-   ========================================================================== */
 
 html {
-    overflow: hidden !important;
-    overscroll-behavior: none !important;
-    height: 100% !important;
-    width: 100% !important;
+    // margin-top: 50px;
+    overscroll-behavior: contain;
 }
 
 * {
-    @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;
+    @apply hidden-scrollbars
 }
 
-.code-editor,
-.proxy-editor,
-.editor-container,
-.proxy-editor-container {
-    overscroll-behavior: auto !important;
-    touch-action: pan-y !important;
-    -webkit-overflow-scrolling: touch !important;
-}
-
-/* ==========================================================================
-   BODY & LAYOUT
-   ========================================================================== */
-
 body {
-    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
-    background-color: #1a1b1e;
-    min-height: 100vh;
-    overflow: hidden !important;
-    overscroll-behavior: none !important;
-    width: 100% !important;
-    height: 100% !important;
+    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;
+
     -webkit-font-smoothing: antialiased;
     -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;
-}
-
-/* ==========================================================================
-   UTILITY CLASSES
-   ========================================================================== */
-
-.flex-center {
-    @apply flex items-center justify-center;
-}
-
-.flex-between {
-    @apply flex items-center justify-between;
-}
-
-.flex-col-center {
-    @apply flex flex-col items-center justify-center;
-}
-
-.text-heading {
-    @apply text-base font-semibold;
-    color: #e2e2e5;
-}
-
-.text-subheading {
-    @apply text-sm font-medium;
-    color: #d0d0d3;
-}
-
-.text-muted {
-    @apply text-xs;
-    color: #a0a0a6;
-}
-
-.card-dark {
-    @apply bg-dark-400 border border-dark-650 rounded shadow-sm;
-}
-
-.grid-tasks {
-    @apply grid grid-cols-12 gap-2 items-center;
+    @apply bg-cover bg-dark-300;
+    touch-action: pan-x pan-y;
 }
 
-.grid-responsive {
-    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
+.ios-wrapper {
+   // width: 100%;
+    // padding-left: calc(env(safe-area-inset-left));
 }
 
-.form-grid {
-    @apply grid grid-cols-1 md:grid-cols-2 gap-4;
+// Used for table heights
+.max-h-big {
+    max-height: 36rem;
 }
 
-/* ==========================================================================
-   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;
-
-    &:hover {
-        border-color: #4b4c53;
+@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;
     }
 }
 
-.btn-secondary {
-    @apply bg-dark-500 hover:bg-dark-550 font-medium px-4 py-2 rounded transition-all duration-150 border border-dark-650 hover:border-dark-700;
-    color: #e2e2e5;
-}
-
-.btn-danger {
-    @apply bg-red-400 hover:bg-red-500 text-white font-medium px-4 py-2 rounded transition-all duration-150;
-    border: 1px solid #f14c4c;
+@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;
+    }
 }
 
-.btn-icon {
-    @apply p-1 rounded transition-all duration-150 flex-center hover:bg-dark-500 border border-transparent;
-    color: #d0d0d3;
-
-    &:hover {
-        color: #ffffff;
-        border-color: #3d3e44;
+@media screen and (max-device-height: 500px) {
+    .max-h-big {
+        max-height: 11.7rem;
     }
 }
 
-.btn-action {
-    @apply bg-dark-500 hover:bg-dark-550 text-xs px-4 h-10 rounded flex-center gap-x-2 transition-all duration-150 font-medium border border-dark-650 hover:border-dark-700;
-    color: #e2e2e5;
+.top-3\,5 {
+    top: 1.1rem;
 }
 
-/* ==========================================================================
-   COMPONENT UTILITIES
-   ========================================================================== */
 
-.smooth-hover {
-    @apply transition-all duration-200 hover:opacity-80;
-}
+.fade-enter-active,
+.fade-leave-active {
+    will-change: transform, opacity, filter;
 
-.status-indicator {
-    @apply w-2 h-2 rounded-full flex-shrink-0;
-    min-width: 4px;
-    min-height: 4px;
+    transition: opacity 0.15s ease;
 }
 
-.mobile-icons {
-    @apply flex lg:hidden ml-auto items-center gap-x-2;
-
-    button {
-        @apply w-8 h-8 flex-center bg-dark-500 rounded transition-all duration-150 border border-dark-650 hover:bg-dark-550;
-        color: #d0d0d3;
+.fade-enter-from,
+.fade-leave-to {
+    will-change: transform, opacity, filter;
 
-        &:hover {
-            color: #ffffff;
-        }
-    }
+    opacity: 0;
 }
 
-.loading-spinner {
-    @apply animate-spin w-4 h-4 border-2 border-white border-t-transparent rounded-full;
+/* Disable zoom  */
+:root {
+    touch-action: pan-x pan-y;
+    height: 100%;
 }
 
-/* ==========================================================================
-   LABEL & ICON STYLING
-   ========================================================================== */
+.hidden-scrollbars::-webkit-scrollbar
 
-.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;
-    }
-}
-
-.switch-wrapper svg {
-    color: #a0a0a6 !important;
-    fill: #a0a0a6 !important;
+/* Hide scrollbar for Chrome, Safari and Opera */ {
+    display: none;
 }
 
-/* ==========================================================================
-   SCROLLBAR UTILITIES
-   ========================================================================== */
-
+/* Hide scrollbar for IE, Edge and Firefox */
 .hidden-scrollbars {
-    scrollbar-width: none;
     -ms-overflow-style: none;
-
-    &::-webkit-scrollbar {
-        display: none;
-    }
-}
-
-/* ==========================================================================
-   DYNAMIC HEIGHTS & RESPONSIVE DESIGN
-   ========================================================================== */
-
-.max-h-big {
-    max-height: calc(100vh - 12rem);
-    min-height: 8rem;
-    overflow: hidden;
-}
-
-@screen xl {
-    .max-h-big {
-        max-height: calc(100vh - 11rem);
-    }
-}
-
-@screen h-sm {
-    .max-h-big {
-        max-height: calc(100vh - 12rem);
-        min-height: 8rem;
-    }
+    /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */
 }
 
-/* ==========================================================================
-   TRANSITIONS & ANIMATIONS
-   ========================================================================== */
-
-.fade-enter-active,
-.fade-leave-active {
-    transition: opacity 0.15s ease;
-}
+/* Make text not selectable (request from xsonoro) */
 
-.fade-enter-from,
-.fade-leave-to {
-    opacity: 0;
+* {
+    -webkit-user-select: none;
+    /* Safari */
+    -moz-user-select: none;
+    /* Firefox */
+    -ms-user-select: none;
+    /* IE10+/Edge */
+    user-select: none;
+    /* Standard */
 }
 
-.will-change-auto {
-    will-change: auto;
+img {
+    pointer-events: none;
 }
 
-/* ==========================================================================
-   TOAST NOTIFICATIONS
-   ========================================================================== */
-
+/** Toast Design **/
 .Toastify__toast-theme--colored.Toastify__toast--default,
 .Toastify__toast-theme--light {
-    @apply bg-dark-550 text-white;
+    @apply bg-dark-400 text-white;
+}
+
+.Toastify__toast-icon {
+    svg {
+        path {
+            //   fill: white !important;
+        }
+    }
 }
 
 .Toastify__toast-icon {
@@ -374,163 +127,59 @@ img {
     border-radius: 100%;
 }
 
-.Toastify__close-button.Toastify__close-button--light {
+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;
-}
 
-.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;
+    svg {
+        path {
+            fill: white !important;
+        }
+    }
 }
 
 .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: #ee8282;
-}
-
-.Toastify__toast--error svg path {
-    fill: currentColor !important;
-}
-
-.Toastify__toast--success .Toastify__progress-bar {
-    @apply bg-green-400;
+.Toastify__toast-body > div:last-child {
+    font-family: "Inter", sans-serif;
+    @apply font-medium;
 }
 
 .Toastify__progress-bar {
     height: 2px;
-    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 RESPONSIVE OPTIMIZATIONS - CONSOLIDATED
-   ========================================================================== */
-
-@screen md {
-    .text-heading {
-        @apply text-sm;
+.Toastify__toast--error {
+    svg {
+        path {
+            fill: #ee8282 !important;
+        }
     }
 
-    .btn-primary,
-    .btn-secondary {
-        @apply text-sm px-3 py-1.5;
+    .Toastify__progress-bar {
+        @apply bg-red-400;
     }
+}
 
-    .btn-action {
-        @apply text-sm px-6 h-12;
-        min-height: 48px;
+.Toastify__toast--success {
+    .Toastify__progress-bar {
+        @apply bg-green-400;
     }
+}
 
-    .status-indicator {
-        width: 6px;
-        height: 6px;
-        min-width: 6px;
-        min-height: 6px;
-    }
+:root {
+    --toastify-toast-width: 520px;
 }
 
-@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;
-    }
-}
+.mobile-icons {
+    @apply flex lg:hidden ml-auto items-center gap-x-2;
 
-@screen mobile-landscape {
-    .btn-action {
-        @apply text-base px-8 h-14;
-        min-height: 56px;
-        font-weight: 600;
+    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;
     }
 }