| @@ -1,164 +1 @@ | ||
| 1 | - | |
| 2 | -.ablocks-block--image-comparison { | |
| 3 | - position: relative; | |
| 4 | - margin: 0 auto; | |
| 5 | -} | |
| 6 | - | |
| 7 | -.ablocks-block--image-comparison .ablocks-icon.ablocks-icon--left-image, | |
| 8 | -.ablocks-block--image-comparison .ablocks-icon.ablocks-icon--right-image { | |
| 9 | - font-size: 20px; | |
| 10 | -} | |
| 11 | - | |
| 12 | -.ablocks-block--image-comparison img { | |
| 13 | - width: 100%; | |
| 14 | - height: 100%; | |
| 15 | - object-fit: cover; | |
| 16 | - object-position: left; | |
| 17 | -} | |
| 18 | - | |
| 19 | -.ablocks-image-comparison__after-image { | |
| 20 | - object-position: top; | |
| 21 | -} | |
| 22 | - | |
| 23 | -.ablocks-block--image-comparison .ablocks-image-comparison__images-container { | |
| 24 | - position: relative; | |
| 25 | - display: flex; | |
| 26 | - width: 100%; | |
| 27 | - height: 100%; | |
| 28 | -} | |
| 29 | - | |
| 30 | -.ablocks-block--image-comparison .ablocks-image-comparison__before-image { | |
| 31 | - position: absolute; | |
| 32 | - top: 0; | |
| 33 | - width: 50%; | |
| 34 | -} | |
| 35 | - | |
| 36 | -.ablocks-block--image-comparison .ablocks-image-comparison__slider { | |
| 37 | - position: absolute; | |
| 38 | - inset: 0; | |
| 39 | - opacity: 0; | |
| 40 | - cursor: pointer; | |
| 41 | - z-index: 51; | |
| 42 | -} | |
| 43 | - | |
| 44 | -.ablocks-block--image-comparison .ablocks-image-comparison__slider-line { | |
| 45 | - position: absolute; | |
| 46 | - height: 100%; | |
| 47 | - width: 4px; | |
| 48 | - background: #fff; | |
| 49 | - left: 50%; | |
| 50 | - transform: translateX(-50%); | |
| 51 | - z-index: 50; | |
| 52 | -} | |
| 53 | - | |
| 54 | -.ablocks-block--image-comparison .ablocks-image-comparison__slider-icon { | |
| 55 | - position: absolute; | |
| 56 | - left: 50%; | |
| 57 | - top: 50%; | |
| 58 | - width: 30px; | |
| 59 | - height: 30px; | |
| 60 | - color: #fff; | |
| 61 | - transform: translate(-50%, -50%) rotateZ(90deg); | |
| 62 | - z-index: 50; | |
| 63 | - border: 1px solid #fff; | |
| 64 | - border-radius: 50%; | |
| 65 | -} | |
| 66 | - | |
| 67 | -.ablocks-image-comparison__beforeImage-label { | |
| 68 | - position: absolute; | |
| 69 | - padding: 5px 10px; | |
| 70 | - border-radius: 5px; | |
| 71 | - z-index: 52; | |
| 72 | -} | |
| 73 | - | |
| 74 | -.ablocks-image-comparison__afterImage-label { | |
| 75 | - position: absolute; | |
| 76 | - padding: 5px 10px; | |
| 77 | - border-radius: 5px; | |
| 78 | - z-index: 52; | |
| 79 | -} | |
| 80 | - | |
| 81 | -.ablocks-image-comparison__input--vertical { | |
| 82 | - writing-mode: vertical-lr; | |
| 83 | - z-index: 51; | |
| 84 | -} | |
| 85 | - | |
| 86 | -.ablocks-image-comparison__overlay { | |
| 87 | - display: block; | |
| 88 | - position: absolute; | |
| 89 | - width: 100%; | |
| 90 | - height: 100%; | |
| 91 | - top: 0; | |
| 92 | - left: 0; | |
| 93 | - pointer-events: none; | |
| 94 | - z-index: 41; | |
| 95 | -} | |
| 96 | -.ablocks-image-comparison__overlay--hover { | |
| 97 | - display: none; | |
| 98 | - position: absolute; | |
| 99 | - width: 100%; | |
| 100 | - height: 100%; | |
| 101 | - top: 0; | |
| 102 | - left: 0; | |
| 103 | - pointer-events: none; | |
| 104 | - z-index: 41; | |
| 105 | -} | |
| 106 | - | |
| 107 | -.ablocks-block--image-comparison:hover .ablocks-image-comparison__overlay--hover{ | |
| 108 | - display: block; | |
| 109 | -} | |
| 110 | - | |
| 111 | - | |
| 112 | - | |
| 113 | -.ablocks-image-comparison__labels .ablocks-image-comparison__beforeImage-label, | |
| 114 | -.ablocks-image-comparison__labels .ablocks-image-comparison__afterImage-label | |
| 115 | -{ | |
| 116 | - display: none; | |
| 117 | -} | |
| 118 | - | |
| 119 | -.ablocks-block--image-comparison:hover .ablocks-image-comparison__labels .ablocks-image-comparison__beforeImage-label , | |
| 120 | -.ablocks-block--image-comparison:hover .ablocks-image-comparison__labels .ablocks-image-comparison__afterImage-label { | |
| 121 | - display: block; | |
| 122 | -} | |
| 123 | - | |
| 124 | -.ablocks-block--image-comparison .ablocks-image-comparison__images-container-vertical { | |
| 125 | - display: block; | |
| 126 | -} | |
| 127 | - | |
| 128 | -.ablocks-image-comparison__images-container .ablocks-image-comparison__before-image { | |
| 129 | - height: 100%; | |
| 130 | - position: absolute; | |
| 131 | - left: 0; | |
| 132 | -} | |
| 133 | - | |
| 134 | -.ablocks-image-comparison__images-container-vertical .ablocks-image-comparison__before-image { | |
| 135 | - width: 100%; | |
| 136 | - position: absolute; | |
| 137 | - top: 0; | |
| 138 | - object-position: top; | |
| 139 | -} | |
| 140 | - | |
| 141 | -.ablocks-image-comparison__images-container .ablocks-image-comparison__slider-line{ | |
| 142 | - height: 100%; | |
| 143 | - transform: translateX(-50%); | |
| 144 | -} | |
| 145 | - | |
| 146 | -.ablocks-image-comparison__images-container-vertical .ablocks-image-comparison__slider-line { | |
| 147 | - left: 0; | |
| 148 | - width: 100%; | |
| 149 | - transform: translateY(-50%); | |
| 150 | -} | |
| 151 | - | |
| 152 | -.ablocks-image-comparison__images-container .ablocks-image-comparison__slider-icon { | |
| 153 | - top: 50%; | |
| 154 | - transform: translate(-50%, -50%) rotateZ(90deg); | |
| 155 | -} | |
| 156 | - | |
| 157 | -.ablocks-image-comparison__images-container-vertical .ablocks-image-comparison__slider-icon { | |
| 158 | - left: 50%; | |
| 159 | - transform: translate(-50%, -50%); | |
| 160 | -} | |
| 161 | - | |
| 162 | -.ablocks-image-comparison__images-container-vertical .ablocks-image-comparison__after-image { | |
| 163 | - margin-bottom: -10px; | |
| 164 | -} | |
| 1 | +.ablocks-block--image-comparison{margin:0 auto;position:relative}.ablocks-block--image-comparison .ablocks-icon.ablocks-icon--left-image,.ablocks-block--image-comparison .ablocks-icon.ablocks-icon--right-image{font-size:20px}.wp-block-ablocks-image-comparison .ablocks-block-render-container .components-notice{position:relative}.ablocks-block--image-comparison img{height:100%;object-fit:cover;object-position:left;width:100%}.ablocks-image-comparison__after-image{object-position:top}.ablocks-block--image-comparison .ablocks-image-comparison__images-container{display:flex;height:100%;position:relative;width:100%}.ablocks-block--image-comparison .ablocks-image-comparison__before-image{position:absolute;top:0;width:50%}.ablocks-block--image-comparison .ablocks-image-comparison__slider{cursor:pointer;inset:0;opacity:0;position:absolute;z-index:51}.ablocks-block--image-comparison .ablocks-image-comparison__slider-line{background:#fff;height:100%;left:50%;position:absolute;transform:translateX(-50%);width:4px;z-index:50}.ablocks-block--image-comparison .ablocks-image-comparison__slider-icon{border:1px solid #fff;border-radius:50%;color:#fff;height:30px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) rotate(90deg);width:30px;z-index:50}.ablocks-image-comparison__afterImage-label,.ablocks-image-comparison__beforeImage-label{border-radius:5px;padding:5px 10px;position:absolute;z-index:52}.ablocks-image-comparison__input--vertical{writing-mode:vertical-lr;z-index:51}.ablocks-image-comparison__overlay{display:block}.ablocks-image-comparison__overlay,.ablocks-image-comparison__overlay--hover{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:41}.ablocks-image-comparison__overlay--hover{display:none}.ablocks-block--image-comparison:hover .ablocks-image-comparison__overlay--hover{display:block}.ablocks-image-comparison__labels .ablocks-image-comparison__afterImage-label,.ablocks-image-comparison__labels .ablocks-image-comparison__beforeImage-label{display:none}.ablocks-block--image-comparison .ablocks-image-comparison__images-container-vertical,.ablocks-block--image-comparison:hover .ablocks-image-comparison__labels .ablocks-image-comparison__afterImage-label,.ablocks-block--image-comparison:hover .ablocks-image-comparison__labels .ablocks-image-comparison__beforeImage-label{display:block}.ablocks-image-comparison__images-container .ablocks-image-comparison__before-image{height:100%;left:0;position:absolute}.ablocks-image-comparison__images-container-vertical .ablocks-image-comparison__before-image{object-position:top;position:absolute;top:0;width:100%}.ablocks-image-comparison__images-container .ablocks-image-comparison__slider-line{height:100%;transform:translateX(-50%)}.ablocks-image-comparison__images-container-vertical .ablocks-image-comparison__slider-line{left:0;transform:translateY(-50%);width:100%}.ablocks-image-comparison__images-container .ablocks-image-comparison__slider-icon{top:50%;transform:translate(-50%,-50%) rotate(90deg)}.ablocks-image-comparison__images-container-vertical .ablocks-image-comparison__slider-icon{left:50%;transform:translate(-50%,-50%)}.ablocks-image-comparison__images-container-vertical .ablocks-image-comparison__after-image{margin-bottom:-10px} | |
