funuicss 3.0.9 → 3.1.0

package/css/fun.css

@@ -2774,7 +2774,7 @@ color: var(--text-color);
   box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
 }
 
-.center-play-icon{
+._center-play-icon{
    position: absolute;
   top: 50%;
   left: 50%;
@@ -2793,41 +2793,30 @@ color: var(--text-color);
 
 
 
- .play-button {
+ ._play-button {
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 4rem;
-      height: 4rem;
-      border: 3px solid var(--borderColor);
+      width: 3rem;
+      height: 3rem;
+      border: 2px solid var(--borderColor) !important;
       border-radius: 50%;
-      background: var(--raiseThemes);
+      background-color: var(--raiseOpaque);
       backdrop-filter: var(--raiseBackdrop) !important;
       transition: transform 0.3s ease;
-      animation: pulse 2s infinite;
       cursor: pointer;
+      z-index: 2;
 
     }
 
-    .play-button:hover {
-      transform: scale(1.1);
-      background: var(--primary);
+    ._play-button:hover {
+      background-color: var(--primary) !important;
       color: var(--white) !important;
       border-color: var(--primary400);
       color: var(--text-color);
     }
 
-    @keyframes pulse {
-      0% {
-        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
-      }
-      70% {
-        box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
-      }
-      100% {
-        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
-      }
-    }
+
 
 .styled-slider {
   appearance: none;
@@ -4272,7 +4261,6 @@ opacity: 0.9;
 }
 .modal-body {
   height: 100%;
-  overflow: auto;
 }
 
 .modal-action {
@@ -6662,3 +6650,4 @@ background-color: rgba(0, 0, 0, 0.2);
 }
 
 
+

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0.9",
+  "version": "3.1.0",
   "name": "funuicss",
   "description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
   "main": "index.js",

package/ui/modal/Modal.js

@@ -87,10 +87,10 @@ function Modal(_a) {
     return (React.createElement("div", { className: "modal ".concat(backdrop ? 'backdrop' : '', " ").concat(position || ''), id: modalId, onClick: handleClickOutside },
         React.createElement("div", __assign({ className: "modal-content ".concat(funcss || '', " ").concat(flat ? 'flat' : ''), style: {
                 animation: "".concat(duration || 0.2, "s ").concat(animation || 'ScaleUp'),
-                maxWidth: maxWidth || undefined,
-                maxHeight: maxHeight || undefined,
+                maxWidth: maxWidth || "100%",
+                maxHeight: maxHeight || "fit-content",
                 width: width || '100%',
-                height: height || undefined,
+                height: height || "fit-content",
             } }, rest),
             title && (React.createElement(Header_1.default, { funcss: titlecss || '', title: title, close: !hideClose ?
                     React.createElement("div", { onClick: function () { return setOpen(false); }, className: "".concat(closecss || '', " pointer hover-text-error") }, close || React.createElement(pi_1.PiX, { size: 25 }))

package/ui/video/Video.js

@@ -274,8 +274,8 @@ function Video(_a) {
                         react_1.default.createElement("input", { type: "range", min: 0, max: duration, value: currentTime, onChange: handleProgressBarChange, className: "width-100-p videoSlider styled-slider m-0", "aria-label": "Progress bar", style: { '--progress': "".concat((currentTime / duration) * 100) } })),
                     react_1.default.createElement("div", { className: "video_time" },
                         react_1.default.createElement(Text_1.default, { text: "".concat((0, videoFunctions_1.formatTime)(duration - currentTime)), funcss: 'm-0', size: "sm" })))),
-            react_1.default.createElement("div", { className: "center-play-icon animated fade-in", onClick: handlePlayPauseToggle },
-                react_1.default.createElement("div", { className: 'play-button' }, isPlaying ? react_1.default.createElement(pi_1.PiPause, { size: 30 }) : react_1.default.createElement(pi_1.PiPlay, { size: 30 }))),
+            react_1.default.createElement("div", { className: "_center-play-icon animated fade-in", onClick: handlePlayPauseToggle },
+                react_1.default.createElement("div", { className: '_play-button' }, isPlaying ? react_1.default.createElement(pi_1.PiPause, { size: 20 }) : react_1.default.createElement(pi_1.PiPlay, { size: 20 }))),
             react_1.default.createElement(RowFlex_1.default, { funcss: 'animated slide-up', gap: 1, justify: "center" },
                 react_1.default.createElement(RowFlex_1.default, { gap: 0.5 },
                     react_1.default.createElement(ToolTip_1.default, null,