Skip to:
Content

BuddyPress.org

Ticket #7116: 7116.embeds.patch

File 7116.embeds.patch, 21.9 KB (added by r-a-y, 9 years ago)

Refreshed against trunk.

  • src/bp-activity/bp-activity-embeds.php

     
    6363
    6464        $min = bp_core_get_minified_asset_suffix();
    6565
     66        bp_register_template_stack( 'bp_get_assets_template_dir', 16 );
     67
    6668        if ( is_rtl() ) {
    6769                $css = bp_locate_template_asset( "css/embeds-activity-rtl{$min}.css" );
    6870        } else {
    6971                $css = bp_locate_template_asset( "css/embeds-activity{$min}.css" );
    7072        }
    7173
     74        bp_deregister_template_stack( 'bp_get_assets_template_dir', 16 );
     75
    7276        // Bail if file wasn't found.
    7377        if ( false === $css ) {
    7478                return;

  • src/bp-core/bp-core-template-loader.php

     
    7272 * @see bp_get_template_part() for full documentation.
    7373 */
    7474function bp_get_asset_template_part( $slug, $name = null ) {
    75         return bp_get_template_part( "assets/{$slug}", $name );
     75        bp_register_template_stack( 'bp_get_template_pack_dir', 16 );
     76
     77        $tpart = bp_get_template_part( "assets/{$slug}", $name );
     78
     79        bp_deregister_template_stack( 'bp_get_template_pack_dir', 16 );
     80
     81        return $tpart;
    7682}
    7783
    7884/**

  • src/bp-core/bp-core-theme-compatibility.php

     
    5050}
    5151
    5252/**
    53  * Get the ID of the theme package being used.
     53 * Get the ID of the template pack being used.
    5454 *
    5555 * This can be filtered or set manually. Tricky theme authors can override the
    5656 * default and include their own BuddyPress compatibility layers for their themes.
    … …  
    7272}
    7373
    7474/**
    75  * Get the name of the theme package being used.
     75 * Get the name of the template pack being used.
    7676 *
    7777 * This can be filtered or set manually. Tricky theme authors can override the
    7878 * default and include their own BuddyPress compatibility layers for their themes.
    … …  
    116116}
    117117
    118118/**
    119  * Get the absolute path of the theme package being used.
     119 * Get the absolute path of the current template pack being used.
    120120 *
    121121 * Or set manually. Tricky theme authors can override the default and include
    122122 * their own BuddyPress compatibility layers for their themes.
    … …  
    138138}
    139139
    140140/**
    141  * Get the URL of the theme package being used.
     141 * Get the URL of the current template pack being used.
    142142 *
    143143 * This can be filtered, or set manually. Tricky theme authors can override
    144144 * the default and include their own BuddyPress compatibility layers for their
    … …  
    161161}
    162162
    163163/**
     164 * Get the absolute path of the main template pack directory.
     165 *
     166 * @since 2.x.0
     167 *
     168 * @return string
     169 */
     170function bp_get_template_pack_dir() {
     171        /**
     172         * Filters the absolute path of the main template pack directory.
     173         *
     174         * @since 2.x.0
     175         *
     176         * @param string $dir Absolute path to the main template pack directory.
     177         */
     178        return apply_filters( 'bp_get_template_pack_dir', buddypress()->themes_dir );
     179}
     180
     181/**
     182 * Get the absolute path of the assets template directory.
     183 *
     184 * @since 2.x.0
     185 *
     186 * @return string
     187 */
     188function bp_get_assets_template_dir() {
     189        /**
     190         * Filters the absolute path of the assets template directory.
     191         *
     192         * @since 2.x.0
     193         *
     194         * @param string $dir Absolute path to asset templates directory.
     195         */
     196        return apply_filters( 'bp_get_assets_template_dir', bp_get_template_pack_dir() . '/assets/' );
     197}
     198
     199
     200/**
    164201 * Should we use theme compat for this theme?
    165202 *
    166203 * If the current theme's need for theme compat hasn't yet been detected, we

  • new file src/bp-templates/assets/css/embeds-activity-rtl.css 

    new file mode 100644
    - +  
     1#bp-embed-header:after {
     2        clear: both;
     3        content: "";
     4        display: table;
     5        margin-bottom: 1em;
     6}
     7
     8.bp-embed-avatar {
     9        float: right;
     10        margin: 0 0 0 .75em;
     11}
     12
     13p.bp-embed-activity-action {
     14        font-size: 15px;
     15        margin-bottom: 0;
     16}
     17
     18p.bp-embed-activity-action a:first-child {
     19        color: #32373c;
     20        font-weight: bold;
     21}
     22
     23p.bp-embed-activity-action img.avatar {
     24        padding: 0 3px 0 4px;
     25        vertical-align: text-bottom;
     26}
     27
     28.bp-embed-excerpt {
     29        margin-bottom: 1em;
     30}
     31
     32.bp-embed-excerpt a {
     33        color: #21759b;
     34        display: inline-block;
     35        overflow: hidden;
     36        text-overflow: ellipsis;
     37        vertical-align: top;
     38        white-space: nowrap;
     39        max-width: 250px;
     40}
     41
     42.activity-read-more {
     43        margin-right: .5em;
     44}
     45
     46.activity-read-more a {
     47        color: #b4b9be;
     48}
     49
     50.wp-embed-footer {
     51        margin-top: 20px;
     52}
     53
     54span.bp-embed-timestamp {
     55        font-size: .9em;
     56}
     57
     58video {
     59        width: 100%;
     60        height: auto;
     61}
     62
     63.bp-activity-embed-display-media {
     64        border: 1px solid #ccc;
     65        border-radius: 6px;
     66}
     67
     68.bp-activity-embed-display-media.one-col,
     69.bp-activity-embed-display-media.one-col .thumb,
     70.bp-activity-embed-display-media.one-col .thumb img {
     71        width: 100%;
     72}
     73
     74.bp-activity-embed-display-media.two-col .thumb,
     75.bp-activity-embed-display-media.two-col .caption {
     76        display: table-cell;
     77}
     78
     79.bp-activity-embed-display-media.two-col .thumb {
     80        background: #000;
     81        vertical-align: middle;
     82}
     83
     84.bp-activity-embed-display-media.two-col .caption {
     85        vertical-align: top;
     86}
     87
     88.bp-activity-embed-display-media.two-col .thumb img {
     89        border-left: 1px solid #ccc;
     90        display: block;
     91        width: 100%;
     92}
     93
     94.bp-activity-embed-display-media .thumb {
     95        position: relative;
     96}
     97
     98.bp-activity-embed-display-media .caption {
     99        padding: .2em .5em .5em .5em;
     100}
     101
     102a.play-btn {
     103        background: rgba(0, 0, 0, 0.75);
     104        border-radius: 50%;
     105        height: 50px;
     106        right: 50%;
     107        margin: 0;
     108        padding: 1em;
     109        position: absolute;
     110        text-indent: 0.25em;
     111        top: 50%;
     112        transform: translateY(-50%) translateX(50%);
     113        -webkit-transform: translateY(-50%) translateX(50%);
     114        transition: all 0.2s ease-out;
     115        width: 50px;
     116}
     117
     118.bp-activity-embed-display-media.two-col a.play-btn {
     119        height: 35px;
     120        width: 35px;
     121}
     122
     123a.play-btn:hover {
     124        background: rgba(0, 0, 0, 0.95);
     125        transform: translateY(-50%) translateX(50%) scale(1.05);
     126        -webkit-transform: translateY(-50%) translateX(50%) scale(1.05);
     127        transition: all 0.2s ease-out;
     128}
     129
     130.bp-activity-embed-display-media .thumb svg {
     131        fill: #fff;
     132        overflow: hidden;
     133}
     134
     135.bp-activity-embed-display-media .caption-description {
     136        font-size: 90%;
     137        margin: .4em 0;
     138}
     139
     140@media only screen and (max-width: 480px) {
     141        .bp-activity-embed-display-media.two-col .thumb {
     142                border-bottom: 1px solid #ccc;
     143                border-left: 0;
     144                display: block;
     145                max-width: none !important;
     146        }
     147
     148        a.play-btn {
     149                height: 35px;
     150                width: 35px;
     151        }
     152}
     153 No newline at end of file

  • new file src/bp-templates/assets/css/embeds-activity.css 

    new file mode 100644
    - +  
     1#bp-embed-header:after {
     2        clear: both;
     3        content: "";
     4        display: table;
     5        margin-bottom: 1em;
     6}
     7
     8.bp-embed-avatar {
     9        float: left;
     10        margin: 0 .75em 0 0;
     11}
     12
     13p.bp-embed-activity-action {
     14        font-size: 15px;
     15        margin-bottom: 0;
     16}
     17
     18p.bp-embed-activity-action a:first-child {
     19        color: #32373c;
     20        font-weight: bold;
     21}
     22
     23p.bp-embed-activity-action img.avatar {
     24        padding: 0 4px 0 3px;
     25        vertical-align: text-bottom;
     26}
     27
     28.bp-embed-excerpt {
     29        margin-bottom: 1em;
     30}
     31
     32.bp-embed-excerpt a {
     33        color: #21759b;
     34        display: inline-block;
     35        overflow: hidden;
     36        text-overflow: ellipsis;
     37        vertical-align: top;
     38        white-space: nowrap;
     39        max-width: 250px;
     40}
     41
     42.activity-read-more {
     43        margin-left: .5em;
     44}
     45
     46.activity-read-more a {
     47        color: #b4b9be;
     48}
     49
     50.wp-embed-footer {
     51        margin-top: 20px;
     52}
     53
     54span.bp-embed-timestamp {
     55        font-size: .9em;
     56}
     57
     58video {
     59        width: 100%;
     60        height: auto;
     61}
     62
     63.bp-activity-embed-display-media {
     64        border: 1px solid #ccc;
     65        border-radius: 6px;
     66}
     67
     68.bp-activity-embed-display-media.one-col,
     69.bp-activity-embed-display-media.one-col .thumb,
     70.bp-activity-embed-display-media.one-col .thumb img {
     71        width: 100%;
     72}
     73
     74.bp-activity-embed-display-media.two-col .thumb,
     75.bp-activity-embed-display-media.two-col .caption {
     76        display: table-cell;
     77}
     78
     79.bp-activity-embed-display-media.two-col .thumb {
     80        background: #000;
     81        vertical-align: middle;
     82}
     83
     84.bp-activity-embed-display-media.two-col .caption {
     85        vertical-align: top;
     86}
     87
     88.bp-activity-embed-display-media.two-col .thumb img {
     89        border-right: 1px solid #ccc;
     90        display: block;
     91        width: 100%;
     92}
     93
     94.bp-activity-embed-display-media .thumb {
     95        position: relative;
     96}
     97
     98.bp-activity-embed-display-media .caption {
     99        padding: .2em .5em .5em .5em;
     100}
     101
     102a.play-btn {
     103        background: rgba(0, 0, 0, 0.75);
     104        border-radius: 50%;
     105        height: 50px;
     106        left: 50%;
     107        margin: 0;
     108        padding: 1em;
     109        position: absolute;
     110        text-indent: 0.25em;
     111        top: 50%;
     112        transform: translateY(-50%) translateX(-50%);
     113        -webkit-transform: translateY(-50%) translateX(-50%);
     114        transition: all 0.2s ease-out;
     115        width: 50px;
     116}
     117
     118.bp-activity-embed-display-media.two-col a.play-btn {
     119        height: 35px;
     120        width: 35px;
     121}
     122
     123a.play-btn:hover {
     124        background: rgba(0, 0, 0, 0.95);
     125        transform: translateY(-50%) translateX(-50%) scale(1.05);
     126        -webkit-transform: translateY(-50%) translateX(-50%) scale(1.05);
     127        transition: all 0.2s ease-out;
     128}
     129
     130.bp-activity-embed-display-media .thumb svg {
     131        fill: #fff;
     132        overflow: hidden;
     133}
     134
     135.bp-activity-embed-display-media .caption-description {
     136        font-size: 90%;
     137        margin: .4em 0;
     138}
     139
     140@media only screen and (max-width: 480px) {
     141        .bp-activity-embed-display-media.two-col .thumb {
     142                border-bottom: 1px solid #ccc;
     143                border-right: 0;
     144                display: block;
     145                max-width: none !important;
     146        }
     147
     148        a.play-btn {
     149                height: 35px;
     150                width: 35px;
     151        }
     152}
     153 No newline at end of file

  • new file src/bp-templates/assets/embeds/activity.php 

    new file mode 100644
    - +  
     1
     2                <?php if ( bp_activity_embed_has_activity( bp_current_action() ) ) : ?>
     3
     4                        <?php while ( bp_activities() ) : bp_the_activity(); ?>
     5                                <div class="bp-embed-excerpt"><?php bp_activity_embed_excerpt(); ?></div>
     6
     7                                <?php bp_activity_embed_media(); ?>
     8
     9                        <?php endwhile; ?>
     10
     11                <?php endif; ?>

  • new file src/bp-templates/assets/embeds/footer.php 

    new file mode 100644
    - +  
     1                        <div class="wp-embed-footer">
     2                                <?php the_embed_site_title() ?>
     3
     4                                <div class="wp-embed-meta">
     5                                        <?php
     6                                        /** This action is documented in wp-includes/theme-compat/embed-content.php */
     7                                        do_action( 'embed_content_meta'); ?>
     8                                </div>
     9                        </div>
     10 No newline at end of file

  • new file src/bp-templates/assets/embeds/header-activity.php 

    new file mode 100644
    - +  
     1
     2                <div id="bp-embed-header">
     3                        <div class="bp-embed-avatar">
     4                                <a href="<?php bp_displayed_user_link(); ?>">
     5                                        <?php bp_displayed_user_avatar( 'type=thumb&width=45&height=45' ); ?>
     6                                </a>
     7                        </div>
     8
     9                        <?php if ( bp_activity_embed_has_activity( bp_current_action() ) ) : ?>
     10
     11                                <?php while ( bp_activities() ) : bp_the_activity(); ?>
     12                                        <p class="bp-embed-activity-action">
     13                                                <?php bp_activity_action( array( 'no_timestamp' => true ) ); ?>
     14                                        </p>
     15                                <?php endwhile; ?>
     16
     17                        <?php endif; ?>
     18
     19                        <p class="bp-embed-header-meta">
     20                                <?php if ( bp_is_active( 'activity' ) && bp_activity_do_mentions() ) : ?>
     21                                        <span class="bp-embed-mentionname">@<?php bp_displayed_user_mentionname(); ?> &middot; </span>
     22                                <?php endif; ?>
     23
     24                                <span class="bp-embed-timestamp"><a href="<?php bp_activity_thread_permalink(); ?>"><?php echo date_i18n( get_option( 'time_format' ) . ' - ' . get_option( 'date_format' ), strtotime( bp_get_activity_date_recorded() ) ); ?></a></span>
     25                        </p>
     26                </div>

  • new file src/bp-templates/assets/embeds/header.php 

    new file mode 100644
    - +  
     1
     2                <div id="bp-embed-header">
     3                        <div class="bp-embed-avatar">
     4                                <a href="<?php bp_displayed_user_link(); ?>">
     5                                        <?php bp_displayed_user_avatar( 'type=thumb&width=36&height=36' ); ?>
     6                                </a>
     7                        </div>
     8
     9                        <p class="wp-embed-heading">
     10                                <a href="<?php bp_displayed_user_link(); ?>">
     11                                        <?php bp_displayed_user_fullname(); ?>
     12                                </a>
     13                        </p>
     14
     15                        <?php if ( bp_is_active( 'activity' ) && bp_activity_do_mentions() ) : ?>
     16                                <p class="bp-embed-mentionname">@<?php bp_displayed_user_mentionname(); ?></p>
     17                        <?php endif; ?>
     18                </div>

  • deleted file src/bp-templates/bp-legacy/buddypress/assets/embeds/activity.php 

    deleted file mode 100644
    + -  
    1 
    2                 <?php if ( bp_activity_embed_has_activity( bp_current_action() ) ) : ?>
    3 
    4                         <?php while ( bp_activities() ) : bp_the_activity(); ?>
    5                                 <div class="bp-embed-excerpt"><?php bp_activity_embed_excerpt(); ?></div>
    6 
    7                                 <?php bp_activity_embed_media(); ?>
    8 
    9                         <?php endwhile; ?>
    10 
    11                 <?php endif; ?>

  • deleted file src/bp-templates/bp-legacy/buddypress/assets/embeds/footer.php 

    deleted file mode 100644
    + -  
    1                         <div class="wp-embed-footer">
    2                                 <?php the_embed_site_title() ?>
    3 
    4                                 <div class="wp-embed-meta">
    5                                         <?php
    6                                         /** This action is documented in wp-includes/theme-compat/embed-content.php */
    7                                         do_action( 'embed_content_meta'); ?>
    8                                 </div>
    9                         </div>
    10  No newline at end of file

  • deleted file src/bp-templates/bp-legacy/buddypress/assets/embeds/header-activity.php 

    deleted file mode 100644
    + -  
    1 
    2                 <div id="bp-embed-header">
    3                         <div class="bp-embed-avatar">
    4                                 <a href="<?php bp_displayed_user_link(); ?>">
    5                                         <?php bp_displayed_user_avatar( 'type=thumb&width=45&height=45' ); ?>
    6                                 </a>
    7                         </div>
    8 
    9                         <?php if ( bp_activity_embed_has_activity( bp_current_action() ) ) : ?>
    10 
    11                                 <?php while ( bp_activities() ) : bp_the_activity(); ?>
    12                                         <p class="bp-embed-activity-action">
    13                                                 <?php bp_activity_action( array( 'no_timestamp' => true ) ); ?>
    14                                         </p>
    15                                 <?php endwhile; ?>
    16 
    17                         <?php endif; ?>
    18 
    19                         <p class="bp-embed-header-meta">
    20                                 <?php if ( bp_is_active( 'activity' ) && bp_activity_do_mentions() ) : ?>
    21                                         <span class="bp-embed-mentionname">@<?php bp_displayed_user_mentionname(); ?> &middot; </span>
    22                                 <?php endif; ?>
    23 
    24                                 <span class="bp-embed-timestamp"><a href="<?php bp_activity_thread_permalink(); ?>"><?php echo date_i18n( get_option( 'time_format' ) . ' - ' . get_option( 'date_format' ), strtotime( bp_get_activity_date_recorded() ) ); ?></a></span>
    25                         </p>
    26                 </div>

  • deleted file src/bp-templates/bp-legacy/buddypress/assets/embeds/header.php 

    deleted file mode 100644
    + -  
    1 
    2                 <div id="bp-embed-header">
    3                         <div class="bp-embed-avatar">
    4                                 <a href="<?php bp_displayed_user_link(); ?>">
    5                                         <?php bp_displayed_user_avatar( 'type=thumb&width=36&height=36' ); ?>
    6                                 </a>
    7                         </div>
    8 
    9                         <p class="wp-embed-heading">
    10                                 <a href="<?php bp_displayed_user_link(); ?>">
    11                                         <?php bp_displayed_user_fullname(); ?>
    12                                 </a>
    13                         </p>
    14 
    15                         <?php if ( bp_is_active( 'activity' ) && bp_activity_do_mentions() ) : ?>
    16                                 <p class="bp-embed-mentionname">@<?php bp_displayed_user_mentionname(); ?></p>
    17                         <?php endif; ?>
    18                 </div>

  • deleted file src/bp-templates/bp-legacy/css/embeds-activity-rtl.css 

    deleted file mode 100644
    + -  
    1 #bp-embed-header:after {
    2         clear: both;
    3         content: "";
    4         display: table;
    5         margin-bottom: 1em;
    6 }
    7 
    8 .bp-embed-avatar {
    9         float: right;
    10         margin: 0 0 0 .75em;
    11 }
    12 
    13 p.bp-embed-activity-action {
    14         font-size: 15px;
    15         margin-bottom: 0;
    16 }
    17 
    18 p.bp-embed-activity-action a:first-child {
    19         color: #32373c;
    20         font-weight: bold;
    21 }
    22 
    23 p.bp-embed-activity-action img.avatar {
    24         padding: 0 3px 0 4px;
    25         vertical-align: text-bottom;
    26 }
    27 
    28 .bp-embed-excerpt {
    29         margin-bottom: 1em;
    30 }
    31 
    32 .bp-embed-excerpt a {
    33         color: #21759b;
    34         display: inline-block;
    35         overflow: hidden;
    36         text-overflow: ellipsis;
    37         vertical-align: top;
    38         white-space: nowrap;
    39         max-width: 250px;
    40 }
    41 
    42 .activity-read-more {
    43         margin-right: .5em;
    44 }
    45 
    46 .activity-read-more a {
    47         color: #b4b9be;
    48 }
    49 
    50 .wp-embed-footer {
    51         margin-top: 20px;
    52 }
    53 
    54 span.bp-embed-timestamp {
    55         font-size: .9em;
    56 }
    57 
    58 video {
    59         width: 100%;
    60         height: auto;
    61 }
    62 
    63 .bp-activity-embed-display-media {
    64         border: 1px solid #ccc;
    65         border-radius: 6px;
    66 }
    67 
    68 .bp-activity-embed-display-media.one-col,
    69 .bp-activity-embed-display-media.one-col .thumb,
    70 .bp-activity-embed-display-media.one-col .thumb img {
    71         width: 100%;
    72 }
    73 
    74 .bp-activity-embed-display-media.two-col .thumb,
    75 .bp-activity-embed-display-media.two-col .caption {
    76         display: table-cell;
    77 }
    78 
    79 .bp-activity-embed-display-media.two-col .thumb {
    80         background: #000;
    81         vertical-align: middle;
    82 }
    83 
    84 .bp-activity-embed-display-media.two-col .caption {
    85         vertical-align: top;
    86 }
    87 
    88 .bp-activity-embed-display-media.two-col .thumb img {
    89         border-left: 1px solid #ccc;
    90         display: block;
    91         width: 100%;
    92 }
    93 
    94 .bp-activity-embed-display-media .thumb {
    95         position: relative;
    96 }
    97 
    98 .bp-activity-embed-display-media .caption {
    99         padding: .2em .5em .5em .5em;
    100 }
    101 
    102 a.play-btn {
    103         background: rgba(0, 0, 0, 0.75);
    104         border-radius: 50%;
    105         height: 50px;
    106         right: 50%;
    107         margin: 0;
    108         padding: 1em;
    109         position: absolute;
    110         text-indent: 0.25em;
    111         top: 50%;
    112         transform: translateY(-50%) translateX(50%);
    113         -webkit-transform: translateY(-50%) translateX(50%);
    114         transition: all 0.2s ease-out;
    115         width: 50px;
    116 }
    117 
    118 .bp-activity-embed-display-media.two-col a.play-btn {
    119         height: 35px;
    120         width: 35px;
    121 }
    122 
    123 a.play-btn:hover {
    124         background: rgba(0, 0, 0, 0.95);
    125         transform: translateY(-50%) translateX(50%) scale(1.05);
    126         -webkit-transform: translateY(-50%) translateX(50%) scale(1.05);
    127         transition: all 0.2s ease-out;
    128 }
    129 
    130 .bp-activity-embed-display-media .thumb svg {
    131         fill: #fff;
    132         overflow: hidden;
    133 }
    134 
    135 .bp-activity-embed-display-media .caption-description {
    136         font-size: 90%;
    137         margin: .4em 0;
    138 }
    139 
    140 @media only screen and (max-width: 480px) {
    141         .bp-activity-embed-display-media.two-col .thumb {
    142                 border-bottom: 1px solid #ccc;
    143                 border-left: 0;
    144                 display: block;
    145                 max-width: none !important;
    146         }
    147 
    148         a.play-btn {
    149                 height: 35px;
    150                 width: 35px;
    151         }
    152 }
    153  No newline at end of file

  • deleted file src/bp-templates/bp-legacy/css/embeds-activity.css 

    deleted file mode 100644
    + -  
    1 #bp-embed-header:after {
    2         clear: both;
    3         content: "";
    4         display: table;
    5         margin-bottom: 1em;
    6 }
    7 
    8 .bp-embed-avatar {
    9         float: left;
    10         margin: 0 .75em 0 0;
    11 }
    12 
    13 p.bp-embed-activity-action {
    14         font-size: 15px;
    15         margin-bottom: 0;
    16 }
    17 
    18 p.bp-embed-activity-action a:first-child {
    19         color: #32373c;
    20         font-weight: bold;
    21 }
    22 
    23 p.bp-embed-activity-action img.avatar {
    24         padding: 0 4px 0 3px;
    25         vertical-align: text-bottom;
    26 }
    27 
    28 .bp-embed-excerpt {
    29         margin-bottom: 1em;
    30 }
    31 
    32 .bp-embed-excerpt a {
    33         color: #21759b;
    34         display: inline-block;
    35         overflow: hidden;
    36         text-overflow: ellipsis;
    37         vertical-align: top;
    38         white-space: nowrap;
    39         max-width: 250px;
    40 }
    41 
    42 .activity-read-more {
    43         margin-left: .5em;
    44 }
    45 
    46 .activity-read-more a {
    47         color: #b4b9be;
    48 }
    49 
    50 .wp-embed-footer {
    51         margin-top: 20px;
    52 }
    53 
    54 span.bp-embed-timestamp {
    55         font-size: .9em;
    56 }
    57 
    58 video {
    59         width: 100%;
    60         height: auto;
    61 }
    62 
    63 .bp-activity-embed-display-media {
    64         border: 1px solid #ccc;
    65         border-radius: 6px;
    66 }
    67 
    68 .bp-activity-embed-display-media.one-col,
    69 .bp-activity-embed-display-media.one-col .thumb,
    70 .bp-activity-embed-display-media.one-col .thumb img {
    71         width: 100%;
    72 }
    73 
    74 .bp-activity-embed-display-media.two-col .thumb,
    75 .bp-activity-embed-display-media.two-col .caption {
    76         display: table-cell;
    77 }
    78 
    79 .bp-activity-embed-display-media.two-col .thumb {
    80         background: #000;
    81         vertical-align: middle;
    82 }
    83 
    84 .bp-activity-embed-display-media.two-col .caption {
    85         vertical-align: top;
    86 }
    87 
    88 .bp-activity-embed-display-media.two-col .thumb img {
    89         border-right: 1px solid #ccc;
    90         display: block;
    91         width: 100%;
    92 }
    93 
    94 .bp-activity-embed-display-media .thumb {
    95         position: relative;
    96 }
    97 
    98 .bp-activity-embed-display-media .caption {
    99         padding: .2em .5em .5em .5em;
    100 }
    101 
    102 a.play-btn {
    103         background: rgba(0, 0, 0, 0.75);
    104         border-radius: 50%;
    105         height: 50px;
    106         left: 50%;
    107         margin: 0;
    108         padding: 1em;
    109         position: absolute;
    110         text-indent: 0.25em;
    111         top: 50%;
    112         transform: translateY(-50%) translateX(-50%);
    113         -webkit-transform: translateY(-50%) translateX(-50%);
    114         transition: all 0.2s ease-out;
    115         width: 50px;
    116 }
    117 
    118 .bp-activity-embed-display-media.two-col a.play-btn {
    119         height: 35px;
    120         width: 35px;
    121 }
    122 
    123 a.play-btn:hover {
    124         background: rgba(0, 0, 0, 0.95);
    125         transform: translateY(-50%) translateX(-50%) scale(1.05);
    126         -webkit-transform: translateY(-50%) translateX(-50%) scale(1.05);
    127         transition: all 0.2s ease-out;
    128 }
    129 
    130 .bp-activity-embed-display-media .thumb svg {
    131         fill: #fff;
    132         overflow: hidden;
    133 }
    134 
    135 .bp-activity-embed-display-media .caption-description {
    136         font-size: 90%;
    137         margin: .4em 0;
    138 }
    139 
    140 @media only screen and (max-width: 480px) {
    141         .bp-activity-embed-display-media.two-col .thumb {
    142                 border-bottom: 1px solid #ccc;
    143                 border-right: 0;
    144                 display: block;
    145                 max-width: none !important;
    146         }
    147 
    148         a.play-btn {
    149                 height: 35px;
    150                 width: 35px;
    151         }
    152 }
    153  No newline at end of file