diff --git a/app/assets/stylesheets/lexxy.css b/app/assets/stylesheets/lexxy.css index eb19c788a..f2dd41d2e 100644 --- a/app/assets/stylesheets/lexxy.css +++ b/app/assets/stylesheets/lexxy.css @@ -88,6 +88,8 @@ } lexxy-toolbar { + --lexxy-toolbar-icon-size: 1em; + background-color: inherit; border-block-end: 1px solid var(--color-ink-light); color: currentColor; @@ -112,48 +114,60 @@ min-inline-size: 30ch; } } + } - > button { - aspect-ratio: 4/3.5; - appearance: none; - background-color: transparent; - block-size: 2em; - border: none; - border-radius: 0.2em; - color: currentColor; - cursor: pointer; - display: grid; - font-size: inherit; - inline-size: auto; - place-items: center; - transition: background-color 300ms ease; + .lexxy-editor__toolbar-button { + --toolbar-button-size: 44px; - svg { - -webkit-touch-callout: none; - block-size: 0.85em; - fill: currentColor; - grid-area: 1/1; - inline-size: auto; - user-select: none; - } + appearance: none; + aspect-ratio: 1; + background-color: transparent; + block-size: var(--toolbar-button-size); + border: none; + border-radius: 0.2em; + color: currentColor; + cursor: pointer; + display: grid; + font-size: inherit; + place-items: center; - &:is(:focus, :hover) { - background-color: var(--color-ink-lighter); - box-shadow: none; - } + &:is(:focus, :hover) { + background-color: var(--color-ink-lighter); + box-shadow: none; + } - &:is(:active) { - background-color: var(--color-selected); - } + &:is(:active), + &[aria-pressed="true"] { + background-color: var(--color-selected); + } - &[aria-pressed="true"] { - background-color: var(--color-selected); - } + svg { + -webkit-touch-callout: none; + block-size: var(--lexxy-toolbar-icon-size); + fill: currentColor; + grid-area: 1/1; + inline-size: var(--lexxy-toolbar-icon-size); + user-select: none; + } + + @media (min-width: 640px) { + --toolbar-button-size: 2em; } } + .lexxy-editor__toolbar-overflow-menu { + background-color: var(--color-canvas); + border-radius: 0.5ch; + box-shadow: var(--shadow); + display: flex; + inset-inline-end: 0; + padding: 4px; + position: absolute; + z-index: 1; + } + + /* Based on .input, .input--select */ .lexxy-code-language-picker { - /* Based on .input, .input--select */ -webkit-appearance: none; appearance: none; background-color: var(--color-canvas); diff --git a/app/assets/stylesheets/reset.css b/app/assets/stylesheets/reset.css index e224c8cf9..959a6e60b 100644 --- a/app/assets/stylesheets/reset.css +++ b/app/assets/stylesheets/reset.css @@ -71,9 +71,18 @@ cursor: pointer; } + summary { + &::-webkit-details-marker { + display: none; + } + + &::marker { + content: ""; + } + } + /* Remove all animations and transitions for people that prefer not to see them */ @media (prefers-reduced-motion: reduce) { - *, *::before, *::after { diff --git a/app/assets/stylesheets/search.css b/app/assets/stylesheets/search.css index 4ce4fc214..371ed21fd 100644 --- a/app/assets/stylesheets/search.css +++ b/app/assets/stylesheets/search.css @@ -1,4 +1,20 @@ +summary { + + &::-webkit-details-marker { + display: none !important; + } + + &::marker { + display: none !important; + } + + &::marker { + content: ""; + } +} + @layer components { + .search { --gap: 4vmin; --width: 80ch;