@vitrosoftware/common-ui-ts 1.1.11 → 1.1.13

package/css/white/controls/pdf-viewer/compare-side-by-side.css

@@ -0,0 +1,260 @@
+.pixelcompare-wrapper.pixelcompare-horizontal {
+  height: 100% !important;
+}
+.pixelcompare-horizontal .pixelcompare-handle:before, .pixelcompare-horizontal .pixelcompare-handle:after, .pixelcompare-vertical .pixelcompare-handle:before, .pixelcompare-vertical .pixelcompare-handle:after {
+  content: "";
+  display: block;
+  background: #fff;
+  position: absolute;
+  z-index: 30; 
+}
+img.pixelcompare-before, img.pixelcompare-after {
+  height: 100%;
+  object-fit: cover;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+}
+
+.pixelcompare-before-label, .pixelcompare-after-label, .pixelcompare-overlay {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%; 
+}
+
+.pixelcompare-before-label, .pixelcompare-after-label, .pixelcompare-overlay {
+  transition-duration: 0.5s; 
+}
+
+.pixelcompare-before-label, .pixelcompare-after-label {
+  transition-property: opacity; 
+}
+
+.pixelcompare-horizontal .pixelcompare-before-label:before, .pixelcompare-horizontal .pixelcompare-after-label:before {
+  top: 50%;
+  margin-top: -19px; 
+}
+
+.pixelcompare-vertical .pixelcompare-before-label:before, .pixelcompare-vertical .pixelcompare-after-label:before {
+  left: 50%;
+  margin-left: -45px;
+  text-align: center;
+  width: 90px; 
+}
+
+.pixelcompare-left-arrow, .pixelcompare-right-arrow, .pixelcompare-up-arrow, .pixelcompare-down-arrow {
+  width: 0;
+  height: 0;
+  border: 6px inset transparent;
+  position: absolute; 
+}
+
+.pixelcompare-left-arrow, .pixelcompare-right-arrow {
+  top: 50%;
+  margin-top: -6px;
+}
+
+.pixelcompare-up-arrow, .pixelcompare-down-arrow {
+  left: 50%;
+  margin-left: -6px; 
+}
+
+.pixelcompare-container {
+  box-sizing: content-box;
+  z-index: 0;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+}
+.pixelcompare-container img {
+  max-width: 100%;
+  position: absolute;
+  top: 0;
+  display: block; 
+}
+/* .pixelcompare-container.active .pixelcompare-overlay,
+.pixelcompare-container.active :hover.pixelcompare-overlay {
+  background: transparent; 
+} */
+.pixelcompare-container.active .pixelcompare-overlay .pixelcompare-before-label,
+.pixelcompare-container.active .pixelcompare-overlay .pixelcompare-after-label,
+.pixelcompare-container.active :hover.pixelcompare-overlay .pixelcompare-before-label,
+.pixelcompare-container.active :hover.pixelcompare-overlay .pixelcompare-after-label {
+  opacity: 0; 
+}
+.pixelcompare-container * {
+  box-sizing: content-box; 
+}
+
+.pixelcompare-before-label {
+  opacity: 0; 
+}
+.pixelcompare-before-label:before {
+  content: attr(data-content); 
+}
+
+.pixelcompare-after-label {
+  opacity: 0; 
+}
+.pixelcompare-after-label:before {
+  content: attr(data-content); 
+}
+
+.pixelcompare-horizontal .pixelcompare-before-label:before {
+  left: 10px; 
+}
+
+.pixelcompare-horizontal .pixelcompare-after-label:before {
+  right: 10px; 
+}
+
+.pixelcompare-vertical .pixelcompare-before-label:before {
+  top: 10px; 
+}
+
+.pixelcompare-vertical .pixelcompare-after-label:before {
+  bottom: 10px; 
+}
+
+.pixelcompare-overlay {
+  transition-property: background;
+  background: transparent;
+  z-index: 25; 
+}
+.pixelcompare-overlay:hover, 
+.pixelcompare-container.active .pixelcompare-overlay, 
+.pixelcompare-handle:hover + .pixelcompare-overlay {
+  background: rgba(0, 0, 0, 0.5); 
+}
+.pixelcompare-overlay:hover .pixelcompare-after-label {
+  opacity: 1; 
+}
+.pixelcompare-overlay:hover .pixelcompare-before-label {
+  opacity: 1; 
+}
+
+.pixelcompare-before {
+  z-index: 20; 
+}
+
+.pixelcompare-after {
+  z-index: 10; 
+}
+
+.pixelcompare-vertical .pixelcompare-handle {
+  background-color: rgba(247, 237, 237, 0.71);
+  height: 20px;
+  width: 65px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -19px;
+  margin-top: -10px;
+  border-radius: 1000px;
+  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
+  z-index: 40;
+  cursor: pointer;
+}
+
+.pixelcompare-horizontal .pixelcompare-handle {
+  /*background-color: rgba(247, 237, 237, 0.71);*/
+  /*height: 65px;*/
+  height: 100%;
+  width: 20px;
+  position: absolute;
+  left: calc(50% - 10px);
+  top: 0;
+  bottom: 0;
+  /*margin-top: -19px;*/
+  /*margin-left: -10px;*/
+  border-radius: 0;
+  /*box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);*/
+  box-shadow: none;
+  z-index: 40;
+  /*cursor: pointer;*/
+  cursor: col-resize;
+}
+
+.pixelcompare-horizontal .pixelcompare-handle:before {
+  bottom: 0;
+  top: 0;
+  left: -1px;
+  /*bottom: 50%;*/
+  /*height: 799px;*/
+  height: 100%;
+  /*margin-bottom: 33px;*/
+  /*margin-left: 10px;*/
+  background: none;
+  position: absolute;
+  z-index: 999;
+  /*border-right: 1px dashed rgba(255, 255, 255, 0.5);*/
+  border-right: 2px solid #74A9E5;
+}
+
+/*.pixelcompare-horizontal .pixelcompare-handle:after {*/
+/*  top: 50%;*/
+/*  height: 257px;*/
+/*  margin-top: 33px;*/
+/*  margin-left: 10px;*/
+/*  background: none;*/
+/*  position: absolute;*/
+/*  z-index: 999;*/
+/*  !*border-right: 1px dashed rgba(255, 255, 255, 0.5);*!*/
+/*  border-right: 2px solid #74A9E5;*/
+/*}*/
+
+
+.pixelcompare-vertical .pixelcompare-handle:before {
+  margin-top: 10px;
+  margin-left: 11px;
+  width: 100vw;
+  background: none;
+  position: absolute;
+  z-index: 999;
+  border-top: 2px dashed rgba(255, 255, 255, 0.5);
+  right: 50%;
+  margin-right: 33px;
+}
+
+.pixelcompare-vertical .pixelcompare-handle:after {
+  margin-top: 10px;
+  width: 100vw;
+  background: none;
+  position: absolute;
+  z-index: 999;
+  border-top: 1px dashed rgba(255, 255, 255, 0.5);
+  left: 50%;
+  margin-left: 33px;
+}
+
+.pixelcompare-left-arrow {
+  border-right: 6px solid rgba(247, 237, 237, 0.71);
+  left: calc(50% - 26px);
+  /*margin-left: -13px;*/
+}
+
+.pixelcompare-right-arrow {
+  border-left: 6px solid rgba(247, 237, 237, 0.71);
+  right: calc(50% - 6px);
+  /*margin-right: -13px; */
+}
+
+.pixelcompare-up-arrow { 
+  border-bottom: 6px solid rgba(247, 237, 237, 0.71);
+  top: 50%;
+  margin-top: -13px;
+}
+
+.pixelcompare-down-arrow {
+  border-top: 6px solid rgba(247, 237, 237, 0.71);
+  bottom: 50%;
+  margin-bottom: -13px;
+}