creating a separate theme for my metro ui shenanigans, follow up revert on cerulean incoming

.gitignore

@@ -11,6 +11,7 @@ public/css/*.css
 public/themes/*
 !/public/themes/vanilla
 !/public/themes/cerulean
+!/public/themes/modern
 *.sublime-project
 *.sublime-workspace
 plugins/*

public/themes/modern/account.less

@@ -0,0 +1 @@
+@import "../vanilla/account";

public/themes/modern/admin.less

@@ -0,0 +1 @@
+@import "../vanilla/admin";

public/themes/modern/category.less

@@ -0,0 +1 @@
+@import "../vanilla/category";

public/themes/modern/cerulean.less

@@ -0,0 +1,17 @@
+@import "../vanilla/mixins";
+@import "animations";
+
+@import "style";
+@import "topic";
+@import "category";
+@import "noscript";
+@import "home";
+@import "header";
+@import "account";
+@import "search";
+@import "unread";
+@import "admin";
+@import "users";
+@import "footer";
+
+@import "../vanilla/modules.less";

public/themes/modern/footer.less

@@ -0,0 +1,9 @@
+@import "../vanilla/footer";
+
+.footer {
+	color: #555;
+
+	a {
+		color: #222;
+	}
+}

public/themes/modern/header.less

@@ -0,0 +1,28 @@
+@import "../vanilla/header";
+
+.header {
+	//glowing animation for active state
+	.dropdown-toggle {
+		i {
+			@-webkit-keyframes glow
+			{
+				from {text-shadow: 0 0 5px #aaf, 0 0 5px #aaf, 0 0 5px #aaf;}
+				50% {text-shadow: 0 0 10px #aaf, 0 0 10px #aaf, 0 0 10px #aaf;}
+				to {text-shadow: 0 0 5px #aaf, 0 0 5px #aaf, 0 0 5px #aaf;}
+			}
+			@keyframes glow
+			{
+				from {text-shadow: 0 0 5px #aaf, 0 0 5px #aaf, 0 0 5px #aaf;}
+				50% {text-shadow: 0 0 10px #aaf, 0 0 10px #aaf, 0 0 10px #aaf;}
+				to {text-shadow: 0 0 5px #aaf, 0 0 5px #aaf, 0 0 5px #aaf;}
+			}
+
+			&.active {
+				color: #558;
+				text-shadow: 0 0 1em #aaf, 0 0 1em #aaf, 0 0 1em #aaf;
+				-webkit-animation:glow 1.5s infinite linear;
+					    animation:glow 1.5s infinite linear;
+			}
+		}
+	}
+}

public/themes/modern/home.less

@@ -0,0 +1,52 @@
+@import "../vanilla/home";
+
+
+.home {
+	h4 {
+		color: #fff;
+		padding-left: 10px;
+	}
+
+	.icon {
+		margin-top: -37px;
+		height: 150px;
+		.category-box {
+			.animated-long;
+			.pulse;
+			height: 130px;
+			padding: 0 10px 0 10px;
+		}
+		border-radius: 0;
+		padding-top: 50px;
+	}
+
+	.badge {
+		position: absolute;
+		bottom: 15px;
+		right: 20px;
+		background: none;
+
+	}
+
+	.category-slider-2:hover {
+		position:relative;
+
+		-webkit-animation: scroll-2 10s ease-in 0.5s infinite normal;
+		animation: scroll-2 10s ease-in 0.5s infinite normal;/* Safari and Chrome: */
+	}
+
+	.category-slider-1:hover {
+		position:relative;
+
+		-webkit-animation: scroll-1 8s ease-in 0.5s infinite normal;
+		animation: scroll-1 8s ease-in 0.5s infinite normal;/* Safari and Chrome: */
+	}
+
+	.category-slider-0:hover {
+		position:relative;
+
+		-webkit-animation: scroll-0 6s ease-in 0.5s infinite normal;
+		animation: scroll-0 6s ease-in 0.5s infinite normal;/* Safari and Chrome: */
+	}
+
+}

