SHARE
TWEET

Untitled

a guest Jun 25th, 2019 48 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. * {
  2.   padding: 0;
  3.   margin: 0;
  4. }
  5. html,
  6. body {
  7.   height: 100%;
  8.   overflow: hidden;
  9.   width: 100%;
  10. }
  11. body {
  12.   display: grid;
  13.   grid-template-columns: 1fr 1fr;
  14.   grid-template-rows: fit-content(100%);
  15. }
  16. #controls,
  17. #exports {
  18.   padding: 4px;
  19. }
  20. textarea,
  21. #preview {
  22.   border-color: #000;
  23.   border-style: solid;
  24.   border-width: 1px 0 0 0;
  25. }
  26. #exports {
  27.   display: flex;
  28. }
  29. #exports > button {
  30.   margin-left: 4px;
  31. }
  32. .flexSpace {
  33.   flex-grow: 1;
  34. }
  35. #preview {
  36.   background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEXv7+////9mUzfqAAAAFElEQVQIW2NksN/ISAz+f9CBGAwAxtEddZlnB4IAAAAASUVORK5CYII=");
  37.   overflow: auto;
  38. }
  39. textarea {
  40.   border-right-width: 1px;
  41.   padding: 4px;
  42.   resize: none;
  43. }
  44. iframe {
  45.   background: #fff;
  46.   border: 0;
  47. }
  48. label > input {
  49.   margin-right: 0.5em;
  50.   position: relative;
  51.   top: 0.25em;
  52. }
  53.  
  54. /* Some proposals */
  55.  
  56. #controls {
  57.   display:flex;
  58.   padding: 1px;
  59. }
  60.  
  61. #reduce {
  62.   background-color: #fc0;
  63.   -moz-appearance: none;
  64.   -webkit-appearance: none;
  65.   border: none;
  66.   border-radius: 3px;
  67.   text-transform: uppercase;
  68.   font-weight: bold;
  69.   padding: 12px 13px 11px;
  70.   text-align: center;
  71.   display: inline-block;
  72.   height: 100%;
  73. }
  74.  
  75. label {
  76.   display:flex;
  77.   font-family: sans-serif;
  78.   font-size: .8em;
  79.   margin: 0 1px;
  80.   padding: 4px;
  81.   border: none;
  82.   border-radius: 3px;
  83.   background-color: #6D8C2E;
  84.   color: white;
  85. }
  86.  
  87. #showSameViewportSize {
  88.   background-color: #C45A20;
  89.   width: 25%;
  90.   text-transform: uppercase;
  91.   display: flex;
  92.   align-items: center;
  93.   justify-content: center;
  94.   height: 100%;
  95.   margin-left: -4px;
  96.   margin-top: -3px;
  97. }
  98.  
  99. #preview {
  100.   border: 2px solid #C45A20;
  101. }
  102. textarea {border: none;
  103.     font-family: monospace;
  104.     font-size: 16px;
  105.     line-height: 2.5ch;
  106.     white-space: pre-wrap;
  107.     background-color: hsla(0, 0%, 95%, 1);
  108.     padding: 1ch;
  109.     background-position: 0 1ch;
  110.     background-size: 1ch 2.5ch;
  111.     background-image: linear-gradient(hsla(0, 0%, 99%, 1) 2px, transparent 1px), linear-gradient(90deg, hsla(0, 0%, 98%, 1) 1px, transparent 1px);
  112. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top