#5 Optimize the query style

custom.css

@@ -188,6 +188,11 @@ a.tag:hover {
 
 .white-theme,
 html[data-theme=light] {
+ --ct-query-background: #fafafa;
+ --ct-query-header-background: #789959;
+ --ct-query-header-color: #fff;
+ --ct-query-result-page-title: var(--ct-page-reference-color);
+ --ct-query-result-page-title-hover: var(--ct-page-reference-color-hover);
  --ct-primary-color: #ffffff;
  --ct-secondary-color: #004174;
  --ct-warning-color: #ff7262;
@@ -313,6 +318,11 @@ html[data-theme=light] .extensions__code-lang {
 
 .dark-theme,
 html[data-theme=dark] {
+ --ct-query-background: var(--ct-page-properties-background);
+ --ct-query-header-background: #30403c;
+ --ct-query-header-color: #fff;
+ --ct-query-result-page-title: var(--ct-page-reference-color);
+ --ct-query-result-page-title-hover: var(--ct-page-reference-color-hover);
  --ct-primary-color: #0d1117;
  --ct-secondary-color: #6096ba;
  --ct-warning-color: #ff7262;
@@ -551,46 +561,35 @@ a.tooltip-priority:first-of-type::before {
  color: var(--ct-query-header-color);
 }
 
-:root {
- --ct-query-header-color: var(--ls-primary-background-color-1);
- --ct-query-header-background: var(--ct-primary-color);
-}
-
 /* query */
-.custom-query > div:first-child {
- box-shadow: 0 0 0 2px var(--color-level-2-1);
- background-color: var(--color-level-1-1);
- border-radius: 8px;
- padding: 1rem 1.5rem;
- margin: 2px;
+
+.custom-query {
+ background: var(--ct-query-background);
+ border-radius: 0.25rem;
+ padding: 0 1.5rem;
  position: relative;
+ margin-top: 0.5rem;
 }
 
-.embed .custom-query > div:first-child {
- background: var(--ls-tertiary-background-color-1);
+.block-body .custom-query > .flex > div,
+#today-queries .custom-query > .flex > div,
+.dsl-query .custom-query > .flex > div {
+ padding: 12px 0;
 }
 
-.dsl-query .custom-query-title > .font-medium,
-:not(.dsl-query) > .custom-query .custom-query-title {
- display: inline-block;
+.dsl-query > .custom-query .foldable-title .opacity-70,
+#today-queries > .custom-query .foldable-title .opacity-70,
+.block-body > .custom-query .foldable-title .opacity-70 {
+ display: block;
  opacity: 1;
- padding: 2px 10px !important;
+ padding: 5px 10px 2px 10px !important;
  background: var(--ct-query-header-background);
  color: var(--ct-query-header-color);
- font-family: "Fira Code", monospace;
- font-size: 0.8em;
- font-style: inherit !important;
- border-radius: 2px;
-}
-
-:not(.dsl-query) > .custom-query .custom-query-title > .flex-row {
- position: absolute;
- left: 24px;
- text-shadow: none;
- font-family: inherit;
- color: var(--ls-primary-text-color-1);
- font-size: 0.875rem;
- font-family: "Only Emoji", "Source Sans 3 VF", "Source Han Sans VF", sans-serif;
+ font-family: var(--ct-code-font-family);
+ font-size: var(--ct-inline-code-font-size);
+ font-style: var(--ct-inline-code-font-style) !important;
+ border-radius: var(--ct-inline-code-border-radius);
+ text-shadow: 1px 1px 0px black, 1px 1px 1px rgb(136, 136, 136);
 }
 
 .dsl-query > .custom-query .foldable-title .opacity-70 code {
@@ -600,4 +599,13 @@ a.tooltip-priority:first-of-type::before {
 
 .block-body > .custom-query .foldable-title .opacity-70 > * {
  color: var(--ct-query-header-color);
+}
+
+/* query - page title in results */
+
+.foldable-title .page-ref {
+ color: var(--ct-query-result-page-title);
+}
+.foldable-title .page-ref:hover {
+ color: var(--ct-query-result-page-title-hover);
 }