diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index 256a51f795..133713fbfd 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -674,17 +674,46 @@ table.form-table td .updated p { line-height: 24px; } -.pressthis { - margin: 20px 0; +/* Card styles */ + +.card { + position: relative; + margin-top: 20px; + padding: 0.7em 2em 1em; + min-width: 255px; + max-width: 520px; + border: 1px solid #e5e5e5; + -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04); + box-shadow: 0 1px 1px rgba(0,0,0,0.04); + background: #fff; +} + +/* Press this styles */ + +.pressthis h4 { + margin: 2em 0 1em; +} + +.pressthis textarea { + width: 100%; + font-size: 1em; +} + +#pressthis-code-wrap { + overflow: auto; +} + +.pressthis-bookmarklet-wrapper { + margin: 20px 0 8px; vertical-align: top; position: relative; z-index: 1; } -.pressthis a, -.pressthis a:hover, -.pressthis a:focus, -.pressthis a:active { +.pressthis-bookmarklet, +.pressthis-bookmarklet:hover, +.pressthis-bookmarklet:focus, +.pressthis-bookmarklet:active { display: inline-block; position: relative; cursor: move; @@ -699,35 +728,11 @@ table.form-table td .updated p { text-decoration: none; } -.pressthis a:active { +.pressthis-bookmarklet:active { outline: none; } -.pressthis a:hover:after { - -webkit-transform: skew(20deg) rotate(9deg); - -ms-transform: skew(20deg) rotate(9deg); - transform: skew(20deg) rotate(9deg); - -webkit-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7); - box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7); -} - -.pressthis a span { - display: inline-block; - margin: 0px 0 0; - padding: 0px 12px 8px 9px; -} - -.pressthis a span:before { - color: #777; - font: normal 20px/1 'dashicons'; - content:'\f157'; - position: relative; - display: inline-block; - top: 4px; - margin-right: 4px; -} - -.pressthis a:after { +.pressthis-bookmarklet:after { content: ''; width: 70%; height: 55%; @@ -743,62 +748,55 @@ table.form-table td .updated p { box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6); } -.pressthis .button { +.pressthis-bookmarklet:hover:after { + -webkit-transform: skew(20deg) rotate(9deg); + -ms-transform: skew(20deg) rotate(9deg); + transform: skew(20deg) rotate(9deg); + -webkit-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7); + box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7); +} + +.pressthis-bookmarklet span { + display: inline-block; + margin: 0px 0 0; + padding: 0px 12px 8px 9px; +} + +.pressthis-bookmarklet span:before { + color: #777; + font: normal 20px/1 'dashicons'; + content:'\f157'; + position: relative; + display: inline-block; + top: 4px; + margin-right: 4px; +} + +.pressthis-js-toggle { margin-left: 10px; padding: 0; height: auto; vertical-align: top; } -.pressthis button .dashicons { +.pressthis-js-toggle .dashicons { margin: 5px 8px 6px 7px; color: #777; } -.press-this-install { - margin: 20px 0 0 0; - padding: 0.7em 2em 1em; - max-width: 520px; -} - -.press-this-install textarea { - width: 100%; - font-size: 1em; -} - -.press-this-install h4 { - margin: 2em 0 1em; -} - /* to override the button class being applied */ -.pressthis .button.button { +.pressthis-js-toggle.button.button { margin-left: 10px; padding: 0; height: auto; vertical-align: top; } -.pressthis button .dashicons { +.pressthis-js-toggle .dashicons { margin: 5px 8px 6px 7px; color: #777; } -.press-this-install { - margin: 20px 0 0 0; - padding: 0.7em 2em 1em; - max-width: 520px; -} - -.press-this-install textarea { - width: 100%; - font-size: 1em; -} - -.press-this-install h4 { - margin: 2em 0 1em; -} - - /*------------------------------------------------------------------------------ 20.0 - Settings ------------------------------------------------------------------------------*/ diff --git a/src/wp-admin/tools.php b/src/wp-admin/tools.php index 0b28f3e2a7..be12268732 100644 --- a/src/wp-admin/tools.php +++ b/src/wp-admin/tools.php @@ -36,28 +36,26 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' ); <h2><?php echo esc_html( $title ); ?></h2> <?php if ( current_user_can('edit_posts') ) : ?> -<div class="tool-box"> - <h3 class="title"><?php _e('Press This') ?></h3> - <div class="postbox press-this-install"> - <p><?php _e( 'Press This is a little app that lets you grab bits of the web and create new posts with ease.' );?></p> - <p><?php _e( 'Use Press This to clip text, images and videos from any web page. Then edit and add more straight from Press This before you save or publish it in a post on your site.' ); ?></p> - </div> +<div class="card pressthis"> + <h3><?php _e('Press This') ?></h3> + <p><?php _e( 'Press This is a little app that lets you grab bits of the web and create new posts with ease.' );?></p> + <p><?php _e( 'Use Press This to clip text, images and videos from any web page. Then edit and add more straight from Press This before you save or publish it in a post on your site.' ); ?></p> + <form> - <div class="postbox press-this-install"> <h3><?php _e( 'Install Press This' ); ?></h3> <h4><?php _e( 'Bookmarklet' ); ?></h4> <p><?php _e( 'Drag the bookmarklet below to your bookmarks bar. Then, when you’re on a page you want to share, simply “press” it.' ); ?></p> - <p class="pressthis"> - <a class="" onclick="return false;" href="<?php echo htmlspecialchars( get_shortcut_link() ); ?>"><span><?php _e( 'Press This' ) ?></span></a> - <button type="button" class="button button-secondary js-show-pressthis-code-wrap" aria-expanded="false" aria-controls="pressthis-code-wrap"> + <p class="pressthis-bookmarklet-wrapper"> + <a class="pressthis-bookmarklet" onclick="return false;" href="<?php echo htmlspecialchars( get_shortcut_link() ); ?>"><span><?php _e( 'Press This' ); ?></span></a> + <button type="button" class="button button-secondary pressthis-js-toggle js-show-pressthis-code-wrap" aria-expanded="false" aria-controls="pressthis-code-wrap"> <span class="dashicons dashicons-clipboard"></span> <span class="screen-reader-text"><?php _e( 'Copy “Press This” bookmarklet code' ) ?></span> </button> </p> - <div class="hidden js-pressthis-code-wrap" id="pressthis-code-wrap"> + <div class="hidden js-pressthis-code-wrap clear" id="pressthis-code-wrap"> <p id="pressthis-code-desc"> <?php _e( 'If you can’t drag the bookmarklet to your bookmarks, copy the following code and create a new bookmark. Paste the code into the new bookmark’s URL field.' ) ?> </p> @@ -92,7 +90,6 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' ); }); </script> - </div> </form> </div> <?php @@ -102,7 +99,7 @@ if ( current_user_can( 'import' ) ) : $cats = get_taxonomy('category'); $tags = get_taxonomy('post_tag'); if ( current_user_can($cats->cap->manage_terms) || current_user_can($tags->cap->manage_terms) ) : ?> -<div class="tool-box"> +<div class="card"> <h3 class="title"><?php _e( 'Categories and Tags Converter' ) ?></h3> <p><?php printf( __('If you want to convert your categories to tags (or vice versa), use the <a href="%s">Categories and Tags Converter</a> available from the Import screen.'), 'import.php' ); ?></p> </div>