<% layout('/layouts/default.html', {title:'切换主题'}){ %>
<style>
	.list-unstyled{margin:10px;}
	.full-opacity-hover{opacity:1;filter:none;border:1px solid #fff}
	.full-opacity-hover:hover{border:1px solid #f00;}
</style>
<ul class="list-unstyled clearfix">
	<li style="float:left;width:16.66666%;padding:5px;">
		<a href="javascript:" data-skin="skin-blue" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<span style="display:block;width:20%;float:left;height:13px;" class="bg-light-blue-active"></span>
			<span style="display:block;width:80%;float:left;height:13px;" class="bg-light-blue"></span>
			<span style="display:block;width:20%;float:left;height:30px;background:#222d32"></span>
			<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
		</a>
		<p class="text-center no-margin">${text('蓝')}</p>
	</li>
	<li style="float:left;width:16.66666%;padding:5px;display:none;">
		<a href="javascript:" data-skin="skin-black" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<span style="display:block;width:20%;float:left;height:13px;background:#fefefe"></span>
			<span style="display:block;width:80%;float:left;height:13px;background:#fefefe"></span>
			<span style="display:block;width:20%;float:left;height:30px;background:#222d32"></span>
			<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
		</a>
		<p class="text-center no-margin">${text('白')}</p>
	</li>
	<li style="float:left;width:16.66666%;padding:5px;">
		<a href="javascript:" data-skin="skin-black2" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<span style="display:block;width:20%;float:left;height:13px;background:#303643"></span>
			<span style="display:block;width:80%;float:left;height:13px;background:#303643"></span>
			<span style="display:block;width:20%;float:left;height:30px;background:#222d32"></span>
			<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
		</a>
		<p class="text-center no-margin">${text('黑-经典')}</p>
	</li>
	<li style="float:left;width:16.66666%;padding:5px;">
		<a href="javascript:" data-skin="skin-purple" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<span style="display:block;width:20%;float:left;height:13px;" class="bg-purple-active"></span>
			<span style="display:block;width:80%;float:left;height:13px;" class="bg-purple"></span>
			<span style="display:block;width:20%;float:left;height:30px;background:#222d32"></span>
			<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
		</a>
		<p class="text-center no-margin">${text('紫')}</p>
	</li>
	<li style="float:left;width:16.66666%;padding:5px;">
		<a href="javascript:" data-skin="skin-green" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<span style="display:block;width:20%;float:left;height:13px;" class="bg-green-active"></span>
			<span style="display:block;width:80%;float:left;height:13px;" class="bg-green"></span>
			<span style="display:block;width:20%;float:left;height:30px;background:#222d32"></span>
			<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
		</a>
		<p class="text-center no-margin">${text('绿')}</p>
	</li>
	<li style="float:left;width:16.66666%;padding:5px;">
		<a href="javascript:" data-skin="skin-red" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<span style="display:block;width:20%;float:left;height:13px;" class="bg-red-active"></span>
			<span style="display:block;width:80%;float:left;height:13px;" class="bg-red"></span>
			<span style="display:block;width:20%;float:left;height:30px;background:#222d32"></span>
			<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
		</a>
		<p class="text-center no-margin">${text('红')}</p>
	</li>
	<li style="float:left;width:16.66666%;padding:5px;">
		<a href="javascript:" data-skin="skin-yellow" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<span style="display:block;width:20%;float:left;height:13px;" class="bg-yellow-active"></span>
			<span style="display:block;width:80%;float:left;height:13px;" class="bg-yellow"></span>
			<span style="display:block;width:20%;float:left;height:30px;background:#222d32"></span>
			<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
		</a>
		<p class="text-center no-margin">${text('黄')}</p>
	</li>
	<li style="float:left;width:16.66666%;padding:5px;">
		<a href="javascript:" data-skin="skin-blue-light" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<span style="display:block;width:20%;float:left;height:13px;background:#254b83;"></span>
			<span style="display:block;width:80%;float:left;height:13px;background:#2a579a;"></span>
			<span style="display:block;width:20%;float:left;height:30px;background:#f9fafc"></span>
			<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
		</a>
		<p class="text-center no-margin">${text('蓝灰-经典')}</p>
	</li>
	<li style="float:left;width:16.66666%;padding:5px;display:none;">
		<a href="javascript:" data-skin="skin-black-light" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<span style="display:block;width:20%;float:left;height:13px;background:#fefefe"></span>
			<span style="display:block;width:80%;float:left;height:13px;background:#fefefe"></span>
			<span style="display:block;width:20%;float:left;height:30px;background:#f9fafc"></span>
			<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
		</a>
		<p class="text-center no-margin">${text('白灰')}</p>
	</li>
	<li style="float:left;width:16.66666%;padding:5px;">
		<a href="javascript:" data-skin="skin-black-light2" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<span style="display:block;width:20%;float:left;height:13px;background:#303643"></span>
			<span style="display:block;width:80%;float:left;height:13px;background:#303643"></span>
			<span style="display:block;width:20%;float:left;height:30px;background:#f9fafc"></span>
			<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
		</a>
		<p class="text-center no-margin">${text('黑灰')}</p>
	</li>
	<li style="float:left;width:16.66666%;padding:5px;">
		<a href="javascript:" data-skin="skin-purple-light" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<span style="display:block;width:20%;float:left;height:13px;" class="bg-purple-active"></span>
			<span style="display:block;width:80%;float:left;height:13px;" class="bg-purple"></span>
			<span style="display:block;width:20%;float:left;height:30px;background:#f9fafc"></span>
			<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
		</a>
		<p class="text-center no-margin">${text('紫灰')}</p>
	</li>
	<li style="float:left;width:16.66666%;padding:5px;">
		<a href="javascript:" data-skin="skin-green-light" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<span style="display:block;width:20%;float:left;height:13px;" class="bg-green-active"></span>
			<span style="display:block;width:80%;float:left;height:13px;" class="bg-green"></span>
			<span style="display:block;width:20%;float:left;height:30px;background:#f9fafc"></span>
			<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
		</a>
		<p class="text-center no-margin">${text('绿灰')}</p>
	</li>
	<li style="float:left;width:16.66666%;padding:5px;">
		<a href="javascript:" data-skin="skin-red-light" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<span style="display:block;width:20%;float:left;height:13px;" class="bg-red-active"></span>
			<span style="display:block;width:80%;float:left;height:13px;" class="bg-red"></span>
			<span style="display:block;width:20%;float:left;height:30px;background:#f9fafc"></span>
			<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
		</a>
		<p class="text-center no-margin">${text('红灰')}</p>
	</li>
	<li style="float:left;width:16.66666%;padding:5px;">
		<a href="javascript:" data-skin="skin-yellow-light" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<span style="display:block;width:20%;float:left;height:13px;" class="bg-yellow-active"></span>
			<span style="display:block;width:80%;float:left;height:13px;" class="bg-yellow"></span>
			<span style="display:block;width:20%;float:left;height:30px;background:#f9fafc"></span>
			<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
		</a>
		<p class="text-center no-margin">${text('黄灰')}</p>
	</li>
	<li style="float:left;width:16.66666%;padding:5px;">
		<a href="javascript:" data-skin="skin-blue2" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<span style="display:block;width:20%;float:left;height:13px;background:#1648ab"></span>
			<span style="display:block;width:80%;float:left;height:13px;background:#1951be"></span>
			<span style="display:block;width:20%;float:left;height:30px;background:#f9fafc"></span>
			<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
		</a>
		<p class="text-center no-margin">${text('亮蓝-经典')}</p>
	</li>
	<li style="float:left;width:16.66666%;padding:5px;">
		<a href="javascript:" data-skin="skin-blue-light2" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<span style="display:block;width:20%;float:left;height:13px;background:#1681e5"></span>
			<span style="display:block;width:80%;float:left;height:13px;background:#1890ff"></span>
			<span style="display:block;width:20%;float:left;height:30px;background:#f9fafc"></span>
			<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
		</a>
		<p class="text-center no-margin">${text('浅蓝-经典')}</p>
	</li>
	<li style="float:left;width:16.66666%;padding:5px;">
		<a href="javascript:" data-skin="skin-blue3" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<span style="display:block;width:20%;float:left;height:13px;background:#1648ab"></span>
			<span style="display:block;width:80%;float:left;height:13px;background:#1951be"></span>
			<span style="display:block;width:20%;float:left;height:30px;background:#f9fafc"></span>
			<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
		</a>
		<p class="text-center no-margin">${text('亮蓝-无界')}</p>
	</li>
	<li style="float:left;width:16.66666%;padding:5px;">
		<a href="javascript:" data-skin="skin-blue-light3" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<span style="display:block;width:20%;float:left;height:13px;background:#1681e5"></span>
			<span style="display:block;width:80%;float:left;height:13px;background:#1890ff"></span>
			<span style="display:block;width:20%;float:left;height:30px;background:#f9fafc"></span>
			<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
		</a>
		<p class="text-center no-margin">${text('浅蓝-无界')}</p>
	</li>
	<li style="float:left;width:32%;padding-top:8px;text-align:center;">
		<#form:checkbox name="formLayerModel" label="${text('表单弹窗模式')}" class="form-control"/>
		<#form:checkbox name="tabPageModel" label="${text('取消页签模式')}" class="form-control"/>
	</li>
</ul>
<% } %>
<script>
$('.full-opacity-hover').click(function(){
	js.window.location = '${ctx}/switchSkin/' + $(this).data('skin');
});

$('#formLayerModel')
.iCheck(js.cookie('formLayerModel') == 'true' ? 'check' : 'uncheck')
.on('ifChecked', function(){
	js.cookie('formLayerModel', 'true');
}).on('ifUnchecked', function(){
	js.cookie('formLayerModel', 'false');
	$('#tabPageModel').iCheck('uncheck');
}).on('ifClicked', function(){
	setTimeout(function(){
		js.window.location.reload(true);
	},500);
});

$('#tabPageModel')
.iCheck(js.cookie('tabPageModel') == 'true' ? 'check' : 'uncheck')
.on('ifChecked', function(){
	js.cookie('tabPageModel', 'true');
	$('#formLayerModel').iCheck('check');
}).on('ifUnchecked', function(){
	js.cookie('tabPageModel', 'false');
}).on('ifClicked', function(){
	setTimeout(function(){
		js.window.location.reload(true);
	},500);
});
</script>