RGBA and variables fixes

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

core/css/apps.scss

@@ -250,7 +250,7 @@ kbd {
 				box-sizing: border-box;
 				white-space: nowrap;
 				text-overflow: ellipsis;
-				color: var(--color-error);
+				color: var(--color-main-text);
 				opacity: .57;
 				flex: 1 1 0px;
 				z-index: 100; /* above the bullet to allow click*/
@@ -644,7 +644,7 @@ kbd {
 
 	.info-text {
 		padding: 5px 0 7px 22px;
-		color: rgba(var(--color-main-text), .4);
+		color: var(--color-text-lighter);
 	}
 	input {
 		&[type='checkbox'],

core/css/css-variables.scss

@@ -13,19 +13,20 @@
 	--color-primary-text: $color-primary-text;
 	--color-primary-text-dark: $color-primary-text-dark;
 	--color-primary-element: $color-primary-element;
+	--color-primary-element-light: $color-primary-element-light;
 
 	--color-error: $color-error;
 	--color-warning: $color-warning;
 	--color-success: $color-success;
 
 	--color-text-maxcontrast: $color-text-maxcontrast;
+	--color-text-light: $color-text-light;
 	--color-text-lighter: $color-text-lighter;
-	--color-text-details: $color-text-details;
 
 	--image-logo: $image-logo;
 	--image-login-background: $image-login-background;
 
-	--color-loading: $color-loading;
+	--color-loading-light: $color-loading-light;
 	--color-loading-dark: $color-loading-dark;
 
 	--color-box-shadow: $color-box-shadow;

core/css/header.scss

@@ -340,7 +340,6 @@ nav[role='navigation'] {
 #settings {
 	display: inline-block;
 	height: 100%;
-	color: rgba(var(--color-primary-text), 0.7);
 	cursor: pointer;
 	flex: 0 0 auto;
 
@@ -500,7 +499,7 @@ nav[role='navigation'] {
 		border-radius: var(--border-radius);
 		border-top-left-radius: 0;
 		border-top-right-radius: 0;
-		color: rgba(var(--color-main-text), .7);
+		color: var(--color-text-lighter);
 		width: auto;
 		left: 50%;
 		top: 100%;

core/css/icons.scss

@@ -42,14 +42,14 @@
 		-webkit-transform-origin: center;
 		-ms-transform-origin: center;
 		transform-origin: center;
-		border: 2px solid rgba(var(--color-loading), 0.5);
-		border-top-color: var(--color-loading);
+		border: 2px solid var(--color-loading-dark);
+		border-top-color: var(--color-loading-light);
 	}
 }
 
 .icon-loading-dark:after,
 .icon-loading-small-dark:after {
-	border: 2px solid rgba(var(--color-loading-dark), 0.5);
+	border: 2px solid var(--color-loading-light);
 	border-top-color: var(--color-loading-dark);
 }
 

core/css/inputs.scss

@@ -32,6 +32,13 @@ div[contenteditable=false] {
 	box-sizing: border-box;
 }
 
+/**
+ * color-text-lighter		normal state
+ * color-text-lighter		active state
+ * color-text-maxcontrast 	disabled state
+ */
+
+
 /* Default global values */
 select,
 button, .button,
@@ -59,11 +66,12 @@ div[contenteditable=true],
 		&:active {
 			outline: none;
 			background-color: var(--color-main-background);
+			color: var(--color-text-light);
 		}
 	}
 	&:disabled {
 		background-color: var(--color-background-dark);
-		color: rgba(var(--color-main-text), 0.4);
+		color: var(--color-text-maxcontrast);
 		cursor: default;
 		opacity: 0.5;
 	}
@@ -82,15 +90,17 @@ div[contenteditable=true],
 		cursor: pointer;
 		&:not(:disabled) {
 			&:hover,
-			&:focus {
-				background-color: rgba(var(--color-primary-element), .85);
+			&:focus,
+			&:active  {
+				background-color: var(--color-primary-element-light)
 			}
 			&:active {
-				background-color: rgba(var(--color-primary-element), .7);
+				color: var(--color-primary-text-dark);
 			}
 		}
 		&:disabled {
-			background-color: rgba(var(--color-primary-element), .7);
+			// opacity is already defined to .5 if disabled
+			background-color: var(--color-primary-element);
 			color: var(--color-primary-text-dark);
 		}
 	}
@@ -108,7 +118,7 @@ div[contenteditable=false] {
 	cursor: text;
 
 	background-color: var(--color-background-dark);
-	color: rgba(var(--color-main-text), 0.4);
+	color: var(--color-text-lighter);
 	cursor: default;
 	opacity: 0.5;
 }
@@ -349,7 +359,6 @@ input {
 
 		/* We do not use the nc-darken function as this is not supposed to be changed */
 		$color-checkbox-radio-white: #fff;
-		--color-checkbox-radio-white: $color-checkbox-radio-white;
 		&.radio--white,
 		&.checkbox--white {
 			+ label:before,
@@ -357,7 +366,7 @@ input {
 				border-color: darken($color-checkbox-radio-white, 27%);
 			}
 			&:not(:disabled):not(:checked) + label:hover:before {
-				border-color: var(--color-checkbox-radio-white);
+				border-color: $color-checkbox-radio-white;
 			}
 			&:checked + label:before {
 				box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
@@ -366,11 +375,11 @@ input {
 			}
 			&:disabled + label:before {
 				background-color: darken($color-checkbox-radio-white, 27%) !important; /* override other status */
-				border-color: rgba(var(--color-checkbox-radio-white), 0.4) !important; /* override other status */
+				border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
 			}
 			&:checked:disabled + label:before {
 				box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
-				border-color: rgba(var(--color-checkbox-radio-white), 0.4) !important; /* override other status */
+				border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
 				background-color: darken($color-checkbox-radio-white, 27%);
 			}
 		}
@@ -378,7 +387,7 @@ input {
 			&:checked + label:before,
 			&:indeterminate + label:before {
 				background-color: transparent !important; /* Override default checked */
-				border-color: var(--color-checkbox-radio-white) !important; /* Override default checked */
+				border-color: $color-checkbox-radio-white !important; /* Override default checked */
 				background-image: url('../img/actions/checkbox-mark-white.svg');
 			}
 			&:indeterminate + label:before {

core/css/mobile.scss

@@ -72,7 +72,7 @@
 	width: 44px;
 	height: 44px;
 	z-index: 149;
-	background-color: rgba(var(--color-main-background), .7);
+	background-color: var(--color-main-background-darker);
 	cursor: pointer;
 	opacity: .6;
 }

core/css/share.scss

@@ -61,7 +61,6 @@
 	.error {
 		color: var(--color-error);
 		border-color: var(--color-error);
-		box-shadow: 0 0 6px rgba(var(--color-error), 0.35);
 	}
 	.mailView .icon-mail {
 		opacity: 0.5;
@@ -173,7 +172,7 @@
 .notCreatable {
 	padding-left: 12px;
 	padding-top: 12px;
-	color: rgba(var(--color-main-text), .4);
+	color: var(--color-text-lighter);
 }
 
 .contactsmenu-popover {

core/css/styles.scss

@@ -110,14 +110,14 @@ body {
 	width: 258px !important;
 	display: inline-block;
 	margin-bottom: 0 !important;
-	background-color: rgba(var(--color-main-text), 0.3) !important;
+	background-color: var(--color-background-darker) !important;
 	border: none !important;
 }
 
 .two-factor-link {
 	display: inline-block;
 	padding: 12px;
-	color: rgba(var(--color-main-background), 0.75);
+	color: var(--color-text-lighter);
 }
 
 .float-spinner {
@@ -138,7 +138,7 @@ body {
 	width: 100%;
 	z-index: 9000;
 	text-align: center;
-	background-color: rgba(var(--color-main-text), 0.5);
+	background-color: var(--color-background-darker);
 	color: var(--color-primary-text);
 	line-height: 125%;
 	font-size: 24px;
@@ -200,7 +200,7 @@ body {
 			width: 155px;
 			cursor: text;
 			background-color: var(--color-primary) !important;
-			border: 1px solid rgba(var(--color-primary-text), 0.5) !important;
+			border: 1px solid var(--color-primary-text-dark) !important;
 		}
 		&:hover, &:focus, &:active {
 			opacity: 1;
@@ -236,7 +236,7 @@ body {
 	height: 44px;
 	padding: 0;
 	margin: 0;
-	background-color: rgba(var(--color-main-background), 0.95);
+	background-color: var(--color-main-background-light);
 	z-index: 60;
 	-webkit-user-select: none;
 	-moz-user-select: none;
@@ -488,7 +488,6 @@ body {
 	border-top: 0 !important;
 	border-bottom: 0 !important;
 	border-radius: 0 !important;
-	box-shadow: 0 1px 0 rgba(var(--color-main-text), 0.1) inset !important;
 }
 
 #body-login .groupbottom input, .groupbottom input {
@@ -496,7 +495,6 @@ body {
 	border-top: 0 !important;
 	border-top-right-radius: 0 !important;
 	border-top-left-radius: 0 !important;
-	box-shadow: 0 1px 0 rgba(var(--color-main-text), 0.1) inset !important;
 }
 
 #body-login .groupbottom input[type=submit] {
@@ -522,7 +520,6 @@ label.infield {
 			user-select: none;
 		}
 		.errors {
-			background: rgba(var(--color-error), .35);
 			border: 1px solid var(--color-error);
 			list-style-indent: inside;
 			margin: 0 0 2em;
@@ -530,7 +527,6 @@ label.infield {
 		}
 	}
 	.success {
-		background: rgba(var(--color-success), .35);
 		border: 1px solid var(--color-success);
 		width: 35%;
 		margin: 30px auto;
@@ -645,7 +641,7 @@ label.infield {
 	.warning, .update, .error {
 		display: block;
 		padding: 10px;
-		background-color: rgba(var(--color-main-text), 0.3);
+		background-color: var(--color-background-darker);
 		color: var(--color-primary-text);
 		text-align: left;
 		border-radius: var(--border-radius);
@@ -674,7 +670,6 @@ label.infield {
 #body-user .warning, #body-settings .warning {
 	margin-top: 8px;
 	padding: 5px;
-	background: rgba(var(--color-error), .15);
 	border-radius: var(--border-radius);
 }
 

core/css/variables.scss

@@ -8,8 +8,9 @@
 }
 
 // SCSS variables
-$color-main-text: #000000;
-$color-main-background: #ffffff;
+// DEPRECATED, please use CSS4 vars
+$color-main-text: #000;
+$color-main-background: #fff;
 
 // used for different active/disabled states
 $color-background-dark: nc-darken($color-main-background, 7%);
@@ -19,6 +20,7 @@ $color-primary: #0082c9;
 $color-primary-text: #ffffff;
 $color-primary-text-dark: nc-darken($color-primary-text, 7%);
 $color-primary-element: $color-primary;
+$color-primary-element-light: nc-lighten($color-primary-element, 15%);
 
 $color-error: #e9322d;
 $color-warning: #eca700;
@@ -34,8 +36,8 @@ $color-text-lighter: nc-lighten($color-main-text, 30%);
 $image-logo: url('../img/logo.svg?v=1');
 $image-login-background: url('../img/background.png?v=2');
 
-$color-loading: #969696;
-$color-loading-dark: #bbbbbb;
+$color-loading-light: #777;
+$color-loading-dark: #ccc;
 
 $color-box-shadow: rgba(nc-darken($color-main-background, 70%), 0.75);