Skip to content

UI: Fix global background + color styles affecting stories #34071

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JReinhold merged 7 commits into from
Apr 23, 2026
Merged

UI: Fix global background + color styles affecting stories #34071

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a73a4c3
fix issue 33735: Global background + color styles affecting stories
Axadali Mar 9, 2026
f04aacf
update issue according to
Axadali Mar 9, 2026
50f1114
Merge branch 'next' into 33735-global-style-issue
Axadali Mar 9, 2026
95112ec
remove duplication font-weight and add quote on font-family
Axadali Mar 9, 2026
d177fb1
inherit font family
Axadali Mar 9, 2026
4967117
Merge branch 'next' into 33735-global-style-issue
Axadali Apr 2, 2026
890c119
Merge branch 'next' into 33735-global-style-issue
JReinhold Apr 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
153 changes: 79 additions & 74 deletions code/core/assets/server/base-preview-head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,11 +112,11 @@
border-radius: 10px;
background: rgb(247, 247, 247);
color: rgb(46, 52, 56);
}

& * {
background: rgb(247, 247, 247);
color: rgb(46, 52, 56);
}
.sb-nopreview_main * {
background: rgb(247, 247, 247);
color: rgb(46, 52, 56);
}

.sb-nopreview_heading {
Expand Down Expand Up @@ -147,84 +147,89 @@
border: 1px solid #ff0000;
box-shadow: 0 0 64px rgba(0, 0, 0, 0.1);
gap: 24px;
}

& ol {
padding-left: 18px;
margin: 0;
}
.sb-errordisplay_main ol {
padding-left: 18px;
margin: 0;
}

/* Redefine colors to ensure readability regardless of user-provided * selectors. */
* {
background: white;
color: black;
}
/* Redefine colors to ensure readability regardless of user-provided * selectors. */
.sb-errordisplay_main * {
background: white;
color: black;
Comment thread
coderabbitai[bot] marked this conversation as resolved.
}

& h1 {
font-family: Nunito Sans;
font-size: 22px;
font-weight: 400;
line-height: 30px;
font-weight: normal;
margin: 0;

&::before {
content: '';
display: inline-block;
width: 12px;
height: 12px;
background: #ff4400;
border-radius: 50%;
margin-right: 8px;
}
}
/* Exclude error code block from the universal reset to preserve ANSI colors and dark theme */
.sb-errordisplay_main .sb-errordisplay_code,
.sb-errordisplay_main .sb-errordisplay_code * {
background: #242424;
color: #c6c6c6;
}

& p,
& ol {
font-family: Nunito Sans;
font-size: 14px;
font-weight: 400;
line-height: 19px;
margin: 0;
}
.sb-errordisplay_main h1 {
font-family: inherit;
font-size: 22px;
font-weight: 400;
line-height: 30px;
margin: 0;
}
Comment thread
coderabbitai[bot] marked this conversation as resolved.

& li + li {
margin: 0;
padding: 0;
padding-top: 12px;
}
.sb-errordisplay_main h1::before {
content: '';
display: inline-block;
width: 12px;
height: 12px;
background: #ff4400;
border-radius: 50%;
margin-right: 8px;
}

& a {
color: currentColor;
}
.sb-errordisplay_main p,
.sb-errordisplay_main ol {
font-family: inherit;
font-size: 14px;
font-weight: 400;
line-height: 19px;
margin: 0;
}
Comment thread
coderabbitai[bot] marked this conversation as resolved.

& .sb-errordisplay_code {
padding: 10px;
flex: 1;
background: #242424;
color: #c6c6c6;
box-sizing: border-box;

font-size: 14px;
font-weight: 400;
line-height: 19px;
border-radius: 4px;

font-family:
'Operator Mono', 'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', 'Andale Mono',
'Lucida Console', Consolas, Monaco, monospace;
margin: 0;
overflow: auto;

& code {
background-color: inherit;
color: inherit;
}
}
.sb-errordisplay_main li + li {
margin: 0;
padding: 0;
padding-top: 12px;
}

& .sb-errordisplay pre {
white-space: pre-wrap;
white-space: revert;
}
.sb-errordisplay_main a {
color: currentColor;
}

.sb-errordisplay_main .sb-errordisplay_code {
padding: 10px;
flex: 1;
background: #242424;
color: #c6c6c6;
box-sizing: border-box;

font-size: 14px;
font-weight: 400;
line-height: 19px;
border-radius: 4px;

font-family:
'Operator Mono', 'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', 'Andale Mono',
'Lucida Console', Consolas, Monaco, monospace;
margin: 0;
overflow: auto;
}

.sb-errordisplay_main .sb-errordisplay_code code {
background-color: inherit;
color: inherit;
}

.sb-errordisplay_main .sb-errordisplay_code {
white-space: pre-wrap;
}

@-webkit-keyframes sb-rotate360 {
Expand Down
Loading