Skip to:
Content

BuddyPress.org

Ticket #8395: 8395.2.patch

File 8395.2.patch, 139.8 KB (added by imath, 4 years ago)

Adds improvements made by @vapvarun

  • Gruntfile.js 

    diff --git Gruntfile.js Gruntfile.js
index 17fb49807..9a184513d 100644
    module.exports = function( grunt ) { 
    3232                BP_SCSS_CSS_FILES = [
    3333                        '!bp-templates/bp-legacy/css/twenty*.css',
    3434                        '!bp-templates/bp-nouveau/css/buddypress.css',
     35                        '!bp-templates/bp-nouveau/css/twenty*.css',
    3536                        '!bp-core/admin/css/hello.css',
    3637                        '!bp-members/css/blocks/member.css',
    3738                        '!bp-groups/css/blocks/group.css',
    … … module.exports = function( grunt ) { 
    117118                                expand: true,
    118119                                ext: '.css',
    119120                                flatten: true,
    120                                 src: ['bp-templates/bp-nouveau/sass/buddypress.scss'],
     121                                src: ['bp-templates/bp-nouveau/sass/buddypress.scss', 'bp-templates/bp-nouveau/sass/twenty*.scss'],
    121122                                dest: SOURCE_DIR + 'bp-templates/bp-nouveau/css/'
    122123                        },
    123124                        admin: {
    … … module.exports = function( grunt ) { 
    402403         * Register tasks.
    403404         */
    404405        grunt.registerTask( 'src', ['checkDependencies', 'jsvalidate:src', 'jshint', 'stylelint', 'sass', 'postcss', 'rtlcss'] );
     406        grunt.registerTask( 'style', ['stylelint', 'sass', 'postcss', 'rtlcss'] );
    405407        grunt.registerTask( 'makepot', ['exec:makepot'] );
    406408        grunt.registerTask( 'commit', ['src', 'checktextdomain', 'imagemin', 'phplint', 'exec:phpcompat'] );
    407409        grunt.registerTask( 'commit:blocks', ['commit', 'exec:blocks_src'] );

  • src/bp-templates/bp-nouveau/buddypress-functions.php 

    diff --git src/bp-templates/bp-nouveau/buddypress-functions.php src/bp-templates/bp-nouveau/buddypress-functions.php
index e2c6535e9..892bf2e33 100644
    class BP_Nouveau extends BP_Theme_Compat { 
    283283                                }
    284284                        }
    285285                }
     286
     287                // Compatibility stylesheets for specific themes.
     288                $theme                = get_template();
     289                $companion_stylesheet = bp_locate_template_asset( sprintf( 'css/%1$s%2$s.css', $theme, $min ) );
     290                $companion_handle     = 'bp-' . $theme;
     291
     292                if ( ! is_rtl() && isset( $companion_stylesheet['uri'] ) && $companion_stylesheet['uri'] ) {
     293                        wp_enqueue_style( $companion_handle, $companion_stylesheet['uri'], array(), $this->version, 'screen' );
     294
     295                        if ( $min ) {
     296                                wp_style_add_data( $companion_handle, 'suffix', $min );
     297                        }
     298                }
     299
     300                // Compatibility stylesheet for specific themes, RTL-version.
     301                if ( is_rtl() ) {
     302                        $rtl_companion_stylesheet = bp_locate_template_asset( sprintf( 'css/%1$s-rtl%2$s.css', $theme, $min ) );
     303
     304                        if ( isset( $rtl_companion_stylesheet['uri'] ) ) {
     305                                $companion_handle .= '-rtl';
     306                                wp_enqueue_style( $companion_handle, $rtl_companion_stylesheet['uri'], array(), $this->version, 'screen' );
     307
     308                                if ( $min ) {
     309                                        wp_style_add_data( $companion_handle, 'suffix', $min );
     310                                }
     311                        }
     312                }
    286313        }
    287314
    288315        /**

  • src/bp-templates/bp-nouveau/buddypress/groups/single/admin/group-cover-image.php 

    diff --git src/bp-templates/bp-nouveau/buddypress/groups/single/admin/group-cover-image.php src/bp-templates/bp-nouveau/buddypress/groups/single/admin/group-cover-image.php
index 73dd4f3a9..354968aaa 100644
     
    33 * BP Nouveau Group's cover image template.
    44 *
    55 * @since 3.0.0
    6  * @version 3.1.0
     6 * @version 7.0.0
    77 */
    88?>
    99
    1010<?php if ( bp_is_group_create() ) : ?>
    1111
    12         <h2 class="bp-screen-title creation-step-name">
     12        <h3 class="bp-screen-title creation-step-name">
    1313                <?php esc_html_e( 'Upload Cover Image', 'buddypress' ); ?>
    14         </h2>
     14        </h3>
    1515
    1616        <div id="header-cover-image"></div>
    1717

  • src/bp-templates/bp-nouveau/common-styles/_bp_forms.scss 

    diff --git src/bp-templates/bp-nouveau/common-styles/_bp_forms.scss src/bp-templates/bp-nouveau/common-styles/_bp_forms.scss
index 4c48f27c2..b39d8a03c 100644
     
    11// BP Forms Elements Global Styles
    22// @since 3.0.0
    3 // @version 5.0.0
     3// @version 7.0.0
    44
    55// Some essential classes used for forms elements:
    66// labels - sizing especially for standalone controls
    … …  
    8787                [data-bp-search] input[type="text"],
    8888                .groups-members-search input[type="search"],
    8989                .groups-members-search input[type="text"] {
    90                         background: $off-white;
     90                        background-color: $off-white;
    9191                        border: 1px solid $form-border-color;
    9292                        border-radius: 0;
    9393                        font: inherit;
    … …  
    163163                input:focus,
    164164                textarea:focus,
    165165                select:focus {
    166                         background: $off-white;
     166                        background-color: $off-white;
    167167                        color: $bp-text;
    168168                        outline: 0;
    169169                }

  • src/bp-templates/bp-nouveau/common-styles/_bp_generic_and_typography.scss 

    diff --git src/bp-templates/bp-nouveau/common-styles/_bp_generic_and_typography.scss src/bp-templates/bp-nouveau/common-styles/_bp_generic_and_typography.scss
index ddc7549d6..65cabf5e7 100644
     
    11// BP Generic elements, Typography and Images.
    22// @since 3.0.0
    3 // @version 5.0.0
     3// @version 7.0.0
    44
    55// ========= Generic Sitewide elements ========
    66body {
    … … body.buddypress { 
    5959                .entry-header,
    6060                .site-content .entry-header,
    6161                .entry-content {
    62                         max-width: none;
     62
     63                        &:not(.alignwide):not(.alignfull) {
     64                                max-width: none;
     65                        }
    6366                }
    6467
    6568                .entry-header {
    … … body.buddypress { 
    166169                        margin-bottom: 2em;
    167170                        padding: 0;
    168171
    169                         .entry-title {
     172                        &:not(.alignwide):not(.alignfull) .entry-title {
    170173
    171174                                @include responsive-font(34);
    172175                                font-weight: inherit;

  • src/bp-templates/bp-nouveau/common-styles/_bp_info_messages.scss 

    diff --git src/bp-templates/bp-nouveau/common-styles/_bp_info_messages.scss src/bp-templates/bp-nouveau/common-styles/_bp_info_messages.scss
index be24a14ad..f64ca1309 100644
     
    2828                        clear: both;
    2929                        display: block;
    3030                }
    31 
    32                 // Error message boxes
    33                 &.error {
    34 
    35                         p {
    36                                 // oh linter you're too boringly pedantic, there will be properties!
    37                         }
    38                 }
    39 
    40                 // Warning boxes
    41                 //              &.warning {
    42 
    43                 //                      p {
    44                 //                      }
    45                 //              }
    46 
    4731        } // close .bp-messages
    4832
    4933        // user message screens handled separately due to backbone templates

  • src/bp-templates/bp-nouveau/common-styles/_bp_layouts.scss 

    diff --git src/bp-templates/bp-nouveau/common-styles/_bp_layouts.scss src/bp-templates/bp-nouveau/common-styles/_bp_layouts.scss
index a7609cdf0..34afe452f 100644
     
    33// layouts on a user selectable basis.
    44// The sheet also adds layout properties such as border-box
    55// @since 3.0.0
    6 // @version 6.0.0
     6// @version 7.0.0
    77
    88#item-body,
    99.single-screen-navs {
    … …  
    432432                }
    433433        }
    434434
    435         .grid.members-list, {
     435        .grid.members-list {
    436436
    437437                .list-wrap {
    438438                        min-height: 300px;
    439439                }
    440440        }
    441441
    442         .grid.blogs-list, {
     442        .grid.blogs-list {
    443443
    444444                .list-wrap {
    445445                        min-height: 320px;

  • src/bp-templates/bp-nouveau/common-styles/_bp_navigation.scss 

    diff --git src/bp-templates/bp-nouveau/common-styles/_bp_navigation.scss src/bp-templates/bp-nouveau/common-styles/_bp_navigation.scss
index 391ae924c..6c4954425 100644
     
    11// BP primary & secondary navigation - directory and single screens
    2 // @version 3.0.0
     2// @since 3.0.0
     3// @version 7.0.0
    34
    45// all devices & generic styles sitewide
    56.bp-navs {
    … …  
    100101                }
    101102
    102103                li:not(.current),
    103                 li:not(.selected), {
     104                li:not(.selected) {
    104105
    105106                        a:focus,
    106107                        a:hover {
    … …  
    251252                        }
    252253                }
    253254        }
    254 
    255255} // close .buddypress-wrap
    256256
    257257// Single screens object navs
    … …  
    421421                }
    422422
    423423        } // close @media
    424 
    425424} // close .buddypress-wrap
    426425
    427426
    … …  
    440439                                }
    441440                        }
    442441                }
    443 
    444442        }
    445443}
    446444

  • src/bp-templates/bp-nouveau/common-styles/_bp_search.scss 

    diff --git src/bp-templates/bp-nouveau/common-styles/_bp_search.scss src/bp-templates/bp-nouveau/common-styles/_bp_search.scss
