Server: Style tweaks and monospace font for lists

packages/flamenco/src/styles/_app_base.sass

@@ -89,6 +89,7 @@ nav.sidebar
 .item-list
 	font-size: .9em
 	overflow-x: auto
+
 	.table
 		background-color: white
 	.table-row:hover
@@ -126,10 +127,15 @@ nav.sidebar
 
 	.table-body
 		.table-row
-			@include status-color-property(background-color, ' .item-status', '')
+			@include status-color-property(background-color, ' .item-status a', 'dark')
+			@include status-color-property(border-color, ' .item-status a', 'light')
 
 		.table-cell
 			text-align: center
+			font:
+				family: monospace
+				size: .95em
+			line-height: 1.2em
 
 			&.active
 				background-color: $color-background
@@ -146,26 +152,32 @@ nav.sidebar
 				height: 100%
 				a
 					display: flex
-					padding: 4px 10px
+					padding: 3px 10px
 					color: $color-text-dark-primary
 
 					span
 						margin: auto 0
 						line-height: 1.1em
 
-			&.item-progress a
-				color: $color-text-dark-secondary
+			&.item-type
+				text-align: left
+				a
+					+text-overflow-ellipsis
+					color: $color-text-dark-primary
 
 			&.item-priority a
 				color: $color-text-dark-secondary
 
-			&.item-status a
-				color: white
-				font-size: .8em
-				text-transform: uppercase
-				font-weight: bold
-				padding: 0 10px
-				text-shadow: 0 0 10px rgba(black, .2)
+			&.item-status
+				a
+					display: inline-block
+					color: white
+					font-size: .75em
+					text-transform: uppercase
+					font-family: $font-body
+					padding: 1px 5px
+					border-radius: 3px
+					width: 90%
 
 .item-list-header
 	a

packages/flamenco/src/styles/_config.sass

@@ -44,9 +44,9 @@ $color_upvote: #ff8b60
 $color_downvote: #74a4ff
 
 /* Label Status */
-$color-status-queued: #b4bbaa // brownish
+$color-status-queued: #b6bbaa // brownish
 $color-status-queued-light: hsl(hue($color-status-queued), 40%, 75%)
-$color-status-queued-dark: hsl(hue($color-status-queued), 15%, 50%)
+$color-status-queued-dark: hsl(hue($color-status-queued), 28%, 48%)
 $color-status-canceled: #999 // grayish
 $color-status-canceled-light: lighten($color-status-canceled, 10%)
 $color-status-canceled-dark: darken($color-status-canceled, 10%)
@@ -64,7 +64,7 @@ $color-status-active-light: hsl(hue($color-status-active), 100%, 75%)
 $color-status-active-dark: hsl(hue($color-status-active), 100%, 40%)
 $color-status-completed: #bbe151 // greenish
 $color-status-completed-light: hsl(hue($color-status-completed), 100%, 70%)
-$color-status-completed-dark: hsl(hue($color-status-completed), 100%, 30%)
+$color-status-completed-dark: hsl(hue($color-status-completed), 100%, 38%)
 
 $color-status-active: #00ceff // #E6F3FD
 $color-status-updated: #e7f5d3

packages/flamenco/src/styles/_tasks.sass

@@ -61,27 +61,36 @@
 
 	.table
 		&.item-properties
+			margin-top: 10px
 			.table-body
 				text-shadow: 1px 1px 0 white
 
 				.table-row
+					&:hover
+						background-color: $color-background-light
 					.table-cell
 						padding: 0 10px
-						vertical-align: top
-						line-height: 1.6em
-						border: none
+						vertical-align: bottom
 						color: $color-text-dark-primary
 						word-break: break-word
+						line-height: 1.3em
+						padding: 3px 10px
+						font-family: monospace
+						font-size: .9em
+
 						@include status-color-property(color, '', 'dark')
 
 						&:first-child
 							width: 120px
 							max-width: 200px
 							text-align: right
-							font-weight: bold
 							padding-right: 10px
-							border-right: thin solid $color-background-dark
-							+text-overflow-ellipsis
+							vertical-align: top
+							color: black
+
+					&:last-child .table-cell
+						border-bottom: none
+
 
 					&.properties-assignees
 						.table-cell span
@@ -115,7 +124,8 @@
 
 .task-list-item
 	color: $color-text-dark
-	font-size: .9em
+	font-size: .8em
+	font-family: monospace
 
 	&:hover
 		text-decoration: none
@@ -128,7 +138,7 @@
 	&.active
 		text-decoration: none
 		background-color: $color-background-active
-		box-shadow: inset -5px 0 0 $color-primary
+		box-shadow: inset 5px 0 0 $color-primary
 		text-shadow: 1px 1px 0 white
 
 		.status-indicator
@@ -147,7 +157,7 @@
 		+text-overflow-ellipsis
 
 	.name
-		padding: 4px 10px
+		padding: 2px 10px
 		+text-overflow-ellipsis
 
 	.shotname