better properties style

henices · May 7, 2024 · 01d2e16 · 01d2e16
1 parent 97139fe
commit 01d2e16
Show file tree

Hide file tree

Showing 9 changed files with 279 additions and 45 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 {