Changeset 14359

Timestamp:

01/14/2025 09:20:36 PM (2 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:

• functions.php (modified) (1 diff)
• style-trac.css (modified) (43 diffs)
• style.css (modified) (7 diffs)

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

@@ -55 +55 @@
 
     // Version of CSS
-    $version = '202412180001';
+    $version = '202501140001';
 
     // Base theme styling

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

@@ -1 +1 @@
 /* =Trac
 -------------------------------------------------------------- */
+
+:root {
+
+    /* Admin Bar */
+    --bbbase-admin-bar-text-color: #c3c4c7;
+    --bbbase-admin-bar-background-color: #1d2327;
+    --bbbase-admin-bar-item-hover-color: #72aee6;
+    --bbbase-admin-bar-item-hover-background-color: #2c3338;
+
+    /* Commonly Used Trac Colors */
+    --bbbase-diff-loc-background-color: #eee;
+    --bbbase-code-background-color: #f0f0f0;
+    --bbbase-light-header-background-color: #fafafa;
+    --bbbase-prefs-hover-color: #21759b;
+
+    /* Wrappers */
+    --bbbase-wrapper-border: 1px solid #ccc;
+    --bbbase-wrapper-background-color: #eee;
+
+    /* Messages */
+    --bbbase-message-border: 1px solid #aa0;
+    --bbbase-message-background-color: #ffe;
+}
 
 /* Global */
@@ -42 +65 @@
 body.trac input.textwidget,
 body.trac textarea {
-    font: 14px/16px sans-serif;
+    font: var(--bbbase-font-input);
     padding: 8px 10px;
-    color: #333;
-    border: 1px solid #ccc;
+    color: var(--bbbase-darkest-text-color-low-contrast);
+    border: var(--bbbase-wrapper-border);
 }
 
@@ -90 +113 @@
 body.trac table.listing thead th {
     font-size: 14px;
-    background: #eee;
+    background: var(--bbbase-wrapper-background-color);
     border: none;
     padding: 8px 10px;
@@ -98 +121 @@
 body.trac table.listing tbody td {
     font-size: 14px;
-    background: #fff;
+    background: var(--bbbase-brightest-white);
     border: none;
     padding: 8px 10px;
@@ -105 +128 @@
 
 body.trac table.listing code {
-    background-color: #f0f0f0;
+    background-color: var(--bbbase-);
 }
 
@@ -112 +135 @@
     border: none;
     direction: ltr;
-    color: #c3c4c7;
+    color: var(--bbbase-admin-bar-text-color);
     font-size: 13px;
     font-weight: 400;
@@ -123 +146 @@
     width: 100%;
     z-index: 99999;
-    background: #1d2327;
+    background: var(--bbbase-admin-bar-background-color);
     /* Only visible in Windows High Contrast mode */
     outline: 1px solid transparent;
@@ -221 +244 @@
 body.trac #subnav-inner ul li a {
     text-decoration: none;
-    color: #555;
+    color: #555; /* Not variable */
 }
 
 body.trac #subnav-inner ul li:hover a,
 body.trac #subnav-inner ul li:hover a:focus {
-    background: #2c3338;
-    color: #72aee6;
+    background: var(--bbbase-admin-bar-item-hover-background-color);
+    color: var(--bbbase-admin-bar-item-hover-color);
 }
 
 body.trac #subnav #nav-user:before {
-    font: normal 20px/1 'dashicons';
+    font: var(--bbbase-font-dashicons);
     color: rgba(240, 246, 252, .6); /* Not variable */
     content: '\f120';
@@ -246 +269 @@
 
 body.trac #subnav #nav-user a {
-    color: #f0f0f1;
+    color: var(--bbbase-code-background-color);
 }
 
@@ -254 +277 @@
 
 body.trac #subnav #nav-user span.trac-author-user {
-    color: #72aee6;
+    color: var(--bbbase-admin-bar-item-hover-color);
 }
 
@@ -286 +309 @@
     padding: 0;
     margin: 0;
-    font: 100 16px/1.5 Inter, sans-serif;
+    font: var(--bbbase-font-base);
 }
 
@@ -335 +358 @@
 }
 
-body.trac #mainnav li.active :link {
+body.trac #mainnav li.active :link,
+body.trac #mainnav li.active :visited {
     margin-top: 2px;
-    background-color: #fff;
-    color: #000;
+    background-color: var(--bbbase-brightest-white);
+    color: var(--bbbase-darkest-black);
     border: 1px solid var(--bbbase-grey-border-color-low-contrast) !important;
     border-bottom-color: transparent !important;
