From 661750a3c59628f932fe10dddd7857aab0fc7b45 Mon Sep 17 00:00:00 2001 From: Jorge Manrubia Date: Thu, 14 Aug 2025 11:33:41 +0200 Subject: [PATCH] Restore commit to style the language picker that I removed by mistake MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit I messed when rebasing the branch 🙏 See https://github.com/basecamp/fizzy/commit/a72d41a151abac36b683aba655676f0ea5920618 Co-authored-by: Jason Zimdars --- app/assets/stylesheets/actiontext-lexical.css | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/app/assets/stylesheets/actiontext-lexical.css b/app/assets/stylesheets/actiontext-lexical.css index 63952a8da..c84a3d954 100644 --- a/app/assets/stylesheets/actiontext-lexical.css +++ b/app/assets/stylesheets/actiontext-lexical.css @@ -146,6 +146,36 @@ } } + .lexical-code-language-picker { + /* Based on .input, .input--select */ + -webkit-appearance: none; + appearance: none; + background-color: var(--color-canvas); + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23000'/%3E%3C/svg%3E"); + background-position: center right 0.9em; + background-repeat: no-repeat; + background-size: 0.5em; + border: 1px solid var(--color-ink-lighter); + border-radius: 0.3em; + color: var(--color-ink); + font-family: var(--font-mono); + font-size: var(--text-x-small); + font-weight: 500; + line-height: inherit; + margin: 0.3em 0.3em 0 -0.3em; + padding: 0.5em 1.8em 0.5em 1.2em; + text-align: start; + + @media (prefers-color-scheme: dark) { + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E"); + } + + option { + background-color: var(--color-canvas); + color: var(--color-ink); + } + } + /* Prompt /* ------------------------------------------------------------------------ */