mirror of
https://github.com/mayurankv/Obsidian-Code-Styler.git
synced 2026-07-22 08:10:29 +00:00
update
This commit is contained in:
mayurankv
parent
858dc33c73
commit
d91f5afd69
78 changed files with 1415 additions and 754 deletions
4
.todo
4
.todo
|
|
@ -10,7 +10,6 @@ Refactor:
|
|||
☐ SettingsTabs
|
||||
☐ On command, use a value to determine whether the blocks are folderd, unfolded or null and set new blocks by that
|
||||
☐ Should be on a page by page basis
|
||||
☐ Colourised Bracket matching and line under to match vs code setup
|
||||
☐ Checks:
|
||||
☐ Check wrapped and active unwrap looks and works ok in live preview
|
||||
☐ Fixes:
|
||||
|
|
@ -43,7 +42,8 @@ Refactor:
|
|||
☐ Update actions to use https://docs.obsidian.md/Reference/TypeScript+API/Workspace/activeEditor
|
||||
|
||||
Next Refactor:
|
||||
☐ Split CSS into fence and inline folders with names that relate directly to what the css does i.e. layout, highlighting, border, spacing, heaer, footer etc.
|
||||
☐ Colourised Bracket matching and line under to match vs code setup
|
||||
☐ Add fence border scss file and make sure all spacing and styling is properly split
|
||||
☐ Make external reference titles link but remain styled
|
||||
☐ Add styles not exposed to style settings or settings for padding and margin settings
|
||||
☐ add default code icon svg based on < > icon and reference code icon svg
|
||||
|
|
|
|||
22
main.js
22
main.js
File diff suppressed because one or more lines are too long
|
|
@ -65,7 +65,7 @@
|
|||
},
|
||||
"contributors": [
|
||||
"Mayuran Visakan <mayuran.k.v@gmail.com>",
|
||||
"mugiwara85 <65603765+mugiwara85@importrs.noreply.github.com>",
|
||||
"mugiwara85 <65603765+mugiwara85@forwardrs.noreply.github.com>",
|
||||
"Zsolt Szalai <kampimester@gmail.com>",
|
||||
"Dimava <dimava2@ya.ru>",
|
||||
"Michael Naumov <mnaoumov@gmail.com>"
|
||||
|
|
|
|||
|
|
@ -15,14 +15,19 @@ export function getLineClasses(
|
|||
lineNumber: number,
|
||||
line: string,
|
||||
): Array<string> {
|
||||
let highlightClasses = Object.entries({ default: fenceCodeParameters.highlights.default, ...fenceCodeParameters.highlights.alternative }).filter(
|
||||
([highlightName, highlights]: [string, Highlights]) => toHighlight(highlights, lineNumber + (fenceCodeParameters.lineNumbers.offset ?? 0), line)
|
||||
).map(
|
||||
([highlightName, highlights]: [string, Highlights]) => `${PREFIX}highlighted-${toKebabCase(highlightName)}`
|
||||
)
|
||||
|
||||
const classList = [
|
||||
PREFIX + "line",
|
||||
...(fenceCodeParameters.language ? [`language-${fenceCodeParameters.language}`] : []),
|
||||
...Object.entries({ default: fenceCodeParameters.highlights.default, ...fenceCodeParameters.highlights.alternative }).filter(
|
||||
([highlightName, highlights]: [string, Highlights]) => toHighlight(highlights, lineNumber + (fenceCodeParameters.lineNumbers.offset ?? 0), line)
|
||||
).map(
|
||||
([highlightName, highlights]: [string, Highlights]) => `${PREFIX}highlighted-${toKebabCase(highlightName)}`
|
||||
),
|
||||
...(highlightClasses.length > 0 ? [
|
||||
...highlightClasses,
|
||||
`${PREFIX}highlighted`,
|
||||
] : []),
|
||||
]
|
||||
|
||||
return classList;
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
@import "obsidian/init.scss";
|
||||
|
|
@ -1 +0,0 @@
|
|||
@import "pdf.scss";
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
@use "comments.scss";
|
||||
@use "filler.scss";
|
||||
|
|
@ -1,686 +0,0 @@
|
|||
@include active {
|
||||
--cs-language-border-header-colour: var(--cs-fence-header-background-colour);
|
||||
--cs-language-border-separator-colour: var(--cs-fence-header-separator-background-colour);
|
||||
--cs-language-border-gutter-colour: var(--cs-fence-gutter-background-colour);
|
||||
|
||||
.cs-pre-parent,
|
||||
.markdown-source-view *:not(.cm-embed-block) > {
|
||||
div.cs-header {
|
||||
font-size: var(--font-text-size);
|
||||
box-sizing: content-box;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
position: sticky;
|
||||
left: 0;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
border-bottom: var(--size-2-1) solid transparent;
|
||||
background-color: var(--cs-fence-header-background-colour);
|
||||
z-index: 4;
|
||||
padding-bottom: var(--size-4-2);
|
||||
grid-column: span 2;
|
||||
// overflow-x: hidden;
|
||||
// overflow-y: hidden;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: calc(-1 * var(--size-4-3));
|
||||
left: calc(-1 * calc(var(--size-4-4) - var(--cs-fence-gutter-language-border-size)));
|
||||
// right: calc(-1 * calc(var(--size-4-12) + var(--cs-fence-fade-width)));
|
||||
right: calc(-1 * var(--cs-fence-fade-width));
|
||||
bottom: 0;
|
||||
background: inherit;
|
||||
z-index: 2;
|
||||
box-shadow: calc(-1 * var(--cs-fence-gutter-language-border-size)) 0 0px var(--cs-language-border-header-colour);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: calc(-1 * var(--size-2-1));
|
||||
top: 0;
|
||||
left: calc(-1 * calc(var(--size-4-4) - var(--cs-fence-gutter-language-border-size)));
|
||||
// right: calc(-1 * calc(var(--size-4-12) + var(--cs-fence-fade-width)));
|
||||
right: calc(-1 * var(--cs-fence-fade-width));
|
||||
z-index: 1;
|
||||
opacity: 1;
|
||||
transition-property: opacity;
|
||||
transition-duration: var(--cs-transition-length-fold);
|
||||
transition-timing-function: ease-in-out;
|
||||
background-color: var(--cs-fence-header-separator-background-colour);
|
||||
box-shadow: calc(-1 * var(--cs-fence-gutter-language-border-size)) 0 0px var(--cs-language-border-separator-colour);
|
||||
}
|
||||
|
||||
&:hover button{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 0 0 auto;
|
||||
// overflow: overlay;
|
||||
white-space: nowrap;
|
||||
z-index: inherit;
|
||||
|
||||
margin-right: var(--size-4-3);
|
||||
}
|
||||
|
||||
> div.cs-icon-container {
|
||||
height: 100%;
|
||||
|
||||
img.cs-icon {
|
||||
width: var(--cs-fence-header-icon-size);
|
||||
height: var(--cs-fence-header-icon-size);
|
||||
filter: var(--cs-fence-header-icon-gray-scale);
|
||||
}
|
||||
}
|
||||
|
||||
> div.cs-language-title {
|
||||
background-color: var(--cs-fence-header-language-title-background-colour);
|
||||
color: var(--cs-fence-header-language-title-text-colour);
|
||||
font-family: var(--cs-fence-header-language-title-font-family);
|
||||
font-style: var(--cs-fence-header-language-title-font-style);
|
||||
font-weight: var(--cs-fence-header-language-title-font-weight);
|
||||
|
||||
position: relative;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding-left: var(--size-4-2);
|
||||
padding-right: var(--size-4-2);
|
||||
border-radius: var(--cs-fence-curvature);
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
background: var(--cs-fence-header-language-title-background-colour);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: var(--cs-fence-curvature) var(--cs-fence-curvature) 0 0;
|
||||
padding-bottom: var(--size-4-2);
|
||||
z-index: -1;
|
||||
box-shadow: 0 calc(-1 * var(--size-4-2)) var(--cs-fence-header-language-title-background-colour)
|
||||
}
|
||||
}
|
||||
|
||||
> div.cs-named-title {
|
||||
background-color: var(--cs-fence-header-named-title-background-colour);
|
||||
color: var(--cs-fence-header-named-title-text-colour);
|
||||
font-family: var(--cs-fence-header-named-title-font-family);
|
||||
font-style: var(--cs-fence-header-named-title-font-style);
|
||||
font-weight: var(--cs-fence-header-named-title-font-weight);
|
||||
|
||||
position: relative;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
overflow-x: auto;
|
||||
flex: 0 1 auto;
|
||||
margin-right: var(--size-4-1);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: sticky;
|
||||
left: 0;
|
||||
background: linear-gradient(to left, transparent, var(--cs-fence-fade-gradient-stop), var(--cs-fence-header-background-colour));
|
||||
min-width: var(--size-4-3);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: sticky;
|
||||
right: 0;
|
||||
background: linear-gradient(to right, transparent, var(--cs-fence-fade-gradient-stop), var(--cs-fence-header-background-colour));
|
||||
min-width: var(--size-4-3);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> div.cs-external-reference {
|
||||
background-color: var(--cs-fence-header-external-reference-title-background-colour);
|
||||
color: var(--cs-fence-header-external-reference-title-text-colour);
|
||||
font-family: var(--cs-fence-header-external-reference-title-font-family);
|
||||
font-style: var(--cs-fence-header-external-reference-title-font-style);
|
||||
font-weight: var(--cs-fence-header-external-reference-title-font-weight);
|
||||
|
||||
position: relative;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
overflow-x: auto;
|
||||
flex: 0 1 auto;
|
||||
margin-right: var(--size-4-1);
|
||||
|
||||
> div {
|
||||
padding-left: var(--size-4-2);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
div.cs-external-reference-repository,
|
||||
div.cs-external-reference-repository-icon {
|
||||
color: var(--cs-fence-header-external-reference-title-repository-colour);
|
||||
}
|
||||
|
||||
div.cs-external-reference-version,
|
||||
div.cs-external-reference-version-icon {
|
||||
color: var(--cs-fence-header-external-reference-title-version-colour);
|
||||
}
|
||||
|
||||
div.cs-external-reference-timestamp,
|
||||
div.cs-external-reference-timestamp-icon {
|
||||
color: var(--cs-fence-header-external-reference-title-timestamp-colour);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button {
|
||||
// opacity: 0;
|
||||
box-shadow: none;
|
||||
height: 100%;
|
||||
margin-left: var(--size-4-2);
|
||||
padding-left: var(--size-4-2);
|
||||
padding-right: var(--size-4-2);
|
||||
|
||||
background-color: var(--cs-fence-button-inactive-background-colour);
|
||||
color: var(--cs-fence-button-inactive-colour);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--cs-fence-button-hover-background-colour);
|
||||
color: var(--cs-fence-button-hover-colour);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--cs-fence-button-active-background-colour);
|
||||
color: var(--cs-fence-button-active-colour);
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: sticky;
|
||||
left: 0;
|
||||
background: linear-gradient(to left, transparent, var(--cs-fence-fade-gradient-stop), var(--cs-fence-header-background-colour));
|
||||
min-width: var(--size-4-3);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: sticky;
|
||||
right: 0;
|
||||
background: linear-gradient(to right, transparent, var(--cs-fence-fade-gradient-stop), var(--cs-fence-header-background-colour));
|
||||
min-width: var(--size-4-3);
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
> div.cs-execute-code-title {
|
||||
background-color: var(--cs-fence-header-execute-code-title-background-colour);
|
||||
color: var(--cs-fence-header-execute-code-title-text-colour);
|
||||
font-family: var(--cs-fence-header-execute-code-title-font-family);
|
||||
font-style: var(--cs-fence-header-execute-code-title-font-style);
|
||||
font-weight: var(--cs-fence-header-execute-code-title-font-weight);
|
||||
|
||||
position: relative;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// > button.cs-copy-code-button,
|
||||
> button.cs-edit-code-button {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
> div.cs-separator {
|
||||
color: var(--cs-fence-header-separator-background-colour);
|
||||
}
|
||||
}
|
||||
|
||||
div.cs-footer {
|
||||
text-align: center;
|
||||
height: var(--size-4-4);
|
||||
// max-height: var(--size-4-4);
|
||||
position: relative;
|
||||
left: 0;
|
||||
// transition-property: max-height;
|
||||
// transition-duration: var(--cs-transition-length-fold);
|
||||
// transition-timing-function: ease-in-out;
|
||||
|
||||
&[data-cs-fold="true"] {
|
||||
// max-height: unset;
|
||||
// padding-bottom: var(--size-4-3);
|
||||
}
|
||||
|
||||
button {
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
box-shadow: none;
|
||||
background-color: var(--cs-fence-button-inactive-background-colour);
|
||||
color: var(--cs-fence-button-inactive-colour);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--cs-fence-button-hover-background-colour);
|
||||
color: var(--cs-fence-button-hover-colour);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--cs-fence-button-active-background-colour);
|
||||
color: var(--cs-fence-button-active-colour);
|
||||
}
|
||||
}
|
||||
// button {
|
||||
// margin-left: var(--size-4-2);
|
||||
// padding-left: var(--size-4-2);
|
||||
// padding-right: var(--size-4-2);
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
div.cs-header[data-cs-fold="true"] button.cs-fold-code-button > svg {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
div.cs-header,
|
||||
div.cs-footer {
|
||||
button {
|
||||
padding-left: var(--size-4-2);
|
||||
padding-right: var(--size-4-2);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
button.copy-code-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button.cs-edit-code-button,
|
||||
button.cs-copy-code-button,
|
||||
button.cs-fold-code-button {
|
||||
display: block;
|
||||
// position: sticky;
|
||||
// top: 0;
|
||||
// left: calc(100% - 32px);
|
||||
// grid-row: 1;
|
||||
// padding: 0;
|
||||
// margin: 0;
|
||||
// margin-left: var(--size-4-4);
|
||||
// margin-bottom: var(--size-4-2);
|
||||
z-index: 4;
|
||||
opacity: 0;
|
||||
|
||||
background-color: var(--cs-fence-button-inactive-background-colour);
|
||||
color: var(--cs-fence-button-inactive-colour);
|
||||
|
||||
> svg {
|
||||
// position: sticky;
|
||||
// left: 0;
|
||||
z-index: inherit;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--cs-fence-button-hover-background-colour);
|
||||
color: var(--cs-fence-button-hover-colour);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--cs-fence-button-active-background-colour);
|
||||
color: var(--cs-fence-button-active-colour);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pre.cs-pre button,
|
||||
div.cm-line:not(.cm-embed-block).cs-line button {
|
||||
transition-property: opacity, background-color, color, transform;
|
||||
transition-duration: var(--cs-transition-length-button);
|
||||
transition-timing-function: ease-in-out;
|
||||
box-shadow: none;
|
||||
opacity: 0;
|
||||
|
||||
& > svg{
|
||||
transition-property: transform;
|
||||
transition-duration: var(--cs-transition-length-button);
|
||||
transition-timing-function: ease-in-out;
|
||||
};
|
||||
};
|
||||
|
||||
pre.cs-pre:hover div button,
|
||||
div.cm-line:not(.cm-embed-block).cs-line.cs-hover button {
|
||||
opacity: 1 !important;
|
||||
};
|
||||
|
||||
div.cm-line:not(.cm-embed-block):not(.HyperMD-codeblock-begin).cs-line.cs-highlighted-default::after {
|
||||
display: inline-block;
|
||||
position: sticky;
|
||||
width: 100%;
|
||||
// width: var(--size-4-3);
|
||||
// left: 100%;
|
||||
background: linear-gradient(to right, yellow, var(--cs-fence-highlights-gradient-highlights-colour-stop), yellow);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: calc(1em * var(--line-height-normal));
|
||||
margin-bottom: calc(-1 * (var(--line-height-normal) - 1) * 1em);
|
||||
}
|
||||
|
||||
.cs-pre-parent {
|
||||
> pre.cs-pre {
|
||||
border-radius: var(--cs-fence-curvature);
|
||||
background-color: var(--cs-fence-background-colour);
|
||||
overflow-x: auto;
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: calc(100% - var(--size-4-12)) var(--size-4-12);
|
||||
padding-right: var(--cs-fence-fade-width);
|
||||
padding-bottom: 0;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
background: linear-gradient(to right, transparent, var(--cs-fence-fade-gradient-stop), var(--cs-fence-background-colour));
|
||||
position: sticky;
|
||||
left: 100%;
|
||||
margin-right: calc(-1 * var(--size-4-3));
|
||||
width: var(--size-4-3);
|
||||
height: 100%;
|
||||
z-index: 3;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
> div.cs-header {
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
> code.cs-code {
|
||||
display: grid;
|
||||
grid-row: 2;
|
||||
grid-column: span 2;
|
||||
// grid-column-start: 1;
|
||||
// grid-column-end: 2;
|
||||
grid-template-columns: min-content auto;
|
||||
grid-template-rows: auto;
|
||||
overflow: visible;
|
||||
width: max-content;
|
||||
padding-right: var(--cs-fence-fade-width);
|
||||
padding-top: var(--size-4-1);
|
||||
|
||||
max-height: unset;
|
||||
opacity: 1;
|
||||
transition-property: max-height, opacity, color;
|
||||
transition-duration: var(--cs-transition-length-fold);
|
||||
transition-timing-function: ease-in-out;
|
||||
|
||||
&[data-cs-wrap = "unwrapped"],
|
||||
&[data-cs-wrap = "unwrapped-inactive"]:not(:active) {
|
||||
width: max-content;
|
||||
padding-right: var(--cs-fence-fade-width);
|
||||
}
|
||||
|
||||
&[data-cs-wrap = "wrapped"],
|
||||
&[data-cs-wrap = "unwrapped-inactive"]:active {
|
||||
width: unset;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
> div.cs-line {
|
||||
display: contents;
|
||||
|
||||
&,
|
||||
* {
|
||||
transition-property: opacity, color, background-color, border;
|
||||
transition-duration: var(--cs-transition-length-fold);
|
||||
transition-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
// transition-property: opacity, color;
|
||||
// transition-duration: var(--cs-transition-length-fold);
|
||||
// transition-timing-function: ease-in-out;
|
||||
|
||||
> div.cs-line-text {
|
||||
overflow: visible;
|
||||
// overflow: /;
|
||||
grid-column: 2;
|
||||
color: var(--cs-fence-text-colour);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> div.cs-footer {
|
||||
grid-row: 3;
|
||||
grid-column: span 2;
|
||||
|
||||
// &::before {
|
||||
// content: "";
|
||||
// position: absolute;
|
||||
// // top: calc(-1 * var(--size-4-3));
|
||||
// // left: calc(-1 * calc(var(--size-4-4) - var(--cs-fence-gutter-language-border-size)));
|
||||
// // right: calc(-1 * calc(var(--size-4-12) + var(--cs-fence-fade-width)));
|
||||
// bottom: 0;
|
||||
// background: inherit;
|
||||
// z-index: 2;
|
||||
// box-shadow: calc(-1 * var(--cs-fence-gutter-language-border-size)) 0 0px var(--cs-language-border-gutter-colour);
|
||||
// }
|
||||
|
||||
button.cs-fold-code-button {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pre.cs-pre[data-cs-fold="true"] {
|
||||
div.cs-header[data-cs-fold="true"] {
|
||||
&::after {
|
||||
// opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
> code.cs-code {
|
||||
max-height: 0 !important;
|
||||
// opacity: 0;
|
||||
// overflow: hidden;
|
||||
// visibility: hidden;
|
||||
// div.cs-line,
|
||||
div.cs-line * {
|
||||
color: rgba(0,0,0,0) !important;
|
||||
--cs-fence-gutter-background-colour: var(--cs-fence-background-colour);
|
||||
--cs-fence-gutter-border-colour: var(--cs-fence-background-colour);
|
||||
|
||||
a.external-link {
|
||||
background: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.cs-fold-code-button {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-source-view {
|
||||
div.cm-embed-block {
|
||||
&:not(.cm-table-widget):has(> .cs-pre-parent) {
|
||||
border-radius: var(--cs-fence-curvature);
|
||||
}
|
||||
}
|
||||
|
||||
div.cm-line:not(.cs-line) > div.cs-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.HyperMD-codeblock-begin.cs-line,
|
||||
div.HyperMD-codeblock-end.cs-line {
|
||||
--cs-fence-gutter-border-colour: var(--cs-fence-background-colour);
|
||||
|
||||
white-space: pre-wrap !important;
|
||||
// z-index: -10;
|
||||
// overflow: hidden;
|
||||
|
||||
span.cm-hmd-codeblock {
|
||||
// display: inline;
|
||||
// height: var(--size-4-1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
div.HyperMD-codeblock-begin.cs-line:has(div.cs-header),
|
||||
div.HyperMD-codeblock-end.cs-line:has(div.cs-footer) {
|
||||
.cm-widgetBuffer {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
div.HyperMD-codeblock-begin.cs-line + div.cs-line {
|
||||
padding-top: var(--size-4-1) !important;
|
||||
}
|
||||
|
||||
div.cm-line:not(.cm-embed-block).cs-line {
|
||||
background: linear-gradient(to right, var(--cs-language-border-gutter-colour) var(--cs-fence-gutter-language-border-size), var(--cs-fence-gutter-background-colour) var(--cs-fence-gutter-language-border-size) calc(var(--size-4-4) + var(--cs-gutter-char-size) + var(--size-4-3)), var(--cs-fence-background-colour) calc(var(--size-4-4) + var(--cs-gutter-char-size) + var(--size-4-3)));
|
||||
color: var(--cs-fence-text-colour);
|
||||
padding-left: calc(var(--size-4-4) + var(--cs-gutter-char-size) + var(--size-4-3) + var(--size-2-1) + var(--size-4-3));
|
||||
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
|
||||
padding-right: var(--cs-fence-fade-width);
|
||||
|
||||
font-family: var(--font-monospace);
|
||||
font-size: var(--code-size);
|
||||
|
||||
// display: inline;
|
||||
|
||||
// &::before {
|
||||
// display: block;
|
||||
// content: "";
|
||||
// width: 10px;
|
||||
// height: 100%;
|
||||
// background-color: pink;;
|
||||
// }
|
||||
|
||||
&:has(div.cs-header) {
|
||||
padding-left: var(--size-4-4);
|
||||
}
|
||||
|
||||
div.cs-header {
|
||||
padding-top: var(--size-4-3);
|
||||
|
||||
&::before {
|
||||
box-shadow: none;
|
||||
// box-shadow: calc(-1 * var(--size-4-1)) 0 0px var(--cs-language-border-header-colour);
|
||||
// box-shadow: calc(-1 * var(--size-4-4)) 0 0px var(--cs-language-border-separator-colour), calc(-2 * var(--size-4-4)) 0 0px var(--cs-language-border-gutter-colour);
|
||||
}
|
||||
|
||||
&::after {
|
||||
box-shadow: none;
|
||||
// box-shadow: calc(-1 * var(--size-4-1)) 0 0px var(--cs-language-border-separator-colour)
|
||||
// box-shadow: calc(-1 * var(--size-4-1)) 0 0px var(--cs-language-border-header-colour);
|
||||
// box-shadow: calc(-1 * var(--size-4-4)) 0 0px var(--cs-language-border-separator-colour), calc(-2 * var(--size-4-4)) 0 0px var(--cs-language-border-gutter-colour);
|
||||
}
|
||||
}
|
||||
|
||||
span.code-block-flair {
|
||||
z-index: 5;
|
||||
display: none;
|
||||
}
|
||||
|
||||
// span:not(.cs-line-number) {
|
||||
// grid-column: 2;
|
||||
// grid-row: 1;
|
||||
// overflow-wrap: break-word;
|
||||
// }
|
||||
|
||||
div.cs-footer {
|
||||
margin-left: calc(-1 * calc(var(--cs-gutter-char-size) + var(--size-4-3) + var(--size-2-1) + var(--size-4-3)));
|
||||
// margin-right: var(--cs-fence-fade-width);
|
||||
// width: calc(100% - var(--cs-fence-fade-width));
|
||||
|
||||
button {
|
||||
// opacity: 1;
|
||||
display: inline-flex;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button {
|
||||
// opacity: 1;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
div.cs-line:has(div.cs-header):has( + div[contenteditable="false"] + div.cs-line > div.cs-footer) {
|
||||
// --cs-fence-header-separator-background-colour: var(--cs-fence-header-background-colour)
|
||||
}
|
||||
|
||||
div.cm-line:not(.cm-embed-block).cs-line:not(.HyperMD-codeblock-begin):not(.HyperMD-codeblock-end) {
|
||||
&::before {
|
||||
content: "";
|
||||
background: linear-gradient(to right, transparent, var(--cs-fence-fade-gradient-stop), var(--cs-fence-background-colour));
|
||||
position: sticky;
|
||||
left: 100%;
|
||||
margin-right: calc(-1 * var(--size-4-3));
|
||||
width: var(--size-4-3);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
// height: 100%;
|
||||
height: calc(1em * var(--line-height-normal));
|
||||
margin-bottom: calc(-1 * calc(var(--line-height-normal) - 1) * 1em);
|
||||
// z-index: 3;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&.cs-unwrap-false {
|
||||
.cs-pre-parent {
|
||||
> pre.cs-pre {
|
||||
> code.cs-code:not([cs-data-wrap]) {
|
||||
width: unset;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.cs-unwrap-inactive {
|
||||
.cs-pre-parent {
|
||||
> pre.cs-pre {
|
||||
> code.cs-code:not([cs-data-wrap]):active {
|
||||
width: unset;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.cs-line.cm-active {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
@use "decorations/init.scss";
|
||||
|
|
@ -1 +0,0 @@
|
|||
@use "comments.scss";
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
@use "header.scss";
|
||||
@use "footer.scss";
|
||||
@use "spacing.scss";
|
||||
@use "styling.scss";
|
||||
@use "syntaxHighlighting.scss";
|
||||
@use "decorations/init.scss";
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
@use "frontmatter.scss";
|
||||
@use "hidden.scss";
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
@use "advanced-slides/fence.scss";
|
||||
@use "advanced-slides/inline.scss";
|
||||
@use "code-emitter/fence.scss" as fence2;
|
||||
@use "code-emitter/inline.scss" as inline2;
|
||||
@use "embed-code/fence.scss" as fence3;
|
||||
@use "embed-code/inline.scss" as inline3;
|
||||
@use "execute-code/fence.scss" as fence4;
|
||||
@use "execute-code/inline.scss" as inline4;
|
||||
@use "file-include/fence.scss" as fence5;
|
||||
@use "file-include/inline.scss" as inline5;
|
||||
@use "slides/fence.scss" as fence6;
|
||||
@use "slides/inline.scss" as inline6;
|
||||
|
|
@ -1 +0,0 @@
|
|||
@use "mixins.scss";
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
@use "settings.scss";
|
||||
@use "styleSettings";
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
//TODO: To remove
|
||||
@include active {
|
||||
@use "../../scss/mixins";
|
||||
|
||||
@include mixins.active {
|
||||
//TODO: Testing
|
||||
// --cs-fence-gutter-background-colour: red !important;
|
||||
// --cs-fence-header-background-colour: yellow !important;
|
||||
|
|
@ -11,7 +13,9 @@
|
|||
// z-index: 10
|
||||
// }
|
||||
|
||||
@include active {
|
||||
@use "../../scss/mixins";
|
||||
|
||||
@include mixins.active {
|
||||
//TODO: To add directly
|
||||
//TODO add: border colours, border sizes, margins and padding and heights and widths
|
||||
--cs-fence-gutter-active-text-colour: var(--code-normal);
|
||||
|
|
@ -1,4 +1,6 @@
|
|||
@include active {
|
||||
@use "../../scss/mixins";
|
||||
|
||||
@include mixins.active {
|
||||
&.theme-light {
|
||||
code.cs-shiki:not([class*=blur]):not(.cs-shiki-dark):not(.cs-shiki-light),
|
||||
code.cs-shiki:not([class*=blur]):not(.cs-shiki-dark):not(.cs-shiki-light) > span:not(.cs-header):not(.cs-footer) > span:not(.cs-icon-container) {
|
||||
|
|
@ -24,7 +24,9 @@ body {
|
|||
|
||||
}
|
||||
|
||||
@include active {
|
||||
@use "../../scss/mixins";
|
||||
|
||||
@include mixins.active {
|
||||
pre.cs-pre {
|
||||
[class*='language-'] {
|
||||
background: linear-gradient(90deg, var(--language-border-colour), var(--language-border-colour) var(--language-border-width), var(--code-styler-codeblock-background-colour) var(--language-border-width), var(--code-styler-codeblock-background-colour) 100%), var(--code-styler-codeblock-background-colour) !important;
|
||||
|
|
@ -2,7 +2,9 @@ div.print {
|
|||
--line-wrapping: pre-wrap !important;
|
||||
}
|
||||
|
||||
@include active {
|
||||
@use "../../scss/mixins";
|
||||
|
||||
@include mixins.active {
|
||||
div.print {
|
||||
pre.code-styler-pre {
|
||||
code {
|
||||
1
src/scss/export/_index.scss
Normal file
1
src/scss/export/_index.scss
Normal file
|
|
@ -0,0 +1 @@
|
|||
@forward "obsidian";
|
||||
1
src/scss/export/obsidian/_index.scss
Normal file
1
src/scss/export/obsidian/_index.scss
Normal file
|
|
@ -0,0 +1 @@
|
|||
@forward "pdf";
|
||||
7
src/scss/fence/_index.scss
Normal file
7
src/scss/fence/_index.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
@forward "header";
|
||||
@forward "lines";
|
||||
@forward "footer";
|
||||
@forward "spacing";
|
||||
@forward "styling";
|
||||
@forward "syntaxHighlighting";
|
||||
@forward "decorations";
|
||||
165
src/scss/fence/buttons.scss
Normal file
165
src/scss/fence/buttons.scss
Normal file
|
|
@ -0,0 +1,165 @@
|
|||
@use "../scss/mixins";
|
||||
|
||||
@include mixins.active {
|
||||
.cs-pre-parent,
|
||||
.markdown-source-view *:not(.cm-embed-block) > {
|
||||
div.cs-header {
|
||||
&:hover button{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
> div.cs-external-reference button {
|
||||
// opacity: 0;
|
||||
box-shadow: none;
|
||||
height: 100%;
|
||||
margin-left: var(--size-4-2);
|
||||
padding-left: var(--size-4-2);
|
||||
padding-right: var(--size-4-2);
|
||||
|
||||
background-color: var(--cs-fence-button-inactive-background-colour);
|
||||
color: var(--cs-fence-button-inactive-colour);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--cs-fence-button-hover-background-colour);
|
||||
color: var(--cs-fence-button-hover-colour);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--cs-fence-button-active-background-colour);
|
||||
color: var(--cs-fence-button-active-colour);
|
||||
}
|
||||
}
|
||||
|
||||
// > button.cs-copy-code-button,
|
||||
> button.cs-edit-code-button {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
div.cs-footer button {
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
box-shadow: none;
|
||||
background-color: var(--cs-fence-button-inactive-background-colour);
|
||||
color: var(--cs-fence-button-inactive-colour);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--cs-fence-button-hover-background-colour);
|
||||
color: var(--cs-fence-button-hover-colour);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--cs-fence-button-active-background-colour);
|
||||
color: var(--cs-fence-button-active-colour);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.cs-header[data-cs-fold="true"] button.cs-fold-code-button > svg {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
div.cs-header,
|
||||
div.cs-footer {
|
||||
button {
|
||||
padding-left: var(--size-4-2);
|
||||
padding-right: var(--size-4-2);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
button.copy-code-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button.cs-edit-code-button,
|
||||
button.cs-copy-code-button,
|
||||
button.cs-fold-code-button {
|
||||
display: block;
|
||||
// position: sticky;
|
||||
// top: 0;
|
||||
// left: calc(100% - 32px);
|
||||
// grid-row: 1;
|
||||
// padding: 0;
|
||||
// margin: 0;
|
||||
// margin-left: var(--size-4-4);
|
||||
// margin-bottom: var(--size-4-2);
|
||||
z-index: 4;
|
||||
opacity: 0;
|
||||
|
||||
background-color: var(--cs-fence-button-inactive-background-colour);
|
||||
color: var(--cs-fence-button-inactive-colour);
|
||||
|
||||
> svg {
|
||||
// position: sticky;
|
||||
// left: 0;
|
||||
z-index: inherit;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--cs-fence-button-hover-background-colour);
|
||||
color: var(--cs-fence-button-hover-colour);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--cs-fence-button-active-background-colour);
|
||||
color: var(--cs-fence-button-active-colour);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pre.cs-pre button,
|
||||
div.cm-line:not(.cm-embed-block).cs-line button {
|
||||
transition-property: opacity, background-color, color, transform;
|
||||
transition-duration: var(--cs-transition-length-button);
|
||||
transition-timing-function: ease-in-out;
|
||||
box-shadow: none;
|
||||
opacity: 0;
|
||||
|
||||
& > svg{
|
||||
transition-property: transform;
|
||||
transition-duration: var(--cs-transition-length-button);
|
||||
transition-timing-function: ease-in-out;
|
||||
};
|
||||
};
|
||||
|
||||
pre.cs-pre:hover div button,
|
||||
div.cm-line:not(.cm-embed-block).cs-line.cs-hover button {
|
||||
opacity: 1 !important;
|
||||
};
|
||||
|
||||
.cs-pre-parent {
|
||||
> pre.cs-pre {
|
||||
> div.cs-footer button.cs-fold-code-button {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
&[data-cs-fold="true"] {
|
||||
button.cs-fold-code-button {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-source-view {
|
||||
div.cm-line:not(.cm-embed-block).cs-line {
|
||||
span.code-block-flair {
|
||||
z-index: 5;
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.cs-footer {
|
||||
button {
|
||||
// opacity: 1;
|
||||
display: inline-flex;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
// opacity: 1;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
4
src/scss/fence/decorations/_index.scss
Normal file
4
src/scss/fence/decorations/_index.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
@forward "comments";
|
||||
@forward "filler";
|
||||
@forward "lineNumbers";
|
||||
@forward "highlights";
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@use "mixins.scss";
|
||||
@use "../../scss/mixins";
|
||||
|
||||
@include mixins.active {
|
||||
.cs-pre-parent,
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@use "mixins.scss";
|
||||
@use "../../scss/mixins";
|
||||
|
||||
@include mixins.active {
|
||||
.markdown-source-view {
|
||||
16
src/scss/fence/decorations/highlights.scss
Normal file
16
src/scss/fence/decorations/highlights.scss
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
@use "../../scss/mixins";
|
||||
|
||||
// @include mixins.active {
|
||||
// div.cm-line:not(.cm-embed-block):not(.HyperMD-codeblock-begin).cs-line.cs-highlighted-default::after {
|
||||
// display: inline-block;
|
||||
// position: sticky;
|
||||
// width: 100%;
|
||||
// // width: var(--size-4-3);
|
||||
// // left: 100%;
|
||||
// background: linear-gradient(to right, yellow, var(--cs-fence-highlights-gradient-highlights-colour-stop), yellow);
|
||||
// top: 0;
|
||||
// bottom: 0;
|
||||
// height: calc(1em * var(--line-height-normal));
|
||||
// margin-bottom: calc(-1 * (var(--line-height-normal) - 1) * 1em);
|
||||
// }
|
||||
// }
|
||||
|
|
@ -1,4 +1,6 @@
|
|||
@include active {
|
||||
@use "../../scss/mixins";
|
||||
|
||||
@include mixins.active {
|
||||
.cs-pre-parent,
|
||||
.markdown-source-view *:not(.cm-embed-block) > {
|
||||
.cs-line-number {
|
||||
76
src/scss/fence/footer.scss
Normal file
76
src/scss/fence/footer.scss
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
@use "../scss/mixins";
|
||||
|
||||
@include mixins.active {
|
||||
.cs-pre-parent,
|
||||
.markdown-source-view *:not(.cm-embed-block) > {
|
||||
div.cs-footer {
|
||||
text-align: center;
|
||||
height: var(--size-4-4);
|
||||
// max-height: var(--size-4-4);
|
||||
position: relative;
|
||||
left: 0;
|
||||
// transition-property: max-height;
|
||||
// transition-duration: var(--cs-transition-length-fold);
|
||||
// transition-timing-function: ease-in-out;
|
||||
|
||||
&[data-cs-fold="true"] {
|
||||
// max-height: unset;
|
||||
// padding-bottom: var(--size-4-3);
|
||||
}
|
||||
|
||||
button {
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
box-shadow: none;
|
||||
background-color: var(--cs-fence-button-inactive-background-colour);
|
||||
color: var(--cs-fence-button-inactive-colour);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--cs-fence-button-hover-background-colour);
|
||||
color: var(--cs-fence-button-hover-colour);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--cs-fence-button-active-background-colour);
|
||||
color: var(--cs-fence-button-active-colour);
|
||||
}
|
||||
}
|
||||
// button {
|
||||
// margin-left: var(--size-4-2);
|
||||
// padding-left: var(--size-4-2);
|
||||
// padding-right: var(--size-4-2);
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.cs-pre-parent {
|
||||
> pre.cs-pre {
|
||||
> div.cs-footer {
|
||||
grid-row: 3;
|
||||
grid-column: span 2;
|
||||
|
||||
// &::before {
|
||||
// content: "";
|
||||
// position: absolute;
|
||||
// // top: calc(-1 * var(--size-4-3));
|
||||
// // left: calc(-1 * calc(var(--size-4-4) - var(--cs-fence-gutter-language-border-size)));
|
||||
// // right: calc(-1 * calc(var(--size-4-12) + var(--cs-fence-fade-width)));
|
||||
// bottom: 0;
|
||||
// background: inherit;
|
||||
// z-index: 2;
|
||||
// box-shadow: calc(-1 * var(--cs-fence-gutter-language-border-size)) 0 0px var(--cs-language-border-gutter-colour);
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-source-view {
|
||||
div.cm-line:not(.cm-embed-block).cs-line {
|
||||
div.cs-footer {
|
||||
margin-left: calc(-1 * calc(var(--cs-gutter-char-size) + var(--size-4-3) + var(--size-2-1) + var(--size-4-3)));
|
||||
// margin-right: var(--cs-fence-fade-width);
|
||||
// width: calc(100% - var(--cs-fence-fade-width));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
286
src/scss/fence/header.scss
Normal file
286
src/scss/fence/header.scss
Normal file
|
|
@ -0,0 +1,286 @@
|
|||
@use "../scss/mixins";
|
||||
|
||||
@include mixins.active {
|
||||
--cs-language-border-header-colour: var(--cs-fence-header-background-colour);
|
||||
--cs-language-border-separator-colour: var(--cs-fence-header-separator-background-colour);
|
||||
--cs-language-border-gutter-colour: var(--cs-fence-gutter-background-colour);
|
||||
|
||||
.cs-pre-parent,
|
||||
.markdown-source-view *:not(.cm-embed-block) > {
|
||||
div.cs-header {
|
||||
font-size: var(--font-text-size);
|
||||
box-sizing: content-box;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
position: sticky;
|
||||
left: 0;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
border-bottom: var(--size-2-1) solid transparent;
|
||||
background-color: var(--cs-fence-header-background-colour);
|
||||
z-index: 4;
|
||||
padding-bottom: var(--size-4-2);
|
||||
grid-column: span 2;
|
||||
// overflow-x: hidden;
|
||||
// overflow-y: hidden;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: calc(-1 * var(--size-4-3));
|
||||
left: calc(-1 * calc(var(--size-4-4) - var(--cs-fence-gutter-language-border-size)));
|
||||
// right: calc(-1 * calc(var(--size-4-12) + var(--cs-fence-fade-width)));
|
||||
right: calc(-1 * var(--cs-fence-fade-width));
|
||||
bottom: 0;
|
||||
background: inherit;
|
||||
z-index: 2;
|
||||
box-shadow: calc(-1 * var(--cs-fence-gutter-language-border-size)) 0 0px var(--cs-language-border-header-colour);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: calc(-1 * var(--size-2-1));
|
||||
top: 0;
|
||||
left: calc(-1 * calc(var(--size-4-4) - var(--cs-fence-gutter-language-border-size)));
|
||||
// right: calc(-1 * calc(var(--size-4-12) + var(--cs-fence-fade-width)));
|
||||
right: calc(-1 * var(--cs-fence-fade-width));
|
||||
z-index: 1;
|
||||
opacity: 1;
|
||||
transition-property: opacity;
|
||||
transition-duration: var(--cs-transition-length-fold);
|
||||
transition-timing-function: ease-in-out;
|
||||
background-color: var(--cs-fence-header-separator-background-colour);
|
||||
box-shadow: calc(-1 * var(--cs-fence-gutter-language-border-size)) 0 0px var(--cs-language-border-separator-colour);
|
||||
}
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 0 0 auto;
|
||||
// overflow: overlay;
|
||||
white-space: nowrap;
|
||||
z-index: inherit;
|
||||
|
||||
margin-right: var(--size-4-3);
|
||||
}
|
||||
|
||||
> div.cs-icon-container {
|
||||
height: 100%;
|
||||
|
||||
img.cs-icon {
|
||||
width: var(--cs-fence-header-icon-size);
|
||||
height: var(--cs-fence-header-icon-size);
|
||||
filter: var(--cs-fence-header-icon-gray-scale);
|
||||
}
|
||||
}
|
||||
|
||||
> div.cs-language-title {
|
||||
background-color: var(--cs-fence-header-language-title-background-colour);
|
||||
color: var(--cs-fence-header-language-title-text-colour);
|
||||
font-family: var(--cs-fence-header-language-title-font-family);
|
||||
font-style: var(--cs-fence-header-language-title-font-style);
|
||||
font-weight: var(--cs-fence-header-language-title-font-weight);
|
||||
|
||||
position: relative;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding-left: var(--size-4-2);
|
||||
padding-right: var(--size-4-2);
|
||||
border-radius: var(--cs-fence-curvature);
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
background: var(--cs-fence-header-language-title-background-colour);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: var(--cs-fence-curvature) var(--cs-fence-curvature) 0 0;
|
||||
padding-bottom: var(--size-4-2);
|
||||
z-index: -1;
|
||||
box-shadow: 0 calc(-1 * var(--size-4-2)) var(--cs-fence-header-language-title-background-colour)
|
||||
}
|
||||
}
|
||||
|
||||
> div.cs-named-title {
|
||||
background-color: var(--cs-fence-header-named-title-background-colour);
|
||||
color: var(--cs-fence-header-named-title-text-colour);
|
||||
font-family: var(--cs-fence-header-named-title-font-family);
|
||||
font-style: var(--cs-fence-header-named-title-font-style);
|
||||
font-weight: var(--cs-fence-header-named-title-font-weight);
|
||||
|
||||
position: relative;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
overflow-x: auto;
|
||||
flex: 0 1 auto;
|
||||
margin-right: var(--size-4-1);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: sticky;
|
||||
left: 0;
|
||||
background: linear-gradient(to left, transparent, var(--cs-fence-fade-gradient-stop), var(--cs-fence-header-background-colour));
|
||||
min-width: var(--size-4-3);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: sticky;
|
||||
right: 0;
|
||||
background: linear-gradient(to right, transparent, var(--cs-fence-fade-gradient-stop), var(--cs-fence-header-background-colour));
|
||||
min-width: var(--size-4-3);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> div.cs-external-reference {
|
||||
background-color: var(--cs-fence-header-external-reference-title-background-colour);
|
||||
color: var(--cs-fence-header-external-reference-title-text-colour);
|
||||
font-family: var(--cs-fence-header-external-reference-title-font-family);
|
||||
font-style: var(--cs-fence-header-external-reference-title-font-style);
|
||||
font-weight: var(--cs-fence-header-external-reference-title-font-weight);
|
||||
|
||||
position: relative;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
overflow-x: auto;
|
||||
flex: 0 1 auto;
|
||||
margin-right: var(--size-4-1);
|
||||
|
||||
> div {
|
||||
padding-left: var(--size-4-2);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
div.cs-external-reference-repository,
|
||||
div.cs-external-reference-repository-icon {
|
||||
color: var(--cs-fence-header-external-reference-title-repository-colour);
|
||||
}
|
||||
|
||||
div.cs-external-reference-version,
|
||||
div.cs-external-reference-version-icon {
|
||||
color: var(--cs-fence-header-external-reference-title-version-colour);
|
||||
}
|
||||
|
||||
div.cs-external-reference-timestamp,
|
||||
div.cs-external-reference-timestamp-icon {
|
||||
color: var(--cs-fence-header-external-reference-title-timestamp-colour);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: sticky;
|
||||
left: 0;
|
||||
background: linear-gradient(to left, transparent, var(--cs-fence-fade-gradient-stop), var(--cs-fence-header-background-colour));
|
||||
min-width: var(--size-4-3);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: sticky;
|
||||
right: 0;
|
||||
background: linear-gradient(to right, transparent, var(--cs-fence-fade-gradient-stop), var(--cs-fence-header-background-colour));
|
||||
min-width: var(--size-4-3);
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
> div.cs-execute-code-title {
|
||||
background-color: var(--cs-fence-header-execute-code-title-background-colour);
|
||||
color: var(--cs-fence-header-execute-code-title-text-colour);
|
||||
font-family: var(--cs-fence-header-execute-code-title-font-family);
|
||||
font-style: var(--cs-fence-header-execute-code-title-font-style);
|
||||
font-weight: var(--cs-fence-header-execute-code-title-font-weight);
|
||||
|
||||
position: relative;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
> div.cs-separator {
|
||||
color: var(--cs-fence-header-separator-background-colour);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cs-pre-parent {
|
||||
> pre.cs-pre > div.cs-header {
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
// > pre.cs-pre[data-cs-fold="true"] {
|
||||
// div.cs-header {
|
||||
// &::after {
|
||||
// opacity: 0.5;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
.markdown-source-view {
|
||||
div.cm-line:not(.cs-line) > div.cs-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.HyperMD-codeblock-begin.cs-line + div.cs-line {
|
||||
padding-top: var(--size-4-1) !important;
|
||||
}
|
||||
|
||||
div.cm-line:not(.cm-embed-block).cs-line {
|
||||
&:has(div.cs-header) {
|
||||
padding-left: var(--size-4-4);
|
||||
}
|
||||
|
||||
div.cs-header {
|
||||
padding-top: var(--size-4-3);
|
||||
|
||||
&::before {
|
||||
box-shadow: none;
|
||||
// box-shadow: calc(-1 * var(--size-4-1)) 0 0px var(--cs-language-border-header-colour);
|
||||
// box-shadow: calc(-1 * var(--size-4-4)) 0 0px var(--cs-language-border-separator-colour), calc(-2 * var(--size-4-4)) 0 0px var(--cs-language-border-gutter-colour);
|
||||
}
|
||||
|
||||
&::after {
|
||||
box-shadow: none;
|
||||
// box-shadow: calc(-1 * var(--size-4-1)) 0 0px var(--cs-language-border-separator-colour)
|
||||
// box-shadow: calc(-1 * var(--size-4-1)) 0 0px var(--cs-language-border-header-colour);
|
||||
// box-shadow: calc(-1 * var(--size-4-4)) 0 0px var(--cs-language-border-separator-colour), calc(-2 * var(--size-4-4)) 0 0px var(--cs-language-border-gutter-colour);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// div.cs-line:has(div.cs-header):has( + div[contenteditable="false"] + div.cs-line > div.cs-footer) {
|
||||
// --cs-fence-header-separator-background-colour: var(--cs-fence-header-background-colour)
|
||||
// }
|
||||
}
|
||||
}
|
||||
163
src/scss/fence/spacing.scss
Normal file
163
src/scss/fence/spacing.scss
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
@use "../scss/mixins";
|
||||
|
||||
@include mixins.active {
|
||||
.cs-pre-parent {
|
||||
> pre.cs-pre {
|
||||
overflow-x: auto;
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: calc(100% - var(--size-4-12)) var(--size-4-12);
|
||||
padding-right: var(--cs-fence-fade-width);
|
||||
padding-bottom: 0;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
background: linear-gradient(to right, transparent, var(--cs-fence-fade-gradient-stop), var(--cs-fence-background-colour));
|
||||
position: sticky;
|
||||
left: 100%;
|
||||
margin-right: calc(-1 * var(--size-4-3));
|
||||
width: var(--size-4-3);
|
||||
height: 100%;
|
||||
z-index: 3;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
> code.cs-code {
|
||||
display: grid;
|
||||
grid-row: 2;
|
||||
grid-column: span 2;
|
||||
// grid-column-start: 1;
|
||||
// grid-column-end: 2;
|
||||
grid-template-columns: min-content auto;
|
||||
grid-template-rows: auto;
|
||||
overflow: visible;
|
||||
width: max-content;
|
||||
padding-right: var(--cs-fence-fade-width);
|
||||
padding-top: var(--size-4-1);
|
||||
|
||||
max-height: unset;
|
||||
|
||||
&[data-cs-wrap = "unwrapped"],
|
||||
&[data-cs-wrap = "unwrapped-inactive"]:not(:active) {
|
||||
width: max-content;
|
||||
padding-right: var(--cs-fence-fade-width);
|
||||
}
|
||||
|
||||
&[data-cs-wrap = "wrapped"],
|
||||
&[data-cs-wrap = "unwrapped-inactive"]:active {
|
||||
width: unset;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
> div.cs-line {
|
||||
display: contents;
|
||||
|
||||
> div.cs-line-text {
|
||||
overflow: visible;
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pre.cs-pre[data-cs-fold="true"] {
|
||||
> code.cs-code {
|
||||
max-height: 0 !important;
|
||||
// overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-source-view {
|
||||
div.HyperMD-codeblock-begin.cs-line,
|
||||
div.HyperMD-codeblock-end.cs-line {
|
||||
white-space: pre-wrap !important;
|
||||
// z-index: -10;
|
||||
// overflow: hidden;
|
||||
|
||||
// span.cm-hmd-codeblock {
|
||||
// display: inline;
|
||||
// height: var(--size-4-1);
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
div.HyperMD-codeblock-begin.cs-line:has(div.cs-header),
|
||||
div.HyperMD-codeblock-end.cs-line:has(div.cs-footer) {
|
||||
.cm-widgetBuffer {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
div.cm-line:not(.cm-embed-block).cs-line {
|
||||
padding-left: calc(var(--size-4-4) + var(--cs-gutter-char-size) + var(--size-4-3) + var(--size-2-1) + var(--size-4-3));
|
||||
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
|
||||
padding-right: var(--cs-fence-fade-width);
|
||||
|
||||
// display: inline;
|
||||
|
||||
// &::before {
|
||||
// display: block;
|
||||
// content: "";
|
||||
// width: 10px;
|
||||
// height: 100%;
|
||||
// background-color: pink;;
|
||||
// }
|
||||
|
||||
// span:not(.cs-line-number) {
|
||||
// grid-column: 2;
|
||||
// grid-row: 1;
|
||||
// overflow-wrap: break-word;
|
||||
// }
|
||||
}
|
||||
|
||||
div.cm-line:not(.cm-embed-block).cs-line:not(.HyperMD-codeblock-begin):not(.HyperMD-codeblock-end) {
|
||||
&::before {
|
||||
content: "";
|
||||
background: linear-gradient(to right, transparent, var(--cs-fence-fade-gradient-stop), var(--cs-fence-background-colour));
|
||||
position: sticky;
|
||||
left: 100%;
|
||||
margin-right: calc(-1 * var(--size-4-3));
|
||||
width: var(--size-4-3);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
// height: 100%;
|
||||
height: calc(1em * var(--line-height-normal));
|
||||
margin-bottom: calc(-1 * calc(var(--line-height-normal) - 1) * 1em);
|
||||
// z-index: 3;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&.cs-unwrap-false {
|
||||
.cs-pre-parent {
|
||||
> pre.cs-pre {
|
||||
> code.cs-code:not([cs-data-wrap]) {
|
||||
width: unset;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.cs-unwrap-inactive {
|
||||
.cs-pre-parent {
|
||||
> pre.cs-pre {
|
||||
> code.cs-code:not([cs-data-wrap]):active {
|
||||
width: unset;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.cs-line.cm-active {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
82
src/scss/fence/styling.scss
Normal file
82
src/scss/fence/styling.scss
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
@use "../scss/mixins";
|
||||
|
||||
@include mixins.active {
|
||||
--cs-language-border-header-colour: var(--cs-fence-header-background-colour);
|
||||
--cs-language-border-separator-colour: var(--cs-fence-header-separator-background-colour);
|
||||
--cs-language-border-gutter-colour: var(--cs-fence-gutter-background-colour);
|
||||
|
||||
.cs-pre-parent {
|
||||
> pre.cs-pre {
|
||||
border-radius: var(--cs-fence-curvature);
|
||||
background-color: var(--cs-fence-background-colour);
|
||||
|
||||
> code.cs-code {
|
||||
opacity: 1;
|
||||
transition-property: max-height, opacity, color;
|
||||
transition-duration: var(--cs-transition-length-fold);
|
||||
transition-timing-function: ease-in-out;
|
||||
|
||||
> div.cs-line {
|
||||
&,
|
||||
* {
|
||||
transition-property: opacity, color, background-color, border;
|
||||
transition-duration: var(--cs-transition-length-fold);
|
||||
transition-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
// transition-property: opacity, color;
|
||||
// transition-duration: var(--cs-transition-length-fold);
|
||||
// transition-timing-function: ease-in-out;
|
||||
|
||||
> div.cs-line-text {
|
||||
color: var(--cs-fence-text-colour);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pre.cs-pre[data-cs-fold="true"] {
|
||||
> code.cs-code {
|
||||
// opacity: 0;
|
||||
// visibility: hidden;
|
||||
|
||||
// div.cs-line,
|
||||
div.cs-line * {
|
||||
color: rgba(0,0,0,0) !important;
|
||||
--cs-fence-gutter-background-colour: var(--cs-fence-background-colour);
|
||||
--cs-fence-gutter-border-colour: var(--cs-fence-background-colour);
|
||||
|
||||
a.external-link {
|
||||
background: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-source-view {
|
||||
div.cm-embed-block {
|
||||
&:not(.cm-table-widget):has(> .cs-pre-parent) {
|
||||
border-radius: var(--cs-fence-curvature);
|
||||
}
|
||||
}
|
||||
|
||||
div.HyperMD-codeblock-begin.cs-line,
|
||||
div.HyperMD-codeblock-end.cs-line {
|
||||
--cs-fence-gutter-border-colour: var(--cs-fence-background-colour);
|
||||
}
|
||||
|
||||
|
||||
div.cm-line:not(.cm-embed-block).cs-line {
|
||||
background: linear-gradient(to right, var(--cs-language-border-gutter-colour) var(--cs-fence-gutter-language-border-size), var(--cs-fence-gutter-background-colour) var(--cs-fence-gutter-language-border-size) calc(var(--size-4-4) + var(--cs-gutter-char-size) + var(--size-4-3)), var(--cs-fence-background-colour) calc(var(--size-4-4) + var(--cs-gutter-char-size) + var(--size-4-3)));
|
||||
color: var(--cs-fence-text-colour);
|
||||
|
||||
font-family: var(--font-monospace);
|
||||
font-size: var(--code-size);
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
7
src/scss/inline/_index.scss
Normal file
7
src/scss/inline/_index.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
@forward "header";
|
||||
@forward "lines";
|
||||
@forward "footer";
|
||||
@forward "spacing";
|
||||
@forward "styling";
|
||||
@forward "syntaxHighlighting";
|
||||
@forward "decorations";
|
||||
1
src/scss/inline/decorations/_index.scss
Normal file
1
src/scss/inline/decorations/_index.scss
Normal file
|
|
@ -0,0 +1 @@
|
|||
@forward "comments";
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@use "mixins.scss";
|
||||
@use "../../scss/mixins";
|
||||
|
||||
@include mixins.active {
|
||||
span.cm-comment {
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@use "mixins.scss";
|
||||
@use "../scss/mixins";
|
||||
|
||||
@include mixins.active {
|
||||
span.cs-footer {
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@use "mixins.scss";
|
||||
@use "../scss/mixins";
|
||||
|
||||
@include mixins.active {
|
||||
span.cm-formatting.cm-inline-code ~ span.cs-header {
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@use "mixins.scss";
|
||||
@use "../scss/mixins";
|
||||
|
||||
@include mixins.active {
|
||||
.markdown-rendered :not(pre) > code:not([class*="blur"]) {
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@use "mixins.scss";
|
||||
@use "../scss/mixins";
|
||||
|
||||
@include mixins.active {
|
||||
.markdown-rendered :not(pre) > code:not([class*="blur"]) {
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@use "mixins.scss";
|
||||
@use "../scss/mixins";
|
||||
|
||||
@include mixins.active {
|
||||
span.cs-parameters {
|
||||
3
src/scss/other/_index.scss
Normal file
3
src/scss/other/_index.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@forward "frontmatter";
|
||||
@forward "hidden";
|
||||
@forward "syntaxHighlighting";
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@use "mixins.scss";
|
||||
@use "../scss/mixins";
|
||||
|
||||
@include mixins.active {
|
||||
.cs-hidden {
|
||||
6
src/scss/plugins/_index.scss
Normal file
6
src/scss/plugins/_index.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
@forward "advanced-slides";
|
||||
@forward "code-emitter";
|
||||
@forward "embed-code";
|
||||
@forward "execute-code";
|
||||
@forward "file-include";
|
||||
@forward "slides";
|
||||
2
src/scss/plugins/advanced-slides/_index.scss
Normal file
2
src/scss/plugins/advanced-slides/_index.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@forward "fence";
|
||||
@forward "inline";
|
||||
2
src/scss/plugins/code-emitter/_index.scss
Normal file
2
src/scss/plugins/code-emitter/_index.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@forward "fence";
|
||||
@forward "inline";
|
||||
2
src/scss/plugins/embed-code/_index.scss
Normal file
2
src/scss/plugins/embed-code/_index.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@forward "fence";
|
||||
@forward "inline";
|
||||
2
src/scss/plugins/execute-code/_index.scss
Normal file
2
src/scss/plugins/execute-code/_index.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@forward "fence";
|
||||
@forward "inline";
|
||||
2
src/scss/plugins/file-include/_index.scss
Normal file
2
src/scss/plugins/file-include/_index.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@forward "fence";
|
||||
@forward "inline";
|
||||
0
src/scss/plugins/file-include/inline.scss
Normal file
0
src/scss/plugins/file-include/inline.scss
Normal file
2
src/scss/plugins/slides/_index.scss
Normal file
2
src/scss/plugins/slides/_index.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@forward "fence";
|
||||
@forward "inline";
|
||||
0
src/scss/plugins/slides/fence.scss
Normal file
0
src/scss/plugins/slides/fence.scss
Normal file
0
src/scss/plugins/slides/inline.scss
Normal file
0
src/scss/plugins/slides/inline.scss
Normal file
1
src/scss/scss/_index.scss
Normal file
1
src/scss/scss/_index.scss
Normal file
|
|
@ -0,0 +1 @@
|
|||
@forward "mixins";
|
||||
2
src/scss/settings/_index.scss
Normal file
2
src/scss/settings/_index.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@forward "settings";
|
||||
@forward "styleSettings";
|
||||
0
src/scss/settings/settings.scss
Normal file
0
src/scss/settings/settings.scss
Normal file
0
src/scss/settings/styleSettings.css
Normal file
0
src/scss/settings/styleSettings.css
Normal file
|
|
@ -1,8 +1,8 @@
|
|||
@use "css/scss/init.scss" as scss;
|
||||
@use "scss/scss";
|
||||
|
||||
@use "css/fence/init.scss" as fence;
|
||||
@use "css/inline/init.scss" as inline;
|
||||
@use "css/settings/init.scss" as settings;
|
||||
@use "css/other/init.scss" as other;
|
||||
@use "scss/fence";
|
||||
@use "scss/inline";
|
||||
@use "scss/settings";
|
||||
@use "scss/other";
|
||||
|
||||
@use "css/plugins/init.scss" as plugins;
|
||||
@use "scss/plugins";
|
||||
|
|
|
|||
524
styles.css
524
styles.css
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue