Changeset 13272 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-support-2024/sass/site/_bbpress.scss

Timestamp:

03/05/2024 02:45:07 AM (2 years ago)

Author:

adamwood

Message:

Support Theme: Redesign iteration 1

Replace wp4 with wporg-parent-2021
Redesign forums homepage
Reskin templates

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-support-2024/sass/site/_bbpress.scss (modified) (31 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-support-2024/sass/site/_bbpress.scss

@@ -5 +5 @@
 
 /* Many of these override the styles from the plugin */
-
-section {
-    padding: 4rem 0;
-}
 
 #bbpress-forums {
@@ -46 +42 @@
             background: transparent;
             position: relative;
-            border-bottom: 1px solid #eee;
+            border-bottom: 1px solid var(--wp--custom--color--border);
             margin: 1rem 0;
 
@@ -71 +67 @@
 
                 &:hover {
-                    color: $color__link;
+                    color: var(--wp--custom--link--color--text);
                 }
 
@@ -106 +102 @@
 
         .entry-content,
-        .entry-meta {
-            padding: 0;
-
-            @media (min-width: 568px) {
-                padding: 0 ms(4);
-            }
-        }
-
+        .entry-footer {
+            margin-bottom: var(--wp--preset--spacing--40);
+        }
+
+        .entry-content,
+        .entry-meta,
         .entry-header .entry-title,
         .entry-content .container {
@@ -119 +113 @@
         }
 
-        > .entry-content,
-        > article {
-            max-width: 48rem;
+        .wp-block-group > .entry-content,
+        .wp-block-group > article {
 
             @media screen and ( min-width: $ms-breakpoint ) {
@@ -149 +142 @@
 
     main#main {
-        margin-top: 2rem;
-        padding: 0 10px 10px;
 
         @extend .clear;
@@ -173 +164 @@
 
             a {
-                color: $color__wp-blue;
+                color: var(--wp--preset--color--blueberry-1);
                 text-decoration: underline;
 
                 &:hover {
-                    color: $color__wp-blue;
+                    color: var(--wp--preset--color--blueberry-1);
                 }
             }
@@ -203 +194 @@
                 font-size: ms(-3);
             }
+
+            ul.topic a {
+                text-decoration: none;
+            }
         }
 
@@ -218 +213 @@
         }
 
+        .bbp-topic-header .bbp-meta .bbp-topic-permalink,
+        .bbp-reply-header .bbp-meta .bbp-reply-permalink {
+            color: var(--wp--custom--link--color--text);
+        }
+
         .bbp-forums,
         .bbp-topics {
-            border: 1px solid #eee;
+            border: 1px solid var(--wp--custom--color--border);
 
             > .bbp-header {
-                background: $color__wp-blue;
-                color: #fff;
+                background: var(--wp--preset--color--white);
+                border-top: none;
+                font-size: var(--wp--preset--font-size--small);
             }
         }
@@ -263 +264 @@
             margin: 0;
             margin-right: 10px;
-            margin-left: -11%;
+            margin-left: -8.75%;
         }
 
         div.bbp-topic-author img.avatar {
-            margin-left: -19%;
+            margin-left: -15%;
             margin-top: -6px;
             width: 80px;
@@ -275 +276 @@
         }
 
