From dd85947668078a52372b8fd924c7b6dc342dbfaa Mon Sep 17 00:00:00 2001 From: Wes Cossick Date: Sat, 8 Aug 2015 14:59:37 -0500 Subject: [PATCH] Fix cursor position issue in #39 --- source files/README.md | 3 +- source files/codemirror/codemirror.css | 334 +++++++++++++++++ source files/simplemde.css | 202 ++++++++++ source files/theme.css | 500 ------------------------- 4 files changed, 538 insertions(+), 501 deletions(-) create mode 100644 source files/codemirror/codemirror.css create mode 100644 source files/simplemde.css delete mode 100644 source files/theme.css diff --git a/source files/README.md b/source files/README.md index 7e99dac..52895f5 100644 --- a/source files/README.md +++ b/source files/README.md @@ -15,5 +15,6 @@ Minify the JS in this order: Minify the CSS in this order: -1. `theme.css` +1. `codemirror/codemirror.css` +1. `simplemde.css` 1. `spell-checker/spell-checker.css` \ No newline at end of file diff --git a/source files/codemirror/codemirror.css b/source files/codemirror/codemirror.css new file mode 100644 index 0000000..c15819a --- /dev/null +++ b/source files/codemirror/codemirror.css @@ -0,0 +1,334 @@ +/* BASICS */ + +.CodeMirror { + /* Set height, width, borders, and global font properties here */ + font-family: monospace; + height: 300px; + color: black; +} + +/* PADDING */ + +.CodeMirror-lines { + padding: 4px 0; /* Vertical padding around content */ +} +.CodeMirror pre { + padding: 0 4px; /* Horizontal padding of content */ +} + +.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { + background-color: white; /* The little square between H and V scrollbars */ +} + +/* GUTTER */ + +.CodeMirror-gutters { + border-right: 1px solid #ddd; + background-color: #f7f7f7; + white-space: nowrap; +} +.CodeMirror-linenumbers {} +.CodeMirror-linenumber { + padding: 0 3px 0 5px; + min-width: 20px; + text-align: right; + color: #999; + white-space: nowrap; +} + +.CodeMirror-guttermarker { color: black; } +.CodeMirror-guttermarker-subtle { color: #999; } + +/* CURSOR */ + +.CodeMirror-cursor { + border-left: 1px solid black; + border-right: none; + width: 0; +} +/* Shown when moving in bi-directional text */ +.CodeMirror div.CodeMirror-secondarycursor { + border-left: 1px solid silver; +} +.cm-fat-cursor .CodeMirror-cursor { + width: auto; + border: 0; + background: #7e7; +} +.cm-fat-cursor div.CodeMirror-cursors { + z-index: 1; +} + +.cm-animate-fat-cursor { + width: auto; + border: 0; + -webkit-animation: blink 1.06s steps(1) infinite; + -moz-animation: blink 1.06s steps(1) infinite; + animation: blink 1.06s steps(1) infinite; + background-color: #7e7; +} +@-moz-keyframes blink { + 0% {} + 50% { background-color: transparent; } + 100% {} +} +@-webkit-keyframes blink { + 0% {} + 50% { background-color: transparent; } + 100% {} +} +@keyframes blink { + 0% {} + 50% { background-color: transparent; } + 100% {} +} + +/* Can style cursor different in overwrite (non-insert) mode */ +.CodeMirror-overwrite .CodeMirror-cursor {} + +.cm-tab { display: inline-block; text-decoration: inherit; } + +.CodeMirror-ruler { + border-left: 1px solid #ccc; + position: absolute; +} + +/* DEFAULT THEME */ + +.cm-s-default .cm-header {color: blue;} +.cm-s-default .cm-quote {color: #090;} +.cm-negative {color: #d44;} +.cm-positive {color: #292;} +.cm-header, .cm-strong {font-weight: bold;} +.cm-em {font-style: italic;} +.cm-link {text-decoration: underline;} +.cm-strikethrough {text-decoration: line-through;} + +.cm-s-default .cm-keyword {color: #708;} +.cm-s-default .cm-atom {color: #219;} +.cm-s-default .cm-number {color: #164;} +.cm-s-default .cm-def {color: #00f;} +.cm-s-default .cm-variable, +.cm-s-default .cm-punctuation, +.cm-s-default .cm-property, +.cm-s-default .cm-operator {} +.cm-s-default .cm-variable-2 {color: #05a;} +.cm-s-default .cm-variable-3 {color: #085;} +.cm-s-default .cm-comment {color: #a50;} +.cm-s-default .cm-string {color: #a11;} +.cm-s-default .cm-string-2 {color: #f50;} +.cm-s-default .cm-meta {color: #555;} +.cm-s-default .cm-qualifier {color: #555;} +.cm-s-default .cm-builtin {color: #30a;} +.cm-s-default .cm-bracket {color: #997;} +.cm-s-default .cm-tag {color: #170;} +.cm-s-default .cm-attribute {color: #00c;} +.cm-s-default .cm-hr {color: #999;} +.cm-s-default .cm-link {color: #00c;} + +.cm-s-default .cm-error {color: #f00;} +.cm-invalidchar {color: #f00;} + +.CodeMirror-composing { border-bottom: 2px solid; } + +/* Default styles for common addons */ + +div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;} +div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} +.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); } +.CodeMirror-activeline-background {background: #e8f2ff;} + +/* STOP */ + +/* The rest of this file contains styles related to the mechanics of + the editor. You probably shouldn't touch them. */ + +.CodeMirror { + position: relative; + overflow: hidden; + background: white; +} + +.CodeMirror-scroll { + overflow: scroll !important; /* Things will break if this is overridden */ + /* 30px is the magic margin used to hide the element's real scrollbars */ + /* See overflow: hidden in .CodeMirror */ + margin-bottom: -30px; margin-right: -30px; + padding-bottom: 30px; + height: 100%; + outline: none; /* Prevent dragging from highlighting the element */ + position: relative; +} +.CodeMirror-sizer { + position: relative; + border-right: 30px solid transparent; +} + +/* The fake, visible scrollbars. Used to force redraw during scrolling + before actuall scrolling happens, thus preventing shaking and + flickering artifacts. */ +.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { + position: absolute; + z-index: 6; + display: none; +} +.CodeMirror-vscrollbar { + right: 0; top: 0; + overflow-x: hidden; + overflow-y: scroll; +} +.CodeMirror-hscrollbar { + bottom: 0; left: 0; + overflow-y: hidden; + overflow-x: scroll; +} +.CodeMirror-scrollbar-filler { + right: 0; bottom: 0; +} +.CodeMirror-gutter-filler { + left: 0; bottom: 0; +} + +.CodeMirror-gutters { + position: absolute; left: 0; top: 0; + z-index: 3; +} +.CodeMirror-gutter { + white-space: normal; + height: 100%; + display: inline-block; + margin-bottom: -30px; + /* Hack to make IE7 behave */ + *zoom:1; + *display:inline; +} +.CodeMirror-gutter-wrapper { + position: absolute; + z-index: 4; + background: none !important; + border: none !important; +} +.CodeMirror-gutter-background { + position: absolute; + top: 0; bottom: 0; + z-index: 4; +} +.CodeMirror-gutter-elt { + position: absolute; + cursor: default; + z-index: 4; +} +.CodeMirror-gutter-wrapper { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.CodeMirror-lines { + cursor: text; + min-height: 1px; /* prevents collapsing before first draw */ +} +.CodeMirror pre { + /* Reset some styles that the rest of the page might have set */ + -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; + border-width: 0; + background: transparent; + font-family: inherit; + font-size: inherit; + margin: 0; + white-space: pre; + word-wrap: normal; + line-height: inherit; + color: inherit; + z-index: 2; + position: relative; + overflow: visible; + -webkit-tap-highlight-color: transparent; +} +.CodeMirror-wrap pre { + word-wrap: break-word; + white-space: pre-wrap; + word-break: normal; +} + +.CodeMirror-linebackground { + position: absolute; + left: 0; right: 0; top: 0; bottom: 0; + z-index: 0; +} + +.CodeMirror-linewidget { + position: relative; + z-index: 2; + overflow: auto; +} + +.CodeMirror-widget {} + +.CodeMirror-code { + outline: none; +} + +/* Force content-box sizing for the elements where we expect it */ +.CodeMirror-scroll, +.CodeMirror-sizer, +.CodeMirror-gutter, +.CodeMirror-gutters, +.CodeMirror-linenumber { + -moz-box-sizing: content-box; + box-sizing: content-box; +} + +.CodeMirror-measure { + position: absolute; + width: 100%; + height: 0; + overflow: hidden; + visibility: hidden; +} + +.CodeMirror-cursor { position: absolute; } +.CodeMirror-measure pre { position: static; } + +div.CodeMirror-cursors { + visibility: hidden; + position: relative; + z-index: 3; +} +div.CodeMirror-dragcursors { + visibility: visible; +} + +.CodeMirror-focused div.CodeMirror-cursors { + visibility: visible; +} + +.CodeMirror-selected { background: #d9d9d9; } +.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } +.CodeMirror-crosshair { cursor: crosshair; } +.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; } +.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; } + +.cm-searching { + background: #ffa; + background: rgba(255, 255, 0, .4); +} + +/* IE7 hack to prevent it from returning funny offsetTops on the spans */ +.CodeMirror span { *vertical-align: text-bottom; } + +/* Used to force a border model for a node */ +.cm-force-border { padding-right: .1px; } + +@media print { + /* Hide the cursor when printing */ + .CodeMirror div.CodeMirror-cursors { + visibility: hidden; + } +} + +/* See issue #2901 */ +.cm-tab-wrap-hack:after { content: ''; } + +/* Help users use markselection to safely style text background */ +span.CodeMirror-selectedtext { background: none; } \ No newline at end of file diff --git a/source files/simplemde.css b/source files/simplemde.css new file mode 100644 index 0000000..921359f --- /dev/null +++ b/source files/simplemde.css @@ -0,0 +1,202 @@ +.CodeMirror { + height: auto; + min-height: 300px; + border: 1px solid #ddd; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + padding: 10px; + font: inherit; +} + +.CodeMirror-scroll { + min-height: 300px +} + +.CodeMirror-fullscreen { + background:#fff; + position: fixed !important; + top: 50px; + left: 0; + right: 0; + bottom: 0; + height: auto; + z-index: 9; +} + +.editor-toolbar { + position: relative; + opacity: .6; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; + padding: 0 10px; + border-top: 1px solid #bbb; + border-left: 1px solid #bbb; + border-right: 1px solid #bbb; + border-top-left-radius: 4px; + border-top-right-radius: 4px; +} + +.editor-toolbar:after, .editor-toolbar:before { + display: block; + content: ' '; + height: 1px; +} + +.editor-toolbar:before { + margin-bottom: 8px +} + +.editor-toolbar:after { + margin-top: 8px +} + +.editor-toolbar:hover, .editor-wrapper input.title:focus, .editor-wrapper input.title:hover { + opacity: .8 +} + +.editor-toolbar.fullscreen { + width: 100%; + background: #fff; + border: 0; + position: fixed; + top: 0; + left: 0; + opacity: 1; +} + +.editor-toolbar a { + display: inline-block; + text-align: center; + text-decoration: none!important; + color: #2c3e50!important; + width: 30px; + height: 30px; + margin: 0; + border: 1px solid transparent; + border-radius: 3px; + cursor: pointer; +} + +.editor-toolbar a.active, .editor-toolbar a:hover { + background: #fcfcfc; + border-color: #95a5a6; +} + +.editor-toolbar a:before { + line-height: 30px +} + +.editor-toolbar i.separator { + display: inline-block; + width: 0; + border-left: 1px solid #d9d9d9; + border-right: 1px solid #fff; + color: transparent; + text-indent: -10px; + margin: 0 6px; +} + +.editor-toolbar a.icon-fullscreen { + position: absolute; + right: 10px; +} + +.editor-toolbar.disabled-for-preview a:not(.fa-eye):not(.fa-arrows-alt) { + pointer-events: none; + background: #fff; + border: none; +} + +.editor-statusbar { + padding: 8px 10px; + font-size: 12px; + color: #959694; + text-align: right; +} + +.editor-statusbar span { + display: inline-block; + min-width: 4em; + margin-left: 1em; +} + +.editor-statusbar .lines:before { + content: 'lines: ' +} + +.editor-statusbar .words:before { + content: 'words: ' +} + +.editor-preview { + padding: 10px; + position: absolute; + top: 0; + left: 0; + background: #fafafa; + z-index: 9999; + overflow: auto; + display: none; +} + +.editor-preview-active { + display: block +} + +.editor-preview>p { + margin-top: 0 +} + +.editor-preview pre { + background: #eee; + margin-bottom: 10px; +} + +.editor-preview table td, table th { + border: 1px solid #ddd; + padding: 5px; +} + +.CodeMirror .CodeMirror-selected { + background: #d9d9d9; +} + +.CodeMirror .CodeMirror-code .cm-header-1 { + font-size: 200%; + line-height: 200%; +} + +.CodeMirror .CodeMirror-code .cm-header-2 { + font-size: 160%; + line-height: 160%; +} + +.CodeMirror .CodeMirror-code .cm-header-3 { + font-size: 125%; + line-height: 125%; +} + +.CodeMirror .CodeMirror-code .cm-header-4 { + font-size: 110%; + line-height: 110%; +} + +.CodeMirror .CodeMirror-code .cm-comment { + background: rgba(0, 0, 0, .05); + border-radius: 2px; +} + +.CodeMirror .CodeMirror-code .cm-link { + color: #7f8c8d; +} + +.CodeMirror .CodeMirror-code .cm-url { + color: #aab2b3; +} + +.CodeMirror .CodeMirror-code .cm-strikethrough { + text-decoration: line-through; +} \ No newline at end of file diff --git a/source files/theme.css b/source files/theme.css deleted file mode 100644 index 5bb8f45..0000000 --- a/source files/theme.css +++ /dev/null @@ -1,500 +0,0 @@ -.CodeMirror { - height: auto; - min-height: 300px; - border: 1px solid #ddd; - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - padding: 10px; -} - -.CodeMirror-scroll { - min-height: 300px -} - -.CodeMirror-fullscreen { - background:#fff; - position: fixed !important; - top: 50px; - left: 0; - right: 0; - bottom: 0; - height: auto; - z-index: 9; -} - -:-webkit-full-screen { - background: #f9f9f5; - padding: .5em 1em; - width: 100%; - height: 100%; -} - -:-moz-full-screen { - padding: .5em 1em; - background: #f9f9f5; - width: 100%; - height: 100%; -} - -.editor-wrapper { - font: 16px/1.62 "Helvetica Neue", "Xin Gothic", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif; - color: #2c3e50; -} - -.editor-wrapper input.title { - font: 18px "Helvetica Neue", "Xin Gothic", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif; - background: 0 0; - padding: 4px; - width: 100%; - border: none; - outline: 0; - opacity: .6; -} - -.editor-toolbar { - position: relative; - opacity: .6; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - -o-user-select: none; - user-select: none; - padding: 0 10px; - border-top: 1px solid #bbb; - border-left: 1px solid #bbb; - border-right: 1px solid #bbb; - border-top-left-radius: 4px; - border-top-right-radius: 4px; -} - -.editor-toolbar:after, .editor-toolbar:before { - display: block; - content: ' '; - height: 1px; -} - -.editor-toolbar:before { - margin-bottom: 8px -} - -.editor-toolbar:after { - margin-top: 8px -} - -.editor-toolbar:hover, .editor-wrapper input.title:focus, .editor-wrapper input.title:hover { - opacity: .8 -} - -.editor-toolbar.fullscreen { - width: 100%; - background: #fff; - border: 0; - position: fixed; - top: 0; - left: 0; - opacity: 1; -} - -.editor-toolbar a { - display: inline-block; - text-align: center; - text-decoration: none!important; - color: #2c3e50!important; - width: 30px; - height: 30px; - margin: 0; - border: 1px solid transparent; - border-radius: 3px; - cursor: pointer; -} - -.editor-toolbar a.active, .editor-toolbar a:hover { - background: #fcfcfc; - border-color: #95a5a6; -} - -.editor-toolbar a:before { - line-height: 30px -} - -.editor-toolbar i.separator { - display: inline-block; - width: 0; - border-left: 1px solid #d9d9d9; - border-right: 1px solid #fff; - color: transparent; - text-indent: -10px; - margin: 0 6px; -} - -.editor-toolbar a.icon-fullscreen { - position: absolute; - right: 10px; -} - -.editor-toolbar.disabled-for-preview a:not(.fa-eye):not(.fa-arrows-alt) { - pointer-events: none; - background: #fff; - border: none; -} - -.editor-statusbar { - padding: 8px 10px; - font-size: 12px; - color: #959694; - text-align: right; -} - -.editor-statusbar span { - display: inline-block; - min-width: 4em; - margin-left: 1em; -} - -.editor-statusbar .lines:before { - content: 'lines: ' -} - -.editor-statusbar .words:before { - content: 'words: ' -} - -.editor-preview { - padding: 10px; - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - background: #fafafa; - z-index: 9999; - overflow: auto; - display: none; -} - -.editor-preview-active { - display: block -} - -.editor-preview>p { - margin-top: 0 -} - -.editor-preview pre { - background: #eee; - margin-bottom: 10px; -} - -.editor-preview table td, table th { - border: 1px solid #ddd; - padding: 5px; -} - -.CodeMirror-scroll { - overflow: auto -} - -.CodeMirror-lines { - padding: 4px 0 -} - -.CodeMirror pre { - padding: 0 4px -} - -.CodeMirror-scrollbar-filler { - background-color: #fff -} - -.CodeMirror div.CodeMirror-cursor { - border-left: 1px solid #000; - z-index: 3; -} - -.CodeMirror div.CodeMirror-secondarycursor { - border-left: 1px solid silver -} - -.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor { - width: auto; - border: 0; - background: #7e7; - z-index: 1; -} - -.cm-s-paper .cm-keyword { - color: #555 -} - -.cm-s-paper .cm-atom, .cm-s-paper .cm-number { - color: #7f8c8d -} - -.cm-s-paper .cm-def { - color: #00f -} - -.cm-s-paper .cm-variable { - color: #000 -} - -.cm-s-paper .cm-variable-2 { - color: #555 -} - -.cm-s-paper .cm-variable-3 { - color: #085 -} - -.cm-s-paper .cm-operator, .cm-s-paper .cm-property { - color: #000 -} - -.cm-s-paper .cm-comment { - color: #959595 -} - -.cm-s-paper .cm-string { - color: #7f8c8d -} - -.cm-s-paper .cm-string-2 { - color: #f50 -} - -.cm-s-paper .cm-meta { - color: #555 -} - -.cm-s-paper .cm-error { - color: red -} - -.cm-s-paper .cm-builtin, .cm-s-paper .cm-qualifier { - color: #555 -} - -.cm-s-paper .cm-bracket { - color: #997 -} - -.cm-s-paper .cm-attribute, .cm-s-paper .cm-tag { - color: #7f8c8d -} - -.cm-s-paper .cm-header { - color: #000 -} - -.cm-s-paper .cm-quote { - color: #888 -} - -.cm-s-paper .cm-hr { - color: #999 -} - -.cm-s-paper .cm-link { - color: #7f8c8d -} - -.cm-negative { - color: #d44 -} - -.cm-positive { - color: #292 -} - -.cm-header, .cm-strong { - font-weight: 700 -} - -.cm-em { - font-style: italic -} - -.cm-link { - text-decoration: underline -} - -.cm-invalidchar { - color: red -} - -div.CodeMirror span.CodeMirror-matchingbracket { - color: #0f0 -} - -div.CodeMirror span.CodeMirror-nonmatchingbracket { - color: #f22 -} - -.CodeMirror { - position: relative; - overflow: hidden; -} - -.CodeMirror-scroll { - margin-bottom: -30px; - margin-right: -30px; - padding-bottom: 30px; - padding-right: 30px; - height: 100%; - min-height: 300px; - outline: 0; - position: relative; -} - -.CodeMirror-sizer { - position: relative -} - -.CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-vscrollbar { - position: absolute; - z-index: 6; - display: none; -} - -.CodeMirror-vscrollbar { - right: 0; - top: 0; - overflow-x: hidden; - overflow-y: scroll; -} - -.CodeMirror-hscrollbar { - bottom: 0; - left: 0; - overflow-y: hidden; - overflow-x: scroll; -} - -.CodeMirror-scrollbar-filler { - right: 0; - bottom: 0; - z-index: 6; -} - -.CodeMirror-lines { - cursor: text -} - -.CodeMirror pre { - -moz-border-radius: 0; - -webkit-border-radius: 0; - -o-border-radius: 0; - border-radius: 0; - border-width: 0; - background: 0 0; - font-family: inherit; - font-size: inherit; - margin: 0; - white-space: pre; - word-wrap: normal; - line-height: inherit; - color: inherit; - z-index: 2; - position: relative; - overflow: visible; -} - -.CodeMirror-wrap pre { - word-wrap: break-word; - white-space: pre-wrap; - word-break: normal; -} - -.CodeMirror-linebackground { - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - z-index: 0; -} - -.CodeMirror-linewidget { - position: relative; - z-index: 2; - overflow: auto; -} - -.CodeMirror-widget { - display: inline-block -} - -.CodeMirror-wrap .CodeMirror-scroll { - overflow-x: hidden -} - -.CodeMirror-measure { - position: absolute; - width: 100%; - height: 0; - overflow: hidden; - visibility: hidden; -} - -.CodeMirror-measure pre { - position: static -} - -.CodeMirror div.CodeMirror-cursor { - position: absolute; - visibility: hidden; - border-right: none; - width: 0; -} - -.CodeMirror-focused div.CodeMirror-cursor { - visibility: visible -} - -.CodeMirror-selected { - background: #d9d9d9 -} - -.CodeMirror-focused .CodeMirror-selected { - background: #BDC3C7 -} - -.cm-searching { - background: #ffa; - background: rgba(255, 255, 0, .4); -} - -@media print { - .CodeMirror div.CodeMirror-cursor { - visibility: hidden - } -} - -.CodeMirror .CodeMirror-code .cm-header-1 { - font-size: 200%; - line-height: 200%; -} - -.CodeMirror .CodeMirror-code .cm-header-2 { - font-size: 160%; - line-height: 160%; -} - -.CodeMirror .CodeMirror-code .cm-header-3 { - font-size: 125%; - line-height: 125%; -} - -.CodeMirror .CodeMirror-code .cm-header-4 { - font-size: 110%; - line-height: 110%; -} - -.CodeMirror .CodeMirror-code .cm-comment { - background: rgba(0, 0, 0, .05); - border-radius: 2px; -} - -.CodeMirror .CodeMirror-code .cm-strikethrough { - text-decoration: line-through; -} \ No newline at end of file