nextcloud /
server
@@ -20,214 +20,214 @@ |
||
| 20 | 20 | use OCP\IUserSession; |
| 21 | 21 | |
| 22 | 22 | class DefaultTheme implements ITheme { |
| 23 | - use CommonThemeTrait; |
|
| 24 | - |
|
| 25 | - public string $defaultPrimaryColor; |
|
| 26 | - public string $primaryColor; |
|
| 27 | - |
|
| 28 | - public function __construct( |
|
| 29 | - public Util $util, |
|
| 30 | - public ThemingDefaults $themingDefaults, |
|
| 31 | - public IUserSession $userSession, |
|
| 32 | - public IURLGenerator $urlGenerator, |
|
| 33 | - public ImageManager $imageManager, |
|
| 34 | - public IConfig $config, |
|
| 35 | - public IL10N $l, |
|
| 36 | - public IAppManager $appManager, |
|
| 37 | - private ?IRequest $request, |
|
| 38 | - ) { |
|
| 39 | - $this->defaultPrimaryColor = $this->themingDefaults->getDefaultColorPrimary(); |
|
| 40 | - $this->primaryColor = $this->themingDefaults->getColorPrimary(); |
|
| 41 | - } |
|
| 42 | - |
|
| 43 | - public function getId(): string { |
|
| 44 | - return 'default'; |
|
| 45 | - } |
|
| 46 | - |
|
| 47 | - public function getType(): int { |
|
| 48 | - return ITheme::TYPE_THEME; |
|
| 49 | - } |
|
| 50 | - |
|
| 51 | - public function getTitle(): string { |
|
| 52 | - return $this->l->t('System default theme'); |
|
| 53 | - } |
|
| 54 | - |
|
| 55 | - public function getEnableLabel(): string { |
|
| 56 | - return $this->l->t('Enable the system default'); |
|
| 57 | - } |
|
| 58 | - |
|
| 59 | - public function getDescription(): string { |
|
| 60 | - return $this->l->t('Using the default system appearance.'); |
|
| 61 | - } |
|
| 62 | - |
|
| 63 | - public function getMediaQuery(): string { |
|
| 64 | - return ''; |
|
| 65 | - } |
|
| 66 | - |
|
| 67 | - public function getMeta(): array { |
|
| 68 | - return []; |
|
| 69 | - } |
|
| 70 | - |
|
| 71 | - public function getCSSVariables(): array { |
|
| 72 | - $colorMainText = '#222222'; |
|
| 73 | - $colorMainTextRgb = join(',', $this->util->hexToRGB($colorMainText)); |
|
| 74 | - // Color that still provides enough contrast for text, so we need a ratio of 4.5:1 on main background AND hover |
|
| 75 | - $colorTextMaxcontrast = '#6b6b6b'; // 4.5 : 1 for hover background and background dark |
|
| 76 | - $colorMainBackground = '#ffffff'; |
|
| 77 | - $colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground)); |
|
| 78 | - $colorBoxShadow = $this->util->darken($colorMainBackground, 70); |
|
| 79 | - $colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow)); |
|
| 80 | - |
|
| 81 | - $colorError = '#DB0606'; |
|
| 82 | - $colorWarning = '#A37200'; |
|
| 83 | - $colorSuccess = '#2d7b41'; |
|
| 84 | - $colorInfo = '#0071ad'; |
|
| 85 | - |
|
| 86 | - $user = $this->userSession->getUser(); |
|
| 87 | - // Chromium based browsers currently (2024) have huge performance issues with blur filters |
|
| 88 | - $isChromium = $this->request !== null && $this->request->isUserAgent([Request::USER_AGENT_CHROME, Request::USER_AGENT_MS_EDGE]); |
|
| 89 | - // Ignore MacOS because they always have hardware accelartion |
|
| 90 | - $isChromium = $isChromium && !$this->request->isUserAgent(['/Macintosh/']); |
|
| 91 | - // Allow to force the blur filter |
|
| 92 | - $forceEnableBlur = $user === null ? false : $this->config->getUserValue( |
|
| 93 | - $user->getUID(), |
|
| 94 | - 'theming', |
|
| 95 | - 'force_enable_blur_filter', |
|
| 96 | - ); |
|
| 97 | - $workingBlur = match($forceEnableBlur) { |
|
| 98 | - 'yes' => true, |
|
| 99 | - 'no' => false, |
|
| 100 | - default => !$isChromium |
|
| 101 | - }; |
|
| 102 | - |
|
| 103 | - $variables = [ |
|
| 104 | - '--color-main-background' => $colorMainBackground, |
|
| 105 | - '--color-main-background-rgb' => $colorMainBackgroundRGB, |
|
| 106 | - '--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), .97)', |
|
| 107 | - '--color-main-background-blur' => 'rgba(var(--color-main-background-rgb), .8)', |
|
| 108 | - '--filter-background-blur' => $workingBlur ? 'blur(25px)' : 'none', |
|
| 109 | - |
|
| 110 | - // to use like this: background-image: linear-gradient(0, var('--gradient-main-background)); |
|
| 111 | - '--gradient-main-background' => 'var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%', |
|
| 112 | - |
|
| 113 | - // used for different active/hover/focus/disabled states |
|
| 114 | - '--color-background-hover' => $this->util->darken($colorMainBackground, 4), |
|
| 115 | - '--color-background-dark' => $this->util->darken($colorMainBackground, 7), |
|
| 116 | - '--color-background-darker' => $this->util->darken($colorMainBackground, 14), |
|
| 117 | - |
|
| 118 | - '--color-placeholder-light' => $this->util->darken($colorMainBackground, 10), |
|
| 119 | - '--color-placeholder-dark' => $this->util->darken($colorMainBackground, 20), |
|
| 120 | - |
|
| 121 | - // max contrast for WCAG compliance |
|
| 122 | - '--color-main-text' => $colorMainText, |
|
| 123 | - '--color-text-maxcontrast' => $colorTextMaxcontrast, |
|
| 124 | - '--color-text-maxcontrast-default' => $colorTextMaxcontrast, |
|
| 125 | - '--color-text-maxcontrast-background-blur' => $this->util->darken($colorTextMaxcontrast, 7), |
|
| 126 | - '--color-text-light' => 'var(--color-main-text)', // deprecated |
|
| 127 | - '--color-text-lighter' => 'var(--color-text-maxcontrast)', // deprecated |
|
| 128 | - |
|
| 129 | - '--color-scrollbar' => 'var(--color-border-maxcontrast) transparent', |
|
| 130 | - |
|
| 131 | - // error/warning/success/info feedback colours |
|
| 132 | - '--color-error' => $colorError, |
|
| 133 | - '--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)), |
|
| 134 | - '--color-error-hover' => $this->util->mix($colorError, $colorMainBackground, 75), |
|
| 135 | - '--color-error-text' => $this->util->darken($colorError, 5), |
|
| 136 | - '--color-warning' => $colorWarning, |
|
| 137 | - '--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)), |
|
| 138 | - '--color-warning-hover' => $this->util->darken($colorWarning, 5), |
|
| 139 | - '--color-warning-text' => $this->util->darken($colorWarning, 7), |
|
| 140 | - '--color-success' => $colorSuccess, |
|
| 141 | - '--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)), |
|
| 142 | - '--color-success-hover' => $this->util->mix($colorSuccess, $colorMainBackground, 80), |
|
| 143 | - '--color-success-text' => $this->util->darken($colorSuccess, 4), |
|
| 144 | - '--color-info' => $colorInfo, |
|
| 145 | - '--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)), |
|
| 146 | - '--color-info-hover' => $this->util->mix($colorInfo, $colorMainBackground, 80), |
|
| 147 | - '--color-info-text' => $this->util->darken($colorInfo, 4), |
|
| 148 | - '--color-favorite' => '#A37200', |
|
| 149 | - |
|
| 150 | - // used for the icon loading animation |
|
| 151 | - '--color-loading-light' => '#cccccc', |
|
| 152 | - '--color-loading-dark' => '#444444', |
|
| 153 | - |
|
| 154 | - '--color-box-shadow-rgb' => $colorBoxShadowRGB, |
|
| 155 | - '--color-box-shadow' => 'rgba(var(--color-box-shadow-rgb), 0.5)', |
|
| 156 | - |
|
| 157 | - '--color-border' => $this->util->darken($colorMainBackground, 7), |
|
| 158 | - '--color-border-dark' => $this->util->darken($colorMainBackground, 14), |
|
| 159 | - '--color-border-maxcontrast' => $this->util->darken($colorMainBackground, 51), |
|
| 160 | - |
|
| 161 | - '--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'", |
|
| 162 | - '--default-font-size' => '15px', |
|
| 163 | - '--font-size-small' => '13px', |
|
| 164 | - // 1.5 * font-size for accessibility |
|
| 165 | - '--default-line-height' => '1.5', |
|
| 166 | - |
|
| 167 | - // TODO: support "(prefers-reduced-motion)" |
|
| 168 | - '--animation-quick' => '100ms', |
|
| 169 | - '--animation-slow' => '300ms', |
|
| 170 | - |
|
| 171 | - // Default variables -------------------------------------------- |
|
| 172 | - // Border width for input elements such as text fields and selects |
|
| 173 | - '--border-width-input' => '1px', |
|
| 174 | - '--border-width-input-focused' => '2px', |
|
| 175 | - |
|
| 176 | - // Border radii (new values) |
|
| 177 | - '--border-radius-small' => '4px', // For smaller elements |
|
| 178 | - '--border-radius-element' => '8px', // For interactive elements such as buttons, input, navigation and list items |
|
| 179 | - '--border-radius-container' => '12px', // For smaller containers like action menus |
|
| 180 | - '--border-radius-container-large' => '16px', // For bigger containers like body or modals |
|
| 181 | - |
|
| 182 | - // Border radii (deprecated) |
|
| 183 | - '--border-radius' => 'var(--border-radius-small)', |
|
| 184 | - '--border-radius-large' => 'var(--border-radius-element)', |
|
| 185 | - '--border-radius-rounded' => '28px', |
|
| 186 | - '--border-radius-pill' => '100px', |
|
| 187 | - |
|
| 188 | - '--default-clickable-area' => '34px', |
|
| 189 | - '--clickable-area-large' => '48px', |
|
| 190 | - '--clickable-area-small' => '24px', |
|
| 191 | - |
|
| 192 | - '--default-grid-baseline' => '4px', |
|
| 193 | - |
|
| 194 | - // header / navigation bar |
|
| 195 | - '--header-height' => '50px', |
|
| 196 | - '--header-menu-item-height' => '44px', |
|
| 197 | - /* An alpha mask to be applied to all icons on the navigation bar (header menu). |
|
| 23 | + use CommonThemeTrait; |
|
| 24 | + |
|
| 25 | + public string $defaultPrimaryColor; |
|
| 26 | + public string $primaryColor; |
|
| 27 | + |
|
| 28 | + public function __construct( |
|
| 29 | + public Util $util, |
|
| 30 | + public ThemingDefaults $themingDefaults, |
|
| 31 | + public IUserSession $userSession, |
|
| 32 | + public IURLGenerator $urlGenerator, |
|
| 33 | + public ImageManager $imageManager, |
|
| 34 | + public IConfig $config, |
|
| 35 | + public IL10N $l, |
|
| 36 | + public IAppManager $appManager, |
|
| 37 | + private ?IRequest $request, |
|
| 38 | + ) { |
|
| 39 | + $this->defaultPrimaryColor = $this->themingDefaults->getDefaultColorPrimary(); |
|
| 40 | + $this->primaryColor = $this->themingDefaults->getColorPrimary(); |
|
| 41 | + } |
|
| 42 | + |
|
| 43 | + public function getId(): string { |
|
| 44 | + return 'default'; |
|
| 45 | + } |
|
| 46 | + |
|
| 47 | + public function getType(): int { |
|
| 48 | + return ITheme::TYPE_THEME; |
|
| 49 | + } |
|
| 50 | + |
|
| 51 | + public function getTitle(): string { |
|
| 52 | + return $this->l->t('System default theme'); |
|
| 53 | + } |
|
| 54 | + |
|
| 55 | + public function getEnableLabel(): string { |
|
| 56 | + return $this->l->t('Enable the system default'); |
|
| 57 | + } |
|
| 58 | + |
|
| 59 | + public function getDescription(): string { |
|
| 60 | + return $this->l->t('Using the default system appearance.'); |
|
| 61 | + } |
|
| 62 | + |
|
| 63 | + public function getMediaQuery(): string { |
|
| 64 | + return ''; |
|
| 65 | + } |
|
| 66 | + |
|
| 67 | + public function getMeta(): array { |
|
| 68 | + return []; |
|
| 69 | + } |
|
| 70 | + |
|
| 71 | + public function getCSSVariables(): array { |
|
| 72 | + $colorMainText = '#222222'; |
|
| 73 | + $colorMainTextRgb = join(',', $this->util->hexToRGB($colorMainText)); |
|
| 74 | + // Color that still provides enough contrast for text, so we need a ratio of 4.5:1 on main background AND hover |
|
| 75 | + $colorTextMaxcontrast = '#6b6b6b'; // 4.5 : 1 for hover background and background dark |
|
| 76 | + $colorMainBackground = '#ffffff'; |
|
| 77 | + $colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground)); |
|
| 78 | + $colorBoxShadow = $this->util->darken($colorMainBackground, 70); |
|
| 79 | + $colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow)); |
|
| 80 | + |
|
| 81 | + $colorError = '#DB0606'; |
|
| 82 | + $colorWarning = '#A37200'; |
|
| 83 | + $colorSuccess = '#2d7b41'; |
|
| 84 | + $colorInfo = '#0071ad'; |
|
| 85 | + |
|
| 86 | + $user = $this->userSession->getUser(); |
|
| 87 | + // Chromium based browsers currently (2024) have huge performance issues with blur filters |
|
| 88 | + $isChromium = $this->request !== null && $this->request->isUserAgent([Request::USER_AGENT_CHROME, Request::USER_AGENT_MS_EDGE]); |
|
| 89 | + // Ignore MacOS because they always have hardware accelartion |
|
| 90 | + $isChromium = $isChromium && !$this->request->isUserAgent(['/Macintosh/']); |
|
| 91 | + // Allow to force the blur filter |
|
| 92 | + $forceEnableBlur = $user === null ? false : $this->config->getUserValue( |
|
| 93 | + $user->getUID(), |
|
| 94 | + 'theming', |
|
| 95 | + 'force_enable_blur_filter', |
|
| 96 | + ); |
|
| 97 | + $workingBlur = match($forceEnableBlur) { |
|
| 98 | + 'yes' => true, |
|
| 99 | + 'no' => false, |
|
| 100 | + default => !$isChromium |
|
| 101 | + }; |
|
| 102 | + |
|
| 103 | + $variables = [ |
|
| 104 | + '--color-main-background' => $colorMainBackground, |
|
| 105 | + '--color-main-background-rgb' => $colorMainBackgroundRGB, |
|
| 106 | + '--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), .97)', |
|
| 107 | + '--color-main-background-blur' => 'rgba(var(--color-main-background-rgb), .8)', |
|
| 108 | + '--filter-background-blur' => $workingBlur ? 'blur(25px)' : 'none', |
|
| 109 | + |
|
| 110 | + // to use like this: background-image: linear-gradient(0, var('--gradient-main-background)); |
|
| 111 | + '--gradient-main-background' => 'var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%', |
|
| 112 | + |
|
| 113 | + // used for different active/hover/focus/disabled states |
|
| 114 | + '--color-background-hover' => $this->util->darken($colorMainBackground, 4), |
|
| 115 | + '--color-background-dark' => $this->util->darken($colorMainBackground, 7), |
|
| 116 | + '--color-background-darker' => $this->util->darken($colorMainBackground, 14), |
|
| 117 | + |
|
| 118 | + '--color-placeholder-light' => $this->util->darken($colorMainBackground, 10), |
|
| 119 | + '--color-placeholder-dark' => $this->util->darken($colorMainBackground, 20), |
|
| 120 | + |
|
| 121 | + // max contrast for WCAG compliance |
|
| 122 | + '--color-main-text' => $colorMainText, |
|
| 123 | + '--color-text-maxcontrast' => $colorTextMaxcontrast, |
|
| 124 | + '--color-text-maxcontrast-default' => $colorTextMaxcontrast, |
|
| 125 | + '--color-text-maxcontrast-background-blur' => $this->util->darken($colorTextMaxcontrast, 7), |
|
| 126 | + '--color-text-light' => 'var(--color-main-text)', // deprecated |
|
| 127 | + '--color-text-lighter' => 'var(--color-text-maxcontrast)', // deprecated |
|
| 128 | + |
|
| 129 | + '--color-scrollbar' => 'var(--color-border-maxcontrast) transparent', |
|
| 130 | + |
|
| 131 | + // error/warning/success/info feedback colours |
|
| 132 | + '--color-error' => $colorError, |
|
| 133 | + '--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)), |
|
| 134 | + '--color-error-hover' => $this->util->mix($colorError, $colorMainBackground, 75), |
|
| 135 | + '--color-error-text' => $this->util->darken($colorError, 5), |
|
| 136 | + '--color-warning' => $colorWarning, |
|
| 137 | + '--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)), |
|
| 138 | + '--color-warning-hover' => $this->util->darken($colorWarning, 5), |
|
| 139 | + '--color-warning-text' => $this->util->darken($colorWarning, 7), |
|
| 140 | + '--color-success' => $colorSuccess, |
|
| 141 | + '--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)), |
|
| 142 | + '--color-success-hover' => $this->util->mix($colorSuccess, $colorMainBackground, 80), |
|
| 143 | + '--color-success-text' => $this->util->darken($colorSuccess, 4), |
|
| 144 | + '--color-info' => $colorInfo, |
|
| 145 | + '--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)), |
|
| 146 | + '--color-info-hover' => $this->util->mix($colorInfo, $colorMainBackground, 80), |
|
| 147 | + '--color-info-text' => $this->util->darken($colorInfo, 4), |
|
| 148 | + '--color-favorite' => '#A37200', |
|
| 149 | + |
|
| 150 | + // used for the icon loading animation |
|
| 151 | + '--color-loading-light' => '#cccccc', |
|
| 152 | + '--color-loading-dark' => '#444444', |
|
| 153 | + |
|
| 154 | + '--color-box-shadow-rgb' => $colorBoxShadowRGB, |
|
| 155 | + '--color-box-shadow' => 'rgba(var(--color-box-shadow-rgb), 0.5)', |
|
| 156 | + |
|
| 157 | + '--color-border' => $this->util->darken($colorMainBackground, 7), |
|
| 158 | + '--color-border-dark' => $this->util->darken($colorMainBackground, 14), |
|
| 159 | + '--color-border-maxcontrast' => $this->util->darken($colorMainBackground, 51), |
|
| 160 | + |
|
| 161 | + '--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'", |
|
| 162 | + '--default-font-size' => '15px', |
|
| 163 | + '--font-size-small' => '13px', |
|
| 164 | + // 1.5 * font-size for accessibility |
|
| 165 | + '--default-line-height' => '1.5', |
|
| 166 | + |
|
| 167 | + // TODO: support "(prefers-reduced-motion)" |
|
| 168 | + '--animation-quick' => '100ms', |
|
| 169 | + '--animation-slow' => '300ms', |
|
| 170 | + |
|
| 171 | + // Default variables -------------------------------------------- |
|
| 172 | + // Border width for input elements such as text fields and selects |
|
| 173 | + '--border-width-input' => '1px', |
|
| 174 | + '--border-width-input-focused' => '2px', |
|
| 175 | + |
|
| 176 | + // Border radii (new values) |
|
| 177 | + '--border-radius-small' => '4px', // For smaller elements |
|
| 178 | + '--border-radius-element' => '8px', // For interactive elements such as buttons, input, navigation and list items |
|
| 179 | + '--border-radius-container' => '12px', // For smaller containers like action menus |
|
| 180 | + '--border-radius-container-large' => '16px', // For bigger containers like body or modals |
|
| 181 | + |
|
| 182 | + // Border radii (deprecated) |
|
| 183 | + '--border-radius' => 'var(--border-radius-small)', |
|
| 184 | + '--border-radius-large' => 'var(--border-radius-element)', |
|
| 185 | + '--border-radius-rounded' => '28px', |
|
| 186 | + '--border-radius-pill' => '100px', |
|
| 187 | + |
|
| 188 | + '--default-clickable-area' => '34px', |
|
| 189 | + '--clickable-area-large' => '48px', |
|
| 190 | + '--clickable-area-small' => '24px', |
|
| 191 | + |
|
| 192 | + '--default-grid-baseline' => '4px', |
|
| 193 | + |
|
| 194 | + // header / navigation bar |
|
| 195 | + '--header-height' => '50px', |
|
| 196 | + '--header-menu-item-height' => '44px', |
|
| 197 | + /* An alpha mask to be applied to all icons on the navigation bar (header menu). |
|
| 198 | 198 | * Icons are have a size of 20px but usually we use MDI which have a content of 16px so 2px padding top bottom, |
| 199 | 199 | * for better gradient we must at first begin at those 2px (10% of height) as start and stop positions. |
| 200 | 200 | */ |
| 201 | - '--header-menu-icon-mask' => 'linear-gradient(var(--color-background-plain-text) 25%, color-mix(in srgb, var(--color-background-plain-text), 55% transparent) 90%) alpha', |
|
| 202 | - |
|
| 203 | - // various structure data |
|
| 204 | - '--navigation-width' => '300px', |
|
| 205 | - '--sidebar-min-width' => '300px', |
|
| 206 | - '--sidebar-max-width' => '500px', |
|
| 207 | - |
|
| 208 | - // Border radius of the body container |
|
| 209 | - '--body-container-radius' => 'var(--border-radius-container-large)', |
|
| 210 | - // Margin of the body container |
|
| 211 | - '--body-container-margin' => 'calc(var(--default-grid-baseline) * 2)', |
|
| 212 | - // Height of the body container to fully fill the view port |
|
| 213 | - '--body-height' => 'calc(100% - env(safe-area-inset-bottom) - var(--header-height) - var(--body-container-margin))', |
|
| 214 | - |
|
| 215 | - // mobile. Keep in sync with core/src/init.js |
|
| 216 | - '--breakpoint-mobile' => '1024px', |
|
| 217 | - '--background-invert-if-dark' => 'no', |
|
| 218 | - '--background-invert-if-bright' => 'invert(100%)', |
|
| 219 | - '--background-image-invert-if-bright' => 'no', |
|
| 220 | - ]; |
|
| 221 | - |
|
| 222 | - // Primary variables |
|
| 223 | - $variables = array_merge($variables, $this->generatePrimaryVariables($colorMainBackground, $colorMainText)); |
|
| 224 | - $variables = array_merge($variables, $this->generateGlobalBackgroundVariables()); |
|
| 225 | - $variables = array_merge($variables, $this->generateUserBackgroundVariables()); |
|
| 226 | - |
|
| 227 | - return $variables; |
|
| 228 | - } |
|
| 229 | - |
|
| 230 | - public function getCustomCss(): string { |
|
| 231 | - return ''; |
|
| 232 | - } |
|
| 201 | + '--header-menu-icon-mask' => 'linear-gradient(var(--color-background-plain-text) 25%, color-mix(in srgb, var(--color-background-plain-text), 55% transparent) 90%) alpha', |
|
| 202 | + |
|
| 203 | + // various structure data |
|
| 204 | + '--navigation-width' => '300px', |
|
| 205 | + '--sidebar-min-width' => '300px', |
|
| 206 | + '--sidebar-max-width' => '500px', |
|
| 207 | + |
|
| 208 | + // Border radius of the body container |
|
| 209 | + '--body-container-radius' => 'var(--border-radius-container-large)', |
|
| 210 | + // Margin of the body container |
|
| 211 | + '--body-container-margin' => 'calc(var(--default-grid-baseline) * 2)', |
|
| 212 | + // Height of the body container to fully fill the view port |
|
| 213 | + '--body-height' => 'calc(100% - env(safe-area-inset-bottom) - var(--header-height) - var(--body-container-margin))', |
|
| 214 | + |
|
| 215 | + // mobile. Keep in sync with core/src/init.js |
|
| 216 | + '--breakpoint-mobile' => '1024px', |
|
| 217 | + '--background-invert-if-dark' => 'no', |
|
| 218 | + '--background-invert-if-bright' => 'invert(100%)', |
|
| 219 | + '--background-image-invert-if-bright' => 'no', |
|
| 220 | + ]; |
|
| 221 | + |
|
| 222 | + // Primary variables |
|
| 223 | + $variables = array_merge($variables, $this->generatePrimaryVariables($colorMainBackground, $colorMainText)); |
|
| 224 | + $variables = array_merge($variables, $this->generateGlobalBackgroundVariables()); |
|
| 225 | + $variables = array_merge($variables, $this->generateUserBackgroundVariables()); |
|
| 226 | + |
|
| 227 | + return $variables; |
|
| 228 | + } |
|
| 229 | + |
|
| 230 | + public function getCustomCss(): string { |
|
| 231 | + return ''; |
|
| 232 | + } |
|
| 233 | 233 | } |
