| @@ -347,8 +347,9 @@ | ||
| 347 | 347 | } |
| 348 | 348 | [class*="imagify-"] .button .dashicons { |
| 349 | 349 | margin-right: 5px; |
| 350 | 350 | vertical-align: middle; |
| 351 | + line-height: 1; | |
| 351 | 352 | } |
| 352 | 353 | |
| 353 | 354 | .imagify-settings .button-primary.button-primary, |
| 354 | 355 | .imagify-welcome .button-primary.button-primary, |
| @@ -462,8 +463,9 @@ | ||
| 462 | 463 | .imagify-button.imagify-button .dashicons, |
| 463 | 464 | .imagify-button-primary.imagify-button-primary .dashicons, |
| 464 | 465 | .imagify-button-secondary.imagify-button-secondary .dashicons { |
| 465 | 466 | vertical-align: middle; |
| 467 | + line-height: 1; | |
| 466 | 468 | } |
| 467 | 469 | |
| 468 | 470 | [class*="imagify-"] .button-text { |
| 469 | 471 | display: inline-block; |
| @@ -907,8 +909,9 @@ | ||
| 907 | 909 | box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.1) inset; |
| 908 | 910 | z-index: 2; |
| 909 | 911 | -webkit-transition: all .275s; |
| 910 | 912 | transition: all .275s; |
| 913 | + cursor: pointer; | |
| 911 | 914 | } |
| 912 | 915 | |
| 913 | 916 | .imagify-inline-options input[type="radio"]:not(:checked) + label:first-of-type, |
| 914 | 917 | .imagify-inline-options input[type="radio"]:checked + label:first-of-type { |
| @@ -923,8 +926,14 @@ | ||
| 923 | 926 | .imagify-inline-options input[type="radio"]:checked + label { |
| 924 | 927 | background: #8BC34A |
| 925 | 928 | } |
| 926 | 929 | |
| 930 | +.imagify-inline-options input[type="radio"]:disabled + label { | |
| 931 | + background: #ccc; | |
| 932 | + color: #999; | |
| 933 | + cursor:not-allowed; | |
| 934 | +} | |
| 935 | + | |
| 927 | 936 | .imagify-inline-options .imagify-info { |
| 928 | 937 | margin-top: 15px; |
| 929 | 938 | } |
| 930 | 939 | |
| @@ -1277,9 +1286,9 @@ | ||
| 1277 | 1286 | [class^="imagify-bar-"] { |
| 1278 | 1287 | position: relative; |
| 1279 | 1288 | height: 8px; |
| 1280 | 1289 | width: 100%; |
| 1281 | - background: #60758D; | |
| 1290 | + background: #343A49; | |
| 1282 | 1291 | color: #FFF; |
| 1283 | 1292 | font-size: 10px; |
| 1284 | 1293 | } |
| 1285 | 1294 | |
| @@ -1310,9 +1319,9 @@ | ||
| 1310 | 1319 | .imagify-bar-neutral .imagify-progress { |
| 1311 | 1320 | background: #F5A623; |
| 1312 | 1321 | } |
| 1313 | 1322 | .imagify-space-left .imagify-bar-negative .imagify-progress { |
| 1314 | - background: #C51162; | |
| 1323 | + background: #ffffff; | |
| 1315 | 1324 | } |
| 1316 | 1325 | |
| 1317 | 1326 | .imagify-btn-ghost { |
| 1318 | 1327 | display: inline-block; |
| @@ -1385,9 +1394,9 @@ | ||
| 1385 | 1394 | box-sizing: border-box; |
| 1386 | 1395 | position: relative; |
| 1387 | 1396 | width: 800px; |
| 1388 | 1397 | max-width: 95%; |
| 1389 | - max-height: 90vw; | |
| 1398 | + max-height: 90vh; | |
| 1390 | 1399 | overflow: auto; |
| 1391 | 1400 | padding: 20px 25px; |
| 1392 | 1401 | margin: 1em auto; |
| 1393 | 1402 | background: #FFF; |
| @@ -1444,13 +1453,8 @@ | ||
| 1444 | 1453 | z-index: 12; |
| 1445 | 1454 | } |
| 1446 | 1455 | |
| 1447 | 1456 | /* Attachments specifics */ |
| 1448 | -.wp_attachment_image #imagify-visual-comparison .close-btn, | |
| 1449 | -.imagify-visual-comparison .close-btn { | |
| 1450 | - top: 0; | |
| 1451 | -} | |
| 1452 | - | |
| 1453 | 1457 | .wp_attachment_image #imagify-visual-comparison .imagify-modal-content, |
| 1454 | 1458 | .imagify-visual-comparison .imagify-modal-content { |
| 1455 | 1459 | padding-top: 40px; |
| 1456 | 1460 | } |
| @@ -1542,4 +1546,278 @@ | ||
| 1542 | 1546 | .imagify-pr2.imagify-pr2{ |
| 1543 | 1547 | padding-right: 0em; |
| 1544 | 1548 | } |
| 1545 | 1549 | } |
| 1550 | + | |
| 1551 | +.imagify-upsell { | |
| 1552 | + position:relative; | |
| 1553 | + background: #c51161; | |
| 1554 | + padding: 20px 25px; | |
| 1555 | +} | |
| 1556 | + | |
| 1557 | +.imagify-upsell p { | |
| 1558 | + color: #fff !important; | |
| 1559 | +} | |
| 1560 | + | |
| 1561 | +.imagify-upsell-button { | |
| 1562 | + display: block; | |
| 1563 | + background: #fff; | |
| 1564 | + border-radius: 5px; | |
| 1565 | + color: #c51161 !important; | |
| 1566 | + font-weight: bold; | |
| 1567 | + padding: 10px 0; | |
| 1568 | + text-align: center; | |
| 1569 | + text-decoration: none; | |
| 1570 | + text-transform: uppercase; | |
| 1571 | +} | |
| 1572 | + | |
| 1573 | +.imagify-upsell-arrow::after { | |
| 1574 | + content: '\2192'; | |
| 1575 | + font-size: large; | |
| 1576 | + margin-left: 5px; | |
| 1577 | + vertical-align: top; | |
| 1578 | +} | |
| 1579 | + | |
| 1580 | +.imagify-upsell .imagify-meteo-icon { | |
| 1581 | + filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(104deg) brightness(103%) contrast(103%); | |
| 1582 | +} | |
| 1583 | + | |
| 1584 | +.imagify-original-fize-size { | |
| 1585 | + display: block !important; | |
| 1586 | +} | |
| 1587 | + | |
| 1588 | +.imagify-original-fize-size .value { | |
| 1589 | + padding-left: 15px !important; | |
| 1590 | +} | |
| 1591 | +.imagify-plugin-family-cards { | |
| 1592 | + display: flex; | |
| 1593 | + flex-wrap: wrap; | |
| 1594 | + margin: 0 -10px; | |
| 1595 | +} | |
| 1596 | +.imagify-plugin-family-col { | |
| 1597 | + width: 25%; | |
| 1598 | + box-sizing: border-box; | |
| 1599 | + padding: 0 10px; | |
| 1600 | + margin-bottom: 20px; | |
| 1601 | + display: flex; | |
| 1602 | + flex-direction: column; | |
| 1603 | +} | |
| 1604 | +@media (max-width: 1200px) { | |
| 1605 | + .imagify-plugin-family-col { | |
| 1606 | + width: 50%; | |
| 1607 | + } | |
| 1608 | +} | |
| 1609 | +@media (max-width: 600px) { | |
| 1610 | + .imagify-plugin-family-col { | |
| 1611 | + width: 100%; | |
| 1612 | + } | |
| 1613 | +} | |
| 1614 | +.imagify-card { | |
| 1615 | + border: 1px solid #dfdfdf; | |
| 1616 | + background-color: #f4f7f9; | |
| 1617 | + border-radius: 5px; | |
| 1618 | + width: 100%; | |
| 1619 | + display: flex; | |
| 1620 | + flex-direction: column; | |
| 1621 | + flex: 1 1 auto; | |
| 1622 | +} | |
| 1623 | +.imagify-card-header { | |
| 1624 | + margin-bottom: 10px; | |
| 1625 | + padding-top: 25px; | |
| 1626 | +} | |
| 1627 | +.imagify-card-logo { | |
| 1628 | + min-height: 42px; | |
| 1629 | + display: flex; | |
| 1630 | + align-items: center; | |
| 1631 | + justify-content: center; | |
| 1632 | +} | |
| 1633 | +.imagify-card-logo img { | |
| 1634 | + display: block; | |
| 1635 | + margin: 0 auto; | |
| 1636 | + max-width: 100%; | |
| 1637 | + height: auto; | |
| 1638 | +} | |
| 1639 | +.imagify-card-header h4 { | |
| 1640 | + text-align: center; | |
| 1641 | + color: #323232; | |
| 1642 | + font-size: 1.1em; | |
| 1643 | + font-weight:bold; | |
| 1644 | +} | |
| 1645 | +.imagify-card-body { | |
| 1646 | + margin-bottom: 10px; | |
| 1647 | + padding: 0 10px 0 10px; | |
| 1648 | + flex: 1 1 auto; | |
| 1649 | +} | |
| 1650 | +.imagify-card-body p { | |
| 1651 | + font-size: 1em; | |
| 1652 | + color: #323232; | |
| 1653 | + text-align:center; | |
| 1654 | + line-height: 17px; | |
| 1655 | +} | |
| 1656 | +.imagify-card-footer { | |
| 1657 | + display: flex; | |
| 1658 | + justify-content: center; | |
| 1659 | + align-items: center; | |
| 1660 | + padding: 10px; | |
| 1661 | + height: 40px; | |
| 1662 | + margin-top: auto; | |
| 1663 | +} | |
| 1664 | +.imagify-card-footer span { | |
| 1665 | + text-transform: uppercase; | |
| 1666 | + font-weight:bold; | |
| 1667 | + color: #6f9c3b; | |
| 1668 | +} | |
| 1669 | +.imagify-card-footer a { | |
| 1670 | + margin: 0 15px 0 15px; | |
| 1671 | + font-size: 1em; | |
| 1672 | + font-weight: bold; | |
| 1673 | +} | |
| 1674 | +.imagify-card-footer a.imagify-card-btn { | |
| 1675 | + text-transform: uppercase; | |
| 1676 | + text-decoration: none; | |
| 1677 | + background-color: #2f3242; | |
| 1678 | + padding: 8px 20px 8px 20px; | |
| 1679 | + color: white; | |
| 1680 | +} | |
| 1681 | +.imagify-upsell-cta { | |
| 1682 | + display: inline-flex; | |
| 1683 | + align-items: center; | |
| 1684 | + justify-content: center; | |
| 1685 | +} | |
| 1686 | +.imagify-upsell-cta .imagify-svg-icon { | |
| 1687 | + margin-left: 7px; | |
| 1688 | + margin-top: 2px; | |
| 1689 | +} | |
| 1690 | +.imagify-upsell.imagify-col-content .imagify-space-left p { | |
| 1691 | + font-size: 14px; | |
| 1692 | +} | |
| 1693 | + | |
| 1694 | +/* Analytics opt-in ============================================================================= */ | |
| 1695 | +.imagify-analytics-section { | |
| 1696 | + padding: 20px 24px; | |
| 1697 | + background: #f6f7f7; | |
| 1698 | + border-radius: 4px; | |
| 1699 | +} | |
| 1700 | + | |
| 1701 | +.imagify-analytics-optin { | |
| 1702 | + display: flex; | |
| 1703 | + flex-direction: column; | |
| 1704 | + gap: 8px; | |
| 1705 | +} | |
| 1706 | + | |
| 1707 | +.imagify-analytics-label { | |
| 1708 | + display: inline-flex; | |
| 1709 | + align-items: center; | |
| 1710 | + gap: 12px; | |
| 1711 | + cursor: pointer; | |
| 1712 | + font-size: 14px; | |
| 1713 | + font-weight: 600; | |
| 1714 | + color: #2E3243; | |
| 1715 | +} | |
| 1716 | + | |
| 1717 | +/* Hide native checkbox */ | |
| 1718 | +.imagify-analytics-checkbox { | |
| 1719 | + position: absolute; | |
| 1720 | + opacity: 0; | |
| 1721 | + width: 0; | |
| 1722 | + height: 0; | |
| 1723 | +} | |
| 1724 | + | |
| 1725 | +/* Toggle switch track */ | |
| 1726 | +.imagify-analytics-toggle-ui { | |
| 1727 | + position: relative; | |
| 1728 | + display: inline-block; | |
| 1729 | + width: 48px; | |
| 1730 | + height: 26px; | |
| 1731 | + background: #ccc; | |
| 1732 | + border-radius: 13px; | |
| 1733 | + transition: background .2s ease; | |
| 1734 | + flex-shrink: 0; | |
| 1735 | +} | |
| 1736 | + | |
| 1737 | +/* Toggle switch thumb */ | |
| 1738 | +.imagify-analytics-toggle-ui::after { | |
| 1739 | + content: ''; | |
| 1740 | + position: absolute; | |
| 1741 | + top: 3px; | |
| 1742 | + left: 3px; | |
| 1743 | + width: 20px; | |
| 1744 | + height: 20px; | |
| 1745 | + background: #fff; | |
| 1746 | + border-radius: 50%; | |
| 1747 | + box-shadow: 0 1px 3px rgba(0,0,0,.3); | |
| 1748 | + transition: transform .2s ease; | |
| 1749 | +} | |
| 1750 | + | |
| 1751 | +.imagify-analytics-checkbox:checked ~ .imagify-analytics-toggle-ui, | |
| 1752 | +.imagify-analytics-label .imagify-analytics-checkbox:checked + .imagify-analytics-toggle-ui { | |
| 1753 | + background: #40B1D0; | |
| 1754 | +} | |
| 1755 | + | |
| 1756 | +.imagify-analytics-checkbox:checked + .imagify-analytics-toggle-ui::after { | |
| 1757 | + transform: translateX(22px); | |
| 1758 | +} | |
| 1759 | + | |
| 1760 | +.imagify-analytics-description { | |
| 1761 | + margin: 0; | |
| 1762 | + color: #666; | |
| 1763 | + font-size: 13px; | |
| 1764 | +} | |
| 1765 | + | |
| 1766 | +.imagify-btn-link { | |
| 1767 | + background: none; | |
| 1768 | + border: none; | |
| 1769 | + padding: 0; | |
| 1770 | + color: #40B1D0; | |
| 1771 | + text-decoration: underline; | |
| 1772 | + cursor: pointer; | |
| 1773 | + font-size: inherit; | |
| 1774 | +} | |
| 1775 | + | |
| 1776 | +.imagify-btn-link:hover { | |
| 1777 | + color: #338ea6; | |
| 1778 | +} | |
| 1779 | + | |
| 1780 | +/* Analytics data table (modal + thank-you notice) */ | |
| 1781 | +.imagify-analytics-data-table { | |
| 1782 | + width: 100%; | |
| 1783 | + border-collapse: collapse; | |
| 1784 | + margin: 12px 0; | |
| 1785 | + border-left: 3px solid #40B1D0; | |
| 1786 | + background-color: #F0FAFD; | |
| 1787 | + border-radius: 4px; | |
| 1788 | + overflow: hidden; | |
| 1789 | +} | |
| 1790 | + | |
| 1791 | +.imagify-analytics-data-table td { | |
| 1792 | + padding: 8px 12px; | |
| 1793 | + font-size: 13px; | |
| 1794 | + border-bottom: 1px solid #D8EFF6; | |
| 1795 | + vertical-align: top; | |
| 1796 | + color: #2E3243; | |
| 1797 | +} | |
| 1798 | + | |
| 1799 | +.imagify-analytics-data-table td:first-child { | |
| 1800 | + font-weight: 600; | |
| 1801 | + width: 40%; | |
| 1802 | +} | |
| 1803 | + | |
| 1804 | +.imagify-analytics-data-table tr:last-child td { | |
| 1805 | + border-bottom: 0; | |
| 1806 | +} | |
| 1807 | + | |
| 1808 | +/* Thank-you notice text colour override */ | |
| 1809 | +.imagify-analytics-thankyou-notice, | |
| 1810 | +.imagify-analytics-thankyou-notice p { | |
| 1811 | + color: #1d2327; | |
| 1812 | +} | |
| 1813 | + | |
| 1814 | +/* Opt-in ask notice */ | |
| 1815 | +.imagify-analytics-optin-notice .imagify-analytics-data-container { | |
| 1816 | + margin-bottom: 12px; | |
| 1817 | +} | |
| 1818 | + | |
| 1819 | +.imagify-analytics-optin-notice .imagify-analytics-data-container .description { | |
| 1820 | + color: #666; | |
| 1821 | + font-size: 13px; | |
| 1822 | +} | |
| 1823 | + | |
