67 lines
1.3 KiB
CSS
67 lines
1.3 KiB
CSS
div.prism-live {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-flow: column;
|
|
}
|
|
|
|
textarea.prism-live,
|
|
pre.prism-live {
|
|
padding: .2rem .5rem;
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
}
|
|
|
|
textarea.prism-live {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
color: transparent;
|
|
/* color: hsla(0,0%,50%,.4); */
|
|
cursor: text;
|
|
white-space: pre;
|
|
border: 0;
|
|
outline: none;
|
|
background: transparent;
|
|
resize: none;
|
|
--selection-background: hsl(320, 80%, 25%);
|
|
--selection-color: hsla(0, 0%, 100%, .8);
|
|
}
|
|
|
|
@supports (not (caret-color: black)) and (-webkit-text-fill-color: black) {
|
|
textarea.prism-live {
|
|
color: inherit;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
}
|
|
|
|
/* Setting specific colors is needed
|
|
* because otherwise Firefox shows blank text */
|
|
textarea.prism-live::-moz-selection {
|
|
background: var(--selection-background);
|
|
color: var(--selection-color);
|
|
}
|
|
|
|
textarea.prism-live::selection {
|
|
background: var(--selection-background);
|
|
color: var(--selection-color);
|
|
}
|
|
|
|
pre.prism-live {
|
|
flex: 1;
|
|
position: relative;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
max-height: 100%;
|
|
--scrollbar-width: 17px;
|
|
padding-bottom: var(--scrollbar-width);
|
|
padding-right: var(--scrollbar-width);
|
|
}
|
|
|
|
pre.prism-live > code:empty::before {
|
|
content: " "
|
|
}
|