Some more fixes

Signed-off-by: Julius Härtl <jus@bitgrid.net>

1 files changed, 21 insertions, 15 deletions

diff --git a/core/css/apps.css b/core/css/apps.css
index 0e4e1759b5c..0a1ff5a344f 100644
--- a/core/css/apps.css
+++ b/core/css/apps.css
@@ -92,14 +92,14 @@ html {
   background-color: var(--color-primary);
   background-image: var(--image-main-background);
   background-size: cover;
-  background-position: top center;
+  background-position: center;
 }
 
 body {
   background-color: var(--color-primary);
   background-image: var(--image-main-background);
   background-size: cover;
-  background-position: top center;
+  background-position: center;
   position: fixed;
   width: 100%;
   height: calc(100vh - env(safe-area-inset-bottom));
@@ -175,7 +175,6 @@ kbd {
   -webkit-user-select: none;
   position: sticky;
   height: 100%;
-  padding: calc(var(--default-grid-baseline) * 2);
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
@@ -208,7 +207,7 @@ kbd {
 }
 #app-navigation:not(.vue) .app-navigation-new {
   display: block;
-  padding: 10px;
+  padding: calc(var(--default-grid-baseline) * 2);
 }
 #app-navigation:not(.vue) .app-navigation-new button {
   display: inline-block;
@@ -231,8 +230,13 @@ kbd {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  padding: calc(var(--default-grid-baseline) * 2);
+  padding-bottom: 0;
   /* Menu and submenu */
 }
+#app-navigation:not(.vue) > ul:last-child {
+  padding-bottom: calc(var(--default-grid-baseline) * 2);
+}
 #app-navigation:not(.vue) > ul > li {
   display: inline-flex;
   flex-wrap: wrap;
@@ -379,7 +383,6 @@ kbd {
   text-overflow: ellipsis;
   border-radius: var(--border-radius-pill);
   color: var(--color-main-text);
-  opacity: 0.8;
   flex: 1 1 0px;
   z-index: 100;
   /* above the bullet to allow click*/
@@ -775,7 +778,9 @@ kbd {
 
 #app-settings-content {
   display: none;
-  padding: 10px;
+  padding: calc(var(--default-grid-baseline) * 2);
+  padding-top: 0;
+  padding-left: calc(var(--default-grid-baseline) * 4);
   /* restrict height of settings and make scrollable */
   max-height: 300px;
   overflow-y: auto;
@@ -799,7 +804,9 @@ kbd {
   box-sizing: border-box;
   background-color: transparent;
   overflow: hidden;
-  border-radius: var(--border-radius-pill);
+  border-radius: calc(var(--default-clickable-area) / 2);
+  padding: calc(var(--default-grid-baseline) * 2);
+  padding-top: 0;
 }
 
 #app-settings-header .settings-button {
@@ -809,10 +816,10 @@ kbd {
   width: 100%;
   padding: 0;
   margin: 0;
-  background-color: transparent;
+  background-color: var(--color-main-background);
   box-shadow: none;
   border: 0;
-  border-radius: var(--border-radius-pill);
+  border-radius: calc(var(--default-clickable-area) / 2);
   text-align: left;
   font-weight: normal;
   font-size: 100%;
@@ -1052,13 +1059,12 @@ kbd {
   cursor: pointer;
   line-height: 44px;
   border: 0;
-  border-radius: var(--border-radius-large);
+  border-radius: 0;
   background-color: transparent;
   display: flex;
   align-items: flex-start;
   height: auto;
   margin: 0;
-  margin-bottom: 2px;
   font-weight: normal;
   box-shadow: none;
   width: 100%;
@@ -1500,14 +1506,14 @@ kbd {
 /* CONTENT LIST ------------------------------------------------------------ */
 .app-content-list {
   position: -webkit-sticky;
-  position: sticky;
-  top: 50px;
+  position: relative;
+  top: 0;
   border-right: 1px solid var(--color-border);
   display: flex;
   flex-direction: column;
   transition: transform 250ms ease-in-out;
-  min-height: calc(100vh - 50px);
-  max-height: calc(100vh - 50px);
+  min-height: 100%;
+  max-height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
   flex: 1 1 200px;