haste-server/static/application.css
Michael Macias 1950cc8db0 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
2012-02-18 02:40:56 -06:00

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; }