obsidian-theme/darkings_Obsidian-MonokaiSyntax
1
0
Fork 0
mirror of https://github.com/darkings/Obsidian-MonokaiSyntax.git synced 2026-07-22 04:40:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
darkings_Obsidian-MonokaiSy.../src/scss/components/_editor.scss
Darkings 86d51c028b fix: reduce border 2px→1px, blockquote padding 2.5rem→1.25rem, lp callout gap 
- Border width: 2px→1px for both callout and blockquote
- Blockquote padding: 2.5rem→1.25rem left, #spacing-4→#spacing-3 vertical
- Live preview callout: add padding-left: 0.75rem for border-text gap

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-08 10:10:14 +08:00

446 lines
11 KiB
SCSS
Raw Blame History

@use "../variables" as *;
.markdown-source-view,
.markdown-preview-view {
--bold-color: var(--text-normal);
--bold-weight: 900;
--italic-color: var(--text-normal);
--heading-spacing: #{$spacing-4};
--monokai-heading-weight: 600;
--monokai-inline-code-color: #a6e22e;
--monokai-inline-code-background: var(--code-background);
--blockquote-border-thickness: 2px;
--blockquote-background-color: transparent;
--callout-padding: 1.25rem;
--callout-content-padding: var(--spacing-4) 0 0 0;
--callout-border-width: 0;
--callout-radius: var(--radius-s);
--callout-blend-mode: normal;
--callout-icon-size: 1em;
--p-spacing: #{$spacing-3};
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
.theme-dark {
--monokai-heading-weight: 600;
--blockquote-border-color: #{$color-dark-blockquote-border};
--monokai-blockquote-border: #{$color-dark-blockquote-border};
--monokai-callout-note-bg: rgb(102 217 239 / 12%);
--monokai-callout-note-border: #66d9ef;
--monokai-callout-warning-bg: rgb(253 151 31 / 12%);
--monokai-callout-warning-border: #fd971f;
--monokai-callout-error-bg: rgb(249 38 114 / 12%);
--monokai-callout-error-border: #f92672;
--monokai-callout-success-bg: rgb(166 226 46 / 12%);
--monokai-callout-success-border: #a6e22e;
--monokai-inline-code-color: #a6e22e;
--monokai-inline-code-background: var(--code-background);
--monokai-table-border: rgb(248 248 242 / 18%);
--monokai-task-done-color: rgb(248 248 242 / 68%);
}
.theme-light {
--monokai-heading-weight: 700;
--blockquote-border-color: #{$color-light-blockquote-border};
--monokai-blockquote-border: #{$color-light-blockquote-border};
--monokai-callout-note-bg: rgb(20 116 138 / 14%);
--monokai-callout-note-border: #14748a;
--monokai-callout-warning-bg: rgb(225 96 50 / 14%);
--monokai-callout-warning-border: #e16032;
--monokai-callout-error-bg: rgb(225 71 117 / 14%);
--monokai-callout-error-border: #e14775;
--monokai-callout-success-bg: rgb(38 157 105 / 14%);
--monokai-callout-success-border: #269d69;
--monokai-inline-code-color: #a6e22e;
--monokai-inline-code-background: var(--code-background);
--monokai-table-border: rgb(61 61 61 / 18%);
--monokai-task-done-color: rgb(61 61 61 / 66%);
}
.markdown-source-view.mod-cm6 .inline-title {
display: none;
}
.markdown-rendered {
h1,
h2,
h3 {
font-weight: var(--monokai-heading-weight);
letter-spacing: 0;
margin-block: calc(var(--heading-spacing) * 1.5) var(--spacing-4);
}
strong {
color: var(--bold-color);
font-weight: var(--bold-weight);
}
em {
color: var(--italic-color);
}
mark {
color: var(--monokai-highlight-text);
background-color: var(--text-highlight-bg);
border-radius: var(--radius-s);
padding-inline: 0.12em;
}
blockquote {
background-color: transparent;
border-inline-start: 1px solid var(--monokai-blockquote-border);
border-radius: 0 var(--radius-s) var(--radius-s) 0;
color: var(--text-normal);
padding: #{$spacing-3} #{$spacing-3} #{$spacing-3} 1.25rem;
}
.callout {
background-color: var(--callout-background, transparent);
border: 0;
border-inline-start: 1px solid var(--callout-border, var(--monokai-callout-note-border));
border-radius: 0 var(--radius-s) var(--radius-s) 0;
padding: var(--callout-padding);
}
.callout-title {
color: var(--callout-border, var(--monokai-callout-note-border));
font-weight: 700;
gap: var(--spacing-2);
padding-inline-start: 0;
}
.callout-content {
background-color: transparent;
border-radius: 0;
margin-block-start: var(--spacing-4);
padding: var(--callout-content-padding);
padding-inline-start: 0;
}
.callout[data-callout="note"],
.callout[data-callout="info"] {
--callout-background: var(--monokai-callout-note-bg);
--callout-border: var(--monokai-callout-note-border);
}
.callout[data-callout="warning"],
.callout[data-callout="caution"] {
--callout-background: var(--monokai-callout-warning-bg);
--callout-border: var(--monokai-callout-warning-border);
}
.callout[data-callout="error"],
.callout[data-callout="danger"] {
--callout-background: var(--monokai-callout-error-bg);
--callout-border: var(--monokai-callout-error-border);
}
.callout[data-callout="success"],
.callout[data-callout="check"] {
--callout-background: var(--monokai-callout-success-bg);
--callout-border: var(--monokai-callout-success-border);
}
.callout-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: visible;
margin-right: 0.35em;
}
.callout-icon svg {
display: none;
}
.callout-icon::before {
display: inline;
font-family: var(--font-monospace-theme);
font-weight: 700;
font-size: 0.95em;
color: var(--callout-border, var(--monokai-callout-note-border));
white-space: nowrap;
-webkit-font-smoothing: antialiased;
}
.callout[data-callout="note"] .callout-icon::before,
.callout[data-callout="info"] .callout-icon::before {
content: "#[i]";
}
.callout[data-callout="warning"] .callout-icon::before,
.callout[data-callout="caution"] .callout-icon::before {
content: "<!>";
}
.callout[data-callout="error"] .callout-icon::before,
.callout[data-callout="danger"] .callout-icon::before {
content: "[\00D7]";
}
.callout[data-callout="success"] .callout-icon::before,
.callout[data-callout="check"] .callout-icon::before {
content: "{\2713}";
}
ul > li::marker,
ol > li::marker {
color: var(--list-marker-color);
}
.task-list-item.is-checked {
color: var(--monokai-task-done-color);
}
.task-list-item.is-checked > p {
color: var(--monokai-task-done-color);
}
table {
border: 1px solid var(--monokai-table-border);
}
th,
td {
border: 1px solid var(--monokai-table-border);
}
code {
color: var(--monokai-inline-code-color);
background-color: var(--monokai-inline-code-background);
border: 0;
border-radius: var(--radius-s);
box-shadow: none;
padding: 0.1em 0.3em;
}
pre {
background-color: var(--code-background);
border: 1px solid var(--background-modifier-border);
border-radius: var(--radius-m);
padding: #{$spacing-4};
code {
background-color: transparent;
border: 0;
box-shadow: none;
padding: 0;
}
}
}
.markdown-source-view.mod-cm6 {
.cm-header-1 {
color: var(--h1-color);
font-weight: var(--monokai-heading-weight);
}
.cm-header-2 {
color: var(--h2-color);
font-weight: var(--monokai-heading-weight);
}
.cm-header-3 {
color: var(--h3-color);
font-weight: var(--monokai-heading-weight);
}
.cm-strong {
color: var(--bold-color);
font-weight: var(--bold-weight);
}
.cm-em {
color: var(--italic-color);
}
.cm-link,
.cm-url {
color: var(--link-color);
}
.cm-formatting-link {
color: var(--text-faint);
}
.cm-highlight {
color: var(--monokai-highlight-text);
background-color: var(--text-highlight-bg);
}
/* stylelint-disable-next-line selector-class-pattern -- Obsidian 内部类名，不能改成 kebab-case。 */
.HyperMD-quote {
background-color: transparent;
border-inline-start: 1px solid var(--monokai-blockquote-border);
border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
/* stylelint-disable-next-line selector-class-pattern -- Obsidian 内部类名 */
.HyperMD-quote .cm-line {
padding-inline-start: 1.25rem;
}
.cm-quote {
color: var(--text-normal);
border-inline-start: 0;
padding-inline-start: 0;
}
/* stylelint-disable-next-line selector-class-pattern -- Obsidian 内部类名，不能改成 kebab-case。 */
.HyperMD-quote .cm-quote {
padding-inline-start: calc(var(--spacing-5) + var(--spacing-2));
}
.cm-formatting-quote {
display: none;
}
.callout {
background-color: var(--callout-background, transparent);
border: 0;
border-inline-start: 1px solid var(--callout-border, var(--monokai-callout-note-border));
border-radius: 0 var(--radius-s) var(--radius-s) 0;
padding: var(--callout-padding);
}
.callout-title {
color: var(--callout-border, var(--monokai-callout-note-border));
gap: var(--spacing-2);
padding-inline-start: 0;
font-weight: 700;
}
.callout-content {
background-color: transparent;
margin-block-start: var(--spacing-4);
padding: var(--callout-content-padding);
padding-inline-start: 0;
}
.callout[data-callout="note"],
.callout[data-callout="info"] {
--callout-background: var(--monokai-callout-note-bg);
--callout-border: var(--monokai-callout-note-border);
}
.callout[data-callout="warning"],
.callout[data-callout="caution"] {
--callout-background: var(--monokai-callout-warning-bg);
--callout-border: var(--monokai-callout-warning-border);
}
.callout[data-callout="error"],
.callout[data-callout="danger"] {
--callout-background: var(--monokai-callout-error-bg);
--callout-border: var(--monokai-callout-error-border);
}
.callout[data-callout="success"],
.callout[data-callout="check"] {
--callout-background: var(--monokai-callout-success-bg);
--callout-border: var(--monokai-callout-success-border);
}
.callout-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: visible;
margin-right: 0.35em;
}
.callout-icon svg {
display: none;
}
.callout-icon::before {
display: inline;
font-family: var(--font-monospace-theme);
font-weight: 700;
font-size: 0.95em;
color: var(--callout-border, var(--monokai-callout-note-border));
white-space: nowrap;
-webkit-font-smoothing: antialiased;
}
.callout[data-callout="note"] .callout-icon::before,
.callout[data-callout="info"] .callout-icon::before {
content: "#[i]";
}
.callout[data-callout="warning"] .callout-icon::before,
.callout[data-callout="caution"] .callout-icon::before {
content: "<!>";
}
.callout[data-callout="error"] .callout-icon::before,
.callout[data-callout="danger"] .callout-icon::before {
content: "[\00D7]";
}
.callout[data-callout="success"] .callout-icon::before,
.callout[data-callout="check"] .callout-icon::before {
content: "{\2713}";
}
.cm-inline-code {
color: var(--monokai-inline-code-color);
background-color: var(--monokai-inline-code-background);
border: 0;
border-radius: var(--radius-s);
box-shadow: none;
padding: 0.05em 0.25em;
}
}
.markdown-rendered pre {
font-family: var(--font-monospace-theme);
}
.cm-s-obsidian {
span.cm-comment {
color: var(--code-comment);
}
span.cm-string {
color: var(--code-string);
}
span.cm-keyword {
color: var(--code-keyword);
}
span.cm-def,
span.cm-variable-2 {
color: var(--code-function);
}
span.cm-number,
span.cm-atom {
color: var(--code-value);
}
span.cm-property {
color: var(--code-property);
}
span.cm-operator {
color: var(--code-operator);
}
}
a,
.markdown-rendered a,
.cm-hmd-internal-link {
color: var(--link-color);
}
a:hover,
.markdown-rendered a:hover,
.cm-hmd-internal-link:hover {
color: var(--link-color-hover);
}
Reference in a new issue View git blame Copy permalink