mirror of
https://github.com/supabase/supabase.git
synced 2026-05-06 22:18:00 +08:00
070316cb87
This pull request migrates all SCSS stylesheets in the `apps/studio` and
`apps/docs` projects to CSS, updates import paths accordingly, and
consolidates PostCSS configuration to use a shared config. The migration
includes renaming files, updating import statements, converting SCSS
comments to CSS comments, and removing redundant or legacy configuration
files. The changes improve maintainability and consistency across the
codebase.
**Migration from SCSS to CSS:**
* All SCSS stylesheets in `apps/studio/styles` and `apps/docs/styles`
have been renamed to `.css`, and their contents updated by converting
SCSS comments (`// ...`) to CSS comments (`/* ... */`). All relevant
import statements in the app entry points have been updated to reference
the new `.css` files.
**PostCSS configuration consolidation:**
* The separate `postcss.config.cjs` files in `apps/design-system`,
`apps/learn`, and `apps/studio` now all import from a shared
`config/postcss.config`, ensuring consistent PostCSS setup across
projects. The legacy `postcss.config.js` in `apps/studio` has been
removed.
**Code and style consistency improvements:**
* All instances of the SCSS-specific `#{!important}` in Tailwind
`@apply` rules have been replaced with the standard CSS `!important`
syntax.
* Minor fixes and comment updates were made throughout the stylesheets
to improve readability and maintainability, such as moving or clarifying
TODOs and notes.
These changes streamline the styling approach, reduce build complexity,
and make it easier to maintain and scale the design system and
documentation styles.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Consolidated PostCSS configuration across apps
* Migrated many stylesheet imports from SCSS to CSS
* Standardized CSS comment and @apply syntax for consistency
* **Chores**
* Removed SCSS (sass) dev dependency
* Added autoprefixer and tailwindcss/nesting to PostCSS plugins
* Removed SCSS module type declarations (cleaned up typings)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
688 lines
14 KiB
CSS
688 lines
14 KiB
CSS
[data-theme*='dark'],
|
|
.dark {
|
|
--ch-0: dark;
|
|
--ch-1: #8b949e;
|
|
--ch-2: #79c0ff;
|
|
--ch-3: #ffcda1;
|
|
--ch-4: #f8f8f2;
|
|
--ch-5: #bda4ff;
|
|
--ch-6: hsl(var(--brand-600));
|
|
--ch-7: #569cd6;
|
|
--ch-8: hsl(var(--brand-default));
|
|
--ch-9: #ffa198;
|
|
--ch-10: #f0f6fc;
|
|
--ch-11: #490202;
|
|
--ch-12: #04260f;
|
|
--ch-13: #5a1e02;
|
|
--ch-14: #161b22;
|
|
--ch-15: #8b949e;
|
|
/* --ch-16: hsl(var(--foreground-lighter)); */
|
|
--ch-16: #2a2929;
|
|
--ch-17: #264f78;
|
|
--ch-18: #3794ff;
|
|
--ch-19: #ffffff0b;
|
|
--ch-20: #6e7681;
|
|
--ch-21: #010409;
|
|
--ch-22: #30363d;
|
|
--ch-23: #f78166;
|
|
--ch-24: #6e768166;
|
|
--ch-25: #6e76811a;
|
|
}
|
|
|
|
[data-theme='light'],
|
|
.light {
|
|
--ch-0: light;
|
|
--ch-1: #6e7781;
|
|
--ch-2: #0550ae;
|
|
--ch-3: #953800;
|
|
--ch-4: #24292f;
|
|
--ch-5: #8250df;
|
|
--ch-6: hsl(var(--brand-600));
|
|
--ch-7: #cf222e;
|
|
--ch-8: hsl(var(--brand-default));
|
|
--ch-9: #82071e;
|
|
--ch-10: #f6f8fa;
|
|
--ch-11: #ffebe9;
|
|
--ch-12: #dafbe1;
|
|
--ch-13: #ffd8b5;
|
|
--ch-14: #eaeef2;
|
|
--ch-15: #57606a;
|
|
/* --ch-16: hsl(var(--foreground-lighter)); */
|
|
--ch-16: #eeeeee;
|
|
--ch-17: #add6ff;
|
|
--ch-18: #1a85ff;
|
|
--ch-19: #fdff0033;
|
|
--ch-20: #8c959f;
|
|
--ch-21: #f6f8fa;
|
|
--ch-22: #d0d7de;
|
|
--ch-23: #fd8c73;
|
|
--ch-24: #afb8c133;
|
|
--ch-25: #eaeef280;
|
|
}
|
|
|
|
.ch-terminal {
|
|
font-size: 14px;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
background: #1e1e1e;
|
|
color: #fafafa;
|
|
overflow: hidden;
|
|
padding: 0 8px 8px;
|
|
font-family: 'Courier New', Courier, monospace;
|
|
/* font-family: Ubuntu, Droid Sans, -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe UI, */
|
|
/* sans-serif; */
|
|
}
|
|
.ch-code-wrapper {
|
|
background-color: var(--ch-16) !important;
|
|
}
|
|
.ch-terminal-container .ch-frame-content {
|
|
background-color: inherit;
|
|
}
|
|
.ch-terminal-prompt {
|
|
color: #8fa2db;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
.ch-terminal-content {
|
|
margin: 0;
|
|
}
|
|
.ch-terminal-output {
|
|
opacity: 0.66;
|
|
}
|
|
.ch-code-line-number {
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
text-align: right;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
padding-right: 1.5ch;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.ch-code-scroll-parent {
|
|
display: block;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
line-height: 19px;
|
|
width: 100% !important;
|
|
letter-spacing: 0;
|
|
border-radius: 0;
|
|
background-color: unset;
|
|
color: unset;
|
|
padding: 0;
|
|
box-sizing: content-box;
|
|
border: none;
|
|
}
|
|
.ch-code-scroll-parent ::-moz-selection {
|
|
background-color: var(--ch-selection-background);
|
|
color: inherit;
|
|
}
|
|
.ch-code-scroll-parent ::selection {
|
|
background-color: var(--ch-selection-background);
|
|
color: inherit;
|
|
}
|
|
.ch-code-button {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
width: 1.1em;
|
|
height: 1.1em;
|
|
cursor: pointer;
|
|
}
|
|
.ch-no-scroll {
|
|
overflow: hidden;
|
|
}
|
|
.ch-expand-dialog {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
max-width: 900px;
|
|
border: 0;
|
|
background-color: transparent;
|
|
}
|
|
.ch-expand-dialog::-webkit-backdrop {
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
}
|
|
.ch-expand-dialog::backdrop {
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
}
|
|
.ch-expand-close {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
cursor: pointer;
|
|
color: #fff;
|
|
width: 26px;
|
|
height: 26px;
|
|
}
|
|
.ch-expand-dialog-content {
|
|
color: #fff;
|
|
position: absolute;
|
|
inset: 40px;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
border: 1px solid;
|
|
}
|
|
.ch-code-browser {
|
|
display: flex;
|
|
height: 100%;
|
|
/* font-family: 'Courier New', Courier, monospace; */
|
|
/* font-family: Ubuntu, Droid Sans, -apple-system; */
|
|
}
|
|
.ch-code-browser-sidebar {
|
|
border-right: 1px solid;
|
|
min-width: 100px;
|
|
padding: 1em 0;
|
|
font-size: 0.95rem;
|
|
}
|
|
.ch-code-browser-content {
|
|
overflow: auto;
|
|
flex: 1;
|
|
padding: 1em;
|
|
white-space: pre;
|
|
font-family: monospace;
|
|
font-weight: 400;
|
|
font-size: 1rem;
|
|
line-height: 1.2rem;
|
|
letter-spacing: 0;
|
|
position: relative;
|
|
}
|
|
.ch-code-browser-content ::-moz-selection {
|
|
background-color: var(--ch-selection-background);
|
|
color: inherit;
|
|
}
|
|
.ch-code-browser-content ::selection {
|
|
background-color: var(--ch-selection-background);
|
|
color: inherit;
|
|
}
|
|
.ch-code-browser-sidebar-file,
|
|
.ch-code-browser-sidebar-folder {
|
|
padding: 0.1em 1em;
|
|
}
|
|
.ch-code-browser-sidebar-file {
|
|
cursor: pointer;
|
|
}
|
|
.ch-code-browser-sidebar-file:hover {
|
|
background-color: var(--ch-hover-background);
|
|
color: var(--ch-hover-foreground);
|
|
}
|
|
.ch-code-browser-button {
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
cursor: pointer;
|
|
min-width: 1.5em;
|
|
min-height: 1.5em;
|
|
position: absolute;
|
|
right: 0.8em;
|
|
top: 0.8em;
|
|
}
|
|
.ch-editor-tab {
|
|
border: none;
|
|
border-right: 1px solid var(--ch-16);
|
|
min-width: -webkit-fit-content;
|
|
min-width: -moz-fit-content;
|
|
min-width: fit-content;
|
|
flex-shrink: 1;
|
|
position: relative;
|
|
display: flex;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
background-color: var(--ch-21) !important;
|
|
color: var(--ch-15);
|
|
min-width: 0;
|
|
}
|
|
.ch-editor-tab-active {
|
|
background-color: red;
|
|
color: #fff;
|
|
min-width: unset;
|
|
}
|
|
|
|
.ch-editor-tab > div {
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
font-size: 12px;
|
|
line-height: 1.4em;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
.ch-editor-frame {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
overflow: hidden;
|
|
font-family:
|
|
Ubuntu,
|
|
Droid Sans,
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
Segoe WPC,
|
|
Segoe UI,
|
|
sans-serif;
|
|
-moz-column-break-inside: avoid;
|
|
break-inside: avoid;
|
|
--ch-title-bar-height: 32px;
|
|
height: 100%;
|
|
/* border: 1px solid red; */
|
|
}
|
|
.ch-editor-frame .ch-frame-title-bar {
|
|
background-color: var(--ch-21) !important;
|
|
background: var(--ch-21) !important;
|
|
}
|
|
.ch-editor-terminal {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
bottom: 0;
|
|
width: 100%;
|
|
background-color: #1e1e1e;
|
|
color: #e7e7e7;
|
|
border-top: 1px solid hsla(0, 0%, 50.2%, 0.35);
|
|
padding: 0 8px;
|
|
box-sizing: border-box;
|
|
}
|
|
.ch-editor-terminal-tab {
|
|
text-transform: uppercase;
|
|
padding: 4px 10px 3px;
|
|
font-size: 11px;
|
|
line-height: 24px;
|
|
display: flex;
|
|
}
|
|
.ch-editor-terminal-tab > span {
|
|
border-bottom: 1px solid #e7e7e7;
|
|
}
|
|
.ch-editor-terminal-content {
|
|
margin-top: 8px;
|
|
height: calc(100% - 40px);
|
|
box-sizing: border-box;
|
|
}
|
|
.ch-editor-terminal-content .ch-terminal {
|
|
font-size: 12px;
|
|
margin: 0;
|
|
}
|
|
.ch-editor-button {
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
cursor: pointer;
|
|
min-width: 1.5em;
|
|
min-height: 1.5em;
|
|
margin-right: 0.8em;
|
|
}
|
|
.ch-frame {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.ch-frame,
|
|
.ch-simple-frame {
|
|
font-family:
|
|
Ubuntu,
|
|
Droid Sans,
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
Segoe WPC,
|
|
Segoe UI,
|
|
sans-serif;
|
|
-moz-column-break-inside: avoid;
|
|
break-inside: avoid;
|
|
--ch-title-bar-height: 30px;
|
|
}
|
|
.ch-simple-frame {
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
box-shadow:
|
|
0 13px 27px -5px rgba(50, 50, 93, 0.25),
|
|
0 8px 16px -8px rgba(0, 0, 0, 0.3),
|
|
0 -6px 16px -6px rgba(0, 0, 0, 0.025);
|
|
}
|
|
.ch-frame-content {
|
|
background-color: var(--ch-content-background, #fafafa);
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
flex-basis: 0;
|
|
min-height: 0;
|
|
}
|
|
.ch-frame-zoom {
|
|
--ch-frame-zoom: 1;
|
|
overflow: auto;
|
|
position: relative;
|
|
width: calc(100% / var(--ch-frame-zoom));
|
|
height: calc(100% / var(--ch-frame-zoom));
|
|
transform: scale(var(--ch-frame-zoom));
|
|
transform-origin: left top;
|
|
}
|
|
.ch-frame-title-bar {
|
|
font-size: 12px;
|
|
width: 100%;
|
|
height: var(--ch-title-bar-height);
|
|
min-height: var(--ch-title-bar-height);
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: var(--ch-content-background, #252526);
|
|
color: #ebebed;
|
|
position: relative;
|
|
}
|
|
.ch-frame-middle-bar {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
font-size: 1.2em;
|
|
}
|
|
.ch-frame-left-bar,
|
|
.ch-frame-right-bar {
|
|
flex-grow: 1;
|
|
flex-basis: 1em;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
width: -webkit-max-content;
|
|
width: -moz-max-content;
|
|
width: max-content;
|
|
}
|
|
.ch-frame-buttons {
|
|
margin: 0 0.8em;
|
|
flex-shrink: 0;
|
|
height: 1em;
|
|
width: 4.16em;
|
|
/* display: flex; */
|
|
display: none; /* @mildtomato */
|
|
}
|
|
.ch-frame-button {
|
|
width: 1em;
|
|
height: 1em;
|
|
border: 0.08em solid;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
}
|
|
.ch-frame-button-space {
|
|
width: 0.56em;
|
|
}
|
|
.ch-frame-button-left {
|
|
border-color: #ce5347;
|
|
background-color: #ed6b60;
|
|
}
|
|
.ch-frame-button-middle {
|
|
border-color: #d6a243;
|
|
background-color: #f5be4f;
|
|
}
|
|
.ch-frame-button-right {
|
|
border-color: #58a942;
|
|
background-color: #62c554;
|
|
}
|
|
.ch-mini-browser {
|
|
height: 100%;
|
|
}
|
|
.ch-mini-browser .ch-frame-content iframe,
|
|
.ch-mini-browser .ch-frame-content video {
|
|
border: none;
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.ch-mini-browser .ch-frame-title-bar input {
|
|
height: 1.4em;
|
|
font-size: 1em;
|
|
border-radius: 0.5em;
|
|
border: none;
|
|
box-shadow: none;
|
|
flex: 1;
|
|
padding: 0 10px;
|
|
color: #544;
|
|
min-width: 5px;
|
|
width: 5px;
|
|
}
|
|
.ch-browser-button {
|
|
margin: 0 1em;
|
|
color: #999;
|
|
}
|
|
.ch-browser-back-button {
|
|
margin-left: 0.2em;
|
|
}
|
|
.ch-browser-forward-button {
|
|
margin-left: 0;
|
|
}
|
|
.ch-browser-open-button {
|
|
color: inherit;
|
|
}
|
|
.ch-browser-open-icon {
|
|
display: block;
|
|
}
|
|
.ch-spotlight {
|
|
display: flex;
|
|
gap: 1.1rem;
|
|
margin: 1rem 0;
|
|
}
|
|
.ch-spotlight-tabs {
|
|
display: flex;
|
|
flex-flow: column;
|
|
flex: 1;
|
|
gap: 0.5rem;
|
|
align-items: stretch;
|
|
}
|
|
.ch-spotlight-tab {
|
|
border-radius: 0.25rem;
|
|
margin: 0 -0.5rem;
|
|
padding: 0 0.5rem;
|
|
border: 1px solid #e3e3e3;
|
|
}
|
|
.ch-spotlight-tab:hover {
|
|
border-color: red;
|
|
}
|
|
.ch-spotlight-tab[data-selected] {
|
|
border-color: red;
|
|
}
|
|
.ch-spotlight-sticker {
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: 10vh;
|
|
display: flex;
|
|
align-self: stretch;
|
|
flex-flow: column;
|
|
justify-content: center;
|
|
width: 420px;
|
|
min-height: min(100%, 80vh);
|
|
max-height: 80vh;
|
|
}
|
|
.ch-spotlight-sticker .ch-codeblock,
|
|
.ch-spotlight-sticker .ch-codegroup {
|
|
width: 100%;
|
|
min-width: 100%;
|
|
min-height: min(100%, 80vh);
|
|
max-height: 80vh;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
flex: 1;
|
|
}
|
|
.ch-spotlight-with-preview .ch-spotlight-sticker {
|
|
height: 80vh;
|
|
gap: 0.5rem;
|
|
}
|
|
.ch-spotlight-with-preview .ch-spotlight-sticker .ch-codeblock,
|
|
.ch-spotlight-with-preview .ch-spotlight-sticker .ch-codegroup {
|
|
min-height: 0;
|
|
flex: 1;
|
|
}
|
|
.ch-spotlight-with-preview .ch-spotlight-preview {
|
|
height: 280px;
|
|
}
|
|
.ch-scrollycoding {
|
|
display: flex;
|
|
position: relative;
|
|
margin: 1rem 0;
|
|
gap: 1rem;
|
|
}
|
|
.ch-scrollycoding-content {
|
|
box-sizing: border-box;
|
|
flex: 1;
|
|
}
|
|
.ch-scrollycoding-step-content {
|
|
border-radius: 8px;
|
|
margin: 0 -0.5rem;
|
|
padding: 1rem 0.5rem;
|
|
border: 1.5px solid transparent;
|
|
min-height: 180px;
|
|
}
|
|
.ch-scrollycoding-step-content[data-selected] {
|
|
border-color: #0070f3;
|
|
}
|
|
.ch-scrollycoding-step-content > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
.ch-scrollycoding-step-content > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.ch-scrollycoding-sticker {
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: 10vh;
|
|
display: flex;
|
|
align-self: start;
|
|
flex-flow: column;
|
|
justify-content: center;
|
|
width: var(--ch-scrollycoding-sticker-width, 420px);
|
|
max-height: 80vh;
|
|
}
|
|
.ch-scrollycoding-with-preview .ch-scrollycoding-sticker {
|
|
height: 80vh;
|
|
gap: 0.5rem;
|
|
}
|
|
.ch-scrollycoding-with-preview .ch-scrollycoding-sticker .ch-codeblock,
|
|
.ch-scrollycoding-with-preview .ch-scrollycoding-sticker .ch-codegroup {
|
|
flex: 1;
|
|
}
|
|
.ch-scrollycoding-with-preview .ch-scrollycoding-preview {
|
|
height: 280px;
|
|
}
|
|
.ch-scrollycoding-sticker .ch-codeblock,
|
|
.ch-scrollycoding-sticker .ch-codegroup {
|
|
width: 100%;
|
|
min-width: 100%;
|
|
min-height: var(--ch-scrollycoding-code-min-height, 200px);
|
|
max-height: 80vh;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
.ch-scrollycoding-static .ch-preview {
|
|
height: 150px;
|
|
}
|
|
.ch-slideshow {
|
|
margin: 1rem 0;
|
|
}
|
|
.ch-slideshow-slide {
|
|
display: flex;
|
|
flex-flow: row;
|
|
gap: 0.5rem;
|
|
align-items: stretch;
|
|
aspect-ratio: 16/9;
|
|
}
|
|
.ch-slideshow-slide .ch-codeblock,
|
|
.ch-slideshow-slide .ch-codegroup {
|
|
flex: 2;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
height: auto;
|
|
}
|
|
.ch-slideshow .ch-slideshow-preview {
|
|
flex: 1;
|
|
height: auto;
|
|
min-width: 0;
|
|
}
|
|
.ch-slideshow-range {
|
|
display: flex;
|
|
flex-flow: row;
|
|
gap: 0.5rem;
|
|
}
|
|
.ch-slideshow-range input {
|
|
flex: 1;
|
|
}
|
|
.ch-slideshow-notes {
|
|
border-radius: 0.25rem;
|
|
margin-top: 1rem;
|
|
padding: 1rem;
|
|
border: 1px solid #e3e3e3;
|
|
}
|
|
.ch-slideshow-note {
|
|
min-height: 140px;
|
|
max-height: 140px;
|
|
padding: 0.05px;
|
|
overflow: auto;
|
|
}
|
|
.ch-codeblock,
|
|
.ch-codegroup,
|
|
.ch-preview {
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
height: -webkit-max-content;
|
|
height: -moz-max-content;
|
|
height: max-content;
|
|
/* box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3), */
|
|
/* 0 -6px 16px -6px rgba(0, 0, 0, 0.025); */
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
}
|
|
.ch-codeblock > *,
|
|
.ch-codegroup > *,
|
|
.ch-preview > * {
|
|
height: 100%;
|
|
max-height: inherit;
|
|
min-height: inherit;
|
|
}
|
|
.ch-codeblock,
|
|
.ch-codegroup {
|
|
margin-top: 1.25em;
|
|
margin-bottom: 1.25em;
|
|
border: 1px solid hsl(var(--border-default)); /* @mildtomato */
|
|
box-shadow: none;
|
|
}
|
|
.ch-inline-code > code {
|
|
padding: 0.2em 0.15em;
|
|
margin: 0.1em -0.05em;
|
|
border-radius: 0.25em;
|
|
font-size: 0.9rem;
|
|
}
|
|
.ch-section-link,
|
|
.ch-section-link * {
|
|
text-decoration: underline;
|
|
-webkit-text-decoration-style: dotted;
|
|
text-decoration-style: dotted;
|
|
text-decoration-thickness: 1px;
|
|
-webkit-text-decoration-color: var(--ch-code-foreground, currentColor);
|
|
text-decoration-color: var(--ch-code-foreground, currentColor);
|
|
}
|
|
.ch-section-link[data-active='true'] {
|
|
background-color: rgba(186, 230, 253, 0.4);
|
|
}
|
|
.ch-editor-tab[data-active='true'] {
|
|
background-color: var(--ch-16) !important;
|
|
}
|
|
.ch-section-link[data-active='true'],
|
|
.ch-section-link[data-active='true'] * {
|
|
text-decoration-thickness: 1.5px;
|
|
}
|
|
.ch-code-inline-mark {
|
|
border-radius: 0.25rem;
|
|
padding: 0.2rem 0.15rem 0.1rem;
|
|
margin: 0 -0.15rem;
|
|
}
|
|
.ch-code-multiline-mark-border {
|
|
background: var(--foreground-default) !important;
|
|
width: 3px;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
.ch-code-inline-link,
|
|
.ch-code-link :not(span) > span {
|
|
text-decoration: underline;
|
|
-webkit-text-decoration-style: dotted;
|
|
text-decoration-style: dotted;
|
|
color: inherit;
|
|
}
|