WordPress.org
Get WordPress

Making WordPress.org

Changeset 14359


Ignore:
Timestamp:
01/14/2025 09:20:36 PM (20 months ago)
Author:
johnjamesjacoby
Message:

BuddyPress/bbPress: Base theme & Trac stylings

  • Increase size of code/diff fonts
  • Improve layout of roadmap, milenstone, and changeset pages
  • Improve diff style switcher
  • Improve small screen support (overflow, etc...)
  • Move more common styling into variables

See: ​https://buddypress.trac.wordpress.org/ticket/9262

Location:
sites/trunk/buddypress.org/public_html/wp-content/themes/bb-base
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/buddypress.org/public_html/wp-content/themes/bb-base/functions.php

    r14310 r14359  
    5555
    5656        // Version of CSS
    57         $version = '202412180001';
     57        $version = '202501140001';
    5858
    5959        // Base theme styling

  • sites/trunk/buddypress.org/public_html/wp-content/themes/bb-base/style-trac.css

    r14309 r14359  
    11/* =Trac
    22-------------------------------------------------------------- */
     3
     4:root {
     5
     6        /* Admin Bar */
     7        --bbbase-admin-bar-text-color: #c3c4c7;
     8        --bbbase-admin-bar-background-color: #1d2327;
     9        --bbbase-admin-bar-item-hover-color: #72aee6;
     10        --bbbase-admin-bar-item-hover-background-color: #2c3338;
     11
     12        /* Commonly Used Trac Colors */
     13        --bbbase-diff-loc-background-color: #eee;
     14        --bbbase-code-background-color: #f0f0f0;
     15        --bbbase-light-header-background-color: #fafafa;
     16        --bbbase-prefs-hover-color: #21759b;
     17
     18        /* Wrappers */
     19        --bbbase-wrapper-border: 1px solid #ccc;
     20        --bbbase-wrapper-background-color: #eee;
     21
     22        /* Messages */
     23        --bbbase-message-border: 1px solid #aa0;
     24        --bbbase-message-background-color: #ffe;
     25}
    326
    427/* Global */
    … …  
    4265body.trac input.textwidget,
    4366body.trac textarea {
    44         font: 14px/16px sans-serif;
     67        font: var(--bbbase-font-input);
    4568        padding: 8px 10px;
    46         color: #333;
    47         border: 1px solid #ccc;
     69        color: var(--bbbase-darkest-text-color-low-contrast);
     70        border: var(--bbbase-wrapper-border);
    4871}
    4972
    … …  
    90113body.trac table.listing thead th {
    91114        font-size: 14px;
    92         background: #eee;
     115        background: var(--bbbase-wrapper-background-color);
    93116        border: none;
    94117        padding: 8px 10px;
    … …  
    98121body.trac table.listing tbody td {
    99122        font-size: 14px;
    100         background: #fff;
     123        background: var(--bbbase-brightest-white);
    101124        border: none;
    102125        padding: 8px 10px;
    … …  
    105128
    106129body.trac table.listing code {
    107         background-color: #f0f0f0;
     130        background-color: var(--bbbase-);
    108131}
    109132
    … …  
    112135        border: none;
    113136        direction: ltr;
    114         color: #c3c4c7;
     137        color: var(--bbbase-admin-bar-text-color);
    115138        font-size: 13px;
    116139        font-weight: 400;
    … …  
    123146        width: 100%;
    124147        z-index: 99999;
    125         background: #1d2327;
     148        background: var(--bbbase-admin-bar-background-color);
    126149        /* Only visible in Windows High Contrast mode */
    127150        outline: 1px solid transparent;
    … …  
    221244body.trac #subnav-inner ul li a {
    222245        text-decoration: none;
    223         color: #555;
     246        color: #555; /* Not variable */
    224247}
    225248
    226249body.trac #subnav-inner ul li:hover a,
    227250body.trac #subnav-inner ul li:hover a:focus {
    228     background: #2c3338;
    229     color: #72aee6;
     251    background: var(--bbbase-admin-bar-item-hover-background-color);
     252    color: var(--bbbase-admin-bar-item-hover-color);
    230253}
    231254
    232255body.trac #subnav #nav-user:before {
    233         font: normal 20px/1 'dashicons';
     256        font: var(--bbbase-font-dashicons);
    234257        color: rgba(240, 246, 252, .6); /* Not variable */
    235258        content: '\f120';
    … …  
    246269
    247270body.trac #subnav #nav-user a {
    248         color: #f0f0f1;
     271        color: var(--bbbase-code-background-color);
    249272}
    250273
    … …  
    254277
    255278body.trac #subnav #nav-user span.trac-author-user {
    256         color: #72aee6;
     279        color: var(--bbbase-admin-bar-item-hover-color);
    257280}
    258281
    … …  
    286309        padding: 0;
    287310        margin: 0;
    288         font: 100 16px/1.5 Inter, sans-serif;
     311        font: var(--bbbase-font-base);
    289312}
    290313
    … …  
    335358}
    336359
    337 body.trac #mainnav li.active :link {
     360body.trac #mainnav li.active :link,
     361body.trac #mainnav li.active :visited {
    338362        margin-top: 2px;
    339         background-color: #fff;
    340         color: #000;
     363        background-color: var(--bbbase-brightest-white);
     364        color: var(--bbbase-darkest-black);
    341365        border: 1px solid var(--bbbase-grey-border-color-low-contrast) !important;
    342366        border-bottom-color: transparent !important;
    … …  
    344368
    345369body.trac #mainnav li:not(.active) :link:hover {
    346         background-color: #fafafa;
     370        background-color: var(--bbbase-light-header-background-color);
    347371        border: 1px solid rgba(0, 0, 0, 0.1) !important;
    348372        border-bottom: 1px solid transparent !important;
    … …  
    488512        flex-direction: column;
    489513        font-size: 16px;
     514        overflow-x: auto;
    490515}
    491516
    … …  
    507532        padding: 10px 15px;
    508533        border-radius: 0;
    509         background-color: #eee;
     534        background-color: var(--bbbase-wrapper-background-color);
    510535}
    511536
    … …  
    525550
    526551body.trac #content.timeline dt .time {
    527     color: #999;
     552    color: var(--bbbase-light-text-color-low-contrast);
    528553    font-size: 16px;
    529554        width: 50px;
    … …  
    554579
    555580body.trac #content #prefs {
    556         background: #eee;
     581        background: var(--bbbase-wrapper-background-color);
    557582        border-radius: var(--bbbase-border-radius);
    558583        padding: 20px;
    … …  
    560585        float: none;
    561586        font-size: 15px;
    562         border: 1px solid #ccc;
     587        border: var(--bbbase-wrapper-border);
    563588        order: 2;
     589}
     590
     591body.trac #content #prefs input,
     592body.trac #content #prefs select {
     593        font: var(--bbbase-font-input);
     594}
     595
     596body.trac #content #prefs .choice {
     597        float: none;
     598        margin: 0 0 30px 0;
     599        border: none;
     600}
     601
     602body.trac #content #prefs .buttons {
     603        margin: 0;
    564604}
    565605
    … …  
    577617
    578618body.trac #content #prefs label:hover {
    579         color: #21759b;
     619        color: var(--bbbase-prefs-hover-color);
    580620        cursor: pointer;
    581621}
    … …  
    593633body.trac #content #prefs fieldset {
    594634        border-radius: var(--bbbase-border-radius);
    595         border: 1px solid #ccc;
     635        border: var(--bbbase-wrapper-border);
    596636        padding: 10px 20px 20px 20px;
    597637        margin: 10px 0;
    … …  
    615655
    616656/* Roadmap */
    617 body.trac #content.roadmap .milestone {
    618         margin: 0 0 30px 0;
    619 }
    620 
    621 body.trac #content.roadmap .milestone .info h2 {
     657body.trac div.milestone {
     658        margin: 0;
     659        padding: 30px;
     660}
     661
     662body.trac .milestone .info h2 {
    622663        border: none;
    623664        background: none;
    624 }
    625 
    626 body.trac #content.roadmap .milestone .info .date,
    627 body.trac #content.roadmap .milestone .info .percent,
    628 body.trac #content.roadmap .milestone .info .legend {
     665        margin: -30px -30px 0 -30px;
     666}
     667
     668body.trac .milestone .info .date,
     669body.trac .milestone .info .percent,
     670body.trac .milestone .info .legend {
    629671    font-size: 16px;
    630672    font-style: normal;
    631673}
    632 body.trac #content.roadmap .milestone .info .date {
    633     color: #888;
     674body.trac .milestone .info .date {
     675    color: var(--bbbase-light-text-color-low-contrast);
    634676        font-weight: 600;
    635677    margin: 0 20px 10px 20px;
    636678}
    637679
    638 body.trac #content.roadmap .milestone .info .percent,
    639 body.trac #content.roadmap .milestone .info .legend {
     680body.trac .milestone .info .percent,
     681body.trac .milestone .info .legend {
    640682        margin: 10px;
    641683}
    642684
    643 body.trac #content.roadmap .milestone .info .legend {
     685body.trac .milestone .info .legend {
    644686        color: var(--bbbase-brightest-white);
    645687}
    646688
    647 body.trac #content.roadmap .milestone .info .legend span {
     689body.trac .milestone .info .legend span {
    648690        margin: 0 0 0 10px;
    649691        text-transform: capitalize;
    650692}
    651693
    652 body.trac #content.roadmap .milestone .description {
    653     margin: 0 20px;
     694body.trac .milestone .description {
     695    margin: 20px 0 0 0;
     696}
     697
     698body.trac table.progress {
     699        border: var(--bbbase-wrapper-border);
     700        margin-right: 20px !important;
    654701}
    655702
    656703body.trac table.progress,
    657704body.trac .trac-groupprogress {
    658         border: none;
    659705    width: 50%;
    660706    max-width: 50%;
    661         margin: 0 15px;
    662         background: var(--bbbase-light-background-color-low-contrast);
     707        margin: 0 20px;
     708}
     709
     710/* Milestone */
     711body.trac #content.milestone .info .date {
     712        font-size: 15px;
     713        font-style: normal;
     714}
     715
     716body.trac #content.milestone .info {
     717        order: 1;
     718}
     719
     720body.trac #content.milestone .description {
     721        margin: 30px 0;
     722        order: 2;
     723}
     724
     725body.trac #content.milestone .trac-groupprogress {
     726        order: 3;
     727}
     728
     729body.trac #content.milestone #attachments {
     730        order: 4;
     731}
     732
     733body.trac #content.milestone .buttons {
     734        order: 5;
     735}
     736
     737body.trac #content.milestone #help {
     738        order: 6;
     739}
     740
     741body.trac table.progress,
     742body.trac .trac-groupprogress,
     743body.trac #stats {
     744        background-color: transparent;
     745        margin: 0;
     746}
     747
     748body.trac .trac-groupprogress,
     749body.trac #stats {
     750        border: none;
     751}
     752
     753body.trac #stats {
     754        margin: 0 0 30px 0;
     755        float: none;
     756        width: auto;
     757        max-width: none
     758}
     759
     760body.trac .trac-groupprogress th,
     761body.trac .trac-groupprogress td {
     762        font-size: 15px;
    663763}
    664764
    … …  
    671771}
    672772
     773
    673774/* Wiki */
    674775body.trac div.trac-content {
    … …  
    680781body.trac pre.wiki,
    681782body.trac pre.literal-block {
    682     background: #ffe;
    683     border: 1px solid #aa0;
    684     box-shadow: 0 0 1em #eee;
     783    background: var(--bbbase-message-background-color);
     784    border: var(--bbbase-message-border);
     785        border-radius: var(--bbbase-border-radius);
     786    box-shadow: 0 0 1em var(--bbbase-wrapper-background-color);
    685787        font-size: 15px;
    686     border-radius: var(--bbbase-border-radius);
    687788    margin: 20px 0;
    688789    padding: 15px 20px;
    … …  
    704805        margin: 0;
    705806        border: none;
    706         background-color: #eee;
     807        background-color: var(--bbbase-wrapper-background-color);
    707808}
    708809
    … …  
    712813        margin: 0;
    713814        border: none;
    714         background-color: #fafafa;
     815        background-color: var(--bbbase-light-header-background-color);
    715816}
    716817
    … …  
    734835body.trac .wikitoolbar a:active {
    735836        text-decoration: none;
    736         border: 1px solid #ccc;
     837        border: var(--bbbase-wrapper-border);
    737838}
    738839
    … …  
    814915        font-size: 12px;
    815916        padding: 6px 10px;
    816         color: #999;
    817         border: 1px solid #999;
     917        color: var(--bbbase-light-text-color-low-contrast);
     918        border: 1px solid var(--bbbase-light-text-color-low-contrast);
    818919        border-radius: 50px;
    819         background-color: #eee;
     920        background-color: var(--bbbase-wrapper-background-color);
    820921        margin-right: 8px;
    821922}
    … …  
    853954
    854955body.trac #ticket div.description h3 {
    855     border-bottom: 1px solid #ddd;
    856     color: #666;
    857         font-size: 18px;
    858         padding: 15px 0;
    859         margin: 0 0 30px 0;
     956    border: none;
     957    color: var(--bbbase-darkest-text-color-low-contrast);
     958        font-size: 20px;
     959        padding: 25px 0 0 0;
     960        margin: -10px 0 30px 0;
    860961        font-weight: 600;
    861962}
    … …  
    867968body.trac div#ticketchange + div {
    868969        margin-bottom: 30px;
    869         border: 1px solid #ccc;
     970        border: var(--bbbase-wrapper-border);
    870971        border-radius: var(--bbbase-border-radius);
    871972        overflow: hidden;
    … …  
    896997        margin: 0;
    897998        padding: 10px;
    898         background-color: #f0f0f0;
     999        background-color: var(--bbbase-code-background-color);
    8991000}
    9001001
    … …  
    9221023    position: relative;
    9231024        border-collapse: collapse;
    924         border: 1px solid #ccc;
     1025        border: var(--bbbase-wrapper-border);
    9251026        width: calc(100% - 2px);
    9261027}
    … …  
    9311032
    9321033body.trac #github-prs ul.pull-requests li:not(:last-child) {
    933         border-bottom: 1px solid #ccc;
     1034        border-bottom: var(--bbbase-wrapper-border);
    9341035}
    9351036
    … …  
    9551056
    9561057body.trac #github-prs .button {
    957     color: #fff;
     1058    color: var(--bbbase-brightest-white);
    9581059    white-space: nowrap;
    9591060        font-size: 12px;
    9601061        padding: 5px 8px;
    961         background-color: #f0f0f0;
    962         color: #aaa;
    963         border: 1px solid #ccc;
     1062        background-color: var(--bbbase-code-background-color);
     1063        color: var(--bbbase-lightest-text-color-low-contrast);
     1064        border: var(--bbbase-wrapper-border);
    9641065        border-radius: var(--bbbase-border-radius);
    9651066}
    9661067
    9671068@media screen and (max-width: 820px) {
    968         body.trac #github-prs ul.pull-requests li div:first-child {
     1069        body.trac #github-prs ul.pull-requests li:not(.loading) div:first-child {
    9691070                padding-bottom: 0;
    9701071        }
    … …  
    9881089    border-bottom: 1px solid #d7d7d7;
    9891090    box-shadow: none;
    990     padding: 10px 0;
     1091    padding: 10px;
    9911092    margin-bottom: 15px;
    9921093    font-size: 100%;
    … …  
    9951096
    9961097body.trac div#content.ticket #prefs {
    997         border: 1px solid #ccc;
    998         margin: 0;
    999         background: #f0f0f0;
     1098        border: var(--bbbase-wrapper-border);
     1099        margin: 0;
     1100        background: var(--bbbase-code-background-color);
    10001101}
    10011102
    … …  
    10051106}
    10061107
     1108body.trac #content.ticket #ticketchange {
     1109        margin: 30px 0;
     1110}
     1111
    10071112body.trac #trac-edit-warning {
    10081113        margin: 30px;
    … …  
    10191124
    10201125body.trac div#ticketchange + div {
    1021         background: #fafafa;
     1126        background: var(--bbbase-light-header-background-color);
    10221127}
    10231128
    … …  
    10881193        font-family: monospace;
    10891194}
     1195
     1196body.trac #content.browser #info .props:first-child {
     1197        padding-top: 0;
     1198}
     1199
     1200body.trac #content.browser #info .props:last-child {
     1201        padding-bottom: 0;
     1202}
     1203
    10901204body.trac #content.browser #info .props li:not(:last-of-type) {
    10911205        margin-bottom: 20px;
     1206}
     1207
     1208body.trac #content.browser table.code th,
     1209body.trac #content.browser table.code td {
     1210        font: var(--bbbase-font-code);
     1211        padding: 3px;
     1212}
     1213
     1214body.trac #content.browser table.code th {
     1215        border-bottom: none;
     1216        user-select: none;
     1217        background-color: var(--bbbase-diff-loc-background-color);
     1218}
     1219
     1220body.trac #content.browser table.code thead th.content span.recover {
     1221        border: none;
     1222        background-color: transparent;
     1223        margin: 0;
     1224        padding: 0;
     1225}
     1226
     1227body.trac #content.browser table.code tbody tr:hover th {
     1228        background-color: #ddd; /* Not variable */
     1229}
     1230
     1231body.trac #content.browser table.code tbody tr:hover th :link,
     1232body.trac #content.browser table.code tbody tr:hover th :visited {
     1233        color: var(--bbbase-darkest-black);
    10921234}
    10931235
    … …  
    11271269body.trac #main #info tr:first-child th,
    11281270body.trac #main #info tr:first-child td {
    1129         padding-bottom: 10px;
     1271        padding-bottom: 0;
    11301272}
    11311273
    … …  
    11331275body.trac #main #info tr:last-child td {
    11341276        padding-top: 10px;
     1277}
     1278
     1279/* Diff */
     1280body.trac #content.changeset .diff .entries .entry {
     1281        padding: 0;
     1282        background-color: var(--bbbase-grey-background-color-low-contrast);
     1283}
     1284
     1285body.trac #content.changeset table.trac-diff tbody.skipped td,
     1286body.trac #content.changeset .diff table.trac-diff thead td {
     1287        background-color: var(--bbbase-grey-background-color-low-contrast);
     1288}
     1289
     1290body.trac #content.changeset .diff h2 {
     1291        margin: 15px;
     1292        padding: 0;
     1293        font-size: 16px;
     1294}
     1295
     1296body.trac #content.changeset .diff h2 .switch {
     1297        padding: 3px;
     1298        border-radius: 8px;
     1299        background: var(--bbbase-brightest-white);
     1300        border: var(--bbbase-wrapper-border);
     1301        line-height: 12px;
     1302        font-size: 12px;
     1303        margin: -6px -6px 0 0;
     1304        opacity: 0.7;
     1305}
     1306
     1307body.trac #content.changeset .diff h2 .switch:hover {
     1308        opacity: 1;
     1309}
     1310
     1311body.trac #content.changeset .diff h2 .switch span {
     1312        padding: 3px 5px;
     1313        margin: 0;
     1314        border: 1px solid transparent;
     1315        border-radius: 5px;
     1316        display: inline-block;
     1317        font-weight: 400;
     1318}
     1319
     1320body.trac #content.changeset .diff h2 .switch span.active {
     1321        background: var(--bbbase-wrapper-background-color);
     1322        border: var(--bbbase-wrapper-border);
     1323}
     1324
     1325body.trac #content.changeset .diff pre {
     1326        border-width: 1px 0 0 0;
     1327        padding: 20px;
     1328}
     1329
     1330body.trac #content.changeset .diff table.trac-diff {
     1331        border: none;
     1332        font: var(--bbbase-font-code);
     1333}
     1334
     1335body.trac #content.changeset .diff table.trac-diff td,
     1336body.trac #content.changeset .diff table.trac-diff th {
     1337        font: var(--bbbase-font-code);
     1338        padding: 3px;
     1339}
     1340
     1341body.trac #content.changeset .diff table.trac-diff th {
     1342        border: none;
     1343        text-align: center;
     1344        user-select: none;
     1345        background-color: var(--bbbase-diff-loc-background-color);
     1346}
     1347
     1348body.trac #content.changeset .diff table.trac-diff thead th {
     1349        border-bottom: 1px solid #d7d7d7;
     1350}
     1351
     1352body.trac #content.changeset .diff table.trac-diff tbody:not(.skipped) tr:hover td {
     1353        background-color: var(--bbbase-brightest-white);
     1354}
     1355
     1356body.trac #content.changeset .diff table.trac-diff tbody.skipped tr:hover td {
     1357        background-color: var(--bbbase-grey-background-color-low-contrast);
     1358}
     1359
     1360body.trac #content.changeset .diff table.trac-diff tbody:not(.unmod) tr:hover td.l {
     1361        background-color: #fdd; /* Not variable */
     1362}
     1363
     1364body.trac #content.changeset .diff table.trac-diff tbody:not(.unmod) tr:hover td.r {
     1365        background-color: #dfd; /* Not variable */
     1366}
     1367
     1368body.trac #content.changeset .diff table.trac-diff tbody.mod tr:hover td del {
     1369        background-color: #e99; /* Not variable */
     1370}
     1371
     1372body.trac #content.changeset .diff table.trac-diff tbody.mod tr:hover td ins {
     1373        background-color: #9e9; /* Not variable */
    11351374}
    11361375
    … …  
    12431482    margin: 30px auto -30px;
    12441483        font-size: 16px;
    1245     background-color: #ffe;
    1246     border-color: #e6db55;
     1484    background-color: var(--bbbase-message-background-color);
     1485    border: var(--bbbase-message-border);
    12471486    border-radius: var(--bbbase-border-radius);
    12481487}
    … …  
    12601499body.trac #footer {
    12611500        width: 100%;
    1262         background-color: #f4f4f4;
     1501        background-color: var(--bbbase-light-background-color-low-contrast);
    12631502        display: flex;
    12641503        justify-content: center;
    … …  
    13281567    }
    13291568}
     1569@media ( max-width: 960px ) {
     1570    #main {
     1571        overflow-x: initial;
     1572    }
     1573}

  • sites/trunk/buddypress.org/public_html/wp-content/themes/bb-base/style.css

    r14310 r14359  
    9090        --bbbase-form-field-background-color: rgba(255, 255, 255, 1);
    9191        --bbbase-form-field-outline-color: rgba(102, 128, 189, 1);
     92
     93        /* Fonts */
     94        --bbbase-font-base: 100 16px/1.5 'Inter', sans-serif;
     95        --bbbase-font-code: 400 14px/14px monospace;
     96        --bbbase-font-dashicons: 400 20px/1 'dashicons';
     97        --bbbase-font-input: 400 14px/16px sans-serif;
    9298}
    9399
    … …  
    100106}
    101107body {
    102         font: 100 16px/1.5 Inter, sans-serif;
    103         text-align: left;
    104108        background: var(--bbbase-brightest-white);
    105109        color: var(--bbbase-darkest-text-color-low-contrast);
     110        font: var(--bbbase-font-base);
     111        text-align: left;
    106112        margin: 0;
    107113}
    … …  
    477483#bb-menu-icon:before,
    478484#mobile-menu-button:before {
    479         font: normal 16px/1 'dashicons';
     485        font: var(--bbbase-font-dashicons);
     486        font-size: 16px;
    480487        color: var(--bbbase-darkest-black);
    481488        content: '\f349';
    … …  
    817824        border: 1px solid var(--bbbase-grey-border-color-low-contrast);
    818825        border-radius: var(--bbbase-border-radius);
    819         font: 14px/16px sans-serif;
     826        font: var(--bbbase-font-input);
    820827        padding: 5px 10px;
    821828}
    … …  
    884891#commentform input,
    885892#commentform textarea {
    886         font: 100 16px/1.5 Inter, sans-serif;
     893        font: var(--bbbase-font-base);
    887894}
    888895.commentlist {
    … …  
    12871294#bbpress-forums ul.sticky li.bbp-topic-title:before,
    12881295#bbpress-forums ul.super-sticky li.bbp-topic-title:before {
    1289         font: normal 20px/20px 'dashicons';
     1296        font: var(--bbbase-font-dashicons);
     1297        font-size: 20px;
     1298        line-height: 20px;
    12901299        content: '\f450';
    12911300        margin-right: 5px;
    … …  
    16351644.sidebar .topic-info li:before,
    16361645.sidebar div ul li a:before {
    1637         font: normal 16px/23px 'dashicons';
     1646        font: var(--bbbase-font-dashicons);
     1647        font-size: 16px;
     1648        line-height: 23px;
    16381649        margin-right: 5px;
    16391650        color: var(--bbbase-darkest-black);
Note: See TracChangeset for help on using the changeset viewer.