Improved mobile layout for landscape. Oneline header.

cista-front/src/components/BreadCrumb.vue

@@ -32,22 +32,21 @@ const props = defineProps<{
   padding: 0 1em 0 0;
 }
 .breadcrumb > a {
-  margin: 0 -0.7rem 0 -0.7rem;
+  margin: 0 -0.5em 0 -0.5em;
   padding: 0;
-  max-width: 8rem;
-  font-size: 1.3rem;
+  max-width: 8em;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  height: 1.5rem;
+  height: 1.5em;
   color: var(--breadcrumb-color);
-  padding: 0.3rem 1.5rem;
-  clip-path: polygon(0 0, 1rem 50%, 0 100%, 100% 100%, 100% 0, 0 0);
+  padding: 0.3em 1.5em;
+  clip-path: polygon(0 0, 1em 50%, 0 100%, 100% 100%, 100% 0, 0 0);
   transition: all var(--breadcrumb-transtime);
 }
 .breadcrumb a:first-child {
   margin-left: 0;
-  padding-left: .2rem;
+  padding-left: .2em;
   clip-path: none;
 }
 .breadcrumb a:last-child {
@@ -74,9 +73,9 @@ const props = defineProps<{
 }
 .breadcrumb svg {
   /* FIXME: Custom positioning to align it well; needs proper solution */
-  padding-left: 0.6rem;
-  width: 1.3rem;
-  height: 1.3rem;
+  padding-left: 0.8em;
+  width: 1.3em;
+  height: 1.3em;
   fill: var(--breadcrumb-color);
   transition: fill var(--breadcrumb-transtime);
 }

cista-front/src/components/FileExplorer.vue

@@ -356,9 +356,9 @@ tbody tr {
 }
 table thead input[type='checkbox'] {
   position: inherit;
-  width: 1rem;
-  height: 1rem;
-  padding: 0.5rem;
+  width: 1em;
+  height: 1em;
+  padding: 0.5rem 0.5em;
 }
 table tbody input[type='checkbox'] {
   width: 2rem;
@@ -366,7 +366,6 @@ table tbody input[type='checkbox'] {
 }
 table .selection {
   width: 2rem;
-  height: 2rem;
   text-align: center;
   text-overflow: clip;
 }
@@ -429,18 +428,18 @@ tbody tr.cursor {
   color: var(--accent-color);
 }
 .sortcolumn {
-  padding-right: 1.7em;
+  padding-right: 1.5rem;
 }
 .sortcolumn::after {
   content: '▸';
   color: #888;
-  margin: 0 1em 0 0.5em;
+  margin-left: 0.5em;
   position: absolute;
   transition: all var(--transition-time) linear;
 }
 .sortactive::after {
   transform: rotate(90deg);
-  color: #000;
+  color: var(--accent-color);
 }
 .name a {
   text-decoration: none;

cista-front/src/components/HeaderMain.vue

@@ -57,7 +57,7 @@ defineExpose({
   padding: 0;
   display: flex;
   align-items: center;
-  height: 3.5rem;
+  height: 3.5em;
   z-index: 10;
 }
 .buttons > * {
@@ -70,10 +70,10 @@ input[type='search'] {
   background: var(--primary-background);
   color: var(--primary-color);
   border: 0;
-  border-radius: 0.1rem;
-  padding: 0.5rem;
+  border-radius: 0.1em;
+  padding: 0.5em;
   outline: none;
-  font-size: 1.5rem;
+  font-size: 1.5em;
   max-width: 30vw;
 }
 </style>

cista-front/src/components/SvgButton.vue

@@ -22,9 +22,9 @@ const icon = defineAsyncComponent(() => import(`@/assets/svg/${props.name}.svg`)
   color: #ccc;
   cursor: pointer;
   transition: all 0.2s ease;
-  padding: 0.2rem;
-  width: 3rem;
-  height: 3rem;
+  padding: 0.2em;
+  width: 3em;
+  height: 3em;
 }
 .action-button:hover,
 .action-button:focus {