+ this.innerHTML = `
`;
this.mount_name = this.id.split('-').join('_');
this.operation = document.getElementById('pyscript-operation');
diff --git a/pyscriptjs/src/components/pyrepl.ts b/pyscriptjs/src/components/pyrepl.ts
index 9987f83400c..485c2141227 100644
--- a/pyscriptjs/src/components/pyrepl.ts
+++ b/pyscriptjs/src/components/pyrepl.ts
@@ -55,7 +55,7 @@ export class PyRepl extends BaseEvalElement {
// add an extra div where we can attach the codemirror editor
this.editorNode = document.createElement('div');
- addClasses(this.editorNode, ['editor-box', 'border', 'border-gray-300', 'group', 'relative']);
+ addClasses(this.editorNode, ['editor-box']);
this.shadow.appendChild(this.wrapper);
}
@@ -88,7 +88,7 @@ export class PyRepl extends BaseEvalElement {
});
const mainDiv = document.createElement('div');
- addClasses(mainDiv, ['parentBox', 'flex', 'flex-col', 'mt-2', 'mx-8', 'relative']);
+ addClasses(mainDiv, ['py-repl-box']);
// Styles that we use to hide the labels whilst also keeping it accessible for screen readers
const labelStyle = 'overflow:hidden; display:block; width:1px; height:1px';
@@ -110,7 +110,7 @@ export class PyRepl extends BaseEvalElement {
this.btnRun.id = 'btnRun';
this.btnRun.innerHTML =
'
';
- addClasses(this.btnRun, ['absolute', 'right-1', 'bottom-1', 'opacity-0', 'group-hover:opacity-100']);
+ addClasses(this.btnRun, ['absolute', 'repl-play-button']);
// Play Button Label
const btnLabel = document.createElement('label');
@@ -148,7 +148,7 @@ export class PyRepl extends BaseEvalElement {
// In this case neither output or std-out have been provided so we need
// to create a new output div to output to
this.outputElement = document.createElement('div');
- this.outputElement.classList.add('output', 'font-mono', 'ml-8', 'text-sm');
+ this.outputElement.classList.add('output');
this.outputElement.hidden = true;
this.outputElement.id = this.id + '-' + this.getAttribute('exec-id');
diff --git a/pyscriptjs/src/components/pyscript.ts b/pyscriptjs/src/components/pyscript.ts
index 11073d21ac8..4b7e259731a 100644
--- a/pyscriptjs/src/components/pyscript.ts
+++ b/pyscriptjs/src/components/pyscript.ts
@@ -40,7 +40,7 @@ export class PyScript extends BaseEvalElement {
this.innerHTML = '';
const mainDiv = document.createElement('div');
- addClasses(mainDiv, ['parentBox', 'flex', 'flex-col', 'mx-8']);
+ addClasses(mainDiv, ['output']);
// add Editor to main PyScript div
if (this.hasAttribute('output')) {
diff --git a/pyscriptjs/src/components/pytitle.ts b/pyscriptjs/src/components/pytitle.ts
index ba9687d382c..1c2ce4bd2c9 100644
--- a/pyscriptjs/src/components/pytitle.ts
+++ b/pyscriptjs/src/components/pytitle.ts
@@ -20,8 +20,7 @@ export class PyTitle extends BaseEvalElement {
const mainDiv = document.createElement('div');
const divContent = document.createElement('h1');
- addClasses(mainDiv, ['text-center', 'w-full', 'mb-8']);
- addClasses(divContent, ['text-3xl', 'font-bold', 'text-gray-800', 'uppercase', 'tracking-tight']);
+ addClasses(mainDiv, ['py-title']);
divContent.innerHTML = this.label;
mainDiv.id = this.id;
diff --git a/pyscriptjs/src/main.ts b/pyscriptjs/src/main.ts
index f4570a18d98..95123d758c3 100644
--- a/pyscriptjs/src/main.ts
+++ b/pyscriptjs/src/main.ts
@@ -1,4 +1,5 @@
import App from './App.svelte';
+import './styles/pyscript_base.css';
import { PyScript } from './components/pyscript';
import { PyRepl } from './components/pyrepl';
diff --git a/pyscriptjs/src/pyscript.py b/pyscriptjs/src/pyscript.py
index 3fdf57a8d33..b22024d1a33 100644
--- a/pyscriptjs/src/pyscript.py
+++ b/pyscriptjs/src/pyscript.py
@@ -262,15 +262,15 @@ def register_parent(self, parent):
def create(self):
console.log("creating section")
- new_child = create("section", self._id, "task bg-white my-1")
+ new_child = create("div", self._id, "py-li-element")
console.log("creating values")
console.log("creating innerHtml")
new_child._element.innerHTML = dedent(
f"""
-