diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css index 6f41bc597..f2e29716b 100644 --- a/app/assets/stylesheets/_global.css +++ b/app/assets/stylesheets/_global.css @@ -67,7 +67,7 @@ --lch-ink-medium: 66% 0.008 258; --lch-ink-light: 84% 0.005 256; --lch-ink-lighter: 92% 0.003 254; - --lch-ink-lightest: 96% 0.002 252; + --lch-ink-lightest: 98% 0.002 252; --lch-uncolor-darkest: 26% 0.018 40; --lch-uncolor-darker: 40.04% 0.0376 50.06; @@ -174,9 +174,9 @@ --color-selected-dark: oklch(var(--lch-blue-light)); --color-highlight: oklch(var(--lch-yellow-lighter)); --color-marker: oklch(var(--lch-red-medium)); - --color-terminal-bg: var(--color-canvas); - --color-terminal-text: oklch(var(--lch-green-dark)); - --color-terminal-text-light: oklch(var(--lch-green-medium)); + --color-terminal-bg: var(--color-ink-lightest); + --color-terminal-text: var(--color-ink); + --color-terminal-text-light: var(--color-ink-lighter); /* Colors: Cards */ --color-card-default: oklch(var(--lch-blue-dark)); diff --git a/app/assets/stylesheets/actiontext-lexical.css b/app/assets/stylesheets/actiontext-lexical.css index 6bc80a8c1..a4d5369c2 100644 --- a/app/assets/stylesheets/actiontext-lexical.css +++ b/app/assets/stylesheets/actiontext-lexical.css @@ -178,6 +178,7 @@ display: flex; gap: var(--lexical-prompt-padding); padding: var(--lexical-prompt-padding); + white-space: nowrap; &:hover { background-color: var(--color-ink-lightest); diff --git a/app/assets/stylesheets/animation.css b/app/assets/stylesheets/animation.css index 36e682d23..a6275ded4 100644 --- a/app/assets/stylesheets/animation.css +++ b/app/assets/stylesheets/animation.css @@ -16,7 +16,7 @@ @keyframes pulse { 0% { opacity: 1; } - 50% { opacity: 0.6; } + 50% { opacity: 0.4; } 100% { opacity: 1; } } diff --git a/app/assets/stylesheets/terminals.css b/app/assets/stylesheets/terminals.css index e598eb30f..b7a1e01fb 100644 --- a/app/assets/stylesheets/terminals.css +++ b/app/assets/stylesheets/terminals.css @@ -3,10 +3,9 @@ --row-gap: 0.2lh; background-color: var(--color-terminal-bg); - border-block-start: 1px solid var(--color-ink-light); color: var(--color-terminal-text); font-family: var(--font-mono); - font-size: var(--text-normal); + font-size: 0.9em; inset: auto 0 0 0; max-block-size: 100%; padding: var(--block-space) calc(var(--tray-size) + calc(var(--inline-space) * 3)) calc(var(--block-space) + env(safe-area-inset-bottom)); @@ -105,7 +104,7 @@ } } - .terminal__input:is(.input) { + .terminal__input { --input-border-color: transparent; --input-border-radius: 0.3em; --input-color: var(--color-terminal-text); @@ -113,20 +112,42 @@ accent-color: var(--color-terminal-text); caret-color: var(--color-terminal-text); font-family: inherit; - - &::placeholder { - color: var(--color-terminal-text-light); - opacity: 0.5; - } - - &:focus::placeholder { - opacity: 0.7; - } + font-weight: 500; + text-align: start; &.lexical-editor--empty { overflow: hidden; + text-align: center; text-overflow: ellipsis; white-space: nowrap; + + &:focus-within { + text-align: start; + + .lexical-editor__content::before { + inset: 0; + transform: translateX(0); + } + } + + .lexical-editor__content::before { + color: var(--color-ink); + inline-size: 100%; + inset: 0 0 0 50%; + opacity: 0.5; + transform: translateX(-50%); + transform-origin: start start; + transition: inset 150ms ease-in; + + @starting-style { + inset: 0 0 0 50%; + transform: translateX(-50%); + } + } + } + + .terminal--busy:is(:not(.terminal--confirmation)) & { + animation: pulse 1.5s infinite; } .terminal--confirmation & { @@ -156,20 +177,6 @@ } } - .terminal__label { - font-weight: 600; - - .terminal--busy:is(:not(.terminal--confirmation)) & { - animation: pulse 1s infinite; - } - - &:has(~ .terminal__input:focus-within) { - @media (max-width: 640px) { - display: none; - } - } - } - .terminal__menu { display: none; list-style: none; diff --git a/app/views/commands/_form.html.erb b/app/views/commands/_form.html.erb index 1e42d2b55..1b94655b1 100644 --- a/app/views/commands/_form.html.erb +++ b/app/views/commands/_form.html.erb @@ -19,8 +19,6 @@ turbo:submit-end->terminal#handleCommandResponse " } do %> - - <%= rich_textarea_tag "command", nil, toolbar: false, class: "terminal__input input hide-focus-ring fill-transparent unpad",