Changeset 38865

Timestamp:

10/21/2016 08:36:24 PM (8 years ago)

Author:

davidakennedy

Message:

Twenty Seventeen: Add post author comment styles

Currently, it's hard to output an SVG in the comment function without a lot of extra effort. So this adds a simple border to the author avatar and removes previous code related to SVGs and/or Genericons.

Props laurelfulford.

Fixes #38403.

Location:

trunk/src/wp-content/themes/twentyseventeen

Files:

• assets/css/colors-dark.css (modified) (3 diffs)
• inc/color-patterns.php (modified) (3 diffs)
• rtl.css (modified) (1 diff)
• style.css (modified) (1 diff)

trunk/src/wp-content/themes/twentyseventeen/assets/css/colors-dark.css

@@ -8 +8 @@
 .colors-dark input[type="button"],
 .colors-dark input[type="submit"],
-.colors-dark .bypostauthor > .comment-body > .comment-meta > .comment-author:before,
 .colors-dark .entry-footer .edit-link a.post-edit-link {
     background-color: #fff;
@@ -88 +87 @@
 .colors-dark input[type="datetime-local"]:focus,
 .colors-dark input[type="color"]:focus,
-.colors-dark textarea:focus {
+.colors-dark textarea:focus,
+.bypostauthor > .comment-body > .comment-meta > .comment-author .avatar {
     border-color: #eee;
 }
@@ -406 +406 @@
 }
 
-.colors-dark .bypostauthor > .comment-body > .comment-meta > .comment-author:before {
-    border-color: #222;
-}
-
 .colors-dark .menu-toggle,
 .colors-dark .menu-toggle:hover,

trunk/src/wp-content/themes/twentyseventeen/inc/color-patterns.php

@@ -32 +32 @@
 .colors-custom input[type="button"],
 .colors-custom input[type="submit"],
-.colors-custom .bypostauthor > .comment-body > .comment-meta > .comment-author:before,
 .colors-custom .entry-footer .edit-link a.post-edit-link {
     background-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 13% ); /* base: #222; */
@@ -112 +111 @@
 .colors-custom input[type="datetime-local"]:focus,
 .colors-custom input[type="color"]:focus,
-.colors-custom textarea:focus {
+.colors-custom textarea:focus,
+.bypostauthor > .comment-body > .comment-meta > .comment-author .avatar {
     border-color: hsl( ' . esc_attr( $hue ) . ', ' . $reduced_saturation . ', 20% ); /* base: #333; */
 }
@@ -409 +409 @@
 }
 
-.colors-custom .bypostauthor > .comment-body > .comment-meta > .comment-author:before {
-    border-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 100% ); /* base: #fff; */
-}
-
 .colors-custom .menu-toggle,
 .colors-custom .menu-toggle:hover,

trunk/src/wp-content/themes/twentyseventeen/rtl.css

@@ -175 +175 @@
 
 .children .comment-author .avatar {
-    left: auto;
-    right: -45px;
-}
-
-.bypostauthor > .comment-body > .comment-meta > .comment-author:before {
-    left: auto;
-    right: -65px;
-    margin: -6px -6px 0 0;
-}
-
-.children .bypostauthor > .comment-body > .comment-meta > .comment-author:before {
     left: auto;
     right: -45px;

trunk/src/wp-content/themes/twentyseventeen/style.css

@@ -2334 +2334 @@
 }
 
-.bypostauthor > .comment-body > .comment-meta > .comment-author:before {
-    background: #222;
-    -webkit-border-radius: 20px;
-    border-radius: 20px;
-    border: 1px solid #fff;
-    color: #fff;
-    left: -65px;
-    font-size: 16px;
-    font-size: 1rem;
-    height: 20px;
-    line-height: 1;
-    margin: -6px 0 0 -6px;
-    position: absolute;
-    text-align: center;
-    width: 20px;
-    z-index: 2;
-}
-
-.children .bypostauthor > .comment-body > .comment-meta > .comment-author:before {
-    font-size: 12px;
-    font-size: 0.75rem;
-    height: 16px;
-    left: -45px;
-    width: 16px;
+.bypostauthor > .comment-body > .comment-meta > .comment-author .avatar {
+    border: 1px solid #333;
+    padding: 2px;
 }