index ae4fa53ce..2b1c91e58 100644
     
    11// BP Directory Search elements
    22// @since 3.0.0
    3 // @version 5.0.0
     3// @version 7.0.0
    44
    55.buddypress-wrap { // the ID is required to add weight to rules
    66
    … …  
    3030                input[type="search"],
    3131                input[type="text"] {
    3232                        float: left;
    33                         line-height: 1.5;
     33                        line-height: 2;
    3434                        padding: 3px 10px;
    35                         width: 80%;
     35                        width: 78%;
    3636                }
    3737
    3838                button[type="submit"] {

  • src/bp-templates/bp-nouveau/common-styles/_bp_tables.scss 

    diff --git src/bp-templates/bp-nouveau/common-styles/_bp_tables.scss src/bp-templates/bp-nouveau/common-styles/_bp_tables.scss
index 0ea1dcf56..b4ddd6962 100644
     
    11// BP default/generic Table styles.
    2 // @version 3.0.0
     2// @since 3.0.0
     3// @version 7.0.0
    34.buddypress-wrap {
    45
    56        .bp-tables-user,
    … …  
    5859        }
    5960
    6061        .bp-tables-user,
    61         table.wp-profile-fields, {
     62        table.wp-profile-fields {
    6263
    6364                tr.alt {
    6465

  • src/bp-templates/bp-nouveau/css/buddypress-rtl.css 

    diff --git src/bp-templates/bp-nouveau/css/buddypress-rtl.css src/bp-templates/bp-nouveau/css/buddypress-rtl.css
index 3f55a7e34..648a78d3d 100644
    body #buddypress .bp-list .action { 
    8383}
    8484
    8585@media screen and (min-width: 46.8em) {
    86         body.buddypress .entry-header,
    87         body.buddypress .site-content .entry-header,
    88         body.buddypress .entry-content {
     86        body.buddypress .entry-header:not(.alignwide):not(.alignfull),
     87        body.buddypress .site-content .entry-header:not(.alignwide):not(.alignfull),
     88        body.buddypress .entry-content:not(.alignwide):not(.alignfull) {
    8989                max-width: none;
    9090        }
    9191        body.buddypress .entry-header {
    … … body.buddypress article.page > .entry-header { 
    142142        padding: 0;
    143143}
    144144
    145 body.buddypress article.page > .entry-header .entry-title {
     145body.buddypress article.page > .entry-header:not(.alignwide):not(.alignfull) .entry-title {
    146146        font-size: 28px;
    147147        font-weight: inherit;
    148148        color: #767676;
    149149}
    150150
    151151@media screen and (min-width: 46.8em) {
    152         body.buddypress article.page > .entry-header .entry-title {
     152        body.buddypress article.page > .entry-header:not(.alignwide):not(.alignfull) .entry-title {
    153153                font-size: 34px;
    154154        }
    155155}
    … … body.buddypress.settings.data #buddypress.buddypress-wrap .item-body p a { 
    34813481.buddypress-wrap .standard-form [data-bp-search] input[type="text"],
    34823482.buddypress-wrap .standard-form .groups-members-search input[type="search"],
    34833483.buddypress-wrap .standard-form .groups-members-search input[type="text"] {
    3484         background: #fafafa;
     3484        background-color: #fafafa;
    34853485        border: 1px solid #d6d6d6;
    34863486        border-radius: 0;
    34873487        font: inherit;
    … … body.buddypress.settings.data #buddypress.buddypress-wrap .item-body p a { 
    35523552.buddypress-wrap .standard-form input:focus,
    35533553.buddypress-wrap .standard-form textarea:focus,
    35543554.buddypress-wrap .standard-form select:focus {
    3555         background: #fafafa;
     3555        background-color: #fafafa;
    35563556        color: #555;
    35573557        outline: 0;
    35583558}
    … … body.no-js .buddypress #messages-bulk-management #select-all-messages { 
    37913791.buddypress-wrap form#group-members-search input[type="search"],
    37923792.buddypress-wrap form#group-members-search input[type="text"] {
    37933793        float: right;
    3794         line-height: 1.5;
     3794        line-height: 2;
    37953795        padding: 3px 10px;
    3796         width: 80%;
     3796        width: 78%;
    37973797}
    37983798
    37993799.buddypress-wrap form.bp-dir-search-form button[type="submit"],

  • src/bp-templates/bp-nouveau/css/buddypress.css 

    diff --git src/bp-templates/bp-nouveau/css/buddypress.css src/bp-templates/bp-nouveau/css/buddypress.css
index 906c225b9..76e0ea595 100644
    body #buddypress .bp-list .action { 
    8383}
    8484
    8585@media screen and (min-width: 46.8em) {
    86         body.buddypress .entry-header,
    87         body.buddypress .site-content .entry-header,
    88         body.buddypress .entry-content {
     86        body.buddypress .entry-header:not(.alignwide):not(.alignfull),
     87        body.buddypress .site-content .entry-header:not(.alignwide):not(.alignfull),
     88        body.buddypress .entry-content:not(.alignwide):not(.alignfull) {
    8989                max-width: none;
    9090        }
    9191        body.buddypress .entry-header {
    … … body.buddypress article.page > .entry-header { 
    142142        padding: 0;
    143143}
    144144
    145 body.buddypress article.page > .entry-header .entry-title {
     145body.buddypress article.page > .entry-header:not(.alignwide):not(.alignfull) .entry-title {
    146146        font-size: 28px;
    147147        font-weight: inherit;
    148148        color: #767676;
    149149}
    150150
    151151@media screen and (min-width: 46.8em) {
    152         body.buddypress article.page > .entry-header .entry-title {
     152        body.buddypress article.page > .entry-header:not(.alignwide):not(.alignfull) .entry-title {
    153153                font-size: 34px;
    154154        }
    155155}
    … … body.buddypress.settings.data #buddypress.buddypress-wrap .item-body p a { 
    34813481.buddypress-wrap .standard-form [data-bp-search] input[type="text"],
    34823482.buddypress-wrap .standard-form .groups-members-search input[type="search"],
    34833483.buddypress-wrap .standard-form .groups-members-search input[type="text"] {
    3484         background: #fafafa;
     3484        background-color: #fafafa;
    34853485        border: 1px solid #d6d6d6;
    34863486        border-radius: 0;
    34873487        font: inherit;
    … … body.buddypress.settings.data #buddypress.buddypress-wrap .item-body p a { 
    35523552.buddypress-wrap .standard-form input:focus,
    35533553.buddypress-wrap .standard-form textarea:focus,
    35543554.buddypress-wrap .standard-form select:focus {
    3555         background: #fafafa;
     3555        background-color: #fafafa;
    35563556        color: #555;
    35573557        outline: 0;
    35583558}
    … … body.no-js .buddypress #messages-bulk-management #select-all-messages { 
    37913791.buddypress-wrap form#group-members-search input[type="search"],
    37923792.buddypress-wrap form#group-members-search input[type="text"] {
    37933793        float: left;
    3794         line-height: 1.5;
     3794        line-height: 2;
    37953795        padding: 3px 10px;
    3796         width: 80%;
     3796        width: 78%;
    37973797}
    37983798
    37993799.buddypress-wrap form.bp-dir-search-form button[type="submit"],

  • new file src/bp-templates/bp-nouveau/css/twentytwentyone-rtl.css 

    diff --git src/bp-templates/bp-nouveau/css/twentytwentyone-rtl.css src/bp-templates/bp-nouveau/css/twentytwentyone-rtl.css
new file mode 100644
index 000000000..7cb601377
    - +  
     1/*--------------------------------------------------------------
     2Hello, this is the BP Nouveau's Twenty Twenty-One companion stylesheet.
     3
     4@since 7.0.0
     5@version 7.0.0
     6
     7----------------------------------------------------------------
     8>>> TABLE OF CONTENTS:
     9----------------------------------------------------------------
     101.0 - BP Generic, Typography & Imagery
     11
     122.0 - Navigation - General
     13        2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     14        2.2 - Pagination
     15
     163.0 - BP Lists / Loops Generic & filters
     17        3.1 - Activity Loop
     18                3.1.1 Whats New Activity
     19                3.1.2 - Activity Entries
     20                3.1.3 - Activity Comments
     21        3.2 - Blogs Loop
     22        3.3 - Groups Loop
     23        3.4 - Members Loop
     24
     254.0 - Directories - Members, Groups, Blogs, Register, Activation
     26        4.1 - Groups Creation Steps Screens
     275.0 - Single Item screens: User Account & Single Group Screens
     28        5.1 - Item Headers: Global
     29                5.1.1 - item-header: Groups
     30                5.1.2 - item-header: User Accounts
     31        5.2 - Item Body: Global
     32                5.2.1 - item-body: Groups
     33                        5.2.1.1 - Management settings screens
     34                        5.2.1.2 - Group Members list
     35                        5.2.1.3 - Group Invite list
     36                        5.2.1.4 - Group Activity
     37                5.2.2 - item-body: User Accounts
     38                        5.2.2.1 - classes, pag, filters
     39                        5.2.2.2 - Extended Profiles
     40                        5.2.2.3 - Groups
     41                        5.2.2.4 - friends
     42                        5.2.2.5 - Private Messaging Threads
     43                        5.2.2.6 - Settings
     44
     456.0 - Forms  -  General
     46        6.1 - Dir Search
     47
     487.0 - Tables -  General
     49
     508.0 - Classes - Messages, Ajax, Widgets, Buttons, Tooltips
     51
     529.0 - Layout Classes.
     53--------------------------------------------------------------*/
     54/**
     55*-------------------------------------------------------------------------------
     56* @section 1.0 - BP Generic, Typography & Imagery
     57*-------------------------------------------------------------------------------
     58*/
     59.is-dark-theme #buddypress.twentytwentyone .avatar {
     60        background: var(--global--color-white-90);
     61}
     62
     63/**
     64*-------------------------------------------------------------------------------
     65* @section 2.0 - Navigation - General
     66*-------------------------------------------------------------------------------
     67*/
     68/**
     69*----------------------------------------------------------
     70* @section 2.1 - Navs Object Nav / Sub Nav (bp-list)
     71*
     72* The main navigational elements for all BP screens
     73*----------------------------------------------------------
     74*/
     75@media screen and (max-width: 46.8em) {
     76        #buddypress.twentytwentyone:not(.bp-single-vert-nav) .bp-navs li {
     77                background: transparent;
     78        }
     79}
     80
     81#buddypress.twentytwentyone .bp-navs li .count {
     82        background-color: var(--button--color-background);
     83        border: 1px solid var(--button--color-background);
     84        border-radius: 50%;
     85        color: var(--button--color-text);
     86}
     87
     88#buddypress.twentytwentyone .bp-navs:not(.tabbed-links) li.selected a .count,
     89#buddypress.twentytwentyone .bp-navs:not(.tabbed-links) li.current a .count,
     90#buddypress.twentytwentyone .bp-navs:not(.tabbed-links) li a:hover a .count {
     91        background-color: var(--global--color-background);
     92        border: 1px solid var(--global--color-background);
     93        color: var(--button--color-text-hover);
     94}
     95
     96#buddypress.twentytwentyone .bp-navs li:not(.current):not(.selected) a:focus,
     97#buddypress.twentytwentyone .bp-navs li:not(.current):not(.selected) a:hover {
     98        background: var(--global--color-background);
     99        color: var(--global--color-primary);
     100        outline-offset: -6px;
     101        outline: 2px dotted currentColor;
     102}
     103
     104#buddypress.twentytwentyone .bp-navs li.selected a,
     105#buddypress.twentytwentyone .bp-navs li.selected a:focus,
     106#buddypress.twentytwentyone .bp-navs li.selected a:hover,
     107#buddypress.twentytwentyone .bp-navs li.current a,
     108#buddypress.twentytwentyone .bp-navs li.current a:focus,
     109#buddypress.twentytwentyone .bp-navs li.current a:hover {
     110        color: var(--button--color-text);
     111        background-color: var(--button--color-background);
     112}
     113
     114#buddypress.twentytwentyone .bp-navs.tabbed-links ul,
     115#buddypress.twentytwentyone .bp-navs.tabbed-links ol {
     116        border-bottom: 1px solid var(--global--color-primary);
     117}
     118
     119#buddypress.twentytwentyone .bp-navs.tabbed-links ul li.current,
     120#buddypress.twentytwentyone .bp-navs.tabbed-links ol li.current {
     121        border-color: var(--global--color-primary) var(--global--color-primary) var(--global--color-background);
     122        border-style: solid;
     123        border-top-right-radius: 4px;
     124        border-top-left-radius: 4px;
     125}
     126
     127#buddypress.twentytwentyone .bp-navs.tabbed-links ul li.current a,
     128#buddypress.twentytwentyone .bp-navs.tabbed-links ol li.current a {
     129        color: var(--global--color-primary);
     130        background-color: var(--global--color-background);
     131}
     132
     133#buddypress.twentytwentyone #group-invites-container .bp-invites-nav {
     134        border-bottom: none;
     135}
     136
     137#buddypress.twentytwentyone #group-invites-container .bp-invites-nav li .count {
     138        margin-right: 10px;
     139        border-radius: 10%;
     140        vertical-align: 10%;
     141}
     142
     143#buddypress.twentytwentyone #group-invites-container #send-invites-editor ul {
     144        padding-right: 0;
     145}
     146
     147#buddypress.twentytwentyone.bp-dir-hori-nav:not(.bp-vertical-navs) nav:not(.tabbed-links) {
     148        border: none;
     149        border-bottom: 1px solid var(--global--color-primary);
     150        box-shadow: none;
     151}
     152
     153#buddypress.twentytwentyone .subnav-filters > ul {
     154        padding-right: 0;
     155}
     156
     157#buddypress.twentytwentyone .notifications-options-nav {
     158        margin-top: 1em;
     159}
     160
     161#buddypress.twentytwentyone .notifications-options-nav input#notification-bulk-manage {
     162        line-height: 1.2;
     163}
     164
     165/**
     166*----------------------------------------------------------
     167* @section 2.2 - Pagination
     168*----------------------------------------------------------
     169*/
     170#buddypress.twentytwentyone .bp-pagination {
     171        color: var(--global--color-secondary);
     172}
     173
     174/**
     175*-------------------------------------------------------------------------------
     176* @section 3.0 - BP Lists / Loops Generic
     177*-------------------------------------------------------------------------------
     178*/
     179#buddypress.twentytwentyone .bp-list {
     180        border-top: 1px dotted var(--global--color-primary);
     181}
     182
     183#buddypress.twentytwentyone .bp-list > li {
     184        border-bottom: 1px dotted var(--global--color-primary);
     185}
     186
     187#buddypress.twentytwentyone .activity-list.bp-list {
     188        background: inherit;
     189        border-right: none;
     190        border-left: none;
     191        border-bottom: 1px dotted var(--global--color-primary);
     192}
     193
     194#buddypress.twentytwentyone .activity-list.bp-list .activity-item {
     195        background: inherit;
     196        border: 1px solid var(--global--color-primary);
     197        box-shadow: none;
     198}
     199
     200#buddypress.twentytwentyone .activity-list.bp-list .activity-item .activity-header .time-since,
     201#buddypress.twentytwentyone .activity-list.bp-list .activity-item .activity-header .time-since:hover {
     202        color: var(--global--color-secondary);
     203}
     204
     205#buddypress.twentytwentyone .bp-list li:not(.mini) .item-avatar img.avatar {
     206        display: block;
     207        margin: 0 auto;
     208        margin-bottom: 1em;
     209}
     210
     211@media screen and (min-width: 46.8em) {
     212        #buddypress.twentytwentyone .bp-list li:not(.mini) .item-avatar {
     213                max-width: 128px;
     214                max-height: 128px;
     215                margin: auto;
     216                margin-left: 5%;
     217        }
     218}
     219
     220#buddypress.twentytwentyone .bp-list li.mini .item-avatar img.avatar {
     221        display: block;
     222        margin: 0 auto;
     223        max-width: 50px;
     224        max-height: 50px;
     225        margin-bottom: 1em;
     226}
     227
     228@media screen and (min-width: 46.8em) {
     229        #buddypress.twentytwentyone .bp-list li.mini .item-avatar {
     230                width: 5%;
     231                margin: auto;
     232                margin-left: 2%;
     233        }
     234}
     235
     236#buddypress.twentytwentyone .bp-list li.mini .activity-meta.action {
     237        clear: none;
     238}
     239
     240#buddypress.twentytwentyone .bp-list li .meta,
     241#buddypress.twentytwentyone .bp-list li .item-meta {
     242        color: var(--global--color-secondary);
     243}
     244
     245/**
     246*----------------------------------------------------------
     247* @section 3.1 - Activity Loop
     248*----------------------------------------------------------
     249*/
     250/**
     251*-----------------------------------------------------
     252* @section 3.1.1 - Activity Whats New
     253*-----------------------------------------------------
     254*/
     255#buddypress.twentytwentyone .activity-update-form {
     256        border: 1px solid var(--global--color-primary);
     257        box-shadow: none;
     258}
     259
     260#buddypress.twentytwentyone .activity-update-form #whats-new-post-in-box #whats-new-post-in-box-items li {
     261        margin-bottom: 0;
     262}
     263
     264#buddypress.twentytwentyone .activity-update-form #whats-new-post-in-box #whats-new-post-in-box-items li.bp-activity-object {
     265        padding: 5px;
     266        margin-right: 3px;
     267        border-radius: 0;
     268        border-style: dotted;
     269        border-width: 0;
     270        border-right-width: 1px;
     271        border-left-width: 1px;
     272}
     273
     274#buddypress.twentytwentyone .activity-update-form #whats-new-post-in-box #whats-new-post-in-box-items li.bp-activity-object:not(.selected) {
     275        background: var(--global--color-white-90);
     276        color: var(--form--color-text);
     277        border-color: var(--form--border-color);
     278}
     279
     280#buddypress.twentytwentyone .activity-update-form #whats-new-post-in-box #whats-new-post-in-box-items li.bp-activity-object:not(.selected):last-child {
     281        border-bottom: dotted 1px;
     282}
     283
     284#buddypress.twentytwentyone .activity-update-form #whats-new-post-in-box #whats-new-post-in-box-items li.bp-activity-object:not(.selected):hover {
     285        background: var(--global--color-blue);
     286}
     287
     288#buddypress.twentytwentyone .activity-update-form #whats-new-post-in-box #whats-new-post-in-box-items li.bp-activity-object.selected {
     289        border: none;
     290        background-color: transparent;
     291}
     292
     293/**
     294*-----------------------------------------------------
     295* @section 3.1.2 - Activity Entries
     296*-----------------------------------------------------
     297*/
     298body .site #buddypress.twentytwentyone .activity-list .load-more,
     299body .site #buddypress.twentytwentyone .activity-list .load-newest {
     300        background-color: var(--button--color-background);
     301        color: var(--button--color-text);
     302        border: 1px solid var(--button--color-background);
     303}
     304
     305body .site #buddypress.twentytwentyone .activity-list .load-more a,
     306body .site #buddypress.twentytwentyone .activity-list .load-newest a {
     307        color: var(--button--color-text);
     308}
     309
     310body .site #buddypress.twentytwentyone .activity-list .load-more a:focus,
     311body .site #buddypress.twentytwentyone .activity-list .load-newest a:focus {
     312        color: var(--button--color-text-hover);
     313        background: transparent;
     314        outline-offset: -6px;
     315        outline: 2px dotted currentColor;
     316}
     317
     318body .site #buddypress.twentytwentyone .activity-list .load-more:hover, body .site #buddypress.twentytwentyone .activity-list .load-more:focus,
     319body .site #buddypress.twentytwentyone .activity-list .load-newest:hover,
     320body .site #buddypress.twentytwentyone .activity-list .load-newest:focus {
     321        color: var(--button--color-text-hover);
     322        background: transparent;
     323}
     324
     325body .site #buddypress.twentytwentyone .activity-list .load-more:hover a, body .site #buddypress.twentytwentyone .activity-list .load-more:focus a,
     326body .site #buddypress.twentytwentyone .activity-list .load-newest:hover a,
     327body .site #buddypress.twentytwentyone .activity-list .load-newest:focus a {
     328        color: var(--button--color-text-hover);
     329        background: transparent;
     330}
     331
     332body .site #buddypress.twentytwentyone .activity-list .activity-content .activity-header,
     333body .site #buddypress.twentytwentyone .activity-list .activity-content .comment-header {
     334        color: var(--global--color-secondary);
     335}
     336
     337body .site #buddypress.twentytwentyone .activity-list .activity-content .activity-header a,
     338body .site #buddypress.twentytwentyone .activity-list .activity-content .comment-header a {
     339        font-weight: 600;
     340}
     341
     342body .site #buddypress.twentytwentyone .activity-list .activity-content .activity-header a:hover,
     343body .site #buddypress.twentytwentyone .activity-list .activity-content .comment-header a:hover {
     344        text-decoration: underline;
     345}
     346
     347body .site #buddypress.twentytwentyone .activity-list .activity-content .activity-inner,
     348body .site #buddypress.twentytwentyone .activity-list .activity-content blockquote {
     349        background: inherit;
     350        border: 1px dotted var(--global--color-primary);
     351}
     352
     353body .site #buddypress.twentytwentyone .activity-list .activity-content .activity-meta.action {
     354        background: inherit;
     355}
     356
     357body .site #buddypress.twentytwentyone .activity-list .activity-content .activity-meta.action .button:before,
     358body .site #buddypress.twentytwentyone .activity-list .activity-content .activity-meta.action .icons:before {
     359        height: auto;
     360        width: auto;
     361        display: inline;
     362}
     363
     364body .site #buddypress.twentytwentyone .activity-list .activity-content .activity-meta.action .button {
     365        background: var(--global--color-background);
     366        color: var(--global--color-primary);
     367        border: none;
     368}
     369
     370body .site #buddypress.twentytwentyone .activity-list .activity-content .activity-meta.action .button span {
     371        color: var(--global--color-secondary);
     372}
     373
     374body.activity-permalink #buddypress.twentytwentyone .activity-list {
     375        border: none;
     376}
     377
     378body.activity-permalink #buddypress.twentytwentyone .activity-list .activity-avatar img.avatar {
     379        background: var(--global--color-white);
     380}
     381
     382/**
     383*-----------------------------------------------------
     384* @section 3.1.3 - Activity Comments
     385*-----------------------------------------------------
     386*/
     387#buddypress.twentytwentyone .bp-list li .activity-comments .acomment-avatar {
     388        width: auto;
     389        margin-left: 0;
     390}
     391
     392#buddypress.twentytwentyone .bp-list li .activity-comments .acomment-meta {
     393        color: var(--global--color-secondary);
     394}
     395
     396#buddypress.twentytwentyone .bp-list li .activity-comments .acomment-meta a {
     397        font-weight: 600;
     398}
     399
     400#buddypress.twentytwentyone .bp-list li .activity-comments .acomment-meta a:hover {
     401        text-decoration: underline;
     402}
     403
     404#buddypress.twentytwentyone .bp-list li .activity-comments .acomment-content {
     405        border-right: 1px solid var(--global--color-secondary);
     406        margin: 15px 5% 0 0;
     407}
     408
     409/**
     410*----------------------------------------------------------
     411* @section 3.2 - Blogs Loop
     412*----------------------------------------------------------
     413*/
     414/**
     415*----------------------------------------------------------
     416* @section 3.3 - Groups Loop
     417*----------------------------------------------------------
     418*/
     419#buddypress.twentytwentyone .groups-list li .group-desc {
     420        color: var(--global--color-secondary);
     421        border: 1px dotted var(--global--color-primary);
     422}
     423
     424/**
     425*----------------------------------------------------------
     426* @section 3.4 - Members Loop
     427*----------------------------------------------------------
     428*/
     429#buddypress.twentytwentyone .members-list li .user-update {
     430        border: 1px dotted var(--global--color-primary);
     431        color: var(--global--color-secondary);
     432}
     433
     434#buddypress.twentytwentyone #members-dir-list .current-member-type {
     435        text-align: center;
     436}
     437
     438/**
     439*-------------------------------------------------------------------------------
     440* @section 4.0 - Directories
     441*-------------------------------------------------------------------------------
     442*/
     443/**
     444*----------------------------------------------------------
     445* @section 4.1 - Groups Creation Steps
     446*----------------------------------------------------------
     447*/
     448#buddypress.twentytwentyone #group-create-body #avatar-crop-pane {
     449        margin-bottom: 1em;
     450}
     451
     452#buddypress.twentytwentyone #group-create-body nav.group-create-links:not(.tabbed-links) {
     453        background: transparent;
     454        clear: both;
     455        overflow: hidden;
     456        border: none;
     457        border-bottom: 1px solid var(--global--color-primary);
     458        box-shadow: none;
     459}
     460
     461#buddypress.twentytwentyone #group-create-body nav.group-create-links:not(.tabbed-links) li a,
     462#buddypress.twentytwentyone #group-create-body nav.group-create-links:not(.tabbed-links) li span {
     463        padding: 0.5em calc(0.5em + 2px);
     464        display: block;
     465}
     466
     467/**
     468*-------------------------------------------------------------------------------
     469* @section 5.0 - Single Item screens: Groups, Users
     470*-------------------------------------------------------------------------------
     471*/
     472/**
     473*-----------------------------------------------------------
     474* @subsection 5.1 - Item Header Global
     475*-----------------------------------------------------------
     476*/
     477#buddypress.twentytwentyone .single-headers .group-status,
     478#buddypress.twentytwentyone .single-headers .item-meta,
     479#buddypress.twentytwentyone .single-headers .bp-group-type-list,
     480#buddypress.twentytwentyone .single-headers .bp-member-type-list {
     481        color: var(--global--color-secondary);
     482}
     483
     484#buddypress.twentytwentyone .single-headers a:hover {
     485        text-decoration: underline;
     486}
     487
     488/**
     489*-----------------------------------------------------
     490* @subsection 5.1.1 - item-header Groups
     491*
     492* Group Specific Item Header
     493*-----------------------------------------------------
     494*/
     495#buddypress.twentytwentyone .groups-header .desc-wrap {
     496        background: var(--global--color-background);
     497        border: 1px solid var(--global--color-primary);
     498}
     499
     500#buddypress.twentytwentyone .groups-header .desc-wrap .group-description {
     501        background: none;
     502        box-shadow: none;
     503}
     504
     505/**
     506*-----------------------------------------------------
     507* @subsection 5.1.2 - Item Header User Accounts
     508*
     509* User Accounts Specific Item Header
     510*-----------------------------------------------------
     511*/
     512/**
     513*-----------------------------------------------------------
     514* @subsection 5.2 - Item Body: Global
     515*-----------------------------------------------------------
     516*/
     517#buddypress.twentytwentyone .item-body h2.screen-heading,
     518#buddypress.twentytwentyone .item-body h2.creation-step-name {
     519        font-size: var(--heading--font-size-h2);
     520        letter-spacing: var(--heading--letter-spacing-h2);
     521}
     522
     523#buddypress.twentytwentyone .item-body h3.screen-heading,
     524#buddypress.twentytwentyone .item-body h3.creation-step-name {
     525        font-size: var(--heading--font-size-h3);
     526        letter-spacing: var(--heading--letter-spacing-h3);
     527}
     528
     529#buddypress.twentytwentyone .item-body h4.screen-heading,
     530#buddypress.twentytwentyone .item-body h4.creation-step-name {
     531        font-size: var(--heading--font-size-h4);
     532        letter-spacing: var(--heading--letter-spacing-h4);
     533}
     534
     535/**
     536*----------------------------------------------------
     537* @subsection 5.2.1 - Item Body Groups
     538*
     539* Groups specific item body rules -  screens
     540*----------------------------------------------------
     541*/
     542/**
     543*-----------------------------------------
     544* @subsection 5.2.1.1 - Management Settings Screens
     545*-----------------------------------------
     546*/
     547.group-settings #buddypress.twentytwentyone .group-settings-selections {
     548        margin-bottom: 1em;
     549}
     550
     551#buddypress.twentytwentyone #group-manage-members-ui .bp-pagination {
     552        padding: 0.4em 0.5em 0.4em 0;
     553}
     554
     555#buddypress.twentytwentyone #group-manage-members-ui #group-members-search-form input[type="search"] {
     556        font-size: 16px;
     557}
     558
     559#buddypress.twentytwentyone #group-manage-members-ui #group-members-search-form input[type="search"]:focus {
     560        outline-offset: -7px;
     561        outline: 2px dotted var(--form--border-color);
     562}
     563
     564#buddypress.twentytwentyone #group-manage-members-ui #group-members-search-form button[type="submit"] {
     565        border-width: 1px;
     566        border-style: solid;
     567        background-clip: border-box;
     568}
     569
     570#buddypress.twentytwentyone #group-manage-members-ui #group-members-search-form button[type="submit"]:hover {
     571        border-color: var(--button--color-background);
     572}
     573
     574#buddypress.twentytwentyone #group-manage-members-ui #group-roles-filter label,
     575#buddypress.twentytwentyone #group-manage-members-ui #group-members-list-table .group-member-edit label {
     576        border: 0;
     577        clip: rect(0 0 0 0);
     578        height: 1px;
     579        margin: -1px;
     580        overflow: hidden;
     581        padding: 0;
     582        position: absolute;
     583        width: 1px;
     584        word-wrap: normal !important;
     585}
     586
     587#buddypress.twentytwentyone #group-manage-members-ui #group-members-role-filter,
     588#buddypress.twentytwentyone #group-manage-members-ui #group-members-list-table .group-member-edit select {
     589        font-size: 16px;
     590        padding: 6px 10px 6px 25px;
     591}
     592
     593#buddypress.twentytwentyone #group-manage-members-ui #group-members-role-filter:focus,
     594#buddypress.twentytwentyone #group-manage-members-ui #group-members-list-table .group-member-edit select:focus {
     595        outline-offset: 2px;
     596        outline: 2px dotted var(--form--border-color);
     597}
     598
     599/**
     600*-----------------------------------------
     601* @subsection 5.2.1.2 - Group Members List
     602*-----------------------------------------
     603*/
     604/*
     605*-----------------------------------------
     606* @subsection 5.2.1.3 - Group Invites List
     607*-----------------------------------------
     608*/
     609#buddypress.twentytwentyone .bp-invites-content ul {
     610        border-top: none;
     611}
     612
     613#buddypress.twentytwentyone .bp-invites-content ul li {
     614        border: 1px dotted var(--global--color-primary);
     615}
     616
     617#buddypress.twentytwentyone .bp-invites-content ul li.selected {
     618        box-shadow: none;
     619        border-style: solid;
     620}
     621
     622#buddypress.twentytwentyone .bp-invites-content ul li button.invite-button {
     623        border: none;
     624        background: none;
     625        top: -5px;
     626        left: 0;
     627}
     628
     629#buddypress.twentytwentyone .bp-invites-content ul li button.invite-button .icons:before {
     630        border-radius: 50%;
     631        width: 32px;
     632        height: 32px;
     633        color: var(--global--color-primary);
     634        background: var(--global--color-background);
     635}
     636
     637#buddypress.twentytwentyone .bp-invites-content ul li button.invite-button:hover .icons:before {
     638        color: var(--global--color-background);
     639        background: var(--global--color-primary);
     640        width: 32px;
     641        height: 32px;
     642}
     643
     644#buddypress.twentytwentyone .bp-invites-content ul li ul.group-inviters li {
     645        border: none;
     646}
     647
     648/*
     649*-----------------------------------------
     650* @subsection 5.2.1.4 - Group Activity
     651*-----------------------------------------
     652*/
     653/**
     654*-----------------------------------------------------
     655* @subsection 5.2.2 - Item Body User Accounts
     656*
     657* User Account specific item body rules
     658*-----------------------------------------------------
     659*/
     660/**
     661*--------------------------------------------
     662* @subsection 5.2.2.1 - classes, pag, filters
     663*--------------------------------------------
     664*/
     665/**
     666*-------------------------------------------
     667* @subsection 5.2.2.2 - Extended Profiles
     668*-------------------------------------------
     669*/
     670#buddypress.twentytwentyone .profile table.profile-fields tr.alt td,
     671#buddypress.twentytwentyone .profile table.profile-fields tr td,
     672#buddypress.twentytwentyone .profile table.bp-tables-user tr.alt td,
     673#buddypress.twentytwentyone .profile table.bp-tables-user tr td {
     674        background: transparent;
     675}
     676
     677#buddypress.twentytwentyone .profile table.profile-fields tr.alt td.label,
     678#buddypress.twentytwentyone .profile table.profile-fields tr td.label,
     679#buddypress.twentytwentyone .profile table.bp-tables-user tr.alt td.label,
     680#buddypress.twentytwentyone .profile table.bp-tables-user tr td.label {
     681        border-left-color: var(--global--color-primary);
     682}
     683
     684#buddypress.twentytwentyone .profile.edit .editfield {
     685        background: var(--global--color-background);
     686        border: 1px solid var(--global--color-primary);
     687}
     688
     689#buddypress.twentytwentyone .profile.edit .editfield p.field-visibility-settings-toggle {
     690        margin-top: 1em;
     691}
     692
     693#buddypress.twentytwentyone .profile.edit .editfield .field-visibility-settings .radio label {
     694        margin-bottom: 0.5em;
     695}
     696
     697#buddypress.twentytwentyone .profile.edit .wp-editor-container .mce-toolbar button {
     698        color: var(--global--color-dark-gray);
     699        background: var(--global--color-white-90);
     700        border-color: var(--global--color-dark-gray);
     701}
     702
     703#buddypress.twentytwentyone .profile.edit .button-tabs li {
     704        border: solid 2px var(--global--color-primary);
     705        overflow: hidden;
     706}
     707
     708#buddypress.twentytwentyone .profile.edit .button-tabs li a {
     709        text-decoration: none;
     710}
     711
     712#buddypress.twentytwentyone .profile.edit .button-tabs li.current {
     713        background-color: var(--global--color-primary);
     714        color: var(--button--color-text);
     715}
     716
     717#buddypress.twentytwentyone .profile.edit .button-tabs li.current a {
     718        color: var(--button--color-text);
     719}
     720
     721#buddypress.twentytwentyone .profile.edit .button-tabs li:hover {
     722        outline-offset: 10px;
     723        border-style: dotted;
     724}
     725
     726#buddypress.twentytwentyone .profile.edit .clear-value {
     727        text-decoration: underline;
     728}
     729
     730#buddypress.twentytwentyone .profile.edit legend {
     731        padding: 0;
     732}
     733
     734#buddypress.twentytwentyone .field-visibility-settings,
     735#buddypress.twentytwentyone .field-visibility-settings-header {
     736        color: var(--global--color-secondary);
     737}
     738
     739#buddypress.twentytwentyone .bp-avatar-nav ul.avatar-nav-items {
     740        border-bottom: 1px solid var(--global--color-primary);
     741}
     742
     743#buddypress.twentytwentyone .bp-avatar-nav ul.avatar-nav-items li.current {
     744        border: 1px solid var(--global--color-primary);
     745        border-bottom: 1px solid var(--global--color-background);
     746}
     747
     748#buddypress.twentytwentyone #drag-drop-area {
     749        border: 4px dashed var(--global--color-secondary);
     750}
     751
     752#buddypress.twentytwentyone #drag-drop-area .drag-drop-info {
     753        color: var(--global--color-secondary);
     754}
     755
     756#buddypress.twentytwentyone .bp-avatar-status .warning,
     757#buddypress.twentytwentyone .bp-avatar-status .success,
     758#buddypress.twentytwentyone .bp-cover-image-status .warning,
     759#buddypress.twentytwentyone .bp-cover-image-status .success {
     760        background-color: var(--global--color-light-gray);
     761        border: none;
     762        border-right-width: 4px;
     763        border-right-style: solid;
     764        color: var(--global--color-dark-gray);
     765}
     766
     767#buddypress.twentytwentyone .bp-avatar-status .warning,
     768#buddypress.twentytwentyone .bp-cover-image-status .warning {
     769        border-right-color: var(--global--color-orange);
     770}
     771
     772#buddypress.twentytwentyone .bp-avatar-status .success,
     773#buddypress.twentytwentyone .bp-cover-image-status .success {
     774        border-right-color: var(--global--color-green);
     775}
     776
     777#buddypress.twentytwentyone .bp-avatar-status .error,
     778#buddypress.twentytwentyone .bp-cover-image-status .error {
     779        border-right-color: var(--global--color-red);
     780}
     781
     782/**
     783*-------------------------------------------
     784* @subsection 5.2.2.3 - Groups
     785*-------------------------------------------
     786*/
     787#buddypress.twentytwentyone #group-list.invites h2.list-title {
     788        float: none;
     789}
     790
     791#buddypress.twentytwentyone #group-list.invites .accept {
     792        margin-right: 0;
     793}
     794
     795/**
     796*-------------------------------------------
     797* @subsection 5.2.2.5 - Private Messaging
     798*-------------------------------------------
     799*/
     800#buddypress.twentytwentyone #user_messages_select_all {
     801        vertical-align: -5px;
     802}
     803
     804#buddypress.twentytwentyone #user_messages_select_all:checked {
     805        vertical-align: -3px;
     806}
     807
     808#buddypress.twentytwentyone #message-threads {
     809        border-top: 1px dotted var(--global--color-primary);
     810}
     811
     812#buddypress.twentytwentyone #message-threads > li {
     813        border-bottom: 1px dotted var(--global--color-primary);
     814}
     815
     816#buddypress.twentytwentyone #message-threads > li.selected {
     817        border: 1px solid var(--global--color-primary);
     818}
     819
     820#buddypress.twentytwentyone #message-threads > li.unread {
     821        border-right: 8px solid var(--global--color-yellow);
     822}
     823
     824#buddypress.twentytwentyone #message-threads li .thread-cb {
     825        padding-right: 15px;
     826}
     827
     828#buddypress.twentytwentyone #message-threads li.unread .thread-cb {
     829        padding-right: 7px;
     830}
     831
     832#buddypress.twentytwentyone #message-threads li .thread-from img.avatar,
     833#buddypress.twentytwentyone #message-threads li .thread-to img.avatar {
     834        width: 32px;
     835        height: 32px;
     836}
     837
     838#buddypress.twentytwentyone #message-threads li .thread-from .num-recipients,
     839#buddypress.twentytwentyone #message-threads li .thread-to .num-recipients {
     840        color: var(--global--color-primary);
     841}
     842
     843#buddypress.twentytwentyone #message-threads li .thread-content .excerpt {
     844        color: var(--global--color-primary);
     845}
     846
     847#buddypress.twentytwentyone #message-threads li .thread-date time {
     848        color: var(--global--color-primary);
     849}
     850
     851#buddypress.twentytwentyone #message-threads li.selected {
     852        background: transparent;
     853        font-weight: bolder;
     854        color: var(--global--color-primary);
     855}
     856
     857#buddypress.twentytwentyone #message-threads li.selected .thread-subject .subject {
     858        color: var(--global--color-primary);
     859}
     860
     861#buddypress.twentytwentyone #message-threads li:not(.selected) {
     862        color: var(--global--color-secondary);
     863}
     864
     865#buddypress.twentytwentyone .bp-messages-content #thread-preview h2:first-child,
     866#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-header h2:first-child {
     867        background-color: var(--button--color-background);
     868        color: var(--button--color-text);
     869}
     870
     871#buddypress.twentytwentyone .bp-messages-content #thread-preview {
     872        border-color: var(--button--color-background);
     873}
     874
     875#buddypress.twentytwentyone .bp-messages-content #thread-preview dd,
     876#buddypress.twentytwentyone .bp-messages-content #thread-preview .participants-list {
     877        padding-right: 0;
     878}
     879
     880#buddypress.twentytwentyone .bp-messages-content #thread-preview .preview-pane-header {
     881        border-bottom-style: dotted;
     882        border-bottom-color: var(--global--color-primary);
     883}
     884
     885#buddypress.twentytwentyone .bp-messages-content #thread-preview .preview-content .preview-message {
     886        background: transparent;
     887}
     888
     889#buddypress.twentytwentyone .bp-messages-content .single-message-thread-header dd,
     890#buddypress.twentytwentyone .bp-messages-content .single-message-thread-header .participants-list {
     891        padding-right: 0;
     892}
     893
     894#buddypress.twentytwentyone .bp-messages-content .actions button.bp-tooltip {
     895        border: none;
     896        background: none;
     897}
     898
     899#buddypress.twentytwentyone .bp-messages-content .actions button.bp-tooltip.message-action-delete:before {
     900        width: 32px;
     901        height: 32px;
     902        color: var(--global--color-primary);
     903        background: var(--global--color-background);
     904}
     905
     906#buddypress.twentytwentyone .bp-messages-content .actions button.bp-tooltip.message-action-delete:hover:before {
     907        border-radius: 50%;
     908        color: var(--global--color-background);
     909        background: var(--global--color-primary);
     910}
     911
     912#buddypress.twentytwentyone .bp-messages-content .actions .message-action-unstar:before,
     913#buddypress.twentytwentyone .bp-messages-content .actions .message-action-star:before {
     914        color: var(--global--color-secondary);
     915}
     916
     917#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li .message-metadata {
     918        background: transparent;
     919        border: 1px solid var(--global--color-primary);
     920        box-shadow: none;
     921}
     922
     923#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li .message-metadata * {
     924        line-height: 1.6;
     925        vertical-align: middle;
     926}
     927
     928#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li .message-metadata .user-link {
     929        margin-top: 3px;
     930        margin-bottom: 3px;
     931}
     932
     933#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li .message-metadata .user-link strong {
     934        display: inline-block;
     935        margin-top: 2px;
     936}
     937
     938#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li .message-metadata .user-link:hover strong {
     939        text-decoration: underline;
     940}
     941
     942#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li .message-metadata time {
     943        color: var(--global--color-secondary);
     944}
     945
     946#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li .message-content {
     947        background: transparent;
     948        margin: 0;
     949        width: 100%;
     950        padding: 1em;
     951}
     952
     953#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li:first-child .message-content {
     954        border: 1px dotted var(--global--color-primary);
     955        border-top: none;
     956}
     957
     958#buddypress.twentytwentyone .bp-messages-content #send-reply .avatar-box img.avatar {
     959        display: inline-block;
     960        vertical-align: -7px;
     961}
     962
     963#buddypress.twentytwentyone .bp-messages-content .wp-editor-container .mce-toolbar button {
     964        color: var(--global--color-dark-gray);
     965        background: var(--global--color-white-90);
     966        border-color: var(--global--color-dark-gray);
     967}
     968
     969#buddypress.twentytwentyone .bp-messages-content #bp-messages-reset {
     970        border-width: 0;
     971        font-size: inherit;
     972}
     973
     974#buddypress.twentytwentyone .bp-messages-content #send-to-input {
     975        width: 100% !important;
     976}
     977
     978#buddypress.twentytwentyone .subnav-filters button#user_messages_search_submit {
     979        padding: 3px 0.7em;
     980        background-color: var(--global--color-background);
     981        color: var(--button--color-text-hover);
     982        border-color: var(--global--color-background);
     983        border-right-color: var(--button--color-background);
     984}
     985
     986#buddypress.twentytwentyone .subnav-filters button#user_messages_search_submit:hover {
     987        background-color: var(--button--color-background);
     988        color: var(--button--color-text);
     989        border-color: var(--button--color-background);
     990}
     991
     992#buddypress.twentytwentyone .subnav-filters .user-messages-bulk-actions .bulk-apply {
     993        line-height: 1.5;
     994        margin: 0 10px 0 0;
     995        padding: 3px 5px;
     996        background-color: var(--global--color-background);
     997        color: var(--button--color-text-hover);
     998}
     999
     1000#buddypress.twentytwentyone .subnav-filters .user-messages-bulk-actions .bulk-apply:hover {
     1001        background-color: var(--button--color-background);
     1002        color: var(--button--color-text);
     1003}
     1004
     1005#buddypress.twentytwentyone .subnav-filters .user-messages-bulk-actions .bulk-apply span {
     1006        vertical-align: middle;
     1007}
     1008
     1009/**
     1010*------------------------------------------
     1011* @subsection 5.2.2.6 - Settings
     1012*------------------------------------------
     1013*/
     1014#buddypress.twentytwentyone.buddypress-wrap .bp-tables-user tr.alt td,
     1015#buddypress.twentytwentyone.buddypress-wrap table.wp-profile-fields tr.alt td {
     1016        background: transparent;
     1017}
     1018
     1019/**
     1020*-------------------------------------------------------------------------------
     1021* @section 6.0 - Forms  - General
     1022*-------------------------------------------------------------------------------
     1023*/
     1024#buddypress.twentytwentyone fieldset {
     1025        padding-top: 0;
     1026        margin-top: 1em;
     1027}
     1028
     1029#buddypress.twentytwentyone fieldset legend {
     1030        padding: 0 1em;
     1031        display: inline-block;
     1032}
     1033
     1034#buddypress.twentytwentyone .select-wrap {
     1035        border: 1px solid var(--global--color-primary);
     1036        background: var(--global--color-white-90);
     1037}
     1038
     1039#buddypress.twentytwentyone .select-wrap select {
     1040        background: transparent;
     1041        width: 98%;
     1042        text-indent: 0;
     1043}
     1044
     1045#buddypress.twentytwentyone .select-wrap span.select-arrow {
     1046        background: transparent;
     1047}
     1048
     1049#buddypress.twentytwentyone .select-wrap span.select-arrow:before {
     1050        font-family: dashicons;
     1051        content: "\f140";
     1052        color: var(--global--color-black);
     1053        vertical-align: -10%;
     1054}
     1055
     1056#buddypress.twentytwentyone .select-wrap:focus .select-arrow:before, #buddypress.twentytwentyone .select-wrap:hover .select-arrow:before {
     1057        color: var(--global--color-black);
     1058}
     1059
     1060#buddypress.twentytwentyone .wp-pwd:not(.is-open) {
     1061        display: none;
     1062}
     1063
     1064#buddypress.twentytwentyone input[type="checkbox"],
     1065#buddypress.twentytwentyone input[type="radio"] {
     1066        width: 25px;
     1067        height: 25px;
     1068        vertical-align: top;
     1069}
     1070
     1071#buddypress.twentytwentyone textarea,
     1072#buddypress.twentytwentyone input[type="text"],
     1073#buddypress.twentytwentyone input[type="color"],
     1074#buddypress.twentytwentyone input[type="date"],
     1075#buddypress.twentytwentyone input[type="datetime"],
     1076#buddypress.twentytwentyone input[type="datetime-local"],
     1077#buddypress.twentytwentyone input[type="email"],
     1078#buddypress.twentytwentyone input[type="month"],
     1079#buddypress.twentytwentyone input[type="number"],
     1080#buddypress.twentytwentyone input[type="range"],
     1081#buddypress.twentytwentyone input[type="tel"],
     1082#buddypress.twentytwentyone input[type="time"],
     1083#buddypress.twentytwentyone input[type="url"],
     1084#buddypress.twentytwentyone input[type="week"],
     1085#buddypress.twentytwentyone input[type="password"],
     1086#buddypress.twentytwentyone input[type="search"],
     1087#buddypress.twentytwentyone .groups-members-search input[type="text"] {
     1088        color: var(--form--color-text);
     1089        background: var(--global--color-white-90);
     1090}
     1091
     1092#buddypress.twentytwentyone .subnav-filters input[type="search"] {
     1093        font-size: 16px;
     1094        background: transparent;
     1095}
     1096
     1097#buddypress.twentytwentyone .bp-dir-search-form button,
     1098#buddypress.twentytwentyone form#group-members-search button,
     1099#buddypress.twentytwentyone form#group_invites_search_form button {
     1100        background-color: var(--global--color-background);
     1101        color: var(--button--color-text-hover);
     1102        border-color: var(--global--color-background);
     1103        border-right-color: var(--button--color-background);
     1104}
     1105
     1106#buddypress.twentytwentyone .bp-dir-search-form button:hover,
     1107#buddypress.twentytwentyone form#group-members-search button:hover,
     1108#buddypress.twentytwentyone form#group_invites_search_form button:hover {
     1109        background-color: var(--button--color-background);
     1110        color: var(--button--color-text);
     1111        border-color: var(--button--color-background);
     1112}
     1113
     1114#buddypress.twentytwentyone .standard-form p.description {
     1115        color: var(--global--primary-color);
     1116        background-color: var(--global--color-background);
     1117}
     1118
     1119/**
     1120*----------------------------------------------------------
     1121* @section 6.1 - Directory Search
     1122*
     1123* The Search form & controls in directory pages
     1124*----------------------------------------------------------
     1125*/
     1126.bp-user #buddypress.twentytwentyone [data-bp-search] form #user_messages_search {
     1127        padding: 3px 10px;
     1128}
     1129
     1130#buddypress.twentytwentyone form.bp-dir-search-form,
     1131#buddypress.twentytwentyone form.bp-messages-search-form,
     1132#buddypress.twentytwentyone form[data-bp-search].bp-invites-search-form,
     1133#buddypress.twentytwentyone form#group-members-search {
     1134        border: 1px solid var(--global--color-primary);
     1135        background-color: var(--global--color-white-90);
     1136}
     1137
     1138/**
     1139*-------------------------------------------------------------------------------
     1140* @section 7.0 - Tables - General
     1141*-------------------------------------------------------------------------------
     1142*/
     1143#buddypress.twentytwentyone .bp-tables-user tbody tr,
     1144#buddypress.twentytwentyone .bp-tables-user tbody tr.alt,
     1145#buddypress.twentytwentyone table.wp-profile-fields tbody tr,
     1146#buddypress.twentytwentyone table.wp-profile-fields tbody tr.alt,
     1147#buddypress.twentytwentyone table.forum tbody tr,
     1148#buddypress.twentytwentyone table.forum tbody tr.alt {
     1149        background: transparent;
     1150}
     1151
     1152/**
     1153*-------------------------------------------------------------------------------
     1154* @section 8.0 - Classes - Messages, Ajax, Widgets, Buttons
     1155*-------------------------------------------------------------------------------
     1156*/
     1157#buddypress.twentytwentyone button,
     1158#buddypress.twentytwentyone a.button,
     1159#buddypress.twentytwentyone input[type="submit"],
     1160#buddypress.twentytwentyone input[type="button"],
     1161#buddypress.twentytwentyone ul.button-nav:not(.button-tabs) li a,
     1162#buddypress.twentytwentyone .generic-button a,
     1163#buddypress.twentytwentyone .comment-reply-link,
     1164#buddypress.twentytwentyone a.bp-title-button,
     1165#buddypress.twentytwentyone .activity-read-more a {
     1166        background: var(--button--color-background);
     1167        border: 1px solid var(--button--color-background);
     1168        border-radius: 0;
     1169        color: var(--button--color-text);
     1170}
     1171
     1172#buddypress.twentytwentyone button:hover,
     1173#buddypress.twentytwentyone button:focus,
     1174#buddypress.twentytwentyone a.button:focus,
     1175#buddypress.twentytwentyone a.button:hover,
     1176#buddypress.twentytwentyone input[type="submit"]:focus,
     1177#buddypress.twentytwentyone input[type="submit"]:hover,
     1178#buddypress.twentytwentyone input[type="button"]:focus,
     1179#buddypress.twentytwentyone input[type="button"]:hover,
     1180#buddypress.twentytwentyone input[type="reset"],
     1181#buddypress.twentytwentyone #bp-messages-reset,
     1182#buddypress.twentytwentyone .button-nav li a:focus,
     1183#buddypress.twentytwentyone .button-nav li a:hover,
     1184#buddypress.twentytwentyone .button-nav li.current a,
     1185#buddypress.twentytwentyone .generic-button a:focus,
     1186#buddypress.twentytwentyone .generic-button a:hover,
     1187#buddypress.twentytwentyone .comment-reply-link:focus,
     1188#buddypress.twentytwentyone .comment-reply-link:hover,
     1189#buddypress.twentytwentyone .activity-read-more a:focus,
     1190#buddypress.twentytwentyone .activity-read-more a:hover {
     1191        background: transparent;
     1192        border-color: var(--button--color-background);
     1193        color: var(--button--color-text-hover);
     1194        outline: none;
     1195        text-decoration: none;
     1196}
     1197
     1198#buddypress.twentytwentyone input[type="reset"]:focus,
     1199#buddypress.twentytwentyone input[type="reset"]:hover,
     1200#buddypress.twentytwentyone #bp-messages-reset:focus,
     1201#buddypress.twentytwentyone #bp-messages-reset:hover {
     1202        outline-offset: -1px;
     1203        outline: 2px dotted currentColor;
     1204}
     1205
     1206#buddypress.twentytwentyone input[type="submit"].pending,
     1207#buddypress.twentytwentyone input[type="button"].pending,
     1208#buddypress.twentytwentyone input[type="reset"].pending,
     1209#buddypress.twentytwentyone input[type="button"].disabled,
     1210#buddypress.twentytwentyone input[type="reset"].disabled,
     1211#buddypress.twentytwentyone input[type="submit"][disabled="disabled"],
     1212#buddypress.twentytwentyone input[type="submit"]:disabled,
     1213#buddypress.twentytwentyone input[type="submit"]:hover.pending,
     1214#buddypress.twentytwentyone input[type="button"]:hover.pending,
     1215#buddypress.twentytwentyone input[type="reset"]:hover.pending,
     1216#buddypress.twentytwentyone input[type="submit"]:hover.disabled,
     1217#buddypress.twentytwentyone input[type="button"]:hover.disabled,
     1218#buddypress.twentytwentyone input[type="reset"]:hover.disabled,
     1219#buddypress.twentytwentyone button.pending:hover,
     1220#buddypress.twentytwentyone button.disabled:hover,
     1221#buddypress.twentytwentyone div.pending a:hover,
     1222#buddypress.twentytwentyone a.disabled:hover
     1223button.pending,
     1224#buddypress.twentytwentyone button.disabled,
     1225#buddypress.twentytwentyone div.pending a,
     1226#buddypress.twentytwentyone a.disabled {
     1227        opacity: 0.6;
     1228        cursor: not-allowed;
     1229}
     1230
     1231#buddypress.twentytwentyone .blog-button:after, #buddypress.twentytwentyone .blog-button:before {
     1232        display: none;
     1233}
     1234
     1235#buddypress.twentytwentyone .create-button a:focus,
     1236#buddypress.twentytwentyone .create-button a:hover {
     1237        text-decoration: none;
     1238}
     1239
     1240#buddypress.twentytwentyone.bp-dir-vert-nav .create-button a {
     1241        box-shadow: none;
     1242        color: var(--button--color-text);
     1243        background-color: var(--button--color-background);
     1244        border-radius: var(--button--border-radius);
     1245        border: var(--button--border-width) solid var(--button--color-background);
     1246        background-clip: border-box;
     1247}
     1248
     1249#buddypress.twentytwentyone .warn {
     1250        color: var(--global--color-primary);
     1251        font-weight: 600;
     1252}
     1253
     1254#buddypress.twentytwentyone .bp-feedback {
     1255        color: var(--global--color-primary);
     1256        background: var(--global--color-background);
     1257        box-shadow: none;
     1258}
     1259
     1260#buddypress.twentytwentyone .bp-feedback:not(.custom-homepage-info) {
     1261        margin-top: 1.5em;
     1262        margin-bottom: 1.5em;
     1263        border: solid 1px var(--global--color-primary);
     1264}
     1265
     1266#buddypress.twentytwentyone .bp-feedback .bp-icon {
     1267        background-color: var(--global--color-primary);
     1268        color: var(--button--color-text);
     1269}
     1270
     1271#buddypress.twentytwentyone .bp-feedback a {
     1272        border-bottom: solid 1px var(--global--color-primary);
     1273}
     1274
     1275#buddypress.twentytwentyone .bp-feedback button.bp-tooltip {
     1276        border: none;
     1277        background: none;
     1278        top: -5px;
     1279        left: 0;
     1280}
     1281
     1282#buddypress.twentytwentyone .bp-feedback button.bp-tooltip .dashicons-dismiss {
     1283        border-radius: 50%;
     1284        width: 32px;
     1285        height: 32px;
     1286        color: var(--global--color-primary);
     1287        background: var(--global--color-background);
     1288}
     1289
     1290#buddypress.twentytwentyone .bp-feedback button.bp-tooltip:hover .dashicons-dismiss {
     1291        color: var(--global--color-background);
     1292        background: var(--global--color-primary);
     1293}
     1294
     1295#buddypress.twentytwentyone .bp-feedback.bp-sitewide-notice button.bp-tooltip {
     1296        top: 0;
     1297        left: 15px;
     1298}
     1299
     1300#buddypress.twentytwentyone .bp-feedback.bp-sitewide-notice .bp-icon:before {
     1301        content: "\f16d";
     1302}
     1303
     1304#buddypress.twentytwentyone #group-create-body .bp-cover-image-status p.warning {
     1305        background-color: var(--global--color-light-gray);
     1306        border: none;
     1307        border-right-width: 4px;
     1308        border-right-style: solid;
     1309        border-right-color: var(--global--color-orange);
     1310        color: var(--global--color-dark-gray);
     1311        box-shadow: none;
     1312}
     1313
     1314body.buddypress .site #buddypress.twentytwentyone .button.bp-tooltip:after {
     1315        content: attr(data-bp-tooltip);
     1316        word-wrap: break-word;
     1317        height: auto;
     1318        width: auto;
     1319}
     1320
     1321/**
     1322*-------------------------------------------------------------------------------
     1323* @section 9.0 - Layout classes
     1324*-------------------------------------------------------------------------------
     1325*/
     1326#buddypress.twentytwentyone.bp-single-vert-nav .bp-navs.vertical li span {
     1327        background-color: var(--button--color-background);
     1328        border-radius: 10%;
     1329        display: inline-block;
     1330        margin: 3px 0;
     1331}
     1332
     1333#buddypress.twentytwentyone.bp-single-vert-nav .bp-navs.vertical li.selected span, #buddypress.twentytwentyone.bp-single-vert-nav .bp-navs.vertical li.current span {
     1334        background-color: var(--global--color-background);
     1335}
     1336
     1337#buddypress.twentytwentyone.bp-single-vert-nav .item-body:not(#group-create-body) {
     1338        background: var(--global--color-background);
     1339        border-right: 1px solid var(--global--color-primary);
     1340}
     1341
     1342#buddypress.twentytwentyone.bp-single-vert-nav .item-body:not(#group-create-body) #subnav:not(.tabbed-links) {
     1343        background: transparent;
     1344        border-bottom: 1px solid var(--global--color-primary);
     1345}
     1346
     1347#buddypress.twentytwentyone.bp-single-vert-nav .item-body:not(#group-create-body) #subnav:not(.tabbed-links) li a {
     1348        border: none;
     1349        text-decoration: none;
     1350}
     1351
     1352#buddypress.twentytwentyone.bp-single-vert-nav .item-body:not(#group-create-body) #subnav:not(.tabbed-links) li.current, #buddypress.twentytwentyone.bp-single-vert-nav .item-body:not(#group-create-body) #subnav:not(.tabbed-links) li.selected {
     1353        background-color: var(--global--color-primary);
     1354        margin: 0;
     1355        padding: 10px 0;
     1356        border-radius: 0;
     1357}
     1358
     1359#buddypress.twentytwentyone .grid.bp-list {
     1360        border-top: none;
     1361}
     1362
     1363#buddypress.twentytwentyone .grid > li {
     1364        border: none;
     1365}
     1366
     1367#buddypress.twentytwentyone .grid > li .list-wrap {
     1368        border: 1px solid var(--global--color-primary);
     1369        background: transparent;
     1370}
     1371
     1372#buddypress.twentytwentyone .grid > li:not(.mini) .item-avatar,
     1373#buddypress.twentytwentyone .grid > li .item-avatar {
     1374        margin-left: auto;
     1375}

  • new file src/bp-templates/bp-nouveau/css/twentytwentyone.css 

    diff --git src/bp-templates/bp-nouveau/css/twentytwentyone.css src/bp-templates/bp-nouveau/css/twentytwentyone.css