-        @media only screen and (max-width: 1040px) {
+        @media only screen and (max-width: 1200px) {
 
             div.bbp-reply-author img.avatar,
@@ -303 +304 @@
             width: 100%;
             margin: 1rem 0 2rem;
-            padding-left: 10%;
+            padding-left: 8%;
 
             @media screen and ( max-width: 568px ) {
@@ -353 +354 @@
         div.bbp-topic-content {
             padding: 0;
-            margin: 0 0 0 10%;
+            margin: 0 0 0 8%;
 
             @media only screen and (max-width: 1040px) {
@@ -408 +409 @@
 
             a {
-                color: #0073aa;
+                color: var(--wp--custom--link--color--text);
                 text-transform: inherit;
                 font-size: 0.7rem;
@@ -444 +445 @@
 
             /* Override bb-base/style.css */
-            color: $color__link;
+            color: var(--wp--custom--link--color--text);
 
             &:hover,
@@ -456 +457 @@
 
         p.wporg-bbp-topic-site-url {
-            border-top: 1px solid #eee;
+            border-top: 1px solid var(--wp--custom--color--border);
             padding-top: 0.5rem;
         }
@@ -533 +534 @@
 
             .search-form {
-                display: inline-block;
-                width: 50%;
-                margin-bottom: 0;
+                display: none;
             }
 
@@ -541 +540 @@
 
                 .create-topic,
-                > span,
-                .search-form {
+                > span {
                     display: block;
                     width: 100%;
@@ -585 +583 @@
 
                 &:not(.current):not(.dots):hover {
-                    background: $color__wp-blue;
+                    background: var(--wp--preset--color--blueberry-1);
                     color: #fff;
                     text-decoration: none;
-                    border: 1px solid $color__wp-blue;
+                    border: 1px solid var(--wp--preset--color--blueberry-1);
                 }
 
@@ -598 +596 @@
                 &.dots {
                     background: #fff;
-                    color: $color__text-main;
+                    color: var(--wp--preset--color--charcoal-1);
                 }
 
@@ -628 +626 @@
     #bbpress-forums ul.bbp-topics,
     #bbpress-forums #bbp-user-wrapper {
-        font-size: ms(-2);
+        font-size: var(--wp--preset--font-size--small);
     }
 
@@ -648 +646 @@
     li.bbp-topic-freshness {
         text-align: left;
-    }
-
-    h1 {
-        font-size: ms(4);
-        font-weight: 400;
-        padding-bottom: 0;
-        margin: 2rem 0 1rem;
-
-        &.page-title {
-            margin-top: 0;
-            word-break: break-word;
-        }
     }
 
@@ -834 +820 @@
 }
 
+
+
 .single-forum .bbp-topic-form,
 .bbp-view .bbp-topic-form {
     margin-top: 1rem;
     padding-top: 1rem;
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--wp--custom--color--border);
     clear: both;
 }
@@ -951 +939 @@
     .themes-plugins {
         margin: 0 0 4rem;
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid var(--wp--custom--color--border);
 
         p {
@@ -1046 +1034 @@
 
             ul.bbp-lead-topic li.bbp-body {
-                border: 1px solid #eee;
+                border: 1px solid var(--wp--custom--color--border);
                 border-top: none;
             }
@@ -1063 +1051 @@
             ul.odd {
                 background: #fff;
-                border-top: 2px solid #eee;
+                border-top: 2px solid var(--wp--custom--color--border);
             }
 
@@ -1069 +1057 @@
             .wporg-ratings {
                 background-color: #fbfbfb;
-                border: 1px solid #eee;
+                border: 1px solid var(--wp--custom--color--border);
                 border-top: none;
                 border-bottom: none;
@@ -1127 +1115 @@
         header {
             background: #fbfbfb;
-            border: 1px solid #eee;
+            border: 1px solid var(--wp--custom--color--border);
             border-bottom: none;
-            padding: 1rem 2rem 0 10%;
+            padding: var(--wp--preset--spacing--20) 2rem var(--wp--preset--spacing--20) 8%;
+
+            h1 {
+                margin-bottom: 0;
+            }
 
             @media screen and (max-width: 568px) {
@@ -1240 +1232 @@
         }
     }
-
-    .page-header {
-
-        h1 {
-            margin-bottom: 1rem;
+}
+
+.bbpress #bbpress-forums #bbp-user-wrapper {
+    font-size: var(--wp--preset--font-size--small);
+}
+
+#bbpress-forums #bbp-single-user-details {
+
+    #bbp-user-avatar {
+
+        a {
+            display: block;
+        }
+
+        img.avatar {
+            margin-bottom: unset;
+        }
+    }
+
+    #bbp-user-navigation li {
+
+        a {
+            padding-left: unset;
+        }
+
+        &.current a {
+            background: unset;
+            opacity: unset;
+            font-weight: 600;
         }
     }
@@ -1261 +1277 @@
         margin-bottom: ms(0);
         padding-bottom: 10px;
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid var(--wp--custom--color--border);
         display: flex;
         flex-direction: row-reverse;
@@ -1270 +1286 @@
             width: 35%;
             float: none;
-            border-top: 1px solid #eee;
+            border-top: 1px solid var(--wp--custom--color--border);
 
             .reviews-total-count {