Changeset 52152

Timestamp:

11/13/2021 04:23:07 AM (3 years ago)

Author:

SergeyBiryukov

Message:

Twenty Eleven: Improve comment form styling for required fields.

Previously, with absolute positioning, the star character to signify required comment form fields could overlap the text in some languages. The star's styling was also inconsistent between the input labels and the comment notes paragraph.

This commit makes the star's styling more consistent and ensures it does not overlap with the text.

Follow-up to [52029].

Props sabernhardt, hellofromTonya.
Fixes #54408.

Location:

trunk/src/wp-content/themes/twentyeleven

Files:

• rtl.css (modified) (1 diff)
• style.css (modified) (1 diff)

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

@@ -445 +445 @@
     box-shadow: -1px 2px 2px rgba(204,204,204,0.8);
 }
-#respond .comment-form-author .required,
-#respond .comment-form-email .required {
-    left: auto;
-    right: 75%;
+#respond .comment-form label .required {
+    float: left;
+    margin-left: 0;
+    margin-right: 4px;
 }
 #respond .form-submit {

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

@@ -2233 +2233 @@
     width: 95%;
 }
-#respond .comment-form-author .required,
-#respond .comment-form-email .required {
+#respond .comment-form label .required,
+#respond .comment-form .comment-notes .required,
+#respond .comment-form .logged-in-as .required {
     color: #bd3500;
     font-size: 22px;
     font-weight: bold;
-    left: 75%;
-    position: absolute;
-    z-index: 1;
+}
+#respond .comment-form label .required {
+    float: right;
+    margin-left: 4px;
+}
+#respond .comment-form .comment-notes .required,
+#respond .comment-form .logged-in-as .required {
+    vertical-align: middle;
 }
 #respond .comment-notes,