Created
February 21, 2023 19:49
-
-
Save marnocha/f0db90ba90744db9b0beae3b72c3a5d5 to your computer and use it in GitHub Desktop.
Custom CSS for Coveo Atomic search page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
:root { | |
--atomic-font-family: 'Inter', -apple-system, BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif; | |
/* Primary colors */ | |
--atomic-primary-light: #1372ec; /* Used for hover of Facet Titles, Search Box hover, checked boxes hover */ | |
/* Neutral colors */ | |
--atomic-neutral-dark: #232425; /* Used for hover colors, excerpt, (count), and checkbox outline */ | |
/* Semantic colors */ | |
--atomic-on-background: #282829; | |
--atomic-success: #1372ec; | |
--atomic-error: red; | |
--atomic-visited: #282829; | |
--custom-atomic-smart-snippet-background: #ecedf1; /* #e5e6f0 */ | |
} | |
atomic-search-box { | |
--atomic-primary: #2b2462; | |
--atomic-primary-light: #43337a; /* Used for hover of Facet Titles, Search Box hover, checked boxes hover */ | |
} | |
atomic-facet::part(label-button) { | |
--atomic-primary-light: #232425; /* Used for hover of Facet Titles, Search Box hover, checked boxes hover */ | |
} | |
atomic-load-more-results { | |
--atomic-primary: #2b2462; | |
--atomic-primary-light: #43337a; /* Used for hover of Facet Titles, Search Box hover, checked boxes hover */ | |
} | |
/* Narrower Sort Drop Down*/ | |
atomic-sort-dropdown::part(select-parent) { | |
width: 281px; | |
} | |
atomic-sort-dropdown::part(select) { | |
width: 281px; | |
padding-right: 0px; | |
} | |
/* Narrower Refiners and Wider Main Section*/ | |
@media only screen and (min-width: 1287px) { | |
atomic-search-layout[section='main'] { | |
grid-template-columns: 1fr minmax(2rem, 36rem) minmax(50%, 70rem) 1fr !important; | |
} | |
atomic-search-layout { | |
grid-template-columns: 1fr minmax(2rem, 36rem) minmax(50%, 70rem) 1fr !important; | |
} | |
atomic-layout-section[section='facets'] { | |
width: 283px; | |
} | |
atomic-layout-section[section='main'] { | |
width: 890px; | |
} | |
} | |
atomic-smart-snippet { | |
--atomic-primary: black; | |
--atomic-text-base: 0.775rem; | |
--atomic-text-2xl: 18px; | |
--atomic-text-lg: 14px; | |
} | |
atomic-smart-snippet-suggestions { | |
--atomic-primary: black; | |
--atomic-text-base: 0.775rem; | |
--atomic-text-2xl: 18px; | |
--atomic-text-lg: 14px; | |
} | |
atomic-smart-snippet::part(feedback-explain-why-button) { | |
color: black; | |
} | |
atomic-smart-snippet::part(show-more-button) { | |
margin-bottom: 0px; | |
} | |
atomic-smart-snippet::part(show-less-button) { | |
margin-bottom: 0px; | |
} | |
atomic-smart-snippet::part(footer)::before { | |
margin-bottom: 13px; | |
background-color: var(--custom-atomic-smart-snippet-background); | |
} | |
/* Answer Page URL */ | |
atomic-smart-snippet::part(source-url) { | |
text-decoration: none; | |
margin-bottom: 3px; | |
} | |
/* Answer Page Title */ | |
atomic-smart-snippet::part(source-title) { | |
text-decoration: none; | |
margin-bottom: 10px; | |
} | |
atomic-smart-snippet::part(smart-snippet) { | |
padding: 14px; | |
padding-top: 6px; | |
background-color: var(--custom-atomic-smart-snippet-background); | |
} | |
atomic-smart-snippet::part(truncated-answer) { | |
background-color: var(--custom-atomic-smart-snippet-background); | |
} | |
atomic-smart-snippet-suggestions::part(container) { | |
padding: 14px; | |
padding-top: 6px; | |
background-color: var(--custom-atomic-smart-snippet-background); | |
} | |
atomic-smart-snippet-suggestions::part(heading) { | |
padding: 0px; | |
padding-bottom: 2px; | |
font-weight: 600; | |
} | |
atomic-smart-snippet-suggestions::part(question-button-collapsed), atomic-smart-snippet-suggestions::part(question-button-expanded) { | |
background-color: var(--custom-atomic-smart-snippet-background); | |
} | |
atomic-smart-snippet-suggestions::part(question-text-collapsed), atomic-smart-snippet-suggestions::part(question-text-expanded), atomic-smart-snippet-suggestions::part(question-icon-expanded), atomic-smart-snippet-suggestions::part(question-icon-collapsed) { | |
padding-top: 0px; | |
padding-bottom: 0px; | |
} | |
atomic-smart-snippet-suggestions::part(footer)::before { | |
margin-bottom: 0px; | |
background-color: var(--custom-atomic-smart-snippet-background); | |
} | |
atomic-smart-snippet-suggestions::part(source-url) { | |
text-decoration: none; | |
margin-bottom: 3px; | |
} | |
atomic-smart-snippet-suggestions::part(source-title) { | |
text-decoration: none; | |
margin-bottom: 0px; | |
} | |
atomic-smart-snippet-suggestions::part(answer-and-source) { | |
padding-bottom: 0px; | |
} | |
atomic-smart-snippet-suggestions::part(heading) { | |
border-bottom-width: 0px;; | |
} | |
/* Below section is a fix for layout shifts when using React/NextJS */ | |
atomic-layout-section[section='search'] { | |
grid-area: atomic-section-search; | |
grid-row-start: atomic-section-search; | |
grid-column-start: atomic-section-search; | |
grid-row-end: atomic-section-search; | |
grid-column-end: atomic-section-search; | |
} | |
atomic-search-layout atomic-layout-section[section='search'] { | |
margin: var(--atomic-layout-spacing-y) 0; | |
max-width: var(--atomic-layout-max-search-box-input-width, 678px); | |
width: 100%; | |
justify-self: center; | |
} | |
atomic-layout-section[section='facets'] { | |
grid-area: atomic-section-facets; | |
grid-row-start: atomic-section-facets; | |
grid-column-start: atomic-section-facets; | |
grid-row-end: atomic-section-facets; | |
grid-column-end: atomic-section-facets; | |
} | |
atomic-layout-section[section='main'] { | |
grid-area: atomic-section-main; | |
grid-row-start: atomic-section-main; | |
grid-column-start: atomic-section-main; | |
grid-row-end: atomic-section-main; | |
grid-column-end: atomic-section-main; | |
} | |
atomic-search-layout atomic-layout-section[section='status'] { | |
display: grid; | |
justify-content: space-between; | |
grid-template-areas: | |
'atomic-breadbox atomic-breadbox' | |
'atomic-query-summary atomic-sort' | |
'atomic-did-you-mean atomic-did-you-mean' | |
'atomic-notifications atomic-notifications'; | |
} | |
atomic-search-layout atomic-layout-section[section='status'] atomic-breadbox { | |
grid-area: atomic-breadbox; | |
grid-row-start: atomic-breadbox; | |
grid-column-start: atomic-breadbox; | |
grid-row-end: atomic-breadbox; | |
grid-column-end: atomic-breadbox; | |
} | |
atomic-search-layout atomic-layout-section[section='status'] atomic-query-summary { | |
align-self: center; | |
padding-right: 1px; | |
} | |
@media only screen | |
and (max-width: 1023px) | |
{ | |
atomic-search-layout atomic-layout-section[section='status'] atomic-query-summary { | |
grid-area: atomic-query-summary; | |
} | |
} | |
atomic-search-layout atomic-layout-section[section='status']>* { | |
margin-bottom: var(--atomic-layout-spacing-y); | |
} | |
atomic-search-layout atomic-layout-section[section='status'] atomic-refine-toggle { | |
grid-area: atomic-sort; | |
grid-row-start: atomic-sort; | |
grid-column-start: atomic-sort; | |
grid-row-end: atomic-sort; | |
grid-column-end: atomic-sort; | |
} | |
atomic-search-layout atomic-layout-section[section='facets'] * { | |
margin-bottom: var(--atomic-layout-spacing-y); | |
} | |
atomic-search-layout atomic-layout-section[section='facets'] { | |
display: none; | |
} | |
atomic-search-layout { | |
width: 100%; | |
height: 100%; | |
display: none; | |
grid-template-areas: | |
'. atomic-section-search .' | |
'. atomic-section-main .'; | |
grid-template-columns: var(--atomic-layout-spacing-x) minmax(0, 1fr) var(--atomic-layout-spacing-x); | |
} | |
atomic-search-layout atomic-layout-section[section='results'] atomic-smart-snippet { | |
margin-bottom: 1.5rem; | |
} | |
atomic-search-layout atomic-layout-section[section='results'] atomic-smart-snippet-suggestions { | |
margin-bottom: 1.5rem; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment