feat(theming): Add border radius rounded css variable so `body-container-radius` can be used on mobile devices

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

apps/theming/css/default.css

@@ -42,6 +42,7 @@
   --animation-slow: 300ms;
   --border-radius: 3px;
   --border-radius-large: 10px;
+  --border-radius-rounded: 28px;
   --border-radius-pill: 100px;
   --default-clickable-area: 44px;
   --default-line-height: 24px;

apps/theming/lib/Themes/DefaultTheme.php

@@ -172,6 +172,7 @@ class DefaultTheme implements ITheme {
 			// Default variables --------------------------------------------
 			'--border-radius' => '3px',
 			'--border-radius-large' => '10px',
+			'--border-radius-rounded' => '28px',
 			// pill-style button, value is large so big buttons also have correct roundness
 			'--border-radius-pill' => '100px',
 

core/css/apps.scss

@@ -21,9 +21,11 @@
 
 
 :root {
-	--body-container-margin: calc(var(--default-grid-baseline) * 2);
 	/* - 2px is required for making it look nice */
-	--body-container-radius: calc(var(--default-clickable-area) / 2 + var(--default-grid-baseline) * 2 - 2px);
+	--border-radius-rounded: calc(var(--default-clickable-area) / 2 + var(--default-grid-baseline) * 2 - 2px);
+
+	--body-container-radius: var(--border-radius-rounded);
+	--body-container-margin: calc(var(--default-grid-baseline) * 2);
 	--body-height: calc(100% - env(safe-area-inset-bottom) - 50px - var(--body-container-margin));
 }
 

core/css/guest.scss

@@ -797,7 +797,7 @@ a.legal {
 	color: var(--color-main-text);
 	background-color: var(--color-main-background);
 	padding: $guest-container-padding;
-	border-radius: var(--body-container-radius);
+	border-radius: var(--border-radius-rounded);
 	box-shadow: 0 0 10px var(--color-box-shadow);
 	display: inline-block;
 }