|
|
|
@ -2,258 +2,282 @@ |
|
|
|
* Copyright (c) Facebook, Inc. and its affiliates. |
|
|
|
*/ |
|
|
|
|
|
|
|
/** |
|
|
|
* Theme |
|
|
|
*/ |
|
|
|
html .sp-wrapper { |
|
|
|
color-scheme: inherit; |
|
|
|
-webkit-font-smoothing: antialiased; |
|
|
|
|
|
|
|
--sp-colors-accent: #087ea4; |
|
|
|
--sp-colors-clickable: #959da5; |
|
|
|
--sp-colors-disabled: #24292e; |
|
|
|
--sp-colors-error: #811e18; |
|
|
|
--sp-colors-error-surface: #ffcdca; |
|
|
|
--sp-colors-surface1: #fff; |
|
|
|
--sp-colors-surface2: #e4e7eb; |
|
|
|
|
|
|
|
--sp-syntax-color-plain: #24292e; |
|
|
|
--sp-syntax-color-comment: #6a737d; |
|
|
|
--sp-syntax-color-keyword: #d73a49; |
|
|
|
--sp-syntax-color-tag: #22863a; |
|
|
|
--sp-syntax-color-punctuation: #24292e; |
|
|
|
--sp-syntax-color-definition: #6f42c1; |
|
|
|
--sp-syntax-color-property: #005cc5; |
|
|
|
--sp-syntax-color-static: #032f62; |
|
|
|
--sp-syntax-color-string: #032f62; |
|
|
|
/* palette */ |
|
|
|
--sp-colors-fg-active: #24292e !important; |
|
|
|
--sp-colors-fg-default: #959da5 !important; |
|
|
|
--sp-colors-fg-inactive: #e4e7eb !important; |
|
|
|
--sp-colors-bg-active: #e4e7eb !important; |
|
|
|
--sp-colors-bg-default: #ffffff !important; |
|
|
|
--sp-colors-bg-default-overlay: #ffffff !important; |
|
|
|
--sp-colors-bg-input: #ffffff !important; |
|
|
|
--sp-colors-accent: #c8c8fa !important; |
|
|
|
--sp-colors-bg-error: #ffcdca !important; |
|
|
|
--sp-colors-fg-error: #811e18 !important; |
|
|
|
/* syntax */ |
|
|
|
--theme-plain: #24292e; |
|
|
|
--theme-comment: #6a737d; |
|
|
|
--theme-keyword: #d73a49; |
|
|
|
--theme-tag: #22863a; |
|
|
|
--theme-punctuation: #24292e; |
|
|
|
--theme-definition: #6f42c1; |
|
|
|
--theme-property: #005cc5; |
|
|
|
--theme-static: #032f62; |
|
|
|
--theme-string: #032f62; |
|
|
|
} |
|
|
|
|
|
|
|
html.dark .sp-wrapper { |
|
|
|
--sp-colors-accent: #149eca; |
|
|
|
--sp-colors-clickable: #999; |
|
|
|
--sp-colors-disabled: #fff; |
|
|
|
--sp-colors-error: #811e18; |
|
|
|
--sp-colors-error-surface: #ffcdca; |
|
|
|
--sp-colors-surface1: #16181d; |
|
|
|
--sp-colors-surface2: #343a46; |
|
|
|
|
|
|
|
--sp-syntax-color-plain: #ffffff; |
|
|
|
--sp-syntax-color-comment: #757575; |
|
|
|
--sp-syntax-color-keyword: #77b7d7; |
|
|
|
--sp-syntax-color-tag: #dfab5c; |
|
|
|
--sp-syntax-color-punctuation: #ffffff; |
|
|
|
--sp-syntax-color-definition: #86d9ca; |
|
|
|
--sp-syntax-color-property: #77b7d7; |
|
|
|
--sp-syntax-color-static: #c64640; |
|
|
|
--sp-syntax-color-string: #977cdc; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* Reset |
|
|
|
*/ |
|
|
|
.sandpack--playground .sp-layout, |
|
|
|
.sandpack--playground .sp-tabs, |
|
|
|
.sandpack--playground .cm-activeLine, |
|
|
|
.sandpack .cm-editor, |
|
|
|
.sandpack--playground .cm-editor .cm-matchingBracket { |
|
|
|
border: none; |
|
|
|
background-color: transparent; |
|
|
|
} |
|
|
|
|
|
|
|
.sandpack--playground .cm-content { |
|
|
|
caret-color: initial; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* Layout |
|
|
|
*/ |
|
|
|
.sandpack .sp-wrapper { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
.sandpack .sp-layout { |
|
|
|
overflow: visible; |
|
|
|
-webkit-mask-image: -webkit-radial-gradient( |
|
|
|
var(--sp-colors-surface1), |
|
|
|
var(--sp-colors-surface1) |
|
|
|
); /* safest way to make all corner rounded */ |
|
|
|
|
|
|
|
border-bottom-left-radius: 0.5rem; |
|
|
|
border-bottom-right-radius: 0.5rem; |
|
|
|
} |
|
|
|
.sandpack .sp-layout > .sp-stack { |
|
|
|
flex: 1 1 0px; |
|
|
|
height: var(--sp-layout-height); |
|
|
|
} |
|
|
|
|
|
|
|
.sandpack .sp-layout > :not(:first-child) { |
|
|
|
border-left: 1px solid var(--sp-colors-surface2); |
|
|
|
border-top: 1px solid var(--sp-colors-surface2); |
|
|
|
margin-left: -1px; |
|
|
|
margin-top: -1px; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.sandpack .sp-cm { |
|
|
|
padding-left: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* Focus ring |
|
|
|
*/ |
|
|
|
.sandpack--playground .sp-tab-button { |
|
|
|
transition: none; |
|
|
|
} |
|
|
|
|
|
|
|
.sandpack--playground .sp-tab-button:focus { |
|
|
|
outline: revert; |
|
|
|
} |
|
|
|
|
|
|
|
.sandpack--playground .sp-tab-button:focus-visible { |
|
|
|
box-shadow: none; |
|
|
|
} |
|
|
|
|
|
|
|
.sandpack .sp-cm:focus-visible { |
|
|
|
box-shadow: inset 0 0 0 4px rgba(20, 158, 202, 0.4); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* Navigation |
|
|
|
*/ |
|
|
|
.sandpack--playground .sp-tabs-scrollable-container { |
|
|
|
padding: 0; |
|
|
|
--sp-colors-fg-active: #ffffff !important; |
|
|
|
--sp-colors-fg-default: #999999 !important; |
|
|
|
--sp-colors-fg-inactive: #343434 !important; |
|
|
|
--sp-colors-bg-active: #343434 !important; |
|
|
|
--sp-colors-bg-default: #16181d !important; |
|
|
|
--sp-colors-bg-default-overlay: #16181d !important; |
|
|
|
--sp-colors-bg-input: #242424 !important; |
|
|
|
--sp-colors-accent: #6caedd !important; |
|
|
|
--sp-colors-bg-error: #ffcdca !important; |
|
|
|
--sp-colors-fg-error: #811e18 !important; |
|
|
|
/* syntax */ |
|
|
|
--theme-plain: #ffffff; |
|
|
|
--theme-comment: #757575; |
|
|
|
--theme-keyword: #77b7d7; |
|
|
|
--theme-tag: #dfab5c; |
|
|
|
--theme-punctuation: #ffffff; |
|
|
|
--theme-definition: #86d9ca; |
|
|
|
--theme-property: #77b7d7; |
|
|
|
--theme-static: #c64640; |
|
|
|
--theme-string: #977cdc; |
|
|
|
} |
|
|
|
|
|
|
|
.sp-tabs, |
|
|
|
.sp-tab-button:hover { |
|
|
|
background: none !important; |
|
|
|
} |
|
|
|
|
|
|
|
.sp-tabs .sp-tab-button { |
|
|
|
color: #087ea4; |
|
|
|
padding: 0 4px; |
|
|
|
border-bottom: 2px solid transparent; |
|
|
|
} |
|
|
|
|
|
|
|
@media (min-width: 768px) { |
|
|
|
.sp-tabs .sp-tab-button { |
|
|
|
margin: 0 12px 0 0; |
|
|
|
} |
|
|
|
html.dark .sp-tabs .sp-tab-button { |
|
|
|
color: #149eca; |
|
|
|
} |
|
|
|
|
|
|
|
.sp-tabs .sp-tab-button, |
|
|
|
.sp-tabs .sp-tab-button:hover:not(:disabled, [data-active='true']), |
|
|
|
.sp-tabs .sp-tab-button[data-active='true'] { |
|
|
|
color: var(--sp-colors-accent); |
|
|
|
.sp-tabs .sp-tab-button:hover { |
|
|
|
color: #087ea4; |
|
|
|
} |
|
|
|
|
|
|
|
.sp-tabs .sp-tab-button[data-active='true'] { |
|
|
|
border-bottom: 2px solid var(--sp-colors-accent); |
|
|
|
html.dark .sp-tabs .sp-tab-button:hover { |
|
|
|
color: #149eca; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* Editor |
|
|
|
*/ |
|
|
|
.sandpack .sp-code-editor .cm-content, |
|
|
|
.sandpack .sp-code-editor .cm-gutters, |
|
|
|
.sandpack .sp-code-editor .cm-gutterElement { |
|
|
|
padding: 0; |
|
|
|
-webkit-font-smoothing: auto; /* Improve the legibility */ |
|
|
|
.sp-tabs .sp-tab-button[data-active='true'] { |
|
|
|
color: #087ea4; |
|
|
|
border-bottom: 2px solid #087ea4; |
|
|
|
} |
|
|
|
|
|
|
|
.sandpack--playground .sp-code-editor .cm-line { |
|
|
|
padding: 0 var(--sp-space-3); |
|
|
|
html.dark .sp-tabs .sp-tab-button[data-active='true'] { |
|
|
|
color: #149eca; |
|
|
|
border-bottom: 2px solid #149eca; |
|
|
|
} |
|
|
|
|
|
|
|
.sandpack--playground .sp-code-editor .cm-lineNumbers { |
|
|
|
padding-left: var(--sp-space-1); |
|
|
|
padding-right: var(--sp-space-1); |
|
|
|
font-size: 13.6px; |
|
|
|
.sp-stack .sp-code-editor, |
|
|
|
.sp-tabs .sp-tabs-scrollable-container { |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.sandpack--playground .sp-code-editor .cm-line.cm-errorLine { |
|
|
|
@apply bg-red-400; |
|
|
|
--tw-bg-opacity: 0.1; /* Background tweak: base color + opacity */ |
|
|
|
.sp-code-editor .cm-errorLine { |
|
|
|
background-color: rgba(255, 107, 99, 0.1); |
|
|
|
position: relative; |
|
|
|
padding-right: 2em; |
|
|
|
padding-right: 2em !important; |
|
|
|
display: inline-block; |
|
|
|
min-width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.sp-code-editor .cm-errorLine:after { |
|
|
|
@apply text-red-500; |
|
|
|
position: absolute; |
|
|
|
right: 8px; |
|
|
|
top: 0; |
|
|
|
content: '\26A0'; |
|
|
|
font-size: 22px; |
|
|
|
line-height: 20px; |
|
|
|
color: #ff3d3d; |
|
|
|
} |
|
|
|
|
|
|
|
.sp-code-editor .cm-tooltip { |
|
|
|
border: 0; |
|
|
|
max-width: 200px; |
|
|
|
} |
|
|
|
|
|
|
|
html.dark .sp-code-editor .cm-diagnostic { |
|
|
|
color: var(--sp-colors-bg-default); |
|
|
|
} |
|
|
|
.sp-code-editor .cm-diagnostic-error { |
|
|
|
@apply border-red-40; |
|
|
|
} |
|
|
|
|
|
|
|
.sp-code-editor .sp-cm .cm-scroller { |
|
|
|
overflow: auto; |
|
|
|
padding: 18px 0; |
|
|
|
.sp-code-editor .cm-diagnostic-warning { |
|
|
|
border-left: 5px solid orange; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* Loading component |
|
|
|
/* |
|
|
|
* These are manually adjusted to match the final |
|
|
|
* rendered version without any layout shifts. |
|
|
|
* Note this affects both sandboxes and code blocks. |
|
|
|
* |
|
|
|
* There are probably more maintainable ways to do this. |
|
|
|
* However, as long as there are kind people paying close |
|
|
|
* attention to these subtler details, I shall sleep in peace. |
|
|
|
* |
|
|
|
* If you know a better way to keep them from diverging, send a PR. |
|
|
|
*/ |
|
|
|
.sandpack--playground .sp-cube-wrapper { |
|
|
|
background-color: var(--sp-colors-surface1); |
|
|
|
.sp-cm { |
|
|
|
-webkit-text-size-adjust: none !important; |
|
|
|
padding: 0 !important; |
|
|
|
} |
|
|
|
.cm-wrap { |
|
|
|
background: transparent !important; |
|
|
|
} |
|
|
|
.sp-pre-placeholder { |
|
|
|
display: block !important; |
|
|
|
margin-top: 0px !important; |
|
|
|
margin-bottom: 0px !important; |
|
|
|
padding: 18px var(--sp-space-3) !important; |
|
|
|
@apply font-mono !important; |
|
|
|
font-size: 13.6px !important; |
|
|
|
line-height: 24px !important; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.sandpack--playground .sp-overlay { |
|
|
|
@apply bg-card; |
|
|
|
.text-xl .sp-pre-placeholder { |
|
|
|
font-size: 16px !important; |
|
|
|
line-height: 24px !important; |
|
|
|
} |
|
|
|
.sp-cm .cm-scroller { |
|
|
|
overflow: auto !important; |
|
|
|
padding: 18px 0 !important; |
|
|
|
} |
|
|
|
|
|
|
|
html.dark .sandpack--playground .sp-overlay { |
|
|
|
@apply bg-wash-dark; |
|
|
|
.console .sp-cm, |
|
|
|
.console .sp-cm .cm-scroller, |
|
|
|
.console .sp-cm .cm-line { |
|
|
|
padding: 0px !important; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* CodeBlock |
|
|
|
*/ |
|
|
|
.sandpack--codeblock .cm-content { |
|
|
|
padding: 0; |
|
|
|
.sp-cm .cm-gutters { |
|
|
|
background-color: var(--sp-colors-bg-default); |
|
|
|
z-index: 1; |
|
|
|
} |
|
|
|
.sp-wrapper { |
|
|
|
width: 100% !important; |
|
|
|
} |
|
|
|
.sp-wrapper .sp-custom-layout { |
|
|
|
overflow: initial; |
|
|
|
border: 0px solid transparent; |
|
|
|
border-top-left-radius: 0px; |
|
|
|
border-top-right-radius: 0px; |
|
|
|
border-bottom-left-radius: 0.5rem; |
|
|
|
border-bottom-right-radius: 0.5rem; |
|
|
|
} |
|
|
|
.sp-wrapper .sp-layout-devtools { |
|
|
|
border-bottom-left-radius: 0; |
|
|
|
border-bottom-right-radius: 0; |
|
|
|
} |
|
|
|
html.dark .sp-layout > :not(:first-child) { |
|
|
|
border-color: #343a46; |
|
|
|
} |
|
|
|
html.dark .sp-layout { |
|
|
|
background-color: #343a46; |
|
|
|
} |
|
|
|
html .sp-loading { |
|
|
|
background-color: transparent; |
|
|
|
} |
|
|
|
html.dark .sp-loading { |
|
|
|
background-color: #23272f; |
|
|
|
} |
|
|
|
|
|
|
|
.sandpack--codeblock .cm-content.cm-readonly .cm-line { |
|
|
|
padding: 0 var(--sp-space-3); |
|
|
|
@media (min-width: 768px) { |
|
|
|
.sp-tabs .sp-tab-button { |
|
|
|
margin: 0 12px 0 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* Placeholder |
|
|
|
*/ |
|
|
|
.sandpack .sp-code-editor .sp-pre-placeholder { |
|
|
|
@apply font-mono; |
|
|
|
font-size: 13.6px; |
|
|
|
line-height: 24px; |
|
|
|
padding: 18px 0; |
|
|
|
/* Devtools */ |
|
|
|
.sp-devtools { |
|
|
|
border-bottom-left-radius: 0.5rem; |
|
|
|
border-bottom-right-radius: 0.5rem; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
.sp-devtools > div { |
|
|
|
--color-background: var(--sp-colors-bg-default) !important; |
|
|
|
--color-background-inactive: var(--sp-colors-fg-inactive) !important; |
|
|
|
--color-background-selected: #087ea4 !important; |
|
|
|
--color-background-hover: transparent !important; |
|
|
|
--color-modal-background: #ffffffd2 !important; |
|
|
|
|
|
|
|
.sandpack--codeblock .sp-code-editor .sp-pre-placeholder { |
|
|
|
margin-left: var(--sp-space-3) !important; /* override inline style */ |
|
|
|
--color-tab-selected-border: #087ea4 !important; |
|
|
|
|
|
|
|
--color-component-name: var(--theme-definition) !important; |
|
|
|
--color-attribute-name: var(--theme-property) !important; |
|
|
|
--color-attribute-value: var(--theme-string) !important; |
|
|
|
--color-attribute-editable-value: var(--theme-property) !important; |
|
|
|
--color-attribute-name-not-editable: var(--sp-colors-fg-default) !important; |
|
|
|
--color-button-background-focus: var(--sp-colors-fg-inactive) !important; |
|
|
|
|
|
|
|
--color-button-active: #087ea4 !important; |
|
|
|
--color-button-background: transparent !important; |
|
|
|
--color-button: var(--sp-colors-fg-default) !important; |
|
|
|
--color-button-hover: var(--sp-colors-fg-active) !important; |
|
|
|
|
|
|
|
--color-border: var(--sp-colors-fg-inactive) !important; |
|
|
|
--color-text: rgb(35, 39, 47) !important; |
|
|
|
} |
|
|
|
html.dark .sp-devtools > div { |
|
|
|
--color-text: var(--sp-colors-fg-default) !important; |
|
|
|
--color-modal-background: #16181de0 !important; |
|
|
|
} |
|
|
|
|
|
|
|
.sandpack--playground .sp-code-editor .sp-pre-placeholder { |
|
|
|
margin-left: var(--sp-space-10) !important; /* override inline style */ |
|
|
|
.sp-devtools table td { |
|
|
|
border: 1px solid var(--sp-colors-fg-inactive); |
|
|
|
} |
|
|
|
|
|
|
|
.text-xl .sp-pre-placeholder { |
|
|
|
font-size: 16px !important; |
|
|
|
line-height: 24px !important; |
|
|
|
/* Make focus rings work */ |
|
|
|
.sp-tab-button { |
|
|
|
transition: none !important; |
|
|
|
} |
|
|
|
.sp-tab-button:focus { |
|
|
|
outline: revert !important; |
|
|
|
} |
|
|
|
.sp-tab-button:focus-visible { |
|
|
|
box-shadow: none !important; |
|
|
|
} |
|
|
|
.sp-cm:focus-visible { |
|
|
|
box-shadow: inset 0 0 0 4px rgba(20, 158, 202, 0.4) !important; |
|
|
|
} |
|
|
|
.cm-line { |
|
|
|
padding: 0 var(--sp-space-3) !important; |
|
|
|
} |
|
|
|
.cm-lineNumbers { |
|
|
|
padding-left: var(--sp-space-1) !important; |
|
|
|
padding-right: var(--sp-space-1) !important; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* Expand button |
|
|
|
*/ |
|
|
|
/* For iOS: prevent browser zoom when clicking on sandbox. */ |
|
|
|
@media screen and (max-width: 768px) { |
|
|
|
@supports (-webkit-overflow-scrolling: touch) { |
|
|
|
.cm-content { |
|
|
|
font-size: initial; |
|
|
|
} |
|
|
|
.DocSearch-Input { |
|
|
|
font-size: initial; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.sp-cm { |
|
|
|
padding-left: 8px !important; |
|
|
|
} |
|
|
|
.sp-layout { |
|
|
|
min-height: 216px; |
|
|
|
} |
|
|
|
|
|
|
|
.sp-layout > .sp-stack:nth-child(1) { |
|
|
|
/* Force vertical if there isn't enough space. */ |
|
|
|
min-width: 431px; |
|
|
|
@ -261,7 +285,6 @@ html.dark .sandpack--playground .sp-overlay { |
|
|
|
/* Max height is needed to avoid too long files. */ |
|
|
|
max-height: 40vh; |
|
|
|
} |
|
|
|
|
|
|
|
.sp-layout > .sp-stack:nth-child(2) { |
|
|
|
/* Force vertical if there isn't enough space. */ |
|
|
|
min-width: 431px; |
|
|
|
@ -275,13 +298,11 @@ html.dark .sandpack--playground .sp-overlay { |
|
|
|
max-height: unset; |
|
|
|
height: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.sp-layout.sp-layout-expanded > .sp-stack:nth-child(2) { |
|
|
|
/* Clicking "show more" lets mobile preview go full height. */ |
|
|
|
max-height: unset; |
|
|
|
height: auto; |
|
|
|
} |
|
|
|
|
|
|
|
@media (min-width: 1280px) { |
|
|
|
.sp-layout > .sp-stack:nth-child(1) { |
|
|
|
/* On desktop, clamp height by pixels instead. */ |
|
|
|
@ -303,106 +324,8 @@ html.dark .sandpack--playground .sp-overlay { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.sandpack--playground .sp-layout .sandpack-expand { |
|
|
|
border-left: none; |
|
|
|
margin-left: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.expandable-callout .sp-stack:nth-child(2) { |
|
|
|
min-width: 431px; |
|
|
|
min-height: 40vh; |
|
|
|
max-height: 40vh; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* Integrations: console |
|
|
|
*/ |
|
|
|
.console .sp-cm, |
|
|
|
.console .sp-cm .cm-scroller, |
|
|
|
.console .sp-cm .cm-line { |
|
|
|
padding: 0px !important; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* Integrations: eslint |
|
|
|
*/ |
|
|
|
.sp-code-editor .cm-diagnostic { |
|
|
|
@apply text-secondary; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* Integrations: React devtools inline |
|
|
|
*/ |
|
|
|
.sp-devtools { |
|
|
|
border-bottom-left-radius: 0.5rem; |
|
|
|
border-bottom-right-radius: 0.5rem; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.sp-wrapper .sp-layout-devtools { |
|
|
|
border-bottom-left-radius: 0; |
|
|
|
border-bottom-right-radius: 0; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* Overwrite inline sty |
|
|
|
*/ |
|
|
|
.sp-devtools > div { |
|
|
|
--color-background: var(--sp-colors-surface1) !important; |
|
|
|
--color-background-inactive: var(--sp-colors-surface2) !important; |
|
|
|
--color-background-selected: var(--sp-colors-accent) !important; |
|
|
|
--color-background-hover: transparent !important; |
|
|
|
--color-modal-background: #ffffffd2 !important; |
|
|
|
|
|
|
|
--color-tab-selected-border: #087ea4 !important; |
|
|
|
|
|
|
|
--color-component-name: var(--sp-syntax-color-definition) !important; |
|
|
|
--color-attribute-name: var(--sp-syntax-color-property) !important; |
|
|
|
--color-attribute-value: var(--sp-syntax-color-string) !important; |
|
|
|
--color-attribute-editable-value: var(--sp-syntax-color-property) !important; |
|
|
|
--color-attribute-name-not-editable: var(--sp-colors-clickable) !important; |
|
|
|
--color-button-background-focus: var(--sp-colors-surface2) !important; |
|
|
|
|
|
|
|
--color-button-active: var(--sp-colors-accent) !important; |
|
|
|
--color-button-background: transparent !important; |
|
|
|
--color-button: var(--sp-colors-clickable) !important; |
|
|
|
--color-button-hover: var(--sp-colors-disabled) !important; |
|
|
|
|
|
|
|
--color-border: var(--sp-colors-surface2) !important; |
|
|
|
--color-text: rgb(35, 39, 47) !important; |
|
|
|
} |
|
|
|
|
|
|
|
html.dark .sp-devtools > div { |
|
|
|
--color-text: var(--sp-colors-clickable) !important; |
|
|
|
--color-modal-background: #16181de0 !important; |
|
|
|
} |
|
|
|
|
|
|
|
.sp-devtools table td { |
|
|
|
border: 1px solid var(--sp-colors-surface2); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* Hard fixes |
|
|
|
*/ |
|
|
|
|
|
|
|
/** |
|
|
|
* The text-size-adjust CSS property controls the text inflation |
|
|
|
* algorithm used on some smartphones and tablets |
|
|
|
*/ |
|
|
|
.sandpack .sp-cm { |
|
|
|
-webkit-text-size-adjust: none; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* For iOS: prevent browser zoom when clicking on sandbox |
|
|
|
*/ |
|
|
|
@media screen and (max-width: 768px) { |
|
|
|
@supports (-webkit-overflow-scrolling: touch) { |
|
|
|
.cm-content { |
|
|
|
font-size: initial; |
|
|
|
} |
|
|
|
.DocSearch-Input { |
|
|
|
font-size: initial; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
dan
2 years ago
GitHub