High vis highlight in dark mode

jakearchibald · Jun 23, 2011 · 0001da0 · 0001da0
1 parent c4b8481
commit 0001da0
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 18 deletions.
diff --git a/www/assets/3/script/SpriteCanvasView.js b/www/assets/3/script/SpriteCanvasView.js
@@ -1,7 +1,5 @@
 (function() {
 	var Highlight = (function() {
-		// TODO: consider using <cavnas> to render the highlight, will allow for subpixel rendering
-
 		function Highlight($appendTo) {
 			this._$container = $('<div class="highlight"/>').appendTo( $appendTo );
 		}
@@ -60,6 +58,11 @@
 			}
 		};
 
+		HighlightProto.setHighVisOnDark = function(highVis) {
+			this._$container[highVis ? 'addClass' : 'removeClass']('high-vis');
+			return this;
+		}
+
 		return Highlight;
 	})();
 
@@ -269,7 +272,9 @@
 		SpriteCanvasViewProto.setBg = function(color) {
 			this._$bgElm.transition({ 'background-color': color }, {
 				duration: 500
-			})
+			});
+
+			this._highlight.setHighVisOnDark( color === '#000' );
 		};
 
 		return SpriteCanvasView;

diff --git a/www/assets/3/script/mainmin.js b/www/assets/3/script/mainmin.js
diff --git a/www/assets/3/style/base.css b/www/assets/3/style/base.css
@@ -219,19 +219,37 @@ body {
 	.sprite-canvas-container canvas {
 		display: block;
 	}
-	.sprite-canvas-container .highlight {
-		background: rgba(0, 90, 255, 0.25);
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 5px;
-		height: 5px;
-		pointer-events: none;
-		border: 1px solid rgba(0, 114, 255, 0.5);
-		-moz-box-sizing: border-box;
-		box-sizing: border-box;
-		display: none;
-	}
+	/* Highlight */
+		.sprite-canvas-container .highlight {
+			background: rgba(0, 90, 255, 0.25);
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 5px;
+			height: 5px;
+			pointer-events: none;
+			border: 1px solid rgba(0, 114, 255, 0.5);
+			-moz-box-sizing: border-box;
+			box-sizing: border-box;
+			display: none;
+
+			-webkit-transition: 0.5s ease-in-out;
+			-moz-transition: 0.5s ease-in-out;
+			-ms-transition: 0.5s ease-in-out;
+			-o-transition: 0.5s ease-in-out;
+			transition: 0.5s ease-in-out;
+
+			-webkit-transition-property: border, background;
+			-moz-transition-property: border, background;
+			-ms-transition-property: border, background;
+			-o-transition-property: border, background;
+			transition-property: border, background;
+		}
+
+		.sprite-canvas-container .highlight.high-vis {
+			background-color: rgba(0, 255, 48, 0.25);
+			border-color: rgba(0, 255, 51, 0.5);
+		}
 	/* Upload button */
 		.upload-input {
 			position: absolute;