writeas
/
chrome
mirror of https://github.com/writeas/paste-chrome


			
				
					
						
						
							
							<!doctype html>
<html>
  <head>
    <title>Write.as</title>
    <style>
    body, input[type=submit], button, label[for=norm], textarea.norm {
      font-family: Lora, serif;
    }
    #url, #result-holder, label[for=sans], textarea.sans {
      font-family: 'Open Sans', sans-serif;
    }
    body {
      font-size: 100%;
      padding: 0.5em;
    }
    textarea, textarea:focus {
      border: 1px solid #dfdfdf;
    }
    textarea, textarea:focus, input {
      outline: 0;
    }
    textarea {
      margin-bottom: 0.5em;
      min-width: 38em;
      min-height: 20em;
      width: 100%;
      padding: 1em;
      font-size: 1em;
      box-sizing: border-box;
      resize: none;
    }
    input {
      padding: 0.5em;
    }
    input[type=submit], button {
      border: 1px solid rgb(114, 120, 191);
      background: rgb(114, 120, 191);
      color: white;
      margin-left: 0.5em;
      width: 7em;
      text-align: center;
      font-size: 0.86em;
      transition: all .2s ease-out;
      border-radius: .25em;
    }
    button {
      padding: 0.25em 1em;
      width: auto;
    }
    button.secondary {
      background: #aaa;
      border: 1px solid #aaa;
    }
    #buttons {
      text-align: right;
    }
    input[type=submit]:hover, button.primary:hover {
      background-color: #7d82c4;
    }
    button.secondary:hover {
      background-color: #afafaf;
    }
    input[type=submit].disabled, input[type=submit].disabled:hover {
      background: #ddd;
      color: #999;
      border-color: #eee;
    }
    #publish-holder, #result-holder {
      text-align: right;
    }
    body.popout a#popout, #result-holder, #account-tools, #modal {
      display: none;
    }
    #url {
      width: 18em;
      margin-right: 0.5em;
    }
    label[for=mono], label[for=wrap], label[for=code], textarea.mono, textarea.wrap, textarea.code {
      font-family: monospace, monospace;
      font-size: 1em;
    }
    textarea.mono, textarea.code {
      white-space: pre;
    }
    label, label[for=mono], label[for=wrap], label[for=code] {
      font-size: 0.86em;
    }
    body.popout #publish-holder, body.popout #result-holder {
      position: fixed;
      bottom: 1em;
      left: 1em;
      right: 1em;
    }
    #account-tools {
      margin-top: -0.5em;
      margin-bottom: 0.5em;
      font-size: 0.86em;
    }
    #account-tools a {
      line-height: 24px;
      margin-left: 0.5em;
    }
    body.popout textarea {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 4em;
      border: 0;
      border-bottom: 1px solid #dfdfdf;
      min-height: 0;
    }
    a#popout {
      padding: 0.5em;
      position: absolute;
      left: 0.75em;
      bottom: 0.75em;
    }
    a#popout img {
      vertical-align: middle;
    }
    #username {
      font-weight: bold;
    }
    #sync.disabled {
      display: inline;
      color: #999;
      font-style: italic;
      text-decoration: none;
    }
    #modal {
      position: absolute;
      top: 0;
      background: white;
      padding: 0.5em 2em 2em;
      border-bottom: 1px solid #dfdfdf;
    }
    </style>

    <script src="H.js"></script>
    <script src="popup.js"></script>
  </head>
  <body>
    <form name="postForm" method="post">
      <div id="account-tools">
        Writing as <span id="username">write.as</span>. <a id="sync" href="#">Sync...</a>
      </div>
      <div style="position: relative">
        <div id="modal">
          <div id="modal-body"></div>
          <div id="buttons"><button class="secondary">Cancel</button> <button class="primary">Sync</button></div>
        </div>
      </div>
      <textarea id="content" placeholder="Write..."></textarea>
      <div id="result-holder">
        <input id="url" type="url" readonly />
        <a id="url-link" target="_blank">Open</a>
      </div>
      <div id="publish-holder">
        <input type="radio" name="font" value="sans" id="sans" checked="checked" /><label for="sans"> Sans</label>
        <input type="radio" name="font" value="norm" id="norm" /><label for="norm"> Serif</label>
        <input type="radio" name="font" value="mono" id="mono" /><label for="mono"> Monospace</label>
        <input type="radio" name="font" value="wrap" id="wrap" /><label for="wrap"> Wrap</label>
        <input type="radio" name="font" value="code" id="code" /><label for="code"> Code</label>
        <input id="publish" type="submit" value="Publish" />
        <a href="#" id="popout"><img src="img/ic_launch.svg" /></a>
      </div>
    </form>
    
    <link href='fonts.css' rel='stylesheet' type='text/css'>
  </body>
</html>