diff options
Diffstat (limited to 'plugins/jetpack/css/jetpack-banners.css')
-rw-r--r-- | plugins/jetpack/css/jetpack-banners.css | 187 |
1 files changed, 98 insertions, 89 deletions
diff --git a/plugins/jetpack/css/jetpack-banners.css b/plugins/jetpack/css/jetpack-banners.css index 387105d4..fc8a2549 100644 --- a/plugins/jetpack/css/jetpack-banners.css +++ b/plugins/jetpack/css/jetpack-banners.css @@ -62,43 +62,38 @@ https://github.com/thoughtbot/bourbon position: absolute; top: 0; right: 0; - bottom: 0; + bottom: 1.25rem; left: 0; z-index: 9999; - background: rgba(243, 246, 248, 0.95); + background: #f1f1f1; text-align: center; - padding: 2rem; } -@media (min-width: 782px) { - .jetpack-disconnected .jp-connect-full__container { - left: -20px; - } +.jetpack-disconnected .jp-connect-full__container .jp-connect-full__container-card { + padding: 3rem 4rem 6rem; + background: white; + margin: 1em; } -.jp-connect-full__svg-jupiter { - position: absolute; - right: 0; - top: 5rem; - opacity: .90; +.jetpack-disconnected .jp-connect-full__container .jp-connect-full__container-card img.jetpack-logo { + width: 160px; } -@media (max-width: 782px) { - .jp-connect-full__svg-jupiter { - display: none; - } +.jetpack-disconnected .jp-connect-full__container .jp-connect-full__container-card img.support-characters { + margin-top: 1.5rem; + width: 50%; } -.jp-connect-full__svg-stars { - position: absolute; - left: 6.25rem; - top: 6.25rem; - opacity: .90; +.jetpack-disconnected .jp-connect-full__container h4 { + line-height: 1.25; + font-size: 1.375rem; + font-weight: normal; + margin: 1em 0; } -@media (max-width: 782px) { - .jp-connect-full__svg-stars { - display: none; +@media (min-width: 782px) { + .jetpack-disconnected .jp-connect-full__container { + left: -20px; } } @@ -118,74 +113,39 @@ https://github.com/thoughtbot/bourbon } } -.jp-connect-full__step-header-logos { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-pack: center; - justify-content: center; -} - -.jp-connect-full__step-header-logos .jp-connect-full__svg-jetpack, -.jp-connect-full__step-header-logos .jp-connect-full__svg-jetpack { - fill: #87a6bc; -} - -.jp-connect-full__step-header-logos .jp-connect-full__svg-sync { - fill: #2e4453; - margin: 0 1rem; -} - -@media (max-width: 600px) { - .jp-connect-full__step-header-logos { - padding-top: 2rem; - } -} - -.jp-connect-full__step-header-title { - padding: 1rem; - font-size: 1.5rem; - line-height: 1.25; - color: #2e4453; - font-weight: 400; -} - -.jp-connect-full__card { - padding: 0; +.jp-connect-full__step-header { + max-width: 700px; margin: 0 auto; - box-shadow: 0 0 0 1px rgba(200, 215, 225, 0.5), 0 1px 2px #e9eff3; - background: white; - max-width: 34.375rem; + line-height: 1.5; } -.jp-connect-full__card-inner { - padding: 1rem; +.jp-connect-full__step-header h2 { + margin: 1.5rem 0 0; + font-size: 1.375rem; + font-weight: bold; + color: black; } -.jp-connect-full__card-description { - font-size: 0.875rem; - color: #2e4453; +.jp-connect-full__step-header h3 { + color: #537994; + font-size: 1rem; + font-weight: normal; + margin: 0.625rem 0 1.5rem; } -.jp-connect-full__card-footer { - background: #f3f6f8; - padding: 1rem; - box-shadow: 0 0 0 1px rgba(200, 215, 225, 0.5), 0 1px 2px #e9eff3; +.jp-connect-full__step-header.bottom { + margin-top: 5rem; } .jp-connect-full__tos-blurb { font-size: 0.6875rem; - margin: 0 auto 1rem; - max-width: 24.0625rem; - color: #2e4453; + margin: 0 auto 1.5rem; + color: #537994; } -.jp-connect-full__tos-a { +.jp-connect-full__tos-blurb a { text-decoration: none; - color: #0087be; + color: #00BE28; } .jp-connect-full__button-container { @@ -202,22 +162,71 @@ https://github.com/thoughtbot/bourbon border-color: #008b1d; } -.jp-connect-full__help-button { - display: inline-block; - text-decoration: none; - color: #87a6bc; - padding: 1rem; +.jp-connect-full__dismiss { + cursor: pointer; } -.jp-connect-full__help-button .gridicon { - width: 1.125rem; - height: 1.125rem; - position: relative; - top: 4px; +.jp-connect-full__dismiss-paragraph { + font-size: .6875rem; } -.jp-connect-full__dismiss { +.jp-connect-full__dismiss-paragraph a { cursor: pointer; + color: #537994; + text-decoration: none; +} + +.jp-connect-full__dismiss-paragraph a:hover { + text-decoration: underline; +} + +.jp-connect-full__slide { + max-width: 750px; + margin: 4em auto; + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-pack: stretch; + justify-content: stretch; +} + +.jp-connect-full__slide .jp-connect-full__slide-card { + -ms-flex: 1; + flex: 1; + text-align: left; +} + +.jp-connect-full__slide .illustration img { + margin: 2.5em 1em; + display: block; +} + +@media (min-width: 600px) { + .jp-connect-full__slide .illustration img { + margin: 2.5em auto; + width: 75%; + } +} + +.jp-connect-full__step-support { + max-width: 700px; + margin: 0 auto; + line-height: 1.25; +} + +.jp-connect-full__step-support h2 { + margin: 1rem 0 0; + font-size: 1.375rem; + font-weight: normal; + color: black; +} + +.jp-connect-full__step-support h3 { + color: #537994; + font-size: 1rem; + font-weight: normal; + margin: 0.625rem 0 1.5rem; } .updated.jp-wpcom-connect__container { |