Something went wrong. Try again.
All-purpose web tiles library
Something went wrong. Try again.
2.4 kB · 57 lines
CSS
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758/* Blastile on supram: the elements render into the light DOM and wear supram's classes; this is the little that is Blastile's own. Unlayered, so it wins over supram's layers. */
blastile-app, tile-card, tile-frame, data-console { display: block; }blastile-app > .page { min-height: 100vh; }
/* text fields, in supram's voice */.field { font: inherit; font-size: var(--text-sm); padding: 0.4rem 0.6rem; border: 1px solid var(--hairline); border-radius: 2px; background: var(--bg); color: var(--fg);}.field:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }.field.mono, .mono { font-family: var(--font-mono); }.grow { flex: 1 1 16rem; min-width: 0; }.break { overflow-wrap: anywhere; }.pre { white-space: pre-wrap; }.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* a .tile dropped anywhere on the page */.drop { outline: 3px dashed var(--accent); outline-offset: -6px; }
/* the tile itself */tile-frame .mount iframe { display: block; width: 100%; border: 0; background: var(--bg); }tile-frame[fill] { height: 100%; }tile-frame[fill] .mount, tile-frame[fill] .mount iframe { height: 100%; }.card > tile-frame { margin: 0 calc(-1 * var(--space-3)); border-top: 1px solid var(--hairline); }
/* a tile viewer window */.viewer { height: 100vh; display: flex; flex-direction: column; }.viewer tile-frame { flex: 1; min-height: 0; }
/* the tp-data console */.console { padding: var(--space-1) var(--space-2); max-height: 260px; }.card > data-console { margin: 0 calc(-1 * var(--space-3)); border-top: 1px solid var(--hairline); }.console-log { font-family: var(--font-mono); max-height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.15rem; min-height: 3rem;}.console-log .entry { display: flex; gap: 0.5rem; align-items: baseline; }.console-log .at { color: var(--muted); font-size: var(--text-xs); white-space: nowrap; }.console-log .dir { width: 3.6rem; flex: none; font-size: var(--text-xs); white-space: nowrap; }.console-log .up .dir { color: var(--emerald-text); }.console-log .down .dir { color: var(--cobalt-text); }.console-log .info .dir { color: var(--amber-text); }.console-log .body { overflow-wrap: anywhere; white-space: pre-wrap; }.console textarea.field { resize: vertical; min-height: 2.2rem; }