From 18ceb80e3f27799747749115cb00c65df4420abf Mon Sep 17 00:00:00 2001 From: disconcision Date: Sun, 15 Dec 2024 22:17:15 -0500 Subject: [PATCH] accidentally a dir --- src/haz3lweb/www/style/projectors/base.css | 181 ++++++++++++++++++++ src/haz3lweb/www/style/projectors/panel.css | 29 ++++ src/haz3lweb/www/style/projectors/probe.css | 136 +++++++++++++++ 3 files changed, 346 insertions(+) create mode 100644 src/haz3lweb/www/style/projectors/base.css create mode 100644 src/haz3lweb/www/style/projectors/panel.css create mode 100644 src/haz3lweb/www/style/projectors/probe.css diff --git a/src/haz3lweb/www/style/projectors/base.css b/src/haz3lweb/www/style/projectors/base.css new file mode 100644 index 0000000000..49735cd2b5 --- /dev/null +++ b/src/haz3lweb/www/style/projectors/base.css @@ -0,0 +1,181 @@ +/* PROJECTORS */ + +@import "panel.css"; +@import "probe.css"; + +/* Turn off caret when a block projector is focused */ +#caret:has(~ .projectors .projector.block *:focus) { + display: none; +} + +/* Default projector styles */ + +.projector { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + color: var(--BR2); +} + +.projector > *:not(svg) { + z-index: var(--projector-z); +} + +.projector > svg { + z-index: var(--projector-backing-z); + fill: var(--shard_projector); +} + +.projector.block > svg { + stroke-width: 0.5px; + stroke: var(--BR2); +} + +.projector.indicated > svg { + fill: var(--shard-caret-exp); +} + +.projector > svg > path { + vector-effect: non-scaling-stroke; +} + +.projector.block.selected > svg > path { + vector-effect: non-scaling-stroke; + stroke: var(--Y3); +} + +.projector.selected > svg, +.projector.selected.indicated > svg, +.projector.block.selected.indicated > svg { + fill: var(--shard-selected); +} + +/* PROJECTOR: FOLD */ + +.projector.fold:hover, +.projector.indicated.fold { + color: --var(BLACK); +} +.projector.fold { + cursor: pointer; + font-family: var(--code-font); +} + +.result .projector.fold { + cursor: default; +} + +/* PROJECTOR: INFO */ + +.projector.type .type { + color: var(--token-typ); +} +.projector.type { + cursor: pointer; +} +.projector.type .info { + display: flex; +} +.projector.type:hover { + color: var(--BLACK); +} + +/* PROJECTOR: CHECKBOX */ + +.projector.check input { + margin: 0; + filter: sepia(1); + cursor: pointer; + outline: none; +} +.projector.check:not(.indicated):not(:hover) > svg { + fill: var(--NONE); +} + +/* PROJECTOR: SLIDERS (INT & FLOAT) */ + +.projector.slider input, +.projector.sliderf input { + margin: 0; + filter: sepia(1); + cursor: pointer; + outline: none; + width: 90%; +} +.projector.slider:not(.indicated):not(:hover) > svg, +.projector.sliderf:not(.indicated):not(:hover) > svg { + fill: var(--NONE); +} + +/* PROJECTOR: TEXTAREA */ + +.projector.text { + cursor: default; +} + +.projector.text .wrapper { + height: 100%; + width: 100%; + border-radius: 0.1em; +} + +.projector.text.indicated .cols, +.projector.text:has(textarea:focus) .cols { + color: var(--R1); +} + +.projector.text.indicated > svg { + fill: var(--textarea-indicated); +} + +.projector.text .cols { + height: 100%; + margin-left: 2px; + margin-right: 2px; + display: flex; + border-radius: 0 0.1em 0.1em 0.1em; + color: var(--SAND); + background: repeating-linear-gradient( + var(--NONE), + var(--NONE) 1.41em, + var(--textarea-h-stripe) 1.41em, + var(--textarea-h-stripe) 1.47em /* line-height */ + ); +} + +.projector.text.selected .cols { + background: repeating-linear-gradient( + var(--NONE), + var(--NONE) 1.41em, + var(--textarea-h-strip-selected) 1.41em, + var(--textarea-h-strip-selected) 1.47em /* line-height */ + ); +} +.projector.text.selected > svg { + z-index: 9; +} + +.projector.text textarea { + outline: none; + resize: none; + width: 100%; + caret-color: var(--caret-color); + padding: 0; + margin: 0; + margin-left: -2px; + line-height: var(--line-height); + font-family: var(--code-font); + font-size: inherit; + border: none; + color: var(--textarea-text); + background: none; + box-shadow: inset 1px 0 0 var(--textarea-v-stripe); + overflow: hidden; /* hack: scrolls in chrome without this? */ +} + +.projector.text textarea::selection { + color: var(--BLACK); + background-color: var(--shard-selected); +} + diff --git a/src/haz3lweb/www/style/projectors/panel.css b/src/haz3lweb/www/style/projectors/panel.css new file mode 100644 index 0000000000..77c184bf59 --- /dev/null +++ b/src/haz3lweb/www/style/projectors/panel.css @@ -0,0 +1,29 @@ +/* PROJECTORS PANEL */ + +#projectors { + display: flex; + gap: 0.75em; + align-items: center; + padding-left: 0.75em; + padding-right: 0.75em; + white-space: nowrap; + border-radius: 1.1em 0 0 0; + outline: 0.3px solid var(--BR2); +} + +#projectors img { + width: 0.7em; +} + +#projectors option { + font-size: 1em; +} + +#projectors .toggle-switch { + display: flex; + align-items: center; +} + +#projectors .toggle-switch.inactive { + opacity: 40%; +} diff --git a/src/haz3lweb/www/style/projectors/probe.css b/src/haz3lweb/www/style/projectors/probe.css new file mode 100644 index 0000000000..60e747dc38 --- /dev/null +++ b/src/haz3lweb/www/style/projectors/probe.css @@ -0,0 +1,136 @@ +/* Probe Projector */ + +.projector.probe { + font-family: var(--code-font); + font-size: var(--base-font-size); + color: var(--STONE); +} + +.projector.probe > svg { + fill: #c7e6c6; + filter: drop-shadow(0.7px 0.7px 0px green); +} + +.projector.probe .main { + display: flex; + flex-direction: row; + gap: 0.4em; + cursor: pointer; + align-items: center; +} + +@keyframes rotate { + to { + transform: rotate(360deg); + } +} +.projector.probe .live-offside:empty + * .icon { + animation: rotate 5s linear infinite; +} + +.projector.probe .num-closures { + position: absolute; + right: -0.5em; + top: -0.3em; + transform-origin: top right; + scale: 0.6; + color: oklch(1 0 0); + font-family: var(--ui-font); + display: flex; + justify-content: center; + background-color: var(--G0); + border-radius: 2em; + font-size: 0.7em; + padding: 0.3em; + min-width: 1em; + z-index: var(--code-emblems-z); +} +.projector.probe.selected .num-closures { + background-color: var(--Y1); +} + +.projector.probe .live-offside { + display: flex; + flex-direction: row; + position: absolute; + left: 10em; + gap: 0.15em; +} + +.projector.probe .live-offside:empty { + display: none; +} + +.projector.probe .closure:hover .live-env:empty { + display: none; +} + +.projector.probe .val-resize { + cursor: pointer; +} + +.projector.probe .val-resize .code-text { + background-color: #c7e6c6; /* TODO(andrew) */ + border-radius: 0.4em 0.1em 0.1em 0.1em; + filter: drop-shadow(0.7px 0.7px 0px green); +} +.projector.probe .closure:first-child .val-resize:hover .code-text { + cursor: col-resize; +} +.projector.probe .val-resize.cursor .code-text { + outline: 1.6px solid var(--G0); + outline-style: dotted; + filter: none; + opacity: 100%; +} + +.projector.probe .val-resize .code-text { + opacity: 40%; +} +.projector.probe .val-resize:not(.cursor) .code-text .token { + filter: saturate(0); +} + +.projector.probe .live-env { + background-color: var(--T3); + border-radius: 0 0.2em 0.2em 0.2em; + padding: 0.2em; + display: none; + position: absolute; + top: 1.5em; + z-index: var(--code-hovers-z); +} + +.projector.probe .live-env .live-env-entry { + display: flex; + flex-direction: row; + gap: 0.3em; + align-items: baseline; + color: var(--GB0); +} + +.projector.probe.indicated > svg { + fill: var(--G0); +} + +.projector.probe.indicated .val-resize .code-text { + opacity: 60%; +} + +.projector.probe.indicated .main { + color: white; +} + +.projector.probe.indicated .val-resize.cursor .code-text { + opacity: 100%; + /* outline: 1px solid var(--GB1); */ + outline: 2.8px solid oklch(0.7 0.15 150.31); +} + +.projector.probe.indicated .closure:hover .live-env { + display: block; +} + +.projector.probe.indicated .closure.cursor .live-env:empty { + display: none; +}