Dev #1138
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -36,19 +36,6 @@ | |
| rel="stylesheet" | ||
| /> | ||
|
|
||
| <style type="text/css"> | ||
| .skip-to-main-content-link { | ||
| position: absolute; | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
| // Rules recovered from https://ui.contentstack.com/contentstack.min.css, the stylesheet | ||
| // index.html used to load until that host was taken down (now HTTP 402, DEPLOYMENT_DISABLED). | ||
| // It was Bootstrap v5.1.3 plus Contentstack's brand layer; the grid/utility half is covered by | ||
| // the local `bootstrap` dependency, but these non-utility rules had no other source. Declarations | ||
|
Contributor
Author
There was a problem hiding this comment. blocker: Bootstrap Reboot is a third thing the CDN file provided, and it has no replacement here. The CDN served full Bootstrap 5.1.3 = Reboot + grid + utilities + components. This PR replaces it with button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}
img,svg{vertical-align:middle}Nothing else supplies them:
Failure scenario: Suggested fix — append to this file. It loads before venus, exactly where the CDN // Bootstrap Reboot: form controls don't inherit font by default, and the CDN's
// full-Bootstrap build was the only thing making them do so.
button,
input,
optgroup,
select,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
img,
svg {
vertical-align: middle;
}Generated by Claude Code |
||
| // below are copied verbatim from an archived copy of that file, limited to classes this app | ||
| // actually uses. | ||
| // | ||
| // Load order matters: this must stay above the venus stylesheet, where the CDN <link> used to sit, | ||
| // so venus keeps winning the same conflicts it won before. | ||
|
|
||
| @import 'variables'; | ||
|
|
||
| // Contentstack's spacing scale went past Bootstrap's 0-5. | ||
| .pt-6 { | ||
| padding-top: 4rem !important; | ||
| } | ||
|
|
||
| // The CDN scoped heading colour inside cards, which outranked the plain `h2` rule in App.scss | ||
| // (`color: $color-base-black-base`). Without it, card headings render pure black instead of | ||
| // Contentstack navy. | ||
| .card { | ||
| h1, | ||
| h2, | ||
| h3, | ||
| h4, | ||
| h5, | ||
| h6 { | ||
| color: $color-font-black; | ||
| } | ||
| } | ||
|
|
||
| // Bootstrap's button base, flattened to the values the CDN's brand layer ended up with | ||
| // (font-weight 600 and font-size 1rem override the 700/1.125rem in Bootstrap's own rule). | ||
| // Only one element uses it: the <Link className="btn primary-btn"> on the home page, which | ||
| // wraps a venus <Button>. It contributes nothing but padding around that button and is a | ||
| // reasonable thing to delete from Home separately - restored here so the fix stays visual-neutral. | ||
| .btn { | ||
|
Contributor
Author
There was a problem hiding this comment. question:
If it supplied the purple background, note this block hands the element Generated by Claude Code |
||
| display: inline-block; | ||
| padding: 0.8125rem 2.1875rem; | ||
| font-family: inherit; | ||
| font-size: 1rem; | ||
| font-weight: 600; | ||
| line-height: 1; | ||
| color: #fff; | ||
| text-align: center; | ||
| text-decoration: none; | ||
| vertical-align: middle; | ||
| cursor: pointer; | ||
| user-select: none; | ||
| background-color: transparent; | ||
| border: 1px solid transparent; | ||
| border-radius: 0.5rem; | ||
|
|
||
| &:hover { | ||
| color: #fff; | ||
| } | ||
| } | ||
|
|
||
| // Global anchor colour. Without this, every link in the app falls back to the | ||
| // browser default (blue + underline) instead of Contentstack purple. | ||
| a, | ||
| .link { | ||
| text-decoration: none; | ||
| color: #7c4dff; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| a:hover, | ||
| a:focus, | ||
| .link:hover, | ||
| .link:focus { | ||
| color: #7c4dff; | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| // Typography helpers. | ||
| small, | ||
| .small { | ||
| font-size: 0.875em; | ||
| } | ||
|
|
||
| .body-4 { | ||
| font-size: 1rem; | ||
| font-weight: 400; | ||
| line-height: 1.375; | ||
| } | ||
|
|
||
| .body-6 { | ||
| font-size: 0.75rem; | ||
| font-weight: 400; | ||
| line-height: 1.3333333333; | ||
| } | ||
|
|
||
| // The trailing arrow that slides right on hover. The original pulled it from | ||
| // ui.contentstack.com/icons/default-link.svg; that asset is recovered here as an inline data URI | ||
| // (same approach as AutoVerticalStepper.scss) so nothing external is needed. | ||
| .link-basic-icon { | ||
| font-weight: 600; | ||
|
|
||
| &:hover { | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| &::after { | ||
| content: ''; | ||
| background: url('data:image/svg+xml,%3Csvg%20width%3D%2211%22%20height%3D%2211%22%20viewBox%3D%220%200%2011%2011%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.7698%206.0549C11.0767%205.74796%2011.0767%205.2495%2010.7698%204.94256L6.84101%201.01377C6.53407%200.706835%206.0356%200.706835%205.72867%201.01377C5.42173%201.32071%205.42173%201.81917%205.72867%202.12611L8.31921%204.7142H0.785758C0.351136%204.7142%200%205.06534%200%205.49996C0%205.93458%200.351136%206.28572%200.785758%206.28572H8.31676L5.73112%208.87381C5.42419%209.18075%205.42419%209.67921%205.73112%209.98615C6.03806%2010.2931%206.53653%2010.2931%206.84346%209.98615L10.7723%206.05736L10.7698%206.0549Z%22%20fill%3D%22%237C4DFF%22%2F%3E%3C%2Fsvg%3E') | ||
| no-repeat; | ||
| width: 14px; | ||
| height: 14px; | ||
| position: relative; | ||
| left: 8px; | ||
| top: 2px; | ||
| padding-left: 15px; | ||
| } | ||
|
|
||
| &:hover::after { | ||
| left: 12px; | ||
| transition: all 0.4s ease; | ||
| } | ||
|
|
||
| &.link-arrow::after { | ||
| top: 4px; | ||
| } | ||
| } | ||
|
|
||
| .card .link-basic-icon, | ||
| .card .stretched-link { | ||
| font-weight: 600 !important; | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
question: The shim's cascade position isn't the same as the CDN
<link>'s, and the comment above only reasons about venus.The
<link>lived inui/index.html's<head>, ahead of every stylesheet Vite injects. This import sits partway through the bundle: the imports atApp.tsx:7-13(./store,./components/Common/router,ErrorBoundary,AppLayout→MainHeader/SideBar) execute first, so their.scssis emitted before this line. Relative order vs. venus is preserved — that part of the comment is correct — but relative order vs. component CSS is inverted: shim rules that used to lose to a component rule at equal specificity now win.I went looking for a live collision and couldn't find one. The shim's global-ish selectors (
a, .link,small, .small,.card h1-h6) only meet nested, higher-specificity rules inMainHeader/index.scss:40,RegionalLogin/index.scss:42andApp.scss:135, so nothing flips today. Hence a question, not a bug — but the ordering is load-bearing and one new top-levela {}or.link {}in a component stylesheet would silently break it.Suggested fix: either note the constraint in the comment, or move these three imports into
ui/src/index.tsxbetweenimport './index.css'(line 5) andimport App from './App'(line 6), where they genuinely precede all component CSS and match the old<head>position.Generated by Claude Code