diff options
| author | Ferdinand Thiessen <opensource@fthiessen.de> | 2024-07-07 14:24:36 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-07-07 14:24:36 +0200 |
| commit | 03b1918c5852af63cb419a1cdf04e0ae499a0403 (patch) | |
| tree | 8f3ce8a5ed9d564e760f5be6728ab01187c71e6b /apps/theming | |
| parent | 2cbb7f488ab1c336c0cfb546f355ccf71e542e6e (diff) | |
| parent | 6ef88de0b44646e10ba56b1a6c13a5b09f5c0c07 (diff) | |
| download | nextcloud-server-03b1918c5852af63cb419a1cdf04e0ae499a0403.tar.gz nextcloud-server-03b1918c5852af63cb419a1cdf04e0ae499a0403.zip | |
Merge pull request #46259 from nextcloud/feat/provide-body-container
feat(theming): Provide `body-container-` variables through theming
Diffstat (limited to 'apps/theming')
| -rw-r--r-- | apps/theming/css/default.css | 14 | ||||
| -rw-r--r-- | apps/theming/lib/Themes/DefaultTheme.php | 18 |
2 files changed, 21 insertions, 11 deletions
diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css index 3a3e0770118..0ce34bc7a02 100644 --- a/apps/theming/css/default.css +++ b/apps/theming/css/default.css @@ -49,6 +49,8 @@ --color-border-maxcontrast: #7d7d7d; --font-face: system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --default-font-size: 15px; + /* 1.5 x font-size for accessibility */ + --default-line-height: 24px; --animation-quick: 100ms; --animation-slow: 300ms; /** Border width for input elements such as text fields and selects */ @@ -63,16 +65,18 @@ --default-clickable-area: 34px; --clickable-area-large: 48px; --clickable-area-small: 24px; - --default-line-height: 24px; --default-grid-baseline: 4px; --header-height: 50px; + --header-menu-item-height: 44px; --navigation-width: 300px; --sidebar-min-width: 300px; --sidebar-max-width: 500px; - --list-min-width: 200px; - --list-max-width: 300px; - --header-menu-item-height: 44px; - --header-menu-profile-item-height: 66px; + /* Border radius of the body container */ + --body-container-radius: calc(var(--default-grid-baseline) * 3); + /* Margin of the body container */ + --body-container-margin: calc(var(--default-grid-baseline) * 2); + /* Height of the body container to fully fill the view port */ + --body-height: calc(100% - env(safe-area-inset-bottom) - var(--header-height) - var(--body-container-margin)); --breakpoint-mobile: 1024px; --background-invert-if-dark: no; --background-invert-if-bright: invert(100%); diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php index e81c01f1f83..9c093969e76 100644 --- a/apps/theming/lib/Themes/DefaultTheme.php +++ b/apps/theming/lib/Themes/DefaultTheme.php @@ -160,6 +160,8 @@ class DefaultTheme implements ITheme { '--font-face' => "system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'", '--default-font-size' => '15px', + // 1.5 * font-size for accessibility + '--default-line-height' => '24px', // TODO: support "(prefers-reduced-motion)" '--animation-quick' => '100ms', @@ -179,20 +181,24 @@ class DefaultTheme implements ITheme { '--default-clickable-area' => '34px', '--clickable-area-large' => '48px', '--clickable-area-small' => '24px', - '--default-line-height' => '24px', + '--default-grid-baseline' => '4px', // various structure data '--header-height' => '50px', + '--header-menu-item-height' => '44px', '--navigation-width' => '300px', '--sidebar-min-width' => '300px', '--sidebar-max-width' => '500px', - '--list-min-width' => '200px', - '--list-max-width' => '300px', - '--header-menu-item-height' => '44px', - '--header-menu-profile-item-height' => '66px', - // mobile. Keep in sync with core/js/js.js + // Border radius of the body container + '--body-container-radius' => 'calc(var(--default-grid-baseline) * 3)', + // Margin of the body container + '--body-container-margin' => 'calc(var(--default-grid-baseline) * 2)', + // Height of the body container to fully fill the view port + '--body-height' => 'calc(100% - env(safe-area-inset-bottom) - var(--header-height) - var(--body-container-margin))', + + // mobile. Keep in sync with core/src/init.js '--breakpoint-mobile' => '1024px', '--background-invert-if-dark' => 'no', '--background-invert-if-bright' => 'invert(100%)', |