Replace old color occurences with calculations

Signed-off-by: Julius Haertl <jus@bitgrid.net>

5 files changed, 75 insertions, 84 deletions

diff --git a/core/css/apps.scss b/core/css/apps.scss
index 8e804bf85f4..e9ed9f470cd 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -61,7 +61,7 @@ em {
 	-moz-user-select: none;
 	-ms-user-select: none;
 	user-select: none;
-	border-right: 1px solid $color-main-old-eeeeee;
+	border-right: 1px solid nc-darken($color-main-background, 8%);
 	display: flex;
 	flex-direction: column;
 	> ul {
@@ -166,9 +166,9 @@ em {
 				-ms-transform: rotate(0);
 				transform: rotate(0);
 			}
-			background-image: linear-gradient(top, $color-main-old-eeeeee 0%, $color-main-old-f8f8f8 100%);
-			background-image: -webkit-linear-gradient(top, $color-main-old-eeeeee 0%, $color-main-old-f8f8f8 100%);
-			background-image: -ms-linear-gradient(top, $color-main-old-eeeeee 0%, $color-main-old-f8f8f8 100%);
+			background-image: linear-gradient(top, nc-darken($color-main-background, 8%) 0%, nc-darken($color-main-background, 3%) 100%);
+			background-image: -webkit-linear-gradient(top, nc-darken($color-main-background, 8%) 0%, nc-darken($color-main-background, 3%) 100%);
+			background-image: -ms-linear-gradient(top, nc-darken($color-main-background, 8%) 0%, nc-darken($color-main-background, 3%) 100%);
 		}
 	}
 	> {
@@ -251,7 +251,7 @@ em {
 		color: $color-error;
 	}
 	.app-navigation-separator {
-		border-bottom: 1px solid $color-main-old-dddddd;
+		border-bottom: 1px solid nc-lighten($color-main-text, 86%);
 	}
 
 	/**
@@ -324,7 +324,7 @@ em {
 			margin-right: 0;
 			height: 38px;
 			float: left;
-			border: 1px solid rgba($color-main-old-bbbbbb, 0.9);
+			border: 1px solid rgba(nc-lighten($color-main-text, 73%), 0.9);
 		}
 		button,
 		input[type='submit'] {
@@ -378,7 +378,7 @@ em {
 	min-width: 300px;
 	display: block;
 	background: $color-main-background;
-	border-left: 1px solid $color-main-old-eeeeee;
+	border-left: 1px solid nc-darken($color-main-background, 8%);
 	-webkit-transition: margin-right 300ms;
 	transition: margin-right 300ms;
 	overflow-x: hidden;
@@ -412,7 +412,7 @@ em {
 	/* restrict height of settings and make scrollable */
 	max-height: 300px;
 	overflow-y: auto;
-	border-right: 1px solid $color-main-old-eeeeee;
+	border-right: 1px solid nc-darken($color-main-background, 8%);
 	width: 250px;
 	box-sizing: border-box;
 
@@ -428,7 +428,7 @@ em {
 }
 
 #app-settings-header {
-	border-right: 1px solid $color-main-old-eeeeee;
+	border-right: 1px solid nc-darken($color-main-background, 8%);
 	width: 250px;
 	box-sizing: border-box;
 }
