Fix css for archived cards and reformat

css/style.css

@@ -2,10 +2,10 @@
 	display: block !important;
 }
 
-
 .app-navigation-entry-utils-menu-button {
 	display: block !important;
 }
+
 .app-navigation-entry-utils-menu-share {
 	display: block !important;
 	text-align: right;
@@ -17,6 +17,7 @@
 #app-navigation .app-navigation-entry-edit {
 	height: auto;
 }
+
 #app-navigation .active,
 #app-navigation .active a,
 #app-navigation li:hover > a,
@@ -26,6 +27,7 @@
 #app-navigation .selected a {
 	background-color: #fafafa;
 }
+
 #app-navigation .board-bullet {
 	position: absolute;
 	margin-left: 17px;
@@ -54,6 +56,7 @@
 	height: 100%;
 	background-color: #fff;
 }
+
 #board {
 	position: relative;
 	height: 100%;
@@ -65,9 +68,11 @@
 	z-index: 100;
 	width: 100%;
 }
+
 #board #innerBoard {
 	padding: 10px;
 }
+
 #board-header {
 	width: inherit;
 	color: #333333;
@@ -76,12 +81,14 @@
 	height: 44px;
 	background-color: #eee;
 }
+
 #board-header h1 {
 	font-size: 14pt;
 	margin: 0;
 	padding: 12px;
 
 }
