Rollup build

src/client/lazy-app/Compress/Output/custom-els/TwoUp/styles.css

@@ -0,0 +1,131 @@
+two-up {
+  display: grid;
+  position: relative;
+  --split-point: 0;
+  --accent-color: #777;
+  --track-color: var(--accent-color);
+  --thumb-background: #fff;
+  --thumb-color: var(--accent-color);
+  --thumb-size: 62px;
+  --bar-size: 6px;
+  --bar-touch-size: 30px;
+}
+
+two-up > * {
+  /* Overlay all children on top of each other, and let two-up's layout contain all of them. */
+  grid-area: 1/1;
+}
+
+two-up[legacy-clip-compat] > :not(.two-up-handle) {
+  /* Legacy mode uses clip rather than clip-path (Edge doesn't support clip-path), but clip requires
+  elements to be positioned absolutely */
+  position: absolute;
+}
+
+.two-up-handle {
+  touch-action: none;
+  position: relative;
+  width: var(--bar-touch-size);
+  transform: translateX(var(--split-point)) translateX(-50%);
+  will-change: transform;
+  cursor: ew-resize;
+}
+
+.two-up-handle::before {
+  content: '';
+  display: block;
+  height: 100%;
+  width: var(--bar-size);
+  margin: 0 auto;
+  box-shadow: inset calc(var(--bar-size) / 2) 0 0 rgba(0, 0, 0, 0.1),
+    0 1px 4px rgba(0, 0, 0, 0.4);
+  background: var(--track-color);
+}
+
+.scrubber {
+  display: flex;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 50% 50%;
+  transform: translate(-50%, -50%);
+  width: var(--thumb-size);
+  height: calc(var(--thumb-size) * 0.9);
+  background: var(--thumb-background);
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: var(--thumb-size);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  color: var(--thumb-color);
+  box-sizing: border-box;
+  padding: 0 calc(var(--thumb-size) * 0.24);
+}
+
+.scrubber svg {
+  flex: 1;
+}
+
+two-up[orientation='vertical'] .two-up-handle {
+  width: auto;
+  height: var(--bar-touch-size);
+  transform: translateY(var(--split-point)) translateY(-50%);
+  cursor: ns-resize;
+}
+
+two-up[orientation='vertical'] .two-up-handle::before {
+  width: auto;
+  height: var(--bar-size);
+  box-shadow: inset 0 calc(var(--bar-size) / 2) 0 rgba(0, 0, 0, 0.1),
+    0 1px 4px rgba(0, 0, 0, 0.4);
+  margin: calc((var(--bar-touch-size) - var(--bar-size)) / 2) 0 0 0;
+}
+
+two-up[orientation='vertical'] .scrubber {
+  box-shadow: 1px 0 4px rgba(0, 0, 0, 0.1);
+  transform: translate(-50%, -50%) rotate(-90deg);
+}
+
+two-up > :nth-child(1):not(.two-up-handle) {
+  -webkit-clip-path: inset(0 calc(100% - var(--split-point)) 0 0);
+  clip-path: inset(0 calc(100% - var(--split-point)) 0 0);
+}
+
+two-up > :nth-child(2):not(.two-up-handle) {
+  -webkit-clip-path: inset(0 0 0 var(--split-point));
+  clip-path: inset(0 0 0 var(--split-point));
+}
+
+two-up[orientation='vertical'] > :nth-child(1):not(.two-up-handle) {
+  -webkit-clip-path: inset(0 0 calc(100% - var(--split-point)) 0);
+  clip-path: inset(0 0 calc(100% - var(--split-point)) 0);
+}
+
+two-up[orientation='vertical'] > :nth-child(2):not(.two-up-handle) {
+  -webkit-clip-path: inset(var(--split-point) 0 0 0);
+  clip-path: inset(var(--split-point) 0 0 0);
+}
+
+/*
+  Even in legacy-clip-compat, prefer clip-path if it's supported.
+  It performs way better in Safari.
+ */
+@supports not (
+  (clip-path: inset(0 0 0 0)) or (-webkit-clip-path: inset(0 0 0 0))
+) {
+  two-up[legacy-clip-compat] > :nth-child(1):not(.two-up-handle) {
+    clip: rect(auto var(--split-point) auto auto);
+  }
+
+  two-up[legacy-clip-compat] > :nth-child(2):not(.two-up-handle) {
+    clip: rect(auto auto auto var(--split-point));
+  }
+
+  two-up[orientation='vertical'][legacy-clip-compat]
+    > :nth-child(1):not(.two-up-handle) {
+    clip: rect(auto auto var(--split-point) auto);
+  }
+
+  two-up[orientation='vertical'][legacy-clip-compat]
+    > :nth-child(2):not(.two-up-handle) {
+    clip: rect(var(--split-point) auto auto auto);
+  }
+}