css: simplify nesting by employing some LESS features

client/dcwebui.less

@@ -51,15 +51,17 @@ html,body {
 }
 
 /* WiiU placements */
-.navigator-wiiu .placement-mid {
+.navigator-wiiu {
+	.placement-mid {
 		bottom:120px;
 	}
-.navigator-wiiu .placement-bottom {
+	.placement-bottom {
 		height:120px;
 	}
-.navigator-wiiu .placement-panel {
+	.placement-panel {
 		bottom:120px;
 	}
+}
 
 /* Menu button */
 .menubutton {
@@ -75,14 +77,17 @@ html,body {
 	height:18px;
 	width:18px;
 	text-align:center;
-}
+	
-.menubutton svg {
+	svg {
 		width: 18px;
 		height: 18px;
 	}
-.menubutton:hover {
+	
+	&:hover {
 		background:white;
 	}
+}
+
 /* Menu list */
 .menu {
 	background:#DDD;
@@ -97,20 +102,24 @@ html,body {
 	z-index:10; /* above placement-panel */
 	
 	overflow-y:auto;
-}
+	
-.menu ul {
+	ul {
 		margin:0;
 		padding:0;
 	}
-.menu li {
+	
+	li {
 		list-style-type:none;
 		padding:6px;
 		cursor:pointer;
-}
+		
-.menu li:hover {
+		&:hover {
 			background:#333;
 			color:white;
 		}
+	}
+}
+
 /* Tabs */
 .tabbar {
 	position:relative;
@@ -132,16 +141,20 @@ html,body {
 	border-right:1px solid lightgrey;
 	margin-top:2px;
 	padding:0 8px;
-}
+	
-.tabitem:hover {
+	&:hover {
 		border-top:2px solid #EEE;
 	}
-.tabitem.selected {
+	
+	&.selected {
 		border-top:2px solid darkgreen;
 	}
-.tabitem.unread {
+	
+	&.unread {
 		background:lightyellow;
 	}
+}
+
 .tab-label {
 	cursor:pointer;
 }
@@ -170,12 +183,14 @@ html,body {
 	-webkit-transition:0.1s linear all;
 	   -moz-transition:0.1s linear all;
 	        transition:0.1s linear all;
-}
+	        
-.tab-closer:hover {
+	&:hover {
 		background:#FFDDDD;
 		border:1px solid red;
 		color:black;
 	}
+}
+
 /* */
 .content {
 	display:block;
@@ -241,7 +256,10 @@ html,body {
 }
 #submit-container {
 	position:absolute;
-	top:0;bottom:0;right:0;width:32px;
+	top:0;
+	bottom:0;
+	right:0;
+	width:32px;
 }
 #btsubmit {
 	width:100%;
@@ -265,8 +283,8 @@ html,body {
 	-webkit-border-radius: 12px;
 	   -moz-border-radius: 12px;
 	        border-radius: 12px;
-}
+	        
-.ul-large li {
+	li {
 		color: #333;
 		font: bold 15px Geneva, Arial, Helvetica, sans-serif; 
 		vertical-align: middle;
@@ -279,8 +297,9 @@ html,body {
 		list-style-type: none; 
 		display: block;
 		padding: 15px 5px 5px 10px;		
-}
+		cursor:pointer;
-.ul-large li:first-child { 
+		
+		&:first-child {
 			border-top: 0;
 			-webkit-border-top-left-radius: 12px;
 			-webkit-border-top-right-radius: 12px;
@@ -289,7 +308,8 @@ html,body {
 					border-top-left-radius: 12px;
 					border-top-right-radius: 12px;
 		}
-.ul-large li:last-child { 
+		
+		&:last-child {
 			border-bottom: 0;
 			-webkit-border-bottom-left-radius: 12px;
 			-webkit-border-bottom-right-radius: 12px;
@@ -298,9 +318,7 @@ html,body {
 					border-bottom-left-radius: 12px;
 					border-bottom-right-radius: 12px;
 		}
-
+	}
-.ul-large li {
-	cursor:pointer;
 }
 
 /* Text */
@@ -368,8 +386,8 @@ html,body {
 .ul-mini {
 	padding-left: 4px;
 	margin-top:4px;
-}
+	
-.ul-mini li {
+	li {
 		list-style-type:none;
 		min-height:13px;
 		line-height:13px;
@@ -378,10 +396,12 @@ html,body {
 		cursor:pointer;
 		
 		background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAANCAYAAACQN/8FAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABh0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzT7MfTgAAAZJJREFUKJFtz71rE2EAgPHnrknbXBKkLWhx0DhoWsEOxk0taMGlQ7cimElK5uroH5DFSUQ3KQpV2qlQEDJ4mKFQ0MVS6kfN1dQP2ss1ydW79y6Xu3udBG36zL/lUaSUVKtVqes6hmGgaRqlUulUoVAw+ScV4P2bFfrEPhnF4+v2NuVy+QFHSjiNXWV2cgzh+dRqX1hsNflcr5/tgcJ14larSdDxCYIOuWEV0c3+7oEAxk4NANu2GUnFFIt3FnvgydxFZb9hSRmFCCGwmjb3i3OVo1AFyF2bZm/PxDRN4rDDo4WHt4+F77RfmKNZ1MQA9ukTPPeXXt14OvXita5f+guVJ+uPZ1brlZUJI08qG/F26AP9chDXO8RpeyzNvMyMnc+7fembmU9WYJFXL7M1YtBNhqRIEYURh1Gb/u+DH69fubqRaLQOcAccHDy++TW0pEaATzcOkFHMxs/NCQD13oV50laaH/EuQdhBhAIRClzF/W9GkVIC8Gx54dZafa3SDmxc1SEdZxgfHmdu+m7y3Jlc+AextbuG6q1RSQAAAABJRU5ErkJggg==') no-repeat 0 0;
-}
+		
-.ul-mini li:hover {
+		&:hover {
 			background-color:#EEE;
 		}
+	}
+}
 
 /* Display userlist alongside main chat for wide screens */