+
 #board-actions {
 	font-size: 10pt;
 	/*position:absolute;
@@ -94,10 +101,12 @@
 	color: #888;
 
 }
+
 #board-actions .filter .filter-button {
 	margin-left: 10px;
 	margin-right: 10px;
 }
+
 #board-actions .filter:hover {
 	color: #333333;
 	cursor: pointer;
@@ -105,38 +114,46 @@
 
 .filter {
 }
+
 .filter-select {
 	position: absolute;
 	right: auto;
 	top: 42px;
 	left: -21%;
 }
+
 .filter-select li {
 	padding: 3px;
 	overflow: hidden;
 	width: auto;
 }
+
 .filter-select li span {
 	display: block;
 	float: left;
-	width: 20px;height:20px;
+	width: 20px;
+	height: 20px;
 	margin-right: 5px;
 }
+
 #board-actions div {
 	padding: 5px;
 	float: left;
 }
+
 .board-actions button {
 	border: none;
 	background-color: transparent;
 	color: #fff;
 }
+
 .board-action-button {
 	font-size: 12pt;
 	font-weight: 100;
 	border: none;
 	margin-left: 10px;
 }
+
 .stack {
 	width: 320px;
 	margin-right: 10px;
@@ -144,6 +161,7 @@
 	display: inline-block !important;
 	background-color: #f8f8f8;
 }
+
 .stack h2 {
 	padding: 10px;
 	padding-bottom: 8px;
@@ -152,6 +170,7 @@
 	font-weight: 700;
 	overflow: hidden;
 }
+
 .stack h2 input {
 	padding: 0px;
 	width: 90%;
@@ -163,21 +182,26 @@
 	background-color: transparent;
 	float: left;
 }
+
 .stack h2 button,
 .stack .stack-actions {
 	float: right;
 }
+
 .stack h2 span {
 	float: left;
 	margin-bottom: 3px;
 }
+
 .stack h2 .stack-actions {
 	display: none;
 }
+
 .stack h2:hover .stack-actions {
 	display: inline-block;
 	float: right;
 }
+
 .card {
 	background-color: #ffffff;
 	margin: 10px;
@@ -186,23 +210,28 @@
 	opacity: 1.0;
 	-webkit-box-shadow: 0px 0px 5px #bbb;
 }
+
 .card.archived .card-upper {
 	opacity: 0.5;
 }
+
 .card-upper {
 	overflow: hidden;
 	position: relative;
 	padding: 5px;
 }
+
 .card .card-options {
 	position: absolute;
 	bottom: 10px;
 	right: 10px;
 	display: none;
 }
+
 .card:hover .card-options {
 	display: block;
 }
+
 .card .popovermenu {
 	z-index: 999;
 	opacity: 1;
@@ -212,12 +241,15 @@
 .card .card-assignees {
 	margin: 5px;
 }
+
 .card:hover {
 	background-color: #fcfcfc;
 }
+
 .card a {
 	display: block;
 }
+
 .card h3 {
 	font-weight: bold;
 	font-size: 10pt;
@@ -227,20 +259,24 @@
 	display: inline-block;
 	float: left;
 }
+
 .card.has-labels h3 {
 	margin-top: 15px;
 }
+
 .card h3 .fa {
 	font-size: 18pt;
 	line-height: 10pt;
 	vertical-align: middle;
 }
+
 .card .labels {
 	position: absolute;
 	top: -5px;
 	left: 10px;
 
 }
+
 .card .labels li {
 	padding: 0px;
 	width: 15px;
@@ -251,12 +287,15 @@
 	border: none;
 	float: left;
 }
+
 .card .labels li span {
 	display: none;
 }
+
 .card .labels li:hover {
 
 }
+
 .card .labels li:hover span {
 	position: absolute;
 	padding: 3px;
@@ -268,16 +307,17 @@
 	border: 1px dashed #aaa;
 }
 
-
 .info {
 	padding-left: 5px;
 	padding-right: 5px;
 	display: inline-block;
 	color: #aaa;
 }
+
 .info i {
 	margin-left: 2px;
 }
+
 .info span {
 	margin-right: 2px;
 }
@@ -292,15 +332,18 @@
 	margin: 10px;
 	-webkit-box-shadow: none;
 }
+
 .card.create:hover {
 	text-align: center;
 	opacity: 1;
 }
+
 .card.create h3 {
 	margin: 0;
 	padding: 0;
 	width: 100%;
 }
+
 .card.create h3 input {
 	width: 100%;
 	border: 0px;
@@ -315,14 +358,17 @@
 	color: #ffffff;
 	background-color: transparent !important;
 }
+
 .card.create .fa {
 	color: #ffffff;
 	width: 100%;
 }
+
 .card.create .fa:hover {
 	opacity: 0.5;
 	cursor: pointer;
 }
+
 .due {
 	background-color: #eee;
 	color: #aaa;
@@ -333,10 +379,10 @@
 	margin-right: 2px;
 }
 
-
 #card-header {
 	height: 44px;
 }
+
 #card-header h2 {
 	font-size: 14pt;
 	padding: 10px;
@@ -345,22 +391,27 @@
 	margin-bottom: 0px;
 	background-color: #f0f0f0;
 }
+
 .icon-close {
 	position: absolute;
 	top: 5px;
 	right: 5px;
 }
+
 #card-meta {
 	padding-top: 0px;
 }
+
 #card-dates {
 	font-size: 80%;
 	color: #aaaaaa;
 	margin-bottom: 3px;
 }
+
 #card-meta #labels {
 	margin-bottom: 10px;
 }
+
 #card-dates span {
 }
 
@@ -378,37 +429,45 @@
 	margin: 0px;
 	padding: 0px;
 }
+
 #card-description .container {
 	background-color: white;
 }
+
 #card-description .container.ng-hide-remove {
 	animation: fade 1s forwards;
 	background-color: rgba(255, 255, 100, 1);
 }
 
 @keyframes fade {
-	from {background-color:rgba(255, 255, 100, 1);}
+	from {
-	to {background-color:rgba(255, 255, 255, 0);}
+		background-color: rgba(255, 255, 100, 1);
+	}
+	to {
+		background-color: rgba(255, 255, 255, 0);
+	}
 }
-
 
 #sidebar-header,
 .card-block {
 	padding: 15px;
 }
+
 #card-attachments ul {
 	margin: 5px;
 }
+
 #card-attachments .details {
 	font-size: 8pt;
 	padding-left: 15px;
 }
+
 #attachment-add button {
 	background-color: #eeeeee;
 	font-size: 9pt;
 }
-#app-sidebar
+
-{
+#app-sidebar {
 	right: -500px;
 	max-width: 100%;
 	border-left: none;
@@ -417,12 +476,15 @@
 	border-left: 1px solid #eeeeee;
 
 }
+
 #app-sidebar.details-visible {
 	right: 0px;
 }
+
 #app-content {
 	overflow: hidden;
 }
+
 #app-content.details-visible {
 	margin-right: 500px;
 }
@@ -431,6 +493,7 @@
 	display: block;
 	overflow: hidden;
 }
+
 .labels li {
 	padding: 1px;
 	-webkit-border-radius: 3px;
@@ -443,9 +506,11 @@
 	display: inline-block;
 	text-align: center;
 }
+
 .labels li span {
 
 }
+
 .avatardiv {
 	float: left;
 	background-color: #eee;
@@ -454,6 +519,7 @@
 	height: 32px;
 	margin-right: 3px;
 }
+
 .avatardiv .icon-group {
 	margin: 7px;
 	opacity: 0.5;
@@ -485,6 +551,7 @@
 	overflow: scroll;
 
 }
+
 #boardlist td .board-bullet {
 	width: 30px;
 	height: 30px;
@@ -494,6 +561,7 @@
 	cursor: pointer;
 	display: block;
 }
+
 #boardlist td {
 	padding: 10px;
 	border-bottom: 1px solid #eee;
@@ -504,6 +572,7 @@
 	height: 30px;
 	display: inline-block;
 }
+
 .cell-board-bullet {
 	width: 60px;
 }
@@ -517,7 +586,10 @@
 #boardlist input {
 	float: left;
 }
-#boardlist .colorselect {margin-top:5px;}
+
+#boardlist .colorselect {
+	margin-top: 5px;
+}
 
 input.input-inline {
 	font-size: inherit !important;
@@ -539,6 +611,7 @@ button {
 	border: 0;
 	background-color: transparent;
 }
+
 button:hover {
 	border: 0;
 	background-color: transparent;
@@ -548,6 +621,7 @@ button:hover {
 #board-detail-labels {
 	padding: 10px;
 }
+
 #board-detail-labels ul li {
 	display: block;
 	font-size: 10pt;
@@ -555,11 +629,13 @@ button:hover {
 	margin-bottom: 1px;
 	overflow: hidden;
 }
+
 #board-detail-labels ul li input {
 	float: left;
 	font-size: 10pt;
 	padding: 5px;
 }
+
 #board-detail-labels ul li .label-title {
 	float: left;
 	width: 88%;
@@ -568,13 +644,16 @@ button:hover {
 	border: none;
 	margin-right: 2px;
 }
+
 #board-detail-labels ul li a.icon {
 	float: right;
 	padding: 5px;
 }
+
 .label-create {
 	width: 88%;
 }
+
 .label-create .icon {
 	margin-bottom: -3px;
 }
@@ -607,6 +686,7 @@ button:hover {
 	z-index: auto;
 	padding: 3px;
 }
+
 .ui-select-match-close {
 	float: right;
 	left: -20px;
@@ -614,36 +694,45 @@ button:hover {
 	z-index: 100;
 	position: relative;
 }
+
 .ui-select-match-item {
 	padding: 2px;
 	float: left;
 	display: block;
 	margin-right: -17px !important;
 }
+
 .ui-select-match-item .select-label {
 	padding: 4px;
 	color: #fff;
 	padding-right: 23px;
 }
+
 .ui-select-container {
 	background-color: #fafafa !important;
 }
+
 .ui-select-container.open {
 	border: 1px solid #aaaaaa;
 }
+
 .ui-select-container input.ui-select-search {
 	padding: 0px !important;
 	margin: 2px !important;
 	background-color: transparent;
 	border: none;
 }
+
 .ui-select-bootstrap .ui-select-choices-row > a {
 	padding: 3px !important;
 }
+
 .ui-select-choices-row-inner {
-margin-bottom:2px; width:100%;
+	margin-bottom: 2px;
+	width: 100%;
 	padding: 0;
 }
+
 .ui-select-choices-row-inner span {
 	padding: 3px;
 	padding-left: 10px;
@@ -651,6 +740,21 @@ margin-bottom:2px; width:100%;
 	width: 100%;
 }
 
+/* ui-select disabled */
+.ui-select-container[disabled] {
+	overflow: hidden;
+}
+
+.ui-select-container[disabled] .ui-select-match-item .select-label {
+	padding: 4px;
+	min-width: 26px !important;
+	height: 100%;
+	display: inline-block;
+}
+
+.ui-select-container[disabled] .ui-select-match-item {
+	margin-right: 0px !important;
+}
 
 @media (max-width: 480px) {
 	/* hide board actions on mobile */
@@ -658,50 +762,56 @@ margin-bottom:2px; width:100%;
 		display: none !important;
 	}
 }
