diff options
| -rw-r--r-- | apps/settings/css/settings.css | 2 | ||||
| -rw-r--r-- | apps/settings/css/settings.scss | 2 | ||||
| -rw-r--r-- | apps/theming/css/default.css | 11 | ||||
| -rw-r--r-- | apps/theming/lib/Themes/DefaultTheme.php | 16 |
4 files changed, 20 insertions, 11 deletions
diff --git a/apps/settings/css/settings.css b/apps/settings/css/settings.css index 53cee86072e..1ce88489a23 100644 --- a/apps/settings/css/settings.css +++ b/apps/settings/css/settings.css @@ -223,7 +223,7 @@ select#timezone, select#languageinput, select#localeinput { text-decoration: underline; } .development-notice a:not(.link-button):hover { - background-color: var(--color-primary-element-lighter); + background-color: var(--color-primary-element-hover); } .link-button { diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss index 806dfafced7..3c32d90df14 100644 --- a/apps/settings/css/settings.scss +++ b/apps/settings/css/settings.scss @@ -190,7 +190,7 @@ select { a:not(.link-button) { text-decoration: underline; &:hover { - background-color: var(--color-primary-element-lighter); + background-color: var(--color-primary-element-hover); } } } diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css index 41a1167a4a5..134e6e0aad0 100644 --- a/apps/theming/css/default.css +++ b/apps/theming/css/default.css @@ -18,10 +18,13 @@ --color-primary-light-hover: #dbe7ee; --color-primary-text-dark: #ededed; --color-primary-element: #0082c9; - --color-primary-element-hover: #198ece; - --color-primary-element-light: #17adff; - --color-primary-element-lighter: #d8ecf6; - --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-element-light) 100%); + --color-primary-element-text: #ffffff; + --color-primary-element-hover: #329bd3; + --color-primary-element-light: #e5f2f9; + --color-primary-element-light-text: #0082c9; + --color-primary-element-light-hover: #dbe7ee; + --color-primary-element-text-dark: #ededed; + --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); --color-main-text: #222222; --color-text-maxcontrast: #767676; --color-text-light: #222222; diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php index 82bfb000e93..42b335dbe08 100644 --- a/apps/theming/lib/Themes/DefaultTheme.php +++ b/apps/theming/lib/Themes/DefaultTheme.php @@ -90,6 +90,9 @@ class DefaultTheme implements ITheme { $colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow)); $colorPrimaryLight = $this->util->mix($this->primaryColor, $colorMainBackground, -80); + $colorPrimaryElement = $this->util->elementColor($this->primaryColor); + $colorPrimaryElementLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80); + $hasCustomLogoHeader = $this->imageManager->hasImage('logo') || $this->imageManager->hasImage('logoheader'); $hasCustomPrimaryColour = !empty($this->config->getAppValue('theming', 'color')); @@ -120,12 +123,15 @@ class DefaultTheme implements ITheme { '--color-primary-light-hover' => $this->util->mix($colorPrimaryLight, $colorMainText, 90), '--color-primary-text-dark' => $this->util->darken($this->util->invertTextColor($this->primaryColor) ? '#000000' : '#ffffff', 7), // used for buttons, inputs... - '--color-primary-element' => $this->util->elementColor($this->primaryColor), - '--color-primary-element-hover' => $this->util->mix($this->util->elementColor($this->primaryColor), $colorMainBackground, 80), - '--color-primary-element-light' => $this->util->lighten($this->util->elementColor($this->primaryColor), 15), - '--color-primary-element-lighter' => $this->util->mix($this->util->elementColor($this->primaryColor), $colorMainBackground, -70), + '--color-primary-element' => $colorPrimaryElement, + '--color-primary-element-text' => $this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff', + '--color-primary-element-hover' => $this->util->mix($colorPrimaryElement, $colorMainBackground, 60), + '--color-primary-element-light' => $colorPrimaryElementLight, + '--color-primary-element-light-text' => $colorPrimaryElement, + '--color-primary-element-light-hover' => $this->util->mix($colorPrimaryElementLight, $colorMainText, 90), + '--color-primary-element-text-dark' => $this->util->darken($this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff', 7), // to use like this: background-image: var(--gradient-primary-background); - '--gradient-primary-background' => 'linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-element-light) 100%)', + '--gradient-primary-background' => 'linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%)', // max contrast for WCAG compliance '--color-main-text' => $colorMainText, |