/* py-config - not a component */ py-config { display: none; } /* py-{el} - components not defined */ py-script:not(:defined) { display: none; } py-repl:not(:defined) { display: none; } py-title:not(:defined) { display: none; } py-inputbox:not(:defined) { display: none; } py-button:not(:defined) { display: none; } py-box: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%; } /* Pop-up second layer end */ .alert-banner { position: relative; padding: 0.5rem 1.5rem 0.5rem 0.5rem; margin: 5px 0; } .alert-banner p { margin: 0; } .py-error { background-color: #ffe9e8; border: solid; border-color: #f0625f; color: #9d041c; } .py-warning { background-color: rgb(255, 244, 229); border: solid; border-color: #ffa016; color: #794700; } .alert-banner.py-error > #alert-close-button { color: #9d041c; } .alert-banner.py-warning > #alert-close-button { color: #794700; } #alert-close-button { position: absolute; right: 0.5rem; top: 0.5rem; cursor: pointer; background: transparent; border: none; } .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; } .py-repl-editor { --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; } .py-repl-run-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; } .py-repl-run-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; 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; cursor: pointer; } .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; } .line-through { text-decoration: line-through; } /* ===== py-terminal plugin ===== */ /* XXX: it would be nice if these rules were stored in e.g. pyterminal.css and bundled together at build time (by rollup?) */ .py-terminal { min-height: 10em; background-color: black; color: white; padding: 0.5rem; overflow: auto; } .py-terminal-hidden { display: none; }