From 7ff3890e80bd8d02f4492b1e72a9d65fde9b52d7 Mon Sep 17 00:00:00 2001 From: sverweij Date: Mon, 10 Aug 2015 20:43:16 +0200 Subject: [PATCH 1/9] use the mbo theme instead of 'midnight' - to have the editor area WCAG 2.0 AA compliant --- src/script/ui-control/interpreter-editor-events.js | 2 +- src/style/interp.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/script/ui-control/interpreter-editor-events.js b/src/script/ui-control/interpreter-editor-events.js index 975158c8..19bdb00a 100644 --- a/src/script/ui-control/interpreter-editor-events.js +++ b/src/script/ui-control/interpreter-editor-events.js @@ -23,7 +23,7 @@ define(["./interpreter-uistate", lineNumbers : true, autoCloseBrackets : true, matchBrackets : true, - theme : "midnight", + theme : "mbo", mode : "xu", placeholder : "Type your text. Or drag a file to this area....", lineWrapping : false diff --git a/src/style/interp.scss b/src/style/interp.scss index 548ac4dc..8f97d6c5 100644 --- a/src/style/interp.scss +++ b/src/style/interp.scss @@ -1,6 +1,6 @@ @import "./snippets/fonts"; @import "../lib/codemirror/codemirror"; -@import "../lib/codemirror/theme/midnight"; +@import "../lib/codemirror/theme/mbo"; @import "./snippets/_generics"; @import "./snippets/_header"; @import "./snippets/_interpreter"; From 099571eb9c0c58f7374a44f01392c5e46b377a75 Mon Sep 17 00:00:00 2001 From: sverweij Date: Mon, 10 Aug 2015 20:46:58 +0200 Subject: [PATCH 2/9] implements some small accessibility improvements --- src/index.html | 339 +++++++++++++-------------- src/style/doc.css | 2 +- src/style/interp.css | 2 +- src/style/snippets/_header.scss | 2 +- src/style/snippets/_interpreter.scss | 9 +- 5 files changed, 177 insertions(+), 177 deletions(-) diff --git a/src/index.html b/src/index.html index aecf1d59..c4ef4cb7 100644 --- a/src/index.html +++ b/src/index.html @@ -123,15 +123,15 @@
-

- your text goes here ☟

+

+ your text goes here ☟

- -
- -
-
- - - -

Export this chart to

- +
Export this chart to

Apply a color scheme

- +
Apply a color scheme Note: !! removes comments and reformats your source!!">B&W = remove all color
+
+
+ + + + +
+
h1{counter-increment:article-counter}article>h1:before{content:counter(article-counter) " "}article h2:before{counter-increment:chapter-counter;content:counter(article-counter) "." counter(chapter-counter) " "}article h3:before{counter-increment:paragraph-counter;content:counter(article-counter) "." counter(chapter-counter) "." counter(paragraph-counter) " "}article h1.first-title-on-page{border:none;margin:0 0 1em 0;padding:0 0 0 0}article h1,h2{border-top:solid 1px #aaa;padding:0.5em 0 0 0}article h2,h3{margin:2em 0 1em 0}table.doc{border-collapse:collapse;margin-bottom:1em}.doc td,th{padding:0.5em;margin:0;border:solid 1px #DDD}.doc td{text-align:left;vertical-align:top}.doc tr:nth-child(2n+0){background-color:#F8F8F8}code,.code{border:solid 1px #aaa;background-color:#F8F8F8;border-radius:3px}.code{overflow:scroll;padding:6px 10px;display:inline-block;vertical-align:top}img,svg,.mscgen_js{max-width:100%}.mscgen_js{overflow:auto;display:inline-block}.info{border-left:1px solid blue;padding:0.5em}.info:before{content:"(i) ";color:blue;font-weight:bold}.warning{border-left:1px solid orange;padding:0.5em}.warning:before{content:"/!\\ ";color:orange;font-weight:bold}.shadow{box-shadow:0 0 1em -0.2em gray;border-collapse:separate}mark{background-color:#ffa}@media screen and (max-width: 639px){body{margin:0}article{margin:0;border:0;padding-left:1em;padding-right:1em;border-radius:0}.code{display:block;overflow:auto}}@media screen and (min-width: 640px) and (max-width: 767px){body{margin:0}article{margin:0;border:0;padding:1em;border-radius:0}}header{padding:0.5em 0.5em 0.5em 0.7em;border-bottom:solid #d3d3d3 1px;margin-bottom:.4em;background-image:url("../images/bg.png");background-repeat:no-repeat;background-position:25%;box-shadow:0 0.1em 0.4em -0.2em gray;color:gray;min-height:3em}.header-title{float:left}header nav{float:right}header .debug{font-size:small;float:right}header h1{font-size:1.9em;margin-bottom:0;margin-top:0}header em{color:black}header a{text-decoration:none;color:inherit}nav a.icon:hover{text-decoration:underline}nav a.icon:active{text-decoration:underline}nav span.icon:hover{cursor:pointer;text-decoration:underline}nav span.icon:active{text-decoration:underline}nav .icon{display:inline-block;width:3.6em;height:2.2em;background-repeat:no-repeat;background-position:center;background-size:contain;padding:0 0.1em 0 0.1em;text-align:center;-webkit-transform:scale(0.9);transform:scale(0.9)}nav .embed{background-image:url("../images/embed.svg")}nav .question{background-image:url("../images/question.svg")}nav .interpreter{background-image:url("../images/interpreter.svg")}nav .about{background-image:url("../images/about.svg")}nav .active{text-decoration:underline}nav div.active:hover{cursor:default;color:inherit}@media screen and (max-width: 639px){header em{display:block;font-size:0.5em}}@media screen and (max-width: 480px){header{background-image:none}header nav{float:none}}.popupsheet{z-index:1;position:absolute;top:5.3em;right:0;background-color:transparent;width:100%;padding-right:1em}.popupsheet .popup{float:right;max-width:28em;max-height:80%;border-collapse:separate;background-color:white;overflow:auto;border-radius:2px;opacity:.97;box-shadow:0 3px 6px rgba(0,0,0,0.23);margin:0 0 0 0;border:0;padding:0}.popup .header{padding:0.7em 0.5em 0 0.5em;border-bottom:solid #d3d3d3 1px}.popup h1{margin:0.5em 0 0.5em 0.7em;font-size:1.34em}.popup a{text-decoration:underline}.popup a:hover{text-decoration:underline}.popup .content{padding:0.4em 0.5em 0.5em 0.5em;border:none}.content textarea{max-width:98%}.popup span{padding-left:.5em}.popup .close{background-color:transparent;color:inherit;text-decoration:none;float:right;margin-top:-.3em;margin-right:-.3em}.popup .close:hover{box-shadow:none;transition:none}.popup td{vertical-align:top}.popup td:first-child{width:3.5em}.popup p{margin-right:1.5em;margin-left:1.0em}.popup p:first-child{margin-top:0}.popup img.aboutpic{width:4em}div.lightbox{display:none;top:0;padding-top:5em}div.lightbox:target{display:block}div.lightbox a.close{float:right;padding-top:0.5em;padding-right:0.7em}div.lightbox a.close:hover{text-decoration:none}div.lightbox a.close::before{content:"";display:block;position:fixed;top:0;left:0;width:100%;height:100%;opacity:0;z-index:-1}@media screen and (max-width: 480px){.popupsheet{padding-right:0}.popupsheet .popup{width:100%;max-width:100%;float:left}.popup button.close{margin-right:1em}.popup img{max-width:100%}}@media screen and (max-width: 800px){.popupsheet{z-index:3}}@media screen and (max-width: 1164px){.hideontablet{display:none}}@media screen and (max-width: 639px){.hideonmobile{display:none}a.hideonmobile{display:none}span.hideonmobile{display:none}div.hideonmobile{display:none}.showonmobile{display:block}}@media screen and (max-width: 479px){.hideonmobile-portrait{display:none}}@media screen and (max-width: 360px){a.hideonmicro{display:none}span.hideonmicro{display:none}}@media print{.hideonprint{display:none}body{font-size:10pt}} +@font-face{font-family:'controls';src:url("../fonts/controls.eot?-i9on8r");src:url("../fonts/controls.eot?#iefix-i9on8r") format("embedded-opentype"),url("../fonts/controls.woff?-i9on8r") format("woff"),url("../fonts/controls.ttf?-i9on8r") format("truetype"),url("../fonts/controls.svg?-i9on8r#controls") format("svg");font-weight:normal;font-style:normal}[class^="icon-"],[class*=" icon-"]{font-family:'controls';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-video-camera:before{content:"\e914"}.icon-folder:before{content:"\e92f"}.icon-cross:before{content:"\ea0f"}.icon-play3:before{content:"\ea1c"}.icon-pause2:before{content:"\ea1d"}.icon-first:before{content:"\ea21"}.icon-last:before{content:"\ea22"}.icon-previous2:before{content:"\ea23"}.icon-next2:before{content:"\ea24"}.icon-arrow-down:before{content:"\ea36"}.icon-share:before{content:"\ea7d"}.icon-embed:before{content:"\ea7f"}body{color:black;font-family:sans-serif;font-weight:normal;font-size:12pt;margin:0}h1,h2,h3,h4,h5{font-weight:lighter}article{padding:0.5em 0.5em 0 0.5em}.showonmobile{display:none}.browsehappy{margin:0.2em 0;background:yellow;color:black;padding:0.2em 0}@-webkit-keyframes fadeout{from{opacity:1}to{opacity:0.2}}@keyframes fadeout{from{opacity:1}to{opacity:0.2}}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{counter-reset:article-counter}footer{border-top:solid 1px #aaa;padding-top:.9em;font-size:10pt;background-color:#fff}article{padding:2em;background-color:#fff;overflow:hidden;counter-reset:chapter-counter;border-collapse:separate;page-break-before:always}article:first-of-type{page-break-before:auto}section{counter-reset:paragraph-counter}p,pre{margin-right:1em}p{margin:0 1em 1em 0}code,pre{font-family:Consolas, "Liberation Mono", Courier, monospace;font-size:1em}.no-number::before{content:none}article>h1{counter-increment:article-counter}article>h1:before{content:counter(article-counter) " "}article h2:before{counter-increment:chapter-counter;content:counter(article-counter) "." counter(chapter-counter) " "}article h3:before{counter-increment:paragraph-counter;content:counter(article-counter) "." counter(chapter-counter) "." counter(paragraph-counter) " "}article h1.first-title-on-page{border:none;margin:0 0 1em 0;padding:0 0 0 0}article h1,h2{border-top:solid 1px #aaa;padding:0.5em 0 0 0}article h2,h3{margin:2em 0 1em 0}table.doc{border-collapse:collapse;margin-bottom:1em}.doc td,th{padding:0.5em;margin:0;border:solid 1px #DDD}.doc td{text-align:left;vertical-align:top}.doc tr:nth-child(2n+0){background-color:#F8F8F8}code,.code{border:solid 1px #aaa;background-color:#F8F8F8;border-radius:3px}.code{overflow:scroll;padding:6px 10px;display:inline-block;vertical-align:top}img,svg,.mscgen_js{max-width:100%}.mscgen_js{overflow:auto;display:inline-block}.info{border-left:1px solid blue;padding:0.5em}.info:before{content:"(i) ";color:blue;font-weight:bold}.warning{border-left:1px solid orange;padding:0.5em}.warning:before{content:"/!\\ ";color:orange;font-weight:bold}.shadow{box-shadow:0 0 1em -0.2em gray;border-collapse:separate}mark{background-color:#ffa}@media screen and (max-width: 639px){body{margin:0}article{margin:0;border:0;padding-left:1em;padding-right:1em;border-radius:0}.code{display:block;overflow:auto}}@media screen and (min-width: 640px) and (max-width: 767px){body{margin:0}article{margin:0;border:0;padding:1em;border-radius:0}}header{padding:0.5em 0.5em 0.5em 0.7em;border-bottom:solid #d3d3d3 1px;margin-bottom:.4em;background-image:url("../images/bg.png");background-repeat:no-repeat;background-position:25%;box-shadow:0 0.1em 0.4em -0.2em gray;color:#707070;min-height:3em}.header-title{float:left}header nav{float:right}header .debug{font-size:small;float:right}header h1{font-size:1.9em;margin-bottom:0;margin-top:0}header em{color:black}header a{text-decoration:none;color:inherit}nav a.icon:hover{text-decoration:underline}nav a.icon:active{text-decoration:underline}nav span.icon:hover{cursor:pointer;text-decoration:underline}nav span.icon:active{text-decoration:underline}nav .icon{display:inline-block;width:3.6em;height:2.2em;background-repeat:no-repeat;background-position:center;background-size:contain;padding:0 0.1em 0 0.1em;text-align:center;-webkit-transform:scale(0.9);transform:scale(0.9)}nav .embed{background-image:url("../images/embed.svg")}nav .question{background-image:url("../images/question.svg")}nav .interpreter{background-image:url("../images/interpreter.svg")}nav .about{background-image:url("../images/about.svg")}nav .active{text-decoration:underline}nav div.active:hover{cursor:default;color:inherit}@media screen and (max-width: 639px){header em{display:block;font-size:0.5em}}@media screen and (max-width: 480px){header{background-image:none}header nav{float:none}}.popupsheet{z-index:1;position:absolute;top:5.3em;right:0;background-color:transparent;width:100%;padding-right:1em}.popupsheet .popup{float:right;max-width:28em;max-height:80%;border-collapse:separate;background-color:white;overflow:auto;border-radius:2px;opacity:.97;box-shadow:0 3px 6px rgba(0,0,0,0.23);margin:0 0 0 0;border:0;padding:0}.popup .header{padding:0.7em 0.5em 0 0.5em;border-bottom:solid #d3d3d3 1px}.popup h1{margin:0.5em 0 0.5em 0.7em;font-size:1.34em}.popup a{text-decoration:underline}.popup a:hover{text-decoration:underline}.popup .content{padding:0.4em 0.5em 0.5em 0.5em;border:none}.content textarea{max-width:98%}.popup span{padding-left:.5em}.popup .close{background-color:transparent;color:inherit;text-decoration:none;float:right;margin-top:-.3em;margin-right:-.3em}.popup .close:hover{box-shadow:none;transition:none}.popup td{vertical-align:top}.popup td:first-child{width:3.5em}.popup p{margin-right:1.5em;margin-left:1.0em}.popup p:first-child{margin-top:0}.popup img.aboutpic{width:4em}div.lightbox{display:none;top:0;padding-top:5em}div.lightbox:target{display:block}div.lightbox a.close{float:right;padding-top:0.5em;padding-right:0.7em}div.lightbox a.close:hover{text-decoration:none}div.lightbox a.close::before{content:"";display:block;position:fixed;top:0;left:0;width:100%;height:100%;opacity:0;z-index:-1}@media screen and (max-width: 480px){.popupsheet{padding-right:0}.popupsheet .popup{width:100%;max-width:100%;float:left}.popup button.close{margin-right:1em}.popup img{max-width:100%}}@media screen and (max-width: 800px){.popupsheet{z-index:3}}@media screen and (max-width: 1164px){.hideontablet{display:none}}@media screen and (max-width: 639px){.hideonmobile{display:none}a.hideonmobile{display:none}span.hideonmobile{display:none}div.hideonmobile{display:none}.showonmobile{display:block}}@media screen and (max-width: 479px){.hideonmobile-portrait{display:none}}@media screen and (max-width: 360px){a.hideonmicro{display:none}span.hideonmicro{display:none}}@media print{.hideonprint{display:none}body{font-size:10pt}} diff --git a/src/style/interp.css b/src/style/interp.css index 0591f9bb..232d1ab8 100644 --- a/src/style/interp.css +++ b/src/style/interp.css @@ -1 +1 @@ -@font-face{font-family:'controls';src:url("../fonts/controls.eot?-i9on8r");src:url("../fonts/controls.eot?#iefix-i9on8r") format("embedded-opentype"),url("../fonts/controls.woff?-i9on8r") format("woff"),url("../fonts/controls.ttf?-i9on8r") format("truetype"),url("../fonts/controls.svg?-i9on8r#controls") format("svg");font-weight:normal;font-style:normal}[class^="icon-"],[class*=" icon-"]{font-family:'controls';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-video-camera:before{content:"\e914"}.icon-folder:before{content:"\e92f"}.icon-cross:before{content:"\ea0f"}.icon-play3:before{content:"\ea1c"}.icon-pause2:before{content:"\ea1d"}.icon-first:before{content:"\ea21"}.icon-last:before{content:"\ea22"}.icon-previous2:before{content:"\ea23"}.icon-next2:before{content:"\ea24"}.icon-arrow-down:before{content:"\ea36"}.icon-share:before{content:"\ea7d"}.icon-embed:before{content:"\ea7f"}.CodeMirror{font-family:monospace;height:300px;color:black}.CodeMirror-lines{padding:4px 0}.CodeMirror pre{padding:0 4px}.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{background-color:white}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.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}.CodeMirror div.CodeMirror-cursor{border-left:1px solid black}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.CodeMirror.cm-fat-cursor div.CodeMirror-cursor{width:auto;border:0;background:#7e7}.CodeMirror.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}@-moz-keyframes blink{0%{background:#7e7}50%{background:none}100%{background:#7e7}}@-webkit-keyframes blink{0%{background:#7e7}50%{background:none}100%{background:#7e7}}@keyframes blink{0%{background:#7e7}50%{background:none}100%{background:#7e7}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-ruler{border-left:1px solid #ccc;position:absolute}.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-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}div.CodeMirror span.CodeMirror-matchingbracket{color:#0f0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#f22}.CodeMirror-matchingtag{background:rgba(255,150,0,0.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:white}.CodeMirror-scroll{overflow:scroll !important;margin-bottom:-30px;margin-right:-30px;padding-bottom:30px;height:100%;outline:none;position:relative}.CodeMirror-sizer{position:relative;border-right:30px solid transparent}.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;*zoom:1;*display:inline}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;height:100%}.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}.CodeMirror pre{-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-code{outline:none}.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-measure pre{position:static}.CodeMirror div.CodeMirror-cursor{position:absolute;border-right:none;width:0}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}.CodeMirror-focused div.CodeMirror-cursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror ::selection{background:#d7d4f0}.CodeMirror ::-moz-selection{background:#d7d4f0}.cm-searching{background:#ffa;background:rgba(255,255,0,0.4)}.CodeMirror span{*vertical-align:text-bottom}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:''}span.CodeMirror-selectedtext{background:none}.cm-s-midnight span.CodeMirror-matchhighlight{background:#494949}.cm-s-midnight.CodeMirror-focused span.CodeMirror-matchhighlight{background:#314D67 !important}.cm-s-midnight .CodeMirror-activeline-background{background:#253540 !important}.cm-s-midnight.CodeMirror{background:#0F192A;color:#D1EDFF}.cm-s-midnight.CodeMirror{border-top:1px solid black;border-bottom:1px solid black}.cm-s-midnight div.CodeMirror-selected{background:#314D67 !important}.cm-s-midnight.CodeMirror ::selection{background:rgba(49,77,103,0.99)}.cm-s-midnight.CodeMirror ::-moz-selection{background:rgba(49,77,103,0.99)}.cm-s-midnight .CodeMirror-gutters{background:#0F192A;border-right:1px solid}.cm-s-midnight .CodeMirror-guttermarker{color:white}.cm-s-midnight .CodeMirror-guttermarker-subtle{color:#d0d0d0}.cm-s-midnight .CodeMirror-linenumber{color:#D0D0D0}.cm-s-midnight .CodeMirror-cursor{border-left:1px solid #F8F8F0 !important}.cm-s-midnight span.cm-comment{color:#428BDD}.cm-s-midnight span.cm-atom{color:#AE81FF}.cm-s-midnight span.cm-number{color:#D1EDFF}.cm-s-midnight span.cm-property,.cm-s-midnight span.cm-attribute{color:#A6E22E}.cm-s-midnight span.cm-keyword{color:#E83737}.cm-s-midnight span.cm-string{color:#1DC116}.cm-s-midnight span.cm-variable{color:#FFAA3E}.cm-s-midnight span.cm-variable-2{color:#FFAA3E}.cm-s-midnight span.cm-def{color:#4DD}.cm-s-midnight span.cm-bracket{color:#D1EDFF}.cm-s-midnight span.cm-tag{color:#449}.cm-s-midnight span.cm-link{color:#AE81FF}.cm-s-midnight span.cm-error{background:#F92672;color:#F8F8F0}.cm-s-midnight .CodeMirror-matchingbracket{text-decoration:underline;color:white !important}body{color:black;font-family:sans-serif;font-weight:normal;font-size:12pt;margin:0}h1,h2,h3,h4,h5{font-weight:lighter}article{padding:0.5em 0.5em 0 0.5em}.showonmobile{display:none}.browsehappy{margin:0.2em 0;background:yellow;color:black;padding:0.2em 0}@-webkit-keyframes fadeout{from{opacity:1}to{opacity:0.2}}@keyframes fadeout{from{opacity:1}to{opacity:0.2}}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}header{padding:0.5em 0.5em 0.5em 0.7em;border-bottom:solid #d3d3d3 1px;margin-bottom:.4em;background-image:url("../images/bg.png");background-repeat:no-repeat;background-position:25%;box-shadow:0 0.1em 0.4em -0.2em gray;color:gray;min-height:3em}.header-title{float:left}header nav{float:right}header .debug{font-size:small;float:right}header h1{font-size:1.9em;margin-bottom:0;margin-top:0}header em{color:black}header a{text-decoration:none;color:inherit}nav a.icon:hover{text-decoration:underline}nav a.icon:active{text-decoration:underline}nav span.icon:hover{cursor:pointer;text-decoration:underline}nav span.icon:active{text-decoration:underline}nav .icon{display:inline-block;width:3.6em;height:2.2em;background-repeat:no-repeat;background-position:center;background-size:contain;padding:0 0.1em 0 0.1em;text-align:center;-webkit-transform:scale(0.9);transform:scale(0.9)}nav .embed{background-image:url("../images/embed.svg")}nav .question{background-image:url("../images/question.svg")}nav .interpreter{background-image:url("../images/interpreter.svg")}nav .about{background-image:url("../images/about.svg")}nav .active{text-decoration:underline}nav div.active:hover{cursor:default;color:inherit}@media screen and (max-width: 639px){header em{display:block;font-size:0.5em}}@media screen and (max-width: 480px){header{background-image:none}header nav{float:none}}.code{font-family:monospace;font-size:.7em;background-color:#0f192b;color:#fff;color:#cbe8ff}#__embedsnippet{border:solid 0;white-space:pre;text-overflow:ellipsis;overflow-x:scroll}h3{margin:0;margin-bottom:1em;font-weight:lighter;display:inline-block;color:#d3d3d3}.intronumber{padding:0.2em 0.5em 0.2em 0.5em;border:solid 1px;border-radius:1em}.error{border:1px solid #EBCCD1;border-radius:2px;margin:0;font-size:0.9em;max-width:32em;cursor:pointer}.error .header{padding:0.5em 0.5em 0.5em 1em;background-color:#F2DEDE;color:#A94442;border-bottom:1px solid #EBCCD1}.error .content{padding:0.5em 0.5em 0.5em 1em}#__error_context:hover{text-decoration:underline;cursor:pointer}fieldset{display:inline;border:1px solid lightgray;border-top:none;border-bottom:none;padding:0.1em 0.4em 0.3em 0.4em}legend{font-size:.7em}button,a.button{color:rgba(0,0,0,0.84);background-color:#eee;cursor:pointer;border-radius:2px;padding:0.3em 0.5em 0.3em 0.5em;border:none;font-size:1em;text-decoration:none;text-align:center}button:hover,a.button:hover{box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);transition:box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0s;-webkit-transition:box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0s}button:active,a.button:active{background-color:#ddd;transition:opacity 0.15s ease-in 0s,transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;-webkit-transition:opacity 0.15s ease-in 0s,-webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;opacity:1}.btn-primary{background-color:#4285f4;color:rgba(255,255,255,0.84)}.btn-primary:hover{color:#fff}.btn-primary:active{background-color:rgba(66,133,244,0.84);color:#fff}.xunotify{transition:all 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0s;font-size:0.7em;position:absolute;margin:-0.6em 0 0 -0.5em}.CodeMirror{font-family:monospace;font-size:0.7em}article{display:flex;display:-webkit-flex;flex-direction:row;-webkit-flex-direction:row}#__input_area{display:flex;display:-webkit-flex;flex-direction:column;-webkit-flex-direction:column}#__input_top_area{display:flex;display:-webkit-flex;flex-direction:row;-webkit-flex-direction:row;justify-content:space-between;-webkit-justify-content:space-between}#__input_controls_area{margin:0.1em 0 1.7em 0}#__output_area{display:flex;display:-webkit-flex;flex-direction:column;-webkit-flex-direction:column;padding:0 0.3em 0 0.3em}#__output_controls_area{margin:0 0 1.1em 2em}#__output_content_area{display:flex;display:-webkit-flex;flex-direction:column;-webkit-flex-direction:column}#__placeholder{display:flex;display:-webkit-flex;flex-direction:row;-webkit-flex-direction:row;padding:0 3em 0 3em;text-align:center;align-items:center;-webkit-align-items:center;transition:height 0.5s ease-out}@media screen and (min-width: 640px) and (max-width: 1024px){#__input_area{width:28em;min-width:28em;transition:width 0.3s ease-out}}@media screen and (min-width: 1025px){#__input_area{width:32em;min-width:32em;transition:width 0.3s ease-out}}@media screen and (max-width: 768px){article{display:flex;display:-webkit-flex;flex-direction:column;-webkit-flex-direction:column}#__input_area{width:100%;transition:width 0.3s ease-out}#__output_area{width:100%;flex-direction:column;-webkit-flex-direction:column}#__output_controls_area{margin:0 0 0.7em 0;order:1;-webkit-order:1}}@media screen and (max-width: 768px){.CodeMirror{height:24em;transition:height 0.5s ease-out}}@media screen and (max-width: 479px){#__input_controls_area{font-size:0.8em}}@media screen and (min-width: 769px) and (max-height: 600px){.CodeMirror{height:24em;transition:height 0.5s ease-out}#__placeholder{height:16em;transition:height 0.5s ease-out}}@media screen and (min-width: 769px) and (min-height: 600px) and (max-height: 700px){.CodeMirror{height:38em;transition:height 0.5s ease-out}#__placeholder{height:25em;transition:height 0.5s ease-out}}@media screen and (min-width: 769px) and (min-height: 701px) and (max-height: 790px){.CodeMirror{height:47em;transition:height 0.5s ease-out}#__placeholder{height:30em;transition:height 0.5s ease-out}}@media screen and (min-width: 769px) and (min-height: 791px){.CodeMirror{height:54em;transition:height 0.5s ease-out}#__placeholder{height:33em;transition:height 0.5s ease-out}}.popupsheet{z-index:1;position:absolute;top:5.3em;right:0;background-color:transparent;width:100%;padding-right:1em}.popupsheet .popup{float:right;max-width:28em;max-height:80%;border-collapse:separate;background-color:white;overflow:auto;border-radius:2px;opacity:.97;box-shadow:0 3px 6px rgba(0,0,0,0.23);margin:0 0 0 0;border:0;padding:0}.popup .header{padding:0.7em 0.5em 0 0.5em;border-bottom:solid #d3d3d3 1px}.popup h1{margin:0.5em 0 0.5em 0.7em;font-size:1.34em}.popup a{text-decoration:underline}.popup a:hover{text-decoration:underline}.popup .content{padding:0.4em 0.5em 0.5em 0.5em;border:none}.content textarea{max-width:98%}.popup span{padding-left:.5em}.popup .close{background-color:transparent;color:inherit;text-decoration:none;float:right;margin-top:-.3em;margin-right:-.3em}.popup .close:hover{box-shadow:none;transition:none}.popup td{vertical-align:top}.popup td:first-child{width:3.5em}.popup p{margin-right:1.5em;margin-left:1.0em}.popup p:first-child{margin-top:0}.popup img.aboutpic{width:4em}div.lightbox{display:none;top:0;padding-top:5em}div.lightbox:target{display:block}div.lightbox a.close{float:right;padding-top:0.5em;padding-right:0.7em}div.lightbox a.close:hover{text-decoration:none}div.lightbox a.close::before{content:"";display:block;position:fixed;top:0;left:0;width:100%;height:100%;opacity:0;z-index:-1}@media screen and (max-width: 480px){.popupsheet{padding-right:0}.popupsheet .popup{width:100%;max-width:100%;float:left}.popup button.close{margin-right:1em}.popup img{max-width:100%}}@media screen and (max-width: 800px){.popupsheet{z-index:3}}.sliding-panel{display:flex;display:-webkit-flex;flex-direction:column;-webkit-flex-direction:column;background-color:white;width:100%;height:0;position:fixed;z-index:314;bottom:0;box-shadow:0px -3px 6px rgba(0,0,0,0.23);transition:height 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55)}.sliding-panel .header{display:flex;display:-webkit-flex;flex-direction:row;-webkit-flex-direction:row;justify-content:space-between;-webkit-justify-content:space-between}.sliding-panel>span{display:flex;display:-webkit-flex;flex-direction:row;-webkit-flex-direction:row;justify-content:space-around;-webkit-justify-content:space-around}.sliding-panel>a,.sliding-panel>span{padding:10px;border-bottom:1px solid rgba(0,0,0,0.23)}.sliding-panel a:hover{cursor:pointer;text-decoration:underline}.sliding-panel>a:last-child{margin-bottom:2em}.sliding-panel .close-button{box-shadow:none;position:relative;top:0;right:0;padding:1em;color:inherit;background-color:transparent}#__animscreen{position:absolute;top:0;left:0;min-width:100%;min-height:100%;padding-bottom:10em;z-index:400;background:white;opacity:0.98}#__animcontrolswrapper{position:fixed;text-align:center;width:99%;bottom:1.5em;z-index:481}#__animcontrolswrapper nav{font-size:2em;padding:0.1 0.25em 0.25em 0.25em;background-color:black;opacity:0.6;box-shadow:0px 3px 6px rgba(0,0,0,0.6);display:inline-block}#__animscreen button{box-shadow:none}#__animscreen button:active{-webkit-transform:scale(0.9);transform:scale(0.9)}#__animcontrolswrapper button{color:white;background-color:inherit}#__animcontrolswrapper nav:hover{opacity:0.8}#__anim_progress_percentage_wrapper{cursor:pointer;z-index:482;background-color:transparent;width:100%;bottom:0;left:0;height:0.2em;width:100%;border:1px solid white}#__anim_progress_percentage{background-color:white;position:relative;bottom:0;left:0;height:0.2em;width:0}#__btn_anim_close{position:fixed;top:0;right:0;padding:1em;color:black;background-color:transparent}#__animsvgwrapper{width:100%;text-align:center;margin-top:3em}#__animsvg{opacity:1}@media screen and (max-width: 1164px){.hideontablet{display:none}}@media screen and (max-width: 639px){.hideonmobile{display:none}a.hideonmobile{display:none}span.hideonmobile{display:none}div.hideonmobile{display:none}.showonmobile{display:block}}@media screen and (max-width: 479px){.hideonmobile-portrait{display:none}}@media screen and (max-width: 360px){a.hideonmicro{display:none}span.hideonmicro{display:none}}@media print{.hideonprint{display:none}body{font-size:10pt}} +@font-face{font-family:'controls';src:url("../fonts/controls.eot?-i9on8r");src:url("../fonts/controls.eot?#iefix-i9on8r") format("embedded-opentype"),url("../fonts/controls.woff?-i9on8r") format("woff"),url("../fonts/controls.ttf?-i9on8r") format("truetype"),url("../fonts/controls.svg?-i9on8r#controls") format("svg");font-weight:normal;font-style:normal}[class^="icon-"],[class*=" icon-"]{font-family:'controls';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-video-camera:before{content:"\e914"}.icon-folder:before{content:"\e92f"}.icon-cross:before{content:"\ea0f"}.icon-play3:before{content:"\ea1c"}.icon-pause2:before{content:"\ea1d"}.icon-first:before{content:"\ea21"}.icon-last:before{content:"\ea22"}.icon-previous2:before{content:"\ea23"}.icon-next2:before{content:"\ea24"}.icon-arrow-down:before{content:"\ea36"}.icon-share:before{content:"\ea7d"}.icon-embed:before{content:"\ea7f"}.CodeMirror{font-family:monospace;height:300px;color:black}.CodeMirror-lines{padding:4px 0}.CodeMirror pre{padding:0 4px}.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{background-color:white}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.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}.CodeMirror div.CodeMirror-cursor{border-left:1px solid black}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.CodeMirror.cm-fat-cursor div.CodeMirror-cursor{width:auto;border:0;background:#7e7}.CodeMirror.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}@-moz-keyframes blink{0%{background:#7e7}50%{background:none}100%{background:#7e7}}@-webkit-keyframes blink{0%{background:#7e7}50%{background:none}100%{background:#7e7}}@keyframes blink{0%{background:#7e7}50%{background:none}100%{background:#7e7}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-ruler{border-left:1px solid #ccc;position:absolute}.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-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}div.CodeMirror span.CodeMirror-matchingbracket{color:#0f0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#f22}.CodeMirror-matchingtag{background:rgba(255,150,0,0.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:white}.CodeMirror-scroll{overflow:scroll !important;margin-bottom:-30px;margin-right:-30px;padding-bottom:30px;height:100%;outline:none;position:relative}.CodeMirror-sizer{position:relative;border-right:30px solid transparent}.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;*zoom:1;*display:inline}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;height:100%}.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}.CodeMirror pre{-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-code{outline:none}.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-measure pre{position:static}.CodeMirror div.CodeMirror-cursor{position:absolute;border-right:none;width:0}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}.CodeMirror-focused div.CodeMirror-cursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror ::selection{background:#d7d4f0}.CodeMirror ::-moz-selection{background:#d7d4f0}.cm-searching{background:#ffa;background:rgba(255,255,0,0.4)}.CodeMirror span{*vertical-align:text-bottom}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:''}span.CodeMirror-selectedtext{background:none}.cm-s-mbo.CodeMirror{background:#2c2c2c;color:#ffffec}.cm-s-mbo div.CodeMirror-selected{background:#716C62 !important}.cm-s-mbo.CodeMirror ::selection{background:rgba(113,108,98,0.99)}.cm-s-mbo.CodeMirror ::-moz-selection{background:rgba(113,108,98,0.99)}.cm-s-mbo .CodeMirror-gutters{background:#4e4e4e;border-right:0px}.cm-s-mbo .CodeMirror-guttermarker{color:white}.cm-s-mbo .CodeMirror-guttermarker-subtle{color:grey}.cm-s-mbo .CodeMirror-linenumber{color:#dadada}.cm-s-mbo .CodeMirror-cursor{border-left:1px solid #ffffec !important}.cm-s-mbo span.cm-comment{color:#95958a}.cm-s-mbo span.cm-atom{color:#00a8c6}.cm-s-mbo span.cm-number{color:#00a8c6}.cm-s-mbo span.cm-property,.cm-s-mbo span.cm-attribute{color:#9ddfe9}.cm-s-mbo span.cm-keyword{color:#ffb928}.cm-s-mbo span.cm-string{color:#ffcf6c}.cm-s-mbo span.cm-string.cm-property{color:#ffffec}.cm-s-mbo span.cm-variable{color:#ffffec}.cm-s-mbo span.cm-variable-2{color:#00a8c6}.cm-s-mbo span.cm-def{color:#ffffec}.cm-s-mbo span.cm-bracket{color:#fffffc;font-weight:bold}.cm-s-mbo span.cm-tag{color:#9ddfe9}.cm-s-mbo span.cm-link{color:#f54b07}.cm-s-mbo span.cm-error{border-bottom:#636363;color:#ffffec}.cm-s-mbo span.cm-qualifier{color:#ffffec}.cm-s-mbo .CodeMirror-activeline-background{background:#494b41 !important}.cm-s-mbo .CodeMirror-matchingbracket{color:#222 !important}.cm-s-mbo .CodeMirror-matchingtag{background:rgba(255,255,255,0.37)}body{color:black;font-family:sans-serif;font-weight:normal;font-size:12pt;margin:0}h1,h2,h3,h4,h5{font-weight:lighter}article{padding:0.5em 0.5em 0 0.5em}.showonmobile{display:none}.browsehappy{margin:0.2em 0;background:yellow;color:black;padding:0.2em 0}@-webkit-keyframes fadeout{from{opacity:1}to{opacity:0.2}}@keyframes fadeout{from{opacity:1}to{opacity:0.2}}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}header{padding:0.5em 0.5em 0.5em 0.7em;border-bottom:solid #d3d3d3 1px;margin-bottom:.4em;background-image:url("../images/bg.png");background-repeat:no-repeat;background-position:25%;box-shadow:0 0.1em 0.4em -0.2em gray;color:#707070;min-height:3em}.header-title{float:left}header nav{float:right}header .debug{font-size:small;float:right}header h1{font-size:1.9em;margin-bottom:0;margin-top:0}header em{color:black}header a{text-decoration:none;color:inherit}nav a.icon:hover{text-decoration:underline}nav a.icon:active{text-decoration:underline}nav span.icon:hover{cursor:pointer;text-decoration:underline}nav span.icon:active{text-decoration:underline}nav .icon{display:inline-block;width:3.6em;height:2.2em;background-repeat:no-repeat;background-position:center;background-size:contain;padding:0 0.1em 0 0.1em;text-align:center;-webkit-transform:scale(0.9);transform:scale(0.9)}nav .embed{background-image:url("../images/embed.svg")}nav .question{background-image:url("../images/question.svg")}nav .interpreter{background-image:url("../images/interpreter.svg")}nav .about{background-image:url("../images/about.svg")}nav .active{text-decoration:underline}nav div.active:hover{cursor:default;color:inherit}@media screen and (max-width: 639px){header em{display:block;font-size:0.5em}}@media screen and (max-width: 480px){header{background-image:none}header nav{float:none}}.code{font-family:monospace;font-size:.7em;background-color:#0f192b;color:#fff;color:#cbe8ff}#__embedsnippet{border:solid 0;white-space:pre;text-overflow:ellipsis;overflow-x:scroll}article h2{font-size:1.16979375em;margin:0;margin-bottom:1em;font-weight:lighter;display:inline-block;color:#949494}.intronumber{padding:0.2em 0.5em 0.2em 0.5em;border:solid 1px;border-radius:1em}.error{border:1px solid #EBCCD1;border-radius:2px;margin:0;font-size:0.9em;max-width:32em;cursor:pointer}.error .header{padding:0.5em 0.5em 0.5em 1em;background-color:#F2DEDE;color:#A94442;border-bottom:1px solid #EBCCD1}.error .content{padding:0.5em 0.5em 0.5em 1em}#__error_context:hover{text-decoration:underline;cursor:pointer}fieldset{display:inline;border:1px solid lightgray;border-top:none;border-bottom:none;padding:0.1em 0.4em 0.3em 0.4em}legend{font-size:.7em}button{color:rgba(0,0,0,0.84);background-color:#eee;cursor:pointer;border-radius:2px;padding:0.1em 0.5em 0.3em 0.5em;border:none;font-size:1em;text-decoration:none;text-align:center}button:hover,a.button:hover{box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);transition:box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0s;-webkit-transition:box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0s}button:active,a.button:active{background-color:#ddd;transition:opacity 0.15s ease-in 0s,transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;-webkit-transition:opacity 0.15s ease-in 0s,-webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;opacity:1}.btn-primary{background-color:#4285f4;color:rgba(255,255,255,0.84)}.btn-primary:hover{color:#fff}.btn-primary:active{background-color:rgba(66,133,244,0.84);color:#fff}.xunotify{transition:all 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0s;font-size:0.7em;position:absolute;margin:-0.6em 0 0 -0.5em}.CodeMirror{font-family:monospace;font-size:0.7em}article{display:flex;display:-webkit-flex;flex-direction:row;-webkit-flex-direction:row}#__input_area{display:flex;display:-webkit-flex;flex-direction:column;-webkit-flex-direction:column}#__input_top_area{display:flex;display:-webkit-flex;flex-direction:row;-webkit-flex-direction:row;justify-content:space-between;-webkit-justify-content:space-between}#__input_controls_area{margin:0.1em 0 1.7em 0}#__output_area{display:flex;display:-webkit-flex;flex-direction:column;-webkit-flex-direction:column;padding:0 0.3em 0 0.3em}#__output_controls_area{margin:0 0 1.1em 2em}#__output_content_area{display:flex;display:-webkit-flex;flex-direction:column;-webkit-flex-direction:column}#__placeholder{display:flex;display:-webkit-flex;flex-direction:row;-webkit-flex-direction:row;padding:0 3em 0 3em;text-align:center;align-items:center;-webkit-align-items:center;transition:height 0.5s ease-out}@media screen and (min-width: 640px) and (max-width: 1024px){#__input_area{width:28em;min-width:28em;transition:width 0.3s ease-out}}@media screen and (min-width: 1025px){#__input_area{width:32em;min-width:32em;transition:width 0.3s ease-out}}@media screen and (max-width: 768px){article{display:flex;display:-webkit-flex;flex-direction:column;-webkit-flex-direction:column}#__input_area{width:100%;transition:width 0.3s ease-out}#__output_area{width:100%;flex-direction:column;-webkit-flex-direction:column}#__output_controls_area{margin:0 0 0.7em 0;order:1;-webkit-order:1}}@media screen and (max-width: 768px){.CodeMirror{height:24em;transition:height 0.5s ease-out}}@media screen and (max-width: 479px){#__input_controls_area{font-size:0.8em}}@media screen and (min-width: 769px) and (max-height: 600px){.CodeMirror{height:24em;transition:height 0.5s ease-out}#__placeholder{height:16em;transition:height 0.5s ease-out}}@media screen and (min-width: 769px) and (min-height: 600px) and (max-height: 700px){.CodeMirror{height:38em;transition:height 0.5s ease-out}#__placeholder{height:25em;transition:height 0.5s ease-out}}@media screen and (min-width: 769px) and (min-height: 701px) and (max-height: 790px){.CodeMirror{height:47em;transition:height 0.5s ease-out}#__placeholder{height:30em;transition:height 0.5s ease-out}}@media screen and (min-width: 769px) and (min-height: 791px){.CodeMirror{height:54em;transition:height 0.5s ease-out}#__placeholder{height:33em;transition:height 0.5s ease-out}}.popupsheet{z-index:1;position:absolute;top:5.3em;right:0;background-color:transparent;width:100%;padding-right:1em}.popupsheet .popup{float:right;max-width:28em;max-height:80%;border-collapse:separate;background-color:white;overflow:auto;border-radius:2px;opacity:.97;box-shadow:0 3px 6px rgba(0,0,0,0.23);margin:0 0 0 0;border:0;padding:0}.popup .header{padding:0.7em 0.5em 0 0.5em;border-bottom:solid #d3d3d3 1px}.popup h1{margin:0.5em 0 0.5em 0.7em;font-size:1.34em}.popup a{text-decoration:underline}.popup a:hover{text-decoration:underline}.popup .content{padding:0.4em 0.5em 0.5em 0.5em;border:none}.content textarea{max-width:98%}.popup span{padding-left:.5em}.popup .close{background-color:transparent;color:inherit;text-decoration:none;float:right;margin-top:-.3em;margin-right:-.3em}.popup .close:hover{box-shadow:none;transition:none}.popup td{vertical-align:top}.popup td:first-child{width:3.5em}.popup p{margin-right:1.5em;margin-left:1.0em}.popup p:first-child{margin-top:0}.popup img.aboutpic{width:4em}div.lightbox{display:none;top:0;padding-top:5em}div.lightbox:target{display:block}div.lightbox a.close{float:right;padding-top:0.5em;padding-right:0.7em}div.lightbox a.close:hover{text-decoration:none}div.lightbox a.close::before{content:"";display:block;position:fixed;top:0;left:0;width:100%;height:100%;opacity:0;z-index:-1}@media screen and (max-width: 480px){.popupsheet{padding-right:0}.popupsheet .popup{width:100%;max-width:100%;float:left}.popup button.close{margin-right:1em}.popup img{max-width:100%}}@media screen and (max-width: 800px){.popupsheet{z-index:3}}.sliding-panel{display:flex;display:-webkit-flex;flex-direction:column;-webkit-flex-direction:column;background-color:white;width:100%;height:0;position:fixed;z-index:314;bottom:0;box-shadow:0px -3px 6px rgba(0,0,0,0.23);transition:height 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55)}.sliding-panel .header{display:flex;display:-webkit-flex;flex-direction:row;-webkit-flex-direction:row;justify-content:space-between;-webkit-justify-content:space-between}.sliding-panel>span{display:flex;display:-webkit-flex;flex-direction:row;-webkit-flex-direction:row;justify-content:space-around;-webkit-justify-content:space-around}.sliding-panel>a,.sliding-panel>span{padding:10px;border-bottom:1px solid rgba(0,0,0,0.23)}.sliding-panel a:hover{cursor:pointer;text-decoration:underline}.sliding-panel>a:last-child{margin-bottom:2em}.sliding-panel .close-button{box-shadow:none;position:relative;top:0;right:0;padding:1em;color:inherit;background-color:transparent}#__animscreen{position:absolute;top:0;left:0;min-width:100%;min-height:100%;padding-bottom:10em;z-index:400;background:white;opacity:0.98}#__animcontrolswrapper{position:fixed;text-align:center;width:99%;bottom:1.5em;z-index:481}#__animcontrolswrapper nav{font-size:2em;padding:0.1 0.25em 0.25em 0.25em;background-color:black;opacity:0.6;box-shadow:0px 3px 6px rgba(0,0,0,0.6);display:inline-block}#__animscreen button{box-shadow:none}#__animscreen button:active{-webkit-transform:scale(0.9);transform:scale(0.9)}#__animcontrolswrapper button{color:white;background-color:inherit}#__animcontrolswrapper nav:hover{opacity:0.8}#__anim_progress_percentage_wrapper{cursor:pointer;z-index:482;background-color:transparent;width:100%;bottom:0;left:0;height:0.2em;width:100%;border:1px solid white}#__anim_progress_percentage{background-color:white;position:relative;bottom:0;left:0;height:0.2em;width:0}#__btn_anim_close{position:fixed;top:0;right:0;padding:1em;color:black;background-color:transparent}#__animsvgwrapper{width:100%;text-align:center;margin-top:3em}#__animsvg{opacity:1}@media screen and (max-width: 1164px){.hideontablet{display:none}}@media screen and (max-width: 639px){.hideonmobile{display:none}a.hideonmobile{display:none}span.hideonmobile{display:none}div.hideonmobile{display:none}.showonmobile{display:block}}@media screen and (max-width: 479px){.hideonmobile-portrait{display:none}}@media screen and (max-width: 360px){a.hideonmicro{display:none}span.hideonmicro{display:none}}@media print{.hideonprint{display:none}body{font-size:10pt}} diff --git a/src/style/snippets/_header.scss b/src/style/snippets/_header.scss index 51341b50..8d5ed6a1 100644 --- a/src/style/snippets/_header.scss +++ b/src/style/snippets/_header.scss @@ -6,7 +6,7 @@ header { background-repeat: no-repeat; background-position: 25%; box-shadow: 0 .1em 0.4em -.2em gray; - color: gray; + color: #707070; min-height: 3em; } .header-title { diff --git a/src/style/snippets/_interpreter.scss b/src/style/snippets/_interpreter.scss index 895a0f8e..780edb41 100644 --- a/src/style/snippets/_interpreter.scss +++ b/src/style/snippets/_interpreter.scss @@ -3,7 +3,7 @@ $error-color: #A94442; $error-border: 1px solid #EBCCD1; $width-transition: width 0.3s ease-out; $height-transition: height 0.5s ease-out; -$placeholder-color: lightgray; +$placeholder-color: #949494; .code { font-family: monospace; /* Monaco, Consolas, 'Andale Mono'; */ font-size: .7em; @@ -18,7 +18,8 @@ $placeholder-color: lightgray; text-overflow:ellipsis; overflow-x: scroll; } -h3 { +article h2 { + font-size: 1.16979375em; margin: 0; margin-bottom: 1em; font-weight: lighter; @@ -61,12 +62,12 @@ fieldset { legend { font-size: .7em; } -button, a.button { +button { color: rgba(0, 0, 0, 0.84); background-color: #eee; cursor: pointer; border-radius: 2px; - padding: .3em .5em .3em .5em; + padding: .1em .5em .3em .5em; border: none; font-size: 1em; text-decoration: none; From 5439150955545bf4d547caf6e9d06a5d1416c366 Mon Sep 17 00:00:00 2001 From: sverweij Date: Mon, 10 Aug 2015 22:10:19 +0200 Subject: [PATCH 3/9] use 'blackboard' as editor theme --- src/lib/codemirror/theme/_blackboard.scss | 32 +++++++++++++++++++ .../ui-control/interpreter-editor-events.js | 2 +- src/style/interp.scss | 2 +- 3 files changed, 34 insertions(+), 2 deletions(-) create mode 100644 src/lib/codemirror/theme/_blackboard.scss diff --git a/src/lib/codemirror/theme/_blackboard.scss b/src/lib/codemirror/theme/_blackboard.scss new file mode 100644 index 00000000..6de11dd2 --- /dev/null +++ b/src/lib/codemirror/theme/_blackboard.scss @@ -0,0 +1,32 @@ +/* Port of TextMate's Blackboard theme */ + +.cm-s-blackboard.CodeMirror { background: #0C1021; color: #F8F8F8; } +.cm-s-blackboard .CodeMirror-selected { background: #253B76 !important; } +.cm-s-blackboard .CodeMirror-line::selection, .cm-s-blackboard .CodeMirror-line > span::selection, .cm-s-blackboard .CodeMirror-line > span > span::selection { background: rgba(37, 59, 118, .99); } +.cm-s-blackboard .CodeMirror-line::-moz-selection, .cm-s-blackboard .CodeMirror-line > span::-moz-selection, .cm-s-blackboard .CodeMirror-line > span > span::-moz-selection { background: rgba(37, 59, 118, .99); } +.cm-s-blackboard .CodeMirror-gutters { background: #0C1021; border-right: 0; } +.cm-s-blackboard .CodeMirror-guttermarker { color: #FBDE2D; } +.cm-s-blackboard .CodeMirror-guttermarker-subtle { color: #888; } +.cm-s-blackboard .CodeMirror-linenumber { color: #888; } +.cm-s-blackboard .CodeMirror-cursor { border-left: 1px solid #A7A7A7 !important; } + +.cm-s-blackboard .cm-keyword { color: #FBDE2D; } +.cm-s-blackboard .cm-atom { color: #D8FA3C; } +.cm-s-blackboard .cm-number { color: #D8FA3C; } +.cm-s-blackboard .cm-def { color: #8DA6CE; } +.cm-s-blackboard .cm-variable { color: #FF6400; } +.cm-s-blackboard .cm-operator { color: #FBDE2D;} +.cm-s-blackboard .cm-comment { color: #AEAEAE; } +.cm-s-blackboard .cm-string { color: #61CE3C; } +.cm-s-blackboard .cm-string-2 { color: #61CE3C; } +.cm-s-blackboard .cm-meta { color: #D8FA3C; } +.cm-s-blackboard .cm-builtin { color: #8DA6CE; } +.cm-s-blackboard .cm-tag { color: #8DA6CE; } +.cm-s-blackboard .cm-attribute { color: #8DA6CE; } +.cm-s-blackboard .cm-header { color: #FF6400; } +.cm-s-blackboard .cm-hr { color: #AEAEAE; } +.cm-s-blackboard .cm-link { color: #8DA6CE; } +.cm-s-blackboard .cm-error { background: #9D1E15; color: #F8F8F8; } + +.cm-s-blackboard .CodeMirror-activeline-background {background: #3C3636 !important;} +.cm-s-blackboard .CodeMirror-matchingbracket {outline:1px solid grey;color:white !important} \ No newline at end of file diff --git a/src/script/ui-control/interpreter-editor-events.js b/src/script/ui-control/interpreter-editor-events.js index 19bdb00a..571a0f5f 100644 --- a/src/script/ui-control/interpreter-editor-events.js +++ b/src/script/ui-control/interpreter-editor-events.js @@ -23,7 +23,7 @@ define(["./interpreter-uistate", lineNumbers : true, autoCloseBrackets : true, matchBrackets : true, - theme : "mbo", + theme : "blackboard", mode : "xu", placeholder : "Type your text. Or drag a file to this area....", lineWrapping : false diff --git a/src/style/interp.scss b/src/style/interp.scss index 8f97d6c5..2519f07c 100644 --- a/src/style/interp.scss +++ b/src/style/interp.scss @@ -1,6 +1,6 @@ @import "./snippets/fonts"; @import "../lib/codemirror/codemirror"; -@import "../lib/codemirror/theme/mbo"; +@import "../lib/codemirror/theme/blackboard"; @import "./snippets/_generics"; @import "./snippets/_header"; @import "./snippets/_interpreter"; From 3b3e1ba38da81388124b69f5e4e17c02765c91b6 Mon Sep 17 00:00:00 2001 From: sverweij Date: Mon, 10 Aug 2015 22:11:20 +0200 Subject: [PATCH 4/9] upgrade: codemirror --- src/lib/codemirror/_codemirror.scss | 31 ++++--- src/lib/codemirror/lib/codemirror.js | 123 +++++++++++++++++++-------- src/lib/codemirror/theme/_mbo.scss | 6 +- 3 files changed, 110 insertions(+), 50 deletions(-) diff --git a/src/lib/codemirror/_codemirror.scss b/src/lib/codemirror/_codemirror.scss index b313b61c..318d25f0 100644 --- a/src/lib/codemirror/_codemirror.scss +++ b/src/lib/codemirror/_codemirror.scss @@ -63,21 +63,22 @@ -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% { background: #7e7; } - 50% { background: none; } - 100% { background: #7e7; } + 0% {} + 50% { background-color: transparent; } + 100% {} } @-webkit-keyframes blink { - 0% { background: #7e7; } - 50% { background: none; } - 100% { background: #7e7; } + 0% {} + 50% { background-color: transparent; } + 100% {} } @keyframes blink { - 0% { background: #7e7; } - 50% { background: none; } - 100% { background: #7e7; } + 0% {} + 50% { background-color: transparent; } + 100% {} } /* Can style cursor different in overwrite (non-insert) mode */ @@ -202,7 +203,13 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} .CodeMirror-gutter-wrapper { position: absolute; z-index: 4; - height: 100%; + background: none !important; + border: none !important; +} +.CodeMirror-gutter-background { + position: absolute; + top: 0; bottom: 0; + z-index: 4; } .CodeMirror-gutter-elt { position: absolute; @@ -297,8 +304,8 @@ div.CodeMirror-cursors { .CodeMirror-selected { background: #d9d9d9; } .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } .CodeMirror-crosshair { cursor: crosshair; } -.CodeMirror ::selection { background: #d7d4f0; } -.CodeMirror ::-moz-selection { background: #d7d4f0; } +.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; diff --git a/src/lib/codemirror/lib/codemirror.js b/src/lib/codemirror/lib/codemirror.js index 283fc09f..e9e2c1f3 100644 --- a/src/lib/codemirror/lib/codemirror.js +++ b/src/lib/codemirror/lib/codemirror.js @@ -65,7 +65,7 @@ setGuttersForLineNumbers(options); var doc = options.value; - if (typeof doc == "string") doc = new Doc(doc, options.mode); + if (typeof doc == "string") doc = new Doc(doc, options.mode, null, options.lineSeparator); this.doc = doc; var input = new CodeMirror.inputStyles[options.inputStyle](this); @@ -714,7 +714,7 @@ // width and height. removeChildren(display.cursorDiv); removeChildren(display.selectionDiv); - display.gutters.style.height = 0; + display.gutters.style.height = display.sizer.style.minHeight = 0; if (different) { display.lastWrapHeight = update.wrapperHeight; @@ -955,12 +955,22 @@ lineView.node.removeChild(lineView.gutter); lineView.gutter = null; } + if (lineView.gutterBackground) { + lineView.node.removeChild(lineView.gutterBackground); + lineView.gutterBackground = null; + } + if (lineView.line.gutterClass) { + var wrap = ensureLineWrapped(lineView); + lineView.gutterBackground = elt("div", null, "CodeMirror-gutter-background " + lineView.line.gutterClass, + "left: " + (cm.options.fixedGutter ? dims.fixedPos : -dims.gutterTotalWidth) + + "px; width: " + dims.gutterTotalWidth + "px"); + wrap.insertBefore(lineView.gutterBackground, lineView.text); + } var markers = lineView.line.gutterMarkers; if (cm.options.lineNumbers || markers) { var wrap = ensureLineWrapped(lineView); var gutterWrap = lineView.gutter = elt("div", null, "CodeMirror-gutter-wrapper", "left: " + - (cm.options.fixedGutter ? dims.fixedPos : -dims.gutterTotalWidth) + - "px; width: " + dims.gutterTotalWidth + "px"); + (cm.options.fixedGutter ? dims.fixedPos : -dims.gutterTotalWidth) + "px"); cm.display.input.setUneditable(gutterWrap); wrap.insertBefore(gutterWrap, lineView.text); if (lineView.line.gutterClass) @@ -1082,13 +1092,18 @@ if (!sel) sel = doc.sel; var paste = cm.state.pasteIncoming || origin == "paste"; - var textLines = splitLines(inserted), multiPaste = null; + var textLines = doc.splitLines(inserted), multiPaste = null; // When pasing N lines into N selections, insert one line per selection if (paste && sel.ranges.length > 1) { - if (lastCopied && lastCopied.join("\n") == inserted) - multiPaste = sel.ranges.length % lastCopied.length == 0 && map(lastCopied, splitLines); - else if (textLines.length == sel.ranges.length) + if (lastCopied && lastCopied.join("\n") == inserted) { + if (sel.ranges.length % lastCopied.length == 0) { + multiPaste = []; + for (var i = 0; i < lastCopied.length; i++) + multiPaste.push(doc.splitLines(lastCopied[i])); + } + } else if (textLines.length == sel.ranges.length) { multiPaste = map(textLines, function(l) { return [l]; }); + } } // Normal behavior is to insert the new text into every selection @@ -1388,7 +1403,7 @@ // will be the case when there is a lot of text in the textarea, // in which case reading its value would be expensive. if (this.contextMenuPending || !cm.state.focused || - (hasSelection(input) && !prevInput) || + (hasSelection(input) && !prevInput && !this.composing) || isReadOnly(cm) || cm.options.disableInput || cm.state.keySeq) return false; @@ -1756,7 +1771,7 @@ var toNode = display.view[toIndex + 1].node.previousSibling; } - var newText = splitLines(domTextBetween(cm, fromNode, toNode, fromLine, toLine)); + var newText = cm.doc.splitLines(domTextBetween(cm, fromNode, toNode, fromLine, toLine)); var oldText = getBetween(cm.doc, Pos(fromLine, 0), Pos(toLine, getLine(cm.doc, toLine).text.length)); while (newText.length > 1 && oldText.length > 1) { if (lst(newText) == lst(oldText)) { newText.pop(); oldText.pop(); toLine--; } @@ -1912,7 +1927,7 @@ } function domTextBetween(cm, from, to, fromLine, toLine) { - var text = "", closing = false; + var text = "", closing = false, lineSep = cm.doc.lineSeparator(); function recognizeMarker(id) { return function(marker) { return marker.id == id; }; } function walk(node) { if (node.nodeType == 1) { @@ -1926,7 +1941,7 @@ if (markerID) { var found = cm.findMarks(Pos(fromLine, 0), Pos(toLine + 1, 0), recognizeMarker(+markerID)); if (found.length && (range = found[0].find())) - text += getBetween(cm.doc, range.from, range.to).join("\n"); + text += getBetween(cm.doc, range.from, range.to).join(lineSep); return; } if (node.getAttribute("contenteditable") == "false") return; @@ -1938,7 +1953,7 @@ var val = node.nodeValue; if (!val) return; if (closing) { - text += "\n"; + text += lineSep; closing = false; } text += val; @@ -2545,10 +2560,12 @@ function prepareMeasureForLine(cm, line) { var lineN = lineNo(line); var view = findViewForLine(cm, lineN); - if (view && !view.text) + if (view && !view.text) { view = null; - else if (view && view.changes) + } else if (view && view.changes) { updateLineForChanges(cm, view, lineN, getDimensions(cm)); + cm.curOp.forceUpdate = true; + } if (!view) view = updateExternalMeasurement(cm, line); @@ -3785,7 +3802,9 @@ text[i] = reader.result; if (++read == n) { pos = clipPos(cm.doc, pos); - var change = {from: pos, to: pos, text: splitLines(text.join("\n")), origin: "paste"}; + var change = {from: pos, to: pos, + text: cm.doc.splitLines(text.join(cm.doc.lineSeparator())), + origin: "paste"}; makeChange(cm.doc, change); setSelectionReplaceHistory(cm.doc, simpleSelection(pos, changeEnd(change))); } @@ -4468,7 +4487,7 @@ function replaceRange(doc, code, from, to, origin) { if (!to) to = from; if (cmp(to, from) < 0) { var tmp = to; to = from; from = tmp; } - if (typeof code == "string") code = splitLines(code); + if (typeof code == "string") code = doc.splitLines(code); makeChange(doc, {from: from, to: to, text: code, origin: origin}); } @@ -5263,6 +5282,22 @@ clearCaches(cm); regChange(cm); }, true); + option("lineSeparator", null, function(cm, val) { + cm.doc.lineSep = val; + if (!val) return; + var newBreaks = [], lineNo = cm.doc.first; + cm.doc.iter(function(line) { + for (var pos = 0;;) { + var found = line.text.indexOf(val, pos); + if (found == -1) break; + pos = found + val.length; + newBreaks.push(Pos(lineNo, found)); + } + lineNo++; + }); + for (var i = newBreaks.length - 1; i >= 0; i--) + replaceRange(cm.doc, val, newBreaks[i], Pos(newBreaks[i].line, newBreaks[i].ch + val.length)) + }); option("specialChars", /[\t\u0000-\u0019\u00ad\u200b-\u200f\u2028\u2029\ufeff]/g, function(cm, val, old) { cm.state.specialChars = new RegExp(val.source + (val.test("\t") ? "" : "|\t"), "g"); if (old != CodeMirror.Init) cm.refresh(); @@ -5613,7 +5648,8 @@ } else if (cur.line > cm.doc.first) { var prev = getLine(cm.doc, cur.line - 1).text; if (prev) - cm.replaceRange(line.charAt(0) + "\n" + prev.charAt(prev.length - 1), + cm.replaceRange(line.charAt(0) + cm.doc.lineSeparator() + + prev.charAt(prev.length - 1), Pos(cur.line - 1, prev.length - 1), Pos(cur.line, 1), "+transpose"); } } @@ -5627,7 +5663,7 @@ var len = cm.listSelections().length; for (var i = 0; i < len; i++) { var range = cm.listSelections()[i]; - cm.replaceRange("\n", range.anchor, range.head, "+input"); + cm.replaceRange(cm.doc.lineSeparator(), range.anchor, range.head, "+input"); cm.indentLine(range.from().line + 1, null, true); ensureCursorVisible(cm); } @@ -6791,7 +6827,7 @@ // is needed on Webkit to be able to get line-level bounding // rectangles for it (in measureChar). var content = elt("span", null, null, webkit ? "padding-right: .1px" : null); - var builder = {pre: elt("pre", [content]), content: content, + var builder = {pre: elt("pre", [content], "CodeMirror-line"), content: content, col: 0, pos: 0, cm: cm, splitSpaces: (ie || webkit) && cm.getOption("lineWrapping")}; lineView.measure = {}; @@ -6881,6 +6917,10 @@ txt.setAttribute("role", "presentation"); txt.setAttribute("cm-text", "\t"); builder.col += tabWidth; + } else if (m[0] == "\r" || m[0] == "\n") { + var txt = content.appendChild(elt("span", m[0] == "\r" ? "␍" : "␤", "cm-invalidchar")); + txt.setAttribute("cm-text", m[0]); + builder.col += 1; } else { var txt = builder.cm.options.specialCharPlaceholder(m[0]); txt.setAttribute("cm-text", m[0]); @@ -7226,8 +7266,8 @@ }; var nextDocId = 0; - var Doc = CodeMirror.Doc = function(text, mode, firstLine) { - if (!(this instanceof Doc)) return new Doc(text, mode, firstLine); + var Doc = CodeMirror.Doc = function(text, mode, firstLine, lineSep) { + if (!(this instanceof Doc)) return new Doc(text, mode, firstLine, lineSep); if (firstLine == null) firstLine = 0; BranchChunk.call(this, [new LeafChunk([new Line("", null)])]); @@ -7241,8 +7281,9 @@ this.history = new History(null); this.id = ++nextDocId; this.modeOption = mode; + this.lineSep = lineSep; - if (typeof text == "string") text = splitLines(text); + if (typeof text == "string") text = this.splitLines(text); updateDoc(this, {from: start, to: start, text: text}); setSelection(this, simpleSelection(start), sel_dontScroll); }; @@ -7272,12 +7313,12 @@ getValue: function(lineSep) { var lines = getLines(this, this.first, this.first + this.size); if (lineSep === false) return lines; - return lines.join(lineSep || "\n"); + return lines.join(lineSep || this.lineSeparator()); }, setValue: docMethodOp(function(code) { var top = Pos(this.first, 0), last = this.first + this.size - 1; makeChange(this, {from: top, to: Pos(last, getLine(this, last).text.length), - text: splitLines(code), origin: "setValue", full: true}, true); + text: this.splitLines(code), origin: "setValue", full: true}, true); setSelection(this, simpleSelection(top)); }), replaceRange: function(code, from, to, origin) { @@ -7288,7 +7329,7 @@ getRange: function(from, to, lineSep) { var lines = getBetween(this, clipPos(this, from), clipPos(this, to)); if (lineSep === false) return lines; - return lines.join(lineSep || "\n"); + return lines.join(lineSep || this.lineSeparator()); }, getLine: function(line) {var l = this.getLineHandle(line); return l && l.text;}, @@ -7354,13 +7395,13 @@ lines = lines ? lines.concat(sel) : sel; } if (lineSep === false) return lines; - else return lines.join(lineSep || "\n"); + else return lines.join(lineSep || this.lineSeparator()); }, getSelections: function(lineSep) { var parts = [], ranges = this.sel.ranges; for (var i = 0; i < ranges.length; i++) { var sel = getBetween(this, ranges[i].from(), ranges[i].to()); - if (lineSep !== false) sel = sel.join(lineSep || "\n"); + if (lineSep !== false) sel = sel.join(lineSep || this.lineSeparator()); parts[i] = sel; } return parts; @@ -7375,7 +7416,7 @@ var changes = [], sel = this.sel; for (var i = 0; i < sel.ranges.length; i++) { var range = sel.ranges[i]; - changes[i] = {from: range.from(), to: range.to(), text: splitLines(code[i]), origin: origin}; + changes[i] = {from: range.from(), to: range.to(), text: this.splitLines(code[i]), origin: origin}; } var newSel = collapse && collapse != "end" && computeReplacedSel(this, changes, collapse); for (var i = changes.length - 1; i >= 0; i--) @@ -7525,7 +7566,8 @@ }, copy: function(copyHistory) { - var doc = new Doc(getLines(this, this.first, this.first + this.size), this.modeOption, this.first); + var doc = new Doc(getLines(this, this.first, this.first + this.size), + this.modeOption, this.first, this.lineSep); doc.scrollTop = this.scrollTop; doc.scrollLeft = this.scrollLeft; doc.sel = this.sel; doc.extend = false; @@ -7541,7 +7583,7 @@ var from = this.first, to = this.first + this.size; if (options.from != null && options.from > from) from = options.from; if (options.to != null && options.to < to) to = options.to; - var copy = new Doc(getLines(this, from, to), options.mode || this.modeOption, from); + var copy = new Doc(getLines(this, from, to), options.mode || this.modeOption, from, this.lineSep); if (options.sharedHist) copy.history = this.history; (this.linked || (this.linked = [])).push({doc: copy, sharedHist: options.sharedHist}); copy.linked = [{doc: this, isParent: true, sharedHist: options.sharedHist}]; @@ -7570,7 +7612,13 @@ iterLinkedDocs: function(f) {linkedDocs(this, f);}, getMode: function() {return this.mode;}, - getEditor: function() {return this.cm;} + getEditor: function() {return this.cm;}, + + splitLines: function(str) { + if (this.lineSep) return str.split(this.lineSep); + return splitLinesAuto(str); + }, + lineSeparator: function() { return this.lineSep || "\n"; } }); // Public alias. @@ -8269,7 +8317,12 @@ } while (child = child.parentNode); }; - function activeElt() { return document.activeElement; } + function activeElt() { + var activeElement = document.activeElement; + while (activeElement && activeElement.root && activeElement.root.activeElement) + activeElement = activeElement.root.activeElement; + return activeElement; + } // Older versions of IE throws unspecified error when touching // document.activeElement in some cases (during loading, in iframe) if (ie && ie_version < 11) activeElt = function() { @@ -8371,7 +8424,7 @@ // See if "".split is the broken IE version, if so, provide an // alternative way to split lines. - var splitLines = CodeMirror.splitLines = "\n\nb".split(/\n/).length != 3 ? function(string) { + var splitLinesAuto = CodeMirror.splitLines = "\n\nb".split(/\n/).length != 3 ? function(string) { var pos = 0, result = [], l = string.length; while (pos <= l) { var nl = string.indexOf("\n", pos); @@ -8729,7 +8782,7 @@ // THE END - CodeMirror.version = "5.4.0"; + CodeMirror.version = "5.5.0"; return CodeMirror; }); diff --git a/src/lib/codemirror/theme/_mbo.scss b/src/lib/codemirror/theme/_mbo.scss index e3987952..470609da 100644 --- a/src/lib/codemirror/theme/_mbo.scss +++ b/src/lib/codemirror/theme/_mbo.scss @@ -6,8 +6,8 @@ .cm-s-mbo.CodeMirror {background: #2c2c2c; color: #ffffec;} .cm-s-mbo div.CodeMirror-selected {background: #716C62 !important;} -.cm-s-mbo.CodeMirror ::selection { background: rgba(113, 108, 98, .99); } -.cm-s-mbo.CodeMirror ::-moz-selection { background: rgba(113, 108, 98, .99); } +.cm-s-mbo .CodeMirror-line::selection, .cm-s-mbo .CodeMirror-line > span::selection, .cm-s-mbo .CodeMirror-line > span > span::selection { background: rgba(113, 108, 98, .99); } +.cm-s-mbo .CodeMirror-line::-moz-selection, .cm-s-mbo .CodeMirror-line > span::-moz-selection, .cm-s-mbo .CodeMirror-line > span > span::-moz-selection { background: rgba(113, 108, 98, .99); } .cm-s-mbo .CodeMirror-gutters {background: #4e4e4e; border-right: 0px;} .cm-s-mbo .CodeMirror-guttermarker { color: white; } .cm-s-mbo .CodeMirror-guttermarker-subtle { color: grey; } @@ -33,5 +33,5 @@ .cm-s-mbo span.cm-qualifier {color: #ffffec;} .cm-s-mbo .CodeMirror-activeline-background {background: #494b41 !important;} -.cm-s-mbo .CodeMirror-matchingbracket {color: #222 !important;} +.cm-s-mbo .CodeMirror-matchingbracket {text-decoration: underline; color: white !important;} .cm-s-mbo .CodeMirror-matchingtag {background: rgba(255, 255, 255, .37);} From bbf18250e21623add05521a5fc7775cc453de766 Mon Sep 17 00:00:00 2001 From: sverweij Date: Mon, 10 Aug 2015 22:12:06 +0200 Subject: [PATCH 5/9] add some themes with sufficient contrast --- src/lib/codemirror/theme/_rubyblue.scss | 25 ++++++++++++++++ src/lib/codemirror/theme/_the-matrix.scss | 30 +++++++++++++++++++ src/lib/codemirror/theme/_vibrant-ink.scss | 34 ++++++++++++++++++++++ 3 files changed, 89 insertions(+) create mode 100644 src/lib/codemirror/theme/_rubyblue.scss create mode 100644 src/lib/codemirror/theme/_the-matrix.scss create mode 100644 src/lib/codemirror/theme/_vibrant-ink.scss diff --git a/src/lib/codemirror/theme/_rubyblue.scss b/src/lib/codemirror/theme/_rubyblue.scss new file mode 100644 index 00000000..064f192f --- /dev/null +++ b/src/lib/codemirror/theme/_rubyblue.scss @@ -0,0 +1,25 @@ +.cm-s-rubyblue.CodeMirror { background: #112435; color: white; } +.cm-s-rubyblue div.CodeMirror-selected { background: #38566F !important; } +.cm-s-rubyblue .CodeMirror-line::selection, .cm-s-rubyblue .CodeMirror-line > span::selection, .cm-s-rubyblue .CodeMirror-line > span > span::selection { background: rgba(56, 86, 111, 0.99); } +.cm-s-rubyblue .CodeMirror-line::-moz-selection, .cm-s-rubyblue .CodeMirror-line > span::-moz-selection, .cm-s-rubyblue .CodeMirror-line > span > span::-moz-selection { background: rgba(56, 86, 111, 0.99); } +.cm-s-rubyblue .CodeMirror-gutters { background: #1F4661; border-right: 7px solid #3E7087; } +.cm-s-rubyblue .CodeMirror-guttermarker { color: white; } +.cm-s-rubyblue .CodeMirror-guttermarker-subtle { color: #3E7087; } +.cm-s-rubyblue .CodeMirror-linenumber { color: white; } +.cm-s-rubyblue .CodeMirror-cursor { border-left: 1px solid white !important; } + +.cm-s-rubyblue span.cm-comment { color: #999; font-style:italic; line-height: 1em; } +.cm-s-rubyblue span.cm-atom { color: #F4C20B; } +.cm-s-rubyblue span.cm-number, .cm-s-rubyblue span.cm-attribute { color: #82C6E0; } +.cm-s-rubyblue span.cm-keyword { color: #F0F; } +.cm-s-rubyblue span.cm-string { color: #F08047; } +.cm-s-rubyblue span.cm-meta { color: #F0F; } +.cm-s-rubyblue span.cm-variable-2, .cm-s-rubyblue span.cm-tag { color: #7BD827; } +.cm-s-rubyblue span.cm-variable-3, .cm-s-rubyblue span.cm-def { color: white; } +.cm-s-rubyblue span.cm-bracket { color: #F0F; } +.cm-s-rubyblue span.cm-link { color: #F4C20B; } +.cm-s-rubyblue span.CodeMirror-matchingbracket { color:#F0F !important; } +.cm-s-rubyblue span.cm-builtin, .cm-s-rubyblue span.cm-special { color: #FF9D00; } +.cm-s-rubyblue span.cm-error { color: #AF2018; } + +.cm-s-rubyblue .CodeMirror-activeline-background {background: #173047 !important;} diff --git a/src/lib/codemirror/theme/_the-matrix.scss b/src/lib/codemirror/theme/_the-matrix.scss new file mode 100644 index 00000000..ec6046ad --- /dev/null +++ b/src/lib/codemirror/theme/_the-matrix.scss @@ -0,0 +1,30 @@ +.cm-s-the-matrix.CodeMirror { background: #000000; color: #00FF00; } +.cm-s-the-matrix div.CodeMirror-selected { background: #2D2D2D !important; } +.cm-s-the-matrix .CodeMirror-line::selection, .cm-s-the-matrix .CodeMirror-line > span::selection, .cm-s-the-matrix .CodeMirror-line > span > span::selection { background: rgba(45, 45, 45, 0.99); } +.cm-s-the-matrix .CodeMirror-line::-moz-selection, .cm-s-the-matrix .CodeMirror-line > span::-moz-selection, .cm-s-the-matrix .CodeMirror-line > span > span::-moz-selection { background: rgba(45, 45, 45, 0.99); } +.cm-s-the-matrix .CodeMirror-gutters { background: #060; border-right: 2px solid #00FF00; } +.cm-s-the-matrix .CodeMirror-guttermarker { color: #0f0; } +.cm-s-the-matrix .CodeMirror-guttermarker-subtle { color: white; } +.cm-s-the-matrix .CodeMirror-linenumber { color: #FFFFFF; } +.cm-s-the-matrix .CodeMirror-cursor { border-left: 1px solid #00FF00 !important; } + +.cm-s-the-matrix span.cm-keyword {color: #008803; font-weight: bold;} +.cm-s-the-matrix span.cm-atom {color: #3FF;} +.cm-s-the-matrix span.cm-number {color: #FFB94F;} +.cm-s-the-matrix span.cm-def {color: #99C;} +.cm-s-the-matrix span.cm-variable {color: #F6C;} +.cm-s-the-matrix span.cm-variable-2 {color: #C6F;} +.cm-s-the-matrix span.cm-variable-3 {color: #96F;} +.cm-s-the-matrix span.cm-property {color: #62FFA0;} +.cm-s-the-matrix span.cm-operator {color: #999} +.cm-s-the-matrix span.cm-comment {color: #CCCCCC;} +.cm-s-the-matrix span.cm-string {color: #39C;} +.cm-s-the-matrix span.cm-meta {color: #C9F;} +.cm-s-the-matrix span.cm-qualifier {color: #FFF700;} +.cm-s-the-matrix span.cm-builtin {color: #30a;} +.cm-s-the-matrix span.cm-bracket {color: #cc7;} +.cm-s-the-matrix span.cm-tag {color: #FFBD40;} +.cm-s-the-matrix span.cm-attribute {color: #FFF700;} +.cm-s-the-matrix span.cm-error {color: #FF0000;} + +.cm-s-the-matrix .CodeMirror-activeline-background {background: #040;} diff --git a/src/lib/codemirror/theme/_vibrant-ink.scss b/src/lib/codemirror/theme/_vibrant-ink.scss new file mode 100644 index 00000000..8d3e99d3 --- /dev/null +++ b/src/lib/codemirror/theme/_vibrant-ink.scss @@ -0,0 +1,34 @@ +/* Taken from the popular Visual Studio Vibrant Ink Schema */ + +.cm-s-vibrant-ink.CodeMirror { background: black; color: white; } +.cm-s-vibrant-ink .CodeMirror-selected { background: #35493c !important; } +.cm-s-vibrant-ink .CodeMirror-line::selection, .cm-s-vibrant-ink .CodeMirror-line > span::selection, .cm-s-vibrant-ink .CodeMirror-line > span > span::selection { background: rgba(53, 73, 60, 0.99); } +.cm-s-vibrant-ink .CodeMirror-line::-moz-selection, .cm-s-vibrant-ink .CodeMirror-line > span::-moz-selection, .cm-s-vibrant-ink .CodeMirror-line > span > span::-moz-selection { background: rgba(53, 73, 60, 0.99); } + +.cm-s-vibrant-ink .CodeMirror-gutters { background: #002240; border-right: 1px solid #aaa; } +.cm-s-vibrant-ink .CodeMirror-guttermarker { color: white; } +.cm-s-vibrant-ink .CodeMirror-guttermarker-subtle { color: #d0d0d0; } +.cm-s-vibrant-ink .CodeMirror-linenumber { color: #d0d0d0; } +.cm-s-vibrant-ink .CodeMirror-cursor { border-left: 1px solid white !important; } + +.cm-s-vibrant-ink .cm-keyword { color: #CC7832; } +.cm-s-vibrant-ink .cm-atom { color: #FC0; } +.cm-s-vibrant-ink .cm-number { color: #FFEE98; } +.cm-s-vibrant-ink .cm-def { color: #8DA6CE; } +.cm-s-vibrant-ink span.cm-variable-2, .cm-s-vibrant span.cm-tag { color: #FFC66D } +.cm-s-vibrant-ink span.cm-variable-3, .cm-s-vibrant span.cm-def { color: #FFC66D } +.cm-s-vibrant-ink .cm-operator { color: #888; } +.cm-s-vibrant-ink .cm-comment { color: gray; font-weight: bold; } +.cm-s-vibrant-ink .cm-string { color: #A5C25C } +.cm-s-vibrant-ink .cm-string-2 { color: red } +.cm-s-vibrant-ink .cm-meta { color: #D8FA3C; } +.cm-s-vibrant-ink .cm-builtin { color: #8DA6CE; } +.cm-s-vibrant-ink .cm-tag { color: #8DA6CE; } +.cm-s-vibrant-ink .cm-attribute { color: #8DA6CE; } +.cm-s-vibrant-ink .cm-header { color: #FF6400; } +.cm-s-vibrant-ink .cm-hr { color: #AEAEAE; } +.cm-s-vibrant-ink .cm-link { color: blue; } +.cm-s-vibrant-ink .cm-error { border-bottom: 1px solid red; } + +.cm-s-vibrant-ink .CodeMirror-activeline-background {background: #27282E !important;} +.cm-s-vibrant-ink .CodeMirror-matchingbracket {outline:1px solid grey; color:white !important;} From 3f6c8067d68eade02f744498d6266a70fad114f1 Mon Sep 17 00:00:00 2001 From: sverweij Date: Mon, 10 Aug 2015 22:12:46 +0200 Subject: [PATCH 6/9] small accessibility tweaks in animation screen --- src/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.html b/src/index.html index c4ef4cb7..e548e05d 100644 --- a/src/index.html +++ b/src/index.html @@ -342,7 +342,7 @@

Apply a color scheme