Added Retina images and 2x pixel ratio css classes closes #314

fenicento · Feb 28, 2013 · 4431f47 · 4431f47
1 parent 7871b69
commit 4431f47
Show file tree

Hide file tree

Showing 11 changed files with 485 additions and 373 deletions.
diff --git a/codekit-config.json b/codekit-config.json
diff --git a/compiled/css/themes/dark.css b/compiled/css/themes/dark.css
diff --git a/compiled/css/themes/[email protected] b/compiled/css/themes/[email protected]
diff --git a/compiled/css/timeline.css b/compiled/css/timeline.css
diff --git a/compiled/css/[email protected] b/compiled/css/[email protected]
diff --git a/source/gfx/[email protected] b/source/gfx/[email protected]
diff --git a/source/gfx/[email protected] b/source/gfx/[email protected]
diff --git a/source/less/Core b/source/less/Core
diff --git a/source/less/Theme/Dark.less b/source/less/Theme/Dark.less
@@ -15,9 +15,15 @@
 	.base-sprite() {
 		background-image: url(themes/timeline-dark.png?v3.4);
 	}
+	.base-sprite2x() {
+		background-image: url(themes/[email protected]?v4.3);
+	}
 	.loading-sprite() {
 		background-image: url(themes/loading.gif?v3.4);
 	}
+	.loading-sprite2x() {
+		background-image: url(themes/[email protected]?v3.4);
+	}
 
 	// COLORS
 	@color-base:					#1A1A1A;

diff --git a/source/less/VMM.Timeline.TimeNav.less b/source/less/VMM.Timeline.TimeNav.less
@@ -805,4 +805,77 @@
 
 	}
 
+}
+
+/* RETINA
+================================================== */
+@media only screen and (-webkit-min-device-pixel-ratio: 2), 
+only screen and (min-device-pixel-ratio: 2) {
+	.vco-notouch {
+		.vco-navigation {
+			.vco-toolbar {
+				.zoom-in {
+					.icon {
+						.icon-zoom-in2x();
+					}
+				}
+				.zoom-out {
+					.icon {
+						.icon-zoom-out2x();
+					}
+				}
+				.back-home {
+					.icon {
+						.icon-back-home2x();
+					}
+				}
+			}
+			.vco-toolbar.touch {
+				.zoom-in {
+					.icon {
+						.icon-touch-zoom-in2x();
+					}
+				}
+				.zoom-out {
+					.icon {
+						.icon-touch-zoom-out2x();
+					}
+				}
+				.back-home {
+					.icon {
+						.icon-touch-back-home2x();
+					}
+				}
+			}
+			.timenav {
+				.content {
+					.marker {
+						.flag:hover {
+							.time-flag-active2x();
+						}
+						.flag-small:hover {
+							.time-flag-active2x();
+						}
+						.flag-small.flag-small-last:hover {
+							.time-flag-small-active2x();
+						}
+					}
+				}
+			}
+			.timenav-background {
+				.timenav-indicator {
+					.icon-currenttime2x();
+				}
+			}
+		}
+	}
+	.vco-timeline {
+		.vco-navigation {
+			.timenav {
+				.content {
+
+				}
+			}
+		}
+	}
 }
diff --git a/source/less/VMM.Timeline.less b/source/less/VMM.Timeline.less
@@ -15,9 +15,16 @@
 	.base-sprite() {
 		background-image: url(timeline.png?v4.3);
 	}
+	.base-sprite2x() {
+		background-image: url([email protected]?v4.3);
+		background-size: 352px 260px; 
+	}
 	.loading-sprite() {
 		background-image: url(loading.gif?v3.4);
 	}
+	.loading-sprite2x() {
+		background-image: url([email protected]?v3.4);
+	}
 
 	// COLORS
 	@color-base:					#FFF;
@@ -29,6 +36,7 @@
 	@color-dark-fourth: 			#999;
 	@color-dark-fifth: 				#E3E3E3;
 	@color-background-dark:			#E9E9E9;
+
 	// COLOR THEME
 	@color-theme:					#08C;	//#FF3712; //#FF0000;