| @@ -4,19 +4,29 @@ | ||
| 4 | 4 | z-index: 9; |
| 5 | 5 | top: 0; |
| 6 | 6 | left: 8px !important; |
| 7 | 7 | } |
| 8 | + | |
| 8 | 9 | .htcompare-btn { |
| 9 | 10 | position: relative !important; |
| 10 | 11 | |
| 12 | + display: -webkit-inline-box !important; | |
| 13 | + | |
| 14 | + display: -ms-inline-flexbox !important; | |
| 15 | + | |
| 11 | 16 | display: inline-flex !important; |
| 17 | + -webkit-box-align: center; | |
| 18 | + -ms-flex-align: center; | |
| 12 | 19 | align-items: center; |
| 13 | 20 | } |
| 21 | + | |
| 14 | 22 | .htcompare-btn svg { |
| 15 | 23 | width: 15px; |
| 16 | 24 | height: 15px; |
| 17 | 25 | margin-right: 5px; |
| 18 | 26 | |
| 27 | + -webkit-transition: all 200ms ease-out; | |
| 28 | + | |
| 19 | 29 | transition: all 200ms ease-out; |
| 20 | 30 | |
| 21 | 31 | fill: currentColor; |
| 22 | 32 | } |
| @@ -23,39 +33,74 @@ | ||
| 23 | 33 | |
| 24 | 34 | .htcompare-btn svg .ever-compare-check, |
| 25 | 35 | .htcompare-btn.added svg .ever-compare-refresh { |
| 26 | 36 | opacity: 0; |
| 37 | + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | |
| 27 | 38 | } |
| 39 | + | |
| 28 | 40 | .htcompare-btn.added svg .ever-compare-check { |
| 29 | 41 | opacity: 1; |
| 42 | + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
| 30 | 43 | } |
| 31 | 44 | |
| 32 | -.htcompare-btn.loading svg .ever-compare-refresh { | |
| 45 | +.htcompare-btn.added.loading svg .ever-compare-check { | |
| 46 | + opacity: 0; | |
| 47 | + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | |
| 48 | +} | |
| 49 | + | |
| 50 | +.htcompare-btn.loading svg .ever-compare-refresh, | |
| 51 | +.htcompare-btn.added.loading svg .ever-compare-refresh { | |
| 52 | + opacity: 1; | |
| 53 | + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
| 54 | + -webkit-transform-origin: center; | |
| 33 | 55 | transform-origin: center; |
| 56 | + -webkit-animation: loading 500ms 0ms infinite normal linear; | |
| 34 | 57 | animation: loading 500ms 0ms infinite normal linear; |
| 35 | 58 | } |
| 59 | + | |
| 60 | +@-webkit-keyframes loading { | |
| 61 | + from { | |
| 62 | + -webkit-transform: rotate(0deg); | |
| 63 | + transform: rotate(0deg); | |
| 64 | + } | |
| 65 | + | |
| 66 | + to { | |
| 67 | + -webkit-transform: rotate(360deg); | |
| 68 | + transform: rotate(360deg); | |
| 69 | + } | |
| 70 | +} | |
| 71 | + | |
| 36 | 72 | @keyframes loading { |
| 37 | 73 | from { |
| 74 | + -webkit-transform: rotate(0deg); | |
| 38 | 75 | transform: rotate(0deg); |
| 39 | 76 | } |
| 77 | + | |
| 40 | 78 | to { |
| 79 | + -webkit-transform: rotate(360deg); | |
| 41 | 80 | transform: rotate(360deg); |
| 42 | 81 | } |
| 43 | 82 | } |
| 44 | 83 | |
| 45 | -.htcompare-btn.loading::after, | |
| 46 | -a.htcompare-btn.added::after, | |
| 84 | +.htcompare-btn.loading:after, | |
| 85 | +a.htcompare-btn.added:after, | |
| 47 | 86 | .ever-compare-loader { |
| 48 | 87 | display: none; |
| 49 | 88 | } |
| 89 | + | |
| 50 | 90 | .htcompare-btn.loading .ever-compare-loader { |
| 51 | 91 | display: block; |
| 52 | 92 | } |
| 53 | 93 | |
| 54 | 94 | .htcompare-btn-text { |
| 95 | + display: -webkit-box; | |
| 96 | + display: -ms-flexbox; | |
| 55 | 97 | display: flex; |
| 98 | + -webkit-box-align: center; | |
| 99 | + -ms-flex-align: center; | |
| 56 | 100 | align-items: center; |
| 57 | 101 | } |
| 102 | + | |
| 58 | 103 | .ever-compare-btn-image { |
| 59 | 104 | display: inline-block; |
| 60 | 105 | |
| 61 | 106 | width: 25px; |
| @@ -60,8 +105,9 @@ | ||
| 60 | 105 | |
| 61 | 106 | width: 25px; |
| 62 | 107 | margin-right: 5px; |
| 63 | 108 | } |
| 109 | + | |
| 64 | 110 | .ever-compare-btn-image img { |
| 65 | 111 | width: 100% !important; |
| 66 | 112 | margin: 0 !important; |
| 67 | 113 | } |
| @@ -71,8 +117,10 @@ | ||
| 71 | 117 | /*padding-right: 2.618em;*/ |
| 72 | 118 | position: relative; |
| 73 | 119 | |
| 74 | 120 | opacity: 0.75; |
| 121 | + | |
| 122 | + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; | |
| 75 | 123 | color: #333333; |
| 76 | 124 | } |
| 77 | 125 | |
| 78 | 126 | /* Common table Style */ |
| @@ -82,12 +130,13 @@ | ||
| 82 | 130 | display: flex; |
| 83 | 131 | -webkit-box-orient: horizontal; |
| 84 | 132 | -webkit-box-direction: normal; |
| 85 | 133 | -ms-flex-direction: row; |
| 86 | - flex-direction: row; | |
| 134 | + flex-direction: row; | |
| 87 | 135 | -ms-flex-wrap: nowrap; |
| 88 | - flex-wrap: nowrap; | |
| 136 | + flex-wrap: nowrap; | |
| 89 | 137 | } |
| 138 | + | |
| 90 | 139 | .htcompare-col { |
| 91 | 140 | display: -webkit-box; |
| 92 | 141 | display: -ms-flexbox; |
| 93 | 142 | display: flex; |
| @@ -93,9 +142,9 @@ | ||
| 93 | 142 | display: flex; |
| 94 | 143 | -webkit-box-orient: vertical; |
| 95 | 144 | -webkit-box-direction: normal; |
| 96 | 145 | -ms-flex-direction: column; |
| 97 | - flex-direction: column; | |
| 146 | + flex-direction: column; | |
| 98 | 147 | -webkit-box-pack: center; |
| 99 | 148 | -ms-flex-pack: center; |
| 100 | 149 | justify-content: center; |
| 101 | 150 | |
| @@ -102,24 +151,29 @@ | ||
| 102 | 151 | padding: 15px; |
| 103 | 152 | |
| 104 | 153 | word-break: break-word; |
| 105 | 154 | } |
| 155 | + | |
| 106 | 156 | .htcompare-row:nth-child(2n) .htcompare-col { |
| 107 | 157 | background-color: #F7F7F7; |
| 108 | 158 | } |
| 159 | + | |
| 109 | 160 | .htcompare-col { |
| 110 | 161 | border-right: 1px solid #DDDDDD; |
| 111 | 162 | } |
| 163 | + | |
| 112 | 164 | .htcolumn-value { |
| 113 | 165 | -webkit-box-align: center; |
| 166 | + -ms-grid-row-align: center; | |
| 114 | 167 | align-items: center; |
| 115 | 168 | -ms-flex-align: center; |
| 116 | 169 | -webkit-box-flex: 0; |
| 117 | 170 | -ms-flex: 0 1 26%; |
| 118 | - flex: 0 1 26%; | |
| 171 | + flex: 0 1 26%; | |
| 119 | 172 | |
| 120 | 173 | text-align: center; |
| 121 | 174 | } |
| 175 | + | |
| 122 | 176 | .compare-data-primary .htcolumn-value { |
| 123 | 177 | -webkit-box-pack: start; |
| 124 | 178 | -ms-flex-pack: start; |
| 125 | 179 | justify-content: flex-start; |
| @@ -127,8 +181,9 @@ | ||
| 127 | 181 | padding-top: 0; |
| 128 | 182 | |
| 129 | 183 | border-top: 1px solid #DDDDDD; |
| 130 | 184 | } |
| 185 | + | |
| 131 | 186 | .htcolumn-field-name { |
| 132 | 187 | font-size: 16px; |
| 133 | 188 | font-weight: 600; |
| 134 | 189 | |
| @@ -133,14 +188,15 @@ | ||
| 133 | 188 | font-weight: 600; |
| 134 | 189 | |
| 135 | 190 | -webkit-box-flex: 0; |
| 136 | 191 | -ms-flex: 0 0 20%; |
| 137 | - flex: 0 0 20%; | |
| 192 | + flex: 0 0 20%; | |
| 138 | 193 | |
| 139 | 194 | text-transform: uppercase; |
| 140 | 195 | |
| 141 | 196 | color: #2D2A2A; |
| 142 | 197 | } |
| 198 | + | |
| 143 | 199 | .htcompare-remove { |
| 144 | 200 | position: relative; |
| 145 | 201 | |
| 146 | 202 | display: inline-block; |
| @@ -147,13 +203,11 @@ | ||
| 147 | 203 | |
| 148 | 204 | margin-left: -5px; |
| 149 | 205 | padding: 10px; |
| 150 | 206 | } |
| 151 | -.htcompare-remove:focus { | |
| 152 | - outline: none; | |
| 153 | -} | |
| 154 | -.htcompare-remove::after, | |
| 155 | -.htcompare-remove::before { | |
| 207 | + | |
| 208 | +.htcompare-remove:after, | |
| 209 | +.htcompare-remove:before { | |
| 156 | 210 | position: absolute; |
| 157 | 211 | top: 50%; |
| 158 | 212 | right: 0; |
| 159 | 213 | |
| @@ -163,30 +217,41 @@ | ||
| 163 | 217 | height: 2px; |
| 164 | 218 | |
| 165 | 219 | content: ' '; |
| 166 | 220 | -webkit-transform: rotate(45deg); |
| 167 | - transform: rotate(45deg); | |
| 221 | + transform: rotate(45deg); | |
| 168 | 222 | |
| 169 | 223 | background-color: #2D2A2A; |
| 170 | 224 | } |
| 171 | -.htcompare-remove::after { | |
| 225 | + | |
| 226 | +.htcompare-remove:after { | |
| 172 | 227 | -webkit-transform: rotate(-45deg); |
| 173 | - transform: rotate(-45deg); | |
| 228 | + transform: rotate(-45deg); | |
| 174 | 229 | } |
| 175 | -.htcompare-remove:hover::after, | |
| 176 | -.htcompare-remove:hover::before { | |
| 230 | + | |
| 231 | +.htcompare-remove:hover:after, | |
| 232 | +.htcompare-remove:hover:before { | |
| 177 | 233 | background: #EC1E1E; |
| 178 | 234 | } |
| 235 | + | |
| 179 | 236 | .htcompare-product-image { |
| 180 | 237 | display: block; |
| 181 | 238 | } |
| 239 | + | |
| 240 | +.htcompare-product-image img { | |
| 241 | + width: 100%; | |
| 242 | + height: auto; | |
| 243 | +} | |
| 244 | + | |
| 182 | 245 | .htcompare-return-to-shop .button { |
| 183 | 246 | display: inline-block; |
| 184 | 247 | } |
| 248 | + | |
| 185 | 249 | .htcompare-empty-page-text, |
| 186 | 250 | .htcompare-return-to-shop { |
| 187 | 251 | text-align: center; |
| 188 | 252 | } |
| 253 | + | |
| 189 | 254 | .htcompare-empty-page-text { |
| 190 | 255 | margin-bottom: 10px; |
| 191 | 256 | } |
| 192 | 257 | |
| @@ -192,8 +257,9 @@ | ||
| 192 | 257 | |
| 193 | 258 | .htcompare-table { |
| 194 | 259 | position: relative; |
| 195 | 260 | } |
| 261 | + | |
| 196 | 262 | .htcompare-table.loading:before { |
| 197 | 263 | position: absolute; |
| 198 | 264 | z-index: 1; |
| 199 | 265 | top: 0; |
| @@ -202,10 +268,11 @@ | ||
| 202 | 268 | left: 0; |
| 203 | 269 | |
| 204 | 270 | content: ''; |
| 205 | 271 | |
| 206 | - background-color: rgba(255,255,255,0.6); | |
| 272 | + background-color: rgba(255, 255, 255, 0.6); | |
| 207 | 273 | } |
| 274 | + | |
| 208 | 275 | .htcompare-table .htcompare-table-loader { |
| 209 | 276 | position: absolute; |
| 210 | 277 | z-index: 1; |
| 211 | 278 | top: 50%; |
| @@ -215,11 +282,13 @@ | ||
| 215 | 282 | |
| 216 | 283 | width: 50px; |
| 217 | 284 | height: 50px; |
| 218 | 285 | |
| 286 | + -webkit-transform: translate(-30px, -25px); | |
| 287 | + | |
| 219 | 288 | transform: translate(-30px, -25px); |
| 220 | 289 | -webkit-animation: htcomspin 1s linear infinite; |
| 221 | - animation: htcomspin 1s linear infinite; | |
| 290 | + animation: htcomspin 1s linear infinite; | |
| 222 | 291 | |
| 223 | 292 | border: 8px solid #F3F3F3; |
| 224 | 293 | border-top: 8px solid #3498DB; |
| 225 | 294 | border-radius: 50%; |
| @@ -242,8 +311,9 @@ | ||
| 242 | 311 | border: 1px solid #DC3545; |
| 243 | 312 | border-left-width: 4px; |
| 244 | 313 | box-shadow: 0 1px 1px rgb(0 0 0 / 4%); |
| 245 | 314 | } |
| 315 | + | |
| 246 | 316 | .compare-data-primary.htcompare-row .htcompare-col { |
| 247 | 317 | background-color: transparent !important; |
| 248 | 318 | } |
| 249 | 319 | |
| @@ -251,8 +321,9 @@ | ||
| 251 | 321 | @-webkit-keyframes htcomspin { |
| 252 | 322 | 0% { |
| 253 | 323 | -webkit-transform: rotate(0deg); |
| 254 | 324 | } |
| 325 | + | |
| 255 | 326 | 100% { |
| 256 | 327 | -webkit-transform: rotate(360deg); |
| 257 | 328 | } |
| 258 | 329 | } |
| @@ -258,17 +329,20 @@ | ||
| 258 | 329 | } |
| 259 | 330 | |
| 260 | 331 | @keyframes htcomspin { |
| 261 | 332 | 0% { |
| 333 | + -webkit-transform: rotate(0deg); | |
| 262 | 334 | transform: rotate(0deg); |
| 263 | 335 | } |
| 336 | + | |
| 264 | 337 | 100% { |
| 338 | + -webkit-transform: rotate(360deg); | |
| 265 | 339 | transform: rotate(360deg); |
| 266 | 340 | } |
| 267 | 341 | } |
| 268 | 342 | |
| 269 | 343 | /* Popup Style */ |
| 270 | -a.htcompare-cart-button.loading::after { | |
| 344 | +a.htcompare-cart-button.loading:after { | |
| 271 | 345 | font-family: WooCommerce; |
| 272 | 346 | font-weight: 400; |
| 273 | 347 | |
| 274 | 348 | position: absolute; |
| @@ -275,14 +349,16 @@ | ||
| 275 | 349 | top: auto; |
| 276 | 350 | right: 1em; |
| 277 | 351 | |
| 278 | 352 | content: '\e01c'; |
| 353 | + -webkit-animation: spin 2s linear infinite; | |
| 279 | 354 | animation: spin 2s linear infinite; |
| 280 | 355 | vertical-align: top; |
| 281 | 356 | |
| 282 | 357 | -webkit-font-smoothing: antialiased; |
| 283 | 358 | } |
| 284 | -a.htcompare-cart-button.added::after { | |
| 359 | + | |
| 360 | +a.htcompare-cart-button.added:after { | |
| 285 | 361 | font-family: WooCommerce; |
| 286 | 362 | |
| 287 | 363 | margin-left: 0.53em; |
| 288 | 364 | |
| @@ -304,26 +380,31 @@ | ||
| 304 | 380 | height: 100%; |
| 305 | 381 | padding-right: 17px; |
| 306 | 382 | |
| 307 | 383 | -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); |
| 308 | - -o-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); | |
| 309 | - transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); | |
| 384 | + transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1); | |
| 310 | 385 | |
| 311 | 386 | opacity: 0; |
| 387 | + | |
| 388 | + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | |
| 312 | 389 | background-color: rgba(0, 0, 0, 0.5); |
| 313 | 390 | } |
| 391 | + | |
| 314 | 392 | .logged-in.admin-bar .htcompare-popup { |
| 315 | 393 | top: 15px; |
| 316 | 394 | } |
| 395 | + | |
| 317 | 396 | .htcompare-popup.open { |
| 318 | 397 | display: -webkit-box; |
| 319 | - display: -webkit-flex; | |
| 320 | 398 | display: -ms-flexbox; |
| 321 | - display: flex; | |
| 399 | + display: flex; | |
| 322 | 400 | visibility: visible; |
| 323 | 401 | |
| 324 | 402 | opacity: 1; |
| 403 | + | |
| 404 | + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
| 325 | 405 | } |
| 406 | + | |
| 326 | 407 | .htcompare-popup .htcompare-popup-content-area { |
| 327 | 408 | position: relative; |
| 328 | 409 | |
| 329 | 410 | width: calc(100% - 30px); |
| @@ -332,13 +413,15 @@ | ||
| 332 | 413 | padding: 30px; |
| 333 | 414 | |
| 334 | 415 | background: #FFFFFF; |
| 335 | 416 | } |
| 417 | + | |
| 336 | 418 | .htcompare-popup .htcompare-popup-content-area .htcompare-table { |
| 337 | 419 | overflow-y: auto; |
| 338 | 420 | |
| 339 | 421 | max-height: 750px; |
| 340 | 422 | } |
| 423 | + | |
| 341 | 424 | .htcompare-popup-close { |
| 342 | 425 | position: absolute; |
| 343 | 426 | top: -10px; |
| 344 | 427 | right: -10px; |
| @@ -347,13 +430,16 @@ | ||
| 347 | 430 | height: 25px; |
| 348 | 431 | |
| 349 | 432 | cursor: pointer; |
| 350 | 433 | |
| 434 | + border: none; | |
| 435 | + padding: 0; | |
| 351 | 436 | border-radius: 100%; |
| 352 | 437 | background: #FFFFFF; |
| 353 | 438 | } |
| 354 | -.htcompare-popup-close::after, | |
| 355 | -.htcompare-popup-close::before { | |
| 439 | + | |
| 440 | +.htcompare-popup-close:after, | |
| 441 | +.htcompare-popup-close:before { | |
| 356 | 442 | position: absolute; |
| 357 | 443 | top: 50%; |
| 358 | 444 | right: 5px; |
| 359 | 445 | |
| @@ -363,18 +449,20 @@ | ||
| 363 | 449 | height: 2px; |
| 364 | 450 | |
| 365 | 451 | content: ' '; |
| 366 | 452 | -webkit-transform: rotate(45deg); |
| 367 | - transform: rotate(45deg); | |
| 453 | + transform: rotate(45deg); | |
| 368 | 454 | |
| 369 | 455 | background-color: #2D2A2A; |
| 370 | 456 | } |
| 371 | -.htcompare-popup-close::after { | |
| 457 | + | |
| 458 | +.htcompare-popup-close:after { | |
| 372 | 459 | -webkit-transform: rotate(-45deg); |
| 373 | - transform: rotate(-45deg); | |
| 460 | + transform: rotate(-45deg); | |
| 374 | 461 | } |
| 375 | -.htcompare-popup-close:hover::after, | |
| 376 | -.htcompare-popup-close:hover::before { | |
| 462 | + | |
| 463 | +.htcompare-popup-close:hover:after, | |
| 464 | +.htcompare-popup-close:hover:before { | |
| 377 | 465 | background: #EC1E1E; |
| 378 | 466 | } |
| 379 | 467 | |
| 380 | 468 | /*Share Link button*/ |
| @@ -380,14 +468,17 @@ | ||
| 380 | 468 | /*Share Link button*/ |
| 381 | 469 | .ever-compare-shareable-link { |
| 382 | 470 | margin-top: 10px; |
| 383 | 471 | } |
| 472 | + | |
| 384 | 473 | .ever-compare-shareable-link.right { |
| 385 | 474 | text-align: right; |
| 386 | 475 | } |
| 476 | + | |
| 387 | 477 | .ever-compare-shareable-link.left { |
| 388 | 478 | text-align: left; |
| 389 | 479 | } |
| 480 | + | |
| 390 | 481 | .ever-compare-shareable-link.center { |
| 391 | 482 | text-align: center; |
| 392 | 483 | } |
| 393 | 484 | |
| @@ -392,10 +483,9 @@ | ||
| 392 | 483 | } |
| 393 | 484 | |
| 394 | 485 | |
| 395 | 486 | /* Normal :1366px. */ |
| 396 | -@media (min-width: 1200px) and (max-width: 1400px) { | |
| 397 | -} | |
| 487 | +@media (min-width: 1200px) and (max-width: 1400px) {} | |
| 398 | 488 | |
| 399 | 489 | /* Normal desktop :992px. */ |
| 400 | 490 | @media (min-width: 992px) and (max-width: 1200px) { |
| 401 | 491 | .htcompare-table { |
| @@ -410,18 +500,18 @@ | ||
| 410 | 500 | overflow-x: auto; |
| 411 | 501 | |
| 412 | 502 | -webkit-overflow-scrolling: touch; |
| 413 | 503 | } |
| 504 | + | |
| 414 | 505 | .htcompare-col { |
| 415 | 506 | -webkit-box-flex: 0; |
| 416 | 507 | -ms-flex: 0 0 33.33333%; |
| 417 | - flex: 0 0 33.33333%; | |
| 508 | + flex: 0 0 33.33333%; | |
| 418 | 509 | } |
| 419 | 510 | } |
| 420 | 511 | |
| 421 | 512 | /* Tablet desktop :768px. */ |
| 422 | -@media (min-width: 768px) and (max-width: 991px) { | |
| 423 | -} | |
| 513 | +@media (min-width: 768px) and (max-width: 991px) {} | |
| 424 | 514 | |
| 425 | 515 | /* small mobile :320px. */ |
| 426 | 516 | @media (max-width: 767px) { |
| 427 | 517 | .htcompare-table { |
| @@ -428,13 +518,15 @@ | ||
| 428 | 518 | overflow-x: auto; |
| 429 | 519 | |
| 430 | 520 | -webkit-overflow-scrolling: touch; |
| 431 | 521 | } |
| 522 | + | |
| 432 | 523 | .htcompare-col { |
| 433 | 524 | -webkit-box-flex: 1; |
| 434 | 525 | -ms-flex: 1 0 50%; |
| 435 | - flex: 1 0 50%; | |
| 526 | + flex: 1 0 50%; | |
| 436 | 527 | } |
| 528 | + | |
| 437 | 529 | .htcolumn-field-name { |
| 438 | 530 | display: none; |
| 439 | 531 | } |
| 440 | 532 | |
| @@ -441,9 +533,9 @@ | ||
| 441 | 533 | .htcompare-row:nth-child(2n) .htcompare-col { |
| 442 | 534 | background-color: transparent; |
| 443 | 535 | } |
| 444 | 536 | |
| 445 | - .htcolumn-value::before { | |
| 537 | + .htcolumn-value:before { | |
| 446 | 538 | font-size: 14px; |
| 447 | 539 | font-weight: 600; |
| 448 | 540 | |
| 449 | 541 | display: block; |
| @@ -458,16 +550,16 @@ | ||
| 458 | 550 | |
| 459 | 551 | color: #2D2A2A; |
| 460 | 552 | background-color: #F7F7F7; |
| 461 | 553 | } |
| 462 | - .compare-data-primary .htcolumn-value::before { | |
| 554 | + | |
| 555 | + .compare-data-primary .htcolumn-value:before { | |
| 463 | 556 | display: none; |
| 464 | 557 | } |
| 465 | 558 | } |
| 466 | 559 | |
| 467 | 560 | /* Large Mobile :480px. */ |
| 468 | -@media only screen and (min-width: 480px) and (max-width: 767px) { | |
| 469 | -} | |
| 561 | +@media only screen and (min-width: 480px) and (max-width: 767px) {} | |
| 470 | 562 | |
| 471 | 563 | |
| 472 | 564 | |
| 473 | 565 | /* The Modal (background) */ |
| @@ -478,9 +570,14 @@ | ||
| 478 | 570 | left: 0; |
| 479 | 571 | |
| 480 | 572 | display: none; |
| 481 | 573 | overflow: auto; |
| 574 | + -webkit-box-align: center; | |
| 575 | + -ms-flex-align: center; | |
| 576 | + -ms-grid-row-align: center; | |
| 482 | 577 | align-items: center; |
| 578 | + -webkit-box-pack: center; | |
| 579 | + -ms-flex-pack: center; | |
| 483 | 580 | justify-content: center; |
| 484 | 581 | |
| 485 | 582 | width: 100%; |
| 486 | 583 | height: 100%; |
| @@ -485,14 +582,14 @@ | ||
| 485 | 582 | width: 100%; |
| 486 | 583 | height: 100%; |
| 487 | 584 | |
| 488 | 585 | -webkit-animation-name: fadeIn; |
| 489 | - animation-name: fadeIn; | |
| 586 | + animation-name: fadeIn; | |
| 490 | 587 | -webkit-animation-duration: 0.4s; |
| 491 | - animation-duration: 0.4s; | |
| 588 | + animation-duration: 0.4s; | |
| 492 | 589 | |
| 493 | - background-color: rgb(0,0,0); | |
| 494 | - background-color: rgba(0,0,0,0.4); | |
| 590 | + background-color: rgb(0, 0, 0); | |
| 591 | + background-color: rgba(0, 0, 0, 0.4); | |
| 495 | 592 | } |
| 496 | 593 | |
| 497 | 594 | /* Modal Content */ |
| 498 | 595 | .htcompare-error-modal-content { |
| @@ -502,11 +599,11 @@ | ||
| 502 | 599 | max-width: 600px; |
| 503 | 600 | padding: 30px; |
| 504 | 601 | |
| 505 | 602 | -webkit-animation-name: slideIn; |
| 506 | - animation-name: slideIn; | |
| 603 | + animation-name: slideIn; | |
| 507 | 604 | -webkit-animation-duration: 0.4s; |
| 508 | - animation-duration: 0.4s; | |
| 605 | + animation-duration: 0.4s; | |
| 509 | 606 | |
| 510 | 607 | background-color: #FEFEFE; |
| 511 | 608 | } |
| 512 | 609 | |
| @@ -518,10 +615,18 @@ | ||
| 518 | 615 | position: absolute; |
| 519 | 616 | top: -10px; |
| 520 | 617 | right: -10px; |
| 521 | 618 | |
| 619 | + display: -webkit-box; | |
| 620 | + | |
| 621 | + display: -ms-flexbox; | |
| 622 | + | |
| 522 | 623 | display: flex; |
| 624 | + -webkit-box-align: center; | |
| 625 | + -ms-flex-align: center; | |
| 523 | 626 | align-items: center; |
| 627 | + -webkit-box-pack: center; | |
| 628 | + -ms-flex-pack: center; | |
| 524 | 629 | justify-content: center; |
| 525 | 630 | |
| 526 | 631 | width: 30px; |
| 527 | 632 | height: 30px; |
| @@ -527,8 +632,10 @@ | ||
| 527 | 632 | height: 30px; |
| 528 | 633 | padding: 0; |
| 529 | 634 | padding-top: revert; |
| 530 | 635 | |
| 636 | + -webkit-transition: all 0.3s ease 0s; | |
| 637 | + | |
| 531 | 638 | transition: all 0.3s ease 0s; |
| 532 | 639 | |
| 533 | 640 | color: #333333; |
| 534 | 641 | border-radius: 50%; |
| @@ -541,11 +648,11 @@ | ||
| 541 | 648 | cursor: pointer; |
| 542 | 649 | text-decoration: none; |
| 543 | 650 | |
| 544 | 651 | color: #EC1E1E; |
| 545 | - outline: none; | |
| 546 | 652 | background-color: #FFFFFF; |
| 547 | 653 | } |
| 654 | + | |
| 548 | 655 | .ever-compare-message-error { |
| 549 | 656 | margin-bottom: 0; |
| 550 | 657 | } |
| 551 | 658 | |
| @@ -554,13 +661,18 @@ | ||
| 554 | 661 | from { |
| 555 | 662 | bottom: -50px; |
| 556 | 663 | |
| 557 | 664 | opacity: 0; |
| 665 | + | |
| 666 | + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | |
| 558 | 667 | } |
| 668 | + | |
| 559 | 669 | to { |
| 560 | 670 | bottom: 0; |
| 561 | 671 | |
| 562 | 672 | opacity: 1; |
| 673 | + | |
| 674 | + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
| 563 | 675 | } |
| 564 | 676 | } |
| 565 | 677 | |
| 566 | 678 | @keyframes slideIn { |
| @@ -567,13 +679,18 @@ | ||
| 567 | 679 | from { |
| 568 | 680 | bottom: -50px; |
| 569 | 681 | |
| 570 | 682 | opacity: 0; |
| 683 | + | |
| 684 | + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | |
| 571 | 685 | } |
| 686 | + | |
| 572 | 687 | to { |
| 573 | 688 | bottom: 0; |
| 574 | 689 | |
| 575 | 690 | opacity: 1; |
| 691 | + | |
| 692 | + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
| 576 | 693 | } |
| 577 | 694 | } |
| 578 | 695 | |
| 579 | 696 | @-webkit-keyframes fadeIn { |
| @@ -578,11 +695,14 @@ | ||
| 578 | 695 | |
| 579 | 696 | @-webkit-keyframes fadeIn { |
| 580 | 697 | from { |
| 581 | 698 | opacity: 0; |
| 699 | + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | |
| 582 | 700 | } |
| 701 | + | |
| 583 | 702 | to { |
| 584 | 703 | opacity: 1; |
| 704 | + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
| 585 | 705 | } |
| 586 | 706 | } |
| 587 | 707 | |
| 588 | 708 | @keyframes fadeIn { |
| @@ -587,11 +707,14 @@ | ||
| 587 | 707 | |
| 588 | 708 | @keyframes fadeIn { |
| 589 | 709 | from { |
| 590 | 710 | opacity: 0; |
| 711 | + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | |
| 591 | 712 | } |
| 713 | + | |
| 592 | 714 | to { |
| 593 | 715 | opacity: 1; |
| 716 | + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
| 594 | 717 | } |
| 595 | 718 | } |
| 596 | 719 | |
| 597 | 720 | |
| @@ -607,11 +730,9 @@ | ||
| 607 | 730 | width: 30px; |
| 608 | 731 | |
| 609 | 732 | color: #333333; |
| 610 | 733 | } |
| 611 | -.htcompare-counter-area:focus { | |
| 612 | - outline: none; | |
| 613 | -} | |
| 734 | + | |
| 614 | 735 | .htcompare-counter-area .htcompare-counter { |
| 615 | 736 | font-size: 11px; |
| 616 | 737 | font-weight: 600; |
| 617 | 738 | line-height: 18px; |
| @@ -619,10 +740,18 @@ | ||
| 619 | 740 | position: absolute; |
| 620 | 741 | top: -8px; |
| 621 | 742 | right: 0; |
| 622 | 743 | |
| 744 | + display: -webkit-box; | |
| 745 | + | |
| 746 | + display: -ms-flexbox; | |
| 747 | + | |
| 623 | 748 | display: flex; |
| 749 | + -webkit-box-align: center; | |
| 750 | + -ms-flex-align: center; | |
| 624 | 751 | align-items: center; |
| 752 | + -webkit-box-pack: center; | |
| 753 | + -ms-flex-pack: center; | |
| 625 | 754 | justify-content: center; |
| 626 | 755 | |
| 627 | 756 | width: 16px; |
| 628 | 757 | height: 16px; |
| @@ -632,4 +761,89 @@ | ||
| 632 | 761 | color: #FFFFFF; |
| 633 | 762 | border-radius: 8px; |
| 634 | 763 | background: #EC5858; |
| 635 | 764 | } |
| 765 | + | |
| 766 | + | |
| 767 | +/* Notification */ | |
| 768 | +.htcompare-notification { | |
| 769 | + position: fixed; | |
| 770 | + z-index: -99; | |
| 771 | + bottom: -100%; | |
| 772 | + left: 50%; | |
| 773 | + | |
| 774 | + visibility: hidden; | |
| 775 | + | |
| 776 | + min-width: 220px; | |
| 777 | + padding: 20px; | |
| 778 | + padding-right: 40px; | |
| 779 | + | |
| 780 | + -webkit-transition: all 1s ease 0s; | |
| 781 | + | |
| 782 | + transition: all 1s ease 0s; | |
| 783 | + -webkit-transform: translateX(-50%); | |
| 784 | + transform: translateX(-50%); | |
| 785 | + opacity: 0; | |
| 786 | + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | |
| 787 | + border: 1px solid #222222; | |
| 788 | + border-radius: 4px; | |
| 789 | + background-color: #222222; | |
| 790 | +} | |
| 791 | + | |
| 792 | +.htcompare-notification.open { | |
| 793 | + z-index: 999999; | |
| 794 | + bottom: 10px; | |
| 795 | + | |
| 796 | + visibility: visible; | |
| 797 | + | |
| 798 | + opacity: 1; | |
| 799 | + | |
| 800 | + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
| 801 | +} | |
| 802 | + | |
| 803 | +.htcompare-notification-text { | |
| 804 | + color: #FFFFFF; | |
| 805 | +} | |
| 806 | + | |
| 807 | +.htcompare-notification-close { | |
| 808 | + line-height: 1; | |
| 809 | + | |
| 810 | + position: absolute; | |
| 811 | + top: 23px; | |
| 812 | + right: 10px; | |
| 813 | + -webkit-transition: all 0.3s ease 0s; | |
| 814 | + transition: all 0.3s ease 0s; | |
| 815 | + display: -webkit-box; | |
| 816 | + display: -ms-flexbox; | |
| 817 | + display: flex; | |
| 818 | + -webkit-box-align: center; | |
| 819 | + -ms-flex-align: center; | |
| 820 | + align-items: center; | |
| 821 | + -webkit-box-pack: center; | |
| 822 | + -ms-flex-pack: center; | |
| 823 | + justify-content: center; | |
| 824 | + | |
| 825 | + width: 20px; | |
| 826 | + height: 20px; | |
| 827 | + padding: 0; | |
| 828 | + | |
| 829 | + cursor: pointer; | |
| 830 | + text-indent: -9999px; | |
| 831 | + | |
| 832 | + color: #FFFFFF; | |
| 833 | + border: none; | |
| 834 | + background-color: transparent; | |
| 835 | +} | |
| 836 | + | |
| 837 | +.htcompare-notification-close:after { | |
| 838 | + font-size: 26px; | |
| 839 | + line-height: 1; | |
| 840 | + | |
| 841 | + display: -webkit-box; | |
| 842 | + | |
| 843 | + display: -ms-flexbox; | |
| 844 | + | |
| 845 | + display: flex; | |
| 846 | + | |
| 847 | + content: "\00d7"; | |
| 848 | + text-indent: 0; | |
| 849 | +} | |
