mirror of
https://github.com/pyscript/pyscript.git
synced 2025-12-22 19:53:00 -05:00
See you later tailwind (#452)
* start removing tailwind and rebuilding some css * add css to pybox and add class to repl * set output component visibility * replace tailwind class with single component class * add styles to css * replace classes on button * replace classes on input * replace classes in title * replace classes on list * replace classes * add new style file * add list element style * remove tailwind classes from todo example * revert link on examples files * remove tailwind config files * remove commented old code * add missing ;
This commit is contained in:
Fabio Pliger
@@ -1,39 +1,232 @@
|
||||
<style global>
|
||||
.spinner::after {
|
||||
content: '';
|
||||
box-sizing: border-box;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: calc(40% - 20px);
|
||||
left: calc(50% - 20px);
|
||||
border-radius: 50%;
|
||||
}
|
||||
:not(:defined) {
|
||||
display: none
|
||||
}
|
||||
|
||||
.spinner.smooth::after {
|
||||
border-top: 4px solid rgba(255, 255, 255, 1);
|
||||
border-left: 4px solid rgba(255, 255, 255, 1);
|
||||
border-right: 4px solid rgba(255, 255, 255, 0);
|
||||
animation: spinner 0.6s linear infinite;
|
||||
}
|
||||
@keyframes spinner {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
html{
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.label {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: block;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 0.8rem;
|
||||
margin-top: 6rem;
|
||||
.spinner::after {
|
||||
content: '';
|
||||
box-sizing: border-box;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: calc(40% - 20px);
|
||||
left: calc(50% - 20px);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.spinner.smooth::after {
|
||||
border-top: 4px solid rgba(255, 255, 255, 1);
|
||||
border-left: 4px solid rgba(255, 255, 255, 1);
|
||||
border-right: 4px solid rgba(255, 255, 255, 0);
|
||||
animation: spinner 0.6s linear infinite;
|
||||
}
|
||||
@keyframes spinner {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: block;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 0.8rem;
|
||||
margin-top: 6rem;
|
||||
}
|
||||
|
||||
/* Pop-up second layer begin */
|
||||
|
||||
.py-overlay {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
transition: opacity 500ms;
|
||||
visibility: hidden;
|
||||
color: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.py-overlay {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.py-pop-up {
|
||||
text-align: center;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.py-pop-up p {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.py-pop-up a {
|
||||
position: absolute;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 200%;
|
||||
top: 3.5%;
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.py-box{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.py-box div.py-box-child *
|
||||
{
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.py-repl-box{
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.editor-box{
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(209, 213, 219, var(--tw-border-opacity));
|
||||
border-width: 1px;
|
||||
position: relative;
|
||||
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgba(59, 130, 246, 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
position: relative;
|
||||
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgb(209, 213, 219)
|
||||
}
|
||||
|
||||
.editor-box:hover button{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.repl-play-button{
|
||||
opacity: 0;
|
||||
bottom: 0.25rem;
|
||||
right: 0.25rem;
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
-webkit-appearance: button;
|
||||
text-transform: none;
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
margin: 0;
|
||||
text-rendering: auto;
|
||||
letter-spacing: normal;
|
||||
word-spacing: normal;
|
||||
line-height: normal;
|
||||
text-transform: none;
|
||||
text-indent: 0px;
|
||||
text-shadow: none;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
align-items: flex-start;
|
||||
cursor: default;
|
||||
box-sizing: border-box;
|
||||
background-color: -internal-light-dark(rgb(239, 239, 239), rgb(59, 59, 59));
|
||||
margin: 0em;
|
||||
padding: 1px 6px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.repl-play-button:hover{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.py-title{
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.py-title h1{
|
||||
font-weight: 700;
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
|
||||
.py-input{
|
||||
padding: 0.5rem;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(209, 213, 219, var(--tw-border-opacity));
|
||||
border-width: 1px;
|
||||
border-radius: 0.25rem;
|
||||
margin-right: 0.75rem;
|
||||
border-style: solid;
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
|
||||
.central-content{
|
||||
max-width: 20rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
input {
|
||||
text-rendering: auto;
|
||||
color: -internal-light-dark(black, white);
|
||||
letter-spacing: normal;
|
||||
word-spacing: normal;
|
||||
line-height: normal;
|
||||
text-transform: none;
|
||||
text-indent: 0px;
|
||||
text-shadow: none;
|
||||
display: inline-block;
|
||||
text-align: start;
|
||||
appearance: auto;
|
||||
-webkit-rtl-ordering: logical;
|
||||
cursor: text;
|
||||
background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
|
||||
margin: 0em;
|
||||
padding: 1px 2px;
|
||||
border-width: 2px;
|
||||
border-style: inset;
|
||||
border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
|
||||
border-image: initial;
|
||||
}
|
||||
|
||||
.py-button{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(255, 255, 255, var(--tw-text-opacity));
|
||||
padding: 0.5rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(37, 99, 235, var(--tw-bg-opacity));
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(37, 99, 235, var(--tw-border-opacity));
|
||||
border-width: 1px;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
button, input, optgroup, select, textarea {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Pop-up second layer end */
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import Tailwind from './Tailwind.svelte';
|
||||
</script>
|
||||
|
||||
<Tailwind />
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
<style global lang="postcss">
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
</style>
|
||||
@@ -18,7 +18,7 @@ export class PyBox extends HTMLElement {
|
||||
|
||||
connectedCallback() {
|
||||
const mainDiv = document.createElement('div');
|
||||
addClasses(mainDiv, ['flex', 'mx-8']);
|
||||
addClasses(mainDiv, ['py-box']);
|
||||
|
||||
// Hack: for some reason when moving children, the editor box duplicates children
|
||||
// meaning that we end up with 2 editors, if there's a <py-repl> inside the <py-box>
|
||||
@@ -44,17 +44,20 @@ export class PyBox extends HTMLElement {
|
||||
|
||||
// now we need to set widths
|
||||
this.widths = [];
|
||||
|
||||
if (this.hasAttribute('widths')) {
|
||||
for (const w of this.getAttribute('widths').split(';')) {
|
||||
this.widths.push(`w-${w}`);
|
||||
if (w.includes('/')) this.widths.push(w.split('/')[0])
|
||||
else this.widths.push(w)
|
||||
}
|
||||
} else {
|
||||
this.widths = [...this.widths, ...[`w-1/${mainDiv.childNodes.length}`]];
|
||||
this.widths = Array(mainDiv.children.length).fill('1 1 0')
|
||||
}
|
||||
|
||||
this.widths.forEach((width, index) => {
|
||||
const node: ChildNode = mainDiv.childNodes[index];
|
||||
addClasses(node as HTMLElement, [width, 'mx-1']);
|
||||
(<HTMLElement>node).style.flex = width;
|
||||
addClasses((<HTMLElement>node), ['py-box-child']);
|
||||
});
|
||||
|
||||
this.appendChild(mainDiv);
|
||||
|
||||
@@ -13,7 +13,7 @@ export class PyButton extends BaseEvalElement {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.defaultClass = ['p-2', 'text-white', 'bg-blue-600', 'border', 'border-blue-600', 'rounded'];
|
||||
this.defaultClass = ['py-button'];
|
||||
|
||||
if (this.hasAttribute('label')) {
|
||||
this.label = this.getAttribute('label');
|
||||
|
||||
@@ -24,7 +24,7 @@ export class PyInputBox extends BaseEvalElement {
|
||||
|
||||
const mainDiv = document.createElement('input');
|
||||
mainDiv.type = 'text';
|
||||
addClasses(mainDiv, ['border', 'flex-1', 'w-full', 'mr-3', 'border-gray-300', 'p-2', 'rounded']);
|
||||
addClasses(mainDiv, ['py-input']);
|
||||
|
||||
mainDiv.id = this.id;
|
||||
this.id = `${this.id}-container`;
|
||||
|
||||
@@ -14,12 +14,14 @@ export class PyLoader extends BaseEvalElement {
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.innerHTML = `<div id="pyscript_loading_splash" class="fixed top-0 left-0 right-0 bottom-0 w-full h-screen z-50 overflow-hidden bg-gray-600 opacity-75 flex flex-col items-center justify-center">
|
||||
this.innerHTML = `<div id="pyscript_loading_splash" class="py-overlay">
|
||||
<div class="py-pop-up">
|
||||
<div class="smooth spinner"></div>
|
||||
<div id="pyscript-loading-label" class="label">
|
||||
<div id="pyscript-operation-details">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
this.mount_name = this.id.split('-').join('_');
|
||||
this.operation = document.getElementById('pyscript-operation');
|
||||
|
||||
@@ -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 =
|
||||
'<svg id="" class="svelte-fa svelte-ps5qeg" style="height:20px;width:20px;vertical-align:-.125em;transform-origin:center;overflow:visible;color:green" viewBox="0 0 384 512" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><g transform="translate(192 256)" transform-origin="96 0"><g transform="translate(0,0) scale(1,1)"><path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z" fill="currentColor" transform="translate(-192 -256)"></path></g></g></svg>';
|
||||
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');
|
||||
|
||||
|
||||
@@ -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')) {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import App from './App.svelte';
|
||||
import './styles/pyscript_base.css';
|
||||
|
||||
import { PyScript } from './components/pyscript';
|
||||
import { PyRepl } from './components/pyrepl';
|
||||
|
||||
@@ -262,15 +262,15 @@ class PyItemTemplate(Element):
|
||||
|
||||
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"""
|
||||
<label for="flex items-center p-2 ">
|
||||
<label id="{self._id}" for="flex items-center p-2 ">
|
||||
<input class="mr-2" type="checkbox" class="task-check">
|
||||
<p class="m-0 inline">{self.render_content()}</p>
|
||||
<p>{self.render_content()}</p>
|
||||
</label>
|
||||
"""
|
||||
)
|
||||
@@ -304,7 +304,7 @@ class PyItemTemplate(Element):
|
||||
|
||||
|
||||
class PyListTemplate:
|
||||
theme = PyWidgetTheme("flex flex-col-reverse mt-8 mx-8")
|
||||
theme = PyWidgetTheme("py-li-element")
|
||||
item_class = PyItemTemplate
|
||||
|
||||
def __init__(self, parent):
|
||||
|
||||
240
pyscriptjs/src/styles/pyscript_base.css
Normal file
240
pyscriptjs/src/styles/pyscript_base.css
Normal file
@@ -0,0 +1,240 @@
|
||||
:not(:defined) {
|
||||
display: none
|
||||
}
|
||||
|
||||
html{
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.spinner::after {
|
||||
content: '';
|
||||
box-sizing: border-box;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: calc(40% - 20px);
|
||||
left: calc(50% - 20px);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.spinner.smooth::after {
|
||||
border-top: 4px solid rgba(255, 255, 255, 1);
|
||||
border-left: 4px solid rgba(255, 255, 255, 1);
|
||||
border-right: 4px solid rgba(255, 255, 255, 0);
|
||||
animation: spinner 0.6s linear infinite;
|
||||
}
|
||||
@keyframes spinner {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: block;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 0.8rem;
|
||||
margin-top: 6rem;
|
||||
}
|
||||
|
||||
/* Pop-up second layer begin */
|
||||
|
||||
.py-overlay {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
transition: opacity 500ms;
|
||||
visibility: hidden;
|
||||
color: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.py-overlay {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.py-pop-up {
|
||||
text-align: center;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.py-pop-up p {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.py-pop-up a {
|
||||
position: absolute;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 200%;
|
||||
top: 3.5%;
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.py-box{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.py-box div.py-box-child *
|
||||
{
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.py-repl-box{
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.editor-box{
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(209, 213, 219, var(--tw-border-opacity));
|
||||
border-width: 1px;
|
||||
position: relative;
|
||||
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgba(59, 130, 246, 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
position: relative;
|
||||
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgb(209, 213, 219)
|
||||
}
|
||||
|
||||
.editor-box:hover button{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.repl-play-button{
|
||||
opacity: 0;
|
||||
bottom: 0.25rem;
|
||||
right: 0.25rem;
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
-webkit-appearance: button;
|
||||
text-transform: none;
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
margin: 0;
|
||||
text-rendering: auto;
|
||||
letter-spacing: normal;
|
||||
word-spacing: normal;
|
||||
line-height: normal;
|
||||
text-transform: none;
|
||||
text-indent: 0px;
|
||||
text-shadow: none;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
align-items: flex-start;
|
||||
cursor: default;
|
||||
box-sizing: border-box;
|
||||
background-color: -internal-light-dark(rgb(239, 239, 239), rgb(59, 59, 59));
|
||||
margin: 0em;
|
||||
padding: 1px 6px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.repl-play-button:hover{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.py-title{
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.py-title h1{
|
||||
font-weight: 700;
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
|
||||
.py-input{
|
||||
padding: 0.5rem;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(209, 213, 219, var(--tw-border-opacity));
|
||||
border-width: 1px;
|
||||
border-radius: 0.25rem;
|
||||
margin-right: 0.75rem;
|
||||
border-style: solid;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.py-box input.py-input{
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
|
||||
.central-content{
|
||||
max-width: 20rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
input {
|
||||
text-rendering: auto;
|
||||
color: -internal-light-dark(black, white);
|
||||
letter-spacing: normal;
|
||||
word-spacing: normal;
|
||||
line-height: normal;
|
||||
text-transform: none;
|
||||
text-indent: 0px;
|
||||
text-shadow: none;
|
||||
display: inline-block;
|
||||
text-align: start;
|
||||
appearance: auto;
|
||||
-webkit-rtl-ordering: logical;
|
||||
cursor: text;
|
||||
background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
|
||||
margin: 0em;
|
||||
padding: 1px 2px;
|
||||
border-width: 2px;
|
||||
border-style: inset;
|
||||
border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
|
||||
border-image: initial;
|
||||
}
|
||||
|
||||
.py-button{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(255, 255, 255, var(--tw-text-opacity));
|
||||
padding: 0.5rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(37, 99, 235, var(--tw-bg-opacity));
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(37, 99, 235, var(--tw-border-opacity));
|
||||
border-width: 1px;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.py-li-element p{
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.py-li-element p{
|
||||
display: inline;
|
||||
}
|
||||
|
||||
button, input, optgroup, select, textarea {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin: 0;
|
||||
}
|
||||
Reference in New Issue
Block a user