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 (
<header
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
}
>

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

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

38
src/index.css
View File

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