Coveo: Refactored CSS code

Author: lamATnginx

assets/css/v2/style.css

@@ -950,7 +950,9 @@ main {
 
 /* MARK: Coveo
 */
-#search-v2 {
+
+/* Search results on content */
+atomic-search-interface#search-v2 {
   display: inline-block !important;
   width: 95vw;
   grid-column: 1 / -1;
@@ -965,94 +967,89 @@ main {
   atomic-search-box {
     z-index: 0;
   }
-}
 
-atomic-search-interface {
-  height: fit-content;
-}
+  atomic-search-layout {
+    grid-template-areas:
+      "atomic-section-search"
+      "atomic-section-status"
+      "atomic-section-facets"
+      "atomic-section-main";
 
-.header-search-box {
-  &::part(wrapper) {
-    border-radius: 0;
-    border-color: oklch(var(--color-foreground));
-  }
+    grid-template-columns: minmax(50%, 100%) !important;
 
-  &::part(suggestions-wrapper) {
-    border-radius: 0;
-    border-color: oklch(var(--color-foreground));
-    width: calc(100% + 2px);
-    margin-inline-start: -1px;
-  }
+    @media (min-width: 1024px) {
+      grid-template-areas:
+        "atomic-section-search atomic-section-status"
+        "atomic-section-facets atomic-section-main  "
+        "atomic-section-facets .                    " !important;
 
-  &::part(submit-button-wrapper) {
-    --atomic-primary: var(--atomic-neutral-dark);
-  }
-}
+      grid-template-columns: minmax(17rem, 24rem) minmax(50%, 100%) !important;
+      column-gap: calc(1.5rem + 2rem) !important;
+    }
 
-atomic-refine-toggle {
-  display: none;
-}
+    atomic-layout-section[section="status"] {
+      /* Override Coveo's width to be full */
+      margin: var(--atomic-layout-spacing-y) 0;
+      max-width: 100%;
+      display: block;
+      width: 100%;
 
-@media (max-width: 1024px) {
-  atomic-refine-toggle {
-    display: block;
-  }
-}
+      .atomic-full-summary-and-sort {
+        display: flex;
+        flex-direction: column;
+        align-items: start;
+        gap: 1rem;
+        justify-content: space-between;
 
-atomic-query-summary {
-  /* Show duration */
-  &::part(duration) {
-    display: inline-block !important;
-  }
-}
+        @media (min-width: 480px) {
+          flex-direction: row;
+          align-items: center;
+        }
 
-atomic-search-layout {
-  grid-template-areas:
-    "atomic-section-search"
-    "atomic-section-status"
-    "atomic-section-facets"
-    "atomic-section-main";
+        atomic-query-summary {
+          &::part(duration) {
+            display: inline-block !important;
+          }
+        }
 
-  grid-template-columns: minmax(50%, 100%) !important;
+        atomic-refine-toggle {
+          display: none;
 
-  @media (min-width: 1024px) {
-    grid-template-areas:
-      "atomic-section-search atomic-section-status"
-      "atomic-section-facets atomic-section-main  "
-      "atomic-section-facets .                    " !important;
+          @media (max-width: 1024px) {
+            display: block;
+          }
+        }
+      }
+    }
 
-    grid-template-columns: minmax(17rem, 24rem) minmax(50%, 100%) !important;
-    column-gap: calc(1.5rem + 2rem) !important;
+    atomic-layout-section[section="search"] {
+      /* Override Coveo's width to be full */
+      width: 100% !important;
+      max-width: 100% !important;
+    }
   }
 }
 
-atomic-search-layout atomic-layout-section[section="status"] {
-  /* Override Coveo's width to be full */
-  max-width: 100%;
-  display: block;
-  width: 100%;
-}
-
-atomic-search-layout atomic-layout-section[section="search"] {
-  /* Override Coveo's width to be full */
-  width: 100% !important;
-  max-width: 100% !important;
-}
+/* Search bar on header */
+atomic-search-interface#search-standalone-header {
+  height: fit-content;
 
-.atomic-full-summary-and-sort {
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-  gap: 1rem;
-  justify-content: space-between;
+  .header-search-box {
+    &::part(wrapper) {
+      border-radius: 0;
+      border-color: oklch(var(--color-foreground));
+    }
 
-  @media (min-width: 480px) {
-    flex-direction: row;
-    align-items: center;
-  }
+    &::part(suggestions-wrapper) {
+      border-radius: 0;
+      border-color: oklch(var(--color-foreground));
+      width: calc(100% + 2px);
+      margin-inline-start: -1px;
+    }
 
-  atomic-sort-dropdown::part(label) {
-    margin-inline-start: 0;
+    &::part(submit-button-wrapper) {
+      --atomic-primary: var(--atomic-neutral-dark);
+    }
   }
 }