Advertisement
Guest User

Untitled

a guest
Jun 25th, 2019
76
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.95 KB | None | 0 0
  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. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement