Display and query parser layout (#1043)

* Update query parser text assignment

* Update how padding is used

* Hide query parser container by default

1 files changed, 15 insertions, 16 deletions

diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 24d143fc..67017306 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -36,7 +36,11 @@
     --spinner-size-no-units: 32;
     --action-button-size-no-units: 16;
 
-    --entry-padding: 0.72em;
+    --list-margin: 0.72em;
+    --main-content-vertical-padding: 0em;
+    --main-content-horizontal-padding: 0em;
+    --entry-horizontal-padding: 0.72em;
+    --entry-vertical-padding: 0.72em;
 
     --sidebar-width-no-units: 40;
     --sidebar-width: calc(1em * (var(--sidebar-width-no-units) / var(--font-size-no-units)));
@@ -178,7 +182,7 @@ body {
 }
 ol, ul {
     margin-top: 0;
-    margin-bottom: var(--entry-padding);
+    margin-bottom: var(--list-padding);
 }
 #spinner {
     position: fixed;
@@ -245,6 +249,7 @@ a {
 }
 .content-body-inner {
     width: 100%;
+    padding: var(--main-content-vertical-padding) var(--main-content-horizontal-padding);
 }
 
 
@@ -371,22 +376,20 @@ button.sidebar-button.danger:hover .sidebar-button-icon {
 
 
 /* Search page */
+#query-parser-container {
+    padding-left: var(--entry-horizontal-padding);
+    padding-right: var(--entry-horizontal-padding);
+    padding-bottom: 0.25em;
+    border-bottom: var(--expression-thin-border-size) solid var(--light-border-color);
+}
 #query-parser-content {
     margin-top: 0.5em;
     font-size: var(--query-parser-font-size);
     white-space: pre-wrap;
 }
-#query-parser-content:not(:empty) {
-    padding-bottom: 0.25em;
-    border-bottom: var(--expression-thin-border-size) solid var(--light-border-color);
-}
 #query-parser-content[data-term-spacing=true] .query-parser-term {
     margin-right: 0.2em;
 }
-:root[data-yomichan-page=float] #query-parser-container {
-    padding-left: var(--entry-padding);
-    padding-right: var(--entry-padding);
-}
 
 
 /* Action buttons */
@@ -516,12 +519,8 @@ button.action-button {
 
 /* Entries */
 .entry {
-    padding-top: var(--entry-padding);
-    padding-bottom: var(--entry-padding);
-}
-:root[data-yomichan-page=float] .entry {
-    padding-left: var(--entry-padding);
-    padding-right: var(--entry-padding);
+    padding: var(--entry-vertical-padding) var(--entry-horizontal-padding);
+    position: relative;
 }
 .term-expression .kanji-link {
     border-bottom: var(--expression-thin-border-size) dashed var(--dark-border-color);