Make WordPress Core

Changeset 40839


Ignore:
Timestamp:
05/25/2017 03:18:04 PM (7 years 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.