mirror of
https://github.com/mayurankv/Obsidian-Code-Styler.git
synced 2026-07-22 08:10:29 +00:00
Add style linting
This commit is contained in:
Mayuran Visakan
parent
00eb0dfd49
commit
60729251de
9 changed files with 1567 additions and 153 deletions
12
.stylelintrc.json
Normal file
12
.stylelintrc.json
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"extends": ["stylelint-config-idiomatic-order"],
|
||||
"plugins": [
|
||||
"stylelint-order",
|
||||
"stylelint-use-logical-spec",
|
||||
"stylelint-declaration-block-no-ignored-properties"
|
||||
],
|
||||
"rules": {
|
||||
"liberty/use-logical-spec": "ignore",
|
||||
"plugin/declaration-block-no-ignored-properties": true
|
||||
}
|
||||
}
|
||||
|
|
@ -18,6 +18,10 @@ See this project's [releases](/../../../releases).
|
|||
|
||||
## [Unreleased]
|
||||
|
||||
### Added
|
||||
|
||||
- CSS linting added
|
||||
|
||||
### Changed
|
||||
|
||||
- Replaced deprecated `MarkdownRenderer.renderMarkdown` to `MarkdownRenderer.render`
|
||||
|
|
|
|||
1391
package-lock.json
generated
1391
package-lock.json
generated
File diff suppressed because it is too large
Load diff
11
package.json
11
package.json
|
|
@ -6,8 +6,9 @@
|
|||
"scripts": {
|
||||
"dev": "node esbuild.config.mjs",
|
||||
"build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production",
|
||||
"lint": "eslint --fix --max-warnings=0 src",
|
||||
"version": "node version-bump.mjs && git add manifest.json versions.json"
|
||||
"update": "ncu -u && npm install",
|
||||
"lint": "eslint --fix --max-warnings=0 src && stylelint --fix --max-warnings=0 src/styles.css src/css",
|
||||
"version": "node version-bump.mjs && git add manifest.json versions.jsgitaon"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "Mayuran Visakan",
|
||||
|
|
@ -20,6 +21,12 @@
|
|||
"esbuild": "0.19.0",
|
||||
"eslint": "^8.46.0",
|
||||
"obsidian": "latest",
|
||||
"stylelint": "^15.10.2",
|
||||
"stylelint-config-idiomatic-order": "^9.0.0",
|
||||
"stylelint-config-standard": "^34.0.0",
|
||||
"stylelint-declaration-block-no-ignored-properties": "^2.7.0",
|
||||
"stylelint-order": "^6.0.3",
|
||||
"stylelint-use-logical-spec": "^5.0.0",
|
||||
"tslib": "2.6.1",
|
||||
"typescript": "5.1.6"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -49,15 +49,15 @@ body {
|
|||
margin-bottom: 16px;
|
||||
}
|
||||
.code-styler pre.code-styler-pre {
|
||||
background: var(--code-styler-codeblock-background-colour) !important;
|
||||
border-radius: var(--border-radius) !important;
|
||||
overflow: hidden !important;
|
||||
min-height: unset;
|
||||
padding: 0px !important;
|
||||
overflow: hidden !important;
|
||||
border-radius: var(--border-radius) !important;
|
||||
background: var(--code-styler-codeblock-background-colour) !important;
|
||||
}
|
||||
.code-styler pre.code-styler-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%) !important;
|
||||
padding-left: var(--language-border-width) !important;
|
||||
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%) !important;
|
||||
}
|
||||
.code-styler code {
|
||||
padding-top: var(--code-padding) !important;
|
||||
|
|
@ -65,19 +65,19 @@ body {
|
|||
}
|
||||
.code-styler pre.code-styler-pre > code {
|
||||
display: grid;
|
||||
grid-template-columns: min-content auto;
|
||||
grid-template-rows: auto;
|
||||
max-height: unset;
|
||||
padding-top: var(--code-padding) !important;
|
||||
padding-right: 0px !important;
|
||||
padding-bottom: var(--code-padding) !important;
|
||||
padding-left: 0px !important;
|
||||
padding-right: 0px !important;
|
||||
border-radius: 0px !important;
|
||||
background: none !important;
|
||||
transition-property: max-height, padding, border-top;
|
||||
transition-duration: var(--duration-button);
|
||||
transition-timing-function: ease-in-out;
|
||||
max-height: unset;
|
||||
grid-template-columns: min-content auto;
|
||||
grid-template-rows: auto;
|
||||
overflow-x: overlay;
|
||||
transition-duration: var(--duration-button);
|
||||
transition-property: max-height, padding, border-top;
|
||||
transition-timing-function: ease-in-out;
|
||||
white-space: var(--line-wrapping);
|
||||
}
|
||||
.code-styler pre.code-styler-pre.wrapped > code {
|
||||
|
|
@ -95,9 +95,9 @@ body {
|
|||
--line-wrapping: var(--line-active-wrapping) !important;
|
||||
}
|
||||
.code-styler pre.code-styler-pre.code-styler-collapsed > code {
|
||||
max-height: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
max-height: 0 !important;
|
||||
}
|
||||
.code-styler pre.code-styler-pre::before,
|
||||
.code-styler pre.code-styler-pre::after {
|
||||
|
|
@ -109,9 +109,9 @@ body {
|
|||
|
||||
/** Editing Mode Body */
|
||||
.code-styler .markdown-source-view [class*="code-styler-line"].HyperMD-codeblock-begin {
|
||||
border-top: none !important;
|
||||
border-top-left-radius: 0px !important;
|
||||
border-top-right-radius: 0px !important;
|
||||
border-top: none !important;
|
||||
}
|
||||
.code-styler .markdown-source-view [class*="code-styler-line"].HyperMD-codeblock-end {
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
|
|
@ -127,10 +127,10 @@ body .markdown-source-view [class*="code-styler-line"].HyperMD-codeblock-begin:n
|
|||
border-top-right-radius: var(--border-radius) !important;
|
||||
}
|
||||
.code-styler .markdown-source-view .HyperMD-codeblock[class*='code-styler-line'] {
|
||||
background: linear-gradient(90deg, var(--gradient-background-colour) var(--gradient-highlights-colour-stop), transparent 100%), var(--code-styler-codeblock-background-colour) !important;
|
||||
overflow: hidden;
|
||||
padding: 0 !important;
|
||||
padding-left: var(--size-4-4) !important;
|
||||
background: linear-gradient(90deg, var(--gradient-background-colour) var(--gradient-highlights-colour-stop), transparent 100%), var(--code-styler-codeblock-background-colour) !important;
|
||||
}
|
||||
.code-styler .markdown-source-view .HyperMD-codeblock[class*='code-styler-line'][class*='language-'] {
|
||||
background: linear-gradient(90deg, var(--language-border-colour), var(--language-border-colour) var(--language-border-width), var(--gradient-background-colour) var(--language-border-width) var(--gradient-highlights-colour-stop), transparent 100%), var(--code-styler-codeblock-background-colour) !important;
|
||||
|
|
@ -160,61 +160,61 @@ body .markdown-source-view :not(pre.code-styler-pre) > .code-styler-header-conta
|
|||
body pre.code-styler-pre:not([class*='language-']) .code-styler-header-container {
|
||||
display: none !important;
|
||||
}
|
||||
[class^='code-styler-header-container'] {
|
||||
font-size: var(--header-font-size);
|
||||
user-select: none;
|
||||
height: var(--container-height);
|
||||
min-height: var(--container-min-height);
|
||||
padding-top: var(--header-padding);
|
||||
margin-top: 0px !important;
|
||||
[class^='code-styler-header-container'] {
|
||||
display: flex !important;
|
||||
overflow: visible;
|
||||
transition: border-bottom ease-in-out var(--duration-button);
|
||||
height: var(--container-height);
|
||||
min-height: var(--container-min-height);
|
||||
box-sizing: content-box;
|
||||
padding-top: var(--header-padding);
|
||||
margin-top: 0px !important;
|
||||
font-size: var(--header-font-size);
|
||||
transition: border-bottom ease-in-out var(--duration-button);
|
||||
user-select: none;
|
||||
}
|
||||
.markdown-source-view :not(pre.code-styler-pre) > [class^='code-styler-header-container'] {
|
||||
background: linear-gradient(var(--code-styler-header-background-colour) 0%,var(--code-styler-header-background-colour) calc(100% - var(--header-separator-width)), var(--code-styler-header-separator-colour) calc(100% - var(--header-separator-width)), var(--code-styler-header-separator-colour) 100%) var(--language-border-width) bottom/100% border-box no-repeat,var(--language-border-colour) !important;
|
||||
padding-bottom: var(--header-separator-width);
|
||||
padding-left: var(--language-border-width);
|
||||
border-top: var(--code-styler-header-border);
|
||||
border-right: var(--code-styler-header-border);
|
||||
border-left: var(--code-styler-header-border);
|
||||
background: linear-gradient(var(--code-styler-header-background-colour) 0%,var(--code-styler-header-background-colour) calc(100% - var(--header-separator-width)), var(--code-styler-header-separator-colour) calc(100% - var(--header-separator-width)), var(--code-styler-header-separator-colour) 100%) var(--language-border-width) bottom/100% border-box no-repeat,var(--language-border-colour) !important;
|
||||
border-top-left-radius: var(--border-radius);
|
||||
border-top-right-radius: var(--border-radius);
|
||||
padding-bottom: var(--header-separator-width);
|
||||
border-top: var(--code-styler-header-border);
|
||||
border-left: var(--code-styler-header-border);
|
||||
border-right: var(--code-styler-header-border);
|
||||
}
|
||||
pre.code-styler-pre [class^='code-styler-header-container'] {
|
||||
background-color: var(--code-styler-header-background-colour);
|
||||
border-bottom: var(--header-separator-width) solid var(--code-styler-header-separator-colour);
|
||||
background-color: var(--code-styler-header-background-colour);
|
||||
}
|
||||
/*! Complicated */
|
||||
.markdown-source-view :not(pre.code-styler-pre) > [class^='code-styler-header-container']:not(:has(+ .HyperMD-codeblock-begin)) {
|
||||
background: linear-gradient(var(--code-styler-header-background-colour) 0%,var(--code-styler-header-background-colour) 100%) var(--language-border-width) bottom/100% border-box no-repeat,var(--language-border-colour) !important;
|
||||
padding-bottom: var(--header-padding);
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
border-bottom: var(--code-styler-header-border);
|
||||
border-bottom: var(--collapsed-bottom-border);
|
||||
background: linear-gradient(var(--code-styler-header-background-colour) 0%,var(--code-styler-header-background-colour) 100%) var(--language-border-width) bottom/100% border-box no-repeat,var(--language-border-colour) !important;
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
}
|
||||
pre.code-styler-pre.code-styler-collapsed [class^='code-styler-header-container'] {
|
||||
border-bottom: var(--collapsed-bottom-border);
|
||||
}
|
||||
[class^='code-styler-header-container'] [class^="code-styler-header-language-tag"] {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding-left: var(--header-spacing);
|
||||
padding-right: var(--header-spacing);
|
||||
margin-right: var(--header-spacing);
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
padding-top: calc(1em * var(--header-inner-vertical-padding));
|
||||
padding-right: var(--header-spacing);
|
||||
padding-bottom: calc(1em * var(--header-inner-vertical-padding));
|
||||
font-size: inherit;
|
||||
padding-left: var(--header-spacing);
|
||||
border-radius: var(--border-radius) var(--border-radius) 0px 0px;
|
||||
margin-right: var(--header-spacing);
|
||||
background-color: var(--code-styler-header-language-tag-background-colour);
|
||||
color: var(--code-styler-header-language-tag-text-colour);
|
||||
font-weight: var(--code-styler-header-language-tag-text-bold, normal);
|
||||
font-size: inherit;
|
||||
font-style: var(--code-styler-header-language-tag-text-italic, normal);
|
||||
font-weight: var(--code-styler-header-language-tag-text-bold, normal);
|
||||
text-align: center;
|
||||
transition: border-radius ease-in-out var(--duration-button), padding ease-in-out var(--duration-button);
|
||||
}
|
||||
|
|
@ -225,24 +225,24 @@ pre.code-styler-pre.code-styler-collapsed [class^='code-styler-header-container'
|
|||
}
|
||||
.code-styler-header-text {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
flex-direction: column;
|
||||
padding-left: 0px;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
padding-top: calc(1em * var(--header-inner-vertical-padding));
|
||||
padding-bottom: calc(1em * var(--header-inner-vertical-padding));
|
||||
font-size: inherit;
|
||||
padding-left: 0px;
|
||||
color: var(--code-styler-header-text-colour);
|
||||
font-weight: var(--code-styler-header-title-text-bold, normal);
|
||||
font-size: inherit;
|
||||
font-style: var(--code-styler-header-title-text-italic, normal);
|
||||
font-weight: var(--code-styler-header-title-text-bold, normal);
|
||||
transition: padding ease-in-out var(--duration-button);
|
||||
}
|
||||
/*! Complicated */
|
||||
body:not([class*='code-styler-show-langicons']) .code-styler-header-container-specific [class^="code-styler-header-language-tag"],
|
||||
body:not(.code-styler-show-langicons-always) .code-styler-header-container [class^="code-styler-header-language-tag"],
|
||||
body .code-styler-header-container-specific:not(:has( div > img.code-styler-icon)) [class^="code-styler-header-language-tag"] { /*? Depending on header visibility */
|
||||
border-top-left-radius: 0 !important;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-top-left-radius: 0 !important;
|
||||
}
|
||||
/*! Complicated */
|
||||
body:not([class*='code-styler-show-langicons']):not([class*='code-styler-show-langnames']) .code-styler-header-container-specific .code-styler-header-text,
|
||||
|
|
@ -252,21 +252,21 @@ body .code-styler-header-container-specific:not(:has( [class^="code-styler-heade
|
|||
}
|
||||
div:has(> img.code-styler-icon) {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
padding-top: calc(1em * var(--header-inner-vertical-padding));
|
||||
padding-right: var(--header-spacing);
|
||||
padding-bottom: calc(1em * var(--header-inner-vertical-padding));
|
||||
padding-left: var(--header-spacing);
|
||||
padding-right: var(--header-spacing);
|
||||
transition: padding ease-in-out var(--duration-button);
|
||||
}
|
||||
.code-styler-icon {
|
||||
width: var(--language-icon-size);
|
||||
height: var(--language-icon-size);
|
||||
filter: var(--language-icon-filter);
|
||||
margin: 0 !important;
|
||||
border: none !important;
|
||||
margin: 0 !important;
|
||||
filter: var(--language-icon-filter);
|
||||
}
|
||||
|
||||
/** Lines */
|
||||
|
|
@ -304,27 +304,27 @@ pre.code-styler-pre [class^='code-styler-line-highlighted'] > .code-styler-line-
|
|||
box-shadow: 0px calc(-1 * var(--code-padding)) var(--code-styler-gutter-background-colour),0px var(--code-padding) var(--code-styler-gutter-background-colour);
|
||||
}
|
||||
[class^='code-styler-line-number'] {
|
||||
padding-left: calc(4px + var(--language-border-width));
|
||||
padding-right: 8px;
|
||||
text-align: right;
|
||||
min-width: var(--line-number-gutter-min-width);
|
||||
padding-right: 8px;
|
||||
padding-left: calc(4px + var(--language-border-width));
|
||||
background-color: var(--code-styler-gutter-background-colour);
|
||||
font-size: var(--code-size);
|
||||
font-family: var(--font-monospace);
|
||||
color: var(--code-styler-gutter-text-colour);
|
||||
font-family: var(--font-monospace);
|
||||
font-size: var(--code-size);
|
||||
text-align: right;
|
||||
user-select: none;
|
||||
}
|
||||
.markdown-source-view .HyperMD-codeblock .code-styler-line-number,
|
||||
.markdown-source-view .HyperMD-codeblock .code-styler-line-number-specific {
|
||||
padding-top: var(--line-number-height-correction);
|
||||
position: absolute;
|
||||
box-sizing: content-box;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
min-width: calc(var(--line-number-gutter-min-width) - 12px);
|
||||
overflow-x: auto;
|
||||
direction: rtl;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
min-width: calc(var(--line-number-gutter-min-width) - 12px);
|
||||
height: 100%;
|
||||
box-sizing: content-box;
|
||||
padding-top: var(--line-number-height-correction);
|
||||
direction: rtl;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.markdown-source-view .HyperMD-codeblock-begin .code-styler-line-number,
|
||||
.markdown-source-view .HyperMD-codeblock-begin .code-styler-line-number-specific,
|
||||
|
|
@ -333,12 +333,12 @@ pre.code-styler-pre [class^='code-styler-line-highlighted'] > .code-styler-line-
|
|||
width: var(--line-number-gutter-width);
|
||||
}
|
||||
pre.code-styler-pre [class^='code-styler-line-number'] {
|
||||
white-space: nowrap;
|
||||
grid-column: 1;
|
||||
position: sticky;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
border-top: var(--line-number-height-correction) solid transparent;
|
||||
grid-column: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
pre.code-styler-pre div:last-child > [class^='code-styler-line-number'] {
|
||||
width: unset;
|
||||
|
|
@ -428,47 +428,47 @@ pre.code-styler-pre.code-styler-collapsed code::-webkit-scrollbar {
|
|||
}
|
||||
}
|
||||
.markdown-rendered pre.code-styler-pre button {
|
||||
transition: visibility var(--duration-button), opacity var(--duration-button);
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
display: unset !important;
|
||||
color: var(--code-styler-button-colour) !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none;
|
||||
font-family: var(--font-interface);
|
||||
font-size: var(--font-ui-smaller);
|
||||
margin: 0;
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
margin: 0;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none;
|
||||
color: var(--code-styler-button-colour) !important;
|
||||
font-family: var(--font-interface);
|
||||
font-size: var(--font-ui-smaller);
|
||||
opacity: 1;
|
||||
transition: visibility var(--duration-button), opacity var(--duration-button);
|
||||
visibility: visible;
|
||||
}
|
||||
pre.code-styler-pre:not(.code-styler-collapsed):not(:hover) button,
|
||||
pre.code-styler-pre.code-styler-collapsed button,
|
||||
pre.code-styler-pre:not(.code-styler-collapsed):not(:hover) [class^='code-styler-header-container']::after {
|
||||
visibility: hidden;
|
||||
opacity: 0
|
||||
opacity: 0;
|
||||
visibility: hidden
|
||||
}
|
||||
[class^='code-styler-header-container']::after {
|
||||
position: relative;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
margin-right: var(--header-button-spacing);
|
||||
content: "\200b";
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: auto;
|
||||
margin-right: var(--header-button-spacing);
|
||||
background-color: var(--code-styler-button-colour);
|
||||
content: "\200b";
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z'/%3E%3Cpath fill='none' d='M0 0h32v32H0z'/%3E%3C/svg%3E");
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
scale: 0.8;
|
||||
transition: transform var(--duration-button) ease-out, visibility var(--duration-button), opacity var(--duration-button), scale var(--duration-button) cubic-bezier(0.4, 0.14, 0.3, 1);
|
||||
visibility: visible;
|
||||
}
|
||||
pre.code-styler-pre.code-styler-collapsed [class^='code-styler-header-container']::after,
|
||||
.markdown-source-view :not(pre.code-styler-pre) > [class^='code-styler-header-container']:not(:has(+ .HyperMD-codeblock-begin))::after {
|
||||
|
|
@ -498,16 +498,16 @@ body .markdown-source-view :not(pre.code-styler-pre) > .code-styler-header-conta
|
|||
--copy-code-header-right-margin: 12px;
|
||||
}
|
||||
pre.code-styler-pre button.copy-code-button {
|
||||
transform: translateY(-50%);
|
||||
top: max(calc(0.5 * var(--container-height) * 1),calc(0.5 * var(--container-min-height) * 1)) !important;
|
||||
bottom: unset !important;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
pre.code-styler-pre button.copy-code-button,
|
||||
pre.code-styler-pre button.run-code-button, /*? Execute Code Plugin Compatibility */
|
||||
.markdown-source-view.mod-cm6 .HyperMD-codeblock.code-styler-line span.code-block-flair {
|
||||
margin-right: calc(var(--copy-code-header-right-margin) - var(--dent-difference));
|
||||
will-change: margin-right, clip-path;
|
||||
clip-path: var(--polygon-in);
|
||||
will-change: margin-right, clip-path;
|
||||
}
|
||||
pre.code-styler-pre button.copy-code-button:not(:active),
|
||||
pre.code-styler-pre button.run-code-button:not(:active), /*? Execute Code Plugin Compatibility */
|
||||
|
|
@ -517,9 +517,9 @@ pre.code-styler-pre button.run-code-button:not(:active), /*? Execute Code Plugin
|
|||
pre.code-styler-pre button.copy-code-button:hover,
|
||||
pre.code-styler-pre button.run-code-button:hover, /*? Execute Code Plugin Compatibility */
|
||||
.markdown-source-view.mod-cm6 .HyperMD-codeblock.code-styler-line span.code-block-flair:hover{
|
||||
background-color: transparent;
|
||||
animation: outdent var(--duration-button);
|
||||
margin-right: var(--copy-code-header-right-margin);
|
||||
animation: outdent var(--duration-button);
|
||||
background-color: transparent;
|
||||
clip-path: var(--polygon-out);
|
||||
}
|
||||
pre.code-styler-pre button.copy-code-button:active,
|
||||
|
|
@ -530,45 +530,45 @@ pre.code-styler-pre button.run-code-button:active, /*? Execute Code Plugin Compa
|
|||
}
|
||||
pre.code-styler-pre button.copy-code-button::before,
|
||||
.markdown-source-view.mod-cm6 .HyperMD-codeblock.code-styler-line span.code-block-flair::before {
|
||||
content: "\200b";
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
padding-right: 4px;
|
||||
background-color: var(--code-styler-button-colour);
|
||||
content: "\200b";
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z'/%3E%3Cpath d='M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z'/%3E%3Cpath fill='none' d='M0 0h32v32H0z' data-name='<Transparent Rectangle>'/%3E%3C/svg%3E");
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z'/%3E%3Cpath d='M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z'/%3E%3Cpath fill='none' d='M0 0h32v32H0z' data-name='<Transparent Rectangle>'/%3E%3C/svg%3E");
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
vertical-align: 1px;
|
||||
}
|
||||
.markdown-source-view.mod-cm6 .HyperMD-codeblock.code-styler-line span.code-block-flair {
|
||||
transform: translateY(-50%);
|
||||
font-size: 0;
|
||||
position: absolute;
|
||||
top: min(calc(-0.5 * var(--container-height) * 1.1 - var(--header-separator-width)),calc(-0.5 * var(--container-min-height) * 1.1 - var(--header-separator-width))) !important;
|
||||
right: 0;
|
||||
visibility: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
line-height: initial !important;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
font-size: 0;
|
||||
line-height: initial !important;
|
||||
transform: translateY(-50%);
|
||||
visibility: hidden;
|
||||
}
|
||||
.markdown-source-view.mod-cm6 .HyperMD-codeblock.code-styler-line span.code-block-flair > * {
|
||||
width: 0px;
|
||||
}
|
||||
.markdown-source-view.mod-cm6 .HyperMD-codeblock.code-styler-line span.code-block-flair::before {
|
||||
visibility: visible;
|
||||
font-size: var(--font-ui-smaller);
|
||||
opacity: 1;
|
||||
vertical-align: -1px;
|
||||
font-size: var(--font-ui-smaller);
|
||||
visibility: visible;
|
||||
}
|
||||
.markdown-source-view.mod-cm6 .HyperMD-codeblock.code-styler-line span.code-block-flair::after {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
font-size: var(--font-ui-smaller);
|
||||
content: 'Copy';
|
||||
color: var(--code-styler-button-colour);
|
||||
content: 'Copy';
|
||||
font-size: var(--font-ui-smaller);
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.markdown-source-view.mod-cm6 .HyperMD-codeblock-begin.code-styler-line {
|
||||
overflow: visible;
|
||||
|
|
|
|||
|
|
@ -12,59 +12,59 @@ body {
|
|||
|
||||
.code-styler .cm-s-obsidian span.cm-inline-code,
|
||||
.code-styler .markdown-rendered :not(pre) > code {
|
||||
font-weight: var(--code-styler-inline-font-weight);
|
||||
color: var(--code-styler-inline-colour);
|
||||
background-color: var(--code-styler-inline-background-colour) !important;
|
||||
border-radius: var(--code-styler-inline-border-radius) !important;
|
||||
padding: var(--code-styler-inline-padding-vertical) var(--code-styler-inline-padding-horizontal) !important;
|
||||
border-radius: var(--code-styler-inline-border-radius) !important;
|
||||
margin: 0px var(--code-styler-inline-margin-horizontal) !important;
|
||||
background-color: var(--code-styler-inline-background-colour) !important;
|
||||
color: var(--code-styler-inline-colour);
|
||||
font-weight: var(--code-styler-inline-font-weight);
|
||||
}
|
||||
.code-styler .cm-s-obsidian span.cm-formatting-code { /*? Standalone backticks */
|
||||
color: var(--code-styler-inline-colour-active);
|
||||
display: inline !important;
|
||||
color: var(--code-styler-inline-colour-active);
|
||||
}
|
||||
.code-styler .cm-s-obsidian span.code-styler-inline-opener ~ span.cm-inline-code:not(.cm-formatting-code) {
|
||||
margin-left: 0px !important;
|
||||
padding-left: 0px !important;
|
||||
border-radius: 0px var(--code-styler-inline-border-radius) var(--code-styler-inline-border-radius) 0px !important;
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
.code-styler .cm-s-obsidian span.code-styler-inline-opener,
|
||||
.code-styler .cm-s-obsidian span.cm-formatting-code:has(+ span.cm-inline-code:not(.cm-formatting-code)) {/*? First backtick */
|
||||
color: var(--code-styler-inline-colour-active);
|
||||
border-radius: var(--code-styler-inline-border-radius) 0px 0px var(--code-styler-inline-border-radius) !important;
|
||||
padding-left: var(--code-styler-inline-padding-horizontal) !important;
|
||||
padding-right: 0px !important;
|
||||
margin-left: var(--code-styler-inline-margin-horizontal) !important;
|
||||
padding-left: var(--code-styler-inline-padding-horizontal) !important;
|
||||
border-radius: var(--code-styler-inline-border-radius) 0px 0px var(--code-styler-inline-border-radius) !important;
|
||||
margin-right: 0px !important;
|
||||
margin-left: var(--code-styler-inline-margin-horizontal) !important;
|
||||
color: var(--code-styler-inline-colour-active);
|
||||
}
|
||||
.code-styler .cm-s-obsidian span.cm-formatting-code + span.cm-inline-code:not(.cm-formatting-code) { /*? Inner code with backticks */
|
||||
color: var(--code-styler-inline-colour-active);
|
||||
border-radius: 0px !important;
|
||||
padding-left: 0px !important;
|
||||
padding-right: 0px !important;
|
||||
padding-left: 0px !important;
|
||||
border-radius: 0px !important;
|
||||
margin: 0px 0px !important;
|
||||
color: var(--code-styler-inline-colour-active);
|
||||
}
|
||||
.code-styler .cm-s-obsidian span.cm-inline-code:not(.cm-formatting-code) + span.cm-formatting-code {/*? Last backtick */
|
||||
color: var(--code-styler-inline-colour-active);
|
||||
border-radius: 0px var(--code-styler-inline-border-radius) var(--code-styler-inline-border-radius) 0px !important;
|
||||
padding-left: 0px !important;
|
||||
padding-right: var(--code-styler-inline-padding-horizontal) !important;
|
||||
margin-left: 0px !important;
|
||||
padding-left: 0px !important;
|
||||
border-radius: 0px var(--code-styler-inline-border-radius) var(--code-styler-inline-border-radius) 0px !important;
|
||||
margin-right: var(--code-styler-inline-margin-horizontal) !important;
|
||||
margin-left: 0px !important;
|
||||
color: var(--code-styler-inline-colour-active);
|
||||
}
|
||||
body.code-styler span.code-styler-inline-opener > span > img.code-styler-inline-icon:not([class*="emoji"]) {
|
||||
display: inline !important;
|
||||
height: calc(var(--code-size) * 1.2);
|
||||
margin-bottom: 2px !important;
|
||||
vertical-align: middle;
|
||||
display: inline !important;
|
||||
}
|
||||
.code-styler span.code-styler-inline-opener .code-styler-inline-title {
|
||||
font-weight: var(--code-styler-inline-title-font-weight);
|
||||
color: var(--code-styler-inline-title-colour);
|
||||
font-weight: var(--code-styler-inline-title-font-weight);
|
||||
}
|
||||
.code-styler span.code-styler-inline-opener .code-styler-inline-title::after {
|
||||
content: '\FF5C';
|
||||
color: var(--code-styler-inline-title-color);
|
||||
content: '\FF5C';
|
||||
}
|
||||
.code-styler span.code-styler-inline-opener span:has( > img.code-styler-inline-icon) {
|
||||
padding-right: 8px;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,26 +1,26 @@
|
|||
/** Execute Code Plugin */
|
||||
pre.code-styler-pre code ~ code.language-output {
|
||||
display: block;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: calc(2.5 * var(--code-padding)) !important;
|
||||
padding-left: calc(var(--line-number-gutter-padding)) !important;
|
||||
border-top: var(--header-separator-width) solid var(--code-styler-header-separator-colour);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
pre.code-styler-pre.code-styler-collapsed code ~ code.language-output {
|
||||
border-top-color: transparent;
|
||||
border-top-width: 0;
|
||||
border-top-color: transparent;
|
||||
}
|
||||
pre.code-styler-pre:hover code ~ code.language-output {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
pre.code-styler-pre code ~ code.language-output input.interactive-stdin {
|
||||
color: var(--text-normal);
|
||||
background-color: var(--code-styler-codeblock-background-colour);
|
||||
padding: 2px 8px;
|
||||
border-color: var(--code-comment);
|
||||
border-style: solid;
|
||||
border-radius: 5px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: var(--code-comment);
|
||||
border-radius: 5px;
|
||||
background-color: var(--code-styler-codeblock-background-colour);
|
||||
color: var(--text-normal);
|
||||
}
|
||||
pre.code-styler-pre code ~ code.language-output hr {
|
||||
display: none;
|
||||
|
|
@ -35,15 +35,15 @@ pre.code-styler-pre.code-styler-collapsed button.run-code-button {
|
|||
top: 500px;
|
||||
}
|
||||
pre.code-styler-pre button.run-code-button::before {
|
||||
content: "\200b";
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
padding-right: 4px;
|
||||
background-color: var(--code-styler-button-colour);
|
||||
content: "\200b";
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M7 28a1 1 0 0 1-1-1V5a1 1 0 0 1 1.482-.876l20 11a1 1 0 0 1 0 1.752l-20 11A1 1 0 0 1 7 28Z'/%3E%3Cpath fill='none' d='M0 0h32v32H0z' data-name='<Transparent Rectangle>'/%3E%3C/svg%3E");
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M7 28a1 1 0 0 1-1-1V5a1 1 0 0 1 1.482-.876l20 11a1 1 0 0 1 0 1.752l-20 11A1 1 0 0 1 7 28Z'/%3E%3Cpath fill='none' d='M0 0h32v32H0z' data-name='<Transparent Rectangle>'/%3E%3C/svg%3E");
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
vertical-align: 0px;
|
||||
}
|
||||
|
|
@ -55,19 +55,19 @@ pre.code-styler-pre button.clear-button {
|
|||
height: 14px;
|
||||
margin-bottom: 6px !important;
|
||||
margin-left: calc(var(--language-border-width) + 12px);
|
||||
will-change: margin-right, clip-path;
|
||||
clip-path: var(--polygon-in);
|
||||
will-change: margin-right, clip-path;
|
||||
}
|
||||
pre.code-styler-pre button.clear-button::before {
|
||||
content: "\200b";
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
padding-right: 4px;
|
||||
background-color: var(--code-styler-button-colour);
|
||||
content: "\200b";
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 4 6 14l1.41 1.41L15 7.83V28h2V7.83l7.59 7.58L26 14 16 4z'/%3E%3Cpath fill='none' d='M0 0h32v32H0z' data-name='<Transparent Rectangle>'/%3E%3C/svg%3E");
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 4 6 14l1.41 1.41L15 7.83V28h2V7.83l7.59 7.58L26 14 16 4z'/%3E%3Cpath fill='none' d='M0 0h32v32H0z' data-name='<Transparent Rectangle>'/%3E%3C/svg%3E");
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
vertical-align: 0px;
|
||||
}
|
||||
|
|
@ -75,9 +75,9 @@ pre.code-styler-pre button.clear-button:not(:active) {
|
|||
animation: reverse-indent var(--duration-button);
|
||||
}
|
||||
pre.code-styler-pre button.clear-button:hover{
|
||||
background-color: transparent;
|
||||
animation: reverse-outdent var(--duration-button);
|
||||
margin-right: var(--copy-code-header-right-margin);
|
||||
animation: reverse-outdent var(--duration-button);
|
||||
background-color: transparent;
|
||||
clip-path: var(--polygon-out);
|
||||
}
|
||||
pre.code-styler-pre button.clear-button:active {
|
||||
|
|
@ -85,9 +85,9 @@ pre.code-styler-pre button.clear-button:active {
|
|||
transition: scale var(--duration-button) cubic-bezier(0.4, 0.14, 0.3, 1);
|
||||
}
|
||||
.code-styler-pre-parent.has-run-code-button .load-state-indicator {
|
||||
color: none;
|
||||
background: none;
|
||||
z-index: 10;
|
||||
background: none;
|
||||
color: none;
|
||||
}
|
||||
.code-styler-pre-parent.has-run-code-button .load-state-indicator::before {
|
||||
box-shadow: none;
|
||||
|
|
@ -111,29 +111,29 @@ pre.code-styler-pre div.code-block-highlight-wrap {
|
|||
display: none;
|
||||
}
|
||||
.markdown-source-view.mod-cm6 .cm-embed-block .code-styler-pre-parent + .edit-block-button::after {
|
||||
padding-left: 4px;
|
||||
content: 'Edit Block';
|
||||
font-size: var(--font-ui-smaller);
|
||||
padding-left: 4px;
|
||||
}
|
||||
.markdown-source-view.mod-cm6 .cm-embed-block:not(:hover) .code-styler-pre-parent + .edit-block-button {
|
||||
visibility: hidden;
|
||||
opacity: 0
|
||||
opacity: 0;
|
||||
visibility: hidden
|
||||
}
|
||||
.markdown-source-view.mod-cm6 .cm-embed-block .code-styler-pre-parent + .edit-block-button {
|
||||
--copy-code-header-right-margin: calc(2.2 * var(--header-button-spacing));
|
||||
--dent-difference: 0px;
|
||||
--polygon-in: polygon(0 0, 18px 0, 18px 36px, 0 36px);
|
||||
transition: visibility var(--duration-button), opacity var(--duration-button);
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
z-index: 10;
|
||||
transform: translateY(-50%);
|
||||
top: max(calc(0.5 * var(--container-height) * 1),calc(0.5 * var(--container-min-height) * 1));
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-right: calc(var(--copy-code-header-right-margin) - var(--dent-difference));
|
||||
will-change: margin-right, clip-path;
|
||||
clip-path: var(--polygon-in);
|
||||
padding: 0;
|
||||
opacity: 1;
|
||||
transform: translateY(-50%);
|
||||
transition: visibility var(--duration-button), opacity var(--duration-button);
|
||||
visibility: visible;
|
||||
will-change: margin-right, clip-path;
|
||||
}
|
||||
/*! Complicated */
|
||||
body:not(.code-styler-show-langicons-always):not(.code-styler-show-langnames-always) .cm-embed-block .code-styler-pre-parent:has( pre.code-styler-pre .code-styler-header-container) + .edit-block-button,
|
||||
|
|
@ -143,9 +143,9 @@ body .cm-embed-block .code-styler-pre-parent:has( pre.code-styler-pre:not([class
|
|||
top: calc(0.5 * var(--font-text-size) * 0.875 * var(--line-height-normal));
|
||||
}
|
||||
.markdown-source-view.mod-cm6 .cm-embed-block:hover .code-styler-pre-parent + .edit-block-button:hover {
|
||||
background: transparent;
|
||||
animation: reverse-outdent var(--duration-button);
|
||||
margin-right: var(--copy-code-header-right-margin);
|
||||
animation: reverse-outdent var(--duration-button);
|
||||
background: transparent;
|
||||
clip-path: var(--polygon-out);
|
||||
}
|
||||
.markdown-source-view.mod-cm6 .cm-embed-block:hover .code-styler-pre-parent + .edit-block-button:active {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/** Import stylesheets */
|
||||
@import "./css/codeblocks.css";
|
||||
@import "./css/inlineCode.css";
|
||||
@import "./css/pdfExport.css";
|
||||
@import "./css/pickr.css";
|
||||
@import "./css/pluginCompatibility.css";
|
||||
@import url("./css/codeblocks.css");
|
||||
@import url("./css/inlineCode.css");
|
||||
@import url("./css/pdfExport.css");
|
||||
@import url("./css/pickr.css");
|
||||
@import url("./css/pluginCompatibility.css");
|
||||
|
|
|
|||
Loading…
Reference in a new issue