new file mode 100644
index 000000000..1c5ad46ee
    - +  
     1/*--------------------------------------------------------------
     2Hello, this is the BP Nouveau's Twenty Twenty-One companion stylesheet.
     3
     4@since 7.0.0
     5@version 7.0.0
     6
     7----------------------------------------------------------------
     8>>> TABLE OF CONTENTS:
     9----------------------------------------------------------------
     101.0 - BP Generic, Typography & Imagery
     11
     122.0 - Navigation - General
     13        2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     14        2.2 - Pagination
     15
     163.0 - BP Lists / Loops Generic & filters
     17        3.1 - Activity Loop
     18                3.1.1 Whats New Activity
     19                3.1.2 - Activity Entries
     20                3.1.3 - Activity Comments
     21        3.2 - Blogs Loop
     22        3.3 - Groups Loop
     23        3.4 - Members Loop
     24
     254.0 - Directories - Members, Groups, Blogs, Register, Activation
     26        4.1 - Groups Creation Steps Screens
     275.0 - Single Item screens: User Account & Single Group Screens
     28        5.1 - Item Headers: Global
     29                5.1.1 - item-header: Groups
     30                5.1.2 - item-header: User Accounts
     31        5.2 - Item Body: Global
     32                5.2.1 - item-body: Groups
     33                        5.2.1.1 - Management settings screens
     34                        5.2.1.2 - Group Members list
     35                        5.2.1.3 - Group Invite list
     36                        5.2.1.4 - Group Activity
     37                5.2.2 - item-body: User Accounts
     38                        5.2.2.1 - classes, pag, filters
     39                        5.2.2.2 - Extended Profiles
     40                        5.2.2.3 - Groups
     41                        5.2.2.4 - friends
     42                        5.2.2.5 - Private Messaging Threads
     43                        5.2.2.6 - Settings
     44
     456.0 - Forms  -  General
     46        6.1 - Dir Search
     47
     487.0 - Tables -  General
     49
     508.0 - Classes - Messages, Ajax, Widgets, Buttons, Tooltips
     51
     529.0 - Layout Classes.
     53--------------------------------------------------------------*/
     54/**
     55*-------------------------------------------------------------------------------
     56* @section 1.0 - BP Generic, Typography & Imagery
     57*-------------------------------------------------------------------------------
     58*/
     59.is-dark-theme #buddypress.twentytwentyone .avatar {
     60        background: var(--global--color-white-90);
     61}
     62
     63/**
     64*-------------------------------------------------------------------------------
     65* @section 2.0 - Navigation - General
     66*-------------------------------------------------------------------------------
     67*/
     68/**
     69*----------------------------------------------------------
     70* @section 2.1 - Navs Object Nav / Sub Nav (bp-list)
     71*
     72* The main navigational elements for all BP screens
     73*----------------------------------------------------------
     74*/
     75@media screen and (max-width: 46.8em) {
     76        #buddypress.twentytwentyone:not(.bp-single-vert-nav) .bp-navs li {
     77                background: transparent;
     78        }
     79}
     80
     81#buddypress.twentytwentyone .bp-navs li .count {
     82        background-color: var(--button--color-background);
     83        border: 1px solid var(--button--color-background);
     84        border-radius: 50%;
     85        color: var(--button--color-text);
     86}
     87
     88#buddypress.twentytwentyone .bp-navs:not(.tabbed-links) li.selected a .count,
     89#buddypress.twentytwentyone .bp-navs:not(.tabbed-links) li.current a .count,
     90#buddypress.twentytwentyone .bp-navs:not(.tabbed-links) li a:hover a .count {
     91        background-color: var(--global--color-background);
     92        border: 1px solid var(--global--color-background);
     93        color: var(--button--color-text-hover);
     94}
     95
     96#buddypress.twentytwentyone .bp-navs li:not(.current):not(.selected) a:focus,
     97#buddypress.twentytwentyone .bp-navs li:not(.current):not(.selected) a:hover {
     98        background: var(--global--color-background);
     99        color: var(--global--color-primary);
     100        outline-offset: -6px;
     101        outline: 2px dotted currentColor;
     102}
     103
     104#buddypress.twentytwentyone .bp-navs li.selected a,
     105#buddypress.twentytwentyone .bp-navs li.selected a:focus,
     106#buddypress.twentytwentyone .bp-navs li.selected a:hover,
     107#buddypress.twentytwentyone .bp-navs li.current a,
     108#buddypress.twentytwentyone .bp-navs li.current a:focus,
     109#buddypress.twentytwentyone .bp-navs li.current a:hover {
     110        color: var(--button--color-text);
     111        background-color: var(--button--color-background);
     112}
     113
     114#buddypress.twentytwentyone .bp-navs.tabbed-links ul,
     115#buddypress.twentytwentyone .bp-navs.tabbed-links ol {
     116        border-bottom: 1px solid var(--global--color-primary);
     117}
     118
     119#buddypress.twentytwentyone .bp-navs.tabbed-links ul li.current,
     120#buddypress.twentytwentyone .bp-navs.tabbed-links ol li.current {
     121        border-color: var(--global--color-primary) var(--global--color-primary) var(--global--color-background);
     122        border-style: solid;
     123        border-top-left-radius: 4px;
     124        border-top-right-radius: 4px;
     125}
     126
     127#buddypress.twentytwentyone .bp-navs.tabbed-links ul li.current a,
     128#buddypress.twentytwentyone .bp-navs.tabbed-links ol li.current a {
     129        color: var(--global--color-primary);
     130        background-color: var(--global--color-background);
     131}
     132
     133#buddypress.twentytwentyone #group-invites-container .bp-invites-nav {
     134        border-bottom: none;
     135}
     136
     137#buddypress.twentytwentyone #group-invites-container .bp-invites-nav li .count {
     138        margin-left: 10px;
     139        border-radius: 10%;
     140        vertical-align: 10%;
     141}
     142
     143#buddypress.twentytwentyone #group-invites-container #send-invites-editor ul {
     144        padding-left: 0;
     145}
     146
     147#buddypress.twentytwentyone.bp-dir-hori-nav:not(.bp-vertical-navs) nav:not(.tabbed-links) {
     148        border: none;
     149        border-bottom: 1px solid var(--global--color-primary);
     150        box-shadow: none;
     151}
     152
     153#buddypress.twentytwentyone .subnav-filters > ul {
     154        padding-left: 0;
     155}
     156
     157#buddypress.twentytwentyone .notifications-options-nav {
     158        margin-top: 1em;
     159}
     160
     161#buddypress.twentytwentyone .notifications-options-nav input#notification-bulk-manage {
     162        line-height: 1.2;
     163}
     164
     165/**
     166*----------------------------------------------------------
     167* @section 2.2 - Pagination
     168*----------------------------------------------------------
     169*/
     170#buddypress.twentytwentyone .bp-pagination {
     171        color: var(--global--color-secondary);
     172}
     173
     174/**
     175*-------------------------------------------------------------------------------
     176* @section 3.0 - BP Lists / Loops Generic
     177*-------------------------------------------------------------------------------
     178*/
     179#buddypress.twentytwentyone .bp-list {
     180        border-top: 1px dotted var(--global--color-primary);
     181}
     182
     183#buddypress.twentytwentyone .bp-list > li {
     184        border-bottom: 1px dotted var(--global--color-primary);
     185}
     186
     187#buddypress.twentytwentyone .activity-list.bp-list {
     188        background: inherit;
     189        border-left: none;
     190        border-right: none;
     191        border-bottom: 1px dotted var(--global--color-primary);
     192}
     193
     194#buddypress.twentytwentyone .activity-list.bp-list .activity-item {
     195        background: inherit;
     196        border: 1px solid var(--global--color-primary);
     197        box-shadow: none;
     198}
     199
     200#buddypress.twentytwentyone .activity-list.bp-list .activity-item .activity-header .time-since,
     201#buddypress.twentytwentyone .activity-list.bp-list .activity-item .activity-header .time-since:hover {
     202        color: var(--global--color-secondary);
     203}
     204
     205#buddypress.twentytwentyone .bp-list li:not(.mini) .item-avatar img.avatar {
     206        display: block;
     207        margin: 0 auto;
     208        margin-bottom: 1em;
     209}
     210
     211@media screen and (min-width: 46.8em) {
     212        #buddypress.twentytwentyone .bp-list li:not(.mini) .item-avatar {
     213                max-width: 128px;
     214                max-height: 128px;
     215                margin: auto;
     216                margin-right: 5%;
     217        }
     218}
     219
     220#buddypress.twentytwentyone .bp-list li.mini .item-avatar img.avatar {
     221        display: block;
     222        margin: 0 auto;
     223        max-width: 50px;
     224        max-height: 50px;
     225        margin-bottom: 1em;
     226}
     227
     228@media screen and (min-width: 46.8em) {
     229        #buddypress.twentytwentyone .bp-list li.mini .item-avatar {
     230                width: 5%;
     231                margin: auto;
     232                margin-right: 2%;
     233        }
     234}
     235
     236#buddypress.twentytwentyone .bp-list li.mini .activity-meta.action {
     237        clear: none;
     238}
     239
     240#buddypress.twentytwentyone .bp-list li .meta,
     241#buddypress.twentytwentyone .bp-list li .item-meta {
     242        color: var(--global--color-secondary);
     243}
     244
     245/**
     246*----------------------------------------------------------
     247* @section 3.1 - Activity Loop
     248*----------------------------------------------------------
     249*/
     250/**
     251*-----------------------------------------------------
     252* @section 3.1.1 - Activity Whats New
     253*-----------------------------------------------------
     254*/
     255#buddypress.twentytwentyone .activity-update-form {
     256        border: 1px solid var(--global--color-primary);
     257        box-shadow: none;
     258}
     259
     260#buddypress.twentytwentyone .activity-update-form #whats-new-post-in-box #whats-new-post-in-box-items li {
     261        margin-bottom: 0;
     262}
     263
     264#buddypress.twentytwentyone .activity-update-form #whats-new-post-in-box #whats-new-post-in-box-items li.bp-activity-object {
     265        padding: 5px;
     266        margin-left: 3px;
     267        border-radius: 0;
     268        border-style: dotted;
     269        border-width: 0;
     270        border-left-width: 1px;
     271        border-right-width: 1px;
     272}
     273
     274#buddypress.twentytwentyone .activity-update-form #whats-new-post-in-box #whats-new-post-in-box-items li.bp-activity-object:not(.selected) {
     275        background: var(--global--color-white-90);
     276        color: var(--form--color-text);
     277        border-color: var(--form--border-color);
     278}
     279
     280#buddypress.twentytwentyone .activity-update-form #whats-new-post-in-box #whats-new-post-in-box-items li.bp-activity-object:not(.selected):last-child {
     281        border-bottom: dotted 1px;
     282}
     283
     284#buddypress.twentytwentyone .activity-update-form #whats-new-post-in-box #whats-new-post-in-box-items li.bp-activity-object:not(.selected):hover {
     285        background: var(--global--color-blue);
     286}
     287
     288#buddypress.twentytwentyone .activity-update-form #whats-new-post-in-box #whats-new-post-in-box-items li.bp-activity-object.selected {
     289        border: none;
     290        background-color: transparent;
     291}
     292
     293/**
     294*-----------------------------------------------------
     295* @section 3.1.2 - Activity Entries
     296*-----------------------------------------------------
     297*/
     298body .site #buddypress.twentytwentyone .activity-list .load-more,
     299body .site #buddypress.twentytwentyone .activity-list .load-newest {
     300        background-color: var(--button--color-background);
     301        color: var(--button--color-text);
     302        border: 1px solid var(--button--color-background);
     303}
     304
     305body .site #buddypress.twentytwentyone .activity-list .load-more a,
     306body .site #buddypress.twentytwentyone .activity-list .load-newest a {
     307        color: var(--button--color-text);
     308}
     309
     310body .site #buddypress.twentytwentyone .activity-list .load-more a:focus,
     311body .site #buddypress.twentytwentyone .activity-list .load-newest a:focus {
     312        color: var(--button--color-text-hover);
     313        background: transparent;
     314        outline-offset: -6px;
     315        outline: 2px dotted currentColor;
     316}
     317
     318body .site #buddypress.twentytwentyone .activity-list .load-more:hover, body .site #buddypress.twentytwentyone .activity-list .load-more:focus,
     319body .site #buddypress.twentytwentyone .activity-list .load-newest:hover,
     320body .site #buddypress.twentytwentyone .activity-list .load-newest:focus {
     321        color: var(--button--color-text-hover);
     322        background: transparent;
     323}
     324
     325body .site #buddypress.twentytwentyone .activity-list .load-more:hover a, body .site #buddypress.twentytwentyone .activity-list .load-more:focus a,
     326body .site #buddypress.twentytwentyone .activity-list .load-newest:hover a,
     327body .site #buddypress.twentytwentyone .activity-list .load-newest:focus a {
     328        color: var(--button--color-text-hover);
     329        background: transparent;
     330}
     331
     332body .site #buddypress.twentytwentyone .activity-list .activity-content .activity-header,
     333body .site #buddypress.twentytwentyone .activity-list .activity-content .comment-header {
     334        color: var(--global--color-secondary);
     335}
     336
     337body .site #buddypress.twentytwentyone .activity-list .activity-content .activity-header a,
     338body .site #buddypress.twentytwentyone .activity-list .activity-content .comment-header a {
     339        font-weight: 600;
     340}
     341
     342body .site #buddypress.twentytwentyone .activity-list .activity-content .activity-header a:hover,
     343body .site #buddypress.twentytwentyone .activity-list .activity-content .comment-header a:hover {
     344        text-decoration: underline;
     345}
     346
     347body .site #buddypress.twentytwentyone .activity-list .activity-content .activity-inner,
     348body .site #buddypress.twentytwentyone .activity-list .activity-content blockquote {
     349        background: inherit;
     350        border: 1px dotted var(--global--color-primary);
     351}
     352
     353body .site #buddypress.twentytwentyone .activity-list .activity-content .activity-meta.action {
     354        background: inherit;
     355}
     356
     357body .site #buddypress.twentytwentyone .activity-list .activity-content .activity-meta.action .button:before,
     358body .site #buddypress.twentytwentyone .activity-list .activity-content .activity-meta.action .icons:before {
     359        height: auto;
     360        width: auto;
     361        display: inline;
     362}
     363
     364body .site #buddypress.twentytwentyone .activity-list .activity-content .activity-meta.action .button {
     365        background: var(--global--color-background);
     366        color: var(--global--color-primary);
     367        border: none;
     368}
     369
     370body .site #buddypress.twentytwentyone .activity-list .activity-content .activity-meta.action .button span {
     371        color: var(--global--color-secondary);
     372}
     373
     374body.activity-permalink #buddypress.twentytwentyone .activity-list {
     375        border: none;
     376}
     377
     378body.activity-permalink #buddypress.twentytwentyone .activity-list .activity-avatar img.avatar {
     379        background: var(--global--color-white);
     380}
     381
     382/**
     383*-----------------------------------------------------
     384* @section 3.1.3 - Activity Comments
     385*-----------------------------------------------------
     386*/
     387#buddypress.twentytwentyone .bp-list li .activity-comments .acomment-avatar {
     388        width: auto;
     389        margin-right: 0;
     390}
     391
     392#buddypress.twentytwentyone .bp-list li .activity-comments .acomment-meta {
     393        color: var(--global--color-secondary);
     394}
     395
     396#buddypress.twentytwentyone .bp-list li .activity-comments .acomment-meta a {
     397        font-weight: 600;
     398}
     399
     400#buddypress.twentytwentyone .bp-list li .activity-comments .acomment-meta a:hover {
     401        text-decoration: underline;
     402}
     403
     404#buddypress.twentytwentyone .bp-list li .activity-comments .acomment-content {
     405        border-left: 1px solid var(--global--color-secondary);
     406        margin: 15px 0 0 5%;
     407}
     408
     409/**
     410*----------------------------------------------------------
     411* @section 3.2 - Blogs Loop
     412*----------------------------------------------------------
     413*/
     414/**
     415*----------------------------------------------------------
     416* @section 3.3 - Groups Loop
     417*----------------------------------------------------------
     418*/
     419#buddypress.twentytwentyone .groups-list li .group-desc {
     420        color: var(--global--color-secondary);
     421        border: 1px dotted var(--global--color-primary);
     422}
     423
     424/**
     425*----------------------------------------------------------
     426* @section 3.4 - Members Loop
     427*----------------------------------------------------------
     428*/
     429#buddypress.twentytwentyone .members-list li .user-update {
     430        border: 1px dotted var(--global--color-primary);
     431        color: var(--global--color-secondary);
     432}
     433
     434#buddypress.twentytwentyone #members-dir-list .current-member-type {
     435        text-align: center;
     436}
     437
     438/**
     439*-------------------------------------------------------------------------------
     440* @section 4.0 - Directories
     441*-------------------------------------------------------------------------------
     442*/
     443/**
     444*----------------------------------------------------------
     445* @section 4.1 - Groups Creation Steps
     446*----------------------------------------------------------
     447*/
     448#buddypress.twentytwentyone #group-create-body #avatar-crop-pane {
     449        margin-bottom: 1em;
     450}
     451
     452#buddypress.twentytwentyone #group-create-body nav.group-create-links:not(.tabbed-links) {
     453        background: transparent;
     454        clear: both;
     455        overflow: hidden;
     456        border: none;
     457        border-bottom: 1px solid var(--global--color-primary);
     458        box-shadow: none;
     459}
     460
     461#buddypress.twentytwentyone #group-create-body nav.group-create-links:not(.tabbed-links) li a,
     462#buddypress.twentytwentyone #group-create-body nav.group-create-links:not(.tabbed-links) li span {
     463        padding: 0.5em calc(0.5em + 2px);
     464        display: block;
     465}
     466
     467/**
     468*-------------------------------------------------------------------------------
     469* @section 5.0 - Single Item screens: Groups, Users
     470*-------------------------------------------------------------------------------
     471*/
     472/**
     473*-----------------------------------------------------------
     474* @subsection 5.1 - Item Header Global
     475*-----------------------------------------------------------
     476*/
     477#buddypress.twentytwentyone .single-headers .group-status,
     478#buddypress.twentytwentyone .single-headers .item-meta,
     479#buddypress.twentytwentyone .single-headers .bp-group-type-list,
     480#buddypress.twentytwentyone .single-headers .bp-member-type-list {
     481        color: var(--global--color-secondary);
     482}
     483
     484#buddypress.twentytwentyone .single-headers a:hover {
     485        text-decoration: underline;
     486}
     487
     488/**
     489*-----------------------------------------------------
     490* @subsection 5.1.1 - item-header Groups
     491*
     492* Group Specific Item Header
     493*-----------------------------------------------------
     494*/
     495#buddypress.twentytwentyone .groups-header .desc-wrap {
     496        background: var(--global--color-background);
     497        border: 1px solid var(--global--color-primary);
     498}
     499
     500#buddypress.twentytwentyone .groups-header .desc-wrap .group-description {
     501        background: none;
     502        box-shadow: none;
     503}
     504
     505/**
     506*-----------------------------------------------------
     507* @subsection 5.1.2 - Item Header User Accounts
     508*
     509* User Accounts Specific Item Header
     510*-----------------------------------------------------
     511*/
     512/**
     513*-----------------------------------------------------------
     514* @subsection 5.2 - Item Body: Global
     515*-----------------------------------------------------------
     516*/
     517#buddypress.twentytwentyone .item-body h2.screen-heading,
     518#buddypress.twentytwentyone .item-body h2.creation-step-name {
     519        font-size: var(--heading--font-size-h2);
     520        letter-spacing: var(--heading--letter-spacing-h2);
     521}
     522
     523#buddypress.twentytwentyone .item-body h3.screen-heading,
     524#buddypress.twentytwentyone .item-body h3.creation-step-name {
     525        font-size: var(--heading--font-size-h3);
     526        letter-spacing: var(--heading--letter-spacing-h3);
     527}
     528
     529#buddypress.twentytwentyone .item-body h4.screen-heading,
     530#buddypress.twentytwentyone .item-body h4.creation-step-name {
     531        font-size: var(--heading--font-size-h4);
     532        letter-spacing: var(--heading--letter-spacing-h4);
     533}
     534
     535/**
     536*----------------------------------------------------
     537* @subsection 5.2.1 - Item Body Groups
     538*
     539* Groups specific item body rules -  screens
     540*----------------------------------------------------
     541*/
     542/**
     543*-----------------------------------------
     544* @subsection 5.2.1.1 - Management Settings Screens
     545*-----------------------------------------
     546*/
     547.group-settings #buddypress.twentytwentyone .group-settings-selections {
     548        margin-bottom: 1em;
     549}
     550
     551#buddypress.twentytwentyone #group-manage-members-ui .bp-pagination {
     552        padding: 0.4em 0 0.4em 0.5em;
     553}
     554
     555#buddypress.twentytwentyone #group-manage-members-ui #group-members-search-form input[type="search"] {
     556        font-size: 16px;
     557}
     558
     559#buddypress.twentytwentyone #group-manage-members-ui #group-members-search-form input[type="search"]:focus {
     560        outline-offset: -7px;
     561        outline: 2px dotted var(--form--border-color);
     562}
     563
     564#buddypress.twentytwentyone #group-manage-members-ui #group-members-search-form button[type="submit"] {
     565        border-width: 1px;
     566        border-style: solid;
     567        background-clip: border-box;
     568}
     569
     570#buddypress.twentytwentyone #group-manage-members-ui #group-members-search-form button[type="submit"]:hover {
     571        border-color: var(--button--color-background);
     572}
     573
     574#buddypress.twentytwentyone #group-manage-members-ui #group-roles-filter label,
     575#buddypress.twentytwentyone #group-manage-members-ui #group-members-list-table .group-member-edit label {
     576        border: 0;
     577        clip: rect(0 0 0 0);
     578        height: 1px;
     579        margin: -1px;
     580        overflow: hidden;
     581        padding: 0;
     582        position: absolute;
     583        width: 1px;
     584        word-wrap: normal !important;
     585}
     586
     587#buddypress.twentytwentyone #group-manage-members-ui #group-members-role-filter,
     588#buddypress.twentytwentyone #group-manage-members-ui #group-members-list-table .group-member-edit select {
     589        font-size: 16px;
     590        padding: 6px 25px 6px 10px;
     591}
     592
     593#buddypress.twentytwentyone #group-manage-members-ui #group-members-role-filter:focus,
     594#buddypress.twentytwentyone #group-manage-members-ui #group-members-list-table .group-member-edit select:focus {
     595        outline-offset: 2px;
     596        outline: 2px dotted var(--form--border-color);
     597}
     598
     599/**
     600*-----------------------------------------
     601* @subsection 5.2.1.2 - Group Members List
     602*-----------------------------------------
     603*/
     604/*
     605*-----------------------------------------
     606* @subsection 5.2.1.3 - Group Invites List
     607*-----------------------------------------
     608*/
     609#buddypress.twentytwentyone .bp-invites-content ul {
     610        border-top: none;
     611}
     612
     613#buddypress.twentytwentyone .bp-invites-content ul li {
     614        border: 1px dotted var(--global--color-primary);
     615}
     616
     617#buddypress.twentytwentyone .bp-invites-content ul li.selected {
     618        box-shadow: none;
     619        border-style: solid;
     620}
     621
     622#buddypress.twentytwentyone .bp-invites-content ul li button.invite-button {
     623        border: none;
     624        background: none;
     625        top: -5px;
     626        right: 0;
     627}
     628
     629#buddypress.twentytwentyone .bp-invites-content ul li button.invite-button .icons:before {
     630        border-radius: 50%;
     631        width: 32px;
     632        height: 32px;
     633        color: var(--global--color-primary);
     634        background: var(--global--color-background);
     635}
     636
     637#buddypress.twentytwentyone .bp-invites-content ul li button.invite-button:hover .icons:before {
     638        color: var(--global--color-background);
     639        background: var(--global--color-primary);
     640        width: 32px;
     641        height: 32px;
     642}
     643
     644#buddypress.twentytwentyone .bp-invites-content ul li ul.group-inviters li {
     645        border: none;
     646}
     647
     648/*
     649*-----------------------------------------
     650* @subsection 5.2.1.4 - Group Activity
     651*-----------------------------------------
     652*/
     653/**
     654*-----------------------------------------------------
     655* @subsection 5.2.2 - Item Body User Accounts
     656*
     657* User Account specific item body rules
     658*-----------------------------------------------------
     659*/
     660/**
     661*--------------------------------------------
     662* @subsection 5.2.2.1 - classes, pag, filters
     663*--------------------------------------------
     664*/
     665/**
     666*-------------------------------------------
     667* @subsection 5.2.2.2 - Extended Profiles
     668*-------------------------------------------
     669*/
     670#buddypress.twentytwentyone .profile table.profile-fields tr.alt td,
     671#buddypress.twentytwentyone .profile table.profile-fields tr td,
     672#buddypress.twentytwentyone .profile table.bp-tables-user tr.alt td,
     673#buddypress.twentytwentyone .profile table.bp-tables-user tr td {
     674        background: transparent;
     675}
     676
     677#buddypress.twentytwentyone .profile table.profile-fields tr.alt td.label,
     678#buddypress.twentytwentyone .profile table.profile-fields tr td.label,
     679#buddypress.twentytwentyone .profile table.bp-tables-user tr.alt td.label,
     680#buddypress.twentytwentyone .profile table.bp-tables-user tr td.label {
     681        border-right-color: var(--global--color-primary);
     682}
     683
     684#buddypress.twentytwentyone .profile.edit .editfield {
     685        background: var(--global--color-background);
     686        border: 1px solid var(--global--color-primary);
     687}
     688
     689#buddypress.twentytwentyone .profile.edit .editfield p.field-visibility-settings-toggle {
     690        margin-top: 1em;
     691}
     692
     693#buddypress.twentytwentyone .profile.edit .editfield .field-visibility-settings .radio label {
     694        margin-bottom: 0.5em;
     695}
     696
     697#buddypress.twentytwentyone .profile.edit .wp-editor-container .mce-toolbar button {
     698        color: var(--global--color-dark-gray);
     699        background: var(--global--color-white-90);
     700        border-color: var(--global--color-dark-gray);
     701}
     702
     703#buddypress.twentytwentyone .profile.edit .button-tabs li {
     704        border: solid 2px var(--global--color-primary);
     705        overflow: hidden;
     706}
     707
     708#buddypress.twentytwentyone .profile.edit .button-tabs li a {
     709        text-decoration: none;
     710}
     711
     712#buddypress.twentytwentyone .profile.edit .button-tabs li.current {
     713        background-color: var(--global--color-primary);
     714        color: var(--button--color-text);
     715}
     716
     717#buddypress.twentytwentyone .profile.edit .button-tabs li.current a {
     718        color: var(--button--color-text);
     719}
     720
     721#buddypress.twentytwentyone .profile.edit .button-tabs li:hover {
     722        outline-offset: 10px;
     723        border-style: dotted;
     724}
     725
     726#buddypress.twentytwentyone .profile.edit .clear-value {
     727        text-decoration: underline;
     728}
     729
     730#buddypress.twentytwentyone .profile.edit legend {
     731        padding: 0;
     732}
     733
     734#buddypress.twentytwentyone .field-visibility-settings,
     735#buddypress.twentytwentyone .field-visibility-settings-header {
     736        color: var(--global--color-secondary);
     737}
     738
     739#buddypress.twentytwentyone .bp-avatar-nav ul.avatar-nav-items {
     740        border-bottom: 1px solid var(--global--color-primary);
     741}
     742
     743#buddypress.twentytwentyone .bp-avatar-nav ul.avatar-nav-items li.current {
     744        border: 1px solid var(--global--color-primary);
     745        border-bottom: 1px solid var(--global--color-background);
     746}
     747
     748#buddypress.twentytwentyone #drag-drop-area {
     749        border: 4px dashed var(--global--color-secondary);
     750}
     751
     752#buddypress.twentytwentyone #drag-drop-area .drag-drop-info {
     753        color: var(--global--color-secondary);
     754}
     755
     756#buddypress.twentytwentyone .bp-avatar-status .warning,
     757#buddypress.twentytwentyone .bp-avatar-status .success,
     758#buddypress.twentytwentyone .bp-cover-image-status .warning,
     759#buddypress.twentytwentyone .bp-cover-image-status .success {
     760        background-color: var(--global--color-light-gray);
     761        border: none;
     762        border-left-width: 4px;
     763        border-left-style: solid;
     764        color: var(--global--color-dark-gray);
     765}
     766
     767#buddypress.twentytwentyone .bp-avatar-status .warning,
     768#buddypress.twentytwentyone .bp-cover-image-status .warning {
     769        border-left-color: var(--global--color-orange);
     770}
     771
     772#buddypress.twentytwentyone .bp-avatar-status .success,
     773#buddypress.twentytwentyone .bp-cover-image-status .success {
     774        border-left-color: var(--global--color-green);
     775}
     776
     777#buddypress.twentytwentyone .bp-avatar-status .error,
     778#buddypress.twentytwentyone .bp-cover-image-status .error {
     779        border-left-color: var(--global--color-red);
     780}
     781
     782/**
     783*-------------------------------------------
     784* @subsection 5.2.2.3 - Groups
     785*-------------------------------------------
     786*/
     787#buddypress.twentytwentyone #group-list.invites h2.list-title {
     788        float: none;
     789}
     790
     791#buddypress.twentytwentyone #group-list.invites .accept {
     792        margin-left: 0;
     793}
     794
     795/**
     796*-------------------------------------------
     797* @subsection 5.2.2.5 - Private Messaging
     798*-------------------------------------------
     799*/
     800#buddypress.twentytwentyone #user_messages_select_all {
     801        vertical-align: -5px;
     802}
     803
     804#buddypress.twentytwentyone #user_messages_select_all:checked {
     805        vertical-align: -3px;
     806}
     807
     808#buddypress.twentytwentyone #message-threads {
     809        border-top: 1px dotted var(--global--color-primary);
     810}
     811
     812#buddypress.twentytwentyone #message-threads > li {
     813        border-bottom: 1px dotted var(--global--color-primary);
     814}
     815
     816#buddypress.twentytwentyone #message-threads > li.selected {
     817        border: 1px solid var(--global--color-primary);
     818}
     819
     820#buddypress.twentytwentyone #message-threads > li.unread {
     821        border-left: 8px solid var(--global--color-yellow);
     822}
     823
     824#buddypress.twentytwentyone #message-threads li .thread-cb {
     825        padding-left: 15px;
     826}
     827
     828#buddypress.twentytwentyone #message-threads li.unread .thread-cb {
     829        padding-left: 7px;
     830}
     831
     832#buddypress.twentytwentyone #message-threads li .thread-from img.avatar,
     833#buddypress.twentytwentyone #message-threads li .thread-to img.avatar {
     834        width: 32px;
     835        height: 32px;
     836}
     837
     838#buddypress.twentytwentyone #message-threads li .thread-from .num-recipients,
     839#buddypress.twentytwentyone #message-threads li .thread-to .num-recipients {
     840        color: var(--global--color-primary);
     841}
     842
     843#buddypress.twentytwentyone #message-threads li .thread-content .excerpt {
     844        color: var(--global--color-primary);
     845}
     846
     847#buddypress.twentytwentyone #message-threads li .thread-date time {
     848        color: var(--global--color-primary);
     849}
     850
     851#buddypress.twentytwentyone #message-threads li.selected {
     852        background: transparent;
     853        font-weight: bolder;
     854        color: var(--global--color-primary);
     855}
     856
     857#buddypress.twentytwentyone #message-threads li.selected .thread-subject .subject {
     858        color: var(--global--color-primary);
     859}
     860
     861#buddypress.twentytwentyone #message-threads li:not(.selected) {
     862        color: var(--global--color-secondary);
     863}
     864
     865#buddypress.twentytwentyone .bp-messages-content #thread-preview h2:first-child,
     866#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-header h2:first-child {
     867        background-color: var(--button--color-background);
     868        color: var(--button--color-text);
     869}
     870
     871#buddypress.twentytwentyone .bp-messages-content #thread-preview {
     872        border-color: var(--button--color-background);
     873}
     874
     875#buddypress.twentytwentyone .bp-messages-content #thread-preview dd,
     876#buddypress.twentytwentyone .bp-messages-content #thread-preview .participants-list {
     877        padding-left: 0;
     878}
     879
     880#buddypress.twentytwentyone .bp-messages-content #thread-preview .preview-pane-header {
     881        border-bottom-style: dotted;
     882        border-bottom-color: var(--global--color-primary);
     883}
     884
     885#buddypress.twentytwentyone .bp-messages-content #thread-preview .preview-content .preview-message {
     886        background: transparent;
     887}
     888
     889#buddypress.twentytwentyone .bp-messages-content .single-message-thread-header dd,
     890#buddypress.twentytwentyone .bp-messages-content .single-message-thread-header .participants-list {
     891        padding-left: 0;
     892}
     893
     894#buddypress.twentytwentyone .bp-messages-content .actions button.bp-tooltip {
     895        border: none;
     896        background: none;
     897}
     898
     899#buddypress.twentytwentyone .bp-messages-content .actions button.bp-tooltip.message-action-delete:before {
     900        width: 32px;
     901        height: 32px;
     902        color: var(--global--color-primary);
     903        background: var(--global--color-background);
     904}
     905
     906#buddypress.twentytwentyone .bp-messages-content .actions button.bp-tooltip.message-action-delete:hover:before {
     907        border-radius: 50%;
     908        color: var(--global--color-background);
     909        background: var(--global--color-primary);
     910}
     911
     912#buddypress.twentytwentyone .bp-messages-content .actions .message-action-unstar:before,
     913#buddypress.twentytwentyone .bp-messages-content .actions .message-action-star:before {
     914        color: var(--global--color-secondary);
     915}
     916
     917#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li .message-metadata {
     918        background: transparent;
     919        border: 1px solid var(--global--color-primary);
     920        box-shadow: none;
     921}
     922
     923#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li .message-metadata * {
     924        line-height: 1.6;
     925        vertical-align: middle;
     926}
     927
     928#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li .message-metadata .user-link {
     929        margin-top: 3px;
     930        margin-bottom: 3px;
     931}
     932
     933#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li .message-metadata .user-link strong {
     934        display: inline-block;
     935        margin-top: 2px;
     936}
     937
     938#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li .message-metadata .user-link:hover strong {
     939        text-decoration: underline;
     940}
     941
     942#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li .message-metadata time {
     943        color: var(--global--color-secondary);
     944}
     945
     946#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li .message-content {
     947        background: transparent;
     948        margin: 0;
     949        width: 100%;
     950        padding: 1em;
     951}
     952
     953#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li:first-child .message-content {
     954        border: 1px dotted var(--global--color-primary);
     955        border-top: none;
     956}
     957
     958#buddypress.twentytwentyone .bp-messages-content #send-reply .avatar-box img.avatar {
     959        display: inline-block;
     960        vertical-align: -7px;
     961}
     962
     963#buddypress.twentytwentyone .bp-messages-content .wp-editor-container .mce-toolbar button {
     964        color: var(--global--color-dark-gray);
     965        background: var(--global--color-white-90);
     966        border-color: var(--global--color-dark-gray);
     967}
     968
     969#buddypress.twentytwentyone .bp-messages-content #bp-messages-reset {
     970        border-width: 0;
     971        font-size: inherit;
     972}
     973
     974#buddypress.twentytwentyone .bp-messages-content #send-to-input {
     975        width: 100% !important;
     976}
     977
     978#buddypress.twentytwentyone .subnav-filters button#user_messages_search_submit {
     979        padding: 3px 0.7em;
     980        background-color: var(--global--color-background);
     981        color: var(--button--color-text-hover);
     982        border-color: var(--global--color-background);
     983        border-left-color: var(--button--color-background);
     984}
     985
     986#buddypress.twentytwentyone .subnav-filters button#user_messages_search_submit:hover {
     987        background-color: var(--button--color-background);
     988        color: var(--button--color-text);
     989        border-color: var(--button--color-background);
     990}
     991
     992#buddypress.twentytwentyone .subnav-filters .user-messages-bulk-actions .bulk-apply {
     993        line-height: 1.5;
     994        margin: 0 0 0 10px;
     995        padding: 3px 5px;
     996        background-color: var(--global--color-background);
     997        color: var(--button--color-text-hover);
     998}
     999
     1000#buddypress.twentytwentyone .subnav-filters .user-messages-bulk-actions .bulk-apply:hover {
     1001        background-color: var(--button--color-background);
     1002        color: var(--button--color-text);
     1003}
     1004
     1005#buddypress.twentytwentyone .subnav-filters .user-messages-bulk-actions .bulk-apply span {
     1006        vertical-align: middle;
     1007}
     1008
     1009/**
     1010*------------------------------------------
     1011* @subsection 5.2.2.6 - Settings
     1012*------------------------------------------
     1013*/
     1014#buddypress.twentytwentyone.buddypress-wrap .bp-tables-user tr.alt td,
     1015#buddypress.twentytwentyone.buddypress-wrap table.wp-profile-fields tr.alt td {
     1016        background: transparent;
     1017}
     1018
     1019/**
     1020*-------------------------------------------------------------------------------
     1021* @section 6.0 - Forms  - General
     1022*-------------------------------------------------------------------------------
     1023*/
     1024#buddypress.twentytwentyone fieldset {
     1025        padding-top: 0;
     1026        margin-top: 1em;
     1027}
     1028
     1029#buddypress.twentytwentyone fieldset legend {
     1030        padding: 0 1em;
     1031        display: inline-block;
     1032}
     1033
     1034#buddypress.twentytwentyone .select-wrap {
     1035        border: 1px solid var(--global--color-primary);
     1036        background: var(--global--color-white-90);
     1037}
     1038
     1039#buddypress.twentytwentyone .select-wrap select {
     1040        background: transparent;
     1041        width: 98%;
     1042        text-indent: 0;
     1043}
     1044
     1045#buddypress.twentytwentyone .select-wrap span.select-arrow {
     1046        background: transparent;
     1047}
     1048
     1049#buddypress.twentytwentyone .select-wrap span.select-arrow:before {
     1050        font-family: dashicons;
     1051        content: "\f140";
     1052        color: var(--global--color-black);
     1053        vertical-align: -10%;
     1054}
     1055
     1056#buddypress.twentytwentyone .select-wrap:focus .select-arrow:before, #buddypress.twentytwentyone .select-wrap:hover .select-arrow:before {
     1057        color: var(--global--color-black);
     1058}
     1059
     1060#buddypress.twentytwentyone .wp-pwd:not(.is-open) {
     1061        display: none;
     1062}
     1063
     1064#buddypress.twentytwentyone input[type="checkbox"],
     1065#buddypress.twentytwentyone input[type="radio"] {
     1066        width: 25px;
     1067        height: 25px;
     1068        vertical-align: top;
     1069}
     1070
     1071#buddypress.twentytwentyone textarea,
     1072#buddypress.twentytwentyone input[type="text"],
     1073#buddypress.twentytwentyone input[type="color"],
     1074#buddypress.twentytwentyone input[type="date"],
     1075#buddypress.twentytwentyone input[type="datetime"],
     1076#buddypress.twentytwentyone input[type="datetime-local"],
     1077#buddypress.twentytwentyone input[type="email"],
     1078#buddypress.twentytwentyone input[type="month"],
     1079#buddypress.twentytwentyone input[type="number"],
     1080#buddypress.twentytwentyone input[type="range"],
     1081#buddypress.twentytwentyone input[type="tel"],
     1082#buddypress.twentytwentyone input[type="time"],
     1083#buddypress.twentytwentyone input[type="url"],
     1084#buddypress.twentytwentyone input[type="week"],
     1085#buddypress.twentytwentyone input[type="password"],
     1086#buddypress.twentytwentyone input[type="search"],
     1087#buddypress.twentytwentyone .groups-members-search input[type="text"] {
     1088        color: var(--form--color-text);
     1089        background: var(--global--color-white-90);
     1090}
     1091
     1092#buddypress.twentytwentyone .subnav-filters input[type="search"] {
     1093        font-size: 16px;
     1094        background: transparent;
     1095}
     1096
     1097#buddypress.twentytwentyone .bp-dir-search-form button,
     1098#buddypress.twentytwentyone form#group-members-search button,
     1099#buddypress.twentytwentyone form#group_invites_search_form button {
     1100        background-color: var(--global--color-background);
     1101        color: var(--button--color-text-hover);
     1102        border-color: var(--global--color-background);
     1103        border-left-color: var(--button--color-background);
     1104}
     1105
     1106#buddypress.twentytwentyone .bp-dir-search-form button:hover,
     1107#buddypress.twentytwentyone form#group-members-search button:hover,
     1108#buddypress.twentytwentyone form#group_invites_search_form button:hover {
     1109        background-color: var(--button--color-background);
     1110        color: var(--button--color-text);
     1111        border-color: var(--button--color-background);
     1112}
     1113
     1114#buddypress.twentytwentyone .standard-form p.description {
     1115        color: var(--global--primary-color);
     1116        background-color: var(--global--color-background);
     1117}
     1118
     1119/**
     1120*----------------------------------------------------------
     1121* @section 6.1 - Directory Search
     1122*
     1123* The Search form & controls in directory pages
     1124*----------------------------------------------------------
     1125*/
     1126.bp-user #buddypress.twentytwentyone [data-bp-search] form #user_messages_search {
     1127        padding: 3px 10px;
     1128}
     1129
     1130#buddypress.twentytwentyone form.bp-dir-search-form,
     1131#buddypress.twentytwentyone form.bp-messages-search-form,
     1132#buddypress.twentytwentyone form[data-bp-search].bp-invites-search-form,
     1133#buddypress.twentytwentyone form#group-members-search {
     1134        border: 1px solid var(--global--color-primary);
     1135        background-color: var(--global--color-white-90);
     1136}
     1137
     1138/**
     1139*-------------------------------------------------------------------------------
     1140* @section 7.0 - Tables - General
     1141*-------------------------------------------------------------------------------
     1142*/
     1143#buddypress.twentytwentyone .bp-tables-user tbody tr,
     1144#buddypress.twentytwentyone .bp-tables-user tbody tr.alt,
     1145#buddypress.twentytwentyone table.wp-profile-fields tbody tr,
     1146#buddypress.twentytwentyone table.wp-profile-fields tbody tr.alt,
     1147#buddypress.twentytwentyone table.forum tbody tr,
     1148#buddypress.twentytwentyone table.forum tbody tr.alt {
     1149        background: transparent;
     1150}
     1151
     1152/**
     1153*-------------------------------------------------------------------------------
     1154* @section 8.0 - Classes - Messages, Ajax, Widgets, Buttons
     1155*-------------------------------------------------------------------------------
     1156*/
     1157#buddypress.twentytwentyone button,
     1158#buddypress.twentytwentyone a.button,
     1159#buddypress.twentytwentyone input[type="submit"],
     1160#buddypress.twentytwentyone input[type="button"],
     1161#buddypress.twentytwentyone ul.button-nav:not(.button-tabs) li a,
     1162#buddypress.twentytwentyone .generic-button a,
     1163#buddypress.twentytwentyone .comment-reply-link,
     1164#buddypress.twentytwentyone a.bp-title-button,
     1165#buddypress.twentytwentyone .activity-read-more a {
     1166        background: var(--button--color-background);
     1167        border: 1px solid var(--button--color-background);
     1168        border-radius: 0;
     1169        color: var(--button--color-text);
     1170}
     1171
     1172#buddypress.twentytwentyone button:hover,
     1173#buddypress.twentytwentyone button:focus,
     1174#buddypress.twentytwentyone a.button:focus,
     1175#buddypress.twentytwentyone a.button:hover,
     1176#buddypress.twentytwentyone input[type="submit"]:focus,
     1177#buddypress.twentytwentyone input[type="submit"]:hover,
     1178#buddypress.twentytwentyone input[type="button"]:focus,
     1179#buddypress.twentytwentyone input[type="button"]:hover,
     1180#buddypress.twentytwentyone input[type="reset"],
     1181#buddypress.twentytwentyone #bp-messages-reset,
     1182#buddypress.twentytwentyone .button-nav li a:focus,
     1183#buddypress.twentytwentyone .button-nav li a:hover,
     1184#buddypress.twentytwentyone .button-nav li.current a,
     1185#buddypress.twentytwentyone .generic-button a:focus,
     1186#buddypress.twentytwentyone .generic-button a:hover,
     1187#buddypress.twentytwentyone .comment-reply-link:focus,
     1188#buddypress.twentytwentyone .comment-reply-link:hover,
     1189#buddypress.twentytwentyone .activity-read-more a:focus,
     1190#buddypress.twentytwentyone .activity-read-more a:hover {
     1191        background: transparent;
     1192        border-color: var(--button--color-background);
     1193        color: var(--button--color-text-hover);
     1194        outline: none;
     1195        text-decoration: none;
     1196}
     1197
     1198#buddypress.twentytwentyone input[type="reset"]:focus,
     1199#buddypress.twentytwentyone input[type="reset"]:hover,
     1200#buddypress.twentytwentyone #bp-messages-reset:focus,
     1201#buddypress.twentytwentyone #bp-messages-reset:hover {
     1202        outline-offset: -1px;
     1203        outline: 2px dotted currentColor;
     1204}
     1205
     1206#buddypress.twentytwentyone input[type="submit"].pending,
     1207#buddypress.twentytwentyone input[type="button"].pending,
     1208#buddypress.twentytwentyone input[type="reset"].pending,
     1209#buddypress.twentytwentyone input[type="button"].disabled,
     1210#buddypress.twentytwentyone input[type="reset"].disabled,
     1211#buddypress.twentytwentyone input[type="submit"][disabled="disabled"],
     1212#buddypress.twentytwentyone input[type="submit"]:disabled,
     1213#buddypress.twentytwentyone input[type="submit"]:hover.pending,
     1214#buddypress.twentytwentyone input[type="button"]:hover.pending,
     1215#buddypress.twentytwentyone input[type="reset"]:hover.pending,
     1216#buddypress.twentytwentyone input[type="submit"]:hover.disabled,
     1217#buddypress.twentytwentyone input[type="button"]:hover.disabled,
     1218#buddypress.twentytwentyone input[type="reset"]:hover.disabled,
     1219#buddypress.twentytwentyone button.pending:hover,
     1220#buddypress.twentytwentyone button.disabled:hover,
     1221#buddypress.twentytwentyone div.pending a:hover,
     1222#buddypress.twentytwentyone a.disabled:hover
     1223button.pending,
     1224#buddypress.twentytwentyone button.disabled,
     1225#buddypress.twentytwentyone div.pending a,
     1226#buddypress.twentytwentyone a.disabled {
     1227        opacity: 0.6;
     1228        cursor: not-allowed;
     1229}
     1230
     1231#buddypress.twentytwentyone .blog-button:after, #buddypress.twentytwentyone .blog-button:before {
     1232        display: none;
     1233}
     1234
     1235#buddypress.twentytwentyone .create-button a:focus,
     1236#buddypress.twentytwentyone .create-button a:hover {
     1237        text-decoration: none;
     1238}
     1239
     1240#buddypress.twentytwentyone.bp-dir-vert-nav .create-button a {
     1241        box-shadow: none;
     1242        color: var(--button--color-text);
     1243        background-color: var(--button--color-background);
     1244        border-radius: var(--button--border-radius);
     1245        border: var(--button--border-width) solid var(--button--color-background);
     1246        background-clip: border-box;
     1247}
     1248
     1249#buddypress.twentytwentyone .warn {
     1250        color: var(--global--color-primary);
     1251        font-weight: 600;
     1252}
     1253
     1254#buddypress.twentytwentyone .bp-feedback {
     1255        color: var(--global--color-primary);
     1256        background: var(--global--color-background);
     1257        box-shadow: none;
     1258}
     1259
     1260#buddypress.twentytwentyone .bp-feedback:not(.custom-homepage-info) {
     1261        margin-top: 1.5em;
     1262        margin-bottom: 1.5em;
     1263        border: solid 1px var(--global--color-primary);
     1264}
     1265
     1266#buddypress.twentytwentyone .bp-feedback .bp-icon {
     1267        background-color: var(--global--color-primary);
     1268        color: var(--button--color-text);
     1269}
     1270
     1271#buddypress.twentytwentyone .bp-feedback a {
     1272        border-bottom: solid 1px var(--global--color-primary);
     1273}
     1274
     1275#buddypress.twentytwentyone .bp-feedback button.bp-tooltip {
     1276        border: none;
     1277        background: none;
     1278        top: -5px;
     1279        right: 0;
     1280}
     1281
     1282#buddypress.twentytwentyone .bp-feedback button.bp-tooltip .dashicons-dismiss {
     1283        border-radius: 50%;
     1284        width: 32px;
     1285        height: 32px;
     1286        color: var(--global--color-primary);
     1287        background: var(--global--color-background);
     1288}
     1289
     1290#buddypress.twentytwentyone .bp-feedback button.bp-tooltip:hover .dashicons-dismiss {
     1291        color: var(--global--color-background);
     1292        background: var(--global--color-primary);
     1293}
     1294
     1295#buddypress.twentytwentyone .bp-feedback.bp-sitewide-notice button.bp-tooltip {
     1296        top: 0;
     1297        right: 15px;
     1298}
     1299
     1300#buddypress.twentytwentyone .bp-feedback.bp-sitewide-notice .bp-icon:before {
     1301        content: "\f16d";
     1302}
     1303
     1304#buddypress.twentytwentyone #group-create-body .bp-cover-image-status p.warning {
     1305        background-color: var(--global--color-light-gray);
     1306        border: none;
     1307        border-left-width: 4px;
     1308        border-left-style: solid;
     1309        border-left-color: var(--global--color-orange);
     1310        color: var(--global--color-dark-gray);
     1311        box-shadow: none;
     1312}
     1313
     1314body.buddypress .site #buddypress.twentytwentyone .button.bp-tooltip:after {
     1315        content: attr(data-bp-tooltip);
     1316        word-wrap: break-word;
     1317        height: auto;
     1318        width: auto;
     1319}
     1320
     1321/**
     1322*-------------------------------------------------------------------------------
     1323* @section 9.0 - Layout classes
     1324*-------------------------------------------------------------------------------
     1325*/
     1326#buddypress.twentytwentyone.bp-single-vert-nav .bp-navs.vertical li span {
     1327        background-color: var(--button--color-background);
     1328        border-radius: 10%;
     1329        display: inline-block;
     1330        margin: 3px 0;
     1331}
     1332
     1333#buddypress.twentytwentyone.bp-single-vert-nav .bp-navs.vertical li.selected span, #buddypress.twentytwentyone.bp-single-vert-nav .bp-navs.vertical li.current span {
     1334        background-color: var(--global--color-background);
     1335}
     1336
     1337#buddypress.twentytwentyone.bp-single-vert-nav .item-body:not(#group-create-body) {
     1338        background: var(--global--color-background);
     1339        border-left: 1px solid var(--global--color-primary);
     1340}
     1341
     1342#buddypress.twentytwentyone.bp-single-vert-nav .item-body:not(#group-create-body) #subnav:not(.tabbed-links) {
     1343        background: transparent;
     1344        border-bottom: 1px solid var(--global--color-primary);
     1345}
     1346
     1347#buddypress.twentytwentyone.bp-single-vert-nav .item-body:not(#group-create-body) #subnav:not(.tabbed-links) li a {
     1348        border: none;
     1349        text-decoration: none;
     1350}
     1351
     1352#buddypress.twentytwentyone.bp-single-vert-nav .item-body:not(#group-create-body) #subnav:not(.tabbed-links) li.current, #buddypress.twentytwentyone.bp-single-vert-nav .item-body:not(#group-create-body) #subnav:not(.tabbed-links) li.selected {
     1353        background-color: var(--global--color-primary);
     1354        margin: 0;
     1355        padding: 10px 0;
     1356        border-radius: 0;
     1357}
     1358
     1359#buddypress.twentytwentyone .grid.bp-list {
     1360        border-top: none;
     1361}
     1362
     1363#buddypress.twentytwentyone .grid > li {
     1364        border: none;
     1365}
     1366
     1367#buddypress.twentytwentyone .grid > li .list-wrap {
     1368        border: 1px solid var(--global--color-primary);
     1369        background: transparent;
     1370}
     1371
     1372#buddypress.twentytwentyone .grid > li:not(.mini) .item-avatar,
     1373#buddypress.twentytwentyone .grid > li .item-avatar {
     1374        margin-right: auto;
     1375}

  • src/bp-templates/bp-nouveau/includes/activity/functions.php 

    diff --git src/bp-templates/bp-nouveau/includes/activity/functions.php src/bp-templates/bp-nouveau/includes/activity/functions.php
