revsuine/revsuine.xyz
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

content/blog/mail_server_alpine_postfix_dovecot_tutorial: code blocks css improvements

Browse source
This commit is contained in:
revsuine 2024-11-24 01:49:05 +00:00
parent f40614ec13
commit 327327717b
Signed by: revsuine
GPG key ID: 3F257B68F5BC9339
2 changed files with 72 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
assets/css/prism.css
View file

@ -11,7 +11,7 @@
code[class*="language-"], code[class*="language-"],
pre[class*="language-"] { pre[class*="language-"] {
color: #ebdbb2; /* fg1 / fg */ color: #ebdbb2; /* fg1 / fg */
font-family: Consolas, Monaco, "Andale Mono", monospace; font-family: "Fira Code", "Ubuntu Mono", Consolas, Monaco, "Andale Mono", monospace;
direction: ltr; direction: ltr;
text-align: left; text-align: left;
white-space: pre; white-space: pre;
@ -141,3 +141,70 @@ pre[class*="language-"] {
.token.deleted { .token.deleted {
background: #fb4934; /* red2 */ background: #fb4934; /* red2 */
} }
/* css for hover button from https://github.com/panr/hugo-theme-terminal/blob/master/assets/css/prism.css */
div.code-toolbar {
position: relative;
}
div.code-toolbar > .toolbar {
position: absolute;
top: 0.3em;
right: 0.2em;
transition: opacity 0.3s ease-in-out;
opacity: 0;
}
div.code-toolbar:hover > .toolbar {
opacity: 1;
}
/* Separate line b/c rules are thrown out if selector is invalid.
IE11 and old Edge versions don't support :focus-within. */
div.code-toolbar:focus-within > .toolbar {
opacity: 1;
}
div.code-toolbar > .toolbar > .toolbar-item {
display: inline-block;
}
div.code-toolbar > .toolbar > .toolbar-item > a {
cursor: pointer;
}
div.code-toolbar > .toolbar > .toolbar-item > button {
background: none;
border: 0;
color: inherit;
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
/* for button */
user-select: none;
}
div.code-toolbar > .toolbar > .toolbar-item > a,
div.code-toolbar > .toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar > .toolbar-item > span {
color: #bbb;
font-size: 0.8em;
padding: 0 0.5em;
background: #f5f2f0;
background: rgba(224, 224, 224, 20%);
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 20%);
border-radius: 0.5em;
}
div.code-toolbar > .toolbar > .toolbar-item > a:hover,
div.code-toolbar > .toolbar > .toolbar-item > a:focus,
div.code-toolbar > .toolbar > .toolbar-item > button:hover,
div.code-toolbar > .toolbar > .toolbar-item > button:focus,
div.code-toolbar > .toolbar > .toolbar-item > span:hover,
div.code-toolbar > .toolbar > .toolbar-item > span:focus {
color: inherit;
text-decoration: none;
}

5
assets/css/syntax.css
View file

@ -1,2 +1,5 @@
/* overriding syntax.css */ pre[class*=language-] {
margin: 0;
overflow: auto;
}