@vitrosoftware/common-ui-ts 1.0.10 → 1.1.12

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

@@ -0,0 +1,504 @@
+/* Compare Dialog */
+.compare-dlg-body,
+.compare-dlg-header,
+.compare-dlg-footer {
+    font-family: Arial;
+}
+
+.compare-dlg-wrap {
+    position: absolute;
+    z-index: 10100;
+
+    width: 686px;
+    max-width: 100%;
+    border: 1px solid #dddddd;
+    background: #fff;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.compare-dlg-body {
+    display: flex;
+    padding: 30px 0 30px 0;
+}
+
+.compare-dlg_doc-sep {
+    width: 68px;
+    background: url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/img/dlg-compare-ico.png') no-repeat center center;
+}
+
+.compare-dlg_doc-a-wrap .wrap-inner,
+.compare-dlg_doc-b-wrap .wrap-inner {
+    width: 230px;
+    max-width: 100%;
+
+}
+
+.compare-dlg_doc-a-wrap .wrap-inner {
+    margin-left: auto;
+}
+
+.compare-dlg_doc-b-wrap .wrap-inner {
+    margin-right: auto;
+}
+
+.compare-dlg_doc-a-wrap,
+.compare-dlg_doc-b-wrap {
+    width: calc(50% - 34px);
+}
+
+.compare-dlg-header {
+    padding: 30px;
+    position: relative;
+    background: #F7F9FA;
+    font-weight: 400;
+    font-size: 22px;
+    border-bottom: 1px solid #DAE1E6;
+}
+
+.compare-dlg-footer {
+    border-top: 1px solid #DAE1E6;
+    text-align: right;
+    padding: 15px 30px 15px 30px;
+}
+
+.dlg-overlay {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    z-index: 10000;
+    background-color: rgb(0, 0, 0);
+    opacity: 0.6;
+    display: none;
+    top: 0;
+    left: 0;
+}
+
+.wrap-inner-bg {
+    background: #F7F9FA;
+    border: 1px solid #EDF0F2;
+    padding: 15px;
+}
+
+.wrap-inner-subtitle {
+    font-size: 16px;
+    padding-bottom: 16px;
+}
+
+.compare-dlg_doc-b_name,
+.compare-dlg_doc-a_name {
+    font-size: 14px;
+}
+
+
+
+/* Compare Viewer */
+.compare-viewer-wrap * {
+    box-sizing: border-box;
+}
+
+.compare-viewer-title {
+    font-family: Arial;
+}
+
+.compare-viewer-wrap {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left:0;
+    background: #ffffff;
+    z-index: 1000000;
+}
+
+.compare-viewer-title {
+    height: 40px;
+    background: #222222;
+    position: relative;
+    font-size: 16px;
+    font-weight: 600;
+    padding: 11px 30px 0 30px;
+    color: #ffffff;
+}
+
+.compare-viewer-body {
+    height: calc(100% - 40px);
+    /*overflow: auto;*/
+    position: relative;
+
+    overflow: hidden;
+
+    /*background: #ACACAC;*/
+}
+
+/*#compareCanvas-docA {*/
+/*    background: #ffffff;*/
+/*}*/
+
+#compareCanvasResult,
+#compareCanvas-docA,
+#compareCanvas-docB {
+    position: absolute;
+    left: 0;
+    top:0;
+}
+
+#compareCanvas-docA {
+    z-index: 1;
+}
+
+#compareCanvas-docB {
+    z-index: 2;
+    mix-blend-mode: multiply;
+}
+
+#compareCanvasResult {
+    z-index: 25;
+}
+
+/* Compare Panel */
+.compare-panel {
+    position: absolute !important;
+    z-index: 10200;
+    width: 340px;
+    max-width: 100%;
+    border: 1px solid #dddddd;
+    /*background: #fff;*/
+    top: 30%;
+    left: 10%;
+    /*transform: translate(0, -50%);*/
+    font-family: Arial;
+    box-shadow: 0 0 12px 0 rgb(0 0 0 / 30%);
+    border-radius: 5px;
+}
+
+.compare-panel_header {
+    position: relative;
+    background: #EDF0F2;
+    padding: 10px;
+    font-size: 18px;
+    border-bottom: 1px solid #BEC0C2;
+    cursor: move;
+}
+
+.compare-panel_header .close {
+    right: 4px;
+}
+
+.compare-panel_toolbar {
+    background-color: rgba(0,0,0,.05);
+    padding: 10px;
+    text-align: center;
+    display: flex;
+}
+
+.compare-toolbar-btn {
+    width: 40px;
+    height: 40px;
+    margin: 4px;
+    cursor: pointer;
+    border: 1px solid rgba(204,204,204, 0.5);
+}
+
+.compare-toolbar-btn:not(.active) {
+    border: 1px solid #CCCCCC;
+    border-radius: 2px;
+}
+
+#hideColors {
+    background: url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/img/hide-colors.png');
+}
+#hideColors.active {
+    background: url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/img/hide-colors_active.png');
+}
+
+#alignFinish {
+    background: url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/img/finish-align.png');
+}
+#alignFinish.active {
+    background: url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/img/finish-align_active.png');
+}
+
+.compare-panel_body {
+    background-color: hsla(0,0%,100%,0.94);
+}
+
+.compare-panel_items {
+    padding: 10px;
+}
+
+.compare-panel_item-row {
+    padding-left: 5px;
+    position: relative;
+    margin-top: 10px;
+    border: 1px solid transparent;
+}
+
+.compare-panel_item-row:first-child {
+    margin-top: 0;
+}
+
+.compare-panel_item-row.selected {
+    border: 1px solid #CCCCCC;
+    border-radius: 3px;
+}
+
+.compare-panel_doc-color {
+    border-left: 5px solid red;
+    border-radius: 3px 0 0 3px;
+    padding: 5px;
+}
+
+.compare-panel_doc-color.docA {
+    border-left: 5px solid red;
+}
+
+.compare-panel_doc-color.docB {
+    border-left: 5px solid #0696D7;
+}
+
+.compare-panel_items.hide-colors .compare-panel_doc-color.docA,
+.compare-panel_items.hide-colors .compare-panel_doc-color.docB {
+    border-left: 5px solid transparent;
+}
+
+.compare-panel_doc-color .title {
+    font-weight: 600;
+    padding-bottom: 16px;
+    font-size: 16px;
+}
+
+.compare-panel_doc-color .version,
+.compare-panel_doc-color .upload-by,
+.compare-panel_doc-color .upload-date {
+    font-size: 13px;
+    line-height: 18px;
+}
+
+.compare-layer-visibility {
+    width: 32px;
+    height: 32px;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translate(0, -50%);
+    background: url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/img/layer-unvisible.png') no-repeat center center;
+}
+
+.compare-layer-visibility.active {
+    background: url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/img/layer-visible.png') no-repeat center center;
+}
+
+#compareCanvasResult.compare-layer-hide {
+    display: none;
+}
+
+/* Toolbar */
+.compare-viewer-toolbar {
+    position: absolute;
+    bottom: 20px;
+    text-align: center;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    z-index: 30;
+}
+
+.compare-viewer-toolbar .control-grp {
+    background-color: #edf0f2;
+    box-shadow: 0 0 12px 0 rgb(0 0 0 / 30%);
+    color: #0a131c;
+    border-radius: 5px;
+    /*display: inline-block;*/
+    margin: 0 5px;
+    /*pointer-events: all;*/
+    white-space: nowrap;
+    display: flex;
+}
+
+.compare-viewer-toolbar .compare-toolbar-btn,
+.compare-viewer-toolbar .compare-toolbar-btn:not(.active),
+.compare-viewer-toolbar .compare-toolbar-btn.active {
+    border-color: transparent;
+}
+
+#btnComparePan {
+    background: url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/img/pan.png') no-repeat center center;
+}
+#btnComparePan:hover,
+#btnComparePan.active {
+    background: url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/img/pan_active.png') no-repeat center center;
+}
+
+#btnCompareZoom {
+    background: url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/img/zoom.png') no-repeat center center;
+}
+#btnCompareZoom:hover,
+#btnCompareZoom.active {
+    background: url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/img/zoom_active.png') no-repeat center center;
+}
+
+#btnFitToView {
+    background: url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/img/fit-to-view.png') no-repeat center center;
+}
+#btnFitToView:hover,
+#btnFitToView.active {
+    background: url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/img/fit-to-view_active.png') no-repeat center center;
+}
+
+#btnCompareType.type-overlay {
+    background: url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/img/compare-overlay.png') no-repeat center center;
+}
+#btnCompareType.type-side-by-side {
+    background: url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/img/compare-side-by-side.png') no-repeat center center;
+}
+
+#btnComparePanel {
+    background: url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/img/panel-visibility.png') no-repeat center center;
+}
+#btnComparePanel:hover,
+#btnComparePanel.active {
+    background: url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/img/panel-visibility_active.png') no-repeat center center;
+}
+
+#btnCompareViewerExit {
+    background: url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/img/close-compare-viewer.png') no-repeat center center;
+}
+#btnCompareViewerExit:hover,
+#btnCompareViewerExit.active {
+    background: url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/img/close-compare-viewer_active.png') no-repeat center center;
+}
+
+/* Compare label */
+.compare-ui-label {
+    position: absolute;
+    display: block;
+    border-radius: 5px;
+    background-color: rgba(78,78,78,.95);
+    top: 40px;
+    font-size: 14px;
+    color: #fff;
+    text-align: center;
+    margin: 10px;
+    padding: 10px;
+    white-space: pre;
+    pointer-events: none;
+    z-index: 30;
+    font-family: Arial;
+}
+
+.compare-canvas-wrap {
+    cursor: grab;
+}
+
+.compare-canvas-wrap.zoom {
+    cursor: zoom-in;
+}
+
+.compare-layer-visibility {
+    cursor: pointer;
+}
+
+.align-layers .compare-canvas-wrap {
+    cursor: move;
+}
+
+.disable-colors {
+    filter: grayscale(1);
+}
+
+#panelCompareType {
+    position: absolute;
+    background-color: #edf0f2;
+    box-shadow: 0 5px 12px 0 rgb(0 0 0 / 30%);
+    color: #0a131c;
+    border-radius: 5px;
+    margin: 0;
+    top: -98px;
+}
+
+#btnCompareTypeSideBySide {
+    background: url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/img/side-by-side.png') no-repeat center center;
+}
+
+#btnCompareTypeOverlay {
+    background: url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/img/overlay.png') no-repeat center center;
+}
+
+#btnCompareTypeSideBySide.active {
+    background: url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/img/side-by-side_active.png') no-repeat center center;
+}
+
+#btnCompareTypeOverlay.active {
+    background: url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/img/overlay_active.png') no-repeat center center;
+}
+
+/* Side by Side */
+.pixelcompare-wrapper.pixelcompare-horizontal,
+.pixelcompare-wrapper {
+    position: absolute;
+    top: 40px;
+    left: 0;
+    right: 0;
+    height: calc(100% - 40px) !important;
+}
+.side-by-side-slider {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.pixelcompare-wrapper {
+    pointer-events: none;
+}
+
+.pixelcompare-horizontal .pixelcompare-handle,
+.pixelcompare-wrapper.active,
+.pixelcompare-handle {
+    pointer-events: all !important;
+}
+
+.pixelcompare-horizontal .pixelcompare-handle,
+.pixelcompare-handle {
+    cursor: col-resize;
+}
+
+.pixelcompare-wrapper {
+    z-index: 0 !important;
+    opacity: 0;
+}
+
+.compare-viewer-body {
+    z-index: 1;
+}
+
+.compare-viewer-wrap.side-by-side .pixelcompare-wrapper {
+    z-index: 2 !important;
+    opacity: 1;
+}
+
+.compare-viewer-wrap.side-by-side .compare-canvas-wrap canvas {
+    filter: grayscale(1);
+}
+
+.compare-viewer-wrap.side-by-side .compare-ui-label:not(.compare-ui-label_side-by-side),
+.compare-ui-label_side-by-side {
+    display: none;
+}
+
+.compare-viewer-wrap.side-by-side .compare-ui-label_side-by-side {
+    display: block;
+}
+
+.compare-viewer-wrap.side-by-side .compare-ui-label_side-by-side.right {
+    right: 0;
+}
+
+
+.compare-viewer-body.layer-shift #compareCanvasResult {
+/*.compare-viewer-body.align-layers #compareCanvasResult {*/
+    opacity: 0;
+}