@@ -344 +368 @@
 
 body.trac #mainnav li:not(.active) :link:hover {
-    background-color: #fafafa;
+    background-color: var(--bbbase-light-header-background-color);
     border: 1px solid rgba(0, 0, 0, 0.1) !important;
     border-bottom: 1px solid transparent !important;
@@ -488 +512 @@
     flex-direction: column;
     font-size: 16px;
+    overflow-x: auto;
 }
 
@@ -507 +532 @@
     padding: 10px 15px;
     border-radius: 0;
-    background-color: #eee;
+    background-color: var(--bbbase-wrapper-background-color);
 }
 
@@ -525 +550 @@
 
 body.trac #content.timeline dt .time {
-    color: #999;
+    color: var(--bbbase-light-text-color-low-contrast);
     font-size: 16px;
     width: 50px;
@@ -554 +579 @@
 
 body.trac #content #prefs {
-    background: #eee;
+    background: var(--bbbase-wrapper-background-color);
     border-radius: var(--bbbase-border-radius);
     padding: 20px;
@@ -560 +585 @@
     float: none;
     font-size: 15px;
-    border: 1px solid #ccc;
+    border: var(--bbbase-wrapper-border);
     order: 2;
+}
+
+body.trac #content #prefs input,
+body.trac #content #prefs select {
+    font: var(--bbbase-font-input);
+}
+
+body.trac #content #prefs .choice {
+    float: none;
+    margin: 0 0 30px 0;
+    border: none;
+}
+
+body.trac #content #prefs .buttons {
+    margin: 0;
 }
 
@@ -577 +617 @@
 
 body.trac #content #prefs label:hover {
-    color: #21759b;
+    color: var(--bbbase-prefs-hover-color);
     cursor: pointer;
 }
@@ -593 +633 @@
 body.trac #content #prefs fieldset {
     border-radius: var(--bbbase-border-radius);
-    border: 1px solid #ccc;
+    border: var(--bbbase-wrapper-border);
     padding: 10px 20px 20px 20px;
     margin: 10px 0;
@@ -615 +655 @@
 
 /* Roadmap */
-body.trac #content.roadmap .milestone {
-    margin: 0 0 30px 0;
-}
-
-body.trac #content.roadmap .milestone .info h2 {
+body.trac div.milestone {
+    margin: 0;
+    padding: 30px;
+}
+
+body.trac .milestone .info h2 {
     border: none;
     background: none;
-}
-
-body.trac #content.roadmap .milestone .info .date,
-body.trac #content.roadmap .milestone .info .percent,
-body.trac #content.roadmap .milestone .info .legend {
+    margin: -30px -30px 0 -30px;
+}
+
+body.trac .milestone .info .date,
+body.trac .milestone .info .percent,
+body.trac .milestone .info .legend {
     font-size: 16px;
     font-style: normal;
 }
-body.trac #content.roadmap .milestone .info .date {
-    color: #888;
+body.trac .milestone .info .date {
+    color: var(--bbbase-light-text-color-low-contrast);
     font-weight: 600;
     margin: 0 20px 10px 20px;
 }
 
-body.trac #content.roadmap .milestone .info .percent,
-body.trac #content.roadmap .milestone .info .legend {
+body.trac .milestone .info .percent,
+body.trac .milestone .info .legend {
     margin: 10px;
 }
 
-body.trac #content.roadmap .milestone .info .legend {
+body.trac .milestone .info .legend {
     color: var(--bbbase-brightest-white);
 }
 
-body.trac #content.roadmap .milestone .info .legend span {
+body.trac .milestone .info .legend span {
     margin: 0 0 0 10px;
     text-transform: capitalize;
 }
 
