fixed editor buttons

This commit is contained in:
2026-05-18 12:29:25 +02:00
parent a1e3c2329e
commit 5985f172a1
2 changed files with 24 additions and 8 deletions
@@ -291,10 +291,11 @@ export default function Editor({ editSlug }: Props) {
<button <button
type="button" type="button"
onClick={() => setVimEnabled(v => !v)} onClick={() => setVimEnabled(v => !v)}
className={`btn btn--ghost btn--sm${vimEnabled ? ' is-active' : ''}`} className={`btn btn--ghost btn--sm vim-toggle${vimEnabled ? ' is-active' : ''}`}
title={vimEnabled ? 'Vim mode ON' : 'Vim mode OFF'} aria-pressed={vimEnabled}
title={vimEnabled ? 'Vim mode ON — click to disable' : 'Vim mode OFF — click to enable'}
> >
{vimEnabled ? 'VIM' : 'vim'} {vimEnabled ? 'Vim on' : 'Vim off'}
</button> </button>
<button <button
type="button" type="button"
+20 -5
View File
@@ -75,11 +75,26 @@
background: var(--red); background: var(--red);
border-color: var(--red); border-color: var(--red);
} }
/* Pressed/selected state for toggle & tab buttons */ /* Pressed/selected state for toggle & tab buttons. Solid accent fill so an
.btn.is-active { * engaged toggle is unmistakable (label alone is too subtle). The
color: var(--mauve); * `.btn--ghost.is-active` selector carries enough specificity (0,3,0) to beat
border-color: color-mix(in srgb, var(--mauve) 55%, var(--surface2)); * the theme `.cybersigil/.breakcore .btn--ghost` rules (0,2,0) that load in
background: color-mix(in srgb, var(--mauve) 14%, transparent); * later partials — without it the active state is invisible on those themes. */
.btn.is-active,
.btn.btn--ghost.is-active {
color: var(--rosewater);
background: var(--mauve);
border-color: var(--mauve);
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--crust) 35%, transparent),
0 0 0 1px color-mix(in srgb, var(--mauve) 45%, transparent);
}
/* The vim toggle is desktop-only — vim mode auto-disables below 768px, so the
* button is a no-op there. Unlayered media query (Tailwind `hidden` would
* lose the cascade to `.btn { display: inline-flex }`). */
@media (max-width: 767px) {
.btn.vim-toggle { display: none !important; }
} }
/* Sizes */ /* Sizes */