Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- * {
- padding: 0;
- margin: 0;
- }
- html,
- body {
- height: 100%;
- overflow: hidden;
- width: 100%;
- }
- body {
- display: grid;
- grid-template-columns: 1fr 1fr;
- grid-template-rows: fit-content(100%);
- }
- #controls,
- #exports {
- padding: 4px;
- }
- textarea,
- #preview {
- border-color: #000;
- border-style: solid;
- border-width: 1px 0 0 0;
- }
- #exports {
- display: flex;
- }
- #exports > button {
- margin-left: 4px;
- }
- .flexSpace {
- flex-grow: 1;
- }
- #preview {
- background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEXv7+////9mUzfqAAAAFElEQVQIW2NksN/ISAz+f9CBGAwAxtEddZlnB4IAAAAASUVORK5CYII=");
- overflow: auto;
- }
- textarea {
- border-right-width: 1px;
- padding: 4px;
- resize: none;
- }
- iframe {
- background: #fff;
- border: 0;
- }
- label > input {
- margin-right: 0.5em;
- position: relative;
- top: 0.25em;
- }
- /* Some proposals */
- #controls {
- display:flex;
- padding: 1px;
- }
- #reduce {
- background-color: #fc0;
- -moz-appearance: none;
- -webkit-appearance: none;
- border: none;
- border-radius: 3px;
- text-transform: uppercase;
- font-weight: bold;
- padding: 12px 13px 11px;
- text-align: center;
- display: inline-block;
- height: 100%;
- }
- label {
- display:flex;
- font-family: sans-serif;
- font-size: .8em;
- margin: 0 1px;
- padding: 4px;
- border: none;
- border-radius: 3px;
- background-color: #6D8C2E;
- color: white;
- }
- #showSameViewportSize {
- background-color: #C45A20;
- width: 25%;
- text-transform: uppercase;
- display: flex;
- align-items: center;
- justify-content: center;
- height: 100%;
- margin-left: -4px;
- margin-top: -3px;
- }
- #preview {
- border: 2px solid #C45A20;
- }
- textarea {border: none;
- font-family: monospace;
- font-size: 16px;
- line-height: 2.5ch;
- white-space: pre-wrap;
- background-color: hsla(0, 0%, 95%, 1);
- padding: 1ch;
- background-position: 0 1ch;
- background-size: 1ch 2.5ch;
- background-image: linear-gradient(hsla(0, 0%, 99%, 1) 2px, transparent 1px), linear-gradient(90deg, hsla(0, 0%, 98%, 1) 1px, transparent 1px);
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement