@phont-ai/subtitles 0.1.58 → 0.1.60

package/dist/styles.css

@@ -586,6 +586,18 @@ video {
 .inset-0 {
   inset: 0px;
 }
+.left-0 {
+  left: 0px;
+}
+.right-0 {
+  right: 0px;
+}
+.top-\[80px\] {
+  top: 80px;
+}
+.z-\[104\] {
+  z-index: 104;
+}
 .z-\[50\] {
   z-index: 50;
 }
@@ -667,6 +679,9 @@ video {
 .max-w-lg {
   max-width: 32rem;
 }
+.max-w-sm {
+  max-width: 24rem;
+}
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -898,6 +913,10 @@ video {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
 .py-8 {
   padding-top: 2rem;
   padding-bottom: 2rem;
@@ -993,6 +1012,9 @@ video {
   --tw-text-opacity: 1;
   color: rgb(253 224 71 / var(--tw-text-opacity, 1));
 }
+.accent-black {
+  accent-color: #000;
+}
 .opacity-100 {
   opacity: 1;
 }
@@ -1015,9 +1037,6 @@ video {
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.outline {
-  outline-style: solid;
-}
 .blur {
   --tw-blur: blur(8px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -1064,6 +1083,71 @@ video {
 .phont-controls-container {
   /* Container for PhontControls component */
 }
+
+/* PhontControls scrollbars */
+.toggle-scroll::-webkit-scrollbar,
+.settings-scroll::-webkit-scrollbar {
+  width: 4px;
+}
+.toggle-scroll::-webkit-scrollbar-track,
+.settings-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+.toggle-scroll::-webkit-scrollbar-thumb,
+.settings-scroll::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 2px;
+}
+.toggle-scroll::-webkit-scrollbar-thumb:hover,
+.settings-scroll::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.5);
+}
+.toggle-scroll,
+.settings-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
+}
+
+/* GTSSlider thumb */
+.emotion-slider::-webkit-slider-thumb {
+  -webkit-appearance: none !important;
+  appearance: none !important;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #fff !important;
+  box-shadow: 2px 3px 6px 0 rgba(0, 0, 0, 0.25);
+  border: none !important;
+  -webkit-transition: background 0.2s;
+  transition: background 0.2s;
+  cursor: pointer;
+}
+.emotion-slider::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #fff !important;
+  box-shadow: 2px 3px 6px 0 rgba(0, 0, 0, 0.25);
+  border: none !important;
+  -moz-transition: background 0.2s;
+  transition: background 0.2s;
+  cursor: pointer;
+}
+.emotion-slider::-ms-thumb {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #fff !important;
+  box-shadow: 2px 3px 6px 0 rgba(0, 0, 0, 0.25);
+  border: none !important;
+  -ms-transition: background 0.2s;
+  transition: background 0.2s;
+  cursor: pointer;
+}
+.emotion-slider {
+  cursor: pointer;
+  accent-color: transparent;
+}
 .hover\:bg-\[\#D2BEFF\]\/80:hover {
   background-color: rgb(210 190 255 / 0.8);
 }
@@ -1117,6 +1201,38 @@ video {
 }
 @media (min-width: 768px) {
 
+  .md\:left-auto {
+    left: auto;
+  }
+
+  .md\:right-\[20px\] {
+    right: 20px;
+  }
+
+  .md\:top-auto {
+    top: auto;
+  }
+
+  .md\:z-\[101\] {
+    z-index: 101;
+  }
+
+  .md\:w-\[min\(90vw\2c 260px\)\] {
+    width: min(90vw,260px);
+  }
+
+  .md\:max-w-\[260px\] {
+    max-width: 260px;
+  }
+
+  .md\:items-end {
+    align-items: flex-end;
+  }
+
+  .md\:justify-end {
+    justify-content: flex-end;
+  }
+
   .md\:rounded-lg {
     border-radius: 0.5rem;
   }
@@ -1129,6 +1245,11 @@ video {
     padding: 1rem;
   }
 
+  .md\:px-0 {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
   .md\:px-2 {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
@@ -1143,5 +1264,9 @@ video {
     font-size: 1rem;
     line-height: 1.5rem;
   }
+
+  .md\:\[bottom\:calc\(8vh\+16px\)\] {
+    bottom: calc(8vh + 16px);
+  }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phont-ai/subtitles",
-  "version": "0.1.58",
+  "version": "0.1.60",
   "description": "React components for PHONT expressive subtitles",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",