html {
--cursor-busy-light: -webkit-image-set(url(ui/cursors/busy.png) 2x) 12 12, wait;
/* --cursor-busy-dark: -webkit-image-set(url(ui/cursors/busy-dark.png) 2x) 12 12, wait; */
--cursor-semi-busy-light: -webkit-image-set(url(ui/cursors/semi-busy.png) 2x) 2 4, progress;
/* --cursor-semi-busy-dark: -webkit-image-set(url(ui/cursors/semi-busy-dark.png) 2x) 2 4, progress; */
--cursor-busy: var(--cursor-busy-light);
--cursor-semi-busy: var(--cursor-semi-busy-light);
}
/* @media (prefers-color-scheme: dark) {
html {
--cursor-busy: var(--cursor-busy-dark);
--cursor-semi-busy: var(--cursor-semi-busy-dark);
}
} */
.interactions-playground {
/* Force light mode on everything */
--accent: var(--accent-light);
--background: var(--background-light);
--text: var(--text-light);
--text-gray: var(--text-gray-light);
--lighter-gray: var(--lighter-gray-light);
--mid-gray: var(--mid-gray-light);
--light-gray: var(--light-gray-light);
--dark-gray: var(--dark-gray-light);
}
.playground {
--cursor-light: -webkit-image-set(url(ui/cursors/309de7/cursor.png) 2x) 2 4, default;
--cursor-light-pressed: -webkit-image-set(url(ui/cursors/309de7/cursor-pressed.png) 2x) 2 4, default;
--cursor-hand-light: -webkit-image-set(url(ui/cursors/309de7/hand.png) 2x) 10 2, pointer;
--cursor-hand-light-pressed: -webkit-image-set(url(ui/cursors/309de7/hand-pressed.png) 2x) 10 2, pointer;
--cursor-i-beam-light: -webkit-image-set(url(ui/cursors/309de7/i-beam.png) 2x) 7 17, text;
--cursor-i-beam-light-pressed: -webkit-image-set(url(ui/cursors/309de7/i-beam-pressed.png) 2x) 7 17, text;
--cursor-i-beam-small-light: -webkit-image-set(url(ui/cursors/309de7/i-beam-small.png) 2x) 7 14, text;
--cursor-i-beam-small-light-pressed: -webkit-image-set(url(ui/cursors/309de7/i-beam-small-pressed.png) 2x) 7 14, text;
--cursor-busy-light: -webkit-image-set(url(ui/cursors/309de7/busy.png) 2x) 12 12, default;
/* --cursor-busy-light-pressed: -webkit-image-set(url(ui/cursors/309de7/busy-pressed.png) 2x) 12 12, default; */
--cursor-semi-busy-light: -webkit-image-set(url(ui/cursors/309de7/semi-busy.png) 2x) 2 4, default;
/* --cursor-semi-busy-light-pressed: -webkit-image-set(url(ui/cursors/309de7/semi-busy-pressed.png) 2x) 2 4, default; */
/*--cursor-i-beam-large-light: -webkit-image-set(url(ui/cursors/309de7/i-beam-large.png) 2x) 7 21, text;
--cursor-i-beam-large-light-pressed: -webkit-image-set(url(ui/cursors/309de7/i-beam-large-pressed.png) 2x) 7 21, text; */
&, button {
cursor: var(--cursor-light);
}
&:active, button:active {
cursor: var(--cursor-light-pressed);
}
input {
cursor: var(--cursor-i-beam-light);
}
input:active {
cursor: var(--cursor-i-beam-light-pressed);
}
.find-contents,
.find-contents * {
cursor: var(--cursor-i-beam-small-light);
}
.find-contents:active,
.find-contents *:active {
cursor: var(--cursor-i-beam-small-light-pressed);
}
}
.busy,
.busy * {
cursor: var(--cursor-busy-light) !important;
}
.semi-busy,
.semi-busy * {
cursor: var(--cursor-semi-busy-light) !important;
}
.playground-recording-title {
background: hsl(26, 59%, 14%);
background-image: url(/images/show-your-hands-honor/-ui/metal2.avif);
background-size: 100%;
background-repeat: repeat;
width: 100vw !important;
margin-left: calc(-1 * (var(--left-gutter) + var(--margin)));
margin-right: calc(-1 * (var(--right-gutter) + var(--margin)));
color: hsla(var(--settings-hue), 100%, 80%, .85);
font-family: var(--font-selectric-un);
margin-bottom: calc(-1.5 * var(--line-height));
padding-top: calc(.5 * var(--line-height));
padding-bottom: calc(.25 * var(--line-height));
padding-left: var(--margin);
}
.interactions-playground {
/* padding: var(--margin); */
box-sizing: border-box;
display: flex;
/* gap: var(--margin); */
flex-direction: column;
border-radius: 3px;
/* margin-top: var(--margin); */
/* margin-bottom: var(--margin); */
/* background: #2f2f2f; */
background: hsl(26, 59%, 14%);
background-image: url(/images/show-your-hands-honor/-ui/metal2.avif);
background-size: 100%;
background-repeat: repeat;
h5 {
display: inline-block;
color: hsla(var(--settings-hue), 100%, 80%, .85);
font-family: var(--font-selectric-un);
/* background: black; */
/* position: absolute; */
margin-left: 42px;
margin-top: calc(.75 * var(--margin));
margin-bottom: calc(-1.25 * var(--margin));
}
}
.figure-group > .interactions-playground {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
html {
--settings-hue: 32;
}
.playground {
--accent: color(display-p3 0.0898 0.31605 0.990681);
/* --accent: color(display-p3 1.0 0 1.0); */
/* --accent: color(display-p3 0.0 .6 0.0); */
/* --accent: #3f2f2f; */
--accent-shadow: color-mix(in srgb, var(--accent), var(--background) 65%);
--accent-background: color-mix(in srgb, var(--accent), var(--background) 95%);
flex-grow: 1;
display: flex;
flex-direction: column;
background: var(--light-gray);
/* z-index: 80; */
/* outline: .5px solid var(--lighter-gray); */
overflow: clip;
/* margin-top: calc(-1 * var(--margin)); */
/* margin-right: calc(-1 * var(--margin)); */
/* margin-left: calc(-1 * var(--margin)); */
/* margin-bottom: calc(-1 * var(--margin)); */
padding-top: calc(1 * var(--margin));
padding-right: calc(1 * var(--margin));
padding-left: calc(1 * var(--margin));
padding-bottom: calc(1 * var(--margin));
margin-top: 0 !important;
margin-bottom: 0 !important;
margin-left: 42px;
margin-right: 16px;
outline: .5px solid #000000ff;
/* box-shadow: 0 5px 25px rgba(0, 0, 0, .5); */
position: relative;
border-radius: 2px;
&:after {
pointer-events: none;
z-index: 93;
inset: 0;
position: absolute;
content: '';
box-shadow: inset 0 2px 2px #0000004f;
}
.noise {
pointer-events: none;
z-index: 93;
left: 0;
top: 0;
width: 100%;
height: 100%;
position: absolute;
/* background-image:
url(/images/show-your-hands-honor/-ui/noise-white.avif),
url(/images/show-your-hands-honor/-ui/noise-black.avif); */
background-image: url(/images/show-your-hands-honor/-ui/noise-small.png);
background-size: 50%;
opacity: .18;
}
}
/* --------------------------------------------- */
/* Canvas */
.not-ready-yet {
outline: 1px dashed var(--dark-gray);
color: var(--text-gray);
/* margin: calc(-1 * var(--margin)); */
/* height: calc(100% + 2 * var(--margin)); */
display: flex;
align-items: center;
aspect-ratio: var(--aspect-ratio);
box-sizing: border-box;
padding: var(--margin);
font-size: var(--figcaption-font-size);
letter-spacing: .03em;
line-height: 1.2;
font-family: var(--font-selectric-un);
&:before {
content: 'Playground not ready yet: ';
white-space: pre;
}
}
textarea {
height: 100%;
}
.interactive-slider-wrapper {
width: 700px;
height: calc(100% - 80px);
left: 50%;
top: 50%;
translate: -50% -50%;
background: var(--background);
position: absolute;
outline: .5px solid var(--text);
display: flex;
flex-direction: column;
.contents {
flex-grow: 1;
}
.slider-chute {
height: 32px;
padding: 5px;
/* background: yellow; */
/* border-top: .5px solid var(--text); */
user-select: none;
-webkit-user-select: none;
position: relative;
&:before {
content: '';
background: var(--text-gray);
left: 0;
right: 0;
top: 50%;
height: .5px;
position: absolute;
}
.thumb {
background: var(--text-gray);
width: 32px;
height: 32px;
position: absolute;
&.fake-hover {
background: var(--accent);
}
}
}
}
.interactive-menubar {
background: var(--background);
border-top: .5px solid var(--lighter-gray);
border-bottom: .5px solid var(--lighter-gray);
height: 40px;
width: 100%;
position: absolute;
top: -0.5px;
left: 0;
padding-left: calc(24px);
box-sizing: border-box;
display: flex;
user-select: none;
-webkit-user-select: none;
box-shadow: 0 5px 0 var(--accent-shadow);
}
.interactive-menubar .item {
/* font-size: var(--figcaption-font-size); */
letter-spacing: .03em;
line-height: 40px;
font-size: calc(var(--figcaption-font-size) * .75);
font-family: var(--font-pixel-font-17);
color: var(--text);
/* font-family: var(--font-selectric-un); */
padding: 0 12px;
margin-left: -4px;
&.fake-hover,
&.menu-opened,
&:hover {
background: var(--text);
color: var(--background);
}
}
.interactive-menu-floating-item {
margin-left: 0;
position: absolute;
z-index: 1000;
pointer-events: none;
background: var(--accent);
color: var(--background) !important;
b {
color: inherit !important;
}
&.disappear {
transition: opacity 500ms ease-in;
opacity: 0;
animation-duration: 500ms;
animation-name: menu-commit-disappear;
/* animation-timing-function: steps(8, jump-both); */
animation-iteration-count: 1;
}
}
@keyframes menu-commit-disappear {
30% { font-family: var(--font-pixel-font-15); }
60% { font-family: var(--font-pixel-font-12); }
90% { font-family: var(--font-pixel-font-07); }
}
@keyframes springloading-blink {
0.0001% { opacity: 1; }
25% { opacity: 1; }
25.0001% { opacity: .5; }
50% { opacity: .5; }
50.0001% { opacity: 1; }
75% { opacity: 1; }
75.0001% { opacity: .5; }
100% { opacity: .5; }
}
.interactive-menu {
outline: .5px solid var(--lighter-gray);
background: var(--background);
box-shadow: 5px 5px 0 var(--accent-shadow);
-webkit-user-select: none;
-webkit-touch-callout: none;
user-select: none;
touch-action: none;
}
.interactive-menu .item,
.interactive-menu-floating-item {
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
touch-action: none;
color: var(--text);
font-size: calc(var(--figcaption-font-size) * .75);
font-family: var(--font-pixel-font-17);
/* font-size: var(--figcaption-font-size); */
letter-spacing: .03em;
line-height: 40px;
/* font-family: var(--font-selectric-un); */
padding: 0 12px;
padding-right: 50px;
white-space: nowrap;
border-bottom: .5px solid var(--lighter-gray);
&.disabled {
color: var(--text-gray);
}
b {
font-weight: normal;
color: var(--accent);
}
&.fake-hover,
&:not(.disabled):not(.manual-hover):hover,
&.selected {
background: var(--text);
color: var(--background);
b {
color: var(--accent-shadow);
}
}
}
.playground.top-menu .interactive-menu {
position: absolute;
top: 39.5px;
}
.streaming {
display: flex;
flex-direction: row;
gap: var(--margin);
.reload {
position: absolute;
z-index: 85;
bottom: calc(var(--margin) / 2);
left: 50%;
transform: translateX(-50%);
width: 48px;
height: 48px;
outline: .5px solid var(--accent);
background: var(--background);
box-shadow: 5px 5px 0 var(--accent-shadow);
&:after {
content: '';
position: absolute;
inset: 0;
background: red;
mask-repeat: no-repeat;
mask-size: 50%;
mask-position: 50% 50%;
mask-image: url(ui/buttons/reload.svg);
background: var(--text);
}
&:active:after {
top: 4px;
}
}
.window {
flex-grow: 1;
.title {
padding-left: calc(var(--margin) / 2);
}
.contents {
/* font-size: calc(var(--figcaption-font-size) * .85); */
font-size: calc(var(--figcaption-font-size) * .6);
font-family: var(--font-pixel-font-17);
line-height: 1.7;
padding: calc(var(--margin) / 2);
color: var(--text);
&.invisible {
opacity: 0;
}
.rotator {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
p {
hyphens: none;
text-justify: none;
margin-bottom: .5em;
}
.cursor {
position: absolute;
background: var(--accent);
width: 2px;
height: 1.5em;
}
}
}
}
.chrome {
height: 100%;
.title {
height: 29px !important;
}
.tab-bar {
position: absolute;
/* outline: 1px solid red; */
left: 0;
right: 0;
z-index: 85;
top: 1.5px;
height: 40px;
padding-left: 97px;
padding-top: 8px;
/* padding-top: 8px; */
/* gap: 8px; */
box-sizing: border-box;
/* border-bottom: .5px solid var(--accent); */
display: flex;
flex-direction: row;
overflow: clip;
.add-new-tab {
background: white;
margin-left: 4px;
margin-top: 4px;
position: absolute;
/* left: -100px; */
mask-image: url(ui/buttons/plus.svg);
transition: left var(--bezier) 200ms, margin var(--bezier) 200ms;
}
&.dragging .add-new-tab {
margin-top: 36px;
}
}
.toolbar {
position: absolute;
left: 0;
right: 0;
top: 42px;
height: 40px;
padding: 8px;
gap: 6px;
box-sizing: border-box;
border-bottom: .5px solid var(--accent);
display: flex;
flex-direction: row;
.url-bar {
flex-grow: 1;
width: 100%;
height: 100%;
outline: .5px solid var(--accent);
font-size: calc(var(--figcaption-font-size) * .75);
padding-left: 8px;
line-height: 23px;
letter-spacing: .03em;
font-family: var(--font-pixel-font-15);
color: var(--text);
}
.icon:disabled {
background: var(--accent-shadow);
}
.stop-reload-button {
/* margin-left: 4px; */
margin-right: 3px;
&.reload {
mask-image: url(ui/buttons/reload.svg);
}
}
}
.contents {
top: 82px !important;
/* background: red; */
.logo-wrapper {
overflow: clip;
inset: 24px;
position: absolute;
filter: drop-shadow(5px 5px 0 var(--accent-shadow));
}
.logo {
position: absolute;
inset: 0;
background-size: fit;
background-position: 50% 50%;
background-repeat: no-repeat;
}
&.empty {
/* background: red; */
&:after {
position: absolute;
inset: 0;
content: 'You achieved tab zero! Go outside maybe!!!';
box-sizing: border-box;
padding: var(--margin);
color: var(--accent-shadow);
background-image: linear-gradient(var(--accent-background) .5px, var(--background) 0);
background-size: 16px 8px;
font-size: calc(var(--figcaption-font-size) * .75);
line-height: 1.2;
font-family: var(--font-pixel-font-15);
}
}
}
}
.chrome-tab {
font-size: calc(var(--figcaption-font-size) * .75);
box-sizing: border-box;
/* letter-spacing: .03em; */
line-height: 1;
/* font-family: var(--font-selectric-un); */
font-family: var(--font-pixel-font-15);
border-left: .5px solid white;
border-right: .5px solid white;
border-top: .5px solid white;
margin-right: 0;
padding-top: 6px;
padding-bottom: 6px;
background: var(--accent);
color: white;
user-select: none;
position: absolute;
/* overflow: clip; */
margin-top: 5px;
/* height: calc(100% - 5px); */
/* border-bottom: .5px solid var(--accent); */
/* Temporary */
padding-left: 0;
padding-right: 0;
margin-right: 0;
transform: translateY(32px);
display: flex;
flex-direction: row;
&.raised-up {
transition: left var(--bezier) 200ms, width var(--bezier) 200ms, padding var(--bezier) 200ms, margin-right var(--bezier) 200ms, transform var(--bezier) 300ms;
padding-left: 8px;
padding-right: 8px;
margin-right: 4px;
transform: translateY(0);
}
&.lowered-down {
transition: transform ease-out 250ms;
transform: translateY(32px);
}
.name {
height: 2em;
flex-grow: 1;
flex-shrink: 1;
white-space: nowrap;
text-overflow: ellipsis;
overflow: clip;
min-width: 0;
}
.progress-bar {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 0;
height: 100%;
z-index: -1;
background: color-mix(in srgb, var(--accent-shadow), var(--accent) 50%);
transition: width var(--bezier) 100ms;
&.disappear {
transition: opacity 500ms !important;
transform-origin: 0 0;
opacity: 0;
}
}
&.selected .progress-bar {
top: -.5px;
left: -.5px;
right: -.5px;
background: var(--accent-shadow);
}
.close-tab {
display: inline-block;
/* position: absolute; */
/* top: 14px; */
/* right: 0; */
margin-top: -4px;
/* margin-top: -14px; */
width: 14px;
flex-shrink: 0;
flex-grow: 0;
background: white;
}
&.selected {
z-index: 85;
margin-top: 0;
height: 32px;
/* border-bottom: none; */
background: white;
border-color: transparent;
color: var(--accent);
line-height: 1.2;
.close-tab {
background: var(--accent);
}
&.left-behind {
opacity: 0;
}
&.ghost {
position: absolute;
z-index: 89;
left: 0;
top: 0;
transition: none;
pointer-events: none;
&.animate-to-end {
transition: left ease-out 100ms;
}
.progress-bar {
display: none;
}
}
}
}
.chrome:not(.tab-dragging) .tab-bar .chrome-tab:not(.selected):hover {
background: var(--accent-shadow);
color: var(--accent);
border-color: var(--accent-shadow);
.close-tab {
background: var(--accent);
}
}
.chrome .tabs.tight .chrome-tab {
/* opacity: .5; */
.name {
text-overflow: clip;
}
}
.commits {
position: absolute;
left: 0;
top: 160px;
/* outline: 1px solid red; */
width: 440px;
display: flex;
flex-direction: row;
gap: calc(var(--margin) / 2);
flex-wrap: wrap;
z-index: -1;
.desktop-icon {
position: relative;
flex-grow: 0;
}
}
.main-input-wrapper .rotator {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
display: none;
&.visible {
display: block;
}
}
.sayt-results {
/* max-width: 100%; */
/* overflow: clip; */
position: absolute;
.interactive-menu .item,
.interactive-menu-floating-item {
padding-right: 12px;
text-overflow: ellipsis;
overflow: hidden;
}
}
.poetry-output {
position: absolute;
left: 40px;
top: 40px;
height: 80px;
right: 40px;
background: var(--background);
border: .5px solid var(--text-gray);
/* font-size: calc(var(--figcaption-font-size) * 2);
letter-spacing: .03em;
font-family: var(--font-selectric-un); */
font-family: var(--font-pixel-font-22);
font-size: 32px;
color: var(--text);
line-height: 80px;
box-sizing: border-box;
padding-left: 20px;
padding-right: 20px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
/* line-height: 1.5em; */
}
.interactive-button {
position: absolute;
/* cursor: pointer; */
border: .5px solid var(--accent);
padding: 5px 16px 3px 16px;
background: var(--background);
margin-bottom: -.5px;
color: var(--accent);
display: block;
user-select: none;
font-size: calc(var(--figcaption-font-size) * .75);
line-height: 1.2;
font-family: var(--font-pixel-font-15);
/* font-size: var(--figcaption-font-size);
letter-spacing: .03em;
font-family: var(--font-selectric-un); */
line-height: 25px;
user-select: none;
-webkit-user-select: none;
white-space: nowrap;
box-sizing: border-box;
&.fake-hover {
cursor: var(--cursor-hand-light);
background: var(--accent);
color: var(--background);
}
&.fake-active {
cursor: var(--cursor-hand-light-pressed);
border-color: var(--text);
background: var(--text);
}
}
.desktop-icon.cancel-drag-animation,
.window.cancel-drag-animation,
.window-shadow.cancel-drag-animation {
transition: left 200ms var(--bezier), top 200ms var(--bezier) !important;
}
.window-target {
position: absolute;
pointer-events: none;
z-index: 10;
&:before {
content: '';
position: absolute;
inset: 0;
border: 1px dashed var(--accent);
clip-path: polygon(0% 0%, 0% 100%, 15px 100%, 15px 15px, 100% 15px, 100% 0%, 0% 0%);
}
&:after {
content: '';
position: absolute;
inset: 0;
transform: translate(14px, 14px);
border: 1px dashed var(--accent);
clip-path: polygon(15px calc(100% - 15px), 0 calc(100% - 15px), 0 100%, 100% 100%, 100% 0, calc(100% - 15px) 0);
}
}
.window {
&.not-on-canvas {
position: relative;
padding: 16px;
background: var(--background);
box-shadow: 15px 15px 0 var(--accent-shadow);
/* overflow: clip; */
&:has(.title) {
padding-top: 40px;
}
}
&:before {
pointer-events: none;
content: '';
outline: .5px solid var(--lighter-gray);
position: absolute;
inset: 0;
}
&.focused:before,
&.springloading:before {
outline-color: var(--accent);
}
&.focused:after,
&.springloading:after {
left: 15px;
top: 15px;
right: -5px;
bottom: -5px;
}
> .title {
position: absolute;
left: 0;
top: 0;
right: 0;
user-select: none;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
height: 1.13em;
padding-right: 20px;
color: var(--text);
font-size: calc(var(--figcaption-font-size) * .75);
line-height: 1.2;
font-family: var(--font-pixel-font-15);
/* color: var(--text-gray); */
/* letter-spacing: .03em; */
/* font-family: var(--font-selectric-un); */
padding: calc(var(--margin) / 6) calc(var(--margin) / 4);
border-bottom: .5px solid var(--accent-shadow);
}
&.focused > .title {
background: var(--accent);
color: var(--background);
border-bottom-color: var(--accent);
}
.close-box {
position: absolute;
right: 0;
top: 0;
width: 27px;
height: 27px;
background: var(--text);
&:active {
top: 2px;
}
}
&.focused > .close-box {
background: var(--background);
}
.contents {
position: absolute;
top: 27px;
left: 0;
right: 0;
bottom: 0;
overflow: clip;
&.not-fake-loaded-yet {
background: none !important;
mask: none !important;
}
.fake-loading {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.progress-bar {
width: calc(100% - 2px);
height: 20px;
outline: .5px solid var(--accent);
box-sizing: border-box;
padding: 5px;
position: relative;
margin-bottom: 5px;
.progress {
position: absolute;
left: 5px;
top: 5px;
height: calc(100% - 10px);
background: var(--accent);
}
}
.progress-status {
display: flex;
flex-direction: row;
width: 100%;
}
.progress-value,
.progress-time {
flex-grow: 1;
font-size: calc(var(--figcaption-font-size) * .6);
line-height: 1.2;
font-family: var(--font-pixel-font-12);
}
.progress-time {
text-align: right;
}
}
}
&[data-type='logo'] .contents {
top: calc(27px + 20px);
left: 20px;
right: 20px;
bottom: 20px;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: 50% 50%;
mask-image: var(--logo);
background: var(--text);
}
&[data-preview-type='logo'] .contents {
position: absolute;
inset: 20px;
overflow: visible;
&:before {
content: '';
position: absolute;
inset: 0;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: 50% 50%;
mask-image: var(--logo);
background: var(--accent);
z-index: 2;
}
&:after {
content: '';
position: absolute;
inset: 0;
transform: translate(5px, 5px);
mask-repeat: no-repeat;
mask-size: contain;
mask-position: 50% 50%;
mask-image: var(--logo);
background: var(--accent-shadow);
z-index: 1;
}
}
&[data-preview-type='folder'] .contents {
&:before {
content: '';
width: 48px;
height: 48px;
display: block;
background: url(/images/show-your-hands-honor/-ui/folder.svg);
}
inset: 20px;
/* background: red; */
font-size: calc(var(--figcaption-font-size) * .75);
/* font-family: var(--font-pixel-font-17); */
line-height: 1.4;
font-family: var(--font-pixel-font-12);
}
}
.rotator {
width: 24px;
height: 24px;
/* outline: 1px solid red; */
position: relative;
overflow: clip;
/* border: .5px solid var(--accent-shadow); */
box-sizing: content-box;
--speed: 800ms;
&:before {
content: '';
position: absolute;
left: 0;
height: .5px;
width: 24px;
background: var(--accent);
animation-duration: var(--speed);
animation-name: rotator-h;
animation-iteration-count: infinite;
animation-timing-function: var(--bezier);
animation-fill-mode: both;
}
&:after {
content: '';
position: absolute;
top: 0;
width: .5px;
height: 24px;
background: var(--accent);
animation-duration: var(--speed);
animation-name: rotator-v;
animation-iteration-count: infinite;
animation-timing-function: var(--bezier);
animation-fill-mode: both;
animation-delay: calc(var(--speed) / 4);
}
}
@keyframes rotator-h {
0.000001% { transform: translateX(-25%); top: 0; }
25% { transform: translateX(0); top: 0; }
50% { transform: translateX(25%); top: 0; }
50.000001% { transform: translateX(25%); top: calc(100% - .5px); }
75% { transform: translateX(0); top: calc(100% - .5px); }
100% { transform: translateX(-25%); top: calc(100% - .5px); }
}
@keyframes rotator-v {
0.000001% { transform: translateY(-25%); right: 0; }
25% { transform: translateY(0); right: 0; }
50% { transform: translateY(25%); right: 0; }
50.000001% { transform: translateY(25%); right: calc(100% - .5px); }
75% { transform: translateY(0); right: calc(100% - .5px); }
100% { transform: translateY(-25%); right: calc(100% - .5px); }
}
.loading-shield {
position: absolute;
inset: 0;
background: var(--accent-shadow);
color: var(--text);
z-index: 10000000000;
display: flex;
align-items: center;
justify-content: center;
font-size: calc(var(--figcaption-font-size) * .6);
line-height: 1.2;
font-family: var(--font-pixel-font-12);
}
.preview-rectangle {
position: absolute;
outline: .5px solid var(--accent);
z-index: 9999999999;
}
.desktop-background {
background: var(--accent-background);
background-image: linear-gradient(var(--accent-shadow) .5px, transparent 0);
background-size: 16px 8px;
}
.desktop-icon {
position: absolute;
z-index: 10;
inset: 0;
&[data-type="folder"] {
background: url(/images/show-your-hands-honor/-ui/folder.svg);
}
&[data-type="logo"]:after {
content: '';
position: absolute;
inset: 0;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: 50% 50%;
mask-image: var(--logo);
background: var(--text);
}
/* background: var(--background); */
&.focused,
&.springloading {
background: var(--accent-shadow);
}
&[data-type="folder"].focused,
&[data-type="folder"].springloading {
background: url(/images/show-your-hands-honor/-ui/folder.svg), var(--accent-shadow);
}
&[data-type="logo"].focused:after,
&[data-type="logo"].springloading:after {
background: var(--accent);
}
> .title {
position: absolute;
left: 50%;
/* bottom: -1.7em; */
top: 42px;
border-top: 10px solid transparent; /* No pixel gap */
color: var(--text);
user-select: none;
width: 80px;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
/* height: 10em; */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
transform: translateX(-50%);
font-size: calc(var(--figcaption-font-size) * .6);
line-height: 1.2;
font-family: var(--font-pixel-font-12);
padding: .2em .3em .1em;
}
&.focused > .title,
&.springloading > .title {
background: var(--accent);
background-clip: padding-box;
color: var(--background);
}
&.left-behind {
opacity: .25 !important;
pointer-events: none;
}
&.dragging-absolute {
opacity: .75 !important;
z-index: 10000000 !important;
pointer-events: none;
}
}
.desktop-icon.focused {
/* outline-color: blue; */
opacity: .5;
}
.canvas {
position: absolute;
inset: 0;
/* left: calc(-1 * var(--margin)); */
/* top: calc(-1 * var(--margin)); */
/* bottom: calc(-1 * var(--margin)); */
/* right: calc(-1 * var(--margin)); */
padding: 0;
user-select: none;
background: var(--accent-background); /* Cheap solution for overscroll */
.canvas-interior {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
overflow: scroll;
/* iPad/trackpad specifically */
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
* {
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
overscroll-behavior: contain;
/* background-position: -19px -19px; */
&.no-scroll {
overflow: clip;
}
.canvas-contents {
/* background: yellow; */
z-index: 82;
position: absolute;
left: 0;
top: 0;
overflow: clip;
/* overflow: auto; */
/* outline: 20px solid red; */
&:after {
position: absolute;
left: -20px;
width: 20px;
top: 0;
bottom: 0;
background: red;
content: '';
z-index: 10000;
}
.window {
position: absolute;
z-index: 11;
inset: 0;
&:before {
background: var(--background);
}
&:after {
content: '';
position: absolute;
left: 15px;
top: 15px;
right: -3px;
bottom: -3px;
z-index: -1;
background: var(--accent-shadow);
}
}
.window-ghost {
position: absolute;
z-index: 1000000000;
outline: 1px solid var(--dark-gray);
inset: 0;
pointer-events: none;
}
}
&.focused > .canvas-contents > .desktop-icon.focused,
.window.focused > .contents > .desktop-icon.focused,
&.focused > .canvas-contents > .desktop-icon.springloading,
.window.focused > .contents > .desktop-icon.springloading {
opacity: 1;
}
&.focused > .canvas-contents > .desktop-icon.springloading,
.window.focused > .contents > .desktop-icon.springloading {
animation-duration: var(--spring-loading-duration);
animation-delay: var(--spring-loading-delay);
animation-name: springloading-blink;
animation-timing-function: linear;
}
.canvas-contents-shadows {
pointer-events: none;
z-index: 81;
position: absolute;
left: 0;
top: 0;
overflow: clip;
/* opacity: .75; */
.window-shadow {
z-index: 1;
pointer-events: none;
position: absolute;
margin-left: 10px;
margin-top: 10px;
background: var(--accent-shadow);
opacity: 1;
&.focused {
margin-left: 15px;
margin-top: 15px;
}
}
}
.slow-reposition-start {
clip-path: inset(-5px -5px 100% -5px);
}
.slow-reposition-end {
transition: clip-path calc(var(--reposition-time) - 5ms) steps(4, jump-none);
clip-path: inset(-5px -5px -5px -5px);
}
.slow-reposition-start-instantaneous {
clip-path: inset(-5px -5px -5px -5px);
}
&.hide-native-scrollbars {
scrollbar-width: none; /* Hides the scrollbar */
-ms-overflow-style: none; /* Hides the scrollbar */
&::-webkit-scrollbar {
display: none;
}
}
}
.app-switcher-shield {
position: absolute;
inset: 0;
z-index: 9999998;
background: var(--accent-shadow);
opacity: .1;
pointer-events: none;
}
.app-switcher {
--icon-size: 48px;
padding: var(--margin);
background: var(--background);
outline: .5px solid var(--text);
position: absolute;
z-index: 9999999;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 15px 15px 0 var(--accent-shadow);
display: flex;
gap: calc(var(--icon-size) / 4);
.app-icon {
outline: .5px solid var(--lighter-gray);
width: var(--icon-size);
height: var(--icon-size);
position: relative;
&:after {
content: '';
position: absolute;
inset: 2px;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: 50% 50%;
mask-image: var(--logo);
background: var(--text);
}
&:before {
content: '';
position: absolute;
left: calc(-1 * var(--icon-size) / 8);
right: calc(-1 * var(--icon-size) / 8);
top: calc(-1 * var(--icon-size) / 4);
bottom: calc(-1 * var(--icon-size) / 4);
z-index: -1;
/* background: yellow; */
}
&.active {
outline: 3px solid var(--accent);
}
}
}
/* Scrollbars */
.arrow {
width: calc(var(--margin) / 2);
height: calc(var(--margin) / 2);
position: absolute;
outline: .5px solid var(--accent-shadow);
background: var(--accent-shadow);
&:active {
background: var(--accent);
}
}
.thumb {
position: absolute;
background: var(--accent-shadow);
inset: 0;
box-sizing: border-box;
border: 2px solid white; /* Makes this part of the object */
&.fake-hover {
background: var(--accent);
}
&:active {
border-width: 3px;
background: var(--accent);
}
}
.scrollbar-vertical {
position: absolute;
right: 0;
top: 0;
bottom: 0;/*calc(var(--margin) / 2);*/
z-index: 10000000;
width: calc(var(--margin) / 2);
border-left: .5px solid var(--accent-shadow);
background: var(--background);
/* opacity: .4; */
.scrollbar-vertical-chute {
position: absolute;
left: 0;
top: calc(var(--margin) / 2 + 1px);
bottom: calc(var(--margin) / 2 + 1px);
right: 0;
}
.arrow-top {
left: 0;
top: 0;
}
.arrow-bottom {
left: 0;
bottom: 0;
}
}
.scrollbar-horizontal {
position: absolute;
left: 0;
right: calc(var(--margin) / 2);
bottom: 0;
z-index: 10000000;
height: calc(var(--margin) / 2);
border-top: .5px solid var(--accent-shadow);
background: var(--background);
.scrollbar-horizontal-chute {
position: absolute;
left: calc(var(--margin) / 2 + 1px);
top: 0;
bottom: 0;
right: calc(var(--margin) / 2 + 1px);
}
.arrow-left {
left: 0;
top: 0;
}
.arrow-right {
right: 0;
top: 0;
}
}
}
/* --------------------------------------------- */
/* Typing etc. */
.playground:has(.input-in-window) {
justify-content: center;
}
.input-in-window {
flex-grow: 0;
display: flex;
position: relative;
margin-right: calc(-1 * var(--margin));
align-items: center;
/* justify-self: center; */
max-width: 100%;
/* margin-top: %; */
/* margin-top: 25cqh; */
/* top: 50%; */
/* transform: translateY(-50%); */
&.sayt {
/* justify-self: start; */
/* top: auto; */
transform: translateY(-90%);
}
justify-content: center;
perspective: 60px;
perspective-origin: 45% 50%;
}
.main-input-wrapper {
outline: .5px solid var(--lighter-gray);
overflow: clip;
height: 62px;
width: 17em;
position: relative;
&.wide {
width: 34em;
}
}
.main-input {
font-family: var(--font-pixel-font-22);
font-size: 32px;
background: var(--background);
color: var(--text);
position: absolute;
left: 0;
top: 0;
height: 62px;
display: block;
box-sizing: border-box;
/* width: 30em; */
/* max-width: 100%; */
/* user-select: none; */
flex-grow: 1;
width: 100%;
/* width: 75%; */
padding-left: calc(var(--margin) / 2);
padding-right: calc(var(--margin) / 2);
/* color: var(--accent); */
caret-color: var(--text);
/* outline: none; */
border: none;
outline: .5px solid var(--lighter-gray);
&::placeholder {
color: var(--lighter-gray);
}
&.in-transit {
/* caret-color: var(--accent); */
}
&.moved-up {
transition: transform var(--bezier) 250ms;
transform: translateY(-100px);
}
&.moved-down {
transition: none;
transform: translateY(100px);
}
&.moved-center {
transition: transform var(--bezier) 250ms;
transform: translateY(0) !important;
}
}
.main-input-wrapper .main-input {
outline: none;
}
@property --connection-value { /* From 0 to 1 */
syntax: '';
initial-value: 0;
inherits: false;
}
.computer {
position: absolute;
width: 10px;
height: 25px;
left: 97%;
top: -79%;
opacity: .5;
filter: blur(.5px);
background-color: #7f7f7f;
background-image:
linear-gradient(
transparent 0%,
transparent 17%,
#0f0f0f 17%,
#0f0f0f 50%,
transparent 50%
),
linear-gradient(90deg,
transparent 30%,
var(--accent) 30%,
var(--accent) 70%,
transparent 70%
);
&:before {
content: '';
position: absolute;
width: 4.5px;
height: 4.5px;
left: .5px;
top: 5px;
z-index: 11;
border-radius: 999px;
background-size: 75%;
background: linear-gradient(white 45%, black 45%, black 55%, white 55%);
background-repeat: no-repeat;
background-position: 50%;
transition: transform 100ms;
}
&:after {
content: '';
position: absolute;
width: 4.5px;
height: 4.5px;
right: .5px;
top: 5px;
z-index: 11;
border-radius: 999px;
background-size: 75%;
background: linear-gradient(white 45%, black 45%, black 55%, white 55%);
background-repeat: no-repeat;
background-position: 50%;
animation-fill-mode: forwards;
transition: transform 100ms;
}
&[animation='0'] { /* Stop */
&:before {
transform: rotateZ(46deg);
}
&:after {
transform: rotateZ(10deg);
}
}
&[animation='1'] { /* Slow */
&:before {
animation-duration: 1000ms;
animation-name: computer-tape-rotate;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
&:after {
animation-duration: 1000ms;
animation-delay: 200ms;
animation-name: computer-tape-rotate;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
}
&[animation='2'] { /* Fast */
&:before {
animation-duration: 100ms;
animation-name: computer-tape-rotate;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
&:after {
animation-duration: 100ms;
animation-delay: 20ms;
animation-name: computer-tape-rotate;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
}
&[animation='3'] { /* Staccato */
&:before {
animation-duration: 2000ms;
animation-name: computer-tape-staccato;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
&:after {
animation-duration: 2000ms;
animation-delay: 80ms;
animation-name: computer-tape-staccato;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
}
&[animation='4'] { /* Fast reverse */
&:before {
animation-duration: 50ms;
animation-name: computer-tape-rotate-reverse;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
&:after {
animation-duration: 50ms;
animation-delay: 20ms;
animation-name: computer-tape-rotate-reverse;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
}
}
@media (width <= 1280px) {
.computer {
top: -67px;
}
}
@media (width <= 767px) {
.computer {
top: -107px;
}
}
@keyframes computer-tape-rotate {
0% { transform: rotateZ(0); }
99.9% { transform: rotateZ(360deg); }
100% { transform: rotateZ(0); }
}
@keyframes computer-tape-rotate-reverse {
0% { transform: rotateZ(360deg); }
99.9% { transform: rotateZ(0); }
100% { transform: rotateZ(360deg); }
}
@keyframes computer-tape-staccato {
0% { transform: rotateZ(0); }
10% { transform: rotateZ(0); }
10% { transform: rotateZ(72deg); }
20% { transform: rotateZ(72deg); }
30% { transform: rotateZ(144deg); }
40% { transform: rotateZ(144deg); }
50% { transform: rotateZ(216deg); }
60% { transform: rotateZ(216deg); }
70% { transform: rotateZ(288deg); }
80% { transform: rotateZ(288deg); }
90% { transform: rotateZ(360deg); }
99.9% { transform: rotateZ(360deg); }
100% { transform: rotateZ(0); }
}
.transit-links {
display: flex;
flex-direction: column;
justify-content: center;
/* margin: calc(var(--margin) / 4); */
flex-grow: 1;
z-index: -1;
/* perspective-origin: 120% 50%; */
/*transform-origin: 62% 50%;*/ /* DEBUG for recording */
transform-origin: 55% 50%;
transform: translateY(-78px) rotateX(23deg) rotateZ(-15deg) scaleX(600%) translateY(42%) translateX(45%);
mask-image: linear-gradient(to right, black 0%, black 50%, transparent 100%);
mask-size: 100% 100%;
mask-repeat: no-repeat;
.transit-link {
--width: 500px;
--buffer: 4000px; /* The bigger this is, the more visible the transition */
/* width: var(--width); */
height: 10px;
background: var(--background);
/* margin: var(--margin); */
position: relative;
margin-left: 1px;
overflow: clip;
--transition-duration: 500ms;
.inside {
transition: --connection-value var(--bezier) var(--transition-duration);
content: '';
position: absolute;
left: 0;
top: 0;
width: calc(var(--width) + var(--buffer));
left: calc(var(--connection-value) / 102 * (var(--width) * 2 + var(--buffer)) - (var(--width) + var(--buffer)));
height: 10px;
background: var(--accent);
/* background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 50%, var(--background) 50%, var(--background) 100%); */
/* background-size: 1px 100%; */
opacity: .75;
}
&.transit-link-reversed {
transform: scaleX(-1);
}
}
}
@media (width <= 1280px) {
.transit-links {
/* transform-origin: 55% 50%; */
transform: translateY(-58px) rotateX(28deg) rotateZ(-15deg) scaleX(600%) translateY(12%) translateX(45%);
}
}
@media (width <= 767px) {
.input-in-window {
perspective-origin: 105% 50%;
}
.transit-links {
/* z-index: 1000000; */
/* background: red; */
position: absolute;
width: 500px;
left: 20px;
top: -40px;
/* transform-origin: 205% -20%; */
/* transform: rotateZ(-29deg) rotateY(-3deg); */
transform-origin: 10% 50%;
transform: translateX(200px) rotateZ(-90deg) rotateY(20deg) scale(1.2);
perspective-origin: 50% 50%;
/*translateX(-100px) translateY(-78px) rotateX(23deg) rotateZ(-15deg) scaleX(1200%) translateY(42%) translateX(45%);*/
}
}
.find-ui {
position: absolute;
left: 0;
width: 100%;
bottom: 0;
padding: 10px 40px;
height: 52px;
box-sizing: border-box;
background: var(--accent);
color: var(--background);
z-index: 1;
/* border-top: .5px solid var(--text); */
white-space: nowrap;
display: flex;
gap: 10px;
max-width: calc(800px + 80px);
&:after {
content: '';
left: 100%;
top: 0;
bottom: 0;
position: absolute;
border-left: 5000px solid var(--accent);
}
* {
font-size: calc(var(--figcaption-font-size) * .85);
font-family: var(--font-pixel-font-17);
line-height: 32px;
}
.button-wrapper {
display: inline-block;
width: 32px;
height: 32px;
/* background: var(--accent-shadow); */
&:has([disabled]) {
background: transparent;
}
&:active button {
position: relative;
top: 2px;
}
}
button {
width: 32px;
height: 32px;
mask-repeat: no-repeat;
mask-position: 50% 50%;
background: var(--background);
&.find-previous { mask-image: url(ui/buttons/arrow-left.svg); transform: rotateZ(90deg); }
&.find-next { mask-image: url(ui/buttons/arrow-right.svg); transform: rotateZ(90deg);}
&.find-close { mask-image: url(ui/buttons/close.svg); }
&[disabled] {
background: var(--accent-shadow);
opacity: .5;
}
}
.button-wrapper:has(.find-close) {
margin-left: auto;
}
.find-query {
padding: 0 10px;
border: none;
color: var(--text);
background: var(--background);
&::placeholder {
color: var(--lighter-gray);
}
&:focus {
outline: none;
}
}
pointer-events: none;
transform: translateY(75px);
transition: transform var(--bezier) 125ms;
.result-numbers {
white-space: nowrap;
display: inline-block;
width: 6em;
text-align: center;
&.zero {
color: var(--accent-shadow);
opacity: .5;
}
&.not-found {
&:after {
content: 'Not found';
}
.result-count,
.result-current {
display: none;
}
}
.result-count,
.result-current {
display: inline-block;
}
}
}
.playground.find-ui-visible {
.find-ui {
/* display: block; */
transform: translateY(0);
transition: transform var(--bezier) 250ms;
pointer-events: auto;
}
.find-contents {
/* top: 50px; */
bottom: 50px;
transition: bottom var(--bezier) 250ms;
}
}
.find-contents {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-y: scroll;
overscroll-behavior: contain;
transition: bottom var(--bezier) 125ms;
outline: none;
.find-contents-inside {
padding-left: 40px;
padding-right: 40px;
max-width: 800px;
}
p {
font-size: calc(var(--figcaption-font-size) * .85);
font-family: var(--font-pixel-font-17);
line-height: 1.7;
color: var(--text);
/* font-size: var(--figcaption-font-size); */
/* letter-spacing: .03em; */
/* line-height: 1.2; */
/* font-family: var(--font-selectric-un); */
/* line-height: 1.4; */
hyphens: none;
margin-top: 0;
margin-bottom: 1em;
}
h3 {
font-size: calc(var(--figcaption-font-size) * .85);
font-family: var(--font-pixel-font-17);
line-height: 1.7;
text-shadow: .07em 0 0 currentcolor;
letter-spacing: .07em;
/* font-size: var(--figcaption-font-size); */
/* letter-spacing: .03em; */
/* line-height: 1.2; */
/* font-family: var(--font-selectric-un); */
/* line-height: 1.4; */
color: var(--accent);
hyphens: none;
margin-top: 2em;
margin-bottom: 1em;
}
.highlight {
background: var(--accent);
color: var(--background);
padding: 0 2px;
margin: 0 -2px;
&.active {
background: var(--text);
padding: 2px 6px;
margin: -2px -6px;
}
}
}
.interactions-playground[data-runner-mode="find-standard"],
.interactions-playground[data-runner-mode="find-canon-cat"] {
.preview-rectangle {
outline: 1px solid var(--text);
}
}
.counter {
position: absolute;
right: calc(var(--margin) * .6);
bottom: calc(var(--margin) / 2);
pointer-events: none;
user-select: none;
color: var(--text-gray);
font-size: calc(var(--figcaption-font-size) * .7);
font-family: var(--font-pixel-font-07);
line-height: 1.6;
/* font-size: var(--figcaption-font-size); */
/* letter-spacing: .03em; */
/* line-height: 1.2; */
/* font-family: var(--font-selectric-un); */
.over {
color: var(--accent);
}
}
@media (width <= 767px) {
.counter {
right: calc(var(--margin) * .8);
bottom: calc(var(--margin) * .7);
}
}
.instructions {
font-size: var(--figcaption-font-size);
letter-spacing: .03em;
line-height: 1.2;
font-family: var(--font-selectric-un);
/* margin-bottom: var(--margin); */
/* background: var(--background); */
padding-top: calc(var(--margin) * 1.25);
padding-right: calc(var(--margin) / 2);
padding-bottom: calc(var(--margin) / 2);
padding-left: calc(var(--margin) / 2 + 24px);
/* padding-top: var(--margin); */
margin: 0;
list-style: none;
/* outline: .5px solid var(--lighter-gray); */
position: relative;
.key {
color: inherit;
border: 1px solid #ffdfdf5f !important;
color: #ffdfdf8f;
}
li {
text-shadow: 0 1px 0 black;
/* color: #ffdfdfaf; */
color: #ffffffbf;
position: relative;
padding-top: 5px;
margin-top: -5px;
padding-bottom: 4px;
margin-bottom: 0;
margin-left: -36px;
padding-left: 36px;
margin-right: -10px;
padding-right: 10px;
user-select: none;
-webkit-user-select: none;
cursor: var(--cursor);
&:active { cursor: var(--cursor-pressed); }
&:not([data-id]) {
color: red; /* debugging */
}
&:before {
content: '';
width: 28px;
height: 24px;
left: 0;
/* left: -36px; */
top: 2px;
display: block;
position: absolute;
background: hsla(26, 19%, 54%, .8);
mask-position: 8px 0;
mask-repeat: no-repeat;
mask-image: url(ui/checkmark.svg);
}
background: linear-gradient(90deg, black 50%, transparent 50%);
background-size: 200% 100%;
background-repeat: no-repeat;
background-position: 100% 0;
&.completed {
transition: background 500ms var(--bezier) !important;
background-position: 0% 0 !important;
}
&.completed,
&.completed-quickly {
color: #ffdfdfaf;
/* color: #ffffffbf; */
&:before {
mask-image: url(ui/check.svg);
left: 2px;
top: 3px;
/* background: var(--accent); */
background: hsla(var(--settings-hue), 100%, 80%, .85);
}
}
&.completed-part2 {
transition: background 500ms var(--bezier) !important;
background-position: -110% 0 !important;
}
}
}
@property --gradient1-color { syntax: ''; initial-value: black; inherits: false; }
@property --gradient2-color { syntax: ''; initial-value: black; inherits: false; }
@property --gradient3-color { syntax: ''; initial-value: black; inherits: false; }
@property --gradient4-color { syntax: ''; initial-value: black; inherits: false; }
@property --gradient2-position { syntax: ''; initial-value: 10%; inherits: false; }
@property --gradient3-position { syntax: ''; initial-value: 10%; inherits: false; }
@property --gradient-glow { syntax: ''; initial-value: black; inherits: false; }
.settings {
display: flex;
gap: calc(var(--margin) / 2);
/* opacity: .2; */
overflow-x: clip; /* Shouldn’t happen, but better than overflowing horizontally */
/* outline: none; */
user-select: none;
-webkit-user-select: none;
/* background: var(--background); */
/* background: #2f2f2f; */
/* background:hsl(216, 19%, 55%); */
/* background-image: url(/images/show-your-hands-honor/-ui/metal.png); */
/* background-size: 50%; */
/* padding: calc(var(--margin) / 2 + 10px) 16px 16px; */
padding: 24px;
padding-left: 42px;
/* padding-right: 16px; */
/* padding: calc(var(--margin) / 2) 0; */
color: var(--text-gray);
/* margin-right: calc(-1 * var(--margin)); */
/* margin-left: calc(-1 * var(--margin)); */
/* margin-bottom: calc(-1 * var(--margin)); */
font-size: var(--figcaption-font-size);
letter-spacing: .03em;
line-height: 1.2;
font-family: var(--font-selectric-un);
height: 80px;
.group {
height: calc(100% + 20px);
position: relative;
overflow: clip;
/* margin-top: -10px; */
/* padding-top: 10px; */
margin-top: -20px; /* All this to avoid clipping from the top */
display: grid;
grid-auto-columns: auto;
grid-template-rows: 20px 1fr min-content;
grid-auto-flow: column;
/* grid-gap: 0 5px; */
/* grid-auto-rows: auto; */
/* flex-direction: column; */
/* flex-grow: 1; */
max-width: fit-content;
&:has(.split-slider-top) {
/* opacity: .2; */
grid-template-rows: 20px 28px 28px 1fr;
.split-slider-top {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.split-slider-bottom {
grid-column: 1 / 2;
grid-row: 3 / 4;
}
}
& > * {
/* background: yellow; */
grid-row: 2 / 3;
}
.subgroup {
position: relative;
/* overflow: clip; */
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 5px;
:not(label) {
flex-grow: 1;
}
}
&:has(.slider) {
max-width: none;
flex-grow: 1;
}
&:has(.tape) {
margin-left: auto; /* Always on the right */
margin-top: 0;
/* border-top: .5px solid var(--text-gray);
border-left: .5px solid var(--text-gray);
border-right: .5px solid var(--text-gray);
border-bottom: .5px solid var(--text-gray); */
background: #7f7f7f9f;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
border-radius: 10px;
bottom: 0;
height: calc(100% - 4px);
grid-template-rows: 0 1fr;
/* box-shadow:
0 -.5px 0 #0000007f,
0 -1px 0 #0000007f,
0 .5px 0 #ffffff2f; */
box-shadow:
0 -.5px 0 #ffffff5f,
0 -1px 0 #ffffff5f,
0 3px 0 #0000002f;
}
/* padding-bottom: 20px; */
box-sizing: border-box;
/* &:before {
content: '';
position: absolute;
inset: 0;
padding-left: 10px;
border: .5px solid var(--text-gray);
box-shadow:
0 -.5px 0 #0000007f,
0 -1px 0 #0000007f,
0 .5px 0 #ffffff2f;
}*/
&:not(:has(label)):not(:has(.tape)) { /* No label */
&:before {
content: '';
width: 100vw;
height: .5px;
opacity: .5;
background: var(--text-gray);
position: absolute;
left: 0;
bottom: 5px;
box-shadow:
0 -.5px 0 #0000007f,
0 -1px 0 #0000007f,
0 .5px 0 #ffffff2f;
}
}
label {
grid-column: 1 / 2;
grid-row: -1;
margin-top: auto;
display: inline-block;
max-width: fit-content;
text-align: center;
margin-left: auto;
margin-right: auto;
opacity: .75;
padding-left: 20px; /* Enforces it won’t truncate to just letters */
padding-right: calc(20px - .25em); /* To compensate for letter spacing */
font-family: PantographWide;
letter-spacing: .25em;
font-size: 12px;
color: hsla(26, 19%, 54%, .8);
white-space: nowrap;
line-height: 10px;
text-transform: uppercase;
position: relative;
text-shadow:
0 -.5px 0 #0000007f,
0 -1px 0 #0000007f,
0 .5px 0 #ffffff2f;
&:before {
content: '';
width: 100vw;
height: .25px;
background: hsla(26, 19%, 54%, .4);
position: absolute;
right: calc(100% - 10px);
/* left: 0; */
top: 50%;
box-shadow:
0 -.5px 0 #0000007f,
0 -1px 0 #0000007f,
0 .5px 0 #ffffff2f;
}
&:after {
content: '';
width: 100vw;
height: .25px;
background: hsla(26, 19%, 54%, .4);
position: absolute;
left: calc(100% - 10px);
/* transform: translateX(100%); */
top: 50%;
box-shadow:
0 -.5px 0 #0000007f,
0 -1px 0 #0000007f,
0 .5px 0 #ffffff2f;
}
}
/* This is impossible to do automatically apparently */
&:has(.subgroup + .subgroup) > label {
grid-column: 1 / 3;
}
&:has(.subgroup + .subgroup + .subgroup) > label {
grid-column: 1 / 4;
}
.subgroup label {
/* grid-column: auto; */
/* grid-row: auto; */
padding-left: 5px;
padding-right: 5px;
&:before,
&:after {
display: none;
}
}
.subgroup:first-of-type label {
padding-left: 0;
}
.subgroup + .subgroup label {
padding-right: 0;
}
}
.tape {
background: #d2d2d2;
background-image: radial-gradient(
circle at 70% -50% in hsl,
#ffffffff 0%,
#ffffffff 30%,
#000000cf 67%
);
background-size: 150% 150%;
background-position: 50% 50%;
outline: .5px solid #000000;
box-shadow: 2px 2px 4px #ffffff2f,
-2px -2px 4px #0000002f;
&:after {
content: '';
position: absolute;
inset: 0;
box-shadow: inset 0 2px 2px #0000004f,
inset 0 4px 4px #0000004f,
inset 0 9px 9px #0000004f,
inset 0 16px 16px #0000004f;
}
width: 200px;
height: 100%;
/* margin-top: 20px; */
position: relative;
/* overflow: clip; */
/*margin-left: auto;*/ /* Always right aligned */
/* padding: 24px; */
box-sizing: border-box;
overflow: clip;
border-radius: 6px;
canvas {
position: absolute;
inset: 0;
/* width: 100%; */
height: 100%;
mix-blend-mode: multiply;
}
}
.slider {
width: calc(100% - 0px);
box-sizing: border-box;
padding-left: 0px;
display: flex;
flex-direction: row;
flex-grow: 1;
margin: 0;
position: relative;
.slider-wrapper {
background: var(--light-gray);
--value-width: 69px;
&.two-digits {
--value-width: 50px;
}
&.four-digits {
--value-width: 84px;
}
border-radius: 6px;
--hue: var(--settings-hue);
width: calc(100% - 10px); /* Avoid clipping */
margin-left: 5px;
margin-right: 5px;
height: 55px;
display: flex;
flex-direction: row;
/* overflow: clip; */
border: .5px solid black;
box-shadow:
0 2px 4px #ffffff2f,
0 -2px 4px #0000002f;
position: relative;
&.two-digits .value .number:before {
content: '88';
}
&.four-digits .value .number:before {
content: '8888';
}
&.four-digits .value .text:before {
content: 'H M S'; /* three-per-em space */
}
&.with-units .nixie .digit-space {
line-height: 43px;
}
.chute-wrapper {
/* outline: 1px solid red; */
flex-grow: 1;
position: relative;
}
.chute {
position: absolute;
inset: 0;
overflow: clip;
border-radius: 5px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
background: #1f1f1f;
&:after {
position: absolute;
inset: 0;
content: '';
z-index: 10;
mix-blend-mode: screen;
background-image: radial-gradient(
circle at 50% -50% in hsl,
#ffffff3f 0%,
#ffffff00 80%
);
box-shadow:
inset 0 1px 1px #0000004f,
inset 0 2px 2px #0000004f,
inset 0 4px 4px #0000004f,
inset 0 8px 8px #0000004f;
}
}
}
input[type='range'] {
appearance: none;
background: transparent;
z-index: 10;
margin: 0;
position: absolute;
inset: 0;
touch-action: pan-y; /* Allows dragging horizontally on the iPad */
/*
width: calc(100% - 20px);
height: 100%;*/
padding-left: 10px;
padding-right: 10px;
&:before {
content: '';
position: absolute;
inset: 0;
/* z-index: -2; */
pointer-events: none;
mix-blend-mode: multiply;
z-index: 1000;
}
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
&:after {
content: '';
inset: 0;
outline: 1px solid red;
position: absolute;
}
height: 45px;
width: 8px;
border-radius: 2px;
background-color: hsl(var(--hue), 100%, 52%);
outline: .5px solid hsl(var(--hue), 100%, 37%);
background-image: linear-gradient(90deg, hsl(var(--hue), 50%, 45%) 0%, hsl(var(--hue), 50%, 45%) 50%, transparent 50%, transparent 100%);
background-size: 2px 100%;
box-shadow:
0 1px 1px #0000004f,
0 2px 2px #0000004f,
0 6px 4px #0000004f,
0 0 15px #0000002f,
4px 0 4px #0000002f,
inset 0 1px 1px hsla(var(--hue), 100%, 62%, 0.69),
inset 0 2px 2px hsla(var(--hue), 100%, 62%, 0.69);
}
&.split-slider-top input[type='range']::-webkit-slider-thumb {
height: 20px;
width: 6px;
/* height: 34px; */
/* margin-top: -8px; */
/* border-bottom-left-radius: 0; */
/* border-bottom-right-radius: 0; */
}
&.split-slider-bottom input[type='range']::-webkit-slider-thumb {
height: 20px;
width: 6px;
/* height: 34px; */
/* margin-top: 6px; */
/* border-top-left-radius: 0; */
/* border-top-right-radius: 0; */
}
input[type='range']:focus {
outline: none;
}
input[type='range'] {
cursor: var(--cursor-left-right);
}
input[type='range']:active {
cursor: var(--cursor-left-right-pressed);
}
/*
.tick {
position: absolute;
top: 0;
bottom: 0;
width: .5px;
z-index: 1;
background: #0000001f;*/
/* &.waxing { left: 25%; } */
/* &.middle { left: 50%; } */
/* &.waning { left: 75%; } */
/*}*/
.cloth {
position: absolute;
left: 0;
top: 10px;
bottom: 7px;
text-align: right;
/* padding-right: 15px; */
box-sizing: border-box;
font-family: Pantograph;
font-size: 12px;
display: flex;
align-items: center;
justify-content: end;
color: #ffffff7f;
background: #0000003f;
/* background: linear-gradient(90deg, #cfcfcf, #ffffff); */
/* background-size: 2px 100%; */
width: 200%;
z-index: 1;
.tick {
position: absolute;
top: 0;
bottom: 0;
line-height: 10px;
padding-top: 9px;
width: 100px;
/* outline: 1px solid red; */
/* 390
*/
&.start {
left: 30px;
text-align: left;
border-left: 1px solid #ffffff2f;
padding-left: 10px;
}
&:not(.start):not(.end) {
text-align: center;
&.waxing { left: calc(25% / 2 - 15px); }
&.middle { left: calc(50% / 2 - 30px); }
&.waning { left: calc(75% / 2 - 45px); }
&:before {
content: '';
position: absolute;
left: 50%;
width: 1px;
top: 0;
height: 5.5px;
background: #ffffff2f;
}
&:after {
content: '';
position: absolute;
left: 50%;
width: 1px;
bottom: 0;
height: 5.5px;
background: #ffffff2f;
}
}
&.end {
right: calc(50% + 10px);
border-right: 0;
padding-right: 0;
}
}
}
.value {
text-align: right;
flex-grow: 0;
z-index: 400;
position: absolute;
pointer-events: none;
height: 100%;
min-width: var(--value-width);
max-width: var(--value-width);
white-space: nowrap;
--hue: var(--settings-hue);
text-align: right;
padding-right: 12px;
background: hsl(var(--hue), 100%, 2%);
box-sizing: border-box;
/* outline: .5px solid #000000; */
box-shadow:
/* 2px 2px 4px #ffffff2f, */
/* -2px -2px 4px #0000002f, */
inset 0 4px 15px hsla(var(--hue), 80%, 50%, .7);
/* filter: blur(.4px); */
position: relative;
overflow: clip;
&:after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
box-shadow:
inset 0 1px 1px #0000002f,
inset 0 2px 2px #0000002f,
inset 0 4px 4px #0000002f,
inset 0 8px 8px #0000002f;
}
.nixie {
margin-left: 10px;
margin-top: 0;
width: min-content;
height: 38px;
/* outline: 1px solid red; */
display: flex;
flex-direction: row;
.digit-space {
width: .4em;
height: calc(1em + 3px);
line-height: 135%;
/* outline: 1px solid red; */
font-family: PantographCompressedLight;
font-size: 40px;
text-align: center;
/* color: hsla(var(--hue), 80%, 50%, .05); */
color: hsla(var(--hue), 80%, 5%, .45);
/* text-shadow: 0 0 1px hsla(var(--hue), 80%, 50%, .05); */
position: relative;
.digit {
position: absolute;
inset: 0;
mix-blend-mode: screen;
font-feature-settings: 'tnum' on;
/* font-family: PantographCompressed; */
transition: color 150ms;
&.lit {
color: hsla(var(--hue), 100%, 80%, .5);
text-shadow:
0 0 2px hsla(var(--hue), 90%, 80%, .7),
0 0 4px hsla(var(--hue), 90%, 80%, .7);
}
}
}
}
.number {
font-family: SharpEL8;
font-size: 35px;
letter-spacing: -.12em;
line-height: 52px;
color: hsl(var(--hue), 90%, 80%);
text-shadow:
0 0 1px hsla(var(--hue), 90%, 80%, .7),
0 0 2px hsla(var(--hue), 90%, 80%, .7),
0 0 3px hsla(var(--hue), 90%, 80%, .7);
&:before {
content: '888';
position: absolute;
inset: 0;
color: hsla(var(--hue), 80%, 50%, .13);
text-shadow: 0 0 1px hsla(var(--hue), 80%, 50%, .13);
/* color: hsla(199, 16%, 75%, 40%); */
text-align: right;
padding-right: 12px;
box-sizing: border-box;
/* z-index: 0; */
mix-blend-mode: screen;
}
}
.text {
position: absolute;
bottom: 16px;
left: 10px;
right: 10px;
color: hsl(var(--hue), 80%, 80%);
font-family: Pantograph;
font-size: 12px;
&:before {
position: absolute;
content: 'H M S'; /* three-per-em space */
top: 0;
left: 0;
color: hsla(var(--hue), 80%, 50%, .13);
text-shadow: 0 0 1px hsla(var(--hue), 80%, 50%, .13);
}
&.unit-px:before {
content: 'CM';
}
&:after {
position: absolute;
content: 'MS';
top: 0;
right: 0;
color: hsla(var(--hue), 80%, 50%, .13);
text-shadow: 0 0 1px hsla(var(--hue), 80%, 50%, .13);
}
&.unit-px:after {
content: 'PX';
}
&.unit-ms:after,
&.unit-px:after {
color: hsl(var(--hue), 80%, 80%);
text-shadow:
0 0 1px hsla(var(--hue), 80%, 80%, .7),
0 0 2px hsla(var(--hue), 80%, 80%, .7),
0 0 3px hsla(var(--hue), 80%, 80%, .7);
}
}
}
&.split-slider-top .slider-wrapper {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
.chute {
border-bottom-left-radius: 0;
}
}
&.split-slider-bottom .slider-wrapper {
border-top-left-radius: 0;
border-top-right-radius: 0;
.chute {
border-top-left-radius: 0;
}
}
&.split-slider-top,
&.split-slider-bottom {
.slider-wrapper {
height: 28px;
}
.text {
bottom: 14.5px;
}
.chute .cloth {
color: transparent;
}
.nixie {
/* height: 25px; */
}
.nixie .digit-space {
font-size: 28px;
line-height: 31px !important;
.digit.lit {
color: hsla(var(--hue), 100%, 80%, .8);
}
}
.value .text:before {
display: none;
}
}
}
}
.lamp-set-numeric {
display: flex;
flex-orientation: row;
flex-wrap: wrap;
max-width: 130px;
margin: 0 auto;
}
.lamp-indicator,
.lamp-momentary-indicator {
--size: 40px;
&.small {
--size: 20px;
}
width: var(--size);
height: var(--size);
margin: 0 auto;
margin-top: calc(var(--size) / 4);
flex-grow: 0 !important;
border-radius: 999px;
position: relative;
--hue: var(--settings-hue);
&.red {
/* --hue: -20; */
z-index: 0;
&:after {
position: absolute;
content: '';
left: -10%;
top: 30%;
bottom: 35%;
right: 0;
background: black;
transform: rotate(random(0deg, 360deg));
}
&:nth-child(1):after { left: -10%; right: 0; transform: rotate(23deg); }
&:nth-child(2):after { left: -5%; right: -20%; transform: rotate(5deg); }
&:nth-child(3):after { left: 10%; right: 0; transform: rotate(-3deg); }
&:nth-child(4):after { left: 0%; right: 0; transform: rotate(16deg); }
&:nth-child(5):after { left: 2%; right: 0; transform: rotate(12deg); }
&:nth-child(6):after { left: 5%; right: 0; transform: rotate(20deg); }
&:nth-child(7):after { left: -10%; right: 0; transform: rotate(-2deg); }
&:nth-child(8):after { left: 5%; right: 0; transform: rotate(-10deg); }
&:nth-child(9):after { left: -3%; right: 0; transform: rotate(5deg); }
&:nth-child(10):after { left: -8%; right: 0; transform: rotate(20deg); }
&:nth-child(11):after { left: -10%; right: 0; transform: rotate(14deg); }
&:nth-child(12):after { left: 5%; right: 0; transform: rotate(2deg); }
}
--gradient1-color: hsl(var(--hue), 100%, 6%);
--gradient2-color: hsl(var(--hue), 100%, 22%);
--gradient3-color: hsl(var(--hue), 100%, 12%);
--gradient4-color: hsl(var(--hue), 100%, 15%);
--gradient2-position: 30%;
--gradient3-position: 60%;
--gradient-glow: #00000000;
transition: --gradient4-color 1s;
background: radial-gradient(
var(--gradient1-color),
var(--gradient2-color) var(--gradient2-position),
var(--gradient3-color) var(--gradient3-position),
var(--gradient4-color)
);
background: radial-gradient(
var(--gradient1-color),
var(--gradient2-color) var(--gradient2-position),
var(--gradient3-color) var(--gradient3-position),
var(--gradient4-color)
);
box-shadow:
inset 0 1px 2px hsla(var(--hue), 100%, 53%, 0.12),
inset 0 1px 2px hsla(var(--hue), 100%, 53%, 0.12),
inset 0 1px 2px hsla(var(--hue), 100%, 53%, 0.12),
inset 0 -1px 2px hsla(0, 0%, 0%, 0.12),
inset 0 -1px 2px hsla(0, 0%, 0%, 0.12),
inset 0 -1px 2px hsla(0, 0%, 0%, 0.12),
inset 0 -2px 4px hsla(0, 0%, 0%, 0.18),
0 2px 2px hsla(0, 0%, 0%, 0.25),
0 0 5px var(--gradient-glow),
0 0 10px var(--gradient-glow),
0 0 15px var(--gradient-glow),
0 0 20px var(--gradient-glow);
/* &:not(.small):after {
content: '';
position: absolute;
inset: -5px;
z-index: -1;
border-radius: 999px;
border: 5px solid #3f3f3f;
outline: .5px solid black;
} */
&:not(.small):before { /* Shadow */
content: '';
position: absolute;
inset: -20px;
z-index: 1;
background-image: radial-gradient(black, transparent 66%);
background-size: 60% 80%;
background-position: 50% 90%;
background-repeat: no-repeat;
mask-image: radial-gradient(transparent 35.5%, black 35.5%);
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
mix-blend-mode: soft-light;
transition: opacity 750ms;
}
outline: .5px solid #000000;
transition: --gradient1-color 750ms, --gradient2-color 750ms, --gradient3-color 750ms,--gradient4-color 750ms, --gradient2-position 750ms, --gradient3-position 750ms, outline 750ms, --gradient-glow 750ms;
&.lit {
/* background: radial-gradient(#cfffcf, #ffffff 40%, #8fff8f 50%, #4fff4f); */
--gradient1-color: hsl(var(--hue), 100%, 91%);
--gradient2-color: hsl(var(--hue), 0%, 100%);
--gradient3-color: hsl(var(--hue), 100%, 78%);
--gradient4-color: hsl(var(--hue), 100%, 65%);
--gradient2-position: 40%;
--gradient3-position: 70%;
--gradient-glow: hsl(var(--hue), 100%, 50%);
transition: --gradient1-color 150ms, --gradient2-color 150ms, --gradient3-color 150ms, --gradient4-color 150ms, --gradient2-position 150ms, --gradient3-position 150ms, outline 150ms, --gradient-glow 350ms;
outline: .5px solid #00000000;
/* &:before {
opacity: .2;
} */
}
}
.subgroup .lamp-indicator,
.subgroup .lamp-momentary-indicator {
margin-top: 3px;
}
.subgroup .checkbox-indicator {
height: 40px;
}
.reset-button {
appearance: none;
-webkit-appearance: none;
border: none;
width: 50px;
height: 40px;
margin: 0 auto;
margin-top: 5px;
border-radius: 6px;
outline: .5px solid #000000;
position: relative;
text-align: center;
font-family: Pantograph;
font-size: 12px;
letter-spacing: .15em;
color: #ff00005f;
line-height: 30px;
&.emergency-stop {
width: 150px;
}
&:after {
inset: 0;
position: absolute;
border-radius: 2px;
content: 'RESET';
background: linear-gradient(#9f0000 0%, #5f0000 65%, #af0000 75%, #5f0000 100%);
box-shadow:
inset 0 2px 4px #ff0f0f8f,
inset 0 -2px 4px #0000002f,
0 5px 5px black;
}
&.emergency-stop:after {
content: 'EMERGENCY STOP';
}
&:active:after {
/* background: linear-gradient(#3f0000 0%, #7f0000 20%, #3f0000 30%, #7f0000 100%); */
background: linear-gradient(#5f0000 0%, #af0000 20%, #5f0000 30%, #af0000 100%);
line-height: 52px;
color: #0000005f;
box-shadow:
inset 0 2px 4px #ff0f0f8f,
inset 0 -2px 4px #0000002f,
0 2px 5px black;
}
&:before {
content: '';
inset: -5px;
position: absolute;
border: 5px solid #2f2f2f;
border-radius: 2px;
outline: .5px solid #0000008f;
box-shadow:
-1px -1px 2px #ffffff2f,
1px 1px 2px #0000005f;
}
}
.checkbox-indicator {
display: block !important;
width: 25px;
/* height: 50px; */
/* min-height: 40px; */
/* min-height: min-content; */
height: 50px;
/* flex-grow: 0; */
margin: 0 auto;
/* margin-top: 10px; */
outline: none;
border-radius: 1px;
-webkit-appearance: none;
appearance: none;
--hue: var(--settings-hue);
cursor: var(--cursor-hand);
&:active {
cursor: var(--cursor-hand-pressed);
}
outline: .5px solid #000000;
box-shadow:
2px 2px 4px #ffffff2f,
-2px -2px 4px #0000002f;
background:
url(/images/show-your-hands-honor/-ui/toggle-on.svg),
linear-gradient(#2f2f2f 50%, hsl(var(--hue), 100%, 41%) 50%);
background-size:
200% 200%,
100% 200%;
background-position:
50% 240%,
0 0;
transition: background-position 150ms var(--bezier);
position: relative;
&:before {
content: '';
position: absolute;
width: 100%;
height: 16px;
left: 0;
top: calc(100% - 16px);
z-index: 1;
border-radius: 2px;
background-color: hsl(var(--hue), 100%, 28%);
background-image: linear-gradient(hsl(var(--hue), 100%, 41%) 0%, hsl(var(--hue), 100%, 41%) 50%, transparent 50%, transparent 100%);
background-size: 100% 2px;
transition: top 150ms var(--bezier);
box-shadow:
0 1px 1px #0000004f,
0 2px 2px #0000004f,
0 4px 4px #0000004f,
0 8px 8px #0000004f,
inset 0 1px 1px hsla(var(--hue), 100%, 62%, 0.69),
inset 0 2px 2px hsla(var(--hue), 100%, 62%, 0.69),
inset 0 4px 4px hsla(var(--hue), 100%, 62%, 0.69);
}
&:checked {
background-position:
50% 290%,
0 100%;
transition: background-position 550ms var(--bezier);
}
&:checked:before {
top: 0;
transition: top 550ms var(--bezier);
}
&:active:before {
/* background: #bf0000; */
}
/*
&:active:before {
top: 3px;
}
&:checked:active:before {
top: calc(40px - 12px - 3px);
}*/
&:after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
box-shadow:
inset 0 1px 1px #0000004f,
inset 0 2px 2px #0000004f,
inset 0 4px 4px #0000004f,
inset 0 8px 8px #0000004f;
}
}
.uv-meter {
width: 60px;
height: 60px;
background: white;
background: hsl(47, 100%, 88%);
background-image: radial-gradient(
circle at 50% -50% in hsl,
hsl(30, 100%, 83%) 0%,
hsl(30, 100%, 83%) 40%,
#00000000 100%
);
position: relative;
border-radius: 999px;
margin: 0 auto;
overflow: clip;
border: .5px solid #000000;
&:before {
position: absolute;
content: '';
z-index: 100;
inset: 0;
pointer-events: none;
border-radius: 999px;
box-shadow:
2px 2px 4px #ffffff2f,
-2px -2px 4px #0000002f,
inset 0 1px 1px #0000004f,
inset 0 2px 2px #0000004f,
inset 0 4px 4px #0000004f,
inset 0 8px 8px #0000004f;
}
&:after {
position: absolute;
top: 44px;
left: calc(50% - 20px);
width: 40px;
height: 40px;
transform: scaleX(1.4);
border-radius: 999px;
content: '';
background: #1f1f1fff;
box-shadow:
inset 0 2px 4px #ffffff3f;
}
.needle {
position: absolute;
left: calc(50% - 1px);
top: 0px;
height: 50px;
width: 1.5px;
background: var(--accent);
transform-origin: 0 60px;
transition: transform .02s linear;
}
.tick {
position: absolute;
left: calc(50% - 1px);
top: 0;
height: 60px;
width: .5px;
background: #0000001f;
transform-origin: 0 60px;
&.waxing { transform: rotateZ(-35deg); }
&.middle { transform: rotateZ(0); }
&.waning { transform: rotateZ(35deg); }
}
}
.select-numeric-indicator,
.select-custom-indicator {
height: 55px;
width: 40px;
overflow: clip;
position: relative;
padding: 0;
margin: 0 auto;
/* margin-top: 10px; */
border-radius: 6px;
outline: .5px solid #000000;
box-shadow:
2px 2px 4px #ffffff2f,
-2px -2px 4px #0000002f;
background: #3f6f3f;
font-size: 20px;
&:after {
content: '';
position: absolute;
inset: 0;
box-shadow:
inset 0 1px 1px #0000004f,
inset 0 2px 2px #0000004f,
inset 0 4px 4px #0000004f,
inset 0 8px 8px #0000004f;
}
.values {
position: absolute;
left: 0;
top: 0;
height: 40px;
/* transition: translate 150ms var(--bezier); */
transition: rotate 150ms var(--bezier);
transform-origin: 0 250px;
.value {
position: absolute;
top: 0;
left: 0;
width: 40px;
line-height: 60px;
height: 60px;
color: white;
text-align: center;
text-shadow:
0 -.5px 0 #0000007f,
0 -1px 0 #0000007f;
transform-origin: 0 250px;
font-family: Pantograph;
/* font-feature-settings: 'zero' on; */
&.compressed {
font-family: PantographCompressedLight !important;
}
background-color: #3f6f3f;
&.alt {
background-color: #2f5f2f;
}
&.default {
background-color: #2f2f2f;
z-index: -1;
}
&.max {
background-color: #cf0000;
}
&.emphasized {
background-color: #3f3f3f;
color: hsl(var(--settings-hue), 100%, 52%);
}
}
}
}
.compressed {
font-family: Pantograph !important;
}
@media (width <= 1280px) {
.settings {
.group {
label {
font-family: Pantograph !important;
}
}
}
/* Tactical playground setting fixes */
.interactions-playground[data-runner-id='arrow-move'] .settings .group:has(.tape),
.interactions-playground[data-runner-id='arrow-move'] .settings .group:has(.tape),
.interactions-playground[data-runner-id='chrome-reload'] .settings .group:has(.tape) {
display: none;
}
}
.interactions-playground .settings .group:first-child:has(.slider) {
margin-left: -6px;
}
.interactions-playground .settings .group:last-child:has(.tape),
.interactions-playground .settings .group:last-child:has(.reset-button) {
margin-right: -8px;
}
.interactions-playground {
border: none !important;
}
.early-history {
background: var(--light-gray);
overflow-x: auto;
}
@media (prefers-color-scheme: dark) {
.early-history {
background: var(--dark-gray);
}
}
@media (width <= 767px) {
.early-history {
width: 100vw;
box-sizing: border-box;
}
}
.early-history .contents {
display: flex;
flex-direction: row;
gap: calc(var(--margin) / 2);
min-width: 100%;
width: max-content;
box-sizing: border-box;
padding: var(--margin);
}
@media (width <= 767px) {
.early-history .contents {
padding-left: calc(var(--left-gutter) + var(--margin));
padding-right: calc(var(--left-gutter) + var(--margin));
}
}
.early-history .contents > div {
background: var(--dark-gray);
color: var(--background);
padding: calc(var(--margin) / 4) calc(var(--margin) / 2);
}
@media (prefers-color-scheme: dark) {
.early-history .contents > div {
background: var(--mid-gray);
color: var(--text);
}
}
.early-history .name {
font-size: var(--figcaption-font-size);
letter-spacing: .03em;
line-height: 25px;
margin-right: -.5px;
font-family: var(--font-selectric-un);
user-select: none;
-webkit-user-select: none;
min-width: 12em;
max-width: 12em;
display: flex;
flex-direction: column;
.date {
color: var(--accent);
margin-bottom: var(--margin);
}
}
.early-history .icon {
display: block;
align-self: center;
background: var(--accent);
}
.checkerboard-simulator {
background: url(/images/show-your-hands-honor/-ui/iphone.avif);
background-size: 100%;
background-position: 0 0;
background-repeat: no-repeat;
position: relative;
margin-bottom: calc(var(--margin) / 2) !important;
.contents {
position: absolute;
/* outline: 1px solid red; */
left: 8.5%;
width: 83.8%;
top: 16%;
height: 62.8%;
background: url(/images/show-your-hands-honor/-ui/iphone-safari-frame.png);
background-size: 100%;
.contents-inside {
position: absolute;
inset: 0;
top: 16.5%;
bottom: 9%;
/* background: red; */
overflow-x: none;
overflow-y: scroll;
overscroll-behavior: contain;
overscroll-behavior-x: none;
color-scheme: light;
.contents-insider {
position: absolute;
inset: 0;
box-sizing: border-box;
padding: 20px 16px;
color: black;
background: white;
* {
cursor: var(--cursor);
user-select: none;
-webkit-user-select: none;
&:active {
cursor: var(--cursor-pressed);
}
}
h6 {
margin-top: 0;
margin-bottom: 1em;
font-size: 20px;
font-family: var(--font-pixel-font-17);
font-weight: 400;
line-height: 1.2;
}
p + h6 {
margin-top: 2em;
}
p {
font-size: 15px;
line-height: 1.2;
margin-bottom: .5em;
text-align: left;
font-family: var(--font-selectric-un);
&:last-child {
border-bottom: 2em solid transparent;
/* padding-bottom: 2em; */
margin-bottom: 0;
}
}
.checkerboard-below,
.checkerboard-above {
position: absolute;
left: 0;
top: 0;
width: 100%;
/* opacity: .5; */
--size: calc(100cqw / 112);
background-image: conic-gradient(
#cdcdcd 0.25turn,
#fff 0.25turn 0.5turn,
#cdcdcd 0.5turn 0.75turn,
#fff 0.75turn
);
background-size: var(--size) var(--size);
/* background-color: #fff; */
}
}
}
}
}
.playground-recording .video-controls {
background: transparent;
}
/* DEBUG FOR RECORDING */
.interactions-playgroundAAAA {
/* RECORDING SMALL SCREEN */
/* margin-left: -60px !important;
margin-right: -24px !important;
.playground { aspect-ratio: 1 !important; margin-left: 16px; }
.settings { margin-left: -24px; } */
/* RECORDING LARGE SCREEN */
/* margin-left: 0;
margin-right: var(--right-chute) !important;
.playground { aspect-ratio: 1 !important; }
.settings {
height: 80px;
margin-left: -40px;
padding-top: 40px;
padding-bottom: 55px;
scale: 1.5;
transform-origin: 0 60px;
} */
border-radius: 0;
.playground { margin-left: 16px; }
h5 {
margin-bottom: 8px;
opacity: 0;
height: 0;
margin-top: 0;
}
.instructions {
display: none;
}
.settings .group:has(.slider) {
display: none;
}
.settings .group:has(.tape) {
display: none;
}
.settings .group:has(.reset-button) {
display: none;
}
.settings .group:has(input[type=checkbox]) {
display: none;
}
}
.key-output {
width: 210px;
border: .5px solid black;
box-shadow:
0 2px 4px #ffffff2f,
0 -2px 4px #0000002f;
height: 60px;
margin-left: 5px;
margin-right: 5px;
position: relative;
.chute {
position: absolute;
inset: 0;
overflow: clip;
background: #1f1f1f;
&:after {
position: absolute;
inset: 0;
content: '';
z-index: 10;
mix-blend-mode: screen;
background-image: radial-gradient(
circle at 50% -50% in hsl,
#ffffff3f 0%,
#ffffff00 80%
);
box-shadow:
inset 0 1px 1px #0000004f,
inset 0 2px 2px #0000004f,
inset 0 4px 4px #0000004f,
inset 0 8px 8px #0000004f;
}
--hue: var(--settings-hue);
line-height: 60px;
padding-left: 10px;
color: hsla(var(--hue), 100%, 80%, .5);
/* text-shadow: */
/* 0 0 .5px hsla(var(--hue), 90%, 80%, .7), */
/* 0 0 1px hsla(var(--hue), 90%, 80%, .7); */
font-size: calc(var(--figcaption-font-size) * 1);
font-family: var(--font-pixel-font-17);
.output-key {
margin-right: 4px;
&.arrow-adjustment {
position: relative;
top: -.1em;
}
&.lit {
text-shadow:
0 0 2px hsla(var(--hue), 90%, 80%, 1),
0 0 4px hsla(var(--hue), 90%, 80%, 1);
}
&.lit-part-2 {
transition: text-shadow 500ms;
text-shadow:
0 0 .5px hsla(var(--hue), 90%, 80%, .7),
0 0 1px hsla(var(--hue), 90%, 80%, .7);
}
&.disappear {
opacity: 0;
transition: opacity 3000ms; /* 750ms or 3000ms */
}
}
}
}
@font-face {
font-family: Pantograph;
src: url(fonts/WTPantographStandard-Regular.woff2) format("woff2");
}
/* @font-face {
font-family: PantographCompressed;
src: url(fonts/PantographPro-CompressedRegular.woff2) format("woff2");
} */
@font-face {
font-family: PantographCompressedLight;
src: url(fonts/WTPantographCompressed-Light.woff2) format("woff2");
}
@font-face {
font-family: PantographWide;
src: url(fonts/WTPantographWide-Regular.woff2) format("woff2");
}
@font-face {
font-family: SharpEL8;
src: url(fonts/SharpEL8.otf);
}