public/themes/modern/noscript.less

@@ -0,0 +1 @@
+@import "../vanilla/noscript";

public/themes/modern/search.less

@@ -0,0 +1 @@
+@import "../vanilla/search";

public/themes/modern/style.less

@@ -0,0 +1,50 @@
+@import "../vanilla/style";
+
+body {
+	background: #fdfdfd;
+	font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
+	font-size: 16px;
+}
+
+.container {
+	.jumbotron {
+		background: #56BCDA;
+		color: white;
+		padding: 30px;
+		border-radius: 0;
+	}
+}
+
+
+.alt-logins {
+	li {
+		i {
+			-webkit-transition: color 100ms linear;
+			   -moz-transition: color 100ms linear;
+			    -ms-transition: color 100ms linear;
+			     -o-transition: color 100ms linear;
+			        transition: color 100ms linear;
+
+			&.icon-twitter-sign:hover {
+				color: #4099FF;
+			}
+
+			&.icon-facebook-sign:hover {
+				color: #3b5999;
+			}
+
+			&.icon-google-plus-sign:hover {
+				color: #d34836;
+			}
+		}
+	}
+}
+
+#search-form .btn-link {
+	color: white;
+}
+
+.well {
+	border-radius: 0;
+	box-shadow: none;
+}

public/themes/modern/topic.less

@@ -0,0 +1,52 @@
+@import "../vanilla/topic";
+
+
+.topic {
+	.sub-posts {
+		/* speech bubbles for child posts */
+		@media (min-width: 979px) {
+			.post-block:after
+			{
+				content: "";
+				position: absolute;
+				top: 15px;
+				left: -7px;
+				border-style: solid;
+				border-width: 7px 7px 7px 0;
+				border-color: transparent rgb(250,250,250);
+				display: block;
+				width: 0;
+				z-index: 1;
+			}
+
+			.post-block:before
+			{
+				content: "";
+				position: absolute;
+				top: 15px;
+				left: -8px;
+				border-style: solid;
+				border-width: 7px 7px 7px 0;
+				border-color: transparent rgba(0, 0, 0, 0.125);
+				display: block;
+				width: 0;
+				z-index: 0;
+			}
+		}
+	}
+
+	.main-post, .sub-posts {
+		.post-info {
+			background: rgba(0, 0, 0, 0.02);
+			margin: 15px -11px -11px -11px;
+			border-radius: 0 0 5px 5px;
+			font-size: 10px;
+			color: #777;
+		}
+	}
+
+
+	.active-users {
+		color: rgb(153,153,153);
+	}
+}

public/themes/modern/unread.less

@@ -0,0 +1 @@
+@import "../vanilla/unread";

public/themes/modern/users.less

@@ -0,0 +1,53 @@
+@import "../vanilla/users";
+
+.users {
+	.users-container {
+		padding-top: 20px; // might be better off in vanilla
+		padding-left: 6px;
+	}
+
+	.users-box {
+		padding: 0;
+		margin: 0px;
+		margin-left: -6px; // todo: check why do I have to do this?
+		max-width: 163px;
+		width: 163px;
+		height: 163px;
+		.animated-short;
+		.fadeIn;
+
+		a {
+			padding: 0;
+			margin: 0;
+
+			img {
+				padding: 0;
+				margin: 0;
+				width: 163px;
+				height: 163px;
+				border: 1px solid #777;
+				border-radius: 0;
+
+			}
+		}
+
+		position: relative;
+		.user-info {
+			background: rgba(0,0,0,0.65);
+			padding: 2px;
+			position: absolute;
+			bottom: 0px;
+			width: 163px;
+			a, span, i {
+				color: white;
+			}
+			a {
+				font-weight: 700;
+			}
+		}
+
+		.post-count, .reputation {
+			display: inline-block;
+		}
+	}
+}