@@ -464,7 +464,7 @@ em {
 .section {
 	display: block;
 	padding: 30px;
-	color: $color-main-old-555555;
+	color: nc-lighten($color-main-text, 33%);
 	margin-bottom: 24px;
 	&.hidden {
 		display: none !important;
@@ -499,7 +499,7 @@ em {
 
 /* DROPDOWN ----------------------------------------------------------------- */
 .dropdown {
-	background: $color-main-old-eeeeee;
+	background: nc-darken($color-main-background, 8%);
 	border-bottom-left-radius: 5px;
 	border-bottom-right-radius: 5px;
 	box-shadow: 0 1px 1px $color-box-shadow;
@@ -520,18 +520,18 @@ em {
 		float: left;
 		padding: 5px;
 		cursor: pointer;
-		color: $color-main-old-555555;
+		color: nc-lighten($color-main-text, 33%);
 		margin-bottom: 1px;
 		a {
-			color: $color-main-old-555555;
+			color: nc-lighten($color-main-text, 33%);
 			margin-bottom: 1px;
 		}
 		&.selected {
 			font-weight: 600;
-			border-bottom: 1px solid $color-main-old-333333;
+			border-bottom: 1px solid nc-lighten($color-main-text, 20%);
 		}
 		&:hover {
-			border-bottom: 1px solid $color-main-old-333333;
+			border-bottom: 1px solid nc-lighten($color-main-text, 20%);
 		}
 		&.selected, &:hover {
 			margin-bottom: 0px;
@@ -557,7 +557,7 @@ em {
 	.popovermenu, .popovermenu:after,
 	#app-navigation .app-navigation-entry-menu,
 	#app-navigation .app-navigation-entry-menu:after {
-		border: 1px solid $color-main-old-eeeeee;
+		border: 1px solid nc-darken($color-main-background, 8%);
 	}
 }
 
@@ -566,7 +566,7 @@ em {
 .popovermenu {
 	position: absolute;
 	background-color: $color-main-background;
-	color: $color-main-old-333333;
+	color: nc-lighten($color-main-text, 20%);
 	border-radius: 3px;
 	z-index: 110;
 	margin: 5px;
@@ -643,7 +643,7 @@ em {
 			margin: 0;
 			font-weight: inherit;
 			box-shadow: none;
-			color: $color-main-old-333333 !important; /* Overwrite app-navigation li */
+			color: nc-lighten($color-main-text, 20%) !important; /* Overwrite app-navigation li */
 			/* prevent .action class to break the design */
 			&.action {
 				padding: inherit !important;
diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index 54f753c5c72..37405172d3a 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -40,8 +40,8 @@ textarea,
 	padding: 7px 6px;
 	font-size: 13px;
 	background-color: $color-main-background;
-	color: $color-main-old-333333;
-	border: 1px solid $color-main-old-dddddd;
+	color: nc-lighten($color-main-text, 33%);
+	border: 1px solid nc-lighten($color-main-text, 86%);
 	outline: none;
 	border-radius: 3px;
 	&:not(:disabled):not(.primary) {
@@ -59,7 +59,7 @@ textarea,
 		}
 	}
 	&:disabled {
-		background-color: $color-main-old-eeeeee;
+		background-color: nc-darken($color-main-background, 8%);
 		color: rgba($color-main-text, 0.4);
 		cursor: default;
 		opacity: 0.5;
@@ -81,7 +81,7 @@ textarea,
 		}
 		&:disabled {
 			background-color: rgba($color-primary, .7);
-			color: $color-main-old-bbbbbb;
+			color: nc-lighten($color-main-text, 73%);
 		}
 	}
 }
@@ -128,7 +128,7 @@ input[type='reset'] {
 	min-height: 34px;
 	cursor: pointer;
 	box-sizing: border-box;
-	background-color: $color-main-old-f8f8f8;
+	background-color: nc-darken($color-main-background, 3%);
 }
 
 /* Buttons */
@@ -155,7 +155,7 @@ button, .button {
 }
 
 textarea {
-	color: $color-main-old-555555;
+	color: nc-lighten($color-main-text, 33%);
 	cursor: text;
 	font-family: inherit;
 	height: auto;
@@ -163,7 +163,7 @@ textarea {
 		&:active,
 		&:hover,
 		&:focus {
-			border-color: $color-main-old-dddddd !important;
+			border-color: nc-lighten($color-main-text, 86%) !important;
 			background-color: $color-main-background !important;
 		}
 	}
@@ -186,7 +186,7 @@ button img,
 	cursor: pointer;
 }
 #quota {
-	color: $color-main-old-555555;
+	color: nc-lighten($color-main-text, 33%);
 }
 select,
 .button.multiselect {
@@ -221,7 +221,7 @@ input {
 				border-radius: 50%;
 				margin: 3px;
 				margin-top: 1px;
-				border: 1px solid $color-main-old-888888;
+				border: 1px solid nc-lighten($color-main-text, 53%);
 			}
 			&:not(:disabled):not(:checked) + label:hover:before,
 			&:focus + label:before {
@@ -236,11 +236,11 @@ input {
 				border-color: $color-primary
 			}
 			&:disabled + label:before {
-				border: 1px solid $color-main-old-888888;
-				background-color: $color-main-old-bbbbbb !important; /* override other status */
+				border: 1px solid nc-lighten($color-main-text, 53%);
+				background-color: nc-lighten($color-main-text, 73%) !important; /* override other status */
 			}
 			&:checked:disabled + label:before {
-				background-color: $color-main-old-bbbbbb;
+				background-color: nc-lighten($color-main-text, 73%);
 			}
 		}
 		&.checkbox {
@@ -261,7 +261,7 @@ input {
 		&.radio--white,
 		&.checkbox--white {
 			+ label:before {
-				border-color: $color-main-old-dddddd;
+				border-color: nc-lighten($color-main-text, 86%);
 			}
 			&:not(:disabled):not(:checked) + label:hover:before,
 			&:focus + label:before {
@@ -269,17 +269,17 @@ input {
 			}
 			&:checked + label:before {
 				box-shadow: inset 0px 0px 0px 2px $color-main-text;
-				background-color: $color-main-old-eeeeee;
-				border-color: $color-main-old-eeeeee
+				background-color: nc-darken($color-main-background, 8%);
+				border-color: nc-darken($color-main-background, 8%)
 			}
 			&:disabled + label:before {
-				background-color: $color-main-old-555555 !important; /* override other status */
+				background-color: nc-lighten($color-main-text, 33%) !important; /* override other status */
 				border-color: rgba($color-main-text, 0.4) !important; /* override other status */
 			}
 			&:checked:disabled + label:before {
 				box-shadow: inset 0px 0px 0px 2px $color-main-text;
-				border-color: $color-main-old-555555;
-				background-color: $color-main-old-333333;
+				border-color: nc-lighten($color-main-text, 33%);
+				background-color: nc-lighten($color-main-text, 33%);
 			}
 		}
 		&.checkbox--white {
@@ -293,10 +293,10 @@ input {
 				background-image: url('../img/actions/checkbox-mixed-white.svg');
 			}
 			&:checked:disabled + label:after {
-				border-color: $color-main-old-bbbbbb;
+				border-color: nc-lighten($color-main-text, 73%);
 			}
 			&:indeterminate:disabled + label:after {
-				background-color: $color-main-old-bbbbbb;
+				background-color: nc-lighten($color-main-text, 73%);
 			}
 		}
 	}
@@ -306,7 +306,7 @@ input {
 .select2-drop {
 	margin-top: -2px;
 	&.select2-drop-active {
-		border-color: $color-main-old-dddddd;
+		border-color: nc-lighten($color-main-text, 86%);
 	}
 	.avatar {
 		display: inline-block;
@@ -341,14 +341,14 @@ input {
 			padding: 12px;
 			background-color: $color-main-background;
 			cursor: pointer;
-			color: $color-main-old-333333;
+			color: nc-lighten($color-main-text, 33%);
 		}
 		.select2-result {
 			&.select2-selected {
-				background-color: $color-main-old-f8f8f8;
+				background-color: nc-darken($color-main-background, 3%);
 			}
 			&.select2-highlighted {
-				background-color: $color-main-old-f8f8f8;
+				background-color: nc-darken($color-main-background, 3%);
 				color: $color-main-text;
 			}
 		}
@@ -368,10 +368,10 @@ input {
 		white-space: nowrap;
 		text-overflow: ellipsis;
 		background: $color-main-background;
-		color: $color-main-old-555555;
+		color: nc-lighten($color-main-text, 33%);
 		box-sizing: content-box;
 		border-radius: 3px;
-		border: 1px solid $color-main-old-dddddd;
+		border: 1px solid nc-lighten($color-main-text, 86%);
 		margin: 0;
 		padding: 2px 0;
 		min-height: auto;
@@ -384,8 +384,8 @@ input {
 			& {
 				background-image: none;
 				background-color: $color-main-background;
-				color: $color-main-old-333333;
-				border: 1px solid $color-main-old-dddddd;
+				color: nc-lighten($color-main-text, 33%);
+				border: 1px solid nc-lighten($color-main-text, 86%);
 			}
 			.select2-search-choice-close {
 				display: none;
@@ -410,10 +410,10 @@ input {
 		white-space: nowrap;
 		text-overflow: ellipsis;
 		background: $color-main-background;
-		color: $color-main-old-555555;
+		color: nc-lighten($color-main-text, 33%);
 		box-sizing: content-box;
 		border-radius: 3px;
-		border: 1px solid $color-main-old-dddddd;
+		border: 1px solid nc-lighten($color-main-text, 86%);
 		margin: 0;
 		padding: 2px 0;
 		padding-left: 6px;
@@ -422,15 +422,15 @@ input {
 			line-height: 20px;
 			padding-left: 5px;
 			background-image: none;
-			background-color: $color-main-old-f8f8f8;
-			border-color: $color-main-old-f8f8f8;
+			background-color: nc-darken($color-main-background, 3%);
+			border-color: nc-darken($color-main-background, 3%);
 			.select2-search-choice-close {
 				display: none;
 			}
 			&.select2-search-choice-focus,
 			&:hover {
-				background-color: $color-main-old-eeeeee;
-				border-color: $color-main-old-eeeeee;
+				background-color: nc-darken($color-main-background, 8%);
+				border-color: nc-darken($color-main-background, 8%);
 			}
 		}
 		.select2-arrow {
@@ -478,7 +478,7 @@ input {
 
 .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
 	border: none;
-	background: $color-main-old-f8f8f8;
+	background: nc-darken($color-main-background, 3%);
 }
 
 /* Animation */
diff --git a/core/css/share.scss b/core/css/share.scss
index 4a1119222c1..0e6eb3ccf8b 100644
--- a/core/css/share.scss
+++ b/core/css/share.scss
@@ -144,7 +144,7 @@ a {
 }
 
 #link {
-	border-top: 1px solid $color-main-old-dddddd;
+	border-top: 1px solid nc-lighten($color-main-text, 86%);
 	padding-top: 8px;
 	#showPassword img {
 		padding-left: 5px;
diff --git a/core/css/styles.scss b/core/css/styles.scss
index 0fb6d60888d..2bec3c8d3b1 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -148,7 +148,7 @@ body {
 		color: $color-primary-text;
 		border-bottom: 2px dotted $color-main-background;
 		&:hover, &:focus {
-			color: $color-main-old-dddddd;
+			color: nc-lighten($color-main-text, 86%);
 		}
 	}
 }
@@ -164,7 +164,7 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-	background: $color-main-old-dddddd;
+	background: nc-lighten($color-main-text, 86%);
 	border-radius: 3px;
 }
 
@@ -298,7 +298,7 @@ body {
 }
 
 #emptycontent, .emptycontent {
-	color: $color-main-old-888888;
+	color: nc-darken($color-main-background, 8%);
 	text-align: center;
 	margin-top: 30vh;
 	width: 100%;
@@ -355,7 +355,7 @@ body {
 		}
 		a {
 			color: $color-primary-text;
-			border-bottom: 1px solid $color-main-old-bbbbbb;
+			border-bottom: 1px solid nc-lighten($color-main-text, 73%);
 		}
 	}
 	.infogroup {
@@ -620,17 +620,17 @@ label.infield {
 			position: static;
 			margin: 0 -3px 5px;
 			font-size: 12px;
-			background: $color-main-old-f8f8f8;
-			color: $color-main-old-888888;
+			background: nc-darken($color-main-background, 3%);
+			color: nc-lighten($color-main-text, 53%);
 			cursor: pointer;
-			border: 1px solid $color-main-old-dddddd;
+			border: 1px solid nc-lighten($color-main-text, 86%);
 			span {
 				cursor: pointer;
 				padding: 10px 20px;
 			}
 			&.ui-state-hover, &.ui-state-active {
 				color: $color-main-text;
-				background-color: $color-main-old-eeeeee;
+				background-color: nc-darken($color-main-background, 8%);
 			}
 		}
 	}
@@ -682,7 +682,7 @@ label.infield {
 		color: $color-primary-text !important;
 		font-weight: 600 !important;
 		&.button {
-			color: $color-main-old-555555 !important;
+			color: nc-lighten($color-main-text, 33%) !important;
 			display: inline-block;
 			text-align: center;
 		}
@@ -899,7 +899,7 @@ tr {
 
 tbody tr {
 	&:hover, &:focus, &:active {
-		background-color: $color-main-old-f8f8f8;
+		background-color: nc-darken($color-main-background, 3%);
 	}
 }
 
@@ -956,7 +956,7 @@ code {
 }
 
 .ui-datepicker-prev, .ui-datepicker-next {
-	border: $color-main-old-dddddd;
+	border: nc-lighten($color-main-text, 86%);
 	background: $color-main-background;
 }
 
@@ -995,7 +995,7 @@ code {
 		width: 100%;
 	}
 	.emptycontent {
-		color: $color-main-old-888888;
+		color: nc-lighten($color-main-text, 53%);
 		text-align: center;
 		margin-top: 80px;
 		width: 100%;
@@ -1013,7 +1013,7 @@ code {
 	.filelist {
 		td {
 			padding: 14px;
-			border-bottom: 1px solid $color-main-old-eeeeee;
+			border-bottom: 1px solid nc-darken($color-main-background, 8%);
 		}
 		tr:last-child td {
 			border-bottom: none;
@@ -1070,7 +1070,7 @@ span.ui-icon {
 	}
 	.scrollarea {
 		overflow: auto;
-		border: 1px solid $color-main-old-dddddd;
+		border: 1px solid nc-lighten($color-main-text, 86%);
 		width: 100%;
 		height: 240px;
 	}
@@ -1082,7 +1082,7 @@ span.ui-icon {
 		}
 	}
 	.taglist li {
-		background: $color-main-old-f8f8f8;
+		background: nc-darken($color-main-background, 3%);
 		padding: .3em .8em;
 		white-space: nowrap;
 		overflow: hidden;
@@ -1090,7 +1090,7 @@ span.ui-icon {
 		-webkit-transition: background-color 500ms;
 		transition: background-color 500ms;
 		&:hover, &:active {
-			background: $color-main-old-eeeeee;
+			background: nc-darken($color-main-background, 8%);
 		}
 	}
 	.addinput {
@@ -1105,7 +1105,7 @@ span.ui-icon {
 	background-color: $color-main-background;
 	border-radius: 3px;
 	box-shadow: 0 0 10px $color-box-shadow;
-	color: $color-main-old-333333;
+	color: nc-lighten($color-main-text, 20%);
 	padding: 10px;
 	position: fixed !important;
 	z-index: 100;
@@ -1174,7 +1174,7 @@ div.crumb {
 		position: relative;
 		top: 12px;
 		padding: 14px 24px 14px 17px;
-		color: $color-main-old-555555;
+		color: nc-lighten($color-main-text, 33%);
 	}
 	&.last a {
 		padding-right: 0;
@@ -1222,12 +1222,12 @@ div.crumb {
 	position: relative;
 	text-align: center;
 	.info {
-		color: $color-main-old-555555;
+		color: nc-lighten($color-main-text, 33%);
 		text-align: center;
 		margin: 0 auto;
 		padding: 20px 0;
 		a {
-			color: $color-main-old-555555;
+			color: nc-lighten($color-main-text, 33%);
 			font-weight: 600;
 			padding: 13px;
 			margin: -13px;
diff --git a/core/css/variables.scss b/core/css/variables.scss
index 1ca81610f1a..47c8e1a27f8 100644
--- a/core/css/variables.scss
+++ b/core/css/variables.scss
@@ -19,13 +19,4 @@ $image-login-background: '../img/background.jpg?v=1';
 
 $color-loading: #969696;
 $color-loading-dark: #bbbbbb;
-
-$color-main-old-f8f8f8: nc-darken($color-main-background, 3%);
-$color-main-old-eeeeee: nc-lighten($color-main-text, 93%);
-$color-main-old-dddddd: nc-lighten($color-main-text, 86%);
-$color-main-old-bbbbbb: nc-lighten($color-main-text, 73%);
-$color-main-old-888888: nc-lighten($color-main-text, 53%);
-$color-main-old-555555: nc-lighten($color-main-text, 33%);
-$color-main-old-333333: nc-lighten($color-main-text, 20%);
-
-$color-box-shadow: rgba($color-main-old-333333, 0.75);
\ No newline at end of file
+$color-box-shadow: rgba(nc-lighten($color-main-text, 20%), 0.75);
\ No newline at end of file