Replaced colours by variables

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

8 files changed, 83 insertions, 109 deletions

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 2d9f71be02c..13746db9fca 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -767,11 +767,7 @@ table.dragshadow td.size {
 	margin: 0 !important;
 	border: none;
 	border-radius: 0;
-	position: fixed !important;
-	bottom: 44px;
-	width: inherit !important;
 	background-color: transparent;
-	border-right: 1px solid $color-border;
 	z-index:1;
 
 	.quota-container {
diff --git a/apps/systemtags/css/systemtagsfilelist.css b/apps/systemtags/css/systemtagsfilelist.css
index 6318d43687e..ad711f74733 100644
--- a/apps/systemtags/css/systemtagsfilelist.css
+++ b/apps/systemtags/css/systemtagsfilelist.css
@@ -12,18 +12,6 @@
 	margin-left: 10px;
 }
 
-#app-content-systemtagsfilter .select2-choices {
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	background: #fff;
-	color: #555;
-	box-sizing: content-box;
-	border-radius: 3px;
-	border: 1px solid #ddd;
-	padding: 0;
-	min-height: auto;
-}
-
 .nav-icon-systemtagsfilter {
 	background-image: url('../img/tag.svg');
 }
diff --git a/core/css/header.scss b/core/css/header.scss
index 24cafb4637a..fae11a878ec 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -236,7 +236,6 @@ nav {
 }
 
 /* arrow look */
-
 #expanddiv:after {
 	bottom: 100%;
 	border: solid transparent;
@@ -245,8 +244,8 @@ nav {
 	width: 0;
 	position: absolute;
 	pointer-events: none;
-	border-color: rgba(0, 0, 0, 0);
-	border-bottom-color: rgba(255, 255, 255, .97);
+	border-color: transparent;
+	border-bottom-color: $color-main-background;
 	border-width: 10px;
 	margin-left: -10px;
 }
diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index 766bfe55015..5fe65935ec5 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -409,6 +409,9 @@ input {
 		}
 		.select2-search-field input {
 			line-height: 20px;
+			&.select2-active {
+				background: none !important;
+			}
 		}
 	}
 }
diff --git a/core/css/mobile.scss b/core/css/mobile.scss
index b0f8421345c..baf874db8f5 100644
--- a/core/css/mobile.scss
+++ b/core/css/mobile.scss
@@ -78,7 +78,7 @@
 #app-content {
 	width: 100% !important;
 	left: 0 !important;
-	background-color: #fff;
+	background-color: $color-main-background;
 	overflow-x: hidden !important;
 	z-index: 1000;
 }
@@ -97,7 +97,7 @@
 	width: 44px;
 	height: 44px;
 	z-index: 149;
-	background-color: rgba(255, 255, 255, .7);
+	background-color: rgba($color-main-background, .7);
 	cursor: pointer;
 	opacity: .6;
 }
diff --git a/core/css/styles.scss b/core/css/styles.scss
index facadad693e..ad75c0c2fc6 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -165,7 +165,7 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-	background: nc-lighten($color-main-text, 86%);
+	background: nc-darken($color-main-background, 14%);
 	border-radius: 3px;
 }
 
