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: [],
};