diff --git a/.gitignore b/.gitignore
index e0dd081..4e0d548 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,3 +19,4 @@ webpack.dev.js
generated/*
.env
+*.map
diff --git a/src/assets/main.css b/src/assets/main.css
deleted file mode 100644
index 0e97440..0000000
--- a/src/assets/main.css
+++ /dev/null
@@ -1,323 +0,0 @@
-/** Constants */
-:root {
- --admonition-details-icon: url("data:image/svg+xml;charset=utf-8,");
- --admonition-margin-top: 1.5625em;
- --admonition-margin-bottom: var(--admonition-margin-top);
- --admonition-margin-top-lp: 0px;
- --admonition-margin-bottom-lp: 12px;
-}
-
-.admonition {
- margin-top: var(--admonition-margin-top);
- margin-bottom: var(--admonition-margin-bottom);
- box-shadow: 0 0.2rem 0.5rem var(--background-modifier-box-shadow);
-}
-
-*:not(.is-live-preview) .admonition.no-content {
- display: none;
-}
-.is-live-preview .admonition.no-content {
- opacity: 0.1;
-}
-
-.admonition-title.no-title {
- display: none;
-}
-
-.admonition-content,
-.callout-content {
- position: relative;
-}
-
-.admonition.no-title .admonition-content {
- margin-top: 0;
- margin-bottom: 0;
-}
-
-.admonition-content-copy {
- color: var(--text-faint);
- cursor: pointer;
- opacity: 0;
- position: absolute;
- margin: 0.375rem;
- right: 0;
- top: 0;
- transition: 0.3s opacity ease-in;
-}
-
-.admonition-content-copy:hover {
- color: var(--text-normal);
-}
-
-.admonition:hover .admonition-content-copy,
-.callout:hover .admonition-content-copy,
-.admonition-content-copy:hover {
- opacity: 1;
-}
-.admonition-title:hover + .admonition-content .admonition-content-copy {
- opacity: 0;
-}
-
-/** Settings */
-.admonition-settings .additional {
- margin: 6px 12px;
-}
-.admonition-settings .additional > .setting-item {
- border-top: 0;
- padding-top: 9px;
-}
-
-.setting-item > .admonition {
- width: 50%;
- margin: 0;
-}
-
-.unset-align-items {
- align-items: unset;
-}
-
-.admonition-settings-modal .has-invalid-message {
- display: grid;
- grid-template-columns: 1fr auto;
- grid-template-rows: 1fr 1fr;
- grid-template-areas:
- "text image"
- "inv inv";
-}
-
-.admonition-settings-modal input.is-invalid {
- border-color: #dc3545 !important;
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
- background-repeat: no-repeat;
- background-position: right calc(0.375em + 0.1875rem) center;
- background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
-}
-
-.admonition-settings-modal .admonition-type-setting input {
- grid-column: span 2;
-}
-
-.admonition-settings-modal .invalid-feedback {
- display: block;
- grid-area: inv;
- width: 100%;
- margin-top: 0.25rem;
- font-size: 0.875em;
- color: #dc3545;
-}
-
-.suggestion-content.admonition-icon {
- display: flex;
- align-items: center;
- justify-content: space-between;
- flex-flow: row wrap;
-}
-
-.suggestion-content.admonition-icon > .suggestion-text.admonition-text {
- width: fit-content;
-}
-
-.suggestion-content.admonition-icon
- > .suggestion-flair.admonition-suggester-icon {
- width: min-content;
- position: relative;
- top: unset;
- left: unset;
- right: unset;
- bottom: unset;
- display: flex;
- align-items: center;
-}
-
-.suggestion-content.admonition-icon > .suggestion-note {
- width: 100%;
-}
-
-.admonition-suggester-icon svg {
- width: 1em;
-}
-
-.admonition-color-settings .setting-item-control {
- gap: 1rem;
-}
-.admonition-color-settings input[type="color"]:disabled {
- opacity: 0.75;
- cursor: not-allowed;
-}
-
-.admonition-convert {
- display: flex;
- align-items: center;
- gap: 0.25rem;
-}
-
-.admonition-convert-icon {
- display: flex;
- align-items: center;
-}
-
-.admonition-convert-icon .admonition-spin {
- animation: admonition-convert 1s ease-in-out infinite;
- fill: currentColor;
-}
-@keyframes admonition-convert {
- from {
- transform: rotateZ(-45deg);
- }
- to {
- transform: rotateZ(315deg);
- }
-}
-.admonition-settings .admonition-convert {
- color: var(--text-error);
-}
-.notice-container .admonition-convert {
- justify-content: space-between;
- gap: 1rem;
-}
-/** Internal */
-
-.admonition li.task-list-item.is-checked p {
- text-decoration: line-through;
-}
-
-.admonition-settings .coffee {
- width: 60%;
- color: var(--text-faint);
- margin: 1rem auto;
- text-align: center;
-}
-.admonition-settings .coffee img {
- height: 30px;
-}
-
-.admonition-file-upload {
- margin-right: 0;
- margin-left: 12px;
-}
-.admonition-file-upload > input[type="file"] {
- display: none;
-}
-
-.insert-admonition-modal button:focus,
-.insert-admonition-modal .clickable-icon:focus {
- box-shadow: 0px 0px 5px rgb(0 0 0 / 50%);
- border-color: var(--background-modifier-border-focus);
-}
-
-.admonition-settings details > summary {
- outline: none;
- display: block !important;
- list-style: none !important;
- list-style-type: none !important;
- min-height: 1rem;
- border-top-left-radius: 0.1rem;
- border-top-right-radius: 0.1rem;
- cursor: pointer;
- position: relative;
-}
-
-.admonition-settings details > summary::-webkit-details-marker,
-.admonition-settings details > summary::marker {
- display: none !important;
-}
-
-.admonition-settings details > summary > .collapser {
- position: absolute;
- top: 50%;
- right: 8px;
- transform: translateY(-50%);
- content: "";
-}
-
-.admonition-settings details > summary > .collapser > .handle {
- transform: rotate(0deg);
- transition: transform 0.25s;
- background-color: currentColor;
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- -webkit-mask-image: var(--admonition-details-icon);
- mask-image: var(--admonition-details-icon);
- width: 20px;
- height: 20px;
-}
-
-.admonition-settings details[open] > summary > .collapser > .handle {
- transform: rotate(90deg);
-}
-.admonition-setting-warning {
- display: flex;
- gap: 0.25rem;
- align-items: center;
-}
-.admonition-setting-warning.text-warning {
- color: var(--text-error);
-}
-
-.admonitions-nested-settings .setting-item {
- border: 0px;
- padding-bottom: 0;
-}
-.admonitions-nested-settings {
- padding-bottom: 18px;
-}
-.admonitions-nested-settings[open] .setting-item-heading,
-.admonitions-nested-settings:not(details) .setting-item-heading {
- border-top: 0px;
- border-bottom: 1px solid var(--background-modifier-border);
-}
-
-/** No drop shadow */
-.admonition.no-drop {
- box-shadow: none;
-}
-.admonition.no-drop > .admonition-title.no-title + .admonition-content {
- margin-top: 0;
- margin-bottom: 0;
-}
-
-.admonition.no-drop .admonition .admonition-content {
- border-right: 1px solid rgba(var(--admonition-color), 0.2);
- border-bottom: 1px solid rgba(var(--admonition-color), 0.2);
-}
-.admonition.no-drop
- .admonition
- .admonition-title.no-title
- + .admonition-content {
- border-top: 1px solid rgba(var(--admonition-color), 0.2);
- margin-top: 0;
- margin-bottom: 0;
-}
-
-/** Live Preview */
-.is-live-preview .admonition {
- margin-top: var(--admonition-margin-top-lp);
- margin-bottom: var(--admonition-margin-bottom-lp);
-}
-.is-live-preview .admonition-content > * {
- margin-top: 0px;
- margin-bottom: 0px;
-}
-
-.is-live-preview .admonition-content > * br {
- display: none;
-}
-
-.is-live-preview .admonition-content > *:first-child {
- margin-top: 16px;
-}
-
-.is-live-preview .admonition-content > *:last-child {
- margin-bottom: 16px;
-}
-
-.is-live-preview .admonition-content ul,
-.is-live-preview .admonition-content ol {
- white-space: normal;
-}
-
-.is-live-preview .admonition-content .math-block > mjx-container {
- padding: 0;
-}
diff --git a/src/assets/main.scss b/src/assets/main.scss
new file mode 100644
index 0000000..ea3e6e5
--- /dev/null
+++ b/src/assets/main.scss
@@ -0,0 +1,364 @@
+:root {
+ --admonition-details-icon: url("data:image/svg+xml;charset=utf-8,");
+ --admonition-margin-top: 1.5rem;
+ --admonition-margin-bottom: var(--admonition-margin-top);
+ --admonition-margin-top-lp: 0px;
+ --admonition-margin-bottom-lp: 0.75rem;
+}
+.admonition {
+ margin-top: var(--admonition-margin-top);
+ margin-bottom: var(--admonition-margin-bottom);
+ box-shadow: 0 0.2rem 0.5rem var(--background-modifier-box-shadow);
+ &.no-title {
+ .admonition-content {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ }
+ li {
+ &.task-list-item {
+ &.is-checked {
+ p {
+ text-decoration: line-through;
+ }
+ }
+ }
+ }
+ &.no-drop {
+ box-shadow: none;
+ & > .admonition-title {
+ &.no-title {
+ & + .admonition-content {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ }
+ }
+ .admonition {
+ .admonition-content {
+ border-right: 0.0625rem solid rgba(var(--admonition-color), 0.2);
+ border-bottom: 0.0625rem solid rgba(var(--admonition-color), 0.2);
+ }
+ .admonition-title {
+ &.no-title {
+ & + .admonition-content {
+ border-top: 0.0625rem solid rgba(var(--admonition-color), 0.2);
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ }
+ }
+ }
+ }
+}
+
+// Makes Mathjax blocks stop jumping around between views and
+// makes Mathjax act nicer in OL Blocks
+:is(.markdown-source-view.mod-cm6) .admonition .math-block > mjx-container {
+ display: block;
+ text-align: center;
+ padding: 1rem;
+}
+
+:is(.markdown-reading-view) .admonition .math-block > mjx-container {
+ display: block;
+ text-align: center;
+ padding: 0.0625rem;
+}
+
+*:not(.is-live-preview) {
+ .admonition {
+ &.no-content {
+ display: none;
+ }
+ }
+}
+.is-live-preview {
+ .admonition {
+ margin-top: var(--admonition-margin-top-lp);
+ margin-bottom: var(--admonition-margin-bottom-lp);
+ &.no-content {
+ opacity: 0.1;
+ }
+ }
+ .admonition-content {
+ & p {
+ // This makes the P Layer consistent between views
+ line-height: inherit;
+ margin: revert;
+ br {
+ // This makes the BR Layer match the theme layer.
+ display: initial;
+ }
+ }
+ &:first-child {
+ // Reduced to 0.8 and made into rem units.
+ margin-top: 0.8rem;
+ }
+ &:last-child {
+ // Reduced to 0.8 and made into rem units.
+ margin-bottom: 0.8rem;
+ }
+ }
+}
+
+.admonition-title {
+ &.no-title {
+ display: none;
+ }
+ &:hover {
+ & + .admonition-content {
+ .admonition-content-copy {
+ opacity: 0.7;
+ }
+ }
+ }
+}
+.admonition-content,
+.callout-content {
+ position: relative;
+}
+
+.admonition-content-copy {
+ color: var(--text-faint);
+ cursor: pointer;
+ opacity: 0;
+ position: absolute;
+ margin: 0.375rem;
+ right: 0;
+ top: 0;
+ transition: 0.3s opacity ease-in;
+ &:hover {
+ color: var(--text-normal);
+ }
+}
+.admonition:hover .admonition-content-copy,
+.callout:hover .admonition-content-copy,
+.admonition-content-copy:hover {
+ opacity: 1;
+}
+.admonition-settings {
+ .additional {
+ margin: 0.375rem 0.75rem;
+ & > .setting-item {
+ border-top: 0;
+ padding-top: 0.5625rem;
+ }
+ }
+ .coffee {
+ width: 60%;
+ color: var(--text-faint);
+ margin: 1rem auto;
+ text-align: center;
+ img {
+ height: 30px;
+ }
+ }
+ details {
+ & > summary {
+ outline: none;
+ display: block !important;
+ list-style: none !important;
+ list-style-type: none !important;
+ min-height: 1rem;
+ border-top-left-radius: 0.1rem;
+ border-top-right-radius: 0.1rem;
+ cursor: pointer;
+ position: relative;
+ & > .collapser {
+ position: absolute;
+ top: 50%;
+ right: 0.5rem;
+ transform: translateY(-50%);
+ content: "";
+ & > .handle {
+ transform: rotate(0deg);
+ transition: transform 0.25s;
+ background-color: currentColor;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-image: var(--admonition-details-icon);
+ mask-image: var(--admonition-details-icon);
+ width: 20px;
+ height: 20px;
+ }
+ }
+ }
+ }
+ details[open] {
+ & > summary {
+ & > .collapser {
+ & > .handle {
+ transform: rotate(90deg);
+ }
+ }
+ }
+ }
+}
+.setting-item {
+ & > .admonition {
+ width: 50%;
+ margin: 0;
+ }
+}
+.unset-align-items {
+ align-items: unset;
+}
+.admonition-settings-modal {
+ .has-invalid-message {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ grid-template-rows: 1fr 1fr;
+ grid-template-areas: "text image"
+ "inv inv";
+ }
+ input {
+ &.is-invalid {
+ border-color: #dc3545 !important;
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+ background-repeat: no-repeat;
+ background-position: right calc(0.375em + 0.1875rem) center;
+ background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+ }
+ }
+ .admonition-type-setting {
+ input {
+ grid-column: span 2;
+ }
+ }
+ .invalid-feedback {
+ display: block;
+ grid-area: inv;
+ width: 100%;
+ margin-top: 0.25rem;
+ font-size: 0.875em;
+ color: #dc3545;
+ }
+}
+.suggestion-content {
+ &.admonition-icon {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-flow: row wrap;
+ & > .suggestion-text {
+ &.admonition-text {
+ width: fit-content;
+ }
+ }
+ & > .suggestion-flair {
+ &.admonition-suggester-icon {
+ width: min-content;
+ position: relative;
+ top: unset;
+ left: unset;
+ right: unset;
+ bottom: unset;
+ display: flex;
+ align-items: center;
+ }
+ }
+ & > .suggestion-note {
+ width: 100%;
+ }
+ }
+}
+.admonition-suggester-icon {
+ svg {
+ width: 1em;
+ }
+}
+.admonition-color-settings {
+ .setting-item-control {
+ gap: 1rem;
+ }
+ input[type="color"]:disabled {
+ opacity: 0.75;
+ cursor: not-allowed;
+ }
+}
+
+.theme-dark {
+ .admonition-color-settings {
+ input[type=color]:disabled {
+ opacity: 1;
+ cursor: not-allowed;
+ }
+ }
+}
+.admonition-convert {
+ display: flex;
+ align-items: center;
+ gap: 0.25rem;
+}
+.admonition-convert-icon {
+ display: flex;
+ align-items: center;
+ .admonition-spin {
+ animation: admonition-convert 1s ease-in-out infinite;
+ fill: currentColor;
+ }
+}
+@keyframes admonition-convert {
+ from {
+ transform: rotateZ(-45deg);
+ }
+ to {
+ transform: rotateZ(315deg);
+ }
+}
+
+.admonition-settings {
+ .admonition-convert {
+ color: var(--text-error);
+ }
+}
+
+.notice-container {
+ .admonition-convert {
+ justify-content: space-between;
+ gap: 1rem;
+ }
+}
+.admonition-file-upload {
+ margin-right: 0;
+ margin-left: 12px;
+ & > input[type="file"] {
+ display: none;
+ }
+}
+.insert-admonition-modal button:focus,
+.insert-admonition-modal .clickable-icon:focus {
+ box-shadow: 0 0 5px rgb(0 0 0 / 50%);
+ border-color: var(--background-modifier-border-focus);
+}
+.admonition-settings details > summary::-webkit-details-marker,
+.admonition-settings details > summary::marker {
+ display: none !important;
+}
+.admonition-setting-warning {
+ display: flex;
+ gap: 0.25rem;
+ align-items: center;
+ &.text-warning {
+ color: var(--text-error);
+ }
+}
+.admonitions-nested-settings {
+ padding-bottom: 18px;
+ .setting-item {
+ border: 0;
+ padding-bottom: 0;
+ }
+}
+.admonitions-nested-settings[open] .setting-item-heading,
+.admonitions-nested-settings:not(details) .setting-item-heading {
+ border-top: 0;
+ border-bottom: 1px solid var(--background-modifier-border);
+}
+.is-live-preview .admonition-content ul,
+.is-live-preview .admonition-content ol {
+ white-space: normal;
+}
diff --git a/src/styles.css b/src/styles.css
index e7c52e6..1466674 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,2 +1,2 @@
-@import "./assets/main.css";
+@import "./assets/main.scss";
@import "./assets/callout.scss";