dolphincss 1.0.6 → 1.1.7

package/MainCss/glow.css

@@ -1,108 +0,0 @@
-/* ===== Global Glowing Effects ===== */
-.glow {
-  --glow-color: var(--color-primary);
-  --glow-intensity: 0.2;
-  --glow-spread: 15px;
-  --glow-blur: 8px;
-  @apply transition-all duration-300;
-}
-
-/* Glow on hover */
-.glow:hover {
-  box-shadow: 0 0 var(--glow-spread) var(--glow-blur) color-mix(in oklch, var(--glow-color) calc(var(--glow-intensity) * 100%), transparent);
-}
-
-/* Glow on focus */
-.glow:focus {
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--glow-color) 20%, transparent);
-}
-
-/* Color variants */
-.glow.primary {
-  --glow-color: var(--color-primary);
-}
-
-.glow.secondary {
-  --glow-color: var(--color-secondary);
-}
-
-.glow.success {
-  --glow-color: var(--color-success);
-}
-
-.glow.warning {
-  --glow-color: var(--color-warning);
-}
-
-.glow.danger {
-  --glow-color: var(--color-danger);
-}
-
-.glow.info {
-  --glow-color: var(--color-info);
-}
-
-/* Intensity variants */
-.glow.strong {
-  --glow-intensity: 0.4;
-  --glow-spread: 25px;
-}
-
-.glow.subtle {
-  --glow-intensity: 0.15;
-  --glow-spread: 10px;
-}
-
-/* Pulsing glow */
-.glow.pulse {
-  animation: dolphin-glow-pulse 3s ease-in-out infinite;
-}
-
-@keyframes dolphin-glow-pulse {
-  0%, 100% { 
-    box-shadow: 0 0 5px 2px color-mix(in oklch, var(--glow-color) 15%, transparent);
-  }
-  50% { 
-    box-shadow: 0 0 20px 8px color-mix(in oklch, var(--glow-color) 25%, transparent);
-  }
-}
-
-/* Wave glow */
-.glow.wave {
-  animation: ocean-wave 4s ease-in-out infinite;
-}
-
-@keyframes ocean-wave {
-  0%, 100% { 
-    box-shadow: 
-      0 0 10px 3px color-mix(in oklch, var(--color-primary) 20%, transparent),
-      0 0 20px 6px color-mix(in oklch, var(--color-info) 15%, transparent);
-  }
-  50% { 
-    box-shadow: 
-      0 0 15px 5px color-mix(in oklch, var(--color-primary) 25%, transparent),
-      0 0 25px 8px color-mix(in oklch, var(--color-info) 20%, transparent);
-  }
-}
-
-/* For inputs, we want to override the focus glow if the input has the glow class */
-.floatinglabel-input.glow:focus {
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--glow-color) 20%, transparent);
-}
-
-/* Ensure that the glow effect is not applied to disabled elements */
-.glow:disabled {
-  box-shadow: none !important;
-}
-
-/* Responsive glow - reduce on mobile */
-@media (max-width: 768px) {
-  .glow:hover {
-    --glow-spread: 12px;
-    --glow-blur: 6px;
-  }
-  
-  .glow:focus {
-    box-shadow: 0 0 0 2px color-mix(in oklch, var(--glow-color) 20%, transparent);
-  }
-}

package/MainCss/gradient.css

@@ -1,13 +0,0 @@
-
-  /* ===== Gradient Background ===== */
-  @layer components {
-  .gradient-bg {
-    @apply transition-all duration-500 rounded-md bg-no-repeat text-(--color-text);
-    background-size: 200% 200%;
-  }
-  .gradient-bg.primary { background-image: var(--gradient-primary) !important; }
-  .gradient-bg.success { background-image: var(--gradient-success) !important; }
-  .gradient-bg.warning { background-image: var(--gradient-warning) !important; }
-  .gradient-bg.danger { background-image: var(--gradient-danger) !important; }
-  .gradient-bg.info { background-image: var(--gradient-info) !important; }
-  }

package/MainCss/icon.css

