Merge pull request #643 from nextcloud/bugfix/noid/style-accessibility

General styling and accessibility fixes

css/icons.scss

@@ -35,10 +35,12 @@
 
 .icon-home {
   background-image: url('../../../core/img/places/home.svg');
+  background-image: var(--icon-home-000);
 }
 
 .icon-description {
   background-image: url('../img/description.svg');
+  background-image: var(--icon-text-000);
 }
 
 .icon-badge {
@@ -46,9 +48,25 @@
 }
 
 .icon-toggle-compact-collapsed {
-  background-image: url('../img/toggle_view_expand.svg');
+  background-image: url('../img/toggle-view-expand.svg');
 }
 
 .icon-toggle-compact-expanded {
-  background-image: url('../img/toggle_view_collapse.svg');
+  background-image: url('../img/toggle-view-collapse.svg');
+}
+
+@if mixin-exists('icon-black-white') {
+	@include icon-black-white('deck', 'deck', 1);
+	@include icon-black-white('archive', 'deck', 1);
+	
+	.icon-toggle-compact-collapsed {
+		@include icon-color('toggle-view-expand', 'deck', $color-black);
+	}
+
+	.icon-toggle-compact-expanded {
+		@include icon-color('toggle-view-collapse', 'deck', $color-black);
+	}
+	.icon-activity {
+		@include icon-color('activity-dark', 'activity', $color-black);
+	}
 }

css/style.scss

@@ -157,6 +157,7 @@ input.input-inline {
 	width: 100%;
 	height: 100%;
 	background-color: $color-main-background;
+	background-color: var(--color-main-background);
 }
 
 #board {
@@ -186,9 +187,11 @@ input.input-inline {
 
 		.card {
 			box-shadow: 0px 0px 7px 0px $color-grey;
+			box-shadow: 0px 0px 7px 0px var(--color-grey);
 
 			&.current {
 				box-shadow: 0px 0px 7px 0px $color-darkgrey;
+				box-shadow: 0px 0px 7px 0px var(--color-darkgrey);
 			}
 		}
 	}
@@ -213,10 +216,19 @@ input.input-inline {
 	padding: 10px;
 
 	> .as-sortable-placeholder {
-		display: inline-block !important;
+		display: flex !important;
+		width: 320px;
+		min-width: 320px;
 		margin-top: 0;
 		margin-left: 0;
 	}
+
+	> .as-sortable-drag {
+		background-color: $color-main-background;
+		background-color: var(--color-main-background);
+		box-shadow: 0 0 7px 0 $color-background-dark;
+		box-shadow: 0 0 7px 0 var(--color-background-dark);
+	}
 }
 
 #controls {
@@ -322,6 +334,7 @@ input.input-inline {
 
 #stack-add {
 	background-color: $color-lightgrey;
+	background-color: var(--color-lightgrey);
 	border-radius: 3px;
 	margin: 3px;
 	display: flex;
@@ -366,9 +379,9 @@ input.input-inline {
 			width: 100%;
 			margin: 0;
 			font-size: 12pt;
-			font-weight: 700;
 			border: 0;
 			background-color: $color-main-background;
+			background-color: var(--color-main-background);
 			min-height: initial;
 		}
 
@@ -401,6 +414,11 @@ input.input-inline {
 		}
 	}
 
+	&.as-sortable-item {
+		height: 100%;
+		display: flex;
+	}
+
 	> ul {
 		display: flex;
 		flex-direction: column;
@@ -410,10 +428,12 @@ input.input-inline {
 
 .card {
 	background-color: $color-main-background;
+	background-color: var(--color-main-background);
 	margin: $board-item-margin;
 	white-space: normal;
 	position: relative;
 	box-shadow: 0 0 3px $color-darkgrey;
+	box-shadow: 0 0 3px --var(color-darkgrey);
 	border-radius: 3px;
 	transition: margin 250ms linear;
 
@@ -443,6 +463,7 @@ input.input-inline {
 
 	.card-controls {
 		background: $color-lightgrey;
+		background: var(--color-background-dark);
 		display: flex;
 		position: relative;
 		padding-left: 10px;
@@ -477,6 +498,7 @@ input.input-inline {
 			&.overdue {
 				background-color: $color-error;
 				color: $color-primary-text;
+				color: var(--color-primary-text);
 
 				.icon-badge {
 					background-image: url('../img/calendar-white.svg');
@@ -659,6 +681,7 @@ input.input-inline {
 	position: sticky;
 	top: 0;
 	background-color: $color-main-background;
+	background-color: var(--color-main-background);
 	z-index: 200;
 
 	h3 {
@@ -698,7 +721,8 @@ input.input-inline {
 	position: absolute;
 	width: 100%;
 	height: 100%;
-	background-color: #fff;
+	background-color: $color-main-background;
+	background-color: var(--color-main-background);
 	z-index: 100;
 	opacity: 0.9;
 	text-align: center;
@@ -786,7 +810,9 @@ input.input-inline {
 		}
 		&.unsaved {
 			background-color: $color-lightgrey;
+			background-color: var(--color-lightgrey);
 			color: $color-darkgrey;
+			color: var(--color-darkgrey);
 		}
 	}
 
@@ -827,6 +853,7 @@ input.input-inline {
 		width: 100%;
 		height: 100%;
 		background-color: rgba($color-darkgrey, 0.5);
+		background-color: var(--color-background-dark);
 		left: 0;
 		top: 0;
 	}
@@ -842,9 +869,11 @@ input.input-inline {
 			left: 50%;
 			transform: translate(-50%, -50%);
 			background-color: $color-main-background;
+			background-color: var(--color-main-background);
 			z-index: 2;
 			border-radius: 3px;
 			box-shadow: 0 0 3px $color-darkgrey;
+			box-shadow: 0 0 3px var(--color-darkgrey);
 			overflow: scroll;
 		}
 		h3.attachment-selector {
@@ -939,6 +968,8 @@ input.input-inline {
 
 			.container {
 				background-color: $color-main-background;
+				background-color: var(--color-main-background);
+
 			}
 		}
 	}
@@ -1463,6 +1494,7 @@ input.input-inline {
 
 	pre {
 		background-color: $color-lightgrey;
+		background-color: var(--color-background-dark);
 		padding: 3px;
 		overflow: auto;