mirror of
https://github.com/eliasstepanik/strudel-docker.git
synced 2026-01-25 12:38:35 +00:00
fix: minirepl styles
This commit is contained in:
parent
9ec3fee455
commit
6f5f8cc7d8
@ -2,7 +2,7 @@ import React from 'react';
|
|||||||
|
|
||||||
export function Icon({ type }) {
|
export function Icon({ type }) {
|
||||||
return (
|
return (
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" className="sc-h-5 sc-w-5" viewBox="0 0 20 20" fill="currentColor">
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||||
{
|
{
|
||||||
{
|
{
|
||||||
refresh: (
|
refresh: (
|
||||||
|
|||||||
@ -101,7 +101,7 @@ export function MiniRepl({ tune, hideOutsideView = false, enableKeyboard, drawTi
|
|||||||
<div className={styles.container} ref={ref}>
|
<div className={styles.container} ref={ref}>
|
||||||
<div className={styles.header}>
|
<div className={styles.header}>
|
||||||
<div className={styles.buttons}>
|
<div className={styles.buttons}>
|
||||||
<button className={cx(styles.button, started ? 'sc-animate-pulse' : '')} onClick={() => togglePlay()}>
|
<button className={cx(styles.button, started ? 'animate-pulse' : '')} onClick={() => togglePlay()}>
|
||||||
<Icon type={started ? 'stop' : 'play'} />
|
<Icon type={started ? 'stop' : 'play'} />
|
||||||
</button>
|
</button>
|
||||||
<button className={cx(isDirty ? styles.button : styles.buttonDisabled)} onClick={() => activateCode()}>
|
<button className={cx(isDirty ? styles.button : styles.buttonDisabled)} onClick={() => activateCode()}>
|
||||||
@ -126,7 +126,7 @@ export function MiniRepl({ tune, hideOutsideView = false, enableKeyboard, drawTi
|
|||||||
></canvas>
|
></canvas>
|
||||||
)}
|
)}
|
||||||
{!!log.length && (
|
{!!log.length && (
|
||||||
<div className="sc-bg-gray-800 sc-rounded-md sc-p-2">
|
<div className="bg-gray-800 rounded-md p-2">
|
||||||
{log.map(({ message }, i) => (
|
{log.map(({ message }, i) => (
|
||||||
<div key={i}>{message}</div>
|
<div key={i}>{message}</div>
|
||||||
))}
|
))}
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
---
|
---
|
||||||
import { MiniRepl } from './MiniRepl';
|
import { MiniRepl } from './MiniRepl';
|
||||||
const { tune } = Astro.props;
|
const { tune } = Astro.props;
|
||||||
import '@strudel.cycles/react/dist/style.css';
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<MiniRepl tune={tune} client:only="react" />
|
<MiniRepl tune={tune} client:only="react" />
|
||||||
|
|||||||
@ -1,5 +1,3 @@
|
|||||||
@import '@strudel.cycles/react/dist/style.css';
|
|
||||||
|
|
||||||
.darken::before {
|
.darken::before {
|
||||||
content: ' ';
|
content: ' ';
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|||||||
@ -1,5 +1,3 @@
|
|||||||
@import '@strudel.cycles/react/dist/style.css';
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: #222;
|
background-color: #222;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,7 +3,10 @@
|
|||||||
const defaultTheme = require('tailwindcss/defaultTheme');
|
const defaultTheme = require('tailwindcss/defaultTheme');
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
content: [
|
||||||
|
'./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
|
||||||
|
'../packages/react/src/**/*.{html,js,jsx,md,mdx,ts,tsx}',
|
||||||
|
],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user