mirror of
https://github.com/fluxerapp/fluxer
synced 2026-10-18 13:35:42 +09:00
docs: move the reference site to astro starlight (#2527)
This commit is contained in:
Hampus authored and GitHub committed
1 parent
7f8f09ee51
commit
5367c0ab42
198 files changed
+59927
-1216
No files matched your search
@@ -0,0 +1,133 @@
|
||||
// SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
|
||||
type ThemeSetting = {
|
||||
scope?: Array<string>;
|
||||
settings: {foreground?: string; fontStyle?: string};
|
||||
};
|
||||
|
||||
type CodeTheme = {
|
||||
name: string;
|
||||
type: 'dark' | 'light';
|
||||
colors: Record<string, string>;
|
||||
tokenColors: Array<ThemeSetting>;
|
||||
};
|
||||
|
||||
const buildTokenColors = (p: Record<string, string>): Array<ThemeSetting> => [
|
||||
{scope: ['comment', 'punctuation.definition.comment', 'string.comment'], settings: {foreground: p.comment}},
|
||||
{
|
||||
scope: [
|
||||
'punctuation',
|
||||
'punctuation.definition',
|
||||
'punctuation.separator',
|
||||
'punctuation.terminator',
|
||||
'punctuation.section',
|
||||
'meta.brace',
|
||||
'meta.delimiter',
|
||||
],
|
||||
settings: {foreground: p.punctuation},
|
||||
},
|
||||
{
|
||||
scope: [
|
||||
'support.type.property-name',
|
||||
'meta.object-literal.key',
|
||||
'entity.name.tag',
|
||||
'entity.name.tag.yaml',
|
||||
'keyword.other.definition.ini',
|
||||
'support.type.property-name.json',
|
||||
'variable.other.key',
|
||||
],
|
||||
settings: {foreground: p.key},
|
||||
},
|
||||
{
|
||||
scope: ['string', 'string.quoted', 'string.unquoted', 'markup.inline.raw', 'meta.attribute-selector'],
|
||||
settings: {foreground: p.string},
|
||||
},
|
||||
{scope: ['constant.character.escape', 'constant.other.placeholder'], settings: {foreground: p.number}},
|
||||
{scope: ['constant.numeric', 'constant.other.timestamp'], settings: {foreground: p.number}},
|
||||
{
|
||||
scope: ['constant.language', 'constant.other', 'support.constant', 'variable.language'],
|
||||
settings: {foreground: p.constant},
|
||||
},
|
||||
{
|
||||
scope: ['keyword', 'keyword.control', 'keyword.operator.word', 'storage', 'storage.type', 'storage.modifier'],
|
||||
settings: {foreground: p.keyword},
|
||||
},
|
||||
{
|
||||
scope: [
|
||||
'entity.name.function',
|
||||
'support.function',
|
||||
'entity.name.command',
|
||||
'meta.function-call',
|
||||
'entity.name.type',
|
||||
'support.class',
|
||||
],
|
||||
settings: {foreground: p.function},
|
||||
},
|
||||
{
|
||||
scope: ['variable', 'variable.other', 'variable.parameter', 'meta.definition.variable', 'entity.name.variable'],
|
||||
settings: {foreground: p.key},
|
||||
},
|
||||
{scope: ['invalid', 'invalid.illegal', 'markup.deleted'], settings: {foreground: p.invalid}},
|
||||
{scope: ['markup.inserted'], settings: {foreground: p.string}},
|
||||
{scope: ['keyword.operator', 'meta.separator'], settings: {foreground: p.plain}},
|
||||
];
|
||||
|
||||
const darkPalette = {
|
||||
plain: '#e5e4e9',
|
||||
punctuation: '#a49eb3',
|
||||
comment: '#9d97aa',
|
||||
key: '#6ccff9',
|
||||
string: '#4eda99',
|
||||
number: '#f48134',
|
||||
constant: '#ca7bef',
|
||||
keyword: '#ed82a6',
|
||||
function: '#9491f3',
|
||||
variable: '#f37777',
|
||||
invalid: '#f88181',
|
||||
};
|
||||
|
||||
const lightPalette = {
|
||||
plain: '#31363f',
|
||||
punctuation: '#5a6272',
|
||||
comment: '#5c6370',
|
||||
key: '#066993',
|
||||
string: '#0c6e40',
|
||||
number: '#a04508',
|
||||
constant: '#8720b6',
|
||||
keyword: '#aa1849',
|
||||
function: '#2a24cc',
|
||||
variable: '#ad1f21',
|
||||
invalid: '#a51215',
|
||||
};
|
||||
|
||||
export const fluxerDarkCodeTheme: CodeTheme = {
|
||||
name: 'fluxer-dark',
|
||||
type: 'dark',
|
||||
colors: {
|
||||
'editor.background': '#232129',
|
||||
'editor.foreground': darkPalette.plain,
|
||||
'editor.selectionBackground': '#6ccff938',
|
||||
focusBorder: '#6ccff9',
|
||||
'scrollbarSlider.background': '#afabba59',
|
||||
'scrollbarSlider.hoverBackground': '#afabba8c',
|
||||
'terminal.background': '#232129',
|
||||
'titleBar.activeBackground': '#2a2730',
|
||||
},
|
||||
tokenColors: buildTokenColors(darkPalette),
|
||||
};
|
||||
|
||||
export const fluxerLightCodeTheme: CodeTheme = {
|
||||
name: 'fluxer-light',
|
||||
type: 'light',
|
||||
colors: {
|
||||
'editor.background': '#f6f7f8',
|
||||
'editor.foreground': lightPalette.plain,
|
||||
'editor.selectionBackground': '#099ddc2e',
|
||||
focusBorder: '#07709d',
|
||||
'scrollbarSlider.background': '#4e545f59',
|
||||
'scrollbarSlider.hoverBackground': '#4e545f8c',
|
||||
'terminal.background': '#f6f7f8',
|
||||
'titleBar.activeBackground': '#ebecef',
|
||||
},
|
||||
tokenColors: buildTokenColors(lightPalette),
|
||||
};
|
||||
@@ -0,0 +1,482 @@
|
||||
/* SPDX-License-Identifier: AGPL-3.0-or-later */
|
||||
|
||||
.sl-markdown-content {
|
||||
color: var(--flx-content-text);
|
||||
}
|
||||
|
||||
.sl-markdown-content :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
|
||||
color: var(--flx-content-heading);
|
||||
}
|
||||
|
||||
.sl-markdown-content :is(h1, .sl-heading-wrapper.level-h1):not(:where(.not-content *)) {
|
||||
--sl-line-height-headings: 1.25;
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: var(--sl-text-h1);
|
||||
font-weight: 700;
|
||||
line-height: var(--sl-line-height-headings);
|
||||
}
|
||||
|
||||
.sl-markdown-content :is(h2, .sl-heading-wrapper.level-h2):not(:where(.not-content *)) {
|
||||
--sl-line-height-headings: 1.625;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: var(--sl-text-h2);
|
||||
font-weight: 600;
|
||||
line-height: var(--sl-line-height-headings);
|
||||
}
|
||||
|
||||
.sl-markdown-content :is(h3, .sl-heading-wrapper.level-h3):not(:where(.not-content *)) {
|
||||
--sl-line-height-headings: 1.5;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: var(--sl-text-h3);
|
||||
font-weight: 500;
|
||||
line-height: var(--sl-line-height-headings);
|
||||
}
|
||||
|
||||
.sl-markdown-content :is(h4, .sl-heading-wrapper.level-h4):not(:where(.not-content *)) {
|
||||
--sl-line-height-headings: 1.5;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: var(--sl-text-h4);
|
||||
font-weight: 500;
|
||||
line-height: var(--sl-line-height-headings);
|
||||
}
|
||||
|
||||
.sl-markdown-content
|
||||
:is(h5, h6, .sl-heading-wrapper.level-h5, .sl-heading-wrapper.level-h6):not(:where(.not-content *)) {
|
||||
--sl-line-height-headings: 1.5;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: var(--sl-text-h5);
|
||||
font-weight: 500;
|
||||
line-height: var(--sl-line-height-headings);
|
||||
}
|
||||
|
||||
@media (min-width: 40rem) {
|
||||
.sl-markdown-content :is(h1, .sl-heading-wrapper.level-h1):not(:where(.not-content *)) {
|
||||
--sl-line-height-headings: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.sl-markdown-content
|
||||
.sl-heading-wrapper:is(.level-h1, .level-h2, .level-h3, .level-h4, .level-h5, .level-h6):has(+ flx-route-header) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.sl-markdown-content p:not(:where(.not-content *)) {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: var(--sl-text-base);
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.sl-markdown-content a:not(:where(.not-content *)) {
|
||||
color: var(--flx-link);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sl-markdown-content a:hover:not(:where(.not-content *)) {
|
||||
color: var(--flx-link);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.sl-markdown-content :is(ul, ol):not(:where(.not-content *)) {
|
||||
margin-block: 0.25rem 1rem;
|
||||
margin-inline: 0;
|
||||
padding-inline-start: 1.75em;
|
||||
list-style-position: outside;
|
||||
}
|
||||
|
||||
.sl-markdown-content ol:not(:where(.not-content *)) {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.sl-markdown-content ol:not(:where(.not-content *)) > li::marker {
|
||||
content: counter(list-item) '.\2002';
|
||||
font-variant-numeric: proportional-nums;
|
||||
}
|
||||
|
||||
.sl-markdown-content ul:not(:where(.not-content *)) {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.sl-markdown-content li:not(:where(.not-content *)) {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.sl-markdown-content li:last-child:not(:where(.not-content *)) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.sl-markdown-content li > :is(ul, ol):not(:where(.not-content *)) {
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.sl-markdown-content ul ul:not(:where(.not-content *)) {
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
.sl-markdown-content ul ul ul:not(:where(.not-content *)) {
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
.sl-markdown-content ol ol:not(:where(.not-content *)) {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
|
||||
.sl-markdown-content ol ol ol:not(:where(.not-content *)) {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
|
||||
.sl-markdown-content code:not(:where(.not-content *)) {
|
||||
margin-block: 0;
|
||||
border-radius: var(--flx-radius);
|
||||
padding: 0.125em 0.375em;
|
||||
font-family: var(--__sl-font-mono);
|
||||
font-size: var(--flx-code-inline-font-size);
|
||||
font-variant-ligatures: none;
|
||||
font-feature-settings:
|
||||
'calt' 0,
|
||||
'liga' 0,
|
||||
'dlig' 0;
|
||||
font-weight: 400;
|
||||
background-color: var(--flx-inline-code-bg);
|
||||
color: var(--flx-inline-code-text);
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) code:not(:where(.not-content *)) {
|
||||
font-size: 0.9em;
|
||||
font-weight: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.sl-markdown-content a code:not(:where(.not-content *)) {
|
||||
color: var(--flx-inline-code-link);
|
||||
}
|
||||
|
||||
.sl-markdown-content a:hover code:not(:where(.not-content *)) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.sl-markdown-content :is(th, td) code:not(:where(.not-content *)) {
|
||||
padding: 0.0625em 0.3125em;
|
||||
}
|
||||
|
||||
.sl-markdown-content pre:not(:where(.not-content *)) {
|
||||
border: 1px solid var(--flx-code-border);
|
||||
border-radius: var(--flx-radius-lg);
|
||||
padding: 0.875rem 1.125rem;
|
||||
background-color: var(--flx-code-bg);
|
||||
color: var(--flx-code-fg);
|
||||
font-family: var(--__sl-font-mono);
|
||||
font-size: var(--flx-code-block-font-size);
|
||||
font-variant-ligatures: none;
|
||||
font-feature-settings:
|
||||
'calt' 0,
|
||||
'liga' 0,
|
||||
'dlig' 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.sl-markdown-content pre code:not(:where(.not-content *)) {
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.expressive-code code {
|
||||
font-variant-ligatures: none;
|
||||
font-feature-settings:
|
||||
'calt' 0,
|
||||
'liga' 0,
|
||||
'dlig' 0;
|
||||
}
|
||||
|
||||
.sl-markdown-content .expressive-code:not(:where(.not-content *)) {
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.sl-markdown-content .expressive-code .copy button,
|
||||
.sl-markdown-content .expressive-code .frame:hover .copy button:not(:hover),
|
||||
.sl-markdown-content .expressive-code .frame:focus-within :focus-visible ~ .copy button:not(:hover),
|
||||
.sl-markdown-content .expressive-code .frame .copy .feedback.show ~ button:not(:hover) {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sl-markdown-content .expressive-code .copy button::after {
|
||||
margin: 0.3125rem;
|
||||
}
|
||||
|
||||
.sl-markdown-content {
|
||||
container-type: inline-size;
|
||||
container-name: flx-content;
|
||||
}
|
||||
|
||||
.sl-markdown-content table:not(:where(.not-content *)) {
|
||||
display: table;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
table-layout: fixed;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
border-radius: var(--flx-radius);
|
||||
overflow: visible;
|
||||
|
||||
overflow-wrap: break-word;
|
||||
vertical-align: middle;
|
||||
font-size: var(--sl-text-sm);
|
||||
line-height: 1.25rem;
|
||||
color: var(--flx-table-text);
|
||||
}
|
||||
|
||||
.sl-markdown-content th:not(:where(.not-content *)) {
|
||||
border: 0;
|
||||
border-bottom: 2px solid var(--flx-table-head-border);
|
||||
padding: 0.5rem 0.75rem;
|
||||
background-color: var(--flx-table-head-bg);
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
color: var(--flx-content-heading);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.sl-markdown-content td:not(:where(.not-content *)) {
|
||||
border: 0;
|
||||
padding: 0.5rem 0.75rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@container flx-content (min-width: 30rem) and (max-width: 59.99rem) {
|
||||
.sl-markdown-content table:not(:where(.not-content *)) > colgroup > col {
|
||||
width: var(--flx-col-width);
|
||||
}
|
||||
|
||||
.sl-markdown-content
|
||||
table:not(:where(.not-content *)):not(:has(> colgroup))
|
||||
thead
|
||||
tr:first-child
|
||||
> th:nth-child(2):last-child {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.sl-markdown-content
|
||||
table:not(:where(.not-content *)):not(:has(> colgroup))
|
||||
thead
|
||||
tr:first-child:has(> th:nth-child(3):last-child)
|
||||
> th:first-child {
|
||||
width: 26%;
|
||||
}
|
||||
|
||||
.sl-markdown-content
|
||||
table:not(:where(.not-content *)):not(:has(> colgroup))
|
||||
thead
|
||||
tr:first-child:has(> th:nth-child(3):last-child)
|
||||
> th:nth-child(2) {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
@container flx-content (min-width: 45rem) and (max-width: 59.99rem) {
|
||||
.sl-markdown-content table:not(:where(.not-content *)) > colgroup > col {
|
||||
width: var(--flx-col-width-mid, var(--flx-col-width));
|
||||
}
|
||||
}
|
||||
|
||||
@container flx-content (min-width: 60rem) {
|
||||
.sl-markdown-content table:not(:where(.not-content *)) {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.sl-markdown-content table:not(:where(.not-content *)) > colgroup > col {
|
||||
width: var(--flx-col-width-wide, var(--flx-col-width));
|
||||
}
|
||||
}
|
||||
|
||||
@container flx-content (max-width: 29.99rem) {
|
||||
.sl-markdown-content table:not(:where(.not-content *)) {
|
||||
display: block;
|
||||
table-layout: fixed;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.sl-markdown-content table:not(:where(.not-content *)) :is(thead, tbody, tr, th, td) {
|
||||
display: block;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.sl-markdown-content table:not(:where(.not-content *)) thead {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
clip-path: inset(50%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sl-markdown-content table:not(:where(.not-content *)) tbody tr {
|
||||
margin-bottom: 0.5rem;
|
||||
border-radius: var(--flx-radius);
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
.sl-markdown-content table:not(:where(.not-content *)) tbody td {
|
||||
padding: 0.25rem 0.75rem;
|
||||
}
|
||||
|
||||
.sl-markdown-content table:not(:where(.not-content *)) tbody td:first-child {
|
||||
padding-top: 0.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--flx-content-heading);
|
||||
}
|
||||
|
||||
.sl-markdown-content table:not(:where(.not-content *)) tbody td:last-child {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.sl-markdown-content table:not(:where(.not-content *)) tbody td[data-label]::before {
|
||||
display: block;
|
||||
font-size: var(--sl-text-xs);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
color: var(--flx-content-heading);
|
||||
content: attr(data-label);
|
||||
}
|
||||
}
|
||||
|
||||
.sl-markdown-content tbody tr:not(:where(.not-content *)) {
|
||||
background-color: var(--flx-table-row-bg);
|
||||
}
|
||||
|
||||
.sl-markdown-content tbody tr:nth-child(even):not(:where(.not-content *)) {
|
||||
background-color: var(--flx-table-row-alt-bg);
|
||||
}
|
||||
|
||||
.sl-markdown-content thead tr:first-child th:first-child:not(:where(.not-content *)) {
|
||||
border-start-start-radius: var(--flx-radius);
|
||||
}
|
||||
|
||||
.sl-markdown-content thead tr:first-child th:last-child:not(:where(.not-content *)) {
|
||||
border-start-end-radius: var(--flx-radius);
|
||||
}
|
||||
|
||||
.sl-markdown-content tbody tr:last-child td:first-child:not(:where(.not-content *)) {
|
||||
border-end-start-radius: var(--flx-radius);
|
||||
}
|
||||
|
||||
.sl-markdown-content tbody tr:last-child td:last-child:not(:where(.not-content *)) {
|
||||
border-end-end-radius: var(--flx-radius);
|
||||
}
|
||||
|
||||
.sl-markdown-content blockquote:not(:where(.not-content *)) {
|
||||
border-inline-start: 2px solid var(--sl-color-gray-5);
|
||||
padding-inline-start: 1rem;
|
||||
color: var(--flx-content-text);
|
||||
}
|
||||
|
||||
.sl-markdown-content details:not(:where(.not-content *)) {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
border-inline-start: 0;
|
||||
border-radius: var(--flx-radius);
|
||||
padding: 0 1.5rem;
|
||||
background-color: var(--flx-collapsible-bg);
|
||||
}
|
||||
|
||||
.sl-markdown-content details[open]:not(:where(.not-content *)) {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.sl-markdown-content summary:not(:where(.not-content *)) {
|
||||
padding-block: 1.25rem;
|
||||
font-size: var(--sl-text-h3);
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: var(--flx-content-heading);
|
||||
}
|
||||
|
||||
.sl-markdown-content details[open] > summary:not(:where(.not-content *)) {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.starlight-aside {
|
||||
display: block;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border: 2px solid var(--flx-aside-border);
|
||||
border-radius: var(--flx-radius-lg);
|
||||
padding: 0 0.5rem;
|
||||
|
||||
overflow: clip;
|
||||
background-color: var(--flx-aside-bg);
|
||||
color: var(--flx-content-text);
|
||||
}
|
||||
|
||||
.starlight-aside--note {
|
||||
--flx-aside-border: var(--flx-aside-note-border);
|
||||
--flx-aside-bg: var(--flx-aside-note-bg);
|
||||
--flx-aside-text: var(--flx-aside-note-text);
|
||||
}
|
||||
|
||||
.starlight-aside--tip {
|
||||
--flx-aside-border: var(--flx-aside-tip-border);
|
||||
--flx-aside-bg: var(--flx-aside-tip-bg);
|
||||
--flx-aside-text: var(--flx-aside-tip-text);
|
||||
}
|
||||
|
||||
.starlight-aside--caution {
|
||||
--flx-aside-border: var(--flx-aside-caution-border);
|
||||
--flx-aside-bg: var(--flx-aside-caution-bg);
|
||||
--flx-aside-text: var(--flx-aside-caution-text);
|
||||
}
|
||||
|
||||
.starlight-aside--danger {
|
||||
--flx-aside-border: var(--flx-aside-danger-border);
|
||||
--flx-aside-bg: var(--flx-aside-danger-bg);
|
||||
--flx-aside-text: var(--flx-aside-danger-text);
|
||||
}
|
||||
|
||||
.sl-markdown-content .starlight-aside p:not(:where(.not-content *)) {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.starlight-aside__title {
|
||||
gap: 0.5rem;
|
||||
font-size: var(--sl-text-base);
|
||||
font-weight: 600;
|
||||
line-height: 1.5rem;
|
||||
color: var(--flx-aside-text);
|
||||
}
|
||||
|
||||
.starlight-aside__icon {
|
||||
font-size: 1.15em;
|
||||
color: var(--flx-aside-text);
|
||||
}
|
||||
|
||||
.starlight-aside__title + .starlight-aside__content {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.starlight-aside__content a {
|
||||
color: var(--flx-link);
|
||||
}
|
||||
|
||||
.sl-markdown-content .starlight-aside :is(th, td, hr, blockquote):not(:where(.not-content *)) {
|
||||
border-color: var(--flx-aside-border);
|
||||
}
|
||||
@@ -0,0 +1,355 @@
|
||||
/* SPDX-License-Identifier: AGPL-3.0-or-later */
|
||||
|
||||
html {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--flx-scrollbar-thumb);
|
||||
border: 4px solid transparent;
|
||||
border-radius: 8px;
|
||||
min-height: 40px;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: var(--flx-scrollbar-track);
|
||||
border: 4px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@supports (-moz-appearance: none) {
|
||||
html {
|
||||
scrollbar-color: var(--flx-scrollbar-thumb) var(--flx-scrollbar-track);
|
||||
}
|
||||
}
|
||||
|
||||
.header:not(:where(.expressive-code *)) {
|
||||
border-bottom: 1px solid var(--sl-color-hairline-shade);
|
||||
}
|
||||
|
||||
flx-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
flx-header .site-title {
|
||||
min-width: 0;
|
||||
max-width: 9rem;
|
||||
text-decoration: none;
|
||||
color: var(--flx-content-heading);
|
||||
}
|
||||
|
||||
flx-header .site-title img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.sidebar-pane {
|
||||
border-inline-end: 0;
|
||||
scrollbar-gutter: auto;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
padding: 1.25rem var(--sl-sidebar-pad-x) 1.5rem;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
flx-sidebar-head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
flx-sidebar-brand {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
flx-sidebar-brand .site-title {
|
||||
gap: 0.5rem;
|
||||
flex: 0 1 auto;
|
||||
min-width: 0;
|
||||
max-width: 8rem;
|
||||
text-decoration: none;
|
||||
color: var(--flx-sidebar-heading);
|
||||
}
|
||||
|
||||
flx-sidebar-brand .site-title img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .site-title img {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
flx-sidebar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
flx-sidebar-social {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
flx-sidebar-social a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--flx-sidebar-text);
|
||||
}
|
||||
|
||||
flx-sidebar-social a:hover {
|
||||
color: var(--flx-sidebar-hover-text);
|
||||
}
|
||||
|
||||
flx-sidebar-search {
|
||||
display: block;
|
||||
}
|
||||
|
||||
flx-sidebar-search button[data-open-modal] > span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
flx-sidebar-search button[data-open-modal] {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
height: 2.25rem;
|
||||
border: 1px solid var(--flx-sidebar-field-border);
|
||||
border-radius: var(--flx-radius);
|
||||
padding-inline: 0.75rem 0.5rem;
|
||||
background-color: var(--flx-sidebar-field-bg);
|
||||
color: var(--flx-sidebar-text);
|
||||
font-size: var(--sl-text-sm);
|
||||
}
|
||||
|
||||
flx-sidebar-search button[data-open-modal]:hover {
|
||||
color: var(--flx-sidebar-hover-text);
|
||||
border-color: var(--sl-color-gray-4);
|
||||
}
|
||||
|
||||
@media (min-width: 40rem) {
|
||||
:root {
|
||||
--sl-content-pad-x: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 50rem) {
|
||||
:root {
|
||||
--sl-nav-height: 0rem;
|
||||
}
|
||||
|
||||
.header:not(:where(.expressive-code *)) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
flx-sidebar-brand {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 64rem) {
|
||||
:root {
|
||||
--sl-content-pad-x: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 87.5rem) {
|
||||
.right-sidebar {
|
||||
border-inline-start: 0;
|
||||
padding-top: 1.5rem;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.right-sidebar-panel {
|
||||
padding: 0 var(--sl-sidebar-pad-x);
|
||||
}
|
||||
|
||||
.right-sidebar-panel .sl-container {
|
||||
width: 100%;
|
||||
max-width: var(--flx-toc-width);
|
||||
}
|
||||
}
|
||||
|
||||
.content-panel {
|
||||
padding: 1rem var(--sl-content-pad-x);
|
||||
}
|
||||
|
||||
.content-panel + .content-panel {
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
main > .content-panel:first-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.sl-container > * + * {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
main > .content-panel:first-child h1 {
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: var(--sl-text-h1);
|
||||
font-weight: 700;
|
||||
line-height: 1.25;
|
||||
color: var(--flx-content-heading);
|
||||
}
|
||||
|
||||
@media (min-width: 40rem) {
|
||||
.content-panel {
|
||||
padding-top: 0;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
main > .content-panel:first-child h1 {
|
||||
line-height: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 64rem) {
|
||||
.content-panel {
|
||||
padding-bottom: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 80rem) {
|
||||
main > .content-panel:first-child {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-content ul {
|
||||
--sl-sidebar-item-padding-inline: 0.5rem;
|
||||
}
|
||||
|
||||
.sidebar-content ul ul li {
|
||||
margin-inline-start: 0.5rem;
|
||||
border-inline-start: 0;
|
||||
padding-inline-start: 0.25rem;
|
||||
}
|
||||
|
||||
.sidebar-content .top-level > li + li {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.sidebar-content summary {
|
||||
padding: 0.25rem 0.5rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.sidebar-content .large {
|
||||
font-size: var(--sl-text-sm);
|
||||
font-weight: 600;
|
||||
color: var(--flx-sidebar-heading);
|
||||
}
|
||||
|
||||
.sidebar-content .top-level > li > details > summary .large {
|
||||
font-size: var(--sl-text-xs);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.sidebar-content ul a {
|
||||
display: block;
|
||||
border-radius: var(--flx-radius);
|
||||
padding: 0.25rem 0.5rem 0.25rem 0.75rem;
|
||||
font-size: var(--sl-text-sm);
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
color: var(--flx-sidebar-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sidebar-content ul a:hover,
|
||||
.sidebar-content ul a:focus-visible {
|
||||
background-color: var(--flx-sidebar-hover-bg);
|
||||
color: var(--flx-sidebar-hover-text);
|
||||
}
|
||||
|
||||
.sidebar-content ul a[aria-current='page'],
|
||||
.sidebar-content ul a[aria-current='page']:hover,
|
||||
.sidebar-content ul a[aria-current='page']:focus-visible {
|
||||
background-color: var(--flx-brand);
|
||||
color: var(--flx-on-brand);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.right-sidebar-panel h2 {
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: var(--sl-text-xs);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
color: var(--flx-sidebar-heading);
|
||||
}
|
||||
|
||||
.right-sidebar-panel a {
|
||||
border-radius: var(--flx-radius);
|
||||
padding-block: 0.25rem;
|
||||
font-size: var(--sl-text-sm);
|
||||
line-height: 1.4;
|
||||
color: var(--flx-sidebar-text);
|
||||
}
|
||||
|
||||
.right-sidebar-panel a:hover {
|
||||
background-color: var(--flx-sidebar-hover-bg);
|
||||
color: var(--flx-sidebar-hover-text);
|
||||
}
|
||||
|
||||
.right-sidebar-panel a[aria-current='true'],
|
||||
.right-sidebar-panel a[aria-current='true']:hover {
|
||||
background-color: var(--flx-sidebar-hover-bg);
|
||||
color: var(--flx-sidebar-hover-text);
|
||||
}
|
||||
|
||||
footer .meta {
|
||||
margin-top: 2rem;
|
||||
font-size: var(--sl-text-sm);
|
||||
color: var(--flx-sidebar-text);
|
||||
}
|
||||
|
||||
mobile-starlight-toc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:root {
|
||||
--sl-mobile-toc-height: 0rem;
|
||||
}
|
||||
|
||||
@media (max-width: 87.49rem) {
|
||||
.right-sidebar-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-pane {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.main-pane {
|
||||
transition: width 240ms ease;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.main-pane {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
/* SPDX-License-Identifier: AGPL-3.0-or-later */
|
||||
|
||||
flx-route-header {
|
||||
display: block;
|
||||
margin: 0.25rem 0 0;
|
||||
}
|
||||
|
||||
flx-route-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
gap: 0;
|
||||
max-width: 100%;
|
||||
font-family: var(--__sl-font-mono);
|
||||
}
|
||||
|
||||
flx-route-line .route-method {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
margin: 0;
|
||||
border: 2px solid var(--flx-method-border);
|
||||
border-radius: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: var(--sl-text-sm);
|
||||
font-weight: 500;
|
||||
line-height: 1.25rem;
|
||||
text-transform: uppercase;
|
||||
background-color: var(--flx-method-bg);
|
||||
color: var(--flx-method-fg);
|
||||
}
|
||||
|
||||
flx-route-line .route-method[data-method='GET'] {
|
||||
--flx-method-bg: var(--flx-method-get-bg);
|
||||
--flx-method-border: var(--flx-method-get-border);
|
||||
--flx-method-fg: var(--flx-method-get-fg);
|
||||
}
|
||||
|
||||
flx-route-line .route-method[data-method='POST'] {
|
||||
--flx-method-bg: var(--flx-method-post-bg);
|
||||
--flx-method-border: var(--flx-method-post-border);
|
||||
--flx-method-fg: var(--flx-method-post-fg);
|
||||
}
|
||||
|
||||
flx-route-line .route-method[data-method='PATCH'] {
|
||||
--flx-method-bg: var(--flx-method-patch-bg);
|
||||
--flx-method-border: var(--flx-method-patch-border);
|
||||
--flx-method-fg: var(--flx-method-patch-fg);
|
||||
}
|
||||
|
||||
flx-route-line .route-method[data-method='PUT'] {
|
||||
--flx-method-bg: var(--flx-method-put-bg);
|
||||
--flx-method-border: var(--flx-method-put-border);
|
||||
--flx-method-fg: var(--flx-method-put-fg);
|
||||
}
|
||||
|
||||
flx-route-line .route-method[data-method='DELETE'] {
|
||||
--flx-method-bg: var(--flx-method-delete-bg);
|
||||
--flx-method-border: var(--flx-method-delete-border);
|
||||
--flx-method-fg: var(--flx-method-delete-fg);
|
||||
}
|
||||
|
||||
flx-route-line .route-method[data-method='HEAD'] {
|
||||
--flx-method-bg: var(--flx-method-head-bg);
|
||||
--flx-method-border: var(--flx-method-head-border);
|
||||
--flx-method-fg: var(--flx-method-head-fg);
|
||||
}
|
||||
|
||||
flx-route-line .route-path {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
font-size: var(--sl-text-base);
|
||||
line-height: 1.5rem;
|
||||
color: var(--flx-content-text);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
flx-route-line .route-path [data-param] {
|
||||
color: var(--flx-link);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
flx-route-capabilities {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.route-capability {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: var(--flx-radius-pill);
|
||||
padding: 0.125rem 0.625rem;
|
||||
font-family: var(--__sl-font-mono);
|
||||
font-size: var(--sl-text-xs);
|
||||
font-weight: 500;
|
||||
line-height: 1.6;
|
||||
background-color: var(--flx-badge-bg);
|
||||
color: var(--flx-badge-text);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
a.route-capability:hover {
|
||||
background-color: var(--flx-sidebar-hover-bg);
|
||||
color: var(--flx-sidebar-hover-text);
|
||||
}
|
||||
@@ -0,0 +1,239 @@
|
||||
/* SPDX-License-Identifier: AGPL-3.0-or-later */
|
||||
|
||||
:root {
|
||||
--sl-font: var(--fluxer-font-stack);
|
||||
--sl-font-mono: var(--fluxer-mono-stack);
|
||||
--saturation-factor: 1;
|
||||
|
||||
--sl-text-2xs: 0.6875rem;
|
||||
--sl-text-xs: 0.75rem;
|
||||
--sl-text-sm: 0.875rem;
|
||||
--sl-text-base: 1rem;
|
||||
--sl-text-lg: 1.125rem;
|
||||
--sl-text-xl: 1.25rem;
|
||||
--sl-text-2xl: 1.5rem;
|
||||
--sl-text-3xl: 1.875rem;
|
||||
--sl-text-4xl: 2.25rem;
|
||||
--sl-text-5xl: 3rem;
|
||||
--sl-text-6xl: 3.75rem;
|
||||
|
||||
--sl-text-body: var(--sl-text-base);
|
||||
--sl-text-body-sm: var(--sl-text-sm);
|
||||
--sl-text-code: var(--sl-text-sm);
|
||||
--sl-text-code-sm: var(--sl-text-sm);
|
||||
--sl-text-h1: var(--sl-text-4xl);
|
||||
--sl-text-h2: var(--sl-text-2xl);
|
||||
--sl-text-h3: var(--sl-text-xl);
|
||||
--sl-text-h4: var(--sl-text-lg);
|
||||
--sl-text-h5: var(--sl-text-base);
|
||||
--sl-text-h6: var(--sl-text-base);
|
||||
|
||||
--sl-line-height: 1.5;
|
||||
--sl-line-height-headings: 1.25;
|
||||
|
||||
--sl-nav-height: 4rem;
|
||||
--sl-nav-pad-x: 1rem;
|
||||
--sl-nav-pad-y: 0.5rem;
|
||||
--sl-mobile-toc-height: 3rem;
|
||||
--sl-sidebar-width: 20rem;
|
||||
--sl-sidebar-pad-x: 1.5rem;
|
||||
--sl-content-width: 72rem;
|
||||
--sl-content-pad-x: 1rem;
|
||||
--sl-content-gap-y: 1rem;
|
||||
--sl-main-pad: 0 0 3vh 0;
|
||||
|
||||
--flx-toc-width: 16rem;
|
||||
--flx-radius: 0.375rem;
|
||||
--flx-radius-lg: 0.5rem;
|
||||
--flx-radius-pill: 999px;
|
||||
|
||||
--flx-brand: hsl(242, calc(70% * var(--saturation-factor)), 55%);
|
||||
--flx-on-brand: hsl(0, 0%, 98%);
|
||||
|
||||
--flx-code-block-font-size: 0.875rem;
|
||||
--flx-code-inline-font-size: 0.9375em;
|
||||
}
|
||||
|
||||
:root {
|
||||
--flx-background-primary: hsl(258, calc(10% * var(--saturation-factor)), 5%);
|
||||
--flx-background-secondary: hsl(258, calc(10% * var(--saturation-factor)), 10.59%);
|
||||
--flx-background-secondary-lighter: hsl(258, calc(10% * var(--saturation-factor)), 12.44%);
|
||||
--flx-background-secondary-alt: hsl(258, calc(10% * var(--saturation-factor)), 14.15%);
|
||||
--flx-background-tertiary: hsl(258, calc(10% * var(--saturation-factor)), 17.16%);
|
||||
|
||||
--flx-text-primary: hsl(258, calc(10% * var(--saturation-factor)), 96%);
|
||||
--flx-text-secondary: hsl(258, calc(10% * var(--saturation-factor)), 90.36%);
|
||||
--flx-text-tertiary: hsl(258, calc(10% * var(--saturation-factor)), 70.4%);
|
||||
--flx-border-color: hsla(258, calc(10% * var(--saturation-factor)), 50%, 0.2);
|
||||
|
||||
--flx-link: hsl(198, calc(92% * var(--saturation-factor)), 70%);
|
||||
--flx-hover-bg: hsla(258, calc(10% * var(--saturation-factor)), 100%, 0.05);
|
||||
--flx-selected-bg: hsla(258, calc(10% * var(--saturation-factor)), 100%, 0.1);
|
||||
|
||||
--flx-code-bg: hsl(258, calc(10% * var(--saturation-factor)), 14.5%);
|
||||
--flx-code-fg: hsl(258, calc(10% * var(--saturation-factor)), 90.36%);
|
||||
--flx-code-chrome-bg: hsl(258, calc(10% * var(--saturation-factor)), 17.16%);
|
||||
--flx-code-border: hsl(258, calc(10% * var(--saturation-factor)), 24%);
|
||||
--flx-code-dots: hsl(258, calc(10% * var(--saturation-factor)), 34%);
|
||||
--flx-code-selection-bg: hsla(198, calc(92% * var(--saturation-factor)), 70%, 0.22);
|
||||
--flx-code-veil: hsla(258, calc(15% * var(--saturation-factor)), 100%, 0.09);
|
||||
--flx-code-text: hsl(340, calc(28% * var(--saturation-factor)), 86%);
|
||||
--flx-code-link: hsl(198, calc(92% * var(--saturation-factor)), 74%);
|
||||
|
||||
--flx-scrollbar-thumb: color-mix(
|
||||
in srgb,
|
||||
hsl(258, calc(10% * var(--saturation-factor)), 22.05%) 35%,
|
||||
hsl(258, calc(10% * var(--saturation-factor)), 70.4%) 65%
|
||||
);
|
||||
--flx-scrollbar-track: color-mix(in srgb, var(--flx-background-secondary) 80%, transparent);
|
||||
|
||||
--flx-accent-info: hsl(198, calc(92% * var(--saturation-factor)), 70%);
|
||||
--flx-accent-success: hsl(152, calc(72% * var(--saturation-factor)), 40%);
|
||||
--flx-accent-warning: hsl(45, calc(93% * var(--saturation-factor)), 50%);
|
||||
--flx-accent-danger: hsl(0, calc(84% * var(--saturation-factor)), 60%);
|
||||
--flx-accent-method-put: hsl(24, calc(90% * var(--saturation-factor)), 58%);
|
||||
--flx-accent-method-head: hsl(281, calc(78% * var(--saturation-factor)), 68%);
|
||||
--flx-tint-strength: 18%;
|
||||
--flx-tint-base: var(--flx-background-primary);
|
||||
}
|
||||
|
||||
:root[data-theme='light'] {
|
||||
--flx-background-primary: hsl(220, calc(10% * var(--saturation-factor)), 98.5%);
|
||||
--flx-background-secondary: hsl(220, calc(10% * var(--saturation-factor)), 92.84%);
|
||||
--flx-background-secondary-lighter: hsl(220, calc(10% * var(--saturation-factor)), 94.61%);
|
||||
--flx-background-secondary-alt: hsl(220, calc(10% * var(--saturation-factor)), 90.96%);
|
||||
--flx-background-tertiary: hsl(220, calc(10% * var(--saturation-factor)), 88.2%);
|
||||
|
||||
--flx-text-primary: hsl(220, calc(10% * var(--saturation-factor)), 15%);
|
||||
--flx-text-secondary: hsl(220, calc(10% * var(--saturation-factor)), 33.78%);
|
||||
--flx-text-tertiary: hsl(220, calc(10% * var(--saturation-factor)), 47.76%);
|
||||
--flx-border-color: hsla(220, calc(10% * var(--saturation-factor)), 40%, 0.15);
|
||||
|
||||
--flx-link: hsl(198, calc(92% * var(--saturation-factor)), 45%);
|
||||
--flx-hover-bg: hsla(220, calc(10% * var(--saturation-factor)), 10%, 0.05);
|
||||
--flx-selected-bg: hsla(220, calc(10% * var(--saturation-factor)), 10%, 0.1);
|
||||
|
||||
--flx-code-bg: hsl(220, calc(12% * var(--saturation-factor)), 97%);
|
||||
--flx-code-fg: hsl(220, calc(12% * var(--saturation-factor)), 22%);
|
||||
--flx-code-chrome-bg: hsl(220, calc(10% * var(--saturation-factor)), 92.84%);
|
||||
--flx-code-border: hsl(220, calc(12% * var(--saturation-factor)), 84%);
|
||||
--flx-code-dots: hsl(220, calc(10% * var(--saturation-factor)), 72%);
|
||||
--flx-code-selection-bg: hsla(198, calc(92% * var(--saturation-factor)), 45%, 0.18);
|
||||
--flx-code-veil: hsla(220, calc(20% * var(--saturation-factor)), 18%, 0.07);
|
||||
--flx-code-text: hsl(340, calc(26% * var(--saturation-factor)), 26%);
|
||||
--flx-code-link: hsl(198, calc(92% * var(--saturation-factor)), 27%);
|
||||
|
||||
--flx-scrollbar-thumb: color-mix(
|
||||
in srgb,
|
||||
hsl(220, calc(10% * var(--saturation-factor)), 86.5%) 40%,
|
||||
hsl(220, calc(10% * var(--saturation-factor)), 33.78%) 60%
|
||||
);
|
||||
--flx-scrollbar-track: color-mix(in srgb, var(--flx-background-secondary) 50%, transparent);
|
||||
|
||||
--flx-accent-info: hsl(198, calc(92% * var(--saturation-factor)), 45%);
|
||||
--flx-accent-success: hsl(152, calc(70% * var(--saturation-factor)), 40%);
|
||||
--flx-accent-warning: hsl(45, calc(90% * var(--saturation-factor)), 45%);
|
||||
--flx-accent-danger: hsl(359, calc(70% * var(--saturation-factor)), 50%);
|
||||
|
||||
--flx-aside-note-text: hsl(198, calc(92% * var(--saturation-factor)), 27%);
|
||||
--flx-aside-tip-text: hsl(152, calc(70% * var(--saturation-factor)), 23%);
|
||||
--flx-aside-caution-text: hsl(45, calc(90% * var(--saturation-factor)), 23%);
|
||||
--flx-aside-danger-text: hsl(359, calc(70% * var(--saturation-factor)), 38%);
|
||||
--flx-aside-note-border: var(--flx-aside-note-text);
|
||||
--flx-aside-tip-border: var(--flx-aside-tip-text);
|
||||
--flx-aside-caution-border: var(--flx-aside-caution-text);
|
||||
--flx-aside-danger-border: var(--flx-aside-danger-text);
|
||||
--flx-accent-method-put: hsl(24, calc(85% * var(--saturation-factor)), 42%);
|
||||
--flx-accent-method-head: hsl(281, calc(70% * var(--saturation-factor)), 48%);
|
||||
--flx-tint-strength: 12%;
|
||||
--flx-tint-base: var(--flx-background-primary);
|
||||
}
|
||||
|
||||
:root {
|
||||
--sl-color-white: var(--flx-text-primary);
|
||||
--sl-color-gray-1: var(--flx-text-primary);
|
||||
--sl-color-gray-2: var(--flx-text-secondary);
|
||||
--sl-color-gray-3: var(--flx-text-tertiary);
|
||||
--sl-color-gray-4: var(--flx-text-tertiary);
|
||||
--sl-color-gray-5: var(--flx-border-color);
|
||||
--sl-color-gray-6: var(--flx-background-secondary);
|
||||
--sl-color-gray-7: var(--flx-background-secondary-lighter);
|
||||
--sl-color-black: var(--flx-background-primary);
|
||||
|
||||
--sl-color-accent-low: var(--flx-selected-bg);
|
||||
--sl-color-accent: var(--flx-brand);
|
||||
--sl-color-accent-high: var(--flx-link);
|
||||
|
||||
--sl-color-text: var(--flx-text-secondary);
|
||||
--sl-color-text-accent: var(--flx-link);
|
||||
--sl-color-text-invert: var(--flx-on-brand);
|
||||
--sl-color-bg: var(--flx-background-primary);
|
||||
--sl-color-bg-nav: var(--flx-background-secondary);
|
||||
--sl-color-bg-sidebar: var(--flx-background-secondary);
|
||||
--sl-color-bg-inline-code: var(--flx-code-bg);
|
||||
--sl-color-bg-accent: var(--flx-brand);
|
||||
--sl-color-hairline-light: var(--flx-border-color);
|
||||
--sl-color-hairline: var(--flx-border-color);
|
||||
--sl-color-hairline-shade: var(--flx-border-color);
|
||||
--sl-color-backdrop-overlay: color-mix(in srgb, var(--flx-background-primary) 66%, transparent);
|
||||
|
||||
--flx-content-heading: var(--flx-text-primary);
|
||||
--flx-content-text: var(--flx-text-secondary);
|
||||
|
||||
--flx-sidebar-text: var(--flx-text-tertiary);
|
||||
--flx-sidebar-heading: var(--flx-text-primary);
|
||||
--flx-sidebar-hover-bg: var(--flx-hover-bg);
|
||||
--flx-sidebar-hover-text: var(--flx-text-primary);
|
||||
--flx-sidebar-field-bg: var(--flx-background-primary);
|
||||
--flx-sidebar-field-border: var(--flx-border-color);
|
||||
|
||||
--flx-inline-code-bg: var(--flx-code-veil);
|
||||
--flx-inline-code-text: var(--flx-code-text);
|
||||
--flx-inline-code-link: var(--flx-code-link);
|
||||
|
||||
--flx-table-head-bg: var(--flx-background-tertiary);
|
||||
--flx-table-head-border: var(--flx-border-color);
|
||||
--flx-table-row-bg: var(--flx-background-secondary);
|
||||
--flx-table-row-alt-bg: var(--flx-background-secondary-lighter);
|
||||
--flx-table-text: var(--flx-text-secondary);
|
||||
|
||||
--flx-badge-bg: var(--flx-background-secondary-alt);
|
||||
--flx-badge-text: var(--flx-text-secondary);
|
||||
--flx-collapsible-bg: var(--flx-background-secondary);
|
||||
|
||||
--flx-aside-note-border: var(--flx-accent-info);
|
||||
--flx-aside-note-bg: color-mix(in srgb, var(--flx-accent-info) var(--flx-tint-strength), var(--flx-tint-base));
|
||||
--flx-aside-note-text: hsl(198, calc(92% * var(--saturation-factor)), 70%);
|
||||
--flx-aside-tip-border: var(--flx-accent-success);
|
||||
--flx-aside-tip-bg: color-mix(in srgb, var(--flx-accent-success) var(--flx-tint-strength), var(--flx-tint-base));
|
||||
--flx-aside-tip-text: hsl(152, calc(72% * var(--saturation-factor)), 42%);
|
||||
--flx-aside-caution-border: var(--flx-accent-warning);
|
||||
--flx-aside-caution-bg: color-mix(in srgb, var(--flx-accent-warning) var(--flx-tint-strength), var(--flx-tint-base));
|
||||
--flx-aside-caution-text: hsl(45, calc(93% * var(--saturation-factor)), 50%);
|
||||
--flx-aside-danger-border: var(--flx-accent-danger);
|
||||
--flx-aside-danger-bg: color-mix(in srgb, var(--flx-accent-danger) var(--flx-tint-strength), var(--flx-tint-base));
|
||||
--flx-aside-danger-text: hsl(0, calc(84% * var(--saturation-factor)), 71%);
|
||||
|
||||
--flx-method-get-border: var(--flx-accent-info);
|
||||
--flx-method-get-bg: color-mix(in srgb, var(--flx-accent-info) var(--flx-tint-strength), var(--flx-tint-base));
|
||||
--flx-method-get-fg: var(--flx-text-primary);
|
||||
--flx-method-post-border: var(--flx-accent-success);
|
||||
--flx-method-post-bg: color-mix(in srgb, var(--flx-accent-success) var(--flx-tint-strength), var(--flx-tint-base));
|
||||
--flx-method-post-fg: var(--flx-text-primary);
|
||||
--flx-method-patch-border: var(--flx-accent-warning);
|
||||
--flx-method-patch-bg: color-mix(in srgb, var(--flx-accent-warning) var(--flx-tint-strength), var(--flx-tint-base));
|
||||
--flx-method-patch-fg: var(--flx-text-primary);
|
||||
--flx-method-put-border: var(--flx-accent-method-put);
|
||||
--flx-method-put-bg: color-mix(in srgb, var(--flx-accent-method-put) var(--flx-tint-strength), var(--flx-tint-base));
|
||||
--flx-method-put-fg: var(--flx-text-primary);
|
||||
--flx-method-delete-border: var(--flx-accent-danger);
|
||||
--flx-method-delete-bg: color-mix(in srgb, var(--flx-accent-danger) var(--flx-tint-strength), var(--flx-tint-base));
|
||||
--flx-method-delete-fg: var(--flx-text-primary);
|
||||
--flx-method-head-border: var(--flx-accent-method-head);
|
||||
--flx-method-head-bg: color-mix(
|
||||
in srgb,
|
||||
var(--flx-accent-method-head) var(--flx-tint-strength),
|
||||
var(--flx-tint-base)
|
||||
);
|
||||
--flx-method-head-fg: var(--flx-text-primary);
|
||||
}
|
||||
Reference in new issue
Block a user