Default themes: Improve styles for 4.8 widgets

Mostly adds styles for lists and mediaelement.js instances within widgets.
Adds size classname to image widget so themes can customize their display.

Props Soean, obenland, celloexpressions, ocean90, karmatosed.
Fixes #40745.


Built from https://develop.svn.wordpress.org/trunk@40839


git-svn-id: http://core.svn.wordpress.org/trunk@40690 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Konstantin Obenland 2017-05-25 15:19:42 +00:00
parent 25c2b2cab7
commit 71cd7287ba
15 changed files with 236 additions and 37 deletions

View File

@ -377,6 +377,10 @@ section.recent-posts .other-recent-posts .comments-link > span {
margin-left: -10px;
text-align: left;
}
.widget_text ul,
.widget_text ol {
margin: 0 2.5em 1.625em 0;
}
/* =Comments
----------------------------------------------- */

View File

@ -1908,12 +1908,18 @@ section.ephemera .entry-title a span {
}
/* Widget Image */
.widget_image img {
.widget_image img,
.widget_media_image img {
border: 0;
padding: 0;
height: auto;
max-width: 100%;
}
@media (min-width: 1024px) {
.widget_media_image .size-thumbnail {
padding: 6px;
}
}
/* Calendar Widget */
@ -1945,6 +1951,18 @@ section.ephemera .entry-title a span {
border-bottom: 1px solid #ccc;
}
/* Text Widget */
.widget_text ul,
.widget_text ol {
margin: 0 0 1.625em 2.5em;
}
.widget_text ul ul,
.widget_text ol ol,
.widget_text ul ol,
.widget_text ol ul {
margin-bottom: 0;
}
/* =Comments
----------------------------------------------- */

View File

@ -288,6 +288,11 @@ img.alignleft {
margin: 0.7667em 0.8em 0 0;
}
.textwidget ul,
.textwidget ol {
margin-left: 0;
margin-right: 1.6em;
}
/**
* 10.0 Content

View File

@ -1554,6 +1554,11 @@ img.aligncenter {
border-bottom: 0;
}
.textwidget ul,
.textwidget ol {
margin-left: 1.6em;
}
/**
* 12.0 Content

View File

@ -335,6 +335,10 @@ td {
margin: 0 20px 0 0;
}
.widget_text ul,
.widget_text ol {
margin: 0 10px 12px 0;
}
/**
* 7.2 Content Sidebar Widgets

View File

@ -1347,55 +1347,70 @@ a.post-thumbnail:hover {
/* Mediaelements */
.hentry .mejs-container {
.hentry .mejs-container,
.widget .mejs-container {
margin: 12px 0 18px;
}
.hentry .mejs-mediaelement,
.hentry .mejs-container .mejs-controls {
.widget .mejs-mediaelement,
.hentry .mejs-container .mejs-controls,
.widget .mejs-container .mejs-controls {
background: #000;
}
.hentry .mejs-controls .mejs-time-rail .mejs-time-loaded,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
.widget .mejs-controls .mejs-time-rail .mejs-time-loaded,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
.widget .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
background: #fff;
}
.hentry .mejs-controls .mejs-time-rail .mejs-time-current {
.hentry .mejs-controls .mejs-time-rail .mejs-time-current,
.widget .mejs-controls .mejs-time-rail .mejs-time-current {
background: #24890d;
}
.hentry .mejs-controls .mejs-time-rail .mejs-time-total,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
.widget .mejs-controls .mejs-time-rail .mejs-time-total,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.widget .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
background: rgba(255, 255, 255, .33);
}
.hentry .mejs-container .mejs-controls .mejs-time {
.hentry .mejs-container .mejs-controls .mejs-time,
.widget .mejs-container .mejs-controls .mejs-time {
padding-top: 9px;
}
.hentry .mejs-controls .mejs-time-rail span,
.widget .mejs-controls .mejs-time-rail span,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
.widget .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
.widget .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
border-radius: 0;
}
.hentry .mejs-overlay-loading {
.hentry .mejs-overlay-loading,
.widget .mejs-overlay-loading {
background: transparent;
}
.hentry .mejs-overlay-button {
.hentry .mejs-overlay-button,
.widget .mejs-overlay-button {
background-color: #fff;
background-image: none;
border-radius: 2px;
box-shadow: 1px 1px 1px rgba(0,0,0,.8);
color: #000;
height: 36px;
margin-left: -24px;
margin: -28px 0 0 -24px; /* Keep centered on video (container includes visible controls bar) */
width: 48px;
}
.hentry .mejs-overlay-button:before {
.hentry .mejs-overlay-button:before,
.widget .mejs-overlay-button:before {
-webkit-font-smoothing: antialiased;
content: '\f452';
display: inline-block;
@ -1405,11 +1420,13 @@ a.post-thumbnail:hover {
left: 10px;
}
.hentry .mejs-controls .mejs-button button:focus {
.hentry .mejs-controls .mejs-button button:focus,
.widget .mejs-controls .mejs-button button:focus {
outline: none;
}
.hentry .mejs-controls .mejs-button button {
.hentry .mejs-controls .mejs-button button,
.widget .mejs-controls .mejs-button button {
-webkit-font-smoothing: antialiased;
background: none;
color: #fff;
@ -1417,15 +1434,18 @@ a.post-thumbnail:hover {
font: normal 16px/1 Genericons;
}
.hentry .mejs-playpause-button.mejs-play button:before {
.hentry .mejs-playpause-button.mejs-play button:before,
.widget .mejs-playpause-button.mejs-play button:before {
content: '\f452';
}
.hentry .mejs-playpause-button.mejs-pause button:before {
.hentry .mejs-playpause-button.mejs-pause button:before,
.widget .mejs-playpause-button.mejs-pause button:before {
content: '\f448';
}
.hentry .mejs-volume-button.mejs-mute button:before {
.hentry .mejs-volume-button.mejs-mute button:before,
.widget .mejs-volume-button.mejs-mute button:before {
content: '\f109';
font-size: 20px;
position: absolute;
@ -1433,6 +1453,7 @@ a.post-thumbnail:hover {
left: 0;
}
.widget .mejs-volume-button.mejs-unmute button:before,
.hentry .mejs-volume-button.mejs-unmute button:before {
content: '\f109';
left: 0;
@ -1440,20 +1461,24 @@ a.post-thumbnail:hover {
top: 0;
}
.hentry .mejs-fullscreen-button button:before {
.hentry .mejs-fullscreen-button button:before,
.widget .mejs-fullscreen-button button:before {
content: '\f474';
}
.hentry .mejs-fullscreen-button.mejs-unfullscreen button:before {
.hentry .mejs-fullscreen-button.mejs-unfullscreen button:before,
.widget .mejs-fullscreen-button.mejs-unfullscreen button:before {
content: '\f406';
}
.hentry .mejs-overlay:hover .mejs-overlay-button {
.hentry .mejs-overlay:hover .mejs-overlay-button,
.widget .mejs-overlay:hover .mejs-overlay-button {
background-color: #24890d;
color: #fff;
}
.hentry .mejs-controls .mejs-button button:hover {
.hentry .mejs-controls .mejs-button button:hover,
.widget .mejs-controls .mejs-button button:hover {
color: #41a62a;
}
@ -2526,7 +2551,8 @@ a.post-thumbnail:hover {
.widget_nav_menu li,
.widget_pages li,
.widget_recent_comments li,
.widget_recent_entries li {
.widget_recent_entries li,
.widget_text li {
border-top: 1px solid rgba(255, 255, 255, 0.2);
padding: 8px 0 9px;
}
@ -2538,7 +2564,8 @@ a.post-thumbnail:hover {
.widget_nav_menu li:first-child,
.widget_pages li:first-child,
.widget_recent_comments li:first-child,
.widget_recent_entries li:first-child {
.widget_recent_entries li:first-child,
.widget_text li {
border-top: 0;
}
@ -2551,7 +2578,8 @@ a.post-thumbnail:hover {
.widget_categories li li:last-child,
.widget_nav_menu li li:last-child,
.widget_pages li li:last-child {
.widget_pages li li:last-child,
.widget_text li li:last-child {
padding-bottom: 0;
}
@ -2589,6 +2617,24 @@ a.post-thumbnail:hover {
margin-bottom: 0;
}
.widget_text ul,
.widget_text ol {
margin: 0 0 12px 10px;
}
.widget_text li > ul,
.widget_text li > ol {
margin-bottom: 0;
}
.widget_text ul {
list-style: disc inside;
}
.widget_text ol {
list-style: decimal inside;
}
/**
* 7.2 Content Sidebar Widgets
@ -2716,7 +2762,8 @@ a.post-thumbnail:hover {
.content-sidebar .widget_recent_entries li,
.content-sidebar .widget_categories li ul,
.content-sidebar .widget_nav_menu li ul,
.content-sidebar .widget_pages li ul {
.content-sidebar .widget_pages li ul,
.content-sidebar .widget_text li ul {
border-color: rgba(0, 0, 0, 0.1);
}
@ -3973,7 +4020,8 @@ a.post-thumbnail:hover {
.primary-sidebar .widget_nav_menu li,
.primary-sidebar .widget_pages li,
.primary-sidebar .widget_recent_comments li,
.primary-sidebar .widget_recent_entries li {
.primary-sidebar .widget_recent_entries li,
.primary-sidebar .widget_text li {
border-top: 0;
padding: 0 0 6px;
}
@ -3993,7 +4041,8 @@ a.post-thumbnail:hover {
.primary-sidebar .widget_nav_menu li:last-child,
.primary-sidebar .widget_pages li:last-child,
.primary-sidebar .widget_recent_comments li:last-child,
.primary-sidebar .widget_recent_entries li:last-child {
.primary-sidebar .widget_recent_entries li:last-child,
.primary-sidebar .widget_text li:last-child {
padding: 0;
}
@ -4002,7 +4051,8 @@ a.post-thumbnail:hover {
.footer-sidebar .widget_pages li ul,
.primary-sidebar .widget_categories li ul,
.primary-sidebar .widget_nav_menu li ul,
.primary-sidebar .widget_pages li ul {
.primary-sidebar .widget_pages li ul,
.primary-sidebar .widget_text li ul {
border-top: 0;
margin-top: 6px;
}

View File

@ -242,6 +242,14 @@ input[type="checkbox"] {
padding-right: 1.5rem;
}
.widget_text ul {
margin: 0 1.5em 1.5em 0;
}
.widget_text ul li ul {
margin: 0 1.5em 0 0;
}
/* Footer */
.social-navigation a {

View File

@ -2533,7 +2533,8 @@ h2.widget-title {
margin: 0;
}
.widget ul li {
.widget ul li,
.widget ol li {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
padding: 0.5em 0;
@ -2594,6 +2595,42 @@ h2.widget-title {
word-wrap: break-word;
}
.widget_text ul {
list-style: disc;
margin: 0 0 1.5em 1.5em;
}
.widget_text ol {
list-style: decimal;
}
.widget_text ul li,
.widget_text ol li {
border: none;
}
.widget_text ul li:last-child,
.widget_text ol li:last-child {
padding-bottom: 0;
}
.widget_text ul li ul {
margin: 0 0 0 1.5em;
}
.widget_text ul li li {
padding-left: 0;
padding-right: 0;
}
.widget_text ol li {
list-style-position: inside;
}
.widget_text ol li + li {
margin-top: -1px;
}
/* RSS Widget */
.widget_rss .widget-title .rsswidget:first-child {

View File

@ -265,6 +265,10 @@ div.menu li{
margin-right: 1.3em;
margin-left: 0;
}
.widget_text ol {
margin-left: auto;
margin-right: 1.3em;
}
/* =Footer
-------------------------------------------------------------- */

View File

@ -1222,6 +1222,22 @@ h3#reply-title {
width: 11px;
height: 11px;
}
.widget_text ul,
.widget_text ol {
margin-bottom: 1.5em;
}
.widget_text ol {
margin-left: 1.3em;
}
.widget_text ul ul,
.widget_text ol ol,
.widget_text ul ol,
.widget_text ol ul {
margin-bottom: 0;
}
.widget_media_video video {
max-width: 100%;
}
/* Main sidebars */
#main .widget-area ul {

View File

@ -535,6 +535,12 @@ div.nav-menu > ul {
margin-right: 20px;
}
.widget_text ul,
.widget_text ol {
padding-left: auto;
padding-right: 20px;
}
/**
* 7.0 Footer
* ----------------------------------------------------------------------------

View File

@ -1228,27 +1228,37 @@ footer.entry-meta {
/* Mediaelements */
.hentry .mejs-mediaelement,
.hentry .mejs-container .mejs-controls {
.widget .mejs-mediaelement,
.hentry .mejs-container .mejs-controls,
.widget .mejs-container .mejs-controls {
background: #220e10;
}
.hentry .mejs-controls .mejs-time-rail .mejs-time-loaded,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
.widget .mejs-controls .mejs-time-rail .mejs-time-loaded,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
.widget .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
background: #fff;
}
.hentry .mejs-controls .mejs-time-rail .mejs-time-current {
.hentry .mejs-controls .mejs-time-rail .mejs-time-current,
.widget .mejs-controls .mejs-time-rail .mejs-time-current {
background: #ea9629;
}
.hentry .mejs-controls .mejs-time-rail .mejs-time-total,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
.widget .mejs-controls .mejs-time-rail .mejs-time-total,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.widget .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
background: #595959;
}
.hentry .mejs-controls .mejs-time-rail span,
.widget .mejs-controls .mejs-time-rail span,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
.widget .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
.widget .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
border-radius: 0;
}
@ -2551,6 +2561,30 @@ footer.entry-meta {
background-color: transparent;
}
/* Text widget */
.widget_text ul,
.widget_text ol {
padding-left: 20px;
margin-bottom: 16px;
}
.widget_text li:last-child {
padding-bottom: 0;
}
.widget_text li > ul,
.widget_text li > ol {
margin-bottom: 0;
}
.widget_text ul {
list-style: square;
}
.widget_text ol {
list-style: decimal;
}
/**
* 7.0 Footer

View File

@ -642,11 +642,19 @@ section[role="banner"] {
margin-bottom: 24px;
margin-bottom: 1.714285714rem;
}
.widget-area .textwidget ul {
.widget-area .textwidget ul,
.widget-area .textwidget ol {
list-style: disc outside;
margin: 0 0 24px;
margin: 0 0 1.714285714rem;
}
.widget-area .textwidget li > ul,
.widget-area .textwidget li > ol {
margin-bottom: 0;
}
.widget-area .textwidget ol {
list-style: decimal;
}
.widget-area .textwidget li {
margin-left: 36px;
margin-left: 2.571428571rem;
@ -1443,7 +1451,6 @@ a.comment-edit-link:hover {
text-align: right;
}
/* =Plugins
----------------------------------------------- */

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.8-beta2-40838';
$wp_version = '4.8-beta2-40839';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.

View File

@ -201,6 +201,7 @@ class WP_Widget_Media_Image extends WP_Widget_Media {
if ( 'custom' === $size || ! in_array( $size, array_merge( get_intermediate_image_sizes(), array( 'full' ) ), true ) ) {
$size = array( $instance['width'], $instance['height'] );
}
$image_attributes['class'] .= sprintf( ' attachment-%1$s size-%1$s', is_array( $size ) ? join( 'x', $size ) : $size );
$image = wp_get_attachment_image( $attachment->ID, $size, false, $image_attributes );