|
|
@ -74,19 +74,46 @@ var css = csjs` |
|
|
|
overflow-y : auto; |
|
|
|
overflow-y : auto; |
|
|
|
font-family : monospace; |
|
|
|
font-family : monospace; |
|
|
|
} |
|
|
|
} |
|
|
|
.terminal::after { |
|
|
|
.inner_terminal { |
|
|
|
content : ""; |
|
|
|
display : flex; |
|
|
|
|
|
|
|
flex-direction : column; |
|
|
|
|
|
|
|
height : 100%; |
|
|
|
|
|
|
|
padding-left : 5px; |
|
|
|
|
|
|
|
padding-right : 5px; |
|
|
|
|
|
|
|
padding-bottom : 3px; |
|
|
|
|
|
|
|
overflow-y : auto; |
|
|
|
|
|
|
|
font-family : monospace; |
|
|
|
background-image : url(assets/img/remix_logo_white_512x512.svg); |
|
|
|
background-image : url(assets/img/remix_logo_white_512x512.svg); |
|
|
|
opacity : .1; |
|
|
|
opacity : 0.1; |
|
|
|
top : 15%; |
|
|
|
top : 15%; |
|
|
|
left : 33%; |
|
|
|
left : 33%; |
|
|
|
bottom : 0; |
|
|
|
bottom : 0; |
|
|
|
right : 0; |
|
|
|
right : 0; |
|
|
|
position : absolute; |
|
|
|
position : absolute; |
|
|
|
z-index : 1; |
|
|
|
// z-index : -1;
|
|
|
|
background-repeat : no-repeat; |
|
|
|
background-repeat : no-repeat; |
|
|
|
background-size : 45%; |
|
|
|
background-size : 45%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.terminal_content { |
|
|
|
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
height: 100%; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.inner_terminal::after { |
|
|
|
|
|
|
|
// content : "";
|
|
|
|
|
|
|
|
// background-image : url(assets/img/remix_logo_white_512x512.svg);
|
|
|
|
|
|
|
|
// opacity : 0.1;
|
|
|
|
|
|
|
|
// top : 15%;
|
|
|
|
|
|
|
|
// left : 33%;
|
|
|
|
|
|
|
|
// bottom : 0;
|
|
|
|
|
|
|
|
// right : 0;
|
|
|
|
|
|
|
|
// position : absolute;
|
|
|
|
|
|
|
|
// // z-index : -1;
|
|
|
|
|
|
|
|
// background-repeat : no-repeat;
|
|
|
|
|
|
|
|
// background-size : 45%;
|
|
|
|
|
|
|
|
} |
|
|
|
.journal { |
|
|
|
.journal { |
|
|
|
margin-top : auto; |
|
|
|
margin-top : auto; |
|
|
|
font-family : monospace; |
|
|
|
font-family : monospace; |
|
|
@ -278,8 +305,12 @@ class Terminal { |
|
|
|
|
|
|
|
|
|
|
|
self._view.term = yo` |
|
|
|
self._view.term = yo` |
|
|
|
<div class=${css.terminal} onscroll=${throttle(reattach, 10)} onclick=${focusinput}> |
|
|
|
<div class=${css.terminal} onscroll=${throttle(reattach, 10)} onclick=${focusinput}> |
|
|
|
${self._view.journal} |
|
|
|
<div class=${css.inner_terminal}> |
|
|
|
${self._view.cli} |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class=${css.terminal_content}> |
|
|
|
|
|
|
|
${self._view.journal} |
|
|
|
|
|
|
|
${self._view.cli} |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
` |
|
|
|
` |
|
|
|
self._view.el = yo` |
|
|
|
self._view.el = yo` |
|
|
|