5 files changed, 201 insertions, 103 deletions
diff --git a/apps/files_external/css/external.css b/apps/files_external/css/external.css
deleted file mode 100644
index bf57ec88053..00000000000
--- a/apps/files_external/css/external.css
+++ /dev/null
@@ -1,8 +0,0 @@
-#filestable tbody tr.externalDisabledRow {
-	background-color: #CCC;
-}
-
-
-#filestable tbody tr.externalErroredRow {
-	background-color: #F2DEDE;
-}
diff --git a/apps/files_external/css/settings.css b/apps/files_external/css/settings.css
index 9338b8d3ee7..2542c8007e9 100644
--- a/apps/files_external/css/settings.css
+++ b/apps/files_external/css/settings.css
@@ -1,95 +1,4 @@
-#externalStorage td.status {
-	/* overwrite conflicting core styles */
-	display: table-cell;
-	vertical-align: middle;
-}
-
-#externalStorage td.status > span {
-	display: inline-block;
-	height: 16px;
-	width: 16px;
-	vertical-align: text-bottom;
-}
-
-td.mountPoint, td.backend { width:160px; }
-#externalStorage td>img { padding-top:7px; opacity: 0.5; }
-#externalStorage td>img:hover { padding-top:7px; cursor:pointer; opacity: 1; }
-#addMountPoint>td { border:none; }
-#addMountPoint>td.applicable { visibility:hidden; }
-#addMountPoint>td.hidden { visibility:hidden; }
-
-#selectBackend {
-	margin-left: -10px;
-	width: 150px;
-}
-
-#externalStorage td.configuration,
-#externalStorage td.backend {
-	white-space: normal;
-}
-#externalStorage td.configuration > * {
-	white-space: nowrap;
-}
-
-#externalStorage td.configuration input.added  {
-	margin-right: 6px;
-}
-
-#externalStorage label > input[type="checkbox"] {
-	margin-right: 3px;
-}
-
-#externalStorage td.configuration label {
-	min-width: 144px; /* 130px plus 2x7px padding */
-	display: inline-block;
-	margin-right: 6px;
-}
-
-
-#externalStorage td.applicable div.chzn-container {
-	position: relative;
-	top: 3px;
-}
-
-#externalStorage td.status .success {
-	border-radius: 50%;
-}
-
-#userMountingBackends {
-	padding-left: 25px;
-}
-
-#body-settings .select2-results .select2-result-label {
-	height: 32px;
-	padding: 3px;
-}
-.select2-results .select2-result-label > span {
-	display: block;
-	position: relative;
-}
-.select2-results .select2-result-label .avatardiv {
-	display:inline-block;
-}
-.select2-results .select2-result-label .avatardiv + span {
-	position: absolute;
-	top: 5px;
-	margin-left: 10px;
-}
-.select2-results .select2-result-label .avatardiv[data-type="group"] + span {
-	vertical-align: top;
-	top: 6px;
-	position: absolute;
-	max-width: 80%;
-	left: 30px;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-}
-
-#externalStorage .mountOptionsToggle .dropdown {
-	width: auto;
-}
-
-#externalStorage .mountOptionsDropdown {
-	margin-right: 40px;
-}
+/*!
+ * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */#files_external{margin-bottom:0px}#externalStorage{margin:15px 0 20px 0}#externalStorage tr.externalStorageLoading>td{text-align:center}#externalStorage td{height:50px}#externalStorage td.mountOptionsToggle,#externalStorage td.remove,#externalStorage td.save{position:relative;padding:0 !important;width:44px}#externalStorage td.mountOptionsToggle [class^=icon-],#externalStorage td.mountOptionsToggle [class*=" icon-"],#externalStorage td.remove [class^=icon-],#externalStorage td.remove [class*=" icon-"],#externalStorage td.save [class^=icon-],#externalStorage td.save [class*=" icon-"]{width:44px;height:44px;margin:3px;opacity:.5;padding:14px;vertical-align:text-bottom;cursor:pointer}#externalStorage td.mountOptionsToggle [class^=icon-]:hover,#externalStorage td.mountOptionsToggle [class*=" icon-"]:hover,#externalStorage td.remove [class^=icon-]:hover,#externalStorage td.remove [class*=" icon-"]:hover,#externalStorage td.save [class^=icon-]:hover,#externalStorage td.save [class*=" icon-"]:hover{opacity:1}#externalStorage td.mountPoint,#externalStorage td.backend,#externalStorage td.authentication,#externalStorage td.configuration{min-width:160px;width:15%}#externalStorage td.status{display:table-cell;vertical-align:middle;width:43px}#externalStorage td.status>span{display:inline-block;height:28px;width:28px;vertical-align:text-bottom;border-radius:50%;cursor:pointer}#externalStorage td>input:not(.applicableToAllUsers),#externalStorage td>select{width:100%}#externalStorage td>img{padding-top:7px;opacity:.5}#externalStorage td>img:hover{cursor:pointer;opacity:1}#externalStorage .popovermenu li>.menuitem{width:fit-content !important}#addMountPoint>td{border:none}#addMountPoint>td.applicable{visibility:hidden}#addMountPoint>td.hidden{visibility:hidden}#selectBackend{margin-inline-start:-10px;width:150px}#externalStorage td.configuration,#externalStorage td.backend{white-space:normal}#externalStorage td.configuration>*{white-space:nowrap}#externalStorage td.configuration input.added{margin-inline-end:6px}#externalStorage label>input[type=checkbox]{margin-inline-end:3px}#externalStorage td.configuration label{width:100%;display:inline-flex;align-items:center}#externalStorage td.configuration input.disabled-success{background-color:rgba(134,255,110,.9)}#externalStorage td.applicable label{display:inline-flex;align-items:center}#externalStorage td.applicable div.chzn-container{position:relative;top:3px}#externalStorage .select2-container.applicableUsers{width:100% !important}#userMountingBackends{padding-inline-start:25px}.files-external-select2 .select2-results .select2-result-label{height:32px;padding:3px}.files-external-select2 .select2-results .select2-result-label>span{display:block;position:relative}.files-external-select2 .select2-results .select2-result-label .avatardiv{display:inline-block}.files-external-select2 .select2-results .select2-result-label .avatardiv+span{position:absolute;top:5px;margin-inline-start:10px}.files-external-select2 .select2-results .select2-result-label .avatardiv[data-type=group]+span{vertical-align:top;top:6px;position:absolute;max-width:80%;inset-inline-start:30px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#externalStorage .select2-container .select2-search-choice{display:flex}#externalStorage .select2-container .select2-search-choice .select2-search-choice-close{display:block;inset-inline-start:auto;position:relative;width:20px}#externalStorage .mountOptionsToggle .dropdown{width:auto}.nav-icon-external-storage{background-image:var(--icon-external-dark)}.global_credentials__personal{margin:10px auto;text-align:center;width:min(400px,100vw)}/*# sourceMappingURL=settings.css.map */
diff --git a/apps/files_external/css/settings.css.map b/apps/files_external/css/settings.css.map
new file mode 100644
index 00000000000..8bbd1e75612
--- /dev/null
+++ b/apps/files_external/css/settings.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["settings.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GAIA,gBACC,kBAGD,iBACC,qBAEA,8CACC,kBAGD,oBACC,YAEA,2FAGC,kBACA,qBACA,WACA,yRAEC,WACA,YACA,WACA,WACA,aACA,2BACA,eACA,6TACC,UAKH,gIAIC,gBACA,UAGD,2BAEC,mBACA,sBAEA,WAEA,gCACC,qBACA,YACA,WACA,2BACA,kBACA,eAIF,gFACC,WAGD,wBACC,gBACA,WAEA,8BACC,eACA,UAKH,2CACC,6BAIF,8BAEA,+CAEA,2CAEA,eACC,0BACA,YAGD,8DAEC,mBAGD,oCACC,mBAGD,8CACC,sBAGD,4CACC,sBAGD,wCACC,WACA,oBACA,mBAGD,yDACC,sCAGD,qCACC,oBACA,mBAGD,kDACC,kBACA,QAGD,oDACC,sBAGD,sBACC,0BAGD,+DACC,YACA,YAGD,oEACC,cACA,kBAGD,0EACC,qBAGD,+EACC,kBACA,QACA,yBAGD,gGACC,mBACA,QACA,kBACA,cACA,wBACA,uBACA,mBACA,gBAGD,2DACC,aACA,wFACC,cACA,wBACA,kBACA,WAIF,+CACC,WAGD,2BACC,2CAGD,8BACI,iBACA,kBACA","file":"settings.css"}
+\ No newline at end of file
diff --git a/apps/files_external/css/settings.css.map.license b/apps/files_external/css/settings.css.map.license
new file mode 100644
index 00000000000..3e87d1c6a63
--- /dev/null
+++ b/apps/files_external/css/settings.css.map.license
@@ -0,0 +1,2 @@
+SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
+SPDX-License-Identifier: AGPL-3.0-or-later
diff --git a/apps/files_external/css/settings.scss b/apps/files_external/css/settings.scss
new file mode 100644
index 00000000000..f83c74a9122
--- /dev/null
+++ b/apps/files_external/css/settings.scss
@@ -0,0 +1,194 @@
+/*!
+ * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+#files_external {
+	margin-bottom: 0px;
+}
+
+#externalStorage {
+	margin: 15px 0 20px 0;
+
+	tr.externalStorageLoading > td {
+		text-align: center;
+	}
+
+	td {
+		height: 50px;
+
+		&.mountOptionsToggle,
+		&.remove,
+		&.save {
+			position: relative;
+			padding: 0 !important;
+			width: 44px;
+			[class^='icon-'],
+			[class*=' icon-'] {
+				width: 44px;
+				height: 44px;
+				margin: 3px;
+				opacity: 0.5;
+				padding: 14px;
+				vertical-align: text-bottom;
+				cursor: pointer;
+				&:hover {
+					opacity: 1;
+				}
+			}
+		}
+
+		&.mountPoint,
+		&.backend,
+		&.authentication,
+		&.configuration {
+			min-width: 160px;
+			width: 15%;
+		}
+
+		&.status {
+			/* overwrite conflicting core styles */
+			display: table-cell;
+			vertical-align: middle;
+			/* ensure width does not change even if internal span is not displayed */
+			width: 43px;
+
+			> span {
+				display: inline-block;
+				height: 28px;
+				width: 28px;
+				vertical-align: text-bottom;
+				border-radius: 50%;
+				cursor: pointer;
+			}
+		}
+
+		> input:not(.applicableToAllUsers), & > select {
+			width: 100%;
+		}
+
+		> img {
+			padding-top: 7px;
+			opacity: 0.5;
+
+			&:hover {
+				cursor:pointer;
+				opacity: 1;
+			}
+		}
+	}
+
+	.popovermenu li > .menuitem {
+		width: fit-content !important;
+	}
+}
+
+#addMountPoint>td { border:none; }
+
+#addMountPoint>td.applicable { visibility:hidden; }
+
+#addMountPoint>td.hidden { visibility:hidden; }
+
+#selectBackend {
+	margin-inline-start: -10px;
+	width: 150px;
+}
+
+#externalStorage td.configuration,
+#externalStorage td.backend {
+	white-space: normal;
+}
+
+#externalStorage td.configuration > * {
+	white-space: nowrap;
+}
+
+#externalStorage td.configuration input.added  {
+	margin-inline-end: 6px;
+}
+
+#externalStorage label > input[type="checkbox"] {
+	margin-inline-end: 3px;
+}
+
+#externalStorage td.configuration label {
+	width: 100%;
+	display: inline-flex;
+	align-items: center;
+}
+
+#externalStorage td.configuration input.disabled-success {
+	background-color: rgba(134, 255, 110, 0.9);
+}
+
+#externalStorage td.applicable label {
+	display: inline-flex;
+	align-items: center;
+}
+
+#externalStorage td.applicable div.chzn-container {
+	position: relative;
+	top: 3px;
+}
+
+#externalStorage .select2-container.applicableUsers {
+	width: 100% !important;
+}
+
+#userMountingBackends {
+	padding-inline-start: 25px;
+}
+
+.files-external-select2 .select2-results .select2-result-label {
+	height: 32px;
+	padding: 3px;
+}
+
+.files-external-select2 .select2-results .select2-result-label > span {
+	display: block;
+	position: relative;
+}
+
+.files-external-select2 .select2-results .select2-result-label .avatardiv {
+	display:inline-block;
+}
+
+.files-external-select2 .select2-results .select2-result-label .avatardiv + span {
+	position: absolute;
+	top: 5px;
+	margin-inline-start: 10px;
+}
+
+.files-external-select2 .select2-results .select2-result-label .avatardiv[data-type="group"] + span {
+	vertical-align: top;
+	top: 6px;
+	position: absolute;
+	max-width: 80%;
+	inset-inline-start: 30px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+#externalStorage .select2-container .select2-search-choice {
+	display: flex;
+	.select2-search-choice-close {
+		display: block;
+		inset-inline-start: auto;
+		position: relative;
+		width: 20px;
+	}
+}
+
+#externalStorage .mountOptionsToggle .dropdown {
+	width: auto;
+}
+
+.nav-icon-external-storage {
+	background-image: var(--icon-external-dark);
+}
+
+.global_credentials__personal {
+    margin: 10px auto;
+    text-align: center;
+    width: min(400px, 100vw);
+}