From 13dd59939092bceae6c2d9500d11af32aee039aa Mon Sep 17 00:00:00 2001 From: Rebbecca Bishop Date: Sun, 7 May 2023 14:48:57 -0500 Subject: [PATCH] Feat: Update to CSS to improve (#305) * Update Gitignore (#2) * Delete main.css * chore(styles.css): Update from main.css to main.scss Signed-off-by: Sigrunixia --------- Signed-off-by: Sigrunixia --- .gitignore | 1 + src/assets/main.css | 323 -------------------------------------- src/assets/main.scss | 364 +++++++++++++++++++++++++++++++++++++++++++ src/styles.css | 2 +- 4 files changed, 366 insertions(+), 324 deletions(-) delete mode 100644 src/assets/main.css create mode 100644 src/assets/main.scss 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";