Changeset 13450 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-support-2024/sass/elements/_badges.scss

Timestamp:

04/04/2024 02:50:01 AM (2 years ago)

Author:

adamwood

Message:

wporg-support-2024: Update topic layout

Use color palette for badge colors
Update styles of lead topics and replies to match design as close as possible without markup changes

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-support-2024/sass/elements/_badges.scss (modified) (6 diffs)

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

@@ -9 +9 @@
 .author-badge {
         position: absolute;
-        top: 15px;
-        left: 0;
+        top: var(--wp--preset--spacing--20);
+        left: var(--wp--preset--spacing--20);
         padding: 2px 6px;
         color: #fff;
@@ -16 +16 @@
         border-radius: var(--wp--custom--button--border--radius);
 
-        .bbp-topic-author & {
-                top: 2px;
+        .topic-indicator + .bbp-topic-author & {
+                top: 40px;
         }
-
-        @media screen and ( max-width: 568px ) {
-
-                .topic-indicator + .bbp-topic-author & {
-                        top: 12px;
-                }
-        }
-}
-
-.reply.author-has-badge,
-.reply.topic-author,
-.reply.by-moderator {
-        padding-top: 40px !important;
 }
 
@@ -40 +27 @@
 .author-badge-thread-starter {
         background-color: var(--wp--custom--color--thread-starter);
+        color: var(--wp--preset--color--charcoal-1);
 }
 
@@ -52 +40 @@
 .author-badge-reporter {
         background-color: var(--wp--custom--color--thread-reporter);
+        color: var(--wp--preset--color--charcoal-1);
         right: -2px;
         left: initial;
@@ -62 +51 @@
 .bbp-user-reports-submitted {
 
-        div.author-has-badge {
-                box-shadow: none;
-                border-left-style: solid;
-                border-left-width: 3px;
-        }
-
-        // .by-moderator {
-        //      border-left-color: var(--wp--custom--color--moderator);
-        // }
-
-        // .by-plugin-author,
-        // .by-plugin-contributor,
-        // .by-plugin-support-rep {
-        //      border-left-color: var(--wp--custom--color--plugin-author);
-        // }
-
-        // .by-theme-author,
-        // .by-theme-contributor,
-        // .by-theme-support-rep {
-        //      border-left-color: var(--wp--custom--color--theme-author);
-        // }
-
-        .author-badge {
-                left: 0;
-        }
-
         .author-badge-reporter {
                 left: initial;
@@ -93 +56 @@
         }
 }
-
-@media screen and ( max-width: 480px ) {
-
-        .author-badge,
-        .author-badge-reporter {
-                top: -28px;
-                left: -18px;
-
-                .bbp-topic-author & {
-                        top: -38px;
-                }
-
-                .topic-indicator + .bbp-topic-author & {
-                        top: -28px;
-                }
-        }
-}