Permalink
Browse files

Add a new dark theme mode for the scratchpad. Fixes #107.

  • Loading branch information...
1 parent 2474ed7 commit f7dc60523c7548c24e11cc53d39ff35804114ac0 @jeresig jeresig committed Apr 23, 2012
Showing with 94 additions and 8 deletions.
  1. +67 −4 css/style.css
  2. +1 −0 js/ace-theme-twilight.js
  3. +1 −0 js/ace-theme-vibrant_ink.js
  4. +10 −3 js/output.js
  5. +15 −1 js/play-ui.js
View
71 css/style.css
@@ -687,12 +687,12 @@ div#exercise-page {
position: absolute;
display: block;
z-index: 100;
- width: 20px;
+ width: 31px;
background: black;
padding: 5px;
border-radius: 7px;
margin-top: -29px;
- margin-left: -15px;
+ margin-left: -20px;
box-shadow: 0px 0px 8px rgba(0,0,0,1);
opacity: 0.2;
}
@@ -722,7 +722,7 @@ div#exercise-page {
.hotnumber .arrow {
position: absolute;
bottom: -8px;
- left: 8px;
+ left: 13px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid black;
@@ -737,7 +737,7 @@ div#exercise-page {
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid black;
- left: -8px;
+ left: -7px;
top: 5px;
bottom: auto;
}
@@ -747,6 +747,9 @@ div#exercise-page {
position: relative;
width: 15px;
height: 15px;
+ border: 1px solid white;
+ margin-left: -1px;
+ margin-top: -1px;
}
.hotnumber.picker:hover .picker {
@@ -863,6 +866,66 @@ div#exercise-page {
width: 984px;
}
+#play-page.scratch #code .toolbar {
+ border: none;
+ background: #fff;
+}
+
+#play-page.scratch #editor-box {
+ border: none;
+}
+
+#play-page.scratch #editor {
+ border: 1px solid #DFD9C3;
+}
+
+/* Dark colors for Scratchpad */
+
+html.dark #play-page.scratch #code .toolbar {
+ background: #333;
+}
+
+html.dark .content.scratch {
+ background: #333;
+ color: #fff;
+ overflow: auto;
+}
+
+html.dark .content.scratch h1,
+html.dark .content.scratch h2,
+html.dark .content.scratch h3,
+html.dark .content.scratch h4 {
+ color: #fff;
+}
+
+html.dark #play-page.scratch .ace_sb,
+html.dark #play-page.scratch .ace_scroller {
+ background: #0f0f0f;
+}
+
+html.dark .hotnumber {
+ background: #fff;
+ box-shadow: 0px 0px 8px rgba(255,255,255,1);
+}
+
+html.dark .hotnumber .ui-slider {
+ background: #0f0f0f;
+}
+
+html.dark .hotnumber .arrow {
+ border-top-color: #fff;
+}
+
+html.dark .hotnumber.picker .arrow {
+ border-top-color: transparent;
+ border-right-color: #fff;
+}
+
+html.dark .hotnumber.picker .picker {
+ border: 1px solid black;
+}
+
+/* 720p resizing for Scratchpad */
@media (min-width: 1300px) {
#play-page.scratch #canvas-editor {
width: 1300px;
View
1 js/ace-theme-twilight.js
@@ -0,0 +1 @@
+define("ace/theme/twilight",["require","exports","module","ace/lib/dom"],function(a,b,c){b.isDark=!0,b.cssClass="ace-twilight",b.cssText=".ace-twilight .ace_editor { border: 2px solid rgb(159, 159, 159);}.ace-twilight .ace_editor.ace_focus { border: 2px solid #327fbd;}.ace-twilight .ace_gutter { background: #e8e8e8; color: #333;}.ace-twilight .ace_print_margin { width: 1px; background: #e8e8e8;}.ace-twilight .ace_scroller { background-color: #141414;}.ace-twilight .ace_text-layer { cursor: text; color: #F8F8F8;}.ace-twilight .ace_cursor { border-left: 2px solid #A7A7A7;}.ace-twilight .ace_cursor.ace_overwrite { border-left: 0px; border-bottom: 1px solid #A7A7A7;}.ace-twilight .ace_marker-layer .ace_selection { background: rgba(221, 240, 255, 0.20);}.ace-twilight.multiselect .ace_selection.start { box-shadow: 0 0 3px 0px #141414; border-radius: 2px;}.ace-twilight .ace_marker-layer .ace_step { background: rgb(198, 219, 174);}.ace-twilight .ace_marker-layer .ace_bracket { margin: -1px 0 0 -1px; border: 1px solid rgba(255, 255, 255, 0.25);}.ace-twilight .ace_marker-layer .ace_active_line { background: rgba(255, 255, 255, 0.031);}.ace-twilight .ace_marker-layer .ace_selected_word { border: 1px solid rgba(221, 240, 255, 0.20);}.ace-twilight .ace_invisible { color: rgba(255, 255, 255, 0.25);}.ace-twilight .ace_keyword, .ace-twilight .ace_meta { color:#CDA869;}.ace-twilight .ace_constant, .ace-twilight .ace_constant.ace_other { color:#CF6A4C;}.ace-twilight .ace_constant.ace_character, { color:#CF6A4C;}.ace-twilight .ace_constant.ace_character.ace_escape, { color:#CF6A4C;}.ace-twilight .ace_invalid.ace_illegal { color:#F8F8F8;background-color:rgba(86, 45, 86, 0.75);}.ace-twilight .ace_invalid.ace_deprecated { text-decoration:underline;font-style:italic;color:#D2A8A1;}.ace-twilight .ace_support { color:#9B859D;}.ace-twilight .ace_support.ace_constant { color:#CF6A4C;}.ace-twilight .ace_fold { background-color: #AC885B; border-color: #F8F8F8;}.ace-twilight .ace_support.ace_function { color:#DAD085;}.ace-twilight .ace_storage { color:#F9EE98;}.ace-twilight .ace_variable { color:#AC885B;}.ace-twilight .ace_string { color:#8F9D6A;}.ace-twilight .ace_string.ace_regexp { color:#E9C062;}.ace-twilight .ace_comment { font-style:italic;color:#5F5A60;}.ace-twilight .ace_variable { color:#7587A6;}.ace-twilight .ace_xml_pe { color:#494949;}.ace-twilight .ace_meta.ace_tag { color:#AC885B;}.ace-twilight .ace_entity.ace_name.ace_function { color:#AC885B;}.ace-twilight .ace_markup.ace_underline { text-decoration:underline;}.ace-twilight .ace_markup.ace_heading { color:#CF6A4C;}.ace-twilight .ace_markup.ace_list { color:#F9EE98;}";})
View
1 js/ace-theme-vibrant_ink.js
@@ -0,0 +1 @@
+define("ace/theme/vibrant_ink",["require","exports","module","ace/lib/dom"],function(a,b,c){b.isDark=!0,b.cssClass="ace-vibrant-ink",b.cssText=".ace-vibrant-ink .ace_editor { border: 2px solid rgb(159, 159, 159);}.ace-vibrant-ink .ace_editor.ace_focus { border: 2px solid #327fbd;}.ace-vibrant-ink .ace_gutter { background: #e8e8e8; color: #333;}.ace-vibrant-ink .ace_print_margin { width: 1px; background: #e8e8e8;}.ace-vibrant-ink .ace_scroller { background-color: #0F0F0F;}.ace-vibrant-ink .ace_text-layer { cursor: text; color: #FFFFFF;}.ace-vibrant-ink .ace_cursor { border-left: 2px solid #FFFFFF;}.ace-vibrant-ink .ace_cursor.ace_overwrite { border-left: 0px; border-bottom: 1px solid #FFFFFF;}.ace-vibrant-ink .ace_marker-layer .ace_selection { background: #6699CC;}.ace-vibrant-ink.multiselect .ace_selection.start { box-shadow: 0 0 3px 0px #0F0F0F; border-radius: 2px;}.ace-vibrant-ink .ace_marker-layer .ace_step { background: rgb(198, 219, 174);}.ace-vibrant-ink .ace_marker-layer .ace_bracket { margin: -1px 0 0 -1px; border: 1px solid #404040;}.ace-vibrant-ink .ace_marker-layer .ace_active_line { background: #333333;}.ace-vibrant-ink .ace_marker-layer .ace_selected_word { border: 1px solid #6699CC;}.ace-vibrant-ink .ace_invisible { color: #404040;}.ace-vibrant-ink .ace_keyword, .ace-vibrant-ink .ace_meta { color:#FF6600;}.ace-vibrant-ink .ace_constant, .ace-vibrant-ink .ace_constant.ace_other { color:#339999;}.ace-vibrant-ink .ace_constant.ace_character, { color:#339999;}.ace-vibrant-ink .ace_constant.ace_character.ace_escape, { color:#339999;}.ace-vibrant-ink .ace_constant.ace_numeric { color:#99CC99;}.ace-vibrant-ink .ace_invalid { color:#CCFF33;background-color:#000000;}.ace-vibrant-ink .ace_invalid.ace_deprecated { color:#CCFF33;background-color:#000000;}.ace-vibrant-ink .ace_fold { background-color: #FFCC00; border-color: #FFFFFF;}.ace-vibrant-ink .ace_support.ace_function { color:#FFCC00;}.ace-vibrant-ink .ace_variable { color:#FFCC00;}.ace-vibrant-ink .ace_variable.ace_parameter { font-style:italic;}.ace-vibrant-ink .ace_string { color:#66FF00;}.ace-vibrant-ink .ace_string.ace_regexp { color:#44B4CC;}.ace-vibrant-ink .ace_comment { color:#9933CC;}.ace-vibrant-ink .ace_entity.ace_other.ace_attribute-name { font-style:italic;color:#99CC99;}.ace-vibrant-ink .ace_entity.ace_name.ace_function { color:#FFCC00;}.ace-vibrant-ink .ace_markup.ace_underline { text-decoration:underline;}";})
View
13 js/output.js
@@ -831,10 +831,17 @@ var CanvasOutput = {
},
clear: function() {
- CanvasOutput.canvas.background( 255 );
CanvasOutput.canvas.strokeWeight( 1 );
- CanvasOutput.canvas.stroke( 0, 0, 0 );
- CanvasOutput.canvas.fill( 255, 255, 255 );
+ if ( Output.dark ) {
+ CanvasOutput.canvas.background( 15, 15, 15 );
+ CanvasOutput.canvas.stroke( 255, 255, 255 );
+ CanvasOutput.canvas.fill( 15, 15, 15 );
+
+ } else {
+ CanvasOutput.canvas.background( 255 );
+ CanvasOutput.canvas.stroke( 0, 0, 0 );
+ CanvasOutput.canvas.fill( 255, 255, 255 );
+ }
},
kill: function() {
View
16 js/play-ui.js
@@ -280,7 +280,21 @@ $(function(){
});
// Implement the scratchpad functionality
- if ( $("#play-page").hasClass( "scratch" ) ) {
+ if ( $("#play-page").hasClass( "scratch" ) ) {
+ if ( window.location.search.indexOf( "dark" ) >= 0 ) {
+ $("html").addClass( "dark" );
+ Output.dark = true;
+ editor.editor.setTheme( "ace/theme/twilight" );
+ }
+
+ $(".content").addClass( "scratch" );
+
+ editor.editor.setFontSize( "14px" );
+ editor.editor.setHighlightSelectedWord( false );
+
+ editor.editor.renderer.setShowGutter( false );
+ editor.editor.renderer.setShowPrintMargin( false );
+
if ( /(\d+)\/?$/.test( window.location.href ) ) {
var id = RegExp.$1;

0 comments on commit f7dc605

Please sign in to comment.