mirror of
https://github.com/mayurankv/Obsidian-Code-Styler.git
synced 2026-07-22 08:10:29 +00:00
395 lines
13 KiB
CSS
395 lines
13 KiB
CSS
/* src/css/_settings.scss */
|
|
body.cs-plugin .cs-hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
/* src/css/_variables.scss */
|
|
body.cs-plugin {
|
|
--cs-code-background-colour: var(--code-background);
|
|
--cs-code-parameters-colour: var(--code-comment);
|
|
--cs-code-colour: var(--code-normal);
|
|
--cs-code-fence-radius: 30px;
|
|
--cs-code-inline-radius: 10px;
|
|
--cs-title-color: var(--code-comment);
|
|
--cs-title-weight: 400;
|
|
--cs-language-title-color: var(--code-comment);
|
|
--cs-language-title-weight: 800;
|
|
--cs-code-gutter-background-color: var(--cs-code-background-colour);
|
|
--cs-code-gutter-color: var(--code-comment);
|
|
--cs-code-header-background-color: var(--cs-code-background-colour);
|
|
--cs-header-separator-color: var(--color-base-30);
|
|
--cs-language-colour: red;
|
|
--cs-language-background-colour: var(--cs-language-colour);
|
|
--cs-language-separator-colour: var(--cs-language-colour);
|
|
--cs-language-header-colour: var(--cs-language-colour);
|
|
--cs-gutter-border-colour: var(--cs-code-gutter-background-color);
|
|
--cs-language-icon-size: 2em;
|
|
}
|
|
|
|
/* src/css/_style_settings.css */
|
|
|
|
/* src/css/fence.scss */
|
|
body.cs-plugin {
|
|
--cs-fixed-left-fence: var(--size-4-3);
|
|
--cs-fixed-gradient-1: 10%;
|
|
--cs-language-border: var(--size-4-1);
|
|
--cs-gutter-border-width: var(--size-2-1);
|
|
}
|
|
body.cs-plugin .markdown-source-view.mod-cm6 .cm-embed-block:not(.cm-table-widget):has(> .cs-pre-parent) {
|
|
border-radius: var(--cs-code-fence-radius);
|
|
}
|
|
body.cs-plugin .cs-pre-parent > pre.cs-pre {
|
|
border-radius: var(--cs-code-fence-radius);
|
|
overflow-x: auto;
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: calc(100% - var(--size-4-12)) var(--size-4-12);
|
|
background-color: var(--cs-code-background-colour);
|
|
padding-right: var(--cs-fixed-left-fence);
|
|
}
|
|
body.cs-plugin .cs-pre-parent > pre.cs-pre::after {
|
|
content: "";
|
|
background:
|
|
linear-gradient(
|
|
to right,
|
|
transparent,
|
|
var(--cs-fixed-gradient-1),
|
|
var(--cs-code-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;
|
|
}
|
|
body.cs-plugin .cs-pre-parent > pre.cs-pre > div.cs-header {
|
|
box-sizing: content-box;
|
|
user-select: none;
|
|
width: 100%;
|
|
display: flex;
|
|
position: sticky;
|
|
left: 0;
|
|
grid-row: 1;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
border-bottom: var(--size-2-1) solid transparent;
|
|
background-color: var(--cs-code-header-background-color);
|
|
z-index: 4;
|
|
padding-bottom: var(--size-4-2);
|
|
}
|
|
body.cs-plugin .cs-pre-parent > pre.cs-pre > div.cs-header::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: calc(-1 * var(--size-4-3));
|
|
left: calc(-1 * (var(--size-4-4) - var(--cs-language-border)));
|
|
right: calc(-1 * (var(--size-4-12) + var(--cs-fixed-left-fence)));
|
|
bottom: 0;
|
|
background: inherit;
|
|
z-index: 2;
|
|
box-shadow: calc(-1 * var(--size-4-4)) 0 0px var(--cs-language-header-colour);
|
|
}
|
|
body.cs-plugin .cs-pre-parent > pre.cs-pre > div.cs-header::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: calc(-1 * var(--size-2-1));
|
|
top: 0;
|
|
left: calc(-1 * (var(--size-4-4) - var(--cs-language-border)));
|
|
right: calc(-1 * (var(--size-4-12) + var(--cs-fixed-left-fence)));
|
|
z-index: 1;
|
|
background: var(--cs-header-separator-color);
|
|
box-shadow: calc(-1 * var(--size-4-4)) 0 0px var(--cs-language-separator-colour);
|
|
}
|
|
body.cs-plugin .cs-pre-parent > pre.cs-pre > div.cs-header > div {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex: 0 0 auto;
|
|
white-space: nowrap;
|
|
z-index: inherit;
|
|
}
|
|
body.cs-plugin .cs-pre-parent > pre.cs-pre > div.cs-header > div:not(:first-child):not(.cs-separator) {
|
|
margin-left: 1em;
|
|
}
|
|
body.cs-plugin .cs-pre-parent > pre.cs-pre > div.cs-header > div.cs-icon-container {
|
|
height: 100%;
|
|
}
|
|
body.cs-plugin .cs-pre-parent > pre.cs-pre > div.cs-header > div.cs-icon-container img.cs-icon {
|
|
width: var(--cs-language-icon-size);
|
|
height: var(--cs-language-icon-size);
|
|
filter: var(--cs-language-icon-filter, none);
|
|
}
|
|
body.cs-plugin .cs-pre-parent > pre.cs-pre > div.cs-header > div.cs-language-title {
|
|
font-weight: var(--cs-language-title-weight);
|
|
color: var(--cs-language-title-color);
|
|
}
|
|
body.cs-plugin .cs-pre-parent > pre.cs-pre > div.cs-header > div.cs-title {
|
|
overflow-x: auto;
|
|
max-width: 100%;
|
|
flex: 0 1 auto;
|
|
font-weight: var(--cs-title-weight);
|
|
color: var(--cs-title-color);
|
|
}
|
|
body.cs-plugin .cs-pre-parent > pre.cs-pre > div.cs-header > div.cs-title::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
body.cs-plugin .cs-pre-parent > pre.cs-pre > div.cs-header > div.cs-title p {
|
|
margin-block-start: 0;
|
|
margin-block-end: 0;
|
|
}
|
|
body.cs-plugin .cs-pre-parent > pre.cs-pre > div.cs-header > div.cs-external-reference {
|
|
overflow-x: auto;
|
|
max-width: 100%;
|
|
flex: 0 1 auto;
|
|
}
|
|
body.cs-plugin .cs-pre-parent > pre.cs-pre > div.cs-header > div.cs-external-reference::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
body.cs-plugin .cs-pre-parent > pre.cs-pre > div.cs-header > div.cs-external-reference button {
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
height: 100%;
|
|
}
|
|
body.cs-plugin .cs-pre-parent > pre.cs-pre > code.cs-code {
|
|
display: grid;
|
|
grid-row: 2;
|
|
grid-column: span 2;
|
|
grid-template-columns: min-content auto;
|
|
grid-template-rows: auto;
|
|
overflow: visible;
|
|
width: max-content;
|
|
padding-right: var(--cs-fixed-left-fence);
|
|
padding-top: var(--size-4-1);
|
|
}
|
|
body.cs-plugin .cs-pre-parent > pre.cs-pre > code.cs-code[data-cs-wrap=unwrapped],
|
|
body.cs-plugin .cs-pre-parent > pre.cs-pre > code.cs-code[data-cs-wrap=unwrapped-inactive]:not(:active) {
|
|
width: max-content;
|
|
padding-right: var(--cs-fixed-left-fence);
|
|
}
|
|
body.cs-plugin .cs-pre-parent > pre.cs-pre > code.cs-code[data-cs-wrap=wrapped],
|
|
body.cs-plugin .cs-pre-parent > pre.cs-pre > code.cs-code[data-cs-wrap=unwrapped-inactive]:active {
|
|
width: unset;
|
|
padding-right: 0;
|
|
}
|
|
body.cs-plugin .cs-pre-parent > pre.cs-pre > code.cs-code > div.cs-line {
|
|
display: contents;
|
|
}
|
|
body.cs-plugin .cs-pre-parent > pre.cs-pre > code.cs-code > div.cs-line > div.cs-line-number {
|
|
position: sticky;
|
|
left: 0;
|
|
grid-column: 1;
|
|
user-select: none;
|
|
text-align: right;
|
|
padding-right: var(--size-4-3);
|
|
margin-right: var(--size-4-3);
|
|
color: var(--cs-code-gutter-color);
|
|
background-color: var(--cs-code-gutter-background-color);
|
|
border-right: var(--cs-gutter-border-width) solid var(--cs-gutter-border-colour);
|
|
}
|
|
body.cs-plugin .cs-pre-parent > pre.cs-pre > code.cs-code > div.cs-line > div.cs-line-number::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: calc(-1 * var(--size-4-1));
|
|
bottom: -100%;
|
|
left: calc(-1 * (var(--size-4-4) - var(--cs-language-border)));
|
|
right: 0;
|
|
background-color: inherit;
|
|
z-index: -5;
|
|
box-shadow: calc(-1 * var(--size-4-4)) 0 0px var(--cs-language-background-colour);
|
|
}
|
|
body.cs-plugin .cs-pre-parent > pre.cs-pre > code.cs-code > div.cs-line > div.cs-line-number::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
width: var(--size-4-3);
|
|
left: calc(100% + var(--cs-gutter-border));
|
|
right: calc(-1 * var(--size-4-3));
|
|
background:
|
|
linear-gradient(
|
|
to left,
|
|
transparent,
|
|
var(--cs-fixed-gradient-1),
|
|
var(--cs-code-background-colour));
|
|
z-index: 10;
|
|
}
|
|
body.cs-plugin .cs-pre-parent > pre.cs-pre > code.cs-code > div.cs-line > div.cs-line-number.cs-line-numbers-enabled-false {
|
|
display: none;
|
|
}
|
|
body.cs-plugin .cs-pre-parent > pre.cs-pre > code.cs-code > div.cs-line > div.cs-line-number.cs-line-numbers-enabled-true {
|
|
display: block;
|
|
}
|
|
body.cs-plugin .cs-pre-parent > pre.cs-pre > code.cs-code > div.cs-line > div.cs-line-text {
|
|
overflow: visible;
|
|
grid-column: 2;
|
|
}
|
|
body.cs-plugin .cs-pre-parent > pre.cs-pre button.copy-code-button {
|
|
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;
|
|
}
|
|
body.cs-plugin .cs-pre-parent > pre.cs-pre button.copy-code-button > svg {
|
|
z-index: inherit;
|
|
}
|
|
body.cs-plugin.cs-line-numbers-enabled-false .cs-pre-parent > pre.cs-pre > code.cs-code > div.cs-line > div.cs-line-number:not(.cs-line-numbers-enabled-true) {
|
|
display: none;
|
|
}
|
|
body.cs-plugin.cs-unwrap-false .cs-pre-parent > pre.cs-pre > code.cs-code:not([cs-data-wrap]) {
|
|
width: unset;
|
|
padding-right: 0;
|
|
}
|
|
body.cs-plugin.cs-unwrap-inactive .cs-pre-parent > pre.cs-pre > code.cs-code:not([cs-data-wrap]):active {
|
|
width: unset;
|
|
padding-right: 0;
|
|
}
|
|
|
|
/* src/css/inline.scss */
|
|
body.cs-plugin .markdown-rendered :not(pre) > code:not([class*=blur]) {
|
|
display: inline;
|
|
border-radius: var(--cs-code-inline-radius);
|
|
color: var(--cs-code-colour);
|
|
background-color: var(--cs-code-background-colour);
|
|
}
|
|
body.cs-plugin .markdown-rendered :not(pre) > code:not([class*=blur]) span.cm-inline-code {
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
body.cs-plugin code span.cm-formatting.cm-inline-code ~ span.cs-header {
|
|
border-radius: 0px !important;
|
|
}
|
|
body.cs-plugin span.cs-header {
|
|
display: inline;
|
|
}
|
|
body.cs-plugin span.cs-header.cm-inline-code {
|
|
padding-left: 0.25em;
|
|
padding-right: 0px;
|
|
border-radius: var(--cs-code-inline-radius) 0px 0px var(--cs-code-inline-radius) !important;
|
|
}
|
|
body.cs-plugin span.cs-header ~ span.cm-inline-code:not(.cs-footer) {
|
|
padding-left: 0px !important;
|
|
padding-right: 0px !important;
|
|
border-radius: 0px !important;
|
|
}
|
|
body.cs-plugin span.cs-header > span:not(:first-child):not(.cs-separator) {
|
|
margin-left: 0.5em;
|
|
}
|
|
body.cs-plugin span.cs-header > span.cs-icon-container {
|
|
display: inline-block;
|
|
vertical-align: text-top;
|
|
width: 1.1em;
|
|
margin-left: 0.5em;
|
|
}
|
|
body.cs-plugin span.cs-header > span.cs-icon-container > img.cs-icon:not([class*=emoji]) {
|
|
display: inline;
|
|
width: auto;
|
|
margin: unset;
|
|
}
|
|
body.cs-plugin span.cs-header span.cs-title {
|
|
color: var(--cs-title-color);
|
|
font-weight: var(--cs-title-weight);
|
|
}
|
|
body.cs-plugin span.cs-header span.cs-language-title {
|
|
color: var(--cs-language-title-color);
|
|
font-weight: var(--cs-language-title-weight);
|
|
}
|
|
body.cs-plugin span.cs-header span.cs-separator {
|
|
color: var(--cs-title-color);
|
|
}
|
|
body.cs-plugin span.cs-header span.cs-parameters {
|
|
color: var(--cs-code-parameters-colour);
|
|
}
|
|
body.cs-plugin span.cs-footer {
|
|
padding-left: 0.4em !important;
|
|
}
|
|
body.cs-plugin span.cs-footer.cm-inline-code {
|
|
padding-left: 0px !important;
|
|
padding-right: 0.25em;
|
|
border-radius: 0px var(--cs-code-inline-radius) var(--cs-code-inline-radius) 0px !important;
|
|
}
|
|
body.cs-plugin span.cs-footer button.cs-copy-icon {
|
|
--icon-size: var(--icon-xs);
|
|
padding: 0.15em;
|
|
margin-left: var(--size-4-2);
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
height: 100%;
|
|
display: inline-block;
|
|
}
|
|
body.cs-plugin span.cs-footer button.cs-copy-icon:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
body.cs-plugin span.cs-footer button.cs-copy-icon > svg {
|
|
display: inline;
|
|
height: 100%;
|
|
vertical-align: text-top;
|
|
color: var(--code-comment);
|
|
}
|
|
body.cs-plugin span.cs-footer button.cs-copy-icon:hover > svg {
|
|
color: var(--code-normal);
|
|
}
|
|
body.cs-plugin span.cs-inline-parameters {
|
|
color: var(--code-styler-inline-colour-parameters);
|
|
}
|
|
body.cs-plugin span.cm-comment span.cs-comment {
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
padding: 0px !important;
|
|
}
|
|
body.cs-plugin span.cs-comment {
|
|
box-sizing: initial;
|
|
}
|
|
body.cs-plugin span.cs-comment p {
|
|
display: inline !important;
|
|
}
|
|
body.cs-plugin .cm-s-obsidian span.cm-inline-code {
|
|
color: var(--cs-code-colour);
|
|
background-color: var(--cs-code-background-colour);
|
|
}
|
|
body.cs-plugin .cm-s-obsidian span.cm-inline-code span.cm-inline-code.cm-hmd-indented-code {
|
|
background-color: transparent;
|
|
}
|
|
body.cs-plugin .cm-s-obsidian span.cm-inline-code span.cm-inline-code:not(.cm-formatting):not(.cm-hmd-indented-code):not(.obsidian-search-match-highlight) {
|
|
background-color: var(--cs-code-background-colour);
|
|
}
|
|
body.cs-plugin .cm-s-obsidian span.cm-inline-code:not(.cm-formatting) {
|
|
border-radius: var(--cs-code-inline-radius);
|
|
}
|
|
body.cs-plugin .cm-s-obsidian span.cm-inline-code.cm-formatting {
|
|
border-start-start-radius: var(--cs-code-inline-radius);
|
|
border-end-start-radius: var(--cs-code-inline-radius);
|
|
}
|
|
body.cs-plugin .cm-s-obsidian span.cm-inline-code:not(.cm-formatting) + .cm-formatting.cm-inline-code {
|
|
border-start-end-radius: var(--cs-code-inline-radius);
|
|
border-end-end-radius: var(--cs-code-inline-radius);
|
|
}
|
|
body.cs-plugin tr code.cs-code-inline {
|
|
white-space: normal;
|
|
}
|
|
body.cs-plugin .reveal img.cs-icon {
|
|
margin: inherit;
|
|
}
|
|
|
|
/* src/css/shiki.scss */
|
|
body.cs-plugin.theme-light code.cs-shiki:not([class*=blur]):not(.cs-shiki-dark):not(.cs-shiki-light),
|
|
body.cs-plugin.theme-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) {
|
|
color: var(--cs-shiki-light);
|
|
background-color: var(--cs-shiki-light-bg);
|
|
font-style: var(--cs-shiki-light-font-style);
|
|
font-weight: var(--cs-shiki-light-font-weight);
|
|
text-decoration: var(--cs-shiki-light-text-decoration);
|
|
}
|
|
body.cs-plugin.theme-dark code.cs-shiki:not([class*=blur]):not(.cs-shiki-dark):not(.cs-shiki-light),
|
|
body.cs-plugin.theme-dark 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) {
|
|
color: var(--cs-shiki-dark);
|
|
background-color: var(--cs-shiki-dark-bg);
|
|
font-style: var(--cs-shiki-dark-font-style);
|
|
font-weight: var(--cs-shiki-dark-font-weight);
|
|
text-decoration: var(--cs-shiki-dark-text-decoration);
|
|
}
|
|
|
|
/* src/styles.scss */
|