WordPress.org

Make WordPress Core

Changeset 40839


Ignore:
Timestamp:
05/25/17 15:18:04 (4 weeks ago)
Author:
obenland
Message:

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.

Location:
trunk/src
Files:
14 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentyeleven/rtl.css

    r32315 r40839  
    377377    margin-left: -10px; 
    378378    text-align: left; 
     379} 
     380.widget_text ul, 
     381.widget_text ol { 
     382    margin: 0 2.5em 1.625em 0; 
    379383} 
    380384 
  • trunk/src/wp-content/themes/twentyeleven/style.css

    r38171 r40839  
    19091909 
    19101910/* Widget Image */ 
    1911 .widget_image img { 
     1911.widget_image img, 
     1912.widget_media_image img { 
    19121913    border: 0; 
    19131914    padding: 0; 
    19141915    height: auto; 
    19151916    max-width: 100%; 
     1917} 
     1918@media (min-width: 1024px) { 
     1919    .widget_media_image .size-thumbnail { 
     1920        padding: 6px; 
     1921    } 
    19161922} 
    19171923 
     
    19461952} 
    19471953 
     1954/* Text Widget */ 
     1955 
     1956.widget_text ul, 
     1957.widget_text ol { 
     1958    margin: 0 0 1.625em 2.5em; 
     1959} 
     1960.widget_text ul ul, 
     1961.widget_text ol ol, 
     1962.widget_text ul ol, 
     1963.widget_text ol ul { 
     1964    margin-bottom: 0; 
     1965} 
    19481966 
    19491967/* =Comments 
  • trunk/src/wp-content/themes/twentyfifteen/rtl.css

    r34586 r40839  
    289289} 
    290290 
     291.textwidget ul, 
     292.textwidget ol { 
     293    margin-left: 0; 
     294    margin-right: 1.6em; 
     295} 
    291296 
    292297/** 
  • trunk/src/wp-content/themes/twentyfifteen/style.css

    r39496 r40839  
    15551555} 
    15561556 
     1557.textwidget ul, 
     1558.textwidget ol { 
     1559    margin-left: 1.6em; 
     1560} 
     1561 
    15571562 
    15581563/** 
  • trunk/src/wp-content/themes/twentyfourteen/rtl.css

    r32315 r40839  
    336336} 
    337337 
     338.widget_text ul, 
     339.widget_text ol { 
     340    margin: 0 10px 12px 0; 
     341} 
    338342 
    339343/** 
  • trunk/src/wp-content/themes/twentyfourteen/style.css

    r39496 r40839  
    13481348/* Mediaelements */ 
    13491349 
    1350 .hentry .mejs-container { 
     1350.hentry .mejs-container, 
     1351.widget .mejs-container { 
    13511352    margin: 12px 0 18px; 
    13521353} 
    13531354 
    13541355.hentry .mejs-mediaelement, 
    1355 .hentry .mejs-container .mejs-controls { 
     1356.widget .mejs-mediaelement, 
     1357.hentry .mejs-container .mejs-controls, 
     1358.widget .mejs-container .mejs-controls { 
    13561359    background: #000; 
    13571360} 
    13581361 
    13591362.hentry .mejs-controls .mejs-time-rail .mejs-time-loaded, 
    1360 .hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { 
     1363.widget .mejs-controls .mejs-time-rail .mejs-time-loaded, 
     1364.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current, 
     1365.widget .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { 
    13611366    background: #fff; 
    13621367} 
    13631368 
    1364 .hentry .mejs-controls .mejs-time-rail .mejs-time-current { 
     1369.hentry .mejs-controls .mejs-time-rail .mejs-time-current, 
     1370.widget .mejs-controls .mejs-time-rail .mejs-time-current { 
    13651371    background: #24890d; 
    13661372} 
    13671373 
    13681374.hentry .mejs-controls .mejs-time-rail .mejs-time-total, 
    1369 .hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total { 
     1375.widget .mejs-controls .mejs-time-rail .mejs-time-total, 
     1376.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total, 
     1377.widget .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total { 
    13701378    background: rgba(255, 255, 255, .33); 
    13711379} 
    13721380 
    1373 .hentry .mejs-container .mejs-controls .mejs-time { 
     1381.hentry .mejs-container .mejs-controls .mejs-time, 
     1382.widget .mejs-container .mejs-controls .mejs-time { 
    13741383    padding-top: 9px; 
    13751384} 
    13761385 
    13771386.hentry .mejs-controls .mejs-time-rail span, 
     1387.widget .mejs-controls .mejs-time-rail span, 
    13781388.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total, 
    1379 .hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { 
     1389.widget .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total, 
     1390.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current, 
     1391.widget .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { 
    13801392    border-radius: 0; 
    13811393} 
    13821394 
    1383 .hentry .mejs-overlay-loading { 
     1395.hentry .mejs-overlay-loading, 
     1396.widget .mejs-overlay-loading { 
    13841397    background: transparent; 
    13851398} 
    13861399 
    1387 .hentry .mejs-overlay-button { 
     1400.hentry .mejs-overlay-button, 
     1401.widget .mejs-overlay-button { 
    13881402    background-color: #fff; 
    13891403    background-image: none; 
     
    13921406    color: #000; 
    13931407    height: 36px; 
    1394     margin-left: -24px; 
     1408    margin: -28px 0 0 -24px; /* Keep centered on video (container includes visible controls bar) */ 
    13951409    width: 48px; 
    13961410} 
    13971411 
    1398 .hentry .mejs-overlay-button:before { 
     1412.hentry .mejs-overlay-button:before, 
     1413.widget .mejs-overlay-button:before { 
    13991414    -webkit-font-smoothing: antialiased; 
    14001415    content: '\f452'; 
     
    14061421} 
    14071422 
    1408 .hentry .mejs-controls .mejs-button button:focus { 
     1423.hentry .mejs-controls .mejs-button button:focus, 
     1424.widget .mejs-controls .mejs-button button:focus { 
    14091425    outline: none; 
    14101426} 
    14111427 
    1412 .hentry .mejs-controls .mejs-button button { 
     1428.hentry .mejs-controls .mejs-button button, 
     1429.widget .mejs-controls .mejs-button button { 
    14131430    -webkit-font-smoothing: antialiased; 
    14141431    background: none; 
     
    14181435} 
    14191436 
    1420 .hentry .mejs-playpause-button.mejs-play button:before { 
     1437.hentry .mejs-playpause-button.mejs-play button:before, 
     1438.widget .mejs-playpause-button.mejs-play button:before { 
    14211439    content: '\f452'; 
    14221440} 
    14231441 
    1424 .hentry .mejs-playpause-button.mejs-pause button:before { 
     1442.hentry .mejs-playpause-button.mejs-pause button:before, 
     1443.widget .mejs-playpause-button.mejs-pause button:before { 
    14251444    content: '\f448'; 
    14261445} 
    14271446 
    1428 .hentry .mejs-volume-button.mejs-mute button:before { 
     1447.hentry .mejs-volume-button.mejs-mute button:before, 
     1448.widget .mejs-volume-button.mejs-mute button:before { 
    14291449    content: '\f109'; 
    14301450    font-size: 20px; 
     
    14341454} 
    14351455 
     1456.widget .mejs-volume-button.mejs-unmute button:before, 
    14361457.hentry .mejs-volume-button.mejs-unmute button:before { 
    14371458    content: '\f109'; 
     
    14411462} 
    14421463 
    1443 .hentry .mejs-fullscreen-button button:before { 
     1464.hentry .mejs-fullscreen-button button:before, 
     1465.widget .mejs-fullscreen-button button:before { 
    14441466    content: '\f474'; 
    14451467} 
    14461468 
    1447 .hentry .mejs-fullscreen-button.mejs-unfullscreen button:before { 
     1469.hentry .mejs-fullscreen-button.mejs-unfullscreen button:before, 
     1470.widget .mejs-fullscreen-button.mejs-unfullscreen button:before { 
    14481471    content: '\f406'; 
    14491472} 
    14501473 
    1451 .hentry .mejs-overlay:hover .mejs-overlay-button { 
     1474.hentry .mejs-overlay:hover .mejs-overlay-button, 
     1475.widget .mejs-overlay:hover .mejs-overlay-button { 
    14521476    background-color: #24890d; 
    14531477    color: #fff; 
    14541478} 
    14551479 
    1456 .hentry .mejs-controls .mejs-button button:hover { 
     1480.hentry .mejs-controls .mejs-button button:hover, 
     1481.widget .mejs-controls .mejs-button button:hover { 
    14571482    color: #41a62a; 
    14581483} 
     
    25272552.widget_pages li, 
    25282553.widget_recent_comments li, 
    2529 .widget_recent_entries li { 
     2554.widget_recent_entries li, 
     2555.widget_text li { 
    25302556    border-top: 1px solid rgba(255, 255, 255, 0.2); 
    25312557    padding: 8px 0 9px; 
     
    25392565.widget_pages li:first-child, 
    25402566.widget_recent_comments li:first-child, 
    2541 .widget_recent_entries li:first-child { 
     2567.widget_recent_entries li:first-child, 
     2568.widget_text li { 
    25422569    border-top: 0; 
    25432570} 
     
    25522579.widget_categories li li:last-child, 
    25532580.widget_nav_menu li li:last-child, 
    2554 .widget_pages li li:last-child { 
     2581.widget_pages li li:last-child, 
     2582.widget_text li li:last-child { 
    25552583    padding-bottom: 0; 
    25562584} 
     
    25882616.widget_text > div > :last-child { 
    25892617    margin-bottom: 0; 
     2618} 
     2619 
     2620.widget_text ul, 
     2621.widget_text ol { 
     2622    margin: 0 0 12px 10px; 
     2623} 
     2624 
     2625.widget_text li > ul, 
     2626.widget_text li > ol { 
     2627    margin-bottom: 0; 
     2628} 
     2629 
     2630.widget_text ul { 
     2631    list-style: disc inside; 
     2632} 
     2633 
     2634.widget_text ol { 
     2635    list-style: decimal inside; 
    25902636} 
    25912637 
     
    27172763.content-sidebar .widget_categories li ul, 
    27182764.content-sidebar .widget_nav_menu li ul, 
    2719 .content-sidebar .widget_pages li ul { 
     2765.content-sidebar .widget_pages li ul, 
     2766.content-sidebar .widget_text li ul { 
    27202767    border-color: rgba(0, 0, 0, 0.1); 
    27212768} 
     
    39744021    .primary-sidebar .widget_pages li, 
    39754022    .primary-sidebar .widget_recent_comments li, 
    3976     .primary-sidebar .widget_recent_entries li { 
     4023    .primary-sidebar .widget_recent_entries li, 
     4024    .primary-sidebar .widget_text li { 
    39774025        border-top: 0; 
    39784026        padding: 0 0 6px; 
     
    39944042    .primary-sidebar .widget_pages li:last-child, 
    39954043    .primary-sidebar .widget_recent_comments li:last-child, 
    3996     .primary-sidebar .widget_recent_entries li:last-child { 
     4044    .primary-sidebar .widget_recent_entries li:last-child, 
     4045    .primary-sidebar .widget_text li:last-child { 
    39974046        padding: 0; 
    39984047    } 
     
    40034052    .primary-sidebar .widget_categories li ul, 
    40044053    .primary-sidebar .widget_nav_menu li ul, 
    4005     .primary-sidebar .widget_pages li ul { 
     4054    .primary-sidebar .widget_pages li ul, 
     4055    .primary-sidebar .widget_text li ul { 
    40064056        border-top: 0; 
    40074057        margin-top: 6px; 
  • trunk/src/wp-content/themes/twentyseventeen/rtl.css

    r39273 r40839  
    241241    padding-left: 0; 
    242242    padding-right: 1.5rem; 
     243} 
     244 
     245.widget_text ul { 
     246    margin: 0 1.5em 1.5em 0; 
     247} 
     248 
     249.widget_text ul li ul { 
     250    margin: 0 1.5em 0 0; 
    243251} 
    244252 
  • trunk/src/wp-content/themes/twentyseventeen/style.css

    r40472 r40839  
    25342534} 
    25352535 
    2536 .widget ul li { 
     2536.widget ul li, 
     2537.widget ol li { 
    25372538    border-bottom: 1px solid #ddd; 
    25382539    border-top: 1px solid #ddd; 
     
    25932594.widget_text { 
    25942595    word-wrap: break-word; 
     2596} 
     2597 
     2598.widget_text ul { 
     2599    list-style: disc; 
     2600    margin: 0 0 1.5em 1.5em; 
     2601} 
     2602 
     2603.widget_text ol { 
     2604    list-style: decimal; 
     2605} 
     2606 
     2607.widget_text ul li, 
     2608.widget_text ol li { 
     2609    border: none; 
     2610} 
     2611 
     2612.widget_text ul li:last-child, 
     2613.widget_text ol li:last-child { 
     2614    padding-bottom: 0; 
     2615} 
     2616 
     2617.widget_text ul li ul { 
     2618    margin: 0 0 0 1.5em; 
     2619} 
     2620 
     2621.widget_text ul li li { 
     2622    padding-left: 0; 
     2623    padding-right: 0; 
     2624} 
     2625 
     2626.widget_text ol li { 
     2627    list-style-position: inside; 
     2628} 
     2629 
     2630.widget_text ol li + li { 
     2631    margin-top: -1px; 
    25952632} 
    25962633 
  • trunk/src/wp-content/themes/twentyten/rtl.css

    r31464 r40839  
    266266    margin-left: 0; 
    267267} 
     268.widget_text ol { 
     269    margin-left: auto; 
     270    margin-right: 1.3em; 
     271} 
    268272 
    269273/* =Footer 
  • trunk/src/wp-content/themes/twentyten/style.css

    r40640 r40839  
    12231223    height: 11px; 
    12241224} 
     1225.widget_text ul, 
     1226.widget_text ol { 
     1227    margin-bottom: 1.5em; 
     1228} 
     1229.widget_text ol { 
     1230    margin-left: 1.3em; 
     1231} 
     1232.widget_text ul ul, 
     1233.widget_text ol ol, 
     1234.widget_text ul ol, 
     1235.widget_text ol ul { 
     1236    margin-bottom: 0; 
     1237} 
     1238.widget_media_video video { 
     1239    max-width: 100%; 
     1240} 
    12251241 
    12261242/* Main sidebars */ 
  • trunk/src/wp-content/themes/twentythirteen/rtl.css

    r32315 r40839  
    536536} 
    537537 
     538.widget_text ul, 
     539.widget_text ol { 
     540    padding-left: auto; 
     541    padding-right: 20px; 
     542} 
     543 
    538544/** 
    539545 * 7.0 Footer 
  • trunk/src/wp-content/themes/twentythirteen/style.css

    r39496 r40839  
    12291229/* Mediaelements */ 
    12301230.hentry .mejs-mediaelement, 
    1231 .hentry .mejs-container .mejs-controls { 
     1231.widget .mejs-mediaelement, 
     1232.hentry .mejs-container .mejs-controls, 
     1233.widget .mejs-container .mejs-controls { 
    12321234    background: #220e10; 
    12331235} 
    12341236 
    12351237.hentry .mejs-controls .mejs-time-rail .mejs-time-loaded, 
    1236 .hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { 
     1238.widget .mejs-controls .mejs-time-rail .mejs-time-loaded, 
     1239.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current, 
     1240.widget .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { 
    12371241    background: #fff; 
    12381242} 
    12391243 
    1240 .hentry .mejs-controls .mejs-time-rail .mejs-time-current { 
     1244.hentry .mejs-controls .mejs-time-rail .mejs-time-current, 
     1245.widget .mejs-controls .mejs-time-rail .mejs-time-current { 
    12411246    background: #ea9629; 
    12421247} 
    12431248 
    12441249.hentry .mejs-controls .mejs-time-rail .mejs-time-total, 
    1245 .hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total { 
     1250.widget .mejs-controls .mejs-time-rail .mejs-time-total, 
     1251.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total, 
     1252.widget .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total { 
    12461253    background: #595959; 
    12471254} 
    12481255 
    12491256.hentry .mejs-controls .mejs-time-rail span, 
     1257.widget .mejs-controls .mejs-time-rail span, 
    12501258.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total, 
    1251 .hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { 
     1259.widget .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total, 
     1260.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current, 
     1261.widget .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { 
    12521262    border-radius: 0; 
    12531263} 
     
    25522562} 
    25532563 
     2564/* Text widget */ 
     2565 
     2566.widget_text ul, 
     2567.widget_text ol { 
     2568    padding-left: 20px; 
     2569    margin-bottom: 16px; 
     2570} 
     2571 
     2572.widget_text li:last-child { 
     2573    padding-bottom: 0; 
     2574} 
     2575 
     2576.widget_text li > ul, 
     2577.widget_text li > ol { 
     2578    margin-bottom: 0; 
     2579} 
     2580 
     2581.widget_text ul { 
     2582    list-style: square; 
     2583} 
     2584 
     2585.widget_text ol { 
     2586    list-style: decimal; 
     2587} 
    25542588 
    25552589/** 
  • trunk/src/wp-content/themes/twentytwelve/style.css

    r39496 r40839  
    643643    margin-bottom: 1.714285714rem; 
    644644} 
    645 .widget-area .textwidget ul { 
     645.widget-area .textwidget ul, 
     646.widget-area .textwidget ol { 
    646647    list-style: disc outside; 
    647648    margin: 0 0 24px; 
    648649    margin: 0 0 1.714285714rem; 
     650} 
     651.widget-area .textwidget li > ul, 
     652.widget-area .textwidget li > ol { 
     653    margin-bottom: 0; 
     654} 
     655.widget-area .textwidget ol { 
     656    list-style: decimal; 
    649657} 
    650658.widget-area .textwidget li { 
     
    14441452} 
    14451453 
    1446  
    14471454/* =Plugins 
    14481455----------------------------------------------- */ 
  • trunk/src/wp-includes/widgets/class-wp-widget-media-image.php

    r40835 r40839  
    202202                $size = array( $instance['width'], $instance['height'] ); 
    203203            } 
     204            $image_attributes['class'] .= sprintf( ' attachment-%1$s size-%1$s', is_array( $size ) ? join( 'x', $size ) : $size ); 
    204205 
    205206            $image = wp_get_attachment_image( $attachment->ID, $size, false, $image_attributes ); 
Note: See TracChangeset for help on using the changeset viewer.