Refactor frontend
* restructured JavaScript using backbone.js * replaced highlight.js with CodeMirror for its editor * added CodeMirror Solarized (dark) theme based on Ethan Schoonover's solarized.vim * changed `POST /document` to accept real JSON * cleaned up template and stylesheet
This commit is contained in:
Michael Macias
parent
90cfe0ec57
commit
1950cc8db0
10 changed files with 426 additions and 681 deletions
|
|
@ -1,168 +1,201 @@
|
|||
html, body, div, pre, textarea, header, h1, a, nav, ul, li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #002B36;
|
||||
padding: 20px 50px;
|
||||
margin: 0px;
|
||||
font: 13px monospace;
|
||||
}
|
||||
|
||||
/* textarea */
|
||||
|
||||
textarea {
|
||||
background: transparent;
|
||||
border: 0px;
|
||||
color: #fff;
|
||||
padding: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: monospace;
|
||||
outline: none;
|
||||
resize: none;
|
||||
font-size: 13px;
|
||||
header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* the line numbers */
|
||||
|
||||
#linenos {
|
||||
color: #7d7d7d;
|
||||
z-index: -1000;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 0px;
|
||||
width: 30px; /* 30 to get 20 away from box */
|
||||
font-size: 13px;
|
||||
font-family: monospace;
|
||||
text-align: right;
|
||||
header h1 {
|
||||
background: #00222b;
|
||||
padding: 5px 22px;
|
||||
}
|
||||
|
||||
/* code box when locked */
|
||||
|
||||
#box {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
width: 100%;
|
||||
border: 0px;
|
||||
outline: none;
|
||||
font-size: 13px;
|
||||
header h1 a {
|
||||
background: transparent url('logo.png') no-repeat top center;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-indent: -9999px;
|
||||
width: 126px;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
#box code {
|
||||
padding: 0px;
|
||||
background: transparent !important; /* don't hide hastebox */
|
||||
header h1 a:hover {
|
||||
background-position: bottom center;
|
||||
}
|
||||
|
||||
/* key */
|
||||
|
||||
#key {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
z-index: +1000; /* watch out */
|
||||
header ul {
|
||||
background: #08323c;
|
||||
font-size: 0;
|
||||
list-style: none;
|
||||
/*overflow: hidden;*/
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#box1 {
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
background: #00222b;
|
||||
header ul li {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#box2 {
|
||||
background: #08323c;
|
||||
font-size: 0px;
|
||||
padding: 0px 5px;
|
||||
header ul li .pointer {
|
||||
background: transparent url('hover-dropdown-tip.png') no-repeat;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
width: 10px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
#box1 a.logo, #box1 a.logo:visited {
|
||||
display: inline-block;
|
||||
background: url(logo.png);
|
||||
width: 126px;
|
||||
height: 42px;
|
||||
header ul li a {
|
||||
background: transparent url('function-icons.png');
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-indent: -9999px;
|
||||
width: 32px;
|
||||
height: 37px;
|
||||
}
|
||||
|
||||
#box1 a.logo:hover {
|
||||
background-position: 0 bottom;
|
||||
header ul li a.disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#box2 .function {
|
||||
background: url(function-icons.png);
|
||||
width: 32px;
|
||||
height: 37px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
header li a.save { background-position: -5px center; }
|
||||
header li a.save:hover { background-position: -5px bottom; }
|
||||
header li a.save.disabled { background-position: -5px top; }
|
||||
|
||||
header li a.new { background-position: -42px center; }
|
||||
header li a.new:hover { background-position: -42px bottom; }
|
||||
header li a.new.disabled { background-position: -42px top; }
|
||||
|
||||
header li a.edit { background-position: -79px center; }
|
||||
header li a.edit:hover { background-position: -79px bottom; }
|
||||
header li a.edit.disabled { background-position: -79px top; }
|
||||
|
||||
header li a.raw { background-position: -116px center; }
|
||||
header li a.raw:hover { background-position: -116px bottom; }
|
||||
header li a.raw.disabled { background-position: -116px top; }
|
||||
|
||||
header li a.twitter { background-position: -153px center; }
|
||||
header li a.twitter:hover { background-position: -153px bottom; }
|
||||
header li a.twitter.disabled { background-position: -153px top; }
|
||||
|
||||
#editor {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#box2 .link embed {
|
||||
vertical-align: bottom; /* fix for zeroClipboard style */
|
||||
.CodeMirror {
|
||||
line-height: 1em;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#box2 .function.enabled:hover {
|
||||
cursor: hand;
|
||||
cursor: pointer;
|
||||
.CodeMirror-scroll {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#pointer {
|
||||
display: block;
|
||||
height: 5px;
|
||||
width: 10px;
|
||||
background: url(hover-dropdown-tip.png);
|
||||
bottom: 0px;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
.CodeMirror-gutter {
|
||||
height: 100%;
|
||||
min-width: 2em;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#box3, #messages li {
|
||||
background: #173e48;
|
||||
font-family: Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
padding: 10px 15px;
|
||||
.CodeMirror-gutter-text {
|
||||
text-align: right;
|
||||
padding: 0.4em 0.2em 0.4em 0.4em;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
#box3 .label, #messages li {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
.CodeMirror-lines {
|
||||
padding: 0.4em;
|
||||
}
|
||||
|
||||
#box3 .shortcut {
|
||||
color: #c4dce3;
|
||||
font-weight: normal;
|
||||
.CodeMirror textarea {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
#box2 .function.save { background-position: -5px top; }
|
||||
#box2 .function.enabled.save { background-position: -5px center; }
|
||||
#box2 .function.enabled.save:hover { background-position: -5px bottom; }
|
||||
|
||||
#box2 .function.new { background-position: -42px top; }
|
||||
#box2 .function.enabled.new { background-position: -42px center; }
|
||||
#box2 .function.enabled.new:hover { background-position: -42px bottom; }
|
||||
|
||||
#box2 .function.duplicate { background-position: -79px top; }
|
||||
#box2 .function.enabled.duplicate { background-position: -79px center; }
|
||||
#box2 .function.enabled.duplicate:hover { background-position: -79px bottom; }
|
||||
|
||||
#box2 .function.raw { background-position: -116px top; }
|
||||
#box2 .function.enabled.raw { background-position: -116px center; }
|
||||
#box2 .function.enabled.raw:hover { background-position: -116px bottom; }
|
||||
|
||||
#box2 .function.twitter { background-position: -153px top; }
|
||||
#box2 .function.enabled.twitter { background-position: -153px center; }
|
||||
#box2 .function.enabled.twitter:hover { background-position: -153px bottom; }
|
||||
|
||||
#messages {
|
||||
position:fixed;
|
||||
top:0px;
|
||||
right:138px;
|
||||
margin:0;
|
||||
padding:0;
|
||||
width:400px;
|
||||
.CodeMirror pre.CodeMirror-cursor {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#messages li {
|
||||
background:rgba(23,62,72,0.8);
|
||||
margin:0 auto;
|
||||
list-style:none;
|
||||
.CodeMirror-focused pre.CodeMirror-cursor {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#messages li.error {
|
||||
background:rgba(102,8,0,0.8);
|
||||
span.cm-header, span.cm-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
span.cm-em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
span.cm-emstrong {
|
||||
font-style: italic; font-weight: bold;
|
||||
}
|
||||
|
||||
span.cm-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Solarized (dark) theme */
|
||||
|
||||
.cm-s-solarized-dark {
|
||||
background: #002b36;
|
||||
color: #839496;
|
||||
}
|
||||
|
||||
.cm-s-solarized-dark div.CodeMirror-selected {
|
||||
background: #586e75;
|
||||
}
|
||||
|
||||
.cm-s-solarized-dark .CodeMirror-gutter {
|
||||
background: #073642;
|
||||
}
|
||||
|
||||
.cm-s-solarized-dark .CodeMirror-gutter-text {
|
||||
color: #586e75;
|
||||
}
|
||||
|
||||
.cm-s-solarized-dark .CodeMirror-cursor {
|
||||
border-left: 1px solid #839496;
|
||||
}
|
||||
|
||||
.cm-s-solarized-dark span.cm-keyword { color: #268bd2; }
|
||||
.cm-s-solarized-dark span.cm-atom { color: #b58900; }
|
||||
.cm-s-solarized-dark span.cm-number { color: #2aa198; }
|
||||
.cm-s-solarized-dark span.cm-def { color: #839496; }
|
||||
.cm-s-solarized-dark span.cm-variable { color: #839496; }
|
||||
.cm-s-solarized-dark span.cm-variable-2 { color: #b58900; }
|
||||
.cm-s-solarized-dark span.cm-variable-3 { color: #268bd2; }
|
||||
.cm-s-solarized-dark span.cm-property { color: #859900; }
|
||||
.cm-s-solarized-dark span.cm-operator { color: #2aa198; }
|
||||
.cm-s-solarized-dark span.cm-comment { color: #586e75; }
|
||||
.cm-s-solarized-dark span.cm-string { color: #2aa198; }
|
||||
.cm-s-solarized-dark span.cm-string-2 { color: #2aa198; }
|
||||
.cm-s-solarized-dark span.cm-meta { color: #586e75; }
|
||||
.cm-s-solarized-dark span.cm-error { color: #dc322f; }
|
||||
.cm-s-solarized-dark span.cm-qualifier { color: #268bd2; }
|
||||
.cm-s-solarized-dark span.cm-builtin { color: #b58900; }
|
||||
.cm-s-solarized-dark span.cm-bracket { color: #dc322f; }
|
||||
.cm-s-solarized-dark span.cm-tag { color: #268bd2; }
|
||||
.cm-s-solarized-dark span.cm-attribute { color: #839496; }
|
||||
.cm-s-solarized-dark span.cm-header { color: #cb4b16; }
|
||||
.cm-s-solarized-dark span.cm-quote { color: #586e75; }
|
||||
.cm-s-solarized-dark span.cm-hr { color: #cb4b16; }
|
||||
.cm-s-solarized-dark span.cm-link { color: #6c71c4; }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue