From e4113b17798dec870954d2d52da076691d9ac51e Mon Sep 17 00:00:00 2001 From: =?utf8?q?Julius=20H=C3=A4rtl?= Date: Wed, 24 Aug 2022 17:18:55 +0200 Subject: [PATCH] Adapt layout to new base css variables MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- apps/theming/lib/Themes/DefaultTheme.php | 2 ++ core/css/apps.scss | 13 ++++++------- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php index 42b335dbe08..56348069ff4 100644 --- a/apps/theming/lib/Themes/DefaultTheme.php +++ b/apps/theming/lib/Themes/DefaultTheme.php @@ -173,7 +173,9 @@ class DefaultTheme implements ITheme { // pill-style button, value is large so big buttons also have correct roundness '--border-radius-pill' => '100px', + '--default-clickable-area' => '44px', '--default-line-height' => '24px', + '--default-grid-baseline' => '4px', // various structure data '--header-height' => '50px', diff --git a/core/css/apps.scss b/core/css/apps.scss index bb6edfc0041..cb2cec662a4 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -21,8 +21,9 @@ :root { - --body-container-margin: 8px; - --body-container-radius: var(--border-radius-large); + --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); --body-height: calc(100% - env(safe-area-inset-bottom) - 50px - var(--body-container-margin)); } @@ -125,7 +126,7 @@ kbd { -webkit-backdrop-filter: var(--filter-background-blur); -webkit-user-select: none; position: sticky; height: 100%; - padding: 6px; + padding: calc(var(--default-grid-baseline) * 2); -moz-user-select: none; -ms-user-select: none; user-select: none; @@ -166,11 +167,9 @@ kbd { flex-wrap: wrap; order: 1; flex-shrink: 0; - margin-left: 8px; - margin-right: 8px; - margin-top: 3px; + margin: 0; margin-bottom: 3px; - width: calc(100% - 16px); + width: 100%; overflow: hidden; border-radius: var(--border-radius-pill); -- 2.39.5