page style

static/css/styles.css

@@ -4861,7 +4861,7 @@ dialog::backdrop {
     width: 100%;
     min-height: 36px;
     align-items: center;
-    justify-content: flex-start;
+    justify-content: space-between;
   }
 
   .pad-page .header-actions .page-settings-menu {
@@ -5453,12 +5453,16 @@ dialog::backdrop {
   min-height: 0;
 }
 
-/* Compact Page settings dropdown. */
+/* Published page action and settings in one dropdown. */
 .page-settings {
   position: relative;
 }
 
 .page-settings>summary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 9px;
   list-style: none;
   cursor: pointer;
 }
@@ -5467,6 +5471,35 @@ dialog::backdrop {
   display: none;
 }
 
+.page-settings__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.page-settings__status {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--muted);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--muted) 18%, transparent);
+}
+
+.page-settings.is-enabled .page-settings__status {
+  background: var(--accent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
+}
+
+.page-settings__chevron {
+  font-size: .72em;
+  line-height: 1;
+  transition: transform .16s ease;
+}
+
+.page-settings[open] .page-settings__chevron {
+  transform: rotate(180deg);
+}
+
 .page-settings-menu {
   position: absolute;
   z-index: 30;
@@ -5474,7 +5507,7 @@ dialog::backdrop {
   right: 0;
   display: grid;
   gap: 4px;
-  min-width: 220px;
+  min-width: 260px;
   padding: 8px;
   border: 1px solid var(--border);
   border-radius: 9px;
@@ -5482,6 +5515,46 @@ dialog::backdrop {
   box-shadow: 0 12px 30px var(--shadow-28);
 }
 
+.page-settings-action {
+  display: grid;
+  gap: 2px;
+  width: 100%;
+  min-height: 46px;
+  padding: 7px 9px;
+  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
+  border-radius: 7px;
+  background: var(--note-action-accent-bg);
+  color: var(--text);
+  text-align: left;
+  cursor: pointer;
+}
+
+.page-settings-action span {
+  font-weight: 700;
+}
+
+.page-settings-action small {
+  color: var(--muted);
+  font-size: .72rem;
+  font-weight: 500;
+}
+
+.page-settings-action:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--accent) 68%, var(--border));
+  background: var(--note-action-hover);
+}
+
+.page-settings-action:disabled {
+  opacity: .45;
+  cursor: not-allowed;
+}
+
+.page-settings-divider {
+  height: 1px;
+  margin: 3px 1px;
+  background: var(--border);
+}
+
 .page-settings-menu .public-task-toggle,
 .mobile-editor-options__panel .mobile-option-check {
   min-height: 30px;
@@ -5495,11 +5568,6 @@ dialog::backdrop {
   background: var(--surface-hover);
 }
 
-#publish-page:disabled {
-  opacity: .45;
-  cursor: not-allowed;
-}
-
 /* Keep the Simple/Full switch inside the editor label frame. */
 .authorship-mode-control {
   padding: 1px;
@@ -6007,7 +6075,7 @@ dialog::backdrop {
   transform: translateY(0);
 }
 
-.pad-page #publish-page:not(:disabled) {
+.pad-page .page-settings-action:not(:disabled) {
   border-color: color-mix(in srgb, var(--accent) 55%, var(--note-action-border));
   background: var(--note-action-accent-bg);
   color: var(--accent-text-strong);
@@ -6015,6 +6083,7 @@ dialog::backdrop {
 
 .pad-page .header-actions>.secondary-button:focus-visible,
 .pad-page .page-settings>summary.secondary-button:focus-visible,
+.pad-page .page-settings-action:focus-visible,
 .pad-page .editor-toolbar :is(button, summary, select):focus-visible {
   outline: 2px solid var(--focus);
   outline-offset: 2px;