diff --git a/docs/_sass/color_schemes/_variables.scss b/docs/_sass/color_schemes/_variables.scss index d997b3e91a1..cb5aa5a94bb 100644 --- a/docs/_sass/color_schemes/_variables.scss +++ b/docs/_sass/color_schemes/_variables.scss @@ -31,4 +31,4 @@ $red-100: #f96e65 !default; $red-200: #e94c4c !default; $red-300: #dd2e2e !default; -$body-font-family: 'Overpass', system-ui, -apple-system, sans-serif; +$body-font-family: 'backtick-override', 'Overpass', system-ui, -apple-system, sans-serif; diff --git a/gcp/website/frontend3/src/go/templates/vulnerability.html b/gcp/website/frontend3/src/go/templates/vulnerability.html index 472ab7a520c..7a9fa4b5bfd 100644 --- a/gcp/website/frontend3/src/go/templates/vulnerability.html +++ b/gcp/website/frontend3/src/go/templates/vulnerability.html @@ -118,7 +118,7 @@

Summary
{{ if .Vulnerability.Summary }} - {{ .SummaryHTML }} + {{ .Vulnerability.Summary }} {{ else }} [none] {{ end }} diff --git a/gcp/website/frontend3/src/linter.scss b/gcp/website/frontend3/src/linter.scss index 341e3f12244..f1561a935a5 100644 --- a/gcp/website/frontend3/src/linter.scss +++ b/gcp/website/frontend3/src/linter.scss @@ -1,3 +1,9 @@ +@font-face { + font-family: "backtick-override"; + src: local("Arial"); + unicode-range: U+0060; +} + :root { --osv-background: #292929; --osv-text-color: #fff; @@ -6,7 +12,7 @@ --osv-grey-800: #3c4043; --osv-surface-color: #333; --osv-border-color: #555; - --osv-body-font-family: "Overpass", sans-serif; + --osv-body-font-family: "backtick-override", "Overpass", sans-serif; --osv-heading-font-family: "Overpass Mono", monospace; --osv-border-radius-small: 4px; --osv-red-300: #f23835; diff --git a/gcp/website/frontend3/src/styles.scss b/gcp/website/frontend3/src/styles.scss index 82d578d77a8..b9cc361177b 100644 --- a/gcp/website/frontend3/src/styles.scss +++ b/gcp/website/frontend3/src/styles.scss @@ -56,6 +56,14 @@ --osv-tab-active: #ffffff; } +// Overpass has weird rendering of ` characters that we don't want +// Use this to replace them with another font. +@font-face { + font-family: "backtick-override"; + src: local("Arial"); + unicode-range: U+0060; +} + $osv-background: var(--osv-bg); $osv-text-color: var(--osv-text); $osv-accent-color: #c5221f; @@ -77,7 +85,7 @@ $osv-white: #ffffff; $osv-green: #53aa33; $osv-yellow: #ffd700; $osv-orange: #ffa500; -$osv-body-font-family: string.unquote('Overpass, sans-serif'); +$osv-body-font-family: string.unquote('backtick-override, Overpass, sans-serif'); $osv-heading-font-family: string.unquote('"Overpass Mono", monospace'); $osv-heading-size: 60px; $osv-heading-size-mobile: 40px; @@ -109,9 +117,11 @@ $osv-tab-active: var(--osv-tab-active); @mixin hide-details-marker { list-style: none; + &::-webkit-details-marker { display: none; } + &::marker { display: none; content: ''; @@ -197,10 +207,6 @@ a { text-decoration: underline; } -.literal-backtick { - font-family: $osv-heading-font-family; -} - .home-page, .vulnerability-page { a:not([href^="https://osv.dev"]):not([href^="/"]):not([href^="#"]):not([href^="https://google.github.io/osv.dev"]):not([href^="https://github.com/google/osv.dev"]) { @@ -337,10 +343,18 @@ pre { // Keep logo visible. z-index: 3; - .logo-img-dark { display: none; } + .logo-img-dark { + display: none; + } + html[data-theme="light"] & { - .logo-img-light { display: none; } - .logo-img-dark { display: block; } + .logo-img-light { + display: none; + } + + .logo-img-dark { + display: block; + } } } @@ -374,8 +388,8 @@ pre { } a.logo-img { - display: flex; - align-items: center; + display: flex; + align-items: center; } // Remove external link indicator. @@ -576,6 +590,7 @@ pre { input[type=radio]:checked+.ecosystem-label { background: $osv-grey-300; color: $osv-accent-color; + html[data-theme="light"] & { background: $osv-grey-700; } @@ -829,12 +844,13 @@ md-icon-button.mdc-data-table__sort-icon-button { box-shadow: 0 0 2px white; html[data-theme="light"] & { - box-shadow: 0 0 2px rgba(0,0,0,0.1); + box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); } } // Ensure highlighted code blocks don't inherit the general code style. - .chroma code, .big-code-block code { + .chroma code, + .big-code-block code { background: transparent !important; box-shadow: none !important; padding: 0; @@ -997,7 +1013,7 @@ dl.vulnerability-details, padding-inline-start: 40px; } - ul.substream > li { + ul.substream>li { display: grid; grid-template-columns: 1ch 1fr; column-gap: 8px; @@ -1006,14 +1022,14 @@ dl.vulnerability-details, } .downstream { - ul.substream > li::before { + ul.substream>li::before { content: "⤷"; line-height: 1.4; } } .upstream { - ul.substream > li::before { + ul.substream>li::before { content: "⤶"; line-height: 0.9; transform: rotate(90deg); @@ -1047,7 +1063,7 @@ osv-tabs.vulnerability-packages[affordance="tab-bar"] { osv-tabs.vulnerability-packages[affordance="collapse"] { display: block; - > h2.package-header { + >h2.package-header { display: block; width: 100%; cursor: pointer; @@ -1088,7 +1104,7 @@ osv-tabs.vulnerability-packages[affordance="collapse"] { } .versions-section { - > summary { + >summary { @include hide-details-marker; } @@ -1096,7 +1112,7 @@ osv-tabs.vulnerability-packages[affordance="collapse"] { @include chevron-indicator($margin-right: 16px, $color: $osv-text-color); } - &[open] > summary.version-header::before { + &[open]>summary.version-header::before { transform: rotate(90deg); } @@ -1143,7 +1159,7 @@ osv-tabs.vulnerability-packages[affordance="collapse"] { } .database-specific-section { - > summary { + >summary { @include hide-details-marker; } @@ -1162,7 +1178,7 @@ osv-tabs.vulnerability-packages[affordance="collapse"] { } } - &[open] > summary.database-specific-header::before { + &[open]>summary.database-specific-header::before { transform: rotate(90deg); } } @@ -1173,7 +1189,7 @@ osv-tabs.vulnerability-packages[affordance="collapse"] { &.force-collapse { - .ecosystem-accordion > summary { + .ecosystem-accordion>summary { @include hide-details-marker; } @@ -1200,13 +1216,14 @@ osv-tabs.vulnerability-packages[affordance="collapse"] { &:hover { background: $osv-grey-700; + html[data-theme="light"] & { background: $osv-grey-600; } } } - .ecosystem-accordion[open] > summary.package-header { + .ecosystem-accordion[open]>summary.package-header { background: $osv-grey-100; color: $osv-accent-color; font-weight: bold; @@ -1242,7 +1259,7 @@ osv-tabs.vulnerability-packages[affordance="collapse"] { &::before { content: ''; position: absolute; - left: 8px; + left: 8px; top: 0; bottom: 0; width: 1px; @@ -1271,11 +1288,11 @@ osv-tabs.vulnerability-packages[affordance="collapse"] { background: $osv-grey-600; } } - + .package-accordion { position: relative; - > summary { + >summary { @include hide-details-marker; } @@ -1314,7 +1331,7 @@ osv-tabs.vulnerability-packages[affordance="collapse"] { } } - .package-accordion[open] > summary.package-name-title { + .package-accordion[open]>summary.package-name-title { border-bottom: 1px dashed $osv-grey-600; &::before { @@ -1331,7 +1348,7 @@ osv-tabs.vulnerability-packages[affordance="collapse"] { .vulnerability-package-subsection { padding: 14px 0; border-bottom: 1px dashed #555; - + &.affected-ranges-subsection { padding-bottom: 4px; } @@ -1348,7 +1365,7 @@ osv-tabs.vulnerability-packages[affordance="collapse"] { border-bottom: none; } } - + .mdc-layout-grid { padding: 8px 16px 16px; } @@ -1369,6 +1386,7 @@ osv-tabs.vulnerability-packages[affordance="collapse"] { &[expanded] { background: $osv-text-color; color: $osv-accent-color; + html[data-theme="light"] & { background: $osv-grey-300; } @@ -1545,10 +1563,11 @@ osv-tabs.vulnerability-packages[affordance="collapse"] { // Force columns outside of available space to overflow. // These do not use the value set in grid-template-columns, so set it. overflow-x: auto; - overflow-y: hidden; /* Hide vertical scrollbar */ + overflow-y: hidden; + /* Hide vertical scrollbar */ grid-auto-flow: column; grid-auto-columns: minmax(80px, 1fr); - padding-bottom: 12px; + padding-bottom: 12px; /* Custom scrollbar styling */ scrollbar-color: $osv-grey-600 $osv-background; @@ -1556,20 +1575,22 @@ osv-tabs.vulnerability-packages[affordance="collapse"] { /* For WebKit browsers (Chrome, Safari) */ &::-webkit-scrollbar { - height: 8px; + height: 8px; } &::-webkit-scrollbar-track { - background: $osv-background; /* Track color */ + background: $osv-background; + /* Track color */ } &::-webkit-scrollbar-thumb { - background-color: $osv-grey-600; /* Thumb color */ - border-radius: 4px; + background-color: $osv-grey-600; + /* Thumb color */ + border-radius: 4px; } &::-webkit-scrollbar-thumb:hover { - background-color: $osv-grey-800; + background-color: $osv-grey-800; } .ecosystem-name { @@ -1581,7 +1602,7 @@ osv-tabs.vulnerability-packages[affordance="collapse"] { justify-content: center; text-align: center; font-family: $osv-heading-font-family; - + } .ecosystem-count-wrapper { @@ -1785,7 +1806,7 @@ osv-tabs.vulnerability-packages[affordance="collapse"] { .code-card-title { color: #C5221F; font-size: 28px; - + html[data-theme="light"] & { color: $osv-text-color; } @@ -1866,7 +1887,7 @@ osv-tabs.vulnerability-packages[affordance="collapse"] { font-family: $osv-heading-font-family; display: block; padding-bottom: 16px; - + html[data-theme="light"] & { color: $osv-red-500; } @@ -1969,12 +1990,13 @@ div.highlight { box-shadow: 0 0 2px white; html[data-theme="light"] & { - box-shadow: 0 0 2px rgba(0,0,0,0.1); + box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); } } // Ensure highlighted code blocks don't inherit the general code style. - .chroma code, .big-code-block code { + .chroma code, + .big-code-block code { background: transparent !important; box-shadow: none !important; padding: 0; @@ -2131,9 +2153,11 @@ $navbar-search-divider: rgba(255, 255, 255, 0.16); position: relative; display: flex; align-items: center; - height: 24px; /* Match the GitHub icon height */ - - @media (max-width: 990px) { // Max width to prevent navbar from overlapping on other navbar elements + height: 24px; + /* Match the GitHub icon height */ + + @media (max-width: 990px) { + // Max width to prevent navbar from overlapping on other navbar elements display: none; } } @@ -2171,7 +2195,7 @@ $navbar-search-divider: rgba(255, 255, 255, 0.16); opacity: 0; visibility: hidden; } - + .material-icons { font-size: 24px; } @@ -2226,7 +2250,7 @@ $navbar-search-divider: rgba(255, 255, 255, 0.16); &::placeholder { color: rgba(255, 255, 255, 0.7); } - + &:focus::placeholder { color: rgba(255, 255, 255, 0.5); } @@ -2235,7 +2259,7 @@ $navbar-search-divider: rgba(255, 255, 255, 0.16); &::placeholder { color: rgba(0, 0, 0, 0.6); } - + &:focus::placeholder { color: rgba(0, 0, 0, 0.4); } @@ -2260,7 +2284,7 @@ $navbar-search-divider: rgba(255, 255, 255, 0.16); &:hover { background-color: rgba(255, 255, 255, 0.1); } - + .material-icons { font-size: 20px; } @@ -2356,9 +2380,11 @@ $navbar-search-divider: rgba(255, 255, 255, 0.16); margin-top: 0; .search-suggestions__item { + &:hover, &--selected { background: rgba($osv-accent-color, 0.2); + html[data-theme="light"] & { background: $osv-grey-700; } @@ -2389,6 +2415,7 @@ $navbar-search-divider: rgba(255, 255, 255, 0.16); display: flex; align-items: center; } + .theme-toggle-btn { background: transparent; border: none; @@ -2405,19 +2432,31 @@ $navbar-search-divider: rgba(255, 255, 255, 0.16); background-color: $osv-hover-bg; } - .icon-dark-mode { display: none; } - .icon-light-mode { display: inline-block; } + .icon-dark-mode { + display: none; + } + + .icon-light-mode { + display: inline-block; + } } + html[data-theme="light"] .theme-toggle-btn { color: $osv-text-color; - .icon-dark-mode { display: inline-block; } - .icon-light-mode { display: none; } + + .icon-dark-mode { + display: inline-block; + } + + .icon-light-mode { + display: none; + } } .github-container { - width: 36px; - display: flex; - justify-content: center; + width: 36px; + display: flex; + justify-content: center; } /* Syntax Highlighting */ @@ -2432,78 +2471,333 @@ html[data-theme="light"] .theme-toggle-btn { [data-theme="dark"] .chroma { color: #d0d0d0; background-color: #202020; - .err { color:#a61717;background-color:#e3d2d2 } - .lnlinks { outline:none;text-decoration:none;color:inherit } - .lntd { vertical-align:top;padding:0;margin:0;border:0; } - .lntable { border-spacing:0;padding:0;margin:0;border:0; } - .hl { background-color:#363636 } - .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868 } - .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868 } - .line { display:flex; } - .k { color:#6ab825;font-weight:bold } - .kc { color:#6ab825;font-weight:bold } - .kd { color:#6ab825;font-weight:bold } - .kn { color:#6ab825;font-weight:bold } - .kp { color:#6ab825 } - .kr { color:#6ab825;font-weight:bold } - .kt { color:#6ab825;font-weight:bold } - .na { color:#bbb } - .nc { color:#447fcf;text-decoration:underline } - .no { color:#40ffff } - .nd { color:#ffa500 } - .ne { color:#bbb } - .nn { color:#447fcf;text-decoration:underline } - .nt { color:#6ab825;font-weight:bold } - .nb { color:#24909d } - .bp { color:#24909d } - .nv { color:#40ffff } - .vc { color:#40ffff } - .vg { color:#40ffff } - .vi { color:#40ffff } - .vm { color:#40ffff } - .nf { color:#447fcf } - .fm { color:#447fcf } - .s { color:#ed9d13 } - .sa { color:#ed9d13 } - .sb { color:#ed9d13 } - .sc { color:#ed9d13 } - .dl { color:#ed9d13 } - .sd { color:#ed9d13 } - .s2 { color:#ed9d13 } - .se { color:#ed9d13 } - .sh { color:#ed9d13 } - .si { color:#ed9d13 } - .sx { color:#ffa500 } - .sr { color:#ed9d13 } - .s1 { color:#ed9d13 } - .ss { color:#ed9d13 } - .m { color:#3677a9 } - .mb { color:#3677a9 } - .mf { color:#3677a9 } - .mh { color:#3677a9 } - .mi { color:#3677a9 } - .il { color:#3677a9 } - .mo { color:#3677a9 } - .ow { color:#6ab825;font-weight:bold } - .c { color:#999;font-style:italic } - .ch { color:#999;font-style:italic } - .cm { color:#999;font-style:italic } - .c1 { color:#999;font-style:italic } - .cs { color:#e50808;background-color:#520000;font-weight:bold } - .cp { color:#cd2828;font-weight:bold } - .cpf { color:#cd2828;font-weight:bold } - .gd { color:#d22323 } - .ge { font-style:italic } - .gr { color:#d22323 } - .gh { color:#fff;font-weight:bold } - .gi { color:#589819 } - .go { color:#ccc } - .gp { color:#aaa } - .gs { font-weight:bold } - .gu { color:#fff;text-decoration:underline } - .gt { color:#d22323 } - .gl { text-decoration:underline } - .w { color:#666 } + + .err { + color: #a61717; + background-color: #e3d2d2 + } + + .lnlinks { + outline: none; + text-decoration: none; + color: inherit + } + + .lntd { + vertical-align: top; + padding: 0; + margin: 0; + border: 0; + } + + .lntable { + border-spacing: 0; + padding: 0; + margin: 0; + border: 0; + } + + .hl { + background-color: #363636 + } + + .lnt { + white-space: pre; + -webkit-user-select: none; + user-select: none; + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + color: #686868 + } + + .ln { + white-space: pre; + -webkit-user-select: none; + user-select: none; + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + color: #686868 + } + + .line { + display: flex; + } + + .k { + color: #6ab825; + font-weight: bold + } + + .kc { + color: #6ab825; + font-weight: bold + } + + .kd { + color: #6ab825; + font-weight: bold + } + + .kn { + color: #6ab825; + font-weight: bold + } + + .kp { + color: #6ab825 + } + + .kr { + color: #6ab825; + font-weight: bold + } + + .kt { + color: #6ab825; + font-weight: bold + } + + .na { + color: #bbb + } + + .nc { + color: #447fcf; + text-decoration: underline + } + + .no { + color: #40ffff + } + + .nd { + color: #ffa500 + } + + .ne { + color: #bbb + } + + .nn { + color: #447fcf; + text-decoration: underline + } + + .nt { + color: #6ab825; + font-weight: bold + } + + .nb { + color: #24909d + } + + .bp { + color: #24909d + } + + .nv { + color: #40ffff + } + + .vc { + color: #40ffff + } + + .vg { + color: #40ffff + } + + .vi { + color: #40ffff + } + + .vm { + color: #40ffff + } + + .nf { + color: #447fcf + } + + .fm { + color: #447fcf + } + + .s { + color: #ed9d13 + } + + .sa { + color: #ed9d13 + } + + .sb { + color: #ed9d13 + } + + .sc { + color: #ed9d13 + } + + .dl { + color: #ed9d13 + } + + .sd { + color: #ed9d13 + } + + .s2 { + color: #ed9d13 + } + + .se { + color: #ed9d13 + } + + .sh { + color: #ed9d13 + } + + .si { + color: #ed9d13 + } + + .sx { + color: #ffa500 + } + + .sr { + color: #ed9d13 + } + + .s1 { + color: #ed9d13 + } + + .ss { + color: #ed9d13 + } + + .m { + color: #3677a9 + } + + .mb { + color: #3677a9 + } + + .mf { + color: #3677a9 + } + + .mh { + color: #3677a9 + } + + .mi { + color: #3677a9 + } + + .il { + color: #3677a9 + } + + .mo { + color: #3677a9 + } + + .ow { + color: #6ab825; + font-weight: bold + } + + .c { + color: #999; + font-style: italic + } + + .ch { + color: #999; + font-style: italic + } + + .cm { + color: #999; + font-style: italic + } + + .c1 { + color: #999; + font-style: italic + } + + .cs { + color: #e50808; + background-color: #520000; + font-weight: bold + } + + .cp { + color: #cd2828; + font-weight: bold + } + + .cpf { + color: #cd2828; + font-weight: bold + } + + .gd { + color: #d22323 + } + + .ge { + font-style: italic + } + + .gr { + color: #d22323 + } + + .gh { + color: #fff; + font-weight: bold + } + + .gi { + color: #589819 + } + + .go { + color: #ccc + } + + .gp { + color: #aaa + } + + .gs { + font-weight: bold + } + + .gu { + color: #fff; + text-decoration: underline + } + + .gt { + color: #d22323 + } + + .gl { + text-decoration: underline + } + + .w { + color: #666 + } } /* Light theme (Catppuccin-latte) */ @@ -2511,78 +2805,328 @@ html[data-theme="light"] .theme-toggle-btn { color: #4c4f69; background-color: #e9ecf1; - .err { color: #d20f39; } - .lnlinks { outline: none; text-decoration: none; color: inherit; } - .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } - .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } - .hl { background-color: #bcc0cc; } - .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; color: #8c8fa1; } - .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; color: #8c8fa1; } - .line { display: flex; } - .k { color: #8839ef; } - .kc { color: #fe640b; } - .kd { color: #d20f39; } - .kn { color: #179299; } - .kp { color: #8839ef; } - .kr { color: #8839ef; } - .kt { color: #d20f39; } - .na { color: #1e66f5; } - .nc { color: #df8e1d; } - .no { color: #df8e1d; } - .nd { color: #1e66f5; font-weight: bold; } - .ni { color: #179299; } - .ne { color: #fe640b; } - .nl { color: #04a5e5; } - .nn { color: #fe640b; } - .py { color: #fe640b; } - .nt { color: #8839ef; } - .nb { color: #04a5e5; } - .bp { color: #04a5e5; } - .nv { color: #dc8a78; } - .vc { color: #dc8a78; } - .vg { color: #dc8a78; } - .vi { color: #dc8a78; } - .vm { color: #dc8a78; } - .nf { color: #1e66f5; } - .fm { color: #1e66f5; } - .s { color: #40a02b; } - .sa { color: #d20f39; } - .sb { color: #40a02b; } - .sc { color: #40a02b; } - .dl { color: #1e66f5; } - .sd { color: #9ca0b0; } - .s2 { color: #40a02b; } - .se { color: #1e66f5; } - .sh { color: #9ca0b0; } - .si { color: #40a02b; } - .sx { color: #40a02b; } - .sr { color: #179299; } - .s1 { color: #40a02b; } - .ss { color: #40a02b; } - .m { color: #fe640b; } - .mb { color: #fe640b; } - .mf { color: #fe640b; } - .mh { color: #fe640b; } - .mi { color: #fe640b; } - .il { color: #fe640b; } - .mo { color: #fe640b; } - .o { color: #04a5e5; font-weight: bold; } - .ow { color: #04a5e5; font-weight: bold; } - .c { color: #9ca0b0; font-style: italic; } - .ch { color: #acb0be; font-style: italic; } - .cm { color: #9ca0b0; font-style: italic; } - .c1 { color: #9ca0b0; font-style: italic; } - .cs { color: #9ca0b0; font-style: italic; } - .cp { color: #9ca0b0; font-style: italic; } - .cpf { color: #9ca0b0; font-weight: bold; font-style: italic; } - .gd { color: #d20f39; background-color: #ccd0da; } - .ge { font-style: italic; } - .gr { color: #d20f39; } - .gh { color: #fe640b; font-weight: bold; } - .gi { color: #40a02b; background-color: #ccd0da; } - .gs { font-weight: bold; } - .gu { color: #fe640b; font-weight: bold; } - .gt { color: #d20f39; } - .gl { text-decoration: underline; } -} + .err { + color: #d20f39; + } + + .lnlinks { + outline: none; + text-decoration: none; + color: inherit; + } + + .lntd { + vertical-align: top; + padding: 0; + margin: 0; + border: 0; + } + + .lntable { + border-spacing: 0; + padding: 0; + margin: 0; + border: 0; + } + + .hl { + background-color: #bcc0cc; + } + + .lnt { + white-space: pre; + -webkit-user-select: none; + user-select: none; + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + color: #8c8fa1; + } + + .ln { + white-space: pre; + -webkit-user-select: none; + user-select: none; + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + color: #8c8fa1; + } + + .line { + display: flex; + } + + .k { + color: #8839ef; + } + + .kc { + color: #fe640b; + } + + .kd { + color: #d20f39; + } + + .kn { + color: #179299; + } + + .kp { + color: #8839ef; + } + + .kr { + color: #8839ef; + } + + .kt { + color: #d20f39; + } + + .na { + color: #1e66f5; + } + + .nc { + color: #df8e1d; + } + + .no { + color: #df8e1d; + } + + .nd { + color: #1e66f5; + font-weight: bold; + } + + .ni { + color: #179299; + } + + .ne { + color: #fe640b; + } + + .nl { + color: #04a5e5; + } + + .nn { + color: #fe640b; + } + + .py { + color: #fe640b; + } + + .nt { + color: #8839ef; + } + + .nb { + color: #04a5e5; + } + + .bp { + color: #04a5e5; + } + + .nv { + color: #dc8a78; + } + + .vc { + color: #dc8a78; + } + + .vg { + color: #dc8a78; + } + .vi { + color: #dc8a78; + } + + .vm { + color: #dc8a78; + } + + .nf { + color: #1e66f5; + } + + .fm { + color: #1e66f5; + } + + .s { + color: #40a02b; + } + + .sa { + color: #d20f39; + } + + .sb { + color: #40a02b; + } + + .sc { + color: #40a02b; + } + + .dl { + color: #1e66f5; + } + + .sd { + color: #9ca0b0; + } + + .s2 { + color: #40a02b; + } + + .se { + color: #1e66f5; + } + + .sh { + color: #9ca0b0; + } + + .si { + color: #40a02b; + } + + .sx { + color: #40a02b; + } + + .sr { + color: #179299; + } + + .s1 { + color: #40a02b; + } + + .ss { + color: #40a02b; + } + + .m { + color: #fe640b; + } + + .mb { + color: #fe640b; + } + + .mf { + color: #fe640b; + } + + .mh { + color: #fe640b; + } + + .mi { + color: #fe640b; + } + + .il { + color: #fe640b; + } + + .mo { + color: #fe640b; + } + + .o { + color: #04a5e5; + font-weight: bold; + } + + .ow { + color: #04a5e5; + font-weight: bold; + } + + .c { + color: #9ca0b0; + font-style: italic; + } + + .ch { + color: #acb0be; + font-style: italic; + } + + .cm { + color: #9ca0b0; + font-style: italic; + } + + .c1 { + color: #9ca0b0; + font-style: italic; + } + + .cs { + color: #9ca0b0; + font-style: italic; + } + + .cp { + color: #9ca0b0; + font-style: italic; + } + + .cpf { + color: #9ca0b0; + font-weight: bold; + font-style: italic; + } + + .gd { + color: #d20f39; + background-color: #ccd0da; + } + + .ge { + font-style: italic; + } + + .gr { + color: #d20f39; + } + + .gh { + color: #fe640b; + font-weight: bold; + } + + .gi { + color: #40a02b; + background-color: #ccd0da; + } + + .gs { + font-weight: bold; + } + + .gu { + color: #fe640b; + font-weight: bold; + } + + .gt { + color: #d20f39; + } + + .gl { + text-decoration: underline; + } +} \ No newline at end of file diff --git a/gcp/website/frontend3/src/templates/list.html b/gcp/website/frontend3/src/templates/list.html index 77c2e20d99f..281bc3b7968 100644 --- a/gcp/website/frontend3/src/templates/list.html +++ b/gcp/website/frontend3/src/templates/list.html @@ -101,7 +101,7 @@

Vulnerabilities

{% if vulnerability.summary %} - {{ vulnerability.summary | literal_backticks }} + {{ vulnerability.summary }} {% else %} See record for full details {% endif %} diff --git a/gcp/website/frontend3/src/templates/vulnerability.html b/gcp/website/frontend3/src/templates/vulnerability.html index d1faee2eecb..aed41ceb202 100644 --- a/gcp/website/frontend3/src/templates/vulnerability.html +++ b/gcp/website/frontend3/src/templates/vulnerability.html @@ -120,7 +120,7 @@

Summary
{% if vulnerability.summary %} - {{ vulnerability.summary | literal_backticks }} + {{ vulnerability.summary }} {% else %} [none] {% endif %} diff --git a/gcp/website/frontend_handlers.py b/gcp/website/frontend_handlers.py index f514833ac66..7df522cefb7 100644 --- a/gcp/website/frontend_handlers.py +++ b/gcp/website/frontend_handlers.py @@ -979,26 +979,6 @@ def list_packages(vuln_affected: list[dict]): return packages -@blueprint.app_template_filter('literal_backticks') -def literal_backticks(value: str | None) -> Markup: - """Escape text and render backticks correctly.""" - # TODO: This should be no longer needed if the Overpass font bug is fixed - # (https://github.com/google/osv.dev/issues/4345#issuecomment-3541453203) - # Summary fields render '`' characters as diacritics because of a bug - # with the Overpass font. This escapes them to the mono variant - # so they render correctly. - if not value: - return Markup('') - - escaped = escape(value) - escaped_str = str(escaped) - if '`' not in escaped_str: - return escaped - - replacement = '`' - return Markup(escaped_str.replace('`', replacement)) - - @blueprint.app_errorhandler(404) def not_found_error(error: exceptions.HTTPException): logging.info('Handled %s - Path attempted: %s', error, request.path) diff --git a/go/internal/website/vulnerability_view.go b/go/internal/website/vulnerability_view.go index d4736d178ca..ee9f8503c39 100644 --- a/go/internal/website/vulnerability_view.go +++ b/go/internal/website/vulnerability_view.go @@ -97,24 +97,6 @@ func (v VulnerabilityPageData) FormattedWithdrawn() string { return v.Vulnerability.GetWithdrawn().AsTime().Format(time.RFC3339) } -// SummaryHTML returns HTML-escaped summary text with literal backticks wrapped in `. -func (v VulnerabilityPageData) SummaryHTML() template.HTML { - if v.Vulnerability == nil || v.Vulnerability.GetSummary() == "" { - return "" - } - - summary := v.Vulnerability.GetSummary() - escaped := template.HTMLEscapeString(summary) - if !strings.Contains(escaped, "`") { - //nolint:gosec // HTML escaped string without backticks - return template.HTML(escaped) - } - - replaced := strings.ReplaceAll(escaped, "`", ``+"`"+``) - //nolint:gosec // HTML escaped with backtick spans - return template.HTML(replaced) -} - // DetailsHTML returns the details string converted to template.HTML. func (v VulnerabilityPageData) DetailsHTML() template.HTML { if v.Vulnerability == nil { diff --git a/go/internal/website/vulnerability_view_test.go b/go/internal/website/vulnerability_view_test.go index b770eb42317..bf0cc6fc980 100644 --- a/go/internal/website/vulnerability_view_test.go +++ b/go/internal/website/vulnerability_view_test.go @@ -186,44 +186,6 @@ func TestEcosystemLink(t *testing.T) { } } -func TestSummaryHTML(t *testing.T) { - tests := []struct { - name string - summary string - want string - }{ - { - name: "Empty summary", - summary: "", - want: "", - }, - { - name: "Plain summary HTML escaped", - summary: "Buffer overflow in ", - want: "Buffer overflow in <script>alert(1)</script>", - }, - { - name: "Summary with backticks", - summary: "Crash in `foo()` function", - want: `Crash in ` + "`" + `foo()` + "`" + ` function`, - }, - } - - for _, tt := range tests { - t.Run(tt.name, func(t *testing.T) { - pageData := VulnerabilityPageData{ - Vulnerability: &osvschema.Vulnerability{ - Summary: tt.summary, - }, - } - got := string(pageData.SummaryHTML()) - if got != tt.want { - t.Errorf("SummaryHTML() = %q, want %q", got, tt.want) - } - }) - } -} - func TestEcosystemGroups(t *testing.T) { pageData := VulnerabilityPageData{ Vulnerability: &osvschema.Vulnerability{