1950cc8db0
* 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
202 lines
4.5 KiB
CSS
202 lines
4.5 KiB
CSS
html, body, div, pre, textarea, header, h1, a, nav, ul, li {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font: 13px monospace;
|
|
}
|
|
|
|
header {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
}
|
|
|
|
header h1 {
|
|
background: #00222b;
|
|
padding: 5px 22px;
|
|
}
|
|
|
|
header h1 a {
|
|
background: transparent url('logo.png') no-repeat top center;
|
|
display: block;
|
|
overflow: hidden;
|
|
text-indent: -9999px;
|
|
width: 126px;
|
|
height: 42px;
|
|
}
|
|
|
|
header h1 a:hover {
|
|
background-position: bottom center;
|
|
}
|
|
|
|
header ul {
|
|
background: #08323c;
|
|
font-size: 0;
|
|
list-style: none;
|
|
/*overflow: hidden;*/
|
|
text-align: center;
|
|
}
|
|
|
|
header ul li {
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
|
|
header ul li .pointer {
|
|
background: transparent url('hover-dropdown-tip.png') no-repeat;
|
|
display: inline-block;
|
|
text-align: center;
|
|
width: 10px;
|
|
height: 5px;
|
|
}
|
|
|
|
header ul li a {
|
|
background: transparent url('function-icons.png');
|
|
display: block;
|
|
overflow: hidden;
|
|
text-indent: -9999px;
|
|
width: 32px;
|
|
height: 37px;
|
|
}
|
|
|
|
header ul li a.disabled {
|
|
cursor: default;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
.CodeMirror {
|
|
line-height: 1em;
|
|
height: 100%;
|
|
}
|
|
|
|
.CodeMirror-scroll {
|
|
height: 100%;
|
|
overflow: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.CodeMirror-gutter {
|
|
height: 100%;
|
|
min-width: 2em;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.CodeMirror-gutter-text {
|
|
text-align: right;
|
|
padding: 0.4em 0.2em 0.4em 0.4em;
|
|
white-space: pre;
|
|
}
|
|
|
|
.CodeMirror-lines {
|
|
padding: 0.4em;
|
|
}
|
|
|
|
.CodeMirror textarea {
|
|
outline: 0;
|
|
}
|
|
|
|
.CodeMirror pre.CodeMirror-cursor {
|
|
position: absolute;
|
|
visibility: hidden;
|
|
z-index: 10;
|
|
}
|
|
|
|
.CodeMirror-focused pre.CodeMirror-cursor {
|
|
visibility: visible;
|
|
}
|
|
|
|
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; }
|