-body.trac #content.roadmap .milestone .description {
-    margin: 0 20px;
+body.trac .milestone .description {
+    margin: 20px 0 0 0;
+}
+
+body.trac table.progress {
+    border: var(--bbbase-wrapper-border);
+    margin-right: 20px !important;
 }
 
 body.trac table.progress,
 body.trac .trac-groupprogress {
-    border: none;
     width: 50%;
     max-width: 50%;
-    margin: 0 15px;
-    background: var(--bbbase-light-background-color-low-contrast);
+    margin: 0 20px;
+}
+
+/* Milestone */
+body.trac #content.milestone .info .date {
+    font-size: 15px;
+    font-style: normal;
+}
+
+body.trac #content.milestone .info {
+    order: 1;
+}
+
+body.trac #content.milestone .description {
+    margin: 30px 0;
+    order: 2;
+}
+
+body.trac #content.milestone .trac-groupprogress {
+    order: 3;
+}
+
+body.trac #content.milestone #attachments {
+    order: 4;
+}
+
+body.trac #content.milestone .buttons {
+    order: 5;
+}
+
+body.trac #content.milestone #help {
+    order: 6;
+}
+
+body.trac table.progress,
+body.trac .trac-groupprogress,
+body.trac #stats {
+    background-color: transparent;
+    margin: 0;
+}
+
+body.trac .trac-groupprogress,
+body.trac #stats {
+    border: none;
+}
+
+body.trac #stats {
+    margin: 0 0 30px 0;
+    float: none;
+    width: auto;
+    max-width: none
+}
+
+body.trac .trac-groupprogress th,
+body.trac .trac-groupprogress td {
+    font-size: 15px;
 }
 
@@ -671 +771 @@
 }
 
+
 /* Wiki */
 body.trac div.trac-content {
@@ -680 +781 @@
 body.trac pre.wiki,
 body.trac pre.literal-block {
-    background: #ffe;
-    border: 1px solid #aa0;
-    box-shadow: 0 0 1em #eee;
+    background: var(--bbbase-message-background-color);
+    border: var(--bbbase-message-border);
+    border-radius: var(--bbbase-border-radius);
+    box-shadow: 0 0 1em var(--bbbase-wrapper-background-color);
     font-size: 15px;
-    border-radius: var(--bbbase-border-radius);
     margin: 20px 0;
     padding: 15px 20px;
@@ -704 +805 @@
     margin: 0;
     border: none;
-    background-color: #eee;
+    background-color: var(--bbbase-wrapper-background-color);
 }
 
@@ -712 +813 @@
     margin: 0;
     border: none;
-    background-color: #fafafa;
+    background-color: var(--bbbase-light-header-background-color);
 }
 
@@ -734 +835 @@
 body.trac .wikitoolbar a:active {
     text-decoration: none;
-    border: 1px solid #ccc;
+    border: var(--bbbase-wrapper-border);
 }
 
@@ -814 +915 @@
     font-size: 12px;
     padding: 6px 10px;
-    color: #999;
-    border: 1px solid #999;
+    color: var(--bbbase-light-text-color-low-contrast);
+    border: 1px solid var(--bbbase-light-text-color-low-contrast);
     border-radius: 50px;
-    background-color: #eee;
+    background-color: var(--bbbase-wrapper-background-color);
     margin-right: 8px;
 }
@@ -853 +954 @@
 
 body.trac #ticket div.description h3 {
-    border-bottom: 1px solid #ddd;
-    color: #666;
-    font-size: 18px;
-    padding: 15px 0;
-    margin: 0 0 30px 0;
+    border: none;
+    color: var(--bbbase-darkest-text-color-low-contrast);
+    font-size: 20px;
+    padding: 25px 0 0 0;
+    margin: -10px 0 30px 0;
     font-weight: 600;
 }
@@ -867 +968 @@
 body.trac div#ticketchange + div {
     margin-bottom: 30px;
-    border: 1px solid #ccc;
+    border: var(--bbbase-wrapper-border);
     border-radius: var(--bbbase-border-radius);
     overflow: hidden;
@@ -896 +997 @@
     margin: 0;
     padding: 10px;
-    background-color: #f0f0f0;
+    background-color: var(--bbbase-code-background-color);
 }
 
@@ -922 +1023 @@
     position: relative;
     border-collapse: collapse;
-    border: 1px solid #ccc;
+    border: var(--bbbase-wrapper-border);
     width: calc(100% - 2px);
 }
@@ -931 +1032 @@
 
 body.trac #github-prs ul.pull-requests li:not(:last-child) {
-    border-bottom: 1px solid #ccc;
+    border-bottom: var(--bbbase-wrapper-border);
 }
 
@@ -955 +1056 @@
 
 body.trac #github-prs .button {
-    color: #fff;
+    color: var(--bbbase-brightest-white);
     white-space: nowrap;
     font-size: 12px;
     padding: 5px 8px;
