| @@ -105,8 +105,9 @@ | ||
| 105 | 105 | transition: opacity 0.4s; |
| 106 | 106 | -webkit-user-select: none; |
| 107 | 107 | -moz-user-select: none; |
| 108 | 108 | } |
| 109 | + | |
| 109 | 110 | .twentytwenty-container * { |
| 110 | 111 | box-sizing: content-box; |
| 111 | 112 | } |
| 112 | 113 | |
| @@ -151,8 +152,9 @@ | ||
| 151 | 152 | top: 10px; |
| 152 | 153 | z-index: 30; |
| 153 | 154 | overflow: hidden; |
| 154 | 155 | } |
| 156 | + | |
| 155 | 157 | .twentytwenty-duo-buttons button { |
| 156 | 158 | float: left; |
| 157 | 159 | padding: 2px 6px; |
| 158 | 160 | font-size: 11px; |
| @@ -164,26 +166,32 @@ | ||
| 164 | 166 | color: #FFF; |
| 165 | 167 | transition: all .3s; |
| 166 | 168 | cursor: pointer; |
| 167 | 169 | } |
| 170 | + | |
| 168 | 171 | .twentytwenty-duo-buttons button:hover, |
| 169 | 172 | .twentytwenty-duo-buttons button:focus { |
| 170 | 173 | background: #444; |
| 171 | 174 | } |
| 175 | + | |
| 172 | 176 | .twentytwenty-duo-buttons button:first-child { |
| 173 | 177 | border-radius: 3px 0 0 3px; |
| 174 | 178 | } |
| 179 | + | |
| 175 | 180 | .twentytwenty-duo-buttons button:last-child { |
| 176 | 181 | border-radius: 0 3px 3px 0; |
| 177 | 182 | } |
| 183 | + | |
| 178 | 184 | .twentytwenty-duo-buttons button.selected { |
| 179 | 185 | background: #8bc34a; |
| 180 | 186 | text-shadow: 0 0 1px rgba(0,0,0,.2); |
| 181 | 187 | cursor: default; |
| 182 | 188 | } |
| 189 | + | |
| 183 | 190 | .twentytwenty-duo-left { |
| 184 | 191 | left: 10px; |
| 185 | 192 | } |
| 193 | + | |
| 186 | 194 | .twentytwenty-duo-right { |
| 187 | 195 | right: 10px; |
| 188 | 196 | } |
| 189 | 197 | |
| @@ -196,5 +204,112 @@ | ||
| 196 | 204 | .twentytwenty-right-arrow { |
| 197 | 205 | right: 50%; |
| 198 | 206 | margin-right: -22px; |
| 199 | 207 | border-left: 8px solid white; |
| 200 | -} | |
| 208 | +} | |
| 209 | + | |
| 210 | +#imagify-visual-comparison .close-btn, | |
| 211 | +.imagify-visual-comparison .close-btn { | |
| 212 | + top: 50px; | |
| 213 | + right: 5px; | |
| 214 | + width: 33px; | |
| 215 | + height: 33px; | |
| 216 | + padding: 1px 0 0 2px; | |
| 217 | + border: 1px solid #F2F2F2; | |
| 218 | + color: #F2F2F2; | |
| 219 | + line-height: 19px; | |
| 220 | + text-align: center; | |
| 221 | + border-radius: 50%; | |
| 222 | +} | |
| 223 | + | |
| 224 | +.imagify-modal .imagify-comparison-title { | |
| 225 | + font-size: 28px; | |
| 226 | + margin-bottom: 1em; | |
| 227 | + color: #F2F2F2; | |
| 228 | + text-align: left; | |
| 229 | +} | |
| 230 | +.imagify-modal .imagify-comparison-title .twentytwenty-duo-buttons { | |
| 231 | + position: static; | |
| 232 | + margin: 0 10px 0 15px; | |
| 233 | +} | |
| 234 | +.imagify-comparison-title .twentytwenty-duo-buttons button { | |
| 235 | + float: none; | |
| 236 | + padding: 6px 12px; | |
| 237 | + font-size: 16px; | |
| 238 | + text-transform: none; | |
| 239 | + border: 1px solid #40B1D0; | |
| 240 | + color: #888899; | |
| 241 | + letter-spacing: 0; | |
| 242 | +} | |
| 243 | +.imagify-comparison-title .twentytwenty-duo-buttons button:focus { | |
| 244 | + outline: none; | |
| 245 | + box-shadow: none; | |
| 246 | +} | |
| 247 | +.imagify-comparison-title .twentytwenty-duo-buttons .selected { | |
| 248 | + border: 1px solid #40B1D0; | |
| 249 | + color: #FFF; | |
| 250 | + background: #40B1D0; | |
| 251 | +} | |
| 252 | + | |
| 253 | +.imagify-comparison-levels { | |
| 254 | + margin: 15px 0; | |
| 255 | + overflow: hidden; | |
| 256 | +} | |
| 257 | +.imagify-comparison-levels .imagify-c-level { | |
| 258 | + display: none; | |
| 259 | + min-width: 175px; | |
| 260 | + font-size: 11px; | |
| 261 | +} | |
| 262 | +.imagify-c-level.go-left { | |
| 263 | + float: left; | |
| 264 | +} | |
| 265 | +.imagify-c-level.go-right { | |
| 266 | + float: right; | |
| 267 | +} | |
| 268 | +.imagify-c-level.go-right, | |
| 269 | +.imagify-c-level.go-left { | |
| 270 | + display: table; | |
| 271 | +} | |
| 272 | +.imagify-c-level .imagify-c-level-row { | |
| 273 | + display: table-row; | |
| 274 | + margin: 0; | |
| 275 | + color: #FFF; | |
| 276 | +} | |
| 277 | +.imagify-c-level-row > span { | |
| 278 | + display: table-cell; | |
| 279 | + padding: 2px 0; | |
| 280 | +} | |
| 281 | +.imagify-c-level-row .value { | |
| 282 | + text-align: right; | |
| 283 | + padding-left: 5px; | |
| 284 | +} | |
| 285 | +.imagify-c-level-row .value.level { | |
| 286 | + color: #40b1d0; | |
| 287 | +} | |
| 288 | +.imagify-c-level-row .value.size { | |
| 289 | + color: #8bc34a; | |
| 290 | + font-weight: bold; | |
| 291 | +} | |
| 292 | + | |
| 293 | +/* TT Loader */ | |
| 294 | +.imagify-modal .loader { | |
| 295 | + position: absolute; | |
| 296 | + top: 50%; | |
| 297 | + left: 50%; | |
| 298 | + margin: -32px 0 0 -32px; | |
| 299 | + opacity: 0; | |
| 300 | + visibility: hidden; | |
| 301 | + transition: opacity .4s; | |
| 302 | +} | |
| 303 | +.imagify-modal .loading .loader { | |
| 304 | + visibility: visible; | |
| 305 | + opacity: 1; | |
| 306 | +} | |
| 307 | + | |
| 308 | +/* Specifics for too high modals */ | |
| 309 | +.modal-is-too-high .imagify-comparison-levels { | |
| 310 | + position: absolute; | |
| 311 | + padding: 15px 20px; | |
| 312 | + background: rgba(31, 35, 50, 0.95); | |
| 313 | + bottom: 0; left: 0; right: 0; | |
| 314 | + margin-bottom: 0; | |
| 315 | +} | |
