diff options
Diffstat (limited to 'plugins/jetpack/css/jetpack-recommendations-banner-rtl.css')
-rw-r--r-- | plugins/jetpack/css/jetpack-recommendations-banner-rtl.css | 384 |
1 files changed, 322 insertions, 62 deletions
diff --git a/plugins/jetpack/css/jetpack-recommendations-banner-rtl.css b/plugins/jetpack/css/jetpack-recommendations-banner-rtl.css index 360a9f66..c2cd977c 100644 --- a/plugins/jetpack/css/jetpack-recommendations-banner-rtl.css +++ b/plugins/jetpack/css/jetpack-recommendations-banner-rtl.css @@ -1,16 +1,247 @@ -/*! -* Do not modify this file directly. It is compiled SASS code. -*/ +@charset "UTF-8"; +:root { + --font-title-large: 36px; + --font-title-small: 24px; + --font-body: 16px; + --font-label: 12px; + --jp-black: #000000; + --jp-black-80: #2c3338; + --jp-white: #ffffff; + --jp-white-off: #f9f9f6; + --jp-gray: #dcdcde; + --jp-gray-0: #F6F7F7; + --jp-gray-5: #dcdcde; + --jp-gray-10: #c3c4c7; + --jp-gray-20: #A7AAAD; + --jp-gray-30: #8c8f94; + --jp-gray-40: #787C82; + --jp-gray-50: #646970; + --jp-gray-60: #50575E; + --jp-gray-70: #3c434a; + --jp-gray-80: #2C3338; + --jp-gray-90: #1d2327; + --jp-gray-100: #101517; + --jp-gray-off: #e2e2df; + --jp-yellow-10: #f2cf75; + --jp-red-0: #F7EBEC; + --jp-red-50: #D63638; + --jp-red-60: #B32D2E; + --jp-red-80: #8A2424; + --jp-red: #d63639; + --jp-pink: #C9356E; + --jp-green-0: #f0f2eb; + --jp-green-5: #d0e6b8; + --jp-green-10: #9dd977; + --jp-green-20: #64ca43; + --jp-green-30: #2fb41f; + --jp-green-40: #069e08; + --jp-green-50: #008710; + --jp-green-60: #007117; + --jp-green-70: #005b18; + --jp-green-80: #004515; + --jp-green-90: #003010; + --jp-green-100: #001c09; + --jp-green: #069e08; + --jp-green-primary: var( --jp-green-40 ); + --jp-green-secondary: var( --jp-green-30 ); + --jp-border-radius: 4px; + --jp-menu-border-height: 1px; + --jp-underline-thickness: 2px; +} + +/********* Mixins *********/ +/********* Generic styles *********/ +* { + box-sizing: border-box; +} + +body { + min-height: 100%; + margin: 0; + padding: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; +} + +.jp-wrap { + display: flex; + align-items: center; + flex-wrap: wrap; + max-width: 1128px; + margin: 0 auto; +} + +.jp-row { + display: grid; + grid-gap: 24px; + grid-template-columns: repeat(4, 1fr); + width: 100%; + margin: 0 16px; +} +@media (min-width: 600px) { + .jp-row { + grid-template-columns: repeat(8, 1fr); + margin: 0 18px; + } +} +@media (min-width: 960px) { + .jp-row { + grid-template-columns: repeat(12, 1fr); + max-width: 1128px; + margin: 0 24px; + } +} + +.sm-col-span-1 { + grid-column-end: span 1; +} + +.sm-col-span-2 { + grid-column-end: span 2; +} + +.sm-col-span-3 { + grid-column-end: span 3; +} + +.sm-col-span-4 { + grid-column-end: span 4; +} + +@media (min-width: 600px) { + .md-col-span-1 { + grid-column-end: span 1; + } + + .md-col-span-2 { + grid-column-end: span 2; + } + + .md-col-span-3 { + grid-column-end: span 3; + } + + .md-col-span-4 { + grid-column-end: span 4; + } + + .md-col-span-5 { + grid-column-end: span 5; + } + + .md-col-span-6 { + grid-column-end: span 6; + } + + .md-col-span-7 { + grid-column-end: span 7; + } + + .md-col-span-8 { + grid-column-end: span 8; + } +} +@media (min-width: 960px) { + .lg-col-span-1 { + grid-column-end: span 1; + } + + .lg-col-span-2 { + grid-column-end: span 2; + } + + .lg-col-span-3 { + grid-column-end: span 3; + } + + .lg-col-span-4 { + grid-column-end: span 4; + } + + .lg-col-span-5 { + grid-column-end: span 5; + } + + .lg-col-span-6 { + grid-column-end: span 6; + } + + .lg-col-span-7 { + grid-column-end: span 7; + } + + .lg-col-span-8 { + grid-column-end: span 8; + } + + .lg-col-span-9 { + grid-column-end: span 9; + } + + .lg-col-span-10 { + grid-column-end: span 10; + } + + .lg-col-span-11 { + grid-column-end: span 11; + } + + .lg-col-span-12 { + grid-column-end: span 12; + } +} +@media (max-width: 960px) { + .md-col-span-0 { + display: none; + } +} +@media (max-width: 600px) { + .sm-col-span-0 { + display: none; + } +} +.jp-cut { + position: relative; + display: block; + margin: 32px 0; + padding: 16px 24px 16px 64px; + border: 2px solid var(--jp-green-primary); + border-radius: var(--jp-border-radius); + text-decoration: none; +} +.jp-cut span { + display: block; +} +.jp-cut span:last-of-type { + font-weight: 600; +} +.jp-cut:hover span:last-of-type, .jp-cut:focus span:last-of-type { + text-decoration: underline; + text-decoration-thickness: var(--jp-underline-thickness); +} +.jp-cut:hover:after, .jp-cut:focus:after { + transform: translateY(-50%) translateX(-8px); +} +.jp-cut:after { + content: "→"; + position: absolute; + top: 50%; + left: 24px; + font-size: 24px; + font-weight: 600; + color: var(--jp-green-primary); + transform: translateY(-50%); + transition: transform 0.15s ease-out; +} + .jp-recommendations-banner-main { position: relative; display: grid; grid-template-columns: 55% 45%; - max-width: 1600px; min-height: 480px; - background: linear-gradient(-120deg, white 0%, white 55%, #c5d9ed 55%); + margin: 3rem 0 1.25rem 1.25rem; + background: #fff; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.03); border: 1px solid #d5d5d5; - margin: 3rem 0 1.25rem 1.25rem; } @media (max-width: 1152px) { .jp-recommendations-banner-main { @@ -25,14 +256,14 @@ } @media (max-width: 480px) { .jp-recommendations-banner-main .notice-dismiss { - padding: 16px; + padding: 1rem; } } .jp-recommendations-banner__content { display: flex; flex-direction: column; - padding-left: 48px; + padding-left: 3rem; } @media (min-width: 1688px) { .jp-recommendations-banner__content { @@ -41,38 +272,40 @@ } @media (max-width: 660px) { .jp-recommendations-banner__content { - padding-left: 32px; + padding-left: 2rem; } } @media (max-width: 480px) { .jp-recommendations-banner__content { - padding-left: 16px; + padding-left: 1rem; } } .jp-recommendations-banner__logo { - margin: 32px 32px 0 32px; + margin: 2.5rem 2rem 0 2.5rem; } @media (max-width: 480px) { .jp-recommendations-banner__logo { - margin: 16px 16px 32px 16px; + margin: 1rem 1rem 2rem 1rem; } } .jp-recommendations-banner__question { + margin: 2rem 2rem 0 2rem; + color: var(--jp-gray-80); font-size: 1.5rem; line-height: 1.4; - margin: 32px 32px 0 32px; } @media (max-width: 480px) { .jp-recommendations-banner__question { - margin: 0 16px 32px 16px; + margin: 0 1rem 2rem 1rem; } } .jp-recommendations-banner__description { - font-size: 16px; - margin: 32px 32px 24px 0; + margin: 1.5rem 2rem 2rem 0; + color: var(--jp-gray-100); + font-size: 1rem; } @media (min-width: 1152px) { .jp-recommendations-banner__description { @@ -81,29 +314,29 @@ } @media (max-width: 660px) { .jp-recommendations-banner__description { - margin: 32px 32px 24px 32px; + margin: 2rem 2rem 1.5rem 2rem; } } @media (max-width: 480px) { .jp-recommendations-banner__description { - margin: 0 16px 16px 16px; + margin: 0 1rem 1rem 1rem; } } .jp-recommendations-banner__answer { max-width: 600px; text-align: center; - margin: 0 32px 32px 0; + margin: 0 2rem 2rem 0; } @media (max-width: 480px) { .jp-recommendations-banner__answer { - margin: 0 16px 16px 0; + margin: 0 1rem 1rem 0; } } .jp-recommendations-banner__checkboxes { display: grid; - gap: 16px; + gap: 1rem; grid-template-rows: auto auto; grid-template-columns: auto auto; } @@ -118,62 +351,82 @@ display: flex; align-items: center; box-sizing: border-box; - border: 1px solid #d5d5d5; - border-radius: 4px; + border: 1px solid #c3c4c7; + border-radius: 2px; cursor: pointer; - background: white; + background: #fff; } .jp-recommendations-answer__checkbox-label.checked { - background: #f8fbff; - border: 1px solid #3582c4; + background: #f6f7f7; +} +.jp-recommendations-answer__checkbox-label input[type=checkbox] { + width: 20px; + height: 20px; + border: 1px solid #000; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03); + border-radius: 2px; +} +.jp-recommendations-answer__checkbox-label.checked input[type=checkbox]::before { + width: 18px; + height: 18px; + margin: 0; + background-color: #000; + content: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M14.7791%204.00004L7.36198%2013.9753L3.06108%2010.7773%22%20stroke%3D%22white%22%2F%3E%3C%2Fsvg%3E"); } .jp-recommendations-answer__checkbox-label input { - margin: 16px 16px 16px 8px; + margin: 1rem 1rem 1rem 0.5rem; } .jp-recommendations-answer__title { - margin-left: 8px; - padding: 15px 0; + margin-left: 0.5rem; + padding: 1rem 0; text-align: right; } .jp-recommendations-banner__form { - margin-bottom: 16px; + margin-bottom: 2rem; } .jp-recommendations-banner__continue-button { - background: #2271b1; - border-color: #2271b1; - color: white; + background: #000; + border-color: #000; + color: #fff; border-style: solid; border-width: 1px; + border-radius: 4px; cursor: pointer; display: inline-block; - margin: 0 0 8px 0; + margin: 0; outline: 0; overflow: hidden; font-size: 0.875rem; + font-weight: 600; text-overflow: ellipsis; vertical-align: top; box-sizing: border-box; - border-radius: 3px; - padding: 7px 14px 9px; + padding: 0.625rem 1.5rem; + transition: all 150ms ease-in-out; } @media (max-width: 480px) { .jp-recommendations-banner__continue-button { width: 100%; } } -.jp-recommendations-banner__continue-button:hover { - background: #0a4b78; - border-color: #0a4b78; - color: white; +.jp-recommendations-banner__continue-button:hover, .jp-recommendations-banner__continue-button:active { + background: var(--jp-gray-80); + border-color: var(--jp-gray-80); + color: var(--jp-white); +} +.jp-recommendations-banner__continue-button:focus { + box-shadow: none; + outline: solid 1px var(--jp-black); + outline-offset: 1px; } .jp-recommendations-banner__continue-description { color: #646970; - margin: 24px auto 0 auto; - max-width: 300px; + margin: 0.875rem auto 0 auto; + max-width: 360px; } @media (max-width: 480px) { .jp-recommendations-banner__continue-description { @@ -182,12 +435,13 @@ } .jp-recommendations-banner__illustration-container { + background: radial-gradient(circle at 60%, rgba(6, 158, 8, 0.15) 0%, rgba(255, 255, 255, 0) 75%), radial-gradient(circle at 30% 80%, rgba(206, 217, 242, 0.5) 5%, rgba(255, 255, 255, 0) 25%), radial-gradient(circle at 50% 15%, rgba(245, 230, 179, 0.5) 0%, rgba(255, 255, 255, 0) 35%); width: 100%; position: relative; } .jp-recommendations-banner__illustration-container img { position: absolute; - bottom: 0; + top: 15px; left: 0; } @media (min-width: 1152px) { @@ -206,36 +460,42 @@ } } -.jp-recommendations-banner__illustration-background { - width: 100%; - max-height: 480px; -} - .jp-recommendations-banner__illustration-foreground { - width: 75%; - margin: 10%; + width: 100%; + max-width: 495px; } .jp-recommendations-banner__notice-dismiss { - background: 100% 0; + position: absolute; + top: 0; + left: 0; + z-index: 1; + display: flex; + align-items: center; + margin: 1.5rem 1rem 1rem; + padding: 1rem; + background: none; border: none; - color: #3c434a; + color: #646970; + font-size: 1rem; + line-height: 1; cursor: pointer; - display: flex; - font-size: 16px; - line-height: 1.5; - margin: 0; - padding: 32px 0 32px 32px; - float: left; +} +@media (max-width: 480px) { + .jp-recommendations-banner__notice-dismiss { + margin-top: 0; + } } .jp-recommendations-banner__notice-dismiss:hover, .jp-recommendations-banner__notice-dismiss:active { color: #101517; } .jp-recommendations-banner__notice-dismiss:hover .jp-recommendations-banner__svg-dismiss, .jp-recommendations-banner__notice-dismiss:active .jp-recommendations-banner__svg-dismiss { - fill: #101517; + fill: currentColor; +} +.jp-recommendations-banner__notice-dismiss:focus { + outline-color: #101517; } .jp-recommendations-banner__notice-dismiss .jp-recommendations-banner__svg-dismiss { - fill: #3c434a; - margin-left: 4px; + margin-inline-end: 0.25rem; + fill: currentColor; } -/*# sourceMappingURL=jetpack-recommendations-banner-rtl.css.map */ |