From 01d2e16fa8f7db1a1b368303158ff25999d6e178 Mon Sep 17 00:00:00 2001
From: henices <henices@163.com>
Date: Tue, 7 May 2024 09:59:22 +0800
Subject: [PATCH] better properties style

---
 custom.css            | 36 +++++++++++++++++++++++++++++++-----
 dracula.css           | 36 +++++++++++++++++++++++++++++++-----
 latte.css             | 36 +++++++++++++++++++++++++++++++-----
 macchiato.css         | 36 +++++++++++++++++++++++++++++++-----
 nord.css              | 36 +++++++++++++++++++++++++++++++-----
 onedark.css           | 36 +++++++++++++++++++++++++++++++-----
 sepia.css             | 36 +++++++++++++++++++++++++++++++-----
 src/code/markdown.css | 36 +++++++++++++++++++++++++++++++-----
 xiaobot.css           | 36 +++++++++++++++++++++++++++++++-----
 9 files changed, 279 insertions(+), 45 deletions(-)

diff --git a/custom.css b/custom.css
index c66a530..ffef507 100644
--- a/custom.css
+++ b/custom.css
@@ -1179,10 +1179,32 @@ h3.todo .block-marker.LATER:before {
 }
 */
 
+.block-properties>div>div {
+    display: inline-flex !important;
+    align-items: center;
+}
+
+.page-property-key {
+    display: inline-flex;
+    flex-grow: 1;
+    min-width: 80px !important;
+}
+
 .page-property-value {
+    display: inline-flex;
     color: hsl(var(--cl-text-color), 0.95);
-    position:absolute;
-    left: 8rem;
+}
+
+.block-properties:not(.page-properties)>div>:is(div,span,a):first-child:after,
+.block-properties.page-properties>div>:is(div,span,a):first-child:after {
+    content: "\25cf";
+    display: block;
+    margin: 2px 1em 0 1.6em;
+    color: hsl(var(--cl-text-color));
+    opacity: .2;
+    font-family: Inter;
+    line-height: 2.2em;
+    font-size: .6em;
 }
 
 /*.page-properties .inline.mr-1:before {
@@ -1399,13 +1421,17 @@ svg.h-4.w-4 {
     color: hsl(var(--cl-accent));
 }
 
+.block-properties .page-property-value .page-ref {
+    font-size: 90%;
+}
+
 /* Some values take on important to avoid style plugins from overriding these settings */
