mirror of https://github.com/docker/docs.git
css: refactor and improve styles
- Refactoring styles to prevent unwanted specificity issues by using tailwind directives - Improve color consistency for code blocks and other components by replacing adhoc hex values with theme colors Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
This commit is contained in:
David Karlsson
parent
25a464935e
commit
834db3da41
|
|
@ -5,46 +5,48 @@
|
|||
*
|
||||
* */
|
||||
|
||||
.prose blockquote {
|
||||
@apply bg-blue-light-100 py-4 px-6 font-normal not-italic dark:bg-blue-dark-100;
|
||||
quotes: none;
|
||||
> *:first-child {
|
||||
@apply relative ml-6 mt-0 before:absolute before:-left-6 before:font-icons before:content-['info'];
|
||||
}
|
||||
*:last-child {
|
||||
@apply mb-0 after:content-none;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
@apply border-l-red-light bg-red-light-100 dark:border-l-red-dark dark:bg-red-dark-100;
|
||||
@layer components {
|
||||
.prose blockquote {
|
||||
@apply bg-blue-light-100 px-6 py-4 font-normal not-italic dark:bg-blue-dark-100;
|
||||
quotes: none;
|
||||
> *:first-child {
|
||||
@apply before:content-['dangerous'];
|
||||
@apply relative ml-6 mt-0 before:absolute before:-left-6 before:font-icons before:content-['info'];
|
||||
}
|
||||
}
|
||||
|
||||
&.important {
|
||||
@apply border-l-amber-light bg-amber-light-100 dark:border-l-amber-dark dark:bg-amber-dark-100;
|
||||
> *:first-child {
|
||||
@apply before:content-['warning'];
|
||||
*:last-child {
|
||||
@apply mb-0 after:content-none;
|
||||
}
|
||||
}
|
||||
|
||||
&.tip {
|
||||
@apply border-l-green-light bg-green-light-100 dark:border-l-green-dark dark:bg-green-dark-100;
|
||||
> *:first-child {
|
||||
@apply before:content-['lightbulb'];
|
||||
&.warning {
|
||||
@apply border-l-red-light bg-red-light-100 dark:border-l-red-dark dark:bg-red-dark-100;
|
||||
> *:first-child {
|
||||
@apply before:content-['dangerous'];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.experimental {
|
||||
> *:first-child {
|
||||
@apply before:content-['science'];
|
||||
&.important {
|
||||
@apply border-l-amber-light bg-amber-light-100 dark:border-l-amber-dark dark:bg-amber-dark-100;
|
||||
> *:first-child {
|
||||
@apply before:content-['warning'];
|
||||
}
|
||||
}
|
||||
}
|
||||
&.restricted {
|
||||
@apply border-l-violet-light bg-violet-light-100 dark:border-l-violet-dark dark:bg-violet-dark-100;
|
||||
> *:first-child {
|
||||
@apply before:content-['rocket\_launch'];
|
||||
|
||||
&.tip {
|
||||
@apply border-l-green-light bg-green-light-100 dark:border-l-green-dark dark:bg-green-dark-100;
|
||||
> *:first-child {
|
||||
@apply before:content-['lightbulb'];
|
||||
}
|
||||
}
|
||||
|
||||
&.experimental {
|
||||
> *:first-child {
|
||||
@apply before:content-['science'];
|
||||
}
|
||||
}
|
||||
&.restricted {
|
||||
@apply border-l-violet-light bg-violet-light-100 dark:border-l-violet-dark dark:bg-violet-dark-100;
|
||||
> *:first-child {
|
||||
@apply before:content-['rocket\_launch'];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,721 +1,48 @@
|
|||
.highlight, :not(pre) > code {
|
||||
font-size: .875em;
|
||||
border: 1px solid;
|
||||
border-radius: theme("spacing.1");
|
||||
border-color: theme("colors.gray.light.300");
|
||||
.dark & {
|
||||
background: theme("colors.gray.dark.200");
|
||||
border-color: theme("colors.gray.dark.300");
|
||||
@layer components {
|
||||
.highlight,
|
||||
:not(pre) > code {
|
||||
font-size: 0.875em;
|
||||
border: 1px solid;
|
||||
border-radius: theme("spacing.1");
|
||||
background: theme("colors.white");
|
||||
border-color: theme("colors.gray.light.300");
|
||||
.dark & {
|
||||
background: theme("colors.gray.dark.200");
|
||||
border-color: theme("colors.gray.dark.300");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
@apply p-3 my-4 overflow-x-auto;
|
||||
background: theme("colors.white");
|
||||
}
|
||||
|
||||
:not(pre) > code {
|
||||
background: theme("colors.gray.light.200");
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
font-weight: 400;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
/* LineTableTD */
|
||||
.lntd {
|
||||
vertical-align: top;
|
||||
padding: 0;
|
||||
:not(pre) > code {
|
||||
background: theme("colors.gray.light.200");
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
/* LineTable */
|
||||
.lntable {
|
||||
display: table;
|
||||
width: 100%;
|
||||
border-spacing: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
/* LineNumberColumnHighlight */
|
||||
.lntd:first-child .hl {
|
||||
display: block;
|
||||
}
|
||||
white-space: nowrap;
|
||||
font-weight: 400;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
/* LightTheme */
|
||||
.light & {
|
||||
/* Other */
|
||||
.x {
|
||||
color: #000000;
|
||||
}
|
||||
/* Error */
|
||||
.err {
|
||||
color: #a40000;
|
||||
}
|
||||
/* CodeLine */
|
||||
.cl {
|
||||
}
|
||||
/* LineHighlight */
|
||||
.hl {
|
||||
background-color: #e5f2fc;
|
||||
}
|
||||
.lntd:first-child .hl,
|
||||
& > .chroma > code > .hl {
|
||||
margin-left: -4px;
|
||||
border-left: 4px solid #c0e0fa;
|
||||
}
|
||||
/* LineNumbersTable */
|
||||
.lnt {
|
||||
white-space: pre;
|
||||
user-select: none;
|
||||
margin-right: 0.4em;
|
||||
padding: 0 0.4em 0 0.4em;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
/* LineNumbers */
|
||||
.ln {
|
||||
white-space: pre;
|
||||
user-select: none;
|
||||
margin-right: 0.4em;
|
||||
padding: 0 0.4em 0 0.4em;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
/* Line */
|
||||
.line {
|
||||
display: flex;
|
||||
}
|
||||
/* Keyword */
|
||||
.k {
|
||||
color: #204a87;
|
||||
}
|
||||
/* KeywordConstant */
|
||||
.kc {
|
||||
color: #204a87;
|
||||
}
|
||||
/* KeywordDeclaration */
|
||||
.kd {
|
||||
color: #204a87;
|
||||
}
|
||||
/* KeywordNamespace */
|
||||
.kn {
|
||||
color: #204a87;
|
||||
}
|
||||
/* KeywordPseudo */
|
||||
.kp {
|
||||
color: #204a87;
|
||||
}
|
||||
/* KeywordReserved */
|
||||
.kr {
|
||||
color: #204a87;
|
||||
}
|
||||
/* KeywordType */
|
||||
.kt {
|
||||
color: #204a87;
|
||||
}
|
||||
/* Name */
|
||||
.n {
|
||||
color: #000000;
|
||||
}
|
||||
/* NameAttribute */
|
||||
.na {
|
||||
color: #c4a000;
|
||||
}
|
||||
/* NameBuiltin */
|
||||
.nb {
|
||||
color: #204a87;
|
||||
}
|
||||
/* NameBuiltinPseudo */
|
||||
.bp {
|
||||
color: #3465a4;
|
||||
}
|
||||
/* NameClass */
|
||||
.nc {
|
||||
color: #000000;
|
||||
}
|
||||
/* NameConstant */
|
||||
.no {
|
||||
color: #000000;
|
||||
}
|
||||
/* NameDecorator */
|
||||
.nd {
|
||||
color: #5c35cc;
|
||||
}
|
||||
/* NameEntity */
|
||||
.ni {
|
||||
color: #ce5c00;
|
||||
}
|
||||
/* NameException */
|
||||
.ne {
|
||||
color: #cc0000;
|
||||
}
|
||||
/* NameFunction */
|
||||
.nf {
|
||||
color: #000000;
|
||||
}
|
||||
/* NameFunctionMagic */
|
||||
.fm {
|
||||
color: #000000;
|
||||
}
|
||||
/* NameLabel */
|
||||
.nl {
|
||||
color: #f57900;
|
||||
}
|
||||
/* NameNamespace */
|
||||
.nn {
|
||||
color: #000000;
|
||||
}
|
||||
/* NameOther */
|
||||
.nx {
|
||||
color: #000000;
|
||||
}
|
||||
/* NameProperty */
|
||||
.py {
|
||||
color: #000000;
|
||||
}
|
||||
/* NameTag */
|
||||
.nt {
|
||||
color: #204a87;
|
||||
}
|
||||
/* NameVariable */
|
||||
.nv {
|
||||
color: #5f25a0;
|
||||
}
|
||||
/* NameVariableClass */
|
||||
.vc {
|
||||
color: #000000;
|
||||
}
|
||||
/* NameVariableGlobal */
|
||||
.vg {
|
||||
color: #000000;
|
||||
}
|
||||
/* NameVariableInstance */
|
||||
.vi {
|
||||
color: #000000;
|
||||
}
|
||||
/* NameVariableMagic */
|
||||
.vm {
|
||||
color: #000000;
|
||||
}
|
||||
/* Literal */
|
||||
.l {
|
||||
color: #000000;
|
||||
}
|
||||
/* LiteralDate */
|
||||
.ld {
|
||||
color: #000000;
|
||||
}
|
||||
/* LiteralString */
|
||||
.s {
|
||||
color: #4e9a06;
|
||||
}
|
||||
/* LiteralStringAffix */
|
||||
.sa {
|
||||
color: #4e9a06;
|
||||
}
|
||||
/* LiteralStringBacktick */
|
||||
.sb {
|
||||
color: #4e9a06;
|
||||
}
|
||||
/* LiteralStringChar */
|
||||
.sc {
|
||||
color: #4e9a06;
|
||||
}
|
||||
/* LiteralStringDelimiter */
|
||||
.dl {
|
||||
color: #4e9a06;
|
||||
}
|
||||
/* LiteralStringDoc */
|
||||
.sd {
|
||||
color: #8f5902;
|
||||
}
|
||||
/* LiteralStringDouble */
|
||||
.s2 {
|
||||
color: #4e9a06;
|
||||
}
|
||||
/* LiteralStringEscape */
|
||||
.se {
|
||||
color: #000;
|
||||
}
|
||||
/* LiteralStringHeredoc */
|
||||
.sh {
|
||||
color: #4e9a06;
|
||||
}
|
||||
/* LiteralStringInterpol */
|
||||
.si {
|
||||
color: #4e9a06;
|
||||
}
|
||||
/* LiteralStringOther */
|
||||
.sx {
|
||||
color: #4e9a06;
|
||||
}
|
||||
/* LiteralStringRegex */
|
||||
.sr {
|
||||
color: #4e9a06;
|
||||
}
|
||||
/* LiteralStringSingle */
|
||||
.s1 {
|
||||
color: #4e9a06;
|
||||
}
|
||||
/* LiteralStringSymbol */
|
||||
.ss {
|
||||
color: #4e9a06;
|
||||
}
|
||||
/* LiteralNumber */
|
||||
.m {
|
||||
color: #0000cf;
|
||||
}
|
||||
/* LiteralNumberBin */
|
||||
.mb {
|
||||
color: #0000cf;
|
||||
}
|
||||
/* LiteralNumberFloat */
|
||||
.mf {
|
||||
color: #0000cf;
|
||||
}
|
||||
/* LiteralNumberHex */
|
||||
.mh {
|
||||
color: #0000cf;
|
||||
}
|
||||
/* LiteralNumberInteger */
|
||||
.mi {
|
||||
color: #0000cf;
|
||||
}
|
||||
/* LiteralNumberIntegerLong */
|
||||
.il {
|
||||
color: #0000cf;
|
||||
}
|
||||
/* LiteralNumberOct */
|
||||
.mo {
|
||||
color: #0000cf;
|
||||
}
|
||||
/* Operator */
|
||||
.o {
|
||||
color: #ce5c00;
|
||||
}
|
||||
/* OperatorWord */
|
||||
.ow {
|
||||
color: #204a87;
|
||||
}
|
||||
/* Punctuation */
|
||||
.p {
|
||||
color: #000000;
|
||||
}
|
||||
/* Comment */
|
||||
.c {
|
||||
color: #8f5902;
|
||||
}
|
||||
/* CommentHashbang */
|
||||
.ch {
|
||||
color: #8f5902;
|
||||
}
|
||||
/* CommentMultiline */
|
||||
.cm {
|
||||
color: #8f5902;
|
||||
}
|
||||
/* CommentSingle */
|
||||
.c1 {
|
||||
color: #8f5902;
|
||||
}
|
||||
/* CommentSpecial */
|
||||
.cs {
|
||||
color: #8f5902;
|
||||
}
|
||||
/* CommentPreproc */
|
||||
.cp {
|
||||
color: #8f5902;
|
||||
}
|
||||
/* CommentPreprocFile */
|
||||
.cpf {
|
||||
color: #8f5902;
|
||||
}
|
||||
/* Generic */
|
||||
.g {
|
||||
color: #000000;
|
||||
}
|
||||
/* GenericDeleted */
|
||||
.gd {
|
||||
color: #a40000;
|
||||
}
|
||||
/* GenericEmph */
|
||||
.ge {
|
||||
color: #000000;
|
||||
}
|
||||
/* GenericError */
|
||||
.gr {
|
||||
color: #ef2929;
|
||||
}
|
||||
/* GenericHeading */
|
||||
.gh {
|
||||
color: #000080;
|
||||
}
|
||||
/* GenericInserted */
|
||||
.gi {
|
||||
color: #00a000;
|
||||
}
|
||||
/* GenericOutput */
|
||||
.go {
|
||||
color: #000000;
|
||||
}
|
||||
/* GenericPrompt */
|
||||
.gp {
|
||||
user-select: none;
|
||||
color: #8f5902;
|
||||
}
|
||||
/* GenericStrong */
|
||||
.gs {
|
||||
color: #000000;
|
||||
}
|
||||
/* GenericSubheading */
|
||||
.gu {
|
||||
color: #800080;
|
||||
}
|
||||
/* GenericTraceback */
|
||||
.gt {
|
||||
color: #a40000;
|
||||
}
|
||||
/* GenericUnderline */
|
||||
.gl {
|
||||
color: #000000;
|
||||
text-decoration: underline;
|
||||
}
|
||||
/* TextWhitespace */
|
||||
.w {
|
||||
color: var(--gray-100);
|
||||
}
|
||||
}
|
||||
.highlight {
|
||||
@apply my-4 overflow-x-auto p-3;
|
||||
|
||||
.dark & {
|
||||
/* Other */
|
||||
.x {
|
||||
}
|
||||
/* Error */
|
||||
.err {
|
||||
}
|
||||
/* CodeLine */
|
||||
.cl {
|
||||
}
|
||||
/* LineHighlight */
|
||||
.hl {
|
||||
background-color: theme('colors.gray.dark.300');
|
||||
}
|
||||
.lntd:first-child .hl,
|
||||
& > .chroma > code > .hl {
|
||||
margin-left: -4px;
|
||||
border-left: 4px solid theme('colors.gray.dark.400');
|
||||
}
|
||||
/* LineNumbersTable */
|
||||
.lnt {
|
||||
white-space: pre;
|
||||
user-select: none;
|
||||
margin-right: 0.4em;
|
||||
padding: 0 0.4em 0 0.4em;
|
||||
color: #58626f;
|
||||
}
|
||||
/* LineNumbers */
|
||||
.ln {
|
||||
white-space: pre;
|
||||
user-select: none;
|
||||
margin-right: 0.4em;
|
||||
padding: 0 0.4em 0 0.4em;
|
||||
color: #58626f;
|
||||
}
|
||||
/* Line */
|
||||
.line {
|
||||
display: flex;
|
||||
}
|
||||
/* Keyword */
|
||||
.k {
|
||||
color: #76a9f9;
|
||||
}
|
||||
/* KeywordConstant */
|
||||
.kc {
|
||||
color: #e5c07b;
|
||||
}
|
||||
/* KeywordDeclaration */
|
||||
.kd {
|
||||
color: #76a9f9;
|
||||
}
|
||||
/* KeywordNamespace */
|
||||
.kn {
|
||||
color: #76a9f9;
|
||||
}
|
||||
/* KeywordPseudo */
|
||||
.kp {
|
||||
color: #76a9f9;
|
||||
}
|
||||
/* KeywordReserved */
|
||||
.kr {
|
||||
color: #76a9f9;
|
||||
}
|
||||
/* KeywordType */
|
||||
.kt {
|
||||
color: #e5c07b;
|
||||
}
|
||||
/* Name */
|
||||
.n {
|
||||
color: #aa89ea;
|
||||
}
|
||||
/* NameAttribute */
|
||||
.na {
|
||||
color: #cebc3a;
|
||||
}
|
||||
/* NameBuiltin */
|
||||
.nb {
|
||||
color: #e5c07b;
|
||||
}
|
||||
/* NameBuiltinPseudo */
|
||||
.bp {
|
||||
color: #aa89ea;
|
||||
}
|
||||
/* NameClass */
|
||||
.nc {
|
||||
color: #ca72ff;
|
||||
}
|
||||
/* NameConstant */
|
||||
.no {
|
||||
color: #aa89ea;
|
||||
}
|
||||
/* NameDecorator */
|
||||
.nd {
|
||||
color: #e5c07b;
|
||||
}
|
||||
/* NameEntity */
|
||||
.ni {
|
||||
color: #bda26f;
|
||||
}
|
||||
/* NameException */
|
||||
.ne {
|
||||
color: #fd7474;
|
||||
}
|
||||
/* NameFunction */
|
||||
.nf {
|
||||
color: #00b1f7;
|
||||
}
|
||||
/* NameFunctionMagic */
|
||||
.fm {
|
||||
color: #aa89ea;
|
||||
}
|
||||
/* NameLabel */
|
||||
.nl {
|
||||
color: #f5a40d;
|
||||
}
|
||||
/* NameNamespace */
|
||||
.nn {
|
||||
color: #ca72ff;
|
||||
}
|
||||
/* NameOther */
|
||||
.nx {
|
||||
color: #ffffff;
|
||||
}
|
||||
/* NameProperty */
|
||||
.py {
|
||||
color: #cebc3a;
|
||||
}
|
||||
/* NameTag */
|
||||
.nt {
|
||||
color: #76a9f9;
|
||||
}
|
||||
/* NameVariable */
|
||||
.nv {
|
||||
color: #dcaeea;
|
||||
}
|
||||
/* NameVariableClass */
|
||||
.vc {
|
||||
color: #dcaeea;
|
||||
}
|
||||
/* NameVariableGlobal */
|
||||
.vg {
|
||||
color: #dcaeea;
|
||||
}
|
||||
/* NameVariableInstance */
|
||||
.vi {
|
||||
color: #e06c75;
|
||||
}
|
||||
/* NameVariableMagic */
|
||||
.vm {
|
||||
color: #dcaeea;
|
||||
}
|
||||
/* Literal */
|
||||
.l {
|
||||
color: #98c379;
|
||||
}
|
||||
/* LiteralDate */
|
||||
.ld {
|
||||
color: #98c379;
|
||||
}
|
||||
/* LiteralString */
|
||||
.s {
|
||||
color: #98c379;
|
||||
}
|
||||
/* LiteralStringAffix */
|
||||
.sa {
|
||||
color: #98c379;
|
||||
}
|
||||
/* LiteralStringBacktick */
|
||||
.sb {
|
||||
color: #98c379;
|
||||
}
|
||||
/* LiteralStringChar */
|
||||
.sc {
|
||||
color: #98c379;
|
||||
}
|
||||
/* LiteralStringDelimiter */
|
||||
.dl {
|
||||
color: #98c379;
|
||||
}
|
||||
/* LiteralStringDoc */
|
||||
.sd {
|
||||
color: #7e97c3;
|
||||
}
|
||||
/* LiteralStringDouble */
|
||||
.s2 {
|
||||
color: #63c381;
|
||||
}
|
||||
/* LiteralStringEscape */
|
||||
.se {
|
||||
color: #fff;
|
||||
}
|
||||
/* LiteralStringHeredoc */
|
||||
.sh {
|
||||
color: #98c379;
|
||||
}
|
||||
/* LiteralStringInterpol */
|
||||
.si {
|
||||
color: #98c379;
|
||||
}
|
||||
/* LiteralStringOther */
|
||||
.sx {
|
||||
color: #70b33f;
|
||||
}
|
||||
/* LiteralStringRegex */
|
||||
.sr {
|
||||
color: #56b6c2;
|
||||
}
|
||||
/* LiteralStringSingle */
|
||||
.s1 {
|
||||
color: #98c379;
|
||||
}
|
||||
/* LiteralStringSymbol */
|
||||
.ss {
|
||||
color: #56b6c2;
|
||||
}
|
||||
/* LiteralNumber */
|
||||
.m {
|
||||
color: #d19a66;
|
||||
}
|
||||
/* LiteralNumberBin */
|
||||
.mb {
|
||||
color: #d19a66;
|
||||
}
|
||||
/* LiteralNumberFloat */
|
||||
.mf {
|
||||
color: #d19a66;
|
||||
}
|
||||
/* LiteralNumberHex */
|
||||
.mh {
|
||||
color: #d19a66;
|
||||
}
|
||||
/* LiteralNumberInteger */
|
||||
.mi {
|
||||
color: #d19a66;
|
||||
}
|
||||
/* LiteralNumberIntegerLong */
|
||||
.il {
|
||||
color: #d19a66;
|
||||
}
|
||||
/* LiteralNumberOct */
|
||||
.mo {
|
||||
color: #d19a66;
|
||||
}
|
||||
/* Operator */
|
||||
.o {
|
||||
color: #54b1c7;
|
||||
}
|
||||
/* OperatorWord */
|
||||
.ow {
|
||||
color: #b756ff;
|
||||
}
|
||||
/* Punctuation */
|
||||
.p {
|
||||
color: #abb2bf;
|
||||
}
|
||||
/* Comment */
|
||||
.c {
|
||||
color: #8a93a5;
|
||||
}
|
||||
/* CommentHashbang */
|
||||
.ch {
|
||||
color: #8a93a5;
|
||||
}
|
||||
/* CommentMultiline */
|
||||
.cm {
|
||||
color: #8a93a5;
|
||||
}
|
||||
/* CommentSingle */
|
||||
.c1 {
|
||||
color: #8a93a5;
|
||||
}
|
||||
/* CommentSpecial */
|
||||
.cs {
|
||||
color: #8a93a5;
|
||||
}
|
||||
/* CommentPreproc */
|
||||
.cp {
|
||||
color: #8a93a5;
|
||||
}
|
||||
/* CommentPreprocFile */
|
||||
.cpf {
|
||||
color: #8a93a5;
|
||||
}
|
||||
/* Generic */
|
||||
.g {
|
||||
}
|
||||
/* GenericDeleted */
|
||||
.gd {
|
||||
color: #dd4659;
|
||||
}
|
||||
/* GenericEmph */
|
||||
.ge {
|
||||
}
|
||||
/* GenericError */
|
||||
.gr {
|
||||
}
|
||||
/* GenericHeading */
|
||||
.gh {
|
||||
color: #a2cbff;
|
||||
}
|
||||
/* GenericInserted */
|
||||
.gi {
|
||||
color: #a6e22e;
|
||||
}
|
||||
/* GenericOutput */
|
||||
.go {
|
||||
color: #fff;
|
||||
}
|
||||
/* GenericPrompt */
|
||||
.gp {
|
||||
color: #a6e22e;
|
||||
}
|
||||
/* GenericStrong */
|
||||
.gs {
|
||||
}
|
||||
/* GenericSubheading */
|
||||
.gu {
|
||||
color: #a2cbff;
|
||||
}
|
||||
/* GenericTraceback */
|
||||
.gt {
|
||||
color: #a2cbff;
|
||||
}
|
||||
/* GenericUnderline */
|
||||
.gl {
|
||||
text-decoration: underline;
|
||||
}
|
||||
/* TextWhitespace */
|
||||
.w {
|
||||
/* LineTableTD */
|
||||
.lntd {
|
||||
vertical-align: top;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
/* LineTable */
|
||||
.lntable {
|
||||
display: table;
|
||||
width: 100%;
|
||||
border-spacing: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
/* LineNumberColumnHighlight */
|
||||
.lntd:first-child .hl {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
/* global styles */
|
||||
|
||||
@layer base {
|
||||
[x-cloak] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:root {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
|
||||
/* utility classes */
|
||||
|
||||
@layer utilities {
|
||||
.link {
|
||||
@apply text-blue-light underline underline-offset-2 dark:text-blue-dark;
|
||||
}
|
||||
|
||||
.invertible {
|
||||
@apply dark:hue-rotate-180 dark:invert dark:filter;
|
||||
}
|
||||
|
||||
.sidebar-hover {
|
||||
@apply hover:bg-gray-light-200 hover:dark:bg-gray-dark-200;
|
||||
}
|
||||
|
||||
.sidebar-underline {
|
||||
@apply underline decoration-blue-light decoration-4 underline-offset-4 dark:decoration-blue-dark;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,16 +1,16 @@
|
|||
/*! @docsearch/css 3.3.0 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */
|
||||
:root {
|
||||
--docsearch-primary-color: #5468ff;
|
||||
--docsearch-primary-color: theme("colors.blue.light.500");
|
||||
--docsearch-text-color: #1c1e21;
|
||||
--docsearch-spacing: 12px;
|
||||
--docsearch-icon-stroke-width: 1.4;
|
||||
--docsearch-highlight-color: var(--docsearch-primary-color);
|
||||
--docsearch-muted-color: #969faf;
|
||||
--docsearch-container-background: rgba(101, 108, 133, 0.8);
|
||||
--docsearch-muted-color: theme("colors.blue.light.500");
|
||||
--docsearch-container-background: theme("colors.white/0.5");
|
||||
--docsearch-logo-color: #5468ff;
|
||||
--docsearch-modal-width: 560px;
|
||||
--docsearch-modal-height: 600px;
|
||||
--docsearch-modal-background: #f5f6f7;
|
||||
--docsearch-modal-background: theme("colors.background.light");
|
||||
--docsearch-modal-shadow: inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.5),
|
||||
0 3px 8px 0 #555a64;
|
||||
--docsearch-searchbox-height: 56px;
|
||||
|
|
@ -19,35 +19,30 @@
|
|||
--docsearch-searchbox-background: theme(colors.white);
|
||||
--docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
|
||||
--docsearch-hit-height: 56px;
|
||||
--docsearch-hit-color: #444950;
|
||||
--docsearch-hit-active-color: #fff;
|
||||
--docsearch-hit-background: #fff;
|
||||
--docsearch-hit-color: theme("colors.black");
|
||||
--docsearch-hit-active-color: theme("colors.white");
|
||||
--docsearch-hit-background: theme("colors.white");
|
||||
--docsearch-hit-shadow: 0 1px 3px 0 #d4d9e1;
|
||||
--docsearch-key-gradient: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
|
||||
--docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff,
|
||||
0 1px 2px 1px rgba(30, 35, 90, 0.4);
|
||||
--docsearch-key-color: theme("colors.blue.light.100");
|
||||
--docsearch-footer-height: 44px;
|
||||
--docsearch-footer-background: #fff;
|
||||
--docsearch-footer-shadow: 0 -1px 0 0 #e0e3e8,
|
||||
0 -3px 6px 0 rgba(69, 98, 155, 0.12);
|
||||
--docsearch-footer-background: theme("colors.white");
|
||||
--docsearch-footer-border: 1px solid theme("colors.divider.light");
|
||||
}
|
||||
html.dark {
|
||||
--docsearch-primary-color: theme("colors.blue.dark.400");
|
||||
--docsearch-text-color: #f5f6f7;
|
||||
--docsearch-container-background: rgba(9, 10, 17, 0.8);
|
||||
--docsearch-modal-background: #15172a;
|
||||
--docsearch-container-background: theme("colors.black/0.5");
|
||||
--docsearch-modal-background: theme("colors.background.dark");
|
||||
--docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
|
||||
--docsearch-searchbox-background: theme(colors.black);
|
||||
--docsearch-hit-color: #bec3c9;
|
||||
--docsearch-hit-color: theme("colors.white");
|
||||
--docsearch-hit-shadow: none;
|
||||
--docsearch-hit-background: #090a11;
|
||||
--docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
|
||||
--docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d,
|
||||
0 2px 2px 0 rgba(3, 4, 9, 0.3);
|
||||
--docsearch-footer-background: #1e2136;
|
||||
--docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5),
|
||||
0 -4px 8px 0 rgba(0, 0, 0, 0.2);
|
||||
--docsearch-logo-color: #fff;
|
||||
--docsearch-muted-color: #7f8497;
|
||||
--docsearch-key-color: theme("colors.blue.dark.300");
|
||||
--docsearch-footer-background: theme("colors.background.dark");
|
||||
--docsearch-footer-border: 1px solid theme("colors.divider.dark");
|
||||
--docsearch-logo-color: theme("colors.white");
|
||||
--docsearch-muted-color: theme("colors.white");
|
||||
}
|
||||
.DocSearch-Button {
|
||||
align-items: center;
|
||||
|
|
@ -87,7 +82,7 @@ html.dark {
|
|||
.DocSearch-Button-Keys {
|
||||
display: flex;
|
||||
min-width: calc(40px + 0.8em);
|
||||
margin-top: 3px
|
||||
margin-top: 3px;
|
||||
}
|
||||
.DocSearch-Button-Key {
|
||||
align-items: center;
|
||||
|
|
@ -442,7 +437,7 @@ svg.DocSearch-Hit-Select-Icon {
|
|||
}
|
||||
.DocSearch-Hit-action-button:focus path,
|
||||
.DocSearch-Hit-action-button:hover path {
|
||||
fill: #fff;
|
||||
fill: theme("colors.white");
|
||||
}
|
||||
.DocSearch-Hit-content-wrapper {
|
||||
display: flex;
|
||||
|
|
@ -528,7 +523,7 @@ svg.DocSearch-Hit-Select-Icon {
|
|||
align-items: center;
|
||||
background: var(--docsearch-footer-background);
|
||||
border-radius: 0 0 8px 8px;
|
||||
box-shadow: var(--docsearch-footer-shadow);
|
||||
border-top: var(--docsearch-footer-border);
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
flex-shrink: 0;
|
||||
|
|
@ -556,9 +551,8 @@ svg.DocSearch-Hit-Select-Icon {
|
|||
}
|
||||
.DocSearch-Commands-Key {
|
||||
align-items: center;
|
||||
background: var(--docsearch-key-gradient);
|
||||
background: var(--docsearch-key-color);
|
||||
border-radius: 2px;
|
||||
box-shadow: var(--docsearch-key-shadow);
|
||||
display: flex;
|
||||
height: 18px;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -1,48 +1,16 @@
|
|||
/* see also: tailwind.config.js */
|
||||
|
||||
@import "tailwindcss/base";
|
||||
@import "tailwindcss/components";
|
||||
@import "tailwindcss/utilities";
|
||||
|
||||
/* base */
|
||||
|
||||
@import "/assets/css/global";
|
||||
@import "/assets/css/typography";
|
||||
@import "/assets/css/toc";
|
||||
@import "/assets/css/code";
|
||||
@import "/assets/css/search";
|
||||
|
||||
/* components */
|
||||
|
||||
@import "tailwindcss/components";
|
||||
@import "/assets/css/code";
|
||||
@import "/assets/css/toc";
|
||||
@import "/assets/css/callouts";
|
||||
@import "/assets/css/tables";
|
||||
|
||||
/* global utils */
|
||||
|
||||
[x-cloak] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:root {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.link {
|
||||
@apply text-blue-light dark:text-blue-dark underline-offset-2 underline;
|
||||
}
|
||||
|
||||
.invertible {
|
||||
@apply dark:filter dark:invert dark:hue-rotate-180;
|
||||
}
|
||||
|
||||
hr {
|
||||
@apply border-divider-light dark:border-divider-dark;
|
||||
}
|
||||
|
||||
.sidebar-hover {
|
||||
@apply hover:bg-gray-light-200 hover:dark:bg-gray-dark-200;
|
||||
}
|
||||
|
||||
.sidebar-underline {
|
||||
@apply underline underline-offset-4 decoration-4 decoration-blue-light dark:decoration-blue-dark;
|
||||
}
|
||||
|
||||
/* see also: tailwind.config.js */
|
||||
@import "tailwindcss/utilities";
|
||||
@import "/assets/css/syntax-light";
|
||||
@import "/assets/css/syntax-dark";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,343 @@
|
|||
@layer utilities {
|
||||
.syntax-dark {
|
||||
/* Other */
|
||||
.x {
|
||||
color: theme("colors.white");
|
||||
}
|
||||
/* Error */
|
||||
.err {
|
||||
color: theme("colors.red.dark.500");
|
||||
}
|
||||
/* CodeLine */
|
||||
.cl {
|
||||
}
|
||||
/* LineHighlight */
|
||||
.hl {
|
||||
min-width: fit-content;
|
||||
background-color: theme("colors.gray.dark.300");
|
||||
}
|
||||
.lntd:first-child .hl,
|
||||
& > .chroma > code > .hl {
|
||||
margin-left: -4px;
|
||||
border-left: 4px solid theme("colors.gray.dark.400");
|
||||
}
|
||||
/* LineNumbersTable */
|
||||
.lnt {
|
||||
white-space: pre;
|
||||
user-select: none;
|
||||
margin-right: 0.4em;
|
||||
padding: 0 0.4em 0 0.4em;
|
||||
color: theme("colors.gray.dark.400");
|
||||
}
|
||||
/* LineNumbers */
|
||||
.ln {
|
||||
white-space: pre;
|
||||
user-select: none;
|
||||
margin-right: 0.4em;
|
||||
padding: 0 0.4em 0 0.4em;
|
||||
color: theme("colors.gray.dark.400");
|
||||
}
|
||||
/* Line */
|
||||
.line {
|
||||
display: flex;
|
||||
}
|
||||
/* Keyword */
|
||||
.k {
|
||||
color: theme("colors.amber.dark.700");
|
||||
}
|
||||
/* KeywordConstant */
|
||||
.kc {
|
||||
color: theme("colors.violet.dark.700");
|
||||
}
|
||||
/* KeywordDeclaration */
|
||||
.kd {
|
||||
color: theme("colors.amber.dark.700");
|
||||
}
|
||||
/* KeywordNamespace */
|
||||
.kn {
|
||||
color: theme("colors.amber.dark.700");
|
||||
}
|
||||
/* KeywordPseudo */
|
||||
.kp {
|
||||
color: theme("colors.amber.dark.700");
|
||||
}
|
||||
/* KeywordReserved */
|
||||
.kr {
|
||||
color: theme("colors.amber.dark.700");
|
||||
}
|
||||
/* KeywordType */
|
||||
.kt {
|
||||
color: theme("colors.amber.dark.700");
|
||||
}
|
||||
/* Name */
|
||||
.n {
|
||||
color: theme("colors.violet.dark.700");
|
||||
}
|
||||
/* NameAttribute */
|
||||
.na {
|
||||
color: theme("colors.amber.dark.700");
|
||||
}
|
||||
/* NameBuiltin */
|
||||
.nb {
|
||||
color: theme("colors.amber.dark.700");
|
||||
}
|
||||
/* NameBuiltinPseudo */
|
||||
.bp {
|
||||
color: theme("colors.violet.dark.700");
|
||||
}
|
||||
/* NameClass */
|
||||
.nc {
|
||||
color: theme("colors.white");
|
||||
}
|
||||
/* NameConstant */
|
||||
.no {
|
||||
color: theme("colors.white");
|
||||
}
|
||||
/* NameDecorator */
|
||||
.nd {
|
||||
color: theme("colors.violet.dark.700");
|
||||
}
|
||||
/* NameEntity */
|
||||
.ni {
|
||||
color: theme("colors.amber.dark.700");
|
||||
}
|
||||
/* NameException */
|
||||
.ne {
|
||||
color: theme("colors.red.dark.700");
|
||||
}
|
||||
/* NameFunction */
|
||||
.nf {
|
||||
color: theme("colors.blue.dark.600");
|
||||
}
|
||||
/* NameFunctionMagic */
|
||||
.fm {
|
||||
color: theme("colors.blue.dark.600");
|
||||
}
|
||||
/* NameLabel */
|
||||
.nl {
|
||||
color: theme("colors.amber.dark.500");
|
||||
}
|
||||
/* NameNamespace */
|
||||
.nn {
|
||||
color: theme("colors.white");
|
||||
}
|
||||
/* NameOther */
|
||||
.nx {
|
||||
color: theme("colors.white");
|
||||
}
|
||||
/* NameProperty */
|
||||
.py {
|
||||
color: theme("colors.white");
|
||||
}
|
||||
/* NameTag */
|
||||
.nt {
|
||||
color: theme("colors.green.dark.600");
|
||||
}
|
||||
/* NameVariable */
|
||||
.nv {
|
||||
color: theme("colors.white");
|
||||
}
|
||||
/* NameVariableClass */
|
||||
.vc {
|
||||
color: theme("colors.violet.dark.600");
|
||||
}
|
||||
/* NameVariableGlobal */
|
||||
.vg {
|
||||
color: theme("colors.violet.dark.600");
|
||||
}
|
||||
/* NameVariableInstance */
|
||||
.vi {
|
||||
color: theme("colors.violet.dark.600");
|
||||
}
|
||||
/* NameVariableMagic */
|
||||
.vm {
|
||||
color: theme("colors.violet.dark.600");
|
||||
}
|
||||
/* Literal */
|
||||
.l {
|
||||
color: theme("colors.white");
|
||||
}
|
||||
/* LiteralDate */
|
||||
.ld {
|
||||
color: theme("colors.green.dark.600");
|
||||
}
|
||||
/* LiteralString */
|
||||
.s {
|
||||
color: theme("colors.white");
|
||||
}
|
||||
/* LiteralStringAffix */
|
||||
.sa {
|
||||
color: theme("colors.green.dark.600");
|
||||
}
|
||||
/* LiteralStringBacktick */
|
||||
.sb {
|
||||
color: theme("colors.green.dark.600");
|
||||
}
|
||||
/* LiteralStringChar */
|
||||
.sc {
|
||||
color: theme("colors.green.dark.600");
|
||||
}
|
||||
/* LiteralStringDelimiter */
|
||||
.dl {
|
||||
color: theme("colors.green.dark.600");
|
||||
}
|
||||
/* LiteralStringDoc */
|
||||
.sd {
|
||||
color: theme("colors.green.dark.600");
|
||||
}
|
||||
/* LiteralStringDouble */
|
||||
.s2 {
|
||||
color: theme("colors.green.dark.600");
|
||||
}
|
||||
/* LiteralStringEscape */
|
||||
.se {
|
||||
color: theme("colors.white");
|
||||
}
|
||||
/* LiteralStringHeredoc */
|
||||
.sh {
|
||||
color: theme("colors.green.dark.600");
|
||||
}
|
||||
/* LiteralStringInterpol */
|
||||
.si {
|
||||
color: theme("colors.green.dark.600");
|
||||
}
|
||||
/* LiteralStringOther */
|
||||
.sx {
|
||||
color: theme("colors.green.dark.600");
|
||||
}
|
||||
/* LiteralStringRegex */
|
||||
.sr {
|
||||
color: theme("colors.blue.dark.500");
|
||||
}
|
||||
/* LiteralStringSingle */
|
||||
.s1 {
|
||||
color: theme("colors.green.dark.600");
|
||||
}
|
||||
/* LiteralStringSymbol */
|
||||
.ss {
|
||||
color: theme("colors.blue.dark.600");
|
||||
}
|
||||
/* LiteralNumber */
|
||||
.m {
|
||||
color: theme("colors.blue.dark.600");
|
||||
}
|
||||
/* LiteralNumberBin */
|
||||
.mb {
|
||||
color: theme("colors.blue.dark.600");
|
||||
}
|
||||
/* LiteralNumberFloat */
|
||||
.mf {
|
||||
color: theme("colors.blue.dark.600");
|
||||
}
|
||||
/* LiteralNumberHex */
|
||||
.mh {
|
||||
color: theme("colors.blue.dark.600");
|
||||
}
|
||||
/* LiteralNumberInteger */
|
||||
.mi {
|
||||
color: theme("colors.blue.dark.600");
|
||||
}
|
||||
/* LiteralNumberIntegerLong */
|
||||
.il {
|
||||
color: theme("colors.blue.dark.600");
|
||||
}
|
||||
/* LiteralNumberOct */
|
||||
.mo {
|
||||
color: theme("colors.blue.dark.600");
|
||||
}
|
||||
/* Operator */
|
||||
.o {
|
||||
color: theme("colors.blue.dark.700");
|
||||
}
|
||||
/* OperatorWord */
|
||||
.ow {
|
||||
color: theme("colors.amber.dark.700");
|
||||
}
|
||||
/* Punctuation */
|
||||
.p {
|
||||
color: theme("colors.gray.dark.500");
|
||||
}
|
||||
/* Comment */
|
||||
.c {
|
||||
color: theme("colors.gray.dark.500");
|
||||
}
|
||||
/* CommentHashbang */
|
||||
.ch {
|
||||
color: theme("colors.gray.dark.500");
|
||||
}
|
||||
/* CommentMultiline */
|
||||
.cm {
|
||||
color: theme("colors.gray.dark.500");
|
||||
}
|
||||
/* CommentSingle */
|
||||
.c1 {
|
||||
color: theme("colors.gray.dark.500");
|
||||
}
|
||||
/* CommentSpecial */
|
||||
.cs {
|
||||
color: theme("colors.gray.dark.500");
|
||||
}
|
||||
/* CommentPreproc */
|
||||
.cp {
|
||||
color: theme("colors.gray.dark.500");
|
||||
}
|
||||
/* CommentPreprocFile */
|
||||
.cpf {
|
||||
color: theme("colors.gray.dark.500");
|
||||
}
|
||||
/* Generic */
|
||||
.g {
|
||||
color: theme("colors.white");
|
||||
}
|
||||
/* GenericDeleted */
|
||||
.gd {
|
||||
color: theme("colors.red.dark.500");
|
||||
}
|
||||
/* GenericEmph */
|
||||
.ge {
|
||||
color: theme("colors.white");
|
||||
}
|
||||
/* GenericError */
|
||||
.gr {
|
||||
color: theme("colors.red.dark.500");
|
||||
}
|
||||
/* GenericHeading */
|
||||
.gh {
|
||||
color: theme("colors.gray.dark.600");
|
||||
}
|
||||
/* GenericInserted */
|
||||
.gi {
|
||||
color: theme("colors.green.dark.500");
|
||||
}
|
||||
/* GenericOutput */
|
||||
.go {
|
||||
color: theme("colors.white");
|
||||
}
|
||||
/* GenericPrompt */
|
||||
.gp {
|
||||
user-select: none;
|
||||
color: theme("colors.green.dark.400");
|
||||
}
|
||||
/* GenericStrong */
|
||||
.gs {
|
||||
color: theme("colors.white");
|
||||
}
|
||||
/* GenericSubheading */
|
||||
.gu {
|
||||
color: theme("colors.gray.dark.600");
|
||||
}
|
||||
/* GenericTraceback */
|
||||
.gt {
|
||||
color: theme("colors.red.dark.500");
|
||||
}
|
||||
/* GenericUnderline */
|
||||
.gl {
|
||||
color: theme("colors.white");
|
||||
text-decoration: underline;
|
||||
}
|
||||
/* TextWhitespace */
|
||||
.w {
|
||||
color: theme("colors.gray.dark.100");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,343 @@
|
|||
@layer utilities {
|
||||
.syntax-light {
|
||||
/* Other */
|
||||
.x {
|
||||
color: theme("colors.black");
|
||||
}
|
||||
/* Error */
|
||||
.err {
|
||||
color: theme("colors.red.light.500");
|
||||
}
|
||||
/* CodeLine */
|
||||
.cl {
|
||||
}
|
||||
/* LineHighlight */
|
||||
.hl {
|
||||
min-width: fit-content;
|
||||
background-color: theme("colors.blue.light.100");
|
||||
}
|
||||
.lntd:first-child .hl,
|
||||
& > .chroma > code > .hl {
|
||||
margin-left: -4px;
|
||||
border-left: 4px solid theme("colors.blue.light.300");
|
||||
}
|
||||
/* LineNumbersTable */
|
||||
.lnt {
|
||||
white-space: pre;
|
||||
user-select: none;
|
||||
margin-right: 0.4em;
|
||||
padding: 0 0.4em 0 0.4em;
|
||||
color: theme("colors.gray.light.400");
|
||||
}
|
||||
/* LineNumbers */
|
||||
.ln {
|
||||
white-space: pre;
|
||||
user-select: none;
|
||||
margin-right: 0.4em;
|
||||
padding: 0 0.4em 0 0.4em;
|
||||
color: theme("colors.gray.light.400");
|
||||
}
|
||||
/* Line */
|
||||
.line {
|
||||
display: flex;
|
||||
}
|
||||
/* Keyword */
|
||||
.k {
|
||||
color: theme("colors.amber.light.500");
|
||||
}
|
||||
/* KeywordConstant */
|
||||
.kc {
|
||||
color: theme("colors.violet.light.400");
|
||||
}
|
||||
/* KeywordDeclaration */
|
||||
.kd {
|
||||
color: theme("colors.amber.light.500");
|
||||
}
|
||||
/* KeywordNamespace */
|
||||
.kn {
|
||||
color: theme("colors.amber.light.500");
|
||||
}
|
||||
/* KeywordPseudo */
|
||||
.kp {
|
||||
color: theme("colors.amber.light.500");
|
||||
}
|
||||
/* KeywordReserved */
|
||||
.kr {
|
||||
color: theme("colors.amber.light.500");
|
||||
}
|
||||
/* KeywordType */
|
||||
.kt {
|
||||
color: theme("colors.amber.light.500");
|
||||
}
|
||||
/* Name */
|
||||
.n {
|
||||
color: theme("colors.violet.light.400");
|
||||
}
|
||||
/* NameAttribute */
|
||||
.na {
|
||||
color: theme("colors.amber.light.500");
|
||||
}
|
||||
/* NameBuiltin */
|
||||
.nb {
|
||||
color: theme("colors.amber.light.500");
|
||||
}
|
||||
/* NameBuiltinPseudo */
|
||||
.bp {
|
||||
color: theme("colors.violet.light.400");
|
||||
}
|
||||
/* NameClass */
|
||||
.nc {
|
||||
color: theme("colors.black");
|
||||
}
|
||||
/* NameConstant */
|
||||
.no {
|
||||
color: theme("colors.black");
|
||||
}
|
||||
/* NameDecorator */
|
||||
.nd {
|
||||
color: theme("colors.violet.light.400");
|
||||
}
|
||||
/* NameEntity */
|
||||
.ni {
|
||||
color: theme("colors.amber.light.500");
|
||||
}
|
||||
/* NameException */
|
||||
.ne {
|
||||
color: theme("colors.red.light.700");
|
||||
}
|
||||
/* NameFunction */
|
||||
.nf {
|
||||
color: theme("colors.blue.light.600");
|
||||
}
|
||||
/* NameFunctionMagic */
|
||||
.fm {
|
||||
color: theme("colors.blue.light.600");
|
||||
}
|
||||
/* NameLabel */
|
||||
.nl {
|
||||
color: theme("colors.amber.light.700");
|
||||
}
|
||||
/* NameNamespace */
|
||||
.nn {
|
||||
color: theme("colors.black");
|
||||
}
|
||||
/* NameOther */
|
||||
.nx {
|
||||
color: theme("colors.black");
|
||||
}
|
||||
/* NameProperty */
|
||||
.py {
|
||||
color: theme("colors.black");
|
||||
}
|
||||
/* NameTag */
|
||||
.nt {
|
||||
color: theme("colors.green.light.600");
|
||||
}
|
||||
/* NameVariable */
|
||||
.nv {
|
||||
color: theme("colors.black");
|
||||
}
|
||||
/* NameVariableClass */
|
||||
.vc {
|
||||
color: theme("colors.violet.light.600");
|
||||
}
|
||||
/* NameVariableGlobal */
|
||||
.vg {
|
||||
color: theme("colors.violet.light.600");
|
||||
}
|
||||
/* NameVariableInstance */
|
||||
.vi {
|
||||
color: theme("colors.violet.light.600");
|
||||
}
|
||||
/* NameVariableMagic */
|
||||
.vm {
|
||||
color: theme("colors.violet.light.600");
|
||||
}
|
||||
/* Literal */
|
||||
.l {
|
||||
color: theme("colors.black");
|
||||
}
|
||||
/* LiteralDate */
|
||||
.ld {
|
||||
color: theme("colors.black");
|
||||
}
|
||||
/* LiteralString */
|
||||
.s {
|
||||
color: theme("colors.black");
|
||||
}
|
||||
/* LiteralStringAffix */
|
||||
.sa {
|
||||
color: theme("colors.green.light.600");
|
||||
}
|
||||
/* LiteralStringBacktick */
|
||||
.sb {
|
||||
color: theme("colors.green.light.600");
|
||||
}
|
||||
/* LiteralStringChar */
|
||||
.sc {
|
||||
color: theme("colors.green.light.600");
|
||||
}
|
||||
/* LiteralStringDelimiter */
|
||||
.dl {
|
||||
color: theme("colors.green.light.600");
|
||||
}
|
||||
/* LiteralStringDoc */
|
||||
.sd {
|
||||
color: #8f5902;
|
||||
}
|
||||
/* LiteralStringDouble */
|
||||
.s2 {
|
||||
color: theme("colors.green.light.600");
|
||||
}
|
||||
/* LiteralStringEscape */
|
||||
.se {
|
||||
color: theme("colors.black");
|
||||
}
|
||||
/* LiteralStringHeredoc */
|
||||
.sh {
|
||||
color: theme("colors.green.light.600");
|
||||
}
|
||||
/* LiteralStringInterpol */
|
||||
.si {
|
||||
color: theme("colors.green.light.600");
|
||||
}
|
||||
/* LiteralStringOther */
|
||||
.sx {
|
||||
color: theme("colors.green.light.600");
|
||||
}
|
||||
/* LiteralStringRegex */
|
||||
.sr {
|
||||
color: theme("colors.blue.light.500");
|
||||
}
|
||||
/* LiteralStringSingle */
|
||||
.s1 {
|
||||
color: theme("colors.green.light.600");
|
||||
}
|
||||
/* LiteralStringSymbol */
|
||||
.ss {
|
||||
color: theme("colors.green.light.600");
|
||||
}
|
||||
/* LiteralNumber */
|
||||
.m {
|
||||
color: theme("colors.blue.light.600");
|
||||
}
|
||||
/* LiteralNumberBin */
|
||||
.mb {
|
||||
color: theme("colors.blue.light.600");
|
||||
}
|
||||
/* LiteralNumberFloat */
|
||||
.mf {
|
||||
color: theme("colors.blue.light.600");
|
||||
}
|
||||
/* LiteralNumberHex */
|
||||
.mh {
|
||||
color: theme("colors.blue.light.600");
|
||||
}
|
||||
/* LiteralNumberInteger */
|
||||
.mi {
|
||||
color: theme("colors.blue.light.600");
|
||||
}
|
||||
/* LiteralNumberIntegerLong */
|
||||
.il {
|
||||
color: theme("colors.blue.light.600");
|
||||
}
|
||||
/* LiteralNumberOct */
|
||||
.mo {
|
||||
color: theme("colors.blue.light.600");
|
||||
}
|
||||
/* Operator */
|
||||
.o {
|
||||
color: theme("colors.blue.light.400");
|
||||
}
|
||||
/* OperatorWord */
|
||||
.ow {
|
||||
color: theme("colors.amber.light.500");
|
||||
}
|
||||
/* Punctuation */
|
||||
.p {
|
||||
color: theme("colors.gray.light.400");
|
||||
}
|
||||
/* Comment */
|
||||
.c {
|
||||
color: theme("colors.gray.light.400");
|
||||
}
|
||||
/* CommentHashbang */
|
||||
.ch {
|
||||
color: theme("colors.gray.light.400");
|
||||
}
|
||||
/* CommentMultiline */
|
||||
.cm {
|
||||
color: theme("colors.gray.light.400");
|
||||
}
|
||||
/* CommentSingle */
|
||||
.c1 {
|
||||
color: theme("colors.gray.light.400");
|
||||
}
|
||||
/* CommentSpecial */
|
||||
.cs {
|
||||
color: theme("colors.gray.light.400");
|
||||
}
|
||||
/* CommentPreproc */
|
||||
.cp {
|
||||
color: theme("colors.gray.light.400");
|
||||
}
|
||||
/* CommentPreprocFile */
|
||||
.cpf {
|
||||
color: theme("colors.gray.light.400");
|
||||
}
|
||||
/* Generic */
|
||||
.g {
|
||||
color: theme("colors.black");
|
||||
}
|
||||
/* GenericDeleted */
|
||||
.gd {
|
||||
color: theme("colors.red.light.500");
|
||||
}
|
||||
/* GenericEmph */
|
||||
.ge {
|
||||
color: theme("colors.black");
|
||||
}
|
||||
/* GenericError */
|
||||
.gr {
|
||||
color: theme("colors.red.light.500");
|
||||
}
|
||||
/* GenericHeading */
|
||||
.gh {
|
||||
color: theme("colors.gray.light.600");
|
||||
}
|
||||
/* GenericInserted */
|
||||
.gi {
|
||||
color: theme("colors.green.light.500");
|
||||
}
|
||||
/* GenericOutput */
|
||||
.go {
|
||||
color: theme("colors.black");
|
||||
}
|
||||
/* GenericPrompt */
|
||||
.gp {
|
||||
user-select: none;
|
||||
color: theme("colors.green.light.400");
|
||||
}
|
||||
/* GenericStrong */
|
||||
.gs {
|
||||
color: theme("colors.black");
|
||||
}
|
||||
/* GenericSubheading */
|
||||
.gu {
|
||||
color: theme("colors.gray.light.600");
|
||||
}
|
||||
/* GenericTraceback */
|
||||
.gt {
|
||||
color: theme("colors.red.light.500");
|
||||
}
|
||||
/* GenericUnderline */
|
||||
.gl {
|
||||
color: theme("colors.black");
|
||||
text-decoration: underline;
|
||||
}
|
||||
/* TextWhitespace */
|
||||
.w {
|
||||
color: theme("colors.gray.light.100");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +1,15 @@
|
|||
.prose table {
|
||||
@apply table w-full text-base sm:block overflow-x-auto;
|
||||
thead tr {
|
||||
@apply bg-gray-light-300 dark:bg-gray-dark-300
|
||||
}
|
||||
tbody tr:nth-of-type(2n) {
|
||||
@apply bg-gray-light-200 dark:bg-gray-dark-200
|
||||
}
|
||||
th, td {
|
||||
@apply p-2;
|
||||
@layer components {
|
||||
.prose table {
|
||||
@apply table w-full overflow-x-auto text-base sm:block;
|
||||
thead tr {
|
||||
@apply bg-gray-light-300 dark:bg-gray-dark-300;
|
||||
}
|
||||
tbody tr:nth-of-type(2n) {
|
||||
@apply bg-gray-light-200 dark:bg-gray-dark-200;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
@apply p-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,20 @@
|
|||
#TableOfContents {
|
||||
nav {
|
||||
@apply border-l-2 border-divider-light;
|
||||
}
|
||||
ul ul {
|
||||
@apply pl-2;
|
||||
}
|
||||
a {
|
||||
@apply max-w-full truncate py-1 block hover:font-medium hover:no-underline pl-2;
|
||||
&[aria-current="true"],
|
||||
&:hover {
|
||||
@apply font-medium text-black dark:text-white border-l-2 border-l-gray-light bg-gradient-to-r from-gray-light-100 dark:border-l-gray-dark dark:from-gray-dark-200;
|
||||
@layer components {
|
||||
#TableOfContents {
|
||||
nav {
|
||||
@apply border-l-2 border-divider-light;
|
||||
}
|
||||
&:not([aria-current="true"]) {
|
||||
@apply text-gray-light-600 dark:text-gray-dark-700 hover:text-black dark:hover:text-white;
|
||||
ul ul {
|
||||
@apply pl-2;
|
||||
}
|
||||
a {
|
||||
@apply block max-w-full truncate py-1 pl-2 hover:font-medium hover:no-underline;
|
||||
&[aria-current="true"],
|
||||
&:hover {
|
||||
@apply border-l-2 border-l-gray-light bg-gradient-to-r from-gray-light-100 font-medium text-black dark:border-l-gray-dark dark:from-gray-dark-200 dark:text-white;
|
||||
}
|
||||
&:not([aria-current="true"]) {
|
||||
@apply text-gray-light-600 hover:text-black dark:text-gray-dark-700 dark:hover:text-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,34 +1,37 @@
|
|||
.prose {
|
||||
li {
|
||||
@apply my-2;
|
||||
> :last-child, > :first-child {
|
||||
margin: 0;
|
||||
@layer base {
|
||||
.prose {
|
||||
li {
|
||||
@apply my-2;
|
||||
> :last-child,
|
||||
> :first-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
a {
|
||||
font-weight: 400;
|
||||
}
|
||||
hr {
|
||||
@apply mb-4 mt-8;
|
||||
}
|
||||
h1 {
|
||||
@apply my-4 text-4xl;
|
||||
line-height: 1.167;
|
||||
}
|
||||
h2 {
|
||||
@apply mb-4 mt-8 text-3xl;
|
||||
line-height: 1.2;
|
||||
}
|
||||
h3 {
|
||||
@apply text-2xl;
|
||||
line-height: 1.167;
|
||||
}
|
||||
h4 {
|
||||
@apply text-xl;
|
||||
line-height: 1.235;
|
||||
}
|
||||
h5 {
|
||||
@apply text-lg;
|
||||
line-height: 1.75;
|
||||
}
|
||||
}
|
||||
a {
|
||||
font-weight: 400;
|
||||
}
|
||||
hr {
|
||||
@apply mt-8 mb-4;
|
||||
}
|
||||
h1 {
|
||||
@apply text-4xl my-4;
|
||||
line-height: 1.167;
|
||||
}
|
||||
h2 {
|
||||
@apply text-3xl mt-8 mb-4;
|
||||
line-height: 1.2;
|
||||
}
|
||||
h3 {
|
||||
@apply text-2xl;
|
||||
line-height: 1.167;
|
||||
}
|
||||
h4 {
|
||||
@apply text-xl;
|
||||
line-height: 1.235;
|
||||
}
|
||||
h5 {
|
||||
@apply text-lg;
|
||||
line-height: 1.75;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,5 +9,8 @@
|
|||
>
|
||||
content_copy
|
||||
</button>
|
||||
{{- highlight .Inner .Type .Options -}}
|
||||
{{ $result := transform.HighlightCodeBlock . }}
|
||||
<div class="syntax-light dark:syntax-dark">
|
||||
{{ $result.Wrapped }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue