diff --git a/pyscriptjs/src/App.svelte b/pyscriptjs/src/App.svelte index 9d69deaa..05a5a65f 100644 --- a/pyscriptjs/src/App.svelte +++ b/pyscriptjs/src/App.svelte @@ -63,6 +63,17 @@ + + diff --git a/pyscriptjs/src/components/pyrepl.ts b/pyscriptjs/src/components/pyrepl.ts index 5c38e290..51b5140f 100644 --- a/pyscriptjs/src/components/pyrepl.ts +++ b/pyscriptjs/src/components/pyrepl.ts @@ -111,12 +111,12 @@ export class PyRepl extends HTMLElement { }) let mainDiv = document.createElement('div'); - addClasses(mainDiv, ["parentBox", "flex", "flex-col", "border-4", "border-dashed", "border-gray-200", "rounded-lg"]) + addClasses(mainDiv, ["parentBox", "group", "flex", "flex-col", "mt-10", "border-2", "border-gray-200", "rounded-lg"]) // add Editor to main PyScript div // Butons DIV var eDiv = document.createElement('div'); - addClasses(eDiv, "buttons-box relative top-0 right-0 flex flex-row-reverse space-x-reverse space-x-4 font-mono text-white text-sm font-bold leading-6 dev-buttons-group".split(" ")) + addClasses(eDiv, "buttons-box opacity-0 group-hover:opacity-100 relative top-0 right-0 flex flex-row-reverse space-x-reverse space-x-4 font-mono text-white text-sm font-bold leading-6 dev-buttons-group".split(" ")) eDiv.setAttribute("role", "group"); // Play Button @@ -212,7 +212,7 @@ export class PyRepl extends HTMLElement { }else{ output = pyodide.runPython(source); } - + if (output !== undefined){ let Element = pyodide.globals.get('Element'); let out = Element(this.editorOut.id); diff --git a/pyscriptjs/tailwind.config.js b/pyscriptjs/tailwind.config.js index 48a1a220..68e58667 100644 --- a/pyscriptjs/tailwind.config.js +++ b/pyscriptjs/tailwind.config.js @@ -21,7 +21,9 @@ module.exports = { } }, variants: { - extend: {}, + extend: { + display: ['group-hover'] + }, }, plugins: [], };