-.block-properties:not(.page-properties) {
+.block-properties {
     background-color: hsl(var(--cl-properties-background-color, var(--cl-background), 0.5));
     border-radius: var(--cl-border-minor);
     /*display: inline-block;*/
     padding: 3px 5px !important;
-    font-size: smaller !important;
+    font-size: 90% !important;
     font-family: var(--ls-font-family) !important;
     color: hsl(var(--cl-text-color), 0.9);
 }
@@ -1422,7 +1448,7 @@ svg.h-4.w-4 {
     color: hsl(var(--cl-primary));
     border: 0px solid;
     font-weight: 400;
-    font-size: calc(var(--ls-font-size) * 0.8);
+    /*font-size: calc(var(--ls-font-size) * 0.8);*/
 }
 
 .block-properties:not(.page-properties) a.tag:hover {
diff --git a/dracula.css b/dracula.css
index 8f9036a..ee0ba8c 100644
--- a/dracula.css
+++ b/dracula.css
@@ -1179,10 +1179,32 @@ h3.todo .block-marker.LATER:before {
 }
 */
 
+.block-properties>div>div {
+    display: inline-flex !important;
+    align-items: center;
+}
+
+.page-property-key {
+    display: inline-flex;
+    flex-grow: 1;
+    min-width: 80px !important;
+}
+
 .page-property-value {
+    display: inline-flex;
     color: hsl(var(--cl-text-color), 0.95);
-    position:absolute;
-    left: 8rem;
+}
+
+.block-properties:not(.page-properties)>div>:is(div,span,a):first-child:after,
+.block-properties.page-properties>div>:is(div,span,a):first-child:after {
+    content: "\25cf";
+    display: block;
+    margin: 2px 1em 0 1.6em;
+    color: hsl(var(--cl-text-color));
+    opacity: .2;
+    font-family: Inter;
+    line-height: 2.2em;
+    font-size: .6em;
 }
 
 /*.page-properties .inline.mr-1:before {
@@ -1399,13 +1421,17 @@ svg.h-4.w-4 {
     color: hsl(var(--cl-accent));
 }
 
+.block-properties .page-property-value .page-ref {
+    font-size: 90%;
+}
+
 /* Some values take on important to avoid style plugins from overriding these settings */
-.block-properties:not(.page-properties) {
+.block-properties {
     background-color: hsl(var(--cl-properties-background-color, var(--cl-background), 0.5));
     border-radius: var(--cl-border-minor);
     /*display: inline-block;*/
     padding: 3px 5px !important;
-    font-size: smaller !important;
+    font-size: 90% !important;
     font-family: var(--ls-font-family) !important;
     color: hsl(var(--cl-text-color), 0.9);
 }
@@ -1422,7 +1448,7 @@ svg.h-4.w-4 {
     color: hsl(var(--cl-primary));
     border: 0px solid;
     font-weight: 400;
-    font-size: calc(var(--ls-font-size) * 0.8);
+    /*font-size: calc(var(--ls-font-size) * 0.8);*/
 }
 
 .block-properties:not(.page-properties) a.tag:hover {
diff --git a/latte.css b/latte.css
index ac24415..b4e58f2 100644
--- a/latte.css
+++ b/latte.css
@@ -1179,10 +1179,32 @@ h3.todo .block-marker.LATER:before {
 }
 */
 
+.block-properties>div>div {
+    display: inline-flex !important;
+    align-items: center;
+}
+
+.page-property-key {
+    display: inline-flex;
+    flex-grow: 1;
+    min-width: 80px !important;
+}
+
 .page-property-value {
+    display: inline-flex;
     color: hsl(var(--cl-text-color), 0.95);
-    position:absolute;
-    left: 8rem;
+}
+
+.block-properties:not(.page-properties)>div>:is(div,span,a):first-child:after,
+.block-properties.page-properties>div>:is(div,span,a):first-child:after {
+    content: "\25cf";
+    display: block;
+    margin: 2px 1em 0 1.6em;
+    color: hsl(var(--cl-text-color));
+    opacity: .2;
+    font-family: Inter;
+    line-height: 2.2em;
+    font-size: .6em;
 }
 
 /*.page-properties .inline.mr-1:before {
@@ -1399,13 +1421,17 @@ svg.h-4.w-4 {
     color: hsl(var(--cl-accent));
 }
 
+.block-properties .page-property-value .page-ref {
+    font-size: 90%;
+}
+
 /* Some values take on important to avoid style plugins from overriding these settings */
-.block-properties:not(.page-properties) {
+.block-properties {
     background-color: hsl(var(--cl-properties-background-color, var(--cl-background), 0.5));
     border-radius: var(--cl-border-minor);
     /*display: inline-block;*/
     padding: 3px 5px !important;
-    font-size: smaller !important;
+    font-size: 90% !important;
     font-family: var(--ls-font-family) !important;
     color: hsl(var(--cl-text-color), 0.9);
 }
@@ -1422,7 +1448,7 @@ svg.h-4.w-4 {
     color: hsl(var(--cl-primary));
     border: 0px solid;
     font-weight: 400;
-    font-size: calc(var(--ls-font-size) * 0.8);
+    /*font-size: calc(var(--ls-font-size) * 0.8);*/
 }
 
 .block-properties:not(.page-properties) a.tag:hover {
diff --git a/macchiato.css b/macchiato.css
index 34f851f..2758efa 100644
--- a/macchiato.css
+++ b/macchiato.css
@@ -1179,10 +1179,32 @@ h3.todo .block-marker.LATER:before {
 }
 */
 
+.block-properties>div>div {
+    display: inline-flex !important;
+    align-items: center;
+}
+
+.page-property-key {
+    display: inline-flex;
+    flex-grow: 1;
+    min-width: 80px !important;
+}
+
 .page-property-value {
+    display: inline-flex;
     color: hsl(var(--cl-text-color), 0.95);
-    position:absolute;
-    left: 8rem;
+}
+
+.block-properties:not(.page-properties)>div>:is(div,span,a):first-child:after,
+.block-properties.page-properties>div>:is(div,span,a):first-child:after {
+    content: "\25cf";
+    display: block;
+    margin: 2px 1em 0 1.6em;
+    color: hsl(var(--cl-text-color));
+    opacity: .2;
+    font-family: Inter;
+    line-height: 2.2em;
+    font-size: .6em;
 }
 
 /*.page-properties .inline.mr-1:before {
@@ -1399,13 +1421,17 @@ svg.h-4.w-4 {
     color: hsl(var(--cl-accent));
 }
 
+.block-properties .page-property-value .page-ref {
+    font-size: 90%;
+}
+
 /* Some values take on important to avoid style plugins from overriding these settings */
-.block-properties:not(.page-properties) {
+.block-properties {
     background-color: hsl(var(--cl-properties-background-color, var(--cl-background), 0.5));
     border-radius: var(--cl-border-minor);
     /*display: inline-block;*/
     padding: 3px 5px !important;
-    font-size: smaller !important;
+    font-size: 90% !important;
     font-family: var(--ls-font-family) !important;
     color: hsl(var(--cl-text-color), 0.9);
 }
@@ -1422,7 +1448,7 @@ svg.h-4.w-4 {
     color: hsl(var(--cl-primary));
     border: 0px solid;
     font-weight: 400;
-    font-size: calc(var(--ls-font-size) * 0.8);
+    /*font-size: calc(var(--ls-font-size) * 0.8);*/
 }
 
 .block-properties:not(.page-properties) a.tag:hover {
diff --git a/nord.css b/nord.css
index b05e7e3..a60d137 100644
--- a/nord.css
+++ b/nord.css
@@ -1179,10 +1179,32 @@ h3.todo .block-marker.LATER:before {
 }
 */
 
+.block-properties>div>div {
+    display: inline-flex !important;
+    align-items: center;
+}
+
+.page-property-key {
+    display: inline-flex;
+    flex-grow: 1;
+    min-width: 80px !important;
+}
+
 .page-property-value {
+    display: inline-flex;
     color: hsl(var(--cl-text-color), 0.95);
-    position:absolute;
-    left: 8rem;
+}
+
+.block-properties:not(.page-properties)>div>:is(div,span,a):first-child:after,
+.block-properties.page-properties>div>:is(div,span,a):first-child:after {
+    content: "\25cf";
+    display: block;
+    margin: 2px 1em 0 1.6em;
+    color: hsl(var(--cl-text-color));
+    opacity: .2;
+    font-family: Inter;
+    line-height: 2.2em;
+    font-size: .6em;
 }
 
 /*.page-properties .inline.mr-1:before {
@@ -1399,13 +1421,17 @@ svg.h-4.w-4 {
     color: hsl(var(--cl-accent));
 }
 
+.block-properties .page-property-value .page-ref {
+    font-size: 90%;
+}
+
 /* Some values take on important to avoid style plugins from overriding these settings */
-.block-properties:not(.page-properties) {
+.block-properties {
     background-color: hsl(var(--cl-properties-background-color, var(--cl-background), 0.5));
     border-radius: var(--cl-border-minor);
     /*display: inline-block;*/
     padding: 3px 5px !important;
-    font-size: smaller !important;
+    font-size: 90% !important;
     font-family: var(--ls-font-family) !important;
     color: hsl(var(--cl-text-color), 0.9);
 }
@@ -1422,7 +1448,7 @@ svg.h-4.w-4 {
     color: hsl(var(--cl-primary));
     border: 0px solid;
     font-weight: 400;
-    font-size: calc(var(--ls-font-size) * 0.8);
+    /*font-size: calc(var(--ls-font-size) * 0.8);*/
 }
 
 .block-properties:not(.page-properties) a.tag:hover {
diff --git a/onedark.css b/onedark.css
index 61caf3c..39bec50 100644
--- a/onedark.css
+++ b/onedark.css
@@ -1179,10 +1179,32 @@ h3.todo .block-marker.LATER:before {
 }
 */
 
+.block-properties>div>div {
+    display: inline-flex !important;
+    align-items: center;
+}
+
+.page-property-key {
+    display: inline-flex;
+    flex-grow: 1;
+    min-width: 80px !important;
+}
+
 .page-property-value {
+    display: inline-flex;
     color: hsl(var(--cl-text-color), 0.95);
-    position:absolute;
-    left: 8rem;
+}
+
+.block-properties:not(.page-properties)>div>:is(div,span,a):first-child:after,
+.block-properties.page-properties>div>:is(div,span,a):first-child:after {
+    content: "\25cf";
+    display: block;
+    margin: 2px 1em 0 1.6em;
+    color: hsl(var(--cl-text-color));
+    opacity: .2;
+    font-family: Inter;
+    line-height: 2.2em;
+    font-size: .6em;
 }
 
 /*.page-properties .inline.mr-1:before {
@@ -1399,13 +1421,17 @@ svg.h-4.w-4 {
     color: hsl(var(--cl-accent));
 }
 
+.block-properties .page-property-value .page-ref {
+    font-size: 90%;
+}
+
 /* Some values take on important to avoid style plugins from overriding these settings */
-.block-properties:not(.page-properties) {
+.block-properties {
     background-color: hsl(var(--cl-properties-background-color, var(--cl-background), 0.5));
     border-radius: var(--cl-border-minor);
     /*display: inline-block;*/
     padding: 3px 5px !important;
-    font-size: smaller !important;
+    font-size: 90% !important;
     font-family: var(--ls-font-family) !important;
     color: hsl(var(--cl-text-color), 0.9);
 }
@@ -1422,7 +1448,7 @@ svg.h-4.w-4 {
     color: hsl(var(--cl-primary));
     border: 0px solid;
     font-weight: 400;
-    font-size: calc(var(--ls-font-size) * 0.8);
+    /*font-size: calc(var(--ls-font-size) * 0.8);*/
 }
 
 .block-properties:not(.page-properties) a.tag:hover {
diff --git a/sepia.css b/sepia.css
index 064673f..28c5830 100644
--- a/sepia.css
+++ b/sepia.css
@@ -1179,10 +1179,32 @@ h3.todo .block-marker.LATER:before {
 }
 */
 
+.block-properties>div>div {
+    display: inline-flex !important;
+    align-items: center;
+}
+
+.page-property-key {
+    display: inline-flex;
+    flex-grow: 1;
+    min-width: 80px !important;
+}
+
 .page-property-value {
+    display: inline-flex;
     color: hsl(var(--cl-text-color), 0.95);
-    position:absolute;
-    left: 8rem;
+}
+
+.block-properties:not(.page-properties)>div>:is(div,span,a):first-child:after,
+.block-properties.page-properties>div>:is(div,span,a):first-child:after {
+    content: "\25cf";
+    display: block;
+    margin: 2px 1em 0 1.6em;
+    color: hsl(var(--cl-text-color));
+    opacity: .2;
+    font-family: Inter;
+    line-height: 2.2em;
+    font-size: .6em;
 }
 
 /*.page-properties .inline.mr-1:before {
@@ -1399,13 +1421,17 @@ svg.h-4.w-4 {
     color: hsl(var(--cl-accent));
 }
 
+.block-properties .page-property-value .page-ref {
+    font-size: 90%;
+}
+
 /* Some values take on important to avoid style plugins from overriding these settings */
-.block-properties:not(.page-properties) {
+.block-properties {
     background-color: hsl(var(--cl-properties-background-color, var(--cl-background), 0.5));
     border-radius: var(--cl-border-minor);
     /*display: inline-block;*/
     padding: 3px 5px !important;
-    font-size: smaller !important;
+    font-size: 90% !important;
     font-family: var(--ls-font-family) !important;
     color: hsl(var(--cl-text-color), 0.9);
 }
@@ -1422,7 +1448,7 @@ svg.h-4.w-4 {
     color: hsl(var(--cl-primary));
     border: 0px solid;
     font-weight: 400;
-    font-size: calc(var(--ls-font-size) * 0.8);
+    /*font-size: calc(var(--ls-font-size) * 0.8);*/
 }
 
 .block-properties:not(.page-properties) a.tag:hover {
diff --git a/src/code/markdown.css b/src/code/markdown.css
index 12258be..cfd02d0 100644
--- a/src/code/markdown.css
+++ b/src/code/markdown.css
@@ -454,10 +454,32 @@ h3.todo .block-marker.LATER:before {
 }
 */
 
+.block-properties>div>div {
+    display: inline-flex !important;
+    align-items: center;
+}
+
+.page-property-key {
+    display: inline-flex;
+    flex-grow: 1;
+    min-width: 80px !important;
+}
+
 .page-property-value {
+    display: inline-flex;
     color: hsl(var(--cl-text-color), 0.95);
-    position:absolute;
-    left: 8rem;
+}
+
+.block-properties:not(.page-properties)>div>:is(div,span,a):first-child:after,
+.block-properties.page-properties>div>:is(div,span,a):first-child:after {
+    content: "\25cf";
+    display: block;
+    margin: 2px 1em 0 1.6em;
+    color: hsl(var(--cl-text-color));
+    opacity: .2;
+    font-family: Inter;
+    line-height: 2.2em;
+    font-size: .6em;
 }
 
 /*.page-properties .inline.mr-1:before {
@@ -674,13 +696,17 @@ svg.h-4.w-4 {
     color: hsl(var(--cl-accent));
 }
 
+.block-properties .page-property-value .page-ref {
+    font-size: 90%;
+}
+
 /* Some values take on important to avoid style plugins from overriding these settings */
-.block-properties:not(.page-properties) {
+.block-properties {
     background-color: hsl(var(--cl-properties-background-color, var(--cl-background), 0.5));
     border-radius: var(--cl-border-minor);
     /*display: inline-block;*/
     padding: 3px 5px !important;
-    font-size: smaller !important;
+    font-size: 90% !important;
     font-family: var(--ls-font-family) !important;
     color: hsl(var(--cl-text-color), 0.9);
 }
@@ -697,7 +723,7 @@ svg.h-4.w-4 {
     color: hsl(var(--cl-primary));
     border: 0px solid;
     font-weight: 400;
-    font-size: calc(var(--ls-font-size) * 0.8);
+    /*font-size: calc(var(--ls-font-size) * 0.8);*/
 }
 
 .block-properties:not(.page-properties) a.tag:hover {
diff --git a/xiaobot.css b/xiaobot.css
index 37ed7f1..ddbae7b 100644
--- a/xiaobot.css
+++ b/xiaobot.css
@@ -1179,10 +1179,32 @@ h3.todo .block-marker.LATER:before {
 }
 */
 
+.block-properties>div>div {
+    display: inline-flex !important;
+    align-items: center;
+}
+
+.page-property-key {
+    display: inline-flex;
+    flex-grow: 1;
+    min-width: 80px !important;
+}
+
 .page-property-value {
+    display: inline-flex;
     color: hsl(var(--cl-text-color), 0.95);
-    position:absolute;
-    left: 8rem;
+}
+
+.block-properties:not(.page-properties)>div>:is(div,span,a):first-child:after,
+.block-properties.page-properties>div>:is(div,span,a):first-child:after {
+    content: "\25cf";
+    display: block;
+    margin: 2px 1em 0 1.6em;
+    color: hsl(var(--cl-text-color));
+    opacity: .2;
+    font-family: Inter;
+    line-height: 2.2em;
+    font-size: .6em;
 }
 
 /*.page-properties .inline.mr-1:before {
@@ -1399,13 +1421,17 @@ svg.h-4.w-4 {
     color: hsl(var(--cl-accent));
 }
 
+.block-properties .page-property-value .page-ref {
+    font-size: 90%;
+}
+
 /* Some values take on important to avoid style plugins from overriding these settings */
-.block-properties:not(.page-properties) {
+.block-properties {
     background-color: hsl(var(--cl-properties-background-color, var(--cl-background), 0.5));
     border-radius: var(--cl-border-minor);
     /*display: inline-block;*/
     padding: 3px 5px !important;
-    font-size: smaller !important;
+    font-size: 90% !important;
     font-family: var(--ls-font-family) !important;
     color: hsl(var(--cl-text-color), 0.9);
 }
@@ -1422,7 +1448,7 @@ svg.h-4.w-4 {
     color: hsl(var(--cl-primary));
     border: 0px solid;
     font-weight: 400;
-    font-size: calc(var(--ls-font-size) * 0.8);
+    /*font-size: calc(var(--ls-font-size) * 0.8);*/
 }
 
 .block-properties:not(.page-properties) a.tag:hover {