.note-textarea::-webkit-scrollbar {
height: 8px;
width: 8px;
}
.note-textarea::-webkit-scrollbar-thumb {
background: rgba(128, 128, 128, 0.3);
border-radius: 4px;
}
.note-container {
flex: 1;
display: flex;
flex-direction: column;
position: relative;
background: var(--primary);
font-family: "Source Code Pro", monospace;
margin: 0;
padding: 0;
}
.text-area-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
contain: layout style paint;
will-change: scroll-position;
}
.note-backdrop,
.note-textarea {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 20px;
border: 0;
outline: 0;
resize: none;
overflow-y: scroll;
font-family: "Source Code Pro", monospace;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-word;
tab-size: 4;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
scrollbar-width: thin;
scrollbar-color: rgba(128, 128, 128, 0.3) transparent;
contain: layout style;
will-change: scroll-position;
}
.note-backdrop {
background: transparent;
color: var(--color);
pointer-events: none;
z-index: 1;
user-select: none;
-webkit-user-select: none;
}
.note-textarea {
background: transparent;
color: transparent;
caret-color: var(--color);
z-index: 2;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
}
.note-textarea::-webkit-scrollbar,
.note-backdrop::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.note-textarea::-webkit-scrollbar-thumb,
.note-backdrop::-webkit-scrollbar-thumb {
background: rgba(128, 128, 128, 0.3);
border-radius: 4px;
}
.note-backdrop::-webkit-scrollbar {
display: none;
}
#noteTextarea,
#noteBackdrop {
font-family: "Source Code Pro", monospace;
font-size: 14px;
line-height: 1.5;
letter-spacing: 0;
white-space: pre-wrap;
tab-size: 4;
padding: 15px;
margin: 0;
border: none;
width: 100%;
height: 100%;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
}
#noteTextarea {
background: transparent;
color: transparent;
caret-color: var(--color);
z-index: 2;
}
#noteBackdrop {
background: transparent;
color: #fff;
z-index: 1;
pointer-events: none;
}
@media (max-width: 600px) {
.note-textarea {
padding: 24px;
}
}