enhance: separate page properties from block properties

resources/css/common.css

@@ -35,6 +35,7 @@ html[data-theme='dark'] {
   --ls-active-primary-color: #8ec2c2;
   --ls-active-secondary-color: #d0e8e8;
   --ls-block-properties-background-color: #06323e;
+  --ls-page-properties-background-color: #02171d;
   --ls-block-ref-link-text-color: #1a6376;
   --ls-search-background-color: linear-gradient(
     to right,
@@ -93,6 +94,7 @@ html[data-theme='light'] {
   --ls-active-primary-color: rgb(4, 85, 145);
   --ls-active-secondary-color: #003761;
   --ls-block-properties-background-color: #f7f6f4;
+  --ls-page-properties-background-color: #eae7e1;
   --ls-block-ref-link-text-color: #d8e1e8;
   --ls-search-background-color: var(--ls-primary-background-color);
   --ls-border-color: #ccc;

src/main/frontend/components/block.cljs

@@ -1362,7 +1362,11 @@
         properties (sort properties)]
     (cond
       (seq properties)
-      [:div.blocks-properties
+      [:div.block-properties
+       {:class (when pre-block? "page-properties")
+        :title (if pre-block?
+                 "Click to edit this page's properties"
+                 "Click to edit this block's properties")}
        (for [[k v] properties]
          (rum/with-key (property-cp config block k v)
            (str (:block/uuid block) "-" k)))]

src/main/frontend/components/block.css

@@ -160,11 +160,16 @@
   }
 }
 
-.blocks-properties {
+.block-properties {
+  margin: 4px 0;
   padding: 4px 8px;
   background-color: var(--ls-block-properties-background-color, #f0f8ff);
 }
 
+.page-properties {
+    background-color: var(--ls-page-properties-background-color);
+}
+
 .marker-switch {
   padding: 2px 4px;
   opacity: 0.5;