web/_sass/addon/syntax.scss

287 lines
5.1 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
2022-01-26 23:41:19 +03:00
html {
@media (prefers-color-scheme: light) {
&:not([data-mode]),
[data-mode=light] {
@include light-syntax;
}
2022-01-26 23:41:19 +03:00
&[data-mode=dark] {
@include dark-syntax;
}
}
2022-01-26 23:41:19 +03:00
@media (prefers-color-scheme: dark) {
&:not([data-mode]),
&[data-mode=dark] {
@include dark-syntax;
}
&[data-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-12-03 11:34:26 +03:00
padding-left: 1rem;
padding-right: 1.5rem;
}
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;
2021-12-03 11:34:26 +03:00
padding-top: 0.5rem;
padding-bottom: 1rem;
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 {
td pre {
overflow: visible; /* Fixed iOS safari overflow-x */
word-break: normal; /* Fixed iOS safari linenos code break */
}
}
.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
}
2022-01-21 12:46:01 +03:00
2022-01-22 17:41:23 +03:00
&.filepath {
background-color: inherit;
color: var(--filepath-text-color);
font-weight: 600;
padding: 0;
2020-02-28 19:16:47 +03:00
}
2020-08-19 16:18:14 +03:00
2021-11-01 00:26:32 +03:00
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
2021-11-01 00:26:32 +03:00
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
2022-01-22 17:41:23 +03:00
blockquote & {
2020-06-22 16:08:36 +03:00
color: inherit;
}
.highlight > & {
color: transparent;
}
2019-09-30 15:38:41 +03:00
}
td.rouge-code {
2021-12-03 11:34:26 +03:00
@extend %code-snippet-padding;
// 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;
}
2021-10-25 22:04:15 +03:00
td.rouge-code {
2021-12-03 11:34:26 +03:00
padding-left: 1.5rem;
}
}
}
2021-09-09 16:07:07 +03:00
.code-header {
2021-12-03 11:34:26 +03:00
@extend %no-cursor;
$code-header-height: 2.25rem;
2021-09-09 16:07:07 +03:00
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;
2021-12-03 11:34:26 +03:00
height: $code-header-height;
&::before {
$dot-size: 0.75rem;
$dot-margin: 0.5rem;
content: "";
display: inline-block;
margin-left: 1rem;
width: $dot-size;
height: $dot-size;
border-radius: 50%;
background-color: var(--code-header-muted-color);
box-shadow:
($dot-size + $dot-margin) 0 0 var(--code-header-muted-color),
($dot-size + $dot-margin) * 2 0 0 var(--code-header-muted-color);
}
// the label block
2021-09-22 13:25:46 +03:00
span {
2021-12-03 11:34:26 +03:00
// label icon
2021-09-29 11:34:22 +03:00
i {
2021-12-03 11:34:26 +03:00
font-size: 1rem;
margin-right: 0.4rem;
color: var(--code-header-icon-color);
&.small {
font-size: 70%;
}
2021-09-29 11:34:22 +03:00
}
@at-root [file] #{&} > i {
2021-09-22 13:25:46 +03:00
position: relative;
2021-09-29 11:34:22 +03:00
top: 1px; // center the file icon
2021-09-15 17:50:28 +03:00
}
2021-09-22 13:25:46 +03:00
2021-12-03 11:34:26 +03:00
// label text
&::after {
content: attr(data-label-text);
2021-12-03 11:34:26 +03:00
font-size: 0.85rem;
font-weight: 600;
color: var(--code-header-text-color);
}
}
2021-09-09 17:09:07 +03:00
// clipboard
button {
2021-12-03 11:34:26 +03:00
@extend %cursor-pointer;
border: 1px solid transparent;
2021-09-15 09:36:37 +03:00
border-radius: $code-radius;
2021-12-03 11:34:26 +03:00
height: $code-header-height;
width: $code-header-height;
2021-09-15 09:36:37 +03:00
padding: 0;
2021-09-09 17:09:07 +03:00
background-color: inherit;
2021-12-03 11:34:26 +03:00
i {
color: var(--code-header-icon-color);
}
&[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;
2021-09-29 11:34:22 +03:00
.highlight {
padding-left: 0.25rem;
}
2021-09-09 16:07:07 +03:00
.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
}
}
}
}