Everything you can change with the custom stylesheet in Settings → Advanced → Custom Stylesheet. It ships with the page, so changes appear on the next page load.
Try the theme editor first. Each block has settings for its title, colors, fonts, layout and spacing. Anything tagged Theme editor below already has a control there, and using it is easier than overriding it in CSS.
Filters every table on this page as you type.
Copy any of these into your custom stylesheet. Each one is tested against the live widget.
Clears the rules under the summary, tabs, toolbar and each review. Do not do this by setting --cr-border-color to transparent: that variable also draws the rating distribution bars, so they would disappear too.
.cr-rating-summary,
.cr-toolbar,
.cr-tabs,
.cr-review,
.cr-actions-bar,
.cr-media-gallery {
border-bottom: none;
}Both lines are needed. .cr-summary-right grows to fill the row by default, so centering does nothing until you stop it.
.cr-rating-summary { justify-content: center; }
.cr-summary-right { flex: 0 1 auto; }The widget inherits your theme font unless you say otherwise.
.cr-review-body,
.cr-review-title {
font-family: "Your Brand Font", sans-serif;
}Ordinary CSS. No !important needed.
.cr-write-review-btn {
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: 999px;
}Star color comes from the app, and the app applies it inline, so this needs !important. Prefer changing it in Settings unless you want it to differ per widget.
.classic-ratings-product-reviews {
--cr-star-color: #ff6b35 !important;
}| Class | What it styles |
|---|---|
.classic-ratings-badge |
display: flex; align-items: center; gap: 0.375rem; margin: 0.375rem 0 |
.classic-ratings-review-count |
color: #6D7175; font-size: 0.8125rem |
.classic-ratings-stars-small |
display: flex; gap: 1px |
| Variable | Currently | Changes | Set by | To override |
|---|---|---|---|---|
--cr-button-radius |
10px | Radius | Widget builder | plain CSS |
--cr-footer-min-h |
0 | Min h | Widget builder | plain CSS |
--cr-overlay-text |
#fff | Text | Widget builder | plain CSS |
--cr-po-opacity |
.7 | Opacity | Widget builder | plain CSS |
--cr-po-scale |
1 |
Scale
used by 13 rules |
Widget builder | plain CSS |
--cr-scale-speed |
.4s | Speed | Widget builder | plain CSS |
--cr-transition-speed |
.4s | Speed | Widget builder | plain CSS |
--cr-button-bg |
#000000 |
Fixed value
used by 6 rules |
Hardcoded | add !important |
--cr-button-text |
#ffffff | Fixed value | Hardcoded | add !important |
--cr-play-btn-bg |
rgba(255,255,255,0.95) | Fixed value | Hardcoded | add !important |
--cr-play-btn-icon |
#000000 | Fixed value | Hardcoded | add !important |
--cr-play-btn-opacity |
0.25 | Fixed value | Hardcoded | add !important |
--cr-play-btn-size |
48px |
Fixed value
used by 8 rules |
Hardcoded | add !important |
--cr-text-color |
#1a1a1a | Fixed value | Hardcoded | add !important |
--cr-video-border-radius |
8px | Fixed value | Hardcoded | add !important |
--cr-video-height |
355px | Fixed value | Hardcoded | add !important |
--cr-video-width |
200px |
Fixed value
used by 4 rules |
Hardcoded | add !important |
| Class | What it styles |
|---|---|
.cr-media-with-text |
position:relative; font-family:inherit; max-width:100% |
.cr-shoppable |
position:relative; font-family:inherit; max-width:100%; text-align:center |
.cr-shoppable--bottom |
position:absolute |
.cr-shoppable--continuous-scroll |
|
.cr-shoppable--floating |
position:absolute; display:none; width:100%; padding:10px 16px |
.cr-shoppable--full-width |
width:100vw!important; max-width:100vw!important; position:relative!important; padding:0!important |
.cr-shoppable--inline |
justify-content:flex-start; align-items:center; padding:0 |
.cr-shoppable--product-overlay |
position:absolute; border-radius:inherit; display:flex; align-items:center |
.cr-shoppable--side |
display:flex; flex:0 0 320px; max-width:320px; width:180px |
.cr-shoppable-lightbox |
position:fixed; display:flex; background:rgba(0,0,0,.95); font-family:inherit |
| Variable | Currently | Changes | Set by | To override |
|---|---|---|---|---|
--cr-mwt-cta-bg |
#000000 | Cta bg | Widget builder | plain CSS |
--cr-mwt-cta-color |
#ffffff | Cta color | Widget builder | plain CSS |
--cr-mwt-cta-font |
inherit | Cta font | Widget builder | plain CSS |
--cr-mwt-cta-padding |
12px 28px | Cta padding | Widget builder | plain CSS |
--cr-mwt-cta-radius |
6px | Cta radius | Widget builder | plain CSS |
--cr-mwt-cta-size |
15px | Cta size | Widget builder | plain CSS |
--cr-mwt-cta-x |
50% | Cta x | Widget builder | plain CSS |
--cr-mwt-cta-y |
75% | Cta y | Widget builder | plain CSS |
--cr-mwt-heading-color |
#1a1a1a | Heading color | Widget builder | plain CSS |
--cr-mwt-heading-font |
inherit | Heading font | Widget builder | plain CSS |
--cr-mwt-heading-size |
32px | Heading size | Widget builder | plain CSS |
--cr-mwt-heading-weight |
700 | Heading weight | Widget builder | plain CSS |
--cr-mwt-heading-x |
50% | Heading x | Widget builder | plain CSS |
--cr-mwt-heading-y |
40% | Heading y | Widget builder | plain CSS |
--cr-mwt-media-width |
50% | Media width | Widget builder | plain CSS |
--cr-mwt-notice-color |
#999 | Notice color | Widget builder | plain CSS |
--cr-mwt-notice-padding |
20px | Notice padding | Widget builder | plain CSS |
--cr-mwt-radius |
0 | Radius | Widget builder | plain CSS |
--cr-mwt-sub-color |
#6b7280 | Sub color | Widget builder | plain CSS |
--cr-mwt-sub-font |
inherit | Sub font | Widget builder | plain CSS |
--cr-mwt-sub-size |
16px | Sub size | Widget builder | plain CSS |
--cr-mwt-sub-x |
50% | Sub x | Widget builder | plain CSS |
--cr-mwt-sub-y |
55% | Sub y | Widget builder | plain CSS |
--cr-mwt-text-bg |
#ffffff | Text bg | Widget builder | plain CSS |
| Class | What it styles |
|---|---|
.cr-is-loading |
display:none |
.cr-media-with-text |
border-radius:var(--cr-mwt-radius,0); display:none |
.cr-mwt |
display:flex; gap:0; flex:1; background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%) |
Available on: product
| Variable | Currently | Changes | Set by | To override |
|---|---|---|---|---|
--cr-qa-body-size |
16px |
Body Font Size
used by 14 rules |
Theme editor | add !important |
--cr-qa-button-color |
#1a1a2e |
Button Color
used by 5 rules |
Theme editor | add !important |
--cr-qa-button-radius |
4px | Button Corner Radius | Theme editor | add !important |
--cr-qa-empty-bg |
#faf9f7 | Empty State Background | Theme editor | add !important |
--cr-qa-header-size |
28px | Header Font Size | Theme editor | add !important |
--cr-qa-section-padding |
40px | Section Padding | Theme editor | add !important |
--cr-qa-text-color |
#1a1a2e |
Text Color
used by 12 rules |
Theme editor | add !important |
--cr-qa-bg-light |
#f9fafb | Fixed value | Hardcoded | add !important |
--cr-qa-bg-muted |
#f3f4f6 | Fixed value | Hardcoded | add !important |
--cr-qa-border-color |
#e5e5e5 |
Fixed value
used by 4 rules |
Hardcoded | add !important |
--cr-qa-input-border |
#d1d5db | Fixed value | Hardcoded | add !important |
--cr-qa-text-muted |
#666666 |
Fixed value
used by 11 rules |
Hardcoded | add !important |
--cr-qa-verified-color |
#15803d | Fixed value | Hardcoded | add !important |
| Class | What it styles |
|---|---|
.classic-ratings-product-qa |
padding:var(--cr-qa-section-padding,40px) 0; max-width:100%; font-family:inherit |
.cr-qa-answer |
padding:1rem 1.25rem; background:var(--cr-qa-bg-light,#f9fafb); border-radius:0 6px 6px 0 |
.cr-qa-answer-author |
font-weight:600; color:var(--cr-qa-text-color,#1a1a2e) |
.cr-qa-answer-body |
font-size:var(--cr-qa-body-size,16px); color:var(--cr-qa-text-color,#1a1a2e); margin:0 0 0.625rem |
.cr-qa-answer-label |
font-size:calc(var(--cr-qa-body-size,16px) - 3px); font-weight:700; color:var(--cr-qa-text-muted,#666); text-transform:uppercase |
.cr-qa-answer-meta |
display:flex; align-items:center; gap:0.875rem; font-size:calc(var(--cr-qa-body-size,16px) - 2px) |
.cr-qa-answers |
padding:0; margin:1.75rem 0 0 1.5rem |
.cr-qa-ask-btn |
display:inline-block; padding:0.6rem 1.5rem; background:var(--cr-qa-button-color,#1a1a2e); border:1px solid var(--cr-qa-button-color,#1a1a2e) |
.cr-qa-asker |
display:flex; align-items:center; gap:0.625rem; flex:1 |
.cr-qa-asker-name |
font-weight:600; color:var(--cr-qa-text-color,#1a1a2e); font-size:calc(var(--cr-qa-body-size,16px) - 1px) |
.cr-qa-avatar |
width:44px; height:44px; border-radius:50%; background:var(--cr-qa-bg-muted,#f3f4f6) |
.cr-qa-count |
font-size:var(--cr-qa-body-size,16px); color:var(--cr-qa-text-muted,#666) |
.cr-qa-date |
color:var(--cr-qa-text-muted,#666); font-size:calc(var(--cr-qa-body-size,16px) - 2px) |
.cr-qa-empty |
text-align:center; padding:3rem 1rem; background:var(--cr-qa-empty-bg,#faf9f7); border-radius:8px |
.cr-qa-empty-icon |
font-size:3rem; color:var(--cr-qa-text-muted,#666) |
.cr-qa-empty-subtitle |
font-size:var(--cr-qa-body-size,16px); color:var(--cr-qa-text-muted,#666); margin:0 0 2rem |
.cr-qa-empty-title |
font-size:calc(var(--cr-qa-body-size,16px) + 4px); font-weight:700; color:var(--cr-qa-text-color,#1a1a2e); margin:0 0 0.75rem |
.cr-qa-field-hint |
display:block; font-size:13px; color:var(--cr-qa-text-muted,#666) |
.cr-qa-form |
display:flex; gap:20px; width:100%; padding:12px 14px |
.cr-qa-form-footer |
display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--cr-qa-border-color,#e5e5e5) |
.cr-qa-form-group |
display:flex; gap:6px |
.cr-qa-form-half |
flex:1 |
.cr-qa-form-label |
font-size:15px; font-weight:600; color:var(--cr-qa-text-color,#1a1a2e) |
.cr-qa-form-row |
display:flex; gap:16px |
.cr-qa-header |
display:flex; align-items:center; justify-content:space-between; gap:1rem |
.cr-qa-header-actions |
display:flex; align-items:center |
.cr-qa-item |
border-bottom:1px solid var(--cr-qa-border-color,#e5e5e5); padding:2rem 0 2.25rem |
.cr-qa-item-head |
display:flex; align-items:center; gap:0.75rem |
.cr-qa-list |
margin:0 |
.cr-qa-loading |
text-align:center; color:var(--cr-qa-text-muted,#666); padding:3rem; font-size:var(--cr-qa-body-size,16px) |
.cr-qa-modal |
position:fixed; display:flex; align-items:center; justify-content:center |
.cr-qa-modal-close |
position:absolute; background:none; border:none; color:var(--cr-qa-text-muted,#666) |
.cr-qa-modal-content |
position:relative; background:white; padding:32px 40px 40px; border-radius:16px |
.cr-qa-modal-overlay |
position:absolute; background:rgba(0,0,0,0.5) |
.cr-qa-modal-title |
font-size:22px; font-weight:600; margin:0 0 28px; text-align:center |
.cr-qa-powered-by |
text-align:center; padding:1rem 0 0.5rem; font-size:12px; color:var(--cr-qa-text-muted,#999) |
.cr-qa-question-body |
font-size:var(--cr-qa-body-size,16px); font-weight:600; color:var(--cr-qa-text-color,#1a1a2e); margin:0 |
.cr-qa-required |
color:#e53e3e |
.cr-qa-required-note |
font-size:13px; color:var(--cr-qa-text-muted,#666); text-align:center |
.cr-qa-sr-only |
position:absolute; width:1px; height:1px; padding:0 |
.cr-qa-store-badge |
display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px |
.cr-qa-submit-btn |
padding:12px 32px; background:var(--cr-qa-button-color,#1a1a2e); color:white; border:none |
.cr-qa-success |
background:#dcfce7; color:#166534; padding:1rem; border-radius:8px |
.cr-qa-summary |
display:flex; align-items:center; gap:1rem; padding:0 0 1rem |
.cr-qa-toggle-answers |
background:none; border:none; color:var(--cr-qa-button-color,#1a1a2e); font-size:calc(var(--cr-qa-body-size,16px) - 2px) |
.cr-qa-verified |
display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 7px |
.cr-review |
border-bottom:1px solid var(--cr-qa-border-color,#e5e5e5); padding:2rem 0 2.25rem |
.cr-review-avatar |
width:44px; height:44px; border-radius:50%; background:var(--cr-qa-bg-muted,#f3f4f6) |
Available on: product
| Variable | Currently | Changes | Set by | To override |
|---|---|---|---|---|
--cr-body-size |
16px |
Body Font Size
used by 44 rules |
Theme editor | add !important |
--cr-button-color |
#1a1a2e |
Button Color
used by 51 rules |
Theme editor | add !important |
--cr-button-radius |
4px |
Button Corner Radius
used by 9 rules |
Theme editor | add !important |
--cr-empty-bg |
#faf9f7 | Empty State Background | Theme editor | add !important |
--cr-header-size |
32px | Header Font Size | Theme editor | add !important |
--cr-icon-size |
set in the editor | Rating Icon Size | Theme editor | add !important |
--cr-max-width |
1200px | Section Max Width | Theme editor | add !important |
--cr-section-padding |
40px | Section Padding | Theme editor | add !important |
--cr-text-color |
#1a1a2e |
Text Color
used by 35 rules |
Theme editor | add !important |
--cr-star-color |
#FFC107 |
Star color
used by 6 rules |
App settings | add !important |
--cr-bg-light |
#f9fafb |
Fixed value
used by 6 rules |
Hardcoded | add !important |
--cr-bg-muted |
#f3f4f6 |
Fixed value
used by 10 rules |
Hardcoded | add !important |
--cr-border-color |
#e5e5e5 |
Fixed value
used by 15 rules |
Hardcoded | add !important |
--cr-danger-color |
#dc2626 |
Fixed value
used by 7 rules |
Hardcoded | add !important |
--cr-error-color |
#e53e3e |
Fixed value
used by 4 rules |
Hardcoded | add !important |
--cr-error-text |
#b91c1c | Fixed value | Hardcoded | add !important |
--cr-input-border |
#d1d5db |
Fixed value
used by 11 rules |
Hardcoded | add !important |
--cr-modal-shadow |
0 25px 50px -12px rgba(0, 0, 0, 0.25) | Fixed value | Hardcoded | add !important |
--cr-overlay-bg |
rgba(0, 0, 0, 0.5) | Fixed value | Hardcoded | add !important |
--cr-text-muted |
#666666 |
Fixed value
used by 37 rules |
Hardcoded | add !important |
--cr-verified-color |
#15803d |
Fixed value
used by 5 rules |
Hardcoded | add !important |
| Class | What it styles |
|---|---|
.classic-ratings-header |
display:flex; align-items:center; justify-content:space-between; gap:1rem |
.classic-ratings-product-reviews |
padding:var(--cr-section-padding,40px) 0; max-width:var(--cr-max-width,1200px); font-family:inherit; display:block!important |
.classic-ratings-reviews-list |
margin:0 |
.cr-actions-bar |
display:flex; justify-content:center; padding:1.5rem 0; border-bottom:1px solid var(--cr-border-color,#e5e5e5) |
.cr-add-photo-btn |
display:flex; align-items:center; gap:8px; padding:10px 16px |
.cr-ai-summary |
padding:1.25rem 1.5rem; background:var(--cr-bg-light,#f9fafb); border-radius:0 6px 6px 0 |
.cr-ai-summary-text |
margin:0; font-size:var(--cr-body-size,16px); color:var(--cr-text-muted,#666) |
.cr-already-reviewed |
background:transparent; color:var(--cr-button-color,#1a1a2e); border:1px solid var(--cr-button-color,#1a1a2e); font-weight:500 |
.cr-ask-btn-primary |
background:var(--cr-button-color,#1a1a2e); color:white; border:1px solid var(--cr-button-color,#1a1a2e); box-shadow:0 4px 12px rgba(0,0,0,0.15) |
.cr-ask-question-btn |
padding:0.5rem 1rem; font-size:calc(var(--cr-body-size,16px) - 2px); display:inline-block; background:transparent |
.cr-back-btn |
display:none; padding:12px 24px; background:#fff; border:1px solid var(--cr-input-border,#d1d5db) |
.cr-char-count |
margin:4px 0 0; font-size:13px; color:var(--cr-text-muted,#666) |
.cr-char-count-met |
color:var(--cr-verified-color,#15803d) |
.cr-char-hint |
color:var(--cr-text-muted,#666); font-weight:400; font-size:13px |
.cr-clear-filters |
padding:6px 12px; background:transparent; border:1px solid var(--cr-input-border,#d1d5db); border-radius:6px |
.cr-clear-filters-btn |
display:inline-block; padding:0.5rem 1.5rem; background:transparent; border:1px solid var(--cr-input-border,#d1d5db) |
.cr-compact-header |
display:flex; align-items:center; gap:0.5rem |
.cr-delete-review-link |
color:var(--cr-danger-color,#dc2626); font-size:13px; background:none; border:none |
.cr-dist-active |
background:var(--cr-bg-muted,#f3f4f6); font-weight:700; color:var(--cr-text-color,#1a1a2e) |
.cr-dist-bar |
flex:1; height:8px; background:var(--cr-border-color,#e5e5e5); border-radius:4px |
.cr-dist-count |
width:30px; text-align:right; color:var(--cr-text-muted,#666); font-weight:700 |
.cr-dist-fill |
height:100%; background:var(--cr-star-color,#FFC107); border-radius:4px; width:0% |
.cr-dist-label |
width:50px; color:var(--cr-text-color,#1a1a2e); font-weight:700 |
.cr-dist-row |
display:flex; align-items:center; gap:0.75rem; font-size:calc(var(--cr-body-size,16px) - 2px) |
.cr-distribution |
display:flex; gap:0.125rem |
.cr-done-btn |
padding:12px 32px; background:var(--cr-button-color,#1a1a2e); border:1px solid var(--cr-button-color,#1a1a2e); border-radius:var(--cr-button-radius,4px) |
.cr-done-icon |
color:var(--cr-verified-color,#15803d) |
.cr-done-message |
margin:0; font-size:15px; color:var(--cr-text-muted,#666); max-width:38ch |
.cr-done-referral |
margin:0; font-size:14px; color:#166534; background:#f0fdf4 |
.cr-done-share |
display:flex; gap:10px; width:100%; max-width:42ch |
.cr-done-title |
margin:0; font-size:20px; font-weight:600; color:var(--cr-text-color,#1a1a2e) |
.cr-edit-review-btn |
background:transparent; color:var(--cr-button-color,#1a1a2e); border:1px solid var(--cr-button-color,#1a1a2e); font-weight:500 |
.cr-empty-icon |
font-size:3rem |
.cr-empty-star |
background:none; border:0; padding:2px; margin:0 |
.cr-empty-star-on |
opacity:1 |
.cr-empty-stars |
display:flex; justify-content:center; gap:8px |
.cr-empty-state |
text-align:center; padding:3rem 1rem; background:var(--cr-empty-bg,#faf9f7); border-radius:8px |
.cr-empty-subtitle |
font-size:var(--cr-body-size,16px); color:var(--cr-text-muted,#666); margin:0 0 2rem |
.cr-empty-title |
font-size:calc(var(--cr-body-size,16px) + 4px); font-weight:700; color:var(--cr-text-color,#1a1a2e); margin:0 0 0.75rem |
.cr-error-actions |
display:flex; gap:12px; justify-content:center |
.cr-error-icon |
color:var(--cr-text-muted,#999) |
.cr-error-state |
text-align:center; padding:3rem 1rem; background:var(--cr-empty-bg,#faf9f7); border-radius:8px |
.cr-error-subtitle |
font-size:var(--cr-body-size,16px); color:var(--cr-text-muted,#666); margin:0 0 1.5rem |
.cr-error-title |
font-size:calc(var(--cr-body-size,16px) + 2px); font-weight:600; color:var(--cr-text-color,#1a1a2e); margin:0 0 0.5rem |
.cr-field-error |
display:none; align-items:flex-start; gap:6px; margin:0 |
.cr-field-error-icon |
|
.cr-form-footer |
display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--cr-border-color,#e5e5e5) |
.cr-form-group |
display:flex; gap:6px |
.cr-form-half |
flex:1 |
.cr-form-hint |
font-size:13px; color:var(--cr-text-muted,#666) |
.cr-form-label |
padding:0; font-size:15px; font-weight:600; color:var(--cr-text-color,#1a1a2e) |
.cr-form-row |
display:flex; gap:16px |
.cr-has-questions |
display:flex |
.cr-header-actions |
justify-content:flex-end; padding:0.5rem 1rem; font-size:calc(var(--cr-body-size,16px) - 2px); display:flex |
.cr-hidden |
display:none |
.cr-invalid |
box-shadow:0 0 0 1px var(--cr-error-color,#e53e3e); border-radius:8px; padding:2px |
.cr-layout-grid |
display:grid; gap:1rem; border-bottom:none; border:1px solid var(--cr-border-color,#e5e5e5) |
.cr-lightbox |
position:fixed; background:rgba(0,0,0,0.9); display:flex; align-items:center |
.cr-lightbox-close |
position:absolute; background:none; border:none; color:white |
.cr-lightbox-film |
display:flex; gap:6px; max-width:100%; padding:4px |
.cr-lightbox-main |
max-width:90%; display:grid; gap:20px; align-items:stretch |
.cr-lightbox-nav |
position:absolute; background:rgba(255,255,255,0.2); border:none; color:white |
.cr-lightbox-next |
|
.cr-lightbox-panel |
background:#fff; border-radius:8px; padding:20px; color:#1a1a1a |
.cr-lightbox-panel-body |
margin:0 0 10px; font-size:14px |
.cr-lightbox-panel-date |
font-size:12px; color:#6d7175 |
.cr-lightbox-panel-head |
display:flex; align-items:center; gap:8px |
.cr-lightbox-panel-name |
font-weight:600; font-size:15px |
.cr-lightbox-panel-stars |
|
.cr-lightbox-panel-title |
margin:0 0 6px; font-weight:600; font-size:15px |
.cr-lightbox-panel-verified |
font-size:12px; font-weight:600; color:#0f5132; background:#dff3e6 |
.cr-lightbox-prev |
|
.cr-lightbox-stage |
display:flex; align-items:center; gap:12px; width:92% |
.cr-lightbox-thumb |
flex:0 0 auto; width:56px; height:56px; padding:0 |
.cr-loading |
text-align:center; color:var(--cr-text-muted,#666); padding:3rem; font-size:var(--cr-body-size,16px) |
.cr-manage-actions |
display:flex; justify-content:flex-end; width:100% |
.cr-manage-email |
width:100%; padding:12px 14px; border:1px solid var(--cr-input-border,#d1d5db); border-radius:8px |
.cr-manage-form |
display:flex; gap:8px |
.cr-manage-modal |
position:fixed; display:flex; align-items:center; justify-content:center |
.cr-manage-review-link |
color:var(--cr-button-color,#1a1a2e); font-size:12px; background:none; border:none |
.cr-media-gallery |
padding:1rem 0; border-bottom:1px solid var(--cr-border-color,#e5e5e5) |
.cr-media-gallery-scroll |
display:flex; gap:8px; height:4px; background:transparent |
.cr-media-more-overlay |
position:absolute; background:rgba(0,0,0,0.55); display:flex; align-items:center |
.cr-media-on |
display:flex |
.cr-media-row |
display:flex; gap:24px; flex:1 |
.cr-media-thumb |
width:72px; height:72px; border-radius:6px; position:relative |
.cr-media-thumb-play |
position:absolute; width:28px; height:28px; background:rgba(0,0,0,0.6) |
.cr-modal-close |
position:absolute; background:none; border:none; color:var(--cr-text-muted,#666) |
.cr-modal-confirmed |
display:none |
.cr-modal-content |
position:relative; background:white; padding:32px 40px 40px; border-radius:16px |
.cr-modal-overlay |
display:block!important; position:absolute; background:var(--cr-overlay-bg,rgba(0,0,0,0.5)) |
.cr-modal-title |
font-size:22px; font-weight:600; margin:0 0 28px; text-align:center |
.cr-next-btn |
display:none; padding:12px 28px; background:var(--cr-button-color,#1a1a2e); border:1px solid var(--cr-button-color,#1a1a2e) |
.cr-optional |
color:var(--cr-text-muted,#999); font-weight:400; font-size:13px |
.cr-photo-container |
display:flex; gap:10px; align-items:flex-start |
.cr-photo-preview |
position:relative; width:80px; height:80px; border-radius:8px |
.cr-photo-previews |
display:flex; gap:10px |
.cr-photo-remove |
position:absolute; width:20px; height:20px; background:var(--cr-overlay-bg,rgba(0,0,0,0.6)) |
.cr-photo-section |
flex:1; display:none |
.cr-powered-by |
text-align:center; padding:1rem 0 0.5rem; font-size:12px; color:var(--cr-text-muted,#999) |
.cr-preview-actions |
display:flex; justify-content:space-between; align-items:center; gap:8px |
.cr-processing-spinner |
display:block!important; width:40px; height:40px; border:3px solid #e5e7eb |
.cr-processing-spinner-small |
display:block!important; width:20px; height:20px; border:2px solid #e5e7eb |
.cr-processing-text |
font-size:calc(var(--cr-body-size,16px) - 2px); color:var(--cr-text-muted,#666) |
.cr-qa-answer |
padding:1rem 1.25rem; background:var(--cr-bg-light,#f9fafb); border-radius:0 6px 6px 0 |
.cr-qa-answer-author |
font-weight:600; color:var(--cr-text-color,#1a1a2e) |
.cr-qa-answer-body |
font-size:var(--cr-body-size,16px); color:var(--cr-text-color,#1a1a2e); margin:0 0 0.625rem |
.cr-qa-answer-label |
font-size:calc(var(--cr-body-size,16px) - 3px); font-weight:700; color:var(--cr-text-muted,#666); text-transform:uppercase |
.cr-qa-answer-meta |
display:flex; align-items:center; gap:0.875rem; font-size:calc(var(--cr-body-size,16px) - 2px) |
.cr-qa-answers |
padding:0; margin:1.75rem 0 0 1.5rem |
.cr-qa-asker |
display:flex; align-items:center; gap:0.625rem; flex:1 |
.cr-qa-asker-name |
font-weight:600; color:var(--cr-text-color,#1a1a2e); font-size:calc(var(--cr-body-size,16px) - 1px) |
.cr-qa-avatar |
width:44px; height:44px; border-radius:50%; background:var(--cr-bg-muted,#f3f4f6) |
.cr-qa-date |
color:var(--cr-text-muted,#666); font-size:calc(var(--cr-body-size,16px) - 2px) |
.cr-qa-item |
border-bottom:1px solid var(--cr-border-color,#e5e5e5); padding:2rem 0 2.25rem |
.cr-qa-item-head |
display:flex; align-items:center; gap:0.75rem |
.cr-qa-list |
margin:0 |
.cr-qa-question-body |
font-size:var(--cr-body-size,16px); font-weight:600; color:var(--cr-text-color,#1a1a2e); margin:0 |
.cr-qa-store-badge |
display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px |
.cr-qa-verified |
display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 7px |
.cr-question-form |
display:none |
.cr-question-item |
border-bottom:none |
.cr-question-modal |
display:none |
.cr-rating-recap |
border-bottom:1px solid var(--cr-border-color,#e5e5e5); padding:0; width:24px; height:24px |
.cr-rating-summary |
display:flex; gap:3rem; padding:2rem 0 |
.cr-read-more |
padding:0; background:none; border:0; color:var(--cr-text-color,#1a1a2e) |
.cr-recommend-group |
border:0; padding:0; margin:0 |
.cr-recommend-input |
background:var(--cr-bg-muted,#f3f4f6); font-weight:600; margin:0; width:18px |
.cr-recommend-option |
display:flex; align-items:center; gap:8px; padding:10px 18px |
.cr-recommend-options |
display:flex; gap:10px |
.cr-recommend-pct |
color:var(--cr-text-color,#1a1a2e); font-weight:700 |
.cr-recording-controls |
display:flex; justify-content:space-between; align-items:center |
.cr-recording-dot |
width:12px; height:12px; background:var(--cr-danger-color,#dc2626); border-radius:50% |
.cr-recording-indicator |
display:flex; align-items:center; gap:8px; color:var(--cr-danger-color,#dc2626) |
.cr-remove-video-btn |
display:flex; align-items:center; gap:4px; padding:6px 12px |
.cr-required |
color:var(--cr-error-color,#e53e3e) |
.cr-required-note |
font-size:13px; color:var(--cr-text-muted,#666); display:none |
.cr-retry-btn |
display:inline-block; padding:0.75rem 2rem; background:transparent; border:2px solid var(--cr-button-color,#1a1a2e) |
.cr-review |
display:grid; gap:2.5rem; border-bottom:1px solid var(--cr-border-color,#e5e5e5); padding:2rem 0 |
.cr-review-author |
display: none; font-weight:600; color:var(--cr-text-color,#1a1a2e); font-size:calc(var(--cr-body-size,16px) - 1px) |
.cr-review-author-line |
display:flex; align-items:center; gap:0.75rem |
.cr-review-avatar |
width:44px; height:44px; border-radius:50%; background:var(--cr-bg-muted,#f3f4f6) |
.cr-review-body |
display: none; color:var(--cr-text-color,#1a1a2e); font-size:var(--cr-body-size,16px); margin:0 |
.cr-review-body-clamped |
display:-webkit-box |
.cr-review-body-container |
|
.cr-review-content |
|
.cr-review-customer |
display:flex; gap:0.875rem; align-items:center |
.cr-review-customer-details |
display:flex; gap:4px |
.cr-review-customer-head |
display:flex; align-items:center; gap:0.75rem |
.cr-review-date |
color:var(--cr-text-muted,#666); font-size:calc(var(--cr-body-size,16px) - 2px) |
.cr-review-form |
display:flex; gap:24px; width:100%; padding:12px 14px |
.cr-review-header |
display:flex; align-items:center; justify-content:space-between; gap:1rem |
.cr-review-meta |
display:flex; align-items:center; gap:0.5rem |
.cr-review-modal |
position:fixed; display:flex; align-items:center; justify-content:center |
.cr-review-photo |
width:60px; height:60px; border-radius:6px |
.cr-review-photos |
display:flex; gap:0.5rem |
.cr-review-pinned |
display:inline-flex; color:var(--cr-text-muted,#666) |
.cr-review-recommends |
display:flex; align-items:center; gap:6px; color:var(--cr-text-color,#1a1a2e) |
.cr-review-stars |
color:var(--cr-star-color,#FFC107); font-size:calc(var(--cr-body-size,16px) + 4px); letter-spacing:3px; display:inline-flex |
.cr-review-title |
display: none; font-weight:700; color:var(--cr-text-color,#1a1a2e); margin:0 0 0.75rem |
.cr-review-verified |
display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 7px |
.cr-review-video |
|
.cr-review-video-player |
width:100%; border-radius:8px; background:#000 |
.cr-review-votes |
display:flex; align-items:center |
.cr-search-icon |
position:absolute; color:var(--cr-text-muted,#999) |
.cr-search-input |
width:100%; padding:6px 10px 6px 32px; border:1px solid var(--cr-input-border,#d1d5db); border-radius:6px |
.cr-search-wrap |
position:relative; display:flex; align-items:center |
.cr-share-code |
flex:1 1 auto; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:15px; font-weight:600 |
.cr-share-code-row |
display:flex; gap:8px; align-items:stretch |
.cr-share-copy |
flex:0 0 auto; padding:0 16px; border:1px solid #d1d5db; border-radius:8px |
.cr-share-lead |
margin:0; font-size:13px; color:#4a4a4a |
.cr-share-links |
display:flex; gap:8px; justify-content:center; align-items:center |
.cr-show-more |
text-align:center; padding:2rem 0 |
.cr-show-more-btn |
display:inline-block; padding:0.75rem 2rem; background:transparent; border:1px solid var(--cr-border-color,#e5e5e5) |
.cr-sort-select |
padding:6px 28px 6px 10px; border:1px solid var(--cr-input-border,#d1d5db); border-radius:6px; font-size:calc(var(--cr-body-size,16px) - 2px) |
.cr-sr-only |
position:absolute; width:1px; height:1px; padding:0 |
.cr-star-btn |
background:none; border:0; padding:2px; margin:0 |
.cr-star-btn-on |
opacity:1 |
.cr-star-input |
display:flex; gap:4px; border-radius:8px; box-shadow:0 0 0 2px var(--cr-error-color,#e53e3e) |
.cr-state-empty |
text-align:center; display:none |
.cr-step |
display:none |
.cr-step-active |
display:none; gap:24px |
.cr-step-count |
display:none |
.cr-step-done |
align-items:center; text-align:center; gap:14px; padding:8px 0 0 |
.cr-step-dot |
display:none; width:8px; height:8px; border-radius:50% |
.cr-step-dot-active |
display:none; background:var(--cr-button-color,#1a1a2e) |
.cr-step-dot-done |
display:none; background:var(--cr-border-color,#e5e5e5) |
.cr-step-dots |
display:flex; gap:6px |
.cr-step-progress |
display:none; align-items:center; justify-content:center; margin:-12px 0 4px |
.cr-stop-recording-btn |
display:flex; align-items:center; gap:8px; padding:8px 16px |
.cr-store-response |
padding:1rem 1.25rem; background:var(--cr-bg-light,#f9fafb); border-radius:0 6px 6px 0 |
.cr-store-response-body |
color:var(--cr-text-color,#1a1a2e); margin:0; font-size:var(--cr-body-size,16px) |
.cr-store-response-date |
font-size:13px; color:#999 |
.cr-store-response-header |
display:flex; align-items:center; gap:0.5rem |
.cr-store-response-label |
font-size:13px; font-weight:600; color:var(--cr-text-muted,#666); text-transform:uppercase |
.cr-submit-btn |
padding:12px 32px; background:var(--cr-button-color,#1a1a2e); color:white; border:none |
.cr-summary-count |
font-size:calc(var(--cr-body-size,16px) - 2px); font-weight:400; color:var(--cr-text-muted,#666) |
.cr-summary-left |
text-align:center; margin:0; font-size:calc(var(--cr-body-size,16px) - 2px); color:var(--cr-text-muted,#666) |
.cr-summary-media |
max-width:100% |
.cr-summary-media-grid |
display:grid; gap:4px |
.cr-summary-media-item |
position:relative; border-radius:6px; width:100%; height:100% |
.cr-summary-media-reserved |
|
.cr-summary-recommend |
margin:0; text-align:right; font-size:calc(var(--cr-body-size,16px) - 2px); color:var(--cr-text-muted,#666) |
.cr-summary-right |
flex:1; max-width:400px |
.cr-summary-score |
font-size:calc(var(--cr-body-size,16px) + 30px); font-weight:700; color:var(--cr-text-color,#1a1a2e) |
.cr-summary-stars |
display:flex; justify-content:center; align-items:center; gap:3px |
.cr-tab |
padding:0.75rem 0.5rem; font-size:calc(var(--cr-body-size,16px) - 1px); background:none; border:none |
.cr-tab-active |
color:var(--cr-text-color,#1a1a2e) |
.cr-tab-count |
font-weight:400; font-size:0.8em; color:var(--cr-text-muted,#666) |
.cr-tabs |
display:flex; gap:3rem; padding:2rem 0; align-items:stretch |
.cr-tabs-left |
justify-content:flex-start; display:flex; gap:0 |
.cr-tmpl-compact |
display:flex; align-items:center; gap:0.5rem; margin:0 |
.cr-toolbar |
align-items:stretch; display:flex; justify-content:space-between; gap:1rem |
.cr-toolbar-label |
font-size:calc(var(--cr-body-size,16px) - 2px); color:var(--cr-text-muted,#666) |
.cr-toolbar-left |
justify-content:space-between; display:flex; align-items:center; gap:0.5rem |
.cr-toolbar-right |
display:flex; align-items:center |
.cr-upload-progress |
width:100%; height:8px; background:#e5e7eb; border-radius:4px |
.cr-upload-progress-bar |
display:block!important; height:100%; background:var(--cr-button-color,#1a1a2e); border-radius:4px |
.cr-upload-status |
font-size:14px; color:var(--cr-text-muted,#666) |
.cr-video-add-buttons |
display:flex; gap:10px |
.cr-video-btn |
display:flex; align-items:center; gap:8px; padding:10px 16px |
.cr-video-container |
border-radius:8px; padding:0 |
.cr-video-duration |
position:absolute; background:rgba(0,0,0,0.7); color:white; padding:0.25rem 0.5rem |
.cr-video-filename |
font-size:14px; color:var(--cr-text-muted,#666) |
.cr-video-live-preview |
width:100%; border-radius:6px; background:#000 |
.cr-video-play-btn |
position:absolute; width:64px; height:64px; background:var(--cr-overlay-bg,rgba(0,0,0,0.6)) |
.cr-video-player-wrap |
position:relative; display:inline-block; max-width:400px; width:100% |
.cr-video-preview |
position:relative |
.cr-video-preview-player |
width:100%; border-radius:6px; background:#000 |
.cr-video-processing |
display:flex; align-items:center; gap:12px; padding:16px |
.cr-video-processing-display |
display:flex; align-items:center; gap:8px; padding:12px 16px |
.cr-video-recording |
position:relative |
.cr-video-section |
flex:1; display:none |
.cr-video-uploading |
text-align:center |
.cr-vote-btn |
display:inline-flex; align-items:center; justify-content:center; gap:5px |
.cr-vote-label |
color:var(--cr-text-muted,#666); font-size:calc(var(--cr-body-size,16px) - 3px) |
.cr-write-review-btn |
display:inline-block; padding:1rem 2.5rem; background:var(--cr-button-color,#1a1a2e); border:1px solid var(--cr-button-color,#1a1a2e) |
| Variable | Currently | Changes | Set by | To override |
|---|---|---|---|---|
--cr-card-bg |
set in the editor |
Card Background
used by 4 rules |
Theme editor | plain CSS |
--cr-card-border |
set in the editor |
Card Border
used by 5 rules |
Theme editor | plain CSS |
--cr-text-primary |
set in the editor |
Text Color
used by 9 rules |
Theme editor | plain CSS |
--cr-text-secondary |
#999 |
Secondary Text
used by 8 rules |
Theme editor | plain CSS |
--cr-star-color |
set in the editor | Sc | App settings | plain CSS |
--cr-accent-bg |
unset | Bg | Widget builder | plain CSS |
--cr-gap |
unset | Cr gap | Widget builder | plain CSS |
--cr-radius |
unset |
Cr radius
used by 4 rules |
Widget builder | plain CSS |
--cr-row-span |
20 | Span | Widget builder | plain CSS |
| Class | What it styles |
|---|---|
.cr-dynamic |
display: flex; background: var(--cr-card-bg); border-radius: var(--cr-radius); padding: 1.75rem |
.cr-dynamic-slide |
flex: 0 0 100%; display: grid; gap: 1.5rem |
.cr-dynamic-slide--photos |
|
.cr-dynamic-slide--text-only |
max-width: 600px; margin: 0 auto; padding: 2.5rem; font-size: 18px |
.cr-dynamic-slide--video |
|
.cr-lightbox |
position: absolute; width: 40px; height: 40px; background: transparent |
.cr-powered-by |
text-align: center; padding: 1rem 0 0.5rem; font-size: 12px; color: var(--cr-text-secondary, #999) |
.cr-review-card |
background: var(--cr-card-bg); border: 1px solid var(--cr-card-border); border-radius: var(--cr-radius); padding: 1.25rem |
.cr-showcase |
display: flex; align-items: center; justify-content: space-between; gap: 1rem |
.cr-showcase--carousel |
flex: 0 0 calc(33.333% - 0.67rem) |
.cr-showcase--compact |
display: -webkit-box |
.cr-showcase--dynamic |
background: var(--cr-accent-bg); border-radius: var(--cr-radius); padding: 2rem |
.cr-showcase--featured |
display: grid |
.cr-showcase--full-width |
width: 100vw; max-width: none |
.cr-showcase--grid |
display: grid |
.cr-showcase--masonry |
display: grid |
.cr-showcase--standard |
display: -webkit-box |
.cr-showcase--stories |
justify-content: center; text-align: center; display: none; position: relative |
.cr-showcase-lightbox |
position: fixed; background: rgba(0, 0, 0, 0.9); display: none; align-items: center |
.cr-skeleton-author |
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); border-radius: 8px; width: 120px; height: 14px |
.cr-skeleton-body |
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); border-radius: 8px; width: 100%; height: 60px |
.cr-skeleton-card |
background: var(--cr-card-bg); border: 1px solid var(--cr-card-border); border-radius: var(--cr-radius); padding: 1.25rem |
.cr-skeleton-carousel |
display: flex; gap: 1rem; flex: 0 0 calc(33.333% - 0.67rem) |
.cr-skeleton-dynamic |
background: var(--cr-card-bg); border: 1px solid var(--cr-card-border); border-radius: var(--cr-radius); padding: 1.25rem |
.cr-skeleton-featured |
display: grid; gap: 1rem; height: 150px |
.cr-skeleton-grid |
display: grid; gap: 1rem |
.cr-skeleton-masonry |
display: grid; gap: 1rem; height: 120px |
.cr-skeleton-media |
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); border-radius: 8px |
.cr-skeleton-media-grid |
display: grid; gap: 0.75rem |
.cr-skeleton-quote |
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); border-radius: 8px; width: 48px; height: 36px |
.cr-skeleton-review-panel |
display: flex; gap: 1rem |
.cr-skeleton-side |
display: flex; gap: 1rem |
.cr-skeleton-stars |
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); border-radius: 8px; width: 100px; height: 18px |
.cr-skeleton-stories |
display: flex; gap: 16px |
.cr-skeleton-story |
flex: 0 0 285px; border-radius: 12px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); position: relative |
.cr-skeleton-story-author |
background: rgba(255, 255, 255, 0.3); border-radius: 4px; width: 120px; height: 28px |
.cr-skeleton-story-overlay |
position: absolute; padding: 16px |
.cr-skeleton-story-stars |
background: rgba(255, 255, 255, 0.3); border-radius: 4px; width: 80px; height: 14px |
.cr-skeleton-story-text |
background: rgba(255, 255, 255, 0.3); border-radius: 4px; width: 100%; height: 40px |
.cr-skeleton-story-video |
width: 100%; height: 100% |
.cr-skeleton-title |
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); border-radius: 8px; width: 80%; height: 18px |
.cr-story-card |
flex: 0 0 285px; max-width: 285px; border-radius: 12px; position: relative |
| Variable | Currently | Changes | Set by | To override |
|---|---|---|---|---|
--cr-accent-bg |
set in the editor | Accent Background | Theme editor | add !important |
--cr-card-bg |
set in the editor |
Card Background
used by 4 rules |
Theme editor | add !important |
--cr-card-border |
set in the editor |
Card Border
used by 5 rules |
Theme editor | add !important |
--cr-text-primary |
set in the editor |
Text Color
used by 9 rules |
Theme editor | add !important |
--cr-text-secondary |
#999 |
Secondary Text
used by 8 rules |
Theme editor | add !important |
--cr-star-color |
set in the editor | Star color | App settings | add !important |
--cr-gap |
unset | Cr gap | Widget builder | plain CSS |
--cr-radius |
unset |
Cr radius
used by 4 rules |
Widget builder | plain CSS |
--cr-row-span |
20 | Span | Widget builder | plain CSS |
| Class | What it styles |
|---|---|
.cr-dynamic |
display: flex; background: var(--cr-card-bg); border-radius: var(--cr-radius); padding: 1.75rem |
.cr-dynamic-slide |
flex: 0 0 100%; display: grid; gap: 1.5rem |
.cr-dynamic-slide--photos |
|
.cr-dynamic-slide--text-only |
max-width: 600px; margin: 0 auto; padding: 2.5rem; font-size: 18px |
.cr-dynamic-slide--video |
|
.cr-lightbox |
position: absolute; width: 40px; height: 40px; background: transparent |
.cr-powered-by |
text-align: center; padding: 1rem 0 0.5rem; font-size: 12px; color: var(--cr-text-secondary, #999) |
.cr-review-card |
background: var(--cr-card-bg); border: 1px solid var(--cr-card-border); border-radius: var(--cr-radius); padding: 1.25rem |
.cr-showcase |
display: flex; align-items: center; justify-content: space-between; gap: 1rem |
.cr-showcase--carousel |
flex: 0 0 calc(33.333% - 0.67rem) |
.cr-showcase--compact |
display: -webkit-box |
.cr-showcase--dynamic |
background: var(--cr-accent-bg); border-radius: var(--cr-radius); padding: 2rem |
.cr-showcase--featured |
display: grid |
.cr-showcase--full-width |
width: 100vw; max-width: none |
.cr-showcase--grid |
display: grid |
.cr-showcase--masonry |
display: grid |
.cr-showcase--standard |
display: -webkit-box |
.cr-showcase--stories |
justify-content: center; text-align: center; display: none; position: relative |
.cr-showcase-lightbox |
position: fixed; background: rgba(0, 0, 0, 0.9); display: none; align-items: center |
.cr-skeleton-author |
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); border-radius: 8px; width: 120px; height: 14px |
.cr-skeleton-body |
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); border-radius: 8px; width: 100%; height: 60px |
.cr-skeleton-card |
background: var(--cr-card-bg); border: 1px solid var(--cr-card-border); border-radius: var(--cr-radius); padding: 1.25rem |
.cr-skeleton-carousel |
display: flex; gap: 1rem; flex: 0 0 calc(33.333% - 0.67rem) |
.cr-skeleton-dynamic |
background: var(--cr-card-bg); border: 1px solid var(--cr-card-border); border-radius: var(--cr-radius); padding: 1.25rem |
.cr-skeleton-featured |
display: grid; gap: 1rem; height: 150px |
.cr-skeleton-grid |
display: grid; gap: 1rem |
.cr-skeleton-masonry |
display: grid; gap: 1rem; height: 120px |
.cr-skeleton-media |
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); border-radius: 8px |
.cr-skeleton-media-grid |
display: grid; gap: 0.75rem |
.cr-skeleton-quote |
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); border-radius: 8px; width: 48px; height: 36px |
.cr-skeleton-review-panel |
display: flex; gap: 1rem |
.cr-skeleton-side |
display: flex; gap: 1rem |
.cr-skeleton-stars |
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); border-radius: 8px; width: 100px; height: 18px |
.cr-skeleton-stories |
display: flex; gap: 16px |
.cr-skeleton-story |
flex: 0 0 285px; border-radius: 12px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); position: relative |
.cr-skeleton-story-author |
background: rgba(255, 255, 255, 0.3); border-radius: 4px; width: 120px; height: 28px |
.cr-skeleton-story-overlay |
position: absolute; padding: 16px |
.cr-skeleton-story-stars |
background: rgba(255, 255, 255, 0.3); border-radius: 4px; width: 80px; height: 14px |
.cr-skeleton-story-text |
background: rgba(255, 255, 255, 0.3); border-radius: 4px; width: 100%; height: 40px |
.cr-skeleton-story-video |
width: 100%; height: 100% |
.cr-skeleton-title |
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); border-radius: 8px; width: 80%; height: 18px |
.cr-story-card |
flex: 0 0 285px; max-width: 285px; border-radius: 12px; position: relative |
| Variable | Currently | Changes | Set by | To override |
|---|---|---|---|---|
--cr-display-time |
5s | Time | Widget builder | plain CSS |
--cr-popup-bg |
#fff | Bg | Widget builder | plain CSS |
--cr-popup-radius |
12px |
Radius
used by 5 rules |
Widget builder | plain CSS |
--cr-popup-star |
#FFC107 | Star | Widget builder | plain CSS |
--cr-popup-text |
#202223 |
Text
used by 5 rules |
Widget builder | plain CSS |
| Class | What it styles |
|---|---|
.cr-social-proof |
position: fixed; opacity: 0; font-family:inherit; max-width: 380px |
Available on: product
| Variable | Currently | Changes | Set by | To override |
|---|---|---|---|---|
--cr-count-gap |
4px | Count Spacing | Theme editor | plain CSS |
--cr-star-size |
20px | Icon Size | Theme editor | plain CSS |
--cr-star-color |
set in the editor | Star color | App settings | plain CSS |
--cr-link-color |
#007185 | Color | Widget builder | plain CSS |
--cr-link-hover |
#C7511F | Hover | Widget builder | plain CSS |
--cr-text-muted |
#6b7177 | Muted | Widget builder | plain CSS |
| Class | What it styles |
|---|---|
.classic-ratings-star-display |
position: relative; display: inline-block; width: var(--cr-star-size, 20px) !important; height: var(--cr-star-size, 20px) !important |
.cr-count-empty |
color: var(--cr-text-muted, #6b7177); opacity: 0.9 |
.cr-count-inline |
color: var(--cr-link-color, #007185); font-size: 14px |
.cr-icon |
display: block !important; width: var(--cr-star-size, 20px) !important; height: var(--cr-star-size, 20px) !important; opacity: 1 !important |
.cr-rating-link |
display: flex; align-items: center; gap: var(--cr-count-gap, 4px); color: var(--cr-link-hover, #C7511F) |
.cr-stars-empty |
display: flex; gap: 2px |
.cr-stars-filled |
position: absolute; display: flex; gap: 2px |
.cr-stars-wrapper |
position: relative; display: inline-flex; height: var(--cr-star-size, 20px) |
| Variable | Currently | Changes | Set by | To override |
|---|---|---|---|---|
--cr-text-secondary |
#999 | Secondary | Widget builder | plain CSS |
--cr-tm-align-items |
center | Align items | Widget builder | plain CSS |
--cr-tm-alignment |
center | Alignment | Widget builder | plain CSS |
--cr-tm-arrows |
#1a1a1a | Arrows | Widget builder | plain CSS |
--cr-tm-bg |
#ffffff | Bg | Widget builder | plain CSS |
--cr-tm-bg-solid |
#ffffff | Bg solid | Widget builder | plain CSS |
--cr-tm-body-font |
unset | Body font | Widget builder | plain CSS |
--cr-tm-card-padding |
32px | Card padding | Widget builder | plain CSS |
--cr-tm-dots |
#1a1a1a | Dots | Widget builder | plain CSS |
--cr-tm-element-gap |
16px | Element gap | Widget builder | plain CSS |
--cr-tm-heading-font |
unset | Heading font | Widget builder | plain CSS |
--cr-tm-justify |
center | Justify | Widget builder | plain CSS |
--cr-tm-max-width |
1200px | Max width | Widget builder | plain CSS |
--cr-tm-radius |
8px | Radius | Widget builder | plain CSS |
--cr-tm-star-size |
18px | Star size | Widget builder | plain CSS |
--cr-tm-text |
#1a1a1a |
Text
used by 7 rules |
Widget builder | plain CSS |
--cr-tm-text-size |
18px | Text size | Widget builder | plain CSS |
--cr-tm-transition |
500ms | Transition | Widget builder | plain CSS |
| Class | What it styles |
|---|---|
.cr-powered-by |
text-align: center; padding: 1rem 0 0.5rem; font-size: 12px; color: var(--cr-text-secondary, #999) |
.cr-testimonial |
position: relative; max-width: var(--cr-tm-max-width, 1200px); margin: 0 auto; text-align: var(--cr-tm-alignment, center) |
.cr-tm |
font-family: var(--cr-tm-heading-font); position: relative; width: 100%; opacity: 0 |
.cr-tm--slide |
display: flex; position: relative; flex: 0 0 100%; opacity: 1 |
| Variable | Currently | Changes | Set by | To override |
|---|---|---|---|---|
--cr-text-secondary |
#999 | Secondary | Widget builder | plain CSS |
--cr-wall-card-bg |
#fff | Card bg | Widget builder | plain CSS |
--cr-wall-card-border |
#e5e5e5 | Card border | Widget builder | plain CSS |
--cr-wall-gap |
16px | Gap | Widget builder | plain CSS |
--cr-wall-radius |
8px | Radius | Widget builder | plain CSS |
--cr-wall-text-color |
#202223 | Text color | Widget builder | plain CSS |
| Class | What it styles |
|---|---|
.cr-powered-by |
text-align:center; padding:1rem 0 .5rem; font-size:12px; color:var(--cr-text-secondary,#999) |
.cr-wall |
width:100%; max-width:1200px; margin:0 auto; font-family:inherit |
.cr-wall--full-width |
max-width:none !important |
Class names are a public contract: once you style one, we avoid renaming it. If something you need is not listed here, it is not stable enough to target yet, so get in touch before relying on it.