Styles scss

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

1 files changed, 55 insertions, 55 deletions

diff --git a/core/css/styles.scss b/core/css/styles.scss
index 57333689750..40418a9e4cc 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -54,7 +54,7 @@ table, td, th {
 
 a {
 	border: 0;
-	color: $color-main-text;
+	color: var(--color-main-text);
 	text-decoration: none;
 	cursor: pointer;
 	* {
@@ -83,18 +83,18 @@ ul {
 }
 
 body {
-	background-color: $color-main-background;
+	background-color: var(--color-main-background);
 	font-weight: 400;
 	font-size: .8em;
 	line-height: 1.6em;
 	font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
-	color: $color-main-text;
+	color: var(--color-main-text);
 	height: auto;
 }
 
 #body-login {
 	text-align: center;
-	background-color: $color-primary;
+	background-color: var(--color-primary);
 	background-image: url('../img/background.png?v=2');
 	background-position: 50% 50%;
 	background-repeat: no-repeat;
@@ -110,14 +110,14 @@ body {
 	width: 258px !important;
 	display: inline-block;
 	margin-bottom: 0 !important;
-	background-color: rgba($color-main-text, 0.3) !important;
+	background-color: rgba(var(--color-main-text), 0.3) !important;
 	border: none !important;
 }
 
 .two-factor-link {
 	display: inline-block;
 	padding: 12px;
-	color: rgba($color-main-background, 0.75);
+	color: rgba(var(--color-main-background), 0.75);
 }
 
 .float-spinner {
@@ -138,8 +138,8 @@ body {
 	width: 100%;
 	z-index: 9000;
 	text-align: center;
-	background-color: rgba($color-main-text, 0.5);
-	color: $color-primary-text;
+	background-color: rgba(var(--color-main-text), 0.5);
+	color: var(--color-primary-text);
 	line-height: 125%;
 	font-size: 24px;
 	div {
@@ -150,8 +150,8 @@ body {
 		margin: 0px auto;
 	}
 	a {
-		color: $color-primary-text;
-		border-bottom: 2px dotted $color-main-background;
+		color: var(--color-primary-text);
+		border-bottom: 2px dotted var(--color-main-background);
 		&:hover, &:focus {
 			color: nc-lighten($color-main-text, 86%);
 		}
@@ -171,7 +171,7 @@ body {
 
 ::-webkit-scrollbar-thumb {
 	background: nc-darken($color-main-background, 14%);
-	border-radius: $border-radius;
+	border-radius: var(--border-radius);
 }
 
 /* Searchbox */
@@ -185,9 +185,9 @@ body {
 		padding-left: 25px;
 		padding-right: 20px;
 		background: transparent url('../img/actions/search-white.svg?v=1') no-repeat center center;
-		color: $color-primary-text;
+		color: var(--color-primary-text);
 		border: 0;
-		border-radius: $border-radius;
+		border-radius: var(--border-radius);
 		margin-top: 9px;
 		width: 0;
 		cursor: pointer;
@@ -196,11 +196,11 @@ body {
 		opacity: .6;
 		&:focus, &:active, &:valid {
 			background-position-x: 6px;
-			color: $color-primary-text;
+			color: var(--color-primary-text);
 			width: 155px;
 			cursor: text;
-			background-color: $color-primary !important;
-			border: 1px solid rgba($color-primary-text, 0.5) !important;
+			background-color: var(--color-primary) !important;
+			border: 1px solid rgba(var(--color-primary-text), 0.5) !important;
 		}
 		&:hover, &:focus, &:active {
 			opacity: 1;
@@ -236,7 +236,7 @@ body {
 	height: 44px;
 	padding: 0;
 	margin: 0;
-	background-color: rgba($color-main-background, 0.95);
+	background-color: rgba(var(--color-main-background), 0.95);
 	z-index: 60;
 	-webkit-user-select: none;
 	-moz-user-select: none;
@@ -344,16 +344,16 @@ body {
 	/* fix sticky footer */
 	p.info, form fieldset legend, #datadirContent label {
 		text-align: center;
-		color: $color-primary-text;
+		color: var(--color-primary-text);
 	}
 	form {
 		fieldset .warning-info, input[type='checkbox'] + label {
 			text-align: center;
-			color: $color-primary-text;
+			color: var(--color-primary-text);
 		}
 		.warning input[type='checkbox'] {
 			&:hover + label, &:focus + label, + label {
-				color: $color-primary-text !important;
+				color: var(--color-primary-text) !important;
 			}
 		}
 	}
@@ -362,7 +362,7 @@ body {
 			margin: 0 0 20px;
 		}
 		a {
-			color: $color-primary-text;
+			color: var(--color-primary-text);
 			border-bottom: 1px solid nc-darken($color-main-background, 27%);
 		}
 	}
@@ -488,7 +488,7 @@ body {
 	border-top: 0 !important;
 	border-bottom: 0 !important;
 	border-radius: 0 !important;
-	box-shadow: 0 1px 0 rgba($color-main-text, 0.1) inset !important;
+	box-shadow: 0 1px 0 rgba(var(--color-main-text), 0.1) inset !important;
 }
 
 #body-login .groupbottom input, .groupbottom input {
@@ -496,7 +496,7 @@ body {
 	border-top: 0 !important;
 	border-top-right-radius: 0 !important;
 	border-top-left-radius: 0 !important;
-	box-shadow: 0 1px 0 rgba($color-main-text, 0.1) inset !important;
+	box-shadow: 0 1px 0 rgba(var(--color-main-text), 0.1) inset !important;
 }
 
 #body-login .groupbottom input[type=submit] {
@@ -522,16 +522,16 @@ label.infield {
 			user-select: none;
 		}
 		.errors {
-			background: rgba($color-error, .35);
-			border: 1px solid $color-error;
+			background: rgba(var(--color-error), .35);
+			border: 1px solid var(--color-error);
 			list-style-indent: inside;
 			margin: 0 0 2em;
 			padding: 1em;
 		}
 	}
 	.success {
-		background: rgba($color-success, .35);
-		border: 1px solid $color-success;
+		background: rgba(var(--color-success), .35);
+		border: 1px solid var(--color-success);
 		width: 35%;
 		margin: 30px auto;
 		padding: 1em;
@@ -542,7 +542,7 @@ label.infield {
 		box-sizing: border-box;
 	}
 	p.info a, #showAdvanced {
-		color: $color-primary-text;
+		color: var(--color-primary-text);
 	}
 	#remember_login {
 		&:hover + label, &:focus + label {
@@ -638,7 +638,7 @@ label.infield {
 				padding: 10px 20px;
 			}
 			&.ui-state-hover, &.ui-state-active {
-				color: $color-main-text;
+				color: var(--color-main-text);
 				background-color: nc-darken($color-main-background, 8%);
 			}
 		}
@@ -646,10 +646,10 @@ label.infield {
 	.warning, .update, .error {
 		display: block;
 		padding: 10px;
-		background-color: rgba($color-main-text, 0.3);
-		color: $color-primary-text;
+		background-color: rgba(var(--color-main-text), 0.3);
+		color: var(--color-primary-text);
 		text-align: left;
-		border-radius: $border-radius;
+		border-radius: var(--border-radius);
 		cursor: default;
 	}
 	.update {
@@ -675,20 +675,20 @@ label.infield {
 #body-user .warning, #body-settings .warning {
 	margin-top: 8px;
 	padding: 5px;
-	background: rgba($color-error, .15);
-	border-radius: $border-radius;
+	background: rgba(var(--color-error), .15);
+	border-radius: var(--border-radius);
 }
 
 .warning {
 	legend, a {
-		color: $color-primary-text !important;
+		color: var(--color-primary-text) !important;
 		font-weight: 600 !important;
 	}
 }
 
 .error {
 	a {
-		color: $color-primary-text !important;
+		color: var(--color-primary-text) !important;
 		font-weight: 600 !important;
 		&.button {
 			color: nc-lighten($color-main-text, 33%) !important;
@@ -711,7 +711,7 @@ label.infield {
 }
 
 .warning-input {
-	border-color: $color-error !important;
+	border-color: var(--color-error) !important;
 }
 
 /* Fixes for log in page, TODO should be removed some time */
@@ -807,7 +807,7 @@ label.infield {
 	#forgot-password {
 		padding: 11px;
 		float: right;
-		color: $color-primary-text;
+		color: var(--color-primary-text);
 	}
 	.wrapper {
 		min-height: 100%;
@@ -847,7 +847,7 @@ td.avatar {
 	margin: 0 auto;
 	max-width: 60%;
 	z-index: 8000;
-	background-color: $color-main-background;
+	background-color: var(--color-main-background);
 	border: 0;
 	padding: 1px 8px;
 	display: none;
@@ -958,7 +958,7 @@ code {
 	margin-top: 10px;
 	padding: 4px 8px;
 	width: auto;
-	border-radius: $border-radius;
+	border-radius: var(--border-radius);
 	border: none;
 
 	.ui-state-default,
@@ -971,8 +971,8 @@ code {
 		padding: 7px;
 		font-size: 13px;
 		border:	none;
-		background-color: $color-main-background;
-		color: $color-main-text;
+		background-color: var(--color-main-background);
+		color: var(--color-main-text);
 
 		.ui-datepicker-title {
 			line-height: 1;
@@ -1011,8 +1011,8 @@ code {
 			&.ui-datepicker-current-day a.ui-state-active,
 			.ui-state-hover,
 			.ui-state-focus {
-				background-color: $color-primary;
-				color: $color-primary-text;
+				background-color: var(--color-primary);
+				color: var(--color-primary-text);
 				font-weight: bold;
 			}
 
@@ -1027,7 +1027,7 @@ code {
 
 .ui-datepicker-prev, .ui-datepicker-next {
 	border: nc-darken($color-main-background, 14%);
-	background: $color-main-background;
+	background: var(--color-main-background);
 }
 
 
@@ -1035,7 +1035,7 @@ code {
 .ui-widget.ui-timepicker {
 	margin-top: 10px !important;
 	width: auto !important;
-	border-radius: $border-radius;
+	border-radius: var(--border-radius);
 
 	.ui-widget-content {
 		border: none !important;
@@ -1051,8 +1051,8 @@ code {
 		padding: 7px;
 		font-size: 13px;
 		border:	none;
-		background-color: $color-main-background;
-		color: $color-main-text;
+		background-color: var(--color-main-background);
+		color: var(--color-main-text);
 
 		.ui-timepicker-title {
 			line-height: 1;
@@ -1082,8 +1082,8 @@ code {
 			&.ui-timepicker-minute-cell a.ui-state-active,
 			.ui-state-hover,
 			.ui-state-focus {
-				background-color: $color-primary;
-				color: $color-primary-text;
+				background-color: var(--color-primary);
+				color: var(--color-primary-text);
 				font-weight: bold;
 			}
 
@@ -1092,7 +1092,7 @@ code {
 			}
 
 			&.ui-timepicker-hours {
-				border-right: 1px solid $color-border;
+				border-right: 1px solid var(--color-border);
 			}
 		}
 	}
@@ -1118,7 +1118,7 @@ code {
 				border-radius: 50%;
 				text-align: center;
 				font-weight: normal;
-				color: $color-main-text;
+				color: var(--color-main-text);
 				display: block;
 				line-height: 18px;
 				width: 18px;
@@ -1170,7 +1170,7 @@ code {
 		display: none;
 	}
 	.filelist {
-		background-color: $color-main-background;
+		background-color: var(--color-main-background);
 		width: 100%;
 	}
 	#filestable.filelist {
@@ -1181,7 +1181,7 @@ code {
 	.filelist {
 		td {
 			padding: 14px;
-			border-bottom: 1px solid $color-border;
+			border-bottom: 1px solid var(--color-border);
 		}
 		tr:last-child td {
 			border-bottom: none;
@@ -1270,7 +1270,7 @@ span.ui-icon {
 		position: relative;
 		align-items: center;
 		padding: 3px 3px 3px 10px;
-		border-bottom: 1px solid $color-border;
+		border-bottom: 1px solid var(--color-border);
 
 		:last-of-type {
 			border-bottom: none;