margin: 0;
}
-#host-controls .change {
- display: none;
-}
-
-#host-controls.editing .view {
- display: none;
-}
-
-#host-controls.editing .change {
- display: initial;
-}
-
.path.breadcrumb > li + li::before {
content: "› ";
}
#spinner-overlay {
- background: url('/static/filex/spinner.gif') white center 100px no-repeat;
+ background: url('/static/filex/spinner.gif') white center center no-repeat fixed;
opacity: 0.5;
position: absolute;
top: 0;
.busy #spinner-overlay {
display: initial;
}
+
+#filex nav {
+ display: flex;
+ flex-flow: row wrap;
+}
+
+#host {
+ flex: 1 auto;
+ margin-right: 10px;
+ white-space: nowrap;
+}
+
+#controls {
+ flex: 0 auto;
+ margin-bottom: 5px;
+ white-space: nowrap;
+}
+
+#path {
+ flex: 1 100%;
+}
+
+@media (min-width: 768px) {
+ #host {
+ order: 1;
+ flex: 0 auto;
+ margin-right: 10px;
+ }
+
+ #path {
+ order: 2;
+ flex: 10 auto;
+ margin-top: -1px;
+ margin-right: 10px;
+ }
+
+ #controls {
+ order: 3;
+ flex: 0 auto;
+ }
+}
+
+#host .list {
+ display: none;
+}
+
+#host.edit .list {
+ display: initial;
+}
+
+#host.edit #btn-host {
+ display: none;
+}
+
+#host .selectize-control {
+ min-width: 200px;
+}
+
+#host .selectize-input {
+ padding-right: 32px;
+}