fenix-fox/html_resources/code-block/code-block.css
MrOtherGuy c50e5df3e3 tag-browser: Some small improvements
This patch makes tag-browser layout somewhat usable on mobile.
Additionally it adds few banner hints to use Ctrl keys and basic hint to
select a category when empty.
This also makes the Copy-button hidden until some content is shown in
code-block.
2023-02-05 10:26:53 +02:00

128 lines
No EOL
2.4 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;
overflow: hidden;
}
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,0.3em);
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 }
.value,
.function{
word-break: break-word;
}
/* 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 }