dolphincss 1.0.6 → 1.1.7

package/MainCss/sideNave.css

@@ -1,417 +0,0 @@
-/* ============================
-   🌊 DolphinCSS Admin Side Navigation - MOBILE FIXED
-   ✅ Fixed Text Colors
-   ✅ Enhanced Mobile Responsive
-   ✅ Fixed Mobile Collapse Behavior
-   ============================ */
-
-.admin-nav {
-  background-color: var(--color-surface);
-  border-right: 1px solid var(--color-border);
-  min-height: 100vh;
-  transition: all var(--motion-speed) var(--motion-ease);
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  width: 280px;
-  z-index: 1000;
-}
-
-/* Header Section - TEXT COLOR FIXED */
-.admin-nav-header {
-  padding: calc(var(--spacing) * 4);
-  border-bottom: 1px solid var(--color-border);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.admin-nav-brand {
-  display: flex;
-  align-items: center;
-  gap: calc(var(--spacing) * 3);
-}
-
-.admin-nav-logo {
-  height: calc(var(--spacing) * 8);
-  width: calc(var(--spacing) * 8);
-  border-radius: var(--radius-lg);
-  background-color: var(--color-primary);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-text);
-  font-weight: var(--font-weight-bold);
-  flex-shrink: 0;
-}
-
-.admin-nav-title {
-  font-size: var(--text-lg);
-  font-weight: var(--font-weight-bold);
-  color: var(--color-text);
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-/* Navigation Items - TEXT COLOR FIXED */
-.admin-nav-items {
-  flex: 1;
-  padding: calc(var(--spacing) * 2) 0;
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--spacing) * 1);
-  overflow-y: auto;
-}
-
-.admin-nav-item {
-  display: flex;
-  align-items: center;
-  gap: calc(var(--spacing) * 3);
-  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
-  color: var(--color-text-muted);
-  text-decoration: none;
-  transition: all var(--motion-speed) var(--motion-ease);
-  position: relative;
-  margin: 0 calc(var(--spacing) * 2);
-  border-radius: var(--radius-md);
-  cursor: pointer;
-}
-
-.admin-nav-item:hover {
-  background-color: var(--color-primary);
-  color: var(--color-text);
-  transform: translateX(calc(var(--spacing) * 1));
-}
-
-.admin-nav-item.active {
-  background-color: var(--color-primary);
-  color: var(--color-text);
-  font-weight: var(--font-weight-semibold);
-}
-
-.admin-nav-item.active::before {
-  content: '';
-  position: absolute;
-  left: calc(var(--spacing) * -2);
-  top: 50%;
-  transform: translateY(-50%);
-  width: calc(var(--spacing) * 1);
-  height: 60%;
-  background-color: var(--color-primary);
-  border-radius: var(--radius-sm);
-}
-
-.admin-nav-icon {
-  width: calc(var(--spacing) * 5);
-  height: calc(var(--spacing) * 5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all var(--motion-speed) var(--motion-ease);
-  flex-shrink: 0;
-}
-
-.admin-nav-text {
-  white-space: nowrap;
-  overflow: hidden;
-  font-size: var(--text-sm);
-  transition: all var(--motion-speed) var(--motion-ease);
-  color: inherit;
-}
-
-/* User Section - TEXT COLOR FIXED */
-.admin-nav-user {
-  padding: calc(var(--spacing) * 4);
-  border-top: 1px solid var(--color-border);
-  display: flex;
-  align-items: center;
-  gap: calc(var(--spacing) * 3);
-}
-
-.admin-nav-avatar {
-  width: calc(var(--spacing) * 10);
-  height: calc(var(--spacing) * 10);
-  border-radius: 3.40282e38px;
-  background-color: var(--color-primary);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-text);
-  font-weight: var(--font-weight-bold);
-  flex-shrink: 0;
-}
-
-.admin-nav-user-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.admin-nav-user-name {
-  font-size: var(--text-sm);
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-text);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.admin-nav-user-role {
-  font-size: var(--text-xs);
-  color: var(--color-text-muted);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* ===== DESKTOP COLLAPSE STATE ===== */
-.admin-nav.collapsed {
-  width: 80px; /* Icons only */
-}
-
-.admin-nav.collapsed .admin-nav-title,
-.admin-nav.collapsed .admin-nav-text,
-.admin-nav.collapsed .admin-nav-user-info {
-  opacity: 0;
-  width: 0;
-  height: 0;
-  overflow: hidden;
-}
-
-.admin-nav.collapsed .admin-nav-item {
-  justify-content: center;
-  padding: calc(var(--spacing) * 3);
-  margin: 0 calc(var(--spacing) * 1);
-}
-
-.admin-nav.collapsed .admin-nav-item:hover .admin-nav-tooltip {
-  display: block;
-}
-
-/* Tooltip for Collapsed State */
-.admin-nav-tooltip {
-  display: none;
-  position: absolute;
-  left: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  background-color: var(--color-surface);
-  border: 1px solid var(--color-border);
-  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
-  border-radius: var(--radius-md);
-  font-size: var(--text-sm);
-  color: var(--color-text);
-  white-space: nowrap;
-  z-index: 1000;
-  box-shadow: var(--tw-shadow);
-  margin-left: calc(var(--spacing) * 2);
-}
-
-/* Toggle Button */
-.admin-nav-toggle {
-  position: absolute;
-  top: calc(var(--spacing) * 4);
-  right: calc(var(--spacing) * -3);
-  width: calc(var(--spacing) * 6);
-  height: calc(var(--spacing) * 6);
-  border-radius: 3.40282e38px;
-  background-color: var(--color-surface);
-  border: 1px solid var(--color-border);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all var(--motion-speed) var(--motion-ease);
-  color: var(--color-text);
-  z-index: 1001;
-}
-
-.admin-nav-toggle:hover {
-  background-color: var(--color-primary);
-  color: var(--color-text);
-  transform: scale(1.1);
-}
-
-/* ===== MOBILE RESPONSIVE - FIXED ===== */
-@media (max-width: 768px) {
-  /* Mobile nav - always icons only and hidden by default */
-  .admin-nav {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100vh;
-    width: 80px; /* Mobile ma always icons only */
-    transform: translateX(-100%); /* Start ma hidden */
-    transition: transform 0.3s var(--motion-ease);
-    box-shadow: 0 0 20px var(--color-shadow);
-    z-index: 1000;
-  }
-  
-  /* Mobile open state */
-  .admin-nav.mobile-open {
-    transform: translateX(0); /* Slide in */
-  }
-
-  /* Mobile ma always collapsed style - force icons only */
-  .admin-nav .admin-nav-title,
-  .admin-nav .admin-nav-text,
-  .admin-nav .admin-nav-user-info {
-    display: none !important; /* Force hide text on mobile */
-  }
-
-  .admin-nav .admin-nav-item {
-    justify-content: center;
-    padding: calc(var(--spacing) * 3) !important;
-    margin: 0 calc(var(--spacing) * 1) !important;
-  }
-
-  .admin-nav .admin-nav-brand {
-    justify-content: center;
-    gap: 0;
-  }
-
-  .admin-nav .admin-nav-user {
-    justify-content: center;
-    padding: calc(var(--spacing) * 2);
-  }
-
-  /* Mobile Header */
-  .admin-nav-header {
-    padding: calc(var(--spacing) * 3);
-    justify-content: center;
-  }
-
-  /* Mobile Menu Items */
-  .admin-nav-items {
-    padding: calc(var(--spacing) * 1) 0;
-  }
-
-  /* Mobile User Section - Center avatar only */
-  .admin-nav-user {
-    padding: calc(var(--spacing) * 2);
-    flex-direction: column;
-    align-items: center;
-    gap: calc(var(--spacing) * 1);
-  }
-
-  .admin-nav-avatar {
-    width: calc(var(--spacing) * 6);
-    height: calc(var(--spacing) * 6);
-    font-size: var(--text-xs);
-  }
-
-  /* Hide desktop toggle on mobile */
-  .admin-nav-toggle {
-    display: none;
-  }
-
-  /* Mobile Menu Trigger Button (Add in main content) */
-  .mobile-menu-trigger {
-    display: block;
-    position: fixed;
-    top: calc(var(--spacing) * 2);
-    left: calc(var(--spacing) * 2);
-    width: calc(var(--spacing) * 8);
-    height: calc(var(--spacing) * 8);
-    border-radius: 50%;
-    background: var(--color-primary);
-    color: white;
-    border: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    z-index: 999;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-    font-size: var(--text-lg);
-  }
-
-  /* Mobile Close Button inside nav */
-  .admin-nav-close {
-    position: absolute;
-    top: calc(var(--spacing) * 2);
-    right: calc(var(--spacing) * 2);
-    width: calc(var(--spacing) * 6);
-    height: calc(var(--spacing) * 6);
-    border-radius: 50%;
-    background: var(--color-danger);
-    color: white;
-    border: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    z-index: 1002;
-    font-size: var(--text-sm);
-  }
-
-  /* Overlay for mobile */
-  .admin-nav-overlay {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0,0,0,0.5);
-    backdrop-filter: blur(4px);
-    z-index: 998;
-  }
-  
-  .admin-nav-overlay.mobile-open {
-    display: block;
-  }
-
-  /* Adjust main content for mobile */
-  .admin-main-content {
-    margin-left: 0 !important;
-    padding-left: calc(var(--spacing) * 2);
-    padding-right: calc(var(--spacing) * 2);
-  }
-}
-
-/* Desktop specific - Hide mobile elements */
-@media (min-width: 769px) {
-  .mobile-menu-trigger,
-  .admin-nav-close,
-  .admin-nav-overlay {
-    display: none;
-  }
-  
-  /* Desktop ma proper spacing */
-  .admin-main-content {
-    margin-left: 280px;
-    transition: margin-left var(--motion-speed) var(--motion-ease);
-  }
-  
-  .admin-nav.collapsed ~ .admin-main-content {
-    margin-left: 80px;
-  }
-}
-
-/* Small mobile devices */
-@media (max-width: 480px) {
-  .admin-nav {
-    width: 70px; /* Even more compact on very small screens */
-  }
-  
-  .admin-nav-header {
-    padding: calc(var(--spacing) * 2);
-  }
-  
-  .admin-nav-item {
-    padding: calc(var(--spacing) * 2) !important;
-  }
-  
-  .mobile-menu-trigger {
-    width: calc(var(--spacing) * 7);
-    height: calc(var(--spacing) * 7);
-    top: calc(var(--spacing) * 1);
-    left: calc(var(--spacing) * 1);
-  }
-}
-
-/* Ensure smooth transitions */
-.admin-nav,
-.admin-nav * {
-  transition: all var(--motion-speed) var(--motion-ease);
-}

