mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-26 07:25:20 +00:00
418 lines
9.2 KiB
CSS
418 lines
9.2 KiB
CSS
/*
|
|
* 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;
|
|
}
|
|
|
|
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 {
|
|
-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;
|
|
}
|
|
@media screen and (max-width: 768px) {
|
|
.sp-layout > .sp-stack {
|
|
height: auto;
|
|
min-width: 100% !important;
|
|
}
|
|
}
|
|
.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);
|
|
padding-left: 12px;
|
|
}
|
|
|
|
/**
|
|
* Navigation
|
|
*/
|
|
.sandpack--playground .sp-tabs-scrollable-container {
|
|
padding: 0;
|
|
}
|
|
|
|
.sp-tabs .sp-tab-button {
|
|
padding: 0 6px;
|
|
border-bottom: 2px solid transparent;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.sp-tabs .sp-tab-button {
|
|
margin: 0 12px 0 0;
|
|
}
|
|
}
|
|
|
|
.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[data-active='true'] {
|
|
border-bottom: 2px solid var(--sp-colors-accent);
|
|
}
|
|
|
|
/**
|
|
* 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 */
|
|
}
|
|
|
|
.sandpack--playground .sp-code-editor .cm-line {
|
|
padding: 0 var(--sp-space-3);
|
|
}
|
|
|
|
.sandpack--playground .sp-code-editor .cm-lineNumbers {
|
|
padding-left: var(--sp-space-1);
|
|
padding-right: var(--sp-space-1);
|
|
font-size: 13.6px;
|
|
}
|
|
|
|
.sandpack--playground .sp-code-editor .cm-line.cm-errorLine {
|
|
@apply bg-red-400;
|
|
--tw-bg-opacity: 0.1; /* Background tweak: base color + opacity */
|
|
position: relative;
|
|
padding-right: 2em;
|
|
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;
|
|
}
|
|
|
|
.sp-code-editor .cm-tooltip {
|
|
border: 0;
|
|
max-width: 200px;
|
|
}
|
|
|
|
.sp-code-editor .cm-diagnostic-error {
|
|
@apply border-red-40;
|
|
}
|
|
|
|
.sp-code-editor .sp-cm .cm-scroller {
|
|
overflow: auto;
|
|
padding: 18px 0;
|
|
}
|
|
|
|
/**
|
|
* Loading component
|
|
*/
|
|
.sandpack--playground .sp-cube-wrapper {
|
|
background-color: var(--sp-colors-surface1);
|
|
}
|
|
|
|
.sandpack--playground .sp-overlay {
|
|
@apply bg-card;
|
|
}
|
|
|
|
html.dark .sandpack--playground .sp-overlay {
|
|
@apply bg-wash-dark;
|
|
}
|
|
|
|
/**
|
|
* CodeBlock
|
|
*/
|
|
.sandpack--codeblock .cm-content {
|
|
padding: 0;
|
|
}
|
|
|
|
.sandpack--codeblock .cm-content.cm-readonly .cm-line {
|
|
padding: 0 var(--sp-space-3);
|
|
}
|
|
|
|
/**
|
|
* Placeholder
|
|
*/
|
|
.sandpack .sp-code-editor .sp-pre-placeholder {
|
|
@apply font-mono;
|
|
font-size: 13.6px;
|
|
line-height: 24px;
|
|
padding: 18px 0;
|
|
}
|
|
|
|
.sandpack--codeblock .sp-code-editor .sp-pre-placeholder {
|
|
margin-left: var(--sp-space-3) !important; /* override inline style */
|
|
}
|
|
|
|
.sandpack--playground .sp-code-editor .sp-pre-placeholder {
|
|
margin-left: var(--sp-space-10) !important; /* override inline style */
|
|
}
|
|
|
|
.text-xl .sp-pre-placeholder {
|
|
font-size: 16px !important;
|
|
line-height: 24px !important;
|
|
}
|
|
|
|
/**
|
|
* Expand button
|
|
*/
|
|
|
|
.sp-layout {
|
|
min-height: 216px;
|
|
}
|
|
|
|
.sp-layout > .sp-stack:nth-child(1) {
|
|
/* Force vertical if there isn't enough space. */
|
|
min-width: 431px;
|
|
/* No min height on mobile because we know code in advance. */
|
|
/* 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;
|
|
/* Keep preview a fixed size on mobile to avoid jumps. */
|
|
/* This is because we don't know its content in advance. */
|
|
min-height: 40vh;
|
|
max-height: 40vh;
|
|
}
|
|
.sp-layout.sp-layout-expanded > .sp-stack:nth-child(1) {
|
|
/* Clicking "show more" lets mobile editor go full height. */
|
|
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. */
|
|
height: auto;
|
|
min-height: unset;
|
|
max-height: 406px;
|
|
}
|
|
.sp-layout > .sp-stack:nth-child(2) {
|
|
/* On desktop, clamp height by pixels instead. */
|
|
height: auto;
|
|
min-height: unset;
|
|
max-height: 406px;
|
|
}
|
|
.sp-layout.sp-layout-expanded > .sp-stack:nth-child(1) {
|
|
max-height: unset;
|
|
}
|
|
.sp-layout.sp-layout-expanded > .sp-stack:nth-child(2) {
|
|
max-height: unset;
|
|
}
|
|
}
|
|
|
|
.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.
|
|
* Does NOT apply to code blocks.
|
|
*/
|
|
@media screen and (max-width: 768px) {
|
|
@supports (-webkit-overflow-scrolling: touch) {
|
|
.sandbox .cm-content,
|
|
.sandbox .sp-code-editor .sp-pre-placeholder {
|
|
font-size: initial;
|
|
}
|
|
.DocSearch-Input {
|
|
font-size: initial;
|
|
}
|
|
}
|
|
}
|