@@ -1,41 +0,0 @@
-/* Inputs with left icon */
-@layer components {
-.input-icon-left {
-  @apply relative w-full;
-}
-.input-icon-left > svg {
-  @apply absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-(--color-text-muted);
-}
-.input-icon-left > input,
-.input-icon-left > select {
-  @apply w-full pl-10 pr-3 py-2 rounded-md transition-all duration-200;
-}
-
-/* Inputs with right icon */
-.input-icon-right {
-  @apply relative w-full;
-}
-.input-icon-right > svg {
-  @apply absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-(--color-text-muted);
-}
-.input-icon-right > input,
-.input-icon-right > select {
-  @apply w-full pl-3 pr-10 py-2 rounded-md transition-all duration-200;
-}
-
-/* Buttons with left icon */
-.button-icon-left {
-  @apply relative inline-flex items-center justify-center gap-2;
-}
-.button-icon-left > svg {
-  @apply w-5 h-5;
-}
-
-/* Buttons with right icon */
-.button-icon-right {
-  @apply relative inline-flex items-center justify-center gap-2;
-}
-.button-icon-right > svg {
-  @apply w-5 h-5 order-last;
-}
-}

package/MainCss/kpi.css

@@ -1,27 +0,0 @@
-/* ===== KPI Card System ===== */
-@layer components {
-  .kpi-card {
-    @apply flex items-center justify-between p-4 rounded-xl shadow-md transition-all duration-300 hover:shadow-xl bg-(--color-surface) text-(--color-text);
-  }
-  .kpi-card .kpi-text { @apply flex flex-col; }
-  .kpi-card .kpi-text .kpi-title { @apply text-sm text-(--color-text-muted); }
-  .kpi-card .kpi-text .kpi-value { @apply text-2xl font-bold text-(--color-text); }
-  .kpi-card .kpi-text .kpi-change { @apply text-sm font-medium mt-1; }
-  .kpi-card .kpi-text .kpi-change.positive { @apply text-(--color-success); }
-  .kpi-card .kpi-text .kpi-change.negative { @apply text-(--color-danger); }
-  .kpi-card .kpi-chart {
-    @apply w-16 h-16 rounded-xl flex items-center justify-center transition-all duration-300 shadow-inner bg-(--color-primary) text-(--color-text);
-    position: relative;
-    overflow: hidden;
-  }
-  .kpi-card .kpi-chart::before {
-    content: '';
-    @apply absolute bottom-1 left-1 w-[calc(100%-0.5rem)] h-1/2 bg-gradient-to-r from-(--color-gradient-start) to-(--color-gradient-end) rounded-sm;
-  }
-  .kpi-card:hover .kpi-chart { @apply shadow-lg; }
-  @media (max-width: 768px) {
-    .kpi-card { @apply flex-col items-start gap-3; }
-    .kpi-card .kpi-chart { @apply w-12 h-12; }
-  }
-}
-  

package/MainCss/layout.css

@@ -1,32 +0,0 @@
-
-  /* ===== Layout System ===== */
-  @layer components {
-  .row { @apply flex flex-wrap gap-4; }
-  .col { @apply flex-1 min-w-[200px]; }
-  .col-1 { @apply flex-[1_1_8%]; }
-  .col-2 { @apply flex-[1_1_16%]; }
-  .col-3 { @apply flex-[1_1_25%]; }
-  .col-4 { @apply flex-[1_1_33%]; }
-  .col-5 { @apply flex-[1_1_41%]; }
-  .col-6 { @apply flex-[1_1_50%]; }
-  .col-7 { @apply flex-[1_1_58%]; }
-  .col-8 { @apply flex-[1_1_66%]; }
-  .col-9 { @apply flex-[1_1_75%]; }
-  .col-10 { @apply flex-[1_1_83%]; }
-  .col-11 { @apply flex-[1_1_91%]; }
-  .col-12 { @apply flex-[1_1_100%]; }
-  @media (max-width: 1024px) {
-    .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
-    .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { @apply flex-[1_1_45%]; }
-  }
-  @media (max-width: 768px) {
-    .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
-    .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { @apply flex-[1_1_100%]; }
-  }
-  .gap-0 { @apply gap-0; }
-  .gap-1 { @apply gap-1; }
-  .gap-2 { @apply gap-2; }
-  .gap-3 { @apply gap-3; }
-  .gap-4 { @apply gap-4; }
-  .gap-5 { @apply gap-5; }
-  }

