diff options
Diffstat (limited to 'plugins/jetpack/css/jetpack-banners.css')
| -rw-r--r-- | plugins/jetpack/css/jetpack-banners.css | 328 |
1 files changed, 13 insertions, 315 deletions
diff --git a/plugins/jetpack/css/jetpack-banners.css b/plugins/jetpack/css/jetpack-banners.css index 38628f11..1432f2e6 100644 --- a/plugins/jetpack/css/jetpack-banners.css +++ b/plugins/jetpack/css/jetpack-banners.css @@ -2,329 +2,27 @@ * Do not modify this file directly. It is compiled Sass code. * @see: jetpack/_inc/jetpack.scss */ -#message.jp-identity-crisis { - display: table; - padding: 0; - background: #d94f4f; - border: none; - color: #fff; -} -#message.jp-identity-crisis .service-mark { - display: table-cell; - vertical-align: middle; - padding: 0 20px; -} -#message.jp-identity-crisis .service-mark:before { - font-family: "jetpack" !important; - content: "\f102"; - font-size: 40px; - line-height: 1; - color: #fff; -} -#message.jp-identity-crisis .jp-id-banner__content { - display: table; - padding: 10px 10px 10px 0; -} -#message.jp-identity-crisis .jp-id-banner__content .success-notice { - color: #fff; -} -#message.jp-identity-crisis .jp-id-banner__content .banner-content { - display: table-row; -} -#message.jp-identity-crisis .jp-id-banner__content .banner-content p { - margin: 0; - font-size: 13px; - color: #fff; - opacity: 1.0; -} -#message.jp-identity-crisis .jp-id-banner__content .banner-content p strong { - text-decoration: none; - font-weight: 600; - color: #fff; - opacity: 1.0; -} -#message.jp-identity-crisis .jp-id-banner__content .banner-content a { - display: inline-block; - color: rgba(255, 255, 255, 0.8); - border-bottom: 1px solid rgba(255, 255, 255, 0.5); - text-decoration: none; - -webkit-transform: all 1s ease; -} -#message.jp-identity-crisis .jp-id-banner__content .jp-btn-group { - display: table-row; -} -#message.jp-identity-crisis .jp-id-banner__content .jp-btn-group a { - display: inline-block; - margin: 10px 0 0 0; - padding: 0 0 1px 0; - color: rgba(255, 255, 255, 0.8); - border-bottom: 1px solid rgba(255, 255, 255, 0.5); - text-decoration: none; - -webkit-transform: all 1s ease; -} -#message.jp-identity-crisis .jp-id-banner__content .jp-btn-group a:hover { - color: white; - border-bottom: 1px solid rgba(255, 255, 255, 0.8); -} -#message.jp-identity-crisis .jp-id-banner__content .jp-btn-group .idc-separator { - margin: 0 6px; -} - -#message.jp-banner { +.updated.jp-banner { position: relative; - margin-bottom: 26px; - padding: 17px 44px 17px 0; - border: none; - background: #81a844; - color: #fff; - overflow: hidden; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -#message.jp-banner:after { - content: ''; - position: absolute; - bottom: 0; - right: -100px; - width: 100%; - height: 50px; - background: url("../images/the-footcloud.svg") right bottom no-repeat; - pointer-events: none; - z-index: 1; -} -@media (max-width: 830px) { - #message.jp-banner:after { - display: none; - } -} -#message.jp-banner a { - color: #fff; -} -#message.jp-banner h2 { - display: block; - margin: 0; - padding: 0; - color: #fff; - font-size: 20px; - line-height: 1.3; - font-weight: normal; -} -#message.jp-banner h2 + p { - margin-top: 10px; -} - -.jp-banner a { - padding: 0; -} - -#message .jp-banner__content { - color: #dfffcc; - padding: 0 0 0 20px; - -moz-box-sizing: border-box; - box-sizing: border-box; - width: 50%; -} -@media (max-width: 768px) { - #message .jp-banner__content { - width: 100%; - } - #message .jp-banner__content.is-connection { - width: 100%; - } -} -#message .jp-banner__content a { - text-decoration: underline; - /* Medium.com text underline hack - doesn't work well on small mobile devices... reverting to traditional underline - background-image: linear-gradient(to bottom, rgba(0,0,0,0) 75%, #fff 50%); - background-repeat: repeat-x; - background-size: 2px 2px; - background-position: 0 95%; - display: inline-block; - - @media not all, only screen and (min-resolution: 2dppx), only screen and (-webkit-min-device-pixel-ratio: 2) { - background-image: linear-gradient(to bottom, rgba(0,0,0,0) 75%, #fff 75%); - background-repeat: repeat-x; - } - */ -} -#message .jp-banner__content p { - margin: 0; padding: 0; - line-height: 1.5; } - -#message .jp-banner__action-container { - position: absolute; - top: 0; - right: 0; - padding-left: 20px; - width: 50%; - height: 100%; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -@media (max-width: 768px) { - #message .jp-banner__action-container { - position: static; - margin: 14px 0 9px; - width: 100%; - } -} -#message .jp-banner__action-container.is-full-width { - position: static; - margin: 14px 0 9px; - width: 100%; - height: auto; -} -@media (max-width: 768px) { - #message .jp-banner__action-container.is-connection { - width: 100%; - } -} - -#message.is-opt-in .jp-banner__content { - width: 60%; -} -#message.is-opt-in .jp-banner__action-container { - width: 40%; -} -@media (max-width: 768px) { - #message.is-opt-in .jp-banner__content, #message.is-opt-in .jp-banner__action-container { - width: 100%; - } -} - -#message .jp-banner__button { - display: inline-block; - position: absolute; - top: 50%; - right: 125px; - margin-top: -23px; - padding: 0.57143em 0.85714em 0.38095em 0.57143em; - border-radius: 6px; - -moz-box-sizing: border-box; - box-sizing: border-box; - background: #518d2a; - box-shadow: 0 4px 0 #3e6c20, 0 2px 3px rgba(0, 0, 0, 0.2); - font: 400 1.5em/1 'Open Sans', Helvetica, sans-serif; - transition: all .1s ease-in-out; -} -@media (max-width: 1175px) { - #message .jp-banner__button { - font-size: 1.25em; - right: 110px; - } -} -@media (max-width: 830px) { - #message .jp-banner__button { - right: 45px; - } -} -@media (max-width: 768px) { - #message .jp-banner__button { - position: static; - margin: 0; - } -} -@media (max-width: 420px) { - #message .jp-banner__button { - display: block; - width: 100%; - text-align: center; - font-size: 1.1em; - right: 0; - } -} -#message .jp-banner__button:hover, #message .jp-banner__button:focus { - box-shadow: 0 4px 0 #3e6c20, 0 2px 3px rgba(0, 0, 0, 0.2); -} -#message .jp-banner__button:active { - outline: none; - -webkit-transform: translateY(2px); - -ms-transform: translateY(2px); - transform: translateY(2px); - box-shadow: 0 0px 0 #3e6c20, 0 0 0 rgba(0, 0, 0, 0.2); +.updated .jp-banner__header { + font-size: 18px; + font-weight: 400; + margin-top: 0; } -#message .jp-banner__button:active:after { - top: -2px; -} -#message .jp-banner__button:before { - content: ''; - display: inline-block; - position: relative; - vertical-align: middle; - background: url("../images/connect-plug.svg") center center no-repeat; - background-size: 100%; - top: -2px; - margin-right: 13px; - width: 22px; - height: 22px; -} -@media (max-width: 420px) { - #message .jp-banner__button:before { - display: none; - } -} - -#message .is-full-width .jp-banner__button { - position: static; - margin: 0; +.updated .jp-banner__button-container { + padding: 12px 0 0; } -#message .is-opt-in .jp-banner__button:before { - content: "\f147"; - width: 20px; - height: 20px; - background: none; - font: normal 20px/1 Dashicons; +.jp-banner .notice-dismiss { + text-decoration: none; } -#message .jp-banner__dismiss { - position: absolute; - top: 0; - right: 0; - width: 44px; - height: 44px; - text-align: center; - z-index: 99; -} -#message .jp-banner__dismiss:before { - color: #a7c979; - content: '\f158'; - font: normal 20px/44px 'dashicons'; -} -#message .jp-banner__dismiss:hover { - opacity: 0.8; -} -#message .jp-banner__dismiss:active { - opacity: 1; - outline: none; +.jp-banner__description { + font-size: 14px; } -#message.jp-banner.protect-error { - background: #fff; - border-left: 4px #d94f4f solid; -} -#message.jp-banner.protect-error .jp-banner__content { - color: #444; -} -#message.jp-banner.protect-error .jp-banner__content h2, #message.jp-banner.protect-error .jp-banner__content a { - color: #d94f4f; -} -#message.jp-banner.protect-error .jp-banner__content a:hover { - color: #d43a3a; -} -#message.jp-banner.protect-error .jp-banner__button { - background: #d94f4f; - box-shadow: none; - color: #fff; -} -#message.jp-banner.protect-error .jp-banner__button:hover, #message.jp-banner.protect-error .jp-banner__button:focus, #message.jp-banner.protect-error .jp-banner__button:active { - box-shadow: none; -} -#message.jp-banner.protect-error .jp-banner__button:hover { - background: #d43a3a; -} -#message.jp-banner.protect-error .jp-banner__dismiss:before { - color: #a0a5aa; +.jp-banner__description-container { + padding: 16px; } |