| .sp-wrapper { |
| --sp-colors-fg-active: #1f2933; |
| --sp-colors-fg-default: #757678; |
| --sp-colors-fg-inactive: #e4e7eb; |
| --sp-colors-bg-active: #e4e7eb; |
| --sp-colors-bg-default: #f8f9fb; |
| --sp-colors-bg-default-overlay: rgba(248, 249, 251, 0.8117647058823529); |
| --sp-colors-bg-input: #fff; |
| --sp-colors-accent: #64d2ff; |
| --sp-colors-bg-error: #ffcdca; |
| --sp-colors-fg-error: #811e18; |
| --sp-layout-height: 300px; |
| --sp-font-size: 14px; |
| --sp-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, |
| Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', |
| 'Segoe UI Symbol'; |
| --sp-font-mono: 'Fira Mono', 'DejaVu Sans Mono', Menlo, Consolas, |
| 'Liberation Mono', Monaco, 'Lucida Console', monospace; |
| --sp-space-1: 4px; |
| --sp-space-2: 8px; |
| --sp-space-3: 12px; |
| --sp-space-4: 16px; |
| --sp-space-5: 20px; |
| --sp-space-6: 24px; |
| --sp-space-7: 28px; |
| --sp-space-8: 32px; |
| --sp-border-radius: 4px; |
| all: initial; |
| font-size: var(--sp-font-size); |
| font-family: var(--sp-font-body); |
| display: block; |
| box-sizing: border-box; |
| text-rendering: optimizeLegibility; |
| -webkit-tap-highlight-color: transparent; |
| -webkit-font-smoothing: subpixel-antialiased; |
| } |
| @media screen and (-webkit-min-device-pixel-ratio: 2), |
| screen and (min-resolution: 2dppx) { |
| .sp-wrapper { |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| } |
| } |
| |
| .sp-wrapper:focus { |
| outline: 0; |
| } |
| .sp-layout { |
| border: 1px solid var(--sp-colors-fg-inactive); |
| display: flex; |
| flex-wrap: wrap; |
| align-items: stretch; |
| background: var(--sp-colors-bg-default); |
| border-radius: var(--sp-border-radius); |
| overflow: hidden; |
| -webkit-mask-image: -webkit-radial-gradient( |
| var(--sp-colors-bg-input), |
| var(--sp-colors-bg-default) |
| ); |
| } |
| .sp-stack { |
| display: flex; |
| flex-direction: column; |
| width: 100%; |
| } |
| .sp-layout > .sp-stack { |
| flex-grow: 1; |
| flex-shrink: 1; |
| flex-basis: 0; |
| min-width: 350px; |
| height: var(--sp-layout-height); |
| } |
| @media print { |
| .sp-layout > .sp-stack { |
| height: auto; |
| display: block; |
| } |
| } |
| .sp-layout > :not(:first-child) { |
| border-left: 1px solid var(--sp-colors-fg-inactive); |
| border-top: 1px solid var(--sp-colors-fg-inactive); |
| margin-left: -1px; |
| margin-top: -1px; |
| position: relative; |
| } |
| .sp-layout > :first-child .sp-overlay { |
| border-right: 1px solid var(--sp-colors-fg-inactive); |
| } |
| @media screen and (max-width: 768px) { |
| .sp-layout > .sp-stack { |
| height: auto; |
| min-width: 100% !important; |
| } |
| } |
| .sp-pre-placeholder { |
| margin: 0; |
| display: block; |
| padding: 0 var(--sp-space-3); |
| font-family: var(--sp-font-mono); |
| font-size: var(--sp-font-size); |
| color: var(--sp-colors-fg-active); |
| line-height: var(--sp-line-height); |
| } |
| .sp-code-editor { |
| flex: 1; |
| position: relative; |
| overflow: auto; |
| background: var(--sp-colors-bg-default); |
| } |
| .sp-cm { |
| padding: var(--sp-space-4) 0; |
| margin: 0; |
| outline: none; |
| height: 100%; |
| } |
| .sp-cm:focus-visible { |
| box-shadow: inset 0 0 0 4px var(--sp-colors-accent); |
| padding-left: var(--sp-space-1); |
| padding-right: var(--sp-space-1); |
| } |
| .sp-cm:focus-visible .cm-line { |
| padding: 0 var(--sp-space-2); |
| } |
| .sp-cm:focus-visible .cm-gutter.cm-lineNumbers { |
| padding-left: 0; |
| padding-right: var(--sp-space-2); |
| } |
| .sp-transpiled-code { |
| display: flex; |
| flex-direction: column; |
| width: 100%; |
| min-height: 160px; |
| } |
| .sp-code-view, |
| .sp-transpiled-code { |
| position: relative; |
| overflow: auto; |
| flex: 1; |
| } |
| .sp-code-view { |
| padding: var(--sp-space-4) var(--sp-space-2); |
| line-height: 1.4; |
| } |
| .sp-code-view, |
| .sp-tabs { |
| background: var(--sp-colors-bg-default); |
| } |
| .sp-tabs { |
| border-bottom: 1px solid var(--sp-colors-fg-inactive); |
| } |
| .sp-tabs-scrollable-container { |
| padding: 0 var(--sp-space-4); |
| overflow: auto; |
| display: flex; |
| flex-wrap: nowrap; |
| align-items: stretch; |
| min-height: 40px; |
| margin-bottom: -1px; |
| } |
| .sp-preview-container { |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| background: #fff; |
| overflow: auto; |
| position: relative; |
| } |
| .sp-preview-iframe { |
| border: 0; |
| outline: 0; |
| width: 100%; |
| height: 100%; |
| min-height: 160px; |
| max-height: 2000px; |
| flex: 1; |
| transition: height 0.15s ease-out; |
| } |
| .sp-preview-actions { |
| display: flex; |
| position: absolute; |
| bottom: var(--sp-space-2); |
| right: var(--sp-space-2); |
| z-index: 4; |
| } |
| .sp-preview-actions > * { |
| margin-left: var(--sp-space-2); |
| } |
| .sp-navigator { |
| display: flex; |
| align-items: center; |
| height: 40px; |
| border-bottom: 1px solid var(--sp-colors-fg-inactive); |
| padding: var(--sp-space-2) var(--sp-space-4); |
| background: var(--sp-colors-bg-default); |
| } |
| .sp-tab-button { |
| display: block; |
| background: transparent; |
| -webkit-appearance: none; |
| -moz-appearance: none; |
| appearance: none; |
| font-size: inherit; |
| padding: 0 var(--sp-space-2); |
| color: var(--sp-colors-fg-default); |
| height: 40px; |
| border: 0; |
| outline: none; |
| border-bottom: 1px solid transparent; |
| transition: all 0.15s ease-out; |
| white-space: nowrap; |
| } |
| .sp-tab-button[data-active='true'] { |
| color: var(--sp-colors-fg-active); |
| border-bottom: 1px solid var(--sp-colors-accent); |
| } |
| .sp-tab-button:hover { |
| color: var(--sp-colors-fg-active); |
| background: var(--sp-colors-bg-active); |
| } |
| .sp-tab-button:focus { |
| outline: none; |
| } |
| .sp-tab-button:focus-visible { |
| box-shadow: inset 0 0 0 2px var(--sp-colors-accent); |
| } |
| .sp-close-button { |
| padding: 0 var(--sp-space-1) 2px var(--sp-space-1); |
| border-radius: var(--sp-border-radius); |
| margin-left: var(--sp-space-1); |
| width: 20px; |
| visibility: hidden; |
| } |
| .sp-tab-button:hover > .sp-close-button { |
| visibility: unset; |
| } |
| .sp-button { |
| -webkit-appearance: none; |
| -moz-appearance: none; |
| appearance: none; |
| border: 0; |
| outline: none; |
| padding: var(--sp-space-1) var(--sp-space-3) var(--sp-space-1) |
| var(--sp-space-2); |
| border-radius: var(--sp-border-radius); |
| display: flex; |
| align-items: center; |
| color: var(--sp-colors-fg-default); |
| background-color: var(--sp-colors-bg-default); |
| font-size: inherit; |
| font-family: inherit; |
| transition: all 0.15s ease-in-out; |
| } |
| .sp-button.sp-explorer { |
| border-radius: 0; |
| width: 100%; |
| height: 28px; |
| } |
| .sp-button.sp-explorer svg { |
| margin-right: var(--sp-space-1); |
| } |
| .sp-button.sp-icon-standalone { |
| padding: var(--sp-space-1); |
| background: var(--sp-colors-bg-default-overlay); |
| -webkit-backdrop-filter: blur(4px); |
| backdrop-filter: blur(4px); |
| width: var(--sp-space-8); |
| height: var(--sp-space-8); |
| } |
| .sp-button.sp-icon { |
| padding: 0; |
| } |
| .sp-button:hover:not(:disabled) { |
| background-color: var(--sp-colors-bg-active); |
| color: var(--sp-colors-fg-active); |
| } |
| .sp-button:disabled { |
| color: var(--sp-colors-fg-inactive); |
| } |
| .sp-button:focus { |
| outline: none; |
| } |
| .sp-button:focus-visible { |
| outline: 2px solid var(--sp-colors-accent); |
| } |
| .sp-button.sp-csb-icon-dark { |
| color: var(--sp-colors-bg-default); |
| } |
| .sp-button.sp-csb-icon-dark:hover:not(:disabled) { |
| background-color: var(--sp-colors-bg-active); |
| color: var(--sp-colors-bg-active); |
| } |
| .sp-input { |
| background-color: var(--sp-colors-bg-input); |
| color: var(--sp-colors-fg-default); |
| padding: var(--sp-space-1) var(--sp-space-2); |
| border-radius: var(--sp-border-radius); |
| border: 1px solid var(--sp-colors-fg-inactive); |
| height: 24px; |
| line-height: 24px; |
| font-size: inherit; |
| outline: none; |
| flex: 1; |
| margin-left: var(--sp-space-4); |
| width: 0; |
| } |
| .sp-input:focus { |
| border: 1px solid var(--sp-colors-accent); |
| color: var(--sp-colors-fg-active); |
| } |
| .sp-overlay { |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| top: 0; |
| margin: 0; |
| overflow: auto; |
| height: 100%; |
| z-index: 3; |
| } |
| .sp-loading { |
| background-color: var(--sp-colors-bg-default); |
| z-index: 5; |
| } |
| .sp-cube-wrapper { |
| position: absolute; |
| right: var(--sp-space-2); |
| bottom: var(--sp-space-2); |
| z-index: 4; |
| width: 32px; |
| height: 32px; |
| background: var(--sp-colors-bg-default); |
| border-radius: var(--sp-border-radius); |
| } |
| .sp-cube-wrapper .sp-cube { |
| display: block; |
| } |
| .sp-cube-wrapper .sp-button { |
| display: none; |
| } |
| .sp-cube-wrapper:hover .sp-button { |
| display: block; |
| } |
| .sp-cube-wrapper:hover .sp-cube { |
| display: none; |
| } |
| .sp-cube { |
| transform: translate(-4px, 9px) scale(0.13); |
| } |
| .sp-cube * { |
| position: absolute; |
| width: 96px; |
| height: 96px; |
| } |
| .sp-cube .sp-sides * { |
| border: 10px solid var(--sp-colors-fg-default); |
| border-radius: 8px; |
| background: var(--sp-colors-bg-default-overlay); |
| } |
| @-webkit-keyframes sp-cube-rotate { |
| 0% { |
| transform: rotateX(-25.5deg) rotateY(45deg); |
| } |
| to { |
| transform: rotateX(-25.5deg) rotateY(405deg); |
| } |
| } |
| @keyframes sp-cube-rotate { |
| 0% { |
| transform: rotateX(-25.5deg) rotateY(45deg); |
| } |
| to { |
| transform: rotateX(-25.5deg) rotateY(405deg); |
| } |
| } |
| .sp-cube .sp-sides { |
| -webkit-animation: sp-cube-rotate 1s linear infinite; |
| animation: sp-cube-rotate 1s linear infinite; |
| -webkit-animation-fill-mode: forwards; |
| animation-fill-mode: forwards; |
| transform-style: preserve-3d; |
| transform: rotateX(-25.5deg) rotateY(45deg); |
| } |
| .sp-cube .sp-sides .sp-top { |
| transform: rotateX(90deg) translateZ(44px); |
| transform-origin: 50% 50%; |
| } |
| .sp-cube .sp-sides .sp-bottom { |
| transform: rotateX(-90deg) translateZ(44px); |
| transform-origin: 50% 50%; |
| } |
| .sp-cube .sp-sides .sp-front { |
| transform: rotateY(0deg) translateZ(44px); |
| transform-origin: 50% 50%; |
| } |
| .sp-cube .sp-sides .sp-back { |
| transform: rotateY(-180deg) translateZ(44px); |
| transform-origin: 50% 50%; |
| } |
| .sp-cube .sp-sides .sp-left { |
| transform: rotateY(-90deg) translateZ(44px); |
| transform-origin: 50% 50%; |
| } |
| .sp-cube .sp-sides .sp-right { |
| transform: rotateY(90deg) translateZ(44px); |
| transform-origin: 50% 50%; |
| } |
| @-webkit-keyframes sp-fade-in { |
| 0% { |
| opacity: 0; |
| transform: translateY(4px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| @keyframes sp-fade-in { |
| 0% { |
| opacity: 0; |
| transform: translateY(4px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| .sp-error { |
| padding: var(--sp-space-4); |
| white-space: pre-wrap; |
| font-family: var(--sp-font-mono); |
| background-color: var(--sp-colors-bg-error); |
| } |
| .sp-error-message { |
| -webkit-animation: sp-fade-in 0.15s ease-in; |
| animation: sp-fade-in 0.15s ease-in; |
| color: var(--sp-colors-fg-error); |
| } |
| .sp-devtools { |
| height: var(--sp-layout-height); |
| width: 100%; |
| } |
| .sp-read-only { |
| font-family: var(--sp-font-mono); |
| font-size: 0.8em; |
| position: absolute; |
| right: var(--sp-space-2); |
| bottom: var(--sp-space-2); |
| z-index: 2; |
| color: var(--sp-colors-bg-active); |
| background-color: var(--sp-colors-fg-active); |
| border-radius: 99999px; |
| padding: calc(var(--sp-space-1) / 2) var(--sp-space-2); |
| } |
