upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-05-28 04:32:30 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 54

feat(theming): Provide body-container- variables through theming

Browse source 
* Provide the body container height, radius and margin as theming variables.
* Remove unused old variables (`header-menu-profile-item-height` and `list-max-width`)
* Fix comment about breakpoint JS location

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
This commit is contained in:
Ferdinand Thiessen 2024-07-02 22:29:43 +02:00
parent 7e663301ff
commit c9e8cdd7ad
3 changed files with 24 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
apps/theming/css/default.css
View file

@ -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%);

18
apps/theming/lib/Themes/DefaultTheme.php
View file

@ -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%)',

15
core/css/apps.scss
View file

@ -7,20 +7,11 @@
@use 'sass:math';
@import 'functions';
:root {
/* - 2px is required for making it look nice */
--border-radius-rounded: calc(var(--default-clickable-area) / 2 + var(--default-grid-baseline) * 2 - 2px);
--body-container-radius: calc(var(--default-grid-baseline) * 3);
--body-container-margin: calc(var(--default-grid-baseline) * 2);
--body-height: calc(100% - env(safe-area-inset-bottom) - 50px - var(--body-container-margin));
}
@media screen and (max-width: variables.$breakpoint-mobile) {
// Make the body full width on mobile
:root {
--body-container-margin: 0px;
--body-container-radius: 0px;
--body-container-margin: 0px !important;
--body-container-radius: 0px !important;
}
}