Custom code highlighter thema (#570)

* custom code highlighter thema

* icons

* styles

* icons without additional html

* new copy icon + styles, mobile fix

* neutral color for unknown languages

* http tab, mask size

* fallback icon

* fix

* fix

* fix
This commit is contained in:
trean
2024-02-13 00:35:19 +01:00
committed by GitHub
parent 4dd3142f82
commit 38680216ab
14 changed files with 309 additions and 37 deletions
+1 -1
View File
@@ -300,7 +300,7 @@ keywords = "search engine, vector database, neural network, matching, filter, Sa
[markup.goldmark.renderer]
unsafe=true
[markup.highlight]
style='friendly'
noClasses = false
codeFences=true
[related]
@@ -1,26 +1,116 @@
.highlight {
position: relative;
}
.highlight + .highlight {
display: none;
}
.highlight > pre {
padding: 10px 12px;
}
$tabs-bg-color: var(--neutral-n-100);
$tabs-bg-color-active: var(--neutral-n-50);
$tabs-bg-color-hover: var(--neutral-n-200);
$tabs-font-color: var(--neutral-n-500);
$tabs-font-color-active: var(--neutral-n-700);
$tabs-font-color-hover: var(--neutral-n-600);
.lang-tabs {
display: block;
min-height: 26px;
display: flex;
align-items: flex-start;
align-self: stretch;
background: $tabs-bg-color;
border-top: 1px solid $tabs-bg-color;
border-left: 1px solid $tabs-bg-color;
border-right: 1px solid $tabs-bg-color;
&__button {
display: flex;
padding: 10px 20px;
justify-content: center;
align-items: center;
gap: 8px;
color: $tabs-font-color;
position: relative;
text-indent: -9999px;
flex-wrap: wrap;
@include media-breakpoint-up(md) {
text-indent: unset;
}
.lang-tabs__button {
padding: 2px 4px 5px;
background: #dcdcdc;
color: inherit;
&:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background-color: $tabs-font-color;
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-image: url("/css/assets/lang-switcher/http.svg");
mask-image: url("/css/assets/lang-switcher/http.svg");
}
&_python {
&:before {
-webkit-mask-image: url("/css/assets/lang-switcher/python.svg");
mask-image: url("/css/assets/lang-switcher/python.svg");
}
}
&_typescript {
&:before {
-webkit-mask-image: url("/css/assets/lang-switcher/typescript.svg");
mask-image: url("/css/assets/lang-switcher/typescript.svg");
}
}
&_rust {
&:before {
-webkit-mask-image: url("/css/assets/lang-switcher/rust.svg");
mask-image: url("/css/assets/lang-switcher/rust.svg");
}
}
&_java {
&:before {
-webkit-mask-image: url("/css/assets/lang-switcher/java.svg");
mask-image: url("/css/assets/lang-switcher/java.svg");
}
}
&:not(.active):hover {
background: $tabs-bg-color-hover;
color: $tabs-font-color-hover;
cursor: pointer;
&:before {
background-color: $tabs-font-color-hover;
}
.lang-tabs__button.active {
background: #8d8d8d;
color: #fff;
&:after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 1px;
background: $tabs-bg-color-hover;
z-index: 1;
}
& .lang-tabs__icon {
background-color: $tabs-font-color-hover;
}
}
&.active {
background: $tabs-bg-color-active;
color: $tabs-font-color-active;
&:before {
background-color: $tabs-font-color-active;
}
&:after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 1px;
background: $tabs-bg-color-active;
z-index: 1;
}
& .lang-tabs__icon {
background-color: $tabs-font-color-active;
}
}
}
.lang-tabs__button:not(:last-of-type) {
border-right: 1px solid #fff;
}
@@ -0,0 +1,119 @@
/* inline code */
code:not([class]) {
color: var(--neutral-n-700);
background-color: var(--neutral-n-50);
padding: 0.2em 0.4em;
border-radius: 0.4em;
}
/* Background */
.highlight {
position: relative;
border: 1px solid var(--neutral-n-100);
background: var(--neutral-n-50);
margin-bottom: 1rem;
}
.highlight + .highlight {
display: none;
}
.highlight > pre {
margin: 0;
padding: 1rem;
}
/* PreWrapper */ .chroma { background-color: var(--neutral-n-50, #F2F6FF); }
/* Other */ .chroma .x { }
/* Error */ .chroma .err { color: var(--neutral-n-700, #1F3266) }
/* CodeLine */ .chroma .cl { }
/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
/* LineHighlight */ .chroma .hl { background-color: var(--neutral-n-100) }
/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
/* Line */
.chroma .line {
color: var(--neutral-n-700, #1F3266);
font-family: "Roboto Mono", monospace;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
display: flex;
&:not(:last-of-type) {
margin-bottom: 0.5rem;
}
}
/* Keyword */ .chroma .k { color: var(--brand-success-500) }
/* KeywordConstant */ .chroma .kc { color: var(--brand-success-500) }
/* KeywordDeclaration */ .chroma .kd { color: var(--brand-success-500) }
/* KeywordNamespace */ .chroma .kn { color: var(--brand-success-500) }
/* KeywordPseudo */ .chroma .kp { color: var(--brand-success-500) }
/* KeywordReserved */ .chroma .kr { color: var(--brand-success-500) }
/* KeywordType */ .chroma .kt { color: var(--brand-success-500) }
/* Name */ .chroma .n { color: var(--neutral-n-700) }
/* NameAttribute */ .chroma .na { color: var(--neutral-n-700) }
/* NameBuiltin */ .chroma .nb { color: var(--brand-success-500) }
/* NameBuiltinPseudo */ .chroma .bp { color: var(--neutral-n-700) }
/* NameClass */ .chroma .nc { color: var(--neutral-n-700) }
/* NameConstant */ .chroma .no { color: var(--netral-n-700) }
/* NameDecorator */ .chroma .nd { color: var(--neutral-n-700) }
/* NameEntity */ .chroma .ni { color: var(--neutral-n-700) }
/* NameException */ .chroma .ne { color: var(--neutral-n-700) }
/* NameFunction */ .chroma .nf { color: var(--neutral-n-700) }
/* NameFunctionMagic */ .chroma .fm { color: var(--neutral-n-700) }
/* NameLabel */ .chroma .nl { color: var(--neutral-n-700) }
/* NameNamespace */ .chroma .nn { color: #148BF4 }
/* NameOther */ .chroma .nx { color: var(--neutral-n-700) }
/* NameProperty */ .chroma .py { color: var(--neutral-n-700) }
/* NameTag */ .chroma .nt { color: var(--neutral-n-700) }
/* NameVariable */ .chroma .nv { color: var(--neutral-n-700) }
/* NameVariableClass */ .chroma .vc { color: var(--neutral-n-700) }
/* NameVariableGlobal */ .chroma .vg { color: var(--neutral-n-700) }
/* NameVariableInstance */ .chroma .vi { color: var(--neutral-n-700) }
/* NameVariableMagic */ .chroma .vm { color: var(--neutral-n-700) }
/* Literal */ .chroma .l { }
/* LiteralDate */ .chroma .ld { }
/* LiteralString */ .chroma .s { color: #148BF4 }
/* LiteralStringAffix */ .chroma .sa { color: #148BF4 }
/* LiteralStringBacktick */ .chroma .sb { color: #148BF4 }
/* LiteralStringChar */ .chroma .sc { color: #148BF4 }
/* LiteralStringDelimiter */ .chroma .dl { color: #148BF4 }
/* LiteralStringDoc */ .chroma .sd { color: #148BF4 }
/* LiteralStringDouble */ .chroma .s2 { color: #148BF4 }
/* LiteralStringEscape */ .chroma .se { color: #148BF4 }
/* LiteralStringHeredoc */ .chroma .sh { color: #148BF4 }
/* LiteralStringInterpol */ .chroma .si { color: #148BF4 }
/* LiteralStringOther */ .chroma .sx { color: #148BF4 }
/* LiteralStringRegex */ .chroma .sr { color: #148BF4 }
/* LiteralStringSingle */ .chroma .s1 { color: #148BF4 }
/* LiteralStringSymbol */ .chroma .ss { color: #148BF4 }
/* LiteralNumber */ .chroma .m { color: var(--neutral-n-500) }
/* LiteralNumberBin */ .chroma .mb { color: var(--neutral-n-500) }
/* LiteralNumberFloat */ .chroma .mf { color: var(--neutral-n-500) }
/* LiteralNumberHex */ .chroma .mh { color: var(--neutral-n-500) }
/* LiteralNumberInteger */ .chroma .mi { color: var(--brand-success-500) }
/* LiteralNumberIntegerLong */ .chroma .il { color: var(--neutral-n-500) }
/* LiteralNumberOct */ .chroma .mo { color: var(--neutral-n-500) }
/* Operator */ .chroma .o { }
/* OperatorWord */ .chroma .ow { color: var(--brand-success-500) }
/* Punctuation */ .chroma .p { }
/* Comment */ .chroma .c { color: var(--neutral-n-300); font-style: italic }
/* CommentHashbang */ .chroma .ch { color: var(--neutral-n-300); font-style: italic }
/* CommentMultiline */ .chroma .cm { color: var(--neutral-n-300); font-style: italic }
/* CommentSingle */ .chroma .c1 { color: var(--neutral-n-300); font-style: italic }
/* CommentSpecial */ .chroma .cs { color: var(--neutral-n-300); font-style: italic }
/* CommentPreproc */ .chroma .cp { color: var(--neutral-n-300); font-style: italic }
/* CommentPreprocFile */ .chroma .cpf { color: var(--neutral-n-300); font-style: italic }
/* Generic */ .chroma .g { }
/* GenericDeleted */ .chroma .gd { }
/* GenericEmph */ .chroma .ge { }
/* GenericError */ .chroma .gr { }
/* GenericHeading */ .chroma .gh { }
/* GenericInserted */ .chroma .gi { }
/* GenericOutput */ .chroma .go { }
/* GenericPrompt */ .chroma .gp { }
/* GenericStrong */ .chroma .gs { }
/* GenericSubheading */ .chroma .gu { }
/* GenericTraceback */ .chroma .gt { }
/* GenericUnderline */ .chroma .gl { }
/* TextWhitespace */ .chroma .w { }
@@ -0,0 +1,9 @@
<svg width="21" height="23" viewBox="0 0 21 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group">
<path id="Vector" d="M16.5 4.5H0.5V22.5H16.5V4.5Z" stroke="#102252" stroke-miterlimit="10" stroke-linecap="square"/>
<path id="Vector_2" d="M3.5 0.5H20.5V20.5" stroke="#102252" stroke-miterlimit="10" stroke-linecap="square"/>
<path id="Vector_3" d="M4.5 9.5H12.5" stroke="#102252" stroke-miterlimit="10" stroke-linecap="square"/>
<path id="Vector_4" d="M4.5 13.5H12.5" stroke="#102252" stroke-miterlimit="10" stroke-linecap="square"/>
<path id="Vector_5" d="M4.5 17.5H8.5" stroke="#102252" stroke-miterlimit="10" stroke-linecap="square"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 662 B

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"/></svg>

After

Width:  |  Height:  |  Size: 693 B

@@ -0,0 +1,17 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="16px/Java" clip-path="url(#clip0_2504_7507)">
<path id="Vector" d="M7.85398 2.96468C7.11467 3.48465 6.27676 4.074 5.82779 5.04903C5.04797 6.75013 7.42348 8.60567 7.52501 8.68383C7.54861 8.70198 7.57686 8.71105 7.60501 8.71105C7.63492 8.71105 7.66486 8.70083 7.68917 8.68045C7.73633 8.64101 7.7497 8.57401 7.72139 8.51945C7.7128 8.50289 6.8601 6.84663 6.89179 5.65844C6.90301 5.24459 7.48217 4.77512 8.0953 4.27809C8.65686 3.82284 9.29343 3.30687 9.66587 2.70327C10.4835 1.37464 9.57474 0.0681989 9.56546 0.0551364C9.52936 0.0044487 9.46274 -0.0138951 9.40577 0.0110737C9.34886 0.0361988 9.31733 0.0977303 9.33033 0.158574C9.33218 0.167231 9.5089 1.03117 9.01714 1.92127C8.81458 2.28908 8.36945 2.60215 7.85398 2.96468Z" fill="#5069AD"/>
<path id="Vector_2" d="M10.9688 3.55055C11.021 3.51127 11.0363 3.43961 11.0047 3.38243C10.9731 3.32524 10.9044 3.30002 10.8433 3.32321C10.7177 3.37096 7.76782 4.50806 7.76782 5.88197C7.76782 6.82906 8.17239 7.32938 8.46779 7.69476C8.58367 7.83807 8.6837 7.96182 8.71667 8.06748C8.80948 8.37195 8.58961 8.92226 8.49714 9.10864C8.47048 9.1622 8.48354 9.22714 8.52889 9.26626C8.55339 9.28742 8.58398 9.29817 8.61461 9.29817C8.64067 9.29817 8.66686 9.29042 8.68948 9.27467C8.7402 9.23942 9.92908 8.39885 9.71586 7.38613C9.63642 7.00119 9.44727 6.71994 9.28036 6.47175C9.0218 6.08722 8.83505 5.80947 9.11836 5.29646C9.4503 4.69809 10.9536 3.56193 10.9688 3.55055Z" fill="#5069AD"/>
<path id="Vector_3" d="M3.28978 9.31992C3.23922 9.47133 3.26309 9.62152 3.35875 9.75439C3.67853 10.1984 4.81125 10.4428 6.54839 10.4428C6.54848 10.4428 6.54854 10.4428 6.5486 10.4428C6.78398 10.4428 7.03248 10.4382 7.28701 10.4291C10.0644 10.3296 11.0945 9.46439 11.137 9.42761C11.1833 9.38752 11.1957 9.32077 11.1669 9.26677C11.1381 9.2128 11.076 9.18567 11.0167 9.20202C10.0385 9.46908 8.21202 9.56389 6.94514 9.56389C5.52754 9.56389 4.8056 9.46177 4.62885 9.38636C4.71954 9.26183 5.27891 9.03945 5.97207 8.90311C6.03832 8.89011 6.08385 8.82892 6.07729 8.76173C6.07073 8.69454 6.01429 8.6433 5.94676 8.6433C5.54044 8.6433 3.50278 8.67592 3.28978 9.31992Z" fill="#5069AD"/>
<path id="Vector_4" d="M12.5835 8.42874C12.0106 8.42874 11.4674 8.71587 11.4445 8.72802C11.3916 8.7564 11.3647 8.81715 11.3792 8.87553C11.3938 8.93381 11.4462 8.97477 11.5063 8.97484C11.5185 8.97484 12.7283 8.98474 12.8378 9.67597C12.9349 10.2723 11.6932 11.2385 11.2065 11.5605C11.1539 11.5953 11.1335 11.6624 11.1579 11.7206C11.1787 11.77 11.2269 11.801 11.2788 11.801C11.2879 11.801 11.2971 11.8 11.3062 11.7981C11.4217 11.7734 14.1314 11.1763 13.8449 9.59859C13.6701 8.63171 13.0624 8.42874 12.5835 8.42874Z" fill="#5069AD"/>
<path id="Vector_5" d="M10.7252 11.3674C10.7346 11.3169 10.7136 11.2655 10.6715 11.2359L10.0218 10.7808C9.99009 10.7586 9.95006 10.7517 9.91287 10.7615C9.90609 10.7632 9.22665 10.9419 8.24021 11.0514C7.84871 11.0953 7.41021 11.1185 6.97202 11.1185C5.98582 11.1185 5.34101 11.0026 5.2471 10.9176C5.23467 10.8937 5.2386 10.8829 5.24082 10.8769C5.25788 10.8294 5.34932 10.7731 5.40826 10.7507C5.47335 10.7266 5.50845 10.656 5.4882 10.5896C5.46801 10.5231 5.39954 10.484 5.33198 10.5002C4.68023 10.6575 4.36154 10.8775 4.38472 11.1539C4.42591 11.6441 5.56129 11.8957 6.52114 11.9622C6.65917 11.9717 6.80845 11.9764 6.96474 11.9764C6.96483 11.9764 6.96489 11.9764 6.96499 11.9764C8.56105 11.9764 10.6072 11.4757 10.6276 11.4706C10.6776 11.4584 10.7157 11.418 10.7252 11.3674Z" fill="#5069AD"/>
<path id="Vector_6" d="M5.82676 12.4194C5.87598 12.3874 5.89779 12.3266 5.88032 12.2705C5.86292 12.2145 5.81051 12.1777 5.75164 12.1785C5.66429 12.1808 4.89698 12.2154 4.84326 12.7039C4.82701 12.8499 4.86882 12.9833 4.9676 13.1004C5.2431 13.4269 5.98679 13.6209 7.24077 13.6936C7.38911 13.7025 7.5398 13.707 7.68871 13.707C9.28293 13.707 10.3566 13.2078 10.4016 13.1866C10.4452 13.166 10.4739 13.1231 10.4765 13.075C10.4791 13.0269 10.455 12.9812 10.4139 12.9561L9.59281 12.4548C9.56431 12.4374 9.53021 12.4317 9.49771 12.4383C9.49253 12.4394 8.97118 12.5476 8.1844 12.6544C8.03552 12.6746 7.84908 12.6849 7.63033 12.6849C6.84439 12.6849 5.9702 12.5565 5.80254 12.4724C5.8001 12.4567 5.8032 12.4368 5.82676 12.4194Z" fill="#5069AD"/>
<path id="Vector_7" d="M6.94583 15.2141C10.5975 15.211 12.5574 14.5616 12.935 14.153C13.0687 14.0084 13.0831 13.8715 13.0718 13.7821C13.0437 13.5621 12.8433 13.4274 12.8206 13.4128C12.7658 13.3776 12.6922 13.3868 12.6494 13.4361C12.6068 13.4854 12.6058 13.5575 12.6486 13.6068C12.6716 13.6364 12.6849 13.686 12.6176 13.7534C12.4667 13.8944 10.9443 14.3223 8.40958 14.4508C8.06236 14.4689 7.69817 14.478 7.3272 14.4781C5.05772 14.4781 3.39681 14.1672 3.17878 13.9861C3.26281 13.8654 3.85031 13.6724 4.4751 13.5633C4.5455 13.551 4.59307 13.4847 4.58216 13.4141C4.57125 13.3435 4.50616 13.2949 4.435 13.3041C4.41738 13.3065 4.35757 13.3101 4.28832 13.3143C3.25744 13.3773 2.06615 13.5175 2.00399 14.0487C1.98512 14.2105 2.03321 14.3575 2.14699 14.4854C2.4254 14.7982 3.22562 15.2141 6.9457 15.2141C6.94576 15.2141 6.94576 15.2141 6.94583 15.2141Z" fill="#5069AD"/>
<path id="Vector_8" d="M13.6522 14.2681C13.6006 14.2443 13.5396 14.2563 13.5011 14.2979C13.4958 14.3037 12.9467 14.8778 11.296 15.2149C10.664 15.3415 9.47775 15.4057 7.77015 15.4057C6.05936 15.4057 4.43144 15.3384 4.41523 15.3377C4.34723 15.3344 4.28907 15.3839 4.27982 15.4508C4.27054 15.5177 4.31366 15.5807 4.37932 15.5964C4.39626 15.6004 6.10229 16 8.43493 16C9.55371 16 10.6424 15.9092 11.6708 15.7299C13.5884 15.3937 13.7226 14.4429 13.7274 14.4026C13.7341 14.3463 13.7038 14.292 13.6522 14.2681Z" fill="#5069AD"/>
</g>
<defs>
<clipPath id="clip0_2504_7507">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 5.6 KiB

@@ -0,0 +1,10 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="16px/Python" clip-path="url(#clip0_3070_1074)">
<path id="Logo" fill-rule="evenodd" clip-rule="evenodd" d="M4.13025 2.14096C4.13025 1.03939 4.42608 0.440136 6.05944 0.154779C7.16834 -0.039286 8.59017 -0.0635441 9.91643 0.154779C10.964 0.327417 11.8456 1.10651 11.8456 2.14096V5.77523C11.8456 6.84114 10.9896 7.71427 9.91643 7.71427H6.05944C4.75042 7.71427 3.64718 8.82869 3.64718 10.0886V11.8323H2.321C1.19921 11.8323 0.546083 11.0246 0.271711 9.89451C-0.0983832 8.37628 -0.0826724 7.47169 0.271711 6.01765C0.578962 4.74919 1.56073 4.07991 2.68259 4.07991H7.98862V3.59475H4.13017V2.14088L4.13025 2.14096ZM11.8457 13.7712C11.8457 14.8728 10.8883 15.4307 9.91653 15.709C8.45462 16.1285 7.28133 16.0643 6.05953 15.709C5.03914 15.4122 4.13034 14.8057 4.13034 13.7712V10.1369C4.13034 9.091 5.00351 8.1979 6.05953 8.1979H9.91653C11.2013 8.1979 12.3288 7.0893 12.3288 5.77507V4.07991H13.775C14.8982 4.07991 15.427 4.91318 15.7042 6.01765C16.09 7.55158 16.1071 8.69875 15.7042 9.89451C15.3141 11.056 14.8968 11.8323 13.775 11.8323H7.98872V12.3174H11.8457V13.7712ZM5.818 1.17282C5.41778 1.17282 5.09482 1.49821 5.09482 1.90057C5.09482 2.30156 5.41794 2.62686 5.818 2.62686C6.21677 2.62686 6.54118 2.30164 6.54118 1.90057C6.54118 1.49813 6.21668 1.17282 5.818 1.17282ZM10.1579 13.287C9.75914 13.287 9.43472 13.6122 9.43472 14.0133C9.43472 14.4158 9.75922 14.7411 10.1579 14.7411C10.5581 14.7411 10.8811 14.4157 10.8811 14.0133C10.8811 13.6123 10.558 13.287 10.1579 13.287Z" fill="#1F3266"/>
</g>
<defs>
<clipPath id="clip0_3070_1074">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 7.1 KiB

@@ -0,0 +1,10 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="16px/Typescript" clip-path="url(#clip0_2504_7490)">
<path id="Vector" d="M0 8.0005V16.0005H16.0005V0H0V8.0005ZM12.8942 7.363C13.3005 7.4645 13.6105 7.645 13.895 7.9395C14.0425 8.097 14.2607 8.384 14.2785 8.4525C14.2835 8.4725 13.5878 8.94 13.166 9.20175C13.151 9.21175 13.0898 9.146 13.021 9.04425C12.8152 8.74425 12.5995 8.615 12.2692 8.59225C11.7843 8.55925 11.4692 8.81325 11.4742 9.23725C11.4742 9.36175 11.4918 9.43525 11.5428 9.53725C11.6495 9.75825 11.8478 9.89025 12.4698 10.1597C13.6153 10.6523 14.1053 10.9773 14.4097 11.4397C14.7498 11.9552 14.8263 12.7782 14.5953 13.3902C14.3413 14.0557 13.7115 14.5078 12.8252 14.6578C12.551 14.706 11.9008 14.6985 11.6062 14.6452C10.9637 14.531 10.3542 14.2135 9.97825 13.797C9.83075 13.6345 9.544 13.2102 9.56175 13.1795C9.56925 13.1695 9.6355 13.1287 9.70925 13.0855L10.3035 12.743L10.7635 12.4762L10.86 12.6187C10.9945 12.8245 11.2893 13.1062 11.467 13.2002C11.9775 13.4695 12.6785 13.4312 13.0238 13.1215C13.1713 12.987 13.232 12.8472 13.232 12.6415C13.232 12.456 13.2095 12.3747 13.1128 12.2352C12.9882 12.0577 12.7343 11.9078 12.0127 11.5953C11.1873 11.2397 10.8317 11.0188 10.5068 10.6683C10.3188 10.465 10.141 10.14 10.0673 9.86825C10.0063 9.64225 9.991 9.07575 10.0393 8.84725C10.2093 8.04725 10.8113 7.4935 11.68 7.3285C11.962 7.27525 12.6175 7.2955 12.894 7.364L12.8942 7.363ZM9.138 8.0305L9.143 8.6855H7.0605V14.603H5.5875V8.6855H3.505V8.043L3.5225 7.383C3.53 7.373 4.7975 7.368 6.334 7.3705L9.13025 7.378L9.138 8.0305Z" fill="#5069AD"/>
</g>
<defs>
<clipPath id="clip0_2504_7490">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -1,7 +1,5 @@
/* copy button for documentation */
/* ##bem */
.copy-code {
position: absolute;
right: 8px;
@@ -10,14 +8,24 @@
.copy-code__btn {
padding: 4px;
background: var(--brand-light);
background: var(--neutral-n-50);
i {
color: var(--brand-secondary);
display: block;
width: 24px;
height: 24px;
background-color: var(--neutral-n-700);
-webkit-mask-image: url("/css/assets/copy.svg");
mask-image: url("/css/assets/copy.svg");
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
}
}
.copy-code__btn:hover {
background: white;
i {
background-color: var(--neutral-n-600);
}
}
.copy-code__btn_light {
File diff suppressed because one or more lines are too long
@@ -18,6 +18,7 @@
@import "blocks/optimized-section";
@import "blocks/clients-section";
@import "blocks/prices-page";
@import "syntax-highlight";
/***
@@ -55,10 +56,6 @@ QDRANT - RELATED
/** todo: move to related files */
code {
color: #6e0c21;
}
.features-section .feature-block .text li {
display: block;
position: relative;
@@ -15,7 +15,7 @@
copyBtn.dataset.content = 'Text copied!'
copyBtn.innerHTML = '<button class="copy-code__btn lead ml-2" data-clipboard-target="#' + id + '" title="Copy code">' +
'<i class="flaticon-copy d-flex"></i>' +
'<i class="d-flex"></i>' +
'</button>'
block.after(copyBtn);
@@ -27,6 +27,7 @@
const lang = this.getLang(tab);
let button = document.createElement('span');
button.classList.add('lang-tabs__button');
button.classList.add(`lang-tabs__button_${lang}`);
(i == 0) && button.classList.add('active');
button.dataset.lang = lang;
button.innerText = lang;