Changeset 14036

Timestamp:

09/10/2024 04:01:02 AM (15 months ago)

Author:

adamwood

Message:

Make 2024: Complete o2 editor styling

See ​https://github.com/WordPress/wordpress.org/issues/363

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-breathe-2024/style.css (modified) (6 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-breathe-2024/style.css

@@ -129 +129 @@
 #primary thead td,
 #primary thead th {
-    font-weight: bold;
+    font-weight: bold;
 }
 
@@ -333 +333 @@
 }
 
-.o2-editor .o2-editor-footer .o2-editor-tabs li.selected a {
-    border-top: 1px #fff solid;
-    background: #fff;
-}
-
-.o2-editor .o2-editor-footer .o2-editor-tabs li a {
-    padding: 0.25em 1.2em 0.5em 1.2em;
-    background: var(--wp--preset--color--light-grey-2);
-    border: 1px solid var(--wp--preset--color--charcoal-5);
-    border-top: 1px solid var(--wp--preset--color--light-grey-2);
-    vertical-align: middle;
-    -webkit-border-bottom-left-radius: 3px;
-    -webkit-border-bottom-right-radius: 3px;
-    -moz-border-radius-bottomleft: 3px;
-    -moz-border-radius-bottomright: 3px;
+.o2-editor .o2-editor-footer .o2-editor-tabs li {
+    border-top-color: var(--wp--custom--form--border--color);
+}
+
+.o2-editor .o2-editor-footer .o2-editor-tabs li:first-of-type {
+    border-left-color: var(--wp--custom--form--border--color);
+    border-top-color: var(--wp--custom--form--border--color);
+    -webkit-border-bottom-left-radius: 2px;
+    -webkit-border-bottom-right-radius: 2px;
+    -moz-border-radius-bottomleft: 2px;
+    -moz-border-radius-bottomright: 2px;
     border-bottom-left-radius: 2px;
     border-bottom-right-radius: 2px;
-    font-family: "Inter", sans-serif;
+    -webkit-background-clip: padding-box;
+}
+
+.o2-editor .o2-editor-footer .o2-editor-tabs li.selected {
+    border-top-color: var(--wp--preset--color--white);
+}
+
+.o2-editor .o2-editor-footer .o2-editor-tabs li a {
+    background: var(--wp--preset--color--light-grey-2);
+    border-color: var(--wp--custom--form--border--color);
+    border-top-color: transparent;
+    -webkit-border-bottom-left-radius: 2px;
+    -webkit-border-bottom-right-radius: 2px;
+    -moz-border-radius-bottomleft: 2px;
+    -moz-border-radius-bottomright: 2px;
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
     font-size: 12px;
-    border-left: 0px;
-}
-
-.o2-editor .o2-editor-footer .o2-editor-tabs li:first-of-type {
-    border-left: 1px solid var(--wp--preset--color--charcoal-5);
 }
 
@@ -362 +369 @@
     content: none;
 }
+
+.o2-save.primary,
+.o2-cancel.primary,
+.o2-comment-save.primary,
+.o2-comment-cancel.primary,
+.o2-new-comment-cancel.primary {
+    border: none;
+    background: var(--wp--custom--button--color--background);
+    font-weight: 600;
+    color: var(--wp--custom--button--color--text);
+    font-family: inherit;
+    line-height: var(--wp--custom--button--typography--line-height);
+    padding-top: calc(var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width));
+    padding-bottom: calc(var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width));
+    padding-left: calc(var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width));
+    padding-right: calc(var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width));
+}
+
+.o2-save.primary:hover,
+.o2-cancel.primary:hover,
+.o2-comment-save.primary:hover,
+.o2-comment-cancel.primary:hover,
+.o2-new-comment-cancel.primary:hover {
+    color: var(--wp--custom--button--hover--color--text);
+    background: var(--wp--custom--button--hover--color--background);
+}
+
+.o2-save.primary:active,
+.o2-cancel.primary:active,
+.o2-comment-save.primary:active,
+.o2-comment-cancel.primary:active,
+.o2-new-comment-cancel.primary:active {
+    color: var(--wp--custom--button--active--color--text);
+    background: var(--wp--custom--button--active--color--background);
+    padding-top: var(--wp--custom--button--spacing--padding--top);
+    padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
+    padding-left: var(--wp--custom--button--spacing--padding--left);
+    padding-right: var(--wp--custom--button--spacing--padding--right);
+    border: var(--wp--custom--button--border--width) solid currentColor;
+}
+
+.o2-save.primary:focus,
+.o2-cancel.primary:focus,
+.o2-comment-save.primary:focus,
+.o2-comment-cancel.primary:focus,
+.o2-new-comment-cancel.primary:focus {
+    box-shadow: inset 0 0 0 3px var(--wp--preset--color--white);
+    outline: 1.5px solid var(--wp--custom--button--focus--border--color);
+    outline-offset: -1.5px;
+}
+
+/* .o2-editor .o2-editor-footer > a,
+.o2-save.primary,
+.o2-cancel.primary,
+.o2-comment-save.primary,
+.o2-comment-cancel.primary,
+.o2-new-comment-cancel.primary {
+}
+
+.o2-editor .o2-editor-footer > a {
+    color: var(--wp--preset--color--blueberry-1);
+    background: transparent;
+    border: 1px solid;
+}
+
+.o2-editor .o2-editor-footer > .o2-save.primary,
+.o2-editor .o2-editor-footer > .o2-cancel.primary,
+.o2-editor .o2-editor-footer > .o2-comment-save.primary,
+.o2-editor .o2-editor-footer > .o2-comment-cancel.primary,
+.o2-editor .o2-editor-footer > .o2-new-comment-cancel.primary {
+    color: var(--wp--custom--button--color--text);
+    background: var(--wp--custom--button--color--background);
+    border: none;
+} */
 
 /* Sidebar */
@@ -790 +871 @@
 body > #grav-throbber,
 body > a.grav-tilt-parent {
-    display: none;
+    display: none;
 }
 
@@ -1583 +1664 @@
 
 .widget_wporg_handbook_pages h1 {
-    font-size: 1.6em;
-    font-weight: bold;
-    margin-bottom: 0.6em;
+    font-size: 1.6em;
+    font-weight: bold;
+    margin-bottom: 0.6em;
 }
 
@@ -1763 +1844 @@
 @media (max-width: 550px) {
     nav.o2-post-actions ul {
-        left: initial;
+        left: initial;
     }