+
 @media only screen and (max-width: 768px) {
 	#board-header h1 {
 		margin-left: 50px;
 	}
 }
 
-
-
-
 #markdown p {
 	margin-bottom: 15px;
 }
+
 #markdown ol {
 	margin-left: 20px;
 }
+
 #markdown ul {
 	margin-left: 20px;
 	list-style-type: disc;
 }
+
 #markdown h1 {
 	font-size: 18px;
 	margin-bottom: 5px;
 }
+
 #markdown h2 {
 	font-size: 16px;
 }
+
 #markdown h3 {
 	font-size: 14px;
 }
+
 #markdown h4 {
 	font-size: 13px;
 }
+
 #markdown h6 {
 	font-size: 12px;
 }
+
 #markdown pre {
 	background-color: #eeeeee;
 	padding: 3px;
 }
 
-
 .shareWithList .username {
 	min-width: 100px;
 }
+
 .shareWithList .icon {
 	display: inline-block;
 	background-size: 16px 16px;
@@ -719,7 +829,6 @@ margin-bottom:2px; width:100%;
 	margin-top: 4px;
 }
 
-
 .app-deck .icon {
 	display: inline-block;
 }
@@ -727,6 +836,7 @@ margin-bottom:2px; width:100%;
 .icon-group {
 	background-image: url('../../../settings/img/users.svg');
 }
+
 .icon-archive {
 	background-image: url('../img/archive.svg');
 }

templates/part.card.php

@@ -37,7 +37,7 @@
 				   on-remove="labelRemove($item, $model)" ng-disabled="archived">
 			<ui-select-match placeholder="Select labels..."><span
 					class="select-label"
-					style="background-color:#{{$item.color}}">{{$item.title}}</span>
+					style="background-color:#{{$item.color}}">{{$item.title}}&nbsp;</span>
 			</ui-select-match>
 			<ui-select-choices
 				repeat="label in boardservice.getCurrent().labels | filter:$select.search">