svg.escobar.life

 /*  This program is free software: you can redistribute it and/or modify
     it under the terms of the GNU General Public License as published by
     the Free Software Foundation, either version 3 of the License, or
     (at your option) any later version.
 
     This program is distributed in the hope that it will be useful,
     but WITHOUT ANY WARRANTY; without even the implied warranty of
     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
     GNU General Public License for more details.
 
     You should have received a copy of the GNU General Public License
     along with this program. If not, see <https://www.gnu.org/licenses/>. */
 
 :root {
   align-self: center;
   align-content: center;
   align-items: center;
 
   cursor: default;
   user-select: none;
   scrollbar-width: none;
 
   --background: #151226;
   --foreground: #dfdfdf;
   --accent: #90ff68;
 
   --selection: #A599E940;
   --dark: #0b0913;
 
   --tag: #FF4E56;
   --attribute: var(--accent);
   --string: #FFE86E;
   --comm: #68CDFF;
 
   --indent: 3em;
 }
 
 body {
   height: 100vh;
   min-height: 25vw;
   padding: 0;
   margin: 0;
 
   background: var(--background);
 }
 
 body, button, .elmsh, textarea {
   font-size: 13pt;
   line-height: 1.4em;
   font-family: monospace;
   color: var(--foreground);
 }
 
 #container {
   display: grid;
 
   grid-gap: 1em;
   grid-template-rows: 30vh auto;
 
   height: calc(100% - 2em);
   padding: 1em;
 
   background: var(--background);
 }
 
 @media (orientation: landscape) {
   #container {
     grid-template-columns: minmax(22em, 1fr) 2fr;
     grid-template-rows: 100%;
   }
 }
 
 #container #display img {
   grid-area: image;
 
   max-width: 100% !important;
   max-height: 100% !important;
 
   justify-self: center;
   align-self: center;
 }
 
 @media (orientation: portrait) {
   #container #display img#image {
     max-height: calc(30vh - 4.8em) !important;
   }
 }
 
 #container, #container * {
   transition: background-color .25s ease, fill .25s ease;
 }
 
 #container #display {
   display: grid;
 
   grid-template-rows: auto 2em;
   grid-template-columns: repeat(3, 1fr);
   grid-template-areas: "image  image  image"
   "button button button";
   grid-gap: 1em;
 
   padding: 1em;
   background: var(--foreground);
   border-radius: 6pt;
 }
 
 #container.dark button {
   background: var(--foreground) !important;
   color: var(--background) !important;
 }
 
 #container.dark #display {
   background: var(--dark);
 }
 
 #container #display button {
   grid-area: auto;
   display: flex;
 
   background: var(--background);
   border: none;
   cursor: pointer;
   border-radius: 6pt;
 
   line-height: 2em;
   text-align: center;
   color: var(--foreground);
 
   overflow-y: hidden;
 }
 
 #container #display button span {
   margin: 0 auto;
 }
 
 #container #display img#error {
   width: 100%;
   height: 100%;
 }
 
 #container #display img#error, #container.error #display img#image {
   display: none;
 }
 
 #container.error #display #error {
   display: block;
 }
 
 #container #editor {
   position: relative;
 
   width: 100%;
   height: 100%;
 
   overflow: hidden;
   line-height: 1em;
 }
 
 #container #editor > * {
   position: absolute;
   will-change: transform;
 }
 
 #container #editor * {
   margin: 0;
 }
 
 #container #editor textarea {
   z-index: 1;
 
   resize: none;
   white-space: pre;
   overflow: scroll;
 
   width: calc(100% - var(--indent));
   height: 100%;
   margin-left: var(--indent);
 
   outline: none;
 
   border: none;
   background: transparent;
 
   color: transparent;
   caret-color: var(--foreground);
 
   scrollbar-color: var(--foreground) transparent;
   scrollbar-width: thin;
 }
 
 #container #editor textarea::-webkit-scrollbar,
 #container #editor textarea::-webkit-scrollbar-track {
   width: 11px;
   height: 11px;
   background: transparent;
   outline: none;
 }
 
 #container #editor textarea::-webkit-scrollbar-thumb {
   background: var(--foreground);
   outline: none;
 }
 
 #container #editor textarea::selection {
   background: var(--selection);
   color: transparent;
 }
 
 #noscript {
   display: flex;
   width: 100%;
   height: 100%;
 }
 
 #noscript > * {
   margin: auto;
 }
 
 .elmsh-line::before {
   display: inline-block;
   width: calc(var(--indent) - 1em);
   margin-right: 1em;
   text-align: right;
 
   content: attr(data-elmsh-lc);
   font-weight: bold;
 }
 
 .elmsh-comm {
   font-style: italic;
   color: var(--comm);
 }
 
 .elmsh , .elmsh7 { color: var(--foreground); }
 .elmsh1, .elmsh2, .elmsh6 { color: var(--string); }
 .elmsh3, .elmsh4 { color: var(--tag); }
 .elmsh5 { color: var(--attribute); }