-    background-color: #f0f0f0;
-    color: #aaa;
-    border: 1px solid #ccc;
+    background-color: var(--bbbase-code-background-color);
+    color: var(--bbbase-lightest-text-color-low-contrast);
+    border: var(--bbbase-wrapper-border);
     border-radius: var(--bbbase-border-radius);
 }
 
 @media screen and (max-width: 820px) {
-    body.trac #github-prs ul.pull-requests li div:first-child {
+    body.trac #github-prs ul.pull-requests li:not(.loading) div:first-child {
         padding-bottom: 0;
     }
@@ -988 +1089 @@
     border-bottom: 1px solid #d7d7d7;
     box-shadow: none;
-    padding: 10px 0;
+    padding: 10px;
     margin-bottom: 15px;
     font-size: 100%;
@@ -995 +1096 @@
 
 body.trac div#content.ticket #prefs {
-    border: 1px solid #ccc;
-    margin: 0;
-    background: #f0f0f0;
+    border: var(--bbbase-wrapper-border);
+    margin: 0;
+    background: var(--bbbase-code-background-color);
 }
 
@@ -1005 +1106 @@
 }
 
+body.trac #content.ticket #ticketchange {
+    margin: 30px 0;
+}
+
 body.trac #trac-edit-warning {
     margin: 30px;
@@ -1019 +1124 @@
 
 body.trac div#ticketchange + div {
-    background: #fafafa;
+    background: var(--bbbase-light-header-background-color);
 }
 
@@ -1088 +1193 @@
     font-family: monospace;
 }
+
+body.trac #content.browser #info .props:first-child {
+    padding-top: 0;
+}
+
+body.trac #content.browser #info .props:last-child {
+    padding-bottom: 0;
+}
+
 body.trac #content.browser #info .props li:not(:last-of-type) {
     margin-bottom: 20px;
+}
+
+body.trac #content.browser table.code th,
+body.trac #content.browser table.code td {
+    font: var(--bbbase-font-code);
+    padding: 3px;
+}
+
+body.trac #content.browser table.code th {
+    border-bottom: none;
+    user-select: none;
+    background-color: var(--bbbase-diff-loc-background-color);
+}
+
+body.trac #content.browser table.code thead th.content span.recover {
+    border: none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+}
+
+body.trac #content.browser table.code tbody tr:hover th {
+    background-color: #ddd; /* Not variable */
+}
+
+body.trac #content.browser table.code tbody tr:hover th :link,
+body.trac #content.browser table.code tbody tr:hover th :visited {
+    color: var(--bbbase-darkest-black);
 }
 
@@ -1127 +1269 @@
 body.trac #main #info tr:first-child th,
 body.trac #main #info tr:first-child td {
-    padding-bottom: 10px;
+    padding-bottom: 0;
 }
 
@@ -1133 +1275 @@
 body.trac #main #info tr:last-child td {
     padding-top: 10px;
+}
+
+/* Diff */
+body.trac #content.changeset .diff .entries .entry {
+    padding: 0;
+    background-color: var(--bbbase-grey-background-color-low-contrast);
+}
+
+body.trac #content.changeset table.trac-diff tbody.skipped td,
+body.trac #content.changeset .diff table.trac-diff thead td {
+    background-color: var(--bbbase-grey-background-color-low-contrast);
+}
+
+body.trac #content.changeset .diff h2 {
+    margin: 15px;
+    padding: 0;
+    font-size: 16px;
+}
+
+body.trac #content.changeset .diff h2 .switch {
+    padding: 3px;
+    border-radius: 8px;
+    background: var(--bbbase-brightest-white);
+    border: var(--bbbase-wrapper-border);
+    line-height: 12px;
+    font-size: 12px;
+    margin: -6px -6px 0 0;
+    opacity: 0.7;
+}
+
+body.trac #content.changeset .diff h2 .switch:hover {
+    opacity: 1;
+}
+
+body.trac #content.changeset .diff h2 .switch span {
+    padding: 3px 5px;
+    margin: 0;
+    border: 1px solid transparent;
+    border-radius: 5px;
+    display: inline-block;
+    font-weight: 400;
+}
+
+body.trac #content.changeset .diff h2 .switch span.active {
+    background: var(--bbbase-wrapper-background-color);
+    border: var(--bbbase-wrapper-border);
+}
+
+body.trac #content.changeset .diff pre {
+    border-width: 1px 0 0 0;
+    padding: 20px;
+}
+
+body.trac #content.changeset .diff table.trac-diff {
+    border: none;
+    font: var(--bbbase-font-code);
+}
+
+body.trac #content.changeset .diff table.trac-diff td,
+body.trac #content.changeset .diff table.trac-diff th {
+    font: var(--bbbase-font-code);
+    padding: 3px;
+}
+
+body.trac #content.changeset .diff table.trac-diff th {
+    border: none;
+    text-align: center;
+    user-select: none;
+    background-color: var(--bbbase-diff-loc-background-color);
+}
+
+body.trac #content.changeset .diff table.trac-diff thead th {
+    border-bottom: 1px solid #d7d7d7;
+}
+
+body.trac #content.changeset .diff table.trac-diff tbody:not(.skipped) tr:hover td {
+    background-color: var(--bbbase-brightest-white);
+}
+
+body.trac #content.changeset .diff table.trac-diff tbody.skipped tr:hover td {
+    background-color: var(--bbbase-grey-background-color-low-contrast);
+}
+
+body.trac #content.changeset .diff table.trac-diff tbody:not(.unmod) tr:hover td.l {
+    background-color: #fdd; /* Not variable */
+}
+
+body.trac #content.changeset .diff table.trac-diff tbody:not(.unmod) tr:hover td.r {
+    background-color: #dfd; /* Not variable */
+}
+
+body.trac #content.changeset .diff table.trac-diff tbody.mod tr:hover td del {
+    background-color: #e99; /* Not variable */
+}
+
+body.trac #content.changeset .diff table.trac-diff tbody.mod tr:hover td ins {
+    background-color: #9e9; /* Not variable */
 }
 
