@jjlmoya/utils-audiovisual 1.16.0 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-audiovisual",
-    "version": "1.16.0",
+    "version": "1.17.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/tool/chromaticLens/chromatic-lens-color-palette-extraction-online.css

@@ -1,4 +1,4 @@
-:global(.cl-root) {
+.cl-root {
   --cl-bg: #fff;
   --cl-bg-elevated: #f8fafc;
   --cl-border: #e2e8f0;
@@ -16,7 +16,7 @@
   margin: 0 auto;
 }
 
-:global(.theme-dark .cl-root) {
+.theme-dark .cl-root {
   --cl-bg: #18181b;
   --cl-bg-elevated: #27272a;
   --cl-border: #3f3f46;
@@ -30,7 +30,7 @@
   --cl-shadow: rgba(0, 0, 0, 0.5);
 }
 
-:global(.cl-card) {
+.cl-card {
   background: var(--cl-bg);
   border: 1px solid var(--cl-border);
   border-radius: 3rem;
@@ -40,7 +40,7 @@
   overflow: hidden;
 }
 
-:global(.cl-drop) {
+.cl-drop {
   padding: 5rem 2rem;
   display: flex;
   flex-direction: column;
@@ -53,13 +53,13 @@
   gap: 0.5rem;
 }
 
-:global(.cl-drop:hover),
-:global(.cl-drop-active) {
+.cl-drop:hover,
+.cl-drop-active {
   background: var(--cl-accent-alpha-hover);
   border-color: var(--cl-accent);
 }
 
-:global(.cl-drop-icon) {
+.cl-drop-icon {
   width: 5rem;
   height: 5rem;
   background: var(--cl-accent-alpha);
@@ -71,30 +71,30 @@
   color: var(--cl-accent);
 }
 
-:global(.cl-drop-icon svg) {
+.cl-drop-icon svg {
   width: 2.5rem;
   height: 2.5rem;
 }
 
-:global(.cl-drop-title) {
+.cl-drop-title {
   font-size: 2rem;
   font-weight: 950;
   color: var(--cl-text);
   margin: 0;
 }
 
-:global(.cl-drop-sub) {
+.cl-drop-sub {
   font-size: 1.1rem;
   color: var(--cl-text-muted);
   margin: 0;
   font-weight: 600;
 }
 
-:global(.cl-workspace) {
+.cl-workspace {
   padding: 1.5rem;
 }
 
-:global(.cl-mini-drop) {
+.cl-mini-drop {
   display: inline-flex;
   align-items: center;
   gap: 0.75rem;
@@ -110,17 +110,17 @@
   transition: border-color 0.2s, color 0.2s;
 }
 
-:global(.cl-mini-drop:hover) {
+.cl-mini-drop:hover {
   border-color: var(--cl-accent);
   color: var(--cl-accent);
 }
 
-:global(.cl-mini-drop svg) {
+.cl-mini-drop svg {
   width: 1.1rem;
   height: 1.1rem;
 }
 
-:global(.cl-config-bar) {
+.cl-config-bar {
   padding: 1rem 0;
   margin-bottom: 2rem;
   border-bottom: 1px solid var(--cl-border);
@@ -128,13 +128,13 @@
   justify-content: flex-end;
 }
 
-:global(.cl-config-item) {
+.cl-config-item {
   display: flex;
   align-items: center;
   gap: 1rem;
 }
 
-:global(.cl-config-label) {
+.cl-config-label {
   font-size: 0.75rem;
   font-weight: 900;
   text-transform: uppercase;
@@ -142,7 +142,7 @@
   letter-spacing: 0.1em;
 }
 
-:global(.cl-count-select) {
+.cl-count-select {
   padding: 0.5rem 1rem;
   border-radius: 0.75rem;
   background: var(--cl-bg-elevated);
@@ -152,58 +152,58 @@
   cursor: pointer;
 }
 
-:global(.cl-result-layout) {
+.cl-result-layout {
   display: grid;
   grid-template-columns: 1fr 1.25fr;
   gap: 3rem;
 }
 
 @media (max-width: 800px) {
-  :global(.cl-result-layout) {
+  .cl-result-layout {
     grid-template-columns: 1fr;
   }
 }
 
-:global(.cl-preview-col) {
+.cl-preview-col {
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }
 
-:global(.cl-preview-img) {
+.cl-preview-img {
   width: 100%;
   border-radius: 1.5rem;
   box-shadow: 0 20px 40px var(--cl-shadow);
   display: block;
 }
 
-:global(.cl-palette-col) {
+.cl-palette-col {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
 }
 
-:global(.cl-palette-header) {
+.cl-palette-header {
   display: flex;
   align-items: center;
   gap: 1rem;
   color: var(--cl-accent);
 }
 
-:global(.cl-palette-header svg) {
+.cl-palette-header svg {
   width: 1.25rem;
   height: 1.25rem;
   flex-shrink: 0;
 }
 
-:global(.cl-palette-header h4) {
+.cl-palette-header h4 {
   font-size: 1.25rem;
   font-weight: 950;
   color: var(--cl-text);
   margin: 0;
 }
 
-:global(.cl-loader) {
+.cl-loader {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -211,7 +211,7 @@
   padding: 2rem 0;
 }
 
-:global(.cl-spinner) {
+.cl-spinner {
   width: 3rem;
   height: 3rem;
   border: 3px solid var(--cl-accent-alpha);
@@ -220,7 +220,7 @@
   animation: cl-spin 0.8s linear infinite;
 }
 
-:global(.cl-loader-text) {
+.cl-loader-text {
   font-size: 0.75rem;
   font-weight: 900;
   text-transform: uppercase;
@@ -229,14 +229,14 @@
   margin: 0;
 }
 
-:global(.cl-swatches) {
+.cl-swatches {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   animation: cl-fade-up 0.5s ease;
 }
 
-:global(.cl-swatch) {
+.cl-swatch {
   display: flex;
   align-items: center;
   gap: 1.25rem;
@@ -248,17 +248,17 @@
   transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.2s;
 }
 
-:global(.cl-swatch:hover) {
+.cl-swatch:hover {
   transform: scale(1.02);
   border-color: var(--cl-accent);
 }
 
-:global(.cl-swatch-copied) {
+.cl-swatch-copied {
   background: var(--cl-emerald-alpha);
   border-color: var(--cl-emerald);
 }
 
-:global(.cl-swatch-color) {
+.cl-swatch-color {
   width: 3.5rem;
   height: 3.5rem;
   border-radius: 0.75rem;
@@ -266,19 +266,19 @@
   flex-shrink: 0;
 }
 
-:global(.cl-swatch-info) {
+.cl-swatch-info {
   display: flex;
   flex-direction: column;
   gap: 0.2rem;
 }
 
-:global(.cl-swatch-hex) {
+.cl-swatch-hex {
   font-weight: 950;
   color: var(--cl-text);
   font-size: 1.25rem;
 }
 
-:global(.cl-swatch-action) {
+.cl-swatch-action {
   font-size: 0.7rem;
   font-weight: 900;
   color: var(--cl-text-muted);
@@ -286,7 +286,7 @@
   letter-spacing: 0.05em;
 }
 
-:global(.cl-hidden) {
+.cl-hidden {
   display: none;
 }
 
@@ -305,4 +305,4 @@
     opacity: 1;
     transform: translateY(0);
   }
-}
+}

package/src/tool/collageMaker/free-online-photo-collage-maker-professional-compositions.css

@@ -1,4 +1,4 @@
-:global(.cm-root) {
+.cm-root {
   --cm-bg: #fff;
   --cm-bg-muted: #f8fafc;
   --cm-border: #e2e8f0;
@@ -14,7 +14,7 @@
   padding: 1rem;
 }
 
-:global(.theme-dark .cm-root) {
+.theme-dark .cm-root {
   --cm-bg: #1e293b;
   --cm-bg-muted: #0f172a;
   --cm-border: #334155;
@@ -25,7 +25,7 @@
   --cm-shadow: rgba(0,0,0,0.4);
 }
 
-:global(.cm-card) {
+.cm-card {
   background: var(--cm-bg);
   border: 1px solid var(--cm-border);
   border-radius: var(--cm-radius);
@@ -33,7 +33,7 @@
   overflow: hidden;
 }
 
-:global(.cm-top-row) {
+.cm-top-row {
   display: grid;
   grid-template-columns: 300px 1fr;
   gap: 0;
@@ -45,7 +45,7 @@
   }
 }
 
-:global(.cm-left-col) {
+.cm-left-col {
   padding: 1.25rem;
   border-right: 1px solid var(--cm-border);
   display: flex;
@@ -60,7 +60,7 @@
   }
 }
 
-:global(.cm-drop-zone) {
+.cm-drop-zone {
   position: relative;
   background: var(--cm-bg-muted);
   border: 2px dashed var(--cm-border);
@@ -76,7 +76,7 @@
   color: var(--cm-primary);
 }
 
-:global(.cm-drop-zone input[type="file"]) {
+.cm-drop-zone input[type="file"] {
   position: absolute;
   inset: 0;
   opacity: 0;
@@ -85,32 +85,32 @@
   height: 100%;
 }
 
-:global(.cm-drop-zone:hover),
-:global(.cm-drop-zone-over) {
+.cm-drop-zone:hover,
+.cm-drop-zone-over {
   border-color: var(--cm-primary);
   background: var(--cm-primary-light);
 }
 
-:global(.cm-drop-title) {
+.cm-drop-title {
   font-size: 0.9rem;
   font-weight: 700;
   color: var(--cm-text);
   margin: 0;
 }
 
-:global(.cm-drop-sub) {
+.cm-drop-sub {
   font-size: 0.75rem;
   color: var(--cm-text-muted);
   margin: 0;
 }
 
-:global(.cm-drop-link) {
+.cm-drop-link {
   color: var(--cm-primary);
   font-weight: 600;
   cursor: pointer;
 }
 
-:global(.cm-section-label) {
+.cm-section-label {
   display: block;
   font-size: 0.65rem;
   font-weight: 700;
@@ -119,13 +119,13 @@
   color: var(--cm-text-muted);
 }
 
-:global(.cm-section-header) {
+.cm-section-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
-:global(.cm-badge) {
+.cm-badge {
   background: var(--cm-primary-light);
   color: var(--cm-primary);
   font-size: 0.65rem;
@@ -134,14 +134,14 @@
   border-radius: 9999px;
 }
 
-:global(.cm-thumbs) {
+.cm-thumbs {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
   gap: 0.35rem;
   margin-top: 0.5rem;
 }
 
-:global(.cm-thumb) {
+.cm-thumb {
   position: relative;
   aspect-ratio: 1;
   border-radius: 0.4rem;
@@ -150,18 +150,18 @@
   transition: border-color 0.15s;
 }
 
-:global(.cm-thumb:hover) {
+.cm-thumb:hover {
   border-color: var(--cm-primary);
 }
 
-:global(.cm-thumb img) {
+.cm-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }
 
-:global(.cm-thumb-num) {
+.cm-thumb-num {
   position: absolute;
   bottom: 2px;
   left: 3px;
@@ -172,7 +172,7 @@
   line-height: 1;
 }
 
-:global(.cm-thumb-del) {
+.cm-thumb-del {
   position: absolute;
   top: 2px;
   right: 2px;
@@ -190,15 +190,15 @@
   transition: background 0.15s;
 }
 
-:global(.cm-thumb:hover .cm-thumb-del) {
+.cm-thumb:hover .cm-thumb-del {
   display: flex;
 }
 
-:global(.cm-thumb-del:hover) {
+.cm-thumb-del:hover {
   background: #dc2626;
 }
 
-:global(.cm-preview-col) {
+.cm-preview-col {
   padding: 1.25rem;
   display: flex;
   flex-direction: column;
@@ -206,7 +206,7 @@
   min-height: 260px;
 }
 
-:global(.cm-preview-placeholder) {
+.cm-preview-placeholder {
   flex: 1;
   background: var(--cm-bg-muted);
   border: 2px dashed var(--cm-border);
@@ -219,12 +219,12 @@
   color: var(--cm-text-muted);
 }
 
-:global(.cm-preview-placeholder p) {
+.cm-preview-placeholder p {
   font-size: 0.8rem;
   margin: 0;
 }
 
-:global(.cm-canvas) {
+.cm-canvas {
   width: 100%;
   height: auto;
   border-radius: 0.75rem;
@@ -232,7 +232,7 @@
   display: block;
 }
 
-:global(.cm-dims-badge) {
+.cm-dims-badge {
   font-size: 0.65rem;
   font-weight: 600;
   color: var(--cm-text-muted);
@@ -242,7 +242,7 @@
   padding: 0.15rem 0.5rem;
 }
 
-:global(.cm-section-divider) {
+.cm-section-divider {
   border-top: 1px solid var(--cm-border);
   padding: 1rem 1.25rem;
   display: flex;
@@ -250,13 +250,13 @@
   gap: 0.75rem;
 }
 
-:global(.cm-layouts) {
+.cm-layouts {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
   gap: 0.4rem;
 }
 
-:global(.cm-layout-btn) {
+.cm-layout-btn {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -271,31 +271,31 @@
   position: relative;
 }
 
-:global(.cm-layout-btn span) {
+.cm-layout-btn span {
   font-size: 0.55rem;
   font-weight: 600;
   text-align: center;
   line-height: 1.2;
 }
 
-:global(.cm-layout-btn:hover:not(:disabled)) {
+.cm-layout-btn:hover:not(:disabled) {
   border-color: var(--cm-primary);
   color: var(--cm-primary);
   background: var(--cm-primary-light);
 }
 
-:global(.cm-layout-btn-active) {
+.cm-layout-btn-active {
   border-color: var(--cm-primary);
   background: var(--cm-primary-light);
   color: var(--cm-primary);
 }
 
-:global(.cm-layout-btn-disabled) {
+.cm-layout-btn-disabled {
   opacity: 0.45;
   cursor: not-allowed;
 }
 
-:global(.cm-layout-need) {
+.cm-layout-need {
   position: absolute;
   top: 2px;
   right: 4px;
@@ -309,37 +309,37 @@
   line-height: 1.4;
 }
 
-:global(.cm-settings-inline) {
+.cm-settings-inline {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
   gap: 1rem;
 }
 
-:global(.cm-setting) {
+.cm-setting {
   display: flex;
   flex-direction: column;
   gap: 0.3rem;
 }
 
-:global(.cm-setting-label) {
+.cm-setting-label {
   font-size: 0.7rem;
   font-weight: 600;
   color: var(--cm-text-muted);
 }
 
-:global(.cm-slider) {
+.cm-slider {
   accent-color: var(--cm-primary);
   width: 120px;
 }
 
-:global(.cm-color-row) {
+.cm-color-row {
   display: flex;
   align-items: center;
   gap: 0.5rem;
 }
 
-:global(.cm-color-swatch) {
+.cm-color-swatch {
   width: 32px;
   height: 32px;
   border: 2px solid var(--cm-border);
@@ -349,14 +349,14 @@
   background: transparent;
 }
 
-:global(.cm-color-code) {
+.cm-color-code {
   font-size: 0.7rem;
   font-weight: 600;
   color: var(--cm-text-muted);
   font-variant-numeric: tabular-nums;
 }
 
-:global(.cm-download-btn) {
+.cm-download-btn {
   display: flex;
   align-items: center;
   gap: 0.4rem;
@@ -374,13 +374,13 @@
   margin-left: auto;
 }
 
-:global(.cm-download-btn:disabled) {
+.cm-download-btn:disabled {
   opacity: 0.4;
   cursor: not-allowed;
   box-shadow: none;
 }
 
-:global(.cm-download-btn:not(:disabled):hover) {
+.cm-download-btn:not(:disabled):hover {
   transform: translateY(-1px);
   box-shadow: 0 6px 18px rgba(99,102,241,0.4);
-}
+}