Skip to:
Content

BuddyPress.org

Ticket #8395: 8395.patch

File 8395.patch, 138.7 KB (added by imath, 6 years ago)

  • 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..9214b3374
    - +  
     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: none;
     498        border-right: 4px solid var(--global--color-primary);
     499}
     500
     501#buddypress.twentytwentyone .groups-header .desc-wrap .group-description {
     502        background: none;
     503        box-shadow: none;
     504}
     505
     506/**
     507*-----------------------------------------------------
     508* @subsection 5.1.2 - Item Header User Accounts
     509*
     510* User Accounts Specific Item Header
     511*-----------------------------------------------------
     512*/
     513/**
     514*-----------------------------------------------------------
     515* @subsection 5.2 - Item Body: Global
     516*-----------------------------------------------------------
     517*/
     518#buddypress.twentytwentyone .item-body h2.screen-heading,
     519#buddypress.twentytwentyone .item-body h2.creation-step-name {
     520        font-size: var(--heading--font-size-h2);
     521        letter-spacing: var(--heading--letter-spacing-h2);
     522}
     523
     524#buddypress.twentytwentyone .item-body h3.screen-heading,
     525#buddypress.twentytwentyone .item-body h3.creation-step-name {
     526        font-size: var(--heading--font-size-h3);
     527        letter-spacing: var(--heading--letter-spacing-h3);
     528}
     529
     530#buddypress.twentytwentyone .item-body h4.screen-heading,
     531#buddypress.twentytwentyone .item-body h4.creation-step-name {
     532        font-size: var(--heading--font-size-h4);
     533        letter-spacing: var(--heading--letter-spacing-h4);
     534}
     535
     536/**
     537*----------------------------------------------------
     538* @subsection 5.2.1 - Item Body Groups
     539*
     540* Groups specific item body rules -  screens
     541*----------------------------------------------------
     542*/
     543/**
     544*-----------------------------------------
     545* @subsection 5.2.1.1 - Management Settings Screens
     546*-----------------------------------------
     547*/
     548.group-settings #buddypress.twentytwentyone .group-settings-selections {
     549        margin-bottom: 1em;
     550}
     551
     552#buddypress.twentytwentyone #group-manage-members-ui .bp-pagination {
     553        padding: 0.4em 0.5em 0.4em 0;
     554}
     555
     556#buddypress.twentytwentyone #group-manage-members-ui #group-members-search-form input[type="search"] {
     557        font-size: 16px;
     558}
     559
     560#buddypress.twentytwentyone #group-manage-members-ui #group-members-search-form input[type="search"]:focus {
     561        outline-offset: -7px;
     562        outline: 2px dotted var(--form--border-color);
     563}
     564
     565#buddypress.twentytwentyone #group-manage-members-ui #group-members-search-form button[type="submit"] {
     566        border-width: 1px;
     567        border-style: solid;
     568        background-clip: border-box;
     569}
     570
     571#buddypress.twentytwentyone #group-manage-members-ui #group-members-search-form button[type="submit"]:hover {
     572        border-color: var(--button--color-background);
     573}
     574
     575#buddypress.twentytwentyone #group-manage-members-ui #group-roles-filter label,
     576#buddypress.twentytwentyone #group-manage-members-ui #group-members-list-table .group-member-edit label {
     577        border: 0;
     578        clip: rect(0 0 0 0);
     579        height: 1px;
     580        margin: -1px;
     581        overflow: hidden;
     582        padding: 0;
     583        position: absolute;
     584        width: 1px;
     585        word-wrap: normal !important;
     586}
     587
     588#buddypress.twentytwentyone #group-manage-members-ui #group-members-role-filter,
     589#buddypress.twentytwentyone #group-manage-members-ui #group-members-list-table .group-member-edit select {
     590        font-size: 16px;
     591        padding: 6px 10px 6px 25px;
     592}
     593
     594#buddypress.twentytwentyone #group-manage-members-ui #group-members-role-filter:focus,
     595#buddypress.twentytwentyone #group-manage-members-ui #group-members-list-table .group-member-edit select:focus {
     596        outline-offset: 2px;
     597        outline: 2px dotted var(--form--border-color);
     598}
     599
     600/**
     601*-----------------------------------------
     602* @subsection 5.2.1.2 - Group Members List
     603*-----------------------------------------
     604*/
     605/*
     606*-----------------------------------------
     607* @subsection 5.2.1.3 - Group Invites List
     608*-----------------------------------------
     609*/
     610#buddypress.twentytwentyone .bp-invites-content ul {
     611        border-top: none;
     612}
     613
     614#buddypress.twentytwentyone .bp-invites-content ul li {
     615        border: 1px dotted var(--global--color-primary);
     616}
     617
     618#buddypress.twentytwentyone .bp-invites-content ul li.selected {
     619        box-shadow: none;
     620        border-style: solid;
     621}
     622
     623#buddypress.twentytwentyone .bp-invites-content ul li button.invite-button {
     624        border: none;
     625        background: none;
     626        top: -5px;
     627        left: 0;
     628}
     629
     630#buddypress.twentytwentyone .bp-invites-content ul li button.invite-button .icons:before {
     631        border-radius: 50%;
     632        width: 32px;
     633        height: 32px;
     634        color: var(--global--color-primary);
     635        background: var(--global--color-background);
     636}
     637
     638#buddypress.twentytwentyone .bp-invites-content ul li button.invite-button:hover .icons:before {
     639        color: var(--global--color-background);
     640        background: var(--global--color-primary);
     641        width: 32px;
     642        height: 32px;
     643}
     644
     645#buddypress.twentytwentyone .bp-invites-content ul li ul.group-inviters li {
     646        border: none;
     647}
     648
     649/*
     650*-----------------------------------------
     651* @subsection 5.2.1.4 - Group Activity
     652*-----------------------------------------
     653*/
     654/**
     655*-----------------------------------------------------
     656* @subsection 5.2.2 - Item Body User Accounts
     657*
     658* User Account specific item body rules
     659*-----------------------------------------------------
     660*/
     661/**
     662*--------------------------------------------
     663* @subsection 5.2.2.1 - classes, pag, filters
     664*--------------------------------------------
     665*/
     666/**
     667*-------------------------------------------
     668* @subsection 5.2.2.2 - Extended Profiles
     669*-------------------------------------------
     670*/
     671#buddypress.twentytwentyone .profile table.profile-fields tr.alt td,
     672#buddypress.twentytwentyone .profile table.profile-fields tr td,
     673#buddypress.twentytwentyone .profile table.bp-tables-user tr.alt td,
     674#buddypress.twentytwentyone .profile table.bp-tables-user tr td {
     675        background: transparent;
     676}
     677
     678#buddypress.twentytwentyone .profile table.profile-fields tr.alt td.label,
     679#buddypress.twentytwentyone .profile table.profile-fields tr td.label,
     680#buddypress.twentytwentyone .profile table.bp-tables-user tr.alt td.label,
     681#buddypress.twentytwentyone .profile table.bp-tables-user tr td.label {
     682        border-left-color: var(--global--color-primary);
     683}
     684
     685#buddypress.twentytwentyone .profile.edit .editfield {
     686        background: var(--global--color-background);
     687        border: 1px solid var(--global--color-primary);
     688}
     689
     690#buddypress.twentytwentyone .profile.edit .wp-editor-container .mce-toolbar button {
     691        color: var(--global--color-dark-gray);
     692        background: var(--global--color-white-90);
     693        border-color: var(--global--color-dark-gray);
     694}
     695
     696#buddypress.twentytwentyone .profile.edit .button-tabs li {
     697        border: solid 2px var(--global--color-primary);
     698        overflow: hidden;
     699}
     700
     701#buddypress.twentytwentyone .profile.edit .button-tabs li a {
     702        text-decoration: none;
     703}
     704
     705#buddypress.twentytwentyone .profile.edit .button-tabs li.current {
     706        background-color: var(--global--color-primary);
     707        color: var(--button--color-text);
     708}
     709
     710#buddypress.twentytwentyone .profile.edit .button-tabs li.current a {
     711        color: var(--button--color-text);
     712}
     713
     714#buddypress.twentytwentyone .profile.edit .button-tabs li:hover {
     715        outline-offset: 10px;
     716        border-style: dotted;
     717}
     718
     719#buddypress.twentytwentyone .profile.edit .clear-value {
     720        text-decoration: underline;
     721}
     722
     723#buddypress.twentytwentyone .profile.edit legend {
     724        padding: 0;
     725}
     726
     727#buddypress.twentytwentyone .field-visibility-settings,
     728#buddypress.twentytwentyone .field-visibility-settings-header {
     729        color: var(--global--color-secondary);
     730}
     731
     732#buddypress.twentytwentyone .bp-avatar-nav ul.avatar-nav-items {
     733        border-bottom: 1px solid var(--global--color-primary);
     734}
     735
     736#buddypress.twentytwentyone .bp-avatar-nav ul.avatar-nav-items li.current {
     737        border: 1px solid var(--global--color-primary);
     738        border-bottom: 1px solid var(--global--color-background);
     739}
     740
     741#buddypress.twentytwentyone #drag-drop-area {
     742        border: 4px dashed var(--global--color-secondary);
     743}
     744
     745#buddypress.twentytwentyone #drag-drop-area .drag-drop-info {
     746        color: var(--global--color-secondary);
     747}
     748
     749#buddypress.twentytwentyone .bp-avatar-status .warning,
     750#buddypress.twentytwentyone .bp-avatar-status .success,
     751#buddypress.twentytwentyone .bp-cover-image-status .warning,
     752#buddypress.twentytwentyone .bp-cover-image-status .success {
     753        background-color: var(--global--color-light-gray);
     754        border: none;
     755        border-right-width: 4px;
     756        border-right-style: solid;
     757        color: var(--global--color-dark-gray);
     758}
     759
     760#buddypress.twentytwentyone .bp-avatar-status .warning,
     761#buddypress.twentytwentyone .bp-cover-image-status .warning {
     762        border-right-color: var(--global--color-orange);
     763}
     764
     765#buddypress.twentytwentyone .bp-avatar-status .success,
     766#buddypress.twentytwentyone .bp-cover-image-status .success {
     767        border-right-color: var(--global--color-green);
     768}
     769
     770#buddypress.twentytwentyone .bp-avatar-status .error,
     771#buddypress.twentytwentyone .bp-cover-image-status .error {
     772        border-right-color: var(--global--color-red);
     773}
     774
     775/**
     776*-------------------------------------------
     777* @subsection 5.2.2.3 - Groups
     778*-------------------------------------------
     779*/
     780#buddypress.twentytwentyone #group-list.invites h2.list-title {
     781        float: none;
     782}
     783
     784#buddypress.twentytwentyone #group-list.invites .accept {
     785        margin-right: 0;
     786}
     787
     788/**
     789*-------------------------------------------
     790* @subsection 5.2.2.5 - Private Messaging
     791*-------------------------------------------
     792*/
     793#buddypress.twentytwentyone #user_messages_select_all {
     794        vertical-align: -5px;
     795}
     796
     797#buddypress.twentytwentyone #user_messages_select_all:checked {
     798        vertical-align: -3px;
     799}
     800
     801#buddypress.twentytwentyone #message-threads {
     802        border-top: 1px dotted var(--global--color-primary);
     803}
     804
     805#buddypress.twentytwentyone #message-threads > li {
     806        border-bottom: 1px dotted var(--global--color-primary);
     807}
     808
     809#buddypress.twentytwentyone #message-threads > li.selected {
     810        border: 1px solid var(--global--color-primary);
     811}
     812
     813#buddypress.twentytwentyone #message-threads > li.unread {
     814        border-right: 8px solid var(--global--color-yellow);
     815}
     816
     817#buddypress.twentytwentyone #message-threads li .thread-cb {
     818        padding-right: 15px;
     819}
     820
     821#buddypress.twentytwentyone #message-threads li.unread .thread-cb {
     822        padding-right: 7px;
     823}
     824
     825#buddypress.twentytwentyone #message-threads li .thread-from img.avatar,
     826#buddypress.twentytwentyone #message-threads li .thread-to img.avatar {
     827        width: 32px;
     828        height: 32px;
     829}
     830
     831#buddypress.twentytwentyone #message-threads li .thread-from .num-recipients,
     832#buddypress.twentytwentyone #message-threads li .thread-to .num-recipients {
     833        color: var(--global--color-primary);
     834}
     835
     836#buddypress.twentytwentyone #message-threads li .thread-content .excerpt {
     837        color: var(--global--color-primary);
     838}
     839
     840#buddypress.twentytwentyone #message-threads li .thread-date time {
     841        color: var(--global--color-primary);
     842}
     843
     844#buddypress.twentytwentyone #message-threads li.selected {
     845        background: transparent;
     846        font-weight: bolder;
     847        color: var(--global--color-primary);
     848}
     849
     850#buddypress.twentytwentyone #message-threads li.selected .thread-subject .subject {
     851        color: var(--global--color-primary);
     852}
     853
     854#buddypress.twentytwentyone #message-threads li:not(.selected) {
     855        color: var(--global--color-secondary);
     856}
     857
     858#buddypress.twentytwentyone .bp-messages-content #thread-preview h2:first-child,
     859#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-header h2:first-child {
     860        background-color: var(--button--color-background);
     861        color: var(--button--color-text);
     862}
     863
     864#buddypress.twentytwentyone .bp-messages-content #thread-preview {
     865        border-color: var(--button--color-background);
     866}
     867
     868#buddypress.twentytwentyone .bp-messages-content #thread-preview dd,
     869#buddypress.twentytwentyone .bp-messages-content #thread-preview .participants-list {
     870        padding-right: 0;
     871}
     872
     873#buddypress.twentytwentyone .bp-messages-content #thread-preview .preview-pane-header {
     874        border-bottom-style: dotted;
     875        border-bottom-color: var(--global--color-primary);
     876}
     877
     878#buddypress.twentytwentyone .bp-messages-content #thread-preview .preview-content .preview-message {
     879        background: transparent;
     880}
     881
     882#buddypress.twentytwentyone .bp-messages-content .single-message-thread-header dd,
     883#buddypress.twentytwentyone .bp-messages-content .single-message-thread-header .participants-list {
     884        padding-right: 0;
     885}
     886
     887#buddypress.twentytwentyone .bp-messages-content .actions button.bp-tooltip {
     888        border: none;
     889        background: none;
     890}
     891
     892#buddypress.twentytwentyone .bp-messages-content .actions button.bp-tooltip.message-action-delete:before {
     893        width: 32px;
     894        height: 32px;
     895        color: var(--global--color-primary);
     896        background: var(--global--color-background);
     897}
     898
     899#buddypress.twentytwentyone .bp-messages-content .actions button.bp-tooltip.message-action-delete:hover:before {
     900        border-radius: 50%;
     901        color: var(--global--color-background);
     902        background: var(--global--color-primary);
     903}
     904
     905#buddypress.twentytwentyone .bp-messages-content .actions .message-action-unstar:before,
     906#buddypress.twentytwentyone .bp-messages-content .actions .message-action-star:before {
     907        color: var(--global--color-secondary);
     908}
     909
     910#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li .message-metadata {
     911        background: transparent;
     912        border: 1px solid var(--global--color-primary);
     913        box-shadow: none;
     914}
     915
     916#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li .message-metadata * {
     917        line-height: 1.6;
     918        vertical-align: middle;
     919}
     920
     921#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li .message-metadata .user-link {
     922        margin-top: 3px;
     923        margin-bottom: 3px;
     924}
     925
     926#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li .message-metadata .user-link strong {
     927        display: inline-block;
     928        margin-top: 2px;
     929}
     930
     931#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li .message-metadata .user-link:hover strong {
     932        text-decoration: underline;
     933}
     934
     935#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li .message-metadata time {
     936        color: var(--global--color-secondary);
     937}
     938
     939#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li .message-content {
     940        background: transparent;
     941        margin: 0;
     942        width: 100%;
     943        padding: 1em;
     944}
     945
     946#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li:first-child .message-content {
     947        border: 1px dotted var(--global--color-primary);
     948        border-top: none;
     949}
     950
     951#buddypress.twentytwentyone .bp-messages-content #send-reply .avatar-box img.avatar {
     952        display: inline-block;
     953        vertical-align: -7px;
     954}
     955
     956#buddypress.twentytwentyone .bp-messages-content .wp-editor-container .mce-toolbar button {
     957        color: var(--global--color-dark-gray);
     958        background: var(--global--color-white-90);
     959        border-color: var(--global--color-dark-gray);
     960}
     961
     962#buddypress.twentytwentyone .bp-messages-content #bp-messages-reset {
     963        border-width: 0;
     964        font-size: inherit;
     965}
     966
     967#buddypress.twentytwentyone .bp-messages-content #send-to-input {
     968        width: 100% !important;
     969}
     970
     971#buddypress.twentytwentyone .subnav-filters button#user_messages_search_submit {
     972        padding: 3px 0.7em;
     973        background-color: var(--global--color-background);
     974        color: var(--button--color-text-hover);
     975        border-color: var(--global--color-background);
     976        border-right-color: var(--button--color-background);
     977}
     978
     979#buddypress.twentytwentyone .subnav-filters button#user_messages_search_submit:hover {
     980        background-color: var(--button--color-background);
     981        color: var(--button--color-text);
     982        border-color: var(--button--color-background);
     983}
     984
     985#buddypress.twentytwentyone .subnav-filters .user-messages-bulk-actions .bulk-apply {
     986        line-height: 1.5;
     987        margin: 0 10px 0 0;
     988        padding: 3px 5px;
     989        background-color: var(--global--color-background);
     990        color: var(--button--color-text-hover);
     991}
     992
     993#buddypress.twentytwentyone .subnav-filters .user-messages-bulk-actions .bulk-apply:hover {
     994        background-color: var(--button--color-background);
     995        color: var(--button--color-text);
     996}
     997
     998#buddypress.twentytwentyone .subnav-filters .user-messages-bulk-actions .bulk-apply span {
     999        vertical-align: middle;
     1000}
     1001
     1002/**
     1003*------------------------------------------
     1004* @subsection 5.2.2.6 - Settings
     1005*------------------------------------------
     1006*/
     1007/**
     1008*-------------------------------------------------------------------------------
     1009* @section 6.0 - Forms  - General
     1010*-------------------------------------------------------------------------------
     1011*/
     1012#buddypress.twentytwentyone fieldset {
     1013        padding-top: 0;
     1014        margin-top: 1em;
     1015}
     1016
     1017#buddypress.twentytwentyone fieldset legend {
     1018        padding: 0 1em;
     1019        display: inline-block;
     1020}
     1021
     1022#buddypress.twentytwentyone .select-wrap {
     1023        border: 1px solid var(--global--color-primary);
     1024        background: var(--global--color-white);
     1025}
     1026
     1027#buddypress.twentytwentyone .select-wrap select {
     1028        background: transparent;
     1029        width: 98%;
     1030        text-indent: 0;
     1031}
     1032
     1033#buddypress.twentytwentyone .select-wrap span.select-arrow {
     1034        background: transparent;
     1035}
     1036
     1037#buddypress.twentytwentyone .select-wrap span.select-arrow:before {
     1038        font-family: dashicons;
     1039        content: "\f140";
     1040        color: var(--global--color-black);
     1041        vertical-align: -10%;
     1042}
     1043
     1044#buddypress.twentytwentyone .select-wrap:focus .select-arrow:before, #buddypress.twentytwentyone .select-wrap:hover .select-arrow:before {
     1045        color: var(--global--color-black);
     1046}
     1047
     1048#buddypress.twentytwentyone .wp-pwd:not(.is-open) {
     1049        display: none;
     1050}
     1051
     1052#buddypress.twentytwentyone input[type="checkbox"],
     1053#buddypress.twentytwentyone input[type="radio"] {
     1054        width: 25px;
     1055        height: 25px;
     1056        vertical-align: top;
     1057}
     1058
     1059#buddypress.twentytwentyone textarea,
     1060#buddypress.twentytwentyone input[type="text"],
     1061#buddypress.twentytwentyone input[type="color"],
     1062#buddypress.twentytwentyone input[type="date"],
     1063#buddypress.twentytwentyone input[type="datetime"],
     1064#buddypress.twentytwentyone input[type="datetime-local"],
     1065#buddypress.twentytwentyone input[type="email"],
     1066#buddypress.twentytwentyone input[type="month"],
     1067#buddypress.twentytwentyone input[type="number"],
     1068#buddypress.twentytwentyone input[type="range"],
     1069#buddypress.twentytwentyone input[type="tel"],
     1070#buddypress.twentytwentyone input[type="time"],
     1071#buddypress.twentytwentyone input[type="url"],
     1072#buddypress.twentytwentyone input[type="week"],
     1073#buddypress.twentytwentyone input[type="password"],
     1074#buddypress.twentytwentyone input[type="search"],
     1075#buddypress.twentytwentyone .groups-members-search input[type="text"] {
     1076        color: var(--form--color-text);
     1077        background: var(--global--color-white-90);
     1078}
     1079
     1080#buddypress.twentytwentyone .subnav-filters input[type="search"] {
     1081        font-size: 16px;
     1082}
     1083
     1084#buddypress.twentytwentyone .bp-dir-search-form button,
     1085#buddypress.twentytwentyone form#group-members-search button,
     1086#buddypress.twentytwentyone form#group_invites_search_form button {
     1087        background-color: var(--global--color-background);
     1088        color: var(--button--color-text-hover);
     1089        border-color: var(--global--color-background);
     1090        border-right-color: var(--button--color-background);
     1091}
     1092
     1093#buddypress.twentytwentyone .bp-dir-search-form button:hover,
     1094#buddypress.twentytwentyone form#group-members-search button:hover,
     1095#buddypress.twentytwentyone form#group_invites_search_form button:hover {
     1096        background-color: var(--button--color-background);
     1097        color: var(--button--color-text);
     1098        border-color: var(--button--color-background);
     1099}
     1100
     1101#buddypress.twentytwentyone .standard-form p.description {
     1102        color: var(--global--primary-color);
     1103        background-color: var(--global--color-background);
     1104}
     1105
     1106/**
     1107*----------------------------------------------------------
     1108* @section 6.1 - Directory Search
     1109*
     1110* The Search form & controls in directory pages
     1111*----------------------------------------------------------
     1112*/
     1113.bp-user #buddypress.twentytwentyone [data-bp-search] form #user_messages_search {
     1114        padding: 3px 10px;
     1115}
     1116
     1117#buddypress.twentytwentyone form.bp-dir-search-form,
     1118#buddypress.twentytwentyone form.bp-messages-search-form,
     1119#buddypress.twentytwentyone form[data-bp-search].bp-invites-search-form,
     1120#buddypress.twentytwentyone form#group-members-search {
     1121        border: 1px solid var(--global--color-primary);
     1122        background-color: var(--global--color-white-90);
     1123}
     1124
     1125/**
     1126*-------------------------------------------------------------------------------
     1127* @section 7.0 - Tables - General
     1128*-------------------------------------------------------------------------------
     1129*/
     1130#buddypress.twentytwentyone .bp-tables-user tbody tr,
     1131#buddypress.twentytwentyone .bp-tables-user tbody tr.alt,
     1132#buddypress.twentytwentyone table.wp-profile-fields tbody tr,
     1133#buddypress.twentytwentyone table.wp-profile-fields tbody tr.alt,
     1134#buddypress.twentytwentyone table.forum tbody tr,
     1135#buddypress.twentytwentyone table.forum tbody tr.alt {
     1136        background: transparent;
     1137}
     1138
     1139/**
     1140*-------------------------------------------------------------------------------
     1141* @section 8.0 - Classes - Messages, Ajax, Widgets, Buttons
     1142*-------------------------------------------------------------------------------
     1143*/
     1144#buddypress.twentytwentyone button,
     1145#buddypress.twentytwentyone a.button,
     1146#buddypress.twentytwentyone input[type="submit"],
     1147#buddypress.twentytwentyone input[type="button"],
     1148#buddypress.twentytwentyone ul.button-nav:not(.button-tabs) li a,
     1149#buddypress.twentytwentyone .generic-button a,
     1150#buddypress.twentytwentyone .comment-reply-link,
     1151#buddypress.twentytwentyone a.bp-title-button,
     1152#buddypress.twentytwentyone .activity-read-more a {
     1153        background: var(--button--color-background);
     1154        border: 1px solid var(--button--color-background);
     1155        border-radius: 0;
     1156        color: var(--button--color-text);
     1157}
     1158
     1159#buddypress.twentytwentyone button:hover,
     1160#buddypress.twentytwentyone button:focus,
     1161#buddypress.twentytwentyone a.button:focus,
     1162#buddypress.twentytwentyone a.button:hover,
     1163#buddypress.twentytwentyone input[type="submit"]:focus,
     1164#buddypress.twentytwentyone input[type="submit"]:hover,
     1165#buddypress.twentytwentyone input[type="button"]:focus,
     1166#buddypress.twentytwentyone input[type="button"]:hover,
     1167#buddypress.twentytwentyone input[type="reset"],
     1168#buddypress.twentytwentyone #bp-messages-reset,
     1169#buddypress.twentytwentyone .button-nav li a:focus,
     1170#buddypress.twentytwentyone .button-nav li a:hover,
     1171#buddypress.twentytwentyone .button-nav li.current a,
     1172#buddypress.twentytwentyone .generic-button a:focus,
     1173#buddypress.twentytwentyone .generic-button a:hover,
     1174#buddypress.twentytwentyone .comment-reply-link:focus,
     1175#buddypress.twentytwentyone .comment-reply-link:hover,
     1176#buddypress.twentytwentyone .activity-read-more a:focus,
     1177#buddypress.twentytwentyone .activity-read-more a:hover {
     1178        background: transparent;
     1179        border-color: var(--button--color-background);
     1180        color: var(--button--color-text-hover);
     1181        outline: none;
     1182        text-decoration: none;
     1183}
     1184
     1185#buddypress.twentytwentyone input[type="reset"]:focus,
     1186#buddypress.twentytwentyone input[type="reset"]:hover,
     1187#buddypress.twentytwentyone #bp-messages-reset:focus,
     1188#buddypress.twentytwentyone #bp-messages-reset:hover {
     1189        outline-offset: -1px;
     1190        outline: 2px dotted currentColor;
     1191}
     1192
     1193#buddypress.twentytwentyone input[type="submit"].pending,
     1194#buddypress.twentytwentyone input[type="button"].pending,
     1195#buddypress.twentytwentyone input[type="reset"].pending,
     1196#buddypress.twentytwentyone input[type="button"].disabled,
     1197#buddypress.twentytwentyone input[type="reset"].disabled,
     1198#buddypress.twentytwentyone input[type="submit"][disabled="disabled"],
     1199#buddypress.twentytwentyone input[type="submit"]:disabled,
     1200#buddypress.twentytwentyone input[type="submit"]:hover.pending,
     1201#buddypress.twentytwentyone input[type="button"]:hover.pending,
     1202#buddypress.twentytwentyone input[type="reset"]:hover.pending,
     1203#buddypress.twentytwentyone input[type="submit"]:hover.disabled,
     1204#buddypress.twentytwentyone input[type="button"]:hover.disabled,
     1205#buddypress.twentytwentyone input[type="reset"]:hover.disabled,
     1206#buddypress.twentytwentyone button.pending:hover,
     1207#buddypress.twentytwentyone button.disabled:hover,
     1208#buddypress.twentytwentyone div.pending a:hover,
     1209#buddypress.twentytwentyone a.disabled:hover
     1210button.pending,
     1211#buddypress.twentytwentyone button.disabled,
     1212#buddypress.twentytwentyone div.pending a,
     1213#buddypress.twentytwentyone a.disabled {
     1214        opacity: 0.6;
     1215        cursor: not-allowed;
     1216}
     1217
     1218#buddypress.twentytwentyone .blog-button:after, #buddypress.twentytwentyone .blog-button:before {
     1219        display: none;
     1220}
     1221
     1222#buddypress.twentytwentyone .create-button a:focus,
     1223#buddypress.twentytwentyone .create-button a:hover {
     1224        text-decoration: none;
     1225}
     1226
     1227#buddypress.twentytwentyone.bp-dir-vert-nav .create-button a {
     1228        box-shadow: none;
     1229        color: var(--button--color-text);
     1230        background-color: var(--button--color-background);
     1231        border-radius: var(--button--border-radius);
     1232        border: var(--button--border-width) solid var(--button--color-background);
     1233        background-clip: border-box;
     1234}
     1235
     1236#buddypress.twentytwentyone .warn {
     1237        color: var(--global--color-primary);
     1238        font-weight: 600;
     1239}
     1240
     1241#buddypress.twentytwentyone .bp-feedback {
     1242        color: var(--global--color-primary);
     1243        background: var(--global--color-background);
     1244        box-shadow: none;
     1245}
     1246
     1247#buddypress.twentytwentyone .bp-feedback:not(.custom-homepage-info) {
     1248        margin-top: 1.5em;
     1249        margin-bottom: 1.5em;
     1250        border: solid 1px var(--global--color-primary);
     1251}
     1252
     1253#buddypress.twentytwentyone .bp-feedback .bp-icon {
     1254        background-color: var(--global--color-primary);
     1255        color: var(--button--color-text);
     1256}
     1257
     1258#buddypress.twentytwentyone .bp-feedback a {
     1259        border-bottom: solid 1px var(--global--color-primary);
     1260}
     1261
     1262#buddypress.twentytwentyone .bp-feedback button.bp-tooltip {
     1263        border: none;
     1264        background: none;
     1265        top: -5px;
     1266        left: 0;
     1267}
     1268
     1269#buddypress.twentytwentyone .bp-feedback button.bp-tooltip .dashicons-dismiss {
     1270        border-radius: 50%;
     1271        width: 32px;
     1272        height: 32px;
     1273        color: var(--global--color-primary);
     1274        background: var(--global--color-background);
     1275}
     1276
     1277#buddypress.twentytwentyone .bp-feedback button.bp-tooltip:hover .dashicons-dismiss {
     1278        color: var(--global--color-background);
     1279        background: var(--global--color-primary);
     1280}
     1281
     1282#buddypress.twentytwentyone .bp-feedback.bp-sitewide-notice button.bp-tooltip {
     1283        top: 0;
     1284        left: 15px;
     1285}
     1286
     1287#buddypress.twentytwentyone .bp-feedback.bp-sitewide-notice .bp-icon:before {
     1288        content: "\f16d";
     1289}
     1290
     1291#buddypress.twentytwentyone #group-create-body .bp-cover-image-status p.warning {
     1292        background-color: var(--global--color-light-gray);
     1293        border: none;
     1294        border-right-width: 4px;
     1295        border-right-style: solid;
     1296        border-right-color: var(--global--color-orange);
     1297        color: var(--global--color-dark-gray);
     1298        box-shadow: none;
     1299}
     1300
     1301body.buddypress .site #buddypress.twentytwentyone .button.bp-tooltip:after {
     1302        content: attr(data-bp-tooltip);
     1303        word-wrap: break-word;
     1304        height: auto;
     1305        width: auto;
     1306}
     1307
     1308/**
     1309*-------------------------------------------------------------------------------
     1310* @section 9.0 - Layout classes
     1311*-------------------------------------------------------------------------------
     1312*/
     1313#buddypress.twentytwentyone.bp-single-vert-nav .bp-navs.vertical li span {
     1314        background-color: var(--button--color-background);
     1315        border-radius: 10%;
     1316        display: inline-block;
     1317        margin: 3px 0;
     1318}
     1319
     1320#buddypress.twentytwentyone.bp-single-vert-nav .bp-navs.vertical li.selected span, #buddypress.twentytwentyone.bp-single-vert-nav .bp-navs.vertical li.current span {
     1321        background-color: var(--global--color-background);
     1322}
     1323
     1324#buddypress.twentytwentyone.bp-single-vert-nav .item-body:not(#group-create-body) {
     1325        background: var(--global--color-background);
     1326        border-right: 1px solid var(--global--color-primary);
     1327}
     1328
     1329#buddypress.twentytwentyone.bp-single-vert-nav .item-body:not(#group-create-body) #subnav:not(.tabbed-links) {
     1330        background: transparent;
     1331        border-bottom: 1px solid var(--global--color-primary);
     1332}
     1333
     1334#buddypress.twentytwentyone.bp-single-vert-nav .item-body:not(#group-create-body) #subnav:not(.tabbed-links) li a {
     1335        border: none;
     1336        text-decoration: none;
     1337}
     1338
     1339#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 {
     1340        background-color: var(--global--color-primary);
     1341        margin: 0;
     1342        padding: 10px 0;
     1343        border-radius: 0;
     1344}
     1345
     1346#buddypress.twentytwentyone .grid.bp-list {
     1347        border-top: none;
     1348}
     1349
     1350#buddypress.twentytwentyone .grid > li {
     1351        border: none;
     1352}
     1353
     1354#buddypress.twentytwentyone .grid > li .list-wrap {
     1355        border: 1px dotted var(--global--color-primary);
     1356        background: transparent;
     1357}
     1358
     1359#buddypress.twentytwentyone .grid > li:not(.mini) .item-avatar,
     1360#buddypress.twentytwentyone .grid > li .item-avatar {
     1361        margin-left: auto;
     1362}

  • 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..541041956
    - +  
     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: none;
     498        border-left: 4px solid var(--global--color-primary);
     499}
     500
     501#buddypress.twentytwentyone .groups-header .desc-wrap .group-description {
     502        background: none;
     503        box-shadow: none;
     504}
     505
     506/**
     507*-----------------------------------------------------
     508* @subsection 5.1.2 - Item Header User Accounts
     509*
     510* User Accounts Specific Item Header
     511*-----------------------------------------------------
     512*/
     513/**
     514*-----------------------------------------------------------
     515* @subsection 5.2 - Item Body: Global
     516*-----------------------------------------------------------
     517*/
     518#buddypress.twentytwentyone .item-body h2.screen-heading,
     519#buddypress.twentytwentyone .item-body h2.creation-step-name {
     520        font-size: var(--heading--font-size-h2);
     521        letter-spacing: var(--heading--letter-spacing-h2);
     522}
     523
     524#buddypress.twentytwentyone .item-body h3.screen-heading,
     525#buddypress.twentytwentyone .item-body h3.creation-step-name {
     526        font-size: var(--heading--font-size-h3);
     527        letter-spacing: var(--heading--letter-spacing-h3);
     528}
     529
     530#buddypress.twentytwentyone .item-body h4.screen-heading,
     531#buddypress.twentytwentyone .item-body h4.creation-step-name {
     532        font-size: var(--heading--font-size-h4);
     533        letter-spacing: var(--heading--letter-spacing-h4);
     534}
     535
     536/**
     537*----------------------------------------------------
     538* @subsection 5.2.1 - Item Body Groups
     539*
     540* Groups specific item body rules -  screens
     541*----------------------------------------------------
     542*/
     543/**
     544*-----------------------------------------
     545* @subsection 5.2.1.1 - Management Settings Screens
     546*-----------------------------------------
     547*/
     548.group-settings #buddypress.twentytwentyone .group-settings-selections {
     549        margin-bottom: 1em;
     550}
     551
     552#buddypress.twentytwentyone #group-manage-members-ui .bp-pagination {
     553        padding: 0.4em 0 0.4em 0.5em;
     554}
     555
     556#buddypress.twentytwentyone #group-manage-members-ui #group-members-search-form input[type="search"] {
     557        font-size: 16px;
     558}
     559
     560#buddypress.twentytwentyone #group-manage-members-ui #group-members-search-form input[type="search"]:focus {
     561        outline-offset: -7px;
     562        outline: 2px dotted var(--form--border-color);
     563}
     564
     565#buddypress.twentytwentyone #group-manage-members-ui #group-members-search-form button[type="submit"] {
     566        border-width: 1px;
     567        border-style: solid;
     568        background-clip: border-box;
     569}
     570
     571#buddypress.twentytwentyone #group-manage-members-ui #group-members-search-form button[type="submit"]:hover {
     572        border-color: var(--button--color-background);
     573}
     574
     575#buddypress.twentytwentyone #group-manage-members-ui #group-roles-filter label,
     576#buddypress.twentytwentyone #group-manage-members-ui #group-members-list-table .group-member-edit label {
     577        border: 0;
     578        clip: rect(0 0 0 0);
     579        height: 1px;
     580        margin: -1px;
     581        overflow: hidden;
     582        padding: 0;
     583        position: absolute;
     584        width: 1px;
     585        word-wrap: normal !important;
     586}
     587
     588#buddypress.twentytwentyone #group-manage-members-ui #group-members-role-filter,
     589#buddypress.twentytwentyone #group-manage-members-ui #group-members-list-table .group-member-edit select {
     590        font-size: 16px;
     591        padding: 6px 25px 6px 10px;
     592}
     593
     594#buddypress.twentytwentyone #group-manage-members-ui #group-members-role-filter:focus,
     595#buddypress.twentytwentyone #group-manage-members-ui #group-members-list-table .group-member-edit select:focus {
     596        outline-offset: 2px;
     597        outline: 2px dotted var(--form--border-color);
     598}
     599
     600/**
     601*-----------------------------------------
     602* @subsection 5.2.1.2 - Group Members List
     603*-----------------------------------------
     604*/
     605/*
     606*-----------------------------------------
     607* @subsection 5.2.1.3 - Group Invites List
     608*-----------------------------------------
     609*/
     610#buddypress.twentytwentyone .bp-invites-content ul {
     611        border-top: none;
     612}
     613
     614#buddypress.twentytwentyone .bp-invites-content ul li {
     615        border: 1px dotted var(--global--color-primary);
     616}
     617
     618#buddypress.twentytwentyone .bp-invites-content ul li.selected {
     619        box-shadow: none;
     620        border-style: solid;
     621}
     622
     623#buddypress.twentytwentyone .bp-invites-content ul li button.invite-button {
     624        border: none;
     625        background: none;
     626        top: -5px;
     627        right: 0;
     628}
     629
     630#buddypress.twentytwentyone .bp-invites-content ul li button.invite-button .icons:before {
     631        border-radius: 50%;
     632        width: 32px;
     633        height: 32px;
     634        color: var(--global--color-primary);
     635        background: var(--global--color-background);
     636}
     637
     638#buddypress.twentytwentyone .bp-invites-content ul li button.invite-button:hover .icons:before {
     639        color: var(--global--color-background);
     640        background: var(--global--color-primary);
     641        width: 32px;
     642        height: 32px;
     643}
     644
     645#buddypress.twentytwentyone .bp-invites-content ul li ul.group-inviters li {
     646        border: none;
     647}
     648
     649/*
     650*-----------------------------------------
     651* @subsection 5.2.1.4 - Group Activity
     652*-----------------------------------------
     653*/
     654/**
     655*-----------------------------------------------------
     656* @subsection 5.2.2 - Item Body User Accounts
     657*
     658* User Account specific item body rules
     659*-----------------------------------------------------
     660*/
     661/**
     662*--------------------------------------------
     663* @subsection 5.2.2.1 - classes, pag, filters
     664*--------------------------------------------
     665*/
     666/**
     667*-------------------------------------------
     668* @subsection 5.2.2.2 - Extended Profiles
     669*-------------------------------------------
     670*/
     671#buddypress.twentytwentyone .profile table.profile-fields tr.alt td,
     672#buddypress.twentytwentyone .profile table.profile-fields tr td,
     673#buddypress.twentytwentyone .profile table.bp-tables-user tr.alt td,
     674#buddypress.twentytwentyone .profile table.bp-tables-user tr td {
     675        background: transparent;
     676}
     677
     678#buddypress.twentytwentyone .profile table.profile-fields tr.alt td.label,
     679#buddypress.twentytwentyone .profile table.profile-fields tr td.label,
     680#buddypress.twentytwentyone .profile table.bp-tables-user tr.alt td.label,
     681#buddypress.twentytwentyone .profile table.bp-tables-user tr td.label {
     682        border-right-color: var(--global--color-primary);
     683}
     684
     685#buddypress.twentytwentyone .profile.edit .editfield {
     686        background: var(--global--color-background);
     687        border: 1px solid var(--global--color-primary);
     688}
     689
     690#buddypress.twentytwentyone .profile.edit .wp-editor-container .mce-toolbar button {
     691        color: var(--global--color-dark-gray);
     692        background: var(--global--color-white-90);
     693        border-color: var(--global--color-dark-gray);
     694}
     695
     696#buddypress.twentytwentyone .profile.edit .button-tabs li {
     697        border: solid 2px var(--global--color-primary);
     698        overflow: hidden;
     699}
     700
     701#buddypress.twentytwentyone .profile.edit .button-tabs li a {
     702        text-decoration: none;
     703}
     704
     705#buddypress.twentytwentyone .profile.edit .button-tabs li.current {
     706        background-color: var(--global--color-primary);
     707        color: var(--button--color-text);
     708}
     709
     710#buddypress.twentytwentyone .profile.edit .button-tabs li.current a {
     711        color: var(--button--color-text);
     712}
     713
     714#buddypress.twentytwentyone .profile.edit .button-tabs li:hover {
     715        outline-offset: 10px;
     716        border-style: dotted;
     717}
     718
     719#buddypress.twentytwentyone .profile.edit .clear-value {
     720        text-decoration: underline;
     721}
     722
     723#buddypress.twentytwentyone .profile.edit legend {
     724        padding: 0;
     725}
     726
     727#buddypress.twentytwentyone .field-visibility-settings,
     728#buddypress.twentytwentyone .field-visibility-settings-header {
     729        color: var(--global--color-secondary);
     730}
     731
     732#buddypress.twentytwentyone .bp-avatar-nav ul.avatar-nav-items {
     733        border-bottom: 1px solid var(--global--color-primary);
     734}
     735
     736#buddypress.twentytwentyone .bp-avatar-nav ul.avatar-nav-items li.current {
     737        border: 1px solid var(--global--color-primary);
     738        border-bottom: 1px solid var(--global--color-background);
     739}
     740
     741#buddypress.twentytwentyone #drag-drop-area {
     742        border: 4px dashed var(--global--color-secondary);
     743}
     744
     745#buddypress.twentytwentyone #drag-drop-area .drag-drop-info {
     746        color: var(--global--color-secondary);
     747}
     748
     749#buddypress.twentytwentyone .bp-avatar-status .warning,
     750#buddypress.twentytwentyone .bp-avatar-status .success,
     751#buddypress.twentytwentyone .bp-cover-image-status .warning,
     752#buddypress.twentytwentyone .bp-cover-image-status .success {
     753        background-color: var(--global--color-light-gray);
     754        border: none;
     755        border-left-width: 4px;
     756        border-left-style: solid;
     757        color: var(--global--color-dark-gray);
     758}
     759
     760#buddypress.twentytwentyone .bp-avatar-status .warning,
     761#buddypress.twentytwentyone .bp-cover-image-status .warning {
     762        border-left-color: var(--global--color-orange);
     763}
     764
     765#buddypress.twentytwentyone .bp-avatar-status .success,
     766#buddypress.twentytwentyone .bp-cover-image-status .success {
     767        border-left-color: var(--global--color-green);
     768}
     769
     770#buddypress.twentytwentyone .bp-avatar-status .error,
     771#buddypress.twentytwentyone .bp-cover-image-status .error {
     772        border-left-color: var(--global--color-red);
     773}
     774
     775/**
     776*-------------------------------------------
     777* @subsection 5.2.2.3 - Groups
     778*-------------------------------------------
     779*/
     780#buddypress.twentytwentyone #group-list.invites h2.list-title {
     781        float: none;
     782}
     783
     784#buddypress.twentytwentyone #group-list.invites .accept {
     785        margin-left: 0;
     786}
     787
     788/**
     789*-------------------------------------------
     790* @subsection 5.2.2.5 - Private Messaging
     791*-------------------------------------------
     792*/
     793#buddypress.twentytwentyone #user_messages_select_all {
     794        vertical-align: -5px;
     795}
     796
     797#buddypress.twentytwentyone #user_messages_select_all:checked {
     798        vertical-align: -3px;
     799}
     800
     801#buddypress.twentytwentyone #message-threads {
     802        border-top: 1px dotted var(--global--color-primary);
     803}
     804
     805#buddypress.twentytwentyone #message-threads > li {
     806        border-bottom: 1px dotted var(--global--color-primary);
     807}
     808
     809#buddypress.twentytwentyone #message-threads > li.selected {
     810        border: 1px solid var(--global--color-primary);
     811}
     812
     813#buddypress.twentytwentyone #message-threads > li.unread {
     814        border-left: 8px solid var(--global--color-yellow);
     815}
     816
     817#buddypress.twentytwentyone #message-threads li .thread-cb {
     818        padding-left: 15px;
     819}
     820
     821#buddypress.twentytwentyone #message-threads li.unread .thread-cb {
     822        padding-left: 7px;
     823}
     824
     825#buddypress.twentytwentyone #message-threads li .thread-from img.avatar,
     826#buddypress.twentytwentyone #message-threads li .thread-to img.avatar {
     827        width: 32px;
     828        height: 32px;
     829}
     830
     831#buddypress.twentytwentyone #message-threads li .thread-from .num-recipients,
     832#buddypress.twentytwentyone #message-threads li .thread-to .num-recipients {
     833        color: var(--global--color-primary);
     834}
     835
     836#buddypress.twentytwentyone #message-threads li .thread-content .excerpt {
     837        color: var(--global--color-primary);
     838}
     839
     840#buddypress.twentytwentyone #message-threads li .thread-date time {
     841        color: var(--global--color-primary);
     842}
     843
     844#buddypress.twentytwentyone #message-threads li.selected {
     845        background: transparent;
     846        font-weight: bolder;
     847        color: var(--global--color-primary);
     848}
     849
     850#buddypress.twentytwentyone #message-threads li.selected .thread-subject .subject {
     851        color: var(--global--color-primary);
     852}
     853
     854#buddypress.twentytwentyone #message-threads li:not(.selected) {
     855        color: var(--global--color-secondary);
     856}
     857
     858#buddypress.twentytwentyone .bp-messages-content #thread-preview h2:first-child,
     859#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-header h2:first-child {
     860        background-color: var(--button--color-background);
     861        color: var(--button--color-text);
     862}
     863
     864#buddypress.twentytwentyone .bp-messages-content #thread-preview {
     865        border-color: var(--button--color-background);
     866}
     867
     868#buddypress.twentytwentyone .bp-messages-content #thread-preview dd,
     869#buddypress.twentytwentyone .bp-messages-content #thread-preview .participants-list {
     870        padding-left: 0;
     871}
     872
     873#buddypress.twentytwentyone .bp-messages-content #thread-preview .preview-pane-header {
     874        border-bottom-style: dotted;
     875        border-bottom-color: var(--global--color-primary);
     876}
     877
     878#buddypress.twentytwentyone .bp-messages-content #thread-preview .preview-content .preview-message {
     879        background: transparent;
     880}
     881
     882#buddypress.twentytwentyone .bp-messages-content .single-message-thread-header dd,
     883#buddypress.twentytwentyone .bp-messages-content .single-message-thread-header .participants-list {
     884        padding-left: 0;
     885}
     886
     887#buddypress.twentytwentyone .bp-messages-content .actions button.bp-tooltip {
     888        border: none;
     889        background: none;
     890}
     891
     892#buddypress.twentytwentyone .bp-messages-content .actions button.bp-tooltip.message-action-delete:before {
     893        width: 32px;
     894        height: 32px;
     895        color: var(--global--color-primary);
     896        background: var(--global--color-background);
     897}
     898
     899#buddypress.twentytwentyone .bp-messages-content .actions button.bp-tooltip.message-action-delete:hover:before {
     900        border-radius: 50%;
     901        color: var(--global--color-background);
     902        background: var(--global--color-primary);
     903}
     904
     905#buddypress.twentytwentyone .bp-messages-content .actions .message-action-unstar:before,
     906#buddypress.twentytwentyone .bp-messages-content .actions .message-action-star:before {
     907        color: var(--global--color-secondary);
     908}
     909
     910#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li .message-metadata {
     911        background: transparent;
     912        border: 1px solid var(--global--color-primary);
     913        box-shadow: none;
     914}
     915
     916#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li .message-metadata * {
     917        line-height: 1.6;
     918        vertical-align: middle;
     919}
     920
     921#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li .message-metadata .user-link {
     922        margin-top: 3px;
     923        margin-bottom: 3px;
     924}
     925
     926#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li .message-metadata .user-link strong {
     927        display: inline-block;
     928        margin-top: 2px;
     929}
     930
     931#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li .message-metadata .user-link:hover strong {
     932        text-decoration: underline;
     933}
     934
     935#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li .message-metadata time {
     936        color: var(--global--color-secondary);
     937}
     938
     939#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li .message-content {
     940        background: transparent;
     941        margin: 0;
     942        width: 100%;
     943        padding: 1em;
     944}
     945
     946#buddypress.twentytwentyone .bp-messages-content #bp-message-thread-list li:first-child .message-content {
     947        border: 1px dotted var(--global--color-primary);
     948        border-top: none;
     949}
     950
     951#buddypress.twentytwentyone .bp-messages-content #send-reply .avatar-box img.avatar {
     952        display: inline-block;
     953        vertical-align: -7px;
     954}
     955
     956#buddypress.twentytwentyone .bp-messages-content .wp-editor-container .mce-toolbar button {
     957        color: var(--global--color-dark-gray);
     958        background: var(--global--color-white-90);
     959        border-color: var(--global--color-dark-gray);
     960}
     961
     962#buddypress.twentytwentyone .bp-messages-content #bp-messages-reset {
     963        border-width: 0;
     964        font-size: inherit;
     965}
     966
     967#buddypress.twentytwentyone .bp-messages-content #send-to-input {
     968        width: 100% !important;
     969}
     970
     971#buddypress.twentytwentyone .subnav-filters button#user_messages_search_submit {
     972        padding: 3px 0.7em;
     973        background-color: var(--global--color-background);
     974        color: var(--button--color-text-hover);
     975        border-color: var(--global--color-background);
     976        border-left-color: var(--button--color-background);
     977}
     978
     979#buddypress.twentytwentyone .subnav-filters button#user_messages_search_submit:hover {
     980        background-color: var(--button--color-background);
     981        color: var(--button--color-text);
     982        border-color: var(--button--color-background);
     983}
     984
     985#buddypress.twentytwentyone .subnav-filters .user-messages-bulk-actions .bulk-apply {
     986        line-height: 1.5;
     987        margin: 0 0 0 10px;
     988        padding: 3px 5px;
     989        background-color: var(--global--color-background);
     990        color: var(--button--color-text-hover);
     991}
     992
     993#buddypress.twentytwentyone .subnav-filters .user-messages-bulk-actions .bulk-apply:hover {
     994        background-color: var(--button--color-background);
     995        color: var(--button--color-text);
     996}
     997
     998#buddypress.twentytwentyone .subnav-filters .user-messages-bulk-actions .bulk-apply span {
     999        vertical-align: middle;
     1000}
     1001
     1002/**
     1003*------------------------------------------
     1004* @subsection 5.2.2.6 - Settings
     1005*------------------------------------------
     1006*/
     1007/**
     1008*-------------------------------------------------------------------------------
     1009* @section 6.0 - Forms  - General
     1010*-------------------------------------------------------------------------------
     1011*/
     1012#buddypress.twentytwentyone fieldset {
     1013        padding-top: 0;
     1014        margin-top: 1em;
     1015}
     1016
     1017#buddypress.twentytwentyone fieldset legend {
     1018        padding: 0 1em;
     1019        display: inline-block;
     1020}
     1021
     1022#buddypress.twentytwentyone .select-wrap {
     1023        border: 1px solid var(--global--color-primary);
     1024        background: var(--global--color-white);
     1025}
     1026
     1027#buddypress.twentytwentyone .select-wrap select {
     1028        background: transparent;
     1029        width: 98%;
     1030        text-indent: 0;
     1031}
     1032
     1033#buddypress.twentytwentyone .select-wrap span.select-arrow {
     1034        background: transparent;
     1035}
     1036
     1037#buddypress.twentytwentyone .select-wrap span.select-arrow:before {
     1038        font-family: dashicons;
     1039        content: "\f140";
     1040        color: var(--global--color-black);
     1041        vertical-align: -10%;
     1042}
     1043
     1044#buddypress.twentytwentyone .select-wrap:focus .select-arrow:before, #buddypress.twentytwentyone .select-wrap:hover .select-arrow:before {
     1045        color: var(--global--color-black);
     1046}
     1047
     1048#buddypress.twentytwentyone .wp-pwd:not(.is-open) {
     1049        display: none;
     1050}
     1051
     1052#buddypress.twentytwentyone input[type="checkbox"],
     1053#buddypress.twentytwentyone input[type="radio"] {
     1054        width: 25px;
     1055        height: 25px;
     1056        vertical-align: top;
     1057}
     1058
     1059#buddypress.twentytwentyone textarea,
     1060#buddypress.twentytwentyone input[type="text"],
     1061#buddypress.twentytwentyone input[type="color"],
     1062#buddypress.twentytwentyone input[type="date"],
     1063#buddypress.twentytwentyone input[type="datetime"],
     1064#buddypress.twentytwentyone input[type="datetime-local"],
     1065#buddypress.twentytwentyone input[type="email"],
     1066#buddypress.twentytwentyone input[type="month"],
     1067#buddypress.twentytwentyone input[type="number"],
     1068#buddypress.twentytwentyone input[type="range"],
     1069#buddypress.twentytwentyone input[type="tel"],
     1070#buddypress.twentytwentyone input[type="time"],
     1071#buddypress.twentytwentyone input[type="url"],
     1072#buddypress.twentytwentyone input[type="week"],
     1073#buddypress.twentytwentyone input[type="password"],
     1074#buddypress.twentytwentyone input[type="search"],
     1075#buddypress.twentytwentyone .groups-members-search input[type="text"] {
     1076        color: var(--form--color-text);
     1077        background: var(--global--color-white-90);
     1078}
     1079
     1080#buddypress.twentytwentyone .subnav-filters input[type="search"] {
     1081        font-size: 16px;
     1082}
     1083
     1084#buddypress.twentytwentyone .bp-dir-search-form button,
     1085#buddypress.twentytwentyone form#group-members-search button,
     1086#buddypress.twentytwentyone form#group_invites_search_form button {
     1087        background-color: var(--global--color-background);
     1088        color: var(--button--color-text-hover);
     1089        border-color: var(--global--color-background);
     1090        border-left-color: var(--button--color-background);
     1091}
     1092
     1093#buddypress.twentytwentyone .bp-dir-search-form button:hover,
     1094#buddypress.twentytwentyone form#group-members-search button:hover,
     1095#buddypress.twentytwentyone form#group_invites_search_form button:hover {
     1096        background-color: var(--button--color-background);
     1097        color: var(--button--color-text);
     1098        border-color: var(--button--color-background);
     1099}
     1100
     1101#buddypress.twentytwentyone .standard-form p.description {
     1102        color: var(--global--primary-color);
     1103        background-color: var(--global--color-background);
     1104}
     1105
     1106/**
     1107*----------------------------------------------------------
     1108* @section 6.1 - Directory Search
     1109*
     1110* The Search form & controls in directory pages
     1111*----------------------------------------------------------
     1112*/
     1113.bp-user #buddypress.twentytwentyone [data-bp-search] form #user_messages_search {
     1114        padding: 3px 10px;
     1115}
     1116
     1117#buddypress.twentytwentyone form.bp-dir-search-form,
     1118#buddypress.twentytwentyone form.bp-messages-search-form,
     1119#buddypress.twentytwentyone form[data-bp-search].bp-invites-search-form,
     1120#buddypress.twentytwentyone form#group-members-search {
     1121        border: 1px solid var(--global--color-primary);
     1122        background-color: var(--global--color-white-90);
     1123}
     1124
     1125/**
     1126*-------------------------------------------------------------------------------
     1127* @section 7.0 - Tables - General
     1128*-------------------------------------------------------------------------------
     1129*/
     1130#buddypress.twentytwentyone .bp-tables-user tbody tr,
     1131#buddypress.twentytwentyone .bp-tables-user tbody tr.alt,
     1132#buddypress.twentytwentyone table.wp-profile-fields tbody tr,
     1133#buddypress.twentytwentyone table.wp-profile-fields tbody tr.alt,
     1134#buddypress.twentytwentyone table.forum tbody tr,
     1135#buddypress.twentytwentyone table.forum tbody tr.alt {
     1136        background: transparent;
     1137}
     1138
     1139/**
     1140*-------------------------------------------------------------------------------
     1141* @section 8.0 - Classes - Messages, Ajax, Widgets, Buttons
     1142*-------------------------------------------------------------------------------
     1143*/
     1144#buddypress.twentytwentyone button,
     1145#buddypress.twentytwentyone a.button,
     1146#buddypress.twentytwentyone input[type="submit"],
     1147#buddypress.twentytwentyone input[type="button"],
     1148#buddypress.twentytwentyone ul.button-nav:not(.button-tabs) li a,
     1149#buddypress.twentytwentyone .generic-button a,
     1150#buddypress.twentytwentyone .comment-reply-link,
     1151#buddypress.twentytwentyone a.bp-title-button,
     1152#buddypress.twentytwentyone .activity-read-more a {
     1153        background: var(--button--color-background);
     1154        border: 1px solid var(--button--color-background);
     1155        border-radius: 0;
     1156        color: var(--button--color-text);
     1157}
     1158
     1159#buddypress.twentytwentyone button:hover,
     1160#buddypress.twentytwentyone button:focus,
     1161#buddypress.twentytwentyone a.button:focus,
     1162#buddypress.twentytwentyone a.button:hover,
     1163#buddypress.twentytwentyone input[type="submit"]:focus,
     1164#buddypress.twentytwentyone input[type="submit"]:hover,
     1165#buddypress.twentytwentyone input[type="button"]:focus,
     1166#buddypress.twentytwentyone input[type="button"]:hover,
     1167#buddypress.twentytwentyone input[type="reset"],
     1168#buddypress.twentytwentyone #bp-messages-reset,
     1169#buddypress.twentytwentyone .button-nav li a:focus,
     1170#buddypress.twentytwentyone .button-nav li a:hover,
     1171#buddypress.twentytwentyone .button-nav li.current a,
     1172#buddypress.twentytwentyone .generic-button a:focus,
     1173#buddypress.twentytwentyone .generic-button a:hover,
     1174#buddypress.twentytwentyone .comment-reply-link:focus,
     1175#buddypress.twentytwentyone .comment-reply-link:hover,
     1176#buddypress.twentytwentyone .activity-read-more a:focus,
     1177#buddypress.twentytwentyone .activity-read-more a:hover {
     1178        background: transparent;
     1179        border-color: var(--button--color-background);
     1180        color: var(--button--color-text-hover);
     1181        outline: none;
     1182        text-decoration: none;
     1183}
     1184
     1185#buddypress.twentytwentyone input[type="reset"]:focus,
     1186#buddypress.twentytwentyone input[type="reset"]:hover,
     1187#buddypress.twentytwentyone #bp-messages-reset:focus,
     1188#buddypress.twentytwentyone #bp-messages-reset:hover {
     1189        outline-offset: -1px;
     1190        outline: 2px dotted currentColor;
     1191}
     1192
     1193#buddypress.twentytwentyone input[type="submit"].pending,
     1194#buddypress.twentytwentyone input[type="button"].pending,
     1195#buddypress.twentytwentyone input[type="reset"].pending,
     1196#buddypress.twentytwentyone input[type="button"].disabled,
     1197#buddypress.twentytwentyone input[type="reset"].disabled,
     1198#buddypress.twentytwentyone input[type="submit"][disabled="disabled"],
     1199#buddypress.twentytwentyone input[type="submit"]:disabled,
     1200#buddypress.twentytwentyone input[type="submit"]:hover.pending,
     1201#buddypress.twentytwentyone input[type="button"]:hover.pending,
     1202#buddypress.twentytwentyone input[type="reset"]:hover.pending,
     1203#buddypress.twentytwentyone input[type="submit"]:hover.disabled,
     1204#buddypress.twentytwentyone input[type="button"]:hover.disabled,
     1205#buddypress.twentytwentyone input[type="reset"]:hover.disabled,
     1206#buddypress.twentytwentyone button.pending:hover,
     1207#buddypress.twentytwentyone button.disabled:hover,
     1208#buddypress.twentytwentyone div.pending a:hover,
     1209#buddypress.twentytwentyone a.disabled:hover
     1210button.pending,
     1211#buddypress.twentytwentyone button.disabled,
     1212#buddypress.twentytwentyone div.pending a,
     1213#buddypress.twentytwentyone a.disabled {
     1214        opacity: 0.6;
     1215        cursor: not-allowed;
     1216}
     1217
     1218#buddypress.twentytwentyone .blog-button:after, #buddypress.twentytwentyone .blog-button:before {
     1219        display: none;
     1220}
     1221
     1222#buddypress.twentytwentyone .create-button a:focus,
     1223#buddypress.twentytwentyone .create-button a:hover {
     1224        text-decoration: none;
     1225}
     1226
     1227#buddypress.twentytwentyone.bp-dir-vert-nav .create-button a {
     1228        box-shadow: none;
     1229        color: var(--button--color-text);
     1230        background-color: var(--button--color-background);
     1231        border-radius: var(--button--border-radius);
     1232        border: var(--button--border-width) solid var(--button--color-background);
     1233        background-clip: border-box;
     1234}
     1235
     1236#buddypress.twentytwentyone .warn {
     1237        color: var(--global--color-primary);
     1238        font-weight: 600;
     1239}
     1240
     1241#buddypress.twentytwentyone .bp-feedback {
     1242        color: var(--global--color-primary);
     1243        background: var(--global--color-background);
     1244        box-shadow: none;
     1245}
     1246
     1247#buddypress.twentytwentyone .bp-feedback:not(.custom-homepage-info) {
     1248        margin-top: 1.5em;
     1249        margin-bottom: 1.5em;
     1250        border: solid 1px var(--global--color-primary);
     1251}
     1252
     1253#buddypress.twentytwentyone .bp-feedback .bp-icon {
     1254        background-color: var(--global--color-primary);
     1255        color: var(--button--color-text);
     1256}
     1257
     1258#buddypress.twentytwentyone .bp-feedback a {
     1259        border-bottom: solid 1px var(--global--color-primary);
     1260}
     1261
     1262#buddypress.twentytwentyone .bp-feedback button.bp-tooltip {
     1263        border: none;
     1264        background: none;
     1265        top: -5px;
     1266        right: 0;
     1267}
     1268
     1269#buddypress.twentytwentyone .bp-feedback button.bp-tooltip .dashicons-dismiss {
     1270        border-radius: 50%;
     1271        width: 32px;
     1272        height: 32px;
     1273        color: var(--global--color-primary);
     1274        background: var(--global--color-background);
     1275}
     1276
     1277#buddypress.twentytwentyone .bp-feedback button.bp-tooltip:hover .dashicons-dismiss {
     1278        color: var(--global--color-background);
     1279        background: var(--global--color-primary);
     1280}
     1281
     1282#buddypress.twentytwentyone .bp-feedback.bp-sitewide-notice button.bp-tooltip {
     1283        top: 0;
     1284        right: 15px;
     1285}
     1286
     1287#buddypress.twentytwentyone .bp-feedback.bp-sitewide-notice .bp-icon:before {
     1288        content: "\f16d";
     1289}
     1290
     1291#buddypress.twentytwentyone #group-create-body .bp-cover-image-status p.warning {
     1292        background-color: var(--global--color-light-gray);
     1293        border: none;
     1294        border-left-width: 4px;
     1295        border-left-style: solid;
     1296        border-left-color: var(--global--color-orange);
     1297        color: var(--global--color-dark-gray);
     1298        box-shadow: none;
     1299}
     1300
     1301body.buddypress .site #buddypress.twentytwentyone .button.bp-tooltip:after {
     1302        content: attr(data-bp-tooltip);
     1303        word-wrap: break-word;
     1304        height: auto;
     1305        width: auto;
     1306}
     1307
     1308/**
     1309*-------------------------------------------------------------------------------
     1310* @section 9.0 - Layout classes
     1311*-------------------------------------------------------------------------------
     1312*/
     1313#buddypress.twentytwentyone.bp-single-vert-nav .bp-navs.vertical li span {
     1314        background-color: var(--button--color-background);
     1315        border-radius: 10%;
     1316        display: inline-block;
     1317        margin: 3px 0;
     1318}
     1319
     1320#buddypress.twentytwentyone.bp-single-vert-nav .bp-navs.vertical li.selected span, #buddypress.twentytwentyone.bp-single-vert-nav .bp-navs.vertical li.current span {
     1321        background-color: var(--global--color-background);
     1322}
     1323
     1324#buddypress.twentytwentyone.bp-single-vert-nav .item-body:not(#group-create-body) {
     1325        background: var(--global--color-background);
     1326        border-left: 1px solid var(--global--color-primary);
     1327}
     1328
     1329#buddypress.twentytwentyone.bp-single-vert-nav .item-body:not(#group-create-body) #subnav:not(.tabbed-links) {
     1330        background: transparent;
     1331        border-bottom: 1px solid var(--global--color-primary);
     1332}
     1333
     1334#buddypress.twentytwentyone.bp-single-vert-nav .item-body:not(#group-create-body) #subnav:not(.tabbed-links) li a {
     1335        border: none;
     1336        text-decoration: none;
     1337}
     1338
     1339#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 {
     1340        background-color: var(--global--color-primary);
     1341        margin: 0;
     1342        padding: 10px 0;
     1343        border-radius: 0;
     1344}
     1345
     1346#buddypress.twentytwentyone .grid.bp-list {
     1347        border-top: none;
     1348}
     1349
     1350#buddypress.twentytwentyone .grid > li {
     1351        border: none;
     1352}
     1353
     1354#buddypress.twentytwentyone .grid > li .list-wrap {
     1355        border: 1px dotted var(--global--color-primary);
     1356        background: transparent;
     1357}
     1358
     1359#buddypress.twentytwentyone .grid > li:not(.mini) .item-avatar,
     1360#buddypress.twentytwentyone .grid > li .item-avatar {
     1361        margin-right: auto;
     1362}

  • 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..cc39c3909
    - +  
     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: none;
     693                        border-left: 4px solid var(--global--color-primary);
     694
     695                        .group-description {
     696                                background: none;
     697                                box-shadow: none;
     698                        }
     699                }
     700        }
     701}
     702
     703/**
     704*-----------------------------------------------------
     705* @subsection 5.1.2 - Item Header User Accounts
     706*
     707* User Accounts Specific Item Header
     708*-----------------------------------------------------
     709*/
     710
     711// Nothing specific for the Single User specific header rules so far.
     712
     713/**
     714*-----------------------------------------------------------
     715* @subsection 5.2 - Item Body: Global
     716*-----------------------------------------------------------
     717*/
     718
     719#buddypress.twentytwentyone {
     720
     721        .item-body {
     722
     723                h2.screen-heading,
     724                h2.creation-step-name {
     725                        font-size: var(--heading--font-size-h2);
     726                        letter-spacing: var(--heading--letter-spacing-h2);
     727                }
     728
     729                h3.screen-heading,
     730                h3.creation-step-name {
     731                        font-size: var(--heading--font-size-h3);
     732                        letter-spacing: var(--heading--letter-spacing-h3);
     733                }
     734
     735                h4.screen-heading,
     736                h4.creation-step-name {
     737                        font-size: var(--heading--font-size-h4);
     738                        letter-spacing: var(--heading--letter-spacing-h4);
     739                }
     740        }
     741}
     742
     743/**
     744*----------------------------------------------------
     745* @subsection 5.2.1 - Item Body Groups
     746*
     747* Groups specific item body rules -  screens
     748*----------------------------------------------------
     749*/
     750
     751// Nothing specific for the single screen item-body so far.
     752
     753/**
     754*-----------------------------------------
     755* @subsection 5.2.1.1 - Management Settings Screens
     756*-----------------------------------------
     757*/
     758
     759#buddypress.twentytwentyone {
     760
     761        .group-settings & {
     762
     763                .group-settings-selections {
     764                        margin-bottom: 1em;
     765                }
     766        }
     767
     768        #group-manage-members-ui {
     769
     770                .bp-pagination {
     771                        padding: 0.4em 0 0.4em 0.5em;
     772                }
     773
     774                #group-members-search-form {
     775
     776                        input[type="search"] {
     777                                font-size: 16px;
     778
     779                                &:focus {
     780                                        outline-offset: -7px;
     781                                        outline: 2px dotted var(--form--border-color);
     782                                }
     783                        }
     784
     785                        button[type="submit"] {
     786                                border-width: 1px;
     787                                border-style: solid;
     788                                background-clip: border-box;
     789
     790                                &:hover {
     791                                        border-color: var(--button--color-background);
     792                                }
     793                        }
     794                }
     795
     796                #group-roles-filter,
     797                #group-members-list-table .group-member-edit {
     798
     799                        label {
     800                                border: 0;
     801                                clip: rect(0 0 0 0);
     802                                height: 1px;
     803                                margin: -1px;
     804                                overflow: hidden;
     805                                padding: 0;
     806                                position: absolute;
     807                                width: 1px;
     808                                word-wrap: normal !important;
     809                        }
     810                }
     811
     812                #group-members-role-filter,
     813                #group-members-list-table .group-member-edit select {
     814                        font-size: 16px;
     815                        padding: 6px 25px 6px 10px;
     816
     817                        &:focus {
     818                                outline-offset: 2px;
     819                                outline: 2px dotted var(--form--border-color);
     820                        }
     821                }
     822        }
     823}
     824
     825/**
     826*-----------------------------------------
     827* @subsection 5.2.1.2 - Group Members List
     828*-----------------------------------------
     829*/
     830
     831/*
     832*-----------------------------------------
     833* @subsection 5.2.1.3 - Group Invites List
     834*-----------------------------------------
     835*/
     836
     837#buddypress.twentytwentyone {
     838
     839        .bp-invites-content {
     840
     841                ul {
     842                        border-top: none;
     843
     844                        li {
     845                                border: 1px dotted var(--global--color-primary);
     846
     847                                &.selected {
     848                                        box-shadow: none;
     849                                        border-style: solid;
     850                                }
     851
     852                                button.invite-button {
     853                                        border: none;
     854                                        background: none;
     855                                        top: -5px;
     856                                        right: 0;
     857
     858                                        .icons:before {
     859                                                border-radius: 50%;
     860                                                width: 32px;
     861                                                height: 32px;
     862                                                color: var(--global--color-primary);
     863                                                background: var(--global--color-background);
     864                                        }
     865
     866                                        &:hover {
     867
     868                                                .icons:before {
     869                                                        color: var(--global--color-background);
     870                                                        background: var(--global--color-primary);
     871                                                        width: 32px;
     872                                                        height: 32px;
     873                                                }
     874                                        }
     875                                }
     876
     877                                ul.group-inviters {
     878
     879                                        li {
     880                                                border: none;
     881                                        }
     882                                }
     883                        }
     884                }
     885        }
     886}
     887
     888/*
     889*-----------------------------------------
     890* @subsection 5.2.1.4 - Group Activity
     891*-----------------------------------------
     892*/
     893
     894// Nothing particular for the Group's activity.
     895
     896/**
     897*-----------------------------------------------------
     898* @subsection 5.2.2 - Item Body User Accounts
     899*
     900* User Account specific item body rules
     901*-----------------------------------------------------
     902*/
     903
     904/**
     905*--------------------------------------------
     906* @subsection 5.2.2.1 - classes, pag, filters
     907*--------------------------------------------
     908*/
     909
     910/**
     911*-------------------------------------------
     912* @subsection 5.2.2.2 - Extended Profiles
     913*-------------------------------------------
     914*/
     915
     916#buddypress.twentytwentyone {
     917
     918        .profile {
     919
     920                table.profile-fields,
     921                table.bp-tables-user {
     922
     923                        tr.alt,
     924                        tr {
     925
     926                                td {
     927                                        background: transparent;
     928
     929                                        &.label {
     930                                                border-right-color: var(--global--color-primary);
     931                                        }
     932                                }
     933                        }
     934                }
     935
     936                &.edit {
     937
     938                        .editfield {
     939                                background: var(--global--color-background);
     940                                border: 1px solid var(--global--color-primary);
     941                        }
     942
     943                        .wp-editor-container {
     944
     945                                .mce-toolbar {
     946
     947                                        button {
     948                                                color: var(--global--color-dark-gray);
     949                                                background: var(--global--color-white-90);
     950                                                border-color: var(--global--color-dark-gray);
     951                                        }
     952                                }
     953                        }
     954
     955                        .button-tabs {
     956
     957                                li {
     958                                        border: solid 2px var(--global--color-primary);
     959                                        overflow: hidden;
     960
     961                                        a {
     962                                                text-decoration: none;
     963                                        }
     964
     965                                        &.current {
     966                                                background-color: var(--global--color-primary);
     967                                                color: var(--button--color-text);
     968
     969                                                a {
     970                                                        color: var(--button--color-text);
     971                                                }
     972                                        }
     973
     974                                        &:hover {
     975                                                outline-offset: 10px;
     976                                                border-style: dotted;
     977                                        }
     978                                }
     979                        }
     980
     981                        .clear-value {
     982                                text-decoration: underline;
     983                        }
     984
     985                        legend {
     986                                padding: 0;
     987                        }
     988                }
     989        }
     990
     991        .field-visibility-settings,
     992        .field-visibility-settings-header {
     993                color: var(--global--color-secondary);
     994        }
     995
     996        .bp-avatar-nav {
     997
     998                ul.avatar-nav-items {
     999                        border-bottom: 1px solid var(--global--color-primary);
     1000
     1001                        li {
     1002
     1003                                &.current {
     1004                                        border: 1px solid var(--global--color-primary);
     1005                                        border-bottom: 1px solid var(--global--color-background);
     1006                                }
     1007                        }
     1008                }
     1009        }
     1010
     1011        #drag-drop-area {
     1012                border: 4px dashed var(--global--color-secondary);
     1013
     1014                .drag-drop-info {
     1015                        color: var(--global--color-secondary);
     1016                }
     1017        }
     1018
     1019        .bp-avatar-status,
     1020        .bp-cover-image-status {
     1021
     1022                .warning,
     1023                .success {
     1024                        background-color: var(--global--color-light-gray);
     1025                        border: none;
     1026                        border-left-width: 4px;
     1027                        border-left-style: solid;
     1028                        color: var(--global--color-dark-gray);
     1029                }
     1030
     1031                .warning {
     1032                        border-left-color: var(--global--color-orange);
     1033                }
     1034
     1035                .success {
     1036                        border-left-color: var(--global--color-green);
     1037                }
     1038
     1039                .error {
     1040                        border-left-color: var(--global--color-red);
     1041                }
     1042        }
     1043}
     1044
     1045/**
     1046*-------------------------------------------
     1047* @subsection 5.2.2.3 - Groups
     1048*-------------------------------------------
     1049*/
     1050
     1051#buddypress.twentytwentyone {
     1052
     1053        #group-list {
     1054
     1055                &.invites {
     1056
     1057                        h2.list-title {
     1058                                float: none;
     1059                        }
     1060
     1061                        .accept {
     1062                                margin-left: 0;
     1063                        }
     1064                }
     1065        }
     1066}
     1067
     1068/**
     1069*-------------------------------------------
     1070* @subsection 5.2.2.5 - Private Messaging
     1071*-------------------------------------------
     1072*/
     1073
     1074#buddypress.twentytwentyone {
     1075
     1076        #user_messages_select_all {
     1077                vertical-align: -5px;
     1078        }
     1079
     1080        #user_messages_select_all:checked {
     1081                vertical-align: -3px;
     1082        }
     1083
     1084        #message-threads {
     1085                border-top: 1px dotted var(--global--color-primary);
     1086
     1087                > li {
     1088                        border-bottom: 1px dotted var(--global--color-primary);
     1089
     1090                        &.selected {
     1091                                border: 1px solid var(--global--color-primary);
     1092                        }
     1093
     1094                        &.unread {
     1095                                border-left: 8px solid var(--global--color-yellow);
     1096                        }
     1097                }
     1098
     1099                li {
     1100
     1101                        .thread-cb {
     1102                                padding-left: 15px;
     1103                        }
     1104
     1105                        &.unread {
     1106
     1107                                .thread-cb {
     1108                                        padding-left: 7px;
     1109                                }
     1110                        }
     1111
     1112                        .thread-from,
     1113                        .thread-to {
     1114
     1115                                img.avatar {
     1116                                        width: 32px;
     1117                                        height: 32px;
     1118                                }
     1119
     1120                                .num-recipients {
     1121                                        color: var(--global--color-primary);
     1122                                }
     1123                        }
     1124
     1125                        .thread-content {
     1126
     1127                                .excerpt {
     1128                                        color: var(--global--color-primary);
     1129                                }
     1130                        }
     1131
     1132                        .thread-date {
     1133
     1134                                time {
     1135                                        color: var(--global--color-primary);
     1136                                }
     1137                        }
     1138                }
     1139
     1140                li.selected {
     1141                        background: transparent;
     1142                        font-weight: bolder;
     1143                        color: var(--global--color-primary);
     1144
     1145                        .thread-subject {
     1146
     1147                                .subject {
     1148                                        color: var(--global--color-primary);
     1149                                }
     1150                        }
     1151                }
     1152
     1153                li:not(.selected) {
     1154                        color: var(--global--color-secondary);
     1155                }
     1156        }
     1157
     1158        .bp-messages-content {
     1159
     1160                #thread-preview h2:first-child,
     1161                #bp-message-thread-header h2:first-child {
     1162                        background-color: var(--button--color-background);
     1163                        color: var(--button--color-text);
     1164                }
     1165
     1166                #thread-preview {
     1167                        border-color: var(--button--color-background);
     1168
     1169                        dd,
     1170                        .participants-list {
     1171                                padding-left: 0;
     1172                        }
     1173
     1174                        .preview-pane-header {
     1175                                border-bottom-style: dotted;
     1176                                border-bottom-color: var(--global--color-primary);
     1177                        }
     1178
     1179                        .preview-content {
     1180
     1181                                .preview-message {
     1182                                        background: transparent;
     1183                                }
     1184                        }
     1185                }
     1186
     1187                .single-message-thread-header {
     1188
     1189                        dd,
     1190                        .participants-list {
     1191                                padding-left: 0;
     1192                        }
     1193                }
     1194
     1195                .actions {
     1196
     1197                        button.bp-tooltip {
     1198                                border: none;
     1199                                background: none;
     1200
     1201                                &.message-action-delete {
     1202
     1203                                        &:before {
     1204                                                width: 32px;
     1205                                                height: 32px;
     1206                                                color: var(--global--color-primary);
     1207                                                background: var(--global--color-background);
     1208                                        }
     1209
     1210                                        &:hover {
     1211
     1212                                                &:before {
     1213                                                        border-radius: 50%;
     1214                                                        color: var(--global--color-background);
     1215                                                        background: var(--global--color-primary);
     1216                                                }
     1217                                        }
     1218                                }
     1219                        }
     1220
     1221                        .message-action-unstar:before,
     1222                        .message-action-star:before {
     1223                                color: var(--global--color-secondary);
     1224                        }
     1225                }
     1226
     1227                #bp-message-thread-list {
     1228
     1229                        li {
     1230
     1231                                .message-metadata {
     1232                                        background: transparent;
     1233                                        border: 1px solid var(--global--color-primary);
     1234                                        box-shadow: none;
     1235
     1236                                        * {
     1237                                                line-height: 1.6;
     1238                                                vertical-align: middle;
     1239                                        }
     1240
     1241                                        .user-link {
     1242                                                margin-top: 3px;
     1243                                                margin-bottom: 3px;
     1244
     1245                                                strong {
     1246                                                        display: inline-block;
     1247                                                        margin-top: 2px;
     1248                                                }
     1249
     1250                                                &:hover {
     1251
     1252                                                        strong {
     1253                                                                text-decoration: underline;
     1254                                                        }
     1255                                                }
     1256                                        }
     1257
     1258                                        time {
     1259                                                color: var(--global--color-secondary);
     1260                                        }
     1261                                }
     1262
     1263                                .message-content {
     1264                                        background: transparent;
     1265                                        margin: 0;
     1266                                        width: 100%;
     1267                                        padding: 1em;
     1268                                }
     1269
     1270                                &:first-child {
     1271
     1272                                        .message-content {
     1273                                                border: 1px dotted var(--global--color-primary);
     1274                                                border-top: none;
     1275                                        }
     1276                                }
     1277                        }
     1278                }
     1279
     1280                #send-reply {
     1281
     1282                        .avatar-box {
     1283
     1284                                img.avatar {
     1285                                        display: inline-block;
     1286                                        vertical-align: -7px;
     1287                                }
     1288                        }
     1289                }
     1290
     1291                .wp-editor-container {
     1292
     1293                        .mce-toolbar {
     1294
     1295                                button {
     1296                                        color: var(--global--color-dark-gray);
     1297                                        background: var(--global--color-white-90);
     1298                                        border-color: var(--global--color-dark-gray);
     1299                                }
     1300                        }
     1301                }
     1302
     1303                #bp-messages-reset {
     1304                        border-width: 0;
     1305                        font-size: inherit;
     1306                }
     1307
     1308                #send-to-input {
     1309                        width: 100% !important;
     1310                }
     1311        }
     1312
     1313        .subnav-filters {
     1314
     1315                button#user_messages_search_submit {
     1316                        padding: 3px 0.7em;
     1317
     1318                        background-color: var(--global--color-background);
     1319                        color: var(--button--color-text-hover);
     1320                        border-color: var(--global--color-background);
     1321                        border-left-color: var(--button--color-background);
     1322
     1323                        &:hover {
     1324                                background-color: var(--button--color-background);
     1325                                color: var(--button--color-text);
     1326                                border-color: var(--button--color-background);
     1327                        }
     1328                }
     1329
     1330                .user-messages-bulk-actions {
     1331
     1332                        .bulk-apply {
     1333                                line-height: 1.5;
     1334                                margin: 0 0 0 10px;
     1335                                padding: 3px 5px;
     1336                                background-color: var(--global--color-background);
     1337                                color: var(--button--color-text-hover);
     1338
     1339                                &:hover {
     1340                                        background-color: var(--button--color-background);
     1341                                        color: var(--button--color-text);
     1342                                }
     1343
     1344                                span {
     1345                                        vertical-align: middle;
     1346                                }
     1347                        }
     1348                }
     1349        }
     1350}
     1351
     1352/**
     1353*------------------------------------------
     1354* @subsection 5.2.2.6 - Settings
     1355*------------------------------------------
     1356*/
     1357
     1358// Nothing particular for the settings screens so far.
     1359
     1360/**
     1361*-------------------------------------------------------------------------------
     1362* @section 6.0 - Forms  - General
     1363*-------------------------------------------------------------------------------
     1364*/
     1365
     1366#buddypress.twentytwentyone {
     1367
     1368        fieldset {
     1369                padding-top: 0;
     1370                margin-top: 1em;
     1371
     1372                legend {
     1373                        padding: 0 1em;
     1374                        display: inline-block;
     1375                }
     1376        }
     1377
     1378        .select-wrap {
     1379                border: 1px solid var(--global--color-primary);
     1380                background: var(--global--color-white);
     1381
     1382                select {
     1383                        background: transparent;
     1384                        width: 98%;
     1385                        text-indent: 0;
     1386                }
     1387
     1388                span.select-arrow {
     1389                        background: transparent;
     1390
     1391                        &:before {
     1392                                font-family: dashicons;
     1393                                content: "\f140";
     1394                                color: var(--global--color-black);
     1395                                vertical-align: -10%;
     1396                        }
     1397                }
     1398
     1399                &:focus,
     1400                &:hover {
     1401
     1402                        .select-arrow:before {
     1403                                color: var(--global--color-black);
     1404                        }
     1405                }
     1406        }
     1407
     1408        .wp-pwd {
     1409
     1410                &:not(.is-open) {
     1411                        display: none;
     1412                }
     1413        }
     1414
     1415        input[type="checkbox"],
     1416        input[type="radio"] {
     1417                width: 25px;
     1418                height: 25px;
     1419                vertical-align: top;
     1420        }
     1421
     1422        textarea,
     1423        input[type="text"],
     1424        input[type="color"],
     1425        input[type="date"],
     1426        input[type="datetime"],
     1427        input[type="datetime-local"],
     1428        input[type="email"],
     1429        input[type="month"],
     1430        input[type="number"],
     1431        input[type="range"],
     1432        input[type="tel"],
     1433        input[type="time"],
     1434        input[type="url"],
     1435        input[type="week"],
     1436        input[type="password"],
     1437        input[type="search"],
     1438        .groups-members-search input[type="text"] {
     1439                color: var(--form--color-text);
     1440                background: var(--global--color-white-90);
     1441        }
     1442
     1443        .subnav-filters {
     1444
     1445                input[type="search"] {
     1446                        font-size: 16px;
     1447                }
     1448        }
     1449
     1450        .bp-dir-search-form,
     1451        form#group-members-search,
     1452        form#group_invites_search_form {
     1453
     1454                button {
     1455                        background-color: var(--global--color-background);
     1456                        color: var(--button--color-text-hover);
     1457                        border-color: var(--global--color-background);
     1458                        border-left-color: var(--button--color-background);
     1459
     1460                        &:hover {
     1461                                background-color: var(--button--color-background);
     1462                                color: var(--button--color-text);
     1463                                border-color: var(--button--color-background);
     1464                        }
     1465                }
     1466        }
     1467
     1468        .standard-form {
     1469
     1470                p.description {
     1471                        color: var(--global--primary-color);
     1472                        background-color: var(--global--color-background);
     1473                }
     1474        }
     1475}
     1476
     1477
     1478/**
     1479*----------------------------------------------------------
     1480* @section 6.1 - Directory Search
     1481*
     1482* The Search form & controls in directory pages
     1483*----------------------------------------------------------
     1484*/
     1485
     1486#buddypress.twentytwentyone {
     1487
     1488        .bp-user & {
     1489
     1490                [data-bp-search] {
     1491
     1492                        form {
     1493
     1494                                #user_messages_search {
     1495                                        padding: 3px 10px;
     1496                                }
     1497                        }
     1498                }
     1499        }
     1500
     1501        form.bp-dir-search-form,
     1502        form.bp-messages-search-form,
     1503        form[data-bp-search].bp-invites-search-form,
     1504        form#group-members-search {
     1505                border: 1px solid var(--global--color-primary);
     1506                background-color: var(--global--color-white-90);
     1507        }
     1508}
     1509
     1510/**
     1511*-------------------------------------------------------------------------------
     1512* @section 7.0 - Tables - General
     1513*-------------------------------------------------------------------------------
     1514*/
     1515
     1516#buddypress.twentytwentyone {
     1517
     1518        .bp-tables-user,
     1519        table.wp-profile-fields,
     1520        table.forum {
     1521
     1522                tbody {
     1523
     1524                        tr,
     1525                        tr.alt {
     1526                                background: transparent;
     1527                        }
     1528                }
     1529        }
     1530}
     1531
     1532/**
     1533*-------------------------------------------------------------------------------
     1534* @section 8.0 - Classes - Messages, Ajax, Widgets, Buttons
     1535*-------------------------------------------------------------------------------
     1536*/
     1537
     1538#buddypress.twentytwentyone {
     1539
     1540        button,
     1541        a.button,
     1542        input[type="submit"],
     1543        input[type="button"],
     1544        ul.button-nav:not(.button-tabs) li a,
     1545        .generic-button a,
     1546        .comment-reply-link,
     1547        a.bp-title-button,
     1548        .activity-read-more a {
     1549                background: var(--button--color-background);
     1550                border: 1px solid var(--button--color-background);
     1551                border-radius: 0;
     1552                color: var(--button--color-text);
     1553        }
     1554
     1555        button:hover,
     1556        button:focus,
     1557        a.button:focus,
     1558        a.button:hover,
     1559        input[type="submit"]:focus,
     1560        input[type="submit"]:hover,
     1561        input[type="button"]:focus,
     1562        input[type="button"]:hover,
     1563        input[type="reset"],
     1564        #bp-messages-reset,
     1565        .button-nav li a:focus,
     1566        .button-nav li a:hover,
     1567        .button-nav li.current a,
     1568        .generic-button a:focus,
     1569        .generic-button a:hover,
     1570        .comment-reply-link:focus,
     1571        .comment-reply-link:hover,
     1572        .activity-read-more a:focus,
     1573        .activity-read-more a:hover {
     1574                background: transparent;
     1575                border-color: var(--button--color-background);
     1576                color: var(--button--color-text-hover);
     1577                outline: none;
     1578                text-decoration: none;
     1579        }
     1580
     1581        input[type="reset"]:focus,
     1582        input[type="reset"]:hover,
     1583        #bp-messages-reset:focus,
     1584        #bp-messages-reset:hover {
     1585                outline-offset: -1px;
     1586                outline: 2px dotted currentColor;
     1587        }
     1588
     1589        input[type="submit"].pending,
     1590        input[type="button"].pending,
     1591        input[type="reset"].pending,
     1592        input[type="button"].disabled,
     1593        input[type="reset"].disabled,
     1594        input[type="submit"][disabled="disabled"],
     1595        input[type="submit"]:disabled,
     1596        input[type="submit"]:hover.pending,
     1597        input[type="button"]:hover.pending,
     1598        input[type="reset"]:hover.pending,
     1599        input[type="submit"]:hover.disabled,
     1600        input[type="button"]:hover.disabled,
     1601        input[type="reset"]:hover.disabled,
     1602        button.pending:hover,
     1603        button.disabled:hover,
     1604        div.pending a:hover,
     1605        a.disabled:hover
     1606        button.pending,
     1607        button.disabled,
     1608        div.pending a,
     1609        a.disabled {
     1610                opacity: 0.6;
     1611                cursor: not-allowed;
     1612        }
     1613
     1614        .blog-button {
     1615
     1616                &:after,
     1617                &:before {
     1618                        display: none;
     1619                }
     1620        }
     1621
     1622        .create-button {
     1623
     1624                a:focus,
     1625                a:hover {
     1626                        text-decoration: none;
     1627                }
     1628        }
     1629
     1630        &.bp-dir-vert-nav {
     1631
     1632                .create-button {
     1633
     1634                        a {
     1635                                box-shadow: none;
     1636                                color: var(--button--color-text);
     1637                                background-color: var(--button--color-background);
     1638                                border-radius: var(--button--border-radius);
     1639                                border: var(--button--border-width) solid var(--button--color-background);
     1640                                background-clip: border-box;
     1641                        }
     1642                }
     1643        }
     1644}
     1645
     1646#buddypress.twentytwentyone {
     1647
     1648        .warn {
     1649                color: var(--global--color-primary);
     1650                font-weight: 600;
     1651        }
     1652
     1653        .bp-feedback {
     1654                color: var(--global--color-primary);
     1655                background: var(--global--color-background);
     1656                box-shadow: none;
     1657
     1658                &:not(.custom-homepage-info) {
     1659                        margin-top: 1.5em;
     1660                        margin-bottom: 1.5em;
     1661                        border: solid 1px var(--global--color-primary);
     1662                }
     1663
     1664                .bp-icon {
     1665                        background-color: var(--global--color-primary);
     1666                        color: var(--button--color-text);
     1667                }
     1668
     1669                a {
     1670                        border-bottom: solid 1px var(--global--color-primary);
     1671                }
     1672
     1673                button.bp-tooltip {
     1674                        border: none;
     1675                        background: none;
     1676                        top: -5px;
     1677                        right: 0;
     1678
     1679                        .dashicons-dismiss {
     1680                                border-radius: 50%;
     1681                                width: 32px;
     1682                                height: 32px;
     1683                                color: var(--global--color-primary);
     1684                                background: var(--global--color-background);
     1685                        }
     1686
     1687                        &:hover {
     1688
     1689                                .dashicons-dismiss {
     1690                                        color: var(--global--color-background);
     1691                                        background: var(--global--color-primary);
     1692                                }
     1693                        }
     1694                }
     1695
     1696                &.bp-sitewide-notice {
     1697
     1698                        button.bp-tooltip {
     1699                                top: 0;
     1700                                right: 15px;
     1701                        }
     1702
     1703                        .bp-icon:before {
     1704                                content: "\f16d";
     1705                        }
     1706                }
     1707        }
     1708
     1709        #group-create-body {
     1710
     1711                .bp-cover-image-status {
     1712
     1713                        p.warning {
     1714                                background-color: var(--global--color-light-gray);
     1715                                border: none;
     1716                                border-left-width: 4px;
     1717                                border-left-style: solid;
     1718                                border-left-color: var(--global--color-orange);
     1719                                color: var(--global--color-dark-gray);
     1720                                box-shadow: none;
     1721                        }
     1722                }
     1723        }
     1724}
     1725
     1726body.buddypress {
     1727
     1728        .site {
     1729
     1730                #buddypress.twentytwentyone {
     1731
     1732                        .button {
     1733
     1734                                &.bp-tooltip {
     1735
     1736                                        &:after {
     1737                                                content: attr(data-bp-tooltip);
     1738                                                word-wrap: break-word;
     1739                                                height: auto;
     1740                                                width: auto;
     1741                                        }
     1742                                }
     1743                        }
     1744                }
     1745        }
     1746}
     1747
     1748/**
     1749*-------------------------------------------------------------------------------
     1750* @section 9.0 - Layout classes
     1751*-------------------------------------------------------------------------------
     1752*/
     1753
     1754#buddypress.twentytwentyone {
     1755
     1756        &.bp-single-vert-nav {
     1757
     1758                .bp-navs {
     1759
     1760                        &.vertical {
     1761
     1762                                li {
     1763
     1764                                        span {
     1765                                                background-color: var(--button--color-background);
     1766                                                border-radius: 10%;
     1767                                                display: inline-block;
     1768                                                margin: 3px 0;
     1769                                        }
     1770
     1771                                        &.selected,
     1772                                        &.current {
     1773
     1774                                                span {
     1775                                                        background-color: var(--global--color-background);
     1776                                                }
     1777                                        }
     1778                                }
     1779                        }
     1780                }
     1781
     1782                .item-body:not(#group-create-body) {
     1783                        background: var(--global--color-background);
     1784                        border-left: 1px solid var(--global--color-primary);
     1785
     1786                        #subnav:not(.tabbed-links) {
     1787                                background: transparent;
     1788                                border-bottom: 1px solid var(--global--color-primary);
     1789
     1790                                li {
     1791
     1792                                        a {
     1793                                                border: none;
     1794                                                text-decoration: none;
     1795                                        }
     1796
     1797                                        &.current,
     1798                                        &.selected {
     1799                                                background-color: var(--global--color-primary);
     1800                                                margin: 0;
     1801                                                padding: 10px 0;
     1802                                                border-radius: 0;
     1803                                        }
     1804                                }
     1805                        }
     1806                }
     1807        }
     1808
     1809        .grid {
     1810
     1811                &.bp-list {
     1812                        border-top: none;
     1813                }
     1814
     1815                > li {
     1816                        border: none;
     1817
     1818                        .list-wrap {
     1819                                border: 1px dotted var(--global--color-primary);
     1820                                background: transparent;
     1821                        }
     1822
     1823                        &:not(.mini) .item-avatar,
     1824                        .item-avatar {
     1825                                margin-right: auto;
     1826                        }
     1827                }
     1828        }
     1829}
     1830