@@ -1243 +1482 @@
     margin: 30px auto -30px;
     font-size: 16px;
-    background-color: #ffe;
-    border-color: #e6db55;
+    background-color: var(--bbbase-message-background-color);
+    border: var(--bbbase-message-border);
     border-radius: var(--bbbase-border-radius);
 }
@@ -1260 +1499 @@
 body.trac #footer {
     width: 100%;
-    background-color: #f4f4f4;
+    background-color: var(--bbbase-light-background-color-low-contrast);
     display: flex;
     justify-content: center;
@@ -1328 +1567 @@
     }
 }
+@media ( max-width: 960px ) {
+    #main {
+        overflow-x: initial;
+    }
+}

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

@@ -90 +90 @@
     --bbbase-form-field-background-color: rgba(255, 255, 255, 1);
     --bbbase-form-field-outline-color: rgba(102, 128, 189, 1);
+
+    /* Fonts */
+    --bbbase-font-base: 100 16px/1.5 'Inter', sans-serif;
+    --bbbase-font-code: 400 14px/14px monospace;
+    --bbbase-font-dashicons: 400 20px/1 'dashicons';
+    --bbbase-font-input: 400 14px/16px sans-serif;
 }
 
@@ -100 +106 @@
 }
 body {
-    font: 100 16px/1.5 Inter, sans-serif;
-    text-align: left;
     background: var(--bbbase-brightest-white);
     color: var(--bbbase-darkest-text-color-low-contrast);
+    font: var(--bbbase-font-base);
+    text-align: left;
     margin: 0;
 }
@@ -477 +483 @@
 #bb-menu-icon:before,
 #mobile-menu-button:before {
-    font: normal 16px/1 'dashicons';
+    font: var(--bbbase-font-dashicons);
+    font-size: 16px;
     color: var(--bbbase-darkest-black);
     content: '\f349';
@@ -817 +824 @@
     border: 1px solid var(--bbbase-grey-border-color-low-contrast);
     border-radius: var(--bbbase-border-radius);
-    font: 14px/16px sans-serif;
+    font: var(--bbbase-font-input);
     padding: 5px 10px;
 }
@@ -884 +891 @@
 #commentform input,
 #commentform textarea {
-    font: 100 16px/1.5 Inter, sans-serif;
+    font: var(--bbbase-font-base);
 }
 .commentlist {
@@ -1287 +1294 @@
 #bbpress-forums ul.sticky li.bbp-topic-title:before,
 #bbpress-forums ul.super-sticky li.bbp-topic-title:before {
-    font: normal 20px/20px 'dashicons';
+    font: var(--bbbase-font-dashicons);
+    font-size: 20px;
+    line-height: 20px;
     content: '\f450';
     margin-right: 5px;
@@ -1635 +1644 @@
 .sidebar .topic-info li:before,
 .sidebar div ul li a:before {
-    font: normal 16px/23px 'dashicons';
+    font: var(--bbbase-font-dashicons);
+    font-size: 16px;
+    line-height: 23px;
     margin-right: 5px;
     color: var(--bbbase-darkest-black);