Skip to:
Content

Ticket #7338: 7338-01.patch

File 7338-01.patch, 16.9 KB (added by hnla, 18 months ago)

Updated styles.

  • src/bp-templates/bp-legacy/css/twentyseventeen-rtl.css

     
    9292        }
    9393}
    9494
    95 .buddypress article.page .entry-header .entry-title {
    96         font-size: 22px;
    97         font-size: 1.375rem;
    98 }
    99 
    100 @media screen and (min-width: 55em) {
    101         .buddypress article.page .entry-header .entry-title {
    102                 font-size: 28px;
    103                 font-size: 1.75rem;
    104         }
    105 }
    106 
    107 @media screen and (min-width: 55em) {
     95@media screen and (min-width: 48em) {
    10896        body.buddypress.page.page-two-column #primary .entry-header {
    109                 width: 20%;
     97                width: 30%;
    11098        }
    11199        body.buddypress.page.page-two-column #primary .entry-content {
    112                 width: 80%;
     100                width: 68%;
    113101        }
    114102        body.buddypress:not(.has-sidebar) #primary.content-area,
    115103        body.buddypress:not(.page-two-column) #primary.content-area {
    … …  
    150138}
    151139
    152140#buddypress div.item-list-tabs ul {
    153         background-color: #faf9f1;
     141        background-color: #fafafa;
    154142        border-bottom: 1px solid rgba(234, 234, 234, 0.9);
    155143        border-top: 1px solid rgba(234, 234, 234, 0.9);
    156144        overflow: hidden;
    … …  
    167155
    168156@media screen and (max-width: 38.75em) {
    169157        .bp-user #buddypress #object-nav {
    170                 background: #faf9f1;
     158                background: #fafafa;
    171159                border: 1px solid #eaeaea;
    172160                overflow: visible;
    173161                padding: 10px;
    … …  
    346334        #main #buddypress #group-create-tabs.item-list-tabs ul li.selected a,
    347335        #main #buddypress #group-create-tabs.item-list-tabs ul li.current a {
    348336                background: none;
    349                 color: #141412;
     337                color: #333;
    350338                outline: none;
    351339        }
    352340        #main #buddypress #subnav ul {
    … …  
    557545        width: 100%;
    558546}
    559547
    560 @media screen and (min-width: 48em) {
     548@media screen and (min-width: 30em) {
    561549        #buddypress ul.item-list li div.action div {
    562550                margin: 0 0 10px 10px;
    563551                width: auto;
    … …  
    599587}
    600588
    601589#buddypress form#whats-new-form #whats-new-content.active #whats-new-options[style] #whats-new-post-in-box {
    602         border: 1px solid rgba(212, 208, 186, 0.5);
     590        border: 1px solid rgba(190, 190, 190, 0.5);
    603591        float: right;
    604592        line-height: 1.5em;
    605593        margin-top: 12px;
    … …  
    726714        margin-bottom: 5px;
    727715}
    728716
    729 @media screen and (min-width: 38.75em) {
     717@media screen and (min-width: 30em) {
    730718        #buddypress #activity-stream .activity-content .activity-meta a {
    731719                display: inline-block;
    732720                margin-bottom: 0;
     721                width: auto;
    733722        }
    734723}
    735724
    … …  
    800789
    801790#buddypress #activity-stream .activity-comments .ac-form input[type="submit"],
    802791#buddypress #activity-stream .activity-comments .ac-form .ac-reply-cancel {
    803         color: rgba(20, 20, 18, 0.8);
     792        color: rgba(51, 51, 51, 0.8);
    804793        display: inline-block;
    805794        font-family: inherit;
    806795        font-size: 12px;
    … …  
    813802}
    814803
    815804#buddypress #activity-stream .activity-comments .ac-form .ac-reply-cancel {
    816         border: 1px solid rgba(212, 208, 186, 0.7);
     805        border: 1px solid rgba(190, 190, 190, 0.7);
    817806        text-align: center;
    818807}
    819808
    … …  
    11201109}
    11211110
    11221111.groups.group-settings #group-settings-form div.radio label ul {
    1123         color: rgba(20, 20, 18, 0.6);
     1112        color: rgba(51, 51, 51, 0.6);
    11241113        font-size: 14px;
    11251114        font-size: 0.875rem;
    11261115}
    … …  
    12541243}
    12551244
    12561245.bp-user #buddypress .notifications-options-nav {
    1257         border: 1px solid rgba(212, 208, 186, 0.5);
     1246        border: 1px solid rgba(190, 190, 190, 0.5);
    12581247        float: right;
    12591248        width: 100%;
    12601249}
    … …  
    14341423}
    14351424
    14361425.bp-user #buddypress #message-threads thead tr {
    1437         background: #6f6f6f;
     1426        background: none;
     1427        border-bottom: 1px solid #bebebe;
    14381428}
    14391429
     1430.bp-user #buddypress #message-threads thead tr th {
     1431        background: #555;
     1432}
     1433
     1434.bp-user #buddypress #message-threads tr {
     1435        border-bottom: 5px solid #878787;
     1436}
     1437
    14401438.bp-user #buddypress #message-threads tr td {
    14411439        background: #fff;
    14421440        display: inline-block;
    … …  
    14451443
    14461444.bp-user #buddypress #message-threads tr td.thread-star,
    14471445.bp-user #buddypress #message-threads tr td.thread-options {
    1448         border-bottom-color: #ccc;
    1449         border-bottom-width: 2px;
     1446        border-bottom-color: #bebebe;
     1447        border-bottom-width: 1px;
    14501448        height: 2.4em;
    14511449        padding-bottom: 0.2em;
    14521450        padding-top: 0.2em;
    … …  
    14591457        }
    14601458}
    14611459
     1460.bp-user #buddypress #message-threads tr td.bulk-select-check,
     1461.bp-user #buddypress #message-threads tr td.thread-star,
     1462.bp-user #buddypress #message-threads tr td.thread-from,
     1463.bp-user #buddypress #message-threads tr td.thread-info,
     1464.bp-user #buddypress #message-threads tr td.thread-options {
     1465        border-top: 0;
     1466}
     1467
    14621468.bp-user #buddypress #message-threads tr td.thread-star {
    14631469        vertical-align: middle;
    14641470}
    … …  
    15291535}
    15301536
    15311537.bp-user #buddypress #message-threads tr.unread td {
    1532         background: #eee;
    1533         border-color: #d4d0ba;
     1538        background: none;
     1539        border-color: #bebebe;
    15341540}
    15351541
    15361542.bp-user #buddypress #message-threads th {
    … …  
    17171723
    17181724#buddypress div.activity-comments form .ac-textarea {
    17191725        background: #f7f7f7;
    1720         border: 1px solid rgba(212, 208, 186, 0.5);
     1726        border: 1px solid rgba(190, 190, 190, 0.5);
    17211727}
    17221728
    17231729#buddypress div.activity-comments form .ac-textarea textarea {
    … …  
    17351741#buddypress .standard-form button,
    17361742#buddypress .standard-form select,
    17371743#buddypress .standard-form textarea {
    1738         border-color: rgba(212, 208, 186, 0.5);
     1744        border-color: rgba(190, 190, 190, 0.5);
    17391745        border-width: 1px;
    17401746}
    17411747
    … …  
    17611767#buddypress div.dir-search form,
    17621768#buddypress div.message-search form,
    17631769#buddypress li.groups-members-search form {
    1764         border: 1px solid rgba(212, 208, 186, 0.6);
     1770        border: 1px solid rgba(190, 190, 190, 0.6);
    17651771        overflow: hidden;
    17661772}
    17671773
    … …  
    17951801#buddypress div.dir-search form input[type='text'],
    17961802#buddypress div.message-search form input[type='text'],
    17971803#buddypress li.groups-members-search form input[type='text'] {
    1798         border-left: 1px solid rgba(212, 208, 186, 0.6);
     1804        border-left: 1px solid rgba(190, 190, 190, 0.6);
    17991805        padding: 0.2em 0.2em 0.2em 0;
    18001806}
    18011807
    … …  
    18551861}
    18561862
    18571863#buddypress table tr th {
    1858         background: #6f6f6f;
    1859         border-color: #b7b7b7;
    1860         color: #fff;
     1864        background: #f7f7f7;
     1865        border-color: #eaeaea;
     1866        color: #333;
    18611867}
    18621868
    18631869#buddypress table p {

  • src/bp-templates/bp-legacy/css/twentyseventeen.css

     
    9292        }
    9393}
    9494
    95 .buddypress article.page .entry-header .entry-title {
    96         font-size: 22px;
    97         font-size: 1.375rem;
    98 }
    99 
    100 @media screen and (min-width: 55em) {
    101         .buddypress article.page .entry-header .entry-title {
    102                 font-size: 28px;
    103                 font-size: 1.75rem;
    104         }
    105 }
    106 
    107 @media screen and (min-width: 55em) {
     95@media screen and (min-width: 48em) {
    10896        body.buddypress.page.page-two-column #primary .entry-header {
    109                 width: 20%;
     97                width: 30%;
    11098        }
    11199        body.buddypress.page.page-two-column #primary .entry-content {
    112                 width: 80%;
     100                width: 68%;
    113101        }
    114102        body.buddypress:not(.has-sidebar) #primary.content-area,
    115103        body.buddypress:not(.page-two-column) #primary.content-area {
    … …  
    150138}
    151139
    152140#buddypress div.item-list-tabs ul {
    153         background-color: #faf9f1;
     141        background-color: #fafafa;
    154142        border-bottom: 1px solid rgba(234, 234, 234, 0.9);
    155143        border-top: 1px solid rgba(234, 234, 234, 0.9);
    156144        overflow: hidden;
    … …  
    167155
    168156@media screen and (max-width: 38.75em) {
    169157        .bp-user #buddypress #object-nav {
    170                 background: #faf9f1;
     158                background: #fafafa;
    171159                border: 1px solid #eaeaea;
    172160                overflow: visible;
    173161                padding: 10px;
    … …  
    346334        #main #buddypress #group-create-tabs.item-list-tabs ul li.selected a,
    347335        #main #buddypress #group-create-tabs.item-list-tabs ul li.current a {
    348336                background: none;
    349                 color: #141412;
     337                color: #333;
    350338                outline: none;
    351339        }
    352340        #main #buddypress #subnav ul {
    … …  
    557545        width: 100%;
    558546}
    559547
    560 @media screen and (min-width: 48em) {
     548@media screen and (min-width: 30em) {
    561549        #buddypress ul.item-list li div.action div {
    562550                margin: 0 10px 10px 0;
    563551                width: auto;
    … …  
    599587}
    600588
    601589#buddypress form#whats-new-form #whats-new-content.active #whats-new-options[style] #whats-new-post-in-box {
    602         border: 1px solid rgba(212, 208, 186, 0.5);
     590        border: 1px solid rgba(190, 190, 190, 0.5);
    603591        float: left;
    604592        line-height: 1.5em;
    605593        margin-top: 12px;
    … …  
    726714        margin-bottom: 5px;
    727715}
    728716
    729 @media screen and (min-width: 38.75em) {
     717@media screen and (min-width: 30em) {
    730718        #buddypress #activity-stream .activity-content .activity-meta a {
    731719                display: inline-block;
    732720                margin-bottom: 0;
     721                width: auto;
    733722        }
    734723}
    735724
    … …  
    800789
    801790#buddypress #activity-stream .activity-comments .ac-form input[type="submit"],
    802791#buddypress #activity-stream .activity-comments .ac-form .ac-reply-cancel {
    803         color: rgba(20, 20, 18, 0.8);
     792        color: rgba(51, 51, 51, 0.8);
    804793        display: inline-block;
    805794        font-family: inherit;
    806795        font-size: 12px;
    … …  
    813802}
    814803
    815804#buddypress #activity-stream .activity-comments .ac-form .ac-reply-cancel {
    816         border: 1px solid rgba(212, 208, 186, 0.7);
     805        border: 1px solid rgba(190, 190, 190, 0.7);
    817806        text-align: center;
    818807}
    819808
    … …  
    11201109}
    11211110
    11221111.groups.group-settings #group-settings-form div.radio label ul {
    1123         color: rgba(20, 20, 18, 0.6);
     1112        color: rgba(51, 51, 51, 0.6);
    11241113        font-size: 14px;
    11251114        font-size: 0.875rem;
    11261115}
    … …  
    12541243}
    12551244
    12561245.bp-user #buddypress .notifications-options-nav {
    1257         border: 1px solid rgba(212, 208, 186, 0.5);
     1246        border: 1px solid rgba(190, 190, 190, 0.5);
    12581247        float: left;
    12591248        width: 100%;
    12601249}
    … …  
    14341423}
    14351424
    14361425.bp-user #buddypress #message-threads thead tr {
    1437         background: #6f6f6f;
     1426        background: none;
     1427        border-bottom: 1px solid #bebebe;
    14381428}
    14391429
     1430.bp-user #buddypress #message-threads thead tr th {
     1431        background: #555;
     1432}
     1433
     1434.bp-user #buddypress #message-threads tr {
     1435        border-bottom: 5px solid #878787;
     1436}
     1437
    14401438.bp-user #buddypress #message-threads tr td {
    14411439        background: #fff;
    14421440        display: inline-block;
    … …  
    14451443
    14461444.bp-user #buddypress #message-threads tr td.thread-star,
    14471445.bp-user #buddypress #message-threads tr td.thread-options {
    1448         border-bottom-color: #ccc;
    1449         border-bottom-width: 2px;
     1446        border-bottom-color: #bebebe;
     1447        border-bottom-width: 1px;
    14501448        height: 2.4em;
    14511449        padding-bottom: 0.2em;
    14521450        padding-top: 0.2em;
    … …  
    14591457        }
    14601458}
    14611459
     1460.bp-user #buddypress #message-threads tr td.bulk-select-check,
     1461.bp-user #buddypress #message-threads tr td.thread-star,
     1462.bp-user #buddypress #message-threads tr td.thread-from,
     1463.bp-user #buddypress #message-threads tr td.thread-info,
     1464.bp-user #buddypress #message-threads tr td.thread-options {
     1465        border-top: 0;
     1466}
     1467
    14621468.bp-user #buddypress #message-threads tr td.thread-star {
    14631469        vertical-align: middle;
    14641470}
    … …  
    15291535}
    15301536
    15311537.bp-user #buddypress #message-threads tr.unread td {
    1532         background: #eee;
    1533         border-color: #d4d0ba;
     1538        background: none;
     1539        border-color: #bebebe;
    15341540}
    15351541
    15361542.bp-user #buddypress #message-threads th {
    … …  
    17171723
    17181724#buddypress div.activity-comments form .ac-textarea {
    17191725        background: #f7f7f7;
    1720         border: 1px solid rgba(212, 208, 186, 0.5);
     1726        border: 1px solid rgba(190, 190, 190, 0.5);
    17211727}
    17221728
    17231729#buddypress div.activity-comments form .ac-textarea textarea {
    … …  
    17351741#buddypress .standard-form button,
    17361742#buddypress .standard-form select,
    17371743#buddypress .standard-form textarea {
    1738         border-color: rgba(212, 208, 186, 0.5);
     1744        border-color: rgba(190, 190, 190, 0.5);
    17391745        border-width: 1px;
    17401746}
    17411747
    … …  
    17611767#buddypress div.dir-search form,
    17621768#buddypress div.message-search form,
    17631769#buddypress li.groups-members-search form {
    1764         border: 1px solid rgba(212, 208, 186, 0.6);
     1770        border: 1px solid rgba(190, 190, 190, 0.6);
    17651771        overflow: hidden;
    17661772}
    17671773
    … …  
    17951801#buddypress div.dir-search form input[type='text'],
    17961802#buddypress div.message-search form input[type='text'],
    17971803#buddypress li.groups-members-search form input[type='text'] {
    1798         border-right: 1px solid rgba(212, 208, 186, 0.6);
     1804        border-right: 1px solid rgba(190, 190, 190, 0.6);
    17991805        padding: 0.2em 0 0.2em 0.2em;
    18001806}
    18011807
    … …  
    18551861}
    18561862
    18571863#buddypress table tr th {
    1858         background: #6f6f6f;
    1859         border-color: #b7b7b7;
    1860         color: #fff;
     1864        background: #f7f7f7;
     1865        border-color: #eaeaea;
     1866        color: #333;
    18611867}
    18621868
    18631869#buddypress table p {

  • src/bp-templates/bp-legacy/css/twentyseventeen.scss

     
    192192}
    193193
    194194// Variables: color definitions
    195 $body-text:          #141412;
     195
     196$dark-grey:     #555;
     197$medium-grey:   #878787;
     198$light-grey:    #dcdcdc;
     199$x-light-grey:  #f7f7f7;
     200
     201$body-text:          #333;
     202$bp-light-text:      $medium-grey;
    196203$content-background: #fff;
    197 $off-white:          lighten(#f9f8ee, 0.7);
     204$off-white:          #fafafa;
    198205$cream-background:   #f7f5e7;
    199 $light-background:   #f7f7f7;
    200 $medium-background:  #ccc;
    201 $dark-background:    #555;
    202 $border-color:       #d4d0ba;    // border color is varied using rgba
     206$light-background:   $x-light-grey;
     207$medium-background:  $medium-grey;
     208$dark-background:    $dark-grey;
     209$border-color:       #bebebe;
    203210$border-light:       #eaeaea; // BP dividers
    204211$border-med:         #ddd;
    205212$background-hover:   #db572f; // 2017 link background hover
    … …  
    210217$notice-update:      #ced98c;
    211218$stripe-odd:         #ebf0ff;
    212219$stripe-even:        #dbe5ff;
    213 $unread:             #eee;
     220$unread:             $x-light-grey;
    214221$link-action:        #c82b2b;
    215222/*--------------------------------------------------------------
    216223
    … …  
    310317                }
    311318        }
    312319}
    313 // 2017 has very small page entry title headings
    314 // enlarge slightly for BP screens.
    315 .buddypress {
    316         article.page {
    317                 .entry-header {
    318                         .entry-title {
    319                                 @include font-size(22);
    320320
    321                                 @include medium-up {
    322                                         @include font-size(28);
    323                                 }
    324                         }
    325                 }
    326         }
    327 }
    328 
    329321// Open up the content width areas for BP screens to allow max widths.
    330 // This takes into account the ability to add/remove sidebars in 2017.
     322// This takes into account the ability to columnize pages in 2017.
    331323// Only effect changes based on breakpoints.
    332324
    333 @include medium-up {
     325@include med-small-up {
    334326
    335327        body.buddypress.page.page-two-column {
    336328
    … …  
    337329                #primary {
    338330
    339331                        .entry-header {
    340                                 width: 20%;
     332                                width: 30%;
    341333                        }
    342334
    343335                        .entry-content {
    344                                 width: 80%;
     336                                width: 68%;
    345337                        }
    346338                }
    347339        }
    … …  
    357349                        .content-bottom-widgets {
    358350                                margin-left: 0;
    359351                                margin-right: 0;
    360 //                              width: auto;
    361352                        }
    362353                }
    363354
    … …  
    770761        }
    771762
    772763        .action {
     764
    773765                .generic-button {
     766
    774767                        a {
     768
    775769                                &:focus,
    776770                                &:hover {
    777771                                        background: inherit;
    … …  
    917911                                        // Provisionally lets keep the 'action' div
    918912                                        // position but inline-block the buttons
    919913
    920                                         @include med-small-up {
     914                                        @include small-up {
    921915                                                // keep buttons to a row small tablet up
    922916                                                margin: 0 $spacing-val-sm $spacing-val-sm 0;
    923917                                                width: auto;
    … …  
    11311125                                        display: block;
    11321126                                        margin-bottom: $spacing-val-xs;
    11331127
    1134                                         @include small-up-bp {
     1128                                        @include small-up {
    11351129                                                display: inline-block;
    11361130                                                margin-bottom: 0;
     1131                                                width: auto;
    11371132                                        }
    11381133                                }
    11391134                        }
    … …  
    19321927
    19331928                #message-thread {
    19341929                        //Single message view
     1930
    19351931                        a {
    19361932                                border-bottom: 0;
    19371933                        }
    … …  
    19791975                        }
    19801976
    19811977                        #send-reply {
     1978
    19821979                                .message-content {
    19831980                                        background: $content-background;
    19841981                                        border: 0;
    … …  
    19941991                #message-threads {
    19951992
    19961993                        thead {
     1994
    19971995                                tr {
    1998                                         background: lighten($dark-background, 10%);
     1996                                        background: none;
     1997                                        border-bottom: 1px solid $border-color;
     1998
     1999
     2000                                        th {
     2001                                                background: #555;
     2002                                        }
    19992003                                }
    20002004                        }
    20012005
    20022006                        tr {
     2007                                border-bottom: 5px solid $medium-grey;
     2008
    20032009                                td {
    20042010                                        background: $content-background;
    20052011                                        display: inline-block;
    … …  
    20082014
    20092015                                td.thread-star,
    20102016                                td.thread-options {
    2011                                         border-bottom-color: $medium-background;
    2012                                         border-bottom-width: 2px;
     2017                                        border-bottom-color: $border-color;
     2018                                        border-bottom-width: 1px;
    20132019                                        height: 2.4em;
    20142020                                        padding-bottom: 0.2em;
    20152021                                        padding-top: 0.2em;
    … …  
    20192025                                        }
    20202026                                }
    20212027
     2028                                td.bulk-select-check,
     2029                                td.thread-star,
     2030                                td.thread-from,
     2031                                td.thread-info,
     2032                                td.thread-options {
     2033                                        border-top: 0;
     2034                                }
     2035
    20222036                                td.thread-star {
    20232037                                        vertical-align: middle;
    20242038
    … …  
    20802094                        }
    20812095
    20822096                        tr.unread {
     2097
    20832098                                td {
    2084                                         background: $unread;
     2099                                        background: none;
    20852100                                        border-color: $border-color;
    20862101                                }
    20872102                        }
    … …  
    22952310
    22962311// Attempt to reset form control widths
    22972312#main {
     2313
    22982314        #buddypress {
     2315
    22992316                .standard-form {
    23002317
    2301                         li {float: none;}
     2318                        li {
     2319                                float: none;
     2320                        }
     2321
    23022322                        input[type='text'],
    23032323                        input[type='email'],
    23042324                        input[type='password'],
    … …  
    23092329        }
    23102330}
    23112331
    2312 
    23132332#buddypress {
    23142333
    23152334        // Match BP form elements to Themes(2017) styling where styles
    … …  
    24722491                margin: $spacing-val-md 0;
    24732492
    24742493                tr th {
    2475                         background: lighten($dark-background, 10%);
    2476                         border-color: darken($border-light, 20%);
    2477                         color: $content-background;
     2494                        background: $light-background;
     2495                        border-color: $border-light;
     2496                        color: $body-text;
    24782497                }
    24792498
    24802499                // Reduce the themes inherited paragraph margins in tables