Better styling for pane and KCL editor focus (#2691)

* Pane styling first steps

* More style tweaks

* Make pane background nearly opaque when focus is within them
This commit is contained in:
Frank Noirot
2024-06-18 12:42:47 -04:00
committed by GitHub
parent e42a891df8
commit 2386ba24e5
4 changed files with 94 additions and 83 deletions

View File

@ -2,7 +2,7 @@
@apply relative z-0 rounded-r max-w-full h-full flex-1;
display: grid;
grid-template-rows: auto 1fr;
@apply bg-chalkboard-10/50 backdrop-blur-sm border border-chalkboard-20;
@apply bg-chalkboard-10/50 focus-within:bg-chalkboard-10/90 backdrop-blur-sm border border-chalkboard-20;
scroll-margin-block-start: 41px;
}
@ -12,7 +12,7 @@
}
:global(.dark) .panel {
@apply bg-chalkboard-100/50 backdrop-blur-[3px] border-chalkboard-80;
@apply bg-chalkboard-100/50 focus-within:bg-chalkboard-100/90 backdrop-blur-[3px] border-chalkboard-80;
}
.header {

View File

@ -46,7 +46,11 @@ export const ModelingPane = ({
data-testid={detailsTestId}
id={id}
className={
pointerEventsCssClass + styles.panel + ' group ' + (className || '')
'group-focus-within:border-primary dark:group-focus-within:border-chalkboard-50 ' +
pointerEventsCssClass +
styles.panel +
' group ' +
(className || '')
}
>
<ModelingPaneHeader title={title} Menu={Menu} />

View File

@ -123,6 +123,7 @@ function ModelingSidebarSection({
}, [showDebugPanel.current, togglePane, openPanes])
return (
<div className="group contents">
<Tab.Group
vertical
selectedIndex={
@ -142,7 +143,8 @@ function ModelingSidebarSection({
(currentPane === 'none'
? ' rounded-r focus-within:!border-primary/50'
: ' border-r-0') +
' p-2 col-start-1 col-span-1 h-fit w-fit flex flex-col items-start gap-2 bg-chalkboard-10 border border-solid border-chalkboard-20 dark:bg-chalkboard-90 dark:border-chalkboard-80 ' +
' p-2 col-start-1 col-span-1 h-fit w-fit flex flex-col items-start gap-2 ' +
'bg-chalkboard-10 border border-solid border-chalkboard-20 dark:bg-chalkboard-90 dark:border-chalkboard-80 group-focus-within:border-primary dark:group-focus-within:border-chalkboard-50 ' +
(openPanes.length === 1 && currentPane === 'none' ? 'pr-0.5' : '')
}
>
@ -187,6 +189,7 @@ function ModelingSidebarSection({
))}
</Tab.Panels>
</Tab.Group>
</div>
)
}

View File

@ -147,15 +147,33 @@ code {
#code-mirror-override .cm-activeLine,
#code-mirror-override .cm-activeLineGutter {
@apply bg-primary/10;
@apply bg-primary/5;
}
.dark #code-mirror-override .cm-activeLine,
.dark #code-mirror-override .cm-activeLineGutter {
@apply bg-primary/20;
@apply bg-chalkboard-70/20;
mix-blend-mode: lighten;
}
#code-mirror-override .cm-focused .cm-activeLine,
#code-mirror-override .cm-focused .cm-activeLineGutter {
@apply bg-primary/10;
}
.dark #code-mirror-override .cm-focused .cm-activeLine,
.dark #code-mirror-override .cm-focused .cm-activeLineGutter {
@apply bg-chalkboard-70/40;
}
#code-mirror-override .cm-matchingBracket {
@apply bg-primary/20;
}
.dark #code-mirror-override .cm-matchingBracket {
@apply bg-chalkboard-70/60;
}
#code-mirror-override .cm-gutters {
@apply bg-chalkboard-10/30;
}
@ -171,22 +189,8 @@ code {
@apply caret-chalkboard-10;
}
#code-mirror-override .cm-focused .cm-cursor {
width: 0px;
}
#code-mirror-override .cm-cursor {
display: block;
width: 1ch;
@apply mix-blend-multiply;
@apply border-l-primary;
}
.dark #code-mirror-override .cm-cursor {
@apply border-l-chalkboard-10;
}
#code-mirror-override.blink .cm-cursor {
animation: blink 1200ms ease-out infinite;
#code-mirror-override .cm-focused {
outline: none;
}
@keyframes blink {