WordPress.org

Make WordPress Core

Changeset 27637


Ignore:
Timestamp:
03/20/2014 04:26:08 AM (7 years ago)
Author:
lancewillett
Message:

Twenty Fourteen: add Audio, Video, and Gallery Styles to editor styles. Props celloexpressions, see #27462.

Location:
trunk/src/wp-content/themes/twentyfourteen
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentyfourteen/css/editor-style.css

    r26639 r27637  
    1515 * 6.0 - Tables
    1616 * 7.0 - Images
    17  * 8.0 - RTL
     17 * 8.0 - Galleries
     18 * 9.0 - Audio/Video
     19 * 10.0 - RTL
    1820 * ----------------------------------------------------------------------------
    1921 */
     
    422424}
    423425
    424 
    425 /**
    426  * 8.0 RTL
     426/**
     427 * 8.0 Gallery
     428 * -----------------------------------------------------------------------------
     429 */
     430
     431.gallery .gallery-item {
     432    float: left;
     433    margin: 0 4px 4px 0;
     434    overflow: hidden;
     435    padding: 0;
     436    position: relative;
     437}
     438
     439.gallery-columns-1 .gallery-item {
     440    max-width: 100%;
     441    width: auto;
     442}
     443
     444.gallery-columns-2 .gallery-item {
     445    max-width: 48%;
     446    max-width: -webkit-calc(50% - 4px);
     447    max-width:         calc(50% - 4px);
     448    width: auto;
     449}
     450
     451.gallery-columns-3 .gallery-item {
     452    max-width: 32%;
     453    max-width: -webkit-calc(33.3% - 4px);
     454    max-width:         calc(33.3% - 4px);
     455    width: auto;
     456}
     457
     458.gallery-columns-4 .gallery-item {
     459    max-width: 23%;
     460    max-width: -webkit-calc(25% - 4px);
     461    max-width:         calc(25% - 4px);
     462    width: auto;
     463}
     464
     465.gallery-columns-5 .gallery-item {
     466    max-width: 19%;
     467    max-width: -webkit-calc(20% - 4px);
     468    max-width:         calc(20% - 4px);
     469    width: auto;
     470}
     471
     472.gallery-columns-6 .gallery-item {
     473    max-width: 15%;
     474    max-width: -webkit-calc(16.7% - 4px);
     475    max-width:         calc(16.7% - 4px);
     476    width: auto;
     477}
     478
     479.gallery-columns-7 .gallery-item {
     480    max-width: 13%;
     481    max-width: -webkit-calc(14.28% - 4px);
     482    max-width:         calc(14.28% - 4px);
     483    width: auto;
     484}
     485
     486.gallery-columns-8 .gallery-item {
     487    max-width: 11%;
     488    max-width: -webkit-calc(12.5% - 4px);
     489    max-width:         calc(12.5% - 4px);
     490    width: auto;
     491}
     492
     493.gallery-columns-9 .gallery-item {
     494    max-width: 9%;
     495    max-width: -webkit-calc(11.1% - 4px);
     496    max-width:         calc(11.1% - 4px);
     497    width: auto;
     498}
     499
     500.gallery-columns-1 .gallery-item:nth-of-type(1n),
     501.gallery-columns-2 .gallery-item:nth-of-type(2n),
     502.gallery-columns-3 .gallery-item:nth-of-type(3n),
     503.gallery-columns-4 .gallery-item:nth-of-type(4n),
     504.gallery-columns-5 .gallery-item:nth-of-type(5n),
     505.gallery-columns-6 .gallery-item:nth-of-type(6n),
     506.gallery-columns-7 .gallery-item:nth-of-type(7n),
     507.gallery-columns-8 .gallery-item:nth-of-type(8n),
     508.gallery-columns-9 .gallery-item:nth-of-type(9n) {
     509    margin-right: 0;
     510}
     511
     512.gallery-columns-1 .gallery-item:nth-of-type(1n),
     513.gallery-columns-2 .gallery-item:nth-of-type(2n - 1),
     514.gallery-columns-3 .gallery-item:nth-of-type(3n - 2) {
     515    margin-left: 14px; /* Compensate for the default negative margin on .gallery, which can't be changed. */
     516}
     517
     518.gallery-columns-4 .gallery-item:nth-of-type(4n - 3),
     519.gallery-columns-5 .gallery-item:nth-of-type(5n - 4),
     520.gallery-columns-6 .gallery-item:nth-of-type(6n - 5),
     521.gallery-columns-7 .gallery-item:nth-of-type(7n - 6),
     522.gallery-columns-8 .gallery-item:nth-of-type(8n - 7),
     523.gallery-columns-9 .gallery-item:nth-of-type(9n - 8) {
     524    margin-left: 2px; /* Compensate for the default negative margin on .gallery, which can't be changed. Images overflow the border in these cases. */
     525}
     526
     527.gallery .gallery-caption {
     528    background-color: rgba(0, 0, 0, 0.7);
     529    -webkit-box-sizing: border-box;
     530    -moz-box-sizing:    border-box;
     531    box-sizing:         border-box;
     532    color: #fff;
     533    font-size: 12px;
     534    line-height: 1.5;
     535    margin: 0;
     536    max-height: 50%;
     537    opacity: 0;
     538    padding: 6px 8px;
     539    position: absolute;
     540    bottom: 0;
     541    left: 0;
     542    text-align: left;
     543    width: 100%;
     544}
     545
     546.gallery .gallery-caption:before {
     547    content: "";
     548    height: 100%;
     549    min-height: 49px;
     550    position: absolute;
     551    top: 0;
     552    left: 0;
     553    width: 100%;
     554}
     555
     556.gallery-item:hover .gallery-caption {
     557    opacity: 1;
     558}
     559
     560.gallery-columns-7 .gallery-caption,
     561.gallery-columns-8 .gallery-caption,
     562.gallery-columns-9 .gallery-caption {
     563    display: none;
     564}
     565
     566
     567/**
     568 * 9.0 Audio/Video
     569 * ----------------------------------------------------------------------------
     570 */
     571
     572.mejs-mediaelement,
     573.mejs-container .mejs-controls {
     574    background: #000;
     575}
     576
     577.mejs-controls .mejs-time-rail .mejs-time-loaded,
     578.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
     579    background: #fff;
     580}
     581
     582.mejs-controls .mejs-time-rail .mejs-time-current {
     583    background: #24890d;
     584}
     585
     586.mejs-controls .mejs-time-rail .mejs-time-total,
     587.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
     588    background: rgba(255, 255, 255, .33);
     589}
     590
     591.mejs-controls .mejs-time-rail span,
     592.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
     593.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
     594    border-radius: 0;
     595}
     596
     597.mejs-overlay-loading {
     598    background: transparent;
     599}
     600
     601
     602/**
     603 * 10.0 RTL
    427604 * ----------------------------------------------------------------------------
    428605 */
  • trunk/src/wp-content/themes/twentyfourteen/style.css

    r27594 r27637  
    13391339.hentry .mejs-controls .mejs-time-rail .mejs-time-total,
    13401340.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
    1341     background: rgba(255,255,255,.33);
     1341    background: rgba(255, 255, 255, .33);
    13421342}
    13431343
Note: See TracChangeset for help on using the changeset viewer.