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. git-svn-id: https://develop.svn.wordpress.org/trunk@40839 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Konstantin Obenland
parent
ed40010daa
commit
7bfc57f000
|
|
@ -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
|
||||
----------------------------------------------- */
|
||||
|
|
|
|||
|
|
@ -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
|
||||
----------------------------------------------- */
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1554,6 +1554,11 @@ img.aligncenter {
|
|||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.textwidget ul,
|
||||
.textwidget ol {
|
||||
margin-left: 1.6em;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 12.0 Content
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
-------------------------------------------------------------- */
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
* ----------------------------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
----------------------------------------------- */
|
||||
|
||||
|
|
|
|||
|
|
@ -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 );
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue