122 lines
2.3 KiB
CSS
122 lines
2.3 KiB
CSS
|
:host{
|
||
|
|
font-family: monospace;
|
||
|
|
white-space: pre-wrap;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
:host(.inline){
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
:host(.nowrap){
|
||
|
|
white-space: pre;
|
||
|
|
overflow-x: auto;
|
||
|
|
}
|
||
|
|
:host([data-name]){
|
||
|
|
--copy-button-top: 1.5em;
|
||
|
|
}
|
||
|
|
:host(.inline.copy-able){
|
||
|
|
--copy-button-block-padding: 0;
|
||
|
|
--codeblock-inline-padding: 40px;
|
||
|
|
}
|
||
|
|
caption{
|
||
|
|
text-align: start;
|
||
|
|
padding-inline-start: 3em;
|
||
|
|
}
|
||
|
|
caption:empty{
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.outerBox{
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
table{
|
||
|
|
border: 1px solid;
|
||
|
|
border-collapse: collapse;
|
||
|
|
border-spacing: 0px;
|
||
|
|
width: 100%;
|
||
|
|
margin-inline-end: var(--codeblock-inline-padding,0);
|
||
|
|
}
|
||
|
|
tbody{
|
||
|
|
counter-reset: nlines 0;
|
||
|
|
color: lightblue;
|
||
|
|
background-color: rgb(40,37,43);
|
||
|
|
}
|
||
|
|
@keyframes hide-show{
|
||
|
|
0%{ opacity: 0 }
|
||
|
|
10%{ opacity: 1 }
|
||
|
|
90%{ opacity: 1 }
|
||
|
|
100%{ opacity: 0 }
|
||
|
|
}
|
||
|
|
.copy-button::before{
|
||
|
|
content: "Copy"
|
||
|
|
}
|
||
|
|
.copy-button.copy-success::before{
|
||
|
|
white-space:nowrap;
|
||
|
|
content: "Copied";
|
||
|
|
pointer-events: none;
|
||
|
|
animation: hide-show 2s linear forwards;
|
||
|
|
}
|
||
|
|
.copy-button{
|
||
|
|
padding: var(--copy-button-block-padding,0.3em) 0.3em;
|
||
|
|
opacity: 0.5;
|
||
|
|
color: silver;
|
||
|
|
border: 1px solid rgba(230,230,230,0.3);
|
||
|
|
position: absolute;
|
||
|
|
margin-top: var(--copy-button-top);
|
||
|
|
right: .3em;
|
||
|
|
cursor: pointer
|
||
|
|
}
|
||
|
|
.copy-button.copy-success,
|
||
|
|
.copy-button:hover{
|
||
|
|
background-color: dodgerblue;
|
||
|
|
color: black;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.line-number{
|
||
|
|
border-inline-end: 1px solid;
|
||
|
|
background-color: rgba(0,0,0,0.1);
|
||
|
|
color: silver;
|
||
|
|
vertical-align: top;
|
||
|
|
width: 0;
|
||
|
|
text-align: end;
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (prefers-color-scheme: dark){
|
||
|
|
tbody{
|
||
|
|
/* We're cool and assume dark mode by default */
|
||
|
|
}
|
||
|
|
}
|
||
|
|
tr{
|
||
|
|
counter-increment: nlines;
|
||
|
|
}
|
||
|
|
td,tr{
|
||
|
|
border-block: none;
|
||
|
|
}
|
||
|
|
td{
|
||
|
|
padding: 1px 0.7em;
|
||
|
|
}
|
||
|
|
.line-number::before{
|
||
|
|
content: counter(nlines)
|
||
|
|
}
|
||
|
|
a{
|
||
|
|
color: dodgerblue;
|
||
|
|
}
|
||
|
|
a:visited{
|
||
|
|
color: orchid
|
||
|
|
}
|
||
|
|
tbody > div{ display: contents }
|
||
|
|
/* These should really be moved into separate highlighter css */
|
||
|
|
.comment{ color: rgb(50,180,90) }
|
||
|
|
.selector{ color: lavenderblush }
|
||
|
|
.pseudo{ color: rgb(200,180,250) }
|
||
|
|
.id{ color: rgb(240, 148, 138) }
|
||
|
|
.class{ color: aquamarine }
|
||
|
|
.attribute{ color: rgb(100,200,250) }
|
||
|
|
.atrule{ color: lime }
|
||
|
|
.atvalue{ color: lightblue }
|
||
|
|
.property{ color: palegoldenrod }
|
||
|
|
.value{ color: skyblue }
|
||
|
|
.curly{ color: chocolate }
|
||
|
|
.function{ color: silver }
|
||
|
|
.important-tag{ color: orange }
|
||
|
|
.quote{ color: burlywood }
|