Implement progress theming into core and better visual on quota display

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

2 files changed, 54 insertions, 20 deletions

diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index 5fe65935ec5..de09db958a5 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -35,7 +35,7 @@ select,
 button, .button,
 input:not([type='range']),
 textarea,
-#quota,	.pager li a {
+.pager li a {
 	margin: 3px 3px 3px 0;
 	padding: 7px 6px;
 	font-size: 13px;
@@ -45,8 +45,7 @@ textarea,
 	outline: none;
 	border-radius: 3px;
 	&:not(:disabled):not(.primary) {
-		/* no border on quota */
-		&:not(#quota):hover,
+		&:hover,
 		&:focus,
 		&.active {
 		/* active class used for multiselect */
@@ -185,9 +184,6 @@ button img,
 .button img {
 	cursor: pointer;
 }
-#quota {
-	color: nc-lighten($color-main-text, 33%);
-}
 select,
 .button.multiselect {
 	font-weight: 400;
@@ -472,6 +468,39 @@ input {
 	}
 }
 
+/* Progressbar */
+progress {
+	display: block;
+	width: 100%;
+	padding: 0;
+	border: 0 none;
+	background-color: nc-darken($color-main-background, 10%);
+	border-radius: 3px;
+	flex-basis: 100%;
+	height: 5px;
+	&.warn {
+		&::-moz-progress-bar {
+			background: $color-error;
+		}
+		&::-webkit-progress-value {
+			background: $color-error;
+		}
+	}
+	&::-webkit-progress-bar {
+		background: transparent;
+	}
+	&::-moz-progress-bar {
+		border-radius: 3px;
+		background: $color-primary;
+		transition: 250ms all ease-in-out;
+	}
+	&::-webkit-progress-value {
+		border-radius: 3px;
+		background: $color-primary;
+		transition: 250ms all ease-in-out;
+	}
+}
+
 /* Animation */
 @keyframes shake {
 	10%,
diff --git a/core/css/styles.scss b/core/css/styles.scss
index be0b200ce35..4a47d192ef4 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -930,26 +930,31 @@ code {
 	margin: 30px !important;
 	position: relative;
 	padding: 0 !important;
+	progress {
+		height: 36px;
+	}
 	div {
-		padding: 0;
-		background-color: nc-darken($color-main-background, 10%);
 		font-weight: normal;
 		white-space: nowrap;
-		border-bottom-left-radius: 3px;
-		border-top-left-radius: 3px;
-		min-width: 1%;
-		max-width: 100%;
+		position: absolute;;
+		top: 0;
+		&.quota-warning {
+			background-color: $color-warning;
+		}
+		&.quotatext-bg {
+			mix-blend-mode: luminosity;
+		}
+		&.quotatext-fg {
+			color: $color-primary-text;
+			overflow: hidden;
+			z-index: 50;
+		}
+		.quotatext {
+			padding: .6em 1em;
+		}
 	}
 }
 
-#quotatext {
-	padding: .6em 1em;
-}
-
-#quota div.quota-warning {
-	background-color: $color-warning;
-}
-
 .pager {
 	list-style: none;
 	float: right;