web/_sass/addon/syntax.scss

257 lines
4.4 KiB
SCSS
Raw Normal View History

2019-11-15 19:01:33 +03:00
/*
2019-09-30 15:38:41 +03:00
* The syntax highlight.
*/
2021-01-23 08:20:58 +03:00
@import "colors/light-syntax";
@import "colors/dark-syntax";
2020-01-03 15:18:19 +03:00
2020-08-19 16:18:14 +03:00
html:not([mode]),
html[mode=light] {
@include light-syntax;
}
html[mode=dark] {
@include dark-syntax;
}
@media (prefers-color-scheme: dark) {
2020-08-19 16:18:14 +03:00
html:not([mode]),
html[mode=dark] {
@include dark-syntax;
}
html[mode=light] {
@include light-syntax;
}
}
2020-08-19 16:18:14 +03:00
/* -- Codes Snippet -- */
2019-09-30 15:38:41 +03:00
2021-09-09 16:07:07 +03:00
$code-radius: 6px;
%code-snippet-bg {
background: var(--highlight-bg-color);
2019-09-30 15:38:41 +03:00
}
2020-02-25 12:56:03 +03:00
%code-snippet-radius {
2021-09-09 16:07:07 +03:00
border-radius: $code-radius;
2019-09-30 15:38:41 +03:00
}
%code-snippet-padding {
2021-09-09 16:07:07 +03:00
padding: 1.2rem;
2020-08-19 16:18:14 +03:00
}
div > pre {
@extend %code-snippet-bg;
@extend %code-snippet-radius;
@extend %code-snippet-padding;
}
2020-02-25 12:56:03 +03:00
.highlighter-rouge {
@extend %code-snippet-bg;
2020-02-25 12:56:03 +03:00
@extend %code-snippet-radius;
2020-08-19 16:18:14 +03:00
color: var(--highlighter-rouge-color);
margin-top: 0.5rem;
2020-02-25 12:56:03 +03:00
margin-bottom: 1.2em; /* Override BS Inline-code style */
2019-09-30 15:38:41 +03:00
}
2020-02-25 12:56:03 +03:00
.highlight {
@extend %code-snippet-radius;
@extend %code-snippet-bg;
2020-08-19 16:18:14 +03:00
2020-02-25 12:56:03 +03:00
@at-root figure#{&} {
@extend %code-snippet-bg;
2020-02-25 12:56:03 +03:00
}
2020-08-19 16:18:14 +03:00
2020-02-25 12:56:03 +03:00
overflow: auto;
2020-08-19 16:18:14 +03:00
pre {
margin-bottom: 0;
2020-08-23 11:09:35 +03:00
font-size: $code-font-size;
2020-08-19 16:18:14 +03:00
line-height: 1.4rem;
word-wrap: normal; /* Fixed Safari overflow-x */
}
2020-02-25 12:56:03 +03:00
table {
padding: 0;
border: 0;
td pre {
overflow: visible; /* Fixed iOS safari overflow-x */
word-break: normal; /* Fixed iOS safari linenos code break */
}
}
2020-02-25 12:56:03 +03:00
td {
padding: 0;
border: 0;
}
.lineno {
padding-right: 0.5rem;
min-width: 2.2rem;
text-align: right;
color: var(--highlight-lineno-color);
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
/* set the dollar sign to non-selectable */
.gp {
user-select: none;
}
} //.highlight
2019-09-30 15:38:41 +03:00
code {
-webkit-hyphens: none;
-ms-hyphens: none;
-moz-hyphens: none;
hyphens: none;
2020-08-19 16:18:14 +03:00
2020-02-25 12:56:03 +03:00
&.highlighter-rouge {
2020-08-23 11:09:35 +03:00
font-size: $code-font-size;
2020-06-22 16:08:36 +03:00
padding: 3px 5px;
2020-02-25 12:56:03 +03:00
border-radius: 4px;
2020-06-22 16:08:36 +03:00
background-color: var(--inline-code-bg);
2020-02-28 19:16:47 +03:00
}
2020-08-19 16:18:14 +03:00
@at-root a > &.highlighter-rouge {
2020-02-28 19:16:47 +03:00
padding-bottom: 0; // show link's underlinke
2020-06-22 16:08:36 +03:00
color: inherit;
2020-02-28 19:16:47 +03:00
}
2020-08-19 16:18:14 +03:00
@at-root a:hover > &.highlighter-rouge {
2020-02-28 19:16:47 +03:00
border-bottom: none;
2020-02-25 12:56:03 +03:00
}
2020-08-19 16:18:14 +03:00
2020-06-22 16:08:36 +03:00
blockquote &.highlighter-rouge {
color: inherit;
}
2019-09-30 15:38:41 +03:00
}
td.rouge-code {
2021-09-09 16:07:07 +03:00
padding: 1.2rem 1.5rem 1.2rem 1rem;
// Prevent some browser extends from
// changing the URL string of code block.
a {
color: inherit !important;
border-bottom: none !important;
pointer-events: none;
}
2019-09-30 15:38:41 +03:00
}
2020-06-08 16:44:59 +03:00
/* Hide line numbers for default, console, and terminal code snippets */
div {
&[class^='highlighter-rouge'],
&.language-plaintext.highlighter-rouge,
&.language-console.highlighter-rouge,
2021-09-13 17:26:17 +03:00
&.language-terminal.highlighter-rouge,
&.nolineno {
pre.lineno {
display: none;
}
td.rouge-code {
@extend %code-snippet-padding;
}
}
}
2021-09-09 16:07:07 +03:00
.code-header {
background: var(--code-header-bg);
border-top-left-radius: $code-radius;
border-top-right-radius: $code-radius;
2021-09-09 17:09:07 +03:00
display: flex;
justify-content: space-between;
align-items: center;
line-height: 1.85rem;
// icons
i {
font-size: 1rem;
color: var(--lang-badge-muted-color);
&.small {
font-size: 70%;
margin-left: 0.25rem;
}
}
// the label block
2021-09-22 13:25:46 +03:00
span {
padding-left: 0.6rem;
&:after {
content: attr(text-data);
margin-left: 0.3rem;
font-size: 0.85rem;
2021-09-22 13:25:46 +03:00
font-weight: 600;
color: var(--lang-badge-color);
}
2021-09-15 17:50:28 +03:00
2021-09-22 13:25:46 +03:00
@at-root [file] #{&} > i { // center the file icon
position: relative;
top: 1px;
2021-09-15 17:50:28 +03:00
}
2021-09-22 13:25:46 +03:00
}
2021-09-09 17:09:07 +03:00
2021-09-22 13:25:46 +03:00
2021-09-09 17:09:07 +03:00
// clipboard
button {
2021-09-15 09:36:37 +03:00
border: 1px solid var(--code-header-bg);
border-radius: $code-radius;
padding: 0;
width: 1.95rem;
2021-09-09 17:09:07 +03:00
background-color: inherit;
@extend %cursor-pointer;
&[timeout] {
2021-09-22 17:21:33 +03:00
&:hover {
border-color: var(--clipboard-checked-color);
}
i {
color: var(--clipboard-checked-color);
}
2021-09-15 09:36:37 +03:00
}
&:not([timeout]):hover {
2021-09-22 17:21:33 +03:00
background-color: rgba(128, 128, 128, 0.37);
i {
2021-09-22 13:25:46 +03:00
color: white;
}
2021-09-09 17:09:07 +03:00
}
&:focus {
outline: none;
}
}
}
2021-09-09 16:07:07 +03:00
@media all and (max-width: 576px) {
.post-content {
> div[class^='language-'] {
@include ml-mr(-1.25rem);
border-radius: 0;
.code-header {
border-radius: 0;
2021-09-09 17:09:07 +03:00
padding-left: 0.4rem;
2021-09-15 09:36:37 +03:00
padding-right: 0.5rem;
2021-09-09 16:07:07 +03:00
}
}
}
}