mirror of
https://github.com/ebullient/obsidian-theme-ebullientworks.git
synced 2026-07-22 03:10:29 +00:00
Separated out CM Selectors
Refactor SCSS for blockquotes and text-links This commit refactors the SCSS for blockquotes and text-links. It moves specific edits for live preview and view modes into separate files. .Added _16-mermaid.scss for mermaid graph styling Update CSS variables to rem units in variables. Update CSS values from pixels to rem units to resolve code analysis error. Update image size units in SCSS file Changed the unit of measurement for image size from pixels to rem. Remove redundant image and iframe styles The existing CSS rules for image and iframe styling in _28-publish-image-embeds.scss file have been removed. These rules were redundant as other global styles already handle responsiveness for these elements. The change should simplify the CSS and avoid potential conflicts later. 🩹 fix(SCSS): Added new CSS variable for Mermaid font A new CSS variable --font-mermaid was added to _02-fonts.scss file. This is to provide distinct styling for Mermaid diagrams, enabling more consistent and cleaner typography across the application. 🩹 fix(SCSS): Rename SCSS file for clarity 🩹 fix(SCSS): An additional entry ".idea" has been added in the .gitignore file to exclude JetBrains IDE settings and system files. ✨ Added basic metadata styling
This commit is contained in:
Sigrunixia
parent
c7e562ecf7
commit
7cf5558daf
26 changed files with 644 additions and 460 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -1,5 +1,6 @@
|
|||
/node_modules
|
||||
.DS_Store
|
||||
.idea
|
||||
.dev-target.json
|
||||
app*.css
|
||||
|
||||
|
|
|
|||
|
|
@ -12,4 +12,5 @@ body {
|
|||
--font-interface-theme: var(--ebw-font-text);
|
||||
--font-text-theme: var(--ebw-font-text);
|
||||
--font-monospace-theme: var(--ebw-font-monospace);
|
||||
--font-mermaid: var(--ebw-font-monospace);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,10 +64,4 @@
|
|||
--color-purple: var(--purple-2);
|
||||
--color-pink-rgb: var(--pink-2-rgb);
|
||||
--color-pink: var(--pink-2);
|
||||
|
||||
&.is-tablet {
|
||||
--titlebar-background: var(--background-secondary);
|
||||
--titlebar-background-focused: var(--background-secondary);
|
||||
--interactive-normal: var(--background-primary-alt);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
11
src/fragments/_03-core-themes-app.scss
Normal file
11
src/fragments/_03-core-themes-app.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
@use '03-core-theme-dark' as *;
|
||||
@use '03-core-theme-light' as *;
|
||||
|
||||
|
||||
.theme-dark {
|
||||
&.is-tablet {
|
||||
--titlebar-background: var(--background-secondary);
|
||||
--titlebar-background-focused: var(--background-secondary);
|
||||
--interactive-normal: var(--background-primary-alt);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
.modal-content .vertical-tab-header {
|
||||
--interactive-accent: var(--interactive-accent-hover);
|
||||
}
|
||||
select:focus, .dropdown:focus {
|
||||
box-shadow: 0 0 0px 1px var(--background-modifier-border-focus);
|
||||
|
||||
select:focus,
|
||||
.dropdown:focus {
|
||||
box-shadow: 0 0 0 0.0625rem var(--background-modifier-border-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
|
|
|||
103
src/fragments/_03f-metadata-view.scss
Normal file
103
src/fragments/_03f-metadata-view.scss
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
body {
|
||||
--metadata-background: var(--background-primary-alt); // Default Transparent or none
|
||||
//--metadata-max-width: none;
|
||||
//--metadata-padding: var(--size-4-2) 0;
|
||||
//--metadata-border-color: var(--background-modifier-border);
|
||||
//--metadata-border-radius: 0;
|
||||
//--metadata-border-width: 0;
|
||||
//--metadata-divider-color: var(--background-modifier-border);
|
||||
//--metadata-divider-color-focus: transparent;
|
||||
//--metadata-divider-width: 0;
|
||||
--metadata-gap: 0.3125rem; // 5px
|
||||
//--metadata-property-padding: 0;
|
||||
--metadata-property-radius: 0.375rem; // 6px
|
||||
//--metadata-property-background: transparent;
|
||||
//--metadata-property-background-hover: transparent;
|
||||
//--metadata-property-background-active: var(--background-modifier-hover);
|
||||
//--metadata-label-background-hover: transparent;
|
||||
//--metadata-label-background-active: var(--background-modifier-hover);
|
||||
//--metadata-label-font-size: var(--font-smaller);
|
||||
//--metadata-label-font-weight: inherit;
|
||||
//--metadata-label-font-weight: 700;
|
||||
//--metadata-label-text-color: var(--text-muted);
|
||||
//--metadata-label-text-color-hover: var(--text-muted);
|
||||
//--metadata-label-width: 8em;
|
||||
//--metadata-input-font-size: var(--font-smaller);
|
||||
//--metadata-input-background: transparent;
|
||||
//--metadata-input-background-hover: transparent;
|
||||
//--metadata-input-background-active: var(--background-modifier-hover);
|
||||
//--metadata-sidebar-label-font-size: var(--font-ui-small);
|
||||
//--metadata-sidebar-input-font-size: var(--font-ui-small);
|
||||
}
|
||||
|
||||
//.metadata-container {
|
||||
// --input-height: 1.75rem;
|
||||
// border-radius: var(--metadata-border-radius);
|
||||
// background-color: var(--metadata-background);
|
||||
// border-color: var(--metadata-border-color);
|
||||
// border-style: solid;
|
||||
// border-width: var(--metadata-border-width);
|
||||
// padding: var(--metadata-padding);
|
||||
// color: var(--text-muted);
|
||||
// position: relative;
|
||||
// max-width: var(--metadata-max-width);
|
||||
//}
|
||||
//
|
||||
//
|
||||
//.metadata-properties-heading .collapse-indicator {
|
||||
// position: absolute;
|
||||
// left: -22px;
|
||||
// padding: 0 6px;
|
||||
//}
|
||||
|
||||
.metadata-properties-title {
|
||||
//user-select: none;
|
||||
//font-size: 1em;
|
||||
//color: var(--text-normal);
|
||||
//font-weight: var(--font-medium);
|
||||
//margin-bottom: var(--size-4-3);
|
||||
//padding: 0 var(--size-4-1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-family: var(--ebw-header-font);
|
||||
|
||||
&:before {
|
||||
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
content: "✧ ";
|
||||
color: var(--interactive-hover);
|
||||
padding: 0 0.8em;
|
||||
position: relative;
|
||||
}
|
||||
&::after {
|
||||
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
content: " ✧";
|
||||
padding: 0 0.8em;
|
||||
position: relative;
|
||||
color: var(--interactive-hover);
|
||||
}
|
||||
}
|
||||
|
||||
//input.metadata-property-key-input {
|
||||
//border: none;
|
||||
//flex-shrink: 1;
|
||||
// color: var(--metadata-label-text-color);
|
||||
//font-size: var(--metadata-label-font-size);
|
||||
//font-weight: var(--metadata-label-font-weight);
|
||||
//background-color: transparent;
|
||||
//display: flex;
|
||||
//align-items: center;
|
||||
//text-overflow: ellipsis;
|
||||
//overflow: hidden;
|
||||
//}
|
||||
|
||||
// .metadata-property-value {
|
||||
//display: flex;
|
||||
//flex: 1 1 auto;
|
||||
//gap: var(--size-2-2);
|
||||
//align-items: center;
|
||||
//align-self: stretch;
|
||||
//min-height: var(--input-height);
|
||||
//background-color: var(--metadata-input-background);
|
||||
//border-bottom: var(--metadata-divider-width) solid var(--metadata-divider-color);
|
||||
//overflow: hidden;
|
||||
//}
|
||||
|
|
@ -27,6 +27,7 @@ body {
|
|||
--h5-weight: 500;
|
||||
--h6-weight: 500;
|
||||
}
|
||||
|
||||
.theme-dark {
|
||||
--h1-color: var(--yellow-2);
|
||||
--h2-color: var(--green-3);
|
||||
|
|
@ -35,6 +36,7 @@ body {
|
|||
--h5-color: var(--purple-3);
|
||||
--h6-color: var(--pink-3);
|
||||
}
|
||||
|
||||
.theme-light {
|
||||
--h1-color: var(--yellow-3);
|
||||
--h2-color: var(--green-4);
|
||||
|
|
@ -43,37 +45,20 @@ body {
|
|||
--h5-color: var(--purple-4);
|
||||
--h6-color: var(--pink-4);
|
||||
}
|
||||
.cm-header-1 {
|
||||
--heading-formatting: var(--h1-color)
|
||||
}
|
||||
.cm-header-2 {
|
||||
--heading-formatting: var(--h2-color)
|
||||
}
|
||||
.cm-header-3 {
|
||||
--heading-formatting: var(--h3-color)
|
||||
}
|
||||
.cm-header-4 {
|
||||
--heading-formatting: var(--h4-color)
|
||||
}
|
||||
.cm-header-5 {
|
||||
--heading-formatting: var(--h5-color)
|
||||
}
|
||||
.cm-header-6 {
|
||||
--heading-formatting: var(--h6-color)
|
||||
}
|
||||
|
||||
h1,
|
||||
.markdown-rendered h1,
|
||||
.cm-line:not(.HyperMD-codeblock) .cm-header-1,
|
||||
.HyperMD-list-line .cm-header-1 {
|
||||
|
||||
@mixin variants-caps-header-one {
|
||||
font-variant-caps: var(--ebw-header-font-caps-variant);
|
||||
}
|
||||
|
||||
.HyperMD-header,
|
||||
.markdown-rendered,
|
||||
.workspace,
|
||||
.print {
|
||||
.is-live-preview .HyperMD-header .cm-header::before,
|
||||
|
||||
h1,
|
||||
.markdown-rendered h1 {
|
||||
@include variants-caps-header-one;
|
||||
}
|
||||
|
||||
|
||||
@mixin before-header-one {
|
||||
h1::before,
|
||||
h2::before,
|
||||
h3::before,
|
||||
|
|
@ -87,112 +72,54 @@ h1,
|
|||
vertical-align: middle;
|
||||
font-family: var(--font-default);
|
||||
}
|
||||
|
||||
h1 code,
|
||||
h2 code,
|
||||
h3 code,
|
||||
h4 code,
|
||||
h5 code,
|
||||
h6 code {
|
||||
font-weight: normal;
|
||||
font-variant-caps: normal;
|
||||
font-size: 75% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.cm-s-obsidian {
|
||||
.cm-header.cm-inline-code {
|
||||
font-weight: var(--font-extralight);
|
||||
font-weight: normal;
|
||||
font-variant-caps: normal;
|
||||
.markdown-rendered,
|
||||
.print {
|
||||
@include before-header-one;
|
||||
}
|
||||
|
||||
.cm-line:not(.HyperMD-codeblock) .cm-header.cm-inline-code {
|
||||
font-size: 65% !important;
|
||||
}
|
||||
|
||||
.cm-header-1.cm-hmd-codeblock:not(.cm-inline-code) {
|
||||
color: var(--h1-color);
|
||||
}
|
||||
.cm-header-2.cm-hmd-codeblock:not(.cm-inline-code) {
|
||||
color: var(--h2-color);
|
||||
}
|
||||
.cm-header-3.cm-hmd-codeblock:not(.cm-inline-code) {
|
||||
color: var(--h3-color);
|
||||
}
|
||||
.cm-header-4.cm-hmd-codeblock:not(.cm-inline-code) {
|
||||
color: var(--h4-color);
|
||||
}
|
||||
.cm-header-5.cm-hmd-codeblock:not(.cm-inline-code) {
|
||||
color: var(--h5-color);
|
||||
}
|
||||
.cm-header-6.cm-hmd-codeblock:not(.cm-inline-code) {
|
||||
color: var(--h6-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag formatting */
|
||||
/* Tag formatting */
|
||||
body:not(.ebullientworks-nix-tags) {
|
||||
--tag-background: transparent;
|
||||
--tag-background-hover: transparent;
|
||||
--tag-padding-x: 0;
|
||||
|
||||
&.theme-dark {
|
||||
.theme-dark & {
|
||||
--tag-color: var(--color-accent-2);
|
||||
--tag-color-hover: var(--tag-3);
|
||||
}
|
||||
& &.theme-light {
|
||||
|
||||
.theme-light & {
|
||||
--tag-color: var(--color-accent);
|
||||
--tag-color-hover: var(--tag-4);
|
||||
}
|
||||
}
|
||||
|
||||
a.tag,
|
||||
.editor .cl-hashtag,
|
||||
.markdown-source-view.mod-cm6 .cm-hashtag,
|
||||
.cm-s-obsidian .cm-formatting.cm-hashtag,
|
||||
.cm-s-obsidian .cm-quote.cm-hashtag,
|
||||
.cm-s-obsidian .cm-hmd-codeblock.cm-hashtag {
|
||||
font-family: var(--ebw-font-tags);
|
||||
color: var(--tag-color);
|
||||
}
|
||||
@mixin tags-reg {
|
||||
font-family: var(--ebw-font-tags);
|
||||
color: var(--tag-color);
|
||||
}
|
||||
|
||||
h1 a.tag,
|
||||
h2 a.tag,
|
||||
h3 a.tag,
|
||||
h4 a.tag,
|
||||
h5 a.tag,
|
||||
h6 a.tag {
|
||||
font-variant-caps: normal;
|
||||
font-weight: var(--font-extralight);
|
||||
font-size: 75% !important;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: unset;
|
||||
}
|
||||
|
||||
.cm-s-obsidian {
|
||||
.cm-header.cm-hashtag {
|
||||
font-weight: var(--font-extralight);
|
||||
font-variant-caps: normal;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: unset;
|
||||
}
|
||||
a.tag,
|
||||
.editor .cl-hashtag {
|
||||
@include tags-reg;
|
||||
}
|
||||
|
||||
.cm-line:not(.HyperMD-codeblock) .cm-header.cm-hashtag {
|
||||
font-size: 65% !important;
|
||||
}
|
||||
.cm-header-1.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code),
|
||||
.cm-header-2.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code),
|
||||
.cm-header-3.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code),
|
||||
.cm-header-4.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code),
|
||||
.cm-header-5.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code),
|
||||
.cm-header-6.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code) {
|
||||
color: var(--tag-color);
|
||||
}
|
||||
}
|
||||
h1 a.tag,
|
||||
h2 a.tag,
|
||||
h3 a.tag,
|
||||
h4 a.tag,
|
||||
h5 a.tag,
|
||||
h6 a.tag {
|
||||
font-variant-caps: normal;
|
||||
font-weight: var(--font-extralight);
|
||||
font-size: 75% !important;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: unset;
|
||||
}
|
||||
|
||||
/* HR tags */
|
||||
|
|
|
|||
84
src/fragments/_04a-headings-hr-tags-app.scss
Normal file
84
src/fragments/_04a-headings-hr-tags-app.scss
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
@use '04-headings-hr-tags' as head;
|
||||
|
||||
.cm-line:not(.HyperMD-codeblock) .cm-header-1,
|
||||
.HyperMD-list-line .cm-header-1 {
|
||||
@include head.variants-caps-header-one;
|
||||
}
|
||||
|
||||
.HyperMD-header,
|
||||
.workspace {
|
||||
.is-live-preview .HyperMD-header .cm-header::before,
|
||||
.workspace {
|
||||
@include head.before-header-one;
|
||||
}
|
||||
}
|
||||
|
||||
.cm-s-obsidian {
|
||||
.cm-header.cm-inline-code {
|
||||
font-weight: var(--font-extralight);
|
||||
font-weight: normal;
|
||||
font-variant-caps: normal;
|
||||
}
|
||||
|
||||
.cm-line:not(.HyperMD-codeblock) .cm-header.cm-inline-code {
|
||||
font-size: 65% !important;
|
||||
}
|
||||
|
||||
.cm-header-1.cm-hmd-codeblock:not(.cm-inline-code) {
|
||||
color: var(--h1-color);
|
||||
}
|
||||
|
||||
.cm-header-2.cm-hmd-codeblock:not(.cm-inline-code) {
|
||||
color: var(--h2-color);
|
||||
}
|
||||
|
||||
.cm-header-3.cm-hmd-codeblock:not(.cm-inline-code) {
|
||||
color: var(--h3-color);
|
||||
}
|
||||
|
||||
.cm-header-4.cm-hmd-codeblock:not(.cm-inline-code) {
|
||||
color: var(--h4-color);
|
||||
}
|
||||
|
||||
.cm-header-5.cm-hmd-codeblock:not(.cm-inline-code) {
|
||||
color: var(--h5-color);
|
||||
}
|
||||
|
||||
.cm-header-6.cm-hmd-codeblock:not(.cm-inline-code) {
|
||||
color: var(--h6-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag formatting */
|
||||
|
||||
.editor .cl-hashtag,
|
||||
.markdown-source-view.mod-cm6 .cm-hashtag,
|
||||
.cm-s-obsidian .cm-formatting.cm-hashtag,
|
||||
.cm-s-obsidian .cm-quote.cm-hashtag,
|
||||
.cm-s-obsidian .cm-hmd-codeblock.cm-hashtag {
|
||||
@include head.tags-reg;
|
||||
}
|
||||
|
||||
.cm-s-obsidian {
|
||||
.cm-header.cm-hashtag {
|
||||
font-weight: var(--font-extralight);
|
||||
font-variant-caps: normal;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: unset;
|
||||
}
|
||||
|
||||
.cm-line:not(.HyperMD-codeblock) .cm-header.cm-hashtag {
|
||||
font-size: 65% !important;
|
||||
}
|
||||
|
||||
.cm-header-1.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code),
|
||||
.cm-header-2.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code),
|
||||
.cm-header-3.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code),
|
||||
.cm-header-4.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code),
|
||||
.cm-header-5.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code),
|
||||
.cm-header-6.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code) {
|
||||
color: var(--tag-color);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
// This file is suitable for publish
|
||||
|
||||
.theme-dark {
|
||||
--bold-color: var(--blue-3);
|
||||
--italic-color: var(--pink-2);
|
||||
|
|
@ -10,6 +12,7 @@
|
|||
|
||||
--ebw-del-link-decoration-color: rgba(203, 203, 203, 0.5);
|
||||
}
|
||||
|
||||
.theme-light {
|
||||
--bold-color: var(--blue-4);
|
||||
--italic-color: var(--pink-4);
|
||||
|
|
@ -22,6 +25,7 @@
|
|||
|
||||
--ebw-del-link-decoration-color: rgba(100, 100, 100, 0.5);
|
||||
}
|
||||
|
||||
body {
|
||||
--link-decoration: underline;
|
||||
--link-decoration-hover: underline;
|
||||
|
|
@ -38,95 +42,59 @@ body {
|
|||
--link-unresolved-decoration-style: dotted;
|
||||
--link-unresolved-decoration-color: var(--ebw-link-underline);
|
||||
}
|
||||
.cm-s-obsidian span.cm-quote.cm-em {
|
||||
color: var(--italic-color);
|
||||
}
|
||||
.cm-s-obsidian span.cm-quote.cm-strong {
|
||||
color: var(--bold-color);
|
||||
}
|
||||
|
||||
|
||||
// Strong
|
||||
|
||||
strong em,
|
||||
strong em a.internal-link,
|
||||
.cm-s-obsidian span.cm-strong.cm-em,
|
||||
.cm-s-obsidian span.cm-quote.cm-strong.cm-em {
|
||||
strong em a.internal-link {
|
||||
color: var(--ebw-strong-em);
|
||||
}
|
||||
.markdown-rendered del a.external-link,
|
||||
.markdown-rendered del a.internal-link,
|
||||
.markdown-rendered del a.internal-link.is-unresolved,
|
||||
.markdown-source-view.mod-cm6 .cm-url.cm-strikethrough,
|
||||
.markdown-source-view.mod-cm6 .cm-url.cm-strikethrough .cm-underline,
|
||||
.markdown-source-view.mod-cm6 .cm-link.cm-strikethrough,
|
||||
.markdown-source-view.mod-cm6 .cm-link.cm-strikethrough .cm-underline,
|
||||
.markdown-source-view.mod-cm6 .cm-hmd-internal-link.cm-strikethrough,
|
||||
.cm-s-obsidian .cm-url.cm-strikethrough,
|
||||
.cm-s-obsidian .cm-link.cm-strikethrough,
|
||||
.cm-s-obsidian .cm-hmd-internal-link.cm-strikethrough {
|
||||
.markdown-rendered del a.internal-link.is-unresolved {
|
||||
text-decoration: line-through var(--link-decoration-color);
|
||||
}
|
||||
a {
|
||||
text-decoration-color: var(--link-decoration-color);
|
||||
}
|
||||
|
||||
del a,
|
||||
.markdown-rendered del a.external-link,
|
||||
.markdown-rendered del a.internal-link,
|
||||
.markdown-rendered del a.internal-link.is-unresolved {
|
||||
text-decoration-color: var(--ebw-del-link-decoration-color);
|
||||
}
|
||||
.cm-s-obsidian span.cm-string.cm-url {
|
||||
color: var(--ebw-link-hidden);
|
||||
}
|
||||
|
||||
.markdown-rendered {
|
||||
.internal-link.is-unresolved::after {
|
||||
content: ' ✎';
|
||||
color: var(--ebw-link-underline);
|
||||
}
|
||||
}
|
||||
em a,
|
||||
.cm-s-obsidian span.cm-link.cm-em {
|
||||
|
||||
em a {
|
||||
color: var(--italic-color);
|
||||
text-decoration: var(--link-decoration);
|
||||
text-decoration-color: var(--link-decoration-color);
|
||||
}
|
||||
strong a,
|
||||
.cm-s-obsidian span.cm-link.cm-strong {
|
||||
|
||||
strong a{
|
||||
color: var(--bold-color);
|
||||
text-decoration: var(--link-decoration);
|
||||
}
|
||||
|
||||
em a:hover,
|
||||
.cm-s-obsidian span.cm-link.cm-em:hover,
|
||||
strong a:hover,
|
||||
.cm-s-obsidian span.cm-link.cm-strong:hover {
|
||||
strong a:hover {
|
||||
color: var(--link-color-hover);
|
||||
text-decoration: var(--link-decoration-hover);
|
||||
}
|
||||
|
||||
.external-link {
|
||||
background-position: center right;
|
||||
background-size: .9em;
|
||||
}
|
||||
|
||||
/* Collapse external links / markdown links in edit mode */
|
||||
body:not(.ebullientworks-show-edit-mode-links) .markdown-source-view.mod-cm6 {
|
||||
div.cm-line:not(.cm-active) {
|
||||
> .cm-string.cm-url:not(.cm-formatting) {
|
||||
font-size: 0;
|
||||
}
|
||||
> .cm-string.cm-url:not(.cm-formatting)::after {
|
||||
content: '\27B9';
|
||||
font-size: .8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// DATAVIEW TASK Skip decorations on dataview task list item indicators
|
||||
.markdown-preview-view .task-list-item,
|
||||
.markdown-rendered .task-list-item {
|
||||
a[data-href][aria-label-position].internal-link {
|
||||
border-bottom: none;
|
||||
text-decoration: none;
|
||||
color: var(--ebw-link-underline);
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-rendered mark {
|
||||
color: var(--text-highlight-fg);
|
||||
border-radius: var(--radius-s);
|
||||
|
|
@ -136,9 +104,6 @@ body:not(.ebullientworks-show-edit-mode-links) .markdown-source-view.mod-cm6 {
|
|||
// Highlight, matched text
|
||||
.markdown-preview-view mark,
|
||||
.markdown-rendered mark,
|
||||
.search-result-file-matched-text,
|
||||
.cm-s-obsidian span.obsidian-search-match-highlight,
|
||||
.cm-s-obsidian span.cm-highlight,
|
||||
.is-flashing h1,
|
||||
.is-flashing h2,
|
||||
.is-flashing h3,
|
||||
|
|
@ -149,15 +114,6 @@ body:not(.ebullientworks-show-edit-mode-links) .markdown-source-view.mod-cm6 {
|
|||
color: var(--text-highlight-fg);
|
||||
}
|
||||
|
||||
div.CodeMirror.cm-s-obsidian span.cm-highlight.CodeMirror-selectedtext {
|
||||
--text-selection: var(--text-highlight-bg-active);
|
||||
}
|
||||
|
||||
.markdown-source-view.mod-cm6 .cm-selection,
|
||||
::selection {
|
||||
background-color: var(--text-selection);
|
||||
}
|
||||
|
||||
.is-flashing * ::selection {
|
||||
background-color: var(--text-selection-active);
|
||||
}
|
||||
|
|
|
|||
91
src/fragments/_05a-text-links-app.scss
Normal file
91
src/fragments/_05a-text-links-app.scss
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
// This file is NOT suitable for publish
|
||||
|
||||
@use '05-text-links' as *;
|
||||
|
||||
.cm-s-obsidian span.cm-quote.cm-em {
|
||||
color: var(--italic-color);
|
||||
}
|
||||
.cm-s-obsidian span.cm-quote.cm-strong {
|
||||
color: var(--bold-color);
|
||||
}
|
||||
|
||||
.cm-s-obsidian span.cm-strong.cm-em,
|
||||
.cm-s-obsidian span.cm-quote.cm-strong.cm-em {
|
||||
color: var(--ebw-strong-em);
|
||||
}
|
||||
|
||||
.markdown-source-view.mod-cm6 .cm-url.cm-strikethrough,
|
||||
.markdown-source-view.mod-cm6 .cm-url.cm-strikethrough .cm-underline,
|
||||
.markdown-source-view.mod-cm6 .cm-link.cm-strikethrough,
|
||||
.markdown-source-view.mod-cm6 .cm-link.cm-strikethrough .cm-underline,
|
||||
.markdown-source-view.mod-cm6 .cm-hmd-internal-link.cm-strikethrough,
|
||||
.cm-s-obsidian .cm-url.cm-strikethrough,
|
||||
.cm-s-obsidian .cm-link.cm-strikethrough,
|
||||
.cm-s-obsidian .cm-hmd-internal-link.cm-strikethrough {
|
||||
text-decoration: line-through var(--link-decoration-color);
|
||||
}
|
||||
|
||||
.cm-s-obsidian span.cm-string.cm-url {
|
||||
color: var(--ebw-link-hidden);
|
||||
}
|
||||
|
||||
// Em A
|
||||
.cm-s-obsidian span.cm-link.cm-em {
|
||||
color: var(--italic-color);
|
||||
text-decoration: var(--link-decoration);
|
||||
text-decoration-color: var(--link-decoration-color);
|
||||
}
|
||||
|
||||
// Strong A
|
||||
|
||||
.cm-s-obsidian span.cm-link.cm-strong {
|
||||
color: var(--bold-color);
|
||||
text-decoration: var(--link-decoration);
|
||||
}
|
||||
|
||||
// Strong and Em A Hover
|
||||
|
||||
.cm-s-obsidian span.cm-link.cm-em:hover,
|
||||
.cm-s-obsidian span.cm-link.cm-strong:hover {
|
||||
color: var(--link-color-hover);
|
||||
text-decoration: var(--link-decoration-hover);
|
||||
}
|
||||
|
||||
/* Collapse external links / markdown links in edit mode */
|
||||
body:not(.ebullientworks-show-edit-mode-links) .markdown-source-view.mod-cm6 {
|
||||
div.cm-line:not(.cm-active) {
|
||||
> .cm-string.cm-url:not(.cm-formatting) {
|
||||
font-size: 0;
|
||||
}
|
||||
> .cm-string.cm-url:not(.cm-formatting)::after {
|
||||
content: '\27B9';
|
||||
font-size: .8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// DATAVIEW TASK Skip decorations on dataview task list item indicators
|
||||
.markdown-preview-view .task-list-item,
|
||||
.markdown-rendered .task-list-item {
|
||||
a[data-href][aria-label-position].internal-link {
|
||||
border-bottom: none;
|
||||
text-decoration: none;
|
||||
color: var(--ebw-link-underline);
|
||||
}
|
||||
}
|
||||
|
||||
// Highlight, matched text
|
||||
|
||||
.cm-s-obsidian span.obsidian-search-match-highlight,
|
||||
.cm-s-obsidian span.cm-highlight {
|
||||
color: var(--text-highlight-fg);
|
||||
}
|
||||
|
||||
div.CodeMirror.cm-s-obsidian span.cm-highlight.CodeMirror-selectedtext {
|
||||
--text-selection: var(--text-highlight-bg-active);
|
||||
}
|
||||
|
||||
.markdown-source-view.mod-cm6 .cm-selection,
|
||||
::selection {
|
||||
background-color: var(--text-selection);
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
@use '06a-checkbox-mixin' as checkboxes;
|
||||
|
||||
body {
|
||||
--checkbox-checked: var(--green-4);
|
||||
--checkbox-deferred: var(--blue-3);
|
||||
|
|
@ -20,17 +21,6 @@ body {
|
|||
--checkbox-hover: var(--gray-light-2);
|
||||
}
|
||||
|
||||
/** Set line-height on mobile */
|
||||
.mobile {
|
||||
.markdown-preview-view {
|
||||
ol,
|
||||
ul {
|
||||
display: block;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body:not(.ebullientworks-nix-checkbox) {
|
||||
/** Use style settings to disable custom checkboxes in the theme */
|
||||
@include checkboxes.list;
|
||||
|
|
|
|||
12
src/fragments/_06b-lists-checkboxes-app.scss
Normal file
12
src/fragments/_06b-lists-checkboxes-app.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
@use '06-lists-checkboxes' as *;
|
||||
|
||||
/** Set line-height on mobile */
|
||||
.mobile {
|
||||
.markdown-preview-view {
|
||||
ol,
|
||||
ul {
|
||||
display: block;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -22,14 +22,15 @@ body {
|
|||
--ebw-callout-bug: 180, 152, 175; // purple-3
|
||||
--ebw-callout-example: 142, 103, 135; // purple-4
|
||||
|
||||
--ebw-callout-danger: 230,133,132; // red-3
|
||||
--ebw-callout-failure: 211,141,159; // pink-3
|
||||
--ebw-callout-danger: 230, 133, 132; // red-3
|
||||
--ebw-callout-failure: 211, 141, 159; // pink-3
|
||||
|
||||
--ebw-callout-reference: 183, 183, 183; // gray
|
||||
--ebw-callout-toc: 235, 235, 235; // gray-light-4
|
||||
|
||||
--blockquote-border-color: var(--secondary-accent-4);
|
||||
}
|
||||
|
||||
.theme-light {
|
||||
--blockquote-border-color: var(--secondary-accent-2);
|
||||
--ebw-callout-toc: 159, 159, 159; // gray-dark-1
|
||||
|
|
@ -41,12 +42,10 @@ body {
|
|||
--ebw-callout-info: 53, 119, 174; // blue-4
|
||||
--ebw-callout-tip: 61, 126, 123; // cyan-4
|
||||
|
||||
--ebw-callout-danger: 167,92,112; // pink-4
|
||||
--ebw-callout-danger: 167, 92, 112; // pink-4
|
||||
}
|
||||
|
||||
.rendered-widget,
|
||||
.markdown-rendered,
|
||||
.markdown-preview-section {
|
||||
@mixin blockquote-styles {
|
||||
blockquote {
|
||||
overflow-x: auto;
|
||||
padding: var(--callout-content-padding);
|
||||
|
|
@ -55,183 +54,139 @@ body {
|
|||
> :first-child {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.admonition {
|
||||
margin: 1em 0;
|
||||
padding: var(--callout-padding);
|
||||
}
|
||||
.is-live-preview {
|
||||
.admonition {
|
||||
margin: 0;
|
||||
padding: var(--callout-padding);
|
||||
|
||||
.admonition-content {
|
||||
> :first-child {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
> :last-child {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
> * {
|
||||
margin-top: initial;
|
||||
margin-bottom: initial;
|
||||
}
|
||||
> * br {
|
||||
display: none;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
white-space: normal;
|
||||
}
|
||||
.math-block > mjx-container {
|
||||
padding: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.markdown-rendered {
|
||||
@include blockquote-styles;
|
||||
}
|
||||
|
||||
// Callout Color Types
|
||||
|
||||
$callout-types: (
|
||||
"abstract": ebw-callout-abstract,
|
||||
"summary": ebw-callout-abstract,
|
||||
"tldr": ebw-callout-abstract,
|
||||
"note": ebw-callout-note,
|
||||
"info": ebw-callout-info,
|
||||
"todo": ebw-callout-info,
|
||||
"tip": ebw-callout-tip,
|
||||
"hint": ebw-callout-tip,
|
||||
"important": ebw-callout-tip,
|
||||
"success": ebw-callout-success,
|
||||
"check": ebw-callout-success,
|
||||
"done": ebw-callout-success,
|
||||
"question": ebw-callout-question,
|
||||
"help": ebw-callout-question,
|
||||
"faq": ebw-callout-question,
|
||||
"warning": ebw-callout-warning,
|
||||
"caution": ebw-callout-warning,
|
||||
"attention": ebw-callout-warning,
|
||||
"failure": ebw-callout-failure,
|
||||
"fail": ebw-callout-failure,
|
||||
"missing": ebw-callout-failure,
|
||||
"danger": ebw-callout-danger,
|
||||
"error": ebw-callout-danger,
|
||||
"bug": ebw-callout-bug,
|
||||
"example": ebw-callout-example,
|
||||
"excerpt": ebw-callout-quote,
|
||||
"quote": ebw-callout-quote,
|
||||
"cite": ebw-callout-quote,
|
||||
"chat": ebw-callout-chat,
|
||||
"reference": ebw-callout-reference,
|
||||
"toc": ebw-callout-toc
|
||||
);
|
||||
|
||||
.callout {
|
||||
@each $type, $color in $callout-types {
|
||||
&[data-callout="#{$type}"] {
|
||||
--callout-color: var(--#{$color});
|
||||
}
|
||||
}
|
||||
}
|
||||
.markdown-source-view.mod-cm6 .admonition-parent > .edit-block-button {
|
||||
right: calc(var(--size-4-2) + var(--icon-size) + 6px);
|
||||
top: calc(var(--size-2-2) + 2px);
|
||||
}
|
||||
.callout[data-callout="abstract"],
|
||||
.callout[data-callout="summary"],
|
||||
.callout[data-callout="tldr"] {
|
||||
--callout-color: var(--ebw-callout-abstract);
|
||||
}
|
||||
.callout[data-callout="note"] {
|
||||
--callout-color: var(--ebw-callout-note);
|
||||
}
|
||||
.callout[data-callout="info"],
|
||||
.callout[data-callout="todo"] {
|
||||
--callout-color: var(--ebw-callout-info);
|
||||
}
|
||||
.callout[data-callout="tip"],
|
||||
.callout[data-callout="hint"],
|
||||
.callout[data-callout="important"] {
|
||||
--callout-color: var(--ebw-callout-tip);
|
||||
}
|
||||
.callout[data-callout="success"],
|
||||
.callout[data-callout="check"],
|
||||
.callout[data-callout="done"] {
|
||||
--callout-color: var(--ebw-callout-success);
|
||||
}
|
||||
.callout[data-callout="question"],
|
||||
.callout[data-callout="help"],
|
||||
.callout[data-callout="faq"] {
|
||||
--callout-color: var(--ebw-callout-question);
|
||||
}
|
||||
.callout[data-callout="warning"],
|
||||
.callout[data-callout="caution"],
|
||||
.callout[data-callout="attention"] {
|
||||
--callout-color: var(--ebw-callout-warning);
|
||||
}
|
||||
.callout[data-callout="failure"],
|
||||
.callout[data-callout="fail"],
|
||||
.callout[data-callout="missing"] {
|
||||
--callout-color: var(--ebw-callout-failure);
|
||||
}
|
||||
.callout[data-callout="danger"],
|
||||
.callout[data-callout="error"] {
|
||||
--callout-color: var(--ebw-callout-danger);
|
||||
}
|
||||
.callout[data-callout="bug"] {
|
||||
--callout-color: var(--ebw-callout-bug);
|
||||
}
|
||||
.callout[data-callout="example"] {
|
||||
--callout-color: var(--ebw-callout-example);
|
||||
}
|
||||
.callout[data-callout="excerpt"],
|
||||
.callout[data-callout="quote"],
|
||||
.callout[data-callout="cite"] {
|
||||
--callout-color: var(--ebw-callout-quote);
|
||||
}
|
||||
.callout[data-callout="chat"] {
|
||||
--callout-color: var(--ebw-callout-chat);
|
||||
}
|
||||
.callout[data-callout="reference"] {
|
||||
--callout-icon: library;
|
||||
--callout-color: var(--ebw-callout-reference);
|
||||
}
|
||||
.callout[data-callout="toc"] {
|
||||
--callout-icon: layout-list;
|
||||
--callout-color: var(--ebw-callout-toc);
|
||||
}
|
||||
|
||||
// Color Map
|
||||
|
||||
$callout-title-types: (
|
||||
"info": blue-5,
|
||||
"todo": blue-5,
|
||||
"note": blue-5,
|
||||
"excerpt": blue-5,
|
||||
"quote": blue-5,
|
||||
"cite": blue-5,
|
||||
"bug": purple-5,
|
||||
"example": purple-5,
|
||||
"abstract": purple-5,
|
||||
"summary": purple-5,
|
||||
"tldr": purple-5,
|
||||
"question": cyan-5,
|
||||
"help": cyan-5,
|
||||
"faq": cyan-5,
|
||||
"tip": cyan-5,
|
||||
"hint": cyan-5,
|
||||
"important": cyan-5,
|
||||
"success": green-5,
|
||||
"check": green-5,
|
||||
"done": green-5,
|
||||
"warning": yellow-5,
|
||||
"caution": yellow-5,
|
||||
"attention": yellow-5,
|
||||
"danger": red-5,
|
||||
"error": red-5,
|
||||
"failure": red-5,
|
||||
"fail": red-5,
|
||||
"missing": red-5,
|
||||
"toc": gray-dark-4,
|
||||
"reference": gray-dark-4
|
||||
);
|
||||
|
||||
.theme-light {
|
||||
.callout[data-callout="info"],
|
||||
.callout[data-callout="todo"],
|
||||
.callout[data-callout="note"],
|
||||
.callout[data-callout="excerpt"],
|
||||
.callout[data-callout="quote"],
|
||||
.callout[data-callout="cite"] {
|
||||
--callout-title-color: var(--blue-5);
|
||||
}
|
||||
.callout[data-callout="bug"],
|
||||
.callout[data-callout="example"],
|
||||
.callout[data-callout="abstract"],
|
||||
.callout[data-callout="summary"],
|
||||
.callout[data-callout="tldr"] {
|
||||
--callout-title-color: var(--purple-5);
|
||||
}
|
||||
.callout[data-callout="question"],
|
||||
.callout[data-callout="help"],
|
||||
.callout[data-callout="faq"],
|
||||
.callout[data-callout="tip"],
|
||||
.callout[data-callout="hint"],
|
||||
.callout[data-callout="important"] {
|
||||
--callout-title-color: var(--cyan-5);
|
||||
}
|
||||
.callout[data-callout="success"],
|
||||
.callout[data-callout="check"],
|
||||
.callout[data-callout="done"] {
|
||||
--callout-title-color: var(--green-5);
|
||||
}
|
||||
.callout[data-callout="warning"],
|
||||
.callout[data-callout="caution"],
|
||||
.callout[data-callout="attention"] {
|
||||
--callout-title-color: var(--yellow-5);
|
||||
}
|
||||
.callout[data-callout="danger"],
|
||||
.callout[data-callout="error"],
|
||||
.callout[data-callout="failure"],
|
||||
.callout[data-callout="fail"],
|
||||
.callout[data-callout="missing"] {
|
||||
--callout-title-color: var(--red-5);
|
||||
}
|
||||
.callout[data-callout="toc"],
|
||||
.callout[data-callout="reference"] {
|
||||
--callout-title-color: var(--gray-dark-4);
|
||||
@each $type, $color in $callout-title-types {
|
||||
.callout[data-callout="#{$type}"] {
|
||||
--callout-title-color: var(--#{$color});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.callout-title {
|
||||
font-family: var(--ebw-font-callout-title);
|
||||
|
||||
& .callout-title-inner {
|
||||
flex: 2;
|
||||
}
|
||||
}
|
||||
.callout-title-inner {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.callout-content {
|
||||
background-color: var(--background-primary);
|
||||
|
||||
> :first-child {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.published-container .callout-content {
|
||||
background-color: var(--background-primary-alt);
|
||||
}
|
||||
|
||||
|
||||
// ------------------------------------------------------
|
||||
// Reference Admonition
|
||||
// Create callout of type 'reference' (book icon suggested)
|
||||
// Create admonition of type 'reference' (book icon suggested)
|
||||
// ```ad-reference
|
||||
// Title:: Title of referenced thing
|
||||
// Source:: https://....
|
||||
// ```
|
||||
// ------------------------------------------------------
|
||||
|
||||
.callout[data-callout="reference"] {
|
||||
.callout-content {
|
||||
white-space: pre-wrap;
|
||||
|
|
@ -248,20 +203,23 @@ body {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------------------------------
|
||||
// TOC Admonition
|
||||
// List with compressed padding that floats to the right
|
||||
// Create callout of type 'toc' (outline icon suggested)
|
||||
// Create admonition of type 'toc' (outline icon suggested)
|
||||
// ```ad-toc
|
||||
// - List of links to document sections
|
||||
// ```
|
||||
// ------------------------------------------------------
|
||||
|
||||
.callout[data-callout="toc"] {
|
||||
&.callout {
|
||||
float: right;
|
||||
margin-left: .5em;
|
||||
min-width: 150px;
|
||||
min-width: 9.375rem;
|
||||
}
|
||||
|
||||
.callout-content {
|
||||
padding-right: .5em;
|
||||
|
||||
|
|
@ -269,12 +227,13 @@ body {
|
|||
display: block;
|
||||
margin-block-start: .5em;
|
||||
margin-block-end: .5em;
|
||||
margin-inline-start: 0px;
|
||||
margin-inline-end: 0px;
|
||||
padding-inline-start: 30px;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
padding-inline-start: 1.875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.modal-content {
|
||||
.callout[data-callout="toc"] {
|
||||
float: unset;
|
||||
|
|
@ -282,6 +241,7 @@ div.modal-content {
|
|||
margin-left: unset;
|
||||
}
|
||||
}
|
||||
|
||||
div.popover {
|
||||
.callout[data-callout="toc"] {
|
||||
display: none;
|
||||
|
|
|
|||
50
src/fragments/_08a-blockquote-callouts-app.scss
Normal file
50
src/fragments/_08a-blockquote-callouts-app.scss
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
@use '08-blockquote-callouts' as callblock;
|
||||
|
||||
.rendered-widget,
|
||||
.markdown-preview-section {
|
||||
@include callblock.blockquote-styles;
|
||||
}
|
||||
|
||||
// Admonition has limited support on publish. Making app only.
|
||||
|
||||
.admonition {
|
||||
margin: 1em 0;
|
||||
padding: var(--callout-padding);
|
||||
}
|
||||
.is-live-preview {
|
||||
.admonition {
|
||||
margin: 0;
|
||||
padding: var(--callout-padding);
|
||||
|
||||
.admonition-content {
|
||||
> :first-child {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
> :last-child {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
> * {
|
||||
margin-top: initial;
|
||||
margin-bottom: initial;
|
||||
}
|
||||
> * br {
|
||||
display: none;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
white-space: normal;
|
||||
}
|
||||
.math-block > mjx-container {
|
||||
padding: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-source-view.mod-cm6 .admonition-parent > .edit-block-button {
|
||||
right: calc(var(--size-4-2) + var(--icon-size) + 0.375rem);
|
||||
top: calc(var(--size-2-2) + 0.125rem);
|
||||
}
|
||||
|
|
@ -8,6 +8,3 @@ kbd {
|
|||
padding: 0.1em 0.25em;
|
||||
background-color: var(--background-secondary-alt);
|
||||
}
|
||||
.cm-s-obsidian .HyperMD-codeblock span.cm-inline-code {
|
||||
padding: unset;
|
||||
}
|
||||
|
|
|
|||
5
src/fragments/_09a-codeblocks-app.scss
Normal file
5
src/fragments/_09a-codeblocks-app.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
@use '09-codeblocks' as *;
|
||||
|
||||
.cm-s-obsidian .HyperMD-codeblock span.cm-inline-code {
|
||||
padding: unset;
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
body {
|
||||
--ebw-embed-border-color: var(--gray-dark-7);
|
||||
--embed-border-left: 1px solid var(--ebw-embed-border-color);
|
||||
--embed-border-right: 1px solid var(--ebw-embed-border-color);
|
||||
--embed-border-left: 0.0625rem solid var(--ebw-embed-border-color);
|
||||
--embed-border-right: 0.0625rem solid var(--ebw-embed-border-color);
|
||||
--embed-padding: 0 var(--size-4-1);
|
||||
}
|
||||
.theme-light {
|
||||
|
|
@ -25,23 +25,25 @@ div {
|
|||
// Use an anchor tag: 
|
||||
&[src$="#portrait"] {
|
||||
float: right;
|
||||
margin-left: 5px;
|
||||
width: 200px;
|
||||
margin-left: 0.3125rem;
|
||||
width: 12.5rem;
|
||||
height: 12.5rem;
|
||||
}
|
||||
&[src$="#callout"] {
|
||||
float: right;
|
||||
margin-left: 5px;
|
||||
margin-left: 0.3125rem;
|
||||
width: 50%;
|
||||
}
|
||||
&[src$="#small-right"] {
|
||||
float: right;
|
||||
margin-left: 5px;
|
||||
width: 75px;
|
||||
margin-left: 0.3125rem;
|
||||
width: 4.6875rem;
|
||||
}
|
||||
}
|
||||
// ------------------------------------------------------
|
||||
// Naked embeds
|
||||
// ------------------------------------------------------
|
||||
|
||||
.markdown-embed {
|
||||
border-radius: var(--radius-l);
|
||||
position: relative;
|
||||
|
|
@ -81,43 +83,17 @@ div {
|
|||
// EMBED LINK
|
||||
.markdown-embed-link svg {
|
||||
color: var(--ebw-link-underline);
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
height: 0.875rem;
|
||||
width: 0.875rem;
|
||||
}
|
||||
|
||||
.markdown-embed-link,
|
||||
.file-embed-link {
|
||||
top: 0px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
height: 1.125rem;
|
||||
width: 1.125rem;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
z-index: var(--layer-tooltip);
|
||||
}
|
||||
|
||||
.markdown-source-view.invisible-embed,
|
||||
.markdown-rendered.invisible-embed {
|
||||
--embed-border-left: none;
|
||||
--embed-border-right: none;
|
||||
--embed-padding: 0;
|
||||
}
|
||||
|
||||
// ------------------------------------------------------
|
||||
// Scaled iframes
|
||||
// cssclass: embedframe
|
||||
// <div class='scaled-iframe'><iframe src="..." ></iframe></div>
|
||||
// ------------------------------------------------------
|
||||
.embedframe iframe {
|
||||
width: 125%;
|
||||
height: 750px;
|
||||
-webkit-transform: scale(.8);
|
||||
transform: scale(.8);
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
.embedframe .scaled-iframe {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
30
src/fragments/_10a-images-embeds-app.scss
Normal file
30
src/fragments/_10a-images-embeds-app.scss
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
@use '10-images-embeds' as *;
|
||||
|
||||
|
||||
.markdown-source-view.invisible-embed,
|
||||
.markdown-rendered.invisible-embed {
|
||||
--embed-border-left: none;
|
||||
--embed-border-right: none;
|
||||
--embed-padding: 0;
|
||||
}
|
||||
|
||||
// ------------------------------------------------------
|
||||
// Scaled iframes
|
||||
// cssclass: embedframe
|
||||
// <div class='scaled-iframe'><iframe src="..." ></iframe></div>
|
||||
// ------------------------------------------------------
|
||||
|
||||
.embedframe iframe {
|
||||
width: 125%;
|
||||
height: 46.875rem;
|
||||
-webkit-transform: scale(.8);
|
||||
transform: scale(.8);
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.embedframe .scaled-iframe {
|
||||
width: 100%;
|
||||
height: 37.5rem;
|
||||
position: relative;
|
||||
}
|
||||
27
src/fragments/_16-mermaid.scss
Normal file
27
src/fragments/_16-mermaid.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
// Mermaid Core
|
||||
|
||||
.mermaid {
|
||||
font-family: var(--font-mermaid);
|
||||
fill: red;
|
||||
|
||||
& .actor {
|
||||
stroke: var(--background-modifier-border);
|
||||
fill: var(--background-secondary);
|
||||
}
|
||||
|
||||
& text.actor>tspan {
|
||||
fill: var(--text-normal);
|
||||
stroke: none;
|
||||
}
|
||||
}
|
||||
.mermaid .statediagram {
|
||||
|
||||
& .nodelabel {
|
||||
color: red;
|
||||
}
|
||||
|
||||
& .edgeLabel {
|
||||
background-color: black;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
// Page width and padding
|
||||
--page-width: 100%;
|
||||
--page-side-padding: 48px;
|
||||
--page-side-padding: 3rem /* 48/16 */;
|
||||
|
||||
// Page titles
|
||||
--page-title-color: var(--h1-color);
|
||||
|
|
@ -14,7 +14,6 @@
|
|||
--page-title-variant: var(--h1-variant);
|
||||
--page-title-weight: var(--h1-weight);
|
||||
|
||||
|
||||
// Component Titles
|
||||
--component-title-color: var(--text-normal);
|
||||
--component-title-font: inherit;
|
||||
|
|
@ -25,18 +24,18 @@
|
|||
--component-title-weight: var(--font-semibold);
|
||||
|
||||
// Inputs
|
||||
--input-height: 32px;
|
||||
--input-height: 2rem /* 32/16 */;
|
||||
|
||||
// Graph
|
||||
--graph-height: 260px;
|
||||
--graph-height: 16.25rem /* 260/16 */;
|
||||
|
||||
// Sidebar
|
||||
--sidebar-font-size: 14px;
|
||||
--sidebar-left-width: 280px;
|
||||
--sidebar-font-size: 0.875rem /* 14/16 */;
|
||||
--sidebar-left-width: 17.5rem /* 280/16 */;
|
||||
--sidebar-left-background: var(--background-primary);
|
||||
--sidebar-left-border-width: 1px;
|
||||
--sidebar-left-border-width: 0.0625rem /* 1/16 */;
|
||||
--sidebar-left-border-color: var(--background-modifier-border);
|
||||
--sidebar-right-width: 300px;
|
||||
--sidebar-right-width: 18.75rem /* 300/16 */;
|
||||
--sidebar-right-background: transparent;
|
||||
--sidebar-right-border-width: 0px;
|
||||
--sidebar-right-border-color: var(--background-modifier-border);
|
||||
|
|
@ -45,17 +44,17 @@
|
|||
--logo-width: auto;
|
||||
--logo-height: auto;
|
||||
--logo-max-width: calc(100% - 18px);
|
||||
--logo-max-height: 200px;
|
||||
--logo-radius: 8px;
|
||||
--header-height: 50px;
|
||||
--logo-max-height: 12.5rem /* 200/16 */;
|
||||
--logo-radius: 0.5rem /* 8/16 */;
|
||||
--header-height: 3.125rem /* 50/16 */;
|
||||
--site-name-color: var(--text-normal);
|
||||
--site-name-color-hover: var(--text-muted);
|
||||
--site-name-font: inherit;
|
||||
--site-name-size: 22px;
|
||||
--site-name-font: var(--ebw-font-monospace);
|
||||
--site-name-size: 1.125rem; /* 18/16 */;
|
||||
--site-name-weight: var(--font-semibold);
|
||||
--site-menu-icon-color: var(--text-faint);
|
||||
--site-menu-icon-color-hover: var(--text-normal);
|
||||
--site-menu-icon-size: 24px;
|
||||
--site-menu-icon-size: 1.5rem /* 24/16 */;
|
||||
|
||||
// Site Navigation
|
||||
--nav-collapse-icon-color: var(--text-faint);
|
||||
|
|
@ -116,11 +115,11 @@ body {
|
|||
--input-height: 36px;
|
||||
}
|
||||
.published-container {
|
||||
--site-name-size: 18px;
|
||||
--header-height: 50px;
|
||||
--site-name-size: 1.125rem;
|
||||
--header-height: 3.125rem;
|
||||
--header-background: var(--background-primary);
|
||||
--page-title-size: 2em;
|
||||
--page-side-padding: 24px;
|
||||
--page-side-padding: 1.5rem;
|
||||
--footer-display: none;
|
||||
--list-spacing: 0.15em;
|
||||
}
|
||||
|
|
@ -138,8 +137,8 @@ body {
|
|||
--header-height: var(--h2-size);
|
||||
--logo-height: auto;
|
||||
--nav-item-weight-active: 500;
|
||||
--logo-max-height: 150px;
|
||||
--logo-max-width: calc(100% - 18px);
|
||||
--logo-max-height: 9.375rem;
|
||||
--logo-max-width: calc(100% - 1.125rem);
|
||||
--site-menu-icon-size: 1.375rem;
|
||||
/* Navigation */
|
||||
--site-name-size: var(--h3-size);
|
||||
|
|
@ -155,9 +154,9 @@ body {
|
|||
/* ... rules and variables for screens larger than a big tablet */
|
||||
.published-container {
|
||||
--page-side-padding: 10rem;
|
||||
--sidebar-left-width: 230px;
|
||||
--sidebar-right-width: 250px;
|
||||
--graph-height: 200px;
|
||||
--sidebar-left-width: 14.375rem;
|
||||
--sidebar-right-width: 15.625rem;
|
||||
--graph-height: 12.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
body {
|
||||
--callout-border-width: 0.05rem 0 0 0.05rem;
|
||||
}
|
||||
|
||||
.callout-content {
|
||||
background-color: var(--background-primary-alt);
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
// Make Images and Videos Responsive
|
||||
.internal-embed img {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 2em auto;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 10px;
|
||||
aspect-ratio: 16 / 9;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
iframe {
|
||||
aspect-ratio: 16 / 9;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
|
@ -1,11 +1,5 @@
|
|||
// Code Variables
|
||||
|
||||
.frontmatter-container, .popover.hover-popover::after, .markdown-preview-view:not(.allow-fold-lists) {
|
||||
&.list-collapse-indicator, &.allow-fold-headings .heading-collapse-indicator, &.show-frontmatter .frontmatter {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
pre[class*='language-'] {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
|
||||
@use 'fragments/03-core-theme-dark' as *;
|
||||
@use 'fragments/03-core-theme-light' as *;
|
||||
@use 'fragments/03d-graph-view' as *;
|
||||
|
||||
@use 'fragments/04-headings-hr-tags' as *;
|
||||
@use 'fragments/05-text-links' as *;
|
||||
|
|
@ -13,11 +14,9 @@
|
|||
@use 'fragments/09-codeblocks' as *;
|
||||
@use 'fragments/10-images-embeds' as *;
|
||||
@use 'fragments/15-table' as *;
|
||||
// @use 'fragments/16-mermaid' as *;
|
||||
|
||||
|
||||
@use 'fragments/20-publish-variables' as *;
|
||||
//@use 'fragments/21-publish-container' as *;
|
||||
@use 'fragments/25-publish-typography' as *;
|
||||
@use 'fragments/27-callmonitions' as *;
|
||||
@use 'fragments/28-publish-image-embeds' as *;
|
||||
@use 'fragments/29-publish-code' as *;
|
||||
|
|
|
|||
|
|
@ -2,25 +2,26 @@
|
|||
@use 'fragments/00-stylesettings' as *;
|
||||
@use 'fragments/01-color-palette' as *;
|
||||
@use 'fragments/01a-color-accents' as *;
|
||||
|
||||
@use 'fragments/02-fonts' as *;
|
||||
|
||||
@use 'fragments/03-core-theme-dark' as *;
|
||||
@use 'fragments/03-core-theme-light' as *;
|
||||
@use 'fragments/03-core-themes-app' as *;
|
||||
|
||||
@use 'fragments/03a-workspace-layout' as *;
|
||||
@use 'fragments/03c-modal-input' as *;
|
||||
@use 'fragments/03d-graph-view' as *;
|
||||
@use 'fragments/03f-metadata-view' as *;
|
||||
|
||||
@use 'fragments/04-headings-hr-tags' as *;
|
||||
@use 'fragments/05-text-links' as *;
|
||||
@use 'fragments/04a-headings-hr-tags-app' as *;
|
||||
@use 'fragments/05a-text-links-app' as *;
|
||||
@use 'fragments/06b-lists-checkboxes-app' as *;
|
||||
@use 'fragments/08a-blockquote-callouts-app' as *;
|
||||
@use 'fragments/09a-codeblocks-app' as *;
|
||||
@use 'fragments/10a-images-embeds-app' as *;
|
||||
|
||||
@use 'fragments/06-lists-checkboxes' as *;
|
||||
@use 'fragments/08-blockquote-callouts' as *;
|
||||
@use 'fragments/09-codeblocks' as *;
|
||||
@use 'fragments/10-images-embeds' as *;
|
||||
|
||||
@use 'fragments/12-calendar-day-planner-tracker' as *;
|
||||
@use 'fragments/13-timelines' as *;
|
||||
@use 'fragments/14-frontmatter' as *;
|
||||
@use 'fragments/15-table' as *;
|
||||
|
||||
// @use 'fragments/16-mermaid' as *;
|
||||
|
|
|
|||
Loading…
Reference in a new issue