Skip to:
Content

BuddyPress.org

Ticket #8103: 8103.patch

File 8103.patch, 148.1 KB (added by imath, 6 years ago)

  • new file src/bp-templates/bp-legacy/css/twentynineteen-rtl.css 

    diff --git src/bp-templates/bp-legacy/css/twentynineteen-rtl.css src/bp-templates/bp-legacy/css/twentynineteen-rtl.css
new file mode 100644
index 000000000..daf30d4f4
    - +  
     1/*------------------------------------------------------------------------------
     2
     3This is the BuddyPress companion stylesheet for
     4the WordPress Twenty Nineteen theme.
     5
     6@version 5.0.0
     7
     8This sheet supports the primary BuddyPress styles in buddypress.css
     9
     10If you are running as a child theme of twentynineteen this stylesheet will be
     11loaded by default. If you want to modify the styles the normal BP Theme Compat
     12hierarchy works and you can copy the file to buddypress/css/ or community/css/
     13in your child themes root & either start over or modify the rulesets.
     14
     15If you do not require the styles you can dequeue them from the themes
     16functions file.
     17
     18Please see this codex article for more information:
     19http://codex.buddypress.org/themes/buddypress-companion-stylesheets/
     20
     21--------------------------------------------------------------------------------
     22>>> TABLE OF CONTENTS:
     23--------------------------------------------------------------------------------
     241.0 Theme Structural Elements & overrides
     252.0 - Navigation - General
     26        2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     27        2.2 - Pagination
     283.0 - Images
     294.0 - BP Lists / Loops Generic
     30        4.1 - Activity Loop
     31                4.1.1 Whats New Activity
     32                4.1.2 - Activity Listing
     33                4.1.3 - Activity Comments
     34        4.2 - Members Loop
     35        4.3 - Groups Loop
     36        4.4 - Blogs Loop
     375.0 - Directories - Members, Groups, Blogs, Forums
     386.0 - Single Item screens: User Account & Single Group Screens
     39        6.1 - Item Headers: Global
     40                6.1.1 - item-header: Groups
     41                6.1.2 - item-header: User Accounts
     42        6.2 - Item Body: Global
     43                6.2.1 - item-body: Groups
     44                        6.2.1.1 - Management settings screens
     45                        6.2.1.2 - Group members list
     46                        6.2.1.3 - Group Send Invites
     47                6.2.2 - item-body: User Accounts
     48                        6.2.2.1 - classes, pag, filters
     49                        6.2.2.2 - Extended Profiles
     50                        6.2.2.3 - Groups
     51                        6.2.2.4 - friends
     52                        6.2.2.5 - Private Messaging Threads
     53                        6.2.2.6 - Settings
     547.0 - Forms  -  General
     558.0 - Tables -  General
     569.0 - Error / Success Messages
     5710.0 - Ajax Loading, Widgets, General classes
     58------------------------------------------------------------------------------*/
     59/**
     60*-------------------------------------------------------------------------------
     61* @section 1.0 - Theme - Structural Elements & overrides
     62*-------------------------------------------------------------------------------
     63*/
     64#buddypress h1,
     65#buddypress h2,
     66#buddypress h3,
     67#buddypress h4,
     68#buddypress h5,
     69#buddypress h6 {
     70        clear: none;
     71}
     72
     73@media screen and (max-width: 1379px) {
     74        body.buddypress .entry .entry-content > * {
     75                float: none;
     76                max-width: none;
     77        }
     78}
     79
     80/**
     81*-------------------------------------------------------------------------------
     82* @section 2.0 - Navigation - General
     83*-------------------------------------------------------------------------------
     84*/
     85/**
     86*----------------------------------------------------------
     87* @section 2.1 - Navs Object Nav / Sub Nav (item-list-tabs)
     88*
     89* The main navigational elements for all BP screens
     90*----------------------------------------------------------
     91*/
     92#buddypress {
     93        /*__ Horizontal menus __*/
     94}
     95
     96#buddypress div.item-list-tabs ul li.selected a {
     97        background: #0073aa;
     98        color: #fff;
     99        opacity: 1;
     100}
     101
     102#buddypress div.item-list-tabs ul {
     103        background-color: #fff;
     104        overflow: hidden;
     105        padding: 5px 0;
     106}
     107
     108#buddypress div.item-list-tabs ul li a {
     109        font-weight: 600;
     110}
     111
     112#buddypress div.item-list-tabs ul li a span {
     113        border-radius: 25%;
     114}
     115
     116#buddypress div.item-list-tabs ul li a:hover {
     117        background: #111;
     118        color: #fff;
     119}
     120
     121#buddypress #object-nav ul {
     122        overflow: hidden;
     123}
     124
     125#buddypress #object-nav ul li {
     126        float: none;
     127}
     128
     129#buddypress #object-nav ul li:not(.selected) a {
     130        opacity: 0.7;
     131}
     132
     133#buddypress #object-nav ul li:not(.selected) a:hover {
     134        opacity: 1;
     135}
     136
     137@media screen and (min-width: 600px) {
     138        #buddypress #object-nav ul li {
     139                float: right;
     140        }
     141}
     142
     143#buddypress div#subnav.item-list-tabs {
     144        margin-top: 0;
     145}
     146
     147#buddypress div#subnav.item-list-tabs ul {
     148        background-color: #fff;
     149        border-bottom: 0;
     150        padding: 0;
     151}
     152
     153#buddypress div#subnav.item-list-tabs ul li.last {
     154        background: #fff;
     155        margin-top: 0;
     156        padding: 5px 0 5px 5px;
     157        width: 100%;
     158}
     159
     160#buddypress div#subnav.item-list-tabs ul li.last select,
     161#buddypress div#subnav.item-list-tabs ul li.last select:focus {
     162        background: transparent;
     163        border: 0;
     164        outline: 0;
     165}
     166
     167#buddypress div#subnav.item-list-tabs ul li.last select,
     168#buddypress div#subnav.item-list-tabs ul li.last label,
     169#buddypress div#subnav.item-list-tabs ul li.last option {
     170        font-size: 0.9em;
     171}
     172
     173#buddypress div#subnav.item-list-tabs ul li.last select {
     174        font-style: italic;
     175}
     176
     177@media screen and (min-width: 600px) {
     178        #buddypress div#subnav.item-list-tabs ul li.last {
     179                text-align: left;
     180        }
     181}
     182
     183#buddypress div.item-list-tabs ul li.selected a,
     184#buddypress div.item-list-tabs ul li.current a {
     185        background: #0073aa;
     186        color: #fff;
     187        opacity: 1;
     188}
     189
     190/*__ Vertical menu User Account / Group single screens __*/
     191@media screen and (min-width: 1168px) {
     192        #buddypress #item-header,
     193        #buddypress #item-body {
     194                background: #fff;
     195        }
     196        #buddypress #object-nav {
     197                border-left: 1px solid #ddd;
     198                float: right;
     199                margin-left: -1px;
     200                width: 200px;
     201        }
     202        #buddypress #object-nav ul {
     203                border-bottom: 0;
     204                padding: 0;
     205        }
     206        #buddypress #object-nav ul li {
     207                float: none;
     208                overflow: hidden;
     209        }
     210        #buddypress #object-nav ul li span {
     211                background: #fff;
     212                border-radius: 10%;
     213                float: left;
     214                margin-left: 2px;
     215        }
     216        #buddypress #item-body {
     217                border-right: 1px solid #ddd;
     218                overflow: hidden;
     219                padding: 0 20px 0 0;
     220                width: auto;
     221        }
     222        #buddypress #item-body #subnav {
     223                margin: 0 -20px 0 0;
     224        }
     225}
     226
     227/**
     228*----------------------------------------------------------
     229* @section 2.2 - Pagination
     230*----------------------------------------------------------
     231*/
     232#buddypress div.pagination {
     233        box-shadow: none;
     234}
     235
     236#buddypress div.pagination .pag-count {
     237        margin-right: 0;
     238}
     239
     240#buddypress div.pagination .pagination-links {
     241        margin-left: 0;
     242}
     243
     244#buddypress div.pagination .pagination-links span,
     245#buddypress div.pagination .pagination-links a {
     246        height: auto;
     247        line-height: 1;
     248        padding: 5px;
     249}
     250
     251#buddypress div.pagination .pagination-links .prev,
     252#buddypress div.pagination .pagination-links .next {
     253        background-color: transparent;
     254        color: inherit;
     255        overflow: visible;
     256        width: auto;
     257}
     258
     259#buddypress div.pagination .pagination-links .prev:before,
     260#buddypress div.pagination .pagination-links .next:before {
     261        display: none;
     262}
     263
     264#buddypress div.pagination .pagination-links .prev {
     265        right: auto;
     266        position: static;
     267}
     268
     269#buddypress div.pagination .pagination-links .next {
     270        position: static;
     271        left: auto;
     272}
     273
     274/**
     275*-------------------------------------------------------------------------------
     276* @section 4.0 - BP Lists / Loops Generic
     277*-------------------------------------------------------------------------------
     278*/
     279#buddypress .item-list .activity-header,
     280#buddypress .item-list .activity-meta {
     281        font-family: NonBreakingSpaceOverride, "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
     282}
     283
     284#buddypress .item-list a.activity-time-since {
     285        color: #717171;
     286}
     287
     288#buddypress ul.item-list li {
     289        overflow: hidden !important;
     290}
     291
     292#buddypress ul.item-list li .item-avatar {
     293        margin-bottom: 10px;
     294        text-align: center;
     295}
     296
     297@media screen and (min-width: 600px) {
     298        #buddypress ul.item-list li .item-avatar {
     299                margin-bottom: 0;
     300        }
     301}
     302
     303#buddypress ul.item-list li .item-avatar a {
     304        border-bottom: 0;
     305}
     306
     307#buddypress ul.item-list li .item-avatar img.avatar {
     308        display: inline-block;
     309        float: none;
     310}
     311
     312@media screen and (min-width: 600px) {
     313        #buddypress ul.item-list li .item-avatar img.avatar {
     314                display: block;
     315                float: right;
     316        }
     317}
     318
     319#buddypress ul.item-list li .item {
     320        margin-right: 70px;
     321}
     322
     323#buddypress ul.item-list li .item .item-title span.update {
     324        display: block;
     325}
     326
     327#buddypress ul.item-list li .item span.activity {
     328        display: block;
     329        font-style: italic;
     330}
     331
     332#buddypress ul.item-list li .item .item-desc {
     333        margin-right: 0;
     334}
     335
     336#buddypress ul.item-list li div.action {
     337        margin-right: 0;
     338}
     339
     340#buddypress ul.item-list li div.action div {
     341        display: inline-block;
     342        margin: 10px 0;
     343        width: 100%;
     344}
     345
     346#buddypress ul.item-list li div.action div a {
     347        display: block;
     348        width: 100%;
     349        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     350        font-size: 0.675em;
     351        background-color: #0073aa;
     352        color: #fff;
     353        border: none;
     354        transition: background 150ms ease-in-out;
     355        border-radius: 5px;
     356        background-clip: padding-box;
     357        font-weight: 600;
     358}
     359
     360#buddypress ul.item-list li div.action div a:hover {
     361        color: #fff;
     362        background-color: #111;
     363        border: none;
     364}
     365
     366@media screen and (min-width: 600px) {
     367        #buddypress ul.item-list li div.action div {
     368                margin: 0 0 10px 10px;
     369                width: auto;
     370        }
     371}
     372
     373#buddypress ul.item-list li div.action .meta {
     374        font-style: italic;
     375}
     376
     377#buddypress ul.item-list li.bp-single-group .meta {
     378        display: block;
     379}
     380
     381/**
     382*----------------------------------------------------------
     383* @section 4.1 - Activity
     384*----------------------------------------------------------
     385*/
     386/**
     387*-----------------------------------------------------
     388* @section 4.1.1 - Activity Whats New
     389*-----------------------------------------------------
     390*/
     391#buddypress form#whats-new-form p.activity-greeting {
     392        line-height: 1.4;
     393}
     394
     395#buddypress form#whats-new-form #whats-new:focus {
     396        border-color: #0073aa;
     397        outline: thin solid rgba(0, 115, 170, 0.15);
     398        outline-offset: -4px;
     399}
     400
     401#buddypress form#whats-new-form #whats-new-submit input {
     402        line-height: 1.2;
     403        outline: none;
     404        padding: 0.76rem 1rem;
     405}
     406
     407@media screen and (max-width: 30em) {
     408        #buddypress form#whats-new-form #whats-new-post-in-box select {
     409                font-size: 0.9em;
     410                max-width: 120px;
     411        }
     412}
     413
     414@media screen and (max-width: 600px) {
     415        #buddypress form#whats-new-form #whats-new-content {
     416                clear: right;
     417                margin: 10px 0 40px;
     418                padding: 10px 0 0;
     419        }
     420        #buddypress form#whats-new-form #whats-new-content #whats-new-submit {
     421                float: none;
     422        }
     423        #buddypress form#whats-new-form #whats-new-content #whats-new-submit input {
     424                width: 100%;
     425        }
     426        #buddypress form#whats-new-form #whats-new-options {
     427                display: flex;
     428                flex-direction: column;
     429        }
     430        #buddypress form#whats-new-form #whats-new-options #whats-new-submit {
     431                order: 2;
     432        }
     433        #buddypress form#whats-new-form #whats-new-options #whats-new-post-in-box {
     434                order: 1;
     435        }
     436}
     437
     438#buddypress form#whats-new-form #whats-new-options[style] #whats-new-post-in-box {
     439        border: 1px solid rgba(153, 153, 153, 0.5);
     440        float: right;
     441        line-height: 1.5;
     442        margin-top: 12px;
     443        padding-right: 0.2em;
     444        width: 100%;
     445}
     446
     447#buddypress form#whats-new-form #whats-new-options[style] #whats-new-post-in-box select {
     448        background: none;
     449        border: 0;
     450        float: left;
     451        margin: 0;
     452        min-height: 1.5em;
     453        outline: 0;
     454        padding-right: 0.4em;
     455}
     456
     457@media screen and (min-width: 30em) {
     458        #buddypress form#whats-new-form #whats-new-options[style] #whats-new-post-in-box {
     459                width: auto;
     460        }
     461        #buddypress form#whats-new-form #whats-new-options[style] #whats-new-submit {
     462                float: left;
     463        }
     464}
     465
     466#buddypress #item-body form#whats-new-form {
     467        margin: 40px 0;
     468}
     469
     470/**
     471*-----------------------------------------------------
     472* @section 4.1.2 - Activity Listing
     473*-----------------------------------------------------
     474*/
     475#buddypress #activity-stream li {
     476        padding: 25px 0 15px;
     477}
     478
     479#buddypress #activity-stream li .activity-avatar {
     480        float: none;
     481        text-align: center;
     482}
     483
     484#buddypress #activity-stream li .activity-avatar a {
     485        display: inline-block;
     486}
     487
     488#buddypress #activity-stream li .activity-avatar a img.avatar {
     489        display: inline-block;
     490        float: none;
     491        height: 50px;
     492        width: 50px;
     493        margin-bottom: 20px;
     494        margin-right: 0;
     495}
     496
     497#buddypress #activity-stream li .activity-content {
     498        margin-right: 0;
     499}
     500
     501#buddypress #activity-stream li .activity-content .activity-header {
     502        font-size: 0.675em;
     503}
     504
     505@media screen and (min-width: 768px) {
     506        #buddypress #activity-stream li .activity-avatar {
     507                float: right;
     508                margin-left: 10px;
     509                text-align: right;
     510        }
     511        #buddypress #activity-stream li .activity-avatar a {
     512                border-bottom: 0;
     513        }
     514        #buddypress #activity-stream li .activity-content {
     515                margin: 0;
     516                overflow: hidden;
     517        }
     518        #buddypress #activity-stream li .activity-content .activity-header {
     519                font-size: 0.9em;
     520        }
     521}
     522
     523#buddypress #activity-stream li.mini .activity-avatar a img.avatar {
     524        height: 30px;
     525        margin-right: 15px;
     526        margin-top: 5px;
     527        width: 30px;
     528}
     529
     530#buddypress #activity-stream li.mini .activity-content .activity-header {
     531        font-size: 0.675em;
     532}
     533
     534@media screen and (min-width: 768px) {
     535        #buddypress #activity-stream li.mini .activity-content .activity-header {
     536                font-size: 0.9em;
     537        }
     538}
     539
     540#buddypress #activity-stream .activity-content {
     541        margin-top: -12px;
     542}
     543
     544#buddypress #activity-stream .activity-content .activity-header {
     545        line-height: inherit;
     546        margin-left: 0;
     547}
     548
     549#buddypress #activity-stream .activity-content .activity-header p {
     550        color: #717171;
     551        padding: 0 0.2em;
     552}
     553
     554#buddypress #activity-stream .activity-content .activity-header img.avatar {
     555        display: inline-block;
     556        vertical-align: text-top;
     557        width: 20px;
     558        height: 20px;
     559}
     560
     561#buddypress #activity-stream .activity-content .activity-meta a {
     562        display: block;
     563        margin: 0 0 5px;
     564}
     565
     566@media screen and (min-width: 600px) {
     567        #buddypress #activity-stream .activity-content .activity-meta a {
     568                display: inline-block;
     569                margin: 0;
     570        }
     571}
     572
     573#buddypress #activity-stream .activity-content .activity-meta a.button {
     574        padding: 8px;
     575        background-color: #fff;
     576        color: #0073aa;
     577}
     578
     579#buddypress #activity-stream .activity-content .activity-meta a.button span {
     580        color: #fff;
     581        background-color: #0073aa;
     582}
     583
     584#buddypress #activity-stream .activity-content .activity-meta a.button:hover {
     585        text-decoration: underline;
     586        color: #005177;
     587}
     588
     589#buddypress #activity-stream .activity-content .activity-meta a.button.bp-secondary-action {
     590        border: none;
     591}
     592
     593#buddypress #activity-stream .activity-content .activity-meta a.button.delete-activity,
     594#buddypress #activity-stream .activity-content .activity-meta a.button.delete-activity-single {
     595        color: #d05656;
     596}
     597
     598#buddypress #activity-stream .activity-content .activity-meta a.button.delete-activity:hover,
     599#buddypress #activity-stream .activity-content .activity-meta a.button.delete-activity-single:hover {
     600        text-decoration: underline;
     601        color: #be3535;
     602}
     603
     604#buddypress #activity-stream .load-more {
     605        background: #f1f1f1;
     606        border: 1px solid transparent;
     607        padding: 10px;
     608}
     609
     610#buddypress #activity-stream .load-more:focus, #buddypress #activity-stream .load-more:hover {
     611        background: #eeeeee;
     612        border: 1px solid rgba(159, 209, 226, 0.3);
     613}
     614
     615#buddypress #activity-stream .load-more:focus a, #buddypress #activity-stream .load-more:hover a {
     616        font-style: italic;
     617}
     618
     619#buddypress #activity-stream .load-more a {
     620        display: block;
     621}
     622
     623/* Single activity view  - activity permalink */
     624.activity-permalink #buddypress {
     625        background: none;
     626}
     627
     628.activity-permalink #buddypress #activity-stream li.activity-item {
     629        padding: 20px 0;
     630}
     631
     632.activity-permalink #buddypress #activity-stream .activity-avatar img.avatar {
     633        width: auto;
     634        height: auto;
     635}
     636
     637.activity-permalink #buddypress #activity-stream li.mini .activity-avatar img.avatar {
     638        width: 65px;
     639        height: 65px;
     640}
     641
     642.activity-permalink #buddypress #activity-stream li.mini .activity-header {
     643        font-size: 0.675em;
     644        margin-bottom: 40px;
     645}
     646
     647@media screen and (min-width: 768px) {
     648        .activity-permalink #buddypress #activity-stream li.mini .activity-header {
     649                font-size: 0.9em;
     650        }
     651}
     652
     653.activity-permalink #buddypress #activity-stream li.mini .activity-header p {
     654        padding: 20px;
     655}
     656
     657/**
     658*-----------------------------------------------------
     659* @section 4.1.3 - Activity Comments
     660*-----------------------------------------------------
     661*/
     662#buddypress #activity-stream .activity-comments {
     663        margin: 10px 0 0;
     664}
     665
     666#buddypress #activity-stream .activity-comments a {
     667        color: #717171;
     668}
     669
     670#buddypress #activity-stream .activity-comments.has-comments {
     671        border-right: 1px solid #eaeaea;
     672}
     673
     674#buddypress #activity-stream .activity-comments .ac-form {
     675        padding: 20px 0 0;
     676}
     677
     678#buddypress #activity-stream .activity-comments > ul {
     679        background: rgba(241, 241, 241, 0.6);
     680        margin: 15px 2px 0 0;
     681}
     682
     683@media screen and (min-width: 600px) {
     684        #buddypress #activity-stream .activity-comments > ul {
     685                margin-right: 70px;
     686        }
     687}
     688
     689#buddypress #activity-stream .activity-comments > ul ul {
     690        margin-right: 1%;
     691        padding-right: 0;
     692}
     693
     694@media screen and (min-width: 30em) {
     695        #buddypress #activity-stream .activity-comments > ul ul {
     696                margin-right: 1%;
     697                padding-right: 1em;
     698        }
     699}
     700
     701#buddypress #activity-stream .activity-comments > ul ul li {
     702        border-right: 1px solid #eaeaea;
     703        border-top: 0;
     704        padding-right: 0.2em;
     705}
     706
     707#buddypress #activity-stream .activity-comments > ul .acomment-meta {
     708        border-bottom: 1px solid #eaeaea;
     709        color: #737373;
     710        font-style: italic;
     711}
     712
     713@media screen and (max-width: 600px) {
     714        #buddypress #activity-stream .activity-comments > ul .acomment-avatar {
     715                display: block;
     716                text-align: center;
     717        }
     718        #buddypress #activity-stream .activity-comments > ul .acomment-avatar a,
     719        #buddypress #activity-stream .activity-comments > ul .acomment-avatar img.avatar {
     720                display: inline;
     721                float: none;
     722        }
     723        #buddypress #activity-stream .activity-comments > ul .acomment-content,
     724        #buddypress #activity-stream .activity-comments > ul .acomment-meta,
     725        #buddypress #activity-stream .activity-comments > ul .acomment-options {
     726                margin: 5px;
     727        }
     728        #buddypress #activity-stream .activity-comments > ul .acomment-content {
     729                padding: 0 10px;
     730        }
     731}
     732
     733#buddypress #activity-stream .activity-comments .ac-reply-avatar {
     734        display: none;
     735}
     736
     737#buddypress #activity-stream .activity-comments .ac-reply-content {
     738        margin-right: 0;
     739        padding-right: 0;
     740}
     741
     742@media screen and (min-width: 600px) {
     743        #buddypress #activity-stream .activity-comments .ac-reply-avatar {
     744                display: block;
     745        }
     746        #buddypress #activity-stream .activity-comments .ac-reply-content {
     747                overflow: hidden;
     748        }
     749}
     750
     751#buddypress #activity-stream .activity-comments .ac-reply-avatar img {
     752        border: none;
     753}
     754
     755#buddypress #activity-stream .activity-comments .ac-form input[type="submit"],
     756#buddypress #activity-stream .activity-comments .ac-form .ac-reply-cancel {
     757        display: inline-block;
     758        font-size: 0.675em;
     759        line-height: 1.2;
     760        padding: 4px 10px;
     761        width: 100px;
     762}
     763
     764#buddypress #activity-stream .activity-comments .ac-form .ac-reply-cancel {
     765        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     766        text-align: center;
     767        vertical-align: bottom;
     768        color: #0073aa;
     769}
     770
     771#buddypress #activity-stream .activity-comments .ac-form .ac-reply-cancel:hover {
     772        color: #005177;
     773        text-decoration: underline;
     774}
     775
     776/**
     777*----------------------------------------------------------
     778* @section 4.2 - Members Loop
     779*----------------------------------------------------------
     780*/
     781/**
     782*-------------------------------------------------------------------------------
     783* @section 6.0 - Single Item screens: User Account & Single Group Screens
     784*-------------------------------------------------------------------------------
     785*/
     786/**
     787*-----------------------------------------------------------
     788* @subsection 6.1 - Item Header Global
     789*-----------------------------------------------------------
     790*/
     791@media screen and (max-width: 768px) {
     792        .bp-user main header.entry-header,
     793        .single-item.groups main header.entry-header {
     794                padding-bottom: 1rem;
     795        }
     796}
     797
     798@media screen and (max-width: 600px) {
     799        .bp-user h1,
     800        .bp-user #item-header-content,
     801        .single-item.groups h1,
     802        .single-item.groups #item-header-content {
     803                text-align: center;
     804        }
     805}
     806
     807.bp-user #buddypress #item-header-content h2:before,
     808.single-item.groups #buddypress #item-header-content h2:before {
     809        display: none;
     810}
     811
     812.bp-user #buddypress #item-header-content #item-buttons .generic-button a,
     813.single-item.groups #buddypress #item-header-content #item-buttons .generic-button a {
     814        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     815        font-size: 0.675em;
     816        background-color: #0073aa;
     817        color: #fff;
     818        border: none;
     819        transition: background 150ms ease-in-out;
     820        border-radius: 5px;
     821        background-clip: padding-box;
     822        font-weight: 600;
     823        padding: 8px;
     824}
     825
     826.bp-user #buddypress #item-header-content #item-buttons .generic-button a:hover,
     827.single-item.groups #buddypress #item-header-content #item-buttons .generic-button a:hover {
     828        color: #fff;
     829        background-color: #111;
     830        border: none;
     831}
     832
     833.bp-user #buddypress #item-header-avatar img.avatar,
     834.single-item.groups #buddypress #item-header-avatar img.avatar {
     835        width: auto;
     836        height: auto;
     837}
     838
     839@media screen and (max-width: 768px) {
     840        .bp-user #buddypress #item-header .generic-button,
     841        .single-item.groups #buddypress #item-header .generic-button {
     842                float: none;
     843                margin: 1.5em 0 0;
     844        }
     845}
     846
     847@media screen and (max-width: 600px) {
     848        .bp-user #buddypress h1,
     849        .single-item.groups #buddypress h1 {
     850                margin-bottom: 0;
     851        }
     852        .bp-user #buddypress #item-header-avatar img.avatar,
     853        .single-item.groups #buddypress #item-header-avatar img.avatar {
     854                margin-left: 0;
     855        }
     856        .bp-user #buddypress #item-header-content,
     857        .single-item.groups #buddypress #item-header-content {
     858                width: 100%;
     859        }
     860}
     861
     862/**
     863*-----------------------------------------------------
     864* @subsection 6.1.1 - item-header Groups
     865*
     866* Group Specific Item Header
     867*-----------------------------------------------------
     868*/
     869@media screen and (max-width: 768px) {
     870        .single-item.groups #buddypress #item-header #item-meta {
     871                margin-bottom: 20px;
     872        }
     873}
     874
     875@media screen and (max-width: 600px) {
     876        .single-item.groups #buddypress div#item-header {
     877                display: flex;
     878                flex-direction: column;
     879        }
     880        .single-item.groups #buddypress div#item-header #item-header-avatar {
     881                order: 1;
     882                text-align: center;
     883        }
     884        .single-item.groups #buddypress div#item-header #item-header-avatar a {
     885                border-bottom: 0;
     886        }
     887        .single-item.groups #buddypress div#item-header #item-header-avatar a img {
     888                display: inline-block;
     889                float: none;
     890        }
     891        .single-item.groups #buddypress div#item-header #item-header-content {
     892                order: 2;
     893        }
     894        .single-item.groups #buddypress div#item-header #item-actions {
     895                order: 3;
     896        }
     897}
     898
     899.single-item.groups #buddypress div#item-header {
     900        padding-bottom: 40px;
     901}
     902
     903.single-item.groups #buddypress div#item-header div#item-actions {
     904        margin: 0;
     905        width: 100%;
     906}
     907
     908@media screen and (min-width: 600px) {
     909        .single-item.groups #buddypress div#item-header div#item-actions {
     910                clear: none;
     911                float: left;
     912                width: 50%;
     913        }
     914}
     915
     916.single-item.groups #buddypress div#item-header div#item-actions h2 {
     917        background: #fff;
     918        color: #111;
     919        font-size: 0.9em;
     920        padding: 0.2em;
     921}
     922
     923@media screen and (min-width: 768px) {
     924        .single-item.groups #buddypress div#item-header div#item-actions h2 {
     925                font-size: 1.125em;
     926        }
     927}
     928
     929@media screen and (min-width: 768px) {
     930        .single-item.groups #buddypress div#item-header #item-header-avatar,
     931        .single-item.groups #buddypress div#item-header #item-header-content {
     932                float: right;
     933        }
     934        .single-item.groups #buddypress div#item-header #item-header-avatar {
     935                width: 21%;
     936        }
     937        .single-item.groups #buddypress div#item-header #item-header-content {
     938                margin-right: 4%;
     939                width: 40%;
     940        }
     941        .single-item.groups #buddypress div#item-header div#item-actions {
     942                float: left;
     943                width: 28%;
     944        }
     945}
     946
     947/**
     948*-----------------------------------------------------
     949* @subsection 6.1.2 - Item Header User Accounts
     950*
     951* User Accounts Specific Item Header
     952*-----------------------------------------------------
     953*/
     954.bp-user #buddypress #item-header {
     955        padding: 20px 0;
     956}
     957
     958.bp-user #buddypress #item-header #item-header-avatar {
     959        text-align: center;
     960        width: 100%;
     961        height: 100%;
     962}
     963
     964.bp-user #buddypress #item-header #item-header-avatar a {
     965        border-bottom: 0;
     966        display: inline-block;
     967        float: none;
     968}
     969
     970@media screen and (min-width: 768px) {
     971        .bp-user #buddypress #item-header #item-header-avatar {
     972                float: right;
     973                width: 20%;
     974        }
     975        .bp-user #buddypress #item-header #item-header-avatar img.avatar,
     976        .bp-user #buddypress #item-header #item-header-avatar a {
     977                float: right;
     978        }
     979        .bp-user #buddypress #item-header #item-header-content {
     980                float: left;
     981                margin-left: 5%;
     982                width: 69%;
     983        }
     984}
     985
     986/**
     987*-----------------------------------------------------------
     988* @subsection 6.2 - Item Body: Global
     989*-----------------------------------------------------------
     990*/
     991#item-body h1,
     992#item-body h2,
     993#item-body h3,
     994#item-body h4,
     995#item-body h5,
     996#item-body h6 {
     997        margin: 1em 0;
     998}
     999
     1000#item-body h1 a,
     1001#item-body h2 a,
     1002#item-body h3 a,
     1003#item-body h4 a,
     1004#item-body h5 a,
     1005#item-body h6 a {
     1006        border-bottom: 0;
     1007}
     1008
     1009/**
     1010*----------------------------------------------------
     1011* @subsection 6.2.1 - Item Body Groups
     1012*
     1013* Groups specific item body rules -  screens
     1014*----------------------------------------------------
     1015*/
     1016/**
     1017*-----------------------------------------
     1018* @subsection 6.2.1.1 - Group Management
     1019*-----------------------------------------
     1020*/
     1021.groups #group-settings-form h3 {
     1022        background: #fff;
     1023        color: #111;
     1024        padding: 0.2em;
     1025}
     1026
     1027.groups #group-settings-form #request-list h4 {
     1028        background: none;
     1029        color: inherit;
     1030}
     1031
     1032.groups.edit-details #group-settings-form label {
     1033        background: #f1f1f1;
     1034        border-top-left-radius: 4px;
     1035        border-top-right-radius: 4px;
     1036        background-clip: padding-box;
     1037        color: #111;
     1038        display: inline-block;
     1039        margin-bottom: 0;
     1040        padding: 0.2em;
     1041        width: 80%;
     1042}
     1043
     1044@media screen and (min-width: 600px) {
     1045        .groups.edit-details #group-settings-form label {
     1046                width: 60%;
     1047        }
     1048}
     1049
     1050.groups.edit-details #group-settings-form textarea + p label {
     1051        background: none;
     1052        color: inherit;
     1053        font-size: 0.9em;
     1054        width: auto;
     1055}
     1056
     1057.groups.group-settings #group-settings-form div.radio label,
     1058.groups.group-settings #create-group-form div.radio label {
     1059        border: 1px solid #eaeaea;
     1060        padding: 0.2em;
     1061}
     1062
     1063.groups.group-settings #group-settings-form div.radio ul,
     1064.groups.group-settings #create-group-form div.radio ul {
     1065        color: #767676;
     1066        font-size: 0.9em;
     1067}
     1068
     1069.groups.group-avatar form > p {
     1070        margin-top: 20px;
     1071}
     1072
     1073.groups.manage-members #group-settings-form .item-list li {
     1074        border-bottom: 1px solid #eaeaea;
     1075}
     1076
     1077.groups.manage-members #group-settings-form .item-list li img,
     1078.groups.manage-members #group-settings-form .item-list li h5 {
     1079        float: right;
     1080}
     1081
     1082.groups.manage-members #group-settings-form .item-list li img > a,
     1083.groups.manage-members #group-settings-form .item-list li h5 > a {
     1084        border-bottom: 0;
     1085}
     1086
     1087.groups.manage-members #group-settings-form .item-list li span.small {
     1088        clear: right;
     1089        display: block;
     1090        float: none;
     1091        margin-top: 10px;
     1092}
     1093
     1094.groups.manage-members #group-settings-form .item-list li span.small a {
     1095        display: inline-block;
     1096        margin: 5px 0;
     1097        width: 100%;
     1098}
     1099
     1100@media screen and (min-width: 600px) {
     1101        .groups.manage-members #group-settings-form .item-list li span.small a {
     1102                width: auto;
     1103        }
     1104}
     1105
     1106.groups.manage-members #group-settings-form .item-list li h5 {
     1107        margin: 0;
     1108}
     1109
     1110.groups.manage-members #group-settings-form .item-list li div.action {
     1111        position: relative;
     1112        top: auto;
     1113        left: auto;
     1114}
     1115
     1116/**
     1117*-----------------------------------------
     1118* @subsection 6.2.1.2 - Group members
     1119*-----------------------------------------
     1120*/
     1121/* Members loop */
     1122@media screen and (max-width: 30em) {
     1123        .groups.group-members #buddypress #members-group-list li > a {
     1124                border-bottom: 0;
     1125                display: block;
     1126                margin-bottom: 10px;
     1127                text-align: center;
     1128        }
     1129        .groups.group-members #buddypress #members-group-list li > a img.avatar {
     1130                display: inline;
     1131                float: none;
     1132        }
     1133}
     1134
     1135.groups.group-members #buddypress #members-group-list li h5 {
     1136        display: inline-block;
     1137        font-size: 0.9em;
     1138        margin: 0;
     1139}
     1140
     1141.groups.group-members #buddypress #members-group-list li h5 a {
     1142        border-bottom: 0;
     1143}
     1144
     1145.groups.group-members #buddypress #members-group-list li span.activity {
     1146        font-size: 0.5625em;
     1147}
     1148
     1149.groups.group-members #buddypress #members-group-list li .action {
     1150        top: 0;
     1151}
     1152
     1153.groups.group-members #subnav li {
     1154        width: 100%;
     1155}
     1156
     1157@media screen and (max-width: 600px) {
     1158        .groups.group-members #subnav li {
     1159                background: #fff;
     1160                padding: 20px 0;
     1161        }
     1162}
     1163
     1164.groups.group-members #subnav li #search-members-form {
     1165        float: left;
     1166        margin: 5px 0 0 5px;
     1167}
     1168
     1169@media screen and (max-width: 600px) {
     1170        .groups.group-members #subnav li #search-members-form {
     1171                margin: 0;
     1172                width: 100%;
     1173        }
     1174        .groups.group-members #subnav li #search-members-form label input[type="text"] {
     1175                width: 100%;
     1176        }
     1177}
     1178
     1179/**
     1180*-----------------------------------------
     1181* @subsection 6.2.1.3 - Group Send Invites
     1182*-----------------------------------------
     1183*/
     1184.groups.group-invites #item-body .item-list .action {
     1185        margin-bottom: 0;
     1186}
     1187
     1188@media screen and (min-width: 768px) {
     1189        .groups.group-invites #buddypress #item-body #message {
     1190                margin-top: 0;
     1191        }
     1192}
     1193
     1194@media screen and (min-width: 55em) {
     1195        .groups.group-invites #buddypress #send-invite-form {
     1196                margin-top: 0;
     1197        }
     1198}
     1199
     1200@media screen and (max-width: 768px) {
     1201        .groups.group-invites #item-body .left-menu {
     1202                float: none;
     1203                margin: 10px 0;
     1204        }
     1205        .groups.group-invites #item-body .left-menu #invite-list {
     1206                height: auto;
     1207                width: auto;
     1208        }
     1209        .groups.group-invites #item-body .main-column {
     1210                margin-right: 0;
     1211        }
     1212        .groups.group-invites #item-body .submit input {
     1213                display: inline-block;
     1214                width: 100%;
     1215        }
     1216}
     1217
     1218/**
     1219*-----------------------------------------------------
     1220* @subsection 6.2.2 - Item Body User Accounts
     1221*
     1222* User Account specific item body rules
     1223*-----------------------------------------------------
     1224*/
     1225.bp-user .entry-title {
     1226        margin-bottom: 0.5em;
     1227}
     1228
     1229/**
     1230*--------------------------------------------
     1231* @subsection 6.2.2.1 - classes, pag, filters
     1232*--------------------------------------------
     1233*/
     1234.bp-user #buddypress table th {
     1235        font-size: 0.9em;
     1236}
     1237
     1238.bp-user #buddypress table td {
     1239        font-size: 0.5625em;
     1240}
     1241
     1242@media screen and (min-width: 768px) {
     1243        .bp-user #buddypress table th {
     1244                font-size: 1.125em;
     1245        }
     1246        .bp-user #buddypress table td {
     1247                font-size: 0.9em;
     1248        }
     1249}
     1250
     1251@media screen and (min-width: 1168px) {
     1252        .bp-user #buddypress table th {
     1253                font-size: 1.35em;
     1254        }
     1255        .bp-user #buddypress table td {
     1256                font-size: 1.125em;
     1257        }
     1258}
     1259
     1260.bp-user #buddypress .pag-count {
     1261        font-style: italic;
     1262}
     1263
     1264.bp-user #buddypress .notifications-options-nav,
     1265.bp-user #buddypress .messages-options-nav {
     1266        float: right;
     1267        width: 100%;
     1268}
     1269
     1270@media screen and (min-width: 30em) {
     1271        .bp-user #buddypress .notifications-options-nav,
     1272        .bp-user #buddypress .messages-options-nav {
     1273                width: 50%;
     1274        }
     1275}
     1276
     1277.bp-user #buddypress .notifications-options-nav select,
     1278.bp-user #buddypress .notifications-options-nav input,
     1279.bp-user #buddypress .messages-options-nav select,
     1280.bp-user #buddypress .messages-options-nav input {
     1281        font-size: 0.9em;
     1282        outline: 0;
     1283        padding: 0;
     1284}
     1285
     1286.bp-user #buddypress .notifications-options-nav select,
     1287.bp-user #buddypress .messages-options-nav select {
     1288        float: right;
     1289        margin-left: 0;
     1290        width: 100%;
     1291}
     1292
     1293@media screen and (min-width: 30em) {
     1294        .bp-user #buddypress .notifications-options-nav select,
     1295        .bp-user #buddypress .messages-options-nav select {
     1296                width: 60%;
     1297        }
     1298}
     1299
     1300.bp-user #buddypress .notifications-options-nav input,
     1301.bp-user #buddypress .messages-options-nav input {
     1302        float: left;
     1303        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     1304        line-height: 1.5;
     1305        margin-top: 10px;
     1306        width: 100%;
     1307}
     1308
     1309.bp-user #buddypress .notifications-options-nav input[disabled]:hover,
     1310.bp-user #buddypress .messages-options-nav input[disabled]:hover {
     1311        background: none;
     1312}
     1313
     1314@media screen and (min-width: 30em) {
     1315        .bp-user #buddypress .notifications-options-nav input,
     1316        .bp-user #buddypress .messages-options-nav input {
     1317                margin-top: 0;
     1318                width: 38%;
     1319        }
     1320}
     1321
     1322/**
     1323        *-------------------------------------------
     1324        * @subsection 6.2.2.2 - Extended Profiles
     1325        *-------------------------------------------
     1326        */
     1327.bp-user #buddypress .profile h2 {
     1328        margin-bottom: 1em;
     1329}
     1330
     1331.bp-user #buddypress .profile .bp-widget h2 {
     1332        font-size: 1.35em;
     1333        background: #e6e5e5;
     1334        color: #111;
     1335        margin-bottom: 0;
     1336        padding: 0.4em;
     1337}
     1338
     1339.bp-user #buddypress .profile .bp-widget h2:before {
     1340        display: none;
     1341}
     1342
     1343.bp-user #buddypress .profile .bp-widget table {
     1344        margin-top: 0;
     1345}
     1346
     1347/* Edit Profile */
     1348.bp-user #buddypress .profile #profile-edit-form .button-nav:before,
     1349.bp-user #buddypress .profile #profile-edit-form .button-nav:after {
     1350        content: " ";
     1351        display: table;
     1352}
     1353
     1354.bp-user #buddypress .profile #profile-edit-form .button-nav:after {
     1355        clear: both;
     1356}
     1357
     1358.bp-user #buddypress .profile #profile-edit-form ul.button-nav {
     1359        border-bottom: 1px solid #eaeaea;
     1360        margin-right: 0;
     1361}
     1362
     1363.bp-user #buddypress .profile #profile-edit-form ul.button-nav li {
     1364        float: right;
     1365        margin-bottom: 0;
     1366}
     1367
     1368.bp-user #buddypress .profile #profile-edit-form ul.button-nav li.current {
     1369        border: 1px solid #eaeaea;
     1370        border-bottom-color: #fff;
     1371        margin-bottom: -1px;
     1372}
     1373
     1374.bp-user #buddypress .profile #profile-edit-form ul.button-nav a {
     1375        background: none;
     1376        border: 0;
     1377        font-size: 1.35em;
     1378}
     1379
     1380.bp-user #buddypress .profile #profile-edit-form .field-visibility-settings-toggle,
     1381.bp-user #buddypress .profile #profile-edit-form .field-visibility-settings {
     1382        font-size: 0.9em;
     1383}
     1384
     1385.bp-user #buddypress .profile #profile-edit-form .field-visibility-settings-close,
     1386.bp-user #buddypress .profile #profile-edit-form .visibility-toggle-link {
     1387        background: #f1f1f1;
     1388        color: #111;
     1389        padding: 0.2em 0.5em;
     1390}
     1391
     1392.bp-user #buddypress .profile .bp-avatar #bp-delete-avatar a {
     1393        font-size: inherit;
     1394}
     1395
     1396/**
     1397        *-------------------------------------------
     1398        * @subsection 6.2.2.3 - Groups
     1399        *-------------------------------------------
     1400        */
     1401@media screen and (min-width: 1168px) {
     1402        .bp-user #buddypress #groups-list li .item {
     1403                right: 5%;
     1404                width: 50%;
     1405        }
     1406}
     1407
     1408/**
     1409        *-------------------------------------------
     1410        * @subsection 6.2.2.5 - Private Messaging
     1411        *-------------------------------------------
     1412        */
     1413.bp-user #buddypress .message-action-unstar span.icon:before {
     1414        color: #0073aa;
     1415}
     1416
     1417.bp-user #buddypress #message-thread a {
     1418        border-bottom: 0;
     1419}
     1420
     1421.bp-user #buddypress #message-thread #message-subject {
     1422        background: #fff;
     1423        color: #111;
     1424        padding: 0.3em 0.2em 0.3em 0;
     1425}
     1426
     1427.bp-user #buddypress #message-thread #message-recipients {
     1428        font-style: italic;
     1429}
     1430
     1431.bp-user #buddypress #message-thread #message-recipients a.confirm {
     1432        border: 1px solid #eaeaea;
     1433        font-style: normal;
     1434}
     1435
     1436.bp-user #buddypress #message-thread .message-metadata:after {
     1437        clear: both;
     1438        content: "";
     1439        display: table;
     1440}
     1441
     1442.bp-user #buddypress #message-thread .message-metadata img.avatar {
     1443        float: none;
     1444}
     1445
     1446@media screen and (min-width: 768px) {
     1447        .bp-user #buddypress #message-thread .message-metadata img.avatar {
     1448                float: right;
     1449        }
     1450}
     1451
     1452.bp-user #buddypress #message-thread .message-metadata .message-star-actions {
     1453        float: left;
     1454        margin-left: 5px;
     1455        position: static;
     1456}
     1457
     1458.bp-user #buddypress #message-thread .message-content {
     1459        background: #f1f1f1;
     1460        border: 1px solid #eaeaea;
     1461        margin: 10px 0 0 0;
     1462        padding: 0.3em;
     1463}
     1464
     1465.bp-user #buddypress #message-thread #send-reply .message-content {
     1466        background: #fff;
     1467        border: 0;
     1468}
     1469
     1470.bp-user #buddypress #message-thread .alt {
     1471        background: #fff;
     1472}
     1473
     1474.bp-user #buddypress #message-threads thead tr {
     1475        background: #e6e5e5;
     1476}
     1477
     1478.bp-user #buddypress #message-threads thead th.bulk-select-all {
     1479        position: relative;
     1480        border: none;
     1481        padding-top: 0;
     1482}
     1483
     1484.bp-user #buddypress #message-threads thead th.bulk-select-all label {
     1485        clip: auto;
     1486        overflow: visible;
     1487        display: block;
     1488        word-break: keep-all;
     1489        right: 30px;
     1490        top: 15px;
     1491        white-space: nowrap;
     1492        font-size: 0.5625em;
     1493}
     1494
     1495.bp-user #buddypress #message-threads tr {
     1496        border: solid 1px #b7b7b7;
     1497}
     1498
     1499.bp-user #buddypress #message-threads tr td {
     1500        background: #fff;
     1501        display: inline-block;
     1502        float: none;
     1503        border: none;
     1504}
     1505
     1506.bp-user #buddypress #message-threads tr td.thread-star,
     1507.bp-user #buddypress #message-threads tr td.thread-options {
     1508        height: 2.4em;
     1509        padding-bottom: 0.2em;
     1510        padding-top: 0.2em;
     1511}
     1512
     1513@media screen and (max-width: 768px) {
     1514        .bp-user #buddypress #message-threads tr td.thread-star,
     1515        .bp-user #buddypress #message-threads tr td.thread-options {
     1516                padding-top: 0;
     1517        }
     1518}
     1519
     1520.bp-user #buddypress #message-threads tr td.bulk-select-check,
     1521.bp-user #buddypress #message-threads tr td.thread-from {
     1522        height: 2.6em;
     1523}
     1524
     1525.bp-user #buddypress #message-threads tr td.bulk-select-check img.avatar,
     1526.bp-user #buddypress #message-threads tr td.thread-from img.avatar {
     1527        display: inline-block;
     1528        width: auto;
     1529        height: auto;
     1530        vertical-align: text-top;
     1531}
     1532
     1533@media screen and (max-width: 600px) {
     1534        .bp-user #buddypress #message-threads tr td.bulk-select-check,
     1535        .bp-user #buddypress #message-threads tr td.thread-from {
     1536                height: 5.2em;
     1537        }
     1538}
     1539
     1540.bp-user #buddypress #message-threads tr td.thread-from,
     1541.bp-user #buddypress #message-threads tr td.thread-options {
     1542        border-right: 0 !important;
     1543        width: calc(100% - 30px);
     1544        margin-right: 0;
     1545}
     1546
     1547.bp-user #buddypress #message-threads tr td.thread-info {
     1548        padding-right: 41px;
     1549        width: 100%;
     1550}
     1551
     1552.bp-user #buddypress #message-threads tr td.thread-options {
     1553        text-align: left;
     1554}
     1555
     1556.bp-user #buddypress #message-threads tr td.thread-options a {
     1557        font-size: 0.5625em;
     1558        line-height: 2.2;
     1559}
     1560
     1561.bp-user #buddypress #message-threads tr span.from {
     1562        display: none;
     1563}
     1564
     1565.bp-user #buddypress #message-threads tr span.activity {
     1566        display: block;
     1567        float: left;
     1568        line-height: 2;
     1569}
     1570
     1571@media screen and (max-width: 600px) {
     1572        .bp-user #buddypress #message-threads tr span.activity {
     1573                clear: both;
     1574                font-size: 0.45em;
     1575                width: 100%;
     1576        }
     1577}
     1578
     1579.bp-user #buddypress #message-threads tr.unread td {
     1580        background: #dce5ff;
     1581        border: none;
     1582}
     1583
     1584.bp-user #buddypress #message-threads th {
     1585        display: none;
     1586}
     1587
     1588.bp-user #buddypress #message-threads th.bulk-select-all {
     1589        border-bottom: 0;
     1590        display: inline-block;
     1591        text-align: right;
     1592}
     1593
     1594.bp-user #buddypress #message-threads th.bulk-select-all,
     1595.bp-user #buddypress #message-threads td.bulk-select-check,
     1596.bp-user #buddypress #message-threads td.thread-star {
     1597        border-left: 0;
     1598        width: 30px;
     1599}
     1600
     1601.bp-user #buddypress .acfb-holder {
     1602        list-style: none;
     1603}
     1604
     1605.bp-user #buddypress .acfb-holder li {
     1606        margin-right: 0;
     1607}
     1608
     1609.bp-user #buddypress .acfb-holder li.friend-tab {
     1610        background: #edf7fa;
     1611        border: inherit;
     1612        margin-left: 0;
     1613        padding: 0.5em;
     1614}
     1615
     1616.bp-user #buddypress .acfb-holder li.friend-tab span.p {
     1617        padding-right: 10px;
     1618}
     1619
     1620.bp-user #buddypress .acfb-holder li.friend-tab span.p:focus, .bp-user #buddypress .acfb-holder li.friend-tab span.p:hover {
     1621        color: #c82b2b;
     1622        cursor: pointer;
     1623}
     1624
     1625.bp-user #buddypress .acfb-holder li.friend-tab a {
     1626        border-bottom: 0;
     1627        text-decoration: none;
     1628}
     1629
     1630.bp-user #buddypress .acfb-holder li.friend-tab a img {
     1631        display: inline-block;
     1632        height: 20px;
     1633        vertical-align: middle;
     1634        width: 20px !important;
     1635}
     1636
     1637.bp-user #buddypress #message-threads.sitewide-notices td {
     1638        width: 100%;
     1639}
     1640
     1641.bp-user #buddypress #message-threads.sitewide-notices td strong {
     1642        background: #e6e5e5;
     1643        color: #111;
     1644        display: block;
     1645        margin-bottom: 0.4em;
     1646        padding-right: 0.2em;
     1647}
     1648
     1649.bp-user #buddypress #message-threads.sitewide-notices td a {
     1650        display: inline-block;
     1651}
     1652
     1653.bp-user #buddypress #message-threads.sitewide-notices td:first-child {
     1654        display: none;
     1655}
     1656
     1657.bp-user #buddypress #message-threads.sitewide-notices td:first-child + td + td {
     1658        border-bottom: 0;
     1659}
     1660
     1661.bp-user #buddypress #message-threads.sitewide-notices td:first-child + td + td span {
     1662        line-height: 1;
     1663}
     1664
     1665.bp-user #buddypress #message-threads.sitewide-notices td:last-child {
     1666        border-bottom-color: #b7b7b7;
     1667        line-height: 1;
     1668        text-align: left;
     1669}
     1670
     1671.bp-user #buddypress #message-threads.sitewide-notices td:last-child a:last-child:after {
     1672        content: attr(title);
     1673        display: block;
     1674        line-height: initial;
     1675        text-indent: 0;
     1676}
     1677
     1678.bp-user .ac_results {
     1679        background: #eee;
     1680        padding-right: 10px;
     1681}
     1682
     1683.bp-user .ac_results ul {
     1684        margin: 0;
     1685}
     1686
     1687.bp-user .ac_results li {
     1688        margin: 10px 0;
     1689}
     1690
     1691.bp-user .ac_results li:focus, .bp-user .ac_results li:hover {
     1692        cursor: pointer;
     1693}
     1694
     1695/**
     1696        *------------------------------
     1697        * @subsection 6.2.2.6 - Settings
     1698        *------------------------------
     1699        */
     1700.bp-user #buddypress #settings-form > p {
     1701        font-size: 1.6875em;
     1702        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     1703        font-weight: 700;
     1704        letter-spacing: -0.02em;
     1705        line-height: 1.2;
     1706        -webkit-font-smoothing: antialiased;
     1707        margin: 20px 0 10px;
     1708}
     1709
     1710.bp-user #buddypress #settings-form > p:before {
     1711        background: #767676;
     1712        content: "\020";
     1713        display: block;
     1714        height: 2px;
     1715        margin: 1rem 0;
     1716        width: 1em;
     1717}
     1718
     1719.bp-user #buddypress table.notification-settings th.title {
     1720        width: 75%;
     1721}
     1722
     1723.bp-user #buddypress table.notification-settings td.yes,
     1724.bp-user #buddypress table.notification-settings td.no {
     1725        vertical-align: middle;
     1726}
     1727
     1728.bp-user #buddypress table.notification-settings td {
     1729        word-break: keep-all;
     1730}
     1731
     1732.bp-user #buddypress table.profile-settings {
     1733        width: 100%;
     1734}
     1735
     1736.bp-user #buddypress table.profile-settings th.field-group-name,
     1737.bp-user #buddypress table.profile-settings td.field-name {
     1738        width: 50%;
     1739}
     1740
     1741@media screen and (min-width: 768px) {
     1742        .bp-user #buddypress table.profile-settings th.field-group-name,
     1743        .bp-user #buddypress table.profile-settings td.field-name {
     1744                width: 70%;
     1745        }
     1746}
     1747
     1748.bp-user #buddypress table.profile-settings th.title,
     1749.bp-user #buddypress table.profile-settings td.field-visibility {
     1750        width: 30%;
     1751}
     1752
     1753.bp-user #buddypress table.profile-settings td.field-visibility select {
     1754        width: 100%;
     1755}
     1756
     1757/**
     1758*-------------------------------------------------------------------------------
     1759* @section 7.0 - Forms  - General
     1760*-------------------------------------------------------------------------------
     1761*/
     1762#buddypress input[type="submit"],
     1763#buddypress input[type="button"] {
     1764        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     1765        font-size: 0.9em;
     1766        background-color: #0073aa;
     1767        color: #fff;
     1768        border: none;
     1769        transition: background 150ms ease-in-out;
     1770}
     1771
     1772#buddypress input[type="submit"]:hover,
     1773#buddypress input[type="button"]:hover {
     1774        color: #fff;
     1775        background-color: #111;
     1776        border: none;
     1777}
     1778
     1779#buddypress div.activity-comments form .ac-textarea {
     1780        background: #f1f1f1;
     1781        border: 1px solid rgba(153, 153, 153, 0.3);
     1782}
     1783
     1784#buddypress div.activity-comments form .ac-textarea textarea {
     1785        background: none;
     1786        border: 0;
     1787}
     1788
     1789#buddypress select {
     1790        border: 1px solid rgba(153, 153, 153, 0.5);
     1791}
     1792
     1793#buddypress .wp-editor-wrap a.button,
     1794#buddypress .wp-editor-wrap button,
     1795#buddypress .wp-editor-wrap input[type="submit"],
     1796#buddypress .wp-editor-wrap input[type="button"],
     1797#buddypress .wp-editor-wrap input[type="reset"] {
     1798        padding: 0 5px 1px;
     1799}
     1800
     1801#buddypress .standard-form li,
     1802#buddypress .group-create-form li {
     1803        float: none;
     1804        list-style: none;
     1805}
     1806
     1807#buddypress .standard-form input[type="text"],
     1808#buddypress .standard-form textarea,
     1809#buddypress .group-create-form input[type="text"],
     1810#buddypress .group-create-form textarea {
     1811        width: 100%;
     1812}
     1813
     1814#buddypress .standard-form input[type="submit"],
     1815#buddypress .standard-form input[type="button"]#group-creation-previous,
     1816#buddypress .group-create-form input[type="submit"],
     1817#buddypress .group-create-form input[type="button"]#group-creation-previous {
     1818        line-height: 1.2;
     1819        outline: none;
     1820        padding: 0.76rem 1rem;
     1821}
     1822
     1823#buddypress .standard-form .radio label,
     1824#buddypress .group-create-form .radio label {
     1825        color: #111;
     1826}
     1827
     1828#buddypress .standard-form .editfield,
     1829#buddypress .group-create-form .editfield {
     1830        margin-bottom: 1em;
     1831}
     1832
     1833#buddypress div.dir-search,
     1834#buddypress div.message-search,
     1835#buddypress li.groups-members-search {
     1836        float: none;
     1837        margin: 10px 0;
     1838}
     1839
     1840#buddypress div.dir-search form,
     1841#buddypress div.message-search form,
     1842#buddypress li.groups-members-search form {
     1843        overflow: hidden;
     1844}
     1845
     1846#buddypress div.dir-search form label,
     1847#buddypress div.message-search form label,
     1848#buddypress li.groups-members-search form label {
     1849        float: right;
     1850        width: 80%;
     1851}
     1852
     1853#buddypress div.dir-search form input[type="text"],
     1854#buddypress div.message-search form input[type="text"],
     1855#buddypress li.groups-members-search form input[type="text"] {
     1856        float: right;
     1857        margin: 0 0 0 1em;
     1858        width: 80%;
     1859        outline-color: #fff;
     1860}
     1861
     1862#buddypress div.dir-search form input[type="text"],
     1863#buddypress div.dir-search form input[type="submit"],
     1864#buddypress div.message-search form input[type="text"],
     1865#buddypress div.message-search form input[type="submit"],
     1866#buddypress li.groups-members-search form input[type="text"],
     1867#buddypress li.groups-members-search form input[type="submit"] {
     1868        font-size: 0.9em;
     1869        border: 0;
     1870        line-height: inherit;
     1871}
     1872
     1873#buddypress div.dir-search form input[type="text"],
     1874#buddypress div.message-search form input[type="text"],
     1875#buddypress li.groups-members-search form input[type="text"] {
     1876        padding: 0.2em 0.2em 0.2em 0;
     1877}
     1878
     1879#buddypress div.dir-search form input[type="submit"],
     1880#buddypress div.message-search form input[type="submit"],
     1881#buddypress li.groups-members-search form input[type="submit"] {
     1882        float: left;
     1883        font-weight: 400;
     1884        padding: 0.2em 1em;
     1885        text-align: center;
     1886        text-transform: none;
     1887        width: 20%;
     1888}
     1889
     1890@media screen and (min-width: 600px) {
     1891        #buddypress div.dir-search,
     1892        #buddypress div.message-search,
     1893        #buddypress li.groups-members-search {
     1894                float: left;
     1895                margin-bottom: 5px !important;
     1896        }
     1897        #buddypress div.dir-search form label,
     1898        #buddypress div.dir-search form input[type="text"],
     1899        #buddypress div.dir-search form input[type="submit"],
     1900        #buddypress div.message-search form label,
     1901        #buddypress div.message-search form input[type="text"],
     1902        #buddypress div.message-search form input[type="submit"],
     1903        #buddypress li.groups-members-search form label,
     1904        #buddypress li.groups-members-search form input[type="text"],
     1905        #buddypress li.groups-members-search form input[type="submit"] {
     1906                width: auto;
     1907        }
     1908}
     1909
     1910@media screen and (min-width: 1168px) {
     1911        #buddypress .dir-search form input[type="text"],
     1912        #buddypress .message-search form input[type="text"] {
     1913                font-size: 1.125em;
     1914        }
     1915        #buddypress .dir-search form input[type="submit"],
     1916        #buddypress .message-search form input[type="submit"] {
     1917                font-size: 1.125em;
     1918        }
     1919}
     1920
     1921/**
     1922*-------------------------------------------------------------------------------
     1923* @section 8.0 - Tables - General
     1924*-------------------------------------------------------------------------------
     1925*/
     1926#buddypress table {
     1927        font-size: 0.9em;
     1928        margin: 20px 0;
     1929}
     1930
     1931#buddypress table tr th {
     1932        background: #e6e5e5;
     1933        border-color: #b7b7b7;
     1934        color: #111;
     1935}
     1936
     1937#buddypress table p {
     1938        margin-bottom: 0.5em;
     1939}
     1940
     1941@media screen and (min-width: 1168px) {
     1942        #buddypress table {
     1943                font-size: 0.9em;
     1944        }
     1945}
     1946
     1947/*__ User Account tables __*/
     1948#buddypress .notifications th,
     1949#buddypress .messages-notices th {
     1950        width: 30%;
     1951}
     1952
     1953#buddypress .notifications th.bulk-select-all,
     1954#buddypress .messages-notices th.bulk-select-all {
     1955        text-align: center;
     1956        width: 10%;
     1957}
     1958
     1959#buddypress .notifications .bulk-select-check,
     1960#buddypress .notifications .thread-star,
     1961#buddypress .messages-notices .bulk-select-check,
     1962#buddypress .messages-notices .thread-star {
     1963        text-align: center;
     1964}
     1965
     1966#buddypress .notifications .notification-actions,
     1967#buddypress .notifications td.thread-options,
     1968#buddypress .messages-notices .notification-actions,
     1969#buddypress .messages-notices td.thread-options {
     1970        text-align: center;
     1971}
     1972
     1973#buddypress .notifications .notification-actions a,
     1974#buddypress .notifications td.thread-options a,
     1975#buddypress .messages-notices .notification-actions a,
     1976#buddypress .messages-notices td.thread-options a {
     1977        display: inline-block;
     1978        margin: 0;
     1979        padding: 0;
     1980}
     1981
     1982/**
     1983*-------------------------------------------------------------------------------
     1984* @section 9.0 - Error / Success messages
     1985*-------------------------------------------------------------------------------
     1986*/
     1987#buddypress #item-body div#message {
     1988        margin-top: 20px;
     1989}
     1990
     1991@media screen and (min-width: 1168px) {
     1992        #buddypress #item-body div#message {
     1993                margin-left: 20px;
     1994        }
     1995}
     1996
     1997#buddypress div#message p {
     1998        font-size: 1.125em;
     1999        font-weight: 700;
     2000}
     2001
     2002#buddypress div#message.info p {
     2003        background: #c6e4ee;
     2004        border: 1px solid #78bed6;
     2005        color: #1e5264;
     2006}
     2007
     2008#buddypress div#message.updated p {
     2009        background: #dee6b2;
     2010        border: 1px solid #becc66;
     2011        color: #454d19;
     2012}
     2013
     2014.delete-group #buddypress div#message.info p {
     2015        background: #db7e7e;
     2016        border: 1px solid #be3535;
     2017        color: #1f0808;
     2018}
     2019
     2020/**
     2021*-------------------------------------------------------------------------------
     2022* @section 10.0 - Ajax Loading, Widgets, General classes
     2023*-------------------------------------------------------------------------------
     2024*/
     2025#buddypress a.button {
     2026        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     2027        font-size: 0.675em;
     2028        background-color: #0073aa;
     2029        color: #fff;
     2030        border: none;
     2031        transition: background 150ms ease-in-out;
     2032        padding: 8px;
     2033}
     2034
     2035#buddypress a.button:hover {
     2036        color: #fff;
     2037        background-color: #111;
     2038        border: none;
     2039}
     2040
     2041#buddypress a.button span {
     2042        color: #0073aa;
     2043        background-color: #fff;
     2044}
     2045
     2046#buddypress a.button:hover span {
     2047        color: #0073aa;
     2048        background-color: #fff;
     2049}
     2050
     2051#buddypress a.button.bp-secondary-action {
     2052        color: #0073aa;
     2053        background-color: #fff;
     2054        border: solid 1px #0073aa;
     2055}
     2056
     2057#buddypress a.button.bp-secondary-action:hover {
     2058        color: #fff;
     2059        background-color: #111;
     2060        border-color: #111;
     2061}

  • new file src/bp-templates/bp-legacy/css/twentynineteen.css 

    diff --git src/bp-templates/bp-legacy/css/twentynineteen.css src/bp-templates/bp-legacy/css/twentynineteen.css