index 68103e681..89dc5785a 100644
     
    33 * Activity functions
    44 *
    55 * @since 3.0.0
    6  * @version 5.0.0
     6 * @version 7.0.0
    77 */
    88
    99// Exit if accessed directly.
    … … function bp_nouveau_activity_customizer_controls( $controls = array() ) { 
    538538                ),
    539539        ) );
    540540}
     541
     542/**
     543 * Remove brackets around the "Read more" text.
     544 *
     545 * @since 7.0.0
     546 *
     547 * @param string $read_more The read more text.
     548 * @return string The read more text without brackets.
     549 */
     550function bp_nouveau_activity_excerpt_append_text( $read_more = '' ) {
     551        /**
     552         * As this was added during a string freeze period, we
     553         * are using the `str_replace()` function. Directy using
     554         * __( 'Read more', 'buddypress' ) would probably be best.
     555         *
     556         * @todo use __( 'Read more', 'buddypress' ).
     557         */
     558        return str_replace( array( '[', ']' ), '', $read_more );
     559}
     560add_filter( 'bp_activity_excerpt_append_text', 'bp_nouveau_activity_excerpt_append_text', 10, 1 );

  • src/bp-templates/bp-nouveau/includes/template-tags.php 

    diff --git src/bp-templates/bp-nouveau/includes/template-tags.php src/bp-templates/bp-nouveau/includes/template-tags.php
