diff --git a/assets/styles/components.scss b/assets/styles/components.scss index 2dd828cd5..1bfb59a5a 100644 --- a/assets/styles/components.scss +++ b/assets/styles/components.scss @@ -75,9 +75,21 @@ } .markdown-body { + blockquote, + details, + dl, + ol, + p, + code, + pre, + table, + ul { + margin-top: 0; + margin-bottom: 16px; + } + p { padding: 0; - margin: 0; line-height: 1.5; word-wrap: break-word; } @@ -89,7 +101,6 @@ } blockquote { - margin: 15px 0; padding: 0 1em; color: var(--color-text); border-left: 0.25em solid var(--color-block-quote); @@ -105,9 +116,11 @@ } pre { - padding: 15px 10px; + margin-top: 1rem; + padding: 14px; border-radius: var(--size-rounded-control); background-color: var(--color-code-bg); + overflow-x: auto; code { font-size: 80%; @@ -128,6 +141,58 @@ margin: 20px 0; color: var(--color-divider); } + + table { + display: block; + width: max-content; + max-width: 100%; + overflow: auto; + border-collapse: collapse; + line-height: 1.5; + + th { + font-weight: 600; + } + + td, + th { + padding: 0.4rem 0.85rem; + border: 0.1rem solid var(--color-table-border); + } + + tr:nth-child(2n) { + background-color: var(--color-table-alternate-row); + } + } + + details { + border: 0.15rem solid var(--color-button-bg); + border-radius: var(--size-rounded-control); + padding: 0.5rem 0.5rem 0; + + summary { + font-weight: bold; + margin: -0.5rem -0.5rem 0; + padding: 0.5rem 0.8rem; + cursor: pointer; + background-color: var(--color-button-bg); + &:hover { + background-color: var(--color-button-bg-hover); + } + } + + &[open] { + padding: 0.5rem; + + summary { + margin-bottom: 0.5rem; + } + } + } + + > :last-child { + margin-bottom: 0 !important; + } } .tooltip { diff --git a/assets/styles/global.scss b/assets/styles/global.scss index f23cc1b68..0b9076aae 100644 --- a/assets/styles/global.scss +++ b/assets/styles/global.scss @@ -1,8 +1,8 @@ .light-mode { --color-icon: #718096; - --color-text:#4A5568; - --color-text-medium:#2a303d; - --color-text-dark:#1A202C; + --color-text: #4a5568; + --color-text-medium: #2a303d; + --color-text-dark: #1a202c; --color-heading: #2c313d; --color-heading-light: #777e8d; --color-bg: #edf2f7; @@ -67,12 +67,15 @@ --color-block-quote: var(--color-tooltip-bg); --color-header-underline: var(--color-tooltip-text); --color-hr: var(--color-text); + + --color-table-border: #dfe2e5; + --color-table-alternate-row: #f6f8fa; } .dark-mode { --color-icon: #acacac; --color-text: #cecece; - --color-text-medium:#e4e4e4; + --color-text-medium: #e4e4e4; --color-text-dark: #fbf8ec; --color-heading: #fbf8ec; --color-heading-light: #8a8a8a; @@ -134,16 +137,20 @@ --color-badge-yellow-bg: #675027; --color-badge-yellow-text: #f6e8c6; - --color-block-quote:var(--color-code-bg); + --color-block-quote: var(--color-code-bg); --color-header-underline: var(--color-tooltip-text); --color-hr: var(--color-text); + + --color-table-border: #4f5864; + --color-table-alternate-row: #262a30; } body { // Defaults background-color: var(--color-bg); color: var(--color-text); - --font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + --font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, + Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; font-family: var(--font-standard); font-size: 16px; font-weight: var(--font-weight-medium); @@ -170,15 +177,15 @@ body { --spacing-card-sm: 0.5rem; // Font Sizes - --font-size-xxs: 0.625rem; //10px - --font-size-xs: 0.75rem; //12px - --font-size-sm: 0.875rem; //14px - --font-size-nm: 1rem; //16px - --font-size-md: 1.125rem; //18px - --font-size-lg: 1.25rem; //20px - --font-size-xl: 1.5rem; //24px - --font-size-2xl: 2rem; //32px - --font-size-3xl: 3rem; //48px + --font-size-xxs: 0.625rem; //10px + --font-size-xs: 0.75rem; //12px + --font-size-sm: 0.875rem; //14px + --font-size-nm: 1rem; //16px + --font-size-md: 1.125rem; //18px + --font-size-lg: 1.25rem; //20px + --font-size-xl: 1.5rem; //24px + --font-size-2xl: 2rem; //32px + --font-size-3xl: 3rem; //48px // Font Weights --font-weight-regular: 400; @@ -281,9 +288,8 @@ button { // @import "vue-select/src/scss/vue-select.scss"; - -@import "~assets/styles/highlightjs.scss"; -@import "~assets/styles/layout.scss"; -@import "~assets/styles/utils.scss"; -@import "~assets/styles/components.scss"; -@import "~assets/styles/normalize.scss"; +@import '~assets/styles/highlightjs.scss'; +@import '~assets/styles/layout.scss'; +@import '~assets/styles/utils.scss'; +@import '~assets/styles/components.scss'; +@import '~assets/styles/normalize.scss';