@@ -1213,7 +1213,7 @@ span.ui-icon {
 		position: relative;
 		align-items: center;
 		padding: 3px 3px 3px 10px;
-		border-bottom: 1px solid #eeeeee;
+		border-bottom: 1px solid $color-border;
 
 		:last-of-type {
 			border-bottom: none;
diff --git a/core/css/variables.scss b/core/css/variables.scss
index d6974c4839a..26fd11a07d7 100644
--- a/core/css/variables.scss
+++ b/core/css/variables.scss
@@ -20,5 +20,5 @@ $image-login-background: '../img/background.png?v=2';
 
 $color-loading: #969696;
 $color-loading-dark: #bbbbbb;
-$color-box-shadow: rgba(nc-lighten($color-main-text, 20%), 0.75);
+$color-box-shadow: rgba(nc-darken($color-main-background, 30%), 0.75);
 $color-border: nc-darken($color-main-background, 8%);
diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index de5dcf8a1e8..5f9b7d6a4c5 100644
--- a/settings/css/settings.scss
+++ b/settings/css/settings.scss
@@ -431,7 +431,7 @@ table.nostyle {
 	box-sizing: border-box;
 	background-color: transparent;
 	border: none;
-	border-bottom: 1px solid #eee;
+	border-bottom: 1px solid $color-border;
 	border-radius: 0;
 }
 
@@ -515,14 +515,14 @@ table.grid {
 	th {
 		height: 2em;
 		color: #999;
-		border-bottom: 1px solid #eee;
+		border-bottom: 1px solid $color-border;
 		padding: 0 .5em;
 		padding-left: .8em;
 		text-align: left;
 		font-weight: normal;
 	}
 	td {
-		border-bottom: 1px solid #eee;
+		border-bottom: 1px solid $color-border;
 		padding: 0 .5em;
 		padding-left: .8em;
 		text-align: left;
@@ -736,32 +736,6 @@ input.userFilter {
 }
 
 /* APPS */
-
-/* Bundle header */
-
-#apps-list .apps-header {
-	display: table-row;
-	position: relative;
-	div {
-		display: table-cell;
-		height: 70px;
-	}
-	h2 {
-		display: table-cell;
-		position: absolute;
-		padding-left: 6px;
-		padding-top: 15px;
-		.enable {
-			position: relative;
-			top: -1px;
-			margin-left: 12px;
-		}
-		+ .section {
-			margin-top: 50px;
-		}
-	}
-}
-
 #app-content > svg.app-filter {
 	float: left;
 	height: 0;
@@ -835,49 +809,6 @@ span.version {
 	opacity: .5;
 }
 
-#apps-list {
-	position: relative;
-	height: 100%;
-	display: flex;
-	flex-wrap: wrap;
-	align-content: flex-start;
-	&.hidden {
-		display: none;
-	}
-	.section {
-		position: relative;
-		flex: 0 0 auto;
-		margin-left: 20px;
-		&.apps-experimental {
-			flex-basis: 90%;
-		}
-	}
-	.app-description {
-		p {
-			margin: 10px 0;
-		}
-		ul {
-			list-style: disc;
-		}
-		ol {
-			list-style: decimal;
-			ol, ul {
-				padding-left: 15px;
-			}
-		}
-		> {
-			ul, ol {
-				margin-left: 19px;
-			}
-		}
-		ul {
-			ol, ul {
-				padding-left: 15px;
-			}
-		}
-	}
-}
-
 @media (min-width: 1601px) {
 	#apps-list .section {
 		width: 22%;
@@ -967,10 +898,6 @@ span.version {
 	clear: both;
 }
 
-#apps-list .groups-enable {
-	margin-top: 8px;
-}
-
 #app-category-1 {
 	margin-bottom: 18px;
 }
@@ -1029,11 +956,17 @@ span.version {
 				height: initial;
 				vertical-align: middle;
 				float: none;
-				border-bottom: 1px solid #eee;
+				border-bottom: 1px solid $color-border;
 				padding: 6px;
 				box-sizing: border-box;
 			}
 		}
+		.groups-enable {
+			margin-top: 0;
+			label {
+				margin-right: 3px;
+			}
+		}
 		.app-image {
 			width: 44px;
 			text-align: right;
@@ -1053,21 +986,76 @@ span.version {
 		height: 64px;
 		opacity: .1;
 	}
+	position: relative;
+	height: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	align-content: flex-start;
+	&.hidden {
+		display: none;
+	}
+	.section {
+		position: relative;
+		flex: 0 0 auto;
+		margin-left: 20px;
+		&.apps-experimental {
+			flex-basis: 90%;
+		}
+	}
+	.app-description {
+		p {
+			margin: 10px 0;
+		}
+		ul {
+			list-style: disc;
+		}
+		ol {
+			list-style: decimal;
+			ol, ul {
+				padding-left: 15px;
+			}
+		}
+		> {
+			ul, ol {
+				margin-left: 19px;
+			}
+		}
+		ul {
+			ol, ul {
+				padding-left: 15px;
+			}
+		}
+	}
+	/* Bundle header */
+	.apps-header {
+		display: table-row;
+		position: relative;
+		div {
+			display: table-cell;
+			height: 70px;
+		}
+		h2 {
+			display: table-cell;
+			position: absolute;
+			padding-left: 6px;
+			padding-top: 15px;
+			.enable {
+				position: relative;
+				top: -1px;
+				margin-left: 12px;
+			}
+			+ .section {
+				margin-top: 50px;
+			}
+		}
+	}
 }
 
 .installed .actions {
 	text-align: right;
 }
 
-#apps-list.installed .groups-enable {
-	margin-top: 0;
-	label {
-		margin-right: 3px;
-	}
-}
-
 /* LOG */
-
 #log {
 	white-space: normal;
 	margin-bottom: 14px;