From 91b7598b22f89319f64054daf42c950de3eb6451 Mon Sep 17 00:00:00 2001 From: Elizabeth Hunt Date: Wed, 7 Jan 2026 19:29:30 -0800 Subject: Adding some of my favorite toys --- src/toys/turing/css/styles.css | 66 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 src/toys/turing/css/styles.css (limited to 'src/toys/turing/css/styles.css') diff --git a/src/toys/turing/css/styles.css b/src/toys/turing/css/styles.css new file mode 100644 index 0000000..2407cb4 --- /dev/null +++ b/src/toys/turing/css/styles.css @@ -0,0 +1,66 @@ +.tape { + display: flex; + gap: 0.25rem; + padding: var(--space-md); + overflow-x: auto; + background: var(--surface-alt); + border: var(--border-width) solid var(--border); + box-shadow: inset 1px 1px 0 var(--border-light), + inset -1px -1px 0 var(--border-dark); + min-height: 5rem; +} + +.cell { + position: relative; + width: 3.25rem; + padding: var(--space-xs); + background: var(--surface); + border: 2px solid var(--border-dark); + box-shadow: inset 1px 1px 0 var(--border-light), + inset -1px -1px 0 var(--border-dark); + flex-shrink: 0; +} + +.cell input { + width: 100%; + text-align: center; + border: none; + background: transparent; + font-family: var(--font-mono); + color: var(--fg); + font-size: 0.875rem; + padding: 0.25rem; +} + +.cell input:focus { + outline: 1px dotted var(--fg); + outline-offset: 2px; +} + +.cell.active { + border-color: var(--primary); + background: color-mix(in srgb, var(--primary) 15%, var(--surface)); +} + +.cell.active::after { + content: '▲'; + position: absolute; + bottom: -1.5rem; + left: 50%; + transform: translateX(-50%); + color: var(--primary); + font-size: 1rem; + line-height: 1; +} + +#state-text { + font-family: var(--font-mono); + font-weight: 700; + margin-top: var(--space-md); +} + +.controls { + display: flex; + gap: var(--space-sm); + flex-wrap: wrap; +} -- cgit v1.2.3-70-g09d2