init commit

remotion/node_modules/@remotion/studio/dist/helpers/inject-css.js

@@ -0,0 +1,159 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.injectCSS = void 0;
+const remotion_1 = require("remotion");
+const scroll_to_default_props_path_1 = require("../components/RenderModal/SchemaEditor/scroll-to-default-props-path");
+const makeDefaultGlobalCSS = () => {
+    const unhoveredDragAreaFactor = 2;
+    const fromMiddle = 50 / unhoveredDragAreaFactor;
+    const hoveredDragAreaFactor = 6;
+    const fromMiddleHovered = 50 / hoveredDragAreaFactor;
+    return `
+  html {
+    --remotion-cli-internals-blue: #0b84f3;
+    overscroll-behavior-y: none;
+    overscroll-behavior-x: none;
+  }
+  
+  body {
+    overscroll-behavior-y: none;
+    overscroll-behavior-x: none;
+    /* Override Chakra UI position: relative on body */
+    position: static !important;
+  }
+  
+  .remotion-splitter {
+    user-select: none;
+  }
+  
+  .remotion-splitter-horizontal {
+    transform: scaleY(${unhoveredDragAreaFactor});
+    background: linear-gradient(
+      to bottom,
+      transparent ${50 - fromMiddle}%,
+      black ${50 - fromMiddle}%,
+      black ${50 + fromMiddle}%,
+      transparent ${50 + fromMiddle}%
+    );
+  }
+  
+  .remotion-splitter-horizontal.remotion-splitter-active, .remotion-splitter-horizontal.remotion-splitter-hover {
+    background: linear-gradient(
+      to bottom,
+      transparent ${50 - fromMiddleHovered}%,
+      var(--remotion-cli-internals-blue) ${50 - fromMiddleHovered}%,
+      var(--remotion-cli-internals-blue) ${50 + fromMiddleHovered}%,
+      transparent ${50 + fromMiddleHovered}%
+    );
+    cursor: row-resize;
+    transform: scaleY(${hoveredDragAreaFactor});
+    z-index: 1000;
+  }
+  
+  .remotion-splitter-vertical {
+    transform: scaleX(${unhoveredDragAreaFactor});
+    background: linear-gradient(
+      to right,
+      transparent ${50 - fromMiddle}%,
+      black ${50 - fromMiddle}%,
+      black ${50 + fromMiddle}%,
+      transparent ${50 + fromMiddle}%
+    );
+  }
+  
+  .remotion-splitter-vertical.remotion-splitter-active, .remotion-splitter-vertical.remotion-splitter-hover {
+    background: linear-gradient(
+      to right,
+      transparent ${50 - fromMiddleHovered}%,
+      var(--remotion-cli-internals-blue) ${50 - fromMiddleHovered}%,
+      var(--remotion-cli-internals-blue) ${50 + fromMiddleHovered}%,
+      transparent ${50 + fromMiddleHovered}%
+    );
+    transform: scaleX(${hoveredDragAreaFactor});
+    cursor: col-resize;
+    z-index: 1000;
+  }
+  
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  
+  input:focus,
+  textarea:focus,
+  button:focus,
+  a:focus {
+    outline: none;
+    box-shadow:
+      inset 1px 1px #555,
+      inset -1px -1px #555,
+      inset 1px -1px #555,
+      inset -1px 1px #555;
+  }
+  
+  input[type='color'].__remotion_color_picker::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+  input[type='color'].__remotion_color_picker::-webkit-color-swatch {
+    border: none;
+  }
+  
+  .__remotion_thumb,
+  .__remotion_thumb::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+  
+  .__remotion_thumb {
+    pointer-events: none;
+    position: absolute;
+    height: 0;
+    outline: none;
+    top: 15.5px;
+    width: 221px;
+    margin-left: -2px;
+    z-index: 2;
+  }
+  
+  /* For Firefox browsers */
+  .__remotion_thumb::-moz-range-thumb {
+    border: 1px solid black;
+    border-radius: 2px;
+    cursor: pointer;
+    height: 37px;
+    width: 10px;
+    pointer-events: all;
+    border-color: black;
+    background-color: white;
+    position: relative;
+  }
+  
+  /* For Chrome browsers */
+  .__remotion_thumb::-webkit-slider-thumb {
+    border: 1px solid black;
+    border-radius: 2px;
+    cursor: pointer;
+    height: 39px;
+    width: 10px;
+    pointer-events: all;
+    border-color: black;
+    background-color: white;
+    position: relative;
+  }  
+
+  .${scroll_to_default_props_path_1.DEFAULT_PROPS_PATH_ACTIVE_CLASSNAME} span {
+    color: var(--remotion-cli-internals-blue) !important;
+    transition: color 0.2s ease-in-out;
+  }
+  `.trim();
+};
+let injected = false;
+const injectCSS = () => {
+    if (injected) {
+        return;
+    }
+    remotion_1.Internals.CSSUtils.injectCSS(makeDefaultGlobalCSS());
+    injected = true;
+};
+exports.injectCSS = injectCSS;