acp themes redesign first pass

public/less/admin/appearance/themes.less

@@ -8,14 +8,6 @@
 			margin: 0.25em 1em;
 			list-style-type: none;
 			.pointer;
-			-webkit-border-radius: 10px;
-			-moz-border-radius: 10px;
-			border-radius: 10px;
-			-webkit-transition: background-color 250ms linear;
-			-moz-transition: background-color 250ms linear;
-			-ms-transition: background-color 250ms linear;
-			-o-transition: background-color 250ms linear;
-			transition: background-color 250ms linear;
 
 			img {
 				max-width: 150px;
@@ -30,16 +22,24 @@
 				font-size: 0.9em;
 			}
 
-			&:hover {
-				background-color: rgba(128, 128, 128, 0.2);
-			}
-
 			&.no-themes {
 				font-style: italic;
 			}
 		}
 	}
 
+	.theme-card {
+		.mdl-card__title {
+			height: 250px;
+
+			.mdl-card__title-text {
+				background: rgba(0,0,0,0.65);
+				color: white;
+				padding: 5px 20px;
+			}
+		}
+	}
+
 	textarea[data-field] {
 		min-height: 450px;
 		width: 100%;

public/src/admin/appearance/skins.js

@@ -63,8 +63,8 @@ define('admin/appearance/skins', function() {
 	};
 
 	function highlightSelectedTheme(themeId) {
-		$('.themes li[data-theme]').removeClass('btn-warning');
+		$('.themes li[data-theme]').removeClass('selected').find('[data-action="use"]').html('Use Theme').removeClass('btn-success').addClass('btn-primary');
-		$('.themes li[data-theme="' + themeId + '"]').addClass('btn-warning');
+		$('.themes li[data-theme="' + themeId + '"]').addClass('selected').find('[data-action="use"]').html('Current Theme').removeClass('btn-primary').addClass('btn-success');
 	}
 
 	return Skins;

public/src/admin/appearance/themes.js

@@ -84,8 +84,8 @@ define('admin/appearance/themes', function() {
 	};
 
 	function highlightSelectedTheme(themeId) {
-		$('.themes li[data-theme]').removeClass('btn-warning');
+		$('.themes li[data-theme]').removeClass('selected');
-		$('.themes li[data-theme="' + themeId + '"]').addClass('btn-warning');
+		$('.themes li[data-theme="' + themeId + '"]').addClass('selected');
 	}
 
 	return Themes;

src/views/admin/appearance/themes.tpl

@@ -1,14 +1,5 @@
 <div id="themes" class="themes">
-	<div class="panel panel-default">
+	<div class="directory row" id="installed_themes">
-		<div class="panel-heading">Installed Themes</div>
+		<i class="fa fa-refresh fa-spin"></i> Checking for installed themes...
-		<div class="panel-body">
-			<p>
-				The following themes are currently installed on your forum.
-			</p>
-
-			<ul class="directory" id="installed_themes">
-				<li><i class="fa fa-refresh fa-spin"></i> Checking for installed themes...</li>
-			</ul>
-		</div>
 	</div>
 </div>

src/views/admin/partials/theme_list.tpl

@@ -1,21 +1,29 @@
 <!-- BEGIN themes -->
-<li data-type="{themes.type}" data-theme="{themes.id}"<!-- IF themes.css --> data-css="{themes.css}"<!-- ENDIF themes.css -->>
+<div class="col-xs-4" data-type="{themes.type}" data-theme="{themes.id}"<!-- IF themes.css --> data-css="{themes.css}"<!-- ENDIF themes.css -->>
-	<img title="{themes.id}" src="{themes.screenshot_url}" />
+	<div class="theme-card mdl-card mdl-shadow--2dp">
-	<div>
+		<div class="mdl-card__title mdl-card--expand" style="background: url('{themes.screenshot_url}');">
-		<div class="pull-right">
+			<h2 class="mdl-card__title-text">{themes.name}</h2>
-			<button class="btn btn-primary" data-action="use">Use</button>
 		</div>
-		<h4>{themes.name}</h4>
+		<div class="mdl-card__supporting-text">
 			<p>
 				{themes.description}
+			</p>
+
 			<!-- IF themes.url -->
-			(<a href="{themes.url}" target="_blank">Homepage</a>)
+			<p>
-			<!-- ENDIF themes.url -->
+				<a href="{themes.url}" target="_blank">Homepage</a>
 			</p>
+			<!-- ENDIF themes.url -->
+		</div>
+		<div class="mdl-card__actions mdl-card--border">
+			<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" data-action="use">
+				Select Theme
+			</a>
+		</div>
+	</div>
 </div>
-	<div class="clear"></div>
-</li>
 <!-- END themes -->
+
 <!-- IF showRevert -->
 <li data-type="bootswatch" data-theme="" data-css="">
 	<div class="pull-right">