package/MainCss/motion.css

@@ -1,144 +0,0 @@
-/* ============================
-   🌊 DolphinCSS Motion System
-   ✅ Works with: filled, primary, circle, glow, etc.
-   ✅ Tailwind v4 Compatible
-   ============================ */
-
-@keyframes hover-pulse {
-  0%, 100% { transform: scale(1); }
-  50% { transform: scale(1.08); }
-}
-
-@keyframes gentle-wave {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-6px); }
-}
-
-@keyframes dolphin-float {
-  0%, 100% { transform: translateY(0) rotate(0deg); }
-  50% { transform: translateY(-8px) rotate(2deg); }
-}
-
-@keyframes spin-slow {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-@keyframes color-shift {
-  0%, 100% { background-color: transparent; }
-  50% { background-color: var(--color-primary); opacity: 0.1; }
-}
-
-@keyframes glow-pulse {
-  0%, 100% { box-shadow: 0 0 5px var(--glow-color, var(--color-primary)); }
-  50% { box-shadow: 0 0 20px var(--glow-color, var(--color-primary)); }
-}
-
-@theme {
-  --motion-speed: 600ms;
-  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* ===== Motion Classes ===== */
-@layer utilities {
-  .motion { transition: all var(--motion-speed) var(--motion-ease); }
-
-  /* Hover pulse effect */
-  .hover-pulse:hover {
-    animation: hover-pulse 0.8s var(--motion-ease) both;
-  }
-
-  /* Continuous gentle float (for icons, buttons, cards) */
-  .float {
-    animation: dolphin-float 3s ease-in-out infinite;
-  }
-
-  /* Soft wave hover */
-  .hover-wave:hover {
-    animation: gentle-wave 0.7s ease-in-out both;
-  }
-
-  /* Slow spin (for loaders / refresh buttons) */
-  .spin-slow {
-    animation: spin-slow 3s linear infinite;
-  }
-
-  /* Color shift hover */
-  .hover-color-shift:hover {
-    animation: color-shift 1.5s ease-in-out infinite;
-  }
-
-  /* Glow pulse hover */
-  .hover-glow:hover {
-    animation: glow-pulse 2s ease-in-out infinite;
-  }
-
-  /* Background color hovers */
-  .hover\:bg-primary:hover { background-color: var(--color-primary) !important; }
-  .hover\:bg-secondary:hover { background-color: var(--color-secondary) !important; }
-  .hover\:bg-success:hover { background-color: var(--color-success) !important; }
-  .hover\:bg-warning:hover { background-color: var(--color-warning) !important; }
-  .hover\:bg-danger:hover { background-color: var(--color-danger) !important; }
-  .hover\:bg-info:hover { background-color: var(--color-info) !important; }
-
-  /* Background opacity hovers */
-  .hover\:bg-opacity-10:hover { opacity: 0.9; }
-  .hover\:bg-opacity-20:hover { opacity: 0.8; }
-  .hover\:bg-opacity-30:hover { opacity: 0.7; }
-  .hover\:bg-opacity-40:hover { opacity: 0.6; }
-  .hover\:bg-opacity-50:hover { opacity: 0.5; }
-
-  /* Text color hovers */
-  .hover\:text-primary:hover { color: var(--color-primary) !important; }
-  .hover\:text-secondary:hover { color: var(--color-secondary) !important; }
-  .hover\:text-success:hover { color: var(--color-success) !important; }
-  .hover\:text-warning:hover { color: var(--color-warning) !important; }
-  .hover\:text-danger:hover { color: var(--color-danger) !important; }
-
-  /* Border color hovers */
-  .hover\:border-primary:hover { border-color: var(--color-primary) !important; }
-  .hover\:border-secondary:hover { border-color: var(--color-secondary) !important; }
-  .hover\:border-success:hover { border-color: var(--color-success) !important; }
-  .hover\:border-warning:hover { border-color: var(--color-warning) !important; }
-  .hover\:border-danger:hover { border-color: var(--color-danger) !important; }
-
-  /* Scale hovers */
-  .hover\:scale-105:hover { transform: scale(1.05); }
-  .hover\:scale-110:hover { transform: scale(1.1); }
-  .hover\:scale-95:hover { transform: scale(0.95); }
-
-  /* Translate hovers */
-  .hover\:translate-y-1:hover { transform: translateY(-0.25rem); }
-  .hover\:translate-y-2:hover { transform: translateY(-0.5rem); }
-  .hover\:-translate-y-1:hover { transform: translateY(0.25rem); }
-
-  /* Rotate hovers */
-  .hover\:rotate-12:hover { transform: rotate(12deg); }
-  .hover\:rotate-45:hover { transform: rotate(45deg); }
-  .hover\:-rotate-12:hover { transform: rotate(-12deg); }
-
-  /* Transition utilities */
-  .transition-colors { transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
-  .transition-transform { transition: transform 0.3s; }
-  .transition-opacity { transition: opacity 0.3s; }
-  .transition-shadow { transition: box-shadow 0.3s; }
-
-  /* Entry animations */
-  .fade-in {
-    animation: fade-in 0.6s var(--motion-ease) both;
-  }
-
-  .slide-up {
-    animation: slide-up 0.6s var(--motion-ease) both;
-  }
-
-  @keyframes fade-in {
-    from { opacity: 0; transform: translateY(6px); }
-    to { opacity: 1; transform: translateY(0); }
-  }
-
-  @keyframes slide-up {
-    from { transform: translateY(25px); opacity: 0; }
-    to { transform: translateY(0); opacity: 1; }
-  }
-}

package/MainCss/nav.css

@@ -1,39 +0,0 @@
-/* ===== Navigation System ===== */
-@layer components {
-  .nav-container {
-    @apply w-full flex items-center justify-between px-4 py-3 bg-(--color-surface) shadow-md transition-all duration-200;
-  }
-  .nav-brand { @apply text-lg font-bold text-(--color-text) select-none; }
-  .nav-ul { @apply flex gap-4 list-none m-0 p-0; }
-  .nav-ul-left { @apply flex-1 flex items-center; }
-  .nav-ul-right { @apply flex gap-4 items-center; }
-  .nav-li { @apply relative cursor-pointer transition-colors duration-200; }
-  .nav-li a {
-    @apply px-3 py-2 rounded-md text-(--color-text) hover:bg-(--color-primary) hover:text-(--color-text) transition-all duration-200;
-  }
-  .nav-li.active a { @apply bg-(--color-primary) text-(--color-text); }
-  .nav-dropdown {
-    @apply absolute top-full left-0 mt-1 bg-(--color-surface) shadow-lg rounded-md min-w-[8rem] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50;
-  }
-  .nav-dropdown li {
-    @apply px-4 py-2 whitespace-nowrap hover:bg-(--color-primary) hover:text-(--color-text);
-  }
-  .nav-toggle { @apply block md:hidden cursor-pointer p-2 rounded-md hover:bg-(--color-border) transition-all duration-200; }
-  .nav-mobile { @apply hidden flex-col gap-2 mt-2 md:hidden; }
-  .nav-mobile.show { @apply flex; }
-  .nav-search-container { @apply relative flex items-center w-full max-w-xs transition-all duration-300; }
-  .nav-search-input {
-    @apply w-full pl-10 pr-10 py-2 rounded-full bg-(--color-surface) border border-(--color-border) text-(--color-text) focus:outline-none focus:ring-2 focus:ring-(--color-primary) focus:border-transparent transition-all duration-300 placeholder:text-(--color-text-muted);
-  }
-  .nav-search-icon {
-    @apply absolute left-3 top-1/2 -translate-y-1/2 text-(--color-text-muted) w-5 h-5;
-  }
-  .nav-search-clear {
-    @apply absolute right-3 top-1/2 -translate-y-1/2 text-(--color-text-muted) w-5 h-5 cursor-pointer opacity-0 transition-opacity duration-200 hover:text-(--color-primary);
-  }
-  .nav-search-input:not(:placeholder-shown) + .nav-search-clear { @apply opacity-100; }
-  @media (max-width: 768px) {
-    .nav-search-container { @apply max-w-full mt-2; }
-    .nav-search-input { @apply py-1.5 text-sm; }
-  }
-}