Merge pull request #6669 from nextcloud/various-css-fixes

Various css fixes

5 files changed, 68 insertions, 23 deletions

diff --git a/core/css/apps.scss b/core/css/apps.scss
index b735dfa4d64..08bbc3ed3b2 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -610,6 +610,7 @@ kbd {
 	border-right: 1px solid $color-border;
 	width: 250px;
 	box-sizing: border-box;
+	background-color: $color-main-background;
 }
 
 .settings-button {
@@ -753,7 +754,7 @@ kbd {
 	margin: 5px;
 	margin-top: -5px;
 	right: 0;
-	box-shadow: 0 1px 10px $color-box-shadow;
+	filter: drop-shadow(0 1px 3px $color-box-shadow);
 	display: none;
 
 	&:after {
diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index 5fe65935ec5..832ccdebaa6 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,40 @@ 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;
+	overflow: hidden;
+	&.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..33618d34117 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -925,31 +925,42 @@ code {
 	font-family: 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', monospace;
 }
 
-#quota {
+#body-settings #quota {
 	cursor: default;
 	margin: 30px !important;
 	position: relative;
 	padding: 0 !important;
+	progress {
+		height: 36px;
+		&::-moz-progress-bar {
+			border-radius: 3px 0 0 3px;
+		}
+		&::-webkit-progress-value {
+			border-radius: 3px 0 0 3px;
+		}
+	}
 	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;
diff --git a/core/js/apps.js b/core/js/apps.js
index 4daab5ce4c4..8aebbbd418c 100644
--- a/core/js/apps.js
+++ b/core/js/apps.js
@@ -78,11 +78,15 @@
 					area.slideUp(OC.menuSpeed*4, function() {
 						area.trigger(new $.Event('hide'));
 					});
+					area.removeClass('opened');
+					$(button).removeClass('opened');
 				}
 				function showArea() {
 					area.slideDown(OC.menuSpeed*4, function() {
 						area.trigger(new $.Event('show'));
 					});
+					area.addClass('opened');
+					$(button).addClass('opened');
 					var input = $(areaSelector + ' [autofocus]');
 					if (input.length === 1) {
 						input.focus();
diff --git a/core/js/singleselect.js b/core/js/singleselect.js
index cd0dd52651a..94f7da82640 100644
--- a/core/js/singleselect.js
+++ b/core/js/singleselect.js
@@ -42,7 +42,6 @@
 						input.tipsy({gravity: gravity, trigger: 'manual'});
 						input.tipsy('show');
 					}
-					select.css('background-color', 'white');
 					input.focus();
 				}
 			});