package/MainCss/size.css

@@ -1,6 +0,0 @@
- /* ===== Button Sizes ===== */
- @layer components {
-  .sm { @apply text-xs px-3 py-1.5; }
-  .md { @apply text-sm px-4 py-2; }
-  .lg { @apply text-base px-5 py-3; }
- }

package/MainCss/table.css

@@ -1,154 +0,0 @@
-/* ===== Table System - ACTUAL Tailwind Compatible ===== */
-@layer components {
-  .table {
-    @apply w-full border-collapse transition-all duration-200 bg-(--color-surface) rounded-xl shadow-md my-4;
-  }
-  
-  .table th, .table td {
-    @apply px-4 py-3 text-left border-b border-(--color-border) transition-all duration-200;
-  }
-  
-  .table th {
-    @apply bg-(--color-primary) text-white font-semibold text-sm uppercase tracking-wide;
-  }
-  
-  .table td {
-    @apply bg-(--color-surface) text-(--color-text);
-  }
-
-  /* 🌊 Glass Wave Variant */
-  .table.glass-wave {
-    @apply bg-[color-mix(in_oklch,var(--color-surface),transparent_40%)] backdrop-blur-xl border border-[color-mix(in_oklch,var(--color-border),transparent_60%)];
-  }
-  
-  .table.glass-wave th {
-    @apply bg-[color-mix(in_oklch,var(--color-primary),transparent_20%)] backdrop-blur-lg;
-  }
-  
-  .table.glass-wave td {
-    @apply bg-[color-mix(in_oklch,var(--color-surface),transparent_30%)] border-b border-[color-mix(in_oklch,var(--color-border),transparent_50%)];
-  }
-
-  /* ✨ Neon Flow Variant */
-  .table.neon-flow {
-    @apply bg-[color-mix(in_oklch,var(--color-surface),black_10%)] border border-[color-mix(in_oklch,var(--color-primary),transparent_50%)] shadow-[0_0_20px_color-mix(in_oklch,var(--color-primary),transparent_80%)];
-  }
-  
-  .table.neon-flow th {
-    @apply bg-gradient-to-br from-[color-mix(in_oklch,var(--color-primary),transparent_30%)] to-[color-mix(in_oklch,var(--color-info),transparent_40%)] text-white;
-  }
-
-  /* 🌌 Holo Matrix Variant */
-  .table.holo-matrix {
-    background: radial-gradient(circle at 0% 0%, color-mix(in oklch, var(--color-primary), transparent 90%) 0%, transparent 50%), radial-gradient(circle at 100% 100%, color-mix(in oklch, var(--color-info), transparent 90%) 0%, transparent 50%), var(--color-surface);
-  }
-  
-  .table.holo-matrix th {
-    @apply bg-[color-mix(in_oklch,var(--color-surface),transparent_50%)] backdrop-blur-lg text-(--color-primary) border-b border-[color-mix(in_oklch,var(--color-primary),transparent_70%)];
-  }
-  
-  .table.holo-matrix td {
-    @apply bg-[color-mix(in_oklch,var(--color-surface),transparent_30%)] backdrop-blur-sm;
-  }
-
-  /* 🚀 Quantum Float Variant */
-  .table.quantum-float {
-    @apply shadow-[0_25px_50px_-12px_rgba(0,0,0,0.25)] border border-[color-mix(in_oklch,var(--color-border),transparent_50%)] transition-all duration-300;
-  }
-  
-  .table.quantum-float:hover {
-    @apply -translate-y-1 shadow-[0_35px_60px_-12px_rgba(0,0,0,0.3)] border-[color-mix(in_oklch,var(--color-primary),transparent_70%)];
-  }
-  
-  .table.quantum-float th {
-    @apply bg-gradient-to-br from-(--color-primary) to-[color-mix(in_oklch,var(--color-primary),var(--color-info)_30%)] text-white;
-  }
-
-  /* 🌊 Aqua Depth Variant */
-  .table.aqua-depth {
-    background: linear-gradient(160deg, color-mix(in oklch, var(--color-surface), transparent 10%), color-mix(in oklch, var(--color-info), transparent 95%), color-mix(in oklch, var(--color-surface), transparent 10%));
-    @apply border border-[color-mix(in_oklch,var(--color-info),transparent_60%)];
-  }
-  
-  .table.aqua-depth th {
-    @apply bg-[color-mix(in_oklch,var(--color-info),transparent_30%)] text-white border-b-2 border-[color-mix(in_oklch,var(--color-info),transparent_50%)];
-  }
-  
-  .table.aqua-depth td {
-    @apply bg-[color-mix(in_oklch,var(--color-surface),transparent_70%)] border-b border-[color-mix(in_oklch,var(--color-info),transparent_80%)];
-  }
-
-  /* 📱 Mobile Card Layout */
-  @media (max-width: 768px) {
-    .table.mobile-cards {
-      @apply block bg-transparent shadow-none border-none rounded-none;
-    }
-    
-    .table.mobile-cards thead {
-      @apply hidden;
-    }
-    
-    .table.mobile-cards tbody {
-      @apply flex flex-col gap-4;
-    }
-    
-    .table.mobile-cards tr {
-      @apply flex flex-col bg-(--color-surface) rounded-xl p-4 shadow-md border border-(--color-border);
-    }
-    
-    .table.mobile-cards td {
-      @apply flex justify-between items-center p-3 border-none border-b border-(--color-border) bg-transparent;
-    }
-    
-    .table.mobile-cards td:last-child {
-      @apply border-b-0;
-    }
-    
-    .table.mobile-cards td::before {
-      content: attr(data-label);
-      @apply font-semibold text-(--color-primary) text-sm uppercase tracking-wide min-w-20 mr-4;
-    }
-  }
-
-  /* 🎯 Responsive Container */
-  .table-responsive {
-    @apply overflow-x-auto w-full rounded-xl my-4;
-  }
-
-  /* ✨ Animations */
-  .motion-smooth {
-    animation: tableAppear 0.6s ease-out;
-  }
-
-  @keyframes tableAppear {
-    0% {
-      opacity: 0;
-      transform: translateY(20px);
-    }
-    100% {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  /* 🎨 Color Variants */
-  .table.primary th { @apply bg-(--color-primary); }
-  .table.success th { @apply bg-(--color-success); }
-  .table.warning th { @apply bg-(--color-warning); }
-  .table.danger th { @apply bg-(--color-danger); }
-  .table.info th { @apply bg-(--color-info); }
-
-  /* 📏 Size Variants */
-  .table.sm th, .table.sm td { @apply px-3 py-2 text-xs; }
-  .table.md th, .table.md td { @apply px-4 py-3 text-sm; }
-  .table.lg th, .table.lg td { @apply px-5 py-4 text-base; }
-
-  /* 🎭 Interactive States */
-  .table tbody tr {
-    @apply transition-all duration-200;
-  }
-  
-  .table tbody tr:hover td {
-    @apply bg-[color-mix(in_oklch,var(--color-primary),transparent_95%)];
-  }
-}