new file mode 100644
index 000000000..0eb49f28b
    - +  
     1/*------------------------------------------------------------------------------
     2
     3This is the BuddyPress companion stylesheet for
     4the WordPress Twenty Nineteen theme.
     5
     6@version 5.0.0
     7
     8This sheet supports the primary BuddyPress styles in buddypress.css
     9
     10If you are running as a child theme of twentynineteen this stylesheet will be
     11loaded by default. If you want to modify the styles the normal BP Theme Compat
     12hierarchy works and you can copy the file to buddypress/css/ or community/css/
     13in your child themes root & either start over or modify the rulesets.
     14
     15If you do not require the styles you can dequeue them from the themes
     16functions file.
     17
     18Please see this codex article for more information:
     19http://codex.buddypress.org/themes/buddypress-companion-stylesheets/
     20
     21--------------------------------------------------------------------------------
     22>>> TABLE OF CONTENTS:
     23--------------------------------------------------------------------------------
     241.0 Theme Structural Elements & overrides
     252.0 - Navigation - General
     26        2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     27        2.2 - Pagination
     283.0 - Images
     294.0 - BP Lists / Loops Generic
     30        4.1 - Activity Loop
     31                4.1.1 Whats New Activity
     32                4.1.2 - Activity Listing
     33                4.1.3 - Activity Comments
     34        4.2 - Members Loop
     35        4.3 - Groups Loop
     36        4.4 - Blogs Loop
     375.0 - Directories - Members, Groups, Blogs, Forums
     386.0 - Single Item screens: User Account & Single Group Screens
     39        6.1 - Item Headers: Global
     40                6.1.1 - item-header: Groups
     41                6.1.2 - item-header: User Accounts
     42        6.2 - Item Body: Global
     43                6.2.1 - item-body: Groups
     44                        6.2.1.1 - Management settings screens
     45                        6.2.1.2 - Group members list
     46                        6.2.1.3 - Group Send Invites
     47                6.2.2 - item-body: User Accounts
     48                        6.2.2.1 - classes, pag, filters
     49                        6.2.2.2 - Extended Profiles
     50                        6.2.2.3 - Groups
     51                        6.2.2.4 - friends
     52                        6.2.2.5 - Private Messaging Threads
     53                        6.2.2.6 - Settings
     547.0 - Forms  -  General
     558.0 - Tables -  General
     569.0 - Error / Success Messages
     5710.0 - Ajax Loading, Widgets, General classes
     58------------------------------------------------------------------------------*/
     59/**
     60*-------------------------------------------------------------------------------
     61* @section 1.0 - Theme - Structural Elements & overrides
     62*-------------------------------------------------------------------------------
     63*/
     64#buddypress h1,
     65#buddypress h2,
     66#buddypress h3,
     67#buddypress h4,
     68#buddypress h5,
     69#buddypress h6 {
     70        clear: none;
     71}
     72
     73@media screen and (max-width: 1379px) {
     74        body.buddypress .entry .entry-content > * {
     75                float: none;
     76                max-width: none;
     77        }
     78}
     79
     80/**
     81*-------------------------------------------------------------------------------
     82* @section 2.0 - Navigation - General
     83*-------------------------------------------------------------------------------
     84*/
     85/**
     86*----------------------------------------------------------
     87* @section 2.1 - Navs Object Nav / Sub Nav (item-list-tabs)
     88*
     89* The main navigational elements for all BP screens
     90*----------------------------------------------------------
     91*/
     92#buddypress {
     93        /*__ Horizontal menus __*/
     94}
     95
     96#buddypress div.item-list-tabs ul li.selected a {
     97        background: #0073aa;
     98        color: #fff;
     99        opacity: 1;
     100}
     101
     102#buddypress div.item-list-tabs ul {
     103        background-color: #fff;
     104        overflow: hidden;
     105        padding: 5px 0;
     106}
     107
     108#buddypress div.item-list-tabs ul li a {
     109        font-weight: 600;
     110}
     111
     112#buddypress div.item-list-tabs ul li a span {
     113        border-radius: 25%;
     114}
     115
     116#buddypress div.item-list-tabs ul li a:hover {
     117        background: #111;
     118        color: #fff;
     119}
     120
     121#buddypress #object-nav ul {
     122        overflow: hidden;
     123}
     124
     125#buddypress #object-nav ul li {
     126        float: none;
     127}
     128
     129#buddypress #object-nav ul li:not(.selected) a {
     130        opacity: 0.7;
     131}
     132
     133#buddypress #object-nav ul li:not(.selected) a:hover {
     134        opacity: 1;
     135}
     136
     137@media screen and (min-width: 600px) {
     138        #buddypress #object-nav ul li {
     139                float: left;
     140        }
     141}
     142
     143#buddypress div#subnav.item-list-tabs {
     144        margin-top: 0;
     145}
     146
     147#buddypress div#subnav.item-list-tabs ul {
     148        background-color: #fff;
     149        border-bottom: 0;
     150        padding: 0;
     151}
     152
     153#buddypress div#subnav.item-list-tabs ul li.last {
     154        background: #fff;
     155        margin-top: 0;
     156        padding: 5px 5px 5px 0;
     157        width: 100%;
     158}
     159
     160#buddypress div#subnav.item-list-tabs ul li.last select,
     161#buddypress div#subnav.item-list-tabs ul li.last select:focus {
     162        background: transparent;
     163        border: 0;
     164        outline: 0;
     165}
     166
     167#buddypress div#subnav.item-list-tabs ul li.last select,
     168#buddypress div#subnav.item-list-tabs ul li.last label,
     169#buddypress div#subnav.item-list-tabs ul li.last option {
     170        font-size: 0.9em;
     171}
     172
     173#buddypress div#subnav.item-list-tabs ul li.last select {
     174        font-style: italic;
     175}
     176
     177@media screen and (min-width: 600px) {
     178        #buddypress div#subnav.item-list-tabs ul li.last {
     179                text-align: right;
     180        }
     181}
     182
     183#buddypress div.item-list-tabs ul li.selected a,
     184#buddypress div.item-list-tabs ul li.current a {
     185        background: #0073aa;
     186        color: #fff;
     187        opacity: 1;
     188}
     189
     190/*__ Vertical menu User Account / Group single screens __*/
     191@media screen and (min-width: 1168px) {
     192        #buddypress #item-header,
     193        #buddypress #item-body {
     194                background: #fff;
     195        }
     196        #buddypress #object-nav {
     197                border-right: 1px solid #ddd;
     198                float: left;
     199                margin-right: -1px;
     200                width: 200px;
     201        }
     202        #buddypress #object-nav ul {
     203                border-bottom: 0;
     204                padding: 0;
     205        }
     206        #buddypress #object-nav ul li {
     207                float: none;
     208                overflow: hidden;
     209        }
     210        #buddypress #object-nav ul li span {
     211                background: #fff;
     212                border-radius: 10%;
     213                float: right;
     214                margin-right: 2px;
     215        }
     216        #buddypress #item-body {
     217                border-left: 1px solid #ddd;
     218                overflow: hidden;
     219                padding: 0 0 0 20px;
     220                width: auto;
     221        }
     222        #buddypress #item-body #subnav {
     223                margin: 0 0 0 -20px;
     224        }
     225}
     226
     227/**
     228*----------------------------------------------------------
     229* @section 2.2 - Pagination
     230*----------------------------------------------------------
     231*/
     232#buddypress div.pagination {
     233        box-shadow: none;
     234}
     235
     236#buddypress div.pagination .pag-count {
     237        margin-left: 0;
     238}
     239
     240#buddypress div.pagination .pagination-links {
     241        margin-right: 0;
     242}
     243
     244#buddypress div.pagination .pagination-links span,
     245#buddypress div.pagination .pagination-links a {
     246        height: auto;
     247        line-height: 1;
     248        padding: 5px;
     249}
     250
     251#buddypress div.pagination .pagination-links .prev,
     252#buddypress div.pagination .pagination-links .next {
     253        background-color: transparent;
     254        color: inherit;
     255        overflow: visible;
     256        width: auto;
     257}
     258
     259#buddypress div.pagination .pagination-links .prev:before,
     260#buddypress div.pagination .pagination-links .next:before {
     261        display: none;
     262}
     263
     264#buddypress div.pagination .pagination-links .prev {
     265        left: auto;
     266        position: static;
     267}
     268
     269#buddypress div.pagination .pagination-links .next {
     270        position: static;
     271        right: auto;
     272}
     273
     274/**
     275*-------------------------------------------------------------------------------
     276* @section 4.0 - BP Lists / Loops Generic
     277*-------------------------------------------------------------------------------
     278*/
     279#buddypress .item-list .activity-header,
     280#buddypress .item-list .activity-meta {
     281        font-family: NonBreakingSpaceOverride, "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
     282}
     283
     284#buddypress .item-list a.activity-time-since {
     285        color: #717171;
     286}
     287
     288#buddypress ul.item-list li {
     289        overflow: hidden !important;
     290}
     291
     292#buddypress ul.item-list li .item-avatar {
     293        margin-bottom: 10px;
     294        text-align: center;
     295}
     296
     297@media screen and (min-width: 600px) {
     298        #buddypress ul.item-list li .item-avatar {
     299                margin-bottom: 0;
     300        }
     301}
     302
     303#buddypress ul.item-list li .item-avatar a {
     304        border-bottom: 0;
     305}
     306
     307#buddypress ul.item-list li .item-avatar img.avatar {
     308        display: inline-block;
     309        float: none;
     310}
     311
     312@media screen and (min-width: 600px) {
     313        #buddypress ul.item-list li .item-avatar img.avatar {
     314                display: block;
     315                float: left;
     316        }
     317}
     318
     319#buddypress ul.item-list li .item {
     320        margin-left: 70px;
     321}
     322
     323#buddypress ul.item-list li .item .item-title span.update {
     324        display: block;
     325}
     326
     327#buddypress ul.item-list li .item span.activity {
     328        display: block;
     329        font-style: italic;
     330}
     331
     332#buddypress ul.item-list li .item .item-desc {
     333        margin-left: 0;
     334}
     335
     336#buddypress ul.item-list li div.action {
     337        margin-left: 0;
     338}
     339
     340#buddypress ul.item-list li div.action div {
     341        display: inline-block;
     342        margin: 10px 0;
     343        width: 100%;
     344}
     345
     346#buddypress ul.item-list li div.action div a {
     347        display: block;
     348        width: 100%;
     349        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     350        font-size: 0.675em;
     351        background-color: #0073aa;
     352        color: #fff;
     353        border: none;
     354        transition: background 150ms ease-in-out;
     355        border-radius: 5px;
     356        background-clip: padding-box;
     357        font-weight: 600;
     358}
     359
     360#buddypress ul.item-list li div.action div a:hover {
     361        color: #fff;
     362        background-color: #111;
     363        border: none;
     364}
     365
     366@media screen and (min-width: 600px) {
     367        #buddypress ul.item-list li div.action div {
     368                margin: 0 10px 10px 0;
     369                width: auto;
     370        }
     371}
     372
     373#buddypress ul.item-list li div.action .meta {
     374        font-style: italic;
     375}
     376
     377#buddypress ul.item-list li.bp-single-group .meta {
     378        display: block;
     379}
     380
     381/**
     382*----------------------------------------------------------
     383* @section 4.1 - Activity
     384*----------------------------------------------------------
     385*/
     386/**
     387*-----------------------------------------------------
     388* @section 4.1.1 - Activity Whats New
     389*-----------------------------------------------------
     390*/
     391#buddypress form#whats-new-form p.activity-greeting {
     392        line-height: 1.4;
     393}
     394
     395#buddypress form#whats-new-form #whats-new:focus {
     396        border-color: #0073aa;
     397        outline: thin solid rgba(0, 115, 170, 0.15);
     398        outline-offset: -4px;
     399}
     400
     401#buddypress form#whats-new-form #whats-new-submit input {
     402        line-height: 1.2;
     403        outline: none;
     404        padding: 0.76rem 1rem;
     405}
     406
     407@media screen and (max-width: 30em) {
     408        #buddypress form#whats-new-form #whats-new-post-in-box select {
     409                font-size: 0.9em;
     410                max-width: 120px;
     411        }
     412}
     413
     414@media screen and (max-width: 600px) {
     415        #buddypress form#whats-new-form #whats-new-content {
     416                clear: left;
     417                margin: 10px 0 40px;
     418                padding: 10px 0 0;
     419        }
     420        #buddypress form#whats-new-form #whats-new-content #whats-new-submit {
     421                float: none;
     422        }
     423        #buddypress form#whats-new-form #whats-new-content #whats-new-submit input {
     424                width: 100%;
     425        }
     426        #buddypress form#whats-new-form #whats-new-options {
     427                display: flex;
     428                flex-direction: column;
     429        }
     430        #buddypress form#whats-new-form #whats-new-options #whats-new-submit {
     431                order: 2;
     432        }
     433        #buddypress form#whats-new-form #whats-new-options #whats-new-post-in-box {
     434                order: 1;
     435        }
     436}
     437
     438#buddypress form#whats-new-form #whats-new-options[style] #whats-new-post-in-box {
     439        border: 1px solid rgba(153, 153, 153, 0.5);
     440        float: left;
     441        line-height: 1.5;
     442        margin-top: 12px;
     443        padding-left: 0.2em;
     444        width: 100%;
     445}
     446
     447#buddypress form#whats-new-form #whats-new-options[style] #whats-new-post-in-box select {
     448        background: none;
     449        border: 0;
     450        float: right;
     451        margin: 0;
     452        min-height: 1.5em;
     453        outline: 0;
     454        padding-left: 0.4em;
     455}
     456
     457@media screen and (min-width: 30em) {
     458        #buddypress form#whats-new-form #whats-new-options[style] #whats-new-post-in-box {
     459                width: auto;
     460        }
     461        #buddypress form#whats-new-form #whats-new-options[style] #whats-new-submit {
     462                float: right;
     463        }
     464}
     465
     466#buddypress #item-body form#whats-new-form {
     467        margin: 40px 0;
     468}
     469
     470/**
     471*-----------------------------------------------------
     472* @section 4.1.2 - Activity Listing
     473*-----------------------------------------------------
     474*/
     475#buddypress #activity-stream li {
     476        padding: 25px 0 15px;
     477}
     478
     479#buddypress #activity-stream li .activity-avatar {
     480        float: none;
     481        text-align: center;
     482}
     483
     484#buddypress #activity-stream li .activity-avatar a {
     485        display: inline-block;
     486}
     487
     488#buddypress #activity-stream li .activity-avatar a img.avatar {
     489        display: inline-block;
     490        float: none;
     491        height: 50px;
     492        width: 50px;
     493        margin-bottom: 20px;
     494        margin-left: 0;
     495}
     496
     497#buddypress #activity-stream li .activity-content {
     498        margin-left: 0;
     499}
     500
     501#buddypress #activity-stream li .activity-content .activity-header {
     502        font-size: 0.675em;
     503}
     504
     505@media screen and (min-width: 768px) {
     506        #buddypress #activity-stream li .activity-avatar {
     507                float: left;
     508                margin-right: 10px;
     509                text-align: left;
     510        }
     511        #buddypress #activity-stream li .activity-avatar a {
     512                border-bottom: 0;
     513        }
     514        #buddypress #activity-stream li .activity-content {
     515                margin: 0;
     516                overflow: hidden;
     517        }
     518        #buddypress #activity-stream li .activity-content .activity-header {
     519                font-size: 0.9em;
     520        }
     521}
     522
     523#buddypress #activity-stream li.mini .activity-avatar a img.avatar {
     524        height: 30px;
     525        margin-left: 15px;
     526        margin-top: 5px;
     527        width: 30px;
     528}
     529
     530#buddypress #activity-stream li.mini .activity-content .activity-header {
     531        font-size: 0.675em;
     532}
     533
     534@media screen and (min-width: 768px) {
     535        #buddypress #activity-stream li.mini .activity-content .activity-header {
     536                font-size: 0.9em;
     537        }
     538}
     539
     540#buddypress #activity-stream .activity-content {
     541        margin-top: -12px;
     542}
     543
     544#buddypress #activity-stream .activity-content .activity-header {
     545        line-height: inherit;
     546        margin-right: 0;
     547}
     548
     549#buddypress #activity-stream .activity-content .activity-header p {
     550        color: #717171;
     551        padding: 0 0.2em;
     552}
     553
     554#buddypress #activity-stream .activity-content .activity-header img.avatar {
     555        display: inline-block;
     556        vertical-align: text-top;
     557        width: 20px;
     558        height: 20px;
     559}
     560
     561#buddypress #activity-stream .activity-content .activity-meta a {
     562        display: block;
     563        margin: 0 0 5px;
     564}
     565
     566@media screen and (min-width: 600px) {
     567        #buddypress #activity-stream .activity-content .activity-meta a {
     568                display: inline-block;
     569                margin: 0;
     570        }
     571}
     572
     573#buddypress #activity-stream .activity-content .activity-meta a.button {
     574        padding: 8px;
     575        background-color: #fff;
     576        color: #0073aa;
     577}
     578
     579#buddypress #activity-stream .activity-content .activity-meta a.button span {
     580        color: #fff;
     581        background-color: #0073aa;
     582}
     583
     584#buddypress #activity-stream .activity-content .activity-meta a.button:hover {
     585        text-decoration: underline;
     586        color: #005177;
     587}
     588
     589#buddypress #activity-stream .activity-content .activity-meta a.button.bp-secondary-action {
     590        border: none;
     591}
     592
     593#buddypress #activity-stream .activity-content .activity-meta a.button.delete-activity,
     594#buddypress #activity-stream .activity-content .activity-meta a.button.delete-activity-single {
     595        color: #d05656;
     596}
     597
     598#buddypress #activity-stream .activity-content .activity-meta a.button.delete-activity:hover,
     599#buddypress #activity-stream .activity-content .activity-meta a.button.delete-activity-single:hover {
     600        text-decoration: underline;
     601        color: #be3535;
     602}
     603
     604#buddypress #activity-stream .load-more {
     605        background: #f1f1f1;
     606        border: 1px solid transparent;
     607        padding: 10px;
     608}
     609
     610#buddypress #activity-stream .load-more:focus, #buddypress #activity-stream .load-more:hover {
     611        background: #eeeeee;
     612        border: 1px solid rgba(159, 209, 226, 0.3);
     613}
     614
     615#buddypress #activity-stream .load-more:focus a, #buddypress #activity-stream .load-more:hover a {
     616        font-style: italic;
     617}
     618
     619#buddypress #activity-stream .load-more a {
     620        display: block;
     621}
     622
     623/* Single activity view  - activity permalink */
     624.activity-permalink #buddypress {
     625        background: none;
     626}
     627
     628.activity-permalink #buddypress #activity-stream li.activity-item {
     629        padding: 20px 0;
     630}
     631
     632.activity-permalink #buddypress #activity-stream .activity-avatar img.avatar {
     633        width: auto;
     634        height: auto;
     635}
     636
     637.activity-permalink #buddypress #activity-stream li.mini .activity-avatar img.avatar {
     638        width: 65px;
     639        height: 65px;
     640}
     641
     642.activity-permalink #buddypress #activity-stream li.mini .activity-header {
     643        font-size: 0.675em;
     644        margin-bottom: 40px;
     645}
     646
     647@media screen and (min-width: 768px) {
     648        .activity-permalink #buddypress #activity-stream li.mini .activity-header {
     649                font-size: 0.9em;
     650        }
     651}
     652
     653.activity-permalink #buddypress #activity-stream li.mini .activity-header p {
     654        padding: 20px;
     655}
     656
     657/**
     658*-----------------------------------------------------
     659* @section 4.1.3 - Activity Comments
     660*-----------------------------------------------------
     661*/
     662#buddypress #activity-stream .activity-comments {
     663        margin: 10px 0 0;
     664}
     665
     666#buddypress #activity-stream .activity-comments a {
     667        color: #717171;
     668}
     669
     670#buddypress #activity-stream .activity-comments.has-comments {
     671        border-left: 1px solid #eaeaea;
     672}
     673
     674#buddypress #activity-stream .activity-comments .ac-form {
     675        padding: 20px 0 0;
     676}
     677
     678#buddypress #activity-stream .activity-comments > ul {
     679        background: rgba(241, 241, 241, 0.6);
     680        margin: 15px 0 0 2px;
     681}
     682
     683@media screen and (min-width: 600px) {
     684        #buddypress #activity-stream .activity-comments > ul {
     685                margin-left: 70px;
     686        }
     687}
     688
     689#buddypress #activity-stream .activity-comments > ul ul {
     690        margin-left: 1%;
     691        padding-left: 0;
     692}
     693
     694@media screen and (min-width: 30em) {
     695        #buddypress #activity-stream .activity-comments > ul ul {
     696                margin-left: 1%;
     697                padding-left: 1em;
     698        }
     699}
     700
     701#buddypress #activity-stream .activity-comments > ul ul li {
     702        border-left: 1px solid #eaeaea;
     703        border-top: 0;
     704        padding-left: 0.2em;
     705}
     706
     707#buddypress #activity-stream .activity-comments > ul .acomment-meta {
     708        border-bottom: 1px solid #eaeaea;
     709        color: #737373;
     710        font-style: italic;
     711}
     712
     713@media screen and (max-width: 600px) {
     714        #buddypress #activity-stream .activity-comments > ul .acomment-avatar {
     715                display: block;
     716                text-align: center;
     717        }
     718        #buddypress #activity-stream .activity-comments > ul .acomment-avatar a,
     719        #buddypress #activity-stream .activity-comments > ul .acomment-avatar img.avatar {
     720                display: inline;
     721                float: none;
     722        }
     723        #buddypress #activity-stream .activity-comments > ul .acomment-content,
     724        #buddypress #activity-stream .activity-comments > ul .acomment-meta,
     725        #buddypress #activity-stream .activity-comments > ul .acomment-options {
     726                margin: 5px;
     727        }
     728        #buddypress #activity-stream .activity-comments > ul .acomment-content {
     729                padding: 0 10px;
     730        }
     731}
     732
     733#buddypress #activity-stream .activity-comments .ac-reply-avatar {
     734        display: none;
     735}
     736
     737#buddypress #activity-stream .activity-comments .ac-reply-content {
     738        margin-left: 0;
     739        padding-left: 0;
     740}
     741
     742@media screen and (min-width: 600px) {
     743        #buddypress #activity-stream .activity-comments .ac-reply-avatar {
     744                display: block;
     745        }
     746        #buddypress #activity-stream .activity-comments .ac-reply-content {
     747                overflow: hidden;
     748        }
     749}
     750
     751#buddypress #activity-stream .activity-comments .ac-reply-avatar img {
     752        border: none;
     753}
     754
     755#buddypress #activity-stream .activity-comments .ac-form input[type="submit"],
     756#buddypress #activity-stream .activity-comments .ac-form .ac-reply-cancel {
     757        display: inline-block;
     758        font-size: 0.675em;
     759        line-height: 1.2;
     760        padding: 4px 10px;
     761        width: 100px;
     762}
     763
     764#buddypress #activity-stream .activity-comments .ac-form .ac-reply-cancel {
     765        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     766        text-align: center;
     767        vertical-align: bottom;
     768        color: #0073aa;
     769}
     770
     771#buddypress #activity-stream .activity-comments .ac-form .ac-reply-cancel:hover {
     772        color: #005177;
     773        text-decoration: underline;
     774}
     775
     776/**
     777*----------------------------------------------------------
     778* @section 4.2 - Members Loop
     779*----------------------------------------------------------
     780*/
     781/**
     782*-------------------------------------------------------------------------------
     783* @section 6.0 - Single Item screens: User Account & Single Group Screens
     784*-------------------------------------------------------------------------------
     785*/
     786/**
     787*-----------------------------------------------------------
     788* @subsection 6.1 - Item Header Global
     789*-----------------------------------------------------------
     790*/
     791@media screen and (max-width: 768px) {
     792        .bp-user main header.entry-header,
     793        .single-item.groups main header.entry-header {
     794                padding-bottom: 1rem;
     795        }
     796}
     797
     798@media screen and (max-width: 600px) {
     799        .bp-user h1,
     800        .bp-user #item-header-content,
     801        .single-item.groups h1,
     802        .single-item.groups #item-header-content {
     803                text-align: center;
     804        }
     805}
     806
     807.bp-user #buddypress #item-header-content h2:before,
     808.single-item.groups #buddypress #item-header-content h2:before {
     809        display: none;
     810}
     811
     812.bp-user #buddypress #item-header-content #item-buttons .generic-button a,
     813.single-item.groups #buddypress #item-header-content #item-buttons .generic-button a {
     814        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     815        font-size: 0.675em;
     816        background-color: #0073aa;
     817        color: #fff;
     818        border: none;
     819        transition: background 150ms ease-in-out;
     820        border-radius: 5px;
     821        background-clip: padding-box;
     822        font-weight: 600;
     823        padding: 8px;
     824}
     825
     826.bp-user #buddypress #item-header-content #item-buttons .generic-button a:hover,
     827.single-item.groups #buddypress #item-header-content #item-buttons .generic-button a:hover {
     828        color: #fff;
     829        background-color: #111;
     830        border: none;
     831}
     832
     833.bp-user #buddypress #item-header-avatar img.avatar,
     834.single-item.groups #buddypress #item-header-avatar img.avatar {
     835        width: auto;
     836        height: auto;
     837}
     838
     839@media screen and (max-width: 768px) {
     840        .bp-user #buddypress #item-header .generic-button,
     841        .single-item.groups #buddypress #item-header .generic-button {
     842                float: none;
     843                margin: 1.5em 0 0;
     844        }
     845}
     846
     847@media screen and (max-width: 600px) {
     848        .bp-user #buddypress h1,
     849        .single-item.groups #buddypress h1 {
     850                margin-bottom: 0;
     851        }
     852        .bp-user #buddypress #item-header-avatar img.avatar,
     853        .single-item.groups #buddypress #item-header-avatar img.avatar {
     854                margin-right: 0;
     855        }
     856        .bp-user #buddypress #item-header-content,
     857        .single-item.groups #buddypress #item-header-content {
     858                width: 100%;
     859        }
     860}
     861
     862/**
     863*-----------------------------------------------------
     864* @subsection 6.1.1 - item-header Groups
     865*
     866* Group Specific Item Header
     867*-----------------------------------------------------
     868*/
     869@media screen and (max-width: 768px) {
     870        .single-item.groups #buddypress #item-header #item-meta {
     871                margin-bottom: 20px;
     872        }
     873}
     874
     875@media screen and (max-width: 600px) {
     876        .single-item.groups #buddypress div#item-header {
     877                display: flex;
     878                flex-direction: column;
     879        }
     880        .single-item.groups #buddypress div#item-header #item-header-avatar {
     881                order: 1;
     882                text-align: center;
     883        }
     884        .single-item.groups #buddypress div#item-header #item-header-avatar a {
     885                border-bottom: 0;
     886        }
     887        .single-item.groups #buddypress div#item-header #item-header-avatar a img {
     888                display: inline-block;
     889                float: none;
     890        }
     891        .single-item.groups #buddypress div#item-header #item-header-content {
     892                order: 2;
     893        }
     894        .single-item.groups #buddypress div#item-header #item-actions {
     895                order: 3;
     896        }
     897}
     898
     899.single-item.groups #buddypress div#item-header {
     900        padding-bottom: 40px;
     901}
     902
     903.single-item.groups #buddypress div#item-header div#item-actions {
     904        margin: 0;
     905        width: 100%;
     906}
     907
     908@media screen and (min-width: 600px) {
     909        .single-item.groups #buddypress div#item-header div#item-actions {
     910                clear: none;
     911                float: right;
     912                width: 50%;
     913        }
     914}
     915
     916.single-item.groups #buddypress div#item-header div#item-actions h2 {
     917        background: #fff;
     918        color: #111;
     919        font-size: 0.9em;
     920        padding: 0.2em;
     921}
     922
     923@media screen and (min-width: 768px) {
     924        .single-item.groups #buddypress div#item-header div#item-actions h2 {
     925                font-size: 1.125em;
     926        }
     927}
     928
     929@media screen and (min-width: 768px) {
     930        .single-item.groups #buddypress div#item-header #item-header-avatar,
     931        .single-item.groups #buddypress div#item-header #item-header-content {
     932                float: left;
     933        }
     934        .single-item.groups #buddypress div#item-header #item-header-avatar {
     935                width: 21%;
     936        }
     937        .single-item.groups #buddypress div#item-header #item-header-content {
     938                margin-left: 4%;
     939                width: 40%;
     940        }
     941        .single-item.groups #buddypress div#item-header div#item-actions {
     942                float: right;
     943                width: 28%;
     944        }
     945}
     946
     947/**
     948*-----------------------------------------------------
     949* @subsection 6.1.2 - Item Header User Accounts
     950*
     951* User Accounts Specific Item Header
     952*-----------------------------------------------------
     953*/
     954.bp-user #buddypress #item-header {
     955        padding: 20px 0;
     956}
     957
     958.bp-user #buddypress #item-header #item-header-avatar {
     959        text-align: center;
     960        width: 100%;
     961        height: 100%;
     962}
     963
     964.bp-user #buddypress #item-header #item-header-avatar a {
     965        border-bottom: 0;
     966        display: inline-block;
     967        float: none;
     968}
     969
     970@media screen and (min-width: 768px) {
     971        .bp-user #buddypress #item-header #item-header-avatar {
     972                float: left;
     973                width: 20%;
     974        }
     975        .bp-user #buddypress #item-header #item-header-avatar img.avatar,
     976        .bp-user #buddypress #item-header #item-header-avatar a {
     977                float: left;
     978        }
     979        .bp-user #buddypress #item-header #item-header-content {
     980                float: right;
     981                margin-right: 5%;
     982                width: 69%;
     983        }
     984}
     985
     986/**
     987*-----------------------------------------------------------
     988* @subsection 6.2 - Item Body: Global
     989*-----------------------------------------------------------
     990*/
     991#item-body h1,
     992#item-body h2,
     993#item-body h3,
     994#item-body h4,
     995#item-body h5,
     996#item-body h6 {
     997        margin: 1em 0;
     998}
     999
     1000#item-body h1 a,
     1001#item-body h2 a,
     1002#item-body h3 a,
     1003#item-body h4 a,
     1004#item-body h5 a,
     1005#item-body h6 a {
     1006        border-bottom: 0;
     1007}
     1008
     1009/**
     1010*----------------------------------------------------
     1011* @subsection 6.2.1 - Item Body Groups
     1012*
     1013* Groups specific item body rules -  screens
     1014*----------------------------------------------------
     1015*/
     1016/**
     1017*-----------------------------------------
     1018* @subsection 6.2.1.1 - Group Management
     1019*-----------------------------------------
     1020*/
     1021.groups #group-settings-form h3 {
     1022        background: #fff;
     1023        color: #111;
     1024        padding: 0.2em;
     1025}
     1026
     1027.groups #group-settings-form #request-list h4 {
     1028        background: none;
     1029        color: inherit;
     1030}
     1031
     1032.groups.edit-details #group-settings-form label {
     1033        background: #f1f1f1;
     1034        border-top-right-radius: 4px;
     1035        border-top-left-radius: 4px;
     1036        background-clip: padding-box;
     1037        color: #111;
     1038        display: inline-block;
     1039        margin-bottom: 0;
     1040        padding: 0.2em;
     1041        width: 80%;
     1042}
     1043
     1044@media screen and (min-width: 600px) {
     1045        .groups.edit-details #group-settings-form label {
     1046                width: 60%;
     1047        }
     1048}
     1049
     1050.groups.edit-details #group-settings-form textarea + p label {
     1051        background: none;
     1052        color: inherit;
     1053        font-size: 0.9em;
     1054        width: auto;
     1055}
     1056
     1057.groups.group-settings #group-settings-form div.radio label,
     1058.groups.group-settings #create-group-form div.radio label {
     1059        border: 1px solid #eaeaea;
     1060        padding: 0.2em;
     1061}
     1062
     1063.groups.group-settings #group-settings-form div.radio ul,
     1064.groups.group-settings #create-group-form div.radio ul {
     1065        color: #767676;
     1066        font-size: 0.9em;
     1067}
     1068
     1069.groups.group-avatar form > p {
     1070        margin-top: 20px;
     1071}
     1072
     1073.groups.manage-members #group-settings-form .item-list li {
     1074        border-bottom: 1px solid #eaeaea;
     1075}
     1076
     1077.groups.manage-members #group-settings-form .item-list li img,
     1078.groups.manage-members #group-settings-form .item-list li h5 {
     1079        float: left;
     1080}
     1081
     1082.groups.manage-members #group-settings-form .item-list li img > a,
     1083.groups.manage-members #group-settings-form .item-list li h5 > a {
     1084        border-bottom: 0;
     1085}
     1086
     1087.groups.manage-members #group-settings-form .item-list li span.small {
     1088        clear: left;
     1089        display: block;
     1090        float: none;
     1091        margin-top: 10px;
     1092}
     1093
     1094.groups.manage-members #group-settings-form .item-list li span.small a {
     1095        display: inline-block;
     1096        margin: 5px 0;
     1097        width: 100%;
     1098}
     1099
     1100@media screen and (min-width: 600px) {
     1101        .groups.manage-members #group-settings-form .item-list li span.small a {
     1102                width: auto;
     1103        }
     1104}
     1105
     1106.groups.manage-members #group-settings-form .item-list li h5 {
     1107        margin: 0;
     1108}
     1109
     1110.groups.manage-members #group-settings-form .item-list li div.action {
     1111        position: relative;
     1112        top: auto;
     1113        right: auto;
     1114}
     1115
     1116/**
     1117*-----------------------------------------
     1118* @subsection 6.2.1.2 - Group members
     1119*-----------------------------------------
     1120*/
     1121/* Members loop */
     1122@media screen and (max-width: 30em) {
     1123        .groups.group-members #buddypress #members-group-list li > a {
     1124                border-bottom: 0;
     1125                display: block;
     1126                margin-bottom: 10px;
     1127                text-align: center;
     1128        }
     1129        .groups.group-members #buddypress #members-group-list li > a img.avatar {
     1130                display: inline;
     1131                float: none;
     1132        }
     1133}
     1134
     1135.groups.group-members #buddypress #members-group-list li h5 {
     1136        display: inline-block;
     1137        font-size: 0.9em;
     1138        margin: 0;
     1139}
     1140
     1141.groups.group-members #buddypress #members-group-list li h5 a {
     1142        border-bottom: 0;
     1143}
     1144
     1145.groups.group-members #buddypress #members-group-list li span.activity {
     1146        font-size: 0.5625em;
     1147}
     1148
     1149.groups.group-members #buddypress #members-group-list li .action {
     1150        top: 0;
     1151}
     1152
     1153.groups.group-members #subnav li {
     1154        width: 100%;
     1155}
     1156
     1157@media screen and (max-width: 600px) {
     1158        .groups.group-members #subnav li {
     1159                background: #fff;
     1160                padding: 20px 0;
     1161        }
     1162}
     1163
     1164.groups.group-members #subnav li #search-members-form {
     1165        float: right;
     1166        margin: 5px 5px 0 0;
     1167}
     1168
     1169@media screen and (max-width: 600px) {
     1170        .groups.group-members #subnav li #search-members-form {
     1171                margin: 0;
     1172                width: 100%;
     1173        }
     1174        .groups.group-members #subnav li #search-members-form label input[type="text"] {
     1175                width: 100%;
     1176        }
     1177}
     1178
     1179/**
     1180*-----------------------------------------
     1181* @subsection 6.2.1.3 - Group Send Invites
     1182*-----------------------------------------
     1183*/
     1184.groups.group-invites #item-body .item-list .action {
     1185        margin-bottom: 0;
     1186}
     1187
     1188@media screen and (min-width: 768px) {
     1189        .groups.group-invites #buddypress #item-body #message {
     1190                margin-top: 0;
     1191        }
     1192}
     1193
     1194@media screen and (min-width: 55em) {
     1195        .groups.group-invites #buddypress #send-invite-form {
     1196                margin-top: 0;
     1197        }
     1198}
     1199
     1200@media screen and (max-width: 768px) {
     1201        .groups.group-invites #item-body .left-menu {
     1202                float: none;
     1203                margin: 10px 0;
     1204        }
     1205        .groups.group-invites #item-body .left-menu #invite-list {
     1206                height: auto;
     1207                width: auto;
     1208        }
     1209        .groups.group-invites #item-body .main-column {
     1210                margin-left: 0;
     1211        }
     1212        .groups.group-invites #item-body .submit input {
     1213                display: inline-block;
     1214                width: 100%;
     1215        }
     1216}
     1217
     1218/**
     1219*-----------------------------------------------------
     1220* @subsection 6.2.2 - Item Body User Accounts
     1221*
     1222* User Account specific item body rules
     1223*-----------------------------------------------------
     1224*/
     1225.bp-user .entry-title {
     1226        margin-bottom: 0.5em;
     1227}
     1228
     1229/**
     1230*--------------------------------------------
     1231* @subsection 6.2.2.1 - classes, pag, filters
     1232*--------------------------------------------
     1233*/
     1234.bp-user #buddypress table th {
     1235        font-size: 0.9em;
     1236}
     1237
     1238.bp-user #buddypress table td {
     1239        font-size: 0.5625em;
     1240}
     1241
     1242@media screen and (min-width: 768px) {
     1243        .bp-user #buddypress table th {
     1244                font-size: 1.125em;
     1245        }
     1246        .bp-user #buddypress table td {
     1247                font-size: 0.9em;
     1248        }
     1249}
     1250
     1251@media screen and (min-width: 1168px) {
     1252        .bp-user #buddypress table th {
     1253                font-size: 1.35em;
     1254        }
     1255        .bp-user #buddypress table td {
     1256                font-size: 1.125em;
     1257        }
     1258}
     1259
     1260.bp-user #buddypress .pag-count {
     1261        font-style: italic;
     1262}
     1263
     1264.bp-user #buddypress .notifications-options-nav,
     1265.bp-user #buddypress .messages-options-nav {
     1266        float: left;
     1267        width: 100%;
     1268}
     1269
     1270@media screen and (min-width: 30em) {
     1271        .bp-user #buddypress .notifications-options-nav,
     1272        .bp-user #buddypress .messages-options-nav {
     1273                width: 50%;
     1274        }
     1275}
     1276
     1277.bp-user #buddypress .notifications-options-nav select,
     1278.bp-user #buddypress .notifications-options-nav input,
     1279.bp-user #buddypress .messages-options-nav select,
     1280.bp-user #buddypress .messages-options-nav input {
     1281        font-size: 0.9em;
     1282        outline: 0;
     1283        padding: 0;
     1284}
     1285
     1286.bp-user #buddypress .notifications-options-nav select,
     1287.bp-user #buddypress .messages-options-nav select {
     1288        float: left;
     1289        margin-right: 0;
     1290        width: 100%;
     1291}
     1292
     1293@media screen and (min-width: 30em) {
     1294        .bp-user #buddypress .notifications-options-nav select,
     1295        .bp-user #buddypress .messages-options-nav select {
     1296                width: 60%;
     1297        }
     1298}
     1299
     1300.bp-user #buddypress .notifications-options-nav input,
     1301.bp-user #buddypress .messages-options-nav input {
     1302        float: right;
     1303        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     1304        line-height: 1.5;
     1305        margin-top: 10px;
     1306        width: 100%;
     1307}
     1308
     1309.bp-user #buddypress .notifications-options-nav input[disabled]:hover,
     1310.bp-user #buddypress .messages-options-nav input[disabled]:hover {
     1311        background: none;
     1312}
     1313
     1314@media screen and (min-width: 30em) {
     1315        .bp-user #buddypress .notifications-options-nav input,
     1316        .bp-user #buddypress .messages-options-nav input {
     1317                margin-top: 0;
     1318                width: 38%;
     1319        }
     1320}
     1321
     1322/**
     1323        *-------------------------------------------
     1324        * @subsection 6.2.2.2 - Extended Profiles
     1325        *-------------------------------------------
     1326        */
     1327.bp-user #buddypress .profile h2 {
     1328        margin-bottom: 1em;
     1329}
     1330
     1331.bp-user #buddypress .profile .bp-widget h2 {
     1332        font-size: 1.35em;
     1333        background: #e6e5e5;
     1334        color: #111;
     1335        margin-bottom: 0;
     1336        padding: 0.4em;
     1337}
     1338
     1339.bp-user #buddypress .profile .bp-widget h2:before {
     1340        display: none;
     1341}
     1342
     1343.bp-user #buddypress .profile .bp-widget table {
     1344        margin-top: 0;
     1345}
     1346
     1347/* Edit Profile */
     1348.bp-user #buddypress .profile #profile-edit-form .button-nav:before,
     1349.bp-user #buddypress .profile #profile-edit-form .button-nav:after {
     1350        content: " ";
     1351        display: table;
     1352}
     1353
     1354.bp-user #buddypress .profile #profile-edit-form .button-nav:after {
     1355        clear: both;
     1356}
     1357
     1358.bp-user #buddypress .profile #profile-edit-form ul.button-nav {
     1359        border-bottom: 1px solid #eaeaea;
     1360        margin-left: 0;
     1361}
     1362
     1363.bp-user #buddypress .profile #profile-edit-form ul.button-nav li {
     1364        float: left;
     1365        margin-bottom: 0;
     1366}
     1367
     1368.bp-user #buddypress .profile #profile-edit-form ul.button-nav li.current {
     1369        border: 1px solid #eaeaea;
     1370        border-bottom-color: #fff;
     1371        margin-bottom: -1px;
     1372}
     1373
     1374.bp-user #buddypress .profile #profile-edit-form ul.button-nav a {
     1375        background: none;
     1376        border: 0;
     1377        font-size: 1.35em;
     1378}
     1379
     1380.bp-user #buddypress .profile #profile-edit-form .field-visibility-settings-toggle,
     1381.bp-user #buddypress .profile #profile-edit-form .field-visibility-settings {
     1382        font-size: 0.9em;
     1383}
     1384
     1385.bp-user #buddypress .profile #profile-edit-form .field-visibility-settings-close,
     1386.bp-user #buddypress .profile #profile-edit-form .visibility-toggle-link {
     1387        background: #f1f1f1;
     1388        color: #111;
     1389        padding: 0.2em 0.5em;
     1390}
     1391
     1392.bp-user #buddypress .profile .bp-avatar #bp-delete-avatar a {
     1393        font-size: inherit;
     1394}
     1395
     1396/**
     1397        *-------------------------------------------
     1398        * @subsection 6.2.2.3 - Groups
     1399        *-------------------------------------------
     1400        */
     1401@media screen and (min-width: 1168px) {
     1402        .bp-user #buddypress #groups-list li .item {
     1403                left: 5%;
     1404                width: 50%;
     1405        }
     1406}
     1407
     1408/**
     1409        *-------------------------------------------
     1410        * @subsection 6.2.2.5 - Private Messaging
     1411        *-------------------------------------------
     1412        */
     1413.bp-user #buddypress .message-action-unstar span.icon:before {
     1414        color: #0073aa;
     1415}
     1416
     1417.bp-user #buddypress #message-thread a {
     1418        border-bottom: 0;
     1419}
     1420
     1421.bp-user #buddypress #message-thread #message-subject {
     1422        background: #fff;
     1423        color: #111;
     1424        padding: 0.3em 0 0.3em 0.2em;
     1425}
     1426
     1427.bp-user #buddypress #message-thread #message-recipients {
     1428        font-style: italic;
     1429}
     1430
     1431.bp-user #buddypress #message-thread #message-recipients a.confirm {
     1432        border: 1px solid #eaeaea;
     1433        font-style: normal;
     1434}
     1435
     1436.bp-user #buddypress #message-thread .message-metadata:after {
     1437        clear: both;
     1438        content: "";
     1439        display: table;
     1440}
     1441
     1442.bp-user #buddypress #message-thread .message-metadata img.avatar {
     1443        float: none;
     1444}
     1445
     1446@media screen and (min-width: 768px) {
     1447        .bp-user #buddypress #message-thread .message-metadata img.avatar {
     1448                float: left;
     1449        }
     1450}
     1451
     1452.bp-user #buddypress #message-thread .message-metadata .message-star-actions {
     1453        float: right;
     1454        margin-right: 5px;
     1455        position: static;
     1456}
     1457
     1458.bp-user #buddypress #message-thread .message-content {
     1459        background: #f1f1f1;
     1460        border: 1px solid #eaeaea;
     1461        margin: 10px 0 0 0;
     1462        padding: 0.3em;
     1463}
     1464
     1465.bp-user #buddypress #message-thread #send-reply .message-content {
     1466        background: #fff;
     1467        border: 0;
     1468}
     1469
     1470.bp-user #buddypress #message-thread .alt {
     1471        background: #fff;
     1472}
     1473
     1474.bp-user #buddypress #message-threads thead tr {
     1475        background: #e6e5e5;
     1476}
     1477
     1478.bp-user #buddypress #message-threads thead th.bulk-select-all {
     1479        position: relative;
     1480        border: none;
     1481        padding-top: 0;
     1482}
     1483
     1484.bp-user #buddypress #message-threads thead th.bulk-select-all label {
     1485        clip: auto;
     1486        overflow: visible;
     1487        display: block;
     1488        word-break: keep-all;
     1489        left: 30px;
     1490        top: 15px;
     1491        white-space: nowrap;
     1492        font-size: 0.5625em;
     1493}
     1494
     1495.bp-user #buddypress #message-threads tr {
     1496        border: solid 1px #b7b7b7;
     1497}
     1498
     1499.bp-user #buddypress #message-threads tr td {
     1500        background: #fff;
     1501        display: inline-block;
     1502        float: none;
     1503        border: none;
     1504}
     1505
     1506.bp-user #buddypress #message-threads tr td.thread-star,
     1507.bp-user #buddypress #message-threads tr td.thread-options {
     1508        height: 2.4em;
     1509        padding-bottom: 0.2em;
     1510        padding-top: 0.2em;
     1511}
     1512
     1513@media screen and (max-width: 768px) {
     1514        .bp-user #buddypress #message-threads tr td.thread-star,
     1515        .bp-user #buddypress #message-threads tr td.thread-options {
     1516                padding-top: 0;
     1517        }
     1518}
     1519
     1520.bp-user #buddypress #message-threads tr td.bulk-select-check,
     1521.bp-user #buddypress #message-threads tr td.thread-from {
     1522        height: 2.6em;
     1523}
     1524
     1525.bp-user #buddypress #message-threads tr td.bulk-select-check img.avatar,
     1526.bp-user #buddypress #message-threads tr td.thread-from img.avatar {
     1527        display: inline-block;
     1528        width: auto;
     1529        height: auto;
     1530        vertical-align: text-top;
     1531}
     1532
     1533@media screen and (max-width: 600px) {
     1534        .bp-user #buddypress #message-threads tr td.bulk-select-check,
     1535        .bp-user #buddypress #message-threads tr td.thread-from {
     1536                height: 5.2em;
     1537        }
     1538}
     1539
     1540.bp-user #buddypress #message-threads tr td.thread-from,
     1541.bp-user #buddypress #message-threads tr td.thread-options {
     1542        border-left: 0 !important;
     1543        width: calc(100% - 30px);
     1544        margin-left: 0;
     1545}
     1546
     1547.bp-user #buddypress #message-threads tr td.thread-info {
     1548        padding-left: 41px;
     1549        width: 100%;
     1550}
     1551
     1552.bp-user #buddypress #message-threads tr td.thread-options {
     1553        text-align: right;
     1554}
     1555
     1556.bp-user #buddypress #message-threads tr td.thread-options a {
     1557        font-size: 0.5625em;
     1558        line-height: 2.2;
     1559}
     1560
     1561.bp-user #buddypress #message-threads tr span.from {
     1562        display: none;
     1563}
     1564
     1565.bp-user #buddypress #message-threads tr span.activity {
     1566        display: block;
     1567        float: right;
     1568        line-height: 2;
     1569}
     1570
     1571@media screen and (max-width: 600px) {
     1572        .bp-user #buddypress #message-threads tr span.activity {
     1573                clear: both;
     1574                font-size: 0.45em;
     1575                width: 100%;
     1576        }
     1577}
     1578
     1579.bp-user #buddypress #message-threads tr.unread td {
     1580        background: #dce5ff;
     1581        border: none;
     1582}
     1583
     1584.bp-user #buddypress #message-threads th {
     1585        display: none;
     1586}
     1587
     1588.bp-user #buddypress #message-threads th.bulk-select-all {
     1589        border-bottom: 0;
     1590        display: inline-block;
     1591        text-align: left;
     1592}
     1593
     1594.bp-user #buddypress #message-threads th.bulk-select-all,
     1595.bp-user #buddypress #message-threads td.bulk-select-check,
     1596.bp-user #buddypress #message-threads td.thread-star {
     1597        border-right: 0;
     1598        width: 30px;
     1599}
     1600
     1601.bp-user #buddypress .acfb-holder {
     1602        list-style: none;
     1603}
     1604
     1605.bp-user #buddypress .acfb-holder li {
     1606        margin-left: 0;
     1607}
     1608
     1609.bp-user #buddypress .acfb-holder li.friend-tab {
     1610        background: #edf7fa;
     1611        border: inherit;
     1612        margin-right: 0;
     1613        padding: 0.5em;
     1614}
     1615
     1616.bp-user #buddypress .acfb-holder li.friend-tab span.p {
     1617        padding-left: 10px;
     1618}
     1619
     1620.bp-user #buddypress .acfb-holder li.friend-tab span.p:focus, .bp-user #buddypress .acfb-holder li.friend-tab span.p:hover {
     1621        color: #c82b2b;
     1622        cursor: pointer;
     1623}
     1624
     1625.bp-user #buddypress .acfb-holder li.friend-tab a {
     1626        border-bottom: 0;
     1627        text-decoration: none;
     1628}
     1629
     1630.bp-user #buddypress .acfb-holder li.friend-tab a img {
     1631        display: inline-block;
     1632        height: 20px;
     1633        vertical-align: middle;
     1634        width: 20px !important;
     1635}
     1636
     1637.bp-user #buddypress #message-threads.sitewide-notices td {
     1638        width: 100%;
     1639}
     1640
     1641.bp-user #buddypress #message-threads.sitewide-notices td strong {
     1642        background: #e6e5e5;
     1643        color: #111;
     1644        display: block;
     1645        margin-bottom: 0.4em;
     1646        padding-left: 0.2em;
     1647}
     1648
     1649.bp-user #buddypress #message-threads.sitewide-notices td a {
     1650        display: inline-block;
     1651}
     1652
     1653.bp-user #buddypress #message-threads.sitewide-notices td:first-child {
     1654        display: none;
     1655}
     1656
     1657.bp-user #buddypress #message-threads.sitewide-notices td:first-child + td + td {
     1658        border-bottom: 0;
     1659}
     1660
     1661.bp-user #buddypress #message-threads.sitewide-notices td:first-child + td + td span {
     1662        line-height: 1;
     1663}
     1664
     1665.bp-user #buddypress #message-threads.sitewide-notices td:last-child {
     1666        border-bottom-color: #b7b7b7;
     1667        line-height: 1;
     1668        text-align: right;
     1669}
     1670
     1671.bp-user #buddypress #message-threads.sitewide-notices td:last-child a:last-child:after {
     1672        content: attr(title);
     1673        display: block;
     1674        line-height: initial;
     1675        text-indent: 0;
     1676}
     1677
     1678.bp-user .ac_results {
     1679        background: #eee;
     1680        padding-left: 10px;
     1681}
     1682
     1683.bp-user .ac_results ul {
     1684        margin: 0;
     1685}
     1686
     1687.bp-user .ac_results li {
     1688        margin: 10px 0;
     1689}
     1690
     1691.bp-user .ac_results li:focus, .bp-user .ac_results li:hover {
     1692        cursor: pointer;
     1693}
     1694
     1695/**
     1696        *------------------------------
     1697        * @subsection 6.2.2.6 - Settings
     1698        *------------------------------
     1699        */
     1700.bp-user #buddypress #settings-form > p {
     1701        font-size: 1.6875em;
     1702        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     1703        font-weight: 700;
     1704        letter-spacing: -0.02em;
     1705        line-height: 1.2;
     1706        -webkit-font-smoothing: antialiased;
     1707        margin: 20px 0 10px;
     1708}
     1709
     1710.bp-user #buddypress #settings-form > p:before {
     1711        background: #767676;
     1712        content: "\020";
     1713        display: block;
     1714        height: 2px;
     1715        margin: 1rem 0;
     1716        width: 1em;
     1717}
     1718
     1719.bp-user #buddypress table.notification-settings th.title {
     1720        width: 75%;
     1721}
     1722
     1723.bp-user #buddypress table.notification-settings td.yes,
     1724.bp-user #buddypress table.notification-settings td.no {
     1725        vertical-align: middle;
     1726}
     1727
     1728.bp-user #buddypress table.notification-settings td {
     1729        word-break: keep-all;
     1730}
     1731
     1732.bp-user #buddypress table.profile-settings {
     1733        width: 100%;
     1734}
     1735
     1736.bp-user #buddypress table.profile-settings th.field-group-name,
     1737.bp-user #buddypress table.profile-settings td.field-name {
     1738        width: 50%;
     1739}
     1740
     1741@media screen and (min-width: 768px) {
     1742        .bp-user #buddypress table.profile-settings th.field-group-name,
     1743        .bp-user #buddypress table.profile-settings td.field-name {
     1744                width: 70%;
     1745        }
     1746}
     1747
     1748.bp-user #buddypress table.profile-settings th.title,
     1749.bp-user #buddypress table.profile-settings td.field-visibility {
     1750        width: 30%;
     1751}
     1752
     1753.bp-user #buddypress table.profile-settings td.field-visibility select {
     1754        width: 100%;
     1755}
     1756
     1757/**
     1758*-------------------------------------------------------------------------------
     1759* @section 7.0 - Forms  - General
     1760*-------------------------------------------------------------------------------
     1761*/
     1762#buddypress input[type="submit"],
     1763#buddypress input[type="button"] {
     1764        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     1765        font-size: 0.9em;
     1766        background-color: #0073aa;
     1767        color: #fff;
     1768        border: none;
     1769        transition: background 150ms ease-in-out;
     1770}
     1771
     1772#buddypress input[type="submit"]:hover,
     1773#buddypress input[type="button"]:hover {
     1774        color: #fff;
     1775        background-color: #111;
     1776        border: none;
     1777}
     1778
     1779#buddypress div.activity-comments form .ac-textarea {
     1780        background: #f1f1f1;
     1781        border: 1px solid rgba(153, 153, 153, 0.3);
     1782}
     1783
     1784#buddypress div.activity-comments form .ac-textarea textarea {
     1785        background: none;
     1786        border: 0;
     1787}
     1788
     1789#buddypress select {
     1790        border: 1px solid rgba(153, 153, 153, 0.5);
     1791}
     1792
     1793#buddypress .wp-editor-wrap a.button,
     1794#buddypress .wp-editor-wrap button,
     1795#buddypress .wp-editor-wrap input[type="submit"],
     1796#buddypress .wp-editor-wrap input[type="button"],
     1797#buddypress .wp-editor-wrap input[type="reset"] {
     1798        padding: 0 5px 1px;
     1799}
     1800
     1801#buddypress .standard-form li,
     1802#buddypress .group-create-form li {
     1803        float: none;
     1804        list-style: none;
     1805}
     1806
     1807#buddypress .standard-form input[type="text"],
     1808#buddypress .standard-form textarea,
     1809#buddypress .group-create-form input[type="text"],
     1810#buddypress .group-create-form textarea {
     1811        width: 100%;
     1812}
     1813
     1814#buddypress .standard-form input[type="submit"],
     1815#buddypress .standard-form input[type="button"]#group-creation-previous,
     1816#buddypress .group-create-form input[type="submit"],
     1817#buddypress .group-create-form input[type="button"]#group-creation-previous {
     1818        line-height: 1.2;
     1819        outline: none;
     1820        padding: 0.76rem 1rem;
     1821}
     1822
     1823#buddypress .standard-form .radio label,
     1824#buddypress .group-create-form .radio label {
     1825        color: #111;
     1826}
     1827
     1828#buddypress .standard-form .editfield,
     1829#buddypress .group-create-form .editfield {
     1830        margin-bottom: 1em;
     1831}
     1832
     1833#buddypress div.dir-search,
     1834#buddypress div.message-search,
     1835#buddypress li.groups-members-search {
     1836        float: none;
     1837        margin: 10px 0;
     1838}
     1839
     1840#buddypress div.dir-search form,
     1841#buddypress div.message-search form,
     1842#buddypress li.groups-members-search form {
     1843        overflow: hidden;
     1844}
     1845
     1846#buddypress div.dir-search form label,
     1847#buddypress div.message-search form label,
     1848#buddypress li.groups-members-search form label {
     1849        float: left;
     1850        width: 80%;
     1851}
     1852
     1853#buddypress div.dir-search form input[type="text"],
     1854#buddypress div.message-search form input[type="text"],
     1855#buddypress li.groups-members-search form input[type="text"] {
     1856        float: left;
     1857        margin: 0 1em 0 0;
     1858        width: 80%;
     1859        outline-color: #fff;
     1860}
     1861
     1862#buddypress div.dir-search form input[type="text"],
     1863#buddypress div.dir-search form input[type="submit"],
     1864#buddypress div.message-search form input[type="text"],
     1865#buddypress div.message-search form input[type="submit"],
     1866#buddypress li.groups-members-search form input[type="text"],
     1867#buddypress li.groups-members-search form input[type="submit"] {
     1868        font-size: 0.9em;
     1869        border: 0;
     1870        line-height: inherit;
     1871}
     1872
     1873#buddypress div.dir-search form input[type="text"],
     1874#buddypress div.message-search form input[type="text"],
     1875#buddypress li.groups-members-search form input[type="text"] {
     1876        padding: 0.2em 0 0.2em 0.2em;
     1877}
     1878
     1879#buddypress div.dir-search form input[type="submit"],
     1880#buddypress div.message-search form input[type="submit"],
     1881#buddypress li.groups-members-search form input[type="submit"] {
     1882        float: right;
     1883        font-weight: 400;
     1884        padding: 0.2em 1em;
     1885        text-align: center;
     1886        text-transform: none;
     1887        width: 20%;
     1888}
     1889
     1890@media screen and (min-width: 600px) {
     1891        #buddypress div.dir-search,
     1892        #buddypress div.message-search,
     1893        #buddypress li.groups-members-search {
     1894                float: right;
     1895                margin-bottom: 5px !important;
     1896        }
     1897        #buddypress div.dir-search form label,
     1898        #buddypress div.dir-search form input[type="text"],
     1899        #buddypress div.dir-search form input[type="submit"],
     1900        #buddypress div.message-search form label,
     1901        #buddypress div.message-search form input[type="text"],
     1902        #buddypress div.message-search form input[type="submit"],
     1903        #buddypress li.groups-members-search form label,
     1904        #buddypress li.groups-members-search form input[type="text"],
     1905        #buddypress li.groups-members-search form input[type="submit"] {
     1906                width: auto;
     1907        }
     1908}
     1909
     1910@media screen and (min-width: 1168px) {
     1911        #buddypress .dir-search form input[type="text"],
     1912        #buddypress .message-search form input[type="text"] {
     1913                font-size: 1.125em;
     1914        }
     1915        #buddypress .dir-search form input[type="submit"],
     1916        #buddypress .message-search form input[type="submit"] {
     1917                font-size: 1.125em;
     1918        }
     1919}
     1920
     1921/**
     1922*-------------------------------------------------------------------------------
     1923* @section 8.0 - Tables - General
     1924*-------------------------------------------------------------------------------
     1925*/
     1926#buddypress table {
     1927        font-size: 0.9em;
     1928        margin: 20px 0;
     1929}
     1930
     1931#buddypress table tr th {
     1932        background: #e6e5e5;
     1933        border-color: #b7b7b7;
     1934        color: #111;
     1935}
     1936
     1937#buddypress table p {
     1938        margin-bottom: 0.5em;
     1939}
     1940
     1941@media screen and (min-width: 1168px) {
     1942        #buddypress table {
     1943                font-size: 0.9em;
     1944        }
     1945}
     1946
     1947/*__ User Account tables __*/
     1948#buddypress .notifications th,
     1949#buddypress .messages-notices th {
     1950        width: 30%;
     1951}
     1952
     1953#buddypress .notifications th.bulk-select-all,
     1954#buddypress .messages-notices th.bulk-select-all {
     1955        text-align: center;
     1956        width: 10%;
     1957}
     1958
     1959#buddypress .notifications .bulk-select-check,
     1960#buddypress .notifications .thread-star,
     1961#buddypress .messages-notices .bulk-select-check,
     1962#buddypress .messages-notices .thread-star {
     1963        text-align: center;
     1964}
     1965
     1966#buddypress .notifications .notification-actions,
     1967#buddypress .notifications td.thread-options,
     1968#buddypress .messages-notices .notification-actions,
     1969#buddypress .messages-notices td.thread-options {
     1970        text-align: center;
     1971}
     1972
     1973#buddypress .notifications .notification-actions a,
     1974#buddypress .notifications td.thread-options a,
     1975#buddypress .messages-notices .notification-actions a,
     1976#buddypress .messages-notices td.thread-options a {
     1977        display: inline-block;
     1978        margin: 0;
     1979        padding: 0;
     1980}
     1981
     1982/**
     1983*-------------------------------------------------------------------------------
     1984* @section 9.0 - Error / Success messages
     1985*-------------------------------------------------------------------------------
     1986*/
     1987#buddypress #item-body div#message {
     1988        margin-top: 20px;
     1989}
     1990
     1991@media screen and (min-width: 1168px) {
     1992        #buddypress #item-body div#message {
     1993                margin-right: 20px;
     1994        }
     1995}
     1996
     1997#buddypress div#message p {
     1998        font-size: 1.125em;
     1999        font-weight: 700;
     2000}
     2001
     2002#buddypress div#message.info p {
     2003        background: #c6e4ee;
     2004        border: 1px solid #78bed6;
     2005        color: #1e5264;
     2006}
     2007
     2008#buddypress div#message.updated p {
     2009        background: #dee6b2;
     2010        border: 1px solid #becc66;
     2011        color: #454d19;
     2012}
     2013
     2014.delete-group #buddypress div#message.info p {
     2015        background: #db7e7e;
     2016        border: 1px solid #be3535;
     2017        color: #1f0808;
     2018}
     2019
     2020/**
     2021*-------------------------------------------------------------------------------
     2022* @section 10.0 - Ajax Loading, Widgets, General classes
     2023*-------------------------------------------------------------------------------
     2024*/
     2025#buddypress a.button {
     2026        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     2027        font-size: 0.675em;
     2028        background-color: #0073aa;
     2029        color: #fff;
     2030        border: none;
     2031        transition: background 150ms ease-in-out;
     2032        padding: 8px;
     2033}
     2034
     2035#buddypress a.button:hover {
     2036        color: #fff;
     2037        background-color: #111;
     2038        border: none;
     2039}
     2040
     2041#buddypress a.button span {
     2042        color: #0073aa;
     2043        background-color: #fff;
     2044}
     2045
     2046#buddypress a.button:hover span {
     2047        color: #0073aa;
     2048        background-color: #fff;
     2049}
     2050
     2051#buddypress a.button.bp-secondary-action {
     2052        color: #0073aa;
     2053        background-color: #fff;
     2054        border: solid 1px #0073aa;
     2055}
     2056
     2057#buddypress a.button.bp-secondary-action:hover {
     2058        color: #fff;
     2059        background-color: #111;
     2060        border-color: #111;
     2061}

  • new file src/bp-templates/bp-legacy/css/twentynineteen.scss 

    diff --git src/bp-templates/bp-legacy/css/twentynineteen.scss src/bp-templates/bp-legacy/css/twentynineteen.scss
