ByoungSooPark/modeling-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tweak text constrast, blinking cursor (#338)

Browse Source
This commit is contained in:
Frank Noirot
2023-08-31 08:17:26 -04:00
committed by GitHub
parent 56cfb6d1f0
commit 3507da7b39
3 changed files with 32 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/AppHeader.tsx
View File

@ -27,7 +27,7 @@ export const AppHeader = ({
return ( return (
<header <header
className={ className={
'overlaid-panes sticky top-0 z-20 py-1 px-5 bg-chalkboard-10/50 dark:bg-chalkboard-100/50 border-b dark:border-b-2 border-chalkboard-30 dark:border-chalkboard-90 flex justify-between items-center ' + 'overlaid-panes sticky top-0 z-20 py-1 px-5 bg-chalkboard-10/70 backdrop-blur-sm dark:bg-chalkboard-100/50 dark:backdrop-blur-0 border-b dark:border-b-2 border-chalkboard-30 dark:border-chalkboard-90 flex justify-between items-center ' +
className className
} }
> >

4
src/components/CollapsiblePanel.module.css
View File

@ -1,10 +1,10 @@
.panel { .panel {
@apply relative overflow-auto z-0; @apply relative overflow-auto z-0;
@apply bg-chalkboard-20/40; @apply bg-chalkboard-10/70 backdrop-blur-sm;
} }
:global(.dark) .panel { :global(.dark) .panel {
@apply bg-chalkboard-110/50; @apply bg-chalkboard-110/50 backdrop-blur-0;
} }
.header { .header {

38
src/index.css
View File

@ -86,8 +86,18 @@ code {
@apply bg-transparent; @apply bg-transparent;
} }
#code-mirror-override .cm-activeLine,
#code-mirror-override .cm-activeLineGutter {
@apply bg-liquid-10/50;
}
.dark #code-mirror-override .cm-activeLine,
.dark #code-mirror-override .cm-activeLineGutter {
@apply bg-liquid-80/50;
}
#code-mirror-override .cm-gutters { #code-mirror-override .cm-gutters {
@apply bg-chalkboard-10/50; @apply bg-chalkboard-10/30;
} }
.dark #code-mirror-override .cm-gutters { .dark #code-mirror-override .cm-gutters {
@ -99,14 +109,24 @@ code {
} }
#code-mirror-override .cm-cursor { #code-mirror-override .cm-cursor {
display: block; display: block;
width: 200px; width: 1ch;
background: linear-gradient( @apply bg-liquid-40 mix-blend-multiply;
to right,
rgb(0, 55, 94) 0%, animation: blink 2s ease-out infinite;
#0084e2ff 2%, }
#0084e255 5%,
transparent 100% .dark #code-mirror-override .cm-cursor {
); @apply bg-liquid-50;
}
@keyframes blink {
0%,
100% {
opacity: 0;
}
15% {
opacity: 0.75;
}
} }
.react-json-view { .react-json-view {