index 751b2d9a9..ed509377a 100644
    function bp_nouveau_container_classes() { 
    14481448         * Returns the main BuddyPress container classes.
    14491449         *
    14501450         * @since 3.0.0
     1451         * @since 7.0.0 Add a class to inform about the active Theme.
    14511452         *
    14521453         * @return string CSS classes
    14531454         */
    14541455        function bp_nouveau_get_container_classes() {
    1455                 $classes           = array( 'buddypress-wrap' );
     1456                $classes           = array( 'buddypress-wrap', get_template() );
    14561457                $component         = bp_current_component();
    14571458                $bp_nouveau        = bp_nouveau();
    14581459                $member_type_class = '';

  • new file src/bp-templates/bp-nouveau/sass/twentytwentyone.scss 

    diff --git src/bp-templates/bp-nouveau/sass/twentytwentyone.scss src/bp-templates/bp-nouveau/sass/twentytwentyone.scss
new file mode 100644
index 000000000..9958c6df4
    - +  
     1//
     2//
     3// Twenty Twenty-One companion stylesheet source.
     4//
     5//
     6// This file compiles to twentytwentyone.css.
     7
     8// Import our partials mixins & variables files
     9
     10@import "../common-styles/_bp-variables";
     11@import "../common-styles/_bp-mixins";
     12
     13/*--------------------------------------------------------------
     14Hello, this is the BP Nouveau's Twenty Twenty-One companion stylesheet.
     15
     16@since 7.0.0
     17@version 7.0.0
     18
     19----------------------------------------------------------------
     20>>> TABLE OF CONTENTS:
     21----------------------------------------------------------------
     221.0 - BP Generic, Typography & Imagery
     23
     242.0 - Navigation - General
     25        2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     26        2.2 - Pagination
     27
     283.0 - BP Lists / Loops Generic & filters
     29        3.1 - Activity Loop
     30                3.1.1 Whats New Activity
     31                3.1.2 - Activity Entries
     32                3.1.3 - Activity Comments
     33        3.2 - Blogs Loop
     34        3.3 - Groups Loop
     35        3.4 - Members Loop
     36
     374.0 - Directories - Members, Groups, Blogs, Register, Activation
     38        4.1 - Groups Creation Steps Screens
     395.0 - Single Item screens: User Account & Single Group Screens
     40        5.1 - Item Headers: Global
     41                5.1.1 - item-header: Groups
     42                5.1.2 - item-header: User Accounts
     43        5.2 - Item Body: Global
     44                5.2.1 - item-body: Groups
     45                        5.2.1.1 - Management settings screens
     46                        5.2.1.2 - Group Members list
     47                        5.2.1.3 - Group Invite list
     48                        5.2.1.4 - Group Activity
     49                5.2.2 - item-body: User Accounts
     50                        5.2.2.1 - classes, pag, filters
     51                        5.2.2.2 - Extended Profiles
     52                        5.2.2.3 - Groups
     53                        5.2.2.4 - friends
     54                        5.2.2.5 - Private Messaging Threads
     55                        5.2.2.6 - Settings
     56
     576.0 - Forms  -  General
     58        6.1 - Dir Search
     59
     607.0 - Tables -  General
     61
     628.0 - Classes - Messages, Ajax, Widgets, Buttons, Tooltips
     63
     649.0 - Layout Classes.
     65--------------------------------------------------------------*/
     66
     67/**
     68*-------------------------------------------------------------------------------
     69* @section 1.0 - BP Generic, Typography & Imagery
     70*-------------------------------------------------------------------------------
     71*/
     72
     73#buddypress.twentytwentyone {
     74
     75        .is-dark-theme & {
     76
     77                .avatar {
     78                        background: var(--global--color-white-90);
     79                }
     80        }
     81}
     82
     83/**
     84*-------------------------------------------------------------------------------
     85* @section 2.0 - Navigation - General
     86*-------------------------------------------------------------------------------
     87*/
     88
     89
     90/**
     91*----------------------------------------------------------
     92* @section 2.1 - Navs Object Nav / Sub Nav (bp-list)
     93*
     94* The main navigational elements for all BP screens
     95*----------------------------------------------------------
     96*/
     97
     98#buddypress.twentytwentyone {
     99
     100        &:not(.bp-single-vert-nav) {
     101
     102                @include medium-max {
     103
     104                        .bp-navs {
     105
     106                                li {
     107                                        background: transparent;
     108                                }
     109                        }
     110                }
     111        }
     112
     113        .bp-navs {
     114
     115                li {
     116
     117                        .count {
     118                                background-color: var(--button--color-background);
     119                                border: 1px solid var(--button--color-background);
     120                                border-radius: 50%;
     121                                color: var(--button--color-text);
     122                        }
     123                }
     124
     125                &:not(.tabbed-links) {
     126
     127                        li.selected,
     128                        li.current,
     129                        li a:hover {
     130
     131                                a {
     132
     133                                        .count {
     134                                                background-color: var(--global--color-background);
     135                                                border: 1px solid var(--global--color-background);
     136                                                color: var(--button--color-text-hover);
     137                                        }
     138                                }
     139                        }
     140                }
     141
     142                li:not(.current):not(.selected) {
     143
     144                        a:focus,
     145                        a:hover {
     146                                background: var(--global--color-background);
     147                                color: var(--global--color-primary);
     148                                outline-offset: -6px;
     149                                outline: 2px dotted currentColor;
     150                        }
     151                }
     152
     153                li.selected,
     154                li.current {
     155
     156                        a,
     157                        a:focus,
     158                        a:hover {
     159                                color: var(--button--color-text);
     160                                background-color: var(--button--color-background);
     161                        }
     162                }
     163
     164                &.tabbed-links ul,
     165                &.tabbed-links ol {
     166                        border-bottom: 1px solid var(--global--color-primary);
     167
     168                        li.current {
     169                                border-color: var(--global--color-primary) var(--global--color-primary) var(--global--color-background);
     170                                border-style: solid;
     171                                border-top-left-radius: 4px;
     172                                border-top-right-radius: 4px;
     173
     174                                a {
     175                                        color: var(--global--color-primary);
     176                                        background-color: var(--global--color-background);
     177                                }
     178                        }
     179                }
     180        }
     181
     182        #group-invites-container {
     183
     184                .bp-invites-nav {
     185                        border-bottom: none;
     186
     187                        li {
     188
     189                                .count {
     190                                        margin-left: 10px;
     191                                        border-radius: 10%;
     192                                        vertical-align: 10%;
     193                                }
     194                        }
     195                }
     196
     197                #send-invites-editor {
     198
     199                        ul {
     200                                padding-left: 0;
     201                        }
     202                }
     203        }
     204
     205        &.bp-dir-hori-nav:not(.bp-vertical-navs) {
     206
     207                nav:not(.tabbed-links) {
     208                        border: none;
     209                        border-bottom: 1px solid var(--global--color-primary);
     210                        box-shadow: none;
     211                }
     212        }
     213}
     214
     215#buddypress.twentytwentyone {
     216
     217        .subnav-filters {
     218
     219                > ul {
     220                        padding-left: 0;
     221                }
     222        }
     223
     224        .notifications-options-nav {
     225                margin-top: 1em;
     226
     227                input#notification-bulk-manage {
     228                        line-height: 1.2;
     229                }
     230        }
     231}
     232
     233/**
     234*----------------------------------------------------------
     235* @section 2.2 - Pagination
     236*----------------------------------------------------------
     237*/
     238
     239#buddypress.twentytwentyone {
     240
     241        .bp-pagination {
     242                color: var(--global--color-secondary);
     243        }
     244}
     245
     246/**
     247*-------------------------------------------------------------------------------
     248* @section 3.0 - BP Lists / Loops Generic
     249*-------------------------------------------------------------------------------
     250*/
     251
     252#buddypress.twentytwentyone {
     253
     254        .bp-list {
     255
     256                border-top: 1px dotted var(--global--color-primary);
     257
     258                > li {
     259                        border-bottom: 1px dotted var(--global--color-primary);
     260                }
     261        }
     262
     263        .activity-list.bp-list {
     264                background: inherit;
     265                border-left: none;
     266                border-right: none;
     267                border-bottom: 1px dotted var(--global--color-primary);
     268
     269                .activity-item {
     270                        background: inherit;
     271                        border: 1px solid var(--global--color-primary);
     272                        box-shadow: none;
     273
     274                        .activity-header {
     275
     276                                .time-since,
     277                                .time-since:hover {
     278                                        color: var(--global--color-secondary);
     279                                }
     280                        }
     281                }
     282        }
     283
     284        .bp-list {
     285
     286                li {
     287
     288                        &:not(.mini) {
     289
     290                                .item-avatar {
     291
     292                                        img.avatar {
     293                                                display: block;
     294                                                margin: 0 auto;
     295                                                margin-bottom: 1em;
     296                                        }
     297
     298                                        @include medium-up() {
     299                                                max-width: 128px;
     300                                                max-height: 128px;
     301                                                margin: auto;
     302                                                margin-right: 5%;
     303                                        }
     304                                }
     305                        }
     306
     307                        &.mini {
     308
     309                                .item-avatar {
     310
     311                                        img.avatar {
     312                                                display: block;
     313                                                margin: 0 auto;
     314                                                max-width: 50px;
     315                                                max-height: 50px;
     316                                                margin-bottom: 1em;
     317                                        }
     318
     319                                        @include medium-up() {
     320                                                width: 5%;
     321                                                margin: auto;
     322                                                margin-right: 2%;
     323                                        }
     324                                }
     325
     326                                .activity-meta {
     327
     328                                        &.action {
     329                                                clear: none;
     330                                        }
     331                                }
     332                        }
     333
     334                        .meta,
     335                        .item-meta {
     336                                color: var(--global--color-secondary);
     337                        }
     338                }
     339        }
     340}
     341
     342/**
     343*----------------------------------------------------------
     344* @section 3.1 - Activity Loop
     345*----------------------------------------------------------
     346*/
     347
     348/**
     349*-----------------------------------------------------
     350* @section 3.1.1 - Activity Whats New
     351*-----------------------------------------------------
     352*/
     353
     354#buddypress.twentytwentyone {
     355
     356        .activity-update-form {
     357                border: 1px solid var(--global--color-primary);
     358                box-shadow: none;
     359
     360                #whats-new-post-in-box {
     361
     362                        #whats-new-post-in-box-items {
     363
     364                                li {
     365                                        margin-bottom: 0;
     366
     367                                        &.bp-activity-object {
     368                                                padding: 5px;
     369                                                margin-left: 3px;
     370                                                border-radius: 0;
     371                                                border-style: dotted;
     372                                                border-width: 0;
     373                                                border-left-width: 1px;
     374                                                border-right-width: 1px;
     375
     376                                                &:not(.selected) {
     377                                                        background: var(--global--color-white-90);
     378                                                        color: var(--form--color-text);
     379                                                        border-color: var(--form--border-color);
     380
     381                                                        &:last-child {
     382                                                                border-bottom: dotted 1px;
     383                                                        }
     384
     385                                                        &:hover {
     386                                                                background: var(--global--color-blue);
     387                                                        }
     388                                                }
     389
     390                                                &.selected {
     391                                                        border: none;
     392                                                        background-color: transparent;
     393                                                }
     394                                        }
     395                                }
     396                        }
     397                }
     398        }
     399}
     400
     401/**
     402*-----------------------------------------------------
     403* @section 3.1.2 - Activity Entries
     404*-----------------------------------------------------
     405*/
     406
     407body {
     408
     409        .site {
     410
     411                #buddypress.twentytwentyone {
     412
     413                        .activity-list {
     414
     415                                .load-more,
     416                                .load-newest {
     417                                        background-color: var(--button--color-background);
     418                                        color: var(--button--color-text);
     419                                        border: 1px solid var(--button--color-background);
     420
     421                                        a {
     422                                                color: var(--button--color-text);
     423
     424                                                &:focus {
     425                                                        color: var(--button--color-text-hover);
     426                                                        background: transparent;
     427                                                        outline-offset: -6px;
     428                                                        outline: 2px dotted currentColor;
     429                                                }
     430                                        }
     431
     432                                        &:hover,
     433                                        &:focus {
     434                                                color: var(--button--color-text-hover);
     435                                                background: transparent;
     436
     437                                                a {
     438                                                        color: var(--button--color-text-hover);
     439                                                        background: transparent;
     440                                                }
     441                                        }
     442                                }
     443
     444                                .activity-content {
     445
     446                                        .activity-header,
     447                                        .comment-header {
     448                                                color: var(--global--color-secondary);
     449
     450                                                a {
     451                                                        font-weight: 600;
     452
     453                                                        &:hover {
     454                                                                text-decoration: underline;
     455                                                        }
     456                                                }
     457                                        }
     458
     459                                        .activity-inner,
     460                                        blockquote {
     461                                                background: inherit;
     462                                                border: 1px dotted var(--global--color-primary);
     463                                        }
     464
     465                                        .activity-meta.action {
     466                                                background: inherit;
     467
     468                                                .button:before,
     469                                                .icons:before {
     470                                                        height: auto;
     471                                                        width: auto;
     472                                                        display: inline;
     473                                                }
     474
     475                                                .button {
     476                                                        background: var(--global--color-background);
     477                                                        color: var(--global--color-primary);
     478                                                        border: none;
     479
     480                                                        span {
     481                                                                color: var(--global--color-secondary);
     482                                                        }
     483                                                }
     484                                        }
     485                                }
     486                        }
     487                }
     488        }
     489
     490        &.activity-permalink {
     491
     492                #buddypress.twentytwentyone {
     493
     494                        .activity-list {
     495                                border: none;
     496
     497                                .activity-avatar {
     498
     499                                        img.avatar {
     500                                                background: var(--global--color-white);
     501                                        }
     502                                }
     503                        }
     504                }
     505        }
     506}
     507
     508/**
     509*-----------------------------------------------------
     510* @section 3.1.3 - Activity Comments
     511*-----------------------------------------------------
     512*/
     513
     514#buddypress.twentytwentyone {
     515
     516        .bp-list {
     517
     518                li {
     519
     520                        .activity-comments {
     521
     522                                .acomment-avatar {
     523                                        width: auto;
     524                                        margin-right: 0;
     525                                }
     526
     527                                .acomment-meta {
     528                                        color: var(--global--color-secondary);
     529
     530                                        a {
     531                                                font-weight: 600;
     532
     533                                                &:hover {
     534                                                        text-decoration: underline;
     535                                                }
     536                                        }
     537                                }
     538
     539                                .acomment-content {
     540                                        border-left: 1px solid var(--global--color-secondary);
     541                                        margin: 15px 0 0 5%;
     542                                }
     543                        }
     544                }
     545        }
     546}
     547
     548/**
     549*----------------------------------------------------------
     550* @section 3.2 - Blogs Loop
     551*----------------------------------------------------------
     552*/
     553
     554// Nothing special for Blogs loop so far.
     555
     556/**
     557*----------------------------------------------------------
     558* @section 3.3 - Groups Loop
     559*----------------------------------------------------------
     560*/
     561
     562#buddypress.twentytwentyone {
     563
     564        .groups-list { // ul
     565
     566                li {
     567
     568                        .group-desc {
     569                                color: var(--global--color-secondary);
     570                                border: 1px dotted var(--global--color-primary);
     571                        }
     572                }
     573        }
     574}
     575
     576
     577/**
     578*----------------------------------------------------------
     579* @section 3.4 - Members Loop
     580*----------------------------------------------------------
     581*/
     582
     583#buddypress.twentytwentyone {
     584
     585        .members-list { // ul
     586
     587                li {
     588
     589                        .user-update {
     590                                border: 1px dotted var(--global--color-primary);
     591                                color: var(--global--color-secondary);
     592                        }
     593                }
     594        }
     595
     596        #members-dir-list {
     597
     598                .current-member-type {
     599                        text-align: center;
     600                }
     601        }
     602}
     603
     604/**
     605*-------------------------------------------------------------------------------
     606* @section 4.0 - Directories
     607*-------------------------------------------------------------------------------
     608*/
     609
     610// Nothing special for Registration index screen (directory) so far.
     611
     612/**
     613*----------------------------------------------------------
     614* @section 4.1 - Groups Creation Steps
     615*----------------------------------------------------------
     616*/
     617
     618#buddypress.twentytwentyone {
     619
     620        #group-create-body {
     621
     622                #avatar-crop-pane {
     623                        margin-bottom: 1em;
     624                }
     625
     626                nav.group-create-links {
     627
     628                        &:not(.tabbed-links) {
     629                                background: transparent;
     630                                clear: both;
     631                                overflow: hidden;
     632                                border: none;
     633                                border-bottom: 1px solid var(--global--color-primary);
     634                                box-shadow: none;
     635
     636                                li {
     637
     638                                        a,
     639                                        span {
     640                                                padding: 0.5em calc(0.5em + 2px);
     641                                                display: block;
     642                                        }
     643                                }
     644                        }
     645                }
     646        }
     647}
     648
     649/**
     650*-------------------------------------------------------------------------------
     651* @section 5.0 - Single Item screens: Groups, Users
     652*-------------------------------------------------------------------------------
     653*/
     654
     655/**
     656*-----------------------------------------------------------
     657* @subsection 5.1 - Item Header Global
     658*-----------------------------------------------------------
     659*/
     660
     661#buddypress.twentytwentyone {
     662
     663        .single-headers {
     664
     665                .group-status,
     666                .item-meta,
     667                .bp-group-type-list,
     668                .bp-member-type-list {
     669                        color: var(--global--color-secondary);
     670                }
     671
     672                a:hover {
     673                        text-decoration: underline;
     674                }
     675        }
     676}
     677
     678/**
     679*-----------------------------------------------------
     680* @subsection 5.1.1 - item-header Groups
     681*
     682* Group Specific Item Header
     683*-----------------------------------------------------
     684*/
     685
     686#buddypress.twentytwentyone {
     687
     688        .groups-header {
     689
     690                .desc-wrap {
     691                        background: var(--global--color-background);
     692                        border: 1px solid var(--global--color-primary);
     693
     694                        .group-description {
     695                                background: none;
     696                                box-shadow: none;
     697                        }
     698                }
     699        }
     700}
     701
     702/**
     703*-----------------------------------------------------
     704* @subsection 5.1.2 - Item Header User Accounts
     705*
     706* User Accounts Specific Item Header
     707*-----------------------------------------------------
     708*/
     709
     710// Nothing specific for the Single User specific header rules so far.
     711
     712/**
     713*-----------------------------------------------------------
     714* @subsection 5.2 - Item Body: Global
     715*-----------------------------------------------------------
     716*/
     717
     718#buddypress.twentytwentyone {
     719
     720        .item-body {
     721
     722                h2.screen-heading,
     723                h2.creation-step-name {
     724                        font-size: var(--heading--font-size-h2);
     725                        letter-spacing: var(--heading--letter-spacing-h2);
     726                }
     727
     728                h3.screen-heading,
     729                h3.creation-step-name {
     730                        font-size: var(--heading--font-size-h3);
     731                        letter-spacing: var(--heading--letter-spacing-h3);
     732                }
     733
     734                h4.screen-heading,
     735                h4.creation-step-name {
     736                        font-size: var(--heading--font-size-h4);
     737                        letter-spacing: var(--heading--letter-spacing-h4);
     738                }
     739        }
     740}
     741
     742/**
     743*----------------------------------------------------
     744* @subsection 5.2.1 - Item Body Groups
     745*
     746* Groups specific item body rules -  screens
     747*----------------------------------------------------
     748*/
     749
     750// Nothing specific for the single screen item-body so far.
     751
     752/**
     753*-----------------------------------------
     754* @subsection 5.2.1.1 - Management Settings Screens
     755*-----------------------------------------
     756*/
     757
     758#buddypress.twentytwentyone {
     759
     760        .group-settings & {
     761
     762                .group-settings-selections {
     763                        margin-bottom: 1em;
     764                }
     765        }
     766
     767        #group-manage-members-ui {
     768
     769                .bp-pagination {
     770                        padding: 0.4em 0 0.4em 0.5em;
     771                }
     772
     773                #group-members-search-form {
     774
     775                        input[type="search"] {
     776                                font-size: 16px;
     777
     778                                &:focus {
     779                                        outline-offset: -7px;
     780                                        outline: 2px dotted var(--form--border-color);
     781                                }
     782                        }
     783
     784                        button[type="submit"] {
     785                                border-width: 1px;
     786                                border-style: solid;
     787                                background-clip: border-box;
     788
     789                                &:hover {
     790                                        border-color: var(--button--color-background);
     791                                }
     792                        }
     793                }
     794
     795                #group-roles-filter,
     796                #group-members-list-table .group-member-edit {
     797
     798                        label {
     799                                border: 0;
     800                                clip: rect(0 0 0 0);
     801                                height: 1px;
     802                                margin: -1px;
     803                                overflow: hidden;
     804                                padding: 0;
     805                                position: absolute;
     806                                width: 1px;
     807                                word-wrap: normal !important;
     808                        }
     809                }
     810
     811                #group-members-role-filter,
     812                #group-members-list-table .group-member-edit select {
     813                        font-size: 16px;
     814                        padding: 6px 25px 6px 10px;
     815
     816                        &:focus {
     817                                outline-offset: 2px;
     818                                outline: 2px dotted var(--form--border-color);
     819                        }
     820                }
     821        }
     822}
     823
     824/**
     825*-----------------------------------------
     826* @subsection 5.2.1.2 - Group Members List
     827*-----------------------------------------
     828*/
     829
     830/*
     831*-----------------------------------------
     832* @subsection 5.2.1.3 - Group Invites List
     833*-----------------------------------------
     834*/
     835
     836#buddypress.twentytwentyone {
     837
     838        .bp-invites-content {
     839
     840                ul {
     841                        border-top: none;
     842
     843                        li {
     844                                border: 1px dotted var(--global--color-primary);
     845
     846                                &.selected {
     847                                        box-shadow: none;
     848                                        border-style: solid;
     849                                }
     850
     851                                button.invite-button {
     852                                        border: none;
     853                                        background: none;
     854                                        top: -5px;
     855                                        right: 0;
     856
     857                                        .icons:before {
     858                                                border-radius: 50%;
     859                                                width: 32px;
     860                                                height: 32px;
     861                                                color: var(--global--color-primary);
     862                                                background: var(--global--color-background);
     863                                        }
     864
     865                                        &:hover {
     866
     867                                                .icons:before {
     868                                                        color: var(--global--color-background);
     869                                                        background: var(--global--color-primary);
     870                                                        width: 32px;
     871                                                        height: 32px;
     872                                                }
     873                                        }
     874                                }
     875
     876                                ul.group-inviters {
     877
     878                                        li {
     879                                                border: none;
     880                                        }
     881                                }
     882                        }
     883                }
     884        }
     885}
     886
     887/*
     888*-----------------------------------------
     889* @subsection 5.2.1.4 - Group Activity
     890*-----------------------------------------
     891*/
     892
     893// Nothing particular for the Group's activity.
     894
     895/**
     896*-----------------------------------------------------
     897* @subsection 5.2.2 - Item Body User Accounts
     898*
     899* User Account specific item body rules
     900*-----------------------------------------------------
     901*/
     902
     903/**
     904*--------------------------------------------
     905* @subsection 5.2.2.1 - classes, pag, filters
     906*--------------------------------------------
     907*/
     908
     909/**
     910*-------------------------------------------
     911* @subsection 5.2.2.2 - Extended Profiles
     912*-------------------------------------------
     913*/
     914
     915#buddypress.twentytwentyone {
     916
     917        .profile {
     918
     919                table.profile-fields,
     920                table.bp-tables-user {
     921
     922                        tr.alt,
     923                        tr {
     924
     925                                td {
     926                                        background: transparent;
     927
     928                                        &.label {
     929                                                border-right-color: var(--global--color-primary);
     930                                        }
     931                                }
     932                        }
     933                }
     934
     935                &.edit {
     936
     937                        .editfield {
     938                                background: var(--global--color-background);
     939                                border: 1px solid var(--global--color-primary);
     940
     941                                p.field-visibility-settings-toggle {
     942                                        margin-top: 1em;
     943                                }
     944
     945                                .field-visibility-settings {
     946
     947                                        .radio {
     948
     949                                                label {
     950                                                        margin-bottom: 0.5em;
     951                                                }
     952                                        }
     953                                }
     954                        }
     955
     956                        .wp-editor-container {
     957
     958                                .mce-toolbar {
     959
     960                                        button {
     961                                                color: var(--global--color-dark-gray);
     962                                                background: var(--global--color-white-90);
     963                                                border-color: var(--global--color-dark-gray);
     964                                        }
     965                                }
     966                        }
     967
     968                        .button-tabs {
     969
     970                                li {
     971                                        border: solid 2px var(--global--color-primary);
     972                                        overflow: hidden;
     973
     974                                        a {
     975                                                text-decoration: none;
     976                                        }
     977
     978                                        &.current {
     979                                                background-color: var(--global--color-primary);
     980                                                color: var(--button--color-text);
     981
     982                                                a {
     983                                                        color: var(--button--color-text);
     984                                                }
     985                                        }
     986
     987                                        &:hover {
     988                                                outline-offset: 10px;
     989                                                border-style: dotted;
     990                                        }
     991                                }
     992                        }
     993
     994                        .clear-value {
     995                                text-decoration: underline;
     996                        }
     997
     998                        legend {
     999                                padding: 0;
     1000                        }
     1001                }
     1002        }
     1003
     1004        .field-visibility-settings,
     1005        .field-visibility-settings-header {
     1006                color: var(--global--color-secondary);
     1007        }
     1008
     1009        .bp-avatar-nav {
     1010
     1011                ul.avatar-nav-items {
     1012                        border-bottom: 1px solid var(--global--color-primary);
     1013
     1014                        li {
     1015
     1016                                &.current {
     1017                                        border: 1px solid var(--global--color-primary);
     1018                                        border-bottom: 1px solid var(--global--color-background);
     1019                                }
     1020                        }
     1021                }
     1022        }
     1023
     1024        #drag-drop-area {
     1025                border: 4px dashed var(--global--color-secondary);
     1026
     1027                .drag-drop-info {
     1028                        color: var(--global--color-secondary);
     1029                }
     1030        }
     1031
     1032        .bp-avatar-status,
     1033        .bp-cover-image-status {
     1034
     1035                .warning,
     1036                .success {
     1037                        background-color: var(--global--color-light-gray);
     1038                        border: none;
     1039                        border-left-width: 4px;
     1040                        border-left-style: solid;
     1041                        color: var(--global--color-dark-gray);
     1042                }
     1043
     1044                .warning {
     1045                        border-left-color: var(--global--color-orange);
     1046                }
     1047
     1048                .success {
     1049                        border-left-color: var(--global--color-green);
     1050                }
     1051
     1052                .error {
     1053                        border-left-color: var(--global--color-red);
     1054                }
     1055        }
     1056}
     1057
     1058/**
     1059*-------------------------------------------
     1060* @subsection 5.2.2.3 - Groups
     1061*-------------------------------------------
     1062*/
     1063
     1064#buddypress.twentytwentyone {
     1065
     1066        #group-list {
     1067
     1068                &.invites {
     1069
     1070                        h2.list-title {
     1071                                float: none;
     1072                        }
     1073
     1074                        .accept {
     1075                                margin-left: 0;
     1076                        }
     1077                }
     1078        }
     1079}
     1080
     1081/**
     1082*-------------------------------------------
     1083* @subsection 5.2.2.5 - Private Messaging
     1084*-------------------------------------------
     1085*/
     1086
     1087#buddypress.twentytwentyone {
     1088
     1089        #user_messages_select_all {
     1090                vertical-align: -5px;
     1091        }
     1092
     1093        #user_messages_select_all:checked {
     1094                vertical-align: -3px;
     1095        }
     1096
     1097        #message-threads {
     1098                border-top: 1px dotted var(--global--color-primary);
     1099
     1100                > li {
     1101                        border-bottom: 1px dotted var(--global--color-primary);
     1102
     1103                        &.selected {
     1104                                border: 1px solid var(--global--color-primary);
     1105                        }
     1106
     1107                        &.unread {
     1108                                border-left: 8px solid var(--global--color-yellow);
     1109                        }
     1110                }
     1111
     1112                li {
     1113
     1114                        .thread-cb {
     1115                                padding-left: 15px;
     1116                        }
     1117
     1118                        &.unread {
     1119
     1120                                .thread-cb {
     1121                                        padding-left: 7px;
     1122                                }
     1123                        }
     1124
     1125                        .thread-from,
     1126                        .thread-to {
     1127
     1128                                img.avatar {
     1129                                        width: 32px;
     1130                                        height: 32px;
     1131                                }
     1132
     1133                                .num-recipients {
     1134                                        color: var(--global--color-primary);
     1135                                }
     1136                        }
     1137
     1138                        .thread-content {
     1139
     1140                                .excerpt {
     1141                                        color: var(--global--color-primary);
     1142                                }
     1143                        }
     1144
     1145                        .thread-date {
     1146
     1147                                time {
     1148                                        color: var(--global--color-primary);
     1149                                }
     1150                        }
     1151                }
     1152
     1153                li.selected {
     1154                        background: transparent;
     1155                        font-weight: bolder;
     1156                        color: var(--global--color-primary);
     1157
     1158                        .thread-subject {
     1159
     1160                                .subject {
     1161                                        color: var(--global--color-primary);
     1162                                }
     1163                        }
     1164                }
     1165
     1166                li:not(.selected) {
     1167                        color: var(--global--color-secondary);
     1168                }
     1169        }
     1170
     1171        .bp-messages-content {
     1172
     1173                #thread-preview h2:first-child,
     1174                #bp-message-thread-header h2:first-child {
     1175                        background-color: var(--button--color-background);
     1176                        color: var(--button--color-text);
     1177                }
     1178
     1179                #thread-preview {
     1180                        border-color: var(--button--color-background);
     1181
     1182                        dd,
     1183                        .participants-list {
     1184                                padding-left: 0;
     1185                        }
     1186
     1187                        .preview-pane-header {
     1188                                border-bottom-style: dotted;
     1189                                border-bottom-color: var(--global--color-primary);
     1190                        }
     1191
     1192                        .preview-content {
     1193
     1194                                .preview-message {
     1195                                        background: transparent;
     1196                                }
     1197                        }
     1198                }
     1199
     1200                .single-message-thread-header {
     1201
     1202                        dd,
     1203                        .participants-list {
     1204                                padding-left: 0;
     1205                        }
     1206                }
     1207
     1208                .actions {
     1209
     1210                        button.bp-tooltip {
     1211                                border: none;
     1212                                background: none;
     1213
     1214                                &.message-action-delete {
     1215
     1216                                        &:before {
     1217                                                width: 32px;
     1218                                                height: 32px;
     1219                                                color: var(--global--color-primary);
     1220                                                background: var(--global--color-background);
     1221                                        }
     1222
     1223                                        &:hover {
     1224
     1225                                                &:before {
     1226                                                        border-radius: 50%;
     1227                                                        color: var(--global--color-background);
     1228                                                        background: var(--global--color-primary);
     1229                                                }
     1230                                        }
     1231                                }
     1232                        }
     1233
     1234                        .message-action-unstar:before,
     1235                        .message-action-star:before {
     1236                                color: var(--global--color-secondary);
     1237                        }
     1238                }
     1239
     1240                #bp-message-thread-list {
     1241
     1242                        li {
     1243
     1244                                .message-metadata {
     1245                                        background: transparent;
     1246                                        border: 1px solid var(--global--color-primary);
     1247                                        box-shadow: none;
     1248
     1249                                        * {
     1250                                                line-height: 1.6;
     1251                                                vertical-align: middle;
     1252                                        }
     1253
     1254                                        .user-link {
     1255                                                margin-top: 3px;
     1256                                                margin-bottom: 3px;
     1257
     1258                                                strong {
     1259                                                        display: inline-block;
     1260                                                        margin-top: 2px;
     1261                                                }
     1262
     1263                                                &:hover {
     1264
     1265                                                        strong {
     1266                                                                text-decoration: underline;
     1267                                                        }
     1268                                                }
     1269                                        }
     1270
     1271                                        time {
     1272                                                color: var(--global--color-secondary);
     1273                                        }
     1274                                }
     1275
     1276                                .message-content {
     1277                                        background: transparent;
     1278                                        margin: 0;
     1279                                        width: 100%;
     1280                                        padding: 1em;
     1281                                }
     1282
     1283                                &:first-child {
     1284
     1285                                        .message-content {
     1286                                                border: 1px dotted var(--global--color-primary);
     1287                                                border-top: none;
     1288                                        }
     1289                                }
     1290                        }
     1291                }
     1292
     1293                #send-reply {
     1294
     1295                        .avatar-box {
     1296
     1297                                img.avatar {
     1298                                        display: inline-block;
     1299                                        vertical-align: -7px;
     1300                                }
     1301                        }
     1302                }
     1303
     1304                .wp-editor-container {
     1305
     1306                        .mce-toolbar {
     1307
     1308                                button {
     1309                                        color: var(--global--color-dark-gray);
     1310                                        background: var(--global--color-white-90);
     1311                                        border-color: var(--global--color-dark-gray);
     1312                                }
     1313                        }
     1314                }
     1315
     1316                #bp-messages-reset {
     1317                        border-width: 0;
     1318                        font-size: inherit;
     1319                }
     1320
     1321                #send-to-input {
     1322                        width: 100% !important;
     1323                }
     1324        }
     1325
     1326        .subnav-filters {
     1327
     1328                button#user_messages_search_submit {
     1329                        padding: 3px 0.7em;
     1330
     1331                        background-color: var(--global--color-background);
     1332                        color: var(--button--color-text-hover);
     1333                        border-color: var(--global--color-background);
     1334                        border-left-color: var(--button--color-background);
     1335
     1336                        &:hover {
     1337                                background-color: var(--button--color-background);
     1338                                color: var(--button--color-text);
     1339                                border-color: var(--button--color-background);
     1340                        }
     1341                }
     1342
     1343                .user-messages-bulk-actions {
     1344
     1345                        .bulk-apply {
     1346                                line-height: 1.5;
     1347                                margin: 0 0 0 10px;
     1348                                padding: 3px 5px;
     1349                                background-color: var(--global--color-background);
     1350                                color: var(--button--color-text-hover);
     1351
     1352                                &:hover {
     1353                                        background-color: var(--button--color-background);
     1354                                        color: var(--button--color-text);
     1355                                }
     1356
     1357                                span {
     1358                                        vertical-align: middle;
     1359                                }
     1360                        }
     1361                }
     1362        }
     1363}
     1364
     1365/**
     1366*------------------------------------------
     1367* @subsection 5.2.2.6 - Settings
     1368*------------------------------------------
     1369*/
     1370
     1371#buddypress.twentytwentyone {
     1372
     1373        &.buddypress-wrap .bp-tables-user tr.alt td,
     1374        &.buddypress-wrap table.wp-profile-fields tr.alt td {
     1375                background: transparent;
     1376        }
     1377}
     1378
     1379/**
     1380*-------------------------------------------------------------------------------
     1381* @section 6.0 - Forms  - General
     1382*-------------------------------------------------------------------------------
     1383*/
     1384
     1385#buddypress.twentytwentyone {
     1386
     1387        fieldset {
     1388                padding-top: 0;
     1389                margin-top: 1em;
     1390
     1391                legend {
     1392                        padding: 0 1em;
     1393                        display: inline-block;
     1394                }
     1395        }
     1396
     1397        .select-wrap {
     1398                border: 1px solid var(--global--color-primary);
     1399                background: var(--global--color-white-90);
     1400
     1401                select {
     1402                        background: transparent;
     1403                        width: 98%;
     1404                        text-indent: 0;
     1405                }
     1406
     1407                span.select-arrow {
     1408                        background: transparent;
     1409
     1410                        &:before {
     1411                                font-family: dashicons;
     1412                                content: "\f140";
     1413                                color: var(--global--color-black);
     1414                                vertical-align: -10%;
     1415                        }
     1416                }
     1417
     1418                &:focus,
     1419                &:hover {
     1420
     1421                        .select-arrow:before {
     1422                                color: var(--global--color-black);
     1423                        }
     1424                }
     1425        }
     1426
     1427        .wp-pwd {
     1428
     1429                &:not(.is-open) {
     1430                        display: none;
     1431                }
     1432        }
     1433
     1434        input[type="checkbox"],
     1435        input[type="radio"] {
     1436                width: 25px;
     1437                height: 25px;
     1438                vertical-align: top;
     1439        }
     1440
     1441        textarea,
     1442        input[type="text"],
     1443        input[type="color"],
     1444        input[type="date"],
     1445        input[type="datetime"],
     1446        input[type="datetime-local"],
     1447        input[type="email"],
     1448        input[type="month"],
     1449        input[type="number"],
     1450        input[type="range"],
     1451        input[type="tel"],
     1452        input[type="time"],
     1453        input[type="url"],
     1454        input[type="week"],
     1455        input[type="password"],
     1456        input[type="search"],
     1457        .groups-members-search input[type="text"] {
     1458                color: var(--form--color-text);
     1459                background: var(--global--color-white-90);
     1460        }
     1461
     1462        .subnav-filters {
     1463
     1464                input[type="search"] {
     1465                        font-size: 16px;
     1466                        background: transparent;
     1467                }
     1468        }
     1469
     1470        .bp-dir-search-form,
     1471        form#group-members-search,
     1472        form#group_invites_search_form {
     1473
     1474                button {
     1475                        background-color: var(--global--color-background);
     1476                        color: var(--button--color-text-hover);
     1477                        border-color: var(--global--color-background);
     1478                        border-left-color: var(--button--color-background);
     1479
     1480                        &:hover {
     1481                                background-color: var(--button--color-background);
     1482                                color: var(--button--color-text);
     1483                                border-color: var(--button--color-background);
     1484                        }
     1485                }
     1486        }
     1487
     1488        .standard-form {
     1489
     1490                p.description {
     1491                        color: var(--global--primary-color);
     1492                        background-color: var(--global--color-background);
     1493                }
     1494        }
     1495}
     1496
     1497
     1498/**
     1499*----------------------------------------------------------
     1500* @section 6.1 - Directory Search
     1501*
     1502* The Search form & controls in directory pages
     1503*----------------------------------------------------------
     1504*/
     1505
     1506#buddypress.twentytwentyone {
     1507
     1508        .bp-user & {
     1509
     1510                [data-bp-search] {
     1511
     1512                        form {
     1513
     1514                                #user_messages_search {
     1515                                        padding: 3px 10px;
     1516                                }
     1517                        }
     1518                }
     1519        }
     1520
     1521        form.bp-dir-search-form,
     1522        form.bp-messages-search-form,
     1523        form[data-bp-search].bp-invites-search-form,
     1524        form#group-members-search {
     1525                border: 1px solid var(--global--color-primary);
     1526                background-color: var(--global--color-white-90);
     1527        }
     1528}
     1529
     1530/**
     1531*-------------------------------------------------------------------------------
     1532* @section 7.0 - Tables - General
     1533*-------------------------------------------------------------------------------
     1534*/
     1535
     1536#buddypress.twentytwentyone {
     1537
     1538        .bp-tables-user,
     1539        table.wp-profile-fields,
     1540        table.forum {
     1541
     1542                tbody {
     1543
     1544                        tr,
     1545                        tr.alt {
     1546                                background: transparent;
     1547                        }
     1548                }
     1549        }
     1550}
     1551
     1552/**
     1553*-------------------------------------------------------------------------------
     1554* @section 8.0 - Classes - Messages, Ajax, Widgets, Buttons
     1555*-------------------------------------------------------------------------------
     1556*/
     1557
     1558#buddypress.twentytwentyone {
     1559
     1560        button,
     1561        a.button,
     1562        input[type="submit"],
     1563        input[type="button"],
     1564        ul.button-nav:not(.button-tabs) li a,
     1565        .generic-button a,
     1566        .comment-reply-link,
     1567        a.bp-title-button,
     1568        .activity-read-more a {
     1569                background: var(--button--color-background);
     1570                border: 1px solid var(--button--color-background);
     1571                border-radius: 0;
     1572                color: var(--button--color-text);
     1573        }
     1574
     1575        button:hover,
     1576        button:focus,
     1577        a.button:focus,
     1578        a.button:hover,
     1579        input[type="submit"]:focus,
     1580        input[type="submit"]:hover,
     1581        input[type="button"]:focus,
     1582        input[type="button"]:hover,
     1583        input[type="reset"],
     1584        #bp-messages-reset,
     1585        .button-nav li a:focus,
     1586        .button-nav li a:hover,
     1587        .button-nav li.current a,
     1588        .generic-button a:focus,
     1589        .generic-button a:hover,
     1590        .comment-reply-link:focus,
     1591        .comment-reply-link:hover,
     1592        .activity-read-more a:focus,
     1593        .activity-read-more a:hover {
     1594                background: transparent;
     1595                border-color: var(--button--color-background);
     1596                color: var(--button--color-text-hover);
     1597                outline: none;
     1598                text-decoration: none;
     1599        }
     1600
     1601        input[type="reset"]:focus,
     1602        input[type="reset"]:hover,
     1603        #bp-messages-reset:focus,
     1604        #bp-messages-reset:hover {
     1605                outline-offset: -1px;
     1606                outline: 2px dotted currentColor;
     1607        }
     1608
     1609        input[type="submit"].pending,
     1610        input[type="button"].pending,
     1611        input[type="reset"].pending,
     1612        input[type="button"].disabled,
     1613        input[type="reset"].disabled,
     1614        input[type="submit"][disabled="disabled"],
     1615        input[type="submit"]:disabled,
     1616        input[type="submit"]:hover.pending,
     1617        input[type="button"]:hover.pending,
     1618        input[type="reset"]:hover.pending,
     1619        input[type="submit"]:hover.disabled,
     1620        input[type="button"]:hover.disabled,
     1621        input[type="reset"]:hover.disabled,
     1622        button.pending:hover,
     1623        button.disabled:hover,
     1624        div.pending a:hover,
     1625        a.disabled:hover
     1626        button.pending,
     1627        button.disabled,
     1628        div.pending a,
     1629        a.disabled {
     1630                opacity: 0.6;
     1631                cursor: not-allowed;
     1632        }
     1633
     1634        .blog-button {
     1635
     1636                &:after,
     1637                &:before {
     1638                        display: none;
     1639                }
     1640        }
     1641
     1642        .create-button {
     1643
     1644                a:focus,
     1645                a:hover {
     1646                        text-decoration: none;
     1647                }
     1648        }
     1649
     1650        &.bp-dir-vert-nav {
     1651
     1652                .create-button {
     1653
     1654                        a {
     1655                                box-shadow: none;
     1656                                color: var(--button--color-text);
     1657                                background-color: var(--button--color-background);
     1658                                border-radius: var(--button--border-radius);
     1659                                border: var(--button--border-width) solid var(--button--color-background);
     1660                                background-clip: border-box;
     1661                        }
     1662                }
     1663        }
     1664}
     1665
     1666#buddypress.twentytwentyone {
     1667
     1668        .warn {
     1669                color: var(--global--color-primary);
     1670                font-weight: 600;
     1671        }
     1672
     1673        .bp-feedback {
     1674                color: var(--global--color-primary);
     1675                background: var(--global--color-background);
     1676                box-shadow: none;
     1677
     1678                &:not(.custom-homepage-info) {
     1679                        margin-top: 1.5em;
     1680                        margin-bottom: 1.5em;
     1681                        border: solid 1px var(--global--color-primary);
     1682                }
     1683
     1684                .bp-icon {
     1685                        background-color: var(--global--color-primary);
     1686                        color: var(--button--color-text);
     1687                }
     1688
     1689                a {
     1690                        border-bottom: solid 1px var(--global--color-primary);
     1691                }
     1692
     1693                button.bp-tooltip {
     1694                        border: none;
     1695                        background: none;
     1696                        top: -5px;
     1697                        right: 0;
     1698
     1699                        .dashicons-dismiss {
     1700                                border-radius: 50%;
     1701                                width: 32px;
     1702                                height: 32px;
     1703                                color: var(--global--color-primary);
     1704                                background: var(--global--color-background);
     1705                        }
     1706
     1707                        &:hover {
     1708
     1709                                .dashicons-dismiss {
     1710                                        color: var(--global--color-background);
     1711                                        background: var(--global--color-primary);
     1712                                }
     1713                        }
     1714                }
     1715
     1716                &.bp-sitewide-notice {
     1717
     1718                        button.bp-tooltip {
     1719                                top: 0;
     1720                                right: 15px;
     1721                        }
     1722
     1723                        .bp-icon:before {
     1724                                content: "\f16d";
     1725                        }
     1726                }
     1727        }
     1728
     1729        #group-create-body {
     1730
     1731                .bp-cover-image-status {
     1732
     1733                        p.warning {
     1734                                background-color: var(--global--color-light-gray);
     1735                                border: none;
     1736                                border-left-width: 4px;
     1737                                border-left-style: solid;
     1738                                border-left-color: var(--global--color-orange);
     1739                                color: var(--global--color-dark-gray);
     1740                                box-shadow: none;
     1741                        }
     1742                }
     1743        }
     1744}
     1745
     1746body.buddypress {
     1747
     1748        .site {
     1749
     1750                #buddypress.twentytwentyone {
     1751
     1752                        .button {
     1753
     1754                                &.bp-tooltip {
     1755
     1756                                        &:after {
     1757                                                content: attr(data-bp-tooltip);
     1758                                                word-wrap: break-word;
     1759                                                height: auto;
     1760                                                width: auto;
     1761                                        }
     1762                                }
     1763                        }
     1764                }
     1765        }
     1766}
     1767
     1768/**
     1769*-------------------------------------------------------------------------------
     1770* @section 9.0 - Layout classes
     1771*-------------------------------------------------------------------------------
     1772*/
     1773
     1774#buddypress.twentytwentyone {
     1775
     1776        &.bp-single-vert-nav {
     1777
     1778                .bp-navs {
     1779
     1780                        &.vertical {
     1781
     1782                                li {
     1783
     1784                                        span {
     1785                                                background-color: var(--button--color-background);
     1786                                                border-radius: 10%;
     1787                                                display: inline-block;
     1788                                                margin: 3px 0;
     1789                                        }
     1790
     1791                                        &.selected,
     1792                                        &.current {
     1793
     1794                                                span {
     1795                                                        background-color: var(--global--color-background);
     1796                                                }
     1797                                        }
     1798                                }
     1799                        }
     1800                }
     1801
     1802                .item-body:not(#group-create-body) {
     1803                        background: var(--global--color-background);
     1804                        border-left: 1px solid var(--global--color-primary);
     1805
     1806                        #subnav:not(.tabbed-links) {
     1807                                background: transparent;
     1808                                border-bottom: 1px solid var(--global--color-primary);
     1809
     1810                                li {
     1811
     1812                                        a {
     1813                                                border: none;
     1814                                                text-decoration: none;
     1815                                        }
     1816
     1817                                        &.current,
     1818                                        &.selected {
     1819                                                background-color: var(--global--color-primary);
     1820                                                margin: 0;
     1821                                                padding: 10px 0;
     1822                                                border-radius: 0;
     1823                                        }
     1824                                }
     1825                        }
     1826                }
     1827        }
     1828
     1829        .grid {
     1830
     1831                &.bp-list {
     1832                        border-top: none;
     1833                }
     1834
     1835                > li {
     1836                        border: none;
     1837
     1838                        .list-wrap {
     1839                                border: 1px solid var(--global--color-primary);
     1840                                background: transparent;
     1841                        }
     1842
     1843                        &:not(.mini) .item-avatar,
     1844                        .item-avatar {
     1845                                margin-right: auto;
     1846                        }
     1847                }
     1848        }
     1849}