new file mode 100644
index 000000000..b4db5bd4b
    - +  
     1// Stylesheet Guidence Notes
     2// Table of content represents a guide to sections of the sheet.
     3// Note that not all sections may be described in the body of the
     4// rulesets only those that require styles for a given theme.
     5// Sub sections might not exist but can be added as required
     6// as per BP Lists - 'activity' section.
     7
     8// Twenty Nineteen Media Queries / Breakpoints
     9// @media screen and (min-width: 600px)  // Mobile width
     10// @media screen and (min-width: 768px)  // Tablet width
     11// @media screen and (min-width: 1168px) // Desktop width
     12// @media screen and (min-width: 1379px) // Wide width
     13
     14// Mixins and Variables
     15
     16// Common margin values
     17$spacing-val-lg: 40px;
     18$spacing-val-md: 20px;
     19$spacing-val-sm: 10px;
     20$spacing-val-xs: 5px;
     21
     22// Responsive widths.
     23$mobile_width: 600px;
     24$tablet_width: 768px;
     25$desktop_width: 1168px;
     26$wide_width: 1379px;
     27
     28// A simple mixin to handle font-sizing.
     29@mixin font-size($font-size: 1) {
     30        $font__size-ratio: 1.125;
     31        font-size: 1em * ($font-size * $font__size-ratio);
     32}
     33
     34// Border border-radius mixins
     35@mixin border-radius($radius) {
     36        -webkit-border-radius: $radius;
     37        -moz-border-radius: $radius;
     38        -ms-border-radius: $radius;
     39        border-radius: $radius;
     40        background-clip: padding-box;
     41}
     42
     43@mixin border-top-radius($radius) {
     44        -webkit-border-top-right-radius: $radius;
     45        border-top-right-radius: $radius;
     46        -webkit-border-top-left-radius: $radius;
     47        border-top-left-radius: $radius;
     48        background-clip: padding-box;
     49}
     50
     51@mixin border-right-radius($radius) {
     52        -webkit-border-bottom-right-radius: $radius;
     53        border-bottom-right-radius: $radius;
     54        -webkit-border-top-right-radius: $radius;
     55        border-top-right-radius: $radius;
     56        background-clip: padding-box;
     57}
     58
     59@mixin border-bottom-radius($radius) {
     60        -webkit-border-bottom-right-radius: $radius;
     61        border-bottom-right-radius: $radius;
     62        -webkit-border-bottom-left-radius: $radius;
     63        border-bottom-left-radius: $radius;
     64        background-clip: padding-box;
     65}
     66
     67@mixin border-left-radius($radius) {
     68        -webkit-border-bottom-left-radius: $radius;
     69        border-bottom-left-radius: $radius;
     70        -webkit-border-top-left-radius: $radius;
     71        border-top-left-radius: $radius;
     72        background-clip: padding-box;
     73}
     74
     75// Box sizing
     76@mixin box-model($box-model) {
     77        -webkit-box-sizing: $box-model;
     78        -moz-box-sizing: $box-model;
     79        box-sizing: $box-model;
     80}
     81
     82// Calc
     83@mixin calc($property, $expression) {
     84        #{$property}: -webkit-calc(#{$expression});
     85        #{$property}: -moz-calc(#{$expression});
     86        #{$property}: calc(#{$expression});
     87}
     88
     89// BP message boxes
     90@mixin message-box($background, $text-color: null) {
     91
     92        @if $text-color {
     93                // if a param was passed through
     94                $text-color: $text-color;
     95        } @else {
     96                $text-color: darken($background, 50%);
     97        }
     98
     99        background: lighten($background, 10%);
     100        border: 1px solid darken($background, 10%);
     101        color: $text-color;
     102}
     103
     104// Twenty Nineteen font family
     105@mixin body-font() {
     106        font-family: NonBreakingSpaceOverride, "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
     107}
     108
     109@mixin headings-font() {
     110        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     111}
     112
     113// Variables: color definitions
     114$content-background: #fff;
     115$light-background:   #f1f1f1;
     116$medium-background:  #ccc;
     117$dark-background:    #0073aa;
     118$border-color:       #999;    // border color is varied using rgba
     119$border-light:       #eaeaea; // BP dividers
     120$border-med:         #ddd;
     121$body-text:          #111;    // 2019 body text color
     122$notice-error:       #c85a6e;
     123$notice-warning:     #d05656;
     124$notice-info:        #9fd1e2;
     125$notice-update:      #ced98c;
     126$stripe-odd:         #ebf0ff;
     127$stripe-even:        #dbe5ff;
     128$unread:             #dce5ff;
     129$link-action:        #c82b2b;
     130
     131@mixin button($font-size: 1) {
     132
     133        @include headings-font();
     134        @include font-size($font-size);
     135        background-color: $dark-background;
     136        color: $content-background;
     137        border: none;
     138        transition: background 150ms ease-in-out;
     139
     140        &:hover {
     141                color: $content-background;
     142                background-color: $body-text;
     143                border: none;
     144        }
     145}
     146
     147/*------------------------------------------------------------------------------
     148
     149This is the BuddyPress companion stylesheet for
     150the WordPress Twenty Nineteen theme.
     151
     152@version 5.0.0
     153
     154This sheet supports the primary BuddyPress styles in buddypress.css
     155
     156If you are running as a child theme of twentynineteen this stylesheet will be
     157loaded by default. If you want to modify the styles the normal BP Theme Compat
     158hierarchy works and you can copy the file to buddypress/css/ or community/css/
     159in your child themes root & either start over or modify the rulesets.
     160
     161If you do not require the styles you can dequeue them from the themes
     162functions file.
     163
     164Please see this codex article for more information:
     165http://codex.buddypress.org/themes/buddypress-companion-stylesheets/
     166
     167--------------------------------------------------------------------------------
     168>>> TABLE OF CONTENTS:
     169--------------------------------------------------------------------------------
     1701.0 Theme Structural Elements & overrides
     1712.0 - Navigation - General
     172        2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     173        2.2 - Pagination
     1743.0 - Images
     1754.0 - BP Lists / Loops Generic
     176        4.1 - Activity Loop
     177                4.1.1 Whats New Activity
     178                4.1.2 - Activity Listing
     179                4.1.3 - Activity Comments
     180        4.2 - Members Loop
     181        4.3 - Groups Loop
     182        4.4 - Blogs Loop
     1835.0 - Directories - Members, Groups, Blogs, Forums
     1846.0 - Single Item screens: User Account & Single Group Screens
     185        6.1 - Item Headers: Global
     186                6.1.1 - item-header: Groups
     187                6.1.2 - item-header: User Accounts
     188        6.2 - Item Body: Global
     189                6.2.1 - item-body: Groups
     190                        6.2.1.1 - Management settings screens
     191                        6.2.1.2 - Group members list
     192                        6.2.1.3 - Group Send Invites
     193                6.2.2 - item-body: User Accounts
     194                        6.2.2.1 - classes, pag, filters
     195                        6.2.2.2 - Extended Profiles
     196                        6.2.2.3 - Groups
     197                        6.2.2.4 - friends
     198                        6.2.2.5 - Private Messaging Threads
     199                        6.2.2.6 - Settings
     2007.0 - Forms  -  General
     2018.0 - Tables -  General
     2029.0 - Error / Success Messages
     20310.0 - Ajax Loading, Widgets, General classes
     204------------------------------------------------------------------------------*/
     205
     206/**
     207*-------------------------------------------------------------------------------
     208* @section 1.0 - Theme - Structural Elements & overrides
     209*-------------------------------------------------------------------------------
     210*/
     211
     212// Twenty Nineteen  adds a generic grouped ruleset of clear:both;
     213// for all heading h# elements this is problematic where floats are concerned
     214// We reset this here under our #buddypress namespace
     215#buddypress {
     216
     217        h1,
     218        h2,
     219        h3,
     220        h4,
     221        h5,
     222        h6 {
     223                clear: none;
     224        }
     225}
     226
     227body.buddypress {
     228
     229        @media screen and (max-width: $wide_width ) {
     230
     231                .entry .entry-content > * {
     232                        float: none;
     233                        max-width: none;
     234                }
     235        } // close @media
     236} // .buddypress (body class)
     237
     238/**
     239*-------------------------------------------------------------------------------
     240* @section 2.0 - Navigation - General
     241*-------------------------------------------------------------------------------
     242*/
     243
     244/**
     245*----------------------------------------------------------
     246* @section 2.1 - Navs Object Nav / Sub Nav (item-list-tabs)
     247*
     248* The main navigational elements for all BP screens
     249*----------------------------------------------------------
     250*/
     251
     252// We have a need to override BP specifity
     253// so some rulesets sets are seemingly over weighted in selectors
     254
     255#buddypress {
     256
     257        // active/current states all navs
     258        div.item-list-tabs {
     259
     260                ul {
     261
     262                        li.selected {
     263
     264                                a {
     265                                        background: $dark-background;
     266                                        color: #fff;
     267                                        opacity: 1;
     268                                }
     269                        }
     270                }
     271        }
     272        // Global Nav Styles
     273        div.item-list-tabs {
     274
     275                ul {
     276                        background-color: $content-background;
     277                        overflow: hidden;
     278                        padding: $spacing-val-xs 0;
     279
     280                        li {
     281
     282                                a {
     283                                        font-weight: 600;
     284
     285                                        span {
     286                                                border-radius: 25%;
     287                                        }
     288
     289                                        &:hover {
     290                                                background: $body-text;
     291                                                color: $content-background;
     292                                        }
     293                                }
     294                        }
     295                }
     296        }
     297
     298        /*__ Horizontal menus __*/
     299        #object-nav {
     300
     301                ul {
     302                        overflow: hidden;
     303
     304                        li {
     305                                float: none;
     306                        }
     307
     308                        li:not(.selected) {
     309
     310                                a {
     311                                        opacity: 0.7;
     312
     313                                        &:hover {
     314                                                opacity: 1;
     315                                        }
     316                                }
     317                        }
     318
     319                        @media screen and (min-width: $mobile_width) {
     320
     321                                li {
     322                                        float: left;
     323                                }
     324                        }
     325                }
     326        }
     327
     328        div#subnav.item-list-tabs {
     329                margin-top: 0;
     330
     331                ul {
     332                        background-color: $content-background;
     333                        border-bottom: 0;
     334                        padding: 0;
     335
     336                        li.last {
     337                                background: $content-background;
     338                                margin-top: 0;
     339                                padding: $spacing-val-xs $spacing-val-xs $spacing-val-xs 0;
     340                                width: 100%;
     341
     342                                select,
     343                                select:focus {
     344                                        background: transparent;
     345                                        border: 0;
     346                                        outline: 0;
     347                                }
     348
     349                                select,
     350                                label,
     351                                option {
     352
     353                                        @include font-size(0.8);
     354                                }
     355
     356                                select {
     357                                        font-style: italic;
     358                                }
     359                        }
     360
     361                        @media screen and (min-width: $mobile_width) {
     362
     363                                li.last {
     364                                        text-align: right;
     365                                }
     366                        }
     367                } // close ul
     368        } // close #subnav
     369
     370        // active/current states all navs
     371        div.item-list-tabs {
     372
     373                ul {
     374
     375                        li.selected,
     376                        li.current {
     377
     378                                a {
     379                                        background: $dark-background;
     380                                        color: #fff;
     381                                        opacity: 1;
     382                                }
     383                        }
     384                }
     385        }
     386
     387} // close #buddypress
     388
     389/*__ Vertical menu User Account / Group single screens __*/
     390
     391// This block contains rules to re-factor the item-body structural element
     392// to sit alongside the vert menu
     393
     394@media screen and (min-width: $desktop_width) {
     395
     396        #buddypress {
     397
     398                #item-header,
     399                #item-body {
     400                        background: $content-background;
     401                }
     402
     403                #object-nav {
     404                        border-right: 1px solid $border-med;
     405                        float: left;
     406                        margin-right: -1px;
     407                        width: 200px;
     408
     409                        ul {
     410                                border-bottom: 0;
     411                                padding: 0;
     412
     413                                li {
     414                                        float: none;
     415                                        overflow: hidden;
     416
     417                                        span {
     418                                                background: $content-background;
     419                                                border-radius: 10%;
     420                                                float: right;
     421                                                margin-right: 2px;
     422                                        }
     423                                }
     424                        }
     425                }
     426
     427                #item-body {
     428                        border-left: 1px solid $border-med;
     429                        overflow: hidden;
     430                        padding: 0 0 0 $spacing-val-md;
     431                        width: auto;
     432
     433                        #subnav {
     434                                margin: 0 0 0 (-$spacing-val-md);
     435                        }
     436                }
     437
     438        } // close  #buddypress
     439} // close @media
     440
     441/**
     442*----------------------------------------------------------
     443* @section 2.2 - Pagination
     444*----------------------------------------------------------
     445*/
     446
     447#buddypress {
     448
     449        div.pagination {
     450                box-shadow: none;
     451
     452                .pag-count {
     453                        margin-left: 0;
     454                }
     455
     456                .pagination-links {
     457                        margin-right: 0;
     458
     459                        span,
     460                        a {
     461                                height: auto;
     462                                line-height: 1;
     463                                padding: 5px;
     464                        }
     465
     466                        .prev,
     467                        .next {
     468                                background-color: transparent;
     469                                color: inherit;
     470                                overflow: visible;
     471                                width: auto;
     472
     473                                &:before {
     474                                        display: none;
     475                                }
     476                        }
     477
     478                        .prev {
     479                                left: auto;
     480                                position: static;
     481                        }
     482
     483                        .next {
     484                                position: static;
     485                                right: auto;
     486                        }
     487                } // close .pagination-links
     488        } // close .pagination
     489} // close #buddypress
     490
     491/**
     492*-------------------------------------------------------------------------------
     493* @section 4.0 - BP Lists / Loops Generic
     494*-------------------------------------------------------------------------------
     495*/
     496
     497// Adjusts Meta items and various elements to match Twenty Nineteen font-family
     498#buddypress {
     499
     500        .item-list {
     501
     502                .activity-header,
     503                .activity-meta {
     504
     505                        @include body-font();
     506                }
     507
     508                a.activity-time-since {
     509                        color: #717171;
     510                }
     511        }
     512}
     513
     514// Trying to position the action div absolute has bad consequences where
     515// aditional items are displayed, floating is an alternative that
     516// allows natural flow expansion.
     517// This block:
     518// * Manages li items, Stacks them small screen, floated left at wider screens.
     519// * Adjusts display of action buttons at small screen mobile up.
     520// Adjusts Meta items to match Twenty Nineteen font-family
     521
     522#buddypress {
     523
     524        ul.item-list {
     525
     526                li {
     527                        overflow: hidden !important;
     528
     529                        // Undo BP floats to center avatars initially mobile up
     530                        .item-avatar {
     531                                margin-bottom: $spacing-val-sm;
     532
     533                                @media screen and (min-width: $mobile_width) {
     534                                        margin-bottom: 0;
     535                                }  // close @media
     536
     537                                text-align: center;
     538
     539                                a {
     540                                        border-bottom: 0;
     541                                }
     542
     543                                img.avatar {
     544                                        display: inline-block;
     545                                        float: none;
     546                                        // Quite early on we need to move avatars to the left(right)
     547                                        @media screen and (min-width: $mobile_width) {
     548                                                display: block;
     549                                                float: left;
     550                                        }  // close @media
     551                                }
     552                        }
     553
     554                        .item {
     555                                margin-left: 70px;
     556
     557                                .item-title {
     558
     559                                        span.update {
     560                                                display: block;
     561                                        }
     562                                }
     563
     564                                span.activity {
     565                                        display: block;
     566                                        font-style: italic;
     567                                }
     568
     569                                .item-desc {
     570                                        margin-left: 0;
     571                                }
     572                        }
     573
     574                        div.action {
     575                                // remove BP margin left
     576                                margin-left: 0;
     577
     578                                div {
     579                                        display: inline-block;
     580                                        margin: $spacing-val-sm 0;
     581                                        width: 100%;
     582
     583                                        a {
     584                                                display: block;
     585                                                width: 100%;
     586
     587                                                @include button(0.6);
     588                                                @include border-radius(5px);
     589                                                font-weight: 600;
     590                                        }
     591
     592                                        @media screen and (min-width: $mobile_width) {
     593                                                // keep buttons to a row small tablet up
     594                                                margin: 0 $spacing-val-sm $spacing-val-sm 0;
     595                                                width: auto;
     596                                        } // close @media
     597
     598                                } // close div
     599
     600                                .meta {
     601                                        font-style: italic;
     602                                }
     603
     604                        } // close .action
     605
     606                } // close li
     607
     608                li.bp-single-group {
     609
     610                        .meta {
     611                                display: block;
     612                        }
     613                }
     614        } // close .item-list
     615} // close #buddypress
     616
     617/**
     618*----------------------------------------------------------
     619* @section 4.1 - Activity
     620*----------------------------------------------------------
     621*/
     622
     623/**
     624*-----------------------------------------------------
     625* @section 4.1.1 - Activity Whats New
     626*-----------------------------------------------------
     627*/
     628
     629#buddypress {
     630
     631        form#whats-new-form {
     632
     633                // Line-height issue inherited from BP rules, override.
     634                p.activity-greeting {
     635                        line-height: 1.4;
     636                }
     637
     638                #whats-new {
     639
     640                        &:focus {
     641                                border-color: $dark-background;
     642                                outline: thin solid rgba(0, 115, 170, 0.15);
     643                                outline-offset: -4px;
     644                        }
     645                }
     646
     647                #whats-new-submit input {
     648                        line-height: 1.2;
     649                        outline: none;
     650                        padding: 0.76rem 1rem;
     651                }
     652
     653                // corrective measure for clipped elements due to JS inline styling
     654
     655                @media screen and (max-width: 30em) {
     656
     657                        #whats-new-post-in-box {
     658
     659                                select {
     660
     661                                        @include font-size(0.8);
     662                                        max-width: 120px;
     663                                }
     664                        }
     665                } // close @media
     666
     667                @media screen and (max-width: $mobile_width) {
     668
     669                        #whats-new-content {
     670                                clear: left;
     671                                margin: $spacing-val-sm 0 $spacing-val-lg;
     672                                padding: $spacing-val-sm 0 0;
     673
     674                                #whats-new-submit {
     675                                        float: none;
     676
     677                                        input {
     678                                                width: 100%;
     679                                        }
     680                                }
     681                        }
     682
     683                        #whats-new-options {
     684                                display: flex;
     685                                flex-direction: column;
     686
     687                                #whats-new-submit {
     688                                        order: 2;
     689                                }
     690
     691                                #whats-new-post-in-box {
     692                                        order: 1;
     693                                }
     694                        }
     695                } // close @media
     696
     697                #whats-new-options[style] {
     698
     699                        #whats-new-post-in-box {
     700                                border: 1px solid rgba($border-color, 0.5);
     701                                float: left;
     702                                line-height: 1.5;
     703                                margin-top: 12px;
     704                                padding-left: 0.2em;
     705                                width: 100%;
     706
     707                                select {
     708                                        background: none;
     709                                        border: 0;
     710                                        float: right;
     711                                        margin: 0;
     712                                        min-height: 1.5em;
     713                                        outline: 0;
     714                                        padding-left: 0.4em;
     715                                }
     716                        }
     717
     718                        @media screen and (min-width: 30em) {
     719
     720                                #whats-new-post-in-box {
     721                                        width: auto;
     722                                }
     723
     724                                #whats-new-submit {
     725                                        float: right;
     726                                }
     727                        } // close @media
     728
     729                } // close #whats-new-options
     730
     731        } // close #whats-new-form
     732
     733        // User account form requires matching bp default specificity
     734        #item-body {
     735
     736                form#whats-new-form {
     737                        margin: $spacing-val-lg 0;
     738                }
     739        }
     740} // close #buddypress
     741
     742/**
     743*-----------------------------------------------------
     744* @section 4.1.2 - Activity Listing
     745*-----------------------------------------------------
     746*/
     747
     748#buddypress {
     749
     750        #activity-stream {
     751
     752                // re-size activity avatars and stack small screen
     753                // refactor main elements positioning medium up.
     754                li {
     755                        padding: 25px 0 15px;
     756
     757                        .activity-avatar {
     758                                float: none;
     759                                text-align: center;
     760
     761                                a {
     762                                        display: inline-block;
     763
     764                                        img.avatar {
     765                                                display: inline-block;
     766                                                float: none;
     767                                                height: 50px;
     768                                                width: 50px;
     769                                                margin-bottom: $spacing-val-md;
     770                                                margin-left: 0;
     771                                        }
     772                                }
     773                        } // close .activity-avatar
     774
     775                        .activity-content {
     776                                margin-left: 0;
     777
     778                                .activity-header {
     779
     780                                        @include font-size(0.6);
     781                                }
     782                        }
     783
     784                        @media screen and (min-width: $tablet_width) {
     785
     786                                .activity-avatar {
     787                                        float: left;
     788                                        margin-right: $spacing-val-sm;
     789                                        text-align: left;
     790
     791                                        a {
     792                                                border-bottom: 0;
     793                                        }
     794                                }
     795
     796                                .activity-content {
     797                                        margin: 0;
     798                                        overflow: hidden;
     799
     800                                        .activity-header {
     801
     802                                                @include font-size(0.8);
     803                                        }
     804                                }
     805
     806                        } // close @media
     807
     808                } // close li
     809
     810                li.mini {
     811
     812                        .activity-avatar {
     813
     814                                a {
     815
     816                                        img.avatar {
     817                                                height: 30px;
     818                                                margin-left: 15px;
     819                                                margin-top: 5px;
     820                                                width: 30px;
     821                                        }
     822                                }
     823                        }
     824
     825                        .activity-content {
     826
     827                                .activity-header {
     828
     829                                        @include font-size(0.6);
     830                                }
     831
     832                                @media screen and (min-width: $tablet_width) {
     833
     834                                        .activity-header {
     835
     836                                                @include font-size(0.8);
     837                                        }
     838                                } // close @media
     839                        }
     840                }
     841
     842                .activity-content {
     843                        margin-top: -12px;
     844
     845                        .activity-header {
     846                                line-height: inherit;
     847                                margin-right: 0;
     848
     849                                p {
     850                                        color: #717171;
     851                                        padding: 0 0.2em;
     852                                }
     853
     854                                img.avatar {
     855                                        display: inline-block;
     856                                        vertical-align: text-top;
     857                                        width: 20px;
     858                                        height: 20px;
     859                                }
     860                        } // close .activity-header
     861
     862                        .activity-meta {
     863
     864                                a {
     865                                        display: block;
     866                                        margin: 0 0 $spacing-val-xs;
     867
     868                                        @media screen and (min-width: $mobile_width) {
     869                                                display: inline-block;
     870                                                margin: 0;
     871                                        } // close @media
     872                                }
     873
     874                                a.button {
     875                                        padding: 8px;
     876                                        background-color: $content-background;
     877                                        color: $dark-background;
     878
     879                                        span {
     880                                                color: $content-background;
     881                                                background-color: $dark-background;
     882                                        }
     883
     884                                        &:hover {
     885                                                text-decoration: underline;
     886                                                color: darken($dark-background, 10%);
     887                                        }
     888                                }
     889
     890                                a.button.bp-secondary-action {
     891                                        border: none;
     892                                }
     893
     894                                a.button.delete-activity,
     895                                a.button.delete-activity-single {
     896                                        color: $notice-warning;
     897
     898                                        &:hover {
     899                                                text-decoration: underline;
     900                                                color: darken($notice-warning, 10%);
     901                                        }
     902                                }
     903                        }
     904
     905                } // close .activity-content
     906
     907                .load-more {
     908                        background: $light-background;
     909                        border: 1px solid transparent;
     910                        padding: $spacing-val-sm;
     911
     912                        &:focus,
     913                        &:hover {
     914                                background: darken($light-background, 1%);
     915                                border: 1px solid rgba(#9fd1e2, 0.3);
     916
     917                                a {
     918                                        font-style: italic;
     919                                }
     920                        }
     921
     922                        a {
     923                                display: block;
     924                        }
     925                }
     926
     927        } // close #activity-stream
     928} // close #buddypress
     929
     930/* Single activity view  - activity permalink */
     931
     932.activity-permalink {
     933
     934        #buddypress {
     935                background: none; // counter the .bp-user faux column background
     936                #activity-stream {
     937
     938                        li.activity-item {
     939                                padding: $spacing-val-md 0;
     940                        }
     941
     942                        .activity-avatar img.avatar {
     943                                width: auto;
     944                                height: auto;
     945                        }
     946
     947                        li.mini {
     948
     949                                .activity-avatar img.avatar {
     950                                        width: 65px;
     951                                        height: 65px;
     952                                }
     953
     954                                .activity-header {
     955
     956                                        @include font-size(0.6);
     957
     958                                        @media screen and (min-width: $tablet_width) {
     959
     960                                                @include font-size(0.8);
     961                                        } // close @media
     962
     963                                        margin-bottom: $spacing-val-lg;
     964
     965                                        p {
     966                                                padding: $spacing-val-md;
     967                                        }
     968                                }
     969                        }
     970                }
     971        }
     972}
     973
     974/**
     975*-----------------------------------------------------
     976* @section 4.1.3 - Activity Comments
     977*-----------------------------------------------------
     978*/
     979#buddypress {
     980
     981        #activity-stream {
     982
     983                .activity-comments {
     984                        margin: $spacing-val-sm 0 0;
     985
     986                        a {
     987                                color: #717171;
     988                        }
     989
     990                        &.has-comments {
     991                                border-left: 1px solid $border-light;
     992                        }
     993
     994                        .ac-form {
     995                                padding: $spacing-val-md 0 0;
     996                        }
     997
     998                        > ul {
     999                                background: rgba($light-background, 0.6);
     1000                                margin: 15px 0 0 2px;
     1001
     1002                                @media screen and (min-width: $mobile_width) {
     1003                                        margin-left: 70px;
     1004                                } // close @media
     1005
     1006                                ul {
     1007                                        // all nested ul margins & padding flattened initially
     1008                                        margin-left: 1%;
     1009                                        padding-left: 0;
     1010
     1011                                        @media screen and (min-width: 30em) {
     1012                                                margin-left: 1%;
     1013                                                padding-left: 1em;
     1014                                        } // close @media
     1015                                }
     1016
     1017                                ul li {
     1018                                        border-left: 1px solid $border-light;
     1019                                        border-top: 0;
     1020                                        padding-left: 0.2em;
     1021                                }
     1022
     1023                                .acomment-meta {
     1024                                        border-bottom: 1px solid $border-light;
     1025                                        color: #737373;
     1026                                        font-style: italic;
     1027                                }
     1028
     1029                                // Display the user avatar stacked up to 30em
     1030                                // reduce/widen the content margins
     1031                                @media screen and (max-width: $mobile_width) {
     1032
     1033                                        .acomment-avatar {
     1034                                                display: block;
     1035                                                text-align: center;
     1036
     1037                                                a,
     1038                                                img.avatar {
     1039                                                        display: inline;
     1040                                                        float: none;
     1041                                                }
     1042                                        }
     1043
     1044                                        .acomment-content,
     1045                                        .acomment-meta,
     1046                                        .acomment-options {
     1047                                                margin: $spacing-val-xs;
     1048                                        }
     1049
     1050                                        .acomment-content {
     1051                                                padding: 0 $spacing-val-sm;
     1052                                        }
     1053                                } // close @media
     1054
     1055                        } // close the ul li comments construct
     1056
     1057                        .ac-reply-avatar {
     1058                                display: none;
     1059                        }
     1060
     1061                        .ac-reply-content {
     1062                                margin-left: 0;
     1063                                padding-left: 0;
     1064                        }
     1065
     1066                        @media screen and (min-width: $mobile_width) {
     1067
     1068                                .ac-reply-avatar {
     1069                                        display: block;
     1070                                }
     1071
     1072                                .ac-reply-content {
     1073                                        overflow: hidden;
     1074                                }
     1075                        } // close @media
     1076
     1077                        .ac-reply-avatar img {
     1078                                border: none;
     1079                        }
     1080
     1081                        .ac-form {
     1082
     1083                                input[type="submit"],
     1084                                .ac-reply-cancel {
     1085                                        display: inline-block;
     1086
     1087                                        @include font-size(0.6);
     1088                                        line-height: 1.2;
     1089                                        padding: 4px 10px;
     1090                                        width: 100px;
     1091                                }
     1092
     1093                                .ac-reply-cancel {
     1094
     1095                                        @include headings-font();
     1096                                        text-align: center;
     1097                                        vertical-align: bottom;
     1098                                        color: #0073aa;
     1099
     1100                                        &:hover {
     1101                                                color: darken(#0073aa, 10%);
     1102                                                text-decoration: underline;
     1103                                        }
     1104                                }
     1105
     1106                        } // close .ac-form
     1107
     1108                } // close .activity-comments
     1109        } // close .activity
     1110
     1111} // close #buddypress
     1112
     1113/**
     1114*----------------------------------------------------------
     1115* @section 4.2 - Members Loop
     1116*----------------------------------------------------------
     1117*/
     1118
     1119
     1120/**
     1121*-------------------------------------------------------------------------------
     1122* @section 6.0 - Single Item screens: User Account & Single Group Screens
     1123*-------------------------------------------------------------------------------
     1124*/
     1125
     1126
     1127/**
     1128*-----------------------------------------------------------
     1129* @subsection 6.1 - Item Header Global
     1130*-----------------------------------------------------------
     1131*/
     1132
     1133.bp-user,
     1134.single-item.groups {
     1135
     1136        @media screen and (max-width: $tablet_width) {
     1137
     1138                main {
     1139
     1140                        header.entry-header {
     1141                                padding-bottom: 1rem;
     1142                        }
     1143                }
     1144        } // close @media
     1145
     1146        @media screen and (max-width: $mobile_width) {
     1147
     1148                h1,
     1149                #item-header-content {
     1150                        text-align: center;
     1151                }
     1152        } // close @media
     1153
     1154        #buddypress {
     1155
     1156                #item-header-content {
     1157
     1158                        h2:before {
     1159                                display: none;
     1160                        }
     1161
     1162                        #item-buttons {
     1163
     1164                                .generic-button {
     1165
     1166                                        a {
     1167
     1168                                                @include button(0.6);
     1169                                                @include border-radius(5px);
     1170                                                font-weight: 600;
     1171                                                padding: 8px;
     1172                                        }
     1173                                }
     1174                        }
     1175                }
     1176
     1177                #item-header-avatar {
     1178
     1179                        img.avatar {
     1180                                width: auto;
     1181                                height: auto;
     1182                        }
     1183                }
     1184
     1185                @media screen and (max-width: $tablet_width) {
     1186
     1187                        #item-header {
     1188
     1189                                .generic-button {
     1190                                        float: none;
     1191                                        margin: 1.5em 0 0;
     1192                                }
     1193                        }
     1194                } // close @media
     1195
     1196                @media screen and (max-width: $mobile_width) {
     1197
     1198                        h1 {
     1199                                margin-bottom: 0;
     1200                        }
     1201
     1202                        #item-header-avatar {
     1203
     1204                                img.avatar {
     1205                                        margin-right: 0;
     1206                                }
     1207                        }
     1208
     1209                        #item-header-content {
     1210                                width: 100%;
     1211                        }
     1212                } // close @media
     1213        }
     1214}
     1215
     1216/**
     1217*-----------------------------------------------------
     1218* @subsection 6.1.1 - item-header Groups
     1219*
     1220* Group Specific Item Header
     1221*-----------------------------------------------------
     1222*/
     1223
     1224.single-item.groups {
     1225
     1226        #buddypress {
     1227
     1228                @media screen and (max-width: $tablet_width) {
     1229
     1230                        #item-header {
     1231
     1232                                #item-meta {
     1233                                        margin-bottom: $spacing-val-md;
     1234                                }
     1235                        }
     1236                } // close @media
     1237
     1238                // Move visual flow of avatar & item-actions at narrow width,
     1239                // avatar first after group title
     1240                @media screen and (max-width: $mobile_width) {
     1241
     1242                        div#item-header {
     1243                                display: flex;
     1244                                flex-direction: column;
     1245
     1246                                #item-header-avatar {
     1247                                        order: 1;
     1248                                        text-align: center;
     1249
     1250                                        a {
     1251                                                border-bottom: 0;
     1252
     1253                                                img {
     1254                                                        display: inline-block;
     1255                                                        float: none;
     1256                                                }
     1257                                        }
     1258                                }
     1259
     1260                                #item-header-content {
     1261                                        order: 2;
     1262                                }
     1263
     1264                                #item-actions {
     1265                                        order: 3;
     1266                                }
     1267                        }
     1268                } // close @media
     1269
     1270                div#item-header {
     1271                        padding-bottom: $spacing-val-lg;
     1272
     1273                        div#item-actions {
     1274                                margin: 0;
     1275                                width: 100%;
     1276
     1277                                @media screen and (min-width: $mobile_width) {
     1278                                        clear: none;
     1279                                        float: right;
     1280                                        width: 50%;
     1281                                } // close @media
     1282
     1283                                h2 {
     1284                                        background: $content-background;
     1285                                        color: $body-text;
     1286
     1287                                        @include font-size(0.8);
     1288
     1289                                        @media screen and (min-width: $tablet_width) {
     1290
     1291                                                @include font-size(1);
     1292                                        } // close @media
     1293
     1294                                        padding: 0.2em;
     1295                                }
     1296                        } // close item-actions
     1297
     1298                        @media screen and (min-width: $tablet_width) {
     1299
     1300                                #item-header-avatar,
     1301                                #item-header-content {
     1302                                        float: left;
     1303                                }
     1304
     1305                                #item-header-avatar {
     1306                                        width: 21%;
     1307                                }
     1308
     1309                                #item-header-content {
     1310                                        margin-left: 4%;
     1311                                        width: 40%;
     1312                                }
     1313
     1314                                div#item-actions {
     1315                                        float: right;
     1316                                        width: 28%;
     1317                                }
     1318
     1319                        } // close @media
     1320
     1321                } // close #item-header
     1322        } // close #buddypress
     1323} // close .groups
     1324
     1325/**
     1326*-----------------------------------------------------
     1327* @subsection 6.1.2 - Item Header User Accounts
     1328*
     1329* User Accounts Specific Item Header
     1330*-----------------------------------------------------
     1331*/
     1332
     1333.bp-user {
     1334
     1335        #buddypress {
     1336
     1337                #item-header {
     1338                        padding: $spacing-val-md 0;
     1339
     1340                        #item-header-avatar {
     1341                                text-align: center;
     1342                                width: 100%;
     1343                                height: 100%;
     1344
     1345                                a {
     1346                                        border-bottom: 0;
     1347                                        display: inline-block;
     1348                                        float: none;
     1349                                }
     1350                        }
     1351
     1352                        @media screen and (min-width: $tablet_width) {
     1353
     1354                                #item-header-avatar {
     1355                                        float: left;
     1356                                        width: 20%;
     1357
     1358                                        img.avatar,
     1359                                        a {
     1360                                                float: left;
     1361                                        }
     1362                                }
     1363
     1364                                #item-header-content {
     1365                                        float: right;
     1366                                        margin-right: 5%;
     1367                                        width: 69%;
     1368                                }
     1369
     1370                        } // close @media
     1371
     1372                } // close #item-header
     1373
     1374        } // close #buddypress
     1375} // close .bp-user
     1376
     1377/**
     1378*-----------------------------------------------------------
     1379* @subsection 6.2 - Item Body: Global
     1380*-----------------------------------------------------------
     1381*/
     1382// Manage the margins inherited from 2015 inside the item-body sections
     1383// generally far too large a top margin for headings in our lists
     1384#item-body {
     1385
     1386        h1,
     1387        h2,
     1388        h3,
     1389        h4,
     1390        h5,
     1391        h6 {
     1392                margin: 1em 0;
     1393
     1394                a {
     1395                        border-bottom: 0;
     1396                }
     1397        }
     1398}
     1399
     1400/**
     1401*----------------------------------------------------
     1402* @subsection 6.2.1 - Item Body Groups
     1403*
     1404* Groups specific item body rules -  screens
     1405*----------------------------------------------------
     1406*/
     1407
     1408
     1409/**
     1410*-----------------------------------------
     1411* @subsection 6.2.1.1 - Group Management
     1412*-----------------------------------------
     1413*/
     1414
     1415// headings settings screens & general global settings styles
     1416.groups {
     1417
     1418        #group-settings-form {
     1419
     1420                h3 {
     1421                        background: $content-background;
     1422                        color: $body-text;
     1423                        padding: 0.2em;
     1424                }
     1425                // remove backgrounds from request list member names.
     1426                #request-list {
     1427
     1428                        h4 {
     1429                                background: none;
     1430                                color: inherit;
     1431                        }
     1432                }
     1433        }
     1434}
     1435
     1436.groups.edit-details {
     1437
     1438        #group-settings-form {
     1439
     1440                label {
     1441                        background: $light-background;
     1442
     1443                        @include border-top-radius(4px);
     1444                        color: $body-text;
     1445                        display: inline-block;
     1446                        margin-bottom: 0;
     1447                        padding: 0.2em;
     1448                        width: 80%;
     1449
     1450                        @media screen and (min-width: $mobile_width) {
     1451                                width: 60%;
     1452                        } // close @media
     1453
     1454                }
     1455
     1456                textarea + p label {
     1457                        background: none;
     1458                        color: inherit;
     1459
     1460                        @include font-size(0.8);
     1461                        width: auto;
     1462                }
     1463
     1464        }
     1465} // close .groups.edit-details
     1466
     1467.groups.group-settings {
     1468
     1469        #group-settings-form,
     1470        #create-group-form {
     1471
     1472                div.radio {
     1473
     1474                        label {
     1475                                border: 1px solid $border-light;
     1476                                padding: 0.2em;
     1477                        }
     1478
     1479                        ul {
     1480                                color: #767676;
     1481
     1482                                @include font-size(0.8);
     1483                        }
     1484                }
     1485
     1486        }
     1487} // close .groups.group-settings
     1488
     1489.groups.group-avatar {
     1490
     1491        form > p {
     1492                margin-top: $spacing-val-md;
     1493        }
     1494
     1495}
     1496
     1497.groups.manage-members {
     1498
     1499        #group-settings-form {
     1500
     1501                .item-list {
     1502
     1503                        li {
     1504                                border-bottom: 1px solid $border-light;
     1505
     1506                                img,
     1507                                h5 {
     1508                                        float: left;
     1509
     1510                                        > a {
     1511                                                border-bottom: 0;
     1512                                        }
     1513                                }
     1514
     1515                                span.small {
     1516                                        clear: left;
     1517                                        display: block;
     1518                                        float: none;
     1519                                        margin-top: $spacing-val-sm;
     1520
     1521                                        a {
     1522                                                display: inline-block;
     1523                                                margin: $spacing-val-xs 0;
     1524                                                width: 100%;
     1525
     1526                                                @media screen and (min-width: $mobile_width) {
     1527                                                        width: auto;
     1528                                                } // close @media
     1529                                        }
     1530                                }
     1531
     1532                                h5 {
     1533                                        margin: 0;
     1534                                }
     1535
     1536                                div.action {
     1537                                        position: relative;
     1538                                        top: auto;
     1539                                        right: auto;
     1540                                }
     1541                        }
     1542                }
     1543        }
     1544} // close .groups.manage-members
     1545
     1546/**
     1547*-----------------------------------------
     1548* @subsection 6.2.1.2 - Group members
     1549*-----------------------------------------
     1550*/
     1551
     1552/* Members loop */
     1553
     1554.groups.group-members {
     1555
     1556        #buddypress {
     1557
     1558                #members-group-list {
     1559
     1560                        li {
     1561
     1562                                @media screen and (max-width: 30em) {
     1563
     1564                                        > a {
     1565                                                border-bottom: 0;
     1566                                                display: block;
     1567                                                margin-bottom: $spacing-val-sm;
     1568                                                text-align: center;
     1569
     1570                                                img.avatar {
     1571                                                        display: inline;
     1572                                                        float: none;
     1573                                                }
     1574                                        }
     1575                                } // close @media
     1576
     1577                                h5 {
     1578                                        display: inline-block;
     1579
     1580                                        @include font-size(0.8);
     1581
     1582                                        margin: 0;
     1583
     1584                                        a {
     1585                                                border-bottom: 0;
     1586                                        }
     1587                                } //  close h5
     1588
     1589                                span.activity {
     1590
     1591                                        @include font-size(0.5);
     1592                                }
     1593
     1594                                .action {
     1595                                        top: 0;
     1596                                }
     1597                        } // close li
     1598                }
     1599        }
     1600}
     1601
     1602// Manage the members search for groups nav specifically.
     1603.groups.group-members {
     1604
     1605        #subnav {
     1606
     1607                li {
     1608
     1609                        @media screen and (max-width: $mobile_width) {
     1610                                background: $content-background;
     1611                                padding: $spacing-val-md 0;
     1612                        } // close @media
     1613
     1614                        width: 100%;
     1615
     1616                        #search-members-form {
     1617                                float: right;
     1618
     1619                                @media screen and (max-width: $mobile_width) {
     1620                                        margin: 0;
     1621                                        width: 100%;
     1622
     1623                                        label {
     1624
     1625                                                input[type="text"] {
     1626                                                        width: 100%;
     1627                                                }
     1628                                        }
     1629                                } // close @media
     1630
     1631                                margin: $spacing-val-xs $spacing-val-xs 0 0;
     1632                        }
     1633                }
     1634        }
     1635}
     1636
     1637/**
     1638*-----------------------------------------
     1639* @subsection 6.2.1.3 - Group Send Invites
     1640*-----------------------------------------
     1641*/
     1642
     1643.groups.group-invites {
     1644
     1645        #item-body {
     1646
     1647                .item-list {
     1648
     1649                        .action {
     1650                                margin-bottom: 0;
     1651                        }
     1652                }
     1653        }
     1654
     1655        @media screen and (min-width: $tablet_width) {
     1656
     1657                #buddypress {
     1658
     1659                        #item-body {
     1660
     1661                                #message {
     1662                                        margin-top: 0;
     1663                                }
     1664                        }
     1665                }
     1666        } // close @media
     1667
     1668        @media screen and (min-width: 55em) {
     1669
     1670                #buddypress {
     1671
     1672                        #send-invite-form {
     1673                                margin-top: 0;
     1674                        }
     1675                }
     1676        } // close @media
     1677
     1678        #item-body {
     1679
     1680                @media screen and (max-width: $tablet_width) {
     1681
     1682                        .left-menu {
     1683                                float: none;
     1684                                margin: $spacing-val-sm 0;
     1685
     1686                                #invite-list {
     1687                                        height: auto;
     1688                                        width: auto;
     1689                                }
     1690                        }
     1691
     1692                        .main-column {
     1693                                margin-left: 0;
     1694                        }
     1695
     1696                        .submit {
     1697
     1698                                input {
     1699                                        display: inline-block;
     1700                                        width: 100%;
     1701                                }
     1702                        }
     1703
     1704                } // close @media
     1705        } // close .item-body
     1706
     1707} // close .groups.group-invites
     1708
     1709/**
     1710*-----------------------------------------------------
     1711* @subsection 6.2.2 - Item Body User Accounts
     1712*
     1713* User Account specific item body rules
     1714*-----------------------------------------------------
     1715*/
     1716
     1717.bp-user {
     1718
     1719        .entry-title {
     1720                margin-bottom: 0.5em;
     1721        }
     1722}
     1723
     1724/**
     1725*--------------------------------------------
     1726* @subsection 6.2.2.1 - classes, pag, filters
     1727*--------------------------------------------
     1728*/
     1729
     1730.bp-user {
     1731
     1732        #buddypress {
     1733
     1734                table {
     1735
     1736                        th {
     1737
     1738                                @include font-size(0.8);
     1739                        }
     1740
     1741                        td {
     1742
     1743                                @include font-size(0.5);
     1744                        }
     1745
     1746                        @media screen and (min-width: $tablet_width) {
     1747
     1748                                th {
     1749
     1750                                        @include font-size(1);
     1751                                }
     1752
     1753                                td {
     1754
     1755                                        @include font-size(0.8);
     1756                                }
     1757                        } // close @media
     1758
     1759                        @media screen and (min-width: $desktop_width) {
     1760
     1761                                th {
     1762
     1763                                        @include font-size(1.2);
     1764                                }
     1765
     1766                                td {
     1767
     1768                                        @include font-size(1);
     1769                                }
     1770                        } // close @media
     1771                }
     1772
     1773                .pag-count {
     1774                        font-style: italic;
     1775                }
     1776
     1777                .notifications-options-nav,
     1778                .messages-options-nav {
     1779                        float: left;
     1780                        width: 100%;
     1781
     1782                        @media screen and (min-width: 30em) {
     1783                                width: 50%;
     1784                        } // close @media
     1785
     1786                        select,
     1787                        input {
     1788
     1789                                @include font-size(0.8);
     1790                                outline: 0;
     1791                                padding: 0;
     1792                        }
     1793
     1794                        select {
     1795                                float: left;
     1796                                margin-right: 0;
     1797                                width: 100%;
     1798
     1799                                @media screen and (min-width: 30em) {
     1800                                        width: 60%;
     1801                                } // close @media
     1802                        }
     1803
     1804                        input {
     1805                                float: right;
     1806
     1807                                @include headings-font();
     1808                                line-height: 1.5;
     1809                                margin-top: $spacing-val-sm;
     1810                                width: 100%;
     1811
     1812                                &[disabled]:hover {
     1813                                        background: none;
     1814                                }
     1815
     1816                                @media screen and (min-width: 30em) {
     1817                                        margin-top: 0;
     1818                                        width: 38%;
     1819                                } // close @media
     1820                        }
     1821
     1822                } // close .notifications-options-nav
     1823
     1824        } // close #BuddyPress
     1825
     1826} // close .bp-user
     1827
     1828/**
     1829        *-------------------------------------------
     1830        * @subsection 6.2.2.2 - Extended Profiles
     1831        *-------------------------------------------
     1832        */
     1833
     1834.bp-user {
     1835
     1836        #buddypress {
     1837
     1838                .profile {
     1839
     1840                        h2 {
     1841                                margin-bottom: 1em;
     1842                        }
     1843
     1844                        .bp-widget {
     1845
     1846                                h2 {
     1847
     1848                                        @include font-size(1.2);
     1849                                        background: lighten($medium-background, 10%);
     1850                                        color: $body-text;
     1851                                        margin-bottom: 0;
     1852                                        padding: 0.4em;
     1853
     1854                                        &:before {
     1855                                                display: none;
     1856                                        }
     1857                                }
     1858
     1859                                table {
     1860                                        margin-top: 0;
     1861                                }
     1862                        }
     1863                }
     1864        }
     1865}
     1866
     1867/* Edit Profile */
     1868.bp-user {
     1869
     1870        #buddypress {
     1871
     1872                .profile {
     1873
     1874                        #profile-edit-form {
     1875
     1876                                .button-nav:before,
     1877                                .button-nav:after {
     1878                                        content: " ";
     1879                                        display: table;
     1880                                }
     1881
     1882                                .button-nav:after {
     1883                                        clear: both;
     1884                                }
     1885
     1886                                ul.button-nav {
     1887                                        border-bottom: 1px solid $border-light;
     1888                                        margin-left: 0;
     1889
     1890                                        li {
     1891                                                float: left;
     1892                                                margin-bottom: 0;
     1893
     1894                                                &.current {
     1895                                                        border: 1px solid $border-light;
     1896                                                        border-bottom-color: #fff;
     1897                                                        margin-bottom: -1px;
     1898                                                }
     1899                                        } // li
     1900
     1901                                        a {
     1902                                                background: none;
     1903                                                border: 0;
     1904
     1905                                                @include font-size(1.2);
     1906                                        }
     1907                                } //.button-nav
     1908
     1909                                .field-visibility-settings-toggle,
     1910                                .field-visibility-settings {
     1911
     1912                                        @include font-size(0.8);
     1913                                }
     1914
     1915                                .field-visibility-settings-close,
     1916                                .visibility-toggle-link {
     1917                                        background: $light-background;
     1918                                        color: $body-text;
     1919                                        padding: 0.2em 0.5em;
     1920                                }
     1921                        } // close profile form
     1922
     1923                        .bp-avatar {
     1924
     1925                                #bp-delete-avatar {
     1926
     1927                                        a {
     1928                                                font-size: inherit;
     1929                                        }
     1930                                }
     1931                        }
     1932                } // close .profile
     1933
     1934        } // close #BuddyPress
     1935} // close .bp-user
     1936
     1937/**
     1938        *-------------------------------------------
     1939        * @subsection 6.2.2.3 - Groups
     1940        *-------------------------------------------
     1941        */
     1942.bp-user {
     1943
     1944        #buddypress {
     1945
     1946                #groups-list {
     1947
     1948                        li {
     1949
     1950                                .item {
     1951
     1952                                        @media screen and (min-width: $desktop_width) {
     1953                                                left: 5%;
     1954                                                width: 50%;
     1955                                        } // close @media
     1956                                }
     1957                        }
     1958                }
     1959
     1960        } // close #BuddyPress
     1961
     1962} // close .bp-user
     1963
     1964/**
     1965        *-------------------------------------------
     1966        * @subsection 6.2.2.5 - Private Messaging
     1967        *-------------------------------------------
     1968        */
     1969
     1970.bp-user {
     1971
     1972        #buddypress {
     1973
     1974                .message-action-unstar {
     1975
     1976                        span.icon {
     1977
     1978                                &:before {
     1979                                        color: $dark-background;
     1980                                }
     1981                        }
     1982                }
     1983
     1984                #message-thread {
     1985                        //Single message view
     1986                        a {
     1987                                border-bottom: 0;
     1988                        }
     1989
     1990                        #message-subject {
     1991                                background: $content-background;
     1992                                color: $body-text;
     1993                                padding: 0.3em 0 0.3em 0.2em;
     1994                        }
     1995
     1996                        #message-recipients {
     1997                                font-style: italic;
     1998
     1999                                a.confirm {
     2000                                        border: 1px solid $border-light;
     2001                                        font-style: normal;
     2002                                }
     2003                        }
     2004
     2005                        .message-metadata {
     2006
     2007                                &:after {
     2008                                        clear: both;
     2009                                        content: "";
     2010                                        display: table;
     2011                                }
     2012
     2013                                img.avatar {
     2014                                        float: none;
     2015                                }
     2016
     2017                                @media screen and (min-width: $tablet_width) {
     2018
     2019                                        img.avatar {
     2020                                                float: left;
     2021                                        }
     2022                                } // close @media
     2023
     2024                                .message-star-actions {
     2025                                        float: right;
     2026                                        margin-right: $spacing-val-xs;
     2027                                        position: static;
     2028                                }
     2029                        } // close .message-meta
     2030
     2031                        .message-content {
     2032                                background: $light-background;
     2033                                border: 1px solid $border-light;
     2034                                margin: $spacing-val-sm 0 0 0;
     2035                                padding: 0.3em;
     2036                        }
     2037
     2038                        #send-reply {
     2039
     2040                                .message-content {
     2041                                        background: $content-background;
     2042                                        border: 0;
     2043                                }
     2044                        }
     2045
     2046                        .alt {
     2047                                background: $content-background;
     2048                        }
     2049                } // close message-thread  Singular view!
     2050
     2051                #message-threads {
     2052
     2053                        thead {
     2054
     2055                                tr {
     2056                                        background: lighten($medium-background, 10%);
     2057                                }
     2058
     2059                                th.bulk-select-all {
     2060                                        position: relative;
     2061                                        border: none;
     2062                                        padding-top: 0;
     2063
     2064                                        label {
     2065                                                clip: auto;
     2066                                                overflow: visible;
     2067                                                display: block;
     2068                                                word-break: keep-all;
     2069                                                left: 30px;
     2070                                                top: 15px;
     2071                                                white-space: nowrap;
     2072
     2073                                                @include font-size(0.5);
     2074                                        }
     2075                                }
     2076                        }
     2077
     2078                        tr {
     2079                                border: solid 1px darken($border-light, 20%);
     2080
     2081                                td {
     2082                                        background: $content-background;
     2083                                        display: inline-block;
     2084                                        float: none;
     2085                                        border: none;
     2086                                }
     2087
     2088                                td.thread-star,
     2089                                td.thread-options {
     2090                                        height: 2.4em;
     2091                                        padding-bottom: 0.2em;
     2092                                        padding-top: 0.2em;
     2093
     2094                                        @media screen and (max-width: $tablet_width) {
     2095                                                padding-top: 0;
     2096                                        } // close @media
     2097                                }
     2098
     2099                                td.bulk-select-check,
     2100                                td.thread-from {
     2101                                        height: 2.6em;
     2102
     2103                                        img.avatar {
     2104                                                display: inline-block;
     2105                                                width: auto;
     2106                                                height: auto;
     2107                                                vertical-align: text-top;
     2108                                        }
     2109
     2110                                        @media screen and (max-width: $mobile_width) {
     2111                                                height: 5.2em;
     2112                                        } // close @media
     2113                                }
     2114
     2115                                td.thread-from,
     2116                                td.thread-options {
     2117                                        border-left: 0 !important;
     2118
     2119                                        @include calc(width, "100% - 30px");
     2120                                        margin-left: 0;
     2121                                }
     2122
     2123                                td.thread-info {
     2124                                        padding-left: 41px;
     2125                                        width: 100%;
     2126                                }
     2127
     2128                                td.thread-options {
     2129                                        text-align: right;
     2130
     2131                                        a {
     2132
     2133                                                @include font-size(0.5);
     2134                                                line-height: 2.2;
     2135                                        }
     2136                                }
     2137
     2138                                span.from {
     2139                                        display: none;
     2140                                }
     2141
     2142                                span.activity {
     2143                                        display: block;
     2144                                        float: right;
     2145                                        line-height: 2;
     2146
     2147                                        @media screen and (max-width: $mobile_width) {
     2148                                                clear: both;
     2149
     2150                                                @include font-size(0.4);
     2151                                                width: 100%;
     2152                                        } // close @media
     2153                                }
     2154                        }
     2155
     2156                        tr.unread {
     2157
     2158                                td {
     2159                                        background: $unread;
     2160                                        border: none;
     2161                                }
     2162                        }
     2163
     2164                        th {
     2165                                display: none;
     2166                        }
     2167
     2168                        th.bulk-select-all {
     2169                                border-bottom: 0;
     2170                                display: inline-block;
     2171                                text-align: left;
     2172                        }
     2173
     2174                        th.bulk-select-all,
     2175                        td.bulk-select-check,
     2176                        td.thread-star {
     2177                                border-right: 0;
     2178                                width: 30px;
     2179                        }
     2180                }
     2181
     2182                .acfb-holder {
     2183                        list-style: none;
     2184
     2185                        li {
     2186                                margin-left: 0;
     2187                        }
     2188
     2189                        li.friend-tab {
     2190                                background: lighten($notice-info, 20%);
     2191                                border: inherit;
     2192                                margin-right: 0;
     2193                                padding: 0.5em;
     2194
     2195                                span.p {
     2196                                        // the 'X' close
     2197                                        padding-left: $spacing-val-sm;
     2198
     2199                                        &:focus,
     2200                                        &:hover {
     2201                                                color: $link-action;
     2202                                                cursor: pointer;
     2203                                        }
     2204                                }
     2205
     2206                                a {
     2207                                        border-bottom: 0;
     2208                                        text-decoration: none;
     2209
     2210                                        img {
     2211                                                // this is the tiny user avatar
     2212                                                display: inline-block;
     2213                                                height: 20px;
     2214                                                vertical-align: middle;
     2215                                                width: 20px !important; // override inline style
     2216                                        }
     2217                                }
     2218                        }
     2219                }
     2220
     2221                #message-threads.sitewide-notices {
     2222
     2223                        td {
     2224                                width: 100%;
     2225
     2226                                strong {
     2227                                        background: lighten($medium-background, 10%);
     2228                                        color: $body-text;
     2229                                        display: block;
     2230                                        margin-bottom: 0.4em;
     2231                                        padding-left: 0.2em;
     2232                                }
     2233
     2234                                a {
     2235                                        display: inline-block;
     2236                                }
     2237                        }
     2238
     2239                        td:first-child {
     2240                                display: none;
     2241                        }
     2242
     2243                        td:first-child + td + td {
     2244                                // notice date
     2245                                border-bottom: 0;
     2246
     2247                                span {
     2248                                        line-height: 1;
     2249                                }
     2250                        }
     2251
     2252                        td:last-child {
     2253                                // notice actions
     2254                                border-bottom-color: darken($border-light, 20%);
     2255                                line-height: 1;
     2256                                text-align: right;
     2257
     2258                                a:last-child:after {
     2259                                        content: attr(title);
     2260                                        display: block;
     2261                                        line-height: initial;
     2262                                        text-indent: 0;
     2263                                }
     2264                        }
     2265                }
     2266
     2267        } // close #BuddyPress
     2268
     2269        // acfb auto complete name list sits in doc footer before body close
     2270        .ac_results {
     2271                background: #eee;
     2272                padding-left: $spacing-val-sm;
     2273
     2274                ul {
     2275                        margin: 0;
     2276                }
     2277
     2278                li {
     2279                        margin: $spacing-val-sm 0;
     2280
     2281                        &:focus,
     2282                        &:hover {
     2283                                cursor: pointer;
     2284                        }
     2285                }
     2286        }
     2287
     2288} // close .bp-user
     2289
     2290/**
     2291        *------------------------------
     2292        * @subsection 6.2.2.6 - Settings
     2293        *------------------------------
     2294        */
     2295
     2296.bp-user {
     2297
     2298        #buddypress {
     2299
     2300                #settings-form {
     2301                        // 'p' = email notification screen sub heading
     2302                        > p {
     2303
     2304                                @include font-size(1.5);
     2305                                @include headings-font();
     2306                                font-weight: 700;
     2307                                letter-spacing: -0.02em;
     2308                                line-height: 1.2;
     2309                                -webkit-font-smoothing: antialiased;
     2310                                margin: $spacing-val-md 0 $spacing-val-sm;
     2311
     2312                                &:before {
     2313                                        background: #767676;
     2314                                        content: "\020";
     2315                                        display: block;
     2316                                        height: 2px;
     2317                                        margin: 1rem 0;
     2318                                        width: 1em;
     2319                                }
     2320                        }
     2321                }
     2322
     2323                table.notification-settings {
     2324
     2325                        th.title {
     2326                                width: 75%;
     2327                        }
     2328
     2329                        td.yes,
     2330                        td.no {
     2331                                vertical-align: middle;
     2332                        }
     2333
     2334                        td {
     2335                                word-break: keep-all;
     2336                        }
     2337                }
     2338                // Profile visibility table td widths
     2339                table.profile-settings {
     2340                        width: 100%;
     2341
     2342                        th.field-group-name,
     2343                        td.field-name {
     2344                                width: 50%;
     2345                        }
     2346
     2347                        @media screen and (min-width: $tablet_width) {
     2348
     2349                                th.field-group-name,
     2350                                td.field-name {
     2351                                        width: 70%;
     2352                                }
     2353                        } // close @media
     2354
     2355                        th.title,
     2356                        td.field-visibility {
     2357                                width: 30%;
     2358                        }
     2359
     2360                        td.field-visibility {
     2361
     2362                                select {
     2363                                        width: 100%;
     2364                                }
     2365                        }
     2366                }
     2367
     2368        } // close #BuddyPress
     2369
     2370} // close .bp-user
     2371
     2372/**
     2373*-------------------------------------------------------------------------------
     2374* @section 7.0 - Forms  - General
     2375*-------------------------------------------------------------------------------
     2376*/
     2377
     2378#buddypress {
     2379
     2380        input[type="submit"],
     2381        input[type="button"] {
     2382
     2383                @include button(0.8);
     2384        }
     2385
     2386        div.activity-comments {
     2387
     2388                form {
     2389
     2390                        .ac-textarea {
     2391                                background: $light-background;
     2392                                border: 1px solid rgba($border-color, 0.3);
     2393
     2394                                textarea {
     2395                                        background: none;
     2396                                        border: 0;
     2397                                }
     2398                        }
     2399                }
     2400        }
     2401
     2402        select {
     2403                border: 1px solid rgba($border-color, 0.5);
     2404        }
     2405
     2406        // Overrides for embedded WP editors.
     2407        .wp-editor-wrap {
     2408
     2409                a.button,
     2410                button,
     2411                input[type="submit"],
     2412                input[type="button"],
     2413                input[type="reset"] {
     2414                        padding: 0 5px 1px;
     2415                }
     2416        }
     2417
     2418} // close #buddypress
     2419
     2420
     2421#buddypress {
     2422
     2423        // Manage form control widths override BP 75% width.
     2424
     2425        .standard-form,
     2426        .group-create-form {
     2427
     2428                li {
     2429                        float: none;
     2430                        list-style: none;
     2431                }
     2432
     2433                input[type="text"],
     2434                textarea {
     2435                        width: 100%;
     2436                }
     2437
     2438                input[type="submit"],
     2439                input[type="button"]#group-creation-previous {
     2440                        line-height: 1.2;
     2441                        outline: none;
     2442                        padding: 0.76rem 1rem;
     2443                }
     2444
     2445                .radio label {
     2446                        color: $body-text;
     2447                }
     2448
     2449                .editfield {
     2450                        margin-bottom: 1em;
     2451                }
     2452        }
     2453
     2454        div.dir-search,
     2455        div.message-search,
     2456        li.groups-members-search {
     2457                float: none;
     2458                margin: $spacing-val-sm 0;
     2459
     2460                // Stylise the seach form elements, in part this deals with padding
     2461                // issues on the submit & sizing issues between bp styles & Twenty Nineteen
     2462
     2463                form { // *sigh* only to bludgeon over specified rules
     2464                        overflow: hidden;
     2465
     2466                        label {
     2467                                float: left;
     2468                                width: 80%;
     2469                        }
     2470
     2471                        input[type="text"] {
     2472                                float: left;
     2473                                margin: 0 1em 0 0;
     2474                                width: 80%;
     2475                                outline-color: #fff;
     2476                        }
     2477
     2478                        input[type="text"],
     2479                        input[type="submit"] {
     2480
     2481                                @include font-size(0.8);
     2482                                border: 0;
     2483                                line-height: inherit;
     2484                        }
     2485
     2486                        input[type="text"] {
     2487                                padding: 0.2em 0 0.2em 0.2em;
     2488                        }
     2489
     2490                        input[type="submit"] {
     2491                                float: right;
     2492                                font-weight: 400;
     2493                                padding: 0.2em 1em;
     2494                                text-align: center;
     2495                                text-transform: none;
     2496                                width: 20%;
     2497                        }
     2498                }// close form
     2499
     2500        } // close .dir-search, .message-search
     2501
     2502        // Shift the search parent to the right and allow to shrinkwrap
     2503        @media screen and (min-width: $mobile_width) {
     2504
     2505                div.dir-search,
     2506                div.message-search,
     2507                li.groups-members-search {
     2508                        float: right;
     2509                        margin-bottom: 5px !important;
     2510
     2511                        form {
     2512
     2513                                label,
     2514                                input[type="text"],
     2515                                input[type="submit"] {
     2516                                        width: auto;
     2517                                }
     2518                        }
     2519                }
     2520        } // close @media
     2521
     2522        @media screen and (min-width: $desktop_width) {
     2523
     2524                .dir-search,
     2525                .message-search {
     2526
     2527                        form {
     2528
     2529                                input[type="text"] {
     2530
     2531                                        @include font-size(1);
     2532                                }
     2533
     2534                                input[type="submit"] {
     2535
     2536                                        @include font-size(1);
     2537                                }
     2538                        }
     2539                }
     2540        } // close @media
     2541
     2542} // close #buddypress
     2543
     2544/**
     2545*-------------------------------------------------------------------------------
     2546* @section 8.0 - Tables - General
     2547*-------------------------------------------------------------------------------
     2548*/
     2549
     2550// Adjust table font sizes, default too large proportionally
     2551// This approach will require refinement and perhaps re-location to
     2552// a more general typography section to manage BP elements grouped under
     2553// breakpoints. Provide top/bottom margins for tables, lacking in BP styles
     2554#buddypress {
     2555
     2556        table {
     2557
     2558                @include font-size(0.8);
     2559                margin: $spacing-val-md 0;
     2560
     2561                tr th {
     2562                        background: lighten($medium-background, 10%);
     2563                        border-color: darken($border-light, 20%);
     2564                        color: $body-text;
     2565                }
     2566
     2567                // Reduce the themes inherited paragraph margins in tables
     2568                p {
     2569                        margin-bottom: 0.5em;
     2570                }
     2571        }
     2572
     2573        @media screen and (min-width: $desktop_width) {
     2574
     2575                table {
     2576
     2577                        @include font-size(0.8);
     2578                }
     2579        } // close @media
     2580}
     2581
     2582/*__ User Account tables __*/
     2583
     2584#buddypress {
     2585
     2586        // Manage some table cells widths that are disproportionate to their content
     2587        .notifications,
     2588        .messages-notices {
     2589
     2590                th {
     2591                        width: 30%;
     2592
     2593                        &.bulk-select-all {
     2594                                text-align: center;
     2595                                width: 10%;
     2596                        }
     2597                }
     2598
     2599                .bulk-select-check,
     2600                .thread-star {
     2601                        text-align: center;
     2602                }
     2603
     2604                .notification-actions,
     2605                td.thread-options {
     2606                        text-align: center;
     2607
     2608                        a {
     2609                                display: inline-block;
     2610                                margin: 0;
     2611                                padding: 0;
     2612                        }
     2613                }
     2614
     2615        } // .notifications, .message-notices
     2616
     2617} // #buddypress
     2618
     2619/**
     2620*-------------------------------------------------------------------------------
     2621* @section 9.0 - Error / Success messages
     2622*-------------------------------------------------------------------------------
     2623*/
     2624
     2625// message args ($variable-color, text-color)
     2626// Leave text-color undefined to automagically set text color
     2627// to background color darker by 50%
     2628
     2629#buddypress {
     2630
     2631        #item-body {
     2632
     2633                div#message {
     2634                        margin-top: $spacing-val-md;
     2635
     2636                        @media screen and (min-width: $desktop_width) {
     2637                                margin-right: $spacing-val-md;
     2638                        } // close @media
     2639                }
     2640        }
     2641
     2642        div#message {
     2643
     2644                p {
     2645
     2646                        @include font-size(1);
     2647                        font-weight: 700;
     2648                }
     2649
     2650                &.info {
     2651
     2652                        p {
     2653
     2654                                @include message-box($notice-info);
     2655                        }
     2656                }
     2657
     2658                &.updated {
     2659
     2660                        p {
     2661
     2662                                @include message-box($notice-update);
     2663                        }
     2664                }
     2665
     2666        } // close #message
     2667
     2668} // close  #buddypress
     2669
     2670// Without direct classes on our mesages ( 'warning' )
     2671// we need to use the body classes
     2672.delete-group {
     2673
     2674        #buddypress {
     2675
     2676                div#message.info {
     2677
     2678                        p {
     2679
     2680                                @include message-box($notice-warning);
     2681                        }
     2682                }
     2683        }
     2684}
     2685
     2686/**
     2687*-------------------------------------------------------------------------------
     2688* @section 10.0 - Ajax Loading, Widgets, General classes
     2689*-------------------------------------------------------------------------------
     2690*/
     2691
     2692#buddypress {
     2693
     2694        a.button {
     2695
     2696                @include button(0.6);
     2697                padding: 8px;
     2698
     2699                span {
     2700                        color: $dark-background;
     2701                        background-color: $content-background;
     2702                }
     2703
     2704                &:hover {
     2705
     2706                        span {
     2707                                color: $dark-background;
     2708                                background-color: $content-background;
     2709                        }
     2710                }
     2711
     2712                &.bp-secondary-action {
     2713                        color: $dark-background;
     2714                        background-color: $content-background;
     2715                        border: solid 1px $dark-background;
     2716
     2717                        &:hover {
     2718                                color: $content-background;
     2719                                background-color: $body-text;
     2720                                border-color: $body-text;
     2721                        